├── .devcontainer └── devcontainer.json ├── .dockerignore ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .git-blame-ignore-revs ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ └── bug-template-for-jira.md ├── pr-title-checker-config.json ├── pull_request_template.md └── workflows │ ├── alpha.yml │ ├── ci.yml │ ├── playwright.yml │ ├── pr-title-checker.yml │ ├── release.yml │ └── semver.yml ├── .gitignore ├── .markdownlint.json ├── .npmrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .stylelintignore ├── .stylelintrc.json ├── .vscode ├── extensions.json ├── settings.json └── tasks.json ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── .babelrc ├── .eslintignore ├── docs-components │ ├── AccessibilityChecklist.tsx │ ├── AccessibilitySection.tsx │ ├── App.tsx │ ├── AppLayout.tsx │ ├── Card.tsx │ ├── Checkerboard.tsx │ ├── ColorPalette.tsx │ ├── ColorTile.tsx │ ├── CombinationNew.tsx │ ├── DevelopmentEditor.tsx │ ├── DocSearch.tsx │ ├── DocsSideNavigation.tsx │ ├── DocsVisualRefreshTypographyStyle.tsx │ ├── ErrorBoundary.tsx │ ├── ExampleCode.tsx │ ├── FeedbackBannerCallout.tsx │ ├── Footer.tsx │ ├── GeneratedPropTable.tsx │ ├── GestaltLogo.tsx │ ├── Header.tsx │ ├── HeaderMenu.tsx │ ├── IllustrationCard.tsx │ ├── IllustrationContainer.tsx │ ├── IllustrationSection.tsx │ ├── InternalDocumentationSection.tsx │ ├── InternalOnlyIconButton.tsx │ ├── LocalizationSection.tsx │ ├── MainSection.tsx │ ├── MainSectionCard.tsx │ ├── MainSectionSubsection.tsx │ ├── Markdown.tsx │ ├── MarkdownPage.tsx │ ├── NavLink.tsx │ ├── Overview.tsx │ ├── OverviewList.tsx │ ├── Page.tsx │ ├── PageHeader.tsx │ ├── PageHeaderQualitySummary.tsx │ ├── PatternBarFill.tsx │ ├── PatternLineMarker.tsx │ ├── PrincipleItem.tsx │ ├── PropTable.tsx │ ├── QualityChecklist.tsx │ ├── ReducedMotionGIF.tsx │ ├── ResourcesFooter.tsx │ ├── SandpackExample.tsx │ ├── SearchContent.tsx │ ├── SkipToContent.tsx │ ├── StatusData.tsx │ ├── Toc.tsx │ ├── TokenExample.tsx │ ├── TokenTable.tsx │ ├── appContext.tsx │ ├── atomDark.ts │ ├── buttons │ │ ├── CodeExampleDarkModeButton.tsx │ │ ├── CodeExampleTextDirectionButton.tsx │ │ ├── CollapseExpandCodeButton.tsx │ │ ├── CopyCodeButton.tsx │ │ ├── CopyLinkButton.tsx │ │ ├── OpenInCodeSandboxButton.tsx │ │ ├── OpenSandboxButton.tsx │ │ ├── ShowHideEditorButton.tsx │ │ ├── SidebarPlatformSwitcher.tsx │ │ └── trackButtonClick.ts │ ├── clipboardCopy.ts │ ├── consts.ts │ ├── contexts │ │ ├── DocsConfigProvider.tsx │ │ ├── DocsDefaultLabelProvider.tsx │ │ ├── DocsExperimentProvider.tsx │ │ └── LocalFilesProvider.tsx │ ├── createHydra.ts │ ├── data │ │ ├── componentStatusMessaging.ts │ │ ├── components.tsx │ │ ├── foundations.tsx │ │ ├── teamSupport.tsx │ │ ├── types.ts │ │ └── utils │ │ │ ├── getByCategory.test.ts │ │ │ ├── getByCategory.ts │ │ │ ├── getByPlatform.test.ts │ │ │ ├── getByPlatform.ts │ │ │ ├── prettyPrintPlatform.ts │ │ │ └── test-fixtures.tsx │ ├── docgen.ts │ ├── handleCodeSandbox.ts │ ├── highlight.tsx │ ├── navigationContext.tsx │ ├── siteIndex.ts │ └── useGetSideNavItems.tsx ├── docs.css ├── exampleCleanupLoader.js ├── examples │ ├── README.md │ ├── accessibility │ │ ├── useFocusVisibleExample.tsx │ │ └── useReducedMotionExample.tsx │ ├── accordion │ │ ├── exampleWithExternalControl.tsx │ │ ├── expandable.tsx │ │ ├── expandableGroup.tsx │ │ ├── expandableWithErrorType.tsx │ │ ├── expandableWithIconBadgeIconButton.tsx │ │ ├── localizationLabels.tsx │ │ ├── mainExample.tsx │ │ ├── sizesExample.tsx │ │ ├── staticVariant.tsx │ │ ├── staticWithBadge.tsx │ │ ├── staticWithErrorType.tsx │ │ ├── staticWithIcon.tsx │ │ └── staticWithIconButton.tsx │ ├── activationcard │ │ ├── completeVariant.tsx │ │ ├── localizationLabels.tsx │ │ ├── mainExample.tsx │ │ ├── needsAttentionVariant.tsx │ │ ├── notStartedVariant.tsx │ │ └── pendingVariant.tsx │ ├── animation │ │ ├── celebrationExample.tsx │ │ ├── easeExample.tsx │ │ ├── educationExample.tsx │ │ ├── feedbackExample.tsx │ │ ├── transitionExample.tsx │ │ └── useExample.tsx │ ├── avatar │ │ ├── colorExample.tsx │ │ ├── ideasExample.tsx │ │ ├── mainExample.tsx │ │ ├── nameExample.tsx │ │ ├── noEmojiExample.tsx │ │ ├── noImageSourceExample.tsx │ │ ├── overExample.tsx │ │ ├── personExample.tsx │ │ ├── shapeExample.tsx │ │ ├── sizingExample.tsx │ │ └── verifiedExample.tsx │ ├── avatarGroup │ │ ├── accessibility.tsx │ │ ├── ideas.tsx │ │ ├── main.tsx │ │ ├── noEmoji.tsx │ │ ├── noImageSource.tsx │ │ ├── person.tsx │ │ ├── roleButton.tsx │ │ ├── roleLink.tsx │ │ └── sizing.tsx │ ├── avatargroupcluster │ │ ├── avatar.tsx │ │ ├── counter.tsx │ │ ├── main.tsx │ │ └── sizes.tsx │ ├── badge │ │ ├── doAlign.tsx │ │ ├── doColor.tsx │ │ ├── dontColor.tsx │ │ ├── dontComplex.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── variantsOverMedia.tsx │ │ ├── variantsPositioning.tsx │ │ └── variantsType.tsx │ ├── bannercallout │ │ ├── accessibilityExample.tsx │ │ ├── actionsExample.tsx │ │ ├── dismissibleExample.tsx │ │ ├── dontStack.tsx │ │ ├── dontUseForMarketing.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── placeAtTop.tsx │ │ ├── productMessages.tsx │ │ ├── variantDefault.tsx │ │ ├── variantError.tsx │ │ ├── variantInfo.tsx │ │ ├── variantMessage.tsx │ │ ├── variantRecommendation.tsx │ │ ├── variantSuccess.tsx │ │ └── variantWarning.tsx │ ├── banneroverlay │ │ ├── callToAction.tsx │ │ ├── ctaDismiss.tsx │ │ ├── desktop.tsx │ │ ├── dismissButton.tsx │ │ ├── doConcise.tsx │ │ ├── doEducate.tsx │ │ ├── doNavigate.tsx │ │ ├── dontCritical.tsx │ │ ├── dontLong.tsx │ │ ├── dontStack.tsx │ │ ├── icon.tsx │ │ ├── image.tsx │ │ ├── main.tsx │ │ ├── message.tsx │ │ └── mobile.tsx │ ├── bannerslim │ │ ├── bareBannerSlimExample.tsx │ │ ├── compactBannerSlimExample.tsx │ │ ├── dismissableExample.tsx │ │ ├── dontCombineWithBannerCallout.tsx │ │ ├── dontUseAsBannerCallout.tsx │ │ ├── dontUseAsToast.tsx │ │ ├── dontUseForDenseInterfaces.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── messagePropExample.tsx │ │ ├── oneBannerSlimPerSection.tsx │ │ ├── placeNearMostRelatedElement.tsx │ │ ├── primaryActionExample.tsx │ │ ├── responsiveExample.tsx │ │ ├── systemMessagesExample.tsx │ │ ├── variantError.tsx │ │ ├── variantInfo.tsx │ │ ├── variantNeutral.tsx │ │ ├── variantRecommendation.tsx │ │ ├── variantSuccess.tsx │ │ └── variantWarning.tsx │ ├── bannerupsell │ │ ├── actionsVariant.tsx │ │ ├── dontShowSameOnceDismissed.tsx │ │ ├── dontStack.tsx │ │ ├── dontUseForCriticalInfo.tsx │ │ ├── iconVariant.tsx │ │ ├── imageVariant.tsx │ │ ├── labelsExample.tsx │ │ ├── localizationLabels.tsx │ │ ├── mainExample.tsx │ │ ├── messagePropForVisualStyle.tsx │ │ ├── multipleTextField.tsx │ │ ├── placeAtTopOfPage.tsx │ │ ├── planTiming.tsx │ │ ├── singleTextField.tsx │ │ └── useForMarketing.tsx │ ├── box │ │ ├── absolute.tsx │ │ ├── as.tsx │ │ ├── autoMargins.tsx │ │ ├── buildingBlock.tsx │ │ ├── divs.tsx │ │ ├── main.tsx │ │ ├── notAllowed.tsx │ │ ├── overflow.tsx │ │ ├── padding.tsx │ │ ├── ref.tsx │ │ ├── responsive.tsx │ │ ├── role.tsx │ │ ├── rtl.tsx │ │ ├── sizing.tsx │ │ ├── visuallyHidden.tsx │ │ └── zIndex.tsx │ ├── button │ │ ├── accessibilityDropdownExample.tsx │ │ ├── colors.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── focus.tsx │ │ ├── iconExample.tsx │ │ ├── iconTooltipToExplainDo.tsx │ │ ├── iconTooltipToExplainDont.tsx │ │ ├── keepSimpleTextDo.tsx │ │ ├── keepSimpleTextDont.tsx │ │ ├── lineclamp.tsx │ │ ├── main.tsx │ │ ├── placePrimaryButtonDo.tsx │ │ ├── placePrimaryButtonDont.tsx │ │ ├── selectedStateExample.tsx │ │ ├── showFullTextDo.tsx │ │ ├── showFullTextDont.tsx │ │ ├── washColors.tsx │ │ └── width.tsx │ ├── buttongroup │ │ ├── main.tsx │ │ └── variantsWrap.tsx │ ├── buttonlink │ │ ├── colors.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── focus.tsx │ │ ├── iconEnd.tsx │ │ ├── iconTooltipToExplainDo.tsx │ │ ├── iconTooltipToExplainDont.tsx │ │ ├── lineclamp.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── placePrimaryButtonDo.tsx │ │ ├── placePrimaryButtonDont.tsx │ │ ├── relAndTargetExample.tsx │ │ ├── showFullTextDo.tsx │ │ ├── showFullTextDont.tsx │ │ ├── washColors.tsx │ │ └── width.tsx │ ├── buttonsocial │ │ ├── email.tsx │ │ ├── facebook.tsx │ │ ├── google.tsx │ │ └── main.tsx │ ├── buttontoggle │ │ ├── changeLabelsDo.tsx │ │ ├── colorpicker.tsx │ │ ├── colors.tsx │ │ ├── confirmationDo.tsx │ │ ├── consistencyDo.tsx │ │ ├── default.tsx │ │ ├── disabled.tsx │ │ ├── dropdown.tsx │ │ ├── focus.tsx │ │ ├── icon.tsx │ │ ├── iconOnly.tsx │ │ ├── localization.tsx │ │ ├── locationDo.tsx │ │ ├── main.tsx │ │ ├── selected.tsx │ │ └── thumbnail.tsx │ ├── chartgraph │ │ ├── accessibility.tsx │ │ ├── barColumn.tsx │ │ ├── barHorizontal.tsx │ │ ├── biaxial.tsx │ │ ├── colors.tsx │ │ ├── combo.tsx │ │ ├── customLabelBarColumn.tsx │ │ ├── customLabelBarHorizontal.tsx │ │ ├── customTooltip.tsx │ │ ├── decalBars.tsx │ │ ├── decalLines.tsx │ │ ├── doBiaxial.tsx │ │ ├── doColor.tsx │ │ ├── doLimit.tsx │ │ ├── doSameColor.tsx │ │ ├── dontBiaxial.tsx │ │ ├── dontLimit.tsx │ │ ├── labelBarColumn.tsx │ │ ├── labelBarHorizontal.tsx │ │ ├── layout.tsx │ │ ├── legend.tsx │ │ ├── line.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── neutral.tsx │ │ ├── opacity.tsx │ │ ├── precision.tsx │ │ ├── range.tsx │ │ ├── referenceArea.tsx │ │ ├── responsive.tsx │ │ ├── selectorTagData.tsx │ │ ├── selectorTileData.tsx │ │ ├── stackedBar.tsx │ │ ├── tickFormatter.tsx │ │ ├── timeseries.tsx │ │ ├── title.tsx │ │ └── tooltip.tsx │ ├── checkbox │ │ ├── checked.tsx │ │ ├── disabled.tsx │ │ ├── dontUseForOneSelection.tsx │ │ ├── dontUseNumerousInTableRows.tsx │ │ ├── dontUseToToggleState.tsx │ │ ├── dontUseTruncatedText.tsx │ │ ├── dontVerticallyCenterInputs.tsx │ │ ├── error.tsx │ │ ├── errorMessageExample.tsx │ │ ├── indeterminate.tsx │ │ ├── keepLabelsAndLegendsClear.tsx │ │ ├── labelVisibilityExample.tsx │ │ ├── legendsExample.tsx │ │ ├── main.tsx │ │ ├── sizeExample.tsx │ │ ├── unchecked.tsx │ │ ├── useAtStartOfTableRow.tsx │ │ ├── useForMultiSelection.tsx │ │ ├── useSingleInForms.tsx │ │ ├── useVerticalAlignment.tsx │ │ ├── withHelperTextExample.tsx │ │ └── withImageExample.tsx │ ├── collage │ │ ├── main.tsx │ │ ├── variantsColumns.tsx │ │ ├── variantsColumnsCoverImage.tsx │ │ ├── variantsCoverImage.tsx │ │ ├── variantsGutter.tsx │ │ └── variantsLayoutKey.tsx │ ├── colors │ │ ├── alternativeColorTextExample.tsx │ │ ├── alternativeColorTokensExample.tsx │ │ ├── alternativeColorsExample.tsx │ │ ├── appropriateColorTokensExample.tsx │ │ ├── communicateStatusExample.tsx │ │ ├── distinctionExample.tsx │ │ ├── establishedExample.tsx │ │ ├── extendedColorsExample.tsx │ │ ├── invalidElevationExample.tsx │ │ ├── repurposeExample.tsx │ │ ├── soleIndicatorExample.tsx │ │ └── validElevationExample.tsx │ ├── colorschemeprovider │ │ └── variantsColorScheme.tsx │ ├── column │ │ ├── variantBasic.tsx │ │ ├── variantEqualHeight.tsx │ │ ├── variantGutters.tsx │ │ ├── variantResizingColumns.tsx │ │ ├── variantStackingColumns.tsx │ │ ├── variantThreeColumn.tsx │ │ ├── variantTwoColumn.tsx │ │ └── variantTwoColumnUnequal.tsx │ ├── combobox │ │ ├── controlled.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── helperText.tsx │ │ ├── hiddenLabel.tsx │ │ ├── labelled.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── programmatic.tsx │ │ ├── readOnly.tsx │ │ ├── sizes.tsx │ │ ├── subtext.tsx │ │ ├── tags.tsx │ │ ├── uncontrolled.tsx │ │ └── visibleLabel.tsx │ ├── container │ │ └── variantsResponsive.tsx │ ├── datapoint │ │ ├── displayChangeInValueOverTime.tsx │ │ ├── dontUseForLargeVolumesOfData.tsx │ │ ├── dontUseLongDecimalValuesForTrend.tsx │ │ ├── dontUseSubjectiveValuesForValue.tsx │ │ ├── explicitTrendSentimentSettings.tsx │ │ ├── mainExample.tsx │ │ ├── makeSureToLocalizeNumericValues.tsx │ │ ├── provideContextDetailFramingWithTooltip.tsx │ │ ├── sizeExample1.tsx │ │ ├── sizeExample2.tsx │ │ ├── useFullNumberWithLocaleSeparators.tsx │ │ ├── usePositiveTrendSentiment.tsx │ │ └── withBadgeExample.tsx │ ├── datavisualization │ │ └── mobilegraphExample.tsx │ ├── datefield │ │ ├── disabled.tsx │ │ ├── disabledDates.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── helperText.tsx │ │ ├── main.tsx │ │ ├── readOnly.tsx │ │ ├── sizes.tsx │ │ └── states.tsx │ ├── datepicker │ │ ├── controlled.tsx │ │ ├── disable.tsx │ │ ├── disableSelected.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── helperText.tsx │ │ ├── main.tsx │ │ ├── mobile.tsx │ │ ├── preselected.tsx │ │ ├── range.tsx │ │ ├── readOnly.tsx │ │ ├── selectLists.tsx │ │ └── size.tsx │ ├── daterange │ │ ├── disabledFuture.tsx │ │ ├── disabledPast.tsx │ │ ├── errorMessaging.tsx │ │ ├── futureRadioGroup.tsx │ │ ├── implementation.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── mobile.tsx │ │ ├── pastRadioGroup.tsx │ │ ├── readOnly.tsx │ │ ├── secondaryDateRange.tsx │ │ └── secondaryErrorMessages.tsx │ ├── defaultlabelprovider │ │ ├── no-translations.tsx │ │ └── translations.tsx │ ├── designtokensprovider │ │ └── configuration.tsx │ ├── devicetypeprovider │ │ └── implementation.tsx │ ├── divider │ │ ├── dontCreateYourOwn.tsx │ │ ├── dontInset.tsx │ │ ├── dontOveruse.tsx │ │ ├── dontUseForDecoration.tsx │ │ ├── mainExample.tsx │ │ ├── orientationExample1.tsx │ │ ├── orientationExample2.tsx │ │ ├── useDefaultGestalt.tsx │ │ ├── useFromEdgeToEdge.tsx │ │ ├── useToSeparateCollections.tsx │ │ └── useWhitespaceToSeparateGroups.tsx │ ├── dropdown │ │ ├── action.tsx │ │ ├── avatar.tsx │ │ ├── badges.tsx │ │ ├── composability.tsx │ │ ├── customHeader.tsx │ │ ├── customItem.tsx │ │ ├── disabled.tsx │ │ ├── doFeatures.tsx │ │ ├── doIcons.tsx │ │ ├── doOrder.tsx │ │ ├── dontCustom.tsx │ │ ├── dontSelectList.tsx │ │ ├── dontTooltips.tsx │ │ ├── link.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── mobile.tsx │ │ ├── sections.tsx │ │ └── subtext.tsx │ ├── fieldset │ │ ├── accessibility.tsx │ │ ├── main.tsx │ │ ├── variantsError.tsx │ │ └── variantsLegend.tsx │ ├── flex │ │ ├── flexBasis.tsx │ │ ├── flexItem.tsx │ │ ├── gap.tsx │ │ ├── main.tsx │ │ ├── menu.tsx │ │ └── overflowing.tsx │ ├── globaleventshandlerprovider │ │ ├── linkHandlersBannerCalloutUpsell.tsx │ │ ├── linkHandlersDangerouslyDisableOnNavigation.tsx │ │ ├── linkHandlersDropdown.tsx │ │ ├── linkHandlersLinkButton.tsx │ │ └── sheetMobileHandlers.tsx │ ├── hacking_gestalt │ │ ├── dangerouslySetInlineStyle.tsx │ │ ├── ref.tsx │ │ └── wrappingComponents.tsx │ ├── heading │ │ ├── accessibilityLevelExample.tsx │ │ ├── alignmentExample.tsx │ │ ├── clearlyDescribeTheSection.tsx │ │ ├── colorsExample.tsx │ │ ├── dontCenterAlign.tsx │ │ ├── dontOverlyLongHeadings.tsx │ │ ├── dontUseToEmphasizeText.tsx │ │ ├── dontUseVagueLanguage.tsx │ │ ├── groupTextIntoSections.tsx │ │ ├── keepHeadingShort.tsx │ │ ├── languageTokens.tsx │ │ ├── mainExample.tsx │ │ ├── overflowAndTruncationExample.tsx │ │ ├── startAlignHeadings.tsx │ │ └── variantsExample.tsx │ ├── helpbutton │ │ ├── endGuideElement.tsx │ │ ├── intermixedBlocks.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── withLink.tsx │ │ └── withText.tsx │ ├── icon │ │ ├── builtInIcon.tsx │ │ ├── customIcon.tsx │ │ ├── doClarity.tsx │ │ ├── doIntentional.tsx │ │ ├── dontInteractive.tsx │ │ ├── dontRepurpose.tsx │ │ └── main.tsx │ ├── iconCompact │ │ ├── builtInIcon.tsx │ │ ├── customIcon.tsx │ │ └── main.tsx │ ├── iconbutton │ │ ├── aria.tsx │ │ ├── customIcon.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── focusOnDarkBackground.tsx │ │ ├── gestaltIcon.tsx │ │ ├── grouping.tsx │ │ ├── highActions.tsx │ │ ├── image.tsx │ │ ├── keyboard.tsx │ │ ├── label.tsx │ │ ├── lowActions.tsx │ │ ├── main.tsx │ │ ├── noGrouping.tsx │ │ ├── selectedState.tsx │ │ ├── selectedStateExample.tsx │ │ ├── tooltip.tsx │ │ └── tooltipVariant.tsx │ ├── iconbuttonfloating │ │ ├── doForScroll.tsx │ │ ├── dontNegative.tsx │ │ ├── dontNotification.tsx │ │ ├── main.tsx │ │ ├── variantsA11y.tsx │ │ └── variantsWithTooltip.tsx │ ├── iconbuttonlink │ │ ├── active.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── focusOnDarkBackground.tsx │ │ ├── localizationLabels.tsx │ │ └── main.tsx │ ├── iconography │ │ ├── centerAlignWithText.tsx │ │ ├── dontBaselineWithText.tsx │ │ ├── dontModifyIconDesignSpecs.tsx │ │ ├── dontUseIconsWithoutLabels.tsx │ │ ├── dontUseLowContrastColors.tsx │ │ ├── stickToOurDesignTokens.tsx │ │ ├── useIconsFollowingDesignSpecs.tsx │ │ └── useIconsSemantically.tsx │ ├── image │ │ ├── delayOffScreenImageLoading.tsx │ │ ├── imagesForPresentationOnly.tsx │ │ ├── overlayContentOnImage.tsx │ │ ├── placeholderColorUsage.tsx │ │ └── scalingImageToFitContainer.tsx │ ├── indicator │ │ ├── counter.tsx │ │ ├── main.tsx │ │ └── notification.tsx │ ├── label │ │ └── variantWithFormComponent.tsx │ ├── layer │ │ ├── childContentRenderedOutsideExample.tsx │ │ └── stackingUsingZIndexExample.tsx │ ├── layouts │ │ └── layoutsExample.tsx │ ├── letterbox │ │ ├── main.tsx │ │ ├── variantSquare.tsx │ │ ├── variantSquareHorizontalFrame.tsx │ │ ├── variantSquareVerticalFrame.tsx │ │ ├── variantTall.tsx │ │ └── variantWide.tsx │ ├── link │ │ ├── accessibilityBoxes.tsx │ │ ├── accessibilityTiers.tsx │ │ ├── colors.tsx │ │ ├── doClarity.tsx │ │ ├── doDisplayExternal.tsx │ │ ├── doMatchStyle.tsx │ │ ├── doMeaning.tsx │ │ ├── doUnderline.tsx │ │ ├── doWeightLists.tsx │ │ ├── dontGeneric.tsx │ │ ├── dontMultiple.tsx │ │ ├── dontOtherIcons.tsx │ │ ├── dontOveruse.tsx │ │ ├── dontUnderlineLists.tsx │ │ ├── dontWeightTexts.tsx │ │ ├── inline.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── variantExternalIcon.tsx │ │ ├── variantHiddenUnderline.tsx │ │ ├── variantInlineLink.tsx │ │ ├── variantInlineOverride.tsx │ │ ├── variantLinkText.tsx │ │ ├── variantRel.tsx │ │ ├── variantStandaloneLink.tsx │ │ └── variantTarget.tsx │ ├── list │ │ ├── dontUseIfDisplayingFewerThanTwo.tsx │ │ ├── dontUseIfWholeItemIsSelectable.tsx │ │ ├── fontSize.tsx │ │ ├── includeLinksIfRelevant.tsx │ │ ├── labelsExample.tsx │ │ ├── labelsExample1.tsx │ │ ├── mainExample.tsx │ │ ├── nestingExample.tsx │ │ ├── nestingExample1.tsx │ │ ├── nestingExample2.tsx │ │ ├── nestingExample3.tsx │ │ ├── spacingExample.tsx │ │ ├── spacingExample1.tsx │ │ ├── subcomponentComposabilityExample.tsx │ │ ├── textAndLabelExample.tsx │ │ ├── textAndLabelExample1.tsx │ │ ├── textAndLabelExample2.tsx │ │ ├── typeExample.tsx │ │ ├── typeExample1.tsx │ │ ├── typeExample2.tsx │ │ └── useWhenDisplayingMoreThanTwo.tsx │ ├── mask │ │ ├── variantCircle.tsx │ │ ├── variantContent.tsx │ │ ├── variantWash.tsx │ │ └── variantWillChangeTransform.tsx │ ├── masonry │ │ ├── align.tsx │ │ ├── main.tsx │ │ ├── variantsBasic.tsx │ │ ├── variantsFlexible.tsx │ │ └── variantsUniform.tsx │ ├── modal │ │ ├── accessibilityExample.tsx │ │ ├── createBoardExample.tsx │ │ ├── limitActionsExample.tsx │ │ ├── localizationLabels.tsx │ │ ├── mobileExample.tsx │ │ ├── preventCloseExample.tsx │ │ ├── roleAlertDialogExample.tsx │ │ └── sizesExample.tsx │ ├── modalalert │ │ ├── doClearCommunicate.tsx │ │ ├── doExplainWhy.tsx │ │ ├── doLimitContent.tsx │ │ ├── doProvideAction.tsx │ │ ├── dontDoubleOverlay.tsx │ │ ├── dontHardLanguage.tsx │ │ ├── dontLeaveOutAction.tsx │ │ ├── dontLeaveOutExplanation.tsx │ │ ├── dontLongContent.tsx │ │ ├── errorMultiAction.tsx │ │ ├── errorSingleAction.tsx │ │ ├── main.tsx │ │ ├── mobileExample.tsx │ │ ├── multipleActions.tsx │ │ ├── singleAction.tsx │ │ ├── warningMultiAction.tsx │ │ ├── warningSingleAction.tsx │ │ └── withCheckbox.tsx │ ├── numberfield │ │ ├── bestPractices-do-errorMessage.tsx │ │ ├── bestPractices-do-helperText.tsx │ │ ├── bestPractices-do-label.tsx │ │ ├── bestPractices-do-related.tsx │ │ ├── bestPractices-do-required.tsx │ │ ├── bestPractices-dont-errorMessage.tsx │ │ ├── bestPractices-dont-label.tsx │ │ ├── bestPractices-dont-placeholder.tsx │ │ ├── bestPractices-dont-related.tsx │ │ ├── bestPractices-dont-required.tsx │ │ ├── disabled.tsx │ │ ├── enabled.tsx │ │ ├── enterKeyHint.tsx │ │ ├── error.tsx │ │ ├── helperText.tsx │ │ ├── main.tsx │ │ ├── minMaxStep.tsx │ │ ├── readOnly.tsx │ │ ├── ref.tsx │ │ └── sizes.tsx │ ├── overlaypanel │ │ ├── animationExample.tsx │ │ ├── confirmationExample.tsx │ │ ├── defaultExample.tsx │ │ ├── footerExample.tsx │ │ ├── localizationLabels.tsx │ │ ├── preventClosingExample.tsx │ │ ├── quickEditsExample.tsx │ │ ├── sizesExample.tsx │ │ └── subHeadingExample.tsx │ ├── pageheader │ │ ├── centerAlignedExample.tsx │ │ ├── complimentaryItemsExample.tsx │ │ ├── defaultExample.tsx │ │ ├── dontOverloadExample.tsx │ │ ├── includeImageExample.tsx │ │ ├── includeProfilePictureExample.tsx │ │ ├── localizationExample.tsx │ │ ├── maxWidthExample.tsx │ │ ├── minimumButtonsExample.tsx │ │ ├── multiplePrimaryActionsExample.tsx │ │ ├── onePrimaryActionExample.tsx │ │ ├── primaryActionExample.tsx │ │ ├── responsiveExample.tsx │ │ ├── secondaryActionExample.tsx │ │ ├── subtextExample.tsx │ │ └── titleExample.tsx │ ├── pog │ │ ├── focusOnDarkBackground.tsx │ │ ├── main.tsx │ │ ├── rounding.tsx │ │ ├── states.tsx │ │ └── statesOnBackground.tsx │ ├── popover │ │ ├── a11y.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── variantAnchor.tsx │ │ ├── variantIdealDirection.tsx │ │ ├── variantLayer.tsx │ │ ├── variantScrollingContainers.tsx │ │ └── variantVisibility.tsx │ ├── popovermessage │ │ ├── customContent.tsx │ │ ├── doEducate.tsx │ │ ├── doReference.tsx │ │ ├── dontDouble.tsx │ │ ├── education.tsx │ │ ├── main.tsx │ │ ├── message.tsx │ │ ├── notification.tsx │ │ ├── primaryAction.tsx │ │ ├── size.tsx │ │ ├── visibility.tsx │ │ └── zIndex.tsx │ ├── pulsar │ │ ├── doHighlight.tsx │ │ ├── doPopover.tsx │ │ ├── doPosition.tsx │ │ ├── doPrioritize.tsx │ │ ├── dontMultiple.tsx │ │ ├── dontPopover.tsx │ │ ├── dontPosition.tsx │ │ ├── dontStatus.tsx │ │ ├── main.tsx │ │ ├── paused.tsx │ │ └── size.tsx │ ├── radiogroup │ │ ├── addingABadgeExample.tsx │ │ ├── directionExample.tsx │ │ ├── dontUseToSelectMultipleItems.tsx │ │ ├── dontUseToToggleStateOnMobile.tsx │ │ ├── dontUseTruncatedText.tsx │ │ ├── keepLabelsAndLegendsClear.tsx │ │ ├── legendVisibilityExample.tsx │ │ ├── main.tsx │ │ ├── sizeExample.tsx │ │ ├── statesExample.tsx │ │ ├── useToSelectOnlyOneOption.tsx │ │ ├── useWhenNeedClearAnswer.tsx │ │ ├── withAnErrorExample.tsx │ │ ├── withCustomLabelsExample.tsx │ │ ├── withHelperTextExample.tsx │ │ └── withImageExample.tsx │ ├── screenSizes │ │ ├── screenSizesAndroid.tsx │ │ ├── screenSizesIos.tsx │ │ └── screenSizesWeb.tsx │ ├── scrollboundarycontainer │ │ ├── autoOverflowExample.tsx │ │ ├── modalExample.tsx │ │ ├── popoverExample.tsx │ │ └── visibleOverflowExample.tsx │ ├── searchfield │ │ ├── accessibilityExample.tsx │ │ ├── dontAddCriticalInfoToPlaceholder.tsx │ │ ├── dontHideBehindIcon.tsx │ │ ├── dontTruncateText.tsx │ │ ├── errorExample.tsx │ │ ├── localizationExample.tsx │ │ ├── mainExample.tsx │ │ ├── makePlaceholderSpecific.tsx │ │ ├── makeSearchFieldWide.tsx │ │ ├── placeAboveContent.tsx │ │ ├── sizesExample.tsx │ │ └── variantsExample.tsx │ ├── searchguide │ │ ├── avatar.tsx │ │ ├── avatargroup.tsx │ │ ├── colors.tsx │ │ ├── expandable.tsx │ │ ├── expandableVariants.tsx │ │ ├── gradient.tsx │ │ ├── hideLowQualityDo.tsx │ │ ├── icon.tsx │ │ ├── image.tsx │ │ ├── main.tsx │ │ ├── noScrollDo.tsx │ │ ├── selectedState.tsx │ │ ├── serialDo.tsx │ │ ├── showLowQualityDont.tsx │ │ ├── singleDont.tsx │ │ ├── startOfScreenDo.tsx │ │ ├── truncateSearchQueriesDont.tsx │ │ ├── upToNineDo.tsx │ │ ├── upToNineDont.tsx │ │ └── verticalScrollDont.tsx │ ├── searchguidelink │ │ ├── colors.tsx │ │ ├── gradient.tsx │ │ ├── hideLowQualityDo.tsx │ │ ├── main.tsx │ │ ├── noScrollDo.tsx │ │ ├── serialDo.tsx │ │ ├── showLowQualityDont.tsx │ │ ├── singleDont.tsx │ │ ├── startOfScreenDo.tsx │ │ ├── thumbnail.tsx │ │ ├── truncateSearchQueriesDont.tsx │ │ ├── upToNineDo.tsx │ │ ├── upToNineDont.tsx │ │ └── verticalScrollDont.tsx │ ├── segmentedcontrol │ │ ├── defaultExample.tsx │ │ ├── mainExample.tsx │ │ ├── responsiveExample.tsx │ │ └── sizeExample.tsx │ ├── selectlist │ │ ├── controlled.tsx │ │ ├── disabled.tsx │ │ ├── doOrder.tsx │ │ ├── doSelection.tsx │ │ ├── doSimple.tsx │ │ ├── dontFeatures.tsx │ │ ├── dontFourItems.tsx │ │ ├── dontMix.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── grouping.tsx │ │ ├── helperText.tsx │ │ ├── labelHidden.tsx │ │ ├── labelVisible.tsx │ │ ├── labelled.tsx │ │ ├── main.tsx │ │ └── size.tsx │ ├── sheetmobile │ │ ├── animation.tsx │ │ ├── autoSize.tsx │ │ ├── defaultSize.tsx │ │ ├── differentSize.tsx │ │ ├── dismissButtonHeader.tsx │ │ ├── footer.tsx │ │ ├── fullSize.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── navigationHeader.tsx │ │ ├── outsideClick.tsx │ │ ├── textOnlyHeader.tsx │ │ └── withPrimaryActionHeader.tsx │ ├── sidenavigation │ │ ├── activeItemExample.tsx │ │ ├── badgeExample.tsx │ │ ├── borderExample.tsx │ │ ├── collapsibleExample.tsx │ │ ├── collapsibleHeaderExample.tsx │ │ ├── collapsibleWithMixedIconsExample.tsx │ │ ├── collapsibleWithoutIconsExample.tsx │ │ ├── correctGroupingExample.tsx │ │ ├── correctHeadingExample.tsx │ │ ├── correctIconExample.tsx │ │ ├── correctLengthExample.tsx │ │ ├── counterExample.tsx │ │ ├── customIconsExample.tsx │ │ ├── disableItemExample.tsx │ │ ├── displayExpandable.tsx │ │ ├── displayExpanded.tsx │ │ ├── displayStatic.tsx │ │ ├── footerExample.tsx │ │ ├── footerVariant.tsx │ │ ├── groupLinkDisplayExpadable.tsx │ │ ├── groupLinkDisplayStatic.tsx │ │ ├── headerExample.tsx │ │ ├── iconsExample.tsx │ │ ├── incorrectGroupingExample.tsx │ │ ├── incorrectHeadingExample.tsx │ │ ├── incorrectIconExample.tsx │ │ ├── incorrectLengthExample.tsx │ │ ├── localizationLabels.tsx │ │ ├── mainExample.tsx │ │ ├── mobileExample.tsx │ │ ├── nestedExample.tsx │ │ ├── notificationsExample.tsx │ │ ├── primaryAction.tsx │ │ ├── sectionsExample.tsx │ │ ├── subcomponent.tsx │ │ └── subtextItemExample.tsx │ ├── spinner │ │ ├── delay.tsx │ │ ├── doLocation.tsx │ │ ├── doOverlay.tsx │ │ ├── doWait.tsx │ │ ├── dontLabel.tsx │ │ ├── dontMultiple.tsx │ │ ├── dontWait.tsx │ │ ├── grayscale.tsx │ │ ├── label.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ └── white.tsx │ ├── status │ │ ├── ariaAttributesExample1.tsx │ │ ├── ariaAttributesExample2.tsx │ │ ├── basicTitle.tsx │ │ ├── dontPlaceFarAwayFromItsSubject.tsx │ │ ├── dontUseSVGsOrImages.tsx │ │ ├── dontUseSubText.tsx │ │ ├── mainExample.tsx │ │ ├── placeCloseToItsSubject.tsx │ │ ├── richTitle.tsx │ │ ├── subtext.tsx │ │ ├── useTitleWhenItRepresents.tsx │ │ └── useToCommunicateAStepIn.tsx │ ├── sticky │ │ └── main.tsx │ ├── switch │ │ ├── doDisabled.tsx │ │ ├── doLabel.tsx │ │ ├── dontAlternative.tsx │ │ ├── dontTruncate.tsx │ │ ├── main.tsx │ │ ├── variantCombinations.tsx │ │ └── variantLabel.tsx │ ├── table │ │ ├── alignContent.tsx │ │ ├── avoidOverStylingText.tsx │ │ ├── bottomCaptionExample.tsx │ │ ├── controlledExpandable.tsx │ │ ├── dontAddSoMuchContent.tsx │ │ ├── dontAlignContent.tsx │ │ ├── dontMixTextAndGraphics.tsx │ │ ├── dontOverStyleText.tsx │ │ ├── dontUseExpandForDenseContent.tsx │ │ ├── drawerRowExample.tsx │ │ ├── expandRows.tsx │ │ ├── main.tsx │ │ ├── makeContentDigestable.tsx │ │ ├── multipleStickyColumnsExample.tsx │ │ ├── rowExpandableWithStickyColumns.tsx │ │ ├── selected.tsx │ │ ├── separateUnitType.tsx │ │ ├── sortableHeaderCellsWithStickyColumns.tsx │ │ ├── sortableTableCells.tsx │ │ ├── stickyColumnExample.tsx │ │ ├── stickyHeaderColumnExample.tsx │ │ ├── stickyHeaderFooterExample.tsx │ │ ├── topCaptionExample.tsx │ │ └── uncontrolledExpandable.tsx │ ├── tableofcontents │ │ ├── dontPlaceFarAway.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── nestedItemsExample.tsx │ │ ├── topAlignWithContentTitle.tsx │ │ └── withHeaderExample.tsx │ ├── tabs │ │ ├── backgroundColor.tsx │ │ ├── doAboveTarget.tsx │ │ ├── doBeConcise.tsx │ │ ├── doOrderByRelevance.tsx │ │ ├── dontFilterContent.tsx │ │ ├── dontHide.tsx │ │ ├── dontTruncateLabels.tsx │ │ ├── icons.tsx │ │ ├── indicator.tsx │ │ ├── mainExample.tsx │ │ ├── sizes.tsx │ │ └── wrapping.tsx │ ├── tag │ │ ├── doDescribe.tsx │ │ ├── doInput.tsx │ │ ├── doSuccinct.tsx │ │ ├── dontInput.tsx │ │ ├── dontInteractive.tsx │ │ ├── dontIntermix.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── sizes.tsx │ │ ├── variantDisabled.tsx │ │ ├── variantDismissable.tsx │ │ ├── variantError.tsx │ │ ├── variantMaxWidth.tsx │ │ └── variantWarning.tsx │ ├── tagdata │ │ ├── baseColor.tsx │ │ ├── colors.tsx │ │ ├── disabled.tsx │ │ ├── dismissible.tsx │ │ ├── doChangeBaseColor.tsx │ │ ├── doUseSameStyle.tsx │ │ ├── doUseShortLabels.tsx │ │ ├── dontChangeBaseColor.tsx │ │ ├── dontMixStyles.tsx │ │ ├── dontUseLongLabels.tsx │ │ ├── group.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── sizes.tsx │ │ └── tooltip.tsx │ ├── taparea │ │ ├── accessibility.tsx │ │ ├── compressBehavior.tsx │ │ ├── focus.tsx │ │ ├── fullSpace.tsx │ │ ├── heightWidth.tsx │ │ ├── inlineUsage.tsx │ │ ├── main.tsx │ │ ├── mouseCursor.tsx │ │ └── withLinkButton.tsx │ ├── taparealink │ │ ├── compressBehavior.tsx │ │ ├── focus.tsx │ │ ├── heightWidth.tsx │ │ ├── inlineUsage.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ └── mouseCursor.tsx │ ├── text │ │ ├── alignment.tsx │ │ ├── boxInline.tsx │ │ ├── colors.tsx │ │ ├── doMinimalStyle.tsx │ │ ├── doStartAlign.tsx │ │ ├── doUseSize.tsx │ │ ├── doWeight.tsx │ │ ├── dontCenterAlign.tsx │ │ ├── dontMixStyles.tsx │ │ ├── dontUnderline.tsx │ │ ├── dontUseHierarchy.tsx │ │ ├── languageTokens.tsx │ │ ├── main.tsx │ │ ├── overflowTruncation.tsx │ │ ├── refs.tsx │ │ ├── sizes.tsx │ │ ├── styles.tsx │ │ └── title.tsx │ ├── textarea │ │ ├── defaultVariant.tsx │ │ ├── disabled.tsx │ │ ├── disabledVariant.tsx │ │ ├── doAsAffordance.tsx │ │ ├── doHelper.tsx │ │ ├── doLabel.tsx │ │ ├── doRows.tsx │ │ ├── dontPlaceholder.tsx │ │ ├── dontPlaceholderLabel.tsx │ │ ├── dontRows.tsx │ │ ├── dontSetRowPropToLessThan2.tsx │ │ ├── dontSingleText.tsx │ │ ├── dontUsePlaceholderAsReplacementForLabel.tsx │ │ ├── dontUsePlaceholderToProvideAny.tsx │ │ ├── dontUseWhenTextInputIsASingle.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── errorMessageVariant.tsx │ │ ├── helperText.tsx │ │ ├── helperTextVariant.tsx │ │ ├── hiddenLabel.tsx │ │ ├── label.tsx │ │ ├── labelVisibilityVariant.tsx │ │ ├── labelled.tsx │ │ ├── main.tsx │ │ ├── maximumLengthEnabled.tsx │ │ ├── maximumLengthError.tsx │ │ ├── maximumLengthExample1.tsx │ │ ├── maximumLengthExample2.tsx │ │ ├── readOnly.tsx │ │ ├── readOnlyVariant.tsx │ │ ├── rows.tsx │ │ ├── setHeightOfUsingRowTo.tsx │ │ ├── tags.tsx │ │ ├── useAsAffordanceToInputLongerText.tsx │ │ ├── useHelperTextToProvideAdditional.tsx │ │ ├── useLabelToClearlyDenoteWhat.tsx │ │ ├── withRowsExample.tsx │ │ └── withTagsExample.tsx │ ├── textcompact │ │ ├── languageTokens.tsx │ │ ├── main.tsx │ │ ├── variantAlignment.tsx │ │ ├── variantBoxInline.tsx │ │ ├── variantColors.tsx │ │ ├── variantOverflowTruncation.tsx │ │ ├── variantRefs.tsx │ │ ├── variantStyles.tsx │ │ └── variantTitle.tsx │ ├── textfield │ │ ├── disabled.tsx │ │ ├── doAsRequired.tsx │ │ ├── doError.tsx │ │ ├── doHelperImportant.tsx │ │ ├── doHelperOptional.tsx │ │ ├── doLabel.tsx │ │ ├── doRelated.tsx │ │ ├── dontAsRequired.tsx │ │ ├── dontGeneric.tsx │ │ ├── dontLabel.tsx │ │ ├── dontPlaceholder.tsx │ │ ├── dontUnrelated.tsx │ │ ├── enabled.tsx │ │ ├── error.tsx │ │ ├── hiddenLabel.tsx │ │ ├── labelled.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── maximumLength.tsx │ │ ├── maximumLengthSingleLine.tsx │ │ ├── mobileExample1.tsx │ │ ├── mobileExample2.tsx │ │ ├── mobileExample3.tsx │ │ ├── mobileExample4.tsx │ │ ├── password.tsx │ │ ├── readOnly.tsx │ │ ├── size.tsx │ │ ├── tags.tsx │ │ └── visibleLabel.tsx │ ├── textui │ │ ├── languageTokens.tsx │ │ ├── main.tsx │ │ ├── variantAlignment.tsx │ │ ├── variantBoxInline.tsx │ │ ├── variantColors.tsx │ │ ├── variantOverflowTruncation.tsx │ │ ├── variantRefs.tsx │ │ ├── variantSizes.tsx │ │ ├── variantStyles.tsx │ │ └── variantTitle.tsx │ ├── tiledata │ │ ├── color.tsx │ │ ├── disabled.tsx │ │ ├── group.tsx │ │ ├── main.tsx │ │ ├── multipleCheckboxDo.tsx │ │ ├── multipleCheckboxDont.tsx │ │ ├── singleTileDo.tsx │ │ ├── singleTileDont.tsx │ │ └── tooltip.tsx │ ├── toast │ │ ├── avatar.tsx │ │ ├── desktop.tsx │ │ ├── dismissable.tsx │ │ ├── doConcise.tsx │ │ ├── doDismiss.tsx │ │ ├── doInteraction.tsx │ │ ├── doOne.tsx │ │ ├── dontMultiple.tsx │ │ ├── dontPermanent.tsx │ │ ├── dontRequest.tsx │ │ ├── dontWordy.tsx │ │ ├── error.tsx │ │ ├── helperLink.tsx │ │ ├── howto.tsx │ │ ├── icon.tsx │ │ ├── image.tsx │ │ ├── localizationLabels.tsx │ │ ├── main.tsx │ │ ├── message.tsx │ │ ├── mobile.tsx │ │ ├── primaryAction.tsx │ │ ├── processing.tsx │ │ ├── richMessage.tsx │ │ ├── success.tsx │ │ └── textOnly.tsx │ ├── tooltip │ │ ├── avoidRepetitiveLabeling1.tsx │ │ ├── avoidRepetitiveLabeling2.tsx │ │ ├── displayLinkAtBottom.tsx │ │ ├── dontPairWithDisabledElement.tsx │ │ ├── dontUseToCommunicateCriticalInfo.tsx │ │ ├── dontUseToRestateVisibleText.tsx │ │ ├── mainExample.tsx │ │ ├── positionRelativeToInlineElement.tsx │ │ ├── properPositioningExample.tsx │ │ ├── specifyPreferredPosition.tsx │ │ ├── specifyZIndexOrder.tsx │ │ ├── useToAddSupplementaryInfo.tsx │ │ ├── useToDescribeInteractiveElement.tsx │ │ └── useToDistinguishRelatedActions.tsx │ ├── typography │ │ ├── alignAndSpaceTextForReadability.tsx │ │ ├── dontCenterTextWithTightLeading.tsx │ │ ├── dontTruncateParagraphText.tsx │ │ ├── dontTruncateTextInControls.tsx │ │ ├── dontUseFixedSizeLineHeightAndCaps.tsx │ │ ├── dontUseSmallSizes.tsx │ │ ├── truncateForSecondaryText.tsx │ │ ├── useProperFontSize.tsx │ │ ├── useStandardsForLanguageTranslation.tsx │ │ └── wrapTextWhenNeeded.tsx │ ├── usefocusvisible │ │ └── exampleButtons.tsx │ ├── usereducedmotion │ │ └── example.tsx │ ├── video │ │ ├── autoplayAndErrorDetectionExample.tsx │ │ ├── captionsExample.tsx │ │ ├── controlsExample.tsx │ │ ├── localizationLabels.tsx │ │ ├── mainExample.tsx │ │ ├── multipleSourcesExample.tsx │ │ ├── updatesExample.tsx │ │ └── withChildrenExample.tsx │ ├── washanimated │ │ └── main.tsx │ └── zindex_classes │ │ ├── foundationalComponentsExample.tsx │ │ └── layerExample.tsx ├── graphics │ ├── about_us │ │ ├── harmonious.svg │ │ ├── inclusive.svg │ │ └── velocity.svg │ ├── building-blocks │ │ ├── Box.svg │ │ ├── Column.svg │ │ ├── Container.svg │ │ ├── Flex.svg │ │ ├── Layer.svg │ │ ├── Letterbox.svg │ │ ├── Mask.svg │ │ ├── Pog.svg │ │ ├── ScrollBoundaryContainer.svg │ │ ├── Sticky.svg │ │ ├── TapArea.svg │ │ └── ZIndexClasses.svg │ ├── data-viz-color-examples │ │ ├── dataViz2Colors.svg │ │ ├── dataViz3Colors.svg │ │ ├── dataViz4Colors.svg │ │ ├── dataViz6Colors.svg │ │ ├── dataViz8Colors.svg │ │ ├── dataVizPrimary.svg │ │ └── dataVizSuccessError.svg │ ├── foundations │ │ ├── accessibility.svg │ │ ├── animation.svg │ │ ├── brand_expression.svg │ │ ├── color.svg │ │ ├── content.svg │ │ ├── data_visualization.svg │ │ ├── design-tokens.svg │ │ ├── elevation.svg │ │ ├── forms.svg │ │ ├── iconography.svg │ │ ├── illustration.svg │ │ ├── international-design.svg │ │ ├── layout.svg │ │ ├── messaging.svg │ │ ├── screen-size.svg │ │ └── typography.svg │ ├── general │ │ ├── Accordion.svg │ │ ├── ActivationCard.svg │ │ ├── Avatar.svg │ │ ├── AvatarGroup.svg │ │ ├── AvatarPair.svg │ │ ├── Badge.svg │ │ ├── BannerCallout.svg │ │ ├── BannerOverlay.svg │ │ ├── BannerSlim.svg │ │ ├── BannerUpsell.svg │ │ ├── Button.svg │ │ ├── ButtonGroup.svg │ │ ├── ButtonLink.svg │ │ ├── ButtonSocial.svg │ │ ├── ButtonToggle.svg │ │ ├── Card.svg │ │ ├── ChartGraph.svg │ │ ├── Checkbox.svg │ │ ├── Collage.svg │ │ ├── ComboBox.svg │ │ ├── Datapoint.svg │ │ ├── DateField.svg │ │ ├── DatePicker.svg │ │ ├── DateRange.svg │ │ ├── Divider.svg │ │ ├── Dropdown.svg │ │ ├── Heading.svg │ │ ├── HelpButton.svg │ │ ├── Icon.svg │ │ ├── IconButton.svg │ │ ├── IconButtonFloating.svg │ │ ├── IconButtonLink.svg │ │ ├── Image.svg │ │ ├── Label.svg │ │ ├── Link.svg │ │ ├── List.svg │ │ ├── ListAction.svg │ │ ├── Masonry.svg │ │ ├── Modal.svg │ │ ├── ModalAlert.svg │ │ ├── NumberField.svg │ │ ├── OverlayPanel.svg │ │ ├── PageHeader.svg │ │ ├── Popover.svg │ │ ├── PopoverMessage.svg │ │ ├── Pulsar.svg │ │ ├── RadioGroup.svg │ │ ├── SearchField.svg │ │ ├── SearchGuide.svg │ │ ├── SearchGuideLink.svg │ │ ├── SegmentedControl.svg │ │ ├── SelectList.svg │ │ ├── SheetMobile.svg │ │ ├── SideNavigation.svg │ │ ├── Spinner.svg │ │ ├── Status.svg │ │ ├── Switch.svg │ │ ├── Table.svg │ │ ├── TableOfContents.svg │ │ ├── Tabs.svg │ │ ├── Tag.svg │ │ ├── TagData.svg │ │ ├── Text.svg │ │ ├── TextArea.svg │ │ ├── TextField.svg │ │ ├── TileData.svg │ │ ├── Toast.svg │ │ ├── Tooltip.svg │ │ ├── Video.svg │ │ └── WashAnimated.svg │ ├── home-page │ │ ├── HeroGraphic.tsx │ │ ├── accessibility.svg │ │ ├── android-logo.svg │ │ ├── apple-logo.svg │ │ ├── color.svg │ │ ├── components.svg │ │ ├── design.svg │ │ ├── development.svg │ │ ├── figma-logo.svg │ │ ├── how-to-work-with-us.svg │ │ └── slack-logo.svg │ ├── iconography │ │ ├── creditCards.svg │ │ ├── layout.svg │ │ ├── outlinedPincode.svg │ │ └── reactionLove.svg │ ├── illustration │ │ ├── ill-alt-1.svg │ │ ├── ill-alt-2.svg │ │ ├── ill-color.svg │ │ ├── ill-context.svg │ │ ├── ill-empty-lg.svg │ │ ├── ill-empty-md-1.svg │ │ ├── ill-empty-md-2.svg │ │ ├── ill-error-lg.svg │ │ ├── ill-error-md-1.svg │ │ ├── ill-error-md-2.svg │ │ ├── ill-fullpage.svg │ │ ├── ill-header.svg │ │ ├── ill-large.svg │ │ ├── ill-loading-lg.svg │ │ ├── ill-loading-md-1.svg │ │ ├── ill-loading-md-2.svg │ │ ├── ill-medium.svg │ │ ├── ill-messaging.svg │ │ ├── ill-mobile-example.svg │ │ ├── ill-resize.svg │ │ ├── ill-small.svg │ │ ├── ill-success-lg.svg │ │ ├── ill-success-md-1.svg │ │ ├── ill-success-md-2.svg │ │ ├── ill-success.svg │ │ ├── ill-web-example.svg │ │ └── ill-whitespace.svg │ ├── index.ts │ ├── messaging │ │ ├── blocking.svg │ │ ├── ephemeral.svg │ │ ├── modals │ │ │ ├── campaignIssue.svg │ │ │ ├── deleteBoard.svg │ │ │ ├── experienceTrends.svg │ │ │ ├── newRecommendations.svg │ │ │ ├── pinSaved.svg │ │ │ ├── siteSpam.svg │ │ │ └── websiteBlocked.svg │ │ ├── section.svg │ │ └── topPage.svg │ ├── team_support │ │ ├── advocate.svg │ │ ├── component-request.svg │ │ ├── design-contributions.svg │ │ ├── design-file-hygiene.svg │ │ ├── get-help.svg │ │ └── training.svg │ ├── typography │ │ ├── alignmentCenter.svg │ │ ├── alignmentEnd.svg │ │ ├── alignmentStart.svg │ │ ├── contrastHigh.svg │ │ ├── contrastLow.svg │ │ ├── hierarchyDo.svg │ │ ├── hierarchyDont.svg │ │ ├── lineHeightCJK.svg │ │ ├── lineHeightLatin.svg │ │ ├── lineLength.svg │ │ └── paragraphSpacing.svg │ ├── utilities │ │ ├── GlobalEventsHandlerProvider.svg │ │ ├── hook-focus-visible.svg │ │ ├── hook-reduced-motion.svg │ │ ├── provider-color-scheme.svg │ │ └── provider-global-events-handler.svg │ ├── year-in-review-2023 │ │ ├── lottie │ │ │ ├── yir-2023-docs.json │ │ │ ├── yir-2023-dsd.json │ │ │ ├── yir-2023-footer.json │ │ │ ├── yir-2023-intro-hero.json │ │ │ ├── yir-2023-peoples-choice.json │ │ │ ├── yir-2023-smiley.json │ │ │ ├── yir-2023-tokens.json │ │ │ ├── yir-2023-twinkle.json │ │ │ └── yir-2023-variables.json │ │ ├── yir-2023-docs.svg │ │ ├── yir-2023-dsd.svg │ │ ├── yir-2023-footer.svg │ │ ├── yir-2023-intro-hero.svg │ │ ├── yir-2023-line-left-docs.svg │ │ ├── yir-2023-line-right-docs.svg │ │ ├── yir-2023-peoples-choice.svg │ │ ├── yir-2023-quote.svg │ │ ├── yir-2023-single-line-intro.svg │ │ ├── yir-2023-smiley.svg │ │ ├── yir-2023-token-lines.svg │ │ ├── yir-2023-tokens.svg │ │ ├── yir-2023-twinkle.svg │ │ └── yir-2023-variables.svg │ └── year-in-review │ │ ├── asteriskFilled.svg │ │ ├── circle.svg │ │ ├── circleShadow.svg │ │ ├── disco.svg │ │ ├── donut.svg │ │ ├── donutHalf.svg │ │ ├── donutShadow.svg │ │ ├── dsd.svg │ │ ├── figma.svg │ │ ├── knobShadow.svg │ │ ├── lottie │ │ ├── discoStars.json │ │ ├── figma.json │ │ ├── pencil.json │ │ ├── steps.json │ │ └── vibes.json │ │ ├── sparkle.svg │ │ ├── sparkleShadow.svg │ │ └── tokens.svg ├── integration-test-helpers │ └── masonry │ │ ├── ExampleGridItem.tsx │ │ ├── MasonryContainer.tsx │ │ ├── getClassicGridServerStyles.ts │ │ ├── getFlexibleGridServerStyles.ts │ │ └── items-utils │ │ ├── generateExampleItems.ts │ │ ├── generateFixedTreeColumnExampleItems.ts │ │ ├── generateMultiColumnExampleItems.ts │ │ ├── generateRealisticExampleItems.ts │ │ ├── generateResponsiveModuleItems.ts │ │ ├── getRandomColor.ts │ │ ├── getRandomNumberGenerator.ts │ │ └── pinHeights.ts ├── markdown │ ├── android │ │ ├── avatar.md │ │ ├── avatargroup.md │ │ ├── badge.md │ │ ├── button.md │ │ ├── buttongroup.md │ │ ├── buttontoggle.md │ │ ├── checkbox.md │ │ ├── icon.md │ │ ├── iconbutton.md │ │ ├── iconbuttonfloating.md │ │ ├── listaction.md │ │ ├── searchfield.md │ │ ├── searchguide.md │ │ ├── sheet.md │ │ ├── switch.md │ │ ├── tabs.md │ │ ├── text.md │ │ ├── textarea.md │ │ ├── textfield.md │ │ └── toast.md │ ├── foundations │ │ └── content_standards │ │ │ ├── formatting.md │ │ │ ├── grammar.md │ │ │ ├── inclusive_language.md │ │ │ ├── resources.md │ │ │ ├── syntax_and_structure.md │ │ │ ├── ui_elements.md │ │ │ └── voice.md │ ├── get_started │ │ └── developers │ │ │ └── contributing │ │ │ ├── creating_and_updating_pages.md │ │ │ ├── development_process.md │ │ │ └── experimentation.md │ ├── ios │ │ ├── avatar.md │ │ ├── avatargroup.md │ │ ├── badge.md │ │ ├── button.md │ │ ├── buttongroup.md │ │ ├── buttontoggle.md │ │ ├── checkbox.md │ │ ├── icon.md │ │ ├── iconbutton.md │ │ ├── iconbuttonfloating.md │ │ ├── listaction.md │ │ ├── module │ │ │ ├── module.boards.md │ │ │ ├── module.header.md │ │ │ ├── module.md │ │ │ └── module.pins.md │ │ ├── searchfield.md │ │ ├── searchguide.md │ │ ├── sheet.md │ │ ├── switch.md │ │ ├── tabs.md │ │ ├── text.md │ │ ├── textarea.md │ │ ├── textfield.md │ │ └── toast.md │ └── team_support │ │ ├── component_request.md │ │ ├── design_contributions │ │ ├── contribution_types_and_criteria.md │ │ ├── design_contributions_overview.md │ │ ├── process_deep_dive.md │ │ └── process_diagrams.md │ │ ├── design_file_hygiene │ │ ├── design_handoff.md │ │ ├── figma_branches.md │ │ ├── naming_convention.md │ │ └── organizing_layout.md │ │ ├── get_help.md │ │ ├── index.md │ │ └── training.md ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── [...id].tsx │ ├── _app.tsx │ ├── _document.tsx │ ├── android │ │ ├── component_status.tsx │ │ └── overview.tsx │ ├── api │ │ └── localFiles.ts │ ├── foundations │ │ ├── accessibility.tsx │ │ ├── brand_expression │ │ │ ├── color_fills.tsx │ │ │ └── guidelines.tsx │ │ ├── color │ │ │ ├── examples.tsx │ │ │ ├── palette.tsx │ │ │ └── usage.tsx │ │ ├── data_visualization │ │ │ ├── available_components.tsx │ │ │ ├── charts_and_graphs │ │ │ │ ├── bar_graphs.tsx │ │ │ │ ├── combo_graphs.tsx │ │ │ │ ├── donut_charts.tsx │ │ │ │ ├── funnel_charts.tsx │ │ │ │ ├── general_guidelines.tsx │ │ │ │ └── line_graphs.tsx │ │ │ ├── color │ │ │ │ ├── palette.tsx │ │ │ │ └── usage.tsx │ │ │ ├── micro_visualizations.tsx │ │ │ └── overview.tsx │ │ ├── design_tokens │ │ │ ├── component_tokens.tsx │ │ │ └── overview.tsx │ │ ├── elevation.tsx │ │ ├── forms │ │ │ ├── available_components.tsx │ │ │ ├── example_code.tsx │ │ │ ├── overview.tsx │ │ │ └── structure_and_behavior.tsx │ │ ├── iconography │ │ │ ├── ICON_DATA.json │ │ │ ├── creating_icons.tsx │ │ │ ├── custom_and_brand_icons.tsx │ │ │ └── usage.tsx │ │ ├── illustration.tsx │ │ ├── international_design │ │ │ ├── about_international_design.tsx │ │ │ ├── icon_localization.tsx │ │ │ ├── number_localization.tsx │ │ │ ├── pluralization.tsx │ │ │ └── rtl_guidelines │ │ │ │ ├── iconography.tsx │ │ │ │ ├── layout_and_text_direction.tsx │ │ │ │ ├── rtl_overview.tsx │ │ │ │ └── typography.tsx │ │ ├── layout.tsx │ │ ├── messaging │ │ │ ├── available_components.tsx │ │ │ ├── overview.tsx │ │ │ └── priority_and_placement.tsx │ │ ├── motion │ │ │ ├── guidelines.tsx │ │ │ └── principles.tsx │ │ ├── overview.tsx │ │ ├── screen_sizes.tsx │ │ └── typography.tsx │ ├── get_started │ │ ├── about_us.tsx │ │ ├── designers.tsx │ │ ├── developers │ │ │ ├── eslint_plugin.tsx │ │ │ ├── hacking_gestalt.tsx │ │ │ ├── installation.tsx │ │ │ ├── releases.tsx │ │ │ └── tooling │ │ │ │ ├── android.tsx │ │ │ │ ├── ios.tsx │ │ │ │ └── web.tsx │ │ └── faq.tsx │ ├── home.tsx │ ├── index.tsx │ ├── integration-test │ │ └── masonry.tsx │ ├── ios │ │ ├── component_status.tsx │ │ └── overview.tsx │ ├── team_support │ │ └── overview.tsx │ ├── visual-test │ │ ├── Accordion-dark.tsx │ │ ├── Accordion.tsx │ │ ├── ActivationCard-dark.tsx │ │ ├── ActivationCard.tsx │ │ ├── Avatar-dark.tsx │ │ ├── Avatar.tsx │ │ ├── AvatarGroup-dark.tsx │ │ ├── AvatarGroup.tsx │ │ ├── AvatarGroupCluster-dark.tsx │ │ ├── AvatarGroupCluster.tsx │ │ ├── Badge-dark.tsx │ │ ├── Badge.tsx │ │ ├── BannerCallout-dark.tsx │ │ ├── BannerCallout.tsx │ │ ├── BannerOverlay-dark.tsx │ │ ├── BannerOverlay.tsx │ │ ├── BannerSlim-dark.tsx │ │ ├── BannerSlim.tsx │ │ ├── BannerUpsell-dark.tsx │ │ ├── BannerUpsell.tsx │ │ ├── Box-dark.tsx │ │ ├── Box.tsx │ │ ├── Button-dark.tsx │ │ ├── Button.tsx │ │ ├── ButtonGroup-dark.tsx │ │ ├── ButtonGroup.tsx │ │ ├── ButtonLink-dark.tsx │ │ ├── ButtonLink.tsx │ │ ├── ButtonSocial-dark.tsx │ │ ├── ButtonSocial-light.tsx │ │ ├── ButtonToggle-dark.tsx │ │ ├── ButtonToggle.tsx │ │ ├── ChartGraph-dark.tsx │ │ ├── ChartGraph-light.tsx │ │ ├── Checkbox-dark.tsx │ │ ├── Checkbox.tsx │ │ ├── Collage-dark.tsx │ │ ├── Collage.tsx │ │ ├── Column.tsx │ │ ├── ComboBox-closed-dark.tsx │ │ ├── ComboBox-closed.tsx │ │ ├── ComboBox-open-dark.tsx │ │ ├── ComboBox-open.tsx │ │ ├── Container.tsx │ │ ├── Datapoint-dark.tsx │ │ ├── Datapoint.tsx │ │ ├── DateField-dark.tsx │ │ ├── DateField-light.tsx │ │ ├── DatePicker-closed-dark.tsx │ │ ├── DatePicker-closed.tsx │ │ ├── DateRange-dark.tsx │ │ ├── DateRange-light.tsx │ │ ├── DateRange-secondary-date.tsx │ │ ├── Divider-dark.tsx │ │ ├── Divider.tsx │ │ ├── Dropdown-open-dark.tsx │ │ ├── Dropdown-open.tsx │ │ ├── Fieldset-dark.tsx │ │ ├── Fieldset.tsx │ │ ├── Flex.tsx │ │ ├── Heading-dark.tsx │ │ ├── Heading.tsx │ │ ├── HelpButton.tsx │ │ ├── Icon-list-dark.tsx │ │ ├── Icon-list.tsx │ │ ├── IconButton-dark.tsx │ │ ├── IconButton.tsx │ │ ├── IconButtonFloating-dark.tsx │ │ ├── IconButtonFloating.tsx │ │ ├── IconCompact-list-dark.tsx │ │ ├── IconCompact-list.tsx │ │ ├── Image-dark.tsx │ │ ├── Image.tsx │ │ ├── Indicator-dark.tsx │ │ ├── Indicator.tsx │ │ ├── Label-dark.tsx │ │ ├── Label.tsx │ │ ├── Letterbox.tsx │ │ ├── Link-dark.tsx │ │ ├── Link.tsx │ │ ├── List-dark.tsx │ │ ├── List-light.tsx │ │ ├── Mask.tsx │ │ ├── Masonry-renderLoadingItems-flexible.tsx │ │ ├── Masonry-renderLoadingItems-uniformRow.tsx │ │ ├── Masonry-renderLoadingItems.tsx │ │ ├── Masonry.tsx │ │ ├── Modal-dark.tsx │ │ ├── Modal-mobile.tsx │ │ ├── Modal.tsx │ │ ├── ModalAlert-dark.tsx │ │ ├── ModalAlert-mobile.tsx │ │ ├── ModalAlert.tsx │ │ ├── NumberField-dark.tsx │ │ ├── NumberField.tsx │ │ ├── OverlayPanel-dark.tsx │ │ ├── OverlayPanel.tsx │ │ ├── PageHeader-borderStyle-dark.tsx │ │ ├── PageHeader-borderStyle.tsx │ │ ├── PageHeader-items-secondaryAction.tsx │ │ ├── PageHeader-maxWidth.tsx │ │ ├── PageHeader-primaryAction.tsx │ │ ├── PageHeader-primaryActionLink.tsx │ │ ├── PageHeader-secondaryAction.tsx │ │ ├── PageHeader-subtext-primaryAction.tsx │ │ ├── PageHeader-thumbnail-badge-iconButton.tsx │ │ ├── PageHeader-thumbnail-iconButton.tsx │ │ ├── Pog-dark.tsx │ │ ├── Pog.tsx │ │ ├── Popover-dark.tsx │ │ ├── Popover.tsx │ │ ├── PopoverMessage-dark.tsx │ │ ├── PopoverMessage.tsx │ │ ├── Pulsar-dark.tsx │ │ ├── Pulsar.tsx │ │ ├── RadioGroup-dark.tsx │ │ ├── RadioGroup-light.tsx │ │ ├── SearchField-dark.tsx │ │ ├── SearchField.tsx │ │ ├── SearchGuide-dark.tsx │ │ ├── SearchGuide.tsx │ │ ├── SearchGuideLink-dark.tsx │ │ ├── SearchGuideLink.tsx │ │ ├── SegmentedControl-dark.tsx │ │ ├── SegmentedControl.tsx │ │ ├── SelectList-dark.tsx │ │ ├── SelectList.tsx │ │ ├── SheetMobile-dark.tsx │ │ ├── SheetMobile-light.tsx │ │ ├── SideNavigation-dark.tsx │ │ ├── SideNavigation.tsx │ │ ├── Status-dark.tsx │ │ ├── Status.tsx │ │ ├── Switch-dark.tsx │ │ ├── Switch.tsx │ │ ├── Table.tsx │ │ ├── TableOfContents-dark.tsx │ │ ├── TableOfContents-light.tsx │ │ ├── Tabs-dark.tsx │ │ ├── Tabs.tsx │ │ ├── Tag-dark.tsx │ │ ├── Tag.tsx │ │ ├── TagData-dark.tsx │ │ ├── TagData.tsx │ │ ├── Text-dark.tsx │ │ ├── Text.tsx │ │ ├── TextArea-dark.tsx │ │ ├── TextArea.tsx │ │ ├── TextCompact-dark.tsx │ │ ├── TextCompact.tsx │ │ ├── TextField-dark.tsx │ │ ├── TextField.tsx │ │ ├── TextUI-dark.tsx │ │ ├── TextUI.tsx │ │ ├── TileData-dark.tsx │ │ ├── TileData.tsx │ │ ├── Toast-dark.tsx │ │ ├── Toast.tsx │ │ ├── Tooltip-dark.tsx │ │ ├── Tooltip.tsx │ │ ├── Video.tsx │ │ ├── WashAnimated-dark.tsx │ │ ├── WashAnimated.tsx │ │ └── ZIndex.tsx │ ├── visualrefreshactivation.tsx │ └── web │ │ ├── accordion.tsx │ │ ├── activationcard.tsx │ │ ├── avatar.tsx │ │ ├── avatargroup.tsx │ │ ├── avatargroupcluster.tsx │ │ ├── badge.tsx │ │ ├── bannercallout.tsx │ │ ├── banneroverlay.tsx │ │ ├── bannerslim.tsx │ │ ├── bannerupsell.tsx │ │ ├── box.tsx │ │ ├── button.tsx │ │ ├── buttongroup.tsx │ │ ├── buttonlink.tsx │ │ ├── buttonsocial.tsx │ │ ├── buttontoggle.tsx │ │ ├── chartgraph.tsx │ │ ├── checkbox.tsx │ │ ├── collage.tsx │ │ ├── column.tsx │ │ ├── combobox.tsx │ │ ├── component_status.tsx │ │ ├── container.tsx │ │ ├── datapoint.tsx │ │ ├── datefield.tsx │ │ ├── datepicker.tsx │ │ ├── daterange.tsx │ │ ├── divider.tsx │ │ ├── dropdown.tsx │ │ ├── fieldset.tsx │ │ ├── flex.tsx │ │ ├── heading.tsx │ │ ├── helpbutton.tsx │ │ ├── icon.tsx │ │ ├── iconbutton.tsx │ │ ├── iconbuttonfloating.tsx │ │ ├── iconbuttonlink.tsx │ │ ├── iconcompact.tsx │ │ ├── image.tsx │ │ ├── indicator.tsx │ │ ├── label.tsx │ │ ├── layer.tsx │ │ ├── letterbox.tsx │ │ ├── link.tsx │ │ ├── list.tsx │ │ ├── mask.tsx │ │ ├── masonry.tsx │ │ ├── modal.tsx │ │ ├── modalalert.tsx │ │ ├── numberfield.tsx │ │ ├── overlaypanel.tsx │ │ ├── overview.tsx │ │ ├── pageheader.tsx │ │ ├── pog.tsx │ │ ├── popover.tsx │ │ ├── popovermessage.tsx │ │ ├── pulsar.tsx │ │ ├── radiogroup.tsx │ │ ├── searchfield.tsx │ │ ├── searchguide.tsx │ │ ├── searchguidelink.tsx │ │ ├── segmentedcontrol.tsx │ │ ├── selectlist.tsx │ │ ├── sheetmobile.tsx │ │ ├── sidenavigation.tsx │ │ ├── spinner.tsx │ │ ├── status.tsx │ │ ├── sticky.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tableofcontents.tsx │ │ ├── tabs.tsx │ │ ├── tag.tsx │ │ ├── tagdata.tsx │ │ ├── taparea.tsx │ │ ├── taparealink.tsx │ │ ├── text.tsx │ │ ├── textarea.tsx │ │ ├── textcompact.tsx │ │ ├── textfield.tsx │ │ ├── textui.tsx │ │ ├── tiledata.tsx │ │ ├── toast.tsx │ │ ├── tooltip.tsx │ │ ├── utilities │ │ ├── colorschemeprovider.tsx │ │ ├── defaultlabelprovider.tsx │ │ ├── designtokensprovider.tsx │ │ ├── devicetypeprovider.tsx │ │ ├── globaleventshandlerprovider.tsx │ │ ├── scrollboundarycontainer.tsx │ │ ├── usefocusvisible.tsx │ │ └── usereducedmotion.tsx │ │ ├── video.tsx │ │ ├── washanimated.tsx │ │ └── zindex_classes.tsx ├── public │ ├── fonts │ │ └── PinterestSans │ │ │ ├── Pinterest-Sans-Pro-Bold-Italic.otf │ │ │ ├── Pinterest-Sans-Pro-Bold.otf │ │ │ ├── Pinterest-Sans-Pro-Regular-Italic.otf │ │ │ └── Pinterest-Sans-Pro-Regular.otf │ ├── gestalt-logo-250.png │ ├── gestalt-logo-500.png │ ├── gestaltDev_favicon.png │ ├── gestalt_favicon.png │ ├── icons-diff.html │ ├── opensearch.xml │ ├── robots.txt │ └── vr-icons-diff.html ├── redirects.js ├── tsconfig.json └── utils │ ├── capitalizeFirstLetter.ts │ ├── gAnalytics.ts │ └── mdHelper.ts ├── netlify.toml ├── package.json ├── packages ├── eslint-plugin-gestalt │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── __fixtures__ │ │ │ ├── button-icon-restrictions │ │ │ │ ├── invalid │ │ │ │ │ ├── invalid-renamed.tsx │ │ │ │ │ ├── invalid-wrong-icon.tsx │ │ │ │ │ └── invalid-wrong-link-role-icon.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid-size.tsx │ │ │ ├── no-box-dangerous-style-duplicates │ │ │ │ ├── invalid │ │ │ │ │ ├── invalid-alignContent-input.tsx │ │ │ │ │ ├── invalid-alignContent-output.tsx │ │ │ │ │ ├── invalid-alignItems-input.tsx │ │ │ │ │ ├── invalid-alignItems-output.tsx │ │ │ │ │ ├── invalid-alignSelf-input.tsx │ │ │ │ │ ├── invalid-alignSelf-output.tsx │ │ │ │ │ ├── invalid-backgroundColor-input.tsx │ │ │ │ │ ├── invalid-backgroundColor-output.tsx │ │ │ │ │ ├── invalid-border-input.tsx │ │ │ │ │ ├── invalid-border-output.tsx │ │ │ │ │ ├── invalid-borderRadius-input.tsx │ │ │ │ │ ├── invalid-borderRadius-output.tsx │ │ │ │ │ ├── invalid-bottom-input.tsx │ │ │ │ │ ├── invalid-bottom-output.tsx │ │ │ │ │ ├── invalid-boxShadow-input.tsx │ │ │ │ │ ├── invalid-boxShadow-output.tsx │ │ │ │ │ ├── invalid-display-input.tsx │ │ │ │ │ ├── invalid-display-output.tsx │ │ │ │ │ ├── invalid-flex-input.tsx │ │ │ │ │ ├── invalid-flex-output.tsx │ │ │ │ │ ├── invalid-height-input.tsx │ │ │ │ │ ├── invalid-height-output.tsx │ │ │ │ │ ├── invalid-in-variable-input.tsx │ │ │ │ │ ├── invalid-in-variable-output.tsx │ │ │ │ │ ├── invalid-justifyContent-input.tsx │ │ │ │ │ ├── invalid-justifyContent-output.tsx │ │ │ │ │ ├── invalid-left-input.tsx │ │ │ │ │ ├── invalid-left-output.tsx │ │ │ │ │ ├── invalid-margin-negative-input.tsx │ │ │ │ │ ├── invalid-margin-negative-output.tsx │ │ │ │ │ ├── invalid-marginLeft-input.tsx │ │ │ │ │ ├── invalid-marginLeft-output.tsx │ │ │ │ │ ├── invalid-marginTop-input.tsx │ │ │ │ │ ├── invalid-marginTop-output.tsx │ │ │ │ │ ├── invalid-maxHeight-input.tsx │ │ │ │ │ ├── invalid-maxHeight-output.tsx │ │ │ │ │ ├── invalid-maxWidth-input.tsx │ │ │ │ │ ├── invalid-maxWidth-output.tsx │ │ │ │ │ ├── invalid-minHeight-input.tsx │ │ │ │ │ ├── invalid-minHeight-output.tsx │ │ │ │ │ ├── invalid-minWidth-input.tsx │ │ │ │ │ ├── invalid-minWidth-output.tsx │ │ │ │ │ ├── invalid-multiple-input.tsx │ │ │ │ │ ├── invalid-multiple-keys-input.tsx │ │ │ │ │ ├── invalid-multiple-keys-no-autofix.tsx │ │ │ │ │ ├── invalid-multiple-keys-output.tsx │ │ │ │ │ ├── invalid-multiple-output.tsx │ │ │ │ │ ├── invalid-opacity-input.tsx │ │ │ │ │ ├── invalid-opacity-output.tsx │ │ │ │ │ ├── invalid-overflow-input.tsx │ │ │ │ │ ├── invalid-overflow-output.tsx │ │ │ │ │ ├── invalid-padding-input.tsx │ │ │ │ │ ├── invalid-padding-output.tsx │ │ │ │ │ ├── invalid-position-input.tsx │ │ │ │ │ ├── invalid-position-output.tsx │ │ │ │ │ ├── invalid-renamed-import-input.tsx │ │ │ │ │ ├── invalid-renamed-import-output.tsx │ │ │ │ │ ├── invalid-right-input.tsx │ │ │ │ │ ├── invalid-right-output.tsx │ │ │ │ │ ├── invalid-role-input.tsx │ │ │ │ │ ├── invalid-role-output.tsx │ │ │ │ │ ├── invalid-top-input.tsx │ │ │ │ │ ├── invalid-top-output.tsx │ │ │ │ │ ├── invalid-width-input.tsx │ │ │ │ │ ├── invalid-width-output.tsx │ │ │ │ │ ├── invalid-wrap-input.tsx │ │ │ │ │ ├── invalid-wrap-output.tsx │ │ │ │ │ ├── invalid-zIndex-input.tsx │ │ │ │ │ └── invalid-zIndex-output.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid.tsx │ │ │ ├── no-box-disallowed-props │ │ │ │ ├── invalid │ │ │ │ │ ├── disallowed-props-invalid-prop.tsx │ │ │ │ │ ├── disallowed-props-renamed.tsx │ │ │ │ │ └── disallowed-props.tsx │ │ │ │ ├── valid-aria.tsx │ │ │ │ ├── valid-as-renamed.tsx │ │ │ │ ├── valid-as.tsx │ │ │ │ ├── valid-data.tsx │ │ │ │ └── valid-id.tsx │ │ │ ├── no-box-marginleft-marginright │ │ │ │ ├── invalid │ │ │ │ │ ├── invalid-margin-left-margin-start.tsx │ │ │ │ │ ├── invalid-margin-left.tsx │ │ │ │ │ ├── invalid-margin-right-margin-start.tsx │ │ │ │ │ └── invalid-margin-right.tsx │ │ │ │ └── valid.tsx │ │ │ ├── no-box-useless-props │ │ │ │ ├── invalid │ │ │ │ │ ├── fit-max-width.tsx │ │ │ │ │ ├── flex-align-content.tsx │ │ │ │ │ ├── flex-align-items.tsx │ │ │ │ │ ├── flex-dangerous.tsx │ │ │ │ │ ├── flex-direction.tsx │ │ │ │ │ ├── flex-dynamic-dangerous.tsx │ │ │ │ │ ├── flex-dynamic-display.tsx │ │ │ │ │ ├── flex-justify-content.tsx │ │ │ │ │ └── flex-wrap.tsx │ │ │ │ └── valid │ │ │ │ │ ├── fit-max-width.tsx │ │ │ │ │ ├── fit.tsx │ │ │ │ │ ├── flex-align-content.tsx │ │ │ │ │ ├── flex-align-items.tsx │ │ │ │ │ ├── flex-dangerous-grid.tsx │ │ │ │ │ ├── flex-dangerous-inline-flex.tsx │ │ │ │ │ ├── flex-dangerous-inline-grid.tsx │ │ │ │ │ ├── flex-direction.tsx │ │ │ │ │ ├── flex-dynamic-dangerous.tsx │ │ │ │ │ ├── flex-dynamic-display.tsx │ │ │ │ │ ├── flex-justify-content.tsx │ │ │ │ │ ├── flex-reference-display.tsx │ │ │ │ │ └── flex-wrap.tsx │ │ │ ├── no-medium-formfields │ │ │ │ ├── invalid │ │ │ │ │ ├── invalid-combobox-default.tsx │ │ │ │ │ ├── invalid-combobox-medium.tsx │ │ │ │ │ ├── invalid-combobox-renamed.tsx │ │ │ │ │ ├── invalid-searchfield-default.tsx │ │ │ │ │ ├── invalid-selectlist-default.tsx │ │ │ │ │ ├── invalid-textfield-default.tsx │ │ │ │ │ ├── invalid-textfield-medium.tsx │ │ │ │ │ └── invalid-textfield-renamed.tsx │ │ │ │ └── valid.tsx │ │ │ ├── no-role-link-components │ │ │ │ ├── invalid │ │ │ │ │ ├── invalid-button.tsx │ │ │ │ │ ├── invalid-iconbutton.tsx │ │ │ │ │ └── invalid-taparea.tsx │ │ │ │ └── valid.tsx │ │ │ ├── no-spread-props │ │ │ │ ├── invalid-fixable-input.tsx │ │ │ │ ├── invalid-fixable-output.tsx │ │ │ │ ├── invalid-not-fixable-input.tsx │ │ │ │ ├── invalid-not-fixable-output.tsx │ │ │ │ └── valid.tsx │ │ │ ├── no-workflow-status-icon │ │ │ │ ├── invalid │ │ │ │ │ ├── default-size.tsx │ │ │ │ │ ├── match-properties.tsx │ │ │ │ │ └── renamed-icon.tsx │ │ │ │ └── valid │ │ │ │ │ ├── no-match-color.tsx │ │ │ │ │ ├── no-match-icon.tsx │ │ │ │ │ ├── no-match-size.tsx │ │ │ │ │ └── renamed-icon.tsx │ │ │ ├── only-valid-tokens │ │ │ │ ├── invalid │ │ │ │ │ ├── dangerouslySetInlineStyle-input.tsx │ │ │ │ │ ├── dangerouslySetInlineStyle-output.tsx │ │ │ │ │ ├── inline-input.tsx │ │ │ │ │ ├── inline-output.tsx │ │ │ │ │ ├── unsafeCss-input.tsx │ │ │ │ │ ├── unsafeCss-output.tsx │ │ │ │ │ ├── variable-input.tsx │ │ │ │ │ └── variable-output.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid.tsx │ │ │ ├── prefer-box-as-tag │ │ │ │ ├── invalid │ │ │ │ │ ├── gestalt-import-HTML-multiple-tag-with-props-input.tsx │ │ │ │ │ ├── gestalt-import-HTML-multiple-tag-with-props-output.tsx │ │ │ │ │ ├── gestalt-import-HTML-single-tag-input.tsx │ │ │ │ │ ├── gestalt-import-HTML-single-tag-output.tsx │ │ │ │ │ ├── no-gestalt-import-HTML-single-tag-input.tsx │ │ │ │ │ └── no-gestalt-import-HTML-single-tag-output.tsx │ │ │ │ └── valid.tsx │ │ │ ├── prefer-box-inline-style │ │ │ │ ├── invalid │ │ │ │ │ ├── backgroundColor.tsx │ │ │ │ │ ├── border.tsx │ │ │ │ │ └── borderRadius.tsx │ │ │ │ └── valid.tsx │ │ │ ├── prefer-box-no-disallowed │ │ │ │ ├── invalid-lonely-ref │ │ │ │ │ ├── gestalt-import-with-box-input.tsx │ │ │ │ │ ├── gestalt-import-with-box-output.tsx │ │ │ │ │ ├── gestalt-import-with-renamed-box-input.tsx │ │ │ │ │ ├── gestalt-import-with-renamed-box-output.tsx │ │ │ │ │ ├── gestalt-import-without-box-input.tsx │ │ │ │ │ ├── gestalt-import-without-box-output.tsx │ │ │ │ │ ├── no-gestalt-import-input.tsx │ │ │ │ │ ├── no-gestalt-import-output.tsx │ │ │ │ │ ├── no-gestalt-import-selfclosed-input.tsx │ │ │ │ │ └── no-gestalt-import-selfclosed-output.tsx │ │ │ │ ├── invalid-no-disallowed │ │ │ │ │ ├── gestalt-import-with-box-inline-style-input.tsx │ │ │ │ │ ├── gestalt-import-with-box-inline-style-output.tsx │ │ │ │ │ ├── gestalt-import-with-box-input.tsx │ │ │ │ │ ├── gestalt-import-with-box-output.tsx │ │ │ │ │ ├── gestalt-import-with-renamed-box-input.tsx │ │ │ │ │ ├── gestalt-import-with-renamed-box-output.tsx │ │ │ │ │ ├── gestalt-import-without-box-input.tsx │ │ │ │ │ ├── gestalt-import-without-box-output.tsx │ │ │ │ │ ├── no-gestalt-import-input.tsx │ │ │ │ │ ├── no-gestalt-import-output.tsx │ │ │ │ │ ├── no-gestalt-import-selfclosed-input.tsx │ │ │ │ │ └── no-gestalt-import-selfclosed-output.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid.tsx │ │ │ ├── prefer-flex │ │ │ │ ├── invalid │ │ │ │ │ ├── existing-flex-renamed-box-flex.input.tsx │ │ │ │ │ ├── existing-flex-renamed-box-flex.output.tsx │ │ │ │ │ ├── existing-flex-renamed-box.input.tsx │ │ │ │ │ ├── existing-flex-renamed-box.output.tsx │ │ │ │ │ ├── existing-flex-renamed-flex.input.tsx │ │ │ │ │ ├── existing-flex-renamed-flex.output.tsx │ │ │ │ │ ├── existing-flex.input.tsx │ │ │ │ │ ├── existing-flex.output.tsx │ │ │ │ │ ├── multiple-box-renamed.input.tsx │ │ │ │ │ ├── multiple-box-renamed.output.tsx │ │ │ │ │ ├── multiple-box-with-children.input.tsx │ │ │ │ │ ├── multiple-box-with-children.output.tsx │ │ │ │ │ ├── multiple-box.input.tsx │ │ │ │ │ ├── multiple-box.output.tsx │ │ │ │ │ ├── single-box.input.tsx │ │ │ │ │ └── single-box.output.tsx │ │ │ │ └── valid │ │ │ │ │ ├── display-flex.tsx │ │ │ │ │ └── rounding.tsx │ │ │ ├── prefer-heading │ │ │ │ ├── invalid │ │ │ │ │ ├── gestalt-import-input.tsx │ │ │ │ │ ├── gestalt-import-noA11yLevel-suggestion-output.tsx │ │ │ │ │ ├── gestalt-import-output.tsx │ │ │ │ │ ├── no-gestalt-import-h2-input.tsx │ │ │ │ │ ├── no-gestalt-import-h2-output.tsx │ │ │ │ │ ├── no-gestalt-import-input.tsx │ │ │ │ │ ├── no-gestalt-import-multiple-input.tsx │ │ │ │ │ ├── no-gestalt-import-multiple-output.tsx │ │ │ │ │ ├── no-gestalt-import-noA11yLevel-suggestion-h2-output.tsx │ │ │ │ │ ├── no-gestalt-import-noA11yLevel-suggestion-multiple1-output.tsx │ │ │ │ │ ├── no-gestalt-import-noA11yLevel-suggestion-multiple2-output.tsx │ │ │ │ │ ├── no-gestalt-import-noA11yLevel-suggestion-output.tsx │ │ │ │ │ └── no-gestalt-import-output.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid.tsx │ │ │ ├── prefer-link │ │ │ │ ├── invalid │ │ │ │ │ ├── no-gestalt-import-multiple-input.tsx │ │ │ │ │ ├── no-gestalt-import-multiple-output.tsx │ │ │ │ │ ├── no-gestalt-import-multiple-taparea-suggestion.tsx │ │ │ │ │ ├── no-gestalt-import-single-input.tsx │ │ │ │ │ ├── no-gestalt-import-single-output.tsx │ │ │ │ │ └── no-gestalt-import-single-taparea-suggestion.tsx │ │ │ │ └── valid │ │ │ │ │ └── valid.tsx │ │ │ └── prefer-list │ │ │ │ ├── invalid │ │ │ │ ├── no-gestalt-list-ol.tsx │ │ │ │ └── no-gestalt-list-ul.tsx │ │ │ │ └── valid │ │ │ │ └── valid.tsx │ │ ├── button-icon-restrictions.test.ts │ │ ├── button-icon-restrictions.ts │ │ ├── helpers │ │ │ ├── eslintASTFixers.ts │ │ │ ├── eslintASTHelpers.ts │ │ │ ├── eslintFlowTypes.ts │ │ │ ├── noBoxDangerousStyleDuplicatesReducer.ts │ │ │ ├── preferLinkReducer.ts │ │ │ ├── reducerTypes.ts │ │ │ ├── styleValidators.ts │ │ │ └── testHelpers.ts │ │ ├── index.ts │ │ ├── no-box-dangerous-style-duplicates.test.ts │ │ ├── no-box-dangerous-style-duplicates.ts │ │ ├── no-box-disallowed-props.test.ts │ │ ├── no-box-disallowed-props.ts │ │ ├── no-box-marginleft-marginright.test.ts │ │ ├── no-box-marginleft-marginright.ts │ │ ├── no-box-useless-props.test.ts │ │ ├── no-box-useless-props.ts │ │ ├── no-medium-formfields.test.ts │ │ ├── no-medium-formfields.ts │ │ ├── no-role-link-components.test.ts │ │ ├── no-role-link-components.ts │ │ ├── no-spread-props.test.ts │ │ ├── no-spread-props.ts │ │ ├── no-workflow-status-icon.test.ts │ │ ├── no-workflow-status-icon.ts │ │ ├── only-valid-tokens.test.ts │ │ ├── only-valid-tokens.ts │ │ ├── prefer-box-as-tag.test.ts │ │ ├── prefer-box-as-tag.ts │ │ ├── prefer-box-inline-style.test.ts │ │ ├── prefer-box-inline-style.ts │ │ ├── prefer-box-no-disallowed.test.ts │ │ ├── prefer-box-no-disallowed.ts │ │ ├── prefer-flex.test.ts │ │ ├── prefer-flex.ts │ │ ├── prefer-heading.test.ts │ │ ├── prefer-heading.ts │ │ ├── prefer-link.test.ts │ │ ├── prefer-link.ts │ │ ├── prefer-list.test.ts │ │ └── prefer-list.ts │ └── tsconfig.json ├── gestalt-charts │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── ChartGraph.jsdom.test.tsx │ │ ├── ChartGraph.tsx │ │ ├── ChartGraph │ │ │ ├── BarLabel.tsx │ │ │ ├── ChartGraphContext.tsx │ │ │ ├── EmptyBox.tsx │ │ │ ├── Header.tsx │ │ │ ├── InlineStyle.tsx │ │ │ ├── LegendIcon.tsx │ │ │ ├── TabularDataModal.tsx │ │ │ ├── TabularDataModalFooter.tsx │ │ │ ├── TabularDataModalHeading.tsx │ │ │ ├── TabularDataModalTable.tsx │ │ │ ├── renderAxis.tsx │ │ │ ├── renderElements.tsx │ │ │ ├── renderGraphPoint.tsx │ │ │ ├── renderReferenceAreas.tsx │ │ │ ├── types.ts │ │ │ ├── useCustomTooltip.tsx │ │ │ ├── useDefaultLegend.tsx │ │ │ ├── useDefaultTooltip.tsx │ │ │ ├── usePatterns.tsx │ │ │ └── useTabularData.ts │ │ └── index.ts │ └── tsconfig.json ├── gestalt-codemods │ ├── README.md │ ├── generic-codemods │ │ ├── __testfixtures__ │ │ │ ├── detectManualReplacement │ │ │ │ ├── component.input.tsx │ │ │ │ ├── componentAlias.input.tsx │ │ │ │ ├── componentProp.input.tsx │ │ │ │ ├── componentPropValue.input.tsx │ │ │ │ ├── spreadProps.input.tsx │ │ │ │ └── subcomponent.input.tsx │ │ │ ├── modifyProp │ │ │ │ ├── deprecateProp.input.tsx │ │ │ │ ├── deprecateProp.output.tsx │ │ │ │ ├── renameProp.input.tsx │ │ │ │ ├── renameProp.output.tsx │ │ │ │ ├── renamePropAlias.input.tsx │ │ │ │ ├── renamePropAlias.output.tsx │ │ │ │ ├── subcomponentProp.input.tsx │ │ │ │ └── subcomponentProp.output.tsx │ │ │ ├── modifyPropValue │ │ │ │ ├── addPropValueString.input.tsx │ │ │ │ ├── addPropValueString.output.tsx │ │ │ │ ├── deprecatePropValueBoolean.input.tsx │ │ │ │ ├── deprecatePropValueBoolean.output.tsx │ │ │ │ ├── deprecatePropValueNumber.input.tsx │ │ │ │ ├── deprecatePropValueNumber.output.tsx │ │ │ │ ├── deprecatePropValueString.input.tsx │ │ │ │ ├── deprecatePropValueString.output.tsx │ │ │ │ ├── deprecatePropValueTrueBoolean.input.tsx │ │ │ │ ├── deprecatePropValueTrueBoolean.output.tsx │ │ │ │ ├── errorSpreadProp.input.tsx │ │ │ │ ├── renamePropValueBoolean.input.tsx │ │ │ │ ├── renamePropValueBoolean.output.tsx │ │ │ │ ├── renamePropValueNumber.input.tsx │ │ │ │ ├── renamePropValueNumber.output.tsx │ │ │ │ ├── renamePropValueString.input.tsx │ │ │ │ ├── renamePropValueString.output.tsx │ │ │ │ ├── renamePropValueStringAlias.input.tsx │ │ │ │ ├── renamePropValueStringAlias.output.tsx │ │ │ │ ├── renamePropValueStringValue.input.tsx │ │ │ │ ├── renamePropValueStringValue.output.tsx │ │ │ │ ├── renamePropValueTrueBoolean.input.tsx │ │ │ │ ├── renamePropValueTrueBoolean.output.tsx │ │ │ │ ├── subcomponentPropValue.input.tsx │ │ │ │ └── subcomponentPropValue.output.tsx │ │ │ └── renameComponent │ │ │ │ ├── renameComponent.input.tsx │ │ │ │ ├── renameComponent.output.tsx │ │ │ │ ├── renameComponentAlias.input.tsx │ │ │ │ └── renameComponentAlias.output.tsx │ │ ├── __tests__ │ │ │ ├── detectManualReplacement.test.ts │ │ │ ├── modifyProp.test.ts │ │ │ ├── modifyPropValue.test.ts │ │ │ ├── renameComponent.test.ts │ │ │ └── utils.ts │ │ ├── detectManualReplacement.ts │ │ ├── entry.sh │ │ ├── modifyProp.ts │ │ ├── modifyPropValue.ts │ │ ├── renameComponent.ts │ │ └── utils.ts │ └── tsconfig.json ├── gestalt-core │ ├── build.js │ ├── lib │ │ └── classnameBuilder.js │ └── package.json ├── gestalt-datepicker │ ├── .npmignore │ ├── README.md │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── DateField.jsdom.test.tsx │ │ ├── DateField.tsx │ │ ├── DateField │ │ │ ├── DateField.css │ │ │ ├── InternalDateField.tsx │ │ │ ├── VRInternalDateField.css │ │ │ └── VRInternalDateField.tsx │ │ ├── DatePicker.css │ │ ├── DatePicker.jsdom.test.tsx │ │ ├── DatePicker.tsx │ │ ├── DatePicker │ │ │ ├── DateInput.tsx │ │ │ ├── InternalDatePicker.tsx │ │ │ ├── VRDateInput.css │ │ │ └── VRDateInput.tsx │ │ ├── DateRange.css │ │ ├── DateRange.jsdom.test.tsx │ │ ├── DateRange.tsx │ │ ├── DateRange │ │ │ └── InternalDatePicker.tsx │ │ ├── __snapshots__ │ │ │ └── DatePicker.jsdom.test.tsx.snap │ │ ├── global.d.ts │ │ ├── index.ts │ │ └── subcomponents │ │ │ ├── ErrorMessage.tsx │ │ │ ├── HelperText.css │ │ │ └── HelperText.tsx │ └── tsconfig.json ├── gestalt-design-tokens │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── src │ │ ├── build.js │ │ ├── filters.js │ │ ├── formatters │ │ │ └── registerWebFormats.js │ │ ├── getSources.js │ │ ├── headers │ │ │ └── fileheader.js │ │ ├── platforms │ │ │ ├── android.js │ │ │ ├── ios.js │ │ │ └── web.js │ │ ├── transformers │ │ │ ├── transformGroups.js │ │ │ └── transforms.js │ │ └── utils │ │ │ ├── buildShadowValue.js │ │ │ ├── getFilter.js │ │ │ └── hexToRgba.js │ ├── tests │ │ ├── __snapshots__ │ │ │ ├── android.test.js.snap │ │ │ ├── dist.test.js.snap │ │ │ ├── ios.test.js.snap │ │ │ └── web.test.js.snap │ │ ├── android.test.js │ │ ├── dist.test.js │ │ ├── getFiles.js │ │ ├── ios.test.js │ │ └── web.test.js │ └── tokens │ │ ├── classic │ │ ├── base-color-dataviz-dark.json │ │ ├── base-color-dataviz-light.json │ │ ├── base-color.json │ │ ├── base-elevation-dark.json │ │ ├── base-elevation-light.json │ │ ├── base-font.json │ │ ├── base-opacity.json │ │ ├── base-rounding.json │ │ ├── base-space.json │ │ ├── comp-web-color-dark.json │ │ ├── comp-web-color-light.json │ │ ├── comp-web-elevation-dark.json │ │ ├── comp-web-elevation-light.json │ │ ├── comp-web-font.json │ │ ├── comp-web-rounding.json │ │ ├── sema-color-dark.json │ │ ├── sema-color-dataviz-dark.json │ │ ├── sema-color-dataviz-light.json │ │ └── sema-color-light.json │ │ ├── vr-theme-web-mapping │ │ ├── base-color-dataviz-dark.json │ │ ├── base-color-dataviz-light.json │ │ ├── base-color.json │ │ ├── base-elevation-dark.json │ │ ├── base-elevation-light.json │ │ ├── base-font.json │ │ ├── base-opacity.json │ │ ├── base-rounding.json │ │ ├── base-space.json │ │ ├── comp-web-color-dark.json │ │ ├── comp-web-color-light.json │ │ ├── comp-web-font.json │ │ ├── comp-web-rounding.json │ │ ├── sema-color-dataviz-dark.json │ │ ├── sema-color-dataviz-light.json │ │ └── sema-color.json │ │ └── vr-theme │ │ ├── $metadata.json │ │ ├── $themes.json │ │ ├── base │ │ ├── color │ │ │ ├── default.json │ │ │ ├── hover.json │ │ │ └── pressed.json │ │ ├── motion.json │ │ ├── rounding.json │ │ ├── space.json │ │ └── text │ │ │ └── font.json │ │ ├── comp │ │ ├── checkbox │ │ │ └── default.json │ │ ├── radiogroupbutton │ │ │ └── default.json │ │ └── spinner │ │ │ └── default.json │ │ └── sema │ │ ├── color │ │ ├── dark │ │ │ ├── default.json │ │ │ ├── hover.json │ │ │ └── pressed.json │ │ └── light │ │ │ ├── default.json │ │ │ ├── hover.json │ │ │ └── pressed.json │ │ ├── elevation │ │ ├── dark.json │ │ └── light.json │ │ ├── motion.json │ │ ├── opacity.json │ │ ├── rounding.json │ │ ├── space.json │ │ └── text │ │ ├── font.json │ │ ├── language │ │ ├── ck.json │ │ ├── default.json │ │ ├── ja.json │ │ ├── tall.json │ │ ├── th.json │ │ └── vi.json │ │ └── typography.json ├── gestalt │ ├── .npmignore │ ├── package.json │ ├── rollup.config.js │ ├── src │ │ ├── Accordion.test.tsx │ │ ├── Accordion.tsx │ │ ├── Accordion │ │ │ ├── ExpandableItem.jsdom.test.tsx │ │ │ ├── ExpandableItem.test.tsx │ │ │ ├── ExpandableItem.tsx │ │ │ ├── Title.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── ExpandableItem.test.tsx.snap │ │ │ └── applyModuleDensity.ts │ │ ├── AccordionExpandable.jsdom.test.tsx │ │ ├── AccordionExpandable.test.tsx │ │ ├── AccordionExpandable.tsx │ │ ├── ActivationCard.css │ │ ├── ActivationCard.jsdom.test.tsx │ │ ├── ActivationCard.test.tsx │ │ ├── ActivationCard.tsx │ │ ├── Avatar.jsdom.test.tsx │ │ ├── Avatar.test.tsx │ │ ├── Avatar.tsx │ │ ├── Avatar │ │ │ ├── AvatarFoundation.css │ │ │ ├── DefaultAvatar.tsx │ │ │ ├── Foundation.tsx │ │ │ ├── InternalAvatar.tsx │ │ │ └── getAvatarColorToken.ts │ │ ├── AvatarGroup.css │ │ ├── AvatarGroup.jsdom.test.tsx │ │ ├── AvatarGroup.tsx │ │ ├── AvatarGroup │ │ │ ├── AddCollaboratorsButton.tsx │ │ │ ├── CollaboratorAvatar.tsx │ │ │ ├── CollaboratorsCount.tsx │ │ │ ├── HoverOverlay.tsx │ │ │ ├── PositioningWrapper.tsx │ │ │ └── constants.ts │ │ ├── AvatarGroupCluster.css │ │ ├── AvatarGroupCluster.jsdom.test.tsx │ │ ├── AvatarGroupCluster.tsx │ │ ├── Backdrop.css │ │ ├── Backdrop.tsx │ │ ├── Badge.css │ │ ├── Badge.test.tsx │ │ ├── Badge.tsx │ │ ├── BannerCallout.css │ │ ├── BannerCallout.jsdom.test.tsx │ │ ├── BannerCallout.test.tsx │ │ ├── BannerCallout.tsx │ │ ├── BannerCallout │ │ │ ├── DismissButton.tsx │ │ │ ├── Footer.tsx │ │ │ ├── HeaderSection.tsx │ │ │ ├── VRBannerCallout.tsx │ │ │ └── useIsWrappedContainer.ts │ │ ├── BannerOverlay.css │ │ ├── BannerOverlay.test.tsx │ │ ├── BannerOverlay.tsx │ │ ├── BannerOverlay │ │ │ └── CalltoAction.tsx │ │ ├── BannerSlim.test.tsx │ │ ├── BannerSlim.tsx │ │ ├── BannerSlim │ │ │ └── useIsParagraph.ts │ │ ├── BannerUpsell.css │ │ ├── BannerUpsell.jsdom.test.tsx │ │ ├── BannerUpsell.test.tsx │ │ ├── BannerUpsell.tsx │ │ ├── BannerUpsell │ │ │ └── VRBannerUpsell.tsx │ │ ├── BannerUpsellForm.test.tsx │ │ ├── BannerUpsellForm.tsx │ │ ├── Borders.css │ │ ├── Box.css │ │ ├── Box.jsdom.test.tsx │ │ ├── Box.test.tsx │ │ ├── Box.tsx │ │ ├── Button.css │ │ ├── Button.jsdom.test.tsx │ │ ├── Button.test.tsx │ │ ├── Button.tsx │ │ ├── ButtonGroup.test.tsx │ │ ├── ButtonGroup.tsx │ │ ├── ButtonLink.jsdom.test.tsx │ │ ├── ButtonLink.test.tsx │ │ ├── ButtonLink.tsx │ │ ├── ButtonSocial.css │ │ ├── ButtonSocial.test.tsx │ │ ├── ButtonSocial.tsx │ │ ├── ButtonSocial │ │ │ ├── AppleIcon.tsx │ │ │ ├── FacebookIcon.tsx │ │ │ ├── GoogleIcon.tsx │ │ │ ├── LineIcon.tsx │ │ │ ├── VRButtonSocial.css │ │ │ └── VRButtonSocial.tsx │ │ ├── ButtonToggle.css │ │ ├── ButtonToggle.jsdom.test.tsx │ │ ├── ButtonToggle.test.tsx │ │ ├── ButtonToggle.tsx │ │ ├── ButtonToggle │ │ │ ├── ColorPicker.css │ │ │ ├── ColorPicker.tsx │ │ │ └── LabeledThumbnail.tsx │ │ ├── Caret.test.tsx │ │ ├── Caret.tsx │ │ ├── Checkbox.jsdom.test.tsx │ │ ├── Checkbox.test.tsx │ │ ├── Checkbox.tsx │ │ ├── Checkbox │ │ │ ├── InternalCheckbox.css │ │ │ ├── InternalCheckbox.tsx │ │ │ └── VRInternalCheckbox.tsx │ │ ├── Collage.test.tsx │ │ ├── Collage.tsx │ │ ├── Collage │ │ │ ├── Collection.test.tsx │ │ │ ├── Collection.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Collection.test.tsx.snap │ │ ├── Column.css │ │ ├── Column.test.tsx │ │ ├── Column.tsx │ │ ├── ComboBox.css │ │ ├── ComboBox.jsdom.test.tsx │ │ ├── ComboBox.tsx │ │ ├── ComboBox │ │ │ └── Item.tsx │ │ ├── Container.test.tsx │ │ ├── Container.tsx │ │ ├── Contents.css │ │ ├── Cursor.css │ │ ├── Datapoint.test.tsx │ │ ├── Datapoint.tsx │ │ ├── Datapoint │ │ │ ├── InternalDatapoint.tsx │ │ │ ├── Trend.test.tsx │ │ │ ├── Trend.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Trend.test.tsx.snap │ │ ├── Divider.css │ │ ├── Divider.test.tsx │ │ ├── Divider.tsx │ │ ├── Dropdown.css │ │ ├── Dropdown.jsdom.test.tsx │ │ ├── Dropdown.tsx │ │ ├── Dropdown │ │ │ ├── Context.ts │ │ │ ├── OptionItem.jsdom.test.tsx │ │ │ └── OptionItem.tsx │ │ ├── DropdownItem.jsdom.test.tsx │ │ ├── DropdownItem.tsx │ │ ├── DropdownLink.jsdom.test.tsx │ │ ├── DropdownLink.tsx │ │ ├── DropdownSection.tsx │ │ ├── FetchItems.ts │ │ ├── Fieldset.test.tsx │ │ ├── Fieldset.tsx │ │ ├── Fieldset │ │ │ ├── InternalFieldset.css │ │ │ └── InternalFieldset.tsx │ │ ├── Flex.css │ │ ├── Flex.test.tsx │ │ ├── Flex.tsx │ │ ├── FlexItem.tsx │ │ ├── Focus.css │ │ ├── Heading.css │ │ ├── Heading.test.tsx │ │ ├── Heading.tsx │ │ ├── HelpButton.css │ │ ├── HelpButton.jsdom.test.tsx │ │ ├── HelpButton.test.tsx │ │ ├── HelpButton.tsx │ │ ├── Icon.css │ │ ├── Icon.test.tsx │ │ ├── Icon.tsx │ │ ├── Icon │ │ │ ├── InternalIcon.tsx │ │ │ └── RTLIconList.tsx │ │ ├── IconButton.jsdom.test.tsx │ │ ├── IconButton.test.tsx │ │ ├── IconButton.tsx │ │ ├── IconButton │ │ │ ├── InternalIconButton.css │ │ │ ├── InternalIconButton.tsx │ │ │ └── InternalIconCompactButton.tsx │ │ ├── IconButtonFloating.tsx │ │ ├── IconButtonLink.jsdom.test.tsx │ │ ├── IconButtonLink.test.tsx │ │ ├── IconButtonLink.tsx │ │ ├── IconCompact.tsx │ │ ├── Image.css │ │ ├── Image.test.tsx │ │ ├── Image.tsx │ │ ├── Indicator.css │ │ ├── Indicator.jsdom.test.tsx │ │ ├── Indicator.tsx │ │ ├── Label.test.tsx │ │ ├── Label.tsx │ │ ├── Label │ │ │ ├── InternalLabel.css │ │ │ ├── InternalLabel.test.tsx │ │ │ ├── InternalLabel.tsx │ │ │ └── __snapshots__ │ │ │ │ └── InternalLabel.test.tsx.snap │ │ ├── Layer.css │ │ ├── Layer.jsdom.test.tsx │ │ ├── Layer.test.tsx │ │ ├── Layer.tsx │ │ ├── Layout.css │ │ ├── Letterbox.test.tsx │ │ ├── Letterbox.tsx │ │ ├── Link.jsdom.test.tsx │ │ ├── Link.test.tsx │ │ ├── Link.tsx │ │ ├── Link │ │ │ ├── InternalLink.jsdom.test.tsx │ │ │ ├── InternalLink.test.tsx │ │ │ ├── InternalLink.tsx │ │ │ └── __snapshots__ │ │ │ │ └── InternalLink.test.tsx.snap │ │ ├── List.css │ │ ├── List.jsdom.test.tsx │ │ ├── List.test.tsx │ │ ├── List.tsx │ │ ├── List │ │ │ ├── InternalList.tsx │ │ │ ├── Message.tsx │ │ │ └── getChildrenToArray.ts │ │ ├── ListItem.tsx │ │ ├── MESSAGING_TYPE_ATTRIBUTES.ts │ │ ├── Mask.css │ │ ├── Mask.test.tsx │ │ ├── Mask.tsx │ │ ├── Masonry.css │ │ ├── Masonry.tsx │ │ ├── Masonry │ │ │ ├── Cache.ts │ │ │ ├── Graph.ts │ │ │ ├── GraphNode.ts │ │ │ ├── ItemResizeObserverWrapper.tsx │ │ │ ├── MeasurementStore.ts │ │ │ ├── README.md │ │ │ ├── ScrollContainer.ts │ │ │ ├── defaultLayout.test.ts │ │ │ ├── defaultLayout.ts │ │ │ ├── dynamicHeightsUtils.test.ts │ │ │ ├── dynamicHeightsUtils.ts │ │ │ ├── dynamicHeightsV2Utils.ts │ │ │ ├── fullWidthLayout.test.ts │ │ │ ├── fullWidthLayout.ts │ │ │ ├── getColumnCount.ts │ │ │ ├── getLayoutAlgorithm.ts │ │ │ ├── layoutHelpers.ts │ │ │ ├── mindex.ts │ │ │ ├── multiColumnLayout.test.ts │ │ │ ├── multiColumnLayout.ts │ │ │ ├── scrollUtils.ts │ │ │ ├── types.ts │ │ │ ├── uniformRowLayout.test.ts │ │ │ └── uniformRowLayout.ts │ │ ├── MasonryV2.tsx │ │ ├── Modal.css │ │ ├── Modal.jsdom.test.tsx │ │ ├── Modal.tsx │ │ ├── ModalAlert.jsdom.test.tsx │ │ ├── ModalAlert.tsx │ │ ├── ModalAlert │ │ │ ├── Action.tsx │ │ │ └── Header.tsx │ │ ├── NumberField.jsdom.test.tsx │ │ ├── NumberField.test.tsx │ │ ├── NumberField.tsx │ │ ├── OverlayPanel.css │ │ ├── OverlayPanel.jsdom.test.tsx │ │ ├── OverlayPanel.tsx │ │ ├── OverlayPanel │ │ │ ├── ConfirmationPopover.tsx │ │ │ └── InternalOverlayPanel.tsx │ │ ├── PageHeader.css │ │ ├── PageHeader.test.tsx │ │ ├── PageHeader.tsx │ │ ├── PageHeader │ │ │ └── components.tsx │ │ ├── Pog.test.tsx │ │ ├── Pog.tsx │ │ ├── Pog │ │ │ ├── InternalPog.css │ │ │ ├── InternalPog.tsx │ │ │ └── InternalPogCompact.tsx │ │ ├── Popover.jsdom.test.tsx │ │ ├── Popover.tsx │ │ ├── Popover │ │ │ ├── Contents.tsx │ │ │ ├── Controller.tsx │ │ │ ├── InternalPopover.tsx │ │ │ └── usePopover.ts │ │ ├── PopoverMessage.css │ │ ├── PopoverMessage.jsdom.test.tsx │ │ ├── PopoverMessage.tsx │ │ ├── Pulsar.css │ │ ├── Pulsar.test.tsx │ │ ├── Pulsar.tsx │ │ ├── RadioGroup.test.tsx │ │ ├── RadioGroup.tsx │ │ ├── RadioGroup │ │ │ ├── Context.ts │ │ │ ├── RadioButton.css │ │ │ └── RadioButton.tsx │ │ ├── RadioGroupButton.css │ │ ├── RadioGroupButton.tsx │ │ ├── ScrollBoundaryContainer.jsdom.test.tsx │ │ ├── ScrollBoundaryContainer.test.tsx │ │ ├── ScrollBoundaryContainer.tsx │ │ ├── ScrollBoundaryContainer │ │ │ └── InternalScrollBoundaryContainerWithForwardRef.tsx │ │ ├── ScrollFetch.tsx │ │ ├── SearchField.css │ │ ├── SearchField.jsdom.test.tsx │ │ ├── SearchField.tsx │ │ ├── SearchField │ │ │ ├── VRSearchField.css │ │ │ └── VRSearchField.tsx │ │ ├── SearchGuide.css │ │ ├── SearchGuide.jsdom.test.tsx │ │ ├── SearchGuide.test.tsx │ │ ├── SearchGuide.tsx │ │ ├── SearchGuideLink.tsx │ │ ├── SegmentedControl.css │ │ ├── SegmentedControl.jsdom.test.tsx │ │ ├── SegmentedControl.test.tsx │ │ ├── SegmentedControl.tsx │ │ ├── SelectList.css │ │ ├── SelectList.jsdom.test.tsx │ │ ├── SelectList.test.tsx │ │ ├── SelectList.tsx │ │ ├── SelectList │ │ │ ├── IconEnd.tsx │ │ │ ├── SelectListGroup.tsx │ │ │ ├── SelectListOption.tsx │ │ │ ├── VRSelectList.css │ │ │ └── VRSelectList.tsx │ │ ├── SheetMobile.css │ │ ├── SheetMobile.jsdom.test.tsx │ │ ├── SheetMobile.tsx │ │ ├── SheetMobile │ │ │ ├── ContentContainer.tsx │ │ │ ├── FullPage.tsx │ │ │ ├── Header.tsx │ │ │ ├── PartialPage.tsx │ │ │ └── PrimaryAction.tsx │ │ ├── SideNavigation.css │ │ ├── SideNavigation.jsdom.test.tsx │ │ ├── SideNavigation.test.tsx │ │ ├── SideNavigation.tsx │ │ ├── SideNavigation │ │ │ ├── Collapser.tsx │ │ │ ├── GroupContent.tsx │ │ │ ├── GroupExpandIconButton.tsx │ │ │ ├── GroupItemTapControl.tsx │ │ │ ├── GroupMobile.tsx │ │ │ ├── ItemContent.tsx │ │ │ ├── ItemsEllipsis.tsx │ │ │ ├── Mobile.tsx │ │ │ ├── NavigationContent.tsx │ │ │ ├── PrimaryActionIconButton.tsx │ │ │ ├── getChildrenToArray.ts │ │ │ └── navigationChildrenUtils.tsx │ │ ├── SideNavigationGroup.tsx │ │ ├── SideNavigationNestedGroup.tsx │ │ ├── SideNavigationNestedItem.tsx │ │ ├── SideNavigationSection.tsx │ │ ├── SideNavigationTopItem.tsx │ │ ├── Spinner.css │ │ ├── Spinner.test.tsx │ │ ├── Spinner.tsx │ │ ├── Spinner │ │ │ ├── VRSpinner.css │ │ │ └── VRSpinner.tsx │ │ ├── Status.test.tsx │ │ ├── Status.tsx │ │ ├── Sticky.test.tsx │ │ ├── Sticky.tsx │ │ ├── Switch.css │ │ ├── Switch.test.tsx │ │ ├── Switch.tsx │ │ ├── Table.css │ │ ├── Table.test.tsx │ │ ├── Table.tsx │ │ ├── Table │ │ │ └── getChildrenCount.ts │ │ ├── TableBody.test.tsx │ │ ├── TableBody.tsx │ │ ├── TableCell.test.tsx │ │ ├── TableCell.tsx │ │ ├── TableFooter.jsdom.test.tsx │ │ ├── TableFooter.tsx │ │ ├── TableHeader.jsdom.test.tsx │ │ ├── TableHeader.tsx │ │ ├── TableHeaderCell.test.tsx │ │ ├── TableHeaderCell.tsx │ │ ├── TableOfContents.css │ │ ├── TableOfContents.test.tsx │ │ ├── TableOfContents.tsx │ │ ├── TableOfContents │ │ │ ├── TableOfContentsAnchor.css │ │ │ ├── TableOfContentsAnchor.tsx │ │ │ ├── TableOfContentsItemList.tsx │ │ │ └── getChildrenToArray.ts │ │ ├── TableOfContentsItem.tsx │ │ ├── TableRow.test.tsx │ │ ├── TableRow.tsx │ │ ├── TableRowDrawer.test.tsx │ │ ├── TableRowDrawer.tsx │ │ ├── TableRowExpandable.jsdom.test.tsx │ │ ├── TableRowExpandable.test.tsx │ │ ├── TableRowExpandable.tsx │ │ ├── TableSortableHeaderCell.jsdom.test.tsx │ │ ├── TableSortableHeaderCell.test.tsx │ │ ├── TableSortableHeaderCell.tsx │ │ ├── Tabs.css │ │ ├── Tabs.jsdom.test.tsx │ │ ├── Tabs.test.tsx │ │ ├── Tabs.tsx │ │ ├── Tabs │ │ │ └── Tab.tsx │ │ ├── Tag.css │ │ ├── Tag.test.tsx │ │ ├── Tag.tsx │ │ ├── TagArea │ │ │ ├── TagArea.css │ │ │ └── TagArea.tsx │ │ ├── TagData.css │ │ ├── TagData.test.tsx │ │ ├── TagData.tsx │ │ ├── TapArea.css │ │ ├── TapArea.jsdom.test.tsx │ │ ├── TapArea.test.tsx │ │ ├── TapArea.tsx │ │ ├── TapAreaLink.jsdom.test.tsx │ │ ├── TapAreaLink.test.tsx │ │ ├── TapAreaLink.tsx │ │ ├── Text.css │ │ ├── Text.test.tsx │ │ ├── Text.tsx │ │ ├── TextArea.css │ │ ├── TextArea.jsdom.test.tsx │ │ ├── TextArea.test.tsx │ │ ├── TextArea.tsx │ │ ├── TextArea │ │ │ ├── VRTextArea.css │ │ │ └── VRTextArea.tsx │ │ ├── TextCompact.css │ │ ├── TextCompact.test.tsx │ │ ├── TextCompact.tsx │ │ ├── TextField.jsdom.test.tsx │ │ ├── TextField.test.tsx │ │ ├── TextField.tsx │ │ ├── TextField │ │ │ ├── IconButtonEnd.tsx │ │ │ ├── InternalTextField.css │ │ │ ├── InternalTextField.tsx │ │ │ ├── VRIconButtonEnd.tsx │ │ │ ├── VRInternalTextField.css │ │ │ └── VRInternalTextField.tsx │ │ ├── TextUI.css │ │ ├── TextUI.test.tsx │ │ ├── TextUI.tsx │ │ ├── TileData.css │ │ ├── TileData.test.tsx │ │ ├── TileData.tsx │ │ ├── Toast.css │ │ ├── Toast.test.tsx │ │ ├── Toast.tsx │ │ ├── Toast │ │ │ └── PrimaryAction.tsx │ │ ├── Tooltip.jsdom.test.tsx │ │ ├── Tooltip.tsx │ │ ├── Tooltip │ │ │ └── InternalTooltip.tsx │ │ ├── Typography.css │ │ ├── Video.css │ │ ├── Video.jsdom.test.tsx │ │ ├── Video.test.tsx │ │ ├── Video.tsx │ │ ├── Video │ │ │ ├── Controls.jsdom.test.tsx │ │ │ ├── Controls.test.tsx │ │ │ ├── Controls.tsx │ │ │ ├── Playhead.jsdom.test.tsx │ │ │ ├── Playhead.test.tsx │ │ │ ├── Playhead.tsx │ │ │ └── __snapshots__ │ │ │ │ ├── Controls.test.tsx.snap │ │ │ │ └── Playhead.test.tsx.snap │ │ ├── WashAnimated.css │ │ ├── WashAnimated.test.tsx │ │ ├── WashAnimated.tsx │ │ ├── Whitespace.css │ │ ├── __mocks__ │ │ │ └── fileMock.ts │ │ ├── __snapshots__ │ │ │ ├── Accordion.test.tsx.snap │ │ │ ├── AccordionExpandable.test.tsx.snap │ │ │ ├── ActivationCard.test.tsx.snap │ │ │ ├── Avatar.test.tsx.snap │ │ │ ├── AvatarGroup.jsdom.test.tsx.snap │ │ │ ├── AvatarGroupCluster.jsdom.test.tsx.snap │ │ │ ├── Badge.test.tsx.snap │ │ │ ├── BannerCallout.test.tsx.snap │ │ │ ├── BannerOverlay.test.tsx.snap │ │ │ ├── BannerSlim.test.tsx.snap │ │ │ ├── BannerUpsell.test.tsx.snap │ │ │ ├── BannerUpsellForm.test.tsx.snap │ │ │ ├── Box.test.tsx.snap │ │ │ ├── ButtonGroup.test.tsx.snap │ │ │ ├── ButtonLink.test.tsx.snap │ │ │ ├── ButtonSocial.test.tsx.snap │ │ │ ├── Caret.test.tsx.snap │ │ │ ├── Checkbox.test.tsx.snap │ │ │ ├── Collage.test.tsx.snap │ │ │ ├── Column.test.tsx.snap │ │ │ ├── ComboBox.jsdom.test.tsx.snap │ │ │ ├── Container.test.tsx.snap │ │ │ ├── Datapoint.test.tsx.snap │ │ │ ├── Divider.test.tsx.snap │ │ │ ├── Dropdown.jsdom.test.tsx.snap │ │ │ ├── Fieldset.test.tsx.snap │ │ │ ├── Flex.test.tsx.snap │ │ │ ├── Heading.test.tsx.snap │ │ │ ├── HelpButton.test.tsx.snap │ │ │ ├── Icon.test.tsx.snap │ │ │ ├── IconButton.jsdom.test.tsx.snap │ │ │ ├── IconButtonLink.test.tsx.snap │ │ │ ├── Image.test.tsx.snap │ │ │ ├── Indicator.jsdom.test.tsx.snap │ │ │ ├── Label.test.tsx.snap │ │ │ ├── Letterbox.test.tsx.snap │ │ │ ├── Link.test.tsx.snap │ │ │ ├── List.test.tsx.snap │ │ │ ├── Mask.test.tsx.snap │ │ │ ├── Modal.jsdom.test.tsx.snap │ │ │ ├── ModalAlert.jsdom.test.tsx.snap │ │ │ ├── NumberField.test.tsx.snap │ │ │ ├── OverlayPanel.jsdom.test.tsx.snap │ │ │ ├── PageHeader.test.tsx.snap │ │ │ ├── Pog.test.tsx.snap │ │ │ ├── Popover.jsdom.test.tsx.snap │ │ │ ├── PopoverMessage.jsdom.test.tsx.snap │ │ │ ├── Pulsar.test.tsx.snap │ │ │ ├── RadioGroup.test.tsx.snap │ │ │ ├── ScrollBoundaryContainer.test.tsx.snap │ │ │ ├── SegmentedControl.test.tsx.snap │ │ │ ├── SelectList.test.tsx.snap │ │ │ ├── SheetMobile.jsdom.test.tsx.snap │ │ │ ├── SideNavigation.test.tsx.snap │ │ │ ├── Spinner.test.tsx.snap │ │ │ ├── Status.test.tsx.snap │ │ │ ├── Sticky.test.tsx.snap │ │ │ ├── Switch.test.tsx.snap │ │ │ ├── Table.test.tsx.snap │ │ │ ├── TableBody.test.tsx.snap │ │ │ ├── TableCell.test.tsx.snap │ │ │ ├── TableFooter.jsdom.test.tsx.snap │ │ │ ├── TableHeader.jsdom.test.tsx.snap │ │ │ ├── TableHeaderCell.test.tsx.snap │ │ │ ├── TableOfContents.test.tsx.snap │ │ │ ├── TableRow.test.tsx.snap │ │ │ ├── TableRowDrawer.test.tsx.snap │ │ │ ├── TableRowExpandable.test.tsx.snap │ │ │ ├── TableSortableHeaderCell.test.tsx.snap │ │ │ ├── Tabs.test.tsx.snap │ │ │ ├── Tag.test.tsx.snap │ │ │ ├── TagData.test.tsx.snap │ │ │ ├── TapArea.test.tsx.snap │ │ │ ├── TapAreaLink.test.tsx.snap │ │ │ ├── Text.test.tsx.snap │ │ │ ├── TextArea.test.tsx.snap │ │ │ ├── TextCompact.test.tsx.snap │ │ │ ├── TextField.test.tsx.snap │ │ │ ├── TextUI.test.tsx.snap │ │ │ ├── TileData.test.tsx.snap │ │ │ ├── Toast.test.tsx.snap │ │ │ ├── Tooltip.jsdom.test.tsx.snap │ │ │ ├── Video.test.tsx.snap │ │ │ └── WashAnimated.test.tsx.snap │ │ ├── accessibility │ │ │ ├── AccessibilityLinkActionIcon.tsx │ │ │ ├── AccessibilityPause.tsx │ │ │ ├── NewTabAccessibilityLabel.tsx │ │ │ ├── VisuallyHidden.tsx │ │ │ └── getAriaLabel.ts │ │ ├── animation │ │ │ ├── AnimationContext.jsdom.test.tsx │ │ │ ├── AnimationContext.tsx │ │ │ ├── DismissingElement.tsx │ │ │ ├── RequestAnimationFrameContext.tsx │ │ │ └── animation.css │ │ ├── ariaTypes.ts │ │ ├── behaviors │ │ │ ├── OutsideEventBehavior.tsx │ │ │ ├── StopScrollBehavior.test.tsx │ │ │ ├── StopScrollBehavior.ts │ │ │ ├── TrapFocusBehavior.tsx │ │ │ └── __snapshots__ │ │ │ │ └── StopScrollBehavior.test.tsx.snap │ │ ├── boxTransforms.ts │ │ ├── boxTypes.ts │ │ ├── boxWhitespace.css │ │ ├── contexts │ │ │ ├── ColorSchemeProvider.jsdom.test.tsx │ │ │ ├── ColorSchemeProvider.tsx │ │ │ ├── DefaultLabelProvider.jsdom.test.tsx │ │ │ ├── DefaultLabelProvider.tsx │ │ │ ├── DesignTokensProvider.tsx │ │ │ ├── DeviceTypeProvider.tsx │ │ │ ├── ExperimentProvider.ts │ │ │ ├── GlobalEventsHandlerProvider.jsdom.test.tsx │ │ │ ├── GlobalEventsHandlerProvider.tsx │ │ │ ├── ListProvider.tsx │ │ │ ├── NestingProvider.tsx │ │ │ ├── ScrollBoundaryContainerProvider.tsx │ │ │ ├── SideNavigationProvider.tsx │ │ │ ├── TableContext.tsx │ │ │ ├── __mocks__ │ │ │ │ └── DefaultLabelProvider.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── ColorSchemeProvider.jsdom.test.tsx.snap │ │ │ └── useDesignTokens.tsx │ │ ├── debounce.ts │ │ ├── getRoundingClassName.ts │ │ ├── global.d.ts │ │ ├── icons │ │ │ ├── .eslintrc.json │ │ │ ├── 360.svg │ │ │ ├── 3d-move.svg │ │ │ ├── 3d.svg │ │ │ ├── accessibility.svg │ │ │ ├── ad-group.svg │ │ │ ├── ad.svg │ │ │ ├── add-circle.svg │ │ │ ├── add-layout.svg │ │ │ ├── add-pin.svg │ │ │ ├── add-section.svg │ │ │ ├── add.svg │ │ │ ├── ads-overview.svg │ │ │ ├── ads-stats.svg │ │ │ ├── alert.svg │ │ │ ├── align-bottom-center.svg │ │ │ ├── align-bottom-left.svg │ │ │ ├── align-bottom-right.svg │ │ │ ├── align-bottom.svg │ │ │ ├── align-middle.svg │ │ │ ├── align-top-center.svg │ │ │ ├── align-top-left.svg │ │ │ ├── align-top-right.svg │ │ │ ├── align-top.svg │ │ │ ├── alphabetical.svg │ │ │ ├── amazon.svg │ │ │ ├── android-share.svg │ │ │ ├── angled-pin.svg │ │ │ ├── animate.svg │ │ │ ├── api.svg │ │ │ ├── apple.svg │ │ │ ├── apps.svg │ │ │ ├── ar-try-on.svg │ │ │ ├── arrow-back.svg │ │ │ ├── arrow-circle-back.svg │ │ │ ├── arrow-circle-down.svg │ │ │ ├── arrow-circle-forward.svg │ │ │ ├── arrow-circle-up.svg │ │ │ ├── arrow-counter-clockwise.svg │ │ │ ├── arrow-double-back.svg │ │ │ ├── arrow-double-forward.svg │ │ │ ├── arrow-down.svg │ │ │ ├── arrow-end.svg │ │ │ ├── arrow-forward.svg │ │ │ ├── arrow-left-curved.svg │ │ │ ├── arrow-nested.svg │ │ │ ├── arrow-start.svg │ │ │ ├── arrow-up-left.svg │ │ │ ├── arrow-up-right.svg │ │ │ ├── arrow-up.svg │ │ │ ├── arrows-vertical.svg │ │ │ ├── aspect-ratio.svg │ │ │ ├── audio-bars.svg │ │ │ ├── audio-mix.svg │ │ │ ├── audio-playing.svg │ │ │ ├── bell-fill.svg │ │ │ ├── bell.svg │ │ │ ├── birthday-cake.svg │ │ │ ├── blur.svg │ │ │ ├── board-sticker-large.svg │ │ │ ├── board-sticker-small.svg │ │ │ ├── board.svg │ │ │ ├── bold.svg │ │ │ ├── border-shadow.svg │ │ │ ├── border.svg │ │ │ ├── briefcase.svg │ │ │ ├── building-business.svg │ │ │ ├── business-hierarchy.svg │ │ │ ├── calendar-check.svg │ │ │ ├── calendar.svg │ │ │ ├── camera-flip.svg │ │ │ ├── camera-roll.svg │ │ │ ├── camera.svg │ │ │ ├── cancel.svg │ │ │ ├── canonical-pin.svg │ │ │ ├── captions-outline.svg │ │ │ ├── captions.svg │ │ │ ├── card-stack-refresh.svg │ │ │ ├── card-stack.svg │ │ │ ├── check-circle-fill.svg │ │ │ ├── check-circle.svg │ │ │ ├── check.svg │ │ │ ├── chevron-down-circle.svg │ │ │ ├── chevron-left-circle.svg │ │ │ ├── chevron-right-circle.svg │ │ │ ├── chevron-up-circle.svg │ │ │ ├── circle-ellipsis.svg │ │ │ ├── circle-information-fill.svg │ │ │ ├── circle-initializing.svg │ │ │ ├── circle.svg │ │ │ ├── clear.svg │ │ │ ├── clipboard.svg │ │ │ ├── clips.svg │ │ │ ├── clock-checked.svg │ │ │ ├── clock.svg │ │ │ ├── cloud-server.svg │ │ │ ├── code-check.svg │ │ │ ├── code.svg │ │ │ ├── cog-fill.svg │ │ │ ├── cog.svg │ │ │ ├── collage.svg │ │ │ ├── collapse.svg │ │ │ ├── color-palette.svg │ │ │ ├── color-picker.svg │ │ │ ├── color-solid.svg │ │ │ ├── color-split.svg │ │ │ ├── color.svg │ │ │ ├── compact │ │ │ │ ├── .eslintrc.json │ │ │ │ ├── compact-add.svg │ │ │ │ ├── compact-angled-pin.svg │ │ │ │ ├── compact-arrow-up-right.svg │ │ │ │ ├── compact-cancel.svg │ │ │ │ ├── compact-check-circle-fill.svg │ │ │ │ ├── compact-check.svg │ │ │ │ ├── compact-chevron-down.svg │ │ │ │ ├── compact-chevron-left.svg │ │ │ │ ├── compact-chevron-right.svg │ │ │ │ ├── compact-chevron-up.svg │ │ │ │ ├── compact-dash.svg │ │ │ │ ├── compact-ellipsis.svg │ │ │ │ ├── compact-info-circle-fill.svg │ │ │ │ ├── compact-lock.svg │ │ │ │ ├── compact-maximize.svg │ │ │ │ ├── compact-mute.svg │ │ │ │ ├── compact-sound-slash.svg │ │ │ │ ├── compact-sound.svg │ │ │ │ ├── compact-sparkle.svg │ │ │ │ ├── compact-workflow-status-canceled.svg │ │ │ │ ├── compact-workflow-status-halted.svg │ │ │ │ ├── compact-workflow-status-in-progress.svg │ │ │ │ ├── compact-workflow-status-problem.svg │ │ │ │ ├── compact-workflow-status-unstarted.svg │ │ │ │ ├── compact-workflow-status-warning.svg │ │ │ │ └── index.ts │ │ │ ├── compass-fill.svg │ │ │ ├── compass.svg │ │ │ ├── compose.svg │ │ │ ├── contrast.svg │ │ │ ├── conversion-tag.svg │ │ │ ├── copy-to-clipboard.svg │ │ │ ├── credit-card-plus.svg │ │ │ ├── credit-card.svg │ │ │ ├── crop.svg │ │ │ ├── crystal-ball.svg │ │ │ ├── cutout.svg │ │ │ ├── dash.svg │ │ │ ├── data-source.svg │ │ │ ├── deselect.svg │ │ │ ├── design.svg │ │ │ ├── desktop.svg │ │ │ ├── diagnostics.svg │ │ │ ├── directional-arrow-left.svg │ │ │ ├── directional-arrow-right.svg │ │ │ ├── download.svg │ │ │ ├── drag-drop.svg │ │ │ ├── draw.svg │ │ │ ├── dropbox.svg │ │ │ ├── duplicate.svg │ │ │ ├── edit.svg │ │ │ ├── ellipsis.svg │ │ │ ├── envelope.svg │ │ │ ├── erase-auto.svg │ │ │ ├── erase.svg │ │ │ ├── etsy.svg │ │ │ ├── expand.svg │ │ │ ├── eye-hide.svg │ │ │ ├── eye.svg │ │ │ ├── face-happy.svg │ │ │ ├── face-neutral.svg │ │ │ ├── face-sad.svg │ │ │ ├── face-smiley-outline.svg │ │ │ ├── face-smiley-plus.svg │ │ │ ├── face-smiley.svg │ │ │ ├── face-tryon.svg │ │ │ ├── facebook.svg │ │ │ ├── fade.svg │ │ │ ├── ferris-wheel.svg │ │ │ ├── file-box.svg │ │ │ ├── file-unknown.svg │ │ │ ├── fill-opaque.svg │ │ │ ├── fill-transparent.svg │ │ │ ├── filter.svg │ │ │ ├── flag.svg │ │ │ ├── flame.svg │ │ │ ├── flash-automatic.svg │ │ │ ├── flash-slash.svg │ │ │ ├── flash.svg │ │ │ ├── flashlight.svg │ │ │ ├── flip-horizontal.svg │ │ │ ├── flip-vertical.svg │ │ │ ├── folder-fill.svg │ │ │ ├── folder.svg │ │ │ ├── forward.svg │ │ │ ├── gauge.svg │ │ │ ├── ghost-fill.svg │ │ │ ├── ghost.svg │ │ │ ├── gif-visual.svg │ │ │ ├── gif.svg │ │ │ ├── gift.svg │ │ │ ├── globe-checked.svg │ │ │ ├── globe.svg │ │ │ ├── gmail.svg │ │ │ ├── graph-bar.svg │ │ │ ├── graph-pie.svg │ │ │ ├── hand-pointing.svg │ │ │ ├── hand.svg │ │ │ ├── handle.svg │ │ │ ├── heart-broken.svg │ │ │ ├── heart-health.svg │ │ │ ├── heart-outline.svg │ │ │ ├── heart.svg │ │ │ ├── highlights.svg │ │ │ ├── history.svg │ │ │ ├── home-fill.svg │ │ │ ├── home.svg │ │ │ ├── idea-pin.svg │ │ │ ├── image-portrait.svg │ │ │ ├── imessage.svg │ │ │ ├── impressum.svg │ │ │ ├── indent.svg │ │ │ ├── index.ts │ │ │ ├── info-circle.svg │ │ │ ├── information.svg │ │ │ ├── insights-audience.svg │ │ │ ├── insights-conversion.svg │ │ │ ├── instagram-stories.svg │ │ │ ├── instagram.svg │ │ │ ├── invoice.svg │ │ │ ├── italics.svg │ │ │ ├── kakao-talk.svg │ │ │ ├── key.svg │ │ │ ├── knoop.svg │ │ │ ├── lab-flask.svg │ │ │ ├── lasso-magic.svg │ │ │ ├── layers-stack.svg │ │ │ ├── layout.svg │ │ │ ├── lightbulb.svg │ │ │ ├── lightning-bolt-circle.svg │ │ │ ├── link-broken.svg │ │ │ ├── link.svg │ │ │ ├── lips.svg │ │ │ ├── list-bullets.svg │ │ │ ├── list-numbered-rtl.svg │ │ │ ├── list-numbered.svg │ │ │ ├── location.svg │ │ │ ├── lock.svg │ │ │ ├── logo-large.svg │ │ │ ├── logo-small.svg │ │ │ ├── logout.svg │ │ │ ├── magic-pen.svg │ │ │ ├── magic-wand.svg │ │ │ ├── magnifying-glass-sparkle.svg │ │ │ ├── manage-access.svg │ │ │ ├── margins-large.svg │ │ │ ├── margins-medium.svg │ │ │ ├── margins-small.svg │ │ │ ├── maximize.svg │ │ │ ├── megaphone.svg │ │ │ ├── menu.svg │ │ │ ├── messenger.svg │ │ │ ├── microphone.svg │ │ │ ├── minimize.svg │ │ │ ├── mobile.svg │ │ │ ├── moon.svg │ │ │ ├── move-pin.svg │ │ │ ├── music-off.svg │ │ │ ├── music-on.svg │ │ │ ├── mute-fill.svg │ │ │ ├── mute.svg │ │ │ ├── orientation-landscape.svg │ │ │ ├── orientation-portrait.svg │ │ │ ├── outdent.svg │ │ │ ├── outlook.svg │ │ │ ├── overlay-text-outline.svg │ │ │ ├── overlay-text.svg │ │ │ ├── overview.svg │ │ │ ├── paper-clip.svg │ │ │ ├── paper-lines-plus.svg │ │ │ ├── pause.svg │ │ │ ├── pen-auto.svg │ │ │ ├── pen.svg │ │ │ ├── people.svg │ │ │ ├── performance-plus.svg │ │ │ ├── person-add.svg │ │ │ ├── person-fill.svg │ │ │ ├── person-magnifying-glass.svg │ │ │ ├── person.svg │ │ │ ├── phone.svg │ │ │ ├── pin-hide.svg │ │ │ ├── pin.svg │ │ │ ├── pincode.svg │ │ │ ├── pinterest.svg │ │ │ ├── play.svg │ │ │ ├── protect.svg │ │ │ ├── qr-code.svg │ │ │ ├── question-mark.svg │ │ │ ├── quote.svg │ │ │ ├── record-limit-10.svg │ │ │ ├── record-limit-15.svg │ │ │ ├── record-limit-30.svg │ │ │ ├── record-limit-5.svg │ │ │ ├── record-limit-60.svg │ │ │ ├── record-limit.svg │ │ │ ├── redo.svg │ │ │ ├── refresh.svg │ │ │ ├── remove.svg │ │ │ ├── reorder-images.svg │ │ │ ├── replace.svg │ │ │ ├── report.svg │ │ │ ├── rewind.svg │ │ │ ├── ribbon.svg │ │ │ ├── rocketship.svg │ │ │ ├── rotate.svg │ │ │ ├── saturation.svg │ │ │ ├── save-outline.svg │ │ │ ├── saved.svg │ │ │ ├── scale.svg │ │ │ ├── scissors.svg │ │ │ ├── search-by-image.svg │ │ │ ├── search-fill.svg │ │ │ ├── search.svg │ │ │ ├── security.svg │ │ │ ├── select.svg │ │ │ ├── send.svg │ │ │ ├── shadows.svg │ │ │ ├── shapes.svg │ │ │ ├── share.svg │ │ │ ├── shopping-bag-fill.svg │ │ │ ├── shopping-bag.svg │ │ │ ├── shrink.svg │ │ │ ├── shuffles.svg │ │ │ ├── skintone.svg │ │ │ ├── slide.svg │ │ │ ├── smiley.svg │ │ │ ├── snapchat.svg │ │ │ ├── sort-ascending.svg │ │ │ ├── sort-descending.svg │ │ │ ├── sound-fill.svg │ │ │ ├── sound-slash-fill.svg │ │ │ ├── sound-slash.svg │ │ │ ├── sound.svg │ │ │ ├── sparkle.svg │ │ │ ├── speech-ellipsis-fill.svg │ │ │ ├── speech-ellipsis.svg │ │ │ ├── speech-exclamation-point.svg │ │ │ ├── speech-heart.svg │ │ │ ├── speech-outline.svg │ │ │ ├── speech.svg │ │ │ ├── speed-.3x.svg │ │ │ ├── speed-.5x.svg │ │ │ ├── speed-1x.svg │ │ │ ├── speed-2x.svg │ │ │ ├── speed-3x.svg │ │ │ ├── speed.svg │ │ │ ├── spread.svg │ │ │ ├── square-plus-fill.svg │ │ │ ├── square-plus.svg │ │ │ ├── star-half.svg │ │ │ ├── star-outline.svg │ │ │ ├── star.svg │ │ │ ├── sticker-image.svg │ │ │ ├── sticker.svg │ │ │ ├── sun.svg │ │ │ ├── swap.svg │ │ │ ├── switch-account.svg │ │ │ ├── table.svg │ │ │ ├── tag-star.svg │ │ │ ├── tag.svg │ │ │ ├── target.svg │ │ │ ├── telegram.svg │ │ │ ├── template.svg │ │ │ ├── terms.svg │ │ │ ├── text-align-center.svg │ │ │ ├── text-align-left.svg │ │ │ ├── text-align-right.svg │ │ │ ├── text-all-caps.svg │ │ │ ├── text-extra-small.svg │ │ │ ├── text-invert.svg │ │ │ ├── text-large.svg │ │ │ ├── text-line-height.svg │ │ │ ├── text-medium.svg │ │ │ ├── text-sentence-case.svg │ │ │ ├── text-size.svg │ │ │ ├── text-small.svg │ │ │ ├── text-spacing.svg │ │ │ ├── text-sticker.svg │ │ │ ├── text.svg │ │ │ ├── threads.svg │ │ │ ├── thumbs-down.svg │ │ │ ├── thumbs-up.svg │ │ │ ├── timer-10.svg │ │ │ ├── timer-3.svg │ │ │ ├── timer.svg │ │ │ ├── tint.svg │ │ │ ├── trash-can.svg │ │ │ ├── trending.svg │ │ │ ├── underline.svg │ │ │ ├── undo.svg │ │ │ ├── unlock.svg │ │ │ ├── upload-feed.svg │ │ │ ├── viber.svg │ │ │ ├── vibrance.svg │ │ │ ├── video-advance-10-seconds.svg │ │ │ ├── video-camera.svg │ │ │ ├── video-rewind-10-seconds.svg │ │ │ ├── view-type-default-fill.svg │ │ │ ├── view-type-default.svg │ │ │ ├── view-type-dense.svg │ │ │ ├── view-type-list.svg │ │ │ ├── view-type-sparse.svg │ │ │ ├── visit.svg │ │ │ ├── warmth.svg │ │ │ ├── wave.svg │ │ │ ├── whatsapp.svg │ │ │ ├── wifi-no.svg │ │ │ ├── workflow-status-all.svg │ │ │ ├── workflow-status-canceled.svg │ │ │ ├── workflow-status-halted.svg │ │ │ ├── workflow-status-in-progress.svg │ │ │ ├── workflow-status-ok.svg │ │ │ ├── workflow-status-problem.svg │ │ │ ├── workflow-status-queued.svg │ │ │ ├── workflow-status-unstarted.svg │ │ │ ├── workflow-status-warning.svg │ │ │ ├── x-social.svg │ │ │ ├── yahoo.svg │ │ │ └── youtube.svg │ │ ├── index.ts │ │ ├── keyCodes.ts │ │ ├── sharedSubcomponents │ │ │ ├── FormElement.css │ │ │ ├── FormErrorMessage.css │ │ │ ├── FormErrorMessage.test.tsx │ │ │ ├── FormErrorMessage.tsx │ │ │ ├── FormHelperText.css │ │ │ ├── FormHelperText.tsx │ │ │ ├── FormHelperTextCounter.tsx │ │ │ ├── FormLabel.css │ │ │ ├── FormLabel.tsx │ │ │ ├── InternalDismissButton.tsx │ │ │ ├── MaybeTooltip.tsx │ │ │ ├── OverridingSpan.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── FormErrorMessage.test.tsx.snap │ │ │ └── thumbnailSubcomponents.tsx │ │ ├── style.test.ts │ │ ├── style.ts │ │ ├── textTypes.ts │ │ ├── throttle.ts │ │ ├── transforms.ts │ │ ├── useDebouncedCallback.ts │ │ ├── useFocusVisible.ts │ │ ├── useInExperiment.ts │ │ ├── useIsomorphicLayoutEffect.ts │ │ ├── useReducedMotion.jsdom.test.ts │ │ ├── useReducedMotion.test.ts │ │ ├── useReducedMotion.ts │ │ ├── useResponsiveMinWidth.jsdom.test.ts │ │ ├── useResponsiveMinWidth.test.ts │ │ ├── useResponsiveMinWidth.ts │ │ ├── useTapFeedback.ts │ │ ├── utils │ │ │ ├── datavizcolors │ │ │ │ ├── getCheckboxColor.test.ts │ │ │ │ ├── getCheckboxColor.ts │ │ │ │ ├── getDataVisualizationColor.test.ts │ │ │ │ └── getDataVisualizationColor.ts │ │ │ ├── flattenChildren.ts │ │ │ ├── isComponentNode.ts │ │ │ ├── keyboardNavigation.ts │ │ │ ├── matchMedia.ts │ │ │ ├── omit.ts │ │ │ ├── positioningTypes.ts │ │ │ ├── positioningUtils.ts │ │ │ ├── tapScaleAnimation.css │ │ │ ├── testing │ │ │ │ └── expectToThrow.ts │ │ │ ├── useExperimentalTheme.ts │ │ │ ├── useInteractiveStates.ts │ │ │ ├── useTapScaleAnimation.ts │ │ │ └── wrapWithComponent.tsx │ │ ├── zIndex.test.ts │ │ └── zIndex.ts │ └── tsconfig.json └── stylelint-plugin-gestalt │ ├── README.md │ ├── package.json │ └── src │ ├── __fixtures__ │ └── no-invalid-design-tokens │ │ ├── invalid-color.css │ │ ├── invalid-composed-color.css │ │ ├── invalid-rounding.css │ │ ├── valid-color.css │ │ ├── valid-composed-color.css │ │ ├── valid-non-gestalt.css │ │ └── valid-rounding.css │ ├── helpers │ └── testHelpers.js │ ├── index.js │ ├── no-invalid-design-tokens.js │ └── no-invalid-design-tokens.test.js ├── playwright ├── accessibility │ ├── DateRange.spec.ts │ ├── Home.spec.ts │ ├── android__avatar.spec.ts │ ├── android__avatargroup.spec.ts │ ├── android__badge.spec.ts │ ├── android__button.spec.ts │ ├── android__buttongroup.spec.ts │ ├── android__buttontoggle.spec.ts │ ├── android__checkbox.spec.ts │ ├── android__component_status.spec.ts │ ├── android__icon.spec.ts │ ├── android__iconbutton.spec.ts │ ├── android__iconbuttonfloating.spec.ts │ ├── android__listaction.spec.ts │ ├── android__overview.spec.ts │ ├── android__searchfield.spec.ts │ ├── android__searchguide.spec.ts │ ├── android__sheet.spec.ts │ ├── android__switch.spec.ts │ ├── android__tabs.spec.ts │ ├── android__text.spec.ts │ ├── android__textarea.spec.ts │ ├── android__textfield.spec.ts │ ├── android__toast.spec.ts │ ├── expectAccessiblePage.ts │ ├── foundations__accessibility.spec.ts │ ├── foundations__brand_expression__color_fills.spec.ts │ ├── foundations__brand_expression__guidelines.spec.ts │ ├── foundations__color__examples.spec.ts │ ├── foundations__color__palette.spec.ts │ ├── foundations__color__usage.spec.ts │ ├── foundations__content_standards.spec.ts │ ├── foundations__content_standards__formatting.spec.ts │ ├── foundations__content_standards__grammar.spec.ts │ ├── foundations__content_standards__inclusive_language.spec.ts │ ├── foundations__content_standards__resources.spec.ts │ ├── foundations__content_standards__syntax_and_structure.spec.ts │ ├── foundations__content_standards__ui_elements.spec.ts │ ├── foundations__content_standards__voice.spec.ts │ ├── foundations__data_visualization__available_components.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__bar_graphs.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__combo_graphs.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__donut_charts.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__funnel_charts.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__general_guidelines.spec.ts │ ├── foundations__data_visualization__charts_and_graphs__line_graphs.spec.ts │ ├── foundations__data_visualization__color__palette.spec.ts │ ├── foundations__data_visualization__color__usage.spec.ts │ ├── foundations__data_visualization__micro_visualizations.spec.ts │ ├── foundations__data_visualization__overview.spec.ts │ ├── foundations__design_tokens__component_tokens.spec.ts │ ├── foundations__design_tokens__overview.spec.ts │ ├── foundations__elevation.spec.ts │ ├── foundations__forms__available_components.spec.ts │ ├── foundations__forms__example_code.spec.ts │ ├── foundations__forms__overview.spec.ts │ ├── foundations__forms__structure_and_behavior.spec.ts │ ├── foundations__iconography__creating_icons.spec.ts │ ├── foundations__iconography__custom_and_brand_icons.spec.ts │ ├── foundations__iconography__usage.spec.ts │ ├── foundations__illustration.spec.ts │ ├── foundations__international_design__about_international_design.spec.ts │ ├── foundations__international_design__icon_localization.spec.ts │ ├── foundations__international_design__number_localization.spec.ts │ ├── foundations__international_design__pluralization.spec.ts │ ├── foundations__international_design__rtl_guidelines__iconography.spec.ts │ ├── foundations__international_design__rtl_guidelines__layout_and_text_direction.spec.ts │ ├── foundations__international_design__rtl_guidelines__rtl_overview.spec.ts │ ├── foundations__international_design__rtl_guidelines__typography.spec.ts │ ├── foundations__layout.spec.ts │ ├── foundations__messaging__available_components.spec.ts │ ├── foundations__messaging__overview.spec.ts │ ├── foundations__messaging__priority_and_placement.spec.ts │ ├── foundations__motion__guidelines.spec.ts │ ├── foundations__motion__principles.spec.ts │ ├── foundations__overview.spec.ts │ ├── foundations__screen_sizes.spec.ts │ ├── foundations__typography.spec.ts │ ├── get_started__about_us.spec.ts │ ├── get_started__designers.spec.ts │ ├── get_started__developers__contributing__creating_and_updating_pages.spec.ts │ ├── get_started__developers__contributing__development_process.spec.ts │ ├── get_started__developers__contributing__experimentation.spec.ts │ ├── get_started__developers__eslint_plugin.spec.ts │ ├── get_started__developers__hacking_gestalt.spec.ts │ ├── get_started__developers__installation.spec.ts │ ├── get_started__developers__releases.spec.ts │ ├── get_started__developers__tooling__web.spec.ts │ ├── get_started__faq.spec.ts │ ├── ios__avatar.spec.ts │ ├── ios__avatargroup.spec.ts │ ├── ios__badge.spec.ts │ ├── ios__button.spec.ts │ ├── ios__buttongroup.spec.ts │ ├── ios__buttontoggle.spec.ts │ ├── ios__checkbox.spec.ts │ ├── ios__component_status.spec.ts │ ├── ios__icon.spec.ts │ ├── ios__iconbutton.spec.ts │ ├── ios__iconbuttonfloating.spec.ts │ ├── ios__listaction.spec.ts │ ├── ios__module__module.boards.spec.ts │ ├── ios__module__module.header.spec.ts │ ├── ios__module__module.pins.spec.ts │ ├── ios__module__module.spec.ts │ ├── ios__overview.spec.ts │ ├── ios__searchfield.spec.ts │ ├── ios__searchguide.spec.ts │ ├── ios__sheet.spec.ts │ ├── ios__switch.spec.ts │ ├── ios__tabs.spec.ts │ ├── ios__text.spec.ts │ ├── ios__textarea.spec.ts │ ├── ios__textfield.spec.ts │ ├── ios__toast.spec.ts │ ├── team_support__component_request.spec.ts │ ├── team_support__design_contributions__contribution_types_and_criteria.spec.ts │ ├── team_support__design_contributions__design_contributions_overview.spec.ts │ ├── team_support__design_contributions__process_deep_dive.spec.ts │ ├── team_support__design_contributions__process_diagrams.spec.ts │ ├── team_support__design_file_hygiene__design_handoff.spec.ts │ ├── team_support__design_file_hygiene__figma_branches.spec.ts │ ├── team_support__design_file_hygiene__naming_convention.spec.ts │ ├── team_support__design_file_hygiene__organizing_layout.spec.ts │ ├── team_support__get_help.spec.ts │ ├── team_support__overview.spec.ts │ ├── team_support__training.spec.ts │ ├── web__accordion.spec.ts │ ├── web__activationcard.spec.ts │ ├── web__avatar.spec.ts │ ├── web__avatargroup.spec.ts │ ├── web__avatargroupcluster.spec.ts │ ├── web__badge.spec.ts │ ├── web__bannercallout.spec.ts │ ├── web__banneroverlay.spec.ts │ ├── web__bannerslim.spec.ts │ ├── web__bannerupsell.spec.ts │ ├── web__box.spec.ts │ ├── web__button.spec.ts │ ├── web__buttongroup.spec.ts │ ├── web__buttonlink.spec.ts │ ├── web__buttonsocial.spec.ts │ ├── web__buttontoggle.spec.ts │ ├── web__chartgraph.spec.ts │ ├── web__checkbox.spec.ts │ ├── web__collage.spec.ts │ ├── web__column.spec.ts │ ├── web__combobox.spec.ts │ ├── web__component_status.spec.ts │ ├── web__container.spec.ts │ ├── web__datapoint.spec.ts │ ├── web__datefield.spec.ts │ ├── web__datepicker.spec.ts │ ├── web__daterange.spec.ts │ ├── web__divider.spec.ts │ ├── web__dropdown.spec.ts │ ├── web__fieldset.spec.ts │ ├── web__flex.spec.ts │ ├── web__heading.spec.ts │ ├── web__helpbutton.spec.ts │ ├── web__icon.spec.ts │ ├── web__iconbutton.spec.ts │ ├── web__iconbuttonfloating.spec.ts │ ├── web__iconbuttonlink.spec.ts │ ├── web__iconcompact.spec.ts │ ├── web__image.spec.ts │ ├── web__indicator.spec.ts │ ├── web__label.spec.ts │ ├── web__layer.spec.ts │ ├── web__letterbox.spec.ts │ ├── web__link.spec.ts │ ├── web__list.spec.ts │ ├── web__mask.spec.ts │ ├── web__masonry.spec.ts │ ├── web__modal.spec.ts │ ├── web__modalalert.spec.ts │ ├── web__numberfield.spec.ts │ ├── web__overlaypanel.spec.ts │ ├── web__overview.spec.ts │ ├── web__pageheader.spec.ts │ ├── web__pog.spec.ts │ ├── web__popover.spec.ts │ ├── web__popovermessage.spec.ts │ ├── web__pulsar.spec.ts │ ├── web__radiogroup.spec.ts │ ├── web__searchfield.spec.ts │ ├── web__searchguide.spec.ts │ ├── web__searchguidelink.spec.ts │ ├── web__segmentedcontrol.spec.ts │ ├── web__selectlist.spec.ts │ ├── web__sheetmobile.spec.ts │ ├── web__sidenavigation.spec.ts │ ├── web__spinner.spec.ts │ ├── web__status.spec.ts │ ├── web__sticky.spec.ts │ ├── web__switch.spec.ts │ ├── web__table.spec.ts │ ├── web__tableofcontents.spec.ts │ ├── web__tabs.spec.ts │ ├── web__tag.spec.ts │ ├── web__tagdata.spec.ts │ ├── web__taparea.spec.ts │ ├── web__taparealink.spec.ts │ ├── web__text.spec.ts │ ├── web__textarea.spec.ts │ ├── web__textcompact.spec.ts │ ├── web__textfield.spec.ts │ ├── web__textui.spec.ts │ ├── web__tiledata.spec.ts │ ├── web__toast.spec.ts │ ├── web__tooling.ts │ ├── web__tooltip.spec.ts │ ├── web__utilities__colorschemeprovider.spec.ts │ ├── web__utilities__defaultlabelprovider.spec.ts │ ├── web__utilities__designtokensprovider.spec.ts │ ├── web__utilities__devicetypeprovider.spec.ts │ ├── web__utilities__globaleventshandlerprovider.spec.ts │ ├── web__utilities__scrollboundarycontainer.spec.ts │ ├── web__utilities__usefocusvisible.spec.ts │ ├── web__utilities__usereducedmotion.spec.ts │ ├── web__video.spec.ts │ ├── web__washanimated.spec.ts │ └── web__zindex_classes.spec.ts ├── masonry │ ├── dynamic-heights-multiColumn.spec.ts │ ├── fetch-more.spec.ts │ ├── flexible-resize.spec.ts │ ├── handle-item-updates.spec.ts │ ├── handle-position-update.spec.ts │ ├── handle-update-during-insertions.spec.ts │ ├── item-prop-change-key-reset.spec.ts │ ├── load-more.spec.ts │ ├── multicolumn-layout.spec.ts │ ├── no-scroll.spec.ts │ ├── null-items.spec.ts │ ├── optimized-remount.spec.ts │ ├── parent-sizing.spec.ts │ ├── reflow-item-prop-changes.spec.ts │ ├── reflow-item-prop-removal.spec.ts │ ├── render-height.spec.ts │ ├── resize-reflow.spec.ts │ ├── responsive-module-second-item.spec.ts │ ├── scroll-performance.spec.ts │ ├── server-render-layout.spec.ts │ ├── shuffle-items.spec.ts │ ├── slot-index.spec.ts │ ├── two-module.spec.ts │ ├── update-scroll-container.spec.ts │ ├── utils │ │ ├── clickButton.ts │ │ ├── countColumns.ts │ │ ├── getGridItems.ts │ │ ├── getServerURL.ts │ │ ├── getStaticGridItems.ts │ │ ├── resizeWidth.ts │ │ ├── selectors.ts │ │ ├── tracingEvents.ts │ │ └── waitForRenderedItems.ts │ ├── virtual-bounds-visibility.spec.ts │ └── virtualization-with-scroll-container.spec.ts ├── playwright.config.ts └── visual-test │ ├── Accordion-dark.spec.ts │ ├── Accordion-dark.spec.ts-snapshots │ ├── Accordion-lg-chromium-darwin.png │ ├── Accordion-md-chromium-darwin.png │ └── Accordion-sm-chromium-darwin.png │ ├── Accordion.spec.ts │ ├── Accordion.spec.ts-snapshots │ ├── Accordion-lg-chromium-darwin.png │ ├── Accordion-md-chromium-darwin.png │ └── Accordion-sm-chromium-darwin.png │ ├── ActivationCard-dark.spec.ts │ ├── ActivationCard-dark.spec.ts-snapshots │ └── ActivationCard-dark-chromium-darwin.png │ ├── ActivationCard.spec.ts │ ├── ActivationCard.spec.ts-snapshots │ └── ActivationCard-chromium-darwin.png │ ├── Avatar-dark.spec.ts │ ├── Avatar-dark.spec.ts-snapshots │ └── Avatar-dark-chromium-darwin.png │ ├── Avatar.spec.ts │ ├── Avatar.spec.ts-snapshots │ └── Avatar-chromium-darwin.png │ ├── AvatarGroup-dark.spec.ts │ ├── AvatarGroup-dark.spec.ts-snapshots │ └── AvatarGroup-dark-chromium-darwin.png │ ├── AvatarGroup.spec.ts │ ├── AvatarGroup.spec.ts-snapshots │ └── AvatarGroup-chromium-darwin.png │ ├── AvatarGroupCluster-dark.spec.ts │ ├── AvatarGroupCluster-dark.spec.ts-snapshots │ └── AvatarGroupCluster-dark-chromium-darwin.png │ ├── AvatarGroupCluster.spec.ts │ ├── AvatarGroupCluster.spec.ts-snapshots │ └── AvatarGroupCluster-chromium-darwin.png │ ├── Badge-dark.spec.ts │ ├── Badge-dark.spec.ts-snapshots │ └── Badge-dark-chromium-darwin.png │ ├── Badge.spec.ts │ ├── Badge.spec.ts-snapshots │ └── Badge-chromium-darwin.png │ ├── BannerCallout-dark.spec.ts │ ├── BannerCallout-dark.spec.ts-snapshots │ └── BannerCallout-dark-chromium-darwin.png │ ├── BannerCallout.spec.ts │ ├── BannerCallout.spec.ts-snapshots │ └── BannerCallout-chromium-darwin.png │ ├── BannerOverlay-dark.spec.ts │ ├── BannerOverlay.spec.ts │ ├── BannerSlim-dark.spec.ts │ ├── BannerSlim-dark.spec.ts-snapshots │ └── BannerSlim-dark-chromium-darwin.png │ ├── BannerSlim.spec.ts │ ├── BannerSlim.spec.ts-snapshots │ └── BannerSlim-chromium-darwin.png │ ├── BannerUpsell-dark.spec.ts │ ├── BannerUpsell-dark.spec.ts-snapshots │ └── BannerUpsell-dark-chromium-darwin.png │ ├── BannerUpsell.spec.ts │ ├── BannerUpsell.spec.ts-snapshots │ └── BannerUpsell-chromium-darwin.png │ ├── Box-dark.spec.ts │ ├── Box-dark.spec.ts-snapshots │ └── Box-dark-chromium-darwin.png │ ├── Box.spec.ts │ ├── Box.spec.ts-snapshots │ └── Box-chromium-darwin.png │ ├── Button-dark.spec.ts │ ├── Button-dark.spec.ts-snapshots │ └── Button-dark-chromium-darwin.png │ ├── Button.spec.ts │ ├── Button.spec.ts-snapshots │ └── Button-chromium-darwin.png │ ├── ButtonGroup-dark.spec.ts │ ├── ButtonGroup-dark.spec.ts-snapshots │ └── ButtonGroup-dark-chromium-darwin.png │ ├── ButtonGroup.spec.ts │ ├── ButtonGroup.spec.ts-snapshots │ └── ButtonGroup-chromium-darwin.png │ ├── ButtonLink-dark.spec.ts │ ├── ButtonLink-dark.spec.ts-snapshots │ └── ButtonLink-dark-chromium-darwin.png │ ├── ButtonLink.spec.ts │ ├── ButtonLink.spec.ts-snapshots │ └── ButtonLink-chromium-darwin.png │ ├── ButtonSocial-dark.spec.ts │ ├── ButtonSocial.spec.ts │ ├── ButtonToggle-dark.spec.ts │ ├── ButtonToggle-dark.spec.ts-snapshots │ └── ButtonToggle-dark-chromium-darwin.png │ ├── ButtonToggle.spec.ts │ ├── ButtonToggle.spec.ts-snapshots │ └── ButtonToggle-chromium-darwin.png │ ├── ChartGraph-dark.spec.ts │ ├── ChartGraph.spec.ts │ ├── Checkbox-dark.spec.ts │ ├── Checkbox-dark.spec.ts-snapshots │ └── Checkbox-dark-chromium-darwin.png │ ├── Checkbox.spec.ts │ ├── Checkbox.spec.ts-snapshots │ └── Checkbox-chromium-darwin.png │ ├── Collage-dark.spec.ts │ ├── Collage-dark.spec.ts-snapshots │ └── Collage-dark-chromium-darwin.png │ ├── Collage.spec.ts │ ├── Collage.spec.ts-snapshots │ └── Collage-chromium-darwin.png │ ├── Column.spec.ts │ ├── Column.spec.ts-snapshots │ └── Column-chromium-darwin.png │ ├── ComboBox-closed-dark.spec.ts │ ├── ComboBox-closed-dark.spec.ts-snapshots │ └── ComboBox-closed-dark-chromium-darwin.png │ ├── ComboBox-closed.spec.ts │ ├── ComboBox-closed.spec.ts-snapshots │ └── ComboBox-closed-chromium-darwin.png │ ├── ComboBox-open-dark.spec.ts │ ├── ComboBox-open-dark.spec.ts-snapshots │ └── ComboBox-open-dark-chromium-darwin.png │ ├── ComboBox-open.spec.ts │ ├── ComboBox-open.spec.ts-snapshots │ └── ComboBox-open-chromium-darwin.png │ ├── Container.spec.ts │ ├── Container.spec.ts-snapshots │ └── Container-chromium-darwin.png │ ├── Datapoint-dark.spec.ts │ ├── Datapoint-dark.spec.ts-snapshots │ └── Datapoint-dark-chromium-darwin.png │ ├── Datapoint.spec.ts │ ├── Datapoint.spec.ts-snapshots │ └── Datapoint-chromium-darwin.png │ ├── DateField-dark.spec.ts │ ├── DateField-dark.spec.ts-snapshots │ └── DateField-dark-chromium-darwin.png │ ├── DateField.spec.ts │ ├── DateField.spec.ts-snapshots │ └── DateField-light-chromium-darwin.png │ ├── DatePicker-closed-dark.spec.ts │ ├── DatePicker-closed-dark.spec.ts-snapshots │ └── DatePicker-closed-dark-chromium-darwin.png │ ├── DatePicker-closed.spec.ts │ ├── DatePicker-closed.spec.ts-snapshots │ └── DatePicker-closed-chromium-darwin.png │ ├── DateRange-dark.spec.ts │ ├── DateRange-dark.spec.ts-snapshots │ └── DateRange-dark-chromium-darwin.png │ ├── DateRange-secondary-date.spec.ts │ ├── DateRange-secondary-date.spec.ts-snapshots │ ├── DateRange-dark-chromium-darwin.png │ └── DateRange-secondary-range-chromium-darwin.png │ ├── DateRange.spec.ts │ ├── DateRange.spec.ts-snapshots │ └── DateRange-light-chromium-darwin.png │ ├── Divider-dark.spec.ts │ ├── Divider-dark.spec.ts-snapshots │ └── Divider-dark-chromium-darwin.png │ ├── Divider.spec.ts │ ├── Divider.spec.ts-snapshots │ └── Divider-chromium-darwin.png │ ├── Dropdown-open-dark.spec.ts │ ├── Dropdown-open-dark.spec.ts-snapshots │ └── Dropdown-open-dark-chromium-darwin.png │ ├── Dropdown-open.spec.ts │ ├── Dropdown-open.spec.ts-snapshots │ └── Dropdown-open-chromium-darwin.png │ ├── Fieldset-dark.spec.ts │ ├── Fieldset-dark.spec.ts-snapshots │ └── Fieldset-dark-chromium-darwin.png │ ├── Fieldset.spec.ts │ ├── Fieldset.spec.ts-snapshots │ └── Fieldset-chromium-darwin.png │ ├── Flex.spec.ts │ ├── Flex.spec.ts-snapshots │ └── Flex-chromium-darwin.png │ ├── Heading-dark.spec.ts │ ├── Heading-dark.spec.ts-snapshots │ └── Heading-dark-chromium-darwin.png │ ├── Heading.spec.ts │ ├── Heading.spec.ts-snapshots │ └── Heading-chromium-darwin.png │ ├── HelpButton.spec.ts │ ├── HelpButton.spec.ts-snapshots │ └── HelpButton-chromium-darwin.png │ ├── Icon-list-dark.spec.ts │ ├── Icon-list-dark.spec.ts-snapshots │ └── Icon-list-dark-chromium-darwin.png │ ├── Icon-list-vr.spec.ts │ ├── Icon-list-vr.spec.ts-snapshots │ └── Icon-list-vr-chromium-darwin.png │ ├── Icon-list.spec.ts │ ├── Icon-list.spec.ts-snapshots │ ├── Icon-list-chromium-darwin.png │ └── Icon-vr-theme-list-chromium-darwin.png │ ├── IconButton-dark.spec.ts │ ├── IconButton-dark.spec.ts-snapshots │ └── IconButton-dark-chromium-darwin.png │ ├── IconButton.spec.ts │ ├── IconButton.spec.ts-snapshots │ └── IconButton-chromium-darwin.png │ ├── IconButtonFloating-dark.spec.ts │ ├── IconButtonFloating-dark.spec.ts-snapshots │ └── IconButtonFloating-dark-chromium-darwin.png │ ├── IconButtonFloating.spec.ts │ ├── IconButtonFloating.spec.ts-snapshots │ └── IconButtonFloating-chromium-darwin.png │ ├── IconCompact-list-dark.spec.ts │ ├── IconCompact-list-dark.spec.ts-snapshots │ └── IconCompact-list-dark-chromium-darwin.png │ ├── IconCompact-list-vr.spec.ts │ ├── IconCompact-list-vr.spec.ts-snapshots │ └── IconCompact-list-vr-chromium-darwin.png │ ├── IconCompact-list.spec.ts │ ├── IconCompact-list.spec.ts-snapshots │ └── IconCompact-list-chromium-darwin.png │ ├── Image-dark.spec.ts │ ├── Image-dark.spec.ts-snapshots │ └── Image-dark-chromium-darwin.png │ ├── Image.spec.ts │ ├── Image.spec.ts-snapshots │ └── Image-chromium-darwin.png │ ├── Indicator-dark.spec.ts │ ├── Indicator-dark.spec.ts-snapshots │ └── Indicator-dark-chromium-darwin.png │ ├── Indicator.spec.ts │ ├── Indicator.spec.ts-snapshots │ └── Indicator-chromium-darwin.png │ ├── Label-dark.spec.ts │ ├── Label-dark.spec.ts-snapshots │ └── Label-dark-chromium-darwin.png │ ├── Label.spec.ts │ ├── Label.spec.ts-snapshots │ └── Label-chromium-darwin.png │ ├── Letterbox.spec.ts │ ├── Letterbox.spec.ts-snapshots │ └── Letterbox-chromium-darwin.png │ ├── Link-dark.spec.ts │ ├── Link-dark.spec.ts-snapshots │ └── Link-dark-chromium-darwin.png │ ├── Link.spec.ts │ ├── Link.spec.ts-snapshots │ └── Link-chromium-darwin.png │ ├── List-dark.spec.ts │ ├── List-dark.spec.ts-snapshots │ └── List-dark-chromium-darwin.png │ ├── List-light.spec.ts │ ├── List-light.spec.ts-snapshots │ └── List-light-chromium-darwin.png │ ├── Mask.spec.ts │ ├── Mask.spec.ts-snapshots │ └── Mask-chromium-darwin.png │ ├── Masonry.spec.ts │ ├── Masonry.spec.ts-snapshots │ └── Masonry-chromium-darwin.png │ ├── Modal-dark.spec.ts │ ├── Modal-dark.spec.ts-snapshots │ └── Modal-dark-chromium-darwin.png │ ├── Modal-mobile.spec.ts │ ├── Modal-mobile.spec.ts-snapshots │ └── Modal-mobile-chromium-darwin.png │ ├── Modal.spec.ts │ ├── Modal.spec.ts-snapshots │ └── Modal-chromium-darwin.png │ ├── ModalAlert-dark.spec.ts │ ├── ModalAlert-dark.spec.ts-snapshots │ └── ModalAlert-dark-chromium-darwin.png │ ├── ModalAlert-mobile.spec.ts │ ├── ModalAlert-mobile.spec.ts-snapshots │ └── ModalAlert-mobile-chromium-darwin.png │ ├── ModalAlert.spec.ts │ ├── ModalAlert.spec.ts-snapshots │ └── ModalAlert-chromium-darwin.png │ ├── NumberField-dark.spec.ts │ ├── NumberField-dark.spec.ts-snapshots │ └── NumberField-dark-chromium-darwin.png │ ├── NumberField.spec.ts │ ├── NumberField.spec.ts-snapshots │ └── NumberField-chromium-darwin.png │ ├── OverlayPanel-dark.spec.ts │ ├── OverlayPanel-dark.spec.ts-snapshots │ └── OverlayPanel-dark-chromium-darwin.png │ ├── OverlayPanel.spec.ts │ ├── OverlayPanel.spec.ts-snapshots │ └── OverlayPanel-chromium-darwin.png │ ├── PageHeader-borderStyle-dark.spec.ts │ ├── PageHeader-borderStyle-dark.spec.ts-snapshots │ └── PageHeader-borderStyle-dark-chromium-darwin.png │ ├── PageHeader-borderStyle.spec.ts │ ├── PageHeader-borderStyle.spec.ts-snapshots │ └── PageHeader-borderStyle-chromium-darwin.png │ ├── PageHeader-items-secondaryAction.spec.ts │ ├── PageHeader-items-secondaryAction.spec.ts-snapshots │ ├── PageHeader-items-secondaryAction-lg-chromium-darwin.png │ ├── PageHeader-items-secondaryAction-md-chromium-darwin.png │ ├── PageHeader-items-secondaryAction-sm-chromium-darwin.png │ └── PageHeader-items-secondaryAction-xs-chromium-darwin.png │ ├── PageHeader-maxWidth.spec.ts │ ├── PageHeader-maxWidth.spec.ts-snapshots │ └── PageHeader-maxWidth-chromium-darwin.png │ ├── PageHeader-primaryAction.spec.ts │ ├── PageHeader-primaryAction.spec.ts-snapshots │ ├── PageHeader-primaryAction-lg-chromium-darwin.png │ ├── PageHeader-primaryAction-md-chromium-darwin.png │ ├── PageHeader-primaryAction-sm-chromium-darwin.png │ └── PageHeader-primaryAction-xs-chromium-darwin.png │ ├── PageHeader-primaryActionLink.spec.ts │ ├── PageHeader-primaryActionLink.spec.ts-snapshots │ ├── PageHeader-primaryActionLink-lg-chromium-darwin.png │ ├── PageHeader-primaryActionLink-md-chromium-darwin.png │ ├── PageHeader-primaryActionLink-sm-chromium-darwin.png │ └── PageHeader-primaryActionLink-xs-chromium-darwin.png │ ├── PageHeader-secondaryAction.spec.ts │ ├── PageHeader-secondaryAction.spec.ts-snapshots │ ├── PageHeader-secondaryAction-lg-chromium-darwin.png │ ├── PageHeader-secondaryAction-md-chromium-darwin.png │ ├── PageHeader-secondaryAction-sm-chromium-darwin.png │ └── PageHeader-secondaryAction-xs-chromium-darwin.png │ ├── PageHeader-subtext-primaryAction.spec.ts │ ├── PageHeader-subtext-primaryAction.spec.ts-snapshots │ ├── PageHeader-subtext-primaryAction-lg-chromium-darwin.png │ ├── PageHeader-subtext-primaryAction-md-chromium-darwin.png │ ├── PageHeader-subtext-primaryAction-sm-chromium-darwin.png │ └── PageHeader-subtext-primaryAction-xs-chromium-darwin.png │ ├── PageHeader-thumbnail-badge-iconButton.spec.ts │ ├── PageHeader-thumbnail-badge-iconButton.spec.ts-snapshots │ ├── PageHeader-thumbnail-badge-iconButton-lg-chromium-darwin.png │ ├── PageHeader-thumbnail-badge-iconButton-md-chromium-darwin.png │ ├── PageHeader-thumbnail-badge-iconButton-sm-chromium-darwin.png │ └── PageHeader-thumbnail-badge-iconButton-xs-chromium-darwin.png │ ├── PageHeader-thumbnail-iconButton.spec.ts │ ├── PageHeader-thumbnail-iconButton.spec.ts-snapshots │ └── PageHeader-thumbnail-iconButton-chromium-darwin.png │ ├── Pog-dark.spec.ts │ ├── Pog-dark.spec.ts-snapshots │ └── Pog-dark-chromium-darwin.png │ ├── Pog.spec.ts │ ├── Pog.spec.ts-snapshots │ └── Pog-chromium-darwin.png │ ├── Popover-dark.spec.ts │ ├── Popover-dark.spec.ts-snapshots │ └── Popover-dark-chromium-darwin.png │ ├── Popover.spec.ts │ ├── Popover.spec.ts-snapshots │ └── Popover-chromium-darwin.png │ ├── PopoverMessage-dark.spec.ts │ ├── PopoverMessage-dark.spec.ts-snapshots │ └── PopoverMessage-dark-chromium-darwin.png │ ├── PopoverMessage.spec.ts │ ├── PopoverMessage.spec.ts-snapshots │ └── PopoverMessage-chromium-darwin.png │ ├── Pulsar-dark.spec.ts │ ├── Pulsar-dark.spec.ts-snapshots │ └── Pulsar-dark-chromium-darwin.png │ ├── Pulsar.spec.ts │ ├── Pulsar.spec.ts-snapshots │ └── Pulsar-chromium-darwin.png │ ├── RadioGroup-dark.spec.ts │ ├── RadioGroup-dark.spec.ts-snapshots │ └── RadioGroup-dark-chromium-darwin.png │ ├── RadioGroup.spec.ts │ ├── RadioGroup.spec.ts-snapshots │ └── RadioGroup-chromium-darwin.png │ ├── SearchField-dark.spec.ts │ ├── SearchField-dark.spec.ts-snapshots │ └── SearchField-dark-chromium-darwin.png │ ├── SearchField.spec.ts │ ├── SearchField.spec.ts-snapshots │ └── SearchField-chromium-darwin.png │ ├── SearchGuide-dark.spec.ts │ ├── SearchGuide-dark.spec.ts-snapshots │ └── SearchGuide-dark-chromium-darwin.png │ ├── SearchGuide.spec.ts │ ├── SearchGuide.spec.ts-snapshots │ └── SearchGuide-chromium-darwin.png │ ├── SearchGuideLink-dark.spec.ts │ ├── SearchGuideLink.spec.ts │ ├── SegmentedControl-dark.spec.ts │ ├── SegmentedControl-dark.spec.ts-snapshots │ └── SegmentedControl-dark-chromium-darwin.png │ ├── SegmentedControl.spec.ts │ ├── SegmentedControl.spec.ts-snapshots │ └── SegmentedControl-chromium-darwin.png │ ├── SelectList-dark.spec.ts │ ├── SelectList-dark.spec.ts-snapshots │ └── SelectList-dark-chromium-darwin.png │ ├── SelectList.spec.ts │ ├── SelectList.spec.ts-snapshots │ └── SelectList-chromium-darwin.png │ ├── SheetMobile-dark.spec.ts │ ├── SheetMobile-dark.spec.ts-snapshots │ └── SheetMobile-dark-chromium-darwin.png │ ├── SheetMobile.spec.ts │ ├── SheetMobile.spec.ts-snapshots │ └── SheetMobile-light-chromium-darwin.png │ ├── SideNavigation-dark.spec.ts │ ├── SideNavigation-dark.spec.ts-snapshots │ └── SideNavigation-dark-chromium-darwin.png │ ├── SideNavigation.spec.ts │ ├── SideNavigation.spec.ts-snapshots │ └── SideNavigation-chromium-darwin.png │ ├── Status-dark.spec.ts │ ├── Status-dark.spec.ts-snapshots │ └── Status-dark-chromium-darwin.png │ ├── Status.spec.ts │ ├── Status.spec.ts-snapshots │ └── Status-chromium-darwin.png │ ├── Switch-dark.spec.ts │ ├── Switch-dark.spec.ts-snapshots │ └── Switch-dark-chromium-darwin.png │ ├── Switch.spec.ts │ ├── Switch.spec.ts-snapshots │ └── Switch-chromium-darwin.png │ ├── Table.spec.ts │ ├── Table.spec.ts-snapshots │ └── Table-chromium-darwin.png │ ├── TableOfContents-dark.spec.ts │ ├── TableOfContents-dark.spec.ts-snapshots │ └── TableOfContents-dark-chromium-darwin.png │ ├── TableOfContents.spec.ts │ ├── TableOfContents.spec.ts-snapshots │ └── TableOfContents-light-chromium-darwin.png │ ├── Tabs-dark.spec.ts │ ├── Tabs-dark.spec.ts-snapshots │ └── Tabs-dark-chromium-darwin.png │ ├── Tabs.spec.ts │ ├── Tabs.spec.ts-snapshots │ └── Tabs-chromium-darwin.png │ ├── Tag-dark.spec.ts │ ├── Tag-dark.spec.ts-snapshots │ └── Tag-dark-chromium-darwin.png │ ├── Tag.spec.ts │ ├── Tag.spec.ts-snapshots │ └── Tag-chromium-darwin.png │ ├── TagData-dark.spec.ts │ ├── TagData-dark.spec.ts-snapshots │ └── TagData-dark-chromium-darwin.png │ ├── TagData.spec.ts │ ├── TagData.spec.ts-snapshots │ └── TagData-chromium-darwin.png │ ├── Text-dark.spec.ts │ ├── Text-dark.spec.ts-snapshots │ └── Text-dark-chromium-darwin.png │ ├── Text.spec.ts │ ├── Text.spec.ts-snapshots │ └── Text-chromium-darwin.png │ ├── TextArea-dark.spec.ts │ ├── TextArea-dark.spec.ts-snapshots │ └── TextArea-dark-chromium-darwin.png │ ├── TextArea.spec.ts │ ├── TextArea.spec.ts-snapshots │ └── TextArea-chromium-darwin.png │ ├── TextCompact-dark.spec.ts │ ├── TextCompact-dark.spec.ts-snapshots │ └── TextCompact-dark-chromium-darwin.png │ ├── TextCompact.spec.ts │ ├── TextCompact.spec.ts-snapshots │ └── TextCompact-chromium-darwin.png │ ├── TextField-dark.spec.ts │ ├── TextField-dark.spec.ts-snapshots │ └── TextField-dark-chromium-darwin.png │ ├── TextField.spec.ts │ ├── TextField.spec.ts-snapshots │ └── TextField-chromium-darwin.png │ ├── TextUI-dark.spec.ts │ ├── TextUI-dark.spec.ts-snapshots │ └── TextUI-dark-chromium-darwin.png │ ├── TextUI.spec.ts │ ├── TextUI.spec.ts-snapshots │ └── TextUI-chromium-darwin.png │ ├── TileData-dark.spec.ts │ ├── TileData-dark.spec.ts-snapshots │ └── TileData-dark-chromium-darwin.png │ ├── TileData.spec.ts │ ├── TileData.spec.ts-snapshots │ └── TileData-chromium-darwin.png │ ├── Toast-dark.spec.ts │ ├── Toast-dark.spec.ts-snapshots │ └── Toast-dark-chromium-darwin.png │ ├── Toast.spec.ts │ ├── Toast.spec.ts-snapshots │ └── Toast-chromium-darwin.png │ ├── Tooltip-dark.spec.ts │ ├── Tooltip-dark.spec.ts-snapshots │ └── Tooltip-dark-chromium-darwin.png │ ├── Tooltip.spec.ts │ ├── Tooltip.spec.ts-snapshots │ └── Tooltip-chromium-darwin.png │ ├── Video.spec.ts │ ├── Video.spec.ts-snapshots │ └── Video-chromium-darwin.png │ ├── WashAnimated-dark.spec.ts │ ├── WashAnimated-dark.spec.ts-snapshots │ └── WashAnimated-dark-chromium-darwin.png │ ├── WashAnimated.spec.ts │ ├── WashAnimated.spec.ts-snapshots │ └── WashAnimated-chromium-darwin.png │ ├── ZIndex.spec.ts │ └── ZIndex.spec.ts-snapshots │ └── ZIndex-chromium-darwin.png ├── rfcs ├── README.md ├── rfcs │ ├── 2023-05-effectsProvider-new-component │ │ ├── README.md │ │ └── onLinkNavigation.png │ ├── 2023-05-globalEventsHandlersProvider-new-component │ │ └── README.md │ └── 2023-07-globalEventsHandlersProvider-providerAuxData │ │ └── README.md └── template.md ├── scripts ├── cssValidate.js ├── fileMock.js ├── findAndReplace.js ├── flex.js ├── generateAccessibilitySpec.js ├── generateComponent.js ├── generateMetadata.js ├── generateSlackBlockKitPost.js ├── netlify.sh ├── publish.js ├── releaseSteps.js ├── setupJest.js ├── stackblitz.sh ├── templates │ ├── ComponentName-dark.spec.ts │ ├── ComponentName-dark.tsx │ ├── ComponentName-light.spec.ts │ ├── ComponentName-light.tsx │ ├── ComponentName.css │ ├── ComponentName.svg │ ├── ComponentName.test.js │ ├── ComponentName.test.tsx │ ├── ComponentName.tsx │ ├── README.md │ ├── accessibility_ComponentName.spec.ts │ ├── lowercasecomponentname.tsx │ └── main.tsx ├── test.sh ├── ts │ ├── removeUnusedTsExpectErrorComments.ts │ └── tsRemoveUnusedTsExpectErrors.sh ├── validateAccessibilitySpecs.js ├── validateIconSvgSpecs.js └── whitespace.js ├── tsconfig.json ├── types └── global.d.ts └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | **/.git 2 | **/.vscode 3 | **/node_modules 4 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage 2 | docs/.next 3 | docs/docs-components/metadata.js 4 | node_modules 5 | packages/gestalt/dist 6 | packages/gestalt-charts/dist 7 | packages/gestalt-datepicker/dist 8 | packages/eslint-plugin-gestalt/dist 9 | packages/eslint-plugin-gestalt/src/__fixtures__ 10 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @pinterest/gestalt-core 2 | -------------------------------------------------------------------------------- /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "default": true, 3 | "MD013": false, 4 | "MD026": { "punctuation": ".,;:。，；：" }, 5 | "MD033": false, 6 | "MD034": false 7 | } 8 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | registry=https://registry.yarnpkg.com 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | __fixtures__ 2 | __testfixtures__ 3 | build 4 | coverage 5 | dist 6 | docs/.next/ 7 | docs/docs-components/metadata.js 8 | docs/markdown/**/*.md 9 | node_modules 10 | package.json 11 | docs/graphics/year-in-review-2023/lottie/*.json 12 | .rollup.cache/ 13 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | coverage 3 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "editorconfig.editorconfig", 5 | "esbenp.prettier-vscode", 6 | "yoavbls.pretty-ts-errors", 7 | "orta.vscode-jest", 8 | "timonwong.shellcheck" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /docs/.eslintignore: -------------------------------------------------------------------------------- 1 | components/metadata.js 2 | -------------------------------------------------------------------------------- /docs/docs-components/SearchContent.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | type Props = { 4 | children?: ReactNode; 5 | }; 6 | 7 | function SearchContent({ children }: Props) { 8 | return
{children}
; 9 | } 10 | 11 | export default SearchContent; 12 | -------------------------------------------------------------------------------- /docs/docs-components/consts.ts: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/prefer-default-export 2 | export const DOCS_COPY_MAX_WIDTH_PX = 664; 3 | -------------------------------------------------------------------------------- /docs/examples/avatar/noEmojiExample.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar, Flex } from 'gestalt'; 2 | 3 | export default function Example() { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /docs/examples/badge/main.tsx: -------------------------------------------------------------------------------- 1 | import { Badge, Flex } from 'gestalt'; 2 | 3 | export default function Example() { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | } 10 | -------------------------------------------------------------------------------- /docs/examples/button/keepSimpleTextDo.tsx: -------------------------------------------------------------------------------- 1 | import { Button, Flex } from 'gestalt'; 2 | 3 | export default function Example() { 4 | return ( 5 | 6 |