@faststore/ui 2.0.3-alpha.0 → 2.0.5-alpha.0

package/src/{organisms → components/organisms}/OutOfStock/stories/OutOfStock.stories.tsx

@@ -7,7 +7,7 @@ import type {
   OutOfStockProps,
 } from '..'
 import Component, { OutOfStockTitle, OutOfStockMessage } from '..'
-import Button from '../../../atoms/Button'
+import { Button } from '@faststore/components'
 import Input from '../../../atoms/Input'
 import mdx from './OutOfStock.mdx'
 

package/src/index.ts

@@ -1,103 +1,88 @@
-// Atoms
-export { default as Link } from './atoms/Link'
-export type { LinkProps } from './atoms/Link'
-
-export { default as Button } from './atoms/Button'
-export type { ButtonProps } from './atoms/Button'
-
-export { default as Input } from './atoms/Input'
-export type { InputProps } from './atoms/Input'
-
-export { default as Icon } from './atoms/Icon'
-export type { IconProps } from './atoms/Icon'
-
-export { default as Popover } from './atoms/Popover'
-export type { PopoverProps } from './atoms/Popover'
-
-export { default as Price } from './atoms/Price'
-export type { PriceProps } from './atoms/Price'
-
-export { default as TextArea } from './atoms/TextArea'
-export type { TextAreaProps } from './atoms/TextArea'
+export * from '@faststore/components'
 
-export { default as Checkbox } from './atoms/Checkbox'
-export type { CheckboxProps } from './atoms/Checkbox'
+// Atoms
+export { default as Link } from './components/atoms/Link'
+export type { LinkProps } from './components/atoms/Link'
 
-export { default as Overlay } from './atoms/Overlay'
-export type { OverlayProps } from './atoms/Overlay'
+export { default as Input } from './components/atoms/Input'
+export type { InputProps } from './components/atoms/Input'
 
-export { default as Select } from './atoms/Select'
-export type { SelectProps } from './atoms/Select'
+export { default as Popover } from './components/atoms/Popover'
+export type { PopoverProps } from './components/atoms/Popover'
 
-export { default as Radio } from './atoms/Radio'
-export type { RadioProps } from './atoms/Radio'
+export { default as Price } from './components/atoms/Price'
+export type { PriceProps } from './components/atoms/Price'
 
-export { default as Badge } from './atoms/Badge'
-export type { BadgeProps } from './atoms/Badge'
+export { default as TextArea } from './components/atoms/TextArea'
+export type { TextAreaProps } from './components/atoms/TextArea'
 
-export { default as Slider } from './atoms/Slider'
-export type { SliderProps } from './atoms/Slider'
+export { default as Select } from './components/atoms/Select'
+export type { SelectProps } from './components/atoms/Select'
 
-export { default as List } from './atoms/List'
-export type { ListProps } from './atoms/List'
+export { default as Slider } from './components/atoms/Slider'
+export type { SliderProps } from './components/atoms/Slider'
 
-export { default as Skeleton } from './atoms/Skeleton'
-export type { SkeletonProps } from './atoms/Skeleton'
+export { default as List } from './components/atoms/List'
+export type { ListProps } from './components/atoms/List'
 
-export { default as Spinner } from './atoms/Spinner'
-export type { SpinnerProps } from './atoms/Spinner'
+export { default as Skeleton } from './components/atoms/Skeleton'
+export type { SkeletonProps } from './components/atoms/Skeleton'
 
-export { default as Label } from './atoms/Label'
-export type { LabelProps } from './atoms/Label'
+export { default as Spinner } from './components/atoms/Spinner'
+export type { SpinnerProps } from './components/atoms/Spinner'
 
-export { default as Incentive } from './atoms/Incentive'
-export type { IncentiveProps } from './atoms/Incentive'
+export { default as Incentive } from './components/atoms/Incentive'
+export type { IncentiveProps } from './components/atoms/Incentive'
 
 // Molecules
-export { default as SkuSelector } from './molecules/SkuSelector'
-export type { SkuSelectorProps } from './molecules/SkuSelector'
+export { default as SkuSelector } from './components/molecules/SkuSelector'
+export type { SkuSelectorProps } from './components/molecules/SkuSelector'
 
-export { default as Gift, GiftContent, GiftImage } from './molecules/Gift'
+export {
+  default as Gift,
+  GiftContent,
+  GiftImage,
+} from './components/molecules/Gift'
 export type {
   GiftProps,
   GiftContentProps,
   GiftImageProps,
-} from './molecules/Gift'
+} from './components/molecules/Gift'
 
-export { default as ProductTitle } from './molecules/ProductTitle'
-export type { ProductTitleProps } from './molecules/ProductTitle'
+export { default as ProductTitle } from './components/molecules/ProductTitle'
+export type { ProductTitleProps } from './components/molecules/ProductTitle'
 
-export { default as OrderSummary } from './molecules/OrderSummary'
-export type { OrderSummaryProps } from './molecules/OrderSummary'
+export { default as OrderSummary } from './components/molecules/OrderSummary'
+export type { OrderSummaryProps } from './components/molecules/OrderSummary'
 
-export { default as AggregateRating } from './molecules/AggregateRating'
-export type { AggregateRatingProps } from './molecules/AggregateRating'
+export { default as AggregateRating } from './components/molecules/AggregateRating'
+export type { AggregateRatingProps } from './components/molecules/AggregateRating'
 
 export {
   default as ProductCard,
   ProductCardImage,
   ProductCardContent,
   ProductCardActions,
-} from './molecules/ProductCard'
+} from './components/molecules/ProductCard'
 export type {
   ProductCardProps,
   ProductCardImageProps,
   ProductCardContentProps,
   ProductCardActionsProps,
-} from './molecules/ProductCard'
+} from './components/molecules/ProductCard'
 
 export {
   default as Card,
   CardImage,
   CardContent,
   CardActions,
-} from './molecules/Card'
+} from './components/molecules/Card'
 export type {
   CardProps,
   CardImageProps,
   CardContentProps,
   CardActionsProps,
-} from './molecules/Card'
+} from './components/molecules/Card'
 
 export {
   default as CartItem,
@@ -107,7 +92,7 @@ export {
   CartItemPrices,
   CartItemSummary,
   CartItemTitle,
-} from './molecules/CartItem'
+} from './components/molecules/CartItem'
 export type {
   CartItemProps,
   CartItemActionsProps,
@@ -116,63 +101,69 @@ export type {
   CartItemPricesProps,
   CartItemSummaryProps,
   CartItemTitleProps,
-} from './molecules/CartItem'
+} from './components/molecules/CartItem'
 
-export { default as Bullets } from './molecules/Bullets'
-export type { BulletsProps } from './molecules/Bullets'
+export { default as Bullets } from './components/molecules/Bullets'
+export type { BulletsProps } from './components/molecules/Bullets'
 
-export { default as SearchInput } from './molecules/SearchInput'
-export type { SearchInputProps, SearchInputRef } from './molecules/SearchInput'
-
-export { default as Carousel } from './molecules/Carousel'
-export type { CarouselProps } from './molecules/Carousel'
+export { default as SearchInput } from './components/molecules/SearchInput'
+export type {
+  SearchInputProps,
+  SearchInputRef,
+} from './components/molecules/SearchInput'
 
-export { default as IconButton } from './molecules/IconButton'
-export type { IconButtonProps } from './molecules/IconButton'
+export { default as Carousel } from './components/molecules/Carousel'
+export type { CarouselProps } from './components/molecules/Carousel'
 
-export { default as Modal } from './molecules/Modal'
-export type { ModalProps } from './molecules/Modal'
+export { default as Modal } from './components/molecules/Modal'
+export type { ModalProps } from './components/molecules/Modal'
 
 export {
   default as Banner,
   BannerContent,
   BannerImage,
   BannerLink,
-} from './molecules/Banner'
+} from './components/molecules/Banner'
 export type {
   BannerProps,
   BannerContentProps,
   BannerImageProps,
   BannerLinkProps,
-} from './molecules/Banner'
+} from './components/molecules/Banner'
 
-export { default as PaymentMethods } from './molecules/PaymentMethods'
-export type { PaymentMethodsProps } from './molecules/PaymentMethods'
+export { default as PaymentMethods } from './components/molecules/PaymentMethods'
+export type { PaymentMethodsProps } from './components/molecules/PaymentMethods'
 
-export { default as Breadcrumb } from './molecules/Breadcrumb'
-export type { BreadcrumbProps } from './molecules/Breadcrumb'
+export { default as Breadcrumb } from './components/molecules/Breadcrumb'
+export type { BreadcrumbProps } from './components/molecules/Breadcrumb'
 
-export { default as LoadingButton } from './molecules/LoadingButton'
-export type { LoadingButtonProps } from './molecules/LoadingButton'
+export { default as LoadingButton } from './components/molecules/LoadingButton'
+export type { LoadingButtonProps } from './components/molecules/LoadingButton'
 
-export { default as PriceRange } from './molecules/PriceRange'
-export type { PriceRangeProps } from './molecules/PriceRange'
+export { default as PriceRange } from './components/molecules/PriceRange'
+export type { PriceRangeProps } from './components/molecules/PriceRange'
 
-export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
-export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
+export {
+  default as RadioGroup,
+  RadioOption,
+} from './components/molecules/RadioGroup'
+export type {
+  RadioGroupProps,
+  RadioOptionProps,
+} from './components/molecules/RadioGroup'
 
 export {
   default as Accordion,
   AccordionItem,
   AccordionButton,
   AccordionPanel,
-} from './molecules/Accordion'
+} from './components/molecules/Accordion'
 export type {
   AccordionProps,
   AccordionItemProps,
   AccordionButtonProps,
   AccordionPanelProps,
-} from './molecules/Accordion'
+} from './components/molecules/Accordion'
 
 export {
   Table,
@@ -181,7 +172,7 @@ export {
   TableFooter,
   TableHead,
   TableRow,
-} from './molecules/Table'
+} from './components/molecules/Table'
 export type {
   TableProps,
   TableBodyProps,
@@ -189,51 +180,55 @@ export type {
   TableFooterProps,
   TableHeadProps,
   TableRowProps,
-} from './molecules/Table'
+} from './components/molecules/Table'
 
-export { default as Form } from './molecules/Form'
-export type { FormProps } from './molecules/Form'
+export { default as Form } from './components/molecules/Form'
+export type { FormProps } from './components/molecules/Form'
 
-export { default as Alert } from './molecules/Alert'
-export type { AlertProps } from './molecules/Alert'
+export { default as Alert } from './components/molecules/Alert'
+export type { AlertProps } from './components/molecules/Alert'
 
-export { default as QuantitySelector } from './molecules/QuantitySelector'
-export type { QuantitySelectorProps } from './molecules/QuantitySelector'
+export { default as QuantitySelector } from './components/molecules/QuantitySelector'
+export type { QuantitySelectorProps } from './components/molecules/QuantitySelector'
 
 export {
   default as Dropdown,
   DropdownButton,
   DropdownItem,
   DropdownMenu,
-} from './molecules/Dropdown'
+} from './components/molecules/Dropdown'
 export type {
   DropdownProps,
   DropdownButtonProps,
   DropdownItemProps,
   DropdownMenuProps,
-} from './molecules/Dropdown'
+} from './components/molecules/Dropdown'
 
 // Organisms
 export {
   default as OutOfStock,
   OutOfStockTitle,
   OutOfStockMessage,
-} from './organisms/OutOfStock'
+} from './components/organisms/OutOfStock'
 export type {
   OutOfStockProps,
   OutOfStockMessageProps,
   OutOfStockTitleProps,
-} from './organisms/OutOfStock'
+} from './components/organisms/OutOfStock'
 
-export { Tiles, Tile } from './organisms/Tiles'
-export type { TilesProps, TileProps } from './organisms/Tiles'
+export { Tiles, Tile } from './components/organisms/Tiles'
+export type { TilesProps, TileProps } from './components/organisms/Tiles'
 
-export { default as Hero, HeroHeading, HeroImage } from './organisms/Hero'
+export {
+  default as Hero,
+  HeroHeading,
+  HeroImage,
+} from './components/organisms/Hero'
 export type {
   HeroProps,
   HeroHeadingProps,
   HeroImageProps,
-} from './organisms/Hero'
+} from './components/organisms/Hero'
 
 // Hooks
 export { default as useSlider } from './hooks/useSlider'

package/src/styles/base.scss

@@ -0,0 +1,3 @@
+@import "../base/layout";
+@import "../base/tokens";
+@import "../base/typography";

package/src/styles/components.scss

@@ -0,0 +1,11 @@
+// Atoms
+@import "../components/atoms/Badge/styles";
+@import "../components/atoms/Button/styles";
+@import "../components/atoms/Checkbox/styles";
+@import "../components/atoms/Overlay/styles";
+@import "../components/atoms/Radio/styles";
+
+// Molecules
+@import "../components/molecules/CheckboxField/styles";
+@import "../components/molecules/RadioField/styles";
+@import "../components/molecules/Tag/styles";

package/src/styles/global.scss

@@ -0,0 +1,4 @@
+@import "./utilities";
+@import "./reset";
+@import "./base";
+@import "./components";

package/src/styles/reset.scss

@@ -0,0 +1,54 @@
+@import "~modern-normalize/modern-normalize";
+
+// Reset default styles
+body {
+  padding: 0;
+  margin: 0;
+}
+
+// Remove all of the default margins
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+// Remove heading elements default style
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+// Remove list elements default style
+ol,
+ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+button {
+  border: 0;
+  outline: none;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html {
+  font-size: 100%;
+}

package/src/styles/utilities.scss

@@ -0,0 +1,75 @@
+/* SQ-DISABLE */
+@use "sass:math";
+/* SQ-ENABLE */
+
+@import "~include-media/dist/include-media";
+
+// Include Media Overwrites //////////////////////////
+
+$breakpoints: (
+  "phone":         320px,
+  "phonemid":      375px,
+  "tablet":        768px,
+  "notebook":      1280px,
+  "desktop":       1440px,
+);
+
+// Px to rem.
+$base: 16px !default;
+
+@function rem($size) {
+  $rem: math.div($size, $base);
+
+  @return #{$rem}rem;
+}
+
+@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:hover:focus,                              // due to Safari's lack of support
+      &:focus {
+        border-color: $border;
+        outline: none;
+        box-shadow:
+          0 0 0 1px var(--fs-color-body-bkg),
+          0 0 0 var(--fs-border-width-thickest) $outline,
+          inset 0 0 0 var(--fs-border-width) $border;
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:hover:focus-visible {
+    border-color: $border;
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--fs-color-body-bkg),
+      0 0 0 var(--fs-border-width-thickest) $outline,
+      inset 0 0 0 var(--fs-border-width) $border;
+  }
+}
+
+@mixin focus-ring {
+  outline: none;
+  box-shadow: 0 0 0 1px var(--fs-color-body-bkg), 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring);
+}
+
+@mixin focus-ring-visible {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:focus { @include focus-ring; }            // due to Safari's lack of support
+    }
+  }
+  &:focus-visible { @include focus-ring; }
+}
+
+@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -webkit-line-clamp: $max-lines;
+  line-clamp: $max-lines;
+  text-overflow: -o-ellipsis-lastline;
+  text-overflow: ellipsis;
+}

package/src/typings/utils.d.ts

@@ -1,5 +1,5 @@
-import type { ArgType } from '@storybook/react'
+import type { ArgTypes } from '@storybook/react'
 
 export type ComponentArgTypes<T> = {
-  [K in keyof T]: ArgType
+  [K in keyof T]: ArgTypes
 }

package/dist/atoms/Badge/Badge.d.ts

@@ -1,11 +0,0 @@
-import type { ReactNode, HTMLAttributes } from 'react';
-import React from 'react';
-export interface BadgeProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    children?: ReactNode;
-}
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
-export default Badge;

package/dist/atoms/Badge/Badge.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Badge = forwardRef(function Badge({ testId = 'store-badge', children, ...otherProps }, ref) {
-    return (React.createElement("div", Object.assign({ ref: ref, "data-fs-badge": true, "data-testid": testId }, otherProps), children));
-});
-export default Badge;
-//# sourceMappingURL=Badge.js.map

package/dist/atoms/Badge/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACjE,EAAE,MAAM,GAAG,aAAa,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAC/D,GAAG;IAEH,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,wCAA6B,MAAM,IAAM,UAAU,GAC7D,QAAQ,CACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,KAAK,CAAA"}

package/dist/atoms/Badge/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Badge';
-export type { BadgeProps } from './Badge';

package/dist/atoms/Badge/index.js

@@ -1,2 +0,0 @@
-export { default } from './Badge';
-//# sourceMappingURL=index.js.map

package/dist/atoms/Badge/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Badge/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA"}

package/dist/atoms/Button/Button.d.ts

@@ -1,10 +0,0 @@
-import type { ButtonHTMLAttributes } from 'react';
-import React from 'react';
-export interface ButtonProps<T = HTMLButtonElement> extends ButtonHTMLAttributes<T> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
-export default Button;

package/dist/atoms/Button/Button.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Button = forwardRef(function Button({ children, testId = 'store-button', ...otherProps }, ref) {
-    return (React.createElement("button", Object.assign({ ref: ref, "data-fs-button": true, "data-testid": testId }, otherProps), children));
-});
-export default Button;
-//# sourceMappingURL=Button.js.map

package/dist/atoms/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAUzC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CACvE,EAAE,QAAQ,EAAE,MAAM,GAAG,cAAc,EAAE,GAAG,UAAU,EAAE,EACpD,GAAG;IAEH,OAAO,CACL,8CAAQ,GAAG,EAAE,GAAG,yCAA8B,MAAM,IAAM,UAAU,GACjE,QAAQ,CACF,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,MAAM,CAAA"}

package/dist/atoms/Button/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Button';
-export type { ButtonProps } from './Button';

package/dist/atoms/Button/index.js

@@ -1,2 +0,0 @@
-export { default } from './Button';
-//# sourceMappingURL=index.js.map

package/dist/atoms/Button/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA"}

package/dist/atoms/Checkbox/Checkbox.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { InputHTMLAttributes } from 'react';
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

package/dist/atoms/Checkbox/Checkbox.js

@@ -1,6 +0,0 @@
-import React, { forwardRef } from 'react';
-const Checkbox = forwardRef(function Checkbox({ testId = 'store-checkbox', ...otherProps }, ref) {
-    return (React.createElement("input", Object.assign({ ref: ref, "data-fs-checkbox": true, "data-testid": testId, type: "checkbox" }, otherProps)));
-});
-export default Checkbox;
-//# sourceMappingURL=Checkbox.js.map

package/dist/atoms/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/atoms/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAWzC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CAC5E,EAAE,MAAM,GAAG,gBAAgB,EAAE,GAAG,UAAU,EAAiB,EAC3D,GAAG;IAEH,OAAO,CACL,6CACE,GAAG,EAAE,GAAG,2CAEK,MAAM,EACnB,IAAI,EAAC,UAAU,IACX,UAAU,EACd,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/atoms/Checkbox/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';

package/dist/atoms/Checkbox/index.js

@@ -1,2 +0,0 @@
-export { default } from './Checkbox';
-//# sourceMappingURL=index.js.map

package/dist/atoms/Checkbox/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/dist/atoms/Icon/Icon.d.ts

@@ -1,14 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-import React from 'react';
-export interface IconProps extends HTMLAttributes<HTMLSpanElement> {
-    /**
-     * A React component that will be rendered as an icon.
-     */
-    component: ReactNode;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-}
-declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
-export default Icon;