@alto-avios/alto-ui 5.6.1 → 5.7.0

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './Box.module.css';\nimport {\n  backgroundColorVariants,\n  type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n  flexVariants,\n  isFlexBasisToken,\n  resolveFlexBasisCssValue,\n  type FlexBasisToken,\n  type FlexVariants,\n} from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport marginStyles from '../../utils/margin/margin.module.css';\nimport { borderVariants, type BorderVariants } from '../../utils/border/border';\nimport {\n  paddingVariants,\n  type PaddingVariants,\n} from '../../utils/padding/padding';\nimport { marginVariants, type MarginVariants } from '../../utils/margin/margin';\nimport {\n  positionVariants,\n  type PositionVariants,\n} from '../../utils/position/position';\nimport {\n  getBaseValueOrUndefined,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\n\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesMargin = generateResponsiveClasses(marginStyles);\n\nexport interface BoxBaseProps\n  extends BackgroundVariants,\n    Omit<FlexVariants, 'flexBasis'>,\n    BorderVariants,\n    PaddingVariants,\n    MarginVariants,\n    PositionVariants,\n    Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {\n  /**\n   * The HTML element to render the Box as.\n   */\n  as?:\n    | 'div'\n    | 'article'\n    | 'aside'\n    | 'nav'\n    | 'section'\n    | 'main'\n    | 'span'\n    | 'ul'\n    | 'ol'\n    | 'li';\n  /**\n   * The width of the Box.\n   * Accepts any valid CSS unit or \"full\"\n   */\n  width?: 'full' | string;\n  /**\n   * **[Responsive]** The maximum width of the Box.\n   * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n   */\n  maxWidth?: 'pageWidth' | string;\n  /**\n   * **[Responsive]** The minimum width of the Box.\n   * Accepts any valid CSS unit.\n   */\n  minWidth?: string;\n  /**\n   * The height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  height?: string;\n  /**\n   * **[Responsive]** The maximum height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  maxHeight?: string;\n  /**\n   * The minimum height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  minHeight?: string;\n  /**\n   * The z-index of the Box.\n   * Accepts any valid CSS z-index value.\n   */\n  zIndex?: string;\n  /**\n   * The top position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  top?: string;\n  /**\n   * The right position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  right?: string;\n  /**\n   * The bottom position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  bottom?: string;\n  /**\n   * The left position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  left?: string;\n  /**\n   * Test identifier for testing purposes.\n   * Defaults to \"box\" if not provided.\n   */\n  'data-testid'?: string;\n  /**\n   * @deprecated Use `data-testid` instead.\n   * @ignore\n   */\n  dataTestId?: string;\n  /**\n   * CSS overflow-wrap property.\n   */\n  overflowWrap?: 'normal' | 'break-word' | 'anywhere';\n  /**\n   * CSS word-break property.\n   */\n  wordBreak?: React.CSSProperties['wordBreak'];\n  /**\n   * **[Responsive]** Defines the default size of a flex item before remaining space is distributed.\n   * Accepts predefined flex-basis tokens and arbitrary CSS values (e.g. \"200px\", \"30%\", \"clamp(200px, 50vw, 400px)\").\n   */\n  flexBasis?: FlexBasisToken | string | number;\n}\n\ntype ResponsivePropKeys =\n  | 'justifyContent'\n  | 'flexDirection'\n  | 'gap'\n  | 'rowGap'\n  | 'columnGap'\n  | 'flexBasis'\n  | 'alignItems'\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'padding'\n  | 'paddingX'\n  | 'paddingY'\n  | 'marginTop'\n  | 'marginRight'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'margin'\n  | 'marginX'\n  | 'marginY'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'maxHeight';\n\nexport type BoxProps = WithResponsiveProps<BoxBaseProps, ResponsivePropKeys>;\n\nexport const Box = ({\n  children,\n  as: Component = 'div',\n  width,\n  height,\n  minHeight,\n  zIndex,\n  top,\n  right,\n  bottom,\n  left,\n  position,\n  'data-testid': dataTestIdNative,\n  dataTestId: dataTestIdLegacy = 'box',\n  overflowWrap,\n  wordBreak,\n  ...props\n}: BoxProps) => {\n  //Responsive Props\n\n  const baseJustifyContent = getBaseValueOrUndefined(props.justifyContent);\n  const baseFlexDirection = getBaseValueOrUndefined(props.flexDirection);\n  const baseGap = getBaseValueOrUndefined(props.gap);\n  const baseRowGap = getBaseValueOrUndefined(props.rowGap);\n  const baseColumnGap = getBaseValueOrUndefined(props.columnGap);\n  const baseAlignItems = getBaseValueOrUndefined(props.alignItems);\n  const baseDisplay = getBaseValueOrUndefined(props.display);\n  const baseFlexWrap = getBaseValueOrUndefined(props.flexWrap);\n  const baseFlexGrow = getBaseValueOrUndefined(props.flexGrow);\n  const baseFlexShrink = getBaseValueOrUndefined(props.flexShrink);\n  const baseFlexBasis = getBaseValueOrUndefined(props.flexBasis);\n  const basePaddingTop = getBaseValueOrUndefined(props.paddingTop);\n  const basePaddingRight = getBaseValueOrUndefined(props.paddingRight);\n  const basePaddingBottom = getBaseValueOrUndefined(props.paddingBottom);\n  const basePaddingLeft = getBaseValueOrUndefined(props.paddingLeft);\n  const basePadding = getBaseValueOrUndefined(props.padding);\n  const basePaddingX = getBaseValueOrUndefined(props.paddingX);\n  const basePaddingY = getBaseValueOrUndefined(props.paddingY);\n  const baseMarginTop = getBaseValueOrUndefined(props.marginTop);\n  const baseMarginRight = getBaseValueOrUndefined(props.marginRight);\n  const baseMarginBottom = getBaseValueOrUndefined(props.marginBottom);\n  const baseMarginLeft = getBaseValueOrUndefined(props.marginLeft);\n  const baseMargin = getBaseValueOrUndefined(props.margin);\n  const baseMarginX = getBaseValueOrUndefined(props.marginX);\n  const baseMarginY = getBaseValueOrUndefined(props.marginY);\n\n  const maxWidthVars = responsiveToCssVars(props.maxWidth, {\n    varPrefix: '--box-max-width',\n    normalise: (value) => {\n      if (value === 'pageWidth') {\n        return 'var(--alto-section-container-max-width)';\n      }\n      return value; // arbitrary CSS string (e.g. \"960px\", \"80vw\", \"min(960px, 100%)\")\n    },\n  });\n\n  const maxHeightVars = responsiveToCssVars(props.maxHeight, {\n    varPrefix: '--box-max-height',\n    normalise: (value) => value, // arbitrary CSS string (e.g. \"500px\", \"80vh\", \"min(500px, 100%)\")\n  });\n\n  const minWidthVars = responsiveToCssVars(props.minWidth, {\n    varPrefix: '--box-min-width',\n    normalise: (value) => value, // arbitrary CSS string (e.g. \"300px\", \"50vw\", \"min(300px, 100%)\")\n  });\n\n  const flexBasisVars = responsiveToCssVars(props.flexBasis, {\n    varPrefix: '--box-flex-basis',\n    normalise: (value) => resolveFlexBasisCssValue(value),\n  });\n\n  const flexBaseClass = flexVariants({\n    display: baseDisplay,\n    justifyContent: baseJustifyContent,\n    flexDirection: baseFlexDirection,\n    gap: baseGap,\n    rowGap: baseRowGap,\n    columnGap: baseColumnGap,\n    alignItems: baseAlignItems,\n    flexWrap: baseFlexWrap,\n    flexGrow: baseFlexGrow,\n    flexShrink: baseFlexShrink,\n    flexBasis: isFlexBasisToken(baseFlexBasis) ? baseFlexBasis : undefined,\n  });\n\n  const paddingBaseClass = paddingVariants({\n    paddingTop: basePaddingTop,\n    paddingRight: basePaddingRight,\n    paddingBottom: basePaddingBottom,\n    paddingLeft: basePaddingLeft,\n    padding: basePadding,\n    paddingX: basePaddingX,\n    paddingY: basePaddingY,\n  });\n\n  const marginBaseClass = marginVariants({\n    marginTop: baseMarginTop,\n    marginRight: baseMarginRight,\n    marginBottom: baseMarginBottom,\n    marginLeft: baseMarginLeft,\n    margin: baseMargin,\n    marginX: baseMarginX,\n    marginY: baseMarginY,\n  });\n\n  const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n    props.justifyContent,\n    'flex-justify-content',\n  );\n\n  const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n    props.flexDirection,\n    'flex-direction',\n  );\n\n  const gapResponsiveClasses = getResponsiveClassesFlex(props.gap, 'flex-gap');\n\n  const rowGapResponsiveClasses = getResponsiveClassesFlex(\n    props.rowGap,\n    'flex-row-gap',\n  );\n\n  const columnGapResponsiveClasses = getResponsiveClassesFlex(\n    props.columnGap,\n    'flex-column-gap',\n  );\n\n  const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n    props.alignItems,\n    'flex-align-items',\n  );\n\n  const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingTop,\n    'padding-top',\n  );\n\n  const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingRight,\n    'padding-right',\n  );\n\n  const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingBottom,\n    'padding-bottom',\n  );\n\n  const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingLeft,\n    'padding-left',\n  );\n\n  const paddingResponsiveClasses = getResponsiveClassesPadding(\n    props.padding,\n    'padding',\n  );\n\n  const paddingXResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingX,\n    'padding-x',\n  );\n\n  const paddingYResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingY,\n    'padding-y',\n  );\n\n  const marginTopResponsiveClasses = getResponsiveClassesMargin(\n    props.marginTop,\n    'margin-top',\n  );\n\n  const marginRightResponsiveClasses = getResponsiveClassesMargin(\n    props.marginRight,\n    'margin-right',\n  );\n\n  const marginBottomResponsiveClasses = getResponsiveClassesMargin(\n    props.marginBottom,\n    'margin-bottom',\n  );\n\n  const marginLeftResponsiveClasses = getResponsiveClassesMargin(\n    props.marginLeft,\n    'margin-left',\n  );\n\n  const marginResponsiveClasses = getResponsiveClassesMargin(\n    props.margin,\n    'margin',\n  );\n\n  const marginXResponsiveClasses = getResponsiveClassesMargin(\n    props.marginX,\n    'margin-x',\n  );\n\n  const marginYResponsiveClasses = getResponsiveClassesMargin(\n    props.marginY,\n    'margin-y',\n  );\n\n  // Keep existing convenience behavior for all-sides borders:\n  // if a border colour is set but width is omitted, default width to `sm`.\n  const borderWidth =\n    !props?.borderWidth &&\n    props.borderColour !== undefined &&\n    props.borderColour !== 'none'\n      ? 'sm'\n      : props.borderWidth;\n\n  // Mirror the same convenience behavior for top-only borders.\n  // If top colour is set without top width, default top width to `sm`.\n  const borderTopWidth =\n    !props?.borderTopWidth &&\n    props.borderTopColour !== undefined &&\n    props.borderTopColour !== 'none'\n      ? 'sm'\n      : props.borderTopWidth;\n\n  // Apply the same side-only convenience fallback for right, bottom, and left.\n  const borderRightWidth =\n    !props?.borderRightWidth &&\n    props.borderRightColour !== undefined &&\n    props.borderRightColour !== 'none'\n      ? 'sm'\n      : props.borderRightWidth;\n\n  const borderBottomWidth =\n    !props?.borderBottomWidth &&\n    props.borderBottomColour !== undefined &&\n    props.borderBottomColour !== 'none'\n      ? 'sm'\n      : props.borderBottomWidth;\n\n  const borderLeftWidth =\n    !props?.borderLeftWidth &&\n    props.borderLeftColour !== undefined &&\n    props.borderLeftColour !== 'none'\n      ? 'sm'\n      : props.borderLeftWidth;\n\n  const stylesProp: React.CSSProperties = {\n    width: width === 'full' ? '100%' : (width as CSSProperties['width']),\n    height: height === 'full' ? '100%' : height,\n    minHeight,\n    zIndex,\n    top,\n    right,\n    bottom,\n    left,\n    ...maxWidthVars,\n    ...minWidthVars,\n    ...maxHeightVars,\n    ...flexBasisVars,\n    overflow: props.maxHeight || props.maxWidth ? 'auto' : undefined,\n    overflowWrap,\n    wordBreak,\n  };\n\n  return (\n    <Component\n      className={[\n        styles.box,\n        borderVariants({\n          ...props,\n          borderWidth,\n          borderTopWidth,\n          borderRightWidth,\n          borderBottomWidth,\n          borderLeftWidth,\n        }),\n        flexBaseClass,\n        paddingBaseClass,\n        marginBaseClass,\n        backgroundColorVariants({\n          backgroundColor: props.backgroundColor,\n          ...props,\n        }),\n        positionVariants({ position }),\n        ...justifyContentResponsiveClasses,\n        ...flexDirectionResponsiveClasses,\n        ...gapResponsiveClasses,\n        ...rowGapResponsiveClasses,\n        ...columnGapResponsiveClasses,\n        ...alignItemsResponsiveClasses,\n        ...paddingTopResponsiveClasses,\n        ...paddingRightResponsiveClasses,\n        ...paddingBottomResponsiveClasses,\n        ...paddingLeftResponsiveClasses,\n        ...paddingResponsiveClasses,\n        ...paddingXResponsiveClasses,\n        ...paddingYResponsiveClasses,\n        ...marginTopResponsiveClasses,\n        ...marginRightResponsiveClasses,\n        ...marginBottomResponsiveClasses,\n        ...marginLeftResponsiveClasses,\n        ...marginResponsiveClasses,\n        ...marginXResponsiveClasses,\n        ...marginYResponsiveClasses,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={stylesProp}\n      data-testid={dataTestIdNative ?? dataTestIdLegacy}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Box;\n"],"names":["getResponsiveClassesFlex","generateResponsiveClasses","flexStyles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesMargin","marginStyles","Box","children","as","Component","width","height","minHeight","zIndex","top","right","bottom","left","position","dataTestIdNative","dataTestId","dataTestIdLegacy","overflowWrap","wordBreak","props","baseJustifyContent","getBaseValueOrUndefined","justifyContent","baseFlexDirection","flexDirection","baseGap","gap","baseRowGap","rowGap","baseColumnGap","columnGap","baseAlignItems","alignItems","baseDisplay","display","baseFlexWrap","flexWrap","baseFlexGrow","flexGrow","baseFlexShrink","flexShrink","baseFlexBasis","flexBasis","basePaddingTop","paddingTop","basePaddingRight","paddingRight","basePaddingBottom","paddingBottom","basePaddingLeft","paddingLeft","basePadding","padding","basePaddingX","paddingX","basePaddingY","paddingY","baseMarginTop","marginTop","baseMarginRight","marginRight","baseMarginBottom","marginBottom","baseMarginLeft","marginLeft","baseMargin","margin","baseMarginX","marginX","baseMarginY","marginY","maxWidthVars","responsiveToCssVars","maxWidth","varPrefix","normalise","value","maxHeightVars","maxHeight","minWidthVars","minWidth","flexBasisVars","resolveFlexBasisCssValue","flexBaseClass","flexVariants","isFlexBasisToken","paddingBaseClass","paddingVariants","marginBaseClass","marginVariants","justifyContentResponsiveClasses","flexDirectionResponsiveClasses","gapResponsiveClasses","rowGapResponsiveClasses","columnGapResponsiveClasses","alignItemsResponsiveClasses","paddingTopResponsiveClasses","paddingRightResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","marginTopResponsiveClasses","marginRightResponsiveClasses","marginBottomResponsiveClasses","marginLeftResponsiveClasses","marginResponsiveClasses","marginXResponsiveClasses","marginYResponsiveClasses","borderWidth","borderColour","borderTopWidth","borderTopColour","borderRightWidth","borderRightColour","borderBottomWidth","borderBottomColour","borderLeftWidth","borderLeftColour","stylesProp","overflow","jsx","className","styles","box","borderVariants","backgroundColorVariants","backgroundColor","positionVariants","filter","Boolean","join","style"],"mappings":"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"}
+{"version":3,"file":"Box.js","sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\nimport styles from './Box.module.css';\nimport {\n  backgroundColorVariants,\n  type BackgroundVariants,\n} from '../../utils/backgroundColor/backgroundColor';\nimport {\n  flexVariants,\n  isFlexBasisToken,\n  resolveFlexBasisCssValue,\n  type FlexBasisToken,\n  type FlexVariants,\n} from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport marginStyles from '../../utils/margin/margin.module.css';\nimport { borderVariants, type BorderVariants } from '../../utils/border/border';\nimport {\n  paddingVariants,\n  type PaddingVariants,\n} from '../../utils/padding/padding';\nimport { marginVariants, type MarginVariants } from '../../utils/margin/margin';\nimport {\n  positionVariants,\n  type PositionVariants,\n} from '../../utils/position/position';\nimport {\n  getBaseValueOrUndefined,\n  generateResponsiveClasses,\n  type WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\nimport { responsiveToCssVars } from '../../utils/breakpoint/responsiveToCssVars';\n\nconst getResponsiveClassesFlex = generateResponsiveClasses(flexStyles);\nconst getResponsiveClassesPadding = generateResponsiveClasses(paddingStyles);\nconst getResponsiveClassesMargin = generateResponsiveClasses(marginStyles);\n\nexport interface BoxBaseProps\n  extends BackgroundVariants,\n    Omit<FlexVariants, 'flexBasis'>,\n    BorderVariants,\n    PaddingVariants,\n    MarginVariants,\n    PositionVariants,\n    Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {\n  /**\n   * The HTML element to render the Box as.\n   */\n  as?:\n    | 'div'\n    | 'article'\n    | 'aside'\n    | 'nav'\n    | 'section'\n    | 'main'\n    | 'span'\n    | 'ul'\n    | 'ol'\n    | 'li';\n  /**\n   * The width of the Box.\n   * Accepts any valid CSS unit or \"full\"\n   */\n  width?: 'full' | string;\n  /**\n   * **[Responsive]** The maximum width of the Box.\n   * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n   */\n  maxWidth?: 'pageWidth' | string;\n  /**\n   * **[Responsive]** The minimum width of the Box.\n   * Accepts any valid CSS unit.\n   */\n  minWidth?: string;\n  /**\n   * The height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  height?: string;\n  /**\n   * **[Responsive]** The maximum height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  maxHeight?: string;\n  /**\n   * The minimum height of the Box.\n   * Accepts any valid CSS unit.\n   */\n  minHeight?: string;\n  /**\n   * The z-index of the Box.\n   * Accepts any valid CSS z-index value.\n   */\n  zIndex?: string;\n  /**\n   * The top position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  top?: string;\n  /**\n   * The right position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  right?: string;\n  /**\n   * The bottom position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  bottom?: string;\n  /**\n   * The left position of the Box.\n   * Accepts any valid CSS position value.\n   */\n  left?: string;\n  /**\n   * Test identifier for testing purposes.\n   * Defaults to \"box\" if not provided.\n   */\n  'data-testid'?: string;\n  /**\n   * @deprecated Use `data-testid` instead.\n   * @ignore\n   */\n  dataTestId?: string;\n  /**\n   * CSS overflow-wrap property.\n   */\n  overflowWrap?: 'normal' | 'break-word' | 'anywhere';\n  /**\n   * CSS word-break property.\n   */\n  wordBreak?: React.CSSProperties['wordBreak'];\n  /**\n   * **[Responsive]** Defines the default size of a flex item before remaining space is distributed.\n   * Accepts predefined flex-basis tokens and arbitrary CSS values (e.g. \"200px\", \"30%\", \"clamp(200px, 50vw, 400px)\").\n   */\n  flexBasis?: FlexBasisToken | string | number;\n}\n\ntype ResponsivePropKeys =\n  | 'justifyContent'\n  | 'flexDirection'\n  | 'gap'\n  | 'rowGap'\n  | 'columnGap'\n  | 'flexBasis'\n  | 'alignItems'\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'padding'\n  | 'paddingX'\n  | 'paddingY'\n  | 'marginTop'\n  | 'marginRight'\n  | 'marginBottom'\n  | 'marginLeft'\n  | 'margin'\n  | 'marginX'\n  | 'marginY'\n  | 'minWidth'\n  | 'maxWidth'\n  | 'maxHeight';\n\nexport type BoxProps = WithResponsiveProps<BoxBaseProps, ResponsivePropKeys>;\n\nexport const Box = ({\n  children,\n  as: Component = 'div',\n  width,\n  height,\n  minHeight,\n  zIndex,\n  top,\n  right,\n  bottom,\n  left,\n  position,\n  'data-testid': dataTestIdNative,\n  dataTestId: dataTestIdLegacy = 'box',\n  overflowWrap,\n  wordBreak,\n  ...props\n}: BoxProps) => {\n  //Responsive Props\n\n  const baseJustifyContent = getBaseValueOrUndefined(props.justifyContent);\n  const baseFlexDirection = getBaseValueOrUndefined(props.flexDirection);\n  const baseGap = getBaseValueOrUndefined(props.gap);\n  const baseRowGap = getBaseValueOrUndefined(props.rowGap);\n  const baseColumnGap = getBaseValueOrUndefined(props.columnGap);\n  const baseAlignItems = getBaseValueOrUndefined(props.alignItems);\n  const baseDisplay = getBaseValueOrUndefined(props.display);\n  const baseFlexWrap = getBaseValueOrUndefined(props.flexWrap);\n  const baseFlexGrow = getBaseValueOrUndefined(props.flexGrow);\n  const baseFlexShrink = getBaseValueOrUndefined(props.flexShrink);\n  const baseFlexBasis = getBaseValueOrUndefined(props.flexBasis);\n  const basePaddingTop = getBaseValueOrUndefined(props.paddingTop);\n  const basePaddingRight = getBaseValueOrUndefined(props.paddingRight);\n  const basePaddingBottom = getBaseValueOrUndefined(props.paddingBottom);\n  const basePaddingLeft = getBaseValueOrUndefined(props.paddingLeft);\n  const basePadding = getBaseValueOrUndefined(props.padding);\n  const basePaddingX = getBaseValueOrUndefined(props.paddingX);\n  const basePaddingY = getBaseValueOrUndefined(props.paddingY);\n  const baseMarginTop = getBaseValueOrUndefined(props.marginTop);\n  const baseMarginRight = getBaseValueOrUndefined(props.marginRight);\n  const baseMarginBottom = getBaseValueOrUndefined(props.marginBottom);\n  const baseMarginLeft = getBaseValueOrUndefined(props.marginLeft);\n  const baseMargin = getBaseValueOrUndefined(props.margin);\n  const baseMarginX = getBaseValueOrUndefined(props.marginX);\n  const baseMarginY = getBaseValueOrUndefined(props.marginY);\n\n  const maxWidthVars = responsiveToCssVars(props.maxWidth, {\n    varPrefix: '--box-max-width',\n    normalise: (value) => {\n      if (value === 'pageWidth') {\n        return 'var(--alto-section-container-max-width)';\n      }\n      return value; // arbitrary CSS string (e.g. \"960px\", \"80vw\", \"min(960px, 100%)\")\n    },\n  });\n\n  const maxHeightVars = responsiveToCssVars(props.maxHeight, {\n    varPrefix: '--box-max-height',\n    normalise: (value) => value, // arbitrary CSS string (e.g. \"500px\", \"80vh\", \"min(500px, 100%)\")\n  });\n\n  const minWidthVars = responsiveToCssVars(props.minWidth, {\n    varPrefix: '--box-min-width',\n    normalise: (value) => value, // arbitrary CSS string (e.g. \"300px\", \"50vw\", \"min(300px, 100%)\")\n  });\n\n  const flexBasisVars = responsiveToCssVars(props.flexBasis, {\n    varPrefix: '--box-flex-basis',\n    normalise: (value) => resolveFlexBasisCssValue(value),\n  });\n\n  const flexBaseClass = flexVariants({\n    display: baseDisplay,\n    justifyContent: baseJustifyContent,\n    flexDirection: baseFlexDirection,\n    gap: baseGap,\n    rowGap: baseRowGap,\n    columnGap: baseColumnGap,\n    alignItems: baseAlignItems,\n    flexWrap: baseFlexWrap,\n    flexGrow: baseFlexGrow,\n    flexShrink: baseFlexShrink,\n    flexBasis: isFlexBasisToken(baseFlexBasis) ? baseFlexBasis : undefined,\n  });\n\n  const paddingBaseClass = paddingVariants({\n    paddingTop: basePaddingTop,\n    paddingRight: basePaddingRight,\n    paddingBottom: basePaddingBottom,\n    paddingLeft: basePaddingLeft,\n    padding: basePadding,\n    paddingX: basePaddingX,\n    paddingY: basePaddingY,\n  });\n\n  const marginBaseClass = marginVariants({\n    marginTop: baseMarginTop,\n    marginRight: baseMarginRight,\n    marginBottom: baseMarginBottom,\n    marginLeft: baseMarginLeft,\n    margin: baseMargin,\n    marginX: baseMarginX,\n    marginY: baseMarginY,\n  });\n\n  const justifyContentResponsiveClasses = getResponsiveClassesFlex(\n    props.justifyContent,\n    'flex-justify-content',\n  );\n\n  const flexDirectionResponsiveClasses = getResponsiveClassesFlex(\n    props.flexDirection,\n    'flex-direction',\n  );\n\n  const gapResponsiveClasses = getResponsiveClassesFlex(props.gap, 'flex-gap');\n\n  const rowGapResponsiveClasses = getResponsiveClassesFlex(\n    props.rowGap,\n    'flex-row-gap',\n  );\n\n  const columnGapResponsiveClasses = getResponsiveClassesFlex(\n    props.columnGap,\n    'flex-column-gap',\n  );\n\n  const alignItemsResponsiveClasses = getResponsiveClassesFlex(\n    props.alignItems,\n    'flex-align-items',\n  );\n\n  const paddingTopResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingTop,\n    'padding-top',\n  );\n\n  const paddingRightResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingRight,\n    'padding-right',\n  );\n\n  const paddingBottomResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingBottom,\n    'padding-bottom',\n  );\n\n  const paddingLeftResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingLeft,\n    'padding-left',\n  );\n\n  const paddingResponsiveClasses = getResponsiveClassesPadding(\n    props.padding,\n    'padding',\n  );\n\n  const paddingXResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingX,\n    'padding-x',\n  );\n\n  const paddingYResponsiveClasses = getResponsiveClassesPadding(\n    props.paddingY,\n    'padding-y',\n  );\n\n  const marginTopResponsiveClasses = getResponsiveClassesMargin(\n    props.marginTop,\n    'margin-top',\n  );\n\n  const marginRightResponsiveClasses = getResponsiveClassesMargin(\n    props.marginRight,\n    'margin-right',\n  );\n\n  const marginBottomResponsiveClasses = getResponsiveClassesMargin(\n    props.marginBottom,\n    'margin-bottom',\n  );\n\n  const marginLeftResponsiveClasses = getResponsiveClassesMargin(\n    props.marginLeft,\n    'margin-left',\n  );\n\n  const marginResponsiveClasses = getResponsiveClassesMargin(\n    props.margin,\n    'margin',\n  );\n\n  const marginXResponsiveClasses = getResponsiveClassesMargin(\n    props.marginX,\n    'margin-x',\n  );\n\n  const marginYResponsiveClasses = getResponsiveClassesMargin(\n    props.marginY,\n    'margin-y',\n  );\n\n  // Keep existing convenience behavior for all-sides borders:\n  // if a border colour is set but width is omitted, default width to `sm`.\n  const borderWidth =\n    !props?.borderWidth &&\n    props.borderColour !== undefined &&\n    props.borderColour !== 'none'\n      ? 'sm'\n      : props.borderWidth;\n\n  // Mirror the same convenience behavior for top-only borders.\n  // If top colour is set without top width, default top width to `sm`.\n  const borderTopWidth =\n    !props?.borderTopWidth &&\n    props.borderTopColour !== undefined &&\n    props.borderTopColour !== 'none'\n      ? 'sm'\n      : props.borderTopWidth;\n\n  // Apply the same side-only convenience fallback for right, bottom, and left.\n  const borderRightWidth =\n    !props?.borderRightWidth &&\n    props.borderRightColour !== undefined &&\n    props.borderRightColour !== 'none'\n      ? 'sm'\n      : props.borderRightWidth;\n\n  const borderBottomWidth =\n    !props?.borderBottomWidth &&\n    props.borderBottomColour !== undefined &&\n    props.borderBottomColour !== 'none'\n      ? 'sm'\n      : props.borderBottomWidth;\n\n  const borderLeftWidth =\n    !props?.borderLeftWidth &&\n    props.borderLeftColour !== undefined &&\n    props.borderLeftColour !== 'none'\n      ? 'sm'\n      : props.borderLeftWidth;\n\n  const stylesProp: React.CSSProperties = {\n    width: width === 'full' ? '100%' : (width as CSSProperties['width']),\n    height: height === 'full' ? '100%' : height,\n    minHeight,\n    zIndex,\n    top,\n    right,\n    bottom,\n    left,\n    ...maxWidthVars,\n    ...minWidthVars,\n    ...maxHeightVars,\n    ...flexBasisVars,\n    overflow: props.maxHeight || props.maxWidth ? 'auto' : undefined,\n    overflowWrap,\n    wordBreak,\n  };\n\n  return (\n    <Component\n      className={[\n        styles.box,\n        borderVariants({\n          ...props,\n          borderWidth,\n          borderTopWidth,\n          borderRightWidth,\n          borderBottomWidth,\n          borderLeftWidth,\n        }),\n        flexBaseClass,\n        paddingBaseClass,\n        marginBaseClass,\n        backgroundColorVariants({\n          backgroundColor: props.backgroundColor,\n          ...props,\n        }),\n        positionVariants({ position }),\n        ...justifyContentResponsiveClasses,\n        ...flexDirectionResponsiveClasses,\n        ...gapResponsiveClasses,\n        ...rowGapResponsiveClasses,\n        ...columnGapResponsiveClasses,\n        ...alignItemsResponsiveClasses,\n        ...paddingTopResponsiveClasses,\n        ...paddingRightResponsiveClasses,\n        ...paddingBottomResponsiveClasses,\n        ...paddingLeftResponsiveClasses,\n        ...paddingResponsiveClasses,\n        ...paddingXResponsiveClasses,\n        ...paddingYResponsiveClasses,\n        ...marginTopResponsiveClasses,\n        ...marginRightResponsiveClasses,\n        ...marginBottomResponsiveClasses,\n        ...marginLeftResponsiveClasses,\n        ...marginResponsiveClasses,\n        ...marginXResponsiveClasses,\n        ...marginYResponsiveClasses,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={stylesProp}\n      data-testid={dataTestIdNative ?? dataTestIdLegacy}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Box;\n"],"names":["getResponsiveClassesFlex","generateResponsiveClasses","flexStyles","getResponsiveClassesPadding","paddingStyles","getResponsiveClassesMargin","marginStyles","Box","children","as","Component","width","height","minHeight","zIndex","top","right","bottom","left","position","dataTestIdNative","dataTestId","dataTestIdLegacy","overflowWrap","wordBreak","props","baseJustifyContent","getBaseValueOrUndefined","justifyContent","baseFlexDirection","flexDirection","baseGap","gap","baseRowGap","rowGap","baseColumnGap","columnGap","baseAlignItems","alignItems","baseDisplay","display","baseFlexWrap","flexWrap","baseFlexGrow","flexGrow","baseFlexShrink","flexShrink","baseFlexBasis","flexBasis","basePaddingTop","paddingTop","basePaddingRight","paddingRight","basePaddingBottom","paddingBottom","basePaddingLeft","paddingLeft","basePadding","padding","basePaddingX","paddingX","basePaddingY","paddingY","baseMarginTop","marginTop","baseMarginRight","marginRight","baseMarginBottom","marginBottom","baseMarginLeft","marginLeft","baseMargin","margin","baseMarginX","marginX","baseMarginY","marginY","maxWidthVars","responsiveToCssVars","maxWidth","varPrefix","normalise","value","maxHeightVars","maxHeight","minWidthVars","minWidth","flexBasisVars","resolveFlexBasisCssValue","flexBaseClass","flexVariants","isFlexBasisToken","paddingBaseClass","paddingVariants","marginBaseClass","marginVariants","justifyContentResponsiveClasses","flexDirectionResponsiveClasses","gapResponsiveClasses","rowGapResponsiveClasses","columnGapResponsiveClasses","alignItemsResponsiveClasses","paddingTopResponsiveClasses","paddingRightResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","marginTopResponsiveClasses","marginRightResponsiveClasses","marginBottomResponsiveClasses","marginLeftResponsiveClasses","marginResponsiveClasses","marginXResponsiveClasses","marginYResponsiveClasses","borderWidth","borderColour","borderTopWidth","borderTopColour","borderRightWidth","borderRightColour","borderBottomWidth","borderBottomColour","borderLeftWidth","borderLeftColour","stylesProp","overflow","jsx","className","styles","box","borderVariants","backgroundColorVariants","backgroundColor","positionVariants","filter","Boolean","join","style"],"mappings":"8oBAiCMA,EAA2BC,EAA0BC,GACrDC,EAA8BF,EAA0BG,GACxDC,EAA6BJ,EAA0BK,GAoIhDC,EAAM,EACjBC,WACAC,GAAIC,EAAY,MAChBC,QACAC,SACAC,YACAC,SACAC,MACAC,QACAC,SACAC,OACAC,WACA,cAAeC,EACfC,WAAYC,EAAmB,MAC/BC,eACAC,eACGC,MAIH,MAAMC,EAAqBC,EAAwBF,EAAMG,gBACnDC,EAAoBF,EAAwBF,EAAMK,eAClDC,EAAUJ,EAAwBF,EAAMO,KACxCC,EAAaN,EAAwBF,EAAMS,QAC3CC,EAAgBR,EAAwBF,EAAMW,WAC9CC,EAAiBV,EAAwBF,EAAMa,YAC/CC,EAAcZ,EAAwBF,EAAMe,SAC5CC,EAAed,EAAwBF,EAAMiB,UAC7CC,EAAehB,EAAwBF,EAAMmB,UAC7CC,EAAiBlB,EAAwBF,EAAMqB,YAC/CC,EAAgBpB,EAAwBF,EAAMuB,WAC9CC,EAAiBtB,EAAwBF,EAAMyB,YAC/CC,EAAmBxB,EAAwBF,EAAM2B,cACjDC,EAAoB1B,EAAwBF,EAAM6B,eAClDC,EAAkB5B,EAAwBF,EAAM+B,aAChDC,EAAc9B,EAAwBF,EAAMiC,SAC5CC,EAAehC,EAAwBF,EAAMmC,UAC7CC,EAAelC,EAAwBF,EAAMqC,UAC7CC,EAAgBpC,EAAwBF,EAAMuC,WAC9CC,EAAkBtC,EAAwBF,EAAMyC,aAChDC,EAAmBxC,EAAwBF,EAAM2C,cACjDC,EAAiB1C,EAAwBF,EAAM6C,YAC/CC,EAAa5C,EAAwBF,EAAM+C,QAC3CC,GAAc9C,EAAwBF,EAAMiD,SAC5CC,GAAchD,EAAwBF,EAAMmD,SAE5CC,GAAeC,EAAoBrD,EAAMsD,SAAU,CACvDC,UAAW,kBACXC,UAAYC,GACI,cAAVA,EACK,0CAEFA,IAILC,GAAgBL,EAAoBrD,EAAM2D,UAAW,CACzDJ,UAAW,mBACXC,UAAYC,GAAUA,IAGlBG,GAAeP,EAAoBrD,EAAM6D,SAAU,CACvDN,UAAW,kBACXC,UAAYC,GAAUA,IAGlBK,GAAgBT,EAAoBrD,EAAMuB,UAAW,CACzDgC,UAAW,mBACXC,UAAYC,GAAUM,EAAyBN,KAG3CO,GAAgBC,EAAa,CACjClD,QAASD,EACTX,eAAgBF,EAChBI,cAAeD,EACfG,IAAKD,EACLG,OAAQD,EACRG,UAAWD,EACXG,WAAYD,EACZK,SAAUD,EACVG,SAAUD,EACVG,WAAYD,EACZG,UAAW2C,EAAiB5C,GAAiBA,OAAgB,IAGzD6C,GAAmBC,EAAgB,CACvC3C,WAAYD,EACZG,aAAcD,EACdG,cAAeD,EACfG,YAAaD,EACbG,QAASD,EACTG,SAAUD,EACVG,SAAUD,IAGNiC,GAAkBC,EAAe,CACrC/B,UAAWD,EACXG,YAAaD,EACbG,aAAcD,EACdG,WAAYD,EACZG,OAAQD,EACRG,QAASD,GACTG,QAASD,KAGLqB,GAAkChG,EACtCyB,EAAMG,eACN,wBAGIqE,GAAiCjG,EACrCyB,EAAMK,cACN,kBAGIoE,GAAuBlG,EAAyByB,EAAMO,IAAK,YAE3DmE,GAA0BnG,EAC9ByB,EAAMS,OACN,gBAGIkE,GAA6BpG,EACjCyB,EAAMW,UACN,mBAGIiE,GAA8BrG,EAClCyB,EAAMa,WACN,oBAGIgE,GAA8BnG,EAClCsB,EAAMyB,WACN,eAGIqD,GAAgCpG,EACpCsB,EAAM2B,aACN,iBAGIoD,GAAiCrG,EACrCsB,EAAM6B,cACN,kBAGImD,GAA+BtG,EACnCsB,EAAM+B,YACN,gBAGIkD,GAA2BvG,EAC/BsB,EAAMiC,QACN,WAGIiD,GAA4BxG,EAChCsB,EAAMmC,SACN,aAGIgD,GAA4BzG,EAChCsB,EAAMqC,SACN,aAGI+C,GAA6BxG,EACjCoB,EAAMuC,UACN,cAGI8C,GAA+BzG,EACnCoB,EAAMyC,YACN,gBAGI6C,GAAgC1G,EACpCoB,EAAM2C,aACN,iBAGI4C,GAA8B3G,EAClCoB,EAAM6C,WACN,eAGI2C,GAA0B5G,EAC9BoB,EAAM+C,OACN,UAGI0C,GAA2B7G,EAC/BoB,EAAMiD,QACN,YAGIyC,GAA2B9G,EAC/BoB,EAAMmD,QACN,YAKIwC,GACH3F,GAAO2F,kBACe,IAAvB3F,EAAM4F,cACiB,SAAvB5F,EAAM4F,aAEF5F,EAAM2F,YADN,KAKAE,GACH7F,GAAO6F,qBACkB,IAA1B7F,EAAM8F,iBACoB,SAA1B9F,EAAM8F,gBAEF9F,EAAM6F,eADN,KAIAE,GACH/F,GAAO+F,uBACoB,IAA5B/F,EAAMgG,mBACsB,SAA5BhG,EAAMgG,kBAEFhG,EAAM+F,iBADN,KAGAE,GACHjG,GAAOiG,wBACqB,IAA7BjG,EAAMkG,oBACuB,SAA7BlG,EAAMkG,mBAEFlG,EAAMiG,kBADN,KAGAE,GACHnG,GAAOmG,sBACmB,IAA3BnG,EAAMoG,kBACqB,SAA3BpG,EAAMoG,iBAEFpG,EAAMmG,gBADN,KAGAE,GAAkC,CACtCnH,MAAiB,SAAVA,EAAmB,OAAUA,EACpCC,OAAmB,SAAXA,EAAoB,OAASA,EACrCC,YACAC,SACAC,MACAC,QACAC,SACAC,UACG2D,MACAQ,MACAF,MACAI,GACHwC,SAAUtG,EAAM2D,WAAa3D,EAAMsD,SAAW,YAAS,EACvDxD,eACAC;AAGF,OACEwG,EAACtH,EAAA,CACCuH,UAAW,CACTC,EAAOC,IACPC,EAAe,IACV3G,EACH2F,eACAE,kBACAE,oBACAE,qBACAE,qBAEFnC,GACAG,GACAE,GACAuC,EAAwB,CACtBC,gBAAiB7G,EAAM6G,mBACpB7G,IAEL8G,EAAiB,CAAEpH,gBAChB6E,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,MACAC,IAEFqB,OAAOC,SACPC,KAAK,KACRC,MAAOb,GACP,cAAa1G,GAAoBE,EAEhCd"}

package/dist/components/BoxLink/BoxLink.js

@@ -1,3 +1,3 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{forwardRef as o}from"react";import{useLink as s}from"@react-aria/link";import{useHover as r}from"@react-aria/interactions";import{useFocusRing as t}from"@react-aria/focus";import{useObjectRef as a,mergeProps as d}from"@react-aria/utils";import{focusStyleVariants as n}from"../../utils/focus/focusStyles.js";import{BoxLinkContext as l}from"./BoxLinkContext.js";import{VisuallyHidden as u}from"../VisuallyHidden/VisuallyHidden.js";import '../../assets/BoxLink.css';const c="_box-link_jbtzi_1",f="_box-link--default_jbtzi_8",p="_box-link--underline-heading-on-hover_jbtzi_53",v="_box-link--disabled_jbtzi_61",b=["onPointerDown","onPointerUp","onPointerCancel","onMouseDown","onMouseUp","onTouchStart","onTouchEnd"],m="noopener noreferrer",h=o(function({children:o,isSelected:h=!1,isDisabled:_=!1,focusStyle:k="default",underlineHeadingOnHover:D=!1,styleVariant:H="default",target:j="_self",externalLinkScreenReaderText:x="opens in a new tab",allowDragGestures:P=!1,href:S,onClick:y,rel:g,...C},F){const O=a(F),V=!!_,w="_blank"===j,z=((e,i)=>e?i?`${m} ${i}`:m:i)(w,g),T={isDisabled:V,href:S},{linkProps:B,isPressed:E}=s(T,O),L=Object.fromEntries(Object.entries(B).filter(([e])=>!b.includes(e))),M=P?L:B,{hoverProps:U,isHovered:$}=r({isDisabled:V}),{focusProps:G,isFocusVisible:N,isFocused:R}=t(),q="default"===H,A=(({isDefault:e,focusStyle:i,underlineHeadingOnHover:o,disabled:s})=>{const r=[c];return e&&(r.push(f),r.push(n({focusStyle:i})),o&&r.push(p)),s&&r.push(v),r.filter(Boolean).join(" ")})({isDefault:q,focusStyle:k,underlineHeadingOnHover:D,disabled:V}),I=(({isDefault:e,isHovered:i,isFocused:o,isPressed:s,isSelected:r})=>e?{"data-hovered":!!i||void 0,"data-focused":!!o||void 0,"data-pressed":!!s||void 0,"data-selected":!!r||void 0}:{"data-hovered":void 0,"data-focused":void 0,"data-pressed":void 0,"data-selected":void 0})({isDefault:q,isHovered:$,isFocused:R,isPressed:E,isSelected:h});/* @__PURE__ */
-return e(l.Provider,{value:{isHovered:$,isPressed:E,isFocusVisible:N,isDisabled:V,isSelected:h},children:/* @__PURE__ */i("a",{...d(M,U,G,C),ref:O,href:V?void 0:S,target:j,rel:z,"aria-disabled":!!V||void 0,className:A,onClick:e=>{V?e.preventDefault():(B.onClick?.(e),y?.(e))},"data-alto-box-link":"",...I,children:[o,w&&/* @__PURE__ */e(u,{children:x})]})})});export{h as BoxLink,h as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import{forwardRef as o}from"react";import{useLink as r}from"@react-aria/link";import{useHover as s}from"@react-aria/interactions";import{useFocusRing as t}from"@react-aria/focus";import{useObjectRef as n,mergeProps as a}from"@react-aria/utils";import{focusStyleVariants as d}from"../../utils/focus/focusStyles.js";import{BoxLinkContext as l}from"./BoxLinkContext.js";import{VisuallyHidden as u}from"../VisuallyHidden/VisuallyHidden.js";import '../../assets/BoxLink.css';const c="_box-link_jbtzi_1",f="_box-link--default_jbtzi_8",p="_box-link--underline-heading-on-hover_jbtzi_53",b="_box-link--disabled_jbtzi_61",v=["onPointerDown","onPointerUp","onPointerCancel","onMouseDown","onMouseUp","onTouchStart","onTouchEnd"],m="noopener noreferrer",h=o(function({children:o,isSelected:h=!1,isDisabled:_=!1,focusStyle:k="default",underlineHeadingOnHover:D=!1,styleVariant:H="default",target:j="_self",externalLinkScreenReaderText:x="opens in a new tab",allowDragGestures:P=!1,href:S,onClick:y,rel:g,...C},w){const F=n(w),O=function(e){if("boolean"==typeof e)return e;if("string"==typeof e){const i=e.trim().toLowerCase();if("true"===i)return!0;if("false"===i)return!1}return!1}(_),V="_blank"===j,z=((e,i)=>e?i?`${m} ${i}`:m:i)(V,g),L={isDisabled:O,href:S},{linkProps:T,isPressed:B}=r(L,F),E=Object.fromEntries(Object.entries(T).filter(([e])=>!v.includes(e))),M=P?E:T,{hoverProps:U,isHovered:$}=s({isDisabled:O}),{focusProps:G,isFocusVisible:N,isFocused:R}=t(),q="default"===H,A=(({isDefault:e,focusStyle:i,underlineHeadingOnHover:o,disabled:r})=>{const s=[c];return e&&(s.push(f),s.push(d({focusStyle:i})),o&&s.push(p)),r&&s.push(b),s.filter(Boolean).join(" ")})({isDefault:q,focusStyle:k,underlineHeadingOnHover:D,disabled:O}),I=(({isDefault:e,isHovered:i,isFocused:o,isPressed:r,isSelected:s})=>e?{"data-hovered":!!i||void 0,"data-focused":!!o||void 0,"data-pressed":!!r||void 0,"data-selected":!!s||void 0}:{"data-hovered":void 0,"data-focused":void 0,"data-pressed":void 0,"data-selected":void 0})({isDefault:q,isHovered:$,isFocused:R,isPressed:B,isSelected:h});/* @__PURE__ */
+return e(l.Provider,{value:{isHovered:$,isPressed:B,isFocusVisible:N,isDisabled:O,isSelected:h},children:/* @__PURE__ */i("a",{...a(M,U,G,C),ref:F,href:O?void 0:S,target:j,rel:z,"aria-disabled":!!O||void 0,className:A,onClick:e=>{O?e.preventDefault():(T.onClick?.(e),y?.(e))},"data-alto-box-link":"",...I,children:[o,V&&/* @__PURE__ */e(u,{children:x})]})})});export{h as BoxLink,h as default};
 //# sourceMappingURL=BoxLink.js.map

package/dist/components/BoxLink/BoxLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxLink.js","sources":["../../../src/components/BoxLink/BoxLink.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useLink } from '@react-aria/link';\nimport { useHover } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport { BoxLinkContext } from './BoxLinkContext';\nimport VisuallyHidden from '../VisuallyHidden/VisuallyHidden';\nimport styles from './BoxLink.module.css';\nimport type React from 'react';\n\ntype OmittedAnchorProps = 'className' | 'style';\nconst PRESS_POINTER_HANDLER_KEYS = [\n  'onPointerDown',\n  'onPointerUp',\n  'onPointerCancel',\n  'onMouseDown',\n  'onMouseUp',\n  'onTouchStart',\n  'onTouchEnd',\n] as const;\n\nconst EXTERNAL_LINK_REL_TOKENS = 'noopener noreferrer';\n\nconst getMergedRel = (\n  isExternalLink: boolean,\n  rel: string | undefined,\n): string | undefined => {\n  if (!isExternalLink) {\n    return rel;\n  }\n\n  return rel ? `${EXTERNAL_LINK_REL_TOKENS} ${rel}` : EXTERNAL_LINK_REL_TOKENS;\n};\n\ninterface GetClassNameParams {\n  isDefault: boolean;\n  focusStyle: 'default' | 'white';\n  underlineHeadingOnHover: boolean;\n  disabled: boolean;\n}\n\nconst getClassName = ({\n  isDefault,\n  focusStyle,\n  underlineHeadingOnHover,\n  disabled,\n}: GetClassNameParams): string => {\n  const classNames = [styles['box-link']];\n\n  if (isDefault) {\n    classNames.push(styles['box-link--default']);\n    classNames.push(focusStyleVariants({ focusStyle }));\n\n    if (underlineHeadingOnHover) {\n      classNames.push(styles['box-link--underline-heading-on-hover']);\n    }\n  }\n\n  if (disabled) {\n    classNames.push(styles['box-link--disabled']);\n  }\n\n  return classNames.filter(Boolean).join(' ');\n};\n\ninterface GetInteractionDataAttributesParams {\n  isDefault: boolean;\n  isHovered: boolean;\n  isFocused: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}\n\nconst getInteractionDataAttributes = ({\n  isDefault,\n  isHovered,\n  isFocused,\n  isPressed,\n  isSelected,\n}: GetInteractionDataAttributesParams) => {\n  if (!isDefault) {\n    return {\n      'data-hovered': undefined,\n      'data-focused': undefined,\n      'data-pressed': undefined,\n      'data-selected': undefined,\n    };\n  }\n\n  return {\n    'data-hovered': isHovered ? true : undefined,\n    'data-focused': isFocused ? true : undefined,\n    'data-pressed': isPressed ? true : undefined,\n    'data-selected': isSelected ? true : undefined,\n  };\n};\n\nexport interface BoxLinkProps\n  extends Omit<\n    React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    OmittedAnchorProps\n  > {\n  /**\n   * The content to render inside the BoxLink.\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the BoxLink is in a selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Whether the BoxLink is disabled.\n   * Prevents navigation, removes href, and reflects aria-disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * The focus ring style.\n   * Use 'white' when BoxLink is placed on a dark or coloured background.\n   * @default 'default'\n   */\n  focusStyle?: 'default' | 'white';\n  /**\n   * Whether headings (h2–h6) inside the BoxLink should be underlined on hover.\n   * @default false\n   */\n  underlineHeadingOnHover?: boolean;\n  /**\n   * Controls which layer handles CSS styling for interactive states.\n   *\n   * - 'default' — BoxLink applies all styles including hover, focus, pressed and selected\n   * - 'custom'  — BoxLink strips back to inline-block only, children own\n   *               their own styles via the `useBoxLink` hook\n   *\n   * @default 'default'\n   */\n  styleVariant?: 'default' | 'custom';\n  /**\n   * The target attribute for the link.\n   * @default '_self'\n   */\n  target?: '_self' | '_blank' | '_parent' | '_top';\n  /**\n   * Specify custom screen reader text for external links.\n   * @default 'opens in a new tab'\n   */\n  externalLinkScreenReaderText?: string;\n  /**\n   * Allows pointer drag gestures to bubble through the link wrapper.\n   * Useful when BoxLink is inside draggable containers like carousels.\n   * @default false\n   * @internal\n   */\n  allowDragGestures?: boolean;\n}\n\nexport const BoxLink = forwardRef<HTMLAnchorElement, BoxLinkProps>(\n  function BoxLink(\n    {\n      children,\n      isSelected = false,\n      isDisabled = false,\n      focusStyle = 'default',\n      underlineHeadingOnHover = false,\n      styleVariant = 'default',\n      target = '_self',\n      externalLinkScreenReaderText = 'opens in a new tab',\n      allowDragGestures = false,\n      href,\n      onClick,\n      rel,\n      ...restProps\n    },\n    forwardedRef,\n  ) {\n    const ref = useObjectRef(forwardedRef);\n\n    const disabled = !!isDisabled;\n    const isExternalLink = target === '_blank';\n    const mergedRel = getMergedRel(isExternalLink, rel);\n\n    const ariaLinkProps = { isDisabled: disabled, href };\n    const { linkProps, isPressed } = useLink(ariaLinkProps, ref);\n    const linkPropsWithoutPressPointers = Object.fromEntries(\n      Object.entries(linkProps).filter(\n        ([propName]) =>\n          !PRESS_POINTER_HANDLER_KEYS.includes(\n            propName as (typeof PRESS_POINTER_HANDLER_KEYS)[number],\n          ),\n      ),\n    ) as typeof linkProps;\n    const resolvedLinkProps = allowDragGestures\n      ? linkPropsWithoutPressPointers\n      : linkProps;\n    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n    const { focusProps, isFocusVisible, isFocused } = useFocusRing();\n\n    const isDefault = styleVariant === 'default';\n\n    const className = getClassName({\n      isDefault,\n      focusStyle,\n      underlineHeadingOnHover,\n      disabled,\n    });\n\n    const interactionDataAttributes = getInteractionDataAttributes({\n      isDefault,\n      isHovered,\n      isFocused,\n      isPressed,\n      isSelected,\n    });\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      // Call React Aria's onClick handler first\n      linkProps.onClick?.(e);\n      // Then call consumer's onClick\n      onClick?.(e);\n    };\n\n    return (\n      <BoxLinkContext.Provider\n        value={{\n          isHovered,\n          isPressed,\n          isFocusVisible,\n          isDisabled: disabled,\n          isSelected,\n        }}\n      >\n        <a\n          {...mergeProps(resolvedLinkProps, hoverProps, focusProps, restProps)}\n          ref={ref}\n          href={disabled ? undefined : href}\n          target={target}\n          rel={mergedRel}\n          aria-disabled={disabled ? true : undefined}\n          className={className}\n          onClick={handleClick}\n          data-alto-box-link=\"\"\n          {...interactionDataAttributes}\n        >\n          {children}\n          {isExternalLink && (\n            <VisuallyHidden>{externalLinkScreenReaderText}</VisuallyHidden>\n          )}\n        </a>\n      </BoxLinkContext.Provider>\n    );\n  },\n);\n\nexport default BoxLink;\n"],"names":["PRESS_POINTER_HANDLER_KEYS","EXTERNAL_LINK_REL_TOKENS","BoxLink","forwardRef","children","isSelected","isDisabled","focusStyle","underlineHeadingOnHover","styleVariant","target","externalLinkScreenReaderText","allowDragGestures","href","onClick","rel","restProps","forwardedRef","ref","useObjectRef","disabled","isExternalLink","mergedRel","getMergedRel","ariaLinkProps","linkProps","isPressed","useLink","linkPropsWithoutPressPointers","Object","fromEntries","entries","filter","propName","includes","resolvedLinkProps","hoverProps","isHovered","useHover","focusProps","isFocusVisible","isFocused","useFocusRing","isDefault","className","classNames","styles","push","focusStyleVariants","Boolean","join","getClassName","interactionDataAttributes","getInteractionDataAttributes","jsx","BoxLinkContext","Provider","value","jsxs","mergeProps","e","preventDefault","VisuallyHidden"],"mappings":"qnBAYMA,EAA6B,CACjC,gBACA,cACA,kBACA,cACA,YACA,eACA,cAGIC,EAA2B,sBAwIpBC,EAAUC,EACrB,UACEC,SACEA,EAAAC,WACAA,GAAa,EAAAC,WACbA,GAAa,EAAAC,WACbA,EAAa,UAAAC,wBACbA,GAA0B,EAAAC,aAC1BA,EAAe,UAAAC,OACfA,EAAS,QAAAC,6BACTA,EAA+B,qBAAAC,kBAC/BA,GAAoB,EAAAC,KACpBA,EAAAC,QACAA,EAAAC,IACAA,KACGC,GAELC,GAEA,MAAMC,EAAMC,EAAaF,GAEnBG,IAAad,EACbe,EAA4B,WAAXX,EACjBY,EA7JW,EACnBD,EACAN,IAEKM,EAIEN,EAAM,GAAGd,KAA4Bc,IAAQd,EAH3Cc,EAwJWQ,CAAaF,EAAgBN,GAEzCS,EAAgB,CAAElB,WAAYc,EAAUP,SACxCY,UAAEA,EAAAC,UAAWA,GAAcC,EAAQH,EAAeN,GAClDU,EAAgCC,OAAOC,YAC3CD,OAAOE,QAAQN,GAAWO,OACxB,EAAEC,MACCjC,EAA2BkC,SAC1BD,KAIFE,EAAoBvB,EACtBgB,EACAH,GACEW,WAAEA,YAAYC,GAAcC,EAAS,CAAEhC,WAAYc,KACnDmB,WAAEA,EAAAC,eAAYA,EAAAC,UAAgBA,GAAcC,IAE5CC,EAA6B,YAAjBlC,EAEZmC,EA/JW,GACnBD,YACApC,aACAC,0BACAY,eAEA,MAAMyB,EAAa,CAACC,GAepB,OAbIH,IACFE,EAAWE,KAAKD,GAChBD,EAAWE,KAAKC,EAAmB,CAAEzC,gBAEjCC,GACFqC,EAAWE,KAAKD,IAIhB1B,GACFyB,EAAWE,KAAKD,GAGXD,EAAWb,OAAOiB,SAASC,KAAK,MA0InBC,CAAa,CAC7BR,YACApC,aACAC,0BACAY,aAGIgC,EAtI2B,GACnCT,YACAN,YACAI,YACAf,YACArB,gBAEKsC,EASE,CACL,iBAAgBN,QAAmB,EACnC,iBAAgBI,QAAmB,EACnC,iBAAgBf,QAAmB,EACnC,kBAAiBrB,QAAoB,GAZ9B,CACL,oBAAgB,EAChB,oBAAgB,EAChB,oBAAgB,EAChB,qBAAiB,GA0HegD,CAA6B,CAC7DV,YACAN,YACAI,YACAf,YACArB;AAcF,OACEiD,EAACC,EAAeC,SAAf,CACCC,MAAO,CACLpB,YACAX,YACAc,iBACAlC,WAAYc,EACZf,cAGFD,wBAAAsD,EAAC,IAAA,IACKC,EAAWxB,EAAmBC,EAAYG,EAAYvB,GAC1DE,MACAL,KAAMO,OAAW,EAAYP,EAC7BH,SACAK,IAAKO,EACL,kBAAeF,QAAkB,EACjCwB,YACA9B,QA7Be8C,IACfxC,EACFwC,EAAEC,kBAIJpC,EAAUX,UAAU8C,GAEpB9C,IAAU8C,KAsBN,qBAAmB,MACfR,EAEHhD,SAAA,CAAAA,EACAiB,kBACCiC,EAACQ,EAAA,CAAgB1D,SAAAO,QAK3B"}
+{"version":3,"file":"BoxLink.js","sources":["../../../src/components/BoxLink/BoxLink.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { useLink } from '@react-aria/link';\nimport { useHover } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport { BoxLinkContext } from './BoxLinkContext';\nimport VisuallyHidden from '../VisuallyHidden/VisuallyHidden';\nimport styles from './BoxLink.module.css';\nimport type React from 'react';\n\ntype OmittedAnchorProps = 'className' | 'style';\nconst PRESS_POINTER_HANDLER_KEYS = [\n  'onPointerDown',\n  'onPointerUp',\n  'onPointerCancel',\n  'onMouseDown',\n  'onMouseUp',\n  'onTouchStart',\n  'onTouchEnd',\n] as const;\n\nconst EXTERNAL_LINK_REL_TOKENS = 'noopener noreferrer';\n\nconst getMergedRel = (\n  isExternalLink: boolean,\n  rel: string | undefined,\n): string | undefined => {\n  if (!isExternalLink) {\n    return rel;\n  }\n\n  return rel ? `${EXTERNAL_LINK_REL_TOKENS} ${rel}` : EXTERNAL_LINK_REL_TOKENS;\n};\n\ninterface GetClassNameParams {\n  isDefault: boolean;\n  focusStyle: 'default' | 'white';\n  underlineHeadingOnHover: boolean;\n  disabled: boolean;\n}\n\nconst getClassName = ({\n  isDefault,\n  focusStyle,\n  underlineHeadingOnHover,\n  disabled,\n}: GetClassNameParams): string => {\n  const classNames = [styles['box-link']];\n\n  if (isDefault) {\n    classNames.push(styles['box-link--default']);\n    classNames.push(focusStyleVariants({ focusStyle }));\n\n    if (underlineHeadingOnHover) {\n      classNames.push(styles['box-link--underline-heading-on-hover']);\n    }\n  }\n\n  if (disabled) {\n    classNames.push(styles['box-link--disabled']);\n  }\n\n  return classNames.filter(Boolean).join(' ');\n};\n\ninterface GetInteractionDataAttributesParams {\n  isDefault: boolean;\n  isHovered: boolean;\n  isFocused: boolean;\n  isPressed: boolean;\n  isSelected: boolean;\n}\n\nconst getInteractionDataAttributes = ({\n  isDefault,\n  isHovered,\n  isFocused,\n  isPressed,\n  isSelected,\n}: GetInteractionDataAttributesParams) => {\n  if (!isDefault) {\n    return {\n      'data-hovered': undefined,\n      'data-focused': undefined,\n      'data-pressed': undefined,\n      'data-selected': undefined,\n    };\n  }\n\n  return {\n    'data-hovered': isHovered ? true : undefined,\n    'data-focused': isFocused ? true : undefined,\n    'data-pressed': isPressed ? true : undefined,\n    'data-selected': isSelected ? true : undefined,\n  };\n};\n\nexport interface BoxLinkProps\n  extends Omit<\n    React.AnchorHTMLAttributes<HTMLAnchorElement>,\n    OmittedAnchorProps\n  > {\n  /**\n   * The content to render inside the BoxLink.\n   */\n  children: React.ReactNode;\n  /**\n   * Whether the BoxLink is in a selected state.\n   * @default false\n   */\n  isSelected?: boolean;\n  /**\n   * Whether the BoxLink is disabled.\n   * Prevents navigation, removes href, and reflects aria-disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * The focus ring style.\n   * Use 'white' when BoxLink is placed on a dark or coloured background.\n   * @default 'default'\n   */\n  focusStyle?: 'default' | 'white';\n  /**\n   * Whether headings (h2–h6) inside the BoxLink should be underlined on hover.\n   * @default false\n   */\n  underlineHeadingOnHover?: boolean;\n  /**\n   * Controls which layer handles CSS styling for interactive states.\n   *\n   * - 'default' — BoxLink applies all styles including hover, focus, pressed and selected\n   * - 'custom'  — BoxLink strips back to inline-block only, children own\n   *               their own styles via the `useBoxLink` hook\n   *\n   * @default 'default'\n   */\n  styleVariant?: 'default' | 'custom';\n  /**\n   * The target attribute for the link.\n   * @default '_self'\n   */\n  target?: '_self' | '_blank' | '_parent' | '_top';\n  /**\n   * Specify custom screen reader text for external links.\n   * @default 'opens in a new tab'\n   */\n  externalLinkScreenReaderText?: string;\n  /**\n   * Allows pointer drag gestures to bubble through the link wrapper.\n   * Useful when BoxLink is inside draggable containers like carousels.\n   * @default false\n   * @internal\n   */\n  allowDragGestures?: boolean;\n}\n\nexport const BoxLink = forwardRef<HTMLAnchorElement, BoxLinkProps>(\n  function BoxLink(\n    {\n      children,\n      isSelected = false,\n      isDisabled = false,\n      focusStyle = 'default',\n      underlineHeadingOnHover = false,\n      styleVariant = 'default',\n      target = '_self',\n      externalLinkScreenReaderText = 'opens in a new tab',\n      allowDragGestures = false,\n      href,\n      onClick,\n      rel,\n      ...restProps\n    },\n    forwardedRef,\n  ) {\n    const ref = useObjectRef(forwardedRef);\n\n    const disabled = normalizeBooleanProp(isDisabled);\n    const isExternalLink = target === '_blank';\n    const mergedRel = getMergedRel(isExternalLink, rel);\n\n    const ariaLinkProps = { isDisabled: disabled, href };\n    const { linkProps, isPressed } = useLink(ariaLinkProps, ref);\n    const linkPropsWithoutPressPointers = Object.fromEntries(\n      Object.entries(linkProps).filter(\n        ([propName]) =>\n          !PRESS_POINTER_HANDLER_KEYS.includes(\n            propName as (typeof PRESS_POINTER_HANDLER_KEYS)[number],\n          ),\n      ),\n    ) as typeof linkProps;\n    const resolvedLinkProps = allowDragGestures\n      ? linkPropsWithoutPressPointers\n      : linkProps;\n    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });\n    const { focusProps, isFocusVisible, isFocused } = useFocusRing();\n\n    const isDefault = styleVariant === 'default';\n\n    const className = getClassName({\n      isDefault,\n      focusStyle,\n      underlineHeadingOnHover,\n      disabled,\n    });\n\n    const interactionDataAttributes = getInteractionDataAttributes({\n      isDefault,\n      isHovered,\n      isFocused,\n      isPressed,\n      isSelected,\n    });\n\n    const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (disabled) {\n        e.preventDefault();\n        return;\n      }\n      // Call React Aria's onClick handler first\n      linkProps.onClick?.(e);\n      // Then call consumer's onClick\n      onClick?.(e);\n    };\n\n    return (\n      <BoxLinkContext.Provider\n        value={{\n          isHovered,\n          isPressed,\n          isFocusVisible,\n          isDisabled: disabled,\n          isSelected,\n        }}\n      >\n        <a\n          {...mergeProps(resolvedLinkProps, hoverProps, focusProps, restProps)}\n          ref={ref}\n          href={disabled ? undefined : href}\n          target={target}\n          rel={mergedRel}\n          aria-disabled={disabled ? true : undefined}\n          className={className}\n          onClick={handleClick}\n          data-alto-box-link=\"\"\n          {...interactionDataAttributes}\n        >\n          {children}\n          {isExternalLink && (\n            <VisuallyHidden>{externalLinkScreenReaderText}</VisuallyHidden>\n          )}\n        </a>\n      </BoxLinkContext.Provider>\n    );\n  },\n);\n\nfunction normalizeBooleanProp(value: unknown): boolean {\n  if (typeof value === 'boolean') {\n    return value;\n  }\n\n  if (typeof value === 'string') {\n    const normalized = value.trim().toLowerCase();\n\n    if (normalized === 'true') {\n      return true;\n    }\n\n    if (normalized === 'false') {\n      return false;\n    }\n  }\n\n  return false;\n}\nexport default BoxLink;\n"],"names":["PRESS_POINTER_HANDLER_KEYS","EXTERNAL_LINK_REL_TOKENS","BoxLink","forwardRef","children","isSelected","isDisabled","focusStyle","underlineHeadingOnHover","styleVariant","target","externalLinkScreenReaderText","allowDragGestures","href","onClick","rel","restProps","forwardedRef","ref","useObjectRef","disabled","value","normalized","trim","toLowerCase","normalizeBooleanProp","isExternalLink","mergedRel","getMergedRel","ariaLinkProps","linkProps","isPressed","useLink","linkPropsWithoutPressPointers","Object","fromEntries","entries","filter","propName","includes","resolvedLinkProps","hoverProps","isHovered","useHover","focusProps","isFocusVisible","isFocused","useFocusRing","isDefault","className","classNames","styles","push","focusStyleVariants","Boolean","join","getClassName","interactionDataAttributes","getInteractionDataAttributes","jsx","BoxLinkContext","Provider","jsxs","mergeProps","e","preventDefault","VisuallyHidden"],"mappings":"qnBAYMA,EAA6B,CACjC,gBACA,cACA,kBACA,cACA,YACA,eACA,cAGIC,EAA2B,sBAwIpBC,EAAUC,EACrB,UACEC,SACEA,EAAAC,WACAA,GAAa,EAAAC,WACbA,GAAa,EAAAC,WACbA,EAAa,UAAAC,wBACbA,GAA0B,EAAAC,aAC1BA,EAAe,UAAAC,OACfA,EAAS,QAAAC,6BACTA,EAA+B,qBAAAC,kBAC/BA,GAAoB,EAAAC,KACpBA,EAAAC,QACAA,EAAAC,IACAA,KACGC,GAELC,GAEA,MAAMC,EAAMC,EAAaF,GAEnBG,EAgFV,SAA8BC,GAC5B,GAAqB,kBAAVA,EACT,OAAOA,EAGT,GAAqB,iBAAVA,EAAoB,CAC7B,MAAMC,EAAaD,EAAME,OAAOC,cAEhC,GAAmB,SAAfF,EACF,OAAO,EAGT,GAAmB,UAAfA,EACF,OAAO,CAEX,CAEA,OAAO,CACT,CAlGqBG,CAAqBnB,GAChCoB,EAA4B,WAAXhB,EACjBiB,EA7JW,EACnBD,EACAX,IAEKW,EAIEX,EAAM,GAAGd,KAA4Bc,IAAQd,EAH3Cc,EAwJWa,CAAaF,EAAgBX,GAEzCc,EAAgB,CAAEvB,WAAYc,EAAUP,SACxCiB,UAAEA,EAAAC,UAAWA,GAAcC,EAAQH,EAAeX,GAClDe,EAAgCC,OAAOC,YAC3CD,OAAOE,QAAQN,GAAWO,OACxB,EAAEC,MACCtC,EAA2BuC,SAC1BD,KAIFE,EAAoB5B,EACtBqB,EACAH,GACEW,WAAEA,YAAYC,GAAcC,EAAS,CAAErC,WAAYc,KACnDwB,WAAEA,EAAAC,eAAYA,EAAAC,UAAgBA,GAAcC,IAE5CC,EAA6B,YAAjBvC,EAEZwC,EA/JW,GACnBD,YACAzC,aACAC,0BACAY,eAEA,MAAM8B,EAAa,CAACC,GAepB,OAbIH,IACFE,EAAWE,KAAKD,GAChBD,EAAWE,KAAKC,EAAmB,CAAE9C,gBAEjCC,GACF0C,EAAWE,KAAKD,IAIhB/B,GACF8B,EAAWE,KAAKD,GAGXD,EAAWb,OAAOiB,SAASC,KAAK,MA0InBC,CAAa,CAC7BR,YACAzC,aACAC,0BACAY,aAGIqC,EAtI2B,GACnCT,YACAN,YACAI,YACAf,YACA1B,gBAEK2C,EASE,CACL,iBAAgBN,QAAmB,EACnC,iBAAgBI,QAAmB,EACnC,iBAAgBf,QAAmB,EACnC,kBAAiB1B,QAAoB,GAZ9B,CACL,oBAAgB,EAChB,oBAAgB,EAChB,oBAAgB,EAChB,qBAAiB,GA0HeqD,CAA6B,CAC7DV,YACAN,YACAI,YACAf,YACA1B;AAcF,OACEsD,EAACC,EAAeC,SAAf,CACCxC,MAAO,CACLqB,YACAX,YACAc,iBACAvC,WAAYc,EACZf,cAGFD,wBAAA0D,EAAC,IAAA,IACKC,EAAWvB,EAAmBC,EAAYG,EAAY5B,GAC1DE,MACAL,KAAMO,OAAW,EAAYP,EAC7BH,SACAK,IAAKY,EACL,kBAAeP,QAAkB,EACjC6B,YACAnC,QA7BekD,IACf5C,EACF4C,EAAEC,kBAIJnC,EAAUhB,UAAUkD,GAEpBlD,IAAUkD,KAsBN,qBAAmB,MACfP,EAEHrD,SAAA,CAAAA,EACAsB,kBACCiC,EAACO,EAAA,CAAgB9D,SAAAO,QAK3B"}

package/dist/components/Button/Button.d.ts

@@ -20,7 +20,7 @@ export type ButtonBaseProps<T extends ElementType = 'button'> = AriaButtonOption
     elementType?: 'a' | 'button';
     /**
      * What the base style of button is
-     * @default 'accent'
+     * @default accent
      */
     styleVariant?: 'accent' | 'critical' | 'neutral' | 'white';
     /**
@@ -75,7 +75,9 @@ export type ButtonBaseProps<T extends ElementType = 'button'> = AriaButtonOption
      */
     slot?: string;
     /**
-     * Set to true to style button as an icon button
+     * Internal prop used by `IconButton` to apply icon-button sizing and padding styles.
+     * Do not use directly — use the `IconButton` component instead.
+     * @internal
      * @ignore
      */
     iconButton?: boolean;

package/dist/components/Button/Button.js

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as a,Fragment as e}from"react/jsx-runtime";import{c as i}from"../../index-CCUt_dAN.js";import{forwardRef as l}from"react";import{useButton as r}from"@react-aria/button";import{useObjectRef as n,mergeProps as _}from"@react-aria/utils";import{useHover as s}from"@react-aria/interactions";import{useFocusRing as g}from"@react-aria/focus";import{Icon as c}from"../Icon/Icon.js";import d from"../LoadingSpinner/LoadingSpinner.js";import{focusStyleVariants as o}from"../../utils/focus/focusStyles.js";import{getBaseValue as u,generateResponsiveClasses as m}from"../../utils/breakpoint/responsiveSSR.js";import '../../assets/Button.css';const x={button:"_button_g3taa_1",content:"_content_g3taa_19",isNotLoading:"_isNotLoading_g3taa_26",loadingSpinner:"_loadingSpinner_g3taa_26",isLoading:"_isLoading_g3taa_35",focusWhite:"_focusWhite_g3taa_51",iconButton:"_iconButton_g3taa_55",iconButton__sm:"_iconButton__sm_g3taa_59",iconButton__md:"_iconButton__md_g3taa_63",iconButton__lg:"_iconButton__lg_g3taa_67","full-width--true":"_full-width--true_g3taa_71","full-width--false":"_full-width--false_g3taa_75","size--sm":"_size--sm_g3taa_120","size--md":"_size--md_g3taa_123","size--lg":"_size--lg_g3taa_126","text-align--left":"_text-align--left_g3taa_143","text-align--center":"_text-align--center_g3taa_146","text-align--right":"_text-align--right_g3taa_149","sm:size--sm":"_sm:size--sm_g3taa_1","sm:size--md":"_sm:size--md_g3taa_1","sm:size--lg":"_sm:size--lg_g3taa_1","sm:text-align--left":"_sm:text-align--left_g3taa_1","sm:text-align--center":"_sm:text-align--center_g3taa_1","sm:text-align--right":"_sm:text-align--right_g3taa_1","sm:full-width--true":"_sm:full-width--true_g3taa_1","sm:full-width--false":"_sm:full-width--false_g3taa_1","md:size--sm":"_md:size--sm_g3taa_1","md:size--md":"_md:size--md_g3taa_1","md:size--lg":"_md:size--lg_g3taa_1","md:text-align--left":"_md:text-align--left_g3taa_1","md:text-align--center":"_md:text-align--center_g3taa_1","md:text-align--right":"_md:text-align--right_g3taa_1","md:full-width--true":"_md:full-width--true_g3taa_1","md:full-width--false":"_md:full-width--false_g3taa_1","lg:size--sm":"_lg:size--sm_g3taa_1","lg:size--md":"_lg:size--md_g3taa_1","lg:size--lg":"_lg:size--lg_g3taa_1","lg:text-align--left":"_lg:text-align--left_g3taa_1","lg:text-align--center":"_lg:text-align--center_g3taa_1","lg:text-align--right":"_lg:text-align--right_g3taa_1","lg:full-width--true":"_lg:full-width--true_g3taa_1","lg:full-width--false":"_lg:full-width--false_g3taa_1","xl:size--sm":"_xl:size--sm_g3taa_1","xl:size--md":"_xl:size--md_g3taa_1","xl:size--lg":"_xl:size--lg_g3taa_1","xl:text-align--left":"_xl:text-align--left_g3taa_1","xl:text-align--center":"_xl:text-align--center_g3taa_1","xl:text-align--right":"_xl:text-align--right_g3taa_1","xl:full-width--true":"_xl:full-width--true_g3taa_1","xl:full-width--false":"_xl:full-width--false_g3taa_1","xxl:size--sm":"_xxl:size--sm_g3taa_1","xxl:size--md":"_xxl:size--md_g3taa_1","xxl:size--lg":"_xxl:size--lg_g3taa_1","xxl:text-align--left":"_xxl:text-align--left_g3taa_1","xxl:text-align--center":"_xxl:text-align--center_g3taa_1","xxl:text-align--right":"_xxl:text-align--right_g3taa_1","xxl:full-width--true":"_xxl:full-width--true_g3taa_1","xxl:full-width--false":"_xxl:full-width--false_g3taa_1",accentPrimary:"_accentPrimary_g3taa_189",accentSecondary:"_accentSecondary_g3taa_213",accentTertiary:"_accentTertiary_g3taa_247",accentQuaternary:"_accentQuaternary_g3taa_277",accentSecondaryFilled:"_accentSecondaryFilled_g3taa_306",criticalPrimary:"_criticalPrimary_g3taa_346",criticalSecondary:"_criticalSecondary_g3taa_371",criticalTertiary:"_criticalTertiary_g3taa_405",criticalQuaternary:"_criticalQuaternary_g3taa_435",criticalSecondaryFilled:"_criticalSecondaryFilled_g3taa_465",neutralPrimary:"_neutralPrimary_g3taa_505",neutralSecondary:"_neutralSecondary_g3taa_530",neutralTertiary:"_neutralTertiary_g3taa_563",neutralQuaternary:"_neutralQuaternary_g3taa_593",neutralSecondaryFilled:"_neutralSecondaryFilled_g3taa_623",whitePrimary:"_whitePrimary_g3taa_663",whiteSecondary:"_whiteSecondary_g3taa_693",whiteTertiary:"_whiteTertiary_g3taa_726",whiteQuaternary:"_whiteQuaternary_g3taa_756",whiteSecondaryFilled:"_whiteSecondaryFilled_g3taa_786","fa-spinner-third":"_fa-spinner-third_g3taa_827","icon-wrapper":"_icon-wrapper_g3taa_832"},f=m(x),y=i(x.button,{variants:{size:{sm:x["size--sm"],md:x["size--md"],lg:x["size--lg"]},accent:{primary:x.accentPrimary,secondary:x.accentSecondary,tertiary:x.accentTertiary,quaternary:x.accentQuaternary,secondaryFilled:x.accentSecondaryFilled},critical:{primary:x.criticalPrimary,secondary:x.criticalSecondary,tertiary:x.criticalTertiary,quaternary:x.criticalQuaternary,secondaryFilled:x.criticalSecondaryFilled},neutral:{primary:x.neutralPrimary,secondary:x.neutralSecondary,tertiary:x.neutralTertiary,quaternary:x.neutralQuaternary,secondaryFilled:x.neutralSecondaryFilled},white:{primary:x.whitePrimary,secondary:x.whiteSecondary,tertiary:x.whiteTertiary,quaternary:x.whiteQuaternary,secondaryFilled:x.whiteSecondaryFilled},fullWidth:{true:x["full-width--true"],false:x["full-width--false"]},focusStyle:{default:void 0,white:x.focusWhite},isLoading:{false:x.isNotLoading,true:x.isLoading},textAlign:{left:x["text-align--left"],center:x["text-align--center"],right:x["text-align--right"]},iconButton:{true:x.iconButton}},compoundVariants:[{size:"md",accent:"primary",className:x.accentPrimary},{size:"sm",iconButton:!0,className:x.iconButton__sm},{size:"md",iconButton:!0,className:x.iconButton__md},{size:"lg",iconButton:!0,className:x.iconButton__lg}],defaultVariants:{size:"md"}}),h=l(function({as:i,elementType:l,styleVariant:m,emphasis:h="primary",size:z="md",iconStartProps:p,iconEndProps:w,children:S,fullWidth:P,textAlign:B="center",focusStyle:F="default",passthroughProps:b,isLoading:v=!1,iconButton:T,slot:L,...Q},N){const j=n(N),{buttonProps:W,isPressed:q}=r({...Q,elementType:l??i},j),{hoverProps:V,isHovered:A}=s(Q),{isFocusVisible:D,focusProps:I,isFocused:k}=g(Q),E=u(z,"md"),H=u(B,"center"),R=u(P,!1),$=f(z,"size"),C=f(B,"text-align"),G=f(P,"full-width"),J=m??"accent",K=y({size:E,focusStyle:F,isLoading:v,textAlign:H,fullWidth:R,iconButton:T,[J]:h});/* @__PURE__ */
-return t(i??"button",{className:[K,o({focusStyle:F}),...$,...C,...G].filter(Boolean).join(" "),ref:j,"data-focused":!!k||void 0,"data-focus-visible":!!D||void 0,"data-hovered":!!A||void 0,"data-pressed":!!q||void 0,"aria-label":(()=>{if(v)return"Loading Spinner";const t=W["aria-label"]||("string"==typeof S?S:void 0);return Q.isDisabled&&t?`${t}, unavailable`:t})(),"aria-disabled":!!Q.isDisabled||void 0,"data-testid":"alto-button",slot:L,..._(W,V,I),...b,children:/* @__PURE__ */a(e,{children:[v&&/* @__PURE__ */t(d,{className:x.loadingSpinner,size:"lg"===z?"1.25x":"1x","aria-hidden":"true"}),p&&/* @__PURE__ */t(c,{...p,"aria-hidden":"true"}),
+import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import{c as l}from"../../index-CCUt_dAN.js";import{forwardRef as a}from"react";import{useButton as r}from"@react-aria/button";import{useObjectRef as n,mergeProps as _}from"@react-aria/utils";import{useHover as d}from"@react-aria/interactions";import{useFocusRing as s}from"@react-aria/focus";import{Icon as c}from"../Icon/Icon.js";import o from"../LoadingSpinner/LoadingSpinner.js";import{focusStyleVariants as u}from"../../utils/focus/focusStyles.js";import{getBaseValue as m,generateResponsiveClasses as g}from"../../utils/breakpoint/responsiveSSR.js";import '../../assets/Button.css';const x={button:"_button_3d089_1",content:"_content_3d089_34",isNotLoading:"_isNotLoading_3d089_41",loadingSpinner:"_loadingSpinner_3d089_41",isLoading:"_isLoading_3d089_50",focusWhite:"_focusWhite_3d089_66",iconButton:"_iconButton_3d089_70",iconButton__sm:"_iconButton__sm_3d089_75",iconButton__md:"_iconButton__md_3d089_79",iconButton__lg:"_iconButton__lg_3d089_83","full-width--true":"_full-width--true_3d089_87","full-width--false":"_full-width--false_3d089_91","size--sm":"_size--sm_3d089_139","size--md":"_size--md_3d089_142","size--lg":"_size--lg_3d089_145","text-align--left":"_text-align--left_3d089_178","text-align--center":"_text-align--center_3d089_181","text-align--right":"_text-align--right_3d089_184","sm:size--sm":"_sm:size--sm_3d089_1","sm:size--md":"_sm:size--md_3d089_1","sm:size--lg":"_sm:size--lg_3d089_1","sm:text-align--left":"_sm:text-align--left_3d089_1","sm:text-align--center":"_sm:text-align--center_3d089_1","sm:text-align--right":"_sm:text-align--right_3d089_1","sm:full-width--true":"_sm:full-width--true_3d089_1","sm:full-width--false":"_sm:full-width--false_3d089_1","md:size--sm":"_md:size--sm_3d089_1","md:size--md":"_md:size--md_3d089_1","md:size--lg":"_md:size--lg_3d089_1","md:text-align--left":"_md:text-align--left_3d089_1","md:text-align--center":"_md:text-align--center_3d089_1","md:text-align--right":"_md:text-align--right_3d089_1","md:full-width--true":"_md:full-width--true_3d089_1","md:full-width--false":"_md:full-width--false_3d089_1","lg:size--sm":"_lg:size--sm_3d089_1","lg:size--md":"_lg:size--md_3d089_1","lg:size--lg":"_lg:size--lg_3d089_1","lg:text-align--left":"_lg:text-align--left_3d089_1","lg:text-align--center":"_lg:text-align--center_3d089_1","lg:text-align--right":"_lg:text-align--right_3d089_1","lg:full-width--true":"_lg:full-width--true_3d089_1","lg:full-width--false":"_lg:full-width--false_3d089_1","xl:size--sm":"_xl:size--sm_3d089_1","xl:size--md":"_xl:size--md_3d089_1","xl:size--lg":"_xl:size--lg_3d089_1","xl:text-align--left":"_xl:text-align--left_3d089_1","xl:text-align--center":"_xl:text-align--center_3d089_1","xl:text-align--right":"_xl:text-align--right_3d089_1","xl:full-width--true":"_xl:full-width--true_3d089_1","xl:full-width--false":"_xl:full-width--false_3d089_1","xxl:size--sm":"_xxl:size--sm_3d089_1","xxl:size--md":"_xxl:size--md_3d089_1","xxl:size--lg":"_xxl:size--lg_3d089_1","xxl:text-align--left":"_xxl:text-align--left_3d089_1","xxl:text-align--center":"_xxl:text-align--center_3d089_1","xxl:text-align--right":"_xxl:text-align--right_3d089_1","xxl:full-width--true":"_xxl:full-width--true_3d089_1","xxl:full-width--false":"_xxl:full-width--false_3d089_1",accentPrimary:"_accentPrimary_3d089_224",accentSecondary:"_accentSecondary_3d089_253",accentTertiary:"_accentTertiary_3d089_291",accentQuaternary:"_accentQuaternary_3d089_325",accentSecondaryFilled:"_accentSecondaryFilled_3d089_359",criticalPrimary:"_criticalPrimary_3d089_403",criticalSecondary:"_criticalSecondary_3d089_433",criticalTertiary:"_criticalTertiary_3d089_471",criticalQuaternary:"_criticalQuaternary_3d089_505",criticalSecondaryFilled:"_criticalSecondaryFilled_3d089_539",neutralPrimary:"_neutralPrimary_3d089_582",neutralSecondary:"_neutralSecondary_3d089_616",neutralTertiary:"_neutralTertiary_3d089_654",neutralQuaternary:"_neutralQuaternary_3d089_688",neutralSecondaryFilled:"_neutralSecondaryFilled_3d089_722","fa-spinner-third":"_fa-spinner-third_3d089_768","icon-wrapper":"_icon-wrapper_3d089_773"},f=g(x),y=l(x.button,{variants:{size:{sm:x["size--sm"],md:x["size--md"],lg:x["size--lg"]},accent:{primary:x.accentPrimary,secondary:x.accentSecondary,tertiary:x.accentTertiary,quaternary:x.accentQuaternary,secondaryFilled:x.accentSecondaryFilled},critical:{primary:x.criticalPrimary,secondary:x.criticalSecondary,tertiary:x.criticalTertiary,quaternary:x.criticalQuaternary,secondaryFilled:x.criticalSecondaryFilled},neutral:{primary:x.neutralPrimary,secondary:x.neutralSecondary,tertiary:x.neutralTertiary,quaternary:x.neutralQuaternary,secondaryFilled:x.neutralSecondaryFilled},white:{primary:x.whitePrimary,secondary:x.whiteSecondary,tertiary:x.whiteTertiary,quaternary:x.whiteQuaternary,secondaryFilled:x.whiteSecondaryFilled},fullWidth:{true:x["full-width--true"],false:x["full-width--false"]},focusStyle:{default:void 0,white:x.focusWhite},isLoading:{false:x.isNotLoading,true:x.isLoading},textAlign:{left:x["text-align--left"],center:x["text-align--center"],right:x["text-align--right"]},iconButton:{true:x.iconButton}},compoundVariants:[{size:"md",accent:"primary",className:x.accentPrimary},{size:"sm",iconButton:!0,className:x.iconButton__sm},{size:"md",iconButton:!0,className:x.iconButton__md},{size:"lg",iconButton:!0,className:x.iconButton__lg}],defaultVariants:{size:"md"}}),h=a(function({as:l,elementType:a,styleVariant:g,emphasis:h="primary",size:z="md",iconStartProps:p,iconEndProps:w,children:S,fullWidth:B,textAlign:P="center",focusStyle:b="default",passthroughProps:F,isLoading:v=!1,iconButton:L,slot:T,...N},Q){const j=n(Q),{buttonProps:W,isPressed:q}=r({...N,elementType:a??l},j),{hoverProps:V,isHovered:A}=d(N),{isFocusVisible:D,focusProps:I,isFocused:k}=s(N),E=m(z,"md"),H=m(P,"center"),R=m(B,!1),$=f(z,"size"),C=f(P,"text-align"),G=f(B,"full-width"),J="white"===g?"neutral":g??"accent",K=y({size:E,focusStyle:b,isLoading:v,textAlign:H,fullWidth:R,iconButton:L,[J]:h});/* @__PURE__ */
+return t(l??"button",{className:[K,u({focusStyle:b}),...$,...C,...G].filter(Boolean).join(" "),ref:j,"data-focused":!!k||void 0,"data-focus-visible":!!D||void 0,"data-hovered":!!A||void 0,"data-pressed":!!q||void 0,"aria-label":(()=>{if(v)return"Loading Spinner";const t=W["aria-label"]||("string"==typeof S?S:void 0);return N.isDisabled&&t?`${t}, unavailable`:t})(),"aria-disabled":!!N.isDisabled||void 0,"data-testid":"alto-button",slot:T,..._(W,V,I),...F,children:/* @__PURE__ */e(i,{children:[v&&/* @__PURE__ */t(o,{className:x.loadingSpinner,size:"lg"===z?"1.25x":"1x","aria-hidden":"true"}),p&&/* @__PURE__ */t(c,{...p,"aria-hidden":"true"}),
 /* @__PURE__ */t("span",{className:x.content,children:S}),w&&/* @__PURE__ */t(c,{...w,"aria-hidden":"true"})]})})});export{h as Button,h as default};
 //# sourceMappingURL=Button.js.map

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport {\n  ComponentType,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  ForwardedRef,\n  type JSX,\n} from 'react';\nimport { AriaButtonOptions, useButton } from '@react-aria/button';\nimport styles from './Button.module.css';\nimport { useObjectRef, mergeProps } from '@react-aria/utils';\nimport { useHover, HoverProps } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport Icon, { IconProps } from '../Icon/Icon';\nimport LoadingSpinner from '../LoadingSpinner';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport {\n  generateResponsiveClasses,\n  getBaseValue,\n  WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\n\nconst button = cva(styles.button, {\n  variants: {\n    size: {\n      sm: styles['size--sm'],\n      md: styles['size--md'],\n      lg: styles['size--lg'],\n    },\n    accent: {\n      primary: styles.accentPrimary,\n      secondary: styles.accentSecondary,\n      tertiary: styles.accentTertiary,\n      quaternary: styles.accentQuaternary,\n      secondaryFilled: styles.accentSecondaryFilled,\n    },\n    critical: {\n      primary: styles.criticalPrimary,\n      secondary: styles.criticalSecondary,\n      tertiary: styles.criticalTertiary,\n      quaternary: styles.criticalQuaternary,\n      secondaryFilled: styles.criticalSecondaryFilled,\n    },\n    neutral: {\n      primary: styles.neutralPrimary,\n      secondary: styles.neutralSecondary,\n      tertiary: styles.neutralTertiary,\n      quaternary: styles.neutralQuaternary,\n      secondaryFilled: styles.neutralSecondaryFilled,\n    },\n    white: {\n      primary: styles.whitePrimary,\n      secondary: styles.whiteSecondary,\n      tertiary: styles.whiteTertiary,\n      quaternary: styles.whiteQuaternary,\n      secondaryFilled: styles.whiteSecondaryFilled,\n    },\n    fullWidth: {\n      true: styles['full-width--true'],\n      false: styles['full-width--false'],\n    },\n    focusStyle: {\n      default: undefined,\n      white: styles.focusWhite,\n    },\n    isLoading: {\n      false: styles.isNotLoading,\n      true: styles.isLoading,\n    },\n    textAlign: {\n      left: styles['text-align--left'],\n      center: styles['text-align--center'],\n      right: styles['text-align--right'],\n    },\n    iconButton: {\n      true: styles.iconButton,\n    },\n  },\n  compoundVariants: [\n    { size: 'md', accent: 'primary', className: styles.accentPrimary },\n    { size: 'sm', iconButton: true, className: styles.iconButton__sm },\n    { size: 'md', iconButton: true, className: styles.iconButton__md },\n    { size: 'lg', iconButton: true, className: styles.iconButton__lg },\n  ],\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype ButtonSize = 'lg' | 'md' | 'sm';\ntype ButtonTextAlignement = 'left' | 'center' | 'right';\n\nexport type ButtonBaseProps<T extends ElementType = 'button'> =\n  AriaButtonOptions<T> &\n    HoverProps & {\n      /**\n       * The HTML element to be rendered as the button.\n       * @default 'button'\n       * @example 'a' | 'button' | 'div'\n       */\n      as?: T;\n      /**\n       * For NextJS support. If `as` is used for next/link, this prop should be set to 'a' or the desired element for prop typing.\n       * @default 'button'\n       * @example 'a' | 'button'\n       */\n      elementType?: 'a' | 'button';\n      /**\n       * What the base style of button is\n       * @default 'accent'\n       */\n      styleVariant?: 'accent' | 'critical' | 'neutral' | 'white';\n\n      /**\n       * What the purpose is for the button\n       * @default 'primary'\n       */\n      emphasis?:\n        | 'primary'\n        | 'secondary'\n        | 'secondaryFilled'\n        | 'tertiary'\n        | 'quaternary';\n\n      /**\n       * **[Responsive]** The size of the button\n       * @default 'md'\n       */\n      size?: ButtonSize;\n\n      /**\n       * Whether an icon should display at the end of Button and icon properties\n       * @default\n       */\n      iconEndProps?: IconProps;\n\n      /**\n       * Whether an icon should display at the start of the Button and icon properties\n       */\n      iconStartProps?: IconProps;\n      /**\n       * isLoading is a boolean that will show a spinner in the button\n       */\n      isLoading?: boolean;\n\n      /**\n       * **[Responsive]** The text alignment of the button\n       */\n      textAlign?: ButtonTextAlignement;\n\n      /**\n       * The content for the button.\n       */\n      children?: ReactNode;\n\n      /**\n       * \tWhether the element should receive focus on render.\n       */\n      type?: 'button' | 'submit' | 'reset';\n\n      /**\n       * **[Responsive]** Whether the button should be full width.\n       */\n      fullWidth?: boolean;\n\n      /**\n       * The target of the link (if `as` is set to 'a').\n       */\n      target?: '_blank' | '_self' | '_parent' | '_top';\n\n      /**\n       *  What type of focus style to apply to the button.\n       */\n      focusStyle?: 'default' | 'white';\n\n      /**\n       * The slot of the button\n       */\n      slot?: string;\n\n      /**\n       * Set to true to style button as an icon button\n       * @ignore\n       */\n      iconButton?: boolean;\n\n      /**\n       * Passthrough props for the button element.\n       */\n      passthroughProps?: Partial<\n        T extends ComponentType<infer P>\n          ? P\n          : T extends keyof JSX.IntrinsicElements\n            ? JSX.IntrinsicElements[T]\n            : never\n      >;\n    };\n\n// ResponsivePropKeys are the keys of the props that can accept responsive values (base + breakpoint-specific)\ntype ResponsivePropKeys = 'size' | 'textAlign' | 'fullWidth';\n\nexport type ButtonProps<T extends ElementType = 'button'> = WithResponsiveProps<\n  ButtonBaseProps<T>,\n  ResponsivePropKeys\n>;\n\nexport type DefaultButtonProps = ButtonProps<'button'>;\n\nexport const Button = forwardRef(function Button<\n  T extends ElementType = 'button',\n>(\n  {\n    as,\n    elementType,\n    styleVariant,\n    emphasis = 'primary',\n    size = 'md',\n    iconStartProps,\n    iconEndProps,\n    children,\n    fullWidth,\n    textAlign = 'center',\n    focusStyle = 'default',\n    passthroughProps,\n    isLoading = false,\n    iconButton,\n    slot,\n    ...props\n  }: ButtonProps<T>,\n  // Not using <T> here as typescript cannot narrow it properly from consuming component\n  // see - https://www.tsteele.dev/posts/react-polymorphic-forwardref for potential\n  // solutions if proper typing is required.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  forwardedRef?: ForwardedRef<any>,\n) {\n  const ref = useObjectRef(forwardedRef);\n\n  // Call useButton to get the props and state needed for accessibility and interaction\n  const { buttonProps, isPressed } = useButton(\n    { ...props, elementType: elementType ?? as },\n    ref,\n  );\n  const { hoverProps, isHovered } = useHover(props);\n  const { isFocusVisible, focusProps, isFocused } = useFocusRing(props);\n\n  const getAriaLabel = () => {\n    if (isLoading) {\n      return 'Loading Spinner';\n    }\n\n    const label =\n      buttonProps['aria-label'] ||\n      (typeof children === 'string' ? children : undefined);\n\n    if (props.isDisabled && label) {\n      return `${label}, unavailable`;\n    }\n\n    return label;\n  };\n\n  const baseSize = getBaseValue(size, 'md');\n  const baseTextAlign = getBaseValue(textAlign, 'center');\n  const baseFullWidth = getBaseValue(fullWidth, false);\n\n  const sizeResponsiveClasses = getResponsiveClasses(size, 'size');\n  const textAlignResponsiveClasses = getResponsiveClasses(\n    textAlign,\n    'text-align',\n  );\n  const fullWidthResponsiveClasses = getResponsiveClasses(\n    fullWidth,\n    'full-width',\n  );\n\n  const resolvedStyleVariant = styleVariant ?? 'accent';\n\n  const className = button({\n    size: baseSize,\n    focusStyle,\n    isLoading,\n    textAlign: baseTextAlign,\n    fullWidth: baseFullWidth,\n    iconButton,\n    [resolvedStyleVariant]: emphasis,\n  });\n\n  const Component: ElementType = as ?? 'button';\n\n  return (\n    <Component\n      className={[\n        className,\n        focusStyleVariants({ focusStyle }),\n        ...sizeResponsiveClasses,\n        ...textAlignResponsiveClasses,\n        ...fullWidthResponsiveClasses,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n      data-focused={isFocused ? true : undefined}\n      data-focus-visible={isFocusVisible ? true : undefined}\n      data-hovered={isHovered ? true : undefined}\n      data-pressed={isPressed ? true : undefined}\n      aria-label={getAriaLabel()}\n      aria-disabled={props.isDisabled ? true : undefined}\n      data-testid=\"alto-button\"\n      slot={slot}\n      {...mergeProps(buttonProps, hoverProps, focusProps)}\n      {...passthroughProps}\n    >\n      <>\n        {isLoading && (\n          <LoadingSpinner\n            className={styles.loadingSpinner}\n            size={size === 'lg' ? '1.25x' : '1x'}\n            aria-hidden=\"true\"\n          />\n        )}\n        {iconStartProps && <Icon {...iconStartProps} aria-hidden=\"true\" />}\n        <span className={styles.content}>{children}</span>\n        {iconEndProps && <Icon {...iconEndProps} aria-hidden=\"true\" />}\n      </>\n    </Component>\n  );\n});\n\nexport default Button;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","button","cva","variants","size","sm","md","lg","accent","primary","accentPrimary","secondary","accentSecondary","tertiary","accentTertiary","quaternary","accentQuaternary","secondaryFilled","accentSecondaryFilled","critical","criticalPrimary","criticalSecondary","criticalTertiary","criticalQuaternary","criticalSecondaryFilled","neutral","neutralPrimary","neutralSecondary","neutralTertiary","neutralQuaternary","neutralSecondaryFilled","white","whitePrimary","whiteSecondary","whiteTertiary","whiteQuaternary","whiteSecondaryFilled","fullWidth","true","false","focusStyle","default","focusWhite","isLoading","isNotLoading","textAlign","left","center","right","iconButton","compoundVariants","className","iconButton__sm","iconButton__md","iconButton__lg","defaultVariants","Button","forwardRef","as","elementType","styleVariant","emphasis","iconStartProps","iconEndProps","children","passthroughProps","slot","props","forwardedRef","ref","useObjectRef","buttonProps","isPressed","useButton","hoverProps","isHovered","useHover","isFocusVisible","focusProps","isFocused","useFocusRing","baseSize","getBaseValue","baseTextAlign","baseFullWidth","sizeResponsiveClasses","textAlignResponsiveClasses","fullWidthResponsiveClasses","resolvedStyleVariant","jsx","focusStyleVariants","filter","Boolean","join","label","isDisabled","getAriaLabel","mergeProps","jsxs","Fragment","LoadingSpinner","loadingSpinner","Icon","content"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport {\n  ComponentType,\n  ElementType,\n  ReactNode,\n  forwardRef,\n  ForwardedRef,\n  type JSX,\n} from 'react';\nimport { AriaButtonOptions, useButton } from '@react-aria/button';\nimport styles from './Button.module.css';\nimport { useObjectRef, mergeProps } from '@react-aria/utils';\nimport { useHover, HoverProps } from '@react-aria/interactions';\nimport { useFocusRing } from '@react-aria/focus';\nimport Icon, { IconProps } from '../Icon/Icon';\nimport LoadingSpinner from '../LoadingSpinner';\nimport { focusStyleVariants } from '../../utils/focus/focusStyles';\nimport {\n  generateResponsiveClasses,\n  getBaseValue,\n  WithResponsiveProps,\n} from '../../utils/breakpoint/responsiveSSR';\n\nconst getResponsiveClasses = generateResponsiveClasses(styles);\n\nconst button = cva(styles.button, {\n  variants: {\n    size: {\n      sm: styles['size--sm'],\n      md: styles['size--md'],\n      lg: styles['size--lg'],\n    },\n    accent: {\n      primary: styles.accentPrimary,\n      secondary: styles.accentSecondary,\n      tertiary: styles.accentTertiary,\n      quaternary: styles.accentQuaternary,\n      secondaryFilled: styles.accentSecondaryFilled,\n    },\n    critical: {\n      primary: styles.criticalPrimary,\n      secondary: styles.criticalSecondary,\n      tertiary: styles.criticalTertiary,\n      quaternary: styles.criticalQuaternary,\n      secondaryFilled: styles.criticalSecondaryFilled,\n    },\n    neutral: {\n      primary: styles.neutralPrimary,\n      secondary: styles.neutralSecondary,\n      tertiary: styles.neutralTertiary,\n      quaternary: styles.neutralQuaternary,\n      secondaryFilled: styles.neutralSecondaryFilled,\n    },\n    white: {\n      primary: styles.whitePrimary,\n      secondary: styles.whiteSecondary,\n      tertiary: styles.whiteTertiary,\n      quaternary: styles.whiteQuaternary,\n      secondaryFilled: styles.whiteSecondaryFilled,\n    },\n    fullWidth: {\n      true: styles['full-width--true'],\n      false: styles['full-width--false'],\n    },\n    focusStyle: {\n      default: undefined,\n      white: styles.focusWhite,\n    },\n    isLoading: {\n      false: styles.isNotLoading,\n      true: styles.isLoading,\n    },\n    textAlign: {\n      left: styles['text-align--left'],\n      center: styles['text-align--center'],\n      right: styles['text-align--right'],\n    },\n    iconButton: {\n      true: styles.iconButton,\n    },\n  },\n  compoundVariants: [\n    { size: 'md', accent: 'primary', className: styles.accentPrimary },\n    { size: 'sm', iconButton: true, className: styles.iconButton__sm },\n    { size: 'md', iconButton: true, className: styles.iconButton__md },\n    { size: 'lg', iconButton: true, className: styles.iconButton__lg },\n  ],\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype ButtonSize = 'lg' | 'md' | 'sm';\ntype ButtonTextAlignement = 'left' | 'center' | 'right';\n\nexport type ButtonBaseProps<T extends ElementType = 'button'> =\n  AriaButtonOptions<T> &\n    HoverProps & {\n      /**\n       * The HTML element to be rendered as the button.\n       * @default 'button'\n       * @example 'a' | 'button' | 'div'\n       */\n      as?: T;\n      /**\n       * For NextJS support. If `as` is used for next/link, this prop should be set to 'a' or the desired element for prop typing.\n       * @default 'button'\n       * @example 'a' | 'button'\n       */\n      elementType?: 'a' | 'button';\n      /**\n       * What the base style of button is\n       * @default accent\n       */\n      styleVariant?: 'accent' | 'critical' | 'neutral' | 'white';\n\n      /**\n       * What the purpose is for the button\n       * @default 'primary'\n       */\n      emphasis?:\n        | 'primary'\n        | 'secondary'\n        | 'secondaryFilled'\n        | 'tertiary'\n        | 'quaternary';\n\n      /**\n       * **[Responsive]** The size of the button\n       * @default 'md'\n       */\n      size?: ButtonSize;\n\n      /**\n       * Whether an icon should display at the end of Button and icon properties\n       * @default\n       */\n      iconEndProps?: IconProps;\n\n      /**\n       * Whether an icon should display at the start of the Button and icon properties\n       */\n      iconStartProps?: IconProps;\n      /**\n       * isLoading is a boolean that will show a spinner in the button\n       */\n      isLoading?: boolean;\n\n      /**\n       * **[Responsive]** The text alignment of the button\n       */\n      textAlign?: ButtonTextAlignement;\n\n      /**\n       * The content for the button.\n       */\n      children?: ReactNode;\n\n      /**\n       * \tWhether the element should receive focus on render.\n       */\n      type?: 'button' | 'submit' | 'reset';\n\n      /**\n       * **[Responsive]** Whether the button should be full width.\n       */\n      fullWidth?: boolean;\n\n      /**\n       * The target of the link (if `as` is set to 'a').\n       */\n      target?: '_blank' | '_self' | '_parent' | '_top';\n\n      /**\n       *  What type of focus style to apply to the button.\n       */\n      focusStyle?: 'default' | 'white';\n\n      /**\n       * The slot of the button\n       */\n      slot?: string;\n\n      /**\n       * Internal prop used by `IconButton` to apply icon-button sizing and padding styles.\n       * Do not use directly — use the `IconButton` component instead.\n       * @internal\n       * @ignore\n       */\n      iconButton?: boolean;\n\n      /**\n       * Passthrough props for the button element.\n       */\n      passthroughProps?: Partial<\n        T extends ComponentType<infer P>\n          ? P\n          : T extends keyof JSX.IntrinsicElements\n            ? JSX.IntrinsicElements[T]\n            : never\n      >;\n    };\n\n// ResponsivePropKeys are the keys of the props that can accept responsive values (base + breakpoint-specific)\ntype ResponsivePropKeys = 'size' | 'textAlign' | 'fullWidth';\n\nexport type ButtonProps<T extends ElementType = 'button'> = WithResponsiveProps<\n  ButtonBaseProps<T>,\n  ResponsivePropKeys\n>;\n\nexport type DefaultButtonProps = ButtonProps<'button'>;\n\nexport const Button = forwardRef(function Button<\n  T extends ElementType = 'button',\n>(\n  {\n    as,\n    elementType,\n    styleVariant,\n    emphasis = 'primary',\n    size = 'md',\n    iconStartProps,\n    iconEndProps,\n    children,\n    fullWidth,\n    textAlign = 'center',\n    focusStyle = 'default',\n    passthroughProps,\n    isLoading = false,\n    iconButton,\n    slot,\n    ...props\n  }: ButtonProps<T>,\n  // Not using <T> here as typescript cannot narrow it properly from consuming component\n  // see - https://www.tsteele.dev/posts/react-polymorphic-forwardref for potential\n  // solutions if proper typing is required.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  forwardedRef?: ForwardedRef<any>,\n) {\n  const ref = useObjectRef(forwardedRef);\n\n  // Call useButton to get the props and state needed for accessibility and interaction\n  const { buttonProps, isPressed } = useButton(\n    { ...props, elementType: elementType ?? as },\n    ref,\n  );\n  const { hoverProps, isHovered } = useHover(props);\n  const { isFocusVisible, focusProps, isFocused } = useFocusRing(props);\n\n  const getAriaLabel = () => {\n    if (isLoading) {\n      return 'Loading Spinner';\n    }\n\n    const label =\n      buttonProps['aria-label'] ||\n      (typeof children === 'string' ? children : undefined);\n\n    if (props.isDisabled && label) {\n      return `${label}, unavailable`;\n    }\n\n    return label;\n  };\n\n  const baseSize = getBaseValue(size, 'md');\n  const baseTextAlign = getBaseValue(textAlign, 'center');\n  const baseFullWidth = getBaseValue(fullWidth, false);\n\n  const sizeResponsiveClasses = getResponsiveClasses(size, 'size');\n  const textAlignResponsiveClasses = getResponsiveClasses(\n    textAlign,\n    'text-align',\n  );\n  const fullWidthResponsiveClasses = getResponsiveClasses(\n    fullWidth,\n    'full-width',\n  );\n\n  const resolvedStyleVariant =\n    styleVariant === 'white' ? 'neutral' : (styleVariant ?? 'accent');\n\n  const className = button({\n    size: baseSize,\n    focusStyle,\n    isLoading,\n    textAlign: baseTextAlign,\n    fullWidth: baseFullWidth,\n    iconButton,\n    [resolvedStyleVariant]: emphasis,\n  });\n\n  const Component: ElementType = as ?? 'button';\n\n  return (\n    <Component\n      className={[\n        className,\n        focusStyleVariants({ focusStyle }),\n        ...sizeResponsiveClasses,\n        ...textAlignResponsiveClasses,\n        ...fullWidthResponsiveClasses,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={ref}\n      data-focused={isFocused ? true : undefined}\n      data-focus-visible={isFocusVisible ? true : undefined}\n      data-hovered={isHovered ? true : undefined}\n      data-pressed={isPressed ? true : undefined}\n      aria-label={getAriaLabel()}\n      aria-disabled={props.isDisabled ? true : undefined}\n      data-testid=\"alto-button\"\n      slot={slot}\n      {...mergeProps(buttonProps, hoverProps, focusProps)}\n      {...passthroughProps}\n    >\n      <>\n        {isLoading && (\n          <LoadingSpinner\n            className={styles.loadingSpinner}\n            size={size === 'lg' ? '1.25x' : '1x'}\n            aria-hidden=\"true\"\n          />\n        )}\n        {iconStartProps && <Icon {...iconStartProps} aria-hidden=\"true\" />}\n        <span className={styles.content}>{children}</span>\n        {iconEndProps && <Icon {...iconEndProps} aria-hidden=\"true\" />}\n      </>\n    </Component>\n  );\n});\n\nexport default Button;\n"],"names":["getResponsiveClasses","generateResponsiveClasses","styles","button","cva","variants","size","sm","md","lg","accent","primary","accentPrimary","secondary","accentSecondary","tertiary","accentTertiary","quaternary","accentQuaternary","secondaryFilled","accentSecondaryFilled","critical","criticalPrimary","criticalSecondary","criticalTertiary","criticalQuaternary","criticalSecondaryFilled","neutral","neutralPrimary","neutralSecondary","neutralTertiary","neutralQuaternary","neutralSecondaryFilled","white","whitePrimary","whiteSecondary","whiteTertiary","whiteQuaternary","whiteSecondaryFilled","fullWidth","true","false","focusStyle","default","focusWhite","isLoading","isNotLoading","textAlign","left","center","right","iconButton","compoundVariants","className","iconButton__sm","iconButton__md","iconButton__lg","defaultVariants","Button","forwardRef","as","elementType","styleVariant","emphasis","iconStartProps","iconEndProps","children","passthroughProps","slot","props","forwardedRef","ref","useObjectRef","buttonProps","isPressed","useButton","hoverProps","isHovered","useHover","isFocusVisible","focusProps","isFocused","useFocusRing","baseSize","getBaseValue","baseTextAlign","baseFullWidth","sizeResponsiveClasses","textAlignResponsiveClasses","fullWidthResponsiveClasses","resolvedStyleVariant","jsx","focusStyleVariants","filter","Boolean","join","label","isDisabled","getAriaLabel","mergeProps","jsxs","Fragment","LoadingSpinner","loadingSpinner","Icon","content"],"mappings":"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"}

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -1,7 +1,7 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import l from"react";import{Icon as n}from"../Icon/Icon.js";import{c as t}from"../../index-CCUt_dAN.js";import{IconButton as r}from"../IconButton/IconButton.js";import '../../assets/CalloutBanner.css';const c={calloutBanner:"_calloutBanner_w7hda_1",calloutBanner__icon:"_calloutBanner__icon_w7hda_12","calloutBanner__meta-title":"_calloutBanner__meta-title_w7hda_21","calloutBanner__meta-label":"_calloutBanner__meta-label_w7hda_19",calloutBanner__start:"_calloutBanner__start_w7hda_17",calloutBanner__end:"_calloutBanner__end_w7hda_38",calloutBanner__dismiss:"_calloutBanner__dismiss_w7hda_45",calloutBanner__meta:"_calloutBanner__meta_w7hda_19","calloutBanner__meta-content":"_calloutBanner__meta-content_w7hda_62","calloutBanner__header--row":"_calloutBanner__header--row_w7hda_74","calloutBanner__meta-top":"_calloutBanner__meta-top_w7hda_79","calloutBanner__custom-asset":"_calloutBanner__custom-asset_w7hda_89","calloutBanner__meta-description":"_calloutBanner__meta-description_w7hda_103","calloutBanner__severity-label":"_calloutBanner__severity-label_w7hda_108","calloutBanner__default-asset--center":"_calloutBanner__default-asset--center_w7hda_119","calloutBanner--critical":"_calloutBanner--critical_w7hda_125","calloutBanner--primary":"_calloutBanner--primary_w7hda_129","calloutBanner--secondary":"_calloutBanner--secondary_w7hda_133","calloutBanner--tertiary":"_calloutBanner--tertiary_w7hda_142","calloutBanner--success":"_calloutBanner--success_w7hda_151","calloutBanner--information":"_calloutBanner--information_w7hda_177","calloutBanner--neutral":"_calloutBanner--neutral_w7hda_203","calloutBanner--accent":"_calloutBanner--accent_w7hda_229"},o=t(c.calloutBanner,{variants:{emphasis:{primary:c["calloutBanner--primary"],secondary:c["calloutBanner--secondary"],tertiary:c["calloutBanner--tertiary"]},styleVariant:{critical:c["calloutBanner--critical"],success:c["calloutBanner--success"],information:c["calloutBanner--information"],neutral:c["calloutBanner--neutral"],accent:c["calloutBanner--accent"]},headerLayout:{row:c["calloutBanner__header--row"],column:c["calloutBanner__header-column"]}},defaultVariants:{emphasis:"primary",styleVariant:"critical"}}),i={critical:{icon:"circle-exclamation",severityLabel:"Critical",role:"alert"},success:{icon:"check-circle",severityLabel:"Success",role:"status"},information:{icon:"info-circle",severityLabel:"Information",role:"status"},neutral:{icon:"check-circle",severityLabel:"",role:"region"},accent:{icon:"house",severityLabel:"",role:"region"}},_=({title:t,description:_,label:u,children:d,styleVariant:m="critical",emphasis:B="primary",headingLevel:h="h3",dismissButtonTooltipLabel:y,onDismiss:p,customAsset:w,hideIllustration:f=!1,alignButtons:v="left",headerLayout:b="column",severityLabel:N,role:L,dismissButtonProps:g={"aria-label":"Dismiss banner"},...x})=>{const I="function"==typeof p,{icon:V,severityLabel:j,role:P}=i[m],z=h,A=l.useId(),S=l.useId(),k=N??j,C=L||P,D=l.Children.toArray(d),E=D.find(a=>l.isValidElement(a)&&a.type===s),$=D.filter(a=>!(l.isValidElement(a)&&a.type===s)),q=!_;/* @__PURE__ */
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import l from"react";import{Icon as n}from"../Icon/Icon.js";import{c as t}from"../../index-CCUt_dAN.js";import{IconButton as r}from"../IconButton/IconButton.js";import '../../assets/CalloutBanner.css';const c={calloutBanner:"_calloutBanner_w7hda_1",calloutBanner__icon:"_calloutBanner__icon_w7hda_12","calloutBanner__meta-title":"_calloutBanner__meta-title_w7hda_21","calloutBanner__meta-label":"_calloutBanner__meta-label_w7hda_19",calloutBanner__start:"_calloutBanner__start_w7hda_17",calloutBanner__end:"_calloutBanner__end_w7hda_38",calloutBanner__dismiss:"_calloutBanner__dismiss_w7hda_45",calloutBanner__meta:"_calloutBanner__meta_w7hda_19","calloutBanner__meta-content":"_calloutBanner__meta-content_w7hda_62","calloutBanner__header--row":"_calloutBanner__header--row_w7hda_74","calloutBanner__meta-top":"_calloutBanner__meta-top_w7hda_79","calloutBanner__custom-asset":"_calloutBanner__custom-asset_w7hda_89","calloutBanner__meta-description":"_calloutBanner__meta-description_w7hda_103","calloutBanner__severity-label":"_calloutBanner__severity-label_w7hda_108","calloutBanner__default-asset--center":"_calloutBanner__default-asset--center_w7hda_119","calloutBanner--critical":"_calloutBanner--critical_w7hda_125","calloutBanner--primary":"_calloutBanner--primary_w7hda_129","calloutBanner--secondary":"_calloutBanner--secondary_w7hda_133","calloutBanner--tertiary":"_calloutBanner--tertiary_w7hda_142","calloutBanner--success":"_calloutBanner--success_w7hda_151","calloutBanner--information":"_calloutBanner--information_w7hda_177","calloutBanner--neutral":"_calloutBanner--neutral_w7hda_203","calloutBanner--accent":"_calloutBanner--accent_w7hda_229"},o=t(c.calloutBanner,{variants:{emphasis:{primary:c["calloutBanner--primary"],secondary:c["calloutBanner--secondary"],tertiary:c["calloutBanner--tertiary"]},styleVariant:{critical:c["calloutBanner--critical"],success:c["calloutBanner--success"],information:c["calloutBanner--information"],neutral:c["calloutBanner--neutral"],accent:c["calloutBanner--accent"]},headerLayout:{row:c["calloutBanner__header--row"],column:c["calloutBanner__header-column"]}},defaultVariants:{emphasis:"primary",styleVariant:"critical"}}),i={critical:{icon:"circle-exclamation",severityLabel:"Critical",role:"alert"},success:{icon:"check-circle",severityLabel:"Success",role:"status"},information:{icon:"info-circle",severityLabel:"Information",role:"status"},neutral:{icon:"check-circle",severityLabel:"",role:"region"},accent:{icon:"house",severityLabel:"",role:"region"}},_=({title:t,description:_,label:u,children:d,styleVariant:m="critical",emphasis:B="primary",headingLevel:h="h3",dismissButtonTooltipLabel:y,onDismiss:p,customAsset:w,hideIllustration:f=!1,alignButtons:v="left",headerLayout:b="column",severityLabel:N,role:L,dismissButtonProps:g={"aria-label":"Dismiss banner"},...x})=>{const I="function"==typeof p,{icon:V,severityLabel:j,role:P}=i[m],z=h,A=l.useId(),S=l.useId(),k=N??j,C=L||P,D=l.Children.toArray(d),E=D.find(a=>l.isValidElement(a)&&a.type===s),$=D.filter(a=>!(l.isValidElement(a)&&a.type===s)),T=!_;/* @__PURE__ */
 return a("div",{className:o({emphasis:B,styleVariant:m}),role:C,"aria-labelledby":A,"aria-describedby":_?S:void 0,...x,children:[
-/* @__PURE__ */a("div",{className:c.calloutBanner__start,children:[!f&&/* @__PURE__ */e("div",w?{className:c["calloutBanner__custom-asset"],children:w}:{className:q?c["calloutBanner__default-asset--center"]:void 0,children:/* @__PURE__ */e(n,{iconName:V,iconPrefix:"fas",className:c.calloutBanner__icon,iconSize:"1.25x",padding:"roomy"})}),
-/* @__PURE__ */a("div",{className:c.calloutBanner__meta,children:[I&&/* @__PURE__ */e("div",{className:c.calloutBanner__dismiss,children:/* @__PURE__ */e(r,{onPress:p,styleVariant:"white",emphasis:"quaternary",size:"sm",iconProps:{iconName:"close",iconPrefix:"far",iconSize:"1x"},tooltipLabel:y,...g})}),
+/* @__PURE__ */a("div",{className:c.calloutBanner__start,children:[!f&&/* @__PURE__ */e("div",w?{className:c["calloutBanner__custom-asset"],children:w}:{className:T?c["calloutBanner__default-asset--center"]:void 0,children:/* @__PURE__ */e(n,{iconName:V,iconPrefix:"fas",className:c.calloutBanner__icon,iconSize:"1.25x",padding:"roomy"})}),
+/* @__PURE__ */a("div",{className:c.calloutBanner__meta,children:[I&&/* @__PURE__ */e("div",{className:c.calloutBanner__dismiss,children:/* @__PURE__ */e(r,{onPress:p,styleVariant:"neutral",emphasis:"tertiary"===B?"tertiary":"primary",size:"sm",iconProps:{iconName:"close",iconPrefix:"fas",iconSize:"1x"},tooltipLabel:y,...g})}),
 /* @__PURE__ */a("div",{className:[c["calloutBanner__meta-content"],"right"===v?c["calloutBanner__meta-right"]:"","row"===b?c["calloutBanner__header--row"]:""].filter(Boolean).join(" "),children:[
 /* @__PURE__ */e("div",{children:/* @__PURE__ */a("div",{className:`${c["calloutBanner__meta-top"]} ${I?c["calloutBanner__meta-top-dismiss"]:""}`,children:[
 /* @__PURE__ */a(z,{id:A,className:c["calloutBanner__meta-title"],children:[

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=\"white\"\n                emphasis=\"quaternary\"\n                size=\"sm\"\n                iconProps={{\n                  iconName: 'close',\n                  iconPrefix: 'far',\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":"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"}
+{"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"}

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 n,useState as a,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 c,c as d,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:k=!1,autoPlay:B=!1,autoPlayInterval:W=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:ne})=>{const ae=r.Children.toArray(s),oe=ae.length,ie=b(),se=g(A,ie)??1,le=g(S,ie)??0,ue=g(P,ie)??void 0,ce=g(M,ie)??"md",de=g(k,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=n(null),ve=n(null),ye=n(null),ge=n(null),be=n(null),we=n([]),[_e,Ce]=a(0),[xe,Ne]=a(0),[Ae,Se]=a(!1),[Pe,qe]=a(he.length>1),[Le,Me]=a(0),[Ee,Te]=a(0),[De,$e]=a(!1),[Ie,ke]=a(!1),[Be,We]=a(!1),[je]=a(!1),[ze,Re]=a(null),Fe="infinite"===N?"infinite":"backToStart"===N?"native":"off"!==N?N:void 0,He=Le>0?Le:he.length,Oe=!de&&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)),n=e.querySelector(`[data-item-index="${r}"]`);if(!n)return!1;const a=e.getBoundingClientRect(),o=n.getBoundingClientRect(),i=e.scrollLeft+(o.left-a.left);return e.scrollTo({left:i,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 n=0,a=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<a&&(a=o,n=t)});const o=Math.max(1,Math.floor(me)),i=Math.min(He-1,Math.floor(n/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)=>({canGoPrev:e>0,canGoNext:e<t-1,currentPage:e,totalPages:t}))(_e,He);if(re)return re.current={prev:Je,next:Qe,goToSlide:Ge,...e},ne?.(e),()=>{re.current&&(re.current=null)};ne?.(e)},[re,_e,Qe,Je,Ge,ne,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)},n=()=>{De?setTimeout(()=>{$e(!1),Re(null)},50):Re(null)},a=pe.current;return a.addEventListener("mousedown",t,!0),a.addEventListener("mousemove",r,!0),a.addEventListener("mouseup",n,!0),a.addEventListener("click",e,!0),()=>{a.removeEventListener("mousedown",t,!0),a.removeEventListener("mousemove",r,!0),a.removeEventListener("mouseup",n,!0),a.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)})()}))},n=new MutationObserver(()=>{r()});return n.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-slide-tab"]}),r(),()=>{null!==t&&window.cancelAnimationFrame(t),n.disconnect()}},[oe,me]),i(()=>{const e=be.current;if(!e)return;let t=null;const r=()=>{null===t&&(t=window.requestAnimationFrame(()=>{t=null,n()}))},n=()=>{const t=Math.max(0,e.scrollWidth-e.clientWidth),r=e.scrollLeft,n=t>1,a=n?r>1:_e>0,o=n?r<t-1:_e<He-1,i=we.current.length>0?we.current:Array.from(e.querySelectorAll("[data-item-index]"));0===we.current.length&&(we.current=i);const s=r+1,l=i.find(e=>e.offsetLeft+e.offsetWidth>s)?.dataset.itemIndex??"0",u=parseInt(l,10),c=Number.isNaN(u)?0:u,d=Math.max(1,Math.ceil(me)),m=c+d-1;i.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<=m?(e.removeAttribute("inert"),e.removeAttribute("aria-hidden")):(e.setAttribute("inert","true"),e.setAttribute("aria-hidden","true"))});const f=he.map(e=>e[0]).reduce((e,t,r)=>t<=c?r:e,0),h=n?f:_e;Se(e=>e===a?e:a),qe(e=>e===o?e:o),Te(e=>e===c?e:c),Ce(e=>(e!==h&&Ne(e),e===h?e:h))},a=new ResizeObserver(()=>{r()});a.observe(e);(()=>{const t=Array.from(e.querySelectorAll("[data-item-index]"));return we.current=t,t})().forEach(e=>{a.observe(e)});const o=()=>{r()};return e.addEventListener("load",o,!0),n(),e.addEventListener("scroll",n,{passive:!0}),window.addEventListener("resize",r),()=>{null!==t&&window.cancelAnimationFrame(t),a.disconnect(),e.removeEventListener("load",o,!0),e.removeEventListener("scroll",n),window.removeEventListener("resize",r),we.current=[]}},[_e,he,me,He,oe]);const Ue=T?{onMouseEnter:()=>ke(!0),onMouseLeave:()=>ke(!1),onFocus:()=>We(!0),onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||We(!1)}}:{},Ze=He>1&&(!T||Ie||Be),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(),nt=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}${B?", autoplay enabled":""}`})(),"aria-describedby":x,"aria-roledescription":"carousel",children:/* @__PURE__ */t(l,{className:`${_({looping:N})}`,loop:Fe,ref:ve,autoplay:B,autoplayInterval:W,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,...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:ae.map((t,r)=>{const n=nt.includes(r),a=[J||"",w.item,n&&U?U:""].filter(Boolean).join(" ");/* @__PURE__ */
-return e(c,{className:a,"data-is-active":n?"true":void 0,"data-item-index":r,"aria-label":`Slide ${r+1} of ${oe}`,children:t},r)})}),
+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__ */
+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:ce,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:ce,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(d,{children:t=>/* @__PURE__ */e(m,{index:t.index,"data-index":t.index,"data-slide-tab":"true",tabIndex:-1},t.index)})}),B&&/* @__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(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};
 //# sourceMappingURL=Carousel.js.map