@alto-avios/alto-ui 5.7.0 → 5.8.0

package/dist/components/CalloutBanner/CalloutBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalloutBanner.js","sources":["../../../src/components/CalloutBanner/CalloutBanner.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './CalloutBanner.module.css';\nimport Icon from '../Icon';\nimport { cva } from 'class-variance-authority';\nimport IconButton from '../IconButton';\n\nconst calloutBanner = cva(styles.calloutBanner, {\n  variants: {\n    emphasis: {\n      primary: styles['calloutBanner--primary'],\n      secondary: styles['calloutBanner--secondary'],\n      tertiary: styles['calloutBanner--tertiary'],\n    },\n    styleVariant: {\n      critical: styles['calloutBanner--critical'],\n      success: styles['calloutBanner--success'],\n      information: styles['calloutBanner--information'],\n      neutral: styles['calloutBanner--neutral'],\n      accent: styles['calloutBanner--accent'],\n    },\n    headerLayout: {\n      row: styles['calloutBanner__header--row'],\n      column: styles['calloutBanner__header-column'],\n    },\n  },\n  defaultVariants: {\n    emphasis: 'primary',\n    styleVariant: 'critical',\n  },\n});\n\ntype StyleVariant =\n  | 'critical'\n  | 'success'\n  | 'information'\n  | 'neutral'\n  | 'accent';\n\ntype DismissButtonProps = Omit<\n  React.ComponentProps<typeof IconButton>,\n  | 'onPress'\n  | 'iconProps'\n  | 'size'\n  | 'styleVariant'\n  | 'emphasis'\n  | 'tooltipLabel'\n>;\n\nexport interface CalloutBannerBaseProps {\n  /**\n   * The main heading text of the banner\n   */\n  title: string;\n  /**\n   * Optional secondary text providing more details\n   * Can be a string or React node\n   */\n  description?: string | React.ReactNode;\n  /**\n   * Optional emphasis style for the banner\n   * @default 'primary'\n   */\n  emphasis?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Optional style variant for the banner\n   * - 'critical' for errors, urgent warnings\n   * - 'success' for confirmations, achievements\n   * - 'information' for For general updates, tips\n   * - 'neutral' for non-critical messages, guidance\n   * - 'accent' for any brand specific promotions or callouts\n   * @default 'critical'\n   */\n  styleVariant?: StyleVariant;\n  /**\n   * Optional button group to be rendered as a label\n   * @deprecated Use CalloutBanner.Action instead\n   */\n  label?: React.ReactNode;\n  /**\n   * Optional label for the dismiss button tooltip\n   */\n  dismissButtonTooltipLabel?: string;\n  /**\n   * Optional props for the dismiss icon button\n   */\n  dismissButtonProps?: DismissButtonProps;\n  /**\n   * Optional content to be rendered in the end section of the banner\n   */\n  children?: React.ReactNode;\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   * Optional callback function triggered when the dismiss button is clicked\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional custom asset to be rendered instead of the default icon.\n   * Can use another icon, image, or any React node.\n   */\n  customAsset?: React.ReactNode;\n  /**\n   * Optional prop to hide the illustration\n   * @default false\n   */\n  hideIllustration?: boolean;\n  /**\n   * Optional prop to align buttons within the banner\n   * - 'left' aligns buttons to the left\n   * - 'right' aligns buttons to the right\n   * @default 'left'\n   * @deprecated Use CalloutBanner.Action instead\n   */\n  alignButtons?: 'left' | 'right';\n  /**\n   * Layout of the body content\n   * - 'row' displays body content in a horizontal row\n   * - 'column' displays body content in a vertical column\n   * @default 'row'\n   */\n  headerLayout?: 'row' | 'column';\n  /**\n   * Optional prefix text to be added before the title to denote severity.\n   * E.g., \"Critical\", \"Success\", \"Information\"\n   * For i18m purposes, this should be provided by the consumer.\n   */\n  severityLabel?: string;\n  /**\n   * Optional ARIA role for the banner. Defaults to 'alert' for critical, 'status' for success/information, 'region' for neutral.\n   */\n  role?: React.AriaRole;\n}\n\nexport type CalloutBannerProps = CalloutBannerBaseProps & React.AriaAttributes;\n\nconst CALLOUT_BANNER_META = {\n  critical: {\n    icon: 'circle-exclamation',\n    severityLabel: 'Critical',\n    role: 'alert',\n  },\n  success: {\n    icon: 'check-circle',\n    severityLabel: 'Success',\n    role: 'status',\n  },\n  information: {\n    icon: 'info-circle',\n    severityLabel: 'Information',\n    role: 'status',\n  },\n  neutral: {\n    icon: 'check-circle',\n    severityLabel: '',\n    role: 'region',\n  },\n  accent: {\n    icon: 'house',\n    severityLabel: '',\n    role: 'region',\n  },\n} as const satisfies Record<\n  StyleVariant,\n  { icon: string; severityLabel: string; role: string }\n>;\n\nexport const CalloutBanner = ({\n  title,\n  description,\n  label,\n  children,\n  styleVariant = 'critical',\n  emphasis = 'primary',\n  headingLevel = 'h3',\n  dismissButtonTooltipLabel,\n  onDismiss,\n  customAsset,\n  hideIllustration = false,\n  alignButtons = 'left',\n  headerLayout = 'column',\n  severityLabel,\n  role,\n  dismissButtonProps = {\n    'aria-label': 'Dismiss banner',\n  },\n  ...ariaProps\n}: CalloutBannerProps) => {\n  const hasOnDismiss = typeof onDismiss === 'function';\n  const {\n    icon: iconName,\n    severityLabel: defaultSeverityLabel,\n    role: bannerRole,\n  } = CALLOUT_BANNER_META[styleVariant];\n\n  const HeadingBanner = headingLevel;\n  const titleId = React.useId();\n  const descriptionId = React.useId();\n  const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;\n  const resolvedRole = role || bannerRole;\n\n  // Get children, and separate out CalloutBanner.Action if present with body children\n  const childrenArray = React.Children.toArray(children);\n\n  // CalloutBanner.Action children\n  const action = childrenArray.find((child) => {\n    return React.isValidElement(child) && child.type === CalloutBannerAction;\n  }) as React.ReactElement<CalloutBannerActionProps> | undefined;\n\n  // Body children (excluding CalloutBanner.Action)\n  const bodyChildren = childrenArray.filter((child) => {\n    return !(React.isValidElement(child) && child.type === CalloutBannerAction);\n  });\n\n  const renderDescriptionContent = () => {\n    if (!description) return null;\n    return description;\n  };\n\n  const onlyTitle = !description;\n\n  return (\n    <div\n      className={calloutBanner({\n        emphasis,\n        styleVariant,\n      })}\n      role={resolvedRole}\n      aria-labelledby={titleId}\n      aria-describedby={description ? descriptionId : undefined}\n      {...ariaProps}\n    >\n      <div className={styles['calloutBanner__start']}>\n        {/* Allow users to change this icon */}\n        {!hideIllustration &&\n          (customAsset ? (\n            <div className={styles['calloutBanner__custom-asset']}>\n              {customAsset}\n            </div>\n          ) : (\n            <div\n              className={\n                onlyTitle\n                  ? styles['calloutBanner__default-asset--center']\n                  : undefined\n              }\n            >\n              <Icon\n                iconName={iconName}\n                iconPrefix=\"fas\"\n                className={styles['calloutBanner__icon']}\n                iconSize=\"1.25x\"\n                padding=\"roomy\"\n              />\n            </div>\n          ))}\n        <div className={styles['calloutBanner__meta']}>\n          {hasOnDismiss && (\n            <div className={styles['calloutBanner__dismiss']}>\n              <IconButton\n                onPress={onDismiss}\n                styleVariant=\"neutral\"\n                emphasis={emphasis === 'tertiary' ? 'tertiary' : 'primary'}\n                size=\"sm\"\n                iconProps={{\n                  iconName: 'close',\n                  iconPrefix: 'fas',\n                  iconSize: '1x',\n                }}\n                tooltipLabel={dismissButtonTooltipLabel}\n                {...dismissButtonProps}\n              />\n            </div>\n          )}\n          <div\n            className={[\n              styles['calloutBanner__meta-content'],\n              alignButtons === 'right'\n                ? styles['calloutBanner__meta-right']\n                : '',\n              headerLayout === 'row'\n                ? styles['calloutBanner__header--row']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div>\n              <div\n                className={`${styles['calloutBanner__meta-top']} ${\n                  hasOnDismiss ? styles['calloutBanner__meta-top-dismiss'] : ''\n                }`}\n              >\n                <HeadingBanner\n                  id={titleId}\n                  className={styles['calloutBanner__meta-title']}\n                >\n                  <span\n                    className={styles['calloutBanner__severity-label']}\n                    dir=\"auto\"\n                  >\n                    {resolvedSeverityLabel}\n                    {resolvedSeverityLabel ? ': ' : ''}\n                  </span>\n                  <bdi dir=\"auto\">{title}</bdi>\n                </HeadingBanner>\n                {description && (\n                  <p\n                    id={descriptionId}\n                    className={styles['calloutBanner__meta-description']}\n                  >\n                    {renderDescriptionContent()}\n                  </p>\n                )}\n              </div>\n            </div>\n            {label && (\n              <div className={styles['calloutBanner__meta-label']}>{label}</div>\n            )}\n            {action && (\n              <div className={styles['calloutBanner__meta-label']}>\n                {action.props.children}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n      {bodyChildren.length > 0 && (\n        <div className={styles['calloutBanner__end']}>{bodyChildren}</div>\n      )}\n    </div>\n  );\n};\n\n/***************************************\n * CalloutBanner.Action component\n ***************************************/\n\nexport type CalloutBannerActionProps = {\n  /**\n   * Children nodes to be rendered inside the CalloutBanner.Action\n   */\n  children: React.ReactNode;\n};\n\nexport const CalloutBannerAction = ({ children }: CalloutBannerActionProps) => {\n  return <div className={styles['calloutBanner__meta-label']}>{children}</div>;\n};\n\nCalloutBanner.Action = CalloutBannerAction;\n\nexport default CalloutBanner;\n"],"names":["calloutBanner","cva","styles","variants","emphasis","primary","secondary","tertiary","styleVariant","critical","success","information","neutral","accent","headerLayout","row","column","defaultVariants","CALLOUT_BANNER_META","icon","severityLabel","role","CalloutBanner","title","description","label","children","headingLevel","dismissButtonTooltipLabel","onDismiss","customAsset","hideIllustration","alignButtons","dismissButtonProps","ariaProps","hasOnDismiss","iconName","defaultSeverityLabel","bannerRole","HeadingBanner","titleId","React","useId","descriptionId","resolvedSeverityLabel","resolvedRole","childrenArray","Children","toArray","action","find","child","isValidElement","type","CalloutBannerAction","bodyChildren","filter","onlyTitle","jsxs","className","jsx","Icon","iconPrefix","iconSize","padding","IconButton","onPress","size","iconProps","tooltipLabel","Boolean","join","id","dir","props","length","Action"],"mappings":"yoDAMMA,EAAgBC,EAAIC,EAAOF,cAAe,CAC9CG,SAAU,CACRC,SAAU,CACRC,QAASH,EAAO,0BAChBI,UAAWJ,EAAO,4BAClBK,SAAUL,EAAO,4BAEnBM,aAAc,CACZC,SAAUP,EAAO,2BACjBQ,QAASR,EAAO,0BAChBS,YAAaT,EAAO,8BACpBU,QAASV,EAAO,0BAChBW,OAAQX,EAAO,0BAEjBY,aAAc,CACZC,IAAKb,EAAO,8BACZc,OAAQd,EAAO,kCAGnBe,gBAAiB,CACfb,SAAU,UACVI,aAAc,cAgHZU,EAAsB,CAC1BT,SAAU,CACRU,KAAM,qBACNC,cAAe,WACfC,KAAM,SAERX,QAAS,CACPS,KAAM,eACNC,cAAe,UACfC,KAAM,UAERV,YAAa,CACXQ,KAAM,cACNC,cAAe,cACfC,KAAM,UAERT,QAAS,CACPO,KAAM,eACNC,cAAe,GACfC,KAAM,UAERR,OAAQ,CACNM,KAAM,QACNC,cAAe,GACfC,KAAM,WAOGC,EAAgB,EAC3BC,QACAC,cACAC,QACAC,WACAlB,eAAe,WACfJ,WAAW,UACXuB,eAAe,KACfC,4BACAC,YACAC,cACAC,oBAAmB,EACnBC,eAAe,OACflB,eAAe,SACfM,gBACAC,OACAY,qBAAqB,CACnB,aAAc,qBAEbC,MAEH,MAAMC,EAAoC,mBAAdN,GAE1BV,KAAMiB,EACNhB,cAAeiB,EACfhB,KAAMiB,GACJpB,EAAoBV,GAElB+B,EAAgBZ,EAChBa,EAAUC,EAAMC,QAChBC,EAAgBF,EAAMC,QACtBE,EAAwBxB,GAAiBiB,EACzCQ,EAAexB,GAAQiB,EAGvBQ,EAAgBL,EAAMM,SAASC,QAAQtB,GAGvCuB,EAASH,EAAcI,KAAMC,GAC1BV,EAAMW,eAAeD,IAAUA,EAAME,OAASC,GAIjDC,EAAeT,EAAcU,OAAQL,KAChCV,EAAMW,eAAeD,IAAUA,EAAME,OAASC,IAQnDG,GAAajC;AAEnB,OACEkC,EAAC,MAAA,CACCC,UAAW3D,EAAc,CACvBI,WACAI,iBAEFa,KAAMwB,EACN,kBAAiBL,EACjB,mBAAkBhB,EAAcmB,OAAgB,KAC5CT,EAEJR,SAAA;iBAAC,MAAA,CAAIiC,UAAWzD,EAA6B,qBAE1CwB,SAAA,EAACK,kBAEE6B,EAAC,MADF9B,EACE,CAAI6B,UAAWzD,EAAO,+BACpBwB,SAAAI,GAGF,CACC6B,UACEF,EACIvD,EAAO,6CACP,EAGNwB,wBAAAkC,EAACC,EAAA,CACCzB,WACA0B,WAAW,MACXH,UAAWzD,EAA4B,oBACvC6D,SAAS,QACTC,QAAQ;iBAIf,MAAA,CAAIL,UAAWzD,EAA4B,oBACzCwB,SAAA,CAAAS,oBACE,MAAA,CAAIwB,UAAWzD,EAA+B,uBAC7CwB,wBAAAkC,EAACK,EAAA,CACCC,QAASrC,EACTrB,aAAa,UACbJ,SAAuB,aAAbA,EAA0B,WAAa,UACjD+D,KAAK,KACLC,UAAW,CACThC,SAAU,QACV0B,WAAY,MACZC,SAAU,MAEZM,aAAczC,KACVK;eAIVyB,EAAC,MAAA,CACCC,UAAW,CACTzD,EAAO,+BACU,UAAjB8B,EACI9B,EAAO,6BACP,GACa,QAAjBY,EACIZ,EAAO,8BACP,IAEHsD,OAAOc,SACPC,KAAK,KAER7C,SAAA;eAAAkC,EAAC,MAAA,CACClC,wBAAAgC,EAAC,MAAA,CACCC,UAAW,GAAGzD,EAAO,8BACnBiC,EAAejC,EAAO,mCAAqC,KAG7DwB,SAAA;eAAAgC,EAACnB,EAAA,CACCiC,GAAIhC,EACJmB,UAAWzD,EAAO,6BAElBwB,SAAA;eAAAgC,EAAC,OAAA,CACCC,UAAWzD,EAAO,iCAClBuE,IAAI,OAEH/C,SAAA,CAAAkB,EACAA,EAAwB,KAAO;iBAEjC,MAAA,CAAI6B,IAAI,OAAQ/C,SAAAH,OAElBC,kBACCoC,EAAC,IAAA,CACCY,GAAI7B,EACJgB,UAAWzD,EAAO,mCAEjBwB,SAhGZF,GAAoB,YAqGhBC,kBACCmC,EAAC,MAAA,CAAID,UAAWzD,EAAO,6BAA+BwB,SAAAD,IAEvDwB,oBACE,MAAA,CAAIU,UAAWzD,EAAO,6BACpBwB,SAAAuB,EAAOyB,MAAMhD,oBAMvB6B,EAAaoB,OAAS,kBACrBf,EAAC,OAAID,UAAWzD,EAA2B,mBAAIwB,SAAA6B,QAiB1CD,EAAsB,EAAG5B,+BAC5B,MAAA,CAAIiC,UAAWzD,EAAO,6BAA+BwB,aAG/DJ,EAAcsD,OAAStB"}
+{"version":3,"file":"CalloutBanner.js","sources":["../../../src/components/CalloutBanner/CalloutBanner.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './CalloutBanner.module.css';\nimport Icon from '../Icon';\nimport { cva } from 'class-variance-authority';\nimport IconButton from '../IconButton';\n\nconst calloutBannerClasses = cva(styles['callout-banner'], {\n  variants: {\n    emphasis: {\n      primary: styles['callout-banner--primary'],\n      secondary: styles['callout-banner--secondary'],\n      tertiary: styles['callout-banner--tertiary'],\n    },\n    styleVariant: {\n      critical: styles['callout-banner--critical'],\n      success: styles['callout-banner--success'],\n      information: styles['callout-banner--information'],\n      neutral: styles['callout-banner--neutral'],\n      accent: styles['callout-banner--accent'],\n    },\n    headerLayout: {\n      row: styles['callout-banner__header--row'],\n      column: styles['callout-banner__header-column'],\n    },\n  },\n  defaultVariants: {\n    emphasis: 'primary',\n    styleVariant: 'critical',\n  },\n});\n\ntype StyleVariant =\n  | 'critical'\n  | 'success'\n  | 'information'\n  | 'neutral'\n  | 'accent';\n\ntype DismissButtonProps = Omit<\n  React.ComponentProps<typeof IconButton>,\n  | 'onPress'\n  | 'iconProps'\n  | 'size'\n  | 'styleVariant'\n  | 'emphasis'\n  | 'tooltipLabel'\n>;\n\nexport interface CalloutBannerBaseProps {\n  /**\n   * The main heading text of the banner\n   */\n  title: string;\n  /**\n   * Optional secondary text providing more details\n   * Can be a string or React node\n   */\n  description?: string | React.ReactNode;\n  /**\n   * Optional emphasis style for the banner\n   * @default 'primary'\n   */\n  emphasis?: 'primary' | 'secondary' | 'tertiary';\n  /**\n   * Optional style variant for the banner\n   * - 'critical' for errors, urgent warnings\n   * - 'success' for confirmations, achievements\n   * - 'information' for For general updates, tips\n   * - 'neutral' for non-critical messages, guidance\n   * - 'accent' for any brand specific promotions or callouts\n   * @default 'critical'\n   */\n  styleVariant?: StyleVariant;\n  /**\n   * Optional button group to be rendered as a label\n   * @deprecated Use CalloutBanner.Action instead\n   */\n  label?: React.ReactNode;\n  /**\n   * Optional label for the dismiss button tooltip\n   */\n  dismissButtonTooltipLabel?: string;\n  /**\n   * Optional props for the dismiss icon button\n   */\n  dismissButtonProps?: DismissButtonProps;\n  /**\n   * Optional content to be rendered in the end section of the banner\n   */\n  children?: React.ReactNode;\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   * Optional callback function triggered when the dismiss button is clicked\n   */\n  onDismiss?: () => void;\n  /**\n   * Optional custom asset to be rendered instead of the default icon.\n   * Can use another icon, image, or any React node.\n   */\n  customAsset?: React.ReactNode;\n  /**\n   * Optional prop to hide the illustration\n   * @default false\n   */\n  hideIllustration?: boolean;\n  /**\n   * Optional prop to align buttons within the banner\n   * - 'left' aligns buttons to the left\n   * - 'right' aligns buttons to the right\n   * @default 'left'\n   * @deprecated Use CalloutBanner.Action instead\n   */\n  alignButtons?: 'left' | 'right';\n  /**\n   * Layout of the body content\n   * - 'row' displays body content in a horizontal row\n   * - 'column' displays body content in a vertical column\n   * @default 'row'\n   */\n  headerLayout?: 'row' | 'column';\n  /**\n   * Optional prefix text to be added before the title to denote severity.\n   * E.g., \"Critical\", \"Success\", \"Information\"\n   * For i18m purposes, this should be provided by the consumer.\n   */\n  severityLabel?: string;\n  /**\n   * Optional ARIA role for the banner. Defaults to 'alert' for critical, 'status' for success/information, 'region' for neutral.\n   */\n  role?: React.AriaRole;\n}\n\nexport type CalloutBannerProps = CalloutBannerBaseProps & React.AriaAttributes;\n\nconst CALLOUT_BANNER_META = {\n  critical: {\n    icon: 'circle-exclamation',\n    severityLabel: 'Critical',\n    role: 'alert',\n  },\n  success: {\n    icon: 'check-circle',\n    severityLabel: 'Success',\n    role: 'status',\n  },\n  information: {\n    icon: 'info-circle',\n    severityLabel: 'Information',\n    role: 'status',\n  },\n  neutral: {\n    icon: 'check-circle',\n    severityLabel: '',\n    role: 'region',\n  },\n  accent: {\n    icon: 'house',\n    severityLabel: '',\n    role: 'region',\n  },\n} as const satisfies Record<\n  StyleVariant,\n  { icon: string; severityLabel: string; role: string }\n>;\n\nexport const CalloutBanner = ({\n  title,\n  description,\n  label,\n  children,\n  styleVariant = 'critical',\n  emphasis = 'primary',\n  headingLevel = 'h3',\n  dismissButtonTooltipLabel,\n  onDismiss,\n  customAsset,\n  hideIllustration = false,\n  alignButtons = 'left',\n  headerLayout = 'column',\n  severityLabel,\n  role,\n  dismissButtonProps = {\n    'aria-label': 'Dismiss banner',\n  },\n  ...ariaProps\n}: CalloutBannerProps) => {\n  const hasOnDismiss = typeof onDismiss === 'function';\n  const {\n    icon: iconName,\n    severityLabel: defaultSeverityLabel,\n    role: bannerRole,\n  } = CALLOUT_BANNER_META[styleVariant];\n\n  const HeadingBanner = headingLevel;\n  const titleId = React.useId();\n  const descriptionId = React.useId();\n  const resolvedSeverityLabel = severityLabel ?? defaultSeverityLabel;\n  const resolvedRole = role || bannerRole;\n\n  // Get children, and separate out CalloutBanner.Action if present with body children\n  const childrenArray = React.Children.toArray(children);\n\n  // CalloutBanner.Action children\n  const action = childrenArray.find((child) => {\n    return React.isValidElement(child) && child.type === CalloutBannerAction;\n  }) as React.ReactElement<CalloutBannerActionProps> | undefined;\n\n  // Body children (excluding CalloutBanner.Action)\n  const bodyChildren = childrenArray.filter((child) => {\n    return !(React.isValidElement(child) && child.type === CalloutBannerAction);\n  });\n\n  const renderDescriptionContent = () => {\n    if (!description) return null;\n    return description;\n  };\n\n  const onlyTitle = !description;\n\n  return (\n    <div\n      className={calloutBannerClasses({\n        emphasis,\n        styleVariant,\n      })}\n      role={resolvedRole}\n      aria-labelledby={titleId}\n      aria-describedby={description ? descriptionId : undefined}\n      {...ariaProps}\n    >\n      <div className={styles['callout-banner__start']}>\n        {/* Allow users to change this icon */}\n        {!hideIllustration &&\n          (customAsset ? (\n            <div className={styles['callout-banner__custom-asset']}>\n              {customAsset}\n            </div>\n          ) : (\n            <div\n              className={\n                onlyTitle\n                  ? styles['callout-banner__default-asset--center']\n                  : undefined\n              }\n            >\n              <Icon\n                iconName={iconName}\n                iconPrefix=\"fas\"\n                className={styles['callout-banner__icon']}\n                iconSize=\"1.25x\"\n                padding=\"roomy\"\n              />\n            </div>\n          ))}\n        <div className={styles['callout-banner__meta']}>\n          {hasOnDismiss && (\n            <div className={styles['callout-banner__dismiss']}>\n              <IconButton\n                onPress={onDismiss}\n                styleVariant=\"neutral\"\n                emphasis={emphasis === 'tertiary' ? 'tertiary' : 'primary'}\n                size=\"sm\"\n                iconProps={{\n                  iconName: 'close',\n                  iconPrefix: 'fas',\n                  iconSize: '1x',\n                }}\n                tooltipLabel={dismissButtonTooltipLabel}\n                {...dismissButtonProps}\n              />\n            </div>\n          )}\n          <div\n            className={[\n              styles['callout-banner__meta-content'],\n              alignButtons === 'right'\n                ? styles['callout-banner__meta-right']\n                : '',\n              headerLayout === 'row'\n                ? styles['callout-banner__meta-content--row']\n                : '',\n            ]\n              .filter(Boolean)\n              .join(' ')}\n          >\n            <div>\n              <div\n                className={`${styles['callout-banner__meta-top']} ${\n                  hasOnDismiss ? styles['callout-banner__meta-top-dismiss'] : ''\n                }`}\n              >\n                <HeadingBanner\n                  id={titleId}\n                  className={styles['callout-banner__meta-title']}\n                >\n                  <span\n                    className={styles['callout-banner__severity-label']}\n                    dir=\"auto\"\n                  >\n                    {resolvedSeverityLabel}\n                    {resolvedSeverityLabel ? ': ' : ''}\n                  </span>\n                  <bdi dir=\"auto\">{title}</bdi>\n                </HeadingBanner>\n                {description && (\n                  <p\n                    id={descriptionId}\n                    className={styles['callout-banner__meta-description']}\n                  >\n                    {renderDescriptionContent()}\n                  </p>\n                )}\n              </div>\n            </div>\n            {label && (\n              <div className={styles['callout-banner__meta-label']}>\n                {label}\n              </div>\n            )}\n            {action && (\n              <div className={styles['callout-banner__meta-label']}>\n                {action.props.children}\n              </div>\n            )}\n          </div>\n        </div>\n      </div>\n      {bodyChildren.length > 0 && (\n        <div className={styles['callout-banner__end']}>{bodyChildren}</div>\n      )}\n    </div>\n  );\n};\n\n/***************************************\n * CalloutBanner.Action component\n ***************************************/\n\nexport type CalloutBannerActionProps = {\n  /**\n   * Children nodes to be rendered inside the CalloutBanner.Action\n   */\n  children: React.ReactNode;\n};\n\nexport const CalloutBannerAction = ({ children }: CalloutBannerActionProps) => {\n  return <div className={styles['callout-banner__meta-label']}>{children}</div>;\n};\n\nCalloutBanner.Action = CalloutBannerAction;\n\nexport default CalloutBanner;\n"],"names":["calloutBannerClasses","cva","styles","variants","emphasis","primary","secondary","tertiary","styleVariant","critical","success","information","neutral","accent","headerLayout","row","column","defaultVariants","CALLOUT_BANNER_META","icon","severityLabel","role","CalloutBanner","title","description","label","children","headingLevel","dismissButtonTooltipLabel","onDismiss","customAsset","hideIllustration","alignButtons","dismissButtonProps","ariaProps","hasOnDismiss","iconName","defaultSeverityLabel","bannerRole","HeadingBanner","titleId","React","useId","descriptionId","resolvedSeverityLabel","resolvedRole","childrenArray","Children","toArray","action","find","child","isValidElement","type","CalloutBannerAction","bodyChildren","filter","onlyTitle","jsxs","className","jsx","Icon","iconPrefix","iconSize","padding","IconButton","onPress","size","iconProps","tooltipLabel","Boolean","join","id","dir","props","length","Action"],"mappings":"+sDAMMA,EAAuBC,EAAIC,EAAO,kBAAmB,CACzDC,SAAU,CACRC,SAAU,CACRC,QAASH,EAAO,2BAChBI,UAAWJ,EAAO,6BAClBK,SAAUL,EAAO,6BAEnBM,aAAc,CACZC,SAAUP,EAAO,4BACjBQ,QAASR,EAAO,2BAChBS,YAAaT,EAAO,+BACpBU,QAASV,EAAO,2BAChBW,OAAQX,EAAO,2BAEjBY,aAAc,CACZC,IAAKb,EAAO,+BACZc,OAAQd,EAAO,mCAGnBe,gBAAiB,CACfb,SAAU,UACVI,aAAc,cAgHZU,EAAsB,CAC1BT,SAAU,CACRU,KAAM,qBACNC,cAAe,WACfC,KAAM,SAERX,QAAS,CACPS,KAAM,eACNC,cAAe,UACfC,KAAM,UAERV,YAAa,CACXQ,KAAM,cACNC,cAAe,cACfC,KAAM,UAERT,QAAS,CACPO,KAAM,eACNC,cAAe,GACfC,KAAM,UAERR,OAAQ,CACNM,KAAM,QACNC,cAAe,GACfC,KAAM,WAOGC,EAAgB,EAC3BC,QACAC,cACAC,QACAC,WACAlB,eAAe,WACfJ,WAAW,UACXuB,eAAe,KACfC,4BACAC,YACAC,cACAC,oBAAmB,EACnBC,eAAe,OACflB,eAAe,SACfM,gBACAC,OACAY,qBAAqB,CACnB,aAAc,qBAEbC,MAEH,MAAMC,EAAoC,mBAAdN,GAE1BV,KAAMiB,EACNhB,cAAeiB,EACfhB,KAAMiB,GACJpB,EAAoBV,GAElB+B,EAAgBZ,EAChBa,EAAUC,EAAMC,QAChBC,EAAgBF,EAAMC,QACtBE,EAAwBxB,GAAiBiB,EACzCQ,EAAexB,GAAQiB,EAGvBQ,EAAgBL,EAAMM,SAASC,QAAQtB,GAGvCuB,EAASH,EAAcI,KAAMC,GAC1BV,EAAMW,eAAeD,IAAUA,EAAME,OAASC,GAIjDC,EAAeT,EAAcU,OAAQL,KAChCV,EAAMW,eAAeD,IAAUA,EAAME,OAASC,IAQnDG,GAAajC;AAEnB,OACEkC,EAAC,MAAA,CACCC,UAAW3D,EAAqB,CAC9BI,WACAI,iBAEFa,KAAMwB,EACN,kBAAiBL,EACjB,mBAAkBhB,EAAcmB,OAAgB,KAC5CT,EAEJR,SAAA;iBAAC,MAAA,CAAIiC,UAAWzD,EAAO,yBAEpBwB,SAAA,EAACK,kBAEE6B,EAAC,MADF9B,EACE,CAAI6B,UAAWzD,EAAO,gCACpBwB,SAAAI,GAGF,CACC6B,UACEF,EACIvD,EAAO,8CACP,EAGNwB,wBAAAkC,EAACC,EAAA,CACCzB,WACA0B,WAAW,MACXH,UAAWzD,EAAO,wBAClB6D,SAAS,QACTC,QAAQ;iBAIf,MAAA,CAAIL,UAAWzD,EAAO,wBACpBwB,SAAA,CAAAS,oBACE,MAAA,CAAIwB,UAAWzD,EAAO,2BACrBwB,wBAAAkC,EAACK,EAAA,CACCC,QAASrC,EACTrB,aAAa,UACbJ,SAAuB,aAAbA,EAA0B,WAAa,UACjD+D,KAAK,KACLC,UAAW,CACThC,SAAU,QACV0B,WAAY,MACZC,SAAU,MAEZM,aAAczC,KACVK;eAIVyB,EAAC,MAAA,CACCC,UAAW,CACTzD,EAAO,gCACU,UAAjB8B,EACI9B,EAAO,8BACP,GACa,QAAjBY,EACIZ,EAAO,qCACP,IAEHsD,OAAOc,SACPC,KAAK,KAER7C,SAAA;eAAAkC,EAAC,MAAA,CACClC,wBAAAgC,EAAC,MAAA,CACCC,UAAW,GAAGzD,EAAO,+BACnBiC,EAAejC,EAAO,oCAAsC,KAG9DwB,SAAA;eAAAgC,EAACnB,EAAA,CACCiC,GAAIhC,EACJmB,UAAWzD,EAAO,8BAElBwB,SAAA;eAAAgC,EAAC,OAAA,CACCC,UAAWzD,EAAO,kCAClBuE,IAAI,OAEH/C,SAAA,CAAAkB,EACAA,EAAwB,KAAO;iBAEjC,MAAA,CAAI6B,IAAI,OAAQ/C,SAAAH,OAElBC,kBACCoC,EAAC,IAAA,CACCY,GAAI7B,EACJgB,UAAWzD,EAAO,oCAEjBwB,SAhGZF,GAAoB,YAqGhBC,kBACCmC,EAAC,MAAA,CAAID,UAAWzD,EAAO,8BACpBwB,SAAAD,IAGJwB,oBACE,MAAA,CAAIU,UAAWzD,EAAO,8BACpBwB,SAAAuB,EAAOyB,MAAMhD,oBAMvB6B,EAAaoB,OAAS,kBACrBf,EAAC,OAAID,UAAWzD,EAAO,uBAAyBwB,SAAA6B,QAiB3CD,EAAsB,EAAG5B,+BAC5B,MAAA,CAAIiC,UAAWzD,EAAO,8BAAgCwB,aAGhEJ,EAAcsD,OAAStB"}

package/dist/components/Carousel/Carousel.js

@@ -1,9 +1,9 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as a,useState as n,useCallback as o,useEffect as i}from"react";import{c as s}from"../../index-CCUt_dAN.js";import{C as l,a as u,b as d,c,d as m}from"../../IconButton.module-C7YCy-MU.js";import{CarouselButton as f}from"./CarouselButton/CarouselButton.js";import{CarouselDots as h}from"./CarouselDots/CarouselDots.js";import{AutoplayControl as p}from"./AutoplayControl/AutoplayControl.js";import{focusStyleVariants as v}from"../../utils/focus/focusStyles.js";import{useFocusRing as y}from"@react-aria/focus";import{resolveResponsiveProp as g}from"../../utils/breakpoint/responsive.js";import{useBreakpoint as b}from"../../utils/breakpoint/hooks/useBreakpoint.js";import '../../assets/Carousel.css';const w={carouselWrapper:"_carouselWrapper_1uhyq_2",showPartialItems:"_showPartialItems_1uhyq_14",carousel:"_carousel_1uhyq_2",hasScrollPadding:"_hasScrollPadding_1uhyq_25",scroller:"_scroller_1uhyq_43",item:"_item_1uhyq_78",slideLeft:"_slideLeft_1uhyq_127",slideRight:"_slideRight_1uhyq_131",controls:"_controls_1uhyq_154",defaultPrevButton:"_defaultPrevButton_1uhyq_165",defaultNextButton:"_defaultNextButton_1uhyq_173",defaultDotsContainer:"_defaultDotsContainer_1uhyq_182",defaultCarouselWrapper:"_defaultCarouselWrapper_1uhyq_193",defaultAutoplayControl:"_defaultAutoplayControl_1uhyq_200",showOnHover:"_showOnHover_1uhyq_209",hidden:"_hidden_1uhyq_219",hiddenTabs:"_hiddenTabs_1uhyq_250",autoplayControlWrapper:"_autoplayControlWrapper_1uhyq_268"},_=s(w.carousel,{variants:{looping:{infinite:w.infinite,backToStart:w.native,off:void 0}}}),C=({children:s=[],"aria-label":C,"aria-describedby":x,looping:N="off",itemsPerPage:A=1,spaceBetweenItems:S=0,scrollPadding:P,iconType:q="chevron",arrowStyleVariant:L="neutral",arrowSize:M="md",hideDisabledArrow:E=!1,showArrowsOnHover:T=!1,focusStyle:D="default",dotsSize:$="md",dotsVariant:I="standard",hideDots:W=!1,autoPlay:k=!1,autoPlayInterval:B=2e3,autoPlayStyleVariant:j="neutralVibrant",autoPlayControlSize:z="md",mouseDragging:R=!0,carouselWrapperClassName:F="",prevArrowClassName:H="",nextArrowClassName:O="",autoplayControlClassName:V="",dotsContainerClassName:Y="",dotsWrapperClassName:X="",dotClassName:G="",activeDotClassName:K="",itemWrapperClassName:J="",scrollerClassName:Q="",activeItemClassName:U="",onArrowPress:Z,onDotPress:ee,onAutoplayPress:te,controlsRef:re,onNavigationStateChange:ae})=>{const ne=r.Children.toArray(s),oe=ne.length,ie=b(),se=g(A,ie)??1,le=g(S,ie)??0,ue=g(P,ie)??void 0,de=g(M,ie)??"md",ce=g(W,ie)??!1,me=Math.max(1,se),fe=Math.max(1,Math.floor(me)),he=r.useMemo(()=>{const e=Array.from({length:oe},(e,t)=>t).reduce((e,t)=>{const r=e.at(-1);return r&&r.length<fe?r.push(t):e.push([t]),e},[]);if(e.length>=2){const t=fe-e.at(-1).length;if(t>0){const r=[...e.at(-2)].splice(fe-t);e.at(-1).unshift(...r)}}return e},[oe,fe]),pe=a(null),ve=a(null),ye=a(null),ge=a(null),be=a(null),we=a([]),[_e,Ce]=n(0),[xe,Ne]=n(0),[Ae,Se]=n(!1),[Pe,qe]=n(he.length>1),[Le,Me]=n(0),[Ee,Te]=n(0),[De,$e]=n(!1),[Ie,We]=n(!1),[ke,Be]=n(!1),[je]=n(!1),[ze,Re]=n(null),Fe="infinite"===N?"infinite":"backToStart"===N?"native":"off"!==N?N:void 0,He=Le>0?Le:he.length,Oe=!ce&&He>1,Ve=(e,t)=>e||t,Ye=o(()=>pe.current?.querySelector('[data-carousel-scroller="true"]'),[]),Xe=o((e,t)=>{const r=t*Math.max(1,Math.floor(me)),a=e.querySelector(`[data-item-index="${r}"]`);if(!a)return!1;const n=e.getBoundingClientRect(),o=a.getBoundingClientRect(),i=parseFloat(getComputedStyle(e).paddingLeft)||0,s=Math.max(0,e.scrollWidth-e.clientWidth),l=e.scrollLeft+(o.left-n.left)-i,u=Math.min(Math.max(0,l),s);return e.scrollTo({left:u,behavior:"smooth"}),!0},[me]),Ge=o(e=>{if(!(e===_e||e<0||e>=He)&&pe.current){const t=pe.current.querySelector(`[data-slide-tab="true"][data-index="${e}"]`);t&&(t.click(),Ne(_e),Ce(e))}},[_e,He]),Ke=o(()=>{if(!pe.current||He<=1)return;const e=pe.current.querySelector('[data-carousel-scroller="true"]');if(!e)return;const t=Array.from(e.querySelectorAll("[data-item-index]"));if(!t.length)return;const r=e.getBoundingClientRect().left;let a=0,n=Number.POSITIVE_INFINITY;t.forEach(e=>{const t=parseInt(e.dataset.itemIndex??"",10);if(Number.isNaN(t))return;const o=Math.abs(e.getBoundingClientRect().left-r);o<n&&(n=o,a=t)});const o=Math.max(1,Math.floor(me)),i=Math.min(He-1,Math.floor(a/o));i!==_e&&(Ne(_e),Ce(i))},[_e,me,He]),Je=o(()=>{const e=Ye();if(e){const t=Math.max(0,_e-1);return Xe(e,t)||e.scrollBy({left:-e.clientWidth,behavior:"smooth"}),Ne(_e),Ce(t),void window.setTimeout(()=>{Ke()},200)}_e<=0||Ge(_e-1)},[_e,Ye,Ge,Xe,Ke]),Qe=o(()=>{const e=Ye();if(e){const t=Math.min(He-1,_e+1);return Xe(e,t)||e.scrollBy({left:e.clientWidth,behavior:"smooth"}),Ne(_e),Ce(t),void window.setTimeout(()=>{Ke()},200)}_e>=He-1||Ge(_e+1)},[_e,Ye,Ge,Xe,Ke,He]);i(()=>{const e=((e,t,r,a)=>({canGoPrev:e,canGoNext:t,currentPage:r,totalPages:a}))(Ae||_e>0,Pe||_e<He-1,_e,He);if(re)return re.current={prev:Je,next:Qe,goToSlide:Ge,...e},ae?.(e),()=>{re.current&&(re.current=null)};ae?.(e)},[re,Pe,Ae,_e,Qe,Je,Ge,ae,He]),i(()=>()=>{null!==ye.current&&window.clearTimeout(ye.current),null!==ge.current&&window.clearTimeout(ge.current)},[]),i(()=>{if(!pe.current||!R)return;const e=e=>{if(!De)return;const t=e.target;if(!(t instanceof Element))return;t.closest("a[href]")&&(e.preventDefault(),e.stopPropagation(),setTimeout(()=>{$e(!1)},0))},t=e=>{Re({x:e.clientX,y:e.clientY})},r=e=>{if(null===ze)return;const t=Math.abs(e.clientX-ze.x),r=Math.abs(e.clientY-ze.y);Math.sqrt(t*t+r*r)>5&&$e(!0)},a=()=>{De?setTimeout(()=>{$e(!1),Re(null)},50):Re(null)},n=pe.current;return n.addEventListener("mousedown",t,!0),n.addEventListener("mousemove",r,!0),n.addEventListener("mouseup",a,!0),n.addEventListener("click",e,!0),()=>{n.removeEventListener("mousedown",t,!0),n.removeEventListener("mousemove",r,!0),n.removeEventListener("mouseup",a,!0),n.removeEventListener("click",e,!0)}},[R,De,ze,5]),i(()=>{if(pe.current){const e=pe.current.querySelector(`.${w.scroller}`);e&&e instanceof HTMLElement&&(xe<_e?(e.classList.remove(w.slideLeft),e.classList.add(w.slideRight)):xe>_e&&(e.classList.remove(w.slideRight),e.classList.add(w.slideLeft)))}},[_e,xe]),i(()=>{const e=pe.current;if(!e)return;let t=null;const r=()=>{null===t&&(t=window.requestAnimationFrame(()=>{t=null,(()=>{const t=e.querySelectorAll('[data-slide-tab="true"]').length;Me(e=>e===t?e:t)})()}))},a=new MutationObserver(()=>{r()});return a.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-tab"]}),r(),()=>{null!==t&&window.cancelAnimationFrame(t),a.disconnect()}},[oe,me]),i(()=>{const e=Ye()??be.current;if(!e)return;let t=null;const r=()=>{null===t&&(t=window.requestAnimationFrame(()=>{t=null,a()}))},a=()=>{const t=Math.max(0,e.scrollWidth-e.clientWidth),r=e.scrollLeft,a=.01,n=t>a,o=n?r>a:_e>0,i=n?r<t-a:_e<He-1,s=we.current.length>0?we.current:Array.from(e.querySelectorAll("[data-item-index]"));0===we.current.length&&(we.current=s);const l=r+(parseFloat(getComputedStyle(e).paddingLeft)||0)+a,u=s.find(e=>e.offsetLeft+e.offsetWidth>l)?.dataset.itemIndex??"0",d=parseInt(u,10),c=Number.isNaN(d)?0:d,m=Math.max(1,Math.ceil(me)),f=c+m-1;s.forEach(e=>{const t=e.dataset.itemIndex;if("string"!=typeof t)return;const r=parseInt(t,10);if(Number.isNaN(r))return;r>=c&&r<=f?(e.removeAttribute("inert"),e.removeAttribute("aria-hidden")):(e.setAttribute("inert","true"),e.setAttribute("aria-hidden","true"))});const h=he.map(e=>e[0]).reduce((e,t,r)=>t<=c?r:e,0),p=n?h:_e;Se(e=>e===o?e:o),qe(e=>e===i?e:i),Te(e=>e===c?e:c),Ce(e=>(e!==p&&Ne(e),e===p?e:p))},n=new ResizeObserver(()=>{r()});n.observe(e);(()=>{const t=Array.from(e.querySelectorAll("[data-item-index]"));return we.current=t,t})().forEach(e=>{n.observe(e)});const o=()=>{r()};return e.addEventListener("load",o,!0),a(),e.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",r),()=>{null!==t&&window.cancelAnimationFrame(t),n.disconnect(),e.removeEventListener("load",o,!0),e.removeEventListener("scroll",a),window.removeEventListener("resize",r),we.current=[]}},[_e,Ye,he,me,He,oe]);const Ue=T?{onMouseEnter:()=>We(!0),onMouseLeave:()=>We(!1),onFocus:()=>Be(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||Be(!1)}}:{},Ze=He>1&&(!T||Ie||ke),et=(()=>{const e={};return 1!==se&&(e["--items-per-page"]=String(me)),le>0&&(e["--space-between-items"]=`${le}px`),ue&&(e["--scroll-padding"]=ue),Object.keys(e).length>0?e:void 0})(),{focusProps:tt,isFocusVisible:rt}=y(),at=he[_e]??[];/* @__PURE__ */
-return e("div",{className:(()=>{const e=[w.carouselWrapper];return Number.isInteger(me)||e.push(w.showPartialItems),ue&&e.push(w.hasScrollPadding),F&&F.trim()?e.push(F):e.push(w.defaultCarouselWrapper),e.join(" ")})(),ref:pe,style:et,"data-dots-size":$,...Ue,"data-arrows-visible":Ze?"true":"false","data-transitioning":je?"true":void 0,"data-scroll-padding":ue,role:"region","aria-label":(()=>{if(C)return C;return`Carousel with ${oe} items, currently showing slide ${_e+1} of ${He}${k?", autoplay enabled":""}`})(),"aria-describedby":x,"aria-roledescription":"carousel",children:/* @__PURE__ */t(l,{className:`${_({looping:N})}`,loop:Fe,ref:ve,autoplay:k,autoplayInterval:B,mouseDragging:R&&!je,onActivePageIndexChange:({index:e})=>{Ce(t=>(t!==e&&Ne(t),e))},onDragStart:e=>{$e(!0),e&&e.nativeEvent&&Re({x:e.nativeEvent.clientX,y:e.nativeEvent.clientY})},onDragEnd:()=>{null!==ye.current&&window.clearTimeout(ye.current),null!==ge.current&&window.clearTimeout(ge.current),ye.current=window.setTimeout(()=>{$e(!1),Ke()},50),ge.current=window.setTimeout(()=>{Ke()},150)},"data-dragging":De?"true":"false",itemsPerPage:me,scrollPadding:ue,"data-has-space-between":le>0?"true":void 0,"data-items-per-page":1!==se?me.toString():void 0,children:[
-/* @__PURE__ */e(u,{className:`${w.scroller} ${v({focusStyle:D})} ${Q}`.trim(),ref:be,"data-carousel-scroller":"true",...tt,"data-focused":!!rt||void 0,"data-focus-visible":!!rt||void 0,"data-transitioning":je?"true":void 0,style:(()=>{const e={};if(le>=0&&(e.gap=`${le}px`),se>1&&le>0){const t=le*(me-1)/me;e.gridAutoColumns=`calc(${100/me}% - ${t}px)`}else se>1&&(e.gridAutoColumns=100/me+"%");return e})(),tabIndex:0,role:"region","aria-label":"Carousel content",onKeyDown:e=>{if("ArrowLeft"===e.key){e.preventDefault();const t=pe.current?.querySelector('[dir="prev"]');t&&!t.disabled&&t.click()}else if("ArrowRight"===e.key){e.preventDefault();const t=pe.current?.querySelector('[dir="next"]');t&&!t.disabled&&t.click()}else"Home"===e.key?(e.preventDefault(),Ge(0)):"End"===e.key&&(e.preventDefault(),Ge(He-1))},children:ne.map((t,r)=>{const a=at.includes(r),n=[J||"",w.item,a&&U?U:""].filter(Boolean).join(" ");/* @__PURE__ */
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as a,useState as n,useCallback as o,useEffect as i}from"react";import{c as s}from"../../index-CCUt_dAN.js";import{C as l,a as u,b as d,c,d as m}from"../../IconButton.module-C7YCy-MU.js";import{CarouselButton as f}from"./CarouselButton/CarouselButton.js";import{CarouselDots as p}from"./CarouselDots/CarouselDots.js";import{AutoplayControl as h}from"./AutoplayControl/AutoplayControl.js";import{focusStyleVariants as v}from"../../utils/focus/focusStyles.js";import{useFocusRing as g}from"@react-aria/focus";import{resolveResponsiveProp as y}from"../../utils/breakpoint/responsive.js";import{useBreakpoint as b}from"../../utils/breakpoint/hooks/useBreakpoint.js";import '../../assets/Carousel.css';const w={carouselWrapper:"_carouselWrapper_1gfyq_2",showPartialItems:"_showPartialItems_1gfyq_14",carousel:"_carousel_1gfyq_2",hasScrollPadding:"_hasScrollPadding_1gfyq_25",scroller:"_scroller_1gfyq_43",item:"_item_1gfyq_84",slideLeft:"_slideLeft_1gfyq_127",slideRight:"_slideRight_1gfyq_131",controls:"_controls_1gfyq_154",defaultPrevButton:"_defaultPrevButton_1gfyq_165",defaultNextButton:"_defaultNextButton_1gfyq_173",defaultDotsContainer:"_defaultDotsContainer_1gfyq_182",defaultCarouselWrapper:"_defaultCarouselWrapper_1gfyq_193",defaultAutoplayControl:"_defaultAutoplayControl_1gfyq_200",showOnHover:"_showOnHover_1gfyq_209",hidden:"_hidden_1gfyq_219",hiddenTabs:"_hiddenTabs_1gfyq_250",autoplayControlWrapper:"_autoplayControlWrapper_1gfyq_268"},_=s(w.carousel,{variants:{looping:{infinite:w.infinite,backToStart:w.native,off:void 0}}}),C=({children:s=[],"aria-label":C,"aria-describedby":x,looping:N="off",itemsPerPage:A=1,spaceBetweenItems:S=0,scrollPadding:P,iconType:q="chevron",arrowStyleVariant:L="neutral",arrowSize:M="md",hideDisabledArrow:E=!1,showArrowsOnHover:T=!1,focusStyle:D="default",dotsSize:$="md",dotsVariant:I="standard",hideDots:W=!1,autoPlay:k=!1,autoPlayInterval:B=2e3,autoPlayStyleVariant:j="neutralVibrant",autoPlayControlSize:z="md",mouseDragging:R=!0,carouselWrapperClassName:F="",prevArrowClassName:H="",nextArrowClassName:O="",autoplayControlClassName:V="",dotsContainerClassName:Y="",dotsWrapperClassName:X="",dotClassName:G="",activeDotClassName:K="",itemWrapperClassName:J="",scrollerClassName:Q="",activeItemClassName:U="",onArrowPress:Z,onDotPress:ee,onAutoplayPress:te,controlsRef:re,onNavigationStateChange:ae})=>{const ne=r.Children.toArray(s),oe=ne.length,ie=b(),se=y(A,ie)??1,le=y(S,ie)??0,ue=y(P,ie)??void 0,de=y(M,ie)??"md",ce=y(W,ie)??!1,me=Math.max(1,se),fe=Math.max(1,Math.floor(me)),pe=r.useMemo(()=>{const e=Array.from({length:oe},(e,t)=>t).reduce((e,t)=>{const r=e.at(-1);return r&&r.length<fe?r.push(t):e.push([t]),e},[]);if(e.length>=2){const t=fe-e.at(-1).length;if(t>0){const r=[...e.at(-2)].splice(fe-t);e.at(-1).unshift(...r)}}return e},[oe,fe]),he=a(null),ve=a(null),ge=a(null),ye=a(null),be=a(null),we=a([]),[_e,Ce]=n(0),[xe,Ne]=n(0),[Ae,Se]=n(!1),[Pe,qe]=n(pe.length>1),[Le,Me]=n(0),[Ee,Te]=n(0),[De,$e]=n(!1),[Ie,We]=n(!1),[ke,Be]=n(!1),[je]=n(!1),[ze,Re]=n(null),Fe="infinite"===N?"infinite":"backToStart"===N?"native":"off"!==N?N:void 0,He=Le>0?Le:pe.length,Oe=!ce&&He>1,Ve=(e,t)=>e||t,Ye=o(()=>he.current?.querySelector('[data-carousel-scroller="true"]'),[]),Xe=o((e,t)=>{const r=t*Math.max(1,Math.floor(me)),a=e.querySelector(`[data-item-index="${r}"]`);if(!a)return!1;const n=e.getBoundingClientRect(),o=a.getBoundingClientRect(),i=parseFloat(getComputedStyle(e).paddingLeft)||0,s=Math.max(0,e.scrollWidth-e.clientWidth),l=e.scrollLeft+(o.left-n.left)-i,u=Math.min(Math.max(0,l),s);return e.scrollTo({left:u,behavior:"smooth"}),!0},[me]),Ge=o(e=>{if(!(e===_e||e<0||e>=He)&&he.current){const t=he.current.querySelector(`[data-slide-tab="true"][data-index="${e}"]`);t&&(t.click(),Ne(_e),Ce(e))}},[_e,He]),Ke=o(()=>{if(!he.current||He<=1)return;const e=he.current.querySelector('[data-carousel-scroller="true"]');if(!e)return;const t=Array.from(e.querySelectorAll("[data-item-index]"));if(!t.length)return;const r=e.getBoundingClientRect().left;let a=0,n=Number.POSITIVE_INFINITY;t.forEach(e=>{const t=parseInt(e.dataset.itemIndex??"",10);if(Number.isNaN(t))return;const o=Math.abs(e.getBoundingClientRect().left-r);o<n&&(n=o,a=t)});const o=Math.max(1,Math.floor(me)),i=Math.min(He-1,Math.floor(a/o));i!==_e&&(Ne(_e),Ce(i))},[_e,me,He]),Je=o(()=>{const e=Ye();if(e){const t=Math.max(0,_e-1);return Xe(e,t)||e.scrollBy({left:-e.clientWidth,behavior:"smooth"}),Ne(_e),Ce(t),void window.setTimeout(()=>{Ke()},200)}_e<=0||Ge(_e-1)},[_e,Ye,Ge,Xe,Ke]),Qe=o(()=>{const e=Ye();if(e){const t=Math.min(He-1,_e+1);return Xe(e,t)||e.scrollBy({left:e.clientWidth,behavior:"smooth"}),Ne(_e),Ce(t),void window.setTimeout(()=>{Ke()},200)}_e>=He-1||Ge(_e+1)},[_e,Ye,Ge,Xe,Ke,He]);i(()=>{const e=((e,t,r,a)=>({canGoPrev:e,canGoNext:t,currentPage:r,totalPages:a}))(Ae||_e>0,Pe||_e<He-1,_e,He);if(re)return re.current={prev:Je,next:Qe,goToSlide:Ge,...e},ae?.(e),()=>{re.current&&(re.current=null)};ae?.(e)},[re,Pe,Ae,_e,Qe,Je,Ge,ae,He]),i(()=>()=>{null!==ge.current&&window.clearTimeout(ge.current),null!==ye.current&&window.clearTimeout(ye.current)},[]),i(()=>{if(!he.current||!R)return;const e=e=>{if(!De)return;const t=e.target;if(!(t instanceof Element))return;t.closest("a[href]")&&(e.preventDefault(),e.stopPropagation(),setTimeout(()=>{$e(!1)},0))},t=e=>{Re({x:e.clientX,y:e.clientY})},r=e=>{if(null===ze)return;const t=Math.abs(e.clientX-ze.x),r=Math.abs(e.clientY-ze.y);Math.sqrt(t*t+r*r)>5&&$e(!0)},a=()=>{De?setTimeout(()=>{$e(!1),Re(null)},50):Re(null)},n=he.current;return n.addEventListener("mousedown",t,!0),n.addEventListener("mousemove",r,!0),n.addEventListener("mouseup",a,!0),n.addEventListener("click",e,!0),()=>{n.removeEventListener("mousedown",t,!0),n.removeEventListener("mousemove",r,!0),n.removeEventListener("mouseup",a,!0),n.removeEventListener("click",e,!0)}},[R,De,ze,5]),i(()=>{if(he.current){const e=he.current.querySelector(`.${w.scroller}`);e&&e instanceof HTMLElement&&(xe<_e?(e.classList.remove(w.slideLeft),e.classList.add(w.slideRight)):xe>_e&&(e.classList.remove(w.slideRight),e.classList.add(w.slideLeft)))}},[_e,xe]),i(()=>{const e=he.current;if(!e)return;let t=null;const r=()=>{null===t&&(t=window.requestAnimationFrame(()=>{t=null,(()=>{const t=e.querySelectorAll('[data-slide-tab="true"]').length;Me(e=>e===t?e:t)})()}))},a=new MutationObserver(()=>{r()});return a.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-tab"]}),r(),()=>{null!==t&&window.cancelAnimationFrame(t),a.disconnect()}},[oe,me]),i(()=>{const e=Ye()??be.current;if(!e)return;let t=null;const r=()=>{null===t&&(t=window.requestAnimationFrame(()=>{t=null,a()}))},a=()=>{const t=Math.max(0,e.scrollWidth-e.clientWidth),r=e.scrollLeft,a=.01,n=t>a,o=n?r>a:_e>0,i=n?r<t-a:_e<He-1,s=we.current.length>0?we.current:Array.from(e.querySelectorAll("[data-item-index]"));0===we.current.length&&(we.current=s);const l=r+(parseFloat(getComputedStyle(e).paddingLeft)||0)+a,u=s.find(e=>e.offsetLeft+e.offsetWidth>l)?.dataset.itemIndex??"0",d=parseInt(u,10),c=Number.isNaN(d)?0:d,m=Math.max(1,Math.ceil(me)),f=c+m-1;s.forEach(e=>{const t=e.dataset.itemIndex;if("string"!=typeof t)return;const r=parseInt(t,10);if(Number.isNaN(r))return;r>=c&&r<=f?(e.removeAttribute("inert"),e.removeAttribute("aria-hidden")):(e.setAttribute("inert","true"),e.setAttribute("aria-hidden","true"))});const p=pe.map(e=>e[0]).reduce((e,t,r)=>t<=c?r:e,0),h=n?p:_e;Se(e=>e===o?e:o),qe(e=>e===i?e:i),Te(e=>e===c?e:c),Ce(e=>(e!==h&&Ne(e),e===h?e:h))},n=new ResizeObserver(()=>{r()});n.observe(e);(()=>{const t=Array.from(e.querySelectorAll("[data-item-index]"));return we.current=t,t})().forEach(e=>{n.observe(e)});const o=()=>{r()};return e.addEventListener("load",o,!0),a(),e.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",r),()=>{null!==t&&window.cancelAnimationFrame(t),n.disconnect(),e.removeEventListener("load",o,!0),e.removeEventListener("scroll",a),window.removeEventListener("resize",r),we.current=[]}},[_e,Ye,pe,me,He,oe]);const Ue=T?{onMouseEnter:()=>We(!0),onMouseLeave:()=>We(!1),onFocus:()=>Be(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||Be(!1)}}:{},Ze=He>1&&(!T||Ie||ke),et=(()=>{const e={};return 1!==se&&(e["--items-per-page"]=String(me)),le>0&&(e["--space-between-items"]=`${le}px`),ue&&(e["--scroll-padding"]=ue),Object.keys(e).length>0?e:void 0})(),{focusProps:tt,isFocusVisible:rt}=g(),at=pe[_e]??[];/* @__PURE__ */
+return e("div",{className:(()=>{const e=[w.carouselWrapper];return Number.isInteger(me)||e.push(w.showPartialItems),ue&&e.push(w.hasScrollPadding),F&&F.trim()?e.push(F):e.push(w.defaultCarouselWrapper),e.join(" ")})(),ref:he,style:et,"data-dots-size":$,...Ue,"data-arrows-visible":Ze?"true":"false","data-transitioning":je?"true":void 0,"data-scroll-padding":ue,role:"region","aria-label":(()=>{if(C)return C;return`Carousel with ${oe} items, currently showing slide ${_e+1} of ${He}${k?", autoplay enabled":""}`})(),"aria-describedby":x,"aria-roledescription":"carousel",children:/* @__PURE__ */t(l,{className:`${_({looping:N})}`,loop:Fe,ref:ve,autoplay:k,autoplayInterval:B,mouseDragging:R&&!je,onActivePageIndexChange:({index:e})=>{Ce(t=>(t!==e&&Ne(t),e))},onDragStart:e=>{$e(!0),e&&e.nativeEvent&&Re({x:e.nativeEvent.clientX,y:e.nativeEvent.clientY})},onDragEnd:()=>{null!==ge.current&&window.clearTimeout(ge.current),null!==ye.current&&window.clearTimeout(ye.current),ge.current=window.setTimeout(()=>{$e(!1),Ke()},50),ye.current=window.setTimeout(()=>{Ke()},150)},"data-dragging":De?"true":"false",itemsPerPage:me,scrollPadding:ue,"data-has-space-between":le>0?"true":void 0,"data-items-per-page":1!==se?me.toString():void 0,children:[
+/* @__PURE__ */e(u,{className:`${w.scroller} ${v({focusStyle:D})} ${Q}`.trim(),ref:be,"data-carousel-scroller":"true",...tt,"data-focused":!!rt||void 0,"data-focus-visible":!!rt||void 0,"data-transitioning":je?"true":void 0,style:(()=>{const e={};if(le>=0&&(e.gap=`${le}px`),se>1&&le>0){const t=le*(me-1)/me;e.gridAutoColumns=`calc(${100/me}% - ${t}px)`}else se>1&&(e.gridAutoColumns=100/me+"%");return e})(),tabIndex:0,role:"region","aria-label":"Carousel content",onKeyDown:e=>{if("ArrowLeft"===e.key){e.preventDefault();const t=he.current?.querySelector('[dir="prev"]');t&&!t.disabled&&t.click()}else if("ArrowRight"===e.key){e.preventDefault();const t=he.current?.querySelector('[dir="next"]');t&&!t.disabled&&t.click()}else"Home"===e.key?(e.preventDefault(),Ge(0)):"End"===e.key&&(e.preventDefault(),Ge(He-1))},children:ne.map((t,r)=>{const a=at.includes(r),n=[J||"",w.item,a&&U?U:""].filter(Boolean).join(" ");/* @__PURE__ */
 return e(d,{className:n,"data-is-active":a?"true":void 0,"data-item-index":r,"aria-label":`Slide ${r+1} of ${oe}`,children:t},r)})}),
 /* @__PURE__ */t("div",{className:`${w.controls} ${T?w.showOnHover:""}`,children:[
 /* @__PURE__ */e(f,{dir:"prev",variant:L,size:de,focusStyle:D,iconType:q,hideDisabledArrow:E,overrideHideDisabledArrow:Fe?void 0:!Ae,onClick:Fe?void 0:()=>Ge(Ae?Ee<=0?0:Math.max(0,Math.ceil(Ee/fe)-1):_e),onPress:()=>Z?.("prev"),className:`${Ve(H,w.defaultPrevButton)} ${Ze?"":w.hidden}`}),
 /* @__PURE__ */e(f,{dir:"next",variant:L,size:de,focusStyle:D,iconType:q,hideDisabledArrow:E,overrideHideDisabledArrow:Fe?void 0:!Pe,onClick:Fe?void 0:()=>Ge(Pe?Math.min(He-1,Math.floor(Ee/fe)+1):_e),onPress:()=>Z?.("next"),className:`${Ve(O,w.defaultNextButton)} ${Ze?"":w.hidden}`})]}),
-/* @__PURE__ */e("div",{className:w.hiddenTabs,children:/* @__PURE__ */e(c,{children:t=>/* @__PURE__ */e(m,{index:t.index,"data-index":t.index,"data-slide-tab":"true",tabIndex:-1},t.index)})}),k&&/* @__PURE__ */e("div",{className:`${w.autoplayControlWrapper} ${Ve(V,w.defaultAutoplayControl)}`,children:/* @__PURE__ */e(p,{variant:j,size:z,className:"",onPress:te})}),Oe&&/* @__PURE__ */e(h,{totalItems:He,currentPage:_e,onDotClick:e=>Ge(e),onPress:ee,focusStyle:D,dotsSize:$,variant:I,className:Ve(Y,w.defaultDotsContainer),dotsWrapperClassName:X,dotClassName:G,activeDotClassName:K,isTransitioning:je})]})})};export{C as Carousel,C as default};
+/* @__PURE__ */e("div",{className:w.hiddenTabs,children:/* @__PURE__ */e(c,{children:t=>/* @__PURE__ */e(m,{index:t.index,"data-index":t.index,"data-slide-tab":"true",tabIndex:-1},t.index)})}),k&&/* @__PURE__ */e("div",{className:`${w.autoplayControlWrapper} ${Ve(V,w.defaultAutoplayControl)}`,children:/* @__PURE__ */e(h,{variant:j,size:z,className:"",onPress:te})}),Oe&&/* @__PURE__ */e(p,{totalItems:He,currentPage:_e,onDotClick:e=>Ge(e),onPress:ee,focusStyle:D,dotsSize:$,variant:I,className:Ve(Y,w.defaultDotsContainer),dotsWrapperClassName:X,dotClassName:G,activeDotClassName:K,isTransitioning:je})]})})};export{C as Carousel,C as default};
 //# sourceMappingURL=Carousel.js.map

package/dist/components/DetailsDisclosure/DetailsDisclosure.js

@@ -1,4 +1,4 @@
-import{jsx as e,jsxs as s}from"react/jsx-runtime";import{Disclosure as r,DisclosurePanel as l,Button as o}from"react-aria-components";import{Icon as i}from"../Icon/Icon.js";import{foregroundColorVariants as a}from"../../utils/foregroundColour/foregroundColor.js";import '../../assets/DetailsDisclosure.css';const c="_detailsDisclosure_1bmls_1",t="_detailsDisclosure__heading_1bmls_8",d="_detailsDisclosure__icon_1bmls_12",n="_detailsDisclosureDetails_1bmls_42",m="_detailsDisclosureDetails__border_1bmls_51",_="_detailsDisclosureDetails__content_1bmls_68",u=({children:r,headingLevel:l,foregroundColor:c="accentPrimary",iconProps:n})=>/* @__PURE__ */e(l?`${l}`:"div",{className:`${t} ${a({foregroundColor:c})}`,children:/* @__PURE__ */s(o,{slot:"trigger",children:[
-/* @__PURE__ */e(i,{iconName:"chevron-right",iconPrefix:"fas","aria-label":"Toggle disclosure",color:c,...n,className:d}),r]})});u.displayName="DetailsDisclosure.Summary";const D=({children:r,hidePanelBorder:o,...i})=>/* @__PURE__ */s(l,{className:n,...i,children:[!o&&/* @__PURE__ */e("div",{"data-panel-border":!0,className:m}),
-/* @__PURE__ */e("div",{className:_,children:r})]});D.displayName="DetailsDisclosure.Details";const h=({children:s,...l})=>/* @__PURE__ */e(r,{className:c,...l,children:s});h.Summary=u,h.Details=D;export{h as DetailsDisclosure,D as DetailsDisclosureDetails,u as DetailsDisclosureSummary,h as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Disclosure as o,DisclosurePanel as s,Button as i}from"react-aria-components";import{Icon as l}from"../Icon/Icon.js";import{foregroundColorVariants as a}from"../../utils/foregroundColour/foregroundColor.js";import '../../assets/DetailsDisclosure.css';const c="_detailsDisclosure_c8gor_1",t="_detailsDisclosure__heading_c8gor_8",d="_detailsDisclosure__icon_c8gor_12",n="_detailsDisclosureDetails_c8gor_42",_="_detailsDisclosureDetails__border_c8gor_51",m="_detailsDisclosureDetails__content_c8gor_68",u=({children:o,headingLevel:s,foregroundColor:c="accentPrimary",iconProps:n})=>/* @__PURE__ */e(s?`${s}`:"div",{className:`${t} ${a({foregroundColor:c})}`,children:/* @__PURE__ */r(i,{slot:"trigger",children:[
+/* @__PURE__ */e(l,{iconName:"chevron-right",iconPrefix:"fas","aria-label":"Toggle disclosure",color:c,...n,className:d}),o]})});u.displayName="DetailsDisclosure.Summary";const g=({children:o,hidePanelBorder:i,...l})=>/* @__PURE__ */r(s,{className:n,...l,children:[!i&&/* @__PURE__ */e("div",{"data-panel-border":!0,className:_}),
+/* @__PURE__ */e("div",{className:m,children:o})]});g.displayName="DetailsDisclosure.Details";const D=({children:r,...s})=>/* @__PURE__ */e(o,{className:c,...s,children:r});D.Summary=u,D.Details=g;export{D as DetailsDisclosure,g as DetailsDisclosureDetails,u as DetailsDisclosureSummary,D as default};
 //# sourceMappingURL=DetailsDisclosure.js.map

package/dist/components/Grid/Grid.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { SpaceToken } from '../../utils/spaceToken/spaceToken';
 import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
+import { ResponsiveProp } from '../../utils/breakpoint/responsive';
 type AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';
 type AlignContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
 type JustifyContentValue = 'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly';
@@ -10,21 +11,23 @@ export type PolymorphicProps<E extends ValidElements> = {
 } & Omit<React.ComponentPropsWithRef<E>, 'as'>;
 export interface GridCellBaseProps {
     /**
-     * Number of columns/rows this cell should span
+     * **[Responsive]** Number of columns/rows this cell should span
      * Can be a single number for column span or an object for both
      */
-    span?: number | {
-        column?: number;
-        row?: number;
+    span?: ResponsiveProp<number> | {
+        column?: ResponsiveProp<number>;
+        row?: ResponsiveProp<number>;
     };
     /**
      * Named grid area for placing the cell
+     * Takes precedence over `column` / `row` props if both are set
      */
     area?: string;
     /**
-     * Column number where the cell will be placed
+     * **[Responsive]** Short-hand property to specify a cell's size and location within the Grid's columns.
+     * Accepts any valid value for CSS `grid-column`. Takes precedence over `span` prop if both are set
      */
-    column?: string | number;
+    column?: ResponsiveProp<string | number>;
     /**
      * Starting column for the cell
      */
@@ -34,9 +37,10 @@ export interface GridCellBaseProps {
      */
     columnEnd?: number;
     /**
-     * Row number where the cell will be placed
+     * **[Responsive]** Short-hand property to specify a cell's size and location within the Grid's rows.
+     * Accepts any valid value for CSS `grid-row`. Takes precedence over `span` prop if both are set
      */
-    row?: string | number;
+    row?: ResponsiveProp<string | number>;
     /**
      * Starting row for the cell
      */

package/dist/components/Grid/Grid.js

@@ -1,4 +1,4 @@
-import{jsx as r}from"react/jsx-runtime";import{getSpaceValue as n}from"../../utils/spaceToken/spaceToken.js";import{responsiveToCssVars as l}from"../../utils/breakpoint/responsiveToCssVars.js";import '../../assets/Grid.css';const i={grid:"_grid_7s7nz_1"},e=({as:n,span:l,area:e,column:o,columnStart:a,columnEnd:t,row:s,rowStart:d,rowEnd:m,children:u,style:g,...p})=>{const c=n||"div",f={...e&&{gridArea:e},...!e&&{...o&&{gridColumn:o},...a&&{gridColumnStart:a},...t&&{gridColumnEnd:t},...s&&{gridRow:s},...d&&{gridRowStart:d},...m&&{gridRowEnd:m}},...l?"number"==typeof l?{gridColumn:`span ${l}`}:{...l.column&&{gridColumn:`span ${l.column}`},...l.row&&{gridRow:`span ${l.row}`}}:{},...g};/* @__PURE__ */
-return r(c,{className:i.gridCell,style:f,...p,children:u})},o=({id:e,isInline:o=!1,alignContent:a,justifyContent:t,autoColumns:s,autoFlow:d,columns:m,rows:u,templateColumns:g,templateRows:p,gap:c,rowGap:f,columnGap:w,children:C,style:v,...x})=>{const y={display:o?"inline-grid":"grid",gridAutoColumns:s,gridAutoFlow:d,justifyContent:t,...null!=m?l(m,{varPrefix:"--grid-template-columns",normalise:r=>`repeat(${r}, 1fr)`}):g?l(g,{varPrefix:"--grid-template-columns",normalise:r=>r}):{},...null!=u?l(u,{varPrefix:"--grid-template-rows",normalise:r=>`repeat(${r}, 1fr)`}):p?l(p,{varPrefix:"--grid-template-rows",normalise:r=>r}):{},...l(c??(null==f&&null==w?"default":void 0)??null,{varPrefix:"--grid-gap",normalise:r=>n(r)}),...l(f??null,{varPrefix:"--grid-row-gap",normalise:r=>n(r)}),...l(w??null,{varPrefix:"--grid-column-gap",normalise:r=>n(r)}),...l(a??null,{varPrefix:"--grid-align-content",normalise:r=>r}),...v};/* @__PURE__ */
-return r("div",{id:e,className:i.grid,style:y,...x,children:C})},a=r=>"string"==typeof r&&["div","span"].includes(r);o.Cell=e;export{o as Grid,e as GridCell,o as default,a as isValidElement};
+import{jsx as r}from"react/jsx-runtime";import{getSpaceValue as e}from"../../utils/spaceToken/spaceToken.js";import{responsiveToCssVars as i}from"../../utils/breakpoint/responsiveToCssVars.js";import '../../assets/Grid.css';const l="_grid_1ejgf_1",n="_grid-cell_1ejgf_353",o=({as:e,span:l,area:o,column:a,columnStart:t,columnEnd:s,row:d,rowStart:m,rowEnd:u,children:g,style:c,...p})=>{const f=e||"div",v={...o&&{gridArea:o},...(()=>{if(!l)return{};if("number"==typeof l||"object"==typeof l&&"base"in l)return i(l,{varPrefix:"--grid-cell-grid-column",normalise:r=>`span ${r}`});return{..."column"in l?i(l.column,{varPrefix:"--grid-cell-grid-column",normalise:r=>`span ${r}`}):{},..."row"in l?i(l.row,{varPrefix:"--grid-cell-grid-row",normalise:r=>`span ${r}`}):{}}})(),...!o&&{...a&&i(a,{varPrefix:"--grid-cell-grid-column",normalise:r=>`${r}`}),...t&&{gridColumnStart:t},...s&&{gridColumnEnd:s},...d&&i(d,{varPrefix:"--grid-cell-grid-row",normalise:r=>`${r}`}),...m&&{gridRowStart:m},...u&&{gridRowEnd:u}},...c};/* @__PURE__ */
+return r(f,{className:n,style:v,...p,children:g})},a=({id:n,isInline:o=!1,alignContent:a,justifyContent:t,autoColumns:s,autoFlow:d,columns:m,rows:u,templateColumns:g,templateRows:c,gap:p,rowGap:f,columnGap:v,children:w,style:x,...P})=>{const y={display:o?"inline-grid":"grid",gridAutoColumns:s,gridAutoFlow:d,justifyContent:t,...null!=m?i(m,{varPrefix:"--grid-template-columns",normalise:r=>`repeat(${r}, 1fr)`}):g?i(g,{varPrefix:"--grid-template-columns",normalise:r=>r}):{},...null!=u?i(u,{varPrefix:"--grid-template-rows",normalise:r=>`repeat(${r}, 1fr)`}):c?i(c,{varPrefix:"--grid-template-rows",normalise:r=>r}):{},...i(p??(null==f&&null==v?"default":void 0)??null,{varPrefix:"--grid-gap",normalise:r=>e(r)}),...i(f??null,{varPrefix:"--grid-row-gap",normalise:r=>e(r)}),...i(v??null,{varPrefix:"--grid-column-gap",normalise:r=>e(r)}),...i(a??null,{varPrefix:"--grid-align-content",normalise:r=>r}),...x};/* @__PURE__ */
+return r("div",{id:n,className:l,style:y,...P,children:w})},t=r=>"string"==typeof r&&["div","span"].includes(r);a.Cell=o;export{a as Grid,o as GridCell,a as default,t as isValidElement};
 //# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Grid.module.css';\nimport { SpaceToken, getSpaceValue } from '../../utils/spaceToken/spaceToken';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\nimport { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';\n\ntype AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\ntype AlignContentValue =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'stretch'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\ntype JustifyContentValue =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'stretch'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\n// Define valid HTML elements for polymorphic prop\ntype ValidElements = 'div' | 'span';\n\n// Helper type for polymorphic components\nexport type PolymorphicProps<E extends ValidElements> = {\n  as?: E;\n} & Omit<React.ComponentPropsWithRef<E>, 'as'>;\n\n// GridCell Types and Component\nexport interface GridCellBaseProps {\n  /**\n   * Number of columns/rows this cell should span\n   * Can be a single number for column span or an object for both\n   */\n  span?: number | { column?: number; row?: number };\n  /**\n   * Named grid area for placing the cell\n   */\n  area?: string;\n  /**\n   * Column number where the cell will be placed\n   */\n  column?: string | number;\n  /**\n   * Starting column for the cell\n   */\n  columnStart?: number;\n  /**\n   * Ending column for spanning multiple columns\n   */\n  columnEnd?: number;\n  /**\n   * Row number where the cell will be placed\n   */\n  row?: string | number;\n  /**\n   * Starting row for the cell\n   */\n  rowStart?: number;\n  /**\n   * Ending row for spanning multiple rows\n   */\n  rowEnd?: number;\n  /**\n   * The content of the grid cell\n   */\n  children: React.ReactNode;\n  /**\n   * @internal\n   * Additional CSS properties to apply to the grid cell\n   */\n  style?: React.CSSProperties;\n}\n\nexport type GridCellProps<E extends ValidElements = 'div'> = GridCellBaseProps &\n  PolymorphicProps<E>;\n\nexport const GridCell = <E extends ValidElements = 'div'>({\n  as,\n  span,\n  area,\n  column,\n  columnStart,\n  columnEnd,\n  row,\n  rowStart,\n  rowEnd,\n  children,\n  style,\n  ...rest\n}: GridCellProps<E>) => {\n  // Determine the HTML element to render\n  const Component = (as || 'div') as React.ElementType;\n\n  // Handle the span prop logic\n  const getSpanStyles = () => {\n    if (!span) return {};\n\n    if (typeof span === 'number') {\n      return { gridColumn: `span ${span}` };\n    }\n\n    return {\n      ...(span.column && { gridColumn: `span ${span.column}` }),\n      ...(span.row && { gridRow: `span ${span.row}` }),\n    };\n  };\n\n  const gridCellStyle: React.CSSProperties = {\n    // Grid area takes precedence over individual positioning\n    ...(area && { gridArea: area }),\n\n    // If no area is specified, use individual positioning props\n    ...(!area && {\n      ...(column && { gridColumn: column }),\n      ...(columnStart && { gridColumnStart: columnStart }),\n      ...(columnEnd && { gridColumnEnd: columnEnd }),\n      ...(row && { gridRow: row }),\n      ...(rowStart && { gridRowStart: rowStart }),\n      ...(rowEnd && { gridRowEnd: rowEnd }),\n    }),\n\n    // Apply span styles\n    ...getSpanStyles(),\n\n    // Apply any custom styles\n    ...style,\n  };\n\n  return (\n    <Component className={styles.gridCell} style={gridCellStyle} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\n// Grid Types and Component\nexport interface GridBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional unique identifier for the grid\n   */\n  id?: string;\n  /**\n   * Sets the display to inline-grid if true, and grid if false\n   * @default false\n   */\n  isInline?: boolean;\n  /**\n   * **[Responsive]** Controls the vertical alignment of the content within the grid\n   */\n  alignContent?: AlignContentValue;\n  /**\n   * **[Responsive]** Controls the horizontal alignment of the content within the grid\n   */\n  justifyContent?: JustifyContentValue;\n  /**\n   * Determines how columns are automatically created in the grid\n   * e.g., \"minmax(100px, 1fr)\" or \"200px\"\n   */\n  autoColumns?: string;\n  /**\n   * Sets the flow direction and behavior of the grid's auto-placement\n   */\n  autoFlow?: AutoFlowValue;\n  /**\n   * **[Responsive]** Number of columns to create (generates equal-width columns)\n   * Takes precedence over templateColumns if both are provided\n   */\n  columns?: number;\n  /**\n   * **[Responsive]** Number of rows to create (generates equal-height rows)\n   * Takes precedence over templateRows if both are provided\n   */\n  rows?: number;\n  /**\n   * **[Responsive]** Defines the columns of the grid using CSS grid-template-columns syntax\n   * e.g. \"1fr 1fr 1fr\" or \"200px 1fr 200px\"\n   */\n  templateColumns?: string;\n  /**\n   * **[Responsive]**  Defines the rows of the grid using CSS grid-template-rows syntax\n   * e.g. \"auto auto\" or \"100px 1fr\"\n   */\n  templateRows?: string;\n  /**\n   * **[Responsive]** Controls the overall space between grid cells\n   * @default 'default'\n   */\n  gap?: SpaceToken;\n  /**\n   * **[Responsive]** Controls the vertical space between rows\n   * @default 'default'\n   */\n  rowGap?: SpaceToken;\n  /**\n   * **[Responsive]** Controls the horizontal space between columns\n   * @default 'default'\n   */\n  columnGap?: SpaceToken;\n  /**\n   * The content of the grid\n   */\n  children?: React.ReactNode;\n  /**\n   * @internal\n   * Additional CSS properties to apply to the grid\n   */\n  style?: React.CSSProperties;\n}\n\ntype ResponsivePropKeys =\n  | 'columns'\n  | 'rows'\n  | 'gap'\n  | 'rowGap'\n  | 'columnGap'\n  | 'alignContent'\n  | 'templateColumns'\n  | 'templateRows';\n\nexport type GridProps = WithResponsiveProps<GridBaseProps, ResponsivePropKeys>;\n\nexport const Grid = ({\n  id,\n  isInline = false,\n  alignContent,\n  justifyContent,\n  autoColumns,\n  autoFlow,\n  columns,\n  rows,\n  templateColumns,\n  templateRows,\n  gap,\n  rowGap,\n  columnGap,\n  children,\n  style,\n  ...rest\n}: GridProps) => {\n  /**\n   * Responsive Props\n   */\n  // columns take precedence over templateColumns\n  const templateColumnsVars =\n    columns != null\n      ? responsiveToCssVars(columns, {\n          varPrefix: '--grid-template-columns',\n          normalise: (val) => `repeat(${val}, 1fr)`,\n        })\n      : templateColumns\n        ? responsiveToCssVars(templateColumns, {\n            varPrefix: '--grid-template-columns',\n            normalise: (val) => val,\n          })\n        : {};\n\n  const templateRowsVars =\n    rows != null\n      ? responsiveToCssVars(rows, {\n          varPrefix: '--grid-template-rows',\n          normalise: (val) => `repeat(${val}, 1fr)`,\n        })\n      : templateRows\n        ? responsiveToCssVars(templateRows, {\n            varPrefix: '--grid-template-rows',\n            normalise: (val) => val,\n          })\n        : {};\n\n  // Preserve \"default\" behaviour: if no gap/rowGap/columnGap, use 'default' at base\n  const resolvedGap: typeof gap =\n    gap ?? (rowGap == null && columnGap == null ? 'default' : undefined);\n\n  const gapVars = responsiveToCssVars(resolvedGap ?? null, {\n    varPrefix: '--grid-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  const rowGapVars = responsiveToCssVars(rowGap ?? null, {\n    varPrefix: '--grid-row-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  const columnGapVars = responsiveToCssVars(columnGap ?? null, {\n    varPrefix: '--grid-column-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  // Responsive alignContent via CSS vars\n\n  const alignContentVars = responsiveToCssVars(alignContent ?? null, {\n    varPrefix: '--grid-align-content',\n    normalise: (val) => val,\n  });\n\n  const gridStyle: React.CSSProperties = {\n    display: isInline ? 'inline-grid' : 'grid',\n    gridAutoColumns: autoColumns,\n    gridAutoFlow: autoFlow,\n    justifyContent: justifyContent,\n    ...templateColumnsVars,\n    ...templateRowsVars,\n    ...gapVars,\n    ...rowGapVars,\n    ...columnGapVars,\n    ...alignContentVars,\n    ...style,\n  };\n\n  return (\n    <div id={id} className={styles.grid} style={gridStyle} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst isValidElement = (value: unknown): value is ValidElements => {\n  const validElements: ValidElements[] = ['div', 'span'];\n  return (\n    typeof value === 'string' && validElements.includes(value as ValidElements)\n  );\n};\n\nGrid.Cell = GridCell;\n\nexport { isValidElement };\nexport default Grid;\n"],"names":["GridCell","as","span","area","column","columnStart","columnEnd","row","rowStart","rowEnd","children","style","rest","Component","gridCellStyle","gridArea","gridColumn","gridColumnStart","gridColumnEnd","gridRow","gridRowStart","gridRowEnd","jsx","className","styles","gridCell","Grid","id","isInline","alignContent","justifyContent","autoColumns","autoFlow","columns","rows","templateColumns","templateRows","gap","rowGap","columnGap","gridStyle","display","gridAutoColumns","gridAutoFlow","responsiveToCssVars","varPrefix","normalise","val","token","getSpaceValue","grid","isValidElement","value","includes","Cell"],"mappings":"gOAkFaA,EAAW,EACtBC,KACAC,OACAC,OACAC,SACAC,cACAC,YACAC,MACAC,WACAC,SACAC,WACAC,WACGC,MAGH,MAAMC,EAAaZ,GAAM,MAgBnBa,EAAqC,IAErCX,GAAQ,CAAEY,SAAUZ,OAGnBA,GAAQ,IACPC,GAAU,CAAEY,WAAYZ,MACxBC,GAAe,CAAEY,gBAAiBZ,MAClCC,GAAa,CAAEY,cAAeZ,MAC9BC,GAAO,CAAEY,QAASZ,MAClBC,GAAY,CAAEY,aAAcZ,MAC5BC,GAAU,CAAEY,WAAYZ,OAvBzBP,EAEe,iBAATA,EACF,CAAEc,WAAY,QAAQd,KAGxB,IACDA,EAAKE,QAAU,CAAEY,WAAY,QAAQd,EAAKE,aAC1CF,EAAKK,KAAO,CAAEY,QAAS,QAAQjB,EAAKK,QARxB,CAAA,KA8BfI;AAGL,OACEW,EAACT,GAAUU,UAAWC,EAAOC,SAAUd,MAAOG,KAAmBF,EAC9DF,cA2FMgB,EAAO,EAClBC,KACAC,YAAW,EACXC,eACAC,iBACAC,cACAC,WACAC,UACAC,OACAC,kBACAC,eACAC,MACAC,SACAC,YACA7B,WACAC,WACGC,MAMH,MAoDM4B,EAAiC,CACrCC,QAASb,EAAW,cAAgB,OACpCc,gBAAiBX,EACjBY,aAAcX,EACdF,oBAvDW,MAAXG,EACIW,EAAoBX,EAAS,CAC3BY,UAAW,0BACXC,UAAYC,GAAQ,UAAUA,YAEhCZ,EACES,EAAoBT,EAAiB,CACnCU,UAAW,0BACXC,UAAYC,GAAQA,IAEtB,CAAA,KAGE,MAARb,EACIU,EAAoBV,EAAM,CACxBW,UAAW,uBACXC,UAAYC,GAAQ,UAAUA,YAEhCX,EACEQ,EAAoBR,EAAc,CAChCS,UAAW,uBACXC,UAAYC,GAAQA,IAEtB,CAAA,KAMQH,EAFdP,IAAkB,MAAVC,GAA+B,MAAbC,EAAoB,eAAY,IAET,KAAM,CACvDM,UAAW,aACXC,UAAYE,GAAUC,EAAcD,QAGnBJ,EAAoBN,GAAU,KAAM,CACrDO,UAAW,iBACXC,UAAYE,GAAUC,EAAcD,QAGhBJ,EAAoBL,GAAa,KAAM,CAC3DM,UAAW,oBACXC,UAAYE,GAAUC,EAAcD,QAKbJ,EAAoBf,GAAgB,KAAM,CACjEgB,UAAW,uBACXC,UAAYC,GAAQA,OAcjBpC;AAGL,OACEW,EAAC,MAAA,CAAIK,KAAQJ,UAAWC,EAAO0B,KAAMvC,MAAO6B,KAAe5B,EACxDF,cAKDyC,EAAkBC,GAGH,iBAAVA,GAF8B,CAAC,MAAO,QAEFC,SAASD,GAIxD1B,EAAK4B,KAAOtD"}
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Grid.module.css';\nimport { SpaceToken, getSpaceValue } from '../../utils/spaceToken/spaceToken';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\nimport { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';\nimport { ResponsiveProp } from '../../utils/breakpoint/responsive';\n\ntype AutoFlowValue = 'row' | 'column' | 'dense' | 'row dense' | 'column dense';\ntype AlignContentValue =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'stretch'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\ntype JustifyContentValue =\n  | 'start'\n  | 'end'\n  | 'center'\n  | 'stretch'\n  | 'space-around'\n  | 'space-between'\n  | 'space-evenly';\n\n// Define valid HTML elements for polymorphic prop\ntype ValidElements = 'div' | 'span';\n\n// Helper type for polymorphic components\nexport type PolymorphicProps<E extends ValidElements> = {\n  as?: E;\n} & Omit<React.ComponentPropsWithRef<E>, 'as'>;\n\n// GridCell Types and Component\nexport interface GridCellBaseProps {\n  /**\n   * **[Responsive]** Number of columns/rows this cell should span\n   * Can be a single number for column span or an object for both\n   */\n  span?:\n    | ResponsiveProp<number>\n    | { column?: ResponsiveProp<number>; row?: ResponsiveProp<number> };\n  /**\n   * Named grid area for placing the cell\n   * Takes precedence over `column` / `row` props if both are set\n   */\n  area?: string;\n  /**\n   * **[Responsive]** Short-hand property to specify a cell's size and location within the Grid's columns.\n   * Accepts any valid value for CSS `grid-column`. Takes precedence over `span` prop if both are set\n   */\n  column?: ResponsiveProp<string | number>;\n  /**\n   * Starting column for the cell\n   */\n  columnStart?: number;\n  /**\n   * Ending column for spanning multiple columns\n   */\n  columnEnd?: number;\n  /**\n   * **[Responsive]** Short-hand property to specify a cell's size and location within the Grid's rows.\n   * Accepts any valid value for CSS `grid-row`. Takes precedence over `span` prop if both are set\n   */\n  row?: ResponsiveProp<string | number>;\n  /**\n   * Starting row for the cell\n   */\n  rowStart?: number;\n  /**\n   * Ending row for spanning multiple rows\n   */\n  rowEnd?: number;\n  /**\n   * The content of the grid cell\n   */\n  children: React.ReactNode;\n  /**\n   * @internal\n   * Additional CSS properties to apply to the grid cell\n   */\n  style?: React.CSSProperties;\n}\n\nexport type GridCellProps<E extends ValidElements = 'div'> = GridCellBaseProps &\n  PolymorphicProps<E>;\n\nexport const GridCell = <E extends ValidElements = 'div'>({\n  as,\n  span,\n  area,\n  column,\n  columnStart,\n  columnEnd,\n  row,\n  rowStart,\n  rowEnd,\n  children,\n  style,\n  ...rest\n}: GridCellProps<E>) => {\n  // Determine the HTML element to render\n  const Component = (as || 'div') as React.ElementType;\n\n  // Handle the span prop logic\n  const getSpanVars = () => {\n    if (!span) return {};\n\n    if (\n      typeof span === 'number' ||\n      (typeof span === 'object' && 'base' in span)\n    ) {\n      return responsiveToCssVars(span as number, {\n        varPrefix: '--grid-cell-grid-column',\n        normalise: (value) => `span ${value}`,\n      });\n    }\n\n    const columnVars =\n      'column' in span\n        ? responsiveToCssVars(span.column, {\n            varPrefix: '--grid-cell-grid-column',\n            normalise: (value) => `span ${value}`,\n          })\n        : {};\n\n    const rowVars =\n      'row' in span\n        ? responsiveToCssVars(span.row, {\n            varPrefix: '--grid-cell-grid-row',\n            normalise: (value) => `span ${value}`,\n          })\n        : {};\n\n    return { ...columnVars, ...rowVars };\n  };\n\n  const gridCellStyle = {\n    // Grid area takes precedence over individual positioning\n    ...(area && { gridArea: area }),\n\n    // Apply span styles\n    ...getSpanVars(),\n\n    // If no area is specified, use individual positioning props\n    ...(!area && {\n      ...(column &&\n        responsiveToCssVars(column, {\n          varPrefix: '--grid-cell-grid-column',\n          normalise: (value) => `${value}`,\n        })),\n      ...(columnStart && { gridColumnStart: columnStart }),\n      ...(columnEnd && { gridColumnEnd: columnEnd }),\n      ...(row &&\n        responsiveToCssVars(row, {\n          varPrefix: '--grid-cell-grid-row',\n          normalise: (value) => `${value}`,\n        })),\n      ...(rowStart && { gridRowStart: rowStart }),\n      ...(rowEnd && { gridRowEnd: rowEnd }),\n    }),\n\n    // Apply any custom styles\n    ...style,\n  };\n\n  return (\n    <Component className={styles['grid-cell']} style={gridCellStyle} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\n// Grid Types and Component\nexport interface GridBaseProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Optional unique identifier for the grid\n   */\n  id?: string;\n  /**\n   * Sets the display to inline-grid if true, and grid if false\n   * @default false\n   */\n  isInline?: boolean;\n  /**\n   * **[Responsive]** Controls the vertical alignment of the content within the grid\n   */\n  alignContent?: AlignContentValue;\n  /**\n   * **[Responsive]** Controls the horizontal alignment of the content within the grid\n   */\n  justifyContent?: JustifyContentValue;\n  /**\n   * Determines how columns are automatically created in the grid\n   * e.g., \"minmax(100px, 1fr)\" or \"200px\"\n   */\n  autoColumns?: string;\n  /**\n   * Sets the flow direction and behavior of the grid's auto-placement\n   */\n  autoFlow?: AutoFlowValue;\n  /**\n   * **[Responsive]** Number of columns to create (generates equal-width columns)\n   * Takes precedence over templateColumns if both are provided\n   */\n  columns?: number;\n  /**\n   * **[Responsive]** Number of rows to create (generates equal-height rows)\n   * Takes precedence over templateRows if both are provided\n   */\n  rows?: number;\n  /**\n   * **[Responsive]** Defines the columns of the grid using CSS grid-template-columns syntax\n   * e.g. \"1fr 1fr 1fr\" or \"200px 1fr 200px\"\n   */\n  templateColumns?: string;\n  /**\n   * **[Responsive]**  Defines the rows of the grid using CSS grid-template-rows syntax\n   * e.g. \"auto auto\" or \"100px 1fr\"\n   */\n  templateRows?: string;\n  /**\n   * **[Responsive]** Controls the overall space between grid cells\n   * @default 'default'\n   */\n  gap?: SpaceToken;\n  /**\n   * **[Responsive]** Controls the vertical space between rows\n   * @default 'default'\n   */\n  rowGap?: SpaceToken;\n  /**\n   * **[Responsive]** Controls the horizontal space between columns\n   * @default 'default'\n   */\n  columnGap?: SpaceToken;\n  /**\n   * The content of the grid\n   */\n  children?: React.ReactNode;\n  /**\n   * @internal\n   * Additional CSS properties to apply to the grid\n   */\n  style?: React.CSSProperties;\n}\n\ntype ResponsivePropKeys =\n  | 'columns'\n  | 'rows'\n  | 'gap'\n  | 'rowGap'\n  | 'columnGap'\n  | 'alignContent'\n  | 'templateColumns'\n  | 'templateRows';\n\nexport type GridProps = WithResponsiveProps<GridBaseProps, ResponsivePropKeys>;\n\nexport const Grid = ({\n  id,\n  isInline = false,\n  alignContent,\n  justifyContent,\n  autoColumns,\n  autoFlow,\n  columns,\n  rows,\n  templateColumns,\n  templateRows,\n  gap,\n  rowGap,\n  columnGap,\n  children,\n  style,\n  ...rest\n}: GridProps) => {\n  /**\n   * Responsive Props\n   */\n  // columns take precedence over templateColumns\n  const templateColumnsVars =\n    columns != null\n      ? responsiveToCssVars(columns, {\n          varPrefix: '--grid-template-columns',\n          normalise: (val) => `repeat(${val}, 1fr)`,\n        })\n      : templateColumns\n        ? responsiveToCssVars(templateColumns, {\n            varPrefix: '--grid-template-columns',\n            normalise: (val) => val,\n          })\n        : {};\n\n  const templateRowsVars =\n    rows != null\n      ? responsiveToCssVars(rows, {\n          varPrefix: '--grid-template-rows',\n          normalise: (val) => `repeat(${val}, 1fr)`,\n        })\n      : templateRows\n        ? responsiveToCssVars(templateRows, {\n            varPrefix: '--grid-template-rows',\n            normalise: (val) => val,\n          })\n        : {};\n\n  // Preserve \"default\" behaviour: if no gap/rowGap/columnGap, use 'default' at base\n  const resolvedGap: typeof gap =\n    gap ?? (rowGap == null && columnGap == null ? 'default' : undefined);\n\n  const gapVars = responsiveToCssVars(resolvedGap ?? null, {\n    varPrefix: '--grid-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  const rowGapVars = responsiveToCssVars(rowGap ?? null, {\n    varPrefix: '--grid-row-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  const columnGapVars = responsiveToCssVars(columnGap ?? null, {\n    varPrefix: '--grid-column-gap',\n    normalise: (token) => getSpaceValue(token as SpaceToken),\n  });\n\n  // Responsive alignContent via CSS vars\n\n  const alignContentVars = responsiveToCssVars(alignContent ?? null, {\n    varPrefix: '--grid-align-content',\n    normalise: (val) => val,\n  });\n\n  const gridStyle: React.CSSProperties = {\n    display: isInline ? 'inline-grid' : 'grid',\n    gridAutoColumns: autoColumns,\n    gridAutoFlow: autoFlow,\n    justifyContent: justifyContent,\n    ...templateColumnsVars,\n    ...templateRowsVars,\n    ...gapVars,\n    ...rowGapVars,\n    ...columnGapVars,\n    ...alignContentVars,\n    ...style,\n  };\n\n  return (\n    <div id={id} className={styles.grid} style={gridStyle} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nconst isValidElement = (value: unknown): value is ValidElements => {\n  const validElements: ValidElements[] = ['div', 'span'];\n  return (\n    typeof value === 'string' && validElements.includes(value as ValidElements)\n  );\n};\n\nGrid.Cell = GridCell;\n\nexport { isValidElement };\nexport default Grid;\n"],"names":["GridCell","as","span","area","column","columnStart","columnEnd","row","rowStart","rowEnd","children","style","rest","Component","gridCellStyle","gridArea","responsiveToCssVars","varPrefix","normalise","value","getSpanVars","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","jsx","className","styles","Grid","id","isInline","alignContent","justifyContent","autoColumns","autoFlow","columns","rows","templateColumns","templateRows","gap","rowGap","columnGap","gridStyle","display","gridAutoColumns","gridAutoFlow","val","token","getSpaceValue","isValidElement","includes","Cell"],"mappings":"kPAwFaA,EAAW,EACtBC,KACAC,OACAC,OACAC,SACAC,cACAC,YACAC,MACAC,WACAC,SACAC,WACAC,WACGC,MAGH,MAAMC,EAAaZ,GAAM,MAmCnBa,EAAgB,IAEhBX,GAAQ,CAAEY,SAAUZ,MAlCN,MAClB,IAAKD,EAAM,MAAO,CAAA,EAElB,GACkB,iBAATA,GACU,iBAATA,GAAqB,SAAUA,EAEvC,OAAOc,EAAoBd,EAAgB,CACzCe,UAAW,0BACXC,UAAYC,GAAU,QAAQA,MAoBlC,MAAO,IAfL,WAAYjB,EACRc,EAAoBd,EAAKE,OAAQ,CAC/Ba,UAAW,0BACXC,UAAYC,GAAU,QAAQA,MAEhC,CAAA,KAGJ,QAASjB,EACLc,EAAoBd,EAAKK,IAAK,CAC5BU,UAAW,uBACXC,UAAYC,GAAU,QAAQA,MAEhC,CAAA,IAUHC,OAGEjB,GAAQ,IACPC,GACFY,EAAoBZ,EAAQ,CAC1Ba,UAAW,0BACXC,UAAYC,GAAU,GAAGA,SAEzBd,GAAe,CAAEgB,gBAAiBhB,MAClCC,GAAa,CAAEgB,cAAehB,MAC9BC,GACFS,EAAoBT,EAAK,CACvBU,UAAW,uBACXC,UAAYC,GAAU,GAAGA,SAEzBX,GAAY,CAAEe,aAAcf,MAC5BC,GAAU,CAAEe,WAAYf,OAI3BE;AAGL,OACEc,EAACZ,EAAA,CAAUa,UAAWC,EAAqBhB,MAAOG,KAAmBF,EAClEF,cA2FMkB,EAAO,EAClBC,KACAC,YAAW,EACXC,eACAC,iBACAC,cACAC,WACAC,UACAC,OACAC,kBACAC,eACAC,MACAC,SACAC,YACA/B,WACAC,WACGC,MAMH,MAoDM8B,EAAiC,CACrCC,QAASb,EAAW,cAAgB,OACpCc,gBAAiBX,EACjBY,aAAcX,EACdF,oBAvDW,MAAXG,EACInB,EAAoBmB,EAAS,CAC3BlB,UAAW,0BACXC,UAAY4B,GAAQ,UAAUA,YAEhCT,EACErB,EAAoBqB,EAAiB,CACnCpB,UAAW,0BACXC,UAAY4B,GAAQA,IAEtB,CAAA,KAGE,MAARV,EACIpB,EAAoBoB,EAAM,CACxBnB,UAAW,uBACXC,UAAY4B,GAAQ,UAAUA,YAEhCR,EACEtB,EAAoBsB,EAAc,CAChCrB,UAAW,uBACXC,UAAY4B,GAAQA,IAEtB,CAAA,KAMQ9B,EAFduB,IAAkB,MAAVC,GAA+B,MAAbC,EAAoB,eAAY,IAET,KAAM,CACvDxB,UAAW,aACXC,UAAY6B,GAAUC,EAAcD,QAGnB/B,EAAoBwB,GAAU,KAAM,CACrDvB,UAAW,iBACXC,UAAY6B,GAAUC,EAAcD,QAGhB/B,EAAoByB,GAAa,KAAM,CAC3DxB,UAAW,oBACXC,UAAY6B,GAAUC,EAAcD,QAKb/B,EAAoBe,GAAgB,KAAM,CACjEd,UAAW,uBACXC,UAAY4B,GAAQA,OAcjBnC;AAGL,OACEc,EAAC,MAAA,CAAII,KAAQH,UAAWC,EAAahB,MAAO+B,KAAe9B,EACxDF,cAKDuC,EAAkB9B,GAGH,iBAAVA,GAF8B,CAAC,MAAO,QAEF+B,SAAS/B,GAIxDS,EAAKuB,KAAOnD"}

package/dist/components/Heading/Heading.d.ts

@@ -4,7 +4,7 @@ import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor
 import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
 declare const heading: (props?: ({
     size?: "lg" | "sm" | "xs" | "xl" | "md" | "xxs" | null | undefined;
-    textAlign?: "center" | "end" | "start" | null | undefined;
+    textAlign?: "center" | "start" | "end" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type HeadingVariants = VariantProps<typeof heading>;

package/dist/components/Paragraph/Paragraph.d.ts

@@ -4,7 +4,7 @@ import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor
 import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
 declare const paragraph: (props?: ({
     size?: "lg" | "sm" | "xs" | "md" | null | undefined;
-    textAlign?: "center" | "end" | "start" | null | undefined;
+    textAlign?: "center" | "start" | "end" | null | undefined;
     fontWeight?: "default" | "bold" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 import { OverlayTriggerState } from 'react-stately';
-import { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';
 type PlacementType = 'top' | 'top start' | 'top end' | 'right' | 'right top' | 'right bottom' | 'bottom' | 'bottom start' | 'bottom end' | 'left' | 'left top' | 'left bottom';
-type ArrowDirectionType = 'top' | 'top-left' | 'top-right' | 'right' | 'bottom' | 'left';
+type ArrowDirectionType = 'top' | 'right' | 'bottom' | 'left';
 export interface InternalPopoverProps {
     /**
      * @private Internal use only - placement of the popover
@@ -35,8 +34,8 @@ export interface PopoverProps {
     children: React.ReactNode;
     /** State object controlling the overlay's open/closed status */
     state: OverlayTriggerState;
-    /** **[Responsive]** Direction of the arrow that points to the trigger element */
-    arrowDirection?: ResponsiveValue<ArrowDirectionType>;
+    /** Direction of the arrow that points to the trigger element */
+    arrowDirection?: ArrowDirectionType;
     /** Reference to the trigger element that opens the popover */
     triggerRef: React.RefObject<HTMLButtonElement | null> | {
         current: HTMLElement | null;

package/dist/components/Popover/Popover.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import o,{useRef as r,useEffect as s}from"react";import{usePopover as i,Overlay as n,DismissButton as a}from"@react-aria/overlays";import{FocusScope as p}from"@react-aria/focus";import{useBreakpoint as l}from"../../utils/breakpoint/hooks/useBreakpoint.js";import{resolveResponsiveProp as c}from"../../utils/breakpoint/responsive.js";import '../../assets/Popover.css';const m="_popover_1ntxl_1",u="_arrow_1ntxl_11",f={top:"top","top-left":"top start","top-right":"top end",right:"right",bottom:"bottom",left:"left"},d=t=>t?.split(" ")[0],h=({children:h,state:b,arrowDirection:v="bottom",triggerRef:w,hasArrow:g=!0,placement:_,shouldFlip:j=!0,isNonModal:F=!1,allowTabOut:k=!1,autoFocus:x=!0})=>{const y=r(null),M=l(),N=o.useMemo(()=>c(v,M)??"bottom",[v,M]),E=_||f[N],[O,R]=o.useState(E);s(()=>{const t=()=>{y.current&&w.current&&R(E)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[E,w]);const{popoverProps:z,arrowProps:D,placement:L}=i({popoverRef:y,triggerRef:w,offset:12,placement:O,shouldFlip:j,isNonModal:F},b),P=d(L)===d(O)?O:L||O,A="top start"===P||"top end"===P?P:d(P)||P,B=o.useMemo(()=>{const t=D.style;if(t){if("top start"===A||"top end"===A){return Object.fromEntries(Object.entries(t).filter(([t])=>"left"!==t&&"right"!==t&&"top"!==t&&"bottom"!==t))}return t}},[D.style,A]);/* @__PURE__ */
-return t(n,{children:/* @__PURE__ */t(p,{restoreFocus:!0,contain:!k,autoFocus:x,children:/* @__PURE__ */e("div",{...z,ref:y,className:m,children:[
-/* @__PURE__ */t(a,{onDismiss:b.close}),h,g&&/* @__PURE__ */t("div",{...D,className:u,style:B,"data-placement":A})]})})})};export{h as Popover,h as default};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import o,{useRef as t,useEffect as a}from"react";import{usePopover as s,Overlay as i,DismissButton as n}from"@react-aria/overlays";import{FocusScope as c}from"@react-aria/focus";import '../../assets/Popover.css';const l="_popover_1de57_1",p="_arrow_1de57_11",m={top:"top",right:"right",bottom:"bottom",left:"left"},d=({children:d,state:u,arrowDirection:f="bottom",triggerRef:h,hasArrow:v=!0,placement:w,shouldFlip:g=!0,isNonModal:_=!1,allowTabOut:F=!1,autoFocus:b=!0})=>{const N=t(null),R=w||m[f],[x,z]=o.useState(R);a(()=>{const e=()=>{N.current&&h.current&&z(R)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[R,h]);const{popoverProps:D,arrowProps:E,placement:L}=s({popoverRef:N,triggerRef:h,offset:12,placement:x,shouldFlip:g,isNonModal:_},u);/* @__PURE__ */
+return e(i,{children:/* @__PURE__ */e(c,{restoreFocus:!0,contain:!F,autoFocus:b,children:/* @__PURE__ */r("div",{...D,ref:N,className:l,children:[
+/* @__PURE__ */e(n,{onDismiss:u.close}),d,v&&/* @__PURE__ */e("div",{...E,className:p,"data-placement":L})]})})})};export{d as Popover,d as default};
 //# sourceMappingURL=Popover.js.map

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 { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\nimport { resolveResponsiveProp } from '../../utils/breakpoint/responsive';\nimport type { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';\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 =\n  | 'top'\n  | 'top-left'\n  | 'top-right'\n  | 'right'\n  | 'bottom'\n  | 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n  top: 'top',\n  'top-left': 'top start',\n  'top-right': 'top end',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n};\n\nconst getPlacementSide = (value?: string | null) => value?.split(' ')[0];\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  /** **[Responsive]** Direction of the arrow that points to the trigger element */\n  arrowDirection?: ResponsiveValue<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  const currentBreakpoint = useBreakpoint();\n\n  const resolvedArrowDirection = React.useMemo(\n    () => resolveResponsiveProp(arrowDirection, currentBreakpoint) ?? 'bottom',\n    [arrowDirection, currentBreakpoint],\n  );\n\n  // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n  const initialPlacement =\n    placement || arrowDirectionToPlacement[resolvedArrowDirection];\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  const arrowPlacement =\n    getPlacementSide(finalPlacement) === getPlacementSide(optimalPlacement)\n      ? optimalPlacement\n      : finalPlacement || optimalPlacement;\n\n  const normalizedArrowPlacement =\n    arrowPlacement === 'top start' || arrowPlacement === 'top end'\n      ? arrowPlacement\n      : getPlacementSide(arrowPlacement) || arrowPlacement;\n\n  const resolvedArrowStyle = React.useMemo(() => {\n    const inlineArrowStyle = arrowProps.style;\n\n    if (!inlineArrowStyle) {\n      return undefined;\n    }\n\n    // Keep react-aria computed styles generally, but preserve CSS-driven\n    // arrow offsets for top start/end variants.\n    if (\n      normalizedArrowPlacement === 'top start' ||\n      normalizedArrowPlacement === 'top end'\n    ) {\n      const nonPositionalStyles = Object.fromEntries(\n        Object.entries(inlineArrowStyle).filter(\n          ([key]) =>\n            key !== 'left' &&\n            key !== 'right' &&\n            key !== 'top' &&\n            key !== 'bottom',\n        ),\n      );\n\n      return nonPositionalStyles;\n    }\n\n    return inlineArrowStyle;\n  }, [arrowProps.style, normalizedArrowPlacement]);\n\n  return (\n    <Overlay>\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              style={resolvedArrowStyle}\n              data-placement={normalizedArrowPlacement}\n            />\n          )}\n        </div>\n      </FocusScope>\n    </Overlay>\n  );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","getPlacementSide","value","split","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","currentBreakpoint","useBreakpoint","resolvedArrowDirection","React","useMemo","resolveResponsiveProp","initialPlacement","optimalPlacement","setOptimalPlacement","useState","useEffect","updatePlacement","current","window","addEventListener","removeEventListener","popoverProps","arrowProps","finalPlacement","usePopover","offset","arrowPlacement","normalizedArrowPlacement","resolvedArrowStyle","inlineArrowStyle","style","Object","fromEntries","entries","filter","key","Overlay","jsx","FocusScope","restoreFocus","contain","jsxs","ref","className","styles","DismissButton","onDismiss","close"],"mappings":"8aAkCMA,EAAuE,CAC3EC,IAAK,MACL,WAAY,YACZ,YAAa,UACbC,MAAO,QACPC,OAAQ,SACRC,KAAM,QAGFC,EAAoBC,GAA0BA,GAAOC,MAAM,KAAK,GA0DzDC,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MACpCC,EAAoBC,IAEpBC,EAAyBC,EAAMC,QACnC,IAAMC,EAAsBf,EAAgBU,IAAsB,SAClE,CAACV,EAAgBU,IAIbM,EACJb,GAAad,EAA0BuB,IAClCK,EAAkBC,GACvBL,EAAMM,SAAwBH,GAEhCI,EAAU,KACR,MAAMC,EAAkB,KACjBb,EAAWc,SAAYrB,EAAWqB,SAIvCJ,EAAoBF,IAKtB,OAFAK,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,IAAME,OAAOE,oBAAoB,SAAUJ,IACjD,CAACL,EAAkBf,IAEtB,MAAMyB,aACJA,EAAAC,WACAA,EACAxB,UAAWyB,GACTC,EACF,CACErB,aACAP,aACA6B,OAAQ,GACR3B,UAAWc,EACXb,aACAC,cAEFN,GAGIgC,EACJrC,EAAiBkC,KAAoBlC,EAAiBuB,GAClDA,EACAW,GAAkBX,EAElBe,EACe,cAAnBD,GAAqD,YAAnBA,EAC9BA,EACArC,EAAiBqC,IAAmBA,EAEpCE,EAAqBpB,EAAMC,QAAQ,KACvC,MAAMoB,EAAmBP,EAAWQ,MAEpC,GAAKD,EAAL,CAMA,GAC+B,cAA7BF,GAC6B,YAA7BA,EACA,CAWA,OAV4BI,OAAOC,YACjCD,OAAOE,QAAQJ,GAAkBK,OAC/B,EAAEC,KACQ,SAARA,GACQ,UAARA,GACQ,QAARA,GACQ,WAARA,GAKR,CAEA,OAAON,CArBP,GAsBC,CAACP,EAAWQ,MAAOH;AAEtB,SACGS,EAAA,CACC3C,wBAAA4C,EAACC,GAAWC,cAAY,EAACC,SAAUvC,EAAaC,YAC9CT,wBAAAgD,EAAC,UAAQpB,EAAcqB,IAAKvC,EAAYwC,UAAWC,EACjDnD,SAAA;iBAACoD,EAAA,CAAcC,UAAWpD,EAAMqD,QAC/BtD,EACAI,kBACCwC,EAAC,MAAA,IACKf,EACJqB,UAAWC,EACXd,MAAOF,EACP,iBAAgBD"}
+{"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      <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    </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","Overlay","jsx","FocusScope","restoreFocus","contain","jsxs","ref","className","styles","DismissButton","onDismiss","close"],"mappings":"mRAyBMA,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,SACG2B,EAAA,CACC5B,wBAAA6B,EAACC,GAAWC,cAAY,EAACC,SAAUxB,EAAaC,YAC9CT,wBAAAiC,EAAC,UAAQV,EAAcW,IAAKxB,EAAYyB,UAAWC,EACjDpC,SAAA;iBAACqC,EAAA,CAAcC,UAAWrC,EAAMsC,QAC/BvC,EACAI,kBACCyB,EAAC,MAAA,IACKL,EACJW,UAAWC,EACX,iBAAgBX"}

package/dist/components/Spacer/Spacer.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const spacerVariants: (props?: ({
-    w?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
-    h?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "3xs" | "4xs" | "5xs" | "3xl" | "4xl" | "5xl" | null | undefined;
+    w?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | null | undefined;
+    h?: 0 | "lg" | "sm" | "xs" | "2xs" | "xl" | "2xl" | "none" | "md" | "5xs" | "4xs" | "3xs" | "3xl" | "4xl" | "5xl" | null | undefined;
     inline?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SpacerVariants = VariantProps<typeof spacerVariants>;

package/dist/components/SubHeading/SubHeading.d.ts

@@ -4,7 +4,7 @@ import { ForegroundVariants } from '../../utils/foregroundColour/foregroundColor
 import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
 declare const subHeading: (props?: ({
     size?: "sm" | "xs" | null | undefined;
-    textAlign?: "center" | "end" | "start" | null | undefined;
+    textAlign?: "center" | "start" | "end" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type SubHeadingVariants = VariantProps<typeof subHeading>;

package/dist/components/Tabs/Tab.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"react-aria-components";import"../Heading/Heading.js";import"../Icon/Icon.js";import{Tab as o,Tab as t}from"./Tabs.js";import"../../utils/focus/focusStyles.js";import"../../TabPanel-C7ANBbTA.js";export{o as Tab,t as default};
+import"react/jsx-runtime";import"react-aria-components";import"../Heading/Heading.js";import"../Icon/Icon.js";import{Tab as o,Tab as t}from"./Tabs.js";import"../../utils/focus/focusStyles.js";import"../../TabPanel-DDYn4r31.js";export{o as Tab,t as default};
 //# sourceMappingURL=Tab.js.map

package/dist/components/Tabs/TabList.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"react";import"react-aria-components";import"../../index-CCUt_dAN.js";import"../Carousel/CarouselButton/CarouselButton.js";import{TabList as o,TabList as t}from"./Tabs.js";import"../../utils/carousel/hooks/useCarousel.js";import"../../TabPanel-C7ANBbTA.js";export{o as TabList,t as default};
+import"react/jsx-runtime";import"react";import"react-aria-components";import"../../index-CCUt_dAN.js";import"../Carousel/CarouselButton/CarouselButton.js";import{TabList as o,TabList as t}from"./Tabs.js";import"../../utils/carousel/hooks/useCarousel.js";import"../../TabPanel-DDYn4r31.js";export{o as TabList,t as default};
 //# sourceMappingURL=TabList.js.map

package/dist/components/Tabs/TabPanel.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"react-aria-components";import{T as a,T as r}from"../../TabPanel-C7ANBbTA.js";export{a as TabPanel,r as default};
+import"react/jsx-runtime";import"react-aria-components";import{T as a,T as r}from"../../TabPanel-DDYn4r31.js";export{a as TabPanel,r as default};
 //# sourceMappingURL=TabPanel.js.map

package/dist/components/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as a,Fragment as t}from"react/jsx-runtime";import i,{useRef as l,useCallback as s,createContext as r,useContext as n}from"react";import{TabList as o,Tab as c,Tabs as d}from"react-aria-components";import{c as u}from"../../index-CCUt_dAN.js";import{s as f,T as h}from"../../TabPanel-C7ANBbTA.js";import{CarouselButton as m}from"../Carousel/CarouselButton/CarouselButton.js";import{Heading as y}from"../Heading/Heading.js";import{Icon as b}from"../Icon/Icon.js";import{focusStyleVariants as g}from"../../utils/focus/focusStyles.js";import{useCarousel as S}from"../../utils/carousel/hooks/useCarousel.js";const p=u(f.tabList,{variants:{fillContainer:{true:f.fillContainer,false:void 0},hasScrollButtons:{true:f.hasScrollButtons,false:void 0}},defaultVariants:{fillContainer:!1,hasScrollButtons:!1}}),v=({children:t,className:r})=>{const n=N(),{styleVariant:c,align:d,fillContainer:u,focusStyle:h}=n,y=l(null),b="contained"===c?"shapeElevated":"gradient",{scrollerRef:g,setScrollerRef:v,canScrollLeft:C,canScrollRight:V,isOverflowing:w,isItemFullyVisible:B,scrollToItem:x,prevArrowProps:T,nextArrowProps:j,arrowsVisible:D,dragProps:L}=S({arrowStyleVariant:b,focusStyle:h,mouseDragging:!1,hideDisabledArrows:!0}),P=g,$=!u&&w&&D,z=i.Children.count(t),K=s(()=>{if(!P.current||!C)return;const e=P.current;B(0)?e.scrollBy({left:-.6*e.clientWidth,behavior:"smooth"}):x(0)},[C,B,x,P]),A=s(()=>{if(!P.current||!V)return;const e=P.current;B(z-1)?e.scrollBy({left:.6*e.clientWidth,behavior:"smooth"}):x(z-1)},[V,B,z,x,P]),I=r?`${p({fillContainer:u,hasScrollButtons:$})} ${r}`:p({fillContainer:u,hasScrollButtons:$});/* @__PURE__ */
+import{jsxs as e,jsx as a,Fragment as t}from"react/jsx-runtime";import i,{useRef as l,useCallback as s,createContext as r,useContext as n}from"react";import{TabList as o,Tab as c,Tabs as d}from"react-aria-components";import{c as u}from"../../index-CCUt_dAN.js";import{s as f,T as h}from"../../TabPanel-DDYn4r31.js";import{CarouselButton as m}from"../Carousel/CarouselButton/CarouselButton.js";import{Heading as y}from"../Heading/Heading.js";import{Icon as b}from"../Icon/Icon.js";import{focusStyleVariants as g}from"../../utils/focus/focusStyles.js";import{useCarousel as S}from"../../utils/carousel/hooks/useCarousel.js";const p=u(f.tabList,{variants:{fillContainer:{true:f.fillContainer,false:void 0},hasScrollButtons:{true:f.hasScrollButtons,false:void 0}},defaultVariants:{fillContainer:!1,hasScrollButtons:!1}}),v=({children:t,className:r})=>{const n=N(),{styleVariant:c,align:d,fillContainer:u,focusStyle:h}=n,y=l(null),b="contained"===c?"shapeElevated":"gradient",{scrollerRef:g,setScrollerRef:v,canScrollLeft:C,canScrollRight:V,isOverflowing:w,isItemFullyVisible:B,scrollToItem:x,prevArrowProps:T,nextArrowProps:j,arrowsVisible:D,dragProps:L}=S({arrowStyleVariant:b,focusStyle:h,mouseDragging:!1,hideDisabledArrows:!0}),P=g,$=!u&&w&&D,z=i.Children.count(t),K=s(()=>{if(!P.current||!C)return;const e=P.current;B(0)?e.scrollBy({left:-.6*e.clientWidth,behavior:"smooth"}):x(0)},[C,B,x,P]),A=s(()=>{if(!P.current||!V)return;const e=P.current;B(z-1)?e.scrollBy({left:.6*e.clientWidth,behavior:"smooth"}):x(z-1)},[V,B,z,x,P]),I=r?`${p({fillContainer:u,hasScrollButtons:$})} ${r}`:p({fillContainer:u,hasScrollButtons:$});/* @__PURE__ */
 return e("div",{className:f.tabListContainer,ref:y,"data-has-scroll-buttons":$?"true":void 0,"data-style-variant":c,children:[$&&!T.hidden&&/* @__PURE__ */a(m,{dir:"prev",variant:T.styleVariant,size:T.size,focusStyle:T.focusStyle,hideDisabledArrow:T.hidden,isDisabled:T.disabled,className:f.scrollButtonPrev,onClick:K,standalone:!0}),
 /* @__PURE__ */a(o,{ref:v,className:I,"data-style-variant":c,"data-align":d,...L,children:t}),$&&!j.hidden&&/* @__PURE__ */a(m,{dir:"next",variant:j.styleVariant,size:j.size,focusStyle:j.focusStyle,hideDisabledArrow:j.hidden,isDisabled:j.disabled,className:f.scrollButtonNext,onClick:A,standalone:!0})]})},C=({id:i,children:l,iconName:s,href:r,isDisabled:n,className:o})=>{const d=N(),{styleVariant:u,focusStyle:h,headingLevel:m}=d,S=o?`${f.tab} ${g({focusStyle:h})} ${o}`:`${f.tab} ${g({focusStyle:h})}`;/* @__PURE__ */
 return a(c,{id:i,href:r,className:S,"data-has-icon":s?"true":void 0,"data-focus-style":"white"===h?"white":void 0,isDisabled:n,children:/* @__PURE__ */a("span",{className:f.tabText,children:(()=>{const i=/* @__PURE__ */e(t,{children:[s&&/* @__PURE__ */a(b,{iconName:s,iconSize:"heading"===u?"1.5x":"1x",padding:"square","aria-hidden":"true"}),l]});return"heading"===u?/* @__PURE__ */a(y,{as:m,size:"sm",children:i}):i})()})})},V=u(f.tabs,{variants:{styleVariant:{line:f.line,pill:f.pill,contained:f.contained,heading:f.heading},align:{start:f.alignStart,center:f.alignCenter}},defaultVariants:{styleVariant:"line",align:"start"}}),w=r(null),N=()=>{const e=n(w);if(!e)throw new Error("Tab components must be used within a Tabs component");return e},B=({children:t,styleVariant:i="line",align:l="start",fillContainer:s=!1,focusStyle:r="default",headingLevel:n="h3",selectedKey:o,defaultSelectedKey:c,disabledKeys:u,onSelectionChange:m,routes:y})=>{const b={styleVariant:i,align:l,fillContainer:s,focusStyle:r,headingLevel:n};/* @__PURE__ */

package/dist/components/Tabs/index.js

@@ -1,2 +1,2 @@
-import{Tab as a,TabList as o,Tabs as r,useTabsContext as s}from"./Tabs.js";import{T as e}from"../../TabPanel-C7ANBbTA.js";export{a as Tab,o as TabList,e as TabPanel,r as default,s as useTabsContext};
+import{Tab as a,TabList as o,Tabs as r,useTabsContext as s}from"./Tabs.js";import{T as e}from"../../TabPanel-DDYn4r31.js";export{a as Tab,o as TabList,e as TabPanel,r as default,s as useTabsContext};
 //# sourceMappingURL=index.js.map

package/dist/components/index.d.ts

@@ -1,5 +1,7 @@
 export { default as Accordion, AccordionGroup } from './Accordion';
 export type * from './Accordion';
+export { default as AppBannerSection } from './AppBannerSection';
+export type * from './AppBannerSection';
 export { default as AviosCurrencyBadge } from './AviosCurrencyBadge';
 export type * from './AviosCurrencyBadge';
 export { default as AviosCurrency } from './AviosCurrency';

package/dist/components/index.js

@@ -1,2 +1,2 @@
-import '../assets/global.css';/* empty css                */import{Accordion as o,AccordionGroup as r}from"./Accordion/Accordion.js";import{AviosCurrencyBadge as e}from"./AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as i}from"./AviosCurrency/AviosCurrency.js";import{AviosBadge as t}from"./AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as m}from"./AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as s}from"./Badge/Badge.js";import{BannerSectionContent as a}from"./BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as n}from"./BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as p}from"./Box/Box.js";import{BoxLink as d}from"./BoxLink/BoxLink.js";import{BoxLinkContext as l,useBoxLink as f}from"./BoxLink/BoxLinkContext.js";import{Breadcrumbs as j}from"./Breadcrumbs/Breadcrumbs.js";import{Button as u}from"./Button/Button.js";import{ButtonGroup as c}from"./ButtonGroup/ButtonGroup.js";import{Calendar as C}from"./Calendar/Calendar.js";import{CalendarRange as g}from"./CalendarRange/CalendarRange.js";import{CalloutBanner as B}from"./CalloutBanner/CalloutBanner.js";import{default as S}from"./CardSection/CardSection.js";import{Carousel as F}from"./Carousel/Carousel.js";import{CarouselButton as b}from"./Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as T}from"./CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as x}from"./Checkbox/Checkbox.js";import{CheckboxGroup as y}from"./CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as L}from"./ClearFieldButton/ClearFieldButton.js";import{ComboBox as k}from"./ComboBox/ComboBox.js";import{CreditCardNumberField as P}from"./CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as D}from"./CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as h}from"./Currency/Currency.js";import{DateField as I}from"./DateField/DateField.js";import{DatePicker as v}from"./DatePicker/DatePicker.js";import{DateRangePicker as A}from"./DateRangePicker/DateRangePicker.js";import{DestinationHeading as G}from"./DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as H}from"./DetailsDisclosure/DetailsDisclosure.js";import{Dialog as N}from"./Dialog/Dialog.js";import{ErrorSummary as R}from"./ErrorSummary/ErrorSummary.js";import{Eyebrow as w}from"./Eyebrow/Eyebrow.js";import{default as E}from"./FieldDescription/FieldDescription.js";import{FieldError as M}from"./FieldError/FieldError.js";import{FieldHeader as V}from"./FieldHeader/FieldHeader.js";import{FieldLabel as Y}from"./FieldLabel/FieldLabel.js";import{default as q}from"./Fieldset/Fieldset.js";import{FieldsetHeader as z}from"./FieldsetHeader/FieldsetHeader.js";import{Form as J}from"./Form/Form.js";import{Grid as K}from"./Grid/Grid.js";import{Heading as O}from"./Heading/Heading.js";import{Icon as Q}from"./Icon/Icon.js";import{IconBackdrop as U}from"./IconBackdrop/IconBackdrop.js";import{IconButton as W}from"./IconButton/IconButton.js";import{Image as X}from"./Image/Image.js";import{IntroSection as Z}from"./IntroSection/IntroSection.js";import{Label as $}from"./Label/Label.js";import{default as _}from"./Link/Link.js";import{ListBox as oo}from"./ListBox/ListBox.js";import{ListBoxItem as ro}from"./ListBoxItem/ListBoxItem.js";import{default as eo}from"./LoadingSpinner/LoadingSpinner.js";import{Menu as io}from"./Menu/Menu.js";import{MonthYearField as to}from"./MonthYearField/MonthYearField.js";import{NumberField as mo}from"./NumberField/NumberField.js";import{Paragraph as so}from"./Paragraph/Paragraph.js";import{PasswordField as ao}from"./PasswordField/PasswordField.js";import{PhoneNumberField as no}from"./PhoneNumberField/PhoneNumberField.js";import"../utils/phoneNumber/phoneNumber.js";import{Popover as po}from"./Popover/Popover.js";import{ProductTile as lo}from"./ProductTile/ProductTile.js";import{Radio as fo}from"./Radio/Radio.js";import{RadioGroup as jo}from"./RadioGroup/RadioGroup.js";import{SearchField as uo}from"./SearchField/SearchField.js";import{default as co}from"./Section/Section.js";import{SegmentedControl as Co}from"./SegmentedControl/SegmentedControl.js";import{default as go}from"./SelectCard/SelectCard.js";import{default as Bo}from"./SelectNative/SelectNative.js";import{SkeletonLoader as So}from"./SkeletonLoader/SkeletonLoader.js";import{Slider as Fo}from"./Slider/Slider.js";import{Spacer as bo}from"./Spacer/Spacer.js";import{SubHeading as To}from"./SubHeading/SubHeading.js";import{Switch as xo}from"./Switch/Switch.js";import{Tab as yo,TabList as Lo,Tabs as ko,useTabsContext as Po}from"./Tabs/Tabs.js";import{T as Do}from"../TabPanel-C7ANBbTA.js";import{Tag as ho}from"./Tag/Tag.js";import{TagGroup as Io}from"./TagGroup/TagGroup.js";import{TextField as vo}from"./TextField/TextField.js";import{TextAreaField as Ao}from"./TextAreaField/TextAreaField.js";import{default as Go}from"./ToggleButton/ToggleButton.js";import{default as Ho}from"./ToggleIconButton/ToggleIconButton.js";import{Tooltip as No}from"./Tooltip/Tooltip.js";import{VisuallyHidden as Ro}from"./VisuallyHidden/VisuallyHidden.js";export{o as Accordion,r as AccordionGroup,t as AviosBadge,i as AviosCurrency,e as AviosCurrencyBadge,m as AviosCurrencySymbol,s as Badge,a as BannerSectionContent,n as BannerSectionPlectrum,p as Box,d as BoxLink,l as BoxLinkContext,j as Breadcrumbs,u as Button,c as ButtonGroup,C as Calendar,g as CalendarRange,B as CalloutBanner,S as CardSection,F as Carousel,b as CarouselButton,T as CategoryTileGroup,x as Checkbox,y as CheckboxGroup,L as ClearFieldButton,k as ComboBox,P as CreditCardNumberField,D as CreditCardSecurityCodeField,h as Currency,I as DateField,v as DatePicker,A as DateRangePicker,G as DestinationHeading,H as DetailsDisclosure,N as Dialog,R as ErrorSummary,w as Eyebrow,E as FieldDescription,M as FieldError,V as FieldHeader,Y as FieldLabel,q as Fieldset,z as FieldsetHeader,J as Form,K as Grid,O as Heading,Q as Icon,U as IconBackdrop,W as IconButton,X as Image,Z as IntroSection,$ as Label,_ as Link,oo as ListBox,ro as ListBoxItem,eo as LoadingSpinner,io as Menu,to as MonthYearField,mo as NumberField,so as Paragraph,ao as PasswordField,no as PhoneNumberField,po as Popover,lo as ProductTile,fo as Radio,jo as RadioGroup,uo as SearchField,co as Section,Co as SegmentedControl,go as SelectCard,Bo as SelectNative,So as SkeletonLoader,Fo as Slider,bo as Spacer,To as SubHeading,xo as Switch,yo as Tab,Lo as TabList,Do as TabPanel,ko as Tabs,ho as Tag,Io as TagGroup,Ao as TextAreaField,vo as TextField,Go as ToggleButton,Ho as ToggleIconButton,No as Tooltip,Ro as VisuallyHidden,f as useBoxLink,Po as useTabsContext};
+import '../assets/global.css';/* empty css                */import{Accordion as o,AccordionGroup as r}from"./Accordion/Accordion.js";import{AppBannerSection as e}from"./AppBannerSection/AppBannerSection.js";import{AviosCurrencyBadge as i}from"./AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as t}from"./AviosCurrency/AviosCurrency.js";import{AviosBadge as m}from"./AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as a}from"./AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as s}from"./Badge/Badge.js";import{BannerSectionContent as n}from"./BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as p}from"./BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as d}from"./Box/Box.js";import{BoxLink as l}from"./BoxLink/BoxLink.js";import{BoxLinkContext as f,useBoxLink as j}from"./BoxLink/BoxLinkContext.js";import{Breadcrumbs as u}from"./Breadcrumbs/Breadcrumbs.js";import{Button as c}from"./Button/Button.js";import{ButtonGroup as C}from"./ButtonGroup/ButtonGroup.js";import{Calendar as g}from"./Calendar/Calendar.js";import{CalendarRange as B}from"./CalendarRange/CalendarRange.js";import{CalloutBanner as S}from"./CalloutBanner/CalloutBanner.js";import{default as F}from"./CardSection/CardSection.js";import{Carousel as b}from"./Carousel/Carousel.js";import{CarouselButton as T}from"./Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as x}from"./CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as y}from"./Checkbox/Checkbox.js";import{CheckboxGroup as L}from"./CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as k}from"./ClearFieldButton/ClearFieldButton.js";import{ComboBox as P}from"./ComboBox/ComboBox.js";import{CreditCardNumberField as D}from"./CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as h}from"./CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as I}from"./Currency/Currency.js";import{DateField as A}from"./DateField/DateField.js";import{DatePicker as v}from"./DatePicker/DatePicker.js";import{DateRangePicker as G}from"./DateRangePicker/DateRangePicker.js";import{DestinationHeading as H}from"./DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as N}from"./DetailsDisclosure/DetailsDisclosure.js";import{Dialog as R}from"./Dialog/Dialog.js";import{ErrorSummary as w}from"./ErrorSummary/ErrorSummary.js";import{Eyebrow as E}from"./Eyebrow/Eyebrow.js";import{default as M}from"./FieldDescription/FieldDescription.js";import{FieldError as V}from"./FieldError/FieldError.js";import{FieldHeader as Y}from"./FieldHeader/FieldHeader.js";import{FieldLabel as q}from"./FieldLabel/FieldLabel.js";import{default as z}from"./Fieldset/Fieldset.js";import{FieldsetHeader as J}from"./FieldsetHeader/FieldsetHeader.js";import{Form as K}from"./Form/Form.js";import{Grid as O}from"./Grid/Grid.js";import{Heading as Q}from"./Heading/Heading.js";import{Icon as U}from"./Icon/Icon.js";import{IconBackdrop as W}from"./IconBackdrop/IconBackdrop.js";import{IconButton as X}from"./IconButton/IconButton.js";import{Image as Z}from"./Image/Image.js";import{IntroSection as $}from"./IntroSection/IntroSection.js";import{Label as _}from"./Label/Label.js";import{default as oo}from"./Link/Link.js";import{ListBox as ro}from"./ListBox/ListBox.js";import{ListBoxItem as eo}from"./ListBoxItem/ListBoxItem.js";import{default as io}from"./LoadingSpinner/LoadingSpinner.js";import{Menu as to}from"./Menu/Menu.js";import{MonthYearField as mo}from"./MonthYearField/MonthYearField.js";import{NumberField as ao}from"./NumberField/NumberField.js";import{Paragraph as so}from"./Paragraph/Paragraph.js";import{PasswordField as no}from"./PasswordField/PasswordField.js";import{PhoneNumberField as po}from"./PhoneNumberField/PhoneNumberField.js";import"../utils/phoneNumber/phoneNumber.js";import{Popover as lo}from"./Popover/Popover.js";import{ProductTile as fo}from"./ProductTile/ProductTile.js";import{Radio as jo}from"./Radio/Radio.js";import{RadioGroup as uo}from"./RadioGroup/RadioGroup.js";import{SearchField as co}from"./SearchField/SearchField.js";import{default as Co}from"./Section/Section.js";import{SegmentedControl as go}from"./SegmentedControl/SegmentedControl.js";import{default as Bo}from"./SelectCard/SelectCard.js";import{default as So}from"./SelectNative/SelectNative.js";import{SkeletonLoader as Fo}from"./SkeletonLoader/SkeletonLoader.js";import{Slider as bo}from"./Slider/Slider.js";import{Spacer as To}from"./Spacer/Spacer.js";import{SubHeading as xo}from"./SubHeading/SubHeading.js";import{Switch as yo}from"./Switch/Switch.js";import{Tab as Lo,TabList as ko,Tabs as Po,useTabsContext as Do}from"./Tabs/Tabs.js";import{T as ho}from"../TabPanel-DDYn4r31.js";import{Tag as Io}from"./Tag/Tag.js";import{TagGroup as Ao}from"./TagGroup/TagGroup.js";import{TextField as vo}from"./TextField/TextField.js";import{TextAreaField as Go}from"./TextAreaField/TextAreaField.js";import{default as Ho}from"./ToggleButton/ToggleButton.js";import{default as No}from"./ToggleIconButton/ToggleIconButton.js";import{Tooltip as Ro}from"./Tooltip/Tooltip.js";import{VisuallyHidden as wo}from"./VisuallyHidden/VisuallyHidden.js";export{o as Accordion,r as AccordionGroup,e as AppBannerSection,m as AviosBadge,t as AviosCurrency,i as AviosCurrencyBadge,a as AviosCurrencySymbol,s as Badge,n as BannerSectionContent,p as BannerSectionPlectrum,d as Box,l as BoxLink,f as BoxLinkContext,u as Breadcrumbs,c as Button,C as ButtonGroup,g as Calendar,B as CalendarRange,S as CalloutBanner,F as CardSection,b as Carousel,T as CarouselButton,x as CategoryTileGroup,y as Checkbox,L as CheckboxGroup,k as ClearFieldButton,P as ComboBox,D as CreditCardNumberField,h as CreditCardSecurityCodeField,I as Currency,A as DateField,v as DatePicker,G as DateRangePicker,H as DestinationHeading,N as DetailsDisclosure,R as Dialog,w as ErrorSummary,E as Eyebrow,M as FieldDescription,V as FieldError,Y as FieldHeader,q as FieldLabel,z as Fieldset,J as FieldsetHeader,K as Form,O as Grid,Q as Heading,U as Icon,W as IconBackdrop,X as IconButton,Z as Image,$ as IntroSection,_ as Label,oo as Link,ro as ListBox,eo as ListBoxItem,io as LoadingSpinner,to as Menu,mo as MonthYearField,ao as NumberField,so as Paragraph,no as PasswordField,po as PhoneNumberField,lo as Popover,fo as ProductTile,jo as Radio,uo as RadioGroup,co as SearchField,Co as Section,go as SegmentedControl,Bo as SelectCard,So as SelectNative,Fo as SkeletonLoader,bo as Slider,To as Spacer,xo as SubHeading,yo as Switch,Lo as Tab,ko as TabList,ho as TabPanel,Po as Tabs,Io as Tag,Ao as TagGroup,Go as TextAreaField,vo as TextField,Ho as ToggleButton,No as ToggleIconButton,Ro as Tooltip,wo as VisuallyHidden,j as useBoxLink,Do as useTabsContext};
 //# sourceMappingURL=index.js.map