├── .all-contributorsrc ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── codeql │ └── codeql-config.yml └── workflows │ ├── chromatic-ci.yaml │ ├── codeql-analysis.yml │ ├── continuous-integration.yml │ ├── npm-publish-beta.yaml │ ├── npm-publish.yaml │ ├── on-main.yml │ └── release-branch.yaml ├── .gitignore ├── .prettierignore ├── .prettierrc.js ├── ANNOUNCING_V4.md ├── CODE_OF_CONDUCT.md ├── COMPONENT_GUIDANCE.md ├── CONTRIBUTING.md ├── LICENSE.md ├── MIGRATION_GUIDES ├── MIGRATING_to_v2.md ├── MIGRATING_to_v3.md ├── MIGRATING_to_v4.md └── MIGRATING_to_v5.md ├── README.md ├── apps ├── docs │ ├── .eslintignore │ ├── .eslintrc.json │ ├── README.md │ ├── next.config.js │ ├── package.json │ ├── pages │ │ ├── Absolute.md │ │ ├── BackgroundImage.md │ │ ├── Badge.md │ │ ├── Banner.md │ │ ├── BlockLink.md │ │ ├── Box.md │ │ ├── Breakpoints.md │ │ ├── Button.md │ │ ├── Card.md │ │ ├── Checkbox.md │ │ ├── CloseButton.md │ │ ├── Container.md │ │ ├── Divider.md │ │ ├── Flag.md │ │ ├── Flex.md │ │ ├── FormField.md │ │ ├── GenericBanner.md │ │ ├── Heading.md │ │ ├── Hide.md │ │ ├── Hug.md │ │ ├── Icon.md │ │ ├── IconButton.md │ │ ├── IconField.md │ │ ├── Image.md │ │ ├── Input.md │ │ ├── InputGroup.md │ │ ├── Label.md │ │ ├── Layout.md │ │ ├── Link.md │ │ ├── Modal.md │ │ ├── Motion.md │ │ ├── PlaceholderImage.md │ │ ├── Popover.md │ │ ├── ProgressBar.md │ │ ├── Radio.md │ │ ├── RangeSlider.md │ │ ├── RatingBadge.md │ │ ├── Relative.md │ │ ├── ScrollLock.md │ │ ├── Select.md │ │ ├── SkipMenu.md │ │ ├── Slider.md │ │ ├── Stamp.md │ │ ├── Swatch.md │ │ ├── Text.md │ │ ├── TextArea.md │ │ ├── Theming.md │ │ ├── ToggleBadge.md │ │ ├── Tooltip.md │ │ ├── Truncate.md │ │ ├── _app.js │ │ ├── _document.js │ │ ├── color.js │ │ ├── iconography.js │ │ ├── index.md │ │ ├── palette.js │ │ ├── template.md │ │ ├── typography.js │ │ └── utilities │ │ │ ├── borders.md │ │ │ ├── color.md │ │ │ ├── getLinkStylesOn.md │ │ │ ├── getPaletteColor.md │ │ │ └── getTextColorOn.md │ └── src │ │ ├── ColorCard.js │ │ ├── CopyButton.js │ │ ├── Logo.js │ │ ├── ModalDemo.js │ │ ├── NavLink.js │ │ ├── SideNav.js │ │ ├── components.js │ │ ├── navigation.js │ │ └── theme.js └── storybook │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .storybook │ ├── decorators.tsx │ ├── main.ts │ ├── manager.js │ ├── parameters │ │ ├── a11y.ts │ │ ├── backgrounds.ts │ │ └── viewport.ts │ ├── pclnTheme.js │ ├── preview-body.html │ ├── preview-head.html │ └── preview.tsx │ ├── config │ └── rush-project.json │ └── package.json ├── biome.json ├── codemods └── icons-v2-to-v3 │ ├── README.md │ └── iconsV2toV3.js ├── common ├── autoinstallers │ └── rush-prettier │ │ ├── package.json │ │ └── pnpm-lock.yaml ├── config │ └── rush │ │ ├── .npmrc │ │ ├── .npmrc-publish │ │ ├── .pnpmfile.cjs │ │ ├── build-cache.json │ │ ├── command-line.json │ │ ├── common-versions.json │ │ ├── experiments.json │ │ ├── pnpm-config.json │ │ ├── pnpm-lock.yaml │ │ ├── repo-state.json │ │ └── version-policies.json ├── git-hooks │ ├── commit-msg.sample │ └── pre-commit └── scripts │ ├── install-run-rush-pnpm.js │ ├── install-run-rush.js │ ├── install-run-rushx.js │ └── install-run.js ├── heft-plugins └── heft-styled-components-plugin │ ├── .eslintrc.js │ ├── .npmignore │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ ├── babel.config.cjs.json │ ├── babel.config.json │ └── rig.json │ ├── heft-plugin.json │ ├── package.json │ ├── src │ └── StyledComponentsPlugin.ts │ └── tsconfig.json ├── packages ├── autocomplete │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Autocomplete.jsx │ │ ├── Autocomplete.stories.jsx │ │ └── index.js │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js ├── carousel │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── ArrowButton │ │ │ ├── ArrowButton.jsx │ │ │ ├── ArrowButton.styles.js │ │ │ └── index.js │ │ ├── Carousel.jsx │ │ ├── Carousel.spec.js │ │ ├── Carousel.stories.jsx │ │ ├── Carousel.styles.js │ │ ├── Dots │ │ │ ├── Dots.jsx │ │ │ ├── Dots.styles.js │ │ │ └── index.js │ │ ├── RenderInView │ │ │ ├── RenderInView.jsx │ │ │ └── index.js │ │ ├── constants.js │ │ ├── helpers.js │ │ ├── helpers.spec.js │ │ ├── index.js │ │ ├── layoutToFlexWidths.js │ │ └── layoutToFlexWidths.spec.js │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js ├── codemods │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── bin │ │ ├── __tests__ │ │ │ └── react-codemod-test.js │ │ ├── cli.js │ │ └── react-codemod.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── test │ │ ├── jest.setup.js │ │ └── testing-library.js │ └── transforms │ │ ├── button-fullwidth-to-width.js │ │ ├── rename-deprecated-props-flex.js │ │ ├── rename-deprecated-props-text.js │ │ └── stamp-variation-solid-to-fill.js ├── core │ ├── .eslintignore │ ├── .eslintrc.js │ ├── .npmignore │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.cjs.json │ ├── babel.config.json │ ├── config │ │ ├── api-extractor.json │ │ ├── jest.config.json │ │ └── rig.json │ ├── package.json │ ├── src │ │ ├── Absolute │ │ │ ├── Absolute.spec.tsx │ │ │ ├── Absolute.stories.tsx │ │ │ └── Absolute.tsx │ │ ├── Accordion │ │ │ ├── Accordion.spec.tsx │ │ │ ├── Accordion.stories.tsx │ │ │ ├── Accordion.styled.tsx │ │ │ └── Accordion.tsx │ │ ├── Animate │ │ │ ├── Animate.args.ts │ │ │ ├── Animate.stories.tsx │ │ │ └── Animate.tsx │ │ ├── Avatar │ │ │ ├── Avatar.spec.tsx │ │ │ ├── Avatar.stories.tsx │ │ │ ├── Avatar.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Avatar.spec.tsx.snap │ │ ├── BackgroundImage │ │ │ ├── BackgroundImage.spec.tsx │ │ │ ├── BackgroundImage.stories.args.ts │ │ │ ├── BackgroundImage.stories.tsx │ │ │ ├── BackgroundImage.tsx │ │ │ └── __snapshots__ │ │ │ │ └── BackgroundImage.spec.tsx.snap │ │ ├── Badge │ │ │ ├── Badge.spec.tsx │ │ │ ├── Badge.stories.args.ts │ │ │ ├── Badge.stories.tsx │ │ │ ├── Badge.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Badge.spec.tsx.snap │ │ ├── Banner │ │ │ ├── Banner.spec.tsx │ │ │ ├── Banner.stories.tsx │ │ │ ├── Banner.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Banner.spec.tsx.snap │ │ ├── BlockLink │ │ │ ├── BlockLink.spec.tsx │ │ │ ├── BlockLink.stories.tsx │ │ │ ├── BlockLink.tsx │ │ │ └── __snapshots__ │ │ │ │ └── BlockLink.spec.tsx.snap │ │ ├── Box │ │ │ ├── Box.spec.tsx │ │ │ ├── Box.stories.args.ts │ │ │ ├── Box.stories.tsx │ │ │ ├── Box.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Box.spec.tsx.snap │ │ ├── Breadcrumbs │ │ │ ├── BreadcrumbLink.tsx │ │ │ ├── Breadcrumbs.spec.tsx │ │ │ ├── Breadcrumbs.stories.tsx │ │ │ ├── Breadcrumbs.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Breadcrumbs.spec.tsx.snap │ │ ├── Button │ │ │ ├── Button.Image.Alignment.png │ │ │ ├── Button.Image.BorderRadius.png │ │ │ ├── Button.Image.Groups.png │ │ │ ├── Button.Image.Hero.png │ │ │ ├── Button.Image.ResponsiveLayout.png │ │ │ ├── Button.Image.States.png │ │ │ ├── Button.spec.tsx │ │ │ ├── Button.stories.tsx │ │ │ └── Button.tsx │ │ ├── Card │ │ │ ├── Card.Image.Hero.png │ │ │ ├── Card.Image.Links.png │ │ │ ├── Card.Image.States.png │ │ │ ├── Card.spec.tsx │ │ │ ├── Card.stories.args.ts │ │ │ ├── Card.stories.tsx │ │ │ ├── Card.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Card.spec.tsx.snap │ │ ├── ChatActionContainer │ │ │ ├── ChatActionContainer.stories.tsx │ │ │ └── ChatActionContainer.tsx │ │ ├── ChatHeader │ │ │ ├── ChatHeader.spec.tsx │ │ │ ├── ChatHeader.stories.tsx │ │ │ └── ChatHeader.tsx │ │ ├── ChatMessage │ │ │ ├── ChatMessage.stories.tsx │ │ │ └── ChatMessage.tsx │ │ ├── ChatMessageContainer │ │ │ ├── ChatMessageContainer.stories.args.ts │ │ │ ├── ChatMessageContainer.stories.tsx │ │ │ └── ChatMessageContainer.tsx │ │ ├── ChatMessageSeparator │ │ │ ├── ChatMessageSeparator.stories.tsx │ │ │ └── ChatMessageSeparator.tsx │ │ ├── ChatTrigger │ │ │ ├── ChatTrigger.stories.tsx │ │ │ └── ChatTrigger.tsx │ │ ├── Checkbox │ │ │ ├── Checkbox.spec.tsx │ │ │ ├── Checkbox.stories.tsx │ │ │ ├── Checkbox.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Checkbox.spec.tsx.snap │ │ ├── Chip │ │ │ ├── ButtonChip │ │ │ │ ├── ButtonChip.spec.tsx │ │ │ │ ├── ButtonChip.stories.tsx │ │ │ │ └── ButtonChip.tsx │ │ │ ├── ChipContent │ │ │ │ ├── ChipContent.spec.tsx │ │ │ │ └── ChipContent.tsx │ │ │ ├── ChipContentWrapper.tsx │ │ │ ├── ChipInput │ │ │ │ └── index.tsx │ │ │ ├── ChipLabel │ │ │ │ └── index.tsx │ │ │ ├── ChoiceChip │ │ │ │ ├── ChoiceChip.spec.tsx │ │ │ │ ├── ChoiceChip.stories.tsx │ │ │ │ └── ChoiceChip.tsx │ │ │ └── FilterChip │ │ │ │ ├── FilterChip.spec.tsx │ │ │ │ ├── FilterChip.stories.tsx │ │ │ │ └── FilterChip.tsx │ │ ├── CloseButton │ │ │ ├── CloseButton.spec.tsx │ │ │ ├── CloseButton.stories.args.tsx │ │ │ ├── CloseButton.stories.tsx │ │ │ ├── CloseButton.styled.tsx │ │ │ └── CloseButton.tsx │ │ ├── Container │ │ │ ├── Container.spec.tsx │ │ │ ├── Container.stories.args.ts │ │ │ ├── Container.stories.tsx │ │ │ ├── Container.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Container.spec.tsx.snap │ │ ├── Dialog │ │ │ ├── Dialog.spec.tsx │ │ │ ├── Dialog.stories.args.tsx │ │ │ ├── Dialog.stories.tsx │ │ │ ├── Dialog.styled.tsx │ │ │ └── Dialog.tsx │ │ ├── Divider │ │ │ ├── Divider.spec.tsx │ │ │ ├── Divider.stories.tsx │ │ │ ├── Divider.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Divider.spec.tsx.snap │ │ ├── DocsUtils │ │ │ ├── DoDont │ │ │ │ ├── DoDont.stories.tsx │ │ │ │ ├── DoDont.test.tsx │ │ │ │ └── DoDont.tsx │ │ │ ├── DocTable │ │ │ │ ├── DocTable.stories.tsx │ │ │ │ ├── DocTable.test.tsx │ │ │ │ └── DocTable.tsx │ │ │ ├── Hero │ │ │ │ ├── Hero.stories.tsx │ │ │ │ ├── Hero.test.tsx │ │ │ │ └── Hero.tsx │ │ │ ├── Note │ │ │ │ ├── Note.stories.tsx │ │ │ │ ├── Note.test.tsx │ │ │ │ └── Note.tsx │ │ │ ├── RelatedComponent │ │ │ │ ├── RelatedComponent.stories.tsx │ │ │ │ ├── RelatedComponent.test.tsx │ │ │ │ └── RelatedComponent.tsx │ │ │ ├── Section │ │ │ │ ├── Section.stories.tsx │ │ │ │ ├── Section.test.tsx │ │ │ │ └── Section.tsx │ │ │ ├── StoryHeading │ │ │ │ ├── StoryHeading.stories.tsx │ │ │ │ ├── StoryHeading.test.tsx │ │ │ │ └── StoryHeading.tsx │ │ │ ├── StoryStage │ │ │ │ ├── StoryStage.stories.tsx │ │ │ │ ├── StoryStage.test.tsx │ │ │ │ └── StoryStage.tsx │ │ │ ├── TableOfContents │ │ │ │ ├── TableOfContents.stories.tsx │ │ │ │ ├── TableOfContents.test.tsx │ │ │ │ └── TableOfContents.tsx │ │ │ └── utils.ts │ │ ├── DotLoader │ │ │ ├── DotLoader.spec.tsx │ │ │ ├── DotLoader.stories.args.tsx │ │ │ ├── DotLoader.stories.tsx │ │ │ └── DotLoader.tsx │ │ ├── Drawer │ │ │ ├── Drawer.spec.tsx │ │ │ ├── Drawer.stories.tsx │ │ │ ├── Drawer.styled.tsx │ │ │ ├── Drawer.tsx │ │ │ ├── helpers │ │ │ │ ├── getDividerStyle.spec.ts │ │ │ │ ├── getDividerStyle.ts │ │ │ │ ├── getDragToDismissAnimation.spec.ts │ │ │ │ ├── getDragToDismissAnimation.ts │ │ │ │ ├── getEnterAnimation.spec.ts │ │ │ │ ├── getEnterAnimation.ts │ │ │ │ └── index.ts │ │ │ └── hooks │ │ │ │ ├── useSnap.spec.ts │ │ │ │ └── useSnap.ts │ │ ├── Flag │ │ │ ├── Flag.spec.tsx │ │ │ ├── Flag.stories.tsx │ │ │ ├── Flag.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Flag.spec.tsx.snap │ │ ├── Flex │ │ │ ├── Flex.spec.tsx │ │ │ ├── Flex.stories.tsx │ │ │ ├── Flex.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Flex.spec.tsx.snap │ │ ├── FloatingActionButton │ │ │ ├── FloatingActionButton.spec.tsx │ │ │ ├── FloatingActionButton.stories.tsx │ │ │ ├── FloatingActionButton.styled.tsx │ │ │ ├── FloatingActionButton.tsx │ │ │ ├── __snapshots__ │ │ │ │ └── FloatingActionButton.spec.tsx.snap │ │ │ └── constants.ts │ │ ├── FloatingActionButtonProvider │ │ │ ├── FloatingActionButtonProvider.stories.tsx │ │ │ ├── FloatingActionButtonProvider.styled.tsx │ │ │ ├── FloatingActionButtonProvider.tsx │ │ │ ├── constants.ts │ │ │ ├── helpers.ts │ │ │ └── useFloatingActionButton.ts │ │ ├── FormField │ │ │ ├── FormField.spec.tsx │ │ │ ├── FormField.stories.tsx │ │ │ ├── FormField.tsx │ │ │ └── __snapshots__ │ │ │ │ └── FormField.spec.tsx.snap │ │ ├── GenericBanner │ │ │ ├── GenericBanner.spec.tsx │ │ │ ├── GenericBanner.stories.args.ts │ │ │ ├── GenericBanner.stories.tsx │ │ │ ├── GenericBanner.tsx │ │ │ └── __snapshots__ │ │ │ │ └── GenericBanner.spec.tsx.snap │ │ ├── Grid │ │ │ ├── Grid.spec.tsx │ │ │ ├── Grid.stories.tsx │ │ │ └── Grid.tsx │ │ ├── Heading │ │ │ ├── Heading.spec.tsx │ │ │ ├── Heading.stories.tsx │ │ │ ├── Heading.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Heading.spec.tsx.snap │ │ ├── Hide │ │ │ ├── Hide.spec.tsx │ │ │ ├── Hide.stories.tsx │ │ │ ├── Hide.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Hide.spec.tsx.snap │ │ ├── Hug │ │ │ ├── Hug.spec.tsx │ │ │ ├── Hug.stories.args.tsx │ │ │ ├── Hug.stories.tsx │ │ │ ├── Hug.styled.ts │ │ │ ├── Hug.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Hug.spec.tsx.snap │ │ ├── Icon │ │ │ └── Icon.ts │ │ ├── IconButton │ │ │ ├── IconButton.spec.tsx │ │ │ ├── IconButton.stories.tsx │ │ │ ├── IconButton.tsx │ │ │ └── __snapshots__ │ │ │ │ └── IconButton.spec.tsx.snap │ │ ├── IconField │ │ │ ├── IconField.spec.tsx │ │ │ ├── IconField.stories.tsx │ │ │ └── IconField.tsx │ │ ├── Image │ │ │ ├── Image.Image.ContentAlignmentFormating.png │ │ │ ├── Image.Image.Hero.png │ │ │ ├── Image.Image.Logo.png │ │ │ ├── Image.Image.MaintainingAspectRatio.png │ │ │ ├── Image.Image.RelatedComponents.png │ │ │ ├── Image.Image.ResponsiveVariableWidths.png │ │ │ ├── Image.spec.tsx │ │ │ ├── Image.stories.args.ts │ │ │ ├── Image.stories.tsx │ │ │ └── Image.tsx │ │ ├── Input │ │ │ ├── Input.spec.tsx │ │ │ ├── Input.stories.args.ts │ │ │ ├── Input.stories.tsx │ │ │ ├── Input.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Input.spec.tsx.snap │ │ ├── InputGroup │ │ │ ├── InputGroup.spec.tsx │ │ │ ├── InputGroup.stories.tsx │ │ │ ├── InputGroup.tsx │ │ │ └── __snapshots__ │ │ │ │ └── InputGroup.spec.tsx.snap │ │ ├── Label │ │ │ ├── Label.spec.tsx │ │ │ ├── Label.stories.args.ts │ │ │ ├── Label.stories.tsx │ │ │ ├── Label.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Label.spec.tsx.snap │ │ ├── Layout │ │ │ ├── Layout.spec.tsx │ │ │ ├── Layout.stories.tsx │ │ │ └── Layout.tsx │ │ ├── Link │ │ │ ├── Link.spec.tsx │ │ │ ├── Link.stories.args.ts │ │ │ ├── Link.stories.tsx │ │ │ ├── Link.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Link.spec.tsx.snap │ │ ├── List │ │ │ ├── List.spec.tsx │ │ │ ├── List.stories.args.ts │ │ │ ├── List.stories.tsx │ │ │ └── List.tsx │ │ ├── Motion │ │ │ ├── Motion.keyframes.tsx │ │ │ ├── Motion.spec.tsx │ │ │ ├── Motion.stories.tsx │ │ │ ├── Motion.tsx │ │ │ ├── constants.tsx │ │ │ └── helpers.tsx │ │ ├── PasswordInput │ │ │ ├── PasswordInput.spec.tsx │ │ │ ├── PasswordInput.stories.tsx │ │ │ └── PasswordInput.tsx │ │ ├── PlaceholderImage │ │ │ ├── PlaceholderImage.spec.tsx │ │ │ └── PlaceholderImage.tsx │ │ ├── Popout │ │ │ ├── Popout.spec.tsx │ │ │ ├── Popout.stories.tsx │ │ │ └── Popout.tsx │ │ ├── Popover │ │ │ ├── Overlay.tsx │ │ │ ├── Popover.stories.args.tsx │ │ │ ├── Popover.stories.tsx │ │ │ ├── Popover.styles.tsx │ │ │ └── Popover.tsx │ │ ├── ProgressBar │ │ │ ├── ProgressBar.spec.tsx │ │ │ ├── ProgressBar.stories.tsx │ │ │ └── ProgressBar.tsx │ │ ├── Radio │ │ │ ├── Radio.spec.tsx │ │ │ ├── Radio.stories.tsx │ │ │ ├── Radio.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Radio.spec.tsx.snap │ │ ├── RadioCheckToggleCard │ │ │ ├── RadioCheckToggleCard.spec.tsx │ │ │ ├── RadioCheckToggleCard.stories.args.ts │ │ │ ├── RadioCheckToggleCard.stories.tsx │ │ │ ├── RadioCheckToggleCard.tsx │ │ │ └── __snapshots__ │ │ │ │ └── RadioCheckToggleCard.spec.tsx.snap │ │ ├── RatingBadge │ │ │ ├── RatingBadge.spec.tsx │ │ │ ├── RatingBadge.stories.tsx │ │ │ ├── RatingBadge.tsx │ │ │ └── __snapshots__ │ │ │ │ └── RatingBadge.spec.tsx.snap │ │ ├── Relative │ │ │ ├── Relative.spec.tsx │ │ │ ├── Relative.stories.tsx │ │ │ ├── Relative.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Relative.spec.tsx.snap │ │ ├── Select │ │ │ ├── Select.spec.tsx │ │ │ ├── Select.stories.args.ts │ │ │ ├── Select.stories.tsx │ │ │ ├── Select.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Select.spec.tsx.snap │ │ ├── ShadowEffect │ │ │ ├── ShadowEffect.spec.tsx │ │ │ ├── ShadowEffect.stories.tsx │ │ │ └── ShadowEffect.tsx │ │ ├── Shimmer │ │ │ ├── Shimmer.spec.tsx │ │ │ ├── Shimmer.stories.tsx │ │ │ ├── Shimmer.tsx │ │ │ └── constants.ts │ │ ├── SkipMenu │ │ │ ├── SkipMenu.spec.tsx │ │ │ ├── SkipMenu.stories.tsx │ │ │ └── SkipMenu.tsx │ │ ├── SlideBox │ │ │ ├── Arrow.styled.tsx │ │ │ ├── Arrow.tsx │ │ │ ├── BottomArrows.tsx │ │ │ ├── RenderInView.tsx │ │ │ ├── Slide.spec.tsx │ │ │ ├── Slide.tsx │ │ │ ├── SlideBox.spec.tsx │ │ │ ├── SlideBox.stories.tsx │ │ │ ├── SlideBox.styled.ts │ │ │ ├── SlideBox.tsx │ │ │ ├── SlideBoxWrapper.tsx │ │ │ ├── TestUseSlideBoxNav.spec.tsx │ │ │ ├── TopArrows.tsx │ │ │ ├── helpers.spec.ts │ │ │ ├── helpers.ts │ │ │ └── useSlideBoxNav.tsx │ │ ├── Spinner │ │ │ ├── Spinner.spec.tsx │ │ │ ├── Spinner.stories.args.tsx │ │ │ ├── Spinner.stories.tsx │ │ │ └── Spinner.tsx │ │ ├── SrOnly │ │ │ ├── SrOnly.spec.tsx │ │ │ ├── SrOnly.stories.tsx │ │ │ ├── SrOnly.tsx │ │ │ └── __snapshots__ │ │ │ │ └── SrOnly.spec.tsx.snap │ │ ├── Stamp │ │ │ ├── Stamp.spec.tsx │ │ │ ├── Stamp.stories.args.ts │ │ │ ├── Stamp.stories.tsx │ │ │ ├── Stamp.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Stamp.spec.tsx.snap │ │ ├── Step │ │ │ ├── Step.spec.tsx │ │ │ ├── Step.stories.tsx │ │ │ ├── Step.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Step.spec.tsx.snap │ │ ├── Stepper │ │ │ ├── Stepper.spec.tsx │ │ │ ├── Stepper.stories.tsx │ │ │ ├── Stepper.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Stepper.spec.tsx.snap │ │ ├── Swatch │ │ │ ├── Swatch.spec.tsx │ │ │ ├── Swatch.stories.tsx │ │ │ └── Swatch.tsx │ │ ├── Tab │ │ │ ├── Tab.spec.tsx │ │ │ ├── Tab.stories.args.ts │ │ │ ├── Tab.stories.tsx │ │ │ ├── Tab.styled.tsx │ │ │ ├── Tab.tsx │ │ │ ├── TabButton.tsx │ │ │ ├── TabChip.tsx │ │ │ └── TabRadio.tsx │ │ ├── Text │ │ │ ├── Text.spec.tsx │ │ │ ├── Text.stories.args.ts │ │ │ ├── Text.stories.tsx │ │ │ ├── Text.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Text.spec.tsx.snap │ │ ├── TextArea │ │ │ ├── TextArea.spec.tsx │ │ │ ├── TextArea.stories.tsx │ │ │ ├── TextArea.tsx │ │ │ └── __snapshots__ │ │ │ │ └── TextArea.spec.tsx.snap │ │ ├── ThemeProvider │ │ │ ├── ThemeProvider.spec.tsx │ │ │ ├── ThemeProvider.stories.tsx │ │ │ ├── ThemeProvider.tsx │ │ │ └── __snapshots__ │ │ │ │ └── ThemeProvider.spec.tsx.snap │ │ ├── Toast │ │ │ ├── Toast.spec.tsx │ │ │ ├── Toast.stories.args.ts │ │ │ ├── Toast.stories.tsx │ │ │ ├── Toast.styled.tsx │ │ │ └── Toast.tsx │ │ ├── ToastProvider │ │ │ ├── ToastProvider.spec.tsx │ │ │ ├── ToastProvider.stories.tsx │ │ │ └── ToastProvider.tsx │ │ ├── Toggle │ │ │ ├── Toggle.spec.tsx │ │ │ ├── Toggle.stories.tsx │ │ │ └── Toggle.tsx │ │ ├── ToggleBadge │ │ │ ├── ToggleBadge.spec.tsx │ │ │ ├── ToggleBadge.stories.args.ts │ │ │ ├── ToggleBadge.stories.tsx │ │ │ ├── ToggleBadge.tsx │ │ │ └── __snapshots__ │ │ │ │ └── ToggleBadge.spec.tsx.snap │ │ ├── Tooltip │ │ │ ├── Tooltip.spec.tsx │ │ │ ├── Tooltip.stories.args.ts │ │ │ ├── Tooltip.stories.tsx │ │ │ ├── Tooltip.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Tooltip.spec.tsx.snap │ │ ├── Truncate │ │ │ ├── Truncate.spec.tsx │ │ │ ├── Truncate.stories.tsx │ │ │ ├── Truncate.tsx │ │ │ └── __snapshots__ │ │ │ │ └── Truncate.spec.tsx.snap │ │ ├── __test__ │ │ │ ├── jest.setup.tsx │ │ │ ├── mocks │ │ │ │ ├── colors.ts │ │ │ │ ├── tabContent.tsx │ │ │ │ └── toasts.tsx │ │ │ ├── test.d.ts │ │ │ └── testing-library.tsx │ │ ├── global.d.ts │ │ ├── index.ts │ │ ├── stories │ │ │ ├── BorderRadius.stories.args.ts │ │ │ ├── BorderRadius.stories.tsx │ │ │ ├── Colors.stories.tsx │ │ │ ├── Layouts.stories.tsx │ │ │ └── ZIndices.stories.tsx │ │ ├── storybook │ │ │ ├── args │ │ │ │ └── index.ts │ │ │ └── utils │ │ │ │ └── ForwardRefsDemo.tsx │ │ ├── theme │ │ │ ├── __snapshots__ │ │ │ │ └── theme.spec.ts.snap │ │ │ ├── colors.ts │ │ │ ├── index.ts │ │ │ ├── theme.spec.ts │ │ │ └── theme.ts │ │ ├── useScrollWithShadows │ │ │ ├── useScrollWithShadow.ts │ │ │ └── useScrollWithShadows.stories.tsx │ │ └── utils │ │ │ ├── attrs │ │ │ ├── __snapshots__ │ │ │ │ ├── borderRadiusAttrs.spec.ts.snap │ │ │ │ ├── boxShadowAttrs.spec.ts.snap │ │ │ │ └── typographyAttrs.spec.ts.snap │ │ │ ├── borderRadiusAttrs.spec.ts │ │ │ ├── borderRadiusAttrs.ts │ │ │ ├── boxShadowAttrs.spec.ts │ │ │ ├── boxShadowAttrs.ts │ │ │ ├── index.ts │ │ │ ├── textAlignAttrs.ts │ │ │ ├── typographyAttrs.spec.ts │ │ │ └── typographyAttrs.ts │ │ │ ├── createColorScheme.ts │ │ │ ├── createColorStyles.spec.ts │ │ │ ├── createColorStyles.ts │ │ │ ├── createMediaQueries │ │ │ ├── createMediaQueries.spec.ts │ │ │ ├── createMediaQueries.ts │ │ │ └── index.ts │ │ │ ├── createPalette.spec.ts │ │ │ ├── createPalette.ts │ │ │ ├── createTextStyles.spec.ts │ │ │ ├── createTextStyles.ts │ │ │ ├── createTheme.ts │ │ │ ├── customStyles │ │ │ ├── index.ts │ │ │ ├── objectFit.ts │ │ │ └── objectPosition.ts │ │ │ ├── index.ts │ │ │ ├── utils.spec.ts │ │ │ └── utils.ts │ └── tsconfig.json ├── icons │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── create-index.js │ ├── jest.config.js │ ├── package.json │ ├── plugins │ │ ├── svg-dynamic-title-plugin.js │ │ └── svg-replace-plugin.js │ ├── src │ │ ├── Icon.jsx │ │ ├── Icon.stories.jsx │ │ ├── Svg.js │ │ ├── index.js │ │ ├── svg-dynamic-title-plugin.spec.js │ │ └── svg-replace-plugin.spec.js │ ├── svg │ │ ├── DoubleBed.svg │ │ ├── KingBed.svg │ │ ├── MapFolded.svg │ │ ├── SingleBed.svg │ │ ├── Sliders.svg │ │ ├── WeatherHurricane.svg │ │ ├── WeatherLightning.svg │ │ ├── WeatherRain.svg │ │ ├── WeatherSnow.svg │ │ ├── WeatherSnowRain.svg │ │ ├── WeatherWindy.svg │ │ ├── ac.svg │ │ ├── accessible.svg │ │ ├── activity.svg │ │ ├── addAlarm.svg │ │ ├── airplane.svg │ │ ├── arrival.svg │ │ ├── arrowDown.svg │ │ ├── arrowLeft.svg │ │ ├── arrowRight.svg │ │ ├── arrowUp.svg │ │ ├── attention.svg │ │ ├── attraction.svg │ │ ├── automatic.svg │ │ ├── backpack.svg │ │ ├── bag.svg │ │ ├── baggage.svg │ │ ├── beach.svg │ │ ├── bed.svg │ │ ├── bedKing.svg │ │ ├── bedSingle.svg │ │ ├── beenHere.svg │ │ ├── bike.svg │ │ ├── bookmark.svg │ │ ├── bookmarkActivated.svg │ │ ├── boxChecked.svg │ │ ├── boxEmpty.svg │ │ ├── boxMinus.svg │ │ ├── boxPlus.svg │ │ ├── breakfast.svg │ │ ├── broom.svg │ │ ├── build.svg │ │ ├── bus.svg │ │ ├── business.svg │ │ ├── cake.svg │ │ ├── calendar.svg │ │ ├── calendarCheck.svg │ │ ├── calendarClock.svg │ │ ├── callEnd.svg │ │ ├── callMissed.svg │ │ ├── callReceive.svg │ │ ├── cancel.svg │ │ ├── carAutomatic.svg │ │ ├── carCircle.svg │ │ ├── carDamage.svg │ │ ├── carDoor.svg │ │ ├── carManual.svg │ │ ├── carWash.svg │ │ ├── cardTravel.svg │ │ ├── carriage.svg │ │ ├── carryOnBag.svg │ │ ├── cars.svg │ │ ├── carsBrand.svg │ │ ├── casino.svg │ │ ├── celebration.svg │ │ ├── chargeStation.svg │ │ ├── chart.svg │ │ ├── chartAlt.svg │ │ ├── chat.svg │ │ ├── chatBubble.svg │ │ ├── check.svg │ │ ├── checkedBag.svg │ │ ├── checklist.svg │ │ ├── chevronDoubleLeft.svg │ │ ├── chevronDoubleRight.svg │ │ ├── chevronDown.svg │ │ ├── chevronLeft.svg │ │ ├── chevronRight.svg │ │ ├── chevronUp.svg │ │ ├── cityView.svg │ │ ├── clock.svg │ │ ├── close.svg │ │ ├── cloud.svg │ │ ├── collisionCoverage.svg │ │ ├── contactMail.svg │ │ ├── contactPhone.svg │ │ ├── contacts.svg │ │ ├── convenienceStore.svg │ │ ├── copy.svg │ │ ├── couch.svg │ │ ├── coupon.svg │ │ ├── creditCard.svg │ │ ├── cruises.svg │ │ ├── cruisesBrand.svg │ │ ├── currencyExchange.svg │ │ ├── delay.svg │ │ ├── departure.svg │ │ ├── devices.svg │ │ ├── devicesImportant.svg │ │ ├── directions.svg │ │ ├── discount.svg │ │ ├── document.svg │ │ ├── dollar.svg │ │ ├── dollarCircle.svg │ │ ├── dot.svg │ │ ├── doubleOccupancy.svg │ │ ├── download.svg │ │ ├── downloadAlt.svg │ │ ├── earlyBird.svg │ │ ├── edit.svg │ │ ├── electric.svg │ │ ├── email.svg │ │ ├── emoticon.svg │ │ ├── event.svg │ │ ├── eventAvailable.svg │ │ ├── eventBusy.svg │ │ ├── exitToApp.svg │ │ ├── experienceTicket.svg │ │ ├── externalLink.svg │ │ ├── facebook.svg │ │ ├── family.svg │ │ ├── favoriteHotel.svg │ │ ├── filter.svg │ │ ├── fitness.svg │ │ ├── flame.svg │ │ ├── flightCircle.svg │ │ ├── flightCoverage.svg │ │ ├── flights.svg │ │ ├── flightsBrand.svg │ │ ├── freeCancellation.svg │ │ ├── fridge.svg │ │ ├── frown.svg │ │ ├── gallery.svg │ │ ├── gas.svg │ │ ├── gift.svg │ │ ├── globe.svg │ │ ├── golf.svg │ │ ├── golfTee.svg │ │ ├── gps.svg │ │ ├── graph.svg │ │ ├── grid.svg │ │ ├── group.svg │ │ ├── guestScore.svg │ │ ├── guests.svg │ │ ├── help.svg │ │ ├── history.svg │ │ ├── home.svg │ │ ├── hotelCircle.svg │ │ ├── hotels.svg │ │ ├── hotelsBrand.svg │ │ ├── house.svg │ │ ├── hybrid.svg │ │ ├── image.svg │ │ ├── imageWide.svg │ │ ├── inclusive.svg │ │ ├── information.svg │ │ ├── informationOutline.svg │ │ ├── instagram.svg │ │ ├── key.svg │ │ ├── kitchen.svg │ │ ├── kitchenette.svg │ │ ├── laptop.svg │ │ ├── lateNight.svg │ │ ├── layers.svg │ │ ├── license.svg │ │ ├── list.svg │ │ ├── listContained.svg │ │ ├── localBar.svg │ │ ├── lock.svg │ │ ├── logout.svg │ │ ├── loyalty.svg │ │ ├── luggage.svg │ │ ├── luggageNo.svg │ │ ├── manual.svg │ │ ├── map.svg │ │ ├── mask.svg │ │ ├── medicalAssistance.svg │ │ ├── menu.svg │ │ ├── merge.svg │ │ ├── micOff.svg │ │ ├── microphone.svg │ │ ├── microwave.svg │ │ ├── mileage.svg │ │ ├── minimize.svg │ │ ├── minus.svg │ │ ├── moreHorizontal.svg │ │ ├── moreVertical.svg │ │ ├── mountain.svg │ │ ├── multiAirline.svg │ │ ├── multiOccupancy.svg │ │ ├── museum.svg │ │ ├── navigation.svg │ │ ├── newRelease.svg │ │ ├── noSeat.svg │ │ ├── notification.svg │ │ ├── notificationImportant.svg │ │ ├── notifications.svg │ │ ├── notificationsAdd.svg │ │ ├── offlineBolt.svg │ │ ├── onDemand.svg │ │ ├── overnight.svg │ │ ├── packagesBrand.svg │ │ ├── palette.svg │ │ ├── parentChild.svg │ │ ├── parentChildCircle.svg │ │ ├── park.svg │ │ ├── parking.svg │ │ ├── pause.svg │ │ ├── personalItem.svg │ │ ├── pets.svg │ │ ├── phone.svg │ │ ├── phoneActive.svg │ │ ├── phoneAgent.svg │ │ ├── phoneAgentWithCard.svg │ │ ├── phoneDialPad.svg │ │ ├── phoneForwarded.svg │ │ ├── phoneLog.svg │ │ ├── picture.svg │ │ ├── pieChart.svg │ │ ├── pin.svg │ │ ├── pinAdd.svg │ │ ├── pinEdit.svg │ │ ├── playArrow.svg │ │ ├── plus.svg │ │ ├── plusOne.svg │ │ ├── pool.svg │ │ ├── power.svg │ │ ├── priceline.svg │ │ ├── pricelineSparkle.svg │ │ ├── printer.svg │ │ ├── pushPin.svg │ │ ├── pushPinBorder.svg │ │ ├── quilt.svg │ │ ├── radioChecked.svg │ │ ├── radioEmpty.svg │ │ ├── radioMinus.svg │ │ ├── radioPlus.svg │ │ ├── railway.svg │ │ ├── receipt.svg │ │ ├── refresh.svg │ │ ├── refund.svg │ │ ├── restaurant.svg │ │ ├── ribbon.svg │ │ ├── ribbonAlt.svg │ │ ├── road.svg │ │ ├── roomSize.svg │ │ ├── rowing.svg │ │ ├── saveAlt.svg │ │ ├── search.svg │ │ ├── searchRecent.svg │ │ ├── seat.svg │ │ ├── seatBusiness.svg │ │ ├── seatEconomy.svg │ │ ├── security.svg │ │ ├── settings.svg │ │ ├── share.svg │ │ ├── shuttle.svg │ │ ├── sick.svg │ │ ├── singleOccupancy.svg │ │ ├── sites.svg │ │ ├── smartphone.svg │ │ ├── smile.svg │ │ ├── smoking.svg │ │ ├── smokingAllowed.svg │ │ ├── snack.svg │ │ ├── soapBar.svg │ │ ├── sort.svg │ │ ├── spa.svg │ │ ├── sparkle.svg │ │ ├── splitTicket.svg │ │ ├── sprayBottle.svg │ │ ├── star.svg │ │ ├── starHalf.svg │ │ ├── steeringWheel.svg │ │ ├── store.svg │ │ ├── subdirectoryArrowRight.svg │ │ ├── subway.svg │ │ ├── subwayAlt.svg │ │ ├── success.svg │ │ ├── successOutline.svg │ │ ├── sunrise.svg │ │ ├── sustainability.svg │ │ ├── swap.svg │ │ ├── swapCurved.svg │ │ ├── swapHorizontal.svg │ │ ├── sync.svg │ │ ├── tableChart.svg │ │ ├── task.svg │ │ ├── taskChecked.svg │ │ ├── taxi.svg │ │ ├── tea.svg │ │ ├── thumbsDown.svg │ │ ├── thumbsUp.svg │ │ ├── timer.svg │ │ ├── traffic.svg │ │ ├── train.svg │ │ ├── trash.svg │ │ ├── travelExplore.svg │ │ ├── trendingDown.svg │ │ ├── trendingUp.svg │ │ ├── tripInterruption.svg │ │ ├── trophy.svg │ │ ├── tune.svg │ │ ├── twitter.svg │ │ ├── unlock.svg │ │ ├── user.svg │ │ ├── userAdd.svg │ │ ├── userChecked.svg │ │ ├── userCircle.svg │ │ ├── verified.svg │ │ ├── viewList.svg │ │ ├── viewModule.svg │ │ ├── visibility.svg │ │ ├── visibilityOff.svg │ │ ├── walk.svg │ │ ├── warning.svg │ │ ├── warningOutline.svg │ │ ├── washingHands.svg │ │ ├── web.svg │ │ ├── whirlpool.svg │ │ ├── widgets.svg │ │ ├── wifi.svg │ │ ├── youtube.svg │ │ └── zoomOut.svg │ ├── svgr.config.js │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js ├── menu │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Menu │ │ │ ├── Menu.jsx │ │ │ ├── Menu.spec.js │ │ │ ├── Menu.stories.args.js │ │ │ ├── Menu.stories.jsx │ │ │ └── index.js │ │ ├── MenuItem │ │ │ ├── MenuItem.jsx │ │ │ ├── MenuItem.spec.js │ │ │ ├── MenuItem.stories.args.js │ │ │ ├── MenuItem.stories.jsx │ │ │ └── index.js │ │ ├── MenuList │ │ │ ├── MenuList.jsx │ │ │ ├── MenuList.spec.js │ │ │ ├── MenuList.stories.args.js │ │ │ ├── MenuList.stories.jsx │ │ │ └── index.js │ │ └── index.js │ └── test │ │ ├── jest.setup.js │ │ ├── mocks │ │ └── Menu.js │ │ └── testing-library.js ├── modal │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Headers.spec.js │ │ ├── Modal.jsx │ │ ├── Modal.spec.js │ │ ├── Modal.stories.jsx │ │ ├── ModalHeader.jsx │ │ ├── ScrollLock.jsx │ │ ├── ScrollLock.spec.js │ │ ├── SmallModalHeader.jsx │ │ ├── __snapshots__ │ │ │ ├── Headers.spec.js.snap │ │ │ └── Modal.spec.js.snap │ │ ├── index.js │ │ └── mockData.js │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js ├── popover │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── babel.config.js │ ├── config │ │ └── rush-project.json │ ├── jest.config.js │ ├── package.json │ ├── src │ │ ├── Arrow │ │ │ ├── Arrow.jsx │ │ │ └── index.js │ │ ├── Overlay │ │ │ ├── Overlay.jsx │ │ │ ├── Overlay.spec.js │ │ │ ├── __snapshots__ │ │ │ │ └── Overlay.spec.js.snap │ │ │ └── index.js │ │ ├── Popover │ │ │ ├── Popover.jsx │ │ │ ├── Popover.spec.js │ │ │ ├── Popover.stories.args.jsx │ │ │ ├── Popover.stories.jsx │ │ │ ├── __snapshots__ │ │ │ │ └── Popover.spec.js.snap │ │ │ └── index.js │ │ ├── PopoverContent │ │ │ ├── PopoverContent.jsx │ │ │ ├── PopoverContent.spec.js │ │ │ └── index.js │ │ ├── getPopoverStyles │ │ │ ├── getPopoverStyles.js │ │ │ ├── getPopoverStyles.spec.js │ │ │ └── index.js │ │ ├── index.js │ │ └── usePopover │ │ │ ├── index.js │ │ │ └── usePopover.js │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js └── slider │ ├── .eslintignore │ ├── .eslintrc.js │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ └── rig.json │ ├── package.json │ ├── src │ ├── RangeSlider.tsx │ ├── Slider.stories.tsx │ ├── Slider.tsx │ ├── __snapshots__ │ │ └── index.spec.tsx.snap │ ├── __test__ │ │ ├── jest.setup.tsx │ │ ├── test.d.ts │ │ └── testing-library.tsx │ ├── global.d.ts │ ├── index.ts │ └── styleSlider.ts │ └── tsconfig.json ├── rigs └── component │ ├── README.md │ ├── package.json │ └── profiles │ └── react │ ├── config │ ├── heft.json │ ├── jest.config.json │ ├── rush-project.json │ └── typescript.json │ └── tsconfig-base.json ├── rush.json └── tools ├── babel-preset ├── .eslintignore ├── .eslintrc.js ├── README.md ├── config │ └── rush-project.json ├── jest.config.js ├── package.json └── src │ ├── index.js │ └── index.spec.js ├── boilerplate ├── actions │ └── addProjectToRushJson │ │ ├── addProjectToRushJson.js │ │ └── index.js ├── plop-templates │ ├── core │ │ ├── index.js.hbs │ │ ├── {{componentName}}.js.hbs │ │ ├── {{componentName}}.spec.js.hbs │ │ └── {{componentName}}.stories.js.hbs │ └── package │ │ ├── .eslintignore │ │ ├── .eslintrc.js │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── README.md.hbs │ │ ├── babel.config.js │ │ ├── jest.config.js │ │ ├── package.json.hbs │ │ ├── src │ │ ├── index.js.hbs │ │ ├── {{componentName}}.js.hbs │ │ ├── {{componentName}}.spec.js.hbs │ │ └── {{componentName}}.stories.js.hbs │ │ └── test │ │ ├── jest.setup.js │ │ └── testing-library.js └── plopfile.js ├── create-release-notes ├── .eslintignore ├── .eslintrc.js ├── config │ └── rush-project.json ├── package.json ├── src │ ├── actions │ │ └── createReleaseNotes.ts │ ├── cli │ │ └── releaseNotes.ts │ ├── index.ts │ └── types │ │ └── Release.ts └── tsconfig.json ├── eslint-config ├── .eslintignore ├── .eslintrc.js ├── README.md ├── config │ └── rush-project.json ├── heft.js ├── index.js ├── jsx-a11y.js ├── package.json ├── shared │ ├── extends.js │ └── plugins.js └── typescript.js └── project-change-analyzer ├── .eslintignore ├── .eslintrc.js ├── .npmignore ├── config └── rush-project.json ├── package.json ├── src ├── getAppReleaseMetadata │ ├── getAppReleaseMetadata.ts │ └── index.ts ├── getChangedProjects │ ├── getChangedProjects.ts │ └── index.ts ├── index.ts └── setActionOutput │ ├── index.ts │ └── setActionOutput.ts └── tsconfig.json /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Actual Behaviour** 2 | 3 | 4 | 5 | **Expected Behaviour** 6 | 7 | 8 | 9 | **Steps to reproduce the behaviour** 10 | 11 | 12 | 13 | **Screenshot(s) of the issue** 14 | 15 | 16 | 17 | **Would you like to work on the issue?** 18 | 19 | 20 | -------------------------------------------------------------------------------- /.github/codeql/codeql-config.yml: -------------------------------------------------------------------------------- 1 | paths-ignore: 2 | - common/scripts 3 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 110, 3 | jsxSingleQuote: true, 4 | singleQuote: true, 5 | semi: false, 6 | trailingComma: 'es5', 7 | } 8 | -------------------------------------------------------------------------------- /apps/docs/.eslintignore: -------------------------------------------------------------------------------- 1 | **/.next/* 2 | **/.rush/* 3 | **/node_modules/* 4 | 5 | **/coverage/* 6 | 7 | **/dist/* 8 | **/out/* -------------------------------------------------------------------------------- /apps/docs/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /apps/docs/pages/BackgroundImage.md: -------------------------------------------------------------------------------- 1 | # BackgroundImage 2 | 3 | Use the `BackgroundImage` component to set a background image. 4 | 5 | ```.jsx 6 | 8 | 9 | 13 | Hello 14 | 15 | 16 | 17 | ``` 18 | 19 | ## Props 20 | 21 | | Prop | Type | Description | 22 | | -------- | ------ | ------------------------ | 23 | | `image` | string | URI for background image | 24 | | `height` | string | CSS value for height | 25 | -------------------------------------------------------------------------------- /apps/docs/pages/BlockLink.md: -------------------------------------------------------------------------------- 1 | # BlockLink 2 | 3 | The `BlockLink` component is an unstyled `` element that can be used to wrap block-level content. 4 | 5 | **Extends: [Link](/Link)** 6 | 7 | ```.jsx 8 | 9 | 10 | Priceline.com 11 | 12 | 13 | ``` 14 | -------------------------------------------------------------------------------- /apps/docs/pages/Breakpoints.md: -------------------------------------------------------------------------------- 1 | # Breakpoints 2 | 3 | Priceline's Design System is built around a set of breakpoints on the theme that Styled System uses to create a responsive layout. 4 | 5 | **Name**|**EM**|**Pixels\*** 6 | :-----|:-----|:----- 7 | SM|32|512 8 | MD|40|640 9 | LG|48|768 10 | XL|64|1024 11 | XXL|80|1280 12 | 13 | \* Base pixel size = 16px 14 | -------------------------------------------------------------------------------- /apps/docs/pages/Button.md: -------------------------------------------------------------------------------- 1 | # Button 2 | 3 | See Button's Storybook [docs page](https://priceline.github.io/design-system/storybook/?path=/docs/core-button--button) for details. 4 | -------------------------------------------------------------------------------- /apps/docs/pages/CloseButton.md: -------------------------------------------------------------------------------- 1 | # CloseButton 2 | 3 | The `CloseButton` component is an extension of the `IconButton` component with default props for use as a button for closing modal dialogs and other UI components. 4 | 5 | ```.jsx 6 | 7 | 8 | 9 | 10 | ``` 11 | 12 | ### Related 13 | 14 | - [IconButton](/IconButton) 15 | -------------------------------------------------------------------------------- /apps/docs/pages/Container.md: -------------------------------------------------------------------------------- 1 | # Container 2 | 3 | Use the `Container` component to center content horizontally with a max-width. 4 | 5 | ```.jsx 6 | 7 | 8 | Container 9 | 10 | 11 | ``` 12 | 13 | ## Props 14 | 15 | | Prop | Type | Description | 16 | | ---------- | ------ | ----------------------------------- | 17 | | `maxWidth` | Number | Sets `max-width` (default `1280px`) | 18 | -------------------------------------------------------------------------------- /apps/docs/pages/Flag.md: -------------------------------------------------------------------------------- 1 | # Flag 2 | 3 | Use the `Flag` component for stylized merchandising messages. 4 | 5 | ```.jsx 6 | 7 | 8 | Hello 9 | 10 | 11 | ``` 12 | 13 | ```.jsx 14 | 15 | 16 | Hello 17 | 18 | 19 | ``` 20 | 21 | ## Props 22 | 23 | | Prop | Type | Description | 24 | | ------- | ------ | ---------------- | 25 | | `color` | string | Text color | 26 | | `bg` | string | Background color | 27 | -------------------------------------------------------------------------------- /apps/docs/pages/Image.md: -------------------------------------------------------------------------------- 1 | # Image 2 | 3 | The `Image` component is a styled `` element with `max-width: 100%`. 4 | 5 | ```.jsx 6 | Brooklyn 10 | ``` 11 | 12 | ```.jsx 13 | Brooklyn 19 | ``` 20 | -------------------------------------------------------------------------------- /apps/docs/pages/Input.md: -------------------------------------------------------------------------------- 1 | # Input 2 | 3 | The `Input` component is a styled `` element. 4 | It accepts all native HTML attributes for the element. 5 | 6 | ```.jsx 7 | 12 | ``` 13 | 14 | ```.jsx 15 | 16 | 21 | ``` 22 | -------------------------------------------------------------------------------- /apps/docs/pages/Radio.md: -------------------------------------------------------------------------------- 1 | # Radio 2 | 3 | The `Radio` component is a styled `` element. 4 | Wrap the `Radio` component with the `Label` component to create a form control. 5 | 6 | ```.jsx 7 | 14 | 19 | 24 | ``` 25 | 26 | Note: `defaultChecked` is used in the example as an uncontrolled component. 27 | -------------------------------------------------------------------------------- /apps/docs/pages/RatingBadge.md: -------------------------------------------------------------------------------- 1 | # RatingBadge 2 | 3 | Used in the hotel listing for guest ratings. 4 | 5 | **Extends: [Box](/Box)** 6 | 7 | ```.jsx 8 | 9 | 9.0 10 | 11 | ``` 12 | 13 | ## Props 14 | 15 | | Prop | Type | Description | 16 | | ------- | ------ | --------------------- | 17 | | `color` | string | Sets text color | 18 | | `bg` | string | Sets background color | 19 | -------------------------------------------------------------------------------- /apps/docs/pages/TextArea.md: -------------------------------------------------------------------------------- 1 | # TextArea 2 | 3 | The `TextArea` component is a styled `