@alto-avios/alto-ui 5.2.0 → 5.4.0

package/dist/components/Paragraph/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport styles from './Paragraph.module.css';\nimport {\n  foregroundColorVariants,\n  type ForegroundVariants,\n} from '../../utils/foregroundColour/foregroundColor';\nimport '../../utils/truncate/truncate.css';\n\nimport {\n  getBaseValue,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\n\nconst paragraph = cva(styles.paragraph, {\n  variants: {\n    size: {\n      xs: styles['size--xs'],\n      sm: styles['size--sm'],\n      md: styles['size--md'],\n      lg: styles['size--lg'],\n    },\n    textAlign: {\n      start: styles['align--start'],\n      center: styles['align--center'],\n      end: styles['align--end'],\n    },\n    truncate: {\n      true: styles['truncate--true'],\n      false: styles['truncate--false'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    textAlign: 'start',\n  },\n});\n\ntype ParagraphVariants = VariantProps<typeof paragraph>;\ntype ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';\ntype ParagraphTextAlign = 'start' | 'center' | 'end';\n\ninterface BaseProps\n  extends ParagraphVariants,\n    HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode;\n  /**\n   * **[Responsive]** The size of the paragraph\n   * @default \"md\"\n   */\n  size?: ParagraphSize;\n  /**\n   * The foreground color of the paragraph\n   * @default \"secondary\"\n   */\n  foregroundColor?: ForegroundVariants['foregroundColor'];\n  /**\n   * **[Responsive]** The text alignment of the paragraph\n   * @default \"start\"\n   */\n  textAlign?: ParagraphTextAlign;\n  /**\n   * Truncate text with ellipsis\n   * @default false\n   */\n  truncate?: boolean;\n}\n\n// ResponsivePropKeys are the keys of the props that can accept responsive values (base + breakpoint-specific)\ntype ResponsivePropKeys = 'size' | 'textAlign' | 'truncate';\n\nexport type ParagraphProps = WithResponsiveProps<BaseProps, ResponsivePropKeys>;\n\nexport const Paragraph = ({\n  children,\n  size = 'md',\n  foregroundColor = 'secondary',\n  textAlign = 'start',\n  truncate = false,\n  ...props\n}: ParagraphProps) => {\n  // Base values (string) are applied via CVA variants:\n  const baseSize = getBaseValue(size, 'md');\n  const baseAlign = getBaseValue(textAlign, 'start');\n  const truncateBase = getBaseValue(truncate, false);\n\n  // Breakpoint-only classNames come from the helper:\n  const sizeResp = getResponsiveClasses(size, 'size');\n  const alignResp = getResponsiveClasses(textAlign, 'align');\n  const truncateResp = getResponsiveClasses(truncate, 'truncate');\n\n  return (\n    <p\n      className={[\n        paragraph({\n          size: baseSize,\n          textAlign: baseAlign,\n          truncate: truncateBase,\n        }),\n        foregroundColorVariants({ foregroundColor }),\n        ...sizeResp, // md/lg/xl/2xl overrides\n        ...alignResp,\n        ...truncateResp,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","paragraph","cva","variants","size","xs","sm","md","lg","textAlign","start","center","end","truncate","true","false","defaultVariants","Paragraph","children","foregroundColor","props","baseSize","getBaseValue","baseAlign","truncateBase","sizeResp","alignResp","truncateResp","jsx","className","foregroundColorVariants","filter","Boolean","join"],"mappings":"mjFAeMA,EAAuBC,EAA0BC,GAEjDC,EAAYC,EAAIF,EAAOC,UAAW,CACtCE,SAAU,CACRC,KAAM,CACJC,GAAIL,EAAO,YACXM,GAAIN,EAAO,YACXO,GAAIP,EAAO,YACXQ,GAAIR,EAAO,aAEbS,UAAW,CACTC,MAAOV,EAAO,gBACdW,OAAQX,EAAO,iBACfY,IAAKZ,EAAO,eAEda,SAAU,CACRC,KAAMd,EAAO,kBACbe,MAAOf,EAAO,qBAGlBgB,gBAAiB,CACfZ,KAAM,KACNK,UAAW,WAuCFQ,EAAY,EACvBC,WACAd,OAAO,KACPe,kBAAkB,YAClBV,YAAY,QACZI,YAAW,KACRO,MAGH,MAAMC,EAAWC,EAAalB,EAAM,MAC9BmB,EAAYD,EAAab,EAAW,SACpCe,EAAeF,EAAaT,GAAU,GAGtCY,EAAW3B,EAAqBM,EAAM,QACtCsB,EAAY5B,EAAqBW,EAAW,SAC5CkB,EAAe7B,EAAqBe,EAAU;AAEpD,OACEe,EAAC,IAAA,CACCC,UAAW,CACT5B,EAAU,CACRG,KAAMiB,EACNZ,UAAWc,EACXV,SAAUW,IAEZM,EAAwB,CAAEX,uBACvBM,KACAC,KACAC,GAEFI,OAAOC,SACPC,KAAK,QACJb,EAEHF"}
+{"version":3,"file":"Paragraph.js","sources":["../../../src/components/Paragraph/Paragraph.tsx"],"sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport styles from './Paragraph.module.css';\nimport {\n  foregroundColorVariants,\n  type ForegroundVariants,\n} from '../../utils/foregroundColour/foregroundColor';\n\nimport {\n  getBaseValue,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\n\nconst paragraph = cva(styles.paragraph, {\n  variants: {\n    size: {\n      xs: styles['size--xs'],\n      sm: styles['size--sm'],\n      md: styles['size--md'],\n      lg: styles['size--lg'],\n    },\n    textAlign: {\n      start: styles['align--start'],\n      center: styles['align--center'],\n      end: styles['align--end'],\n    },\n    truncate: {\n      true: styles['truncate--true'],\n      false: styles['truncate--false'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    textAlign: 'start',\n  },\n});\n\ntype ParagraphVariants = VariantProps<typeof paragraph>;\ntype ParagraphSize = 'xs' | 'sm' | 'md' | 'lg';\ntype ParagraphTextAlign = 'start' | 'center' | 'end';\n\ninterface BaseProps\n  extends ParagraphVariants,\n    HTMLAttributes<HTMLParagraphElement> {\n  children: React.ReactNode;\n  /**\n   * **[Responsive]** The size of the paragraph\n   * @default \"md\"\n   */\n  size?: ParagraphSize;\n  /**\n   * The foreground color of the paragraph\n   * @default \"secondary\"\n   */\n  foregroundColor?: ForegroundVariants['foregroundColor'];\n  /**\n   * **[Responsive]** The text alignment of the paragraph\n   * @default \"start\"\n   */\n  textAlign?: ParagraphTextAlign;\n  /**\n   * Truncate text with ellipsis\n   * @default false\n   */\n  truncate?: boolean;\n}\n\n// ResponsivePropKeys are the keys of the props that can accept responsive values (base + breakpoint-specific)\ntype ResponsivePropKeys = 'size' | 'textAlign' | 'truncate';\n\nexport type ParagraphProps = WithResponsiveProps<BaseProps, ResponsivePropKeys>;\n\nexport const Paragraph = ({\n  children,\n  size = 'md',\n  foregroundColor = 'secondary',\n  textAlign = 'start',\n  truncate = false,\n  ...props\n}: ParagraphProps) => {\n  // Base values (string) are applied via CVA variants:\n  const baseSize = getBaseValue(size, 'md');\n  const baseAlign = getBaseValue(textAlign, 'start');\n  const truncateBase = getBaseValue(truncate, false);\n\n  // Breakpoint-only classNames come from the helper:\n  const sizeResp = getResponsiveClasses(size, 'size');\n  const alignResp = getResponsiveClasses(textAlign, 'align');\n  const truncateResp = getResponsiveClasses(truncate, 'truncate');\n\n  return (\n    <p\n      className={[\n        paragraph({\n          size: baseSize,\n          textAlign: baseAlign,\n          truncate: truncateBase,\n        }),\n        foregroundColorVariants({ foregroundColor }),\n        ...sizeResp, // md/lg/xl/2xl overrides\n        ...alignResp,\n        ...truncateResp,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n};\n\nexport default Paragraph;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","paragraph","cva","variants","size","xs","sm","md","lg","textAlign","start","center","end","truncate","true","false","defaultVariants","Paragraph","children","foregroundColor","props","baseSize","getBaseValue","baseAlign","truncateBase","sizeResp","alignResp","truncateResp","jsx","className","foregroundColorVariants","filter","Boolean","join"],"mappings":"ghFAcMA,EAAuBC,EAA0BC,GAEjDC,EAAYC,EAAIF,EAAOC,UAAW,CACtCE,SAAU,CACRC,KAAM,CACJC,GAAIL,EAAO,YACXM,GAAIN,EAAO,YACXO,GAAIP,EAAO,YACXQ,GAAIR,EAAO,aAEbS,UAAW,CACTC,MAAOV,EAAO,gBACdW,OAAQX,EAAO,iBACfY,IAAKZ,EAAO,eAEda,SAAU,CACRC,KAAMd,EAAO,kBACbe,MAAOf,EAAO,qBAGlBgB,gBAAiB,CACfZ,KAAM,KACNK,UAAW,WAuCFQ,EAAY,EACvBC,WACAd,OAAO,KACPe,kBAAkB,YAClBV,YAAY,QACZI,YAAW,KACRO,MAGH,MAAMC,EAAWC,EAAalB,EAAM,MAC9BmB,EAAYD,EAAab,EAAW,SACpCe,EAAeF,EAAaT,GAAU,GAGtCY,EAAW3B,EAAqBM,EAAM,QACtCsB,EAAY5B,EAAqBW,EAAW,SAC5CkB,EAAe7B,EAAqBe,EAAU;AAEpD,OACEe,EAAC,IAAA,CACCC,UAAW,CACT5B,EAAU,CACRG,KAAMiB,EACNZ,UAAWc,EACXV,SAAUW,IAEZM,EAAwB,CAAEX,uBACvBM,KACAC,KACAC,GAEFI,OAAOC,SACPC,KAAK,QACJb,EAEHF"}

package/dist/components/Popover/Popover.d.ts

@@ -38,7 +38,7 @@ export interface PopoverProps {
     arrowDirection?: ArrowDirectionType;
     /** Reference to the trigger element that opens the popover */
     triggerRef: React.RefObject<HTMLButtonElement | null> | {
-        current: HTMLElement;
+        current: HTMLElement | null;
     };
     /** Whether to show the directional arrow on the popover */
     hasArrow?: boolean;

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n  | 'top'\n  | 'top start'\n  | 'top end'\n  | 'right'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom'\n  | 'bottom start'\n  | 'bottom end'\n  | 'left'\n  | 'left top'\n  | 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n};\n\n// Internal props that should only be used by specific components like Menu\nexport interface InternalPopoverProps {\n  /**\n   * @private Internal use only - placement of the popover\n   * This prop should only be used by internal components like Menu\n   */\n  placement?: PlacementType;\n\n  /**\n   * @private Internal use only - whether the popover should flip to fit in the viewport\n   * This prop should only be used by internal components like Menu\n   */\n  shouldFlip?: boolean;\n\n  /**\n   * @private Internal use only - whether to allow elements outside the popover may be interacted with\n   * This prop should only be used by internal components like Menu\n   */\n  isNonModal?: boolean;\n\n  /**\n   * @private Internal use only - whether to allow tabbing out of the popover\n   * This prop should only be used by internal components like Menu\n   */\n  allowTabOut?: boolean;\n\n  /**\n   * @private Internal use only - whether to auto-focus elements within the popover\n   * This prop should only be used by internal components like Menu\n   */\n  autoFocus?: boolean;\n}\n\n// Public props exposed to all component users\nexport interface PopoverProps {\n  /** Content to be rendered inside the popover */\n  children: React.ReactNode;\n\n  /** State object controlling the overlay's open/closed status */\n  state: OverlayTriggerState;\n\n  /** Direction of the arrow that points to the trigger element */\n  arrowDirection?: ArrowDirectionType;\n\n  /** Reference to the trigger element that opens the popover */\n  triggerRef:\n    | React.RefObject<HTMLButtonElement | null>\n    | { current: HTMLElement };\n\n  /** Whether to show the directional arrow on the popover */\n  hasArrow?: boolean;\n}\n\n// Combined props type for internal use\nexport type CombinedPopoverProps = PopoverProps & InternalPopoverProps;\n\nexport const Popover = ({\n  children,\n  state,\n  arrowDirection = 'bottom',\n  triggerRef,\n  hasArrow = true,\n  placement,\n  shouldFlip = true,\n  isNonModal = false,\n  allowTabOut = false,\n  autoFocus = true,\n}: CombinedPopoverProps) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n  const initialPlacement =\n    placement || arrowDirectionToPlacement[arrowDirection];\n  const [optimalPlacement, setOptimalPlacement] =\n    React.useState<PlacementType>(initialPlacement);\n\n  useEffect(() => {\n    const updatePlacement = () => {\n      if (!popoverRef.current || !triggerRef.current) return;\n\n      // When viewport constraints are encountered, the placement can change\n      // React Aria's shouldFlip handles most of this logic now\n      setOptimalPlacement(initialPlacement);\n    };\n\n    updatePlacement();\n    window.addEventListener('resize', updatePlacement);\n    return () => window.removeEventListener('resize', updatePlacement);\n  }, [initialPlacement, triggerRef]);\n\n  const {\n    popoverProps,\n    arrowProps,\n    placement: finalPlacement,\n  } = usePopover(\n    {\n      popoverRef,\n      triggerRef,\n      offset: 12,\n      placement: optimalPlacement,\n      shouldFlip,\n      isNonModal,\n    },\n    state,\n  );\n\n  return (\n    <Overlay>\n      <div className={styles.popoverWrapper}>\n        <FocusScope restoreFocus contain={!allowTabOut} autoFocus={autoFocus}>\n          <div {...popoverProps} ref={popoverRef} className={styles.popover}>\n            <DismissButton onDismiss={state.close} />\n            {children}\n            {hasArrow && (\n              <div\n                {...arrowProps}\n                className={styles.arrow}\n                data-placement={finalPlacement}\n              />\n            )}\n          </div>\n        </FocusScope>\n      </div>\n    </Overlay>\n  );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","initialPlacement","optimalPlacement","setOptimalPlacement","React","useState","useEffect","updatePlacement","current","window","addEventListener","removeEventListener","popoverProps","arrowProps","finalPlacement","usePopover","offset","jsx","Overlay","className","styles","FocusScope","restoreFocus","contain","ref","DismissButton","onDismiss","close"],"mappings":"+SAyBMA,EAAuE,CAC3EC,IAAK,MACLC,MAAO,QACPC,OAAQ,SACRC,KAAM,QA2DKC,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MAGpCC,EACJP,GAAaX,EAA0BQ,IAClCW,EAAkBC,GACvBC,EAAMC,SAAwBJ,GAEhCK,EAAU,KACR,MAAMC,EAAkB,KACjBR,EAAWS,SAAYhB,EAAWgB,SAIvCL,EAAoBF,IAKtB,OAFAM,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,IAAME,OAAOE,oBAAoB,SAAUJ,IACjD,CAACN,EAAkBT,IAEtB,MAAMoB,aACJA,EAAAC,WACAA,EACAnB,UAAWoB,GACTC,EACF,CACEhB,aACAP,aACAwB,OAAQ,GACRtB,UAAWQ,EACXP,aACAC,cAEFN;AAGF,OACE2B,EAACC,GACC7B,wBAAA4B,EAAC,MAAA,CAAIE,UAAWC,EACd/B,wBAAA4B,EAACI,EAAA,CAAWC,cAAY,EAACC,SAAU1B,EAAaC,YAC9CT,0BAAC,MAAA,IAAQuB,EAAcY,IAAKzB,EAAYoB,UAAWC,EACjD/B,SAAA;iBAACoC,EAAA,CAAcC,UAAWpC,EAAMqC,QAC/BtC,EACAI,kBACCwB,EAAC,MAAA,IACKJ,EACJM,UAAWC,EACX,iBAAgBN"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n  | 'top'\n  | 'top start'\n  | 'top end'\n  | 'right'\n  | 'right top'\n  | 'right bottom'\n  | 'bottom'\n  | 'bottom start'\n  | 'bottom end'\n  | 'left'\n  | 'left top'\n  | 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n};\n\n// Internal props that should only be used by specific components like Menu\nexport interface InternalPopoverProps {\n  /**\n   * @private Internal use only - placement of the popover\n   * This prop should only be used by internal components like Menu\n   */\n  placement?: PlacementType;\n\n  /**\n   * @private Internal use only - whether the popover should flip to fit in the viewport\n   * This prop should only be used by internal components like Menu\n   */\n  shouldFlip?: boolean;\n\n  /**\n   * @private Internal use only - whether to allow elements outside the popover may be interacted with\n   * This prop should only be used by internal components like Menu\n   */\n  isNonModal?: boolean;\n\n  /**\n   * @private Internal use only - whether to allow tabbing out of the popover\n   * This prop should only be used by internal components like Menu\n   */\n  allowTabOut?: boolean;\n\n  /**\n   * @private Internal use only - whether to auto-focus elements within the popover\n   * This prop should only be used by internal components like Menu\n   */\n  autoFocus?: boolean;\n}\n\n// Public props exposed to all component users\nexport interface PopoverProps {\n  /** Content to be rendered inside the popover */\n  children: React.ReactNode;\n\n  /** State object controlling the overlay's open/closed status */\n  state: OverlayTriggerState;\n\n  /** Direction of the arrow that points to the trigger element */\n  arrowDirection?: ArrowDirectionType;\n\n  /** Reference to the trigger element that opens the popover */\n  triggerRef:\n    | React.RefObject<HTMLButtonElement | null>\n    | { current: HTMLElement | null };\n\n  /** Whether to show the directional arrow on the popover */\n  hasArrow?: boolean;\n}\n\n// Combined props type for internal use\nexport type CombinedPopoverProps = PopoverProps & InternalPopoverProps;\n\nexport const Popover = ({\n  children,\n  state,\n  arrowDirection = 'bottom',\n  triggerRef,\n  hasArrow = true,\n  placement,\n  shouldFlip = true,\n  isNonModal = false,\n  allowTabOut = false,\n  autoFocus = true,\n}: CombinedPopoverProps) => {\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n  const initialPlacement =\n    placement || arrowDirectionToPlacement[arrowDirection];\n  const [optimalPlacement, setOptimalPlacement] =\n    React.useState<PlacementType>(initialPlacement);\n\n  useEffect(() => {\n    const updatePlacement = () => {\n      if (!popoverRef.current || !triggerRef.current) return;\n\n      // When viewport constraints are encountered, the placement can change\n      // React Aria's shouldFlip handles most of this logic now\n      setOptimalPlacement(initialPlacement);\n    };\n\n    updatePlacement();\n    window.addEventListener('resize', updatePlacement);\n    return () => window.removeEventListener('resize', updatePlacement);\n  }, [initialPlacement, triggerRef]);\n\n  const {\n    popoverProps,\n    arrowProps,\n    placement: finalPlacement,\n  } = usePopover(\n    {\n      popoverRef,\n      triggerRef,\n      offset: 12,\n      placement: optimalPlacement,\n      shouldFlip,\n      isNonModal,\n    },\n    state,\n  );\n\n  return (\n    <Overlay>\n      <div className={styles.popoverWrapper}>\n        <FocusScope restoreFocus contain={!allowTabOut} autoFocus={autoFocus}>\n          <div {...popoverProps} ref={popoverRef} className={styles.popover}>\n            <DismissButton onDismiss={state.close} />\n            {children}\n            {hasArrow && (\n              <div\n                {...arrowProps}\n                className={styles.arrow}\n                data-placement={finalPlacement}\n              />\n            )}\n          </div>\n        </FocusScope>\n      </div>\n    </Overlay>\n  );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","initialPlacement","optimalPlacement","setOptimalPlacement","React","useState","useEffect","updatePlacement","current","window","addEventListener","removeEventListener","popoverProps","arrowProps","finalPlacement","usePopover","offset","jsx","Overlay","className","styles","FocusScope","restoreFocus","contain","ref","DismissButton","onDismiss","close"],"mappings":"+SAyBMA,EAAuE,CAC3EC,IAAK,MACLC,MAAO,QACPC,OAAQ,SACRC,KAAM,QA2DKC,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MAGpCC,EACJP,GAAaX,EAA0BQ,IAClCW,EAAkBC,GACvBC,EAAMC,SAAwBJ,GAEhCK,EAAU,KACR,MAAMC,EAAkB,KACjBR,EAAWS,SAAYhB,EAAWgB,SAIvCL,EAAoBF,IAKtB,OAFAM,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,IAAME,OAAOE,oBAAoB,SAAUJ,IACjD,CAACN,EAAkBT,IAEtB,MAAMoB,aACJA,EAAAC,WACAA,EACAnB,UAAWoB,GACTC,EACF,CACEhB,aACAP,aACAwB,OAAQ,GACRtB,UAAWQ,EACXP,aACAC,cAEFN;AAGF,OACE2B,EAACC,GACC7B,wBAAA4B,EAAC,MAAA,CAAIE,UAAWC,EACd/B,wBAAA4B,EAACI,EAAA,CAAWC,cAAY,EAACC,SAAU1B,EAAaC,YAC9CT,0BAAC,MAAA,IAAQuB,EAAcY,IAAKzB,EAAYoB,UAAWC,EACjD/B,SAAA;iBAACoC,EAAA,CAAcC,UAAWpC,EAAMqC,QAC/BtC,EACAI,kBACCwB,EAAC,MAAA,IACKJ,EACJM,UAAWC,EACX,iBAAgBN"}

package/dist/components/ProductTile/ProductTile.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { BoxLinkProps } from '../BoxLink';
+import { BoxProps } from '../Box';
+export interface ProductTileProps {
+    /**
+     * Destination URL for the tile.
+     */
+    href: NonNullable<BoxLinkProps['href']>;
+    /**
+     * The target attribute for the link.
+     * @default '_self'
+     */
+    target?: BoxLinkProps['target'];
+    /**
+     * Leading media content.
+     */
+    media: React.ReactNode;
+    /**
+     * Main title content.
+     */
+    title: string;
+    /**
+     * The width of the Box.
+     * Accepts any valid CSS unit or "full"
+     * @default '390px'
+     */
+    width?: BoxProps['width'];
+    /**
+     * **[Responsive]** The maximum width of the Box.
+     * Accepts any valid CSS unit or "pageWidth" to use the `section-container-max-width` token.
+     * @default '390px'
+     */
+    maxWidth?: BoxProps['maxWidth'];
+    /**
+     * Optional supporting text.
+     */
+    description?: string;
+    /**
+     * Optional details subcomponent content, such as `ProductTile.Details`.
+     */
+    children?: React.ReactNode;
+}
+export interface ProductTileDetailsProps {
+    /** Content rendered inside the ProductTile details area. */
+    children: React.ReactNode;
+}
+interface ProductTileComponent extends React.ForwardRefExoticComponent<ProductTileProps & React.RefAttributes<HTMLAnchorElement>> {
+    Details: React.FC<ProductTileDetailsProps>;
+}
+export declare const ProductTile: ProductTileComponent;
+export default ProductTile;

package/dist/components/ProductTile/ProductTile.js

@@ -0,0 +1,7 @@
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o}from"../Box/Box.js";import{BoxLink as r}from"../BoxLink/BoxLink.js";import"../BoxLink/BoxLinkContext.js";import{Paragraph as c}from"../Paragraph/Paragraph.js";import{Icon as n}from"../Icon/Icon.js";import '../../assets/ProductTile.css';const d={"product-tile":"_product-tile_zcaft_1","product-tile__media":"_product-tile__media_zcaft_6","product-tile__content":"_product-tile__content_zcaft_12","product-tile__content-details":"_product-tile__content-details_zcaft_19","product-tile__content-icon":"_product-tile__content-icon_zcaft_26","product-tile__content-title":"_product-tile__content-title_zcaft_38"},a=({children:e})=>/* @__PURE__ */t("div",{className:d["product-tile__content-details"],children:e}),l=i(function({href:i,target:a,media:l,title:_,width:s="390px",maxWidth:p="390px",description:m,children:u},h){/* @__PURE__ */
+return t(r,{href:i,target:a,styleVariant:"default",ref:h,children:/* @__PURE__ */t("div",{className:d["product-tile"],children:/* @__PURE__ */e(o,{paddingTop:"xs",paddingBottom:"xs",paddingLeft:"xs",paddingRight:"sm",backgroundColor:"layer2",borderRadius:"sm",display:"flex",flexDirection:"row",gap:"xs",width:s,maxWidth:p,alignItems:"center",justifyContent:"spaceBetween",children:[
+/* @__PURE__ */t("div",{className:d["product-tile__media"],children:l}),
+/* @__PURE__ */e("div",{className:d["product-tile__content"],children:[
+/* @__PURE__ */t("div",{className:d["product-tile__content-title"],children:/* @__PURE__ */t(c,{foregroundColor:"accentSecondary",size:"md",children:/* @__PURE__ */t("strong",{children:_})})}),m&&/* @__PURE__ */t("div",{className:d["product-tile__content-description"],children:/* @__PURE__ */t(c,{foregroundColor:"secondary",size:"sm",children:m})}),u]}),
+/* @__PURE__ */t("div",{className:d["product-tile__content-icon"],children:/* @__PURE__ */t(n,{iconName:"circle-arrow-right",iconSize:"1.5x",padding:"none",color:"accentSecondary",pull:"right"})})]})})})});l.Details=a,a.displayName="ProductTile.Details";export{l as ProductTile,l as default};
+//# sourceMappingURL=ProductTile.js.map

package/dist/components/ProductTile/ProductTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProductTile.js","sources":["../../../src/components/ProductTile/ProductTile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styles from './ProductTile.module.css';\nimport Box from '../Box';\nimport BoxLink from '../BoxLink';\nimport type { BoxLinkProps } from '../BoxLink';\nimport type { BoxProps } from '../Box';\nimport Paragraph from '../Paragraph';\nimport Icon from '../Icon';\n\nexport interface ProductTileProps {\n  /**\n   * Destination URL for the tile.\n   */\n  href: NonNullable<BoxLinkProps['href']>;\n  /**\n   * The target attribute for the link.\n   * @default '_self'\n   */\n  target?: BoxLinkProps['target'];\n  /**\n   * Leading media content.\n   */\n  media: React.ReactNode;\n  /**\n   * Main title content.\n   */\n  title: string;\n  /**\n   * The width of the Box.\n   * Accepts any valid CSS unit or \"full\"\n   * @default '390px'\n   */\n  width?: BoxProps['width'];\n  /**\n   * **[Responsive]** The maximum width of the Box.\n   * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n   * @default '390px'\n   */\n  maxWidth?: BoxProps['maxWidth'];\n  /**\n   * Optional supporting text.\n   */\n  description?: string;\n  /**\n   * Optional details subcomponent content, such as `ProductTile.Details`.\n   */\n  children?: React.ReactNode;\n}\n\nexport interface ProductTileDetailsProps {\n  /** Content rendered inside the ProductTile details area. */\n  children: React.ReactNode;\n}\n\ninterface ProductTileComponent\n  extends React.ForwardRefExoticComponent<\n    ProductTileProps & React.RefAttributes<HTMLAnchorElement>\n  > {\n  Details: React.FC<ProductTileDetailsProps>;\n}\n\nconst Details = ({ children }: ProductTileDetailsProps) => (\n  <div className={styles['product-tile__content-details']}>{children}</div>\n);\n\nexport const ProductTile = forwardRef<HTMLAnchorElement, ProductTileProps>(\n  function ProductTile(\n    {\n      href,\n      target,\n      media,\n      title,\n      width = '390px',\n      maxWidth = '390px',\n      description,\n      children,\n    },\n    ref,\n  ) {\n    return (\n      <BoxLink href={href} target={target} styleVariant=\"default\" ref={ref}>\n        <div className={styles['product-tile']}>\n          <Box\n            paddingTop=\"xs\"\n            paddingBottom=\"xs\"\n            paddingLeft=\"xs\"\n            paddingRight=\"sm\"\n            backgroundColor=\"layer2\"\n            borderRadius=\"sm\"\n            display=\"flex\"\n            flexDirection=\"row\"\n            gap=\"xs\"\n            width={width}\n            maxWidth={maxWidth}\n            alignItems=\"center\"\n            justifyContent=\"spaceBetween\"\n          >\n            <div className={styles['product-tile__media']}>{media}</div>\n            <div className={styles['product-tile__content']}>\n              <div className={styles['product-tile__content-title']}>\n                <Paragraph foregroundColor=\"accentSecondary\" size=\"md\">\n                  <strong>{title}</strong>\n                </Paragraph>\n              </div>\n              {description && (\n                <div className={styles['product-tile__content-description']}>\n                  <Paragraph foregroundColor=\"secondary\" size=\"sm\">\n                    {description}\n                  </Paragraph>\n                </div>\n              )}\n              {children}\n            </div>\n            <div className={styles['product-tile__content-icon']}>\n              <Icon\n                iconName=\"circle-arrow-right\"\n                iconSize=\"1.5x\"\n                padding=\"none\"\n                color=\"accentSecondary\"\n                pull=\"right\"\n              />\n            </div>\n          </Box>\n        </div>\n      </BoxLink>\n    );\n  },\n) as ProductTileComponent;\n\nProductTile.Details = Details;\nDetails.displayName = 'ProductTile.Details';\n\nexport default ProductTile;\n"],"names":["Details","children","jsx","className","styles","ProductTile","forwardRef","href","target","media","title","width","maxWidth","description","ref","BoxLink","styleVariant","jsxs","Box","paddingTop","paddingBottom","paddingLeft","paddingRight","backgroundColor","borderRadius","display","flexDirection","gap","alignItems","justifyContent","Paragraph","foregroundColor","size","Icon","iconName","iconSize","padding","color","pull","displayName"],"mappings":"+pBA6DMA,EAAU,EAAGC,6BACjBC,EAAC,MAAA,CAAIC,UAAWC,EAAO,iCAAmCH,aAG/CI,EAAcC,EACzB,UACEC,KACEA,EAAAC,OACAA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,MACAA,EAAQ,QAAAC,SACRA,EAAW,QAAAC,YACXA,EAAAZ,SACAA,GAEFa;AAEA,SACGC,EAAA,CAAQR,OAAYC,SAAgBQ,aAAa,UAAUF,MAC1Db,wBAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,gBACrBH,wBAAAgB,EAACC,EAAA,CACCC,WAAW,KACXC,cAAc,KACdC,YAAY,KACZC,aAAa,KACbC,gBAAgB,SAChBC,aAAa,KACbC,QAAQ,OACRC,cAAc,MACdC,IAAI,KACJhB,QACAC,WACAgB,WAAW,SACXC,eAAe,eAEf5B,SAAA;eAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,uBAAyBH,SAAAQ;iBAC/C,MAAA,CAAIN,UAAWC,EAAO,yBACrBH,SAAA;eAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,+BACrBH,wBAAAC,EAAC4B,EAAA,CAAUC,gBAAgB,kBAAkBC,KAAK,KAChD/B,wBAAAC,EAAC,SAAA,CAAQD,SAAAS,QAGZG,oBACE,MAAA,CAAIV,UAAWC,EAAO,qCACrBH,wBAAAC,EAAC4B,EAAA,CAAUC,gBAAgB,YAAYC,KAAK,KACzC/B,eAINA;iBAEF,MAAA,CAAIE,UAAWC,EAAO,8BACrBH,wBAAAC,EAAC+B,EAAA,CACCC,SAAS,qBACTC,SAAS,OACTC,QAAQ,OACRC,MAAM,kBACNC,KAAK,kBAOnB,GAGFjC,EAAYL,QAAUA,EACtBA,EAAQuC,YAAc"}

package/dist/components/ProductTile/index.d.ts

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

package/dist/components/ProductTile/index.js

@@ -0,0 +1,2 @@
+import{ProductTile as o}from"./ProductTile.js";export{o as default};
+//# sourceMappingURL=index.js.map

package/dist/components/ProductTile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Radio/Radio.d.ts

@@ -20,5 +20,5 @@ export interface RadioProps extends FocusableProps {
      */
     focusStyle?: 'default' | 'white';
 }
-export declare const Radio: ({ value, children, isDisabled, focusStyle, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Radio: import('react').ForwardRefExoticComponent<RadioProps & import('react').RefAttributes<HTMLLabelElement>>;
 export default Radio;

package/dist/components/Radio/Radio.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{Radio as e}from"react-aria-components";import{c as s}from"../../index-CCUt_dAN.js";import '../../assets/Radio.css';const t=s("_radio_s2boa_1",{variants:{focusStyle:{default:"_defaultFocus_s2boa_44",white:"_whiteFocus_s2boa_48"}},defaultVariants:{focusStyle:"default"}}),o=({value:s,children:o,isDisabled:i=!1,focusStyle:l="default",...r})=>/* @__PURE__ */a(e,{className:t({focusStyle:l}),value:s,isDisabled:i,...r,children:o});export{o as Radio,o as default};
+import{jsx as a}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Radio as s}from"react-aria-components";import{c as t}from"../../index-CCUt_dAN.js";import '../../assets/Radio.css';const o=t("_radio_s2boa_1",{variants:{focusStyle:{default:"_defaultFocus_s2boa_44",white:"_whiteFocus_s2boa_48"}},defaultVariants:{focusStyle:"default"}}),i=e(({value:e,children:t,isDisabled:i=!1,focusStyle:r="default",...l},c)=>/* @__PURE__ */a(s,{ref:c,className:o({focusStyle:r}),value:e,isDisabled:i,...l,children:t}));i.displayName="Radio";export{i as Radio,i as default};
 //# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { FocusableProps } from '@react-types/shared';\nimport { ReactNode } from 'react';\nimport { Radio as AriaRadio } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport styles from './Radio.module.css';\n\nconst radio = cva(styles.radio, {\n  variants: {\n    focusStyle: {\n      default: styles.defaultFocus,\n      white: styles.whiteFocus,\n    },\n  },\n  defaultVariants: {\n    focusStyle: 'default',\n  },\n});\n\nexport interface RadioProps extends FocusableProps {\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value: string;\n  /**\n   * The label for the Radio. Accepts any renderable node.\n   */\n  children?: ReactNode;\n  /**\n   * Whether the radio button is disabled or not.\n   * Shows that a selection exists, but is not available in that circumstance.\n   */\n  isDisabled?: boolean;\n  /**\n   * \tThe focus style of the button\n   */\n  focusStyle?: 'default' | 'white';\n}\n\nexport const Radio = ({\n  value,\n  children,\n  isDisabled = false,\n  focusStyle = 'default',\n  ...props\n}: RadioProps) => {\n  return (\n    <AriaRadio\n      className={radio({ focusStyle })}\n      value={value}\n      isDisabled={isDisabled}\n      {...props}\n    >\n      {children}\n    </AriaRadio>\n  );\n};\n\nexport default Radio;\n"],"names":["radio","cva","variants","focusStyle","default","white","defaultVariants","Radio","value","children","isDisabled","props","jsx","AriaRadio","className"],"mappings":"wIAOMA,EAAQC,mBAAkB,CAC9BC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAyBHI,EAAQ,EACnBC,QACAC,WACAC,cAAa,EACbP,aAAa,aACVQ,oBAGDC,EAACC,EAAA,CACCC,UAAWd,EAAM,CAAEG,eACnBK,QACAE,gBACIC,EAEHF"}
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { FocusableProps } from '@react-types/shared';\nimport { forwardRef, ReactNode } from 'react';\nimport { Radio as AriaRadio } from 'react-aria-components';\nimport { cva } from 'class-variance-authority';\n\nimport styles from './Radio.module.css';\n\nconst radio = cva(styles.radio, {\n  variants: {\n    focusStyle: {\n      default: styles.defaultFocus,\n      white: styles.whiteFocus,\n    },\n  },\n  defaultVariants: {\n    focusStyle: 'default',\n  },\n});\n\nexport interface RadioProps extends FocusableProps {\n  /**\n   * The value of the radio button, used when submitting an HTML form.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).\n   */\n  value: string;\n  /**\n   * The label for the Radio. Accepts any renderable node.\n   */\n  children?: ReactNode;\n  /**\n   * Whether the radio button is disabled or not.\n   * Shows that a selection exists, but is not available in that circumstance.\n   */\n  isDisabled?: boolean;\n  /**\n   * \tThe focus style of the button\n   */\n  focusStyle?: 'default' | 'white';\n}\n\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>(\n  (\n    { value, children, isDisabled = false, focusStyle = 'default', ...props },\n    forwardedRef,\n  ) => {\n    return (\n      <AriaRadio\n        ref={forwardedRef}\n        className={radio({ focusStyle })}\n        value={value}\n        isDisabled={isDisabled}\n        {...props}\n      >\n        {children}\n      </AriaRadio>\n    );\n  },\n);\nRadio.displayName = 'Radio';\n\nexport default Radio;\n"],"names":["radio","cva","variants","focusStyle","default","white","defaultVariants","Radio","forwardRef","value","children","isDisabled","props","forwardedRef","jsx","AriaRadio","ref","className","displayName"],"mappings":"2KAOMA,EAAQC,mBAAkB,CAC9BC,SAAU,CACRC,WAAY,CACVC,iCACAC,+BAGJC,gBAAiB,CACfH,WAAY,aAyBHI,EAAQC,EACnB,EACIC,QAAOC,WAAUC,cAAa,EAAOR,aAAa,aAAcS,GAClEC,mBAGEC,EAACC,EAAA,CACCC,IAAKH,EACLI,UAAWjB,EAAM,CAAEG,eACnBM,QACAE,gBACIC,EAEHF,cAKTH,EAAMW,YAAc"}

package/dist/components/SearchField/SearchField.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { FieldProps } from '../_base/Field';
 import { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';
 export interface SearchFieldProps extends FieldProps<AriaTextFieldProps> {
@@ -10,5 +11,5 @@ export interface SearchFieldProps extends FieldProps<AriaTextFieldProps> {
      */
     placeholder?: string;
 }
-export declare const SearchField: ({ clearLabel, placeholder, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
 export default SearchField;

package/dist/components/SearchField/SearchField.js

@@ -1,5 +1,5 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import r,{useRef as o,useState as i}from"react";import{Field as l}from"../_base/Field/Field.js";import{TextField as t,Group as n,Input as s}from"react-aria-components";import{IconButton as c}from"../IconButton/IconButton.js";import{Icon as m}from"../Icon/Icon.js";import '../../assets/SearchField.css';const d="_searchField_1u7yl_1",u="_iconStart_1u7yl_82",p=({clearLabel:p="Delete search",placeholder:f,...h})=>{const b=o(null),[v,_]=i(h?.defaultValue),x=h?.value??v,y=r.useCallback(e=>{_(e),h?.onChange?.(e)},[h?.onChange]),C=r.useCallback(()=>{y(""),b?.current?.focus()},[y]),g=p;/* @__PURE__ */
-return e("div",{className:d,children:/* @__PURE__ */e(l,{as:t,...h,children:/* @__PURE__ */a(n,{onClick:()=>b?.current?.focus(),children:[
-/* @__PURE__ */e(m,{iconSize:"1x",padding:"roomy",iconName:"search",className:u}),
-/* @__PURE__ */e(s,{type:"text",value:x,onChange:e=>y(e.target.value),ref:b,placeholder:f,...h?.isInvalid?{"data-invalid":!0}:{}}),!!x&&/* @__PURE__ */e(c,{size:"sm",iconProps:{iconName:"xmark",iconPrefix:"fas"},onPress:h?.isDisabled?void 0:C,isDisabled:h?.isDisabled,styleVariant:"neutral",emphasis:"tertiary","aria-label":g,tooltipLabel:g})]})})})};export{p as SearchField,p as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import r,{forwardRef as i,useState as o}from"react";import{Field as l}from"../_base/Field/Field.js";import{TextField as t,Group as s,Input as c}from"react-aria-components";import{IconButton as n}from"../IconButton/IconButton.js";import{Icon as m}from"../Icon/Icon.js";import{useObjectRef as d}from"@react-aria/utils";import '../../assets/SearchField.css';const u="_searchField_1u7yl_1",p="_iconStart_1u7yl_82",f=i(({clearLabel:i="Delete search",placeholder:f,...h},b)=>{const v=d(b),[y,_]=o(h?.defaultValue),x=h?.value??y,C=r.useCallback(e=>{_(e),h?.onChange?.(e)},[h?.onChange]),g=r.useCallback(()=>{C(""),v?.current?.focus()},[C]),I=i;/* @__PURE__ */
+return e("div",{className:u,children:/* @__PURE__ */e(l,{as:t,...h,children:/* @__PURE__ */a(s,{onClick:()=>v?.current?.focus(),children:[
+/* @__PURE__ */e(m,{iconSize:"1x",padding:"roomy",iconName:"search",className:p}),
+/* @__PURE__ */e(c,{type:"text",value:x,onChange:e=>C(e.target.value),ref:v,placeholder:f,...h?.isInvalid?{"data-invalid":!0}:{}}),!!x&&/* @__PURE__ */e(n,{size:"sm",iconProps:{iconName:"xmark",iconPrefix:"fas"},onPress:h?.isDisabled?void 0:g,isDisabled:h?.isDisabled,styleVariant:"neutral",emphasis:"tertiary","aria-label":I,tooltipLabel:I})]})})})});f.displayName="SearchField";export{f as SearchField,f as default};
 //# sourceMappingURL=SearchField.js.map

package/dist/components/SearchField/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport styles from './SearchField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\nimport type { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';\nimport {\n  TextField as AriaTextField,\n  Input,\n  Group,\n} from 'react-aria-components';\nimport IconButton from '../IconButton';\nimport Icon from '../Icon/Icon';\n\nexport interface SearchFieldProps extends FieldProps<AriaTextFieldProps> {\n  /**\n   * Label for clear button\n   */\n  clearLabel?: string;\n  /**\n   * Placeholder for the search field\n   */\n  placeholder?: string;\n}\n\nexport const SearchField = ({\n  clearLabel = 'Delete search',\n  placeholder,\n  ...props\n}: SearchFieldProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [internalValue, setInternalValue] = useState(props?.defaultValue);\n  const value = props?.value ?? internalValue;\n\n  const setValue = React.useCallback(\n    (nextValue: string) => {\n      setInternalValue(nextValue);\n      props?.onChange?.(nextValue);\n    },\n    [props?.onChange],\n  );\n\n  const handleClear = React.useCallback(() => {\n    setValue('');\n    inputRef?.current?.focus();\n  }, [setValue]);\n\n  const tooltipLabel = clearLabel;\n  return (\n    <div className={styles.searchField}>\n      <Field<AriaTextFieldProps> as={AriaTextField} {...props}>\n        <Group onClick={() => inputRef?.current?.focus()}>\n          <Icon\n            iconSize=\"1x\"\n            padding=\"roomy\"\n            iconName=\"search\"\n            className={styles.iconStart}\n          />\n          <Input\n            type=\"text\"\n            value={value}\n            onChange={(e) => setValue(e.target.value)}\n            ref={inputRef}\n            placeholder={placeholder}\n            {...(props?.isInvalid ? { 'data-invalid': true } : {})}\n          />\n          {!!value && (\n            <IconButton\n              size=\"sm\"\n              iconProps={{ iconName: 'xmark', iconPrefix: 'fas' }}\n              onPress={props?.isDisabled ? undefined : handleClear}\n              isDisabled={props?.isDisabled}\n              styleVariant=\"neutral\"\n              emphasis=\"tertiary\"\n              aria-label={tooltipLabel}\n              tooltipLabel={tooltipLabel}\n            />\n          )}\n        </Group>\n      </Field>\n    </div>\n  );\n};\n\nexport default SearchField;\n"],"names":["SearchField","clearLabel","placeholder","props","inputRef","useRef","internalValue","setInternalValue","useState","defaultValue","value","setValue","React","useCallback","nextValue","onChange","handleClear","current","focus","tooltipLabel","className","styles","children","jsx","Field","as","AriaTextField","Group","onClick","Icon","iconSize","padding","iconName","Input","type","e","target","ref","isInvalid","IconButton","size","iconProps","iconPrefix","onPress","isDisabled","styleVariant","emphasis"],"mappings":"iXAuBaA,EAAc,EACzBC,aAAa,gBACbC,iBACGC,MAEH,MAAMC,EAAWC,EAAyB,OACnCC,EAAeC,GAAoBC,EAASL,GAAOM,cACpDC,EAAQP,GAAOO,OAASJ,EAExBK,EAAWC,EAAMC,YACpBC,IACCP,EAAiBO,GACjBX,GAAOY,WAAWD,IAEpB,CAACX,GAAOY,WAGJC,EAAcJ,EAAMC,YAAY,KACpCF,EAAS,IACTP,GAAUa,SAASC,SAClB,CAACP,IAEEQ,EAAelB;AACrB,SACG,MAAA,CAAImB,UAAWC,EACdC,wBAAAC,EAACC,GAA0BC,GAAIC,KAAmBvB,EAChDmB,0BAACK,EAAA,CAAMC,QAAS,IAAMxB,GAAUa,SAASC,QACvCI,SAAA;eAAAC,EAACM,EAAA,CACCC,SAAS,KACTC,QAAQ,QACRC,SAAS,SACTZ,UAAWC;eAEbE,EAACU,EAAA,CACCC,KAAK,OACLxB,QACAK,SAAWoB,GAAMxB,EAASwB,EAAEC,OAAO1B,OACnC2B,IAAKjC,EACLF,iBACKC,GAAOmC,UAAY,CAAE,gBAAgB,GAAS,CAAA,MAElD5B,kBACDa,EAACgB,EAAA,CACCC,KAAK,KACLC,UAAW,CAAET,SAAU,QAASU,WAAY,OAC5CC,QAASxC,GAAOyC,gBAAa,EAAY5B,EACzC4B,WAAYzC,GAAOyC,WACnBC,aAAa,UACbC,SAAS,WACT,aAAY3B,EACZA"}
+{"version":3,"file":"SearchField.js","sources":["../../../src/components/SearchField/SearchField.tsx"],"sourcesContent":["import React, { forwardRef, useState } from 'react';\nimport styles from './SearchField.module.css';\nimport { Field, FieldProps } from '../_base/Field';\nimport type { TextFieldProps as AriaTextFieldProps } from 'react-aria-components';\nimport {\n  TextField as AriaTextField,\n  Input,\n  Group,\n} from 'react-aria-components';\nimport IconButton from '../IconButton';\nimport Icon from '../Icon/Icon';\nimport { useObjectRef } from '@react-aria/utils';\n\nexport interface SearchFieldProps extends FieldProps<AriaTextFieldProps> {\n  /**\n   * Label for clear button\n   */\n  clearLabel?: string;\n  /**\n   * Placeholder for the search field\n   */\n  placeholder?: string;\n}\n\nexport const SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  ({ clearLabel = 'Delete search', placeholder, ...props }, forwardedRef) => {\n    const inputRef = useObjectRef(forwardedRef);\n    const [internalValue, setInternalValue] = useState(props?.defaultValue);\n    const value = props?.value ?? internalValue;\n\n    const setValue = React.useCallback(\n      (nextValue: string) => {\n        setInternalValue(nextValue);\n        props?.onChange?.(nextValue);\n      },\n      [props?.onChange],\n    );\n\n    const handleClear = React.useCallback(() => {\n      setValue('');\n      inputRef?.current?.focus();\n    }, [setValue]);\n\n    const tooltipLabel = clearLabel;\n    return (\n      <div className={styles.searchField}>\n        <Field<AriaTextFieldProps> as={AriaTextField} {...props}>\n          <Group onClick={() => inputRef?.current?.focus()}>\n            <Icon\n              iconSize=\"1x\"\n              padding=\"roomy\"\n              iconName=\"search\"\n              className={styles.iconStart}\n            />\n            <Input\n              type=\"text\"\n              value={value}\n              onChange={(e) => setValue(e.target.value)}\n              ref={inputRef}\n              placeholder={placeholder}\n              {...(props?.isInvalid ? { 'data-invalid': true } : {})}\n            />\n            {!!value && (\n              <IconButton\n                size=\"sm\"\n                iconProps={{ iconName: 'xmark', iconPrefix: 'fas' }}\n                onPress={props?.isDisabled ? undefined : handleClear}\n                isDisabled={props?.isDisabled}\n                styleVariant=\"neutral\"\n                emphasis=\"tertiary\"\n                aria-label={tooltipLabel}\n                tooltipLabel={tooltipLabel}\n              />\n            )}\n          </Group>\n        </Field>\n      </div>\n    );\n  },\n);\nSearchField.displayName = 'SearchField';\n\nexport default SearchField;\n"],"names":["SearchField","forwardRef","clearLabel","placeholder","props","forwardedRef","inputRef","useObjectRef","internalValue","setInternalValue","useState","defaultValue","value","setValue","React","useCallback","nextValue","onChange","handleClear","current","focus","tooltipLabel","className","styles","children","jsx","Field","as","AriaTextField","Group","onClick","Icon","iconSize","padding","iconName","Input","type","e","target","ref","isInvalid","IconButton","size","iconProps","iconPrefix","onPress","isDisabled","styleVariant","emphasis","displayName"],"mappings":"saAwBaA,EAAcC,EACzB,EAAGC,aAAa,gBAAiBC,iBAAgBC,GAASC,KACxD,MAAMC,EAAWC,EAAaF,IACvBG,EAAeC,GAAoBC,EAASN,GAAOO,cACpDC,EAAQR,GAAOQ,OAASJ,EAExBK,EAAWC,EAAMC,YACpBC,IACCP,EAAiBO,GACjBZ,GAAOa,WAAWD,IAEpB,CAACZ,GAAOa,WAGJC,EAAcJ,EAAMC,YAAY,KACpCF,EAAS,IACTP,GAAUa,SAASC,SAClB,CAACP,IAEEQ,EAAenB;AACrB,SACG,MAAA,CAAIoB,UAAWC,EACdC,wBAAAC,EAACC,GAA0BC,GAAIC,KAAmBxB,EAChDoB,0BAACK,EAAA,CAAMC,QAAS,IAAMxB,GAAUa,SAASC,QACvCI,SAAA;eAAAC,EAACM,EAAA,CACCC,SAAS,KACTC,QAAQ,QACRC,SAAS,SACTZ,UAAWC;eAEbE,EAACU,EAAA,CACCC,KAAK,OACLxB,QACAK,SAAWoB,GAAMxB,EAASwB,EAAEC,OAAO1B,OACnC2B,IAAKjC,EACLH,iBACKC,GAAOoC,UAAY,CAAE,gBAAgB,GAAS,CAAA,MAElD5B,kBACDa,EAACgB,EAAA,CACCC,KAAK,KACLC,UAAW,CAAET,SAAU,QAASU,WAAY,OAC5CC,QAASzC,GAAO0C,gBAAa,EAAY5B,EACzC4B,WAAY1C,GAAO0C,WACnBC,aAAa,UACbC,SAAS,WACT,aAAY3B,EACZA,0BAShBrB,EAAYiD,YAAc"}

package/dist/components/Section/Section.d.ts

@@ -47,6 +47,11 @@ export interface SectionBaseProps extends BackgroundVariants, SectionPadding, Pi
      * The class name of the section.
      */
     className?: string;
+    /**
+     * Test identifier for testing purposes.
+     * Defaults to "section" if not provided.
+     */
+    'data-testid'?: string;
 }
 type SectionResponsivePropKeys = 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'flexDirection' | 'justifyContent' | 'alignItems' | 'containerMaxWidth';
 export type SectionProps = WithResponsiveProps<SectionBaseProps, SectionResponsivePropKeys>;
@@ -75,7 +80,10 @@ export interface ContainerProps {
 }
 type ContainerResponsivePropKeys = 'containerMaxWidth' | 'flexDirection' | 'justifyContent' | 'alignItems';
 export type ContainerResponsiveProps = WithResponsiveProps<ContainerProps, ContainerResponsivePropKeys>;
-declare const Container: ({ children, className, containerMaxWidth, flexDirection, justifyContent, alignItems, }: ContainerResponsiveProps) => import("react/jsx-runtime").JSX.Element;
+declare const Container: {
+    ({ children, className, containerMaxWidth, flexDirection, justifyContent, alignItems, }: ContainerResponsiveProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 interface SectionComponent extends React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>> {
     Container: typeof Container;
 }

package/dist/components/Section/Section.js

@@ -1,4 +1,4 @@
-import{jsx as t}from"react/jsx-runtime";import d,{forwardRef as i}from"react";import{backgroundColorVariants as a}from"../../utils/backgroundColor/backgroundColor.js";import{p as n,a as e}from"../../padding-nClUzhWp.js";import{c as l}from"../../index-CCUt_dAN.js";import{f as o,a as r}from"../../flex-BJOhaXnU.js";import{getBaseValueOrUndefined as f,generateResponsiveClasses as p}from"../../utils/breakpoint/responsiveSSR.js";import '../../assets/Section.css';const g={section:"_section_1vbrj_1",container:"_container_1vbrj_8","container--max-width-page":"_container--max-width-page_1vbrj_16","container--max-width-full-width":"_container--max-width-full-width_1vbrj_20","sm:container--max-width-page":"_sm:container--max-width-page_1vbrj_1","sm:container--max-width-full-width":"_sm:container--max-width-full-width_1vbrj_1","md:container--max-width-page":"_md:container--max-width-page_1vbrj_1","md:container--max-width-full-width":"_md:container--max-width-full-width_1vbrj_1","lg:container--max-width-page":"_lg:container--max-width-page_1vbrj_1","lg:container--max-width-full-width":"_lg:container--max-width-full-width_1vbrj_1","xl:container--max-width-page":"_xl:container--max-width-page_1vbrj_1","xl:container--max-width-full-width":"_xl:container--max-width-full-width_1vbrj_1","xxl:container--max-width-page":"_xxl:container--max-width-page_1vbrj_1","xxl:container--max-width-full-width":"_xxl:container--max-width-full-width_1vbrj_1","padding-X--default":"_padding-X--default_1vbrj_35","padding-Y--default":"_padding-Y--default_1vbrj_40","padding-top--default":"_padding-top--default_1vbrj_45","padding-right--default":"_padding-right--default_1vbrj_49","padding-bottom--default":"_padding-bottom--default_1vbrj_53","padding-left--default":"_padding-left--default_1vbrj_57"},u=p(g),m=p(e),c=p(r),s=l("",{variants:{paddingX:{default:g["padding-X--default"]},paddingY:{default:g["padding-Y--default"]},paddingTop:{default:g["padding-top--default"]},paddingRight:{default:g["padding-right--default"]},paddingBottom:{default:g["padding-bottom--default"]},paddingLeft:{default:g["padding-left--default"]}}}),h=l("",{variants:{containerMaxWidth:{"full-width":g["container--max-width-full-width"],page:g["container--max-width-page"]}}}),x=({children:d,className:i,containerMaxWidth:a="page",flexDirection:n,justifyContent:e,alignItems:l})=>{const r=f(a)??"page",p=f(n),m=f(e),s=f(l),x=u(a,"container--max-width"),_=c(n,"flex--direction"),w=c(e,"flex--justify-content"),v=c(l,"flex--align-items"),j="full-width"===r?g.fullWidth:g.pageWidth;/* @__PURE__ */
-return t("div",{className:[h({containerMaxWidth:r}),g.container,j,...x,o({display:p||m||l?"flex":void 0,flexDirection:p,justifyContent:m,alignItems:s}),..._,...w,...v,i||""].filter(Boolean).join(" "),children:d})},_=i(({children:i,containerMaxWidth:e="page",backgroundColor:l,paddingTop:r,paddingBottom:p,paddingLeft:u,paddingRight:h,paddingX:_,paddingY:w="default",style:v,className:j,flexDirection:b,justifyContent:y,alignItems:C},W)=>{const X=f(r),Y=f(p),B=f(u),D=f(h),I=f(_),M=f(w),k=f(b),N=f(y),R=f(C),L=m(r,"padding--top"),T=m(_,"padding--x"),S=m(w,"padding--y"),E=m(p,"padding--bottom"),V=m(u,"padding--left"),q=m(h,"padding--right"),z=c(b,"flex--direction"),A=c(y,"flex--justify-content"),F=c(C,"flex--align-items"),G=null!=r,H=null!=p,J=null!=u,K=null!=h;/* @__PURE__ */
-return t("section",{ref:W,className:[g.section,n({paddingTop:"default"!==X?X:void 0,paddingBottom:"default"!==Y?Y:void 0,paddingLeft:"default"!==B?B:void 0,paddingRight:"default"!==D?D:void 0,paddingX:"default"!==I?I:void 0,paddingY:"default"!==M?M:void 0}),s({paddingTop:"default"===X?"default":void 0,paddingBottom:"default"===Y?"default":void 0,paddingLeft:"default"===B?"default":void 0,paddingRight:"default"===D?"default":void 0,paddingX:"default"!==I||J||K?void 0:"default",paddingY:"default"!==M||G||H?void 0:"default"}),a({backgroundColor:l}),o({flexDirection:k,justifyContent:N,alignItems:R}),...L,...q,...E,...V,...T,...S,...z,...A,...F,j].filter(Boolean).join(" "),style:v,"data-testid":"section",children:d.Children.map(i,t=>d.isValidElement(t)&&t.type===x?d.cloneElement(t,{...t.props,containerMaxWidth:t.props.containerMaxWidth??e,flexDirection:t.props.flexDirection??b,justifyContent:t.props.justifyContent??y,alignItems:t.props.alignItems??C}):t)})});_.displayName="Section",_.Container=x;export{_ as default};
+import{jsx as t}from"react/jsx-runtime";import a,{forwardRef as i}from"react";import{backgroundColorVariants as d}from"../../utils/backgroundColor/backgroundColor.js";import{p as n,a as e}from"../../padding-nClUzhWp.js";import{c as l}from"../../index-CCUt_dAN.js";import{f as o,a as r}from"../../flex-BfhdHBb6.js";import{getBaseValueOrUndefined as f,generateResponsiveClasses as p}from"../../utils/breakpoint/responsiveSSR.js";import '../../assets/Section.css';const g={section:"_section_1vbrj_1",container:"_container_1vbrj_8","container--max-width-page":"_container--max-width-page_1vbrj_16","container--max-width-full-width":"_container--max-width-full-width_1vbrj_20","sm:container--max-width-page":"_sm:container--max-width-page_1vbrj_1","sm:container--max-width-full-width":"_sm:container--max-width-full-width_1vbrj_1","md:container--max-width-page":"_md:container--max-width-page_1vbrj_1","md:container--max-width-full-width":"_md:container--max-width-full-width_1vbrj_1","lg:container--max-width-page":"_lg:container--max-width-page_1vbrj_1","lg:container--max-width-full-width":"_lg:container--max-width-full-width_1vbrj_1","xl:container--max-width-page":"_xl:container--max-width-page_1vbrj_1","xl:container--max-width-full-width":"_xl:container--max-width-full-width_1vbrj_1","xxl:container--max-width-page":"_xxl:container--max-width-page_1vbrj_1","xxl:container--max-width-full-width":"_xxl:container--max-width-full-width_1vbrj_1","padding-X--default":"_padding-X--default_1vbrj_35","padding-Y--default":"_padding-Y--default_1vbrj_40","padding-top--default":"_padding-top--default_1vbrj_45","padding-right--default":"_padding-right--default_1vbrj_49","padding-bottom--default":"_padding-bottom--default_1vbrj_53","padding-left--default":"_padding-left--default_1vbrj_57"},u=p(g),m=p(e),c=p(r),s=l("",{variants:{paddingX:{default:g["padding-X--default"]},paddingY:{default:g["padding-Y--default"]},paddingTop:{default:g["padding-top--default"]},paddingRight:{default:g["padding-right--default"]},paddingBottom:{default:g["padding-bottom--default"]},paddingLeft:{default:g["padding-left--default"]}}}),h=l("",{variants:{containerMaxWidth:{"full-width":g["container--max-width-full-width"],page:g["container--max-width-page"]}}}),x=({children:a,className:i,containerMaxWidth:d="page",flexDirection:n,justifyContent:e,alignItems:l})=>{const r=f(d)??"page",p=f(n),m=f(e),s=f(l),x=u(d,"container--max-width"),_=c(n,"flex--direction"),w=c(e,"flex--justify-content"),v=c(l,"flex--align-items"),j="full-width"===r?g.fullWidth:g.pageWidth;/* @__PURE__ */
+return t("div",{className:[h({containerMaxWidth:r}),g.container,j,...x,o({display:p||m||l?"flex":void 0,flexDirection:p,justifyContent:m,alignItems:s}),..._,...w,...v,i||""].filter(Boolean).join(" "),children:a})},_=i(({children:i,containerMaxWidth:e="page",backgroundColor:l,paddingTop:r,paddingBottom:p,paddingLeft:u,paddingRight:h,paddingX:_,paddingY:w="default",style:v,className:j,flexDirection:b,justifyContent:y,alignItems:C,"data-testid":W="section"},X)=>{const Y=f(r),B=f(p),D=f(u),I=f(h),M=f(_),N=f(w),k=f(b),R=f(y),L=f(C),S=m(r,"padding--top"),T=m(_,"padding--x"),E=m(w,"padding--y"),V=m(p,"padding--bottom"),q=m(u,"padding--left"),z=m(h,"padding--right"),A=c(b,"flex--direction"),F=c(y,"flex--justify-content"),G=c(C,"flex--align-items"),H=null!=r,J=null!=p,K=null!=u,O=null!=h;/* @__PURE__ */
+return t("section",{ref:X,className:[g.section,n({paddingTop:"default"!==Y?Y:void 0,paddingBottom:"default"!==B?B:void 0,paddingLeft:"default"!==D?D:void 0,paddingRight:"default"!==I?I:void 0,paddingX:"default"!==M?M:void 0,paddingY:"default"!==N?N:void 0}),s({paddingTop:"default"===Y?"default":void 0,paddingBottom:"default"===B?"default":void 0,paddingLeft:"default"===D?"default":void 0,paddingRight:"default"===I?"default":void 0,paddingX:"default"!==M||K||O?void 0:"default",paddingY:"default"!==N||H||J?void 0:"default"}),d({backgroundColor:l}),o({flexDirection:k,justifyContent:R,alignItems:L}),...S,...z,...V,...q,...T,...E,...A,...F,...G,j].filter(Boolean).join(" "),style:v,"data-testid":W,children:a.Children.map(i,t=>a.isValidElement(t)&&t.type===x?a.cloneElement(t,{...t.props,containerMaxWidth:t.props.containerMaxWidth??e,flexDirection:t.props.flexDirection??b,justifyContent:t.props.justifyContent??y,alignItems:t.props.alignItems??C}):t)})});_.displayName="Section",_.Container=x,x.displayName="Section.Container";export{_ as default};
 //# sourceMappingURL=Section.js.map

package/dist/components/Section/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../src/components/Section/Section.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  backgroundColorVariants,\n  type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n  paddingVariants,\n  type PaddingVariants,\n} from '../../utils/padding/padding';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport styles from './Section.module.css';\nimport { cva } from 'class-variance-authority';\nimport '../../utils/padding/padding.module.css';\nimport { flexVariants, type FlexVariants } from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport {\n  getBaseValueOrUndefined,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\n\nconst sectionPaddingVariants = cva('', {\n  variants: {\n    paddingX: {\n      default: styles['padding-X--default'],\n    },\n    paddingY: {\n      default: styles['padding-Y--default'],\n    },\n    paddingTop: {\n      default: styles['padding-top--default'],\n    },\n    paddingRight: {\n      default: styles['padding-right--default'],\n    },\n    paddingBottom: {\n      default: styles['padding-bottom--default'],\n    },\n    paddingLeft: {\n      default: styles['padding-left--default'],\n    },\n  },\n});\n\ntype SectionPaddingValue = 'default' | PaddingVariants['paddingX'];\nexport type SectionPadding = {\n  /**\n   * Controls both left and right padding of the section\n   */\n  paddingX?: SectionPaddingValue;\n  /**\n   * Controls both top and bottom padding of the section\n   */\n  paddingY?: SectionPaddingValue;\n  /**\n   * Controls the top padding of the section (overridden by paddingY)\n   */\n  paddingTop?: SectionPaddingValue;\n  /**\n   * Controls the right padding of the section (overridden by paddingX)\n   */\n  paddingRight?: SectionPaddingValue;\n  /**\n   * Controls the bottom padding of the section (overridden by paddingY)\n   */\n  paddingBottom?: SectionPaddingValue;\n  /**\n   * Controls the left padding of the section (overridden by paddingX)\n   */\n  paddingLeft?: SectionPaddingValue;\n};\n\n// TODO: remove containerMaxWidth from here in future breaking change and move to Container only\nexport interface SectionBaseProps\n  extends BackgroundVariants,\n    SectionPadding,\n    Pick<FlexVariants, 'flexDirection' | 'justifyContent' | 'alignItems'> {\n  /**\n   * The content of the section\n   */\n  children: React.ReactNode;\n  /**\n   * Controls the maximum width of the section container\n   */\n  containerMaxWidth?: 'full-width' | 'page';\n  /**\n   * The style of the section.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The class name of the section.\n   */\n  className?: string;\n}\n\ntype SectionResponsivePropKeys =\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingX'\n  | 'paddingY'\n  | 'flexDirection'\n  | 'justifyContent'\n  | 'alignItems'\n  | 'containerMaxWidth';\n\nexport type SectionProps = WithResponsiveProps<\n  SectionBaseProps,\n  SectionResponsivePropKeys\n>;\n\nconst sectionContainer = cva('', {\n  variants: {\n    containerMaxWidth: {\n      'full-width': styles['container--max-width-full-width'],\n      page: styles['container--max-width-page'],\n    },\n  },\n});\n\nexport interface ContainerProps {\n  children: React.ReactNode;\n  /**\n   * The class name of the container.\n   */\n  className?: string;\n  /**\n   * The maximum width of the container.\n   */\n  containerMaxWidth?: 'full-width' | 'page';\n  /**\n   * Direction of the flex container.\n   */\n  flexDirection?: FlexVariants['flexDirection'];\n  /**\n   * Alignment along the main axis.\n   */\n  justifyContent?: FlexVariants['justifyContent'];\n  /**\n   * Alignment along the cross axis.\n   */\n  alignItems?: FlexVariants['alignItems'];\n}\n\ntype ContainerResponsivePropKeys =\n  | 'containerMaxWidth'\n  | 'flexDirection'\n  | 'justifyContent'\n  | 'alignItems';\n\nexport type ContainerResponsiveProps = WithResponsiveProps<\n  ContainerProps,\n  ContainerResponsivePropKeys\n>;\n\nconst Container = ({\n  children,\n  className,\n  containerMaxWidth = 'page',\n  flexDirection,\n  justifyContent,\n  alignItems,\n}: ContainerResponsiveProps) => {\n  const baseContainerMaxWidth =\n    getBaseValueOrUndefined(containerMaxWidth) ?? 'page';\n  const baseFlexDirection = getBaseValueOrUndefined(flexDirection);\n  const baseJustifyContent = getBaseValueOrUndefined(justifyContent);\n  const baseAlignItems = getBaseValueOrUndefined(alignItems);\n  // Responsive classes for flex props\n  const containerMaxWidthResponsiveClasses = getResponsiveClasses(\n    containerMaxWidth,\n    'container--max-width',\n  );\n  const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n    flexDirection,\n    'flex--direction',\n  );\n  const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n    justifyContent,\n    'flex--justify-content',\n  );\n  const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n    alignItems,\n    'flex--align-items',\n  );\n\n  const widthClassName =\n    baseContainerMaxWidth === 'full-width'\n      ? styles.fullWidth\n      : styles.pageWidth;\n\n  return (\n    <div\n      className={[\n        sectionContainer({ containerMaxWidth: baseContainerMaxWidth }),\n        styles.container,\n        widthClassName,\n        ...containerMaxWidthResponsiveClasses,\n        flexVariants({\n          display:\n            baseFlexDirection || baseJustifyContent || alignItems\n              ? 'flex'\n              : undefined,\n          flexDirection: baseFlexDirection,\n          justifyContent: baseJustifyContent,\n          alignItems: baseAlignItems,\n        }),\n        ...flexDirectionResponsiveClasses,\n        ...justifyContentResponsiveClasses,\n        ...alignItemsResponsiveClasses,\n        className || '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface SectionComponent\n  extends React.ForwardRefExoticComponent<\n    SectionProps & React.RefAttributes<HTMLElement>\n  > {\n  Container: typeof Container;\n}\n\n// FIXME: Props are passed to container from section. Need to find a better way to handle this. Will be a breaking change.\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      children,\n      containerMaxWidth = 'page',\n      backgroundColor,\n      paddingTop,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingX,\n      paddingY = 'default',\n      style,\n      className,\n      flexDirection,\n      justifyContent,\n      alignItems,\n    },\n    ref,\n  ) => {\n    // Responsive base Props\n    const basePaddingTop = getBaseValueOrUndefined(paddingTop);\n    const basePaddingBottom = getBaseValueOrUndefined(paddingBottom);\n    const basePaddingLeft = getBaseValueOrUndefined(paddingLeft);\n    const basePaddingRight = getBaseValueOrUndefined(paddingRight);\n    const basePaddingX = getBaseValueOrUndefined(paddingX);\n    const basePaddingY = getBaseValueOrUndefined(paddingY);\n\n    const baseFlexDirection = getBaseValueOrUndefined(flexDirection);\n    const baseJustifyContent = getBaseValueOrUndefined(justifyContent);\n    const baseAlignItems = getBaseValueOrUndefined(alignItems);\n\n    // Responsive classes for padding props\n    const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n      paddingTop,\n      'padding--top',\n    );\n    const paddingXResponsiveClasses = getResponsiveClassesPadding(\n      paddingX,\n      'padding--x',\n    );\n    const paddingYResponsiveClasses = getResponsiveClassesPadding(\n      paddingY,\n      'padding--y',\n    );\n    const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n      paddingBottom,\n      'padding--bottom',\n    );\n    const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n      paddingLeft,\n      'padding--left',\n    );\n    const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n      paddingRight,\n      'padding--right',\n    );\n\n    // Responsive classes for flex props\n    const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n      flexDirection,\n      'flex--direction',\n    );\n    const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n      justifyContent,\n      'flex--justify-content',\n    );\n    const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n      alignItems,\n      'flex--align-items',\n    );\n\n    // To ensure that if any of the padding props are set, we don't apply the default padding class for paddingX and paddingY\n    const hasPaddingTop = paddingTop != null;\n    const hasPaddingBottom = paddingBottom != null;\n    const hasPaddingLeft = paddingLeft != null;\n    const hasPaddingRight = paddingRight != null;\n\n    return (\n      <section\n        ref={ref}\n        className={[\n          styles.section,\n          paddingVariants({\n            paddingTop:\n              basePaddingTop !== 'default' ? basePaddingTop : undefined,\n            paddingBottom:\n              basePaddingBottom !== 'default' ? basePaddingBottom : undefined,\n            paddingLeft:\n              basePaddingLeft !== 'default' ? basePaddingLeft : undefined,\n            paddingRight:\n              basePaddingRight !== 'default' ? basePaddingRight : undefined,\n            paddingX: basePaddingX !== 'default' ? basePaddingX : undefined,\n            paddingY: basePaddingY !== 'default' ? basePaddingY : undefined,\n          }),\n          sectionPaddingVariants({\n            paddingTop: basePaddingTop === 'default' ? 'default' : undefined,\n            paddingBottom:\n              basePaddingBottom === 'default' ? 'default' : undefined,\n            paddingLeft: basePaddingLeft === 'default' ? 'default' : undefined,\n            paddingRight:\n              basePaddingRight === 'default' ? 'default' : undefined,\n            paddingX:\n              basePaddingX === 'default' && !hasPaddingLeft && !hasPaddingRight\n                ? 'default'\n                : undefined,\n            paddingY:\n              basePaddingY === 'default' && !hasPaddingTop && !hasPaddingBottom\n                ? 'default'\n                : undefined,\n          }),\n          backgroundColorVariants({ backgroundColor }),\n          flexVariants({\n            flexDirection: baseFlexDirection,\n            justifyContent: baseJustifyContent,\n            alignItems: baseAlignItems,\n          }),\n          ...paddingTopResponsiveClasses,\n          ...paddingRightResponsiveClasses,\n          ...paddingBottomResponsiveClasses,\n          ...paddingLeftResponsiveClasses,\n          ...paddingXResponsiveClasses,\n          ...paddingYResponsiveClasses,\n          ...flexDirectionResponsiveClasses,\n          ...justifyContentResponsiveClasses,\n          ...alignItemsResponsiveClasses,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={style}\n        data-testid=\"section\"\n      >\n        {React.Children.map(children, (child) => {\n          if (\n            React.isValidElement<ContainerResponsiveProps>(child) &&\n            child.type === Container\n          ) {\n            return React.cloneElement(child, {\n              ...child.props,\n              containerMaxWidth:\n                child.props.containerMaxWidth ?? containerMaxWidth,\n              flexDirection: child.props.flexDirection ?? flexDirection,\n              justifyContent: child.props.justifyContent ?? justifyContent,\n              alignItems: child.props.alignItems ?? alignItems,\n            });\n          }\n          return child;\n        })}\n      </section>\n    );\n  },\n) as SectionComponent;\n\nSection.displayName = 'Section';\nSection.Container = Container;\n\nexport default Section;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesFlex","flexStyles","sectionPaddingVariants","cva","variants","paddingX","default","paddingY","paddingTop","paddingRight","paddingBottom","paddingLeft","sectionContainer","containerMaxWidth","page","Container","children","className","flexDirection","justifyContent","alignItems","baseContainerMaxWidth","getBaseValueOrUndefined","baseFlexDirection","baseJustifyContent","baseAlignItems","containerMaxWidthResponsiveClasses","flexDirectionResponsiveClasses","justifyContentResponsiveClasses","alignItemsResponsiveClasses","widthClassName","fullWidth","pageWidth","jsx","container","flexVariants","display","filter","Boolean","join","Section","forwardRef","backgroundColor","style","ref","basePaddingTop","basePaddingBottom","basePaddingLeft","basePaddingRight","basePaddingX","basePaddingY","paddingTopResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingRightResponsiveClasses","hasPaddingTop","hasPaddingBottom","hasPaddingLeft","hasPaddingRight","section","paddingVariants","backgroundColorVariants","React","Children","map","child","isValidElement","type","cloneElement","props","displayName"],"mappings":"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"}
+{"version":3,"file":"Section.js","sources":["../../../src/components/Section/Section.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport {\n  backgroundColorVariants,\n  type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n  paddingVariants,\n  type PaddingVariants,\n} from '../../utils/padding/padding';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport styles from './Section.module.css';\nimport { cva } from 'class-variance-authority';\nimport '../../utils/padding/padding.module.css';\nimport { flexVariants, type FlexVariants } from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport {\n  getBaseValueOrUndefined,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\n\nconst sectionPaddingVariants = cva('', {\n  variants: {\n    paddingX: {\n      default: styles['padding-X--default'],\n    },\n    paddingY: {\n      default: styles['padding-Y--default'],\n    },\n    paddingTop: {\n      default: styles['padding-top--default'],\n    },\n    paddingRight: {\n      default: styles['padding-right--default'],\n    },\n    paddingBottom: {\n      default: styles['padding-bottom--default'],\n    },\n    paddingLeft: {\n      default: styles['padding-left--default'],\n    },\n  },\n});\n\ntype SectionPaddingValue = 'default' | PaddingVariants['paddingX'];\nexport type SectionPadding = {\n  /**\n   * Controls both left and right padding of the section\n   */\n  paddingX?: SectionPaddingValue;\n  /**\n   * Controls both top and bottom padding of the section\n   */\n  paddingY?: SectionPaddingValue;\n  /**\n   * Controls the top padding of the section (overridden by paddingY)\n   */\n  paddingTop?: SectionPaddingValue;\n  /**\n   * Controls the right padding of the section (overridden by paddingX)\n   */\n  paddingRight?: SectionPaddingValue;\n  /**\n   * Controls the bottom padding of the section (overridden by paddingY)\n   */\n  paddingBottom?: SectionPaddingValue;\n  /**\n   * Controls the left padding of the section (overridden by paddingX)\n   */\n  paddingLeft?: SectionPaddingValue;\n};\n\n// TODO: remove containerMaxWidth from here in future breaking change and move to Container only\nexport interface SectionBaseProps\n  extends BackgroundVariants,\n    SectionPadding,\n    Pick<FlexVariants, 'flexDirection' | 'justifyContent' | 'alignItems'> {\n  /**\n   * The content of the section\n   */\n  children: React.ReactNode;\n  /**\n   * Controls the maximum width of the section container\n   */\n  containerMaxWidth?: 'full-width' | 'page';\n  /**\n   * The style of the section.\n   */\n  style?: React.CSSProperties;\n  /**\n   * The class name of the section.\n   */\n  className?: string;\n  /**\n   * Test identifier for testing purposes.\n   * Defaults to \"section\" if not provided.\n   */\n  'data-testid'?: string;\n}\n\ntype SectionResponsivePropKeys =\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'paddingX'\n  | 'paddingY'\n  | 'flexDirection'\n  | 'justifyContent'\n  | 'alignItems'\n  | 'containerMaxWidth';\n\nexport type SectionProps = WithResponsiveProps<\n  SectionBaseProps,\n  SectionResponsivePropKeys\n>;\n\nconst sectionContainer = cva('', {\n  variants: {\n    containerMaxWidth: {\n      'full-width': styles['container--max-width-full-width'],\n      page: styles['container--max-width-page'],\n    },\n  },\n});\n\nexport interface ContainerProps {\n  children: React.ReactNode;\n  /**\n   * The class name of the container.\n   */\n  className?: string;\n  /**\n   * The maximum width of the container.\n   */\n  containerMaxWidth?: 'full-width' | 'page';\n  /**\n   * Direction of the flex container.\n   */\n  flexDirection?: FlexVariants['flexDirection'];\n  /**\n   * Alignment along the main axis.\n   */\n  justifyContent?: FlexVariants['justifyContent'];\n  /**\n   * Alignment along the cross axis.\n   */\n  alignItems?: FlexVariants['alignItems'];\n}\n\ntype ContainerResponsivePropKeys =\n  | 'containerMaxWidth'\n  | 'flexDirection'\n  | 'justifyContent'\n  | 'alignItems';\n\nexport type ContainerResponsiveProps = WithResponsiveProps<\n  ContainerProps,\n  ContainerResponsivePropKeys\n>;\n\nconst Container = ({\n  children,\n  className,\n  containerMaxWidth = 'page',\n  flexDirection,\n  justifyContent,\n  alignItems,\n}: ContainerResponsiveProps) => {\n  const baseContainerMaxWidth =\n    getBaseValueOrUndefined(containerMaxWidth) ?? 'page';\n  const baseFlexDirection = getBaseValueOrUndefined(flexDirection);\n  const baseJustifyContent = getBaseValueOrUndefined(justifyContent);\n  const baseAlignItems = getBaseValueOrUndefined(alignItems);\n  // Responsive classes for flex props\n  const containerMaxWidthResponsiveClasses = getResponsiveClasses(\n    containerMaxWidth,\n    'container--max-width',\n  );\n  const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n    flexDirection,\n    'flex--direction',\n  );\n  const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n    justifyContent,\n    'flex--justify-content',\n  );\n  const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n    alignItems,\n    'flex--align-items',\n  );\n\n  const widthClassName =\n    baseContainerMaxWidth === 'full-width'\n      ? styles.fullWidth\n      : styles.pageWidth;\n\n  return (\n    <div\n      className={[\n        sectionContainer({ containerMaxWidth: baseContainerMaxWidth }),\n        styles.container,\n        widthClassName,\n        ...containerMaxWidthResponsiveClasses,\n        flexVariants({\n          display:\n            baseFlexDirection || baseJustifyContent || alignItems\n              ? 'flex'\n              : undefined,\n          flexDirection: baseFlexDirection,\n          justifyContent: baseJustifyContent,\n          alignItems: baseAlignItems,\n        }),\n        ...flexDirectionResponsiveClasses,\n        ...justifyContentResponsiveClasses,\n        ...alignItemsResponsiveClasses,\n        className || '',\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface SectionComponent\n  extends React.ForwardRefExoticComponent<\n    SectionProps & React.RefAttributes<HTMLElement>\n  > {\n  Container: typeof Container;\n}\n\n// FIXME: Props are passed to container from section. Need to find a better way to handle this. Will be a breaking change.\nconst Section = forwardRef<HTMLElement, SectionProps>(\n  (\n    {\n      children,\n      containerMaxWidth = 'page',\n      backgroundColor,\n      paddingTop,\n      paddingBottom,\n      paddingLeft,\n      paddingRight,\n      paddingX,\n      paddingY = 'default',\n      style,\n      className,\n      flexDirection,\n      justifyContent,\n      alignItems,\n      'data-testid': dataTestId = 'section',\n    },\n    ref,\n  ) => {\n    // Responsive base Props\n    const basePaddingTop = getBaseValueOrUndefined(paddingTop);\n    const basePaddingBottom = getBaseValueOrUndefined(paddingBottom);\n    const basePaddingLeft = getBaseValueOrUndefined(paddingLeft);\n    const basePaddingRight = getBaseValueOrUndefined(paddingRight);\n    const basePaddingX = getBaseValueOrUndefined(paddingX);\n    const basePaddingY = getBaseValueOrUndefined(paddingY);\n\n    const baseFlexDirection = getBaseValueOrUndefined(flexDirection);\n    const baseJustifyContent = getBaseValueOrUndefined(justifyContent);\n    const baseAlignItems = getBaseValueOrUndefined(alignItems);\n\n    // Responsive classes for padding props\n    const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n      paddingTop,\n      'padding--top',\n    );\n    const paddingXResponsiveClasses = getResponsiveClassesPadding(\n      paddingX,\n      'padding--x',\n    );\n    const paddingYResponsiveClasses = getResponsiveClassesPadding(\n      paddingY,\n      'padding--y',\n    );\n    const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n      paddingBottom,\n      'padding--bottom',\n    );\n    const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n      paddingLeft,\n      'padding--left',\n    );\n    const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n      paddingRight,\n      'padding--right',\n    );\n\n    // Responsive classes for flex props\n    const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n      flexDirection,\n      'flex--direction',\n    );\n    const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n      justifyContent,\n      'flex--justify-content',\n    );\n    const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n      alignItems,\n      'flex--align-items',\n    );\n\n    // To ensure that if any of the padding props are set, we don't apply the default padding class for paddingX and paddingY\n    const hasPaddingTop = paddingTop != null;\n    const hasPaddingBottom = paddingBottom != null;\n    const hasPaddingLeft = paddingLeft != null;\n    const hasPaddingRight = paddingRight != null;\n\n    return (\n      <section\n        ref={ref}\n        className={[\n          styles.section,\n          paddingVariants({\n            paddingTop:\n              basePaddingTop !== 'default' ? basePaddingTop : undefined,\n            paddingBottom:\n              basePaddingBottom !== 'default' ? basePaddingBottom : undefined,\n            paddingLeft:\n              basePaddingLeft !== 'default' ? basePaddingLeft : undefined,\n            paddingRight:\n              basePaddingRight !== 'default' ? basePaddingRight : undefined,\n            paddingX: basePaddingX !== 'default' ? basePaddingX : undefined,\n            paddingY: basePaddingY !== 'default' ? basePaddingY : undefined,\n          }),\n          sectionPaddingVariants({\n            paddingTop: basePaddingTop === 'default' ? 'default' : undefined,\n            paddingBottom:\n              basePaddingBottom === 'default' ? 'default' : undefined,\n            paddingLeft: basePaddingLeft === 'default' ? 'default' : undefined,\n            paddingRight:\n              basePaddingRight === 'default' ? 'default' : undefined,\n            paddingX:\n              basePaddingX === 'default' && !hasPaddingLeft && !hasPaddingRight\n                ? 'default'\n                : undefined,\n            paddingY:\n              basePaddingY === 'default' && !hasPaddingTop && !hasPaddingBottom\n                ? 'default'\n                : undefined,\n          }),\n          backgroundColorVariants({ backgroundColor }),\n          flexVariants({\n            flexDirection: baseFlexDirection,\n            justifyContent: baseJustifyContent,\n            alignItems: baseAlignItems,\n          }),\n          ...paddingTopResponsiveClasses,\n          ...paddingRightResponsiveClasses,\n          ...paddingBottomResponsiveClasses,\n          ...paddingLeftResponsiveClasses,\n          ...paddingXResponsiveClasses,\n          ...paddingYResponsiveClasses,\n          ...flexDirectionResponsiveClasses,\n          ...justifyContentResponsiveClasses,\n          ...alignItemsResponsiveClasses,\n          className,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        style={style}\n        data-testid={dataTestId}\n      >\n        {React.Children.map(children, (child) => {\n          if (\n            React.isValidElement<ContainerResponsiveProps>(child) &&\n            child.type === Container\n          ) {\n            return React.cloneElement(child, {\n              ...child.props,\n              containerMaxWidth:\n                child.props.containerMaxWidth ?? containerMaxWidth,\n              flexDirection: child.props.flexDirection ?? flexDirection,\n              justifyContent: child.props.justifyContent ?? justifyContent,\n              alignItems: child.props.alignItems ?? alignItems,\n            });\n          }\n          return child;\n        })}\n      </section>\n    );\n  },\n) as SectionComponent;\n\nSection.displayName = 'Section';\nSection.Container = Container;\nContainer.displayName = 'Section.Container';\n\nexport default Section;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesFlex","flexStyles","sectionPaddingVariants","cva","variants","paddingX","default","paddingY","paddingTop","paddingRight","paddingBottom","paddingLeft","sectionContainer","containerMaxWidth","page","Container","children","className","flexDirection","justifyContent","alignItems","baseContainerMaxWidth","getBaseValueOrUndefined","baseFlexDirection","baseJustifyContent","baseAlignItems","containerMaxWidthResponsiveClasses","flexDirectionResponsiveClasses","justifyContentResponsiveClasses","alignItemsResponsiveClasses","widthClassName","fullWidth","pageWidth","jsx","container","flexVariants","display","filter","Boolean","join","Section","forwardRef","backgroundColor","style","dataTestId","ref","basePaddingTop","basePaddingBottom","basePaddingLeft","basePaddingRight","basePaddingX","basePaddingY","paddingTopResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingRightResponsiveClasses","hasPaddingTop","hasPaddingBottom","hasPaddingLeft","hasPaddingRight","section","paddingVariants","backgroundColorVariants","React","Children","map","child","isValidElement","type","cloneElement","props","displayName"],"mappings":"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"}

package/dist/components/SelectCard/SelectCard.d.ts

@@ -33,22 +33,28 @@ export type SelectCardProps = {
 } & Omit<CheckboxProps, 'children' | 'focusStyle'>) | ({
     type: 'radio';
 } & Omit<RadioProps, 'children' | 'focusStyle'>));
-export declare const SelectCardContext: React.Context<Omit<SelectCardProps, "children">>;
-declare const SelectCard: {
-    ({ children, hasSelectControl, ...contextProps }: SelectCardProps): import("react/jsx-runtime").JSX.Element;
-    Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-    StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
-    EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ title, description, headingLevel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-    Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
-    Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+export type SelectCardContext = Omit<SelectCardProps, 'children'> & {
+    ref?: React.ForwardedRef<HTMLLabelElement>;
 };
+export declare const SelectCardContext: React.Context<SelectCardContext>;
+type SelectCardComponent = React.ForwardRefExoticComponent<SelectCardProps & React.RefAttributes<HTMLLabelElement>> & {
+    Header: typeof Header;
+    StartSlot: typeof StartSlot;
+    EndSlot: typeof EndSlot;
+    Label: typeof Label;
+    Body: typeof Body;
+    Details: typeof Details;
+};
+declare const SelectCard: SelectCardComponent;
 interface HeaderProps {
     children?: React.ReactNode;
 }
+declare const Header: ({ children }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 interface SlotProps {
     children: React.ReactNode;
 }
+declare const StartSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+declare const EndSlot: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
 interface LabelProps {
     title: string;
     /**
@@ -62,4 +68,7 @@ interface LabelProps {
      */
     headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
+declare const Label: ({ title, description, headingLevel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+declare const Body: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
+declare const Details: ({ children }: SlotProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectCard;

package/dist/components/SelectCard/SelectCard.js

@@ -1,6 +1,6 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import a,{createContext as r,useContext as c,Children as s}from"react";import{Paragraph as t}from"../Paragraph/Paragraph.js";import{Checkbox as d,Radio as i}from"react-aria-components";import '../../assets/SelectCard.css';const _="_select-card_k6svz_1",n="_select-card__details_k6svz_23",o="_select-card__header-content-wrapper_k6svz_40",h="_select-card__start-slot_k6svz_41",m="_select-card__end-slot_k6svz_42",v="_select-card__body_k6svz_43",p="_select-card__label-title_k6svz_47",b="_select-card__header_k6svz_40",k="_select-card__label_k6svz_47",u="_select-card__checkbox-input_k6svz_106",z="_select-card__checkbox-input-icon_k6svz_190",N="_select-card__radio-input_k6svz_216",y=r({}),f=({children:l,hasSelectControl:r=!0,...c})=>{const s=a.useId();/* @__PURE__ */
-return e("div",{className:_,"data-select-control":r,children:/* @__PURE__ */e(y.Provider,{value:{"aria-labelledby":c["aria-labelledby"]||s,hasSelectControl:r,...c},children:l})})},x=({children:l})=>/* @__PURE__ */e("div",{className:h,children:l}),S=({children:l})=>/* @__PURE__ */e("div",{className:m,children:l}),g=({title:a,description:r,headingLevel:s})=>{const d=c(y);/* @__PURE__ */
-return l("div",{className:k,children:[
-/* @__PURE__ */e(s||"h3",{className:p,id:d?.["aria-labelledby"],children:a}),
-/* @__PURE__ */e(t,{size:"sm",foregroundColor:d?.isDisabled?"disabledOnSubtle":"default",children:r})]})};f.Header=({children:r})=>{const{hasSelectControl:t,..._}=c(y),n=s.map(r,(l,r)=>{const c=l;return c?.type!==g&&c?.type!==x&&c?.type!==S?/* @__PURE__ */e("div",{className:o,children:l},r):a.isValidElement(l)?a.cloneElement(l,{key:r}):l});return"checkbox"===_.type?/* @__PURE__ */l(d,{className:b,..._,children:[t&&/* @__PURE__ */e("div",{className:u,children:/* @__PURE__ */e("svg",{className:z,viewBox:"0 0 18 18","aria-hidden":"true",children:_?.isIndeterminate?/* @__PURE__ */e("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */e("polyline",{points:"1 9 7 14 15 4"})})}),n]}):/* @__PURE__ */l(i,{className:b,..._,children:[t&&/* @__PURE__ */e("span",{className:N}),n]})},f.StartSlot=x,f.EndSlot=S,f.Label=g,f.Body=({children:l})=>/* @__PURE__ */e("div",{className:v,children:l}),f.Details=({children:l})=>/* @__PURE__ */e("div",{className:n,children:l});export{y as SelectCardContext,f as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import l,{createContext as r,forwardRef as c,useContext as t,Children as d}from"react";import{Paragraph as n}from"../Paragraph/Paragraph.js";import{Checkbox as s,Radio as i}from"react-aria-components";import '../../assets/SelectCard.css';const _="_select-card_13nzp_1",o="_select-card__details_13nzp_23",h="_select-card__header-content-wrapper_13nzp_40",p="_select-card__start-slot_13nzp_41",m="_select-card__end-slot_13nzp_42",b="_select-card__body_13nzp_43",u="_select-card__label-title_13nzp_47",N="_select-card__header_13nzp_40",v="_select-card__label_13nzp_47",y="_select-card__checkbox-input_13nzp_106",z="_select-card__checkbox-input-icon_13nzp_190",f="_select-card__radio-input_13nzp_216",S=r({}),g=c(({children:a,hasSelectControl:r=!0,...c},t)=>{const d=l.useId();/* @__PURE__ */
+return e("div",{className:_,"data-select-control":r,children:/* @__PURE__ */e(S.Provider,{value:{"aria-labelledby":c["aria-labelledby"]||d,hasSelectControl:r,...c,ref:t},children:a})})});g.displayName="SelectCard";const x=({children:a})=>/* @__PURE__ */e("div",{className:p,children:a}),C=({children:a})=>/* @__PURE__ */e("div",{className:m,children:a}),k=({title:l,description:r,headingLevel:c})=>{const d=t(S);/* @__PURE__ */
+return a("div",{className:v,children:[
+/* @__PURE__ */e(c||"h3",{className:u,id:d?.["aria-labelledby"],children:l}),
+/* @__PURE__ */e(n,{size:"sm",foregroundColor:d?.isDisabled?"disabledOnSubtle":"default",children:r})]})};g.Header=({children:r})=>{const{hasSelectControl:c,...n}=t(S),_=d.map(r,(a,r)=>{const c=a;return c?.type!==k&&c?.type!==x&&c?.type!==C?/* @__PURE__ */e("div",{className:h,children:a},r):l.isValidElement(a)?l.cloneElement(a,{key:r}):a});return"radio"!==n.type?/* @__PURE__ */a(s,{className:N,...n,children:[c&&/* @__PURE__ */e("div",{className:y,children:/* @__PURE__ */e("svg",{className:z,viewBox:"0 0 18 18","aria-hidden":"true",children:n?.isIndeterminate?/* @__PURE__ */e("rect",{x:1,y:7.5,width:15,height:3}):/* @__PURE__ */e("polyline",{points:"1 9 7 14 15 4"})})}),_]}):/* @__PURE__ */a(i,{className:N,...n,children:[c&&/* @__PURE__ */e("span",{className:f}),_]})},g.StartSlot=x,g.EndSlot=C,g.Label=k,g.Body=({children:a})=>/* @__PURE__ */e("div",{className:b,children:a}),g.Details=({children:a})=>/* @__PURE__ */e("div",{className:o,children:a});export{S as SelectCardContext,g as default};
 //# sourceMappingURL=SelectCard.js.map

package/dist/components/SelectCard/SelectCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectCard.js","sources":["../../../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  Children,\n  ReactElement,\n} from 'react';\nimport styles from './SelectCard.module.css';\nimport Paragraph from '../Paragraph';\nimport {\n  Checkbox as AriaCheckbox,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport type { CheckboxProps } from 'react-aria-components';\nimport type { RadioProps } from '../Radio';\n\n// Context to share state between components\nexport type SelectCardProps = {\n  /**\n   * The input type of the select card.\n   * @default 'checkbox'\n   */\n  type?: 'checkbox' | 'radio';\n  /**\n   * The ID of the title for a11y labelling.\n   * @default useId()\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Show or hide the select control.\n   * @default true\n   */\n  hasSelectControl?: boolean;\n  /**\n   * The compounds components of the SelectCard:\n   * - SelectCard.Header\n   * - SelectCard.StartSlot\n   * - SelectCard.EndSlot\n   * - SelectCard.Label\n   * - SelectCard.Body\n   * - SelectCard.Details\n   */\n  children?: React.ReactNode;\n  isDisabled?: boolean;\n} & (\n  | ({ type?: 'checkbox' } & Omit<CheckboxProps, 'children' | 'focusStyle'>)\n  | ({ type: 'radio' } & Omit<RadioProps, 'children' | 'focusStyle'>)\n);\n\nexport const SelectCardContext = createContext<\n  Omit<SelectCardProps, 'children'>\n>({});\n\nconst SelectCard = ({\n  children,\n  hasSelectControl = true,\n  ...contextProps\n}: SelectCardProps) => {\n  const labelId = React.useId();\n\n  return (\n    <div\n      className={styles['select-card']}\n      data-select-control={hasSelectControl}\n    >\n      <SelectCardContext.Provider\n        value={{\n          'aria-labelledby': contextProps['aria-labelledby'] || labelId,\n          hasSelectControl,\n          ...contextProps,\n        }}\n      >\n        {children}\n      </SelectCardContext.Provider>\n    </div>\n  );\n};\n\n// Header component\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const { hasSelectControl, ...contextProps } = useContext(SelectCardContext);\n\n  // Wrap any non-subcomponents in a div so we can add a disabled style\n  const headerChildren = Children.map(children, (child, index) => {\n    const childElement = child as ReactElement;\n\n    return childElement?.type !== Label &&\n      childElement?.type !== StartSlot &&\n      childElement?.type !== EndSlot ? (\n      <div\n        key={index}\n        className={styles['select-card__header-content-wrapper']}\n      >\n        {child}\n      </div>\n    ) : React.isValidElement(child) ? (\n      React.cloneElement(child, { key: index })\n    ) : (\n      child\n    );\n  });\n\n  if (contextProps.type === 'checkbox') {\n    return (\n      <AriaCheckbox className={styles['select-card__header']} {...contextProps}>\n        {hasSelectControl && (\n          <div className={styles['select-card__checkbox-input']}>\n            <svg\n              className={styles['select-card__checkbox-input-icon']}\n              viewBox=\"0 0 18 18\"\n              aria-hidden=\"true\"\n            >\n              {(contextProps as CheckboxProps)?.isIndeterminate ? (\n                <rect x={1} y={7.5} width={15} height={3} />\n              ) : (\n                <polyline points=\"1 9 7 14 15 4\" />\n              )}\n            </svg>\n          </div>\n        )}\n        {headerChildren}\n      </AriaCheckbox>\n    );\n  }\n\n  return (\n    <AriaRadio\n      className={styles['select-card__header']}\n      {...(contextProps as RadioProps)}\n    >\n      {hasSelectControl && (\n        <span className={styles['select-card__radio-input']} />\n      )}\n      {headerChildren}\n    </AriaRadio>\n  );\n};\n\n// Slot components\ninterface SlotProps {\n  children: React.ReactNode;\n}\n\nconst StartSlot = ({ children }: SlotProps) => (\n  <div className={styles['select-card__start-slot']}>{children}</div>\n);\n\nconst EndSlot = ({ children }: SlotProps) => (\n  <div className={styles['select-card__end-slot']}>{children}</div>\n);\n\ninterface LabelProps {\n  /*\n   * The main title of the SelectCard.\n   */\n  title: string;\n  /**\n   * Optional secondary text providing more details about the SelectCard.\n   */\n  description?: string;\n  /**\n   * Semantic heading level to use when styleVariant is 'heading'\n   * Affects accessibility and document structure\n   * @default 'h3'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst Label = ({ title, description, headingLevel }: LabelProps) => {\n  const state = useContext(SelectCardContext);\n  const HeadingLabel = headingLevel || 'h3';\n  return (\n    <div className={styles['select-card__label']}>\n      <HeadingLabel\n        className={styles['select-card__label-title']}\n        id={state?.['aria-labelledby']}\n      >\n        {title}\n      </HeadingLabel>\n      <Paragraph\n        size=\"sm\"\n        foregroundColor={state?.isDisabled ? 'disabledOnSubtle' : 'default'}\n      >\n        {description}\n      </Paragraph>\n    </div>\n  );\n};\n\nconst Body = ({ children }: SlotProps) => (\n  <div className={styles['select-card__body']}>{children}</div>\n);\n\nconst Details = ({ children }: SlotProps) => {\n  return <div className={styles['select-card__details']}>{children}</div>;\n};\n\n// Attach subcomponents\nSelectCard.Header = Header;\nSelectCard.StartSlot = StartSlot;\nSelectCard.EndSlot = EndSlot;\nSelectCard.Label = Label;\nSelectCard.Body = Body;\nSelectCard.Details = Details;\n\nexport default SelectCard;\n"],"names":["SelectCardContext","createContext","SelectCard","children","hasSelectControl","contextProps","labelId","React","useId","jsx","className","styles","Provider","value","StartSlot","EndSlot","Label","title","description","headingLevel","state","useContext","id","Paragraph","size","foregroundColor","isDisabled","Header","headerChildren","Children","map","child","index","childElement","type","isValidElement","cloneElement","key","AriaCheckbox","viewBox","isIndeterminate","x","y","width","height","points","jsxs","AriaRadio","Body","Details"],"mappings":"srBAgDaA,EAAoBC,EAE/B,CAAA,GAEIC,EAAa,EACjBC,WACAC,oBAAmB,KAChBC,MAEH,MAAMC,EAAUC,EAAMC;AAEtB,OACEC,EAAC,MAAA,CACCC,UAAWC,EACX,sBAAqBP,EAErBD,wBAAAM,EAACT,EAAkBY,SAAlB,CACCC,MAAO,CACL,kBAAmBR,EAAa,oBAAsBC,EACtDF,sBACGC,GAGJF,gBA2EHW,EAAY,EAAGX,6BACnBM,EAAC,MAAA,CAAIC,UAAWC,EAAoCR,aAGhDY,EAAU,EAAGZ,6BACjBM,EAAC,MAAA,CAAIC,UAAWC,EAAkCR,aAoB9Ca,EAAQ,EAAGC,QAAOC,cAAaC,mBACnC,MAAMC,EAAQC,EAAWrB;AAEzB,SACG,MAAA,CAAIU,UAAWC,EACdR,SAAA;eAAAM,EAHiBU,GAAgB,KAGhC,CACCT,UAAWC,EACXW,GAAIF,IAAQ,mBAEXjB,SAAAc;eAEHR,EAACc,EAAA,CACCC,KAAK,KACLC,gBAAiBL,GAAOM,WAAa,mBAAqB,UAEzDvB,SAAAe,QAeThB,EAAWyB,OAvHI,EAAGxB,eAChB,MAAMC,iBAAEA,KAAqBC,GAAiBgB,EAAWrB,GAGnD4B,EAAiBC,EAASC,IAAI3B,EAAU,CAAC4B,EAAOC,KACpD,MAAMC,EAAeF,EAErB,OAAOE,GAAcC,OAASlB,GAC5BiB,GAAcC,OAASpB,GACvBmB,GAAcC,OAASnB,iBACvBN,EAAC,MAAA,CAECC,UAAWC,EAEVR,SAAA4B,GAHIC,GAKLzB,EAAM4B,eAAeJ,GACvBxB,EAAM6B,aAAaL,EAAO,CAAEM,IAAKL,IAEjCD,IAIJ,MAA0B,aAAtB1B,EAAa6B,sBAEZI,EAAA,CAAa5B,UAAWC,KAAmCN,EACzDF,SAAA,CAAAC,oBACE,MAAA,CAAIM,UAAWC,EACdR,wBAAAM,EAAC,MAAA,CACCC,UAAWC,EACX4B,QAAQ,YACR,cAAY,OAEVpC,YAAgCqC,+BAChC/B,EAAC,OAAA,CAAKgC,EAAG,EAAGC,EAAG,IAAKC,MAAO,GAAIC,OAAQ,qBAEtC,WAAA,CAASC,OAAO,sBAKxBjB,oBAMLkB,EAACC,EAAA,CACCrC,UAAWC,KACNN,EAEJF,SAAA,CAAAC,oBACE,OAAA,CAAKM,UAAWC,IAElBiB,MAkEP1B,EAAWY,UAAYA,EACvBZ,EAAWa,QAAUA,EACrBb,EAAWc,MAAQA,EACnBd,EAAW8C,KAbE,EAAG7C,6BACdM,EAAC,MAAA,CAAIC,UAAWC,EAA8BR,aAahDD,EAAW+C,QAVK,EAAG9C,+BACT,MAAA,CAAIO,UAAWC,EAAiCR"}
+{"version":3,"file":"SelectCard.js","sources":["../../../src/components/SelectCard/SelectCard.tsx"],"sourcesContent":["import React, {\n  createContext,\n  useContext,\n  Children,\n  ReactElement,\n  forwardRef,\n} from 'react';\nimport styles from './SelectCard.module.css';\nimport Paragraph from '../Paragraph';\nimport {\n  Checkbox as AriaCheckbox,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport type { CheckboxProps } from 'react-aria-components';\nimport type { RadioProps } from '../Radio';\n\n// Context to share state between components\nexport type SelectCardProps = {\n  /**\n   * The input type of the select card.\n   * @default 'checkbox'\n   */\n  type?: 'checkbox' | 'radio';\n  /**\n   * The ID of the title for a11y labelling.\n   * @default useId()\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Show or hide the select control.\n   * @default true\n   */\n  hasSelectControl?: boolean;\n  /**\n   * The compounds components of the SelectCard:\n   * - SelectCard.Header\n   * - SelectCard.StartSlot\n   * - SelectCard.EndSlot\n   * - SelectCard.Label\n   * - SelectCard.Body\n   * - SelectCard.Details\n   */\n  children?: React.ReactNode;\n  isDisabled?: boolean;\n} & (\n  | ({ type?: 'checkbox' } & Omit<CheckboxProps, 'children' | 'focusStyle'>)\n  | ({ type: 'radio' } & Omit<RadioProps, 'children' | 'focusStyle'>)\n);\n\nexport type SelectCardContext = Omit<SelectCardProps, 'children'> & {\n  ref?: React.ForwardedRef<HTMLLabelElement>;\n};\n\nexport const SelectCardContext = createContext<SelectCardContext>({});\n\ntype SelectCardComponent = React.ForwardRefExoticComponent<\n  SelectCardProps & React.RefAttributes<HTMLLabelElement>\n> & {\n  Header: typeof Header;\n  StartSlot: typeof StartSlot;\n  EndSlot: typeof EndSlot;\n  Label: typeof Label;\n  Body: typeof Body;\n  Details: typeof Details;\n};\n\nconst SelectCard = forwardRef<HTMLLabelElement, SelectCardProps>(\n  ({ children, hasSelectControl = true, ...contextProps }, forwardedRef) => {\n    const labelId = React.useId();\n\n    return (\n      <div\n        className={styles['select-card']}\n        data-select-control={hasSelectControl}\n      >\n        <SelectCardContext.Provider\n          value={{\n            'aria-labelledby': contextProps['aria-labelledby'] || labelId,\n            hasSelectControl,\n            ...contextProps,\n            ref: forwardedRef,\n          }}\n        >\n          {children}\n        </SelectCardContext.Provider>\n      </div>\n    );\n  },\n) as SelectCardComponent;\nSelectCard.displayName = 'SelectCard';\n\n// Header component\ninterface HeaderProps {\n  children?: React.ReactNode;\n}\n\nconst Header = ({ children }: HeaderProps) => {\n  const { hasSelectControl, ...contextProps } = useContext(SelectCardContext);\n\n  // Wrap any non-subcomponents in a div so we can add a disabled style\n  const headerChildren = Children.map(children, (child, index) => {\n    const childElement = child as ReactElement;\n\n    return childElement?.type !== Label &&\n      childElement?.type !== StartSlot &&\n      childElement?.type !== EndSlot ? (\n      <div\n        key={index}\n        className={styles['select-card__header-content-wrapper']}\n      >\n        {child}\n      </div>\n    ) : React.isValidElement(child) ? (\n      React.cloneElement(child, { key: index })\n    ) : (\n      child\n    );\n  });\n\n  if (contextProps.type !== 'radio') {\n    return (\n      <AriaCheckbox className={styles['select-card__header']} {...contextProps}>\n        {hasSelectControl && (\n          <div className={styles['select-card__checkbox-input']}>\n            <svg\n              className={styles['select-card__checkbox-input-icon']}\n              viewBox=\"0 0 18 18\"\n              aria-hidden=\"true\"\n            >\n              {(contextProps as CheckboxProps)?.isIndeterminate ? (\n                <rect x={1} y={7.5} width={15} height={3} />\n              ) : (\n                <polyline points=\"1 9 7 14 15 4\" />\n              )}\n            </svg>\n          </div>\n        )}\n        {headerChildren}\n      </AriaCheckbox>\n    );\n  }\n\n  return (\n    <AriaRadio\n      className={styles['select-card__header']}\n      {...(contextProps as RadioProps)}\n    >\n      {hasSelectControl && (\n        <span className={styles['select-card__radio-input']} />\n      )}\n      {headerChildren}\n    </AriaRadio>\n  );\n};\n\n// Slot components\ninterface SlotProps {\n  children: React.ReactNode;\n}\n\nconst StartSlot = ({ children }: SlotProps) => (\n  <div className={styles['select-card__start-slot']}>{children}</div>\n);\n\nconst EndSlot = ({ children }: SlotProps) => (\n  <div className={styles['select-card__end-slot']}>{children}</div>\n);\n\ninterface LabelProps {\n  /*\n   * The main title of the SelectCard.\n   */\n  title: string;\n  /**\n   * Optional secondary text providing more details about the SelectCard.\n   */\n  description?: string;\n  /**\n   * Semantic heading level to use when styleVariant is 'heading'\n   * Affects accessibility and document structure\n   * @default 'h3'\n   */\n  headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n}\n\nconst Label = ({ title, description, headingLevel }: LabelProps) => {\n  const state = useContext(SelectCardContext);\n  const HeadingLabel = headingLevel || 'h3';\n  return (\n    <div className={styles['select-card__label']}>\n      <HeadingLabel\n        className={styles['select-card__label-title']}\n        id={state?.['aria-labelledby']}\n      >\n        {title}\n      </HeadingLabel>\n      <Paragraph\n        size=\"sm\"\n        foregroundColor={state?.isDisabled ? 'disabledOnSubtle' : 'default'}\n      >\n        {description}\n      </Paragraph>\n    </div>\n  );\n};\n\nconst Body = ({ children }: SlotProps) => (\n  <div className={styles['select-card__body']}>{children}</div>\n);\n\nconst Details = ({ children }: SlotProps) => {\n  return <div className={styles['select-card__details']}>{children}</div>;\n};\n\n// Attach subcomponents\nSelectCard.Header = Header;\nSelectCard.StartSlot = StartSlot;\nSelectCard.EndSlot = EndSlot;\nSelectCard.Label = Label;\nSelectCard.Body = Body;\nSelectCard.Details = Details;\n\nexport default SelectCard;\n"],"names":["SelectCardContext","createContext","SelectCard","forwardRef","children","hasSelectControl","contextProps","forwardedRef","labelId","React","useId","jsx","className","styles","Provider","value","ref","displayName","StartSlot","EndSlot","Label","title","description","headingLevel","state","useContext","id","Paragraph","size","foregroundColor","isDisabled","Header","headerChildren","Children","map","child","index","childElement","type","isValidElement","cloneElement","key","AriaCheckbox","viewBox","isIndeterminate","x","y","width","height","points","jsxs","AriaRadio","Body","Details"],"mappings":"ssBAqDaA,EAAoBC,EAAiC,CAAA,GAa5DC,EAAaC,EACjB,EAAGC,WAAUC,oBAAmB,KAASC,GAAgBC,KACvD,MAAMC,EAAUC,EAAMC;AAEtB,OACEC,EAAC,MAAA,CACCC,UAAWC,EACX,sBAAqBR,EAErBD,wBAAAO,EAACX,EAAkBc,SAAlB,CACCC,MAAO,CACL,kBAAmBT,EAAa,oBAAsBE,EACtDH,sBACGC,EACHU,IAAKT,GAGNH,iBAMXF,EAAWe,YAAc,aAOzB,MAgEMC,EAAY,EAAGd,6BACnBO,EAAC,MAAA,CAAIC,UAAWC,EAAoCT,aAGhDe,EAAU,EAAGf,6BACjBO,EAAC,MAAA,CAAIC,UAAWC,EAAkCT,aAoB9CgB,EAAQ,EAAGC,QAAOC,cAAaC,mBACnC,MAAMC,EAAQC,EAAWzB;AAEzB,SACG,MAAA,CAAIY,UAAWC,EACdT,SAAA;eAAAO,EAHiBY,GAAgB,KAGhC,CACCX,UAAWC,EACXa,GAAIF,IAAQ,mBAEXpB,SAAAiB;eAEHV,EAACgB,EAAA,CACCC,KAAK,KACLC,gBAAiBL,GAAOM,WAAa,mBAAqB,UAEzD1B,SAAAkB,QAeTpB,EAAW6B,OAvHI,EAAG3B,eAChB,MAAMC,iBAAEA,KAAqBC,GAAiBmB,EAAWzB,GAGnDgC,EAAiBC,EAASC,IAAI9B,EAAU,CAAC+B,EAAOC,KACpD,MAAMC,EAAeF,EAErB,OAAOE,GAAcC,OAASlB,GAC5BiB,GAAcC,OAASpB,GACvBmB,GAAcC,OAASnB,iBACvBR,EAAC,MAAA,CAECC,UAAWC,EAEVT,SAAA+B,GAHIC,GAKL3B,EAAM8B,eAAeJ,GACvB1B,EAAM+B,aAAaL,EAAO,CAAEM,IAAKL,IAEjCD,IAIJ,MAA0B,UAAtB7B,EAAagC,sBAEZI,EAAA,CAAa9B,UAAWC,KAAmCP,EACzDF,SAAA,CAAAC,oBACE,MAAA,CAAIO,UAAWC,EACdT,wBAAAO,EAAC,MAAA,CACCC,UAAWC,EACX8B,QAAQ,YACR,cAAY,OAEVvC,YAAgCwC,+BAChCjC,EAAC,OAAA,CAAKkC,EAAG,EAAGC,EAAG,IAAKC,MAAO,GAAIC,OAAQ,qBAEtC,WAAA,CAASC,OAAO,sBAKxBjB,oBAMLkB,EAACC,EAAA,CACCvC,UAAWC,KACNP,EAEJF,SAAA,CAAAC,oBACE,OAAA,CAAKO,UAAWC,IAElBmB,MAkEP9B,EAAWgB,UAAYA,EACvBhB,EAAWiB,QAAUA,EACrBjB,EAAWkB,MAAQA,EACnBlB,EAAWkD,KAbE,EAAGhD,6BACdO,EAAC,MAAA,CAAIC,UAAWC,EAA8BT,aAahDF,EAAWmD,QAVK,EAAGjD,+BACT,MAAA,CAAIQ,UAAWC,EAAiCT"}

package/dist/components/Slider/Slider.d.ts

@@ -116,5 +116,5 @@ export interface CustomThumbProps {
      */
     isRange?: boolean;
 }
-export declare const Slider: ({ label, description, isDisabled, isRange, minValue, maxValue, step, formatOptions, defaultValue, value, id: providedId, onChange, showTooltip, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLDivElement>>;
 export default Slider;

package/dist/components/Slider/Slider.js

@@ -1,13 +1,13 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Slider as l,SliderTrack as t,SliderThumb as r}from"react-aria-components";import{useId as s,useRef as o}from"react";import{Box as n}from"../Box/Box.js";import{FieldHeader as m}from"../FieldHeader/FieldHeader.js";import{Tooltip as u}from"../Tooltip/Tooltip.js";import '../../assets/Slider.css';const d="_fieldHeaderWrapper_12sym_1",c="_output_12sym_5",p="_sliderContainer_12sym_14",f="_track_12sym_21",h="_fill_12sym_30",b="_thumbContainer_12sym_37",_="_thumb_12sym_37",g="_slider_12sym_14",v=({index:i,state:l,formatValue:t,isDisabled:s,showTooltip:n=!1,label:m,minValue:d,maxValue:c,isRange:p})=>{const f=l.isThumbDragging(i),h=l.focusedThumb===i,g=n&&(f||h),v=o(null);let x=m;if(p){x=`${0===i?"Minimum":"Maximum"} value for ${m}`}const y=`${t(l.values[i])} out of range ${t(d)} to ${t(c)}`;/* @__PURE__ */
-return a("div",{className:b,style:{left:100*l.getThumbPercent(i)+"%"},role:"presentation",children:[
-/* @__PURE__ */e(r,{index:i,className:_,ref:v,"aria-label":x,"aria-valuetext":y}),
-/* @__PURE__ */e(u,{label:t(l.values[i]),placement:"top",isDisabled:s,visible:g,triggerRef:v,children:/* @__PURE__ */e("div",{role:"presentation"})})]})},x=({label:r,description:o,isDisabled:u=!1,isRange:b=!1,minValue:_=0,maxValue:x=100,step:y,formatOptions:V,defaultValue:T=(b?[25,75]:50),value:D,id:N,onChange:$,showTooltip:w=!1})=>{const R=s(),j=N||`slider-${R}`,F=y??("object"==typeof V&&"currency"===V?.style?.01:"number"==typeof T?T%1!=0?.01:1:Array.isArray(T)&&T.some(e=>e%1!=0)?.01:1),P=e=>{if("function"==typeof V)return V(e,x);if(!V){const a=F<1?2:0;return e.toFixed(a)}return new Intl.NumberFormat(void 0,V).format(e)};/* @__PURE__ */
-return e(n,{display:"flex",flexDirection:"column",gap:"md",padding:"md",children:/* @__PURE__ */e(l,{...{id:j,isDisabled:u,minValue:_,maxValue:x,step:F,defaultValue:T,value:D,onChange:$,className:g,orientation:"horizontal"},children:({state:l})=>/* @__PURE__ */a(i,{children:[
-/* @__PURE__ */a("div",{className:d,children:[
-/* @__PURE__ */e(m,{label:r,description:o,labelFor:j,isRequired:!0}),
-/* @__PURE__ */e("div",{className:c,"aria-live":"polite","aria-atomic":"true",children:/* @__PURE__ */e("span",b?{children:`${P(l.values[0])} - ${P(l.values[1])}`}:{children:P(l.values[0])})})]}),
-/* @__PURE__ */e("div",{className:p,role:"presentation",children:/* @__PURE__ */a(t,{className:f,children:[
-/* @__PURE__ */e("div",{className:h,style:{left:b?100*l.getThumbPercent(0)+"%":0,width:b?100*(l.getThumbPercent(1)-l.getThumbPercent(0))+"%":100*l.getThumbPercent(0)+"%"},role:"presentation"}),b?/* @__PURE__ */a(i,{children:[
-/* @__PURE__ */e(v,{index:0,state:l,formatValue:P,isDisabled:u,showTooltip:w,label:r||"",minValue:_,maxValue:l.values[1],isRange:!0}),
-/* @__PURE__ */e(v,{index:1,state:l,formatValue:P,isDisabled:u,showTooltip:w,label:r||"",minValue:l.values[0],maxValue:x,isRange:!0})]}):/* @__PURE__ */e(v,{index:0,state:l,formatValue:P,isDisabled:u,showTooltip:w,label:r||"",minValue:_,maxValue:x,isRange:!1})]})})]})})})};export{x as Slider,x as default};
+import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Slider as l,SliderTrack as t,SliderThumb as r}from"react-aria-components";import{forwardRef as s,useId as o,useRef as n}from"react";import{Box as m}from"../Box/Box.js";import{FieldHeader as u}from"../FieldHeader/FieldHeader.js";import{Tooltip as d}from"../Tooltip/Tooltip.js";import '../../assets/Slider.css';const c="_fieldHeaderWrapper_12sym_1",p="_output_12sym_5",f="_sliderContainer_12sym_14",h="_track_12sym_21",b="_fill_12sym_30",_="_thumbContainer_12sym_37",g="_thumb_12sym_37",v="_slider_12sym_14",x=({index:i,state:l,formatValue:t,isDisabled:s,showTooltip:o=!1,label:m,minValue:u,maxValue:c,isRange:p})=>{const f=l.isThumbDragging(i),h=l.focusedThumb===i,b=o&&(f||h),v=n(null);let x=m;if(p){x=`${0===i?"Minimum":"Maximum"} value for ${m}`}const y=`${t(l.values[i])} out of range ${t(u)} to ${t(c)}`;/* @__PURE__ */
+return a("div",{className:_,style:{left:100*l.getThumbPercent(i)+"%"},role:"presentation",children:[
+/* @__PURE__ */e(r,{index:i,className:g,ref:v,"aria-label":x,"aria-valuetext":y}),
+/* @__PURE__ */e(d,{label:t(l.values[i]),placement:"top",isDisabled:s,visible:b,triggerRef:v,children:/* @__PURE__ */e("div",{role:"presentation"})})]})},y=s(({label:r,description:s,isDisabled:n=!1,isRange:d=!1,minValue:_=0,maxValue:g=100,step:y,formatOptions:V,defaultValue:T=(d?[25,75]:50),value:N,id:D,onChange:$,showTooltip:w=!1},R)=>{const j=o(),F=D||`slider-${j}`,P=y??("object"==typeof V&&"currency"===V?.style?.01:"number"==typeof T?T%1!=0?.01:1:Array.isArray(T)&&T.some(e=>e%1!=0)?.01:1),C=e=>{if("function"==typeof V)return V(e,g);if(!V){const a=P<1?2:0;return e.toFixed(a)}return new Intl.NumberFormat(void 0,V).format(e)};/* @__PURE__ */
+return e(m,{display:"flex",flexDirection:"column",gap:"md",padding:"md",children:/* @__PURE__ */e(l,{...{id:F,isDisabled:n,minValue:_,maxValue:g,step:P,defaultValue:T,value:N,onChange:$,className:v,orientation:"horizontal"},ref:R,children:({state:l})=>/* @__PURE__ */a(i,{children:[
+/* @__PURE__ */a("div",{className:c,children:[
+/* @__PURE__ */e(u,{label:r,description:s,labelFor:F,isRequired:!0}),
+/* @__PURE__ */e("div",{className:p,"aria-live":"polite","aria-atomic":"true",children:/* @__PURE__ */e("span",d?{children:`${C(l.values[0])} - ${C(l.values[1])}`}:{children:C(l.values[0])})})]}),
+/* @__PURE__ */e("div",{className:f,role:"presentation",children:/* @__PURE__ */a(t,{className:h,children:[
+/* @__PURE__ */e("div",{className:b,style:{left:d?100*l.getThumbPercent(0)+"%":0,width:d?100*(l.getThumbPercent(1)-l.getThumbPercent(0))+"%":100*l.getThumbPercent(0)+"%"},role:"presentation"}),d?/* @__PURE__ */a(i,{children:[
+/* @__PURE__ */e(x,{index:0,state:l,formatValue:C,isDisabled:n,showTooltip:w,label:r||"",minValue:_,maxValue:l.values[1],isRange:!0}),
+/* @__PURE__ */e(x,{index:1,state:l,formatValue:C,isDisabled:n,showTooltip:w,label:r||"",minValue:l.values[0],maxValue:g,isRange:!0})]}):/* @__PURE__ */e(x,{index:0,state:l,formatValue:C,isDisabled:n,showTooltip:w,label:r||"",minValue:_,maxValue:g,isRange:!1})]})})]})})})});y.displayName="Slider";export{y as Slider,y as default};
 //# sourceMappingURL=Slider.js.map