@alto-avios/alto-ui 5.2.0 → 5.4.0

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

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

package/dist/components/BannerSectionPlectrum/index.js

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

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

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

package/dist/components/Box/Box.d.ts

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { BackgroundVariants } from '../../utils/backgroundColor/backgroundColor';
-import { FlexVariants } from '../../utils/flex/flex';
+import { FlexBasisToken, FlexVariants } from '../../utils/flex/flex';
 import { BorderVariants } from '../../utils/border/border';
 import { PaddingVariants } from '../../utils/padding/padding';
+import { MarginVariants } from '../../utils/margin/margin';
 import { PositionVariants } from '../../utils/position/position';
 import { WithResponsiveProps } from '../../utils/breakpoint/responsiveSSR';
-export interface BoxBaseProps extends BackgroundVariants, FlexVariants, BorderVariants, PaddingVariants, PositionVariants, Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {
+export interface BoxBaseProps extends BackgroundVariants, Omit<FlexVariants, 'flexBasis'>, BorderVariants, PaddingVariants, MarginVariants, PositionVariants, Omit<React.HTMLAttributes<Element>, 'className' | 'style'> {
     /**
      * The HTML element to render the Box as.
      */
-    as?: 'div' | 'article' | 'aside' | 'nav' | 'section' | 'main' | 'span' | 'ul' | 'li';
+    as?: 'div' | 'article' | 'aside' | 'nav' | 'section' | 'main' | 'span' | 'ul' | 'ol' | 'li';
     /**
      * The width of the Box.
      * Accepts any valid CSS unit or "full"
@@ -66,9 +67,14 @@ export interface BoxBaseProps extends BackgroundVariants, FlexVariants, BorderVa
      */
     left?: string;
     /**
-     * Custom test identifier for testing purposes.
+     * Test identifier for testing purposes.
      * Defaults to "box" if not provided.
      */
+    'data-testid'?: string;
+    /**
+     * @deprecated Use `data-testid` instead.
+     * @ignore
+     */
     dataTestId?: string;
     /**
      * CSS overflow-wrap property.
@@ -78,8 +84,13 @@ export interface BoxBaseProps extends BackgroundVariants, FlexVariants, BorderVa
      * CSS word-break property.
      */
     wordBreak?: React.CSSProperties['wordBreak'];
+    /**
+     * **[Responsive]** Defines the default size of a flex item before remaining space is distributed.
+     * Accepts predefined flex-basis tokens and arbitrary CSS values (e.g. "200px", "30%", "clamp(200px, 50vw, 400px)").
+     */
+    flexBasis?: FlexBasisToken | string | number;
 }
-type ResponsivePropKeys = 'justifyContent' | 'flexDirection' | 'gap' | 'rowGap' | 'columnGap' | 'alignItems' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'padding' | 'paddingX' | 'paddingY' | 'minWidth' | 'maxWidth' | 'maxHeight';
+type ResponsivePropKeys = 'justifyContent' | 'flexDirection' | 'gap' | 'rowGap' | 'columnGap' | 'flexBasis' | 'alignItems' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'padding' | 'paddingX' | 'paddingY' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'margin' | 'marginX' | 'marginY' | 'minWidth' | 'maxWidth' | 'maxHeight';
 export type BoxProps = WithResponsiveProps<BoxBaseProps, ResponsivePropKeys>;
-export declare const Box: ({ children, as: Component, width, height, minHeight, zIndex, top, right, bottom, left, position, dataTestId, overflowWrap, wordBreak, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ children, as: Component, width, height, minHeight, zIndex, top, right, bottom, left, position, "data-testid": dataTestIdNative, dataTestId: dataTestIdLegacy, overflowWrap, wordBreak, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
 export default Box;

package/dist/components/Box/Box.js

@@ -1,3 +1,3 @@
-import{jsx as o}from"react/jsx-runtime";import{backgroundColorVariants as i}from"../../utils/backgroundColor/backgroundColor.js";import{f as r,a as t}from"../../flex-BJOhaXnU.js";import{p as d,a as e}from"../../padding-nClUzhWp.js";import{borderVariants as a}from"../../utils/border/border.js";import{positionVariants as n}from"../../utils/position/position.js";import{getBaseValueOrUndefined as p,generateResponsiveClasses as l}from"../../utils/breakpoint/responsiveSSR.js";import{responsiveToCssVars as g}from"../../utils/breakpoint/responsiveToCssVars.js";import '../../assets/Box.css';const m={box:"_box_n638f_1"},s=l(t),f=l(e),h=({children:t,as:e="div",width:l,height:h,minHeight:b,zIndex:x,top:u,right:W,bottom:c,left:C,position:v,dataTestId:w="box",overflowWrap:j,wordBreak:B,...k})=>{const T=p(k.justifyContent),R=p(k.flexDirection),y=p(k.gap),G=p(k.rowGap),L=p(k.columnGap),I=p(k.alignItems),H=p(k.display),S=p(k.flexWrap),D=p(k.flexGrow),P=p(k.flexShrink),X=p(k.paddingTop),Y=p(k.paddingRight),_=p(k.paddingBottom),z=p(k.paddingLeft),N=p(k.padding),V=p(k.paddingX),q=p(k.paddingY),A=g(k.maxWidth,{varPrefix:"--box-max-width",normalise:o=>"pageWidth"===o?"var(--alto-section-container-max-width)":o}),E=g(k.maxHeight,{varPrefix:"--box-max-height",normalise:o=>o}),F=g(k.minWidth,{varPrefix:"--box-min-width",normalise:o=>o}),J=r({display:H,justifyContent:T,flexDirection:R,gap:y,rowGap:G,columnGap:L,alignItems:I,flexWrap:S,flexGrow:D,flexShrink:P}),K=d({paddingTop:X,paddingRight:Y,paddingBottom:_,paddingLeft:z,padding:N,paddingX:V,paddingY:q}),M=s(k.justifyContent,"flex-justify-content"),O=s(k.flexDirection,"flex-direction"),Q=s(k.gap,"flex-gap"),U=s(k.rowGap,"flex-row-gap"),Z=s(k.columnGap,"flex-column-gap"),$=s(k.alignItems,"flex-align-items"),oo=f(k.paddingTop,"padding-top"),io=f(k.paddingRight,"padding-right"),ro=f(k.paddingBottom,"padding-bottom"),to=f(k.paddingLeft,"padding-left"),eo=f(k.padding,"padding"),ao=f(k.paddingX,"padding-x"),no=f(k.paddingY,"padding-y"),po=k?.borderWidth||void 0===k.borderColour||"none"===k.borderColour?k.borderWidth:"sm",lo=k?.borderTopWidth||void 0===k.borderTopColour||"none"===k.borderTopColour?k.borderTopWidth:"sm",go=k?.borderRightWidth||void 0===k.borderRightColour||"none"===k.borderRightColour?k.borderRightWidth:"sm",mo=k?.borderBottomWidth||void 0===k.borderBottomColour||"none"===k.borderBottomColour?k.borderBottomWidth:"sm",so=k?.borderLeftWidth||void 0===k.borderLeftColour||"none"===k.borderLeftColour?k.borderLeftWidth:"sm",fo={width:"full"===l?"100%":l,height:"full"===h?"100%":h,minHeight:b,zIndex:x,top:u,right:W,bottom:c,left:C,...A,...F,...E,overflow:k.maxHeight||k.maxWidth?"auto":void 0,overflowWrap:j,wordBreak:B};/* @__PURE__ */
-return o(e,{className:[m.box,a({...k,borderWidth:po,borderTopWidth:lo,borderRightWidth:go,borderBottomWidth:mo,borderLeftWidth:so}),J,K,i({backgroundColor:k.backgroundColor,...k}),n({position:v}),...M,...O,...Q,...U,...Z,...$,...oo,...io,...ro,...to,...eo,...ao,...no].filter(Boolean).join(" "),style:fo,"data-testid":w,children:t})};export{h as Box,h as default};
+import{jsx as o}from"react/jsx-runtime";import{backgroundColorVariants as i}from"../../utils/backgroundColor/backgroundColor.js";import{f as r,i as t,a as d,r as a}from"../../flex-BfhdHBb6.js";import{p as e,a as n}from"../../padding-nClUzhWp.js";import{m as g,a as m}from"../../margin-CCJx_ENX.js";import{borderVariants as p}from"../../utils/border/border.js";import{positionVariants as l}from"../../utils/position/position.js";import{getBaseValueOrUndefined as s,generateResponsiveClasses as f}from"../../utils/breakpoint/responsiveSSR.js";import{responsiveToCssVars as h}from"../../utils/breakpoint/responsiveToCssVars.js";import '../../assets/Box.css';const b={box:"_box_sckl4_1"},x=f(d),u=f(n),c=f(m),W=({children:d,as:n="div",width:m,height:f,minHeight:W,zIndex:v,top:C,right:B,bottom:w,left:j,position:T,"data-testid":R,dataTestId:k="box",overflowWrap:L,wordBreak:y,...G})=>{const I=s(G.justifyContent),X=s(G.flexDirection),Y=s(G.gap),H=s(G.rowGap),P=s(G.columnGap),S=s(G.alignItems),D=s(G.display),_=s(G.flexWrap),z=s(G.flexGrow),N=s(G.flexShrink),V=s(G.flexBasis),q=s(G.paddingTop),A=s(G.paddingRight),E=s(G.paddingBottom),F=s(G.paddingLeft),J=s(G.padding),K=s(G.paddingX),M=s(G.paddingY),O=s(G.marginTop),Q=s(G.marginRight),U=s(G.marginBottom),Z=s(G.marginLeft),$=s(G.margin),oo=s(G.marginX),io=s(G.marginY),ro=h(G.maxWidth,{varPrefix:"--box-max-width",normalise:o=>"pageWidth"===o?"var(--alto-section-container-max-width)":o}),to=h(G.maxHeight,{varPrefix:"--box-max-height",normalise:o=>o}),ao=h(G.minWidth,{varPrefix:"--box-min-width",normalise:o=>o}),eo=h(G.flexBasis,{varPrefix:"--box-flex-basis",normalise:o=>a(o)}),no=r({display:D,justifyContent:I,flexDirection:X,gap:Y,rowGap:H,columnGap:P,alignItems:S,flexWrap:_,flexGrow:z,flexShrink:N,flexBasis:t(V)?V:void 0}),go=e({paddingTop:q,paddingRight:A,paddingBottom:E,paddingLeft:F,padding:J,paddingX:K,paddingY:M}),mo=g({marginTop:O,marginRight:Q,marginBottom:U,marginLeft:Z,margin:$,marginX:oo,marginY:io}),po=x(G.justifyContent,"flex-justify-content"),lo=x(G.flexDirection,"flex-direction"),so=x(G.gap,"flex-gap"),fo=x(G.rowGap,"flex-row-gap"),ho=x(G.columnGap,"flex-column-gap"),bo=x(G.alignItems,"flex-align-items"),xo=u(G.paddingTop,"padding-top"),uo=u(G.paddingRight,"padding-right"),co=u(G.paddingBottom,"padding-bottom"),Wo=u(G.paddingLeft,"padding-left"),vo=u(G.padding,"padding"),Co=u(G.paddingX,"padding-x"),Bo=u(G.paddingY,"padding-y"),wo=c(G.marginTop,"margin-top"),jo=c(G.marginRight,"margin-right"),To=c(G.marginBottom,"margin-bottom"),Ro=c(G.marginLeft,"margin-left"),ko=c(G.margin,"margin"),Lo=c(G.marginX,"margin-x"),yo=c(G.marginY,"margin-y"),Go=G?.borderWidth||void 0===G.borderColour||"none"===G.borderColour?G.borderWidth:"sm",Io=G?.borderTopWidth||void 0===G.borderTopColour||"none"===G.borderTopColour?G.borderTopWidth:"sm",Xo=G?.borderRightWidth||void 0===G.borderRightColour||"none"===G.borderRightColour?G.borderRightWidth:"sm",Yo=G?.borderBottomWidth||void 0===G.borderBottomColour||"none"===G.borderBottomColour?G.borderBottomWidth:"sm",Ho=G?.borderLeftWidth||void 0===G.borderLeftColour||"none"===G.borderLeftColour?G.borderLeftWidth:"sm",Po={width:"full"===m?"100%":m,height:"full"===f?"100%":f,minHeight:W,zIndex:v,top:C,right:B,bottom:w,left:j,...ro,...ao,...to,...eo,overflow:G.maxHeight||G.maxWidth?"auto":void 0,overflowWrap:L,wordBreak:y};/* @__PURE__ */
+return o(n,{className:[b.box,p({...G,borderWidth:Go,borderTopWidth:Io,borderRightWidth:Xo,borderBottomWidth:Yo,borderLeftWidth:Ho}),no,go,mo,i({backgroundColor:G.backgroundColor,...G}),l({position:T}),...po,...lo,...so,...fo,...ho,...bo,...xo,...uo,...co,...Wo,...vo,...Co,...Bo,...wo,...jo,...To,...Ro,...ko,...Lo,...yo].filter(Boolean).join(" "),style:Po,"data-testid":R??k,children:d})};export{W as Box,W as default};
 //# sourceMappingURL=Box.js.map

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 { flexVariants, type FlexVariants } from '../../utils/flex/flex';\nimport flexStyles from '../../utils/flex/flex.module.css';\nimport paddingStyles from '../../utils/padding/padding.module.css';\nimport { borderVariants, type BorderVariants } from '../../utils/border/border';\nimport {\n  paddingVariants,\n  type PaddingVariants,\n} from '../../utils/padding/padding';\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);\n\nexport interface BoxBaseProps\n  extends BackgroundVariants,\n    FlexVariants,\n    BorderVariants,\n    PaddingVariants,\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    | '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   * Custom test identifier for testing purposes.\n   * Defaults to \"box\" if not provided.\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\ntype ResponsivePropKeys =\n  | 'justifyContent'\n  | 'flexDirection'\n  | 'gap'\n  | 'rowGap'\n  | 'columnGap'\n  | 'alignItems'\n  | 'paddingTop'\n  | 'paddingRight'\n  | 'paddingBottom'\n  | 'paddingLeft'\n  | 'padding'\n  | 'paddingX'\n  | 'paddingY'\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  dataTestId = '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 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\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 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  });\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 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  // 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    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        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      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={stylesProp}\n      data-testid={dataTestId}\n    >\n      {children}\n    </Component>\n  );\n};\n\nexport default Box;\n"],"names":["getResponsiveClassesFlex","generateResponsiveClasses","flexStyles","getResponsiveClassesPadding","paddingStyles","Box","children","as","Component","width","height","minHeight","zIndex","top","right","bottom","left","position","dataTestId","overflowWrap","wordBreak","props","baseJustifyContent","getBaseValueOrUndefined","justifyContent","baseFlexDirection","flexDirection","baseGap","gap","baseRowGap","rowGap","baseColumnGap","columnGap","baseAlignItems","alignItems","baseDisplay","display","baseFlexWrap","flexWrap","baseFlexGrow","flexGrow","baseFlexShrink","flexShrink","basePaddingTop","paddingTop","basePaddingRight","paddingRight","basePaddingBottom","paddingBottom","basePaddingLeft","paddingLeft","basePadding","padding","basePaddingX","paddingX","basePaddingY","paddingY","maxWidthVars","responsiveToCssVars","maxWidth","varPrefix","normalise","value","maxHeightVars","maxHeight","minWidthVars","minWidth","flexBaseClass","flexVariants","paddingBaseClass","paddingVariants","justifyContentResponsiveClasses","flexDirectionResponsiveClasses","gapResponsiveClasses","rowGapResponsiveClasses","columnGapResponsiveClasses","alignItemsResponsiveClasses","paddingTopResponsiveClasses","paddingRightResponsiveClasses","paddingBottomResponsiveClasses","paddingLeftResponsiveClasses","paddingResponsiveClasses","paddingXResponsiveClasses","paddingYResponsiveClasses","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":"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"}

package/dist/components/BoxLink/BoxLink.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+type OmittedAnchorProps = 'className' | 'style';
+export interface BoxLinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, OmittedAnchorProps> {
+    /**
+     * The content to render inside the BoxLink.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the BoxLink is in a selected state.
+     * @default false
+     */
+    isSelected?: boolean;
+    /**
+     * Whether the BoxLink is disabled.
+     * Prevents navigation, removes href, and reflects aria-disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The focus ring style.
+     * Use 'white' when BoxLink is placed on a dark or coloured background.
+     * @default 'default'
+     */
+    focusStyle?: 'default' | 'white';
+    /**
+     * Whether headings (h2–h6) inside the BoxLink should be underlined on hover.
+     * @default false
+     */
+    underlineHeadingOnHover?: boolean;
+    /**
+     * Controls which layer handles CSS styling for interactive states.
+     *
+     * - 'default' — BoxLink applies all styles including hover, focus, pressed and selected
+     * - 'custom'  — BoxLink strips back to inline-block only, children own
+     *               their own styles via the `useBoxLink` hook
+     *
+     * @default 'default'
+     */
+    styleVariant?: 'default' | 'custom';
+    /**
+     * The target attribute for the link.
+     * @default '_self'
+     */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /**
+     * Specify custom screen reader text for external links.
+     * @default 'opens in a new tab'
+     */
+    externalLinkScreenReaderText?: string;
+    /**
+     * Allows pointer drag gestures to bubble through the link wrapper.
+     * Useful when BoxLink is inside draggable containers like carousels.
+     * @default false
+     * @internal
+     */
+    allowDragGestures?: boolean;
+}
+export declare const BoxLink: React.ForwardRefExoticComponent<BoxLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export default BoxLink;

package/dist/components/BoxLink/BoxLink.js

@@ -0,0 +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};
+//# sourceMappingURL=BoxLink.js.map

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

@@ -0,0 +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"}

package/dist/components/BoxLink/BoxLinkContext.d.ts

@@ -0,0 +1,24 @@
+export interface BoxLinkContextValue {
+    isHovered: boolean;
+    isPressed: boolean;
+    isFocusVisible: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+}
+export declare const BoxLinkContext: import('react').Context<BoxLinkContextValue>;
+/**
+ * Consume the BoxLink interaction state within a child component.
+ *
+ * Returns `isHovered`, `isPressed`, `isFocusVisible`, `isDisabled` and
+ * `isSelected` from the nearest parent `BoxLink`. If no `BoxLink` parent
+ * exists, all values default to `false` so the component is safe standalone.
+ *
+ * @example
+ * const { isHovered, isPressed, isDisabled } = useBoxLink();
+ *
+ * @note
+ * If using Next.js, any component calling this hook requires client-side
+ * rendering. Follow the Alto UI SSR setup guide and import via your
+ * `alto-avios.ts` wrapper file.
+ */
+export declare const useBoxLink: () => BoxLinkContextValue;

package/dist/components/BoxLink/BoxLinkContext.js

@@ -0,0 +1,2 @@
+import{createContext as e,useContext as s}from"react";const i=e({isHovered:!1,isPressed:!1,isFocusVisible:!1,isDisabled:!1,isSelected:!1}),o=()=>s(i);export{i as BoxLinkContext,o as useBoxLink};
+//# sourceMappingURL=BoxLinkContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxLinkContext.js","sources":["../../../src/components/BoxLink/BoxLinkContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface BoxLinkContextValue {\n  isHovered: boolean;\n  isPressed: boolean;\n  isFocusVisible: boolean;\n  isDisabled: boolean;\n  isSelected: boolean;\n}\n\nconst defaultContextValue: BoxLinkContextValue = {\n  isHovered: false,\n  isPressed: false,\n  isFocusVisible: false,\n  isDisabled: false,\n  isSelected: false,\n};\n\nexport const BoxLinkContext =\n  createContext<BoxLinkContextValue>(defaultContextValue);\n\n/**\n * Consume the BoxLink interaction state within a child component.\n *\n * Returns `isHovered`, `isPressed`, `isFocusVisible`, `isDisabled` and\n * `isSelected` from the nearest parent `BoxLink`. If no `BoxLink` parent\n * exists, all values default to `false` so the component is safe standalone.\n *\n * @example\n * const { isHovered, isPressed, isDisabled } = useBoxLink();\n *\n * @note\n * If using Next.js, any component calling this hook requires client-side\n * rendering. Follow the Alto UI SSR setup guide and import via your\n * `alto-avios.ts` wrapper file.\n */\nexport const useBoxLink = (): BoxLinkContextValue => useContext(BoxLinkContext);\n"],"names":["BoxLinkContext","createContext","isHovered","isPressed","isFocusVisible","isDisabled","isSelected","useBoxLink","useContext"],"mappings":"sDAUA,MAQaA,EACXC,EAT+C,CAC/CC,WAAW,EACXC,WAAW,EACXC,gBAAgB,EAChBC,YAAY,EACZC,YAAY,IAqBDC,EAAa,IAA2BC,EAAWR"}

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

@@ -0,0 +1,4 @@
+export { default } from './BoxLink';
+export type * from './BoxLink';
+export { useBoxLink, BoxLinkContext } from './BoxLinkContext';
+export type * from './BoxLinkContext';

package/dist/components/BoxLink/index.js

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

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

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

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

@@ -89,7 +89,7 @@ export type ButtonProps<T extends ElementType = 'button'> = WithResponsiveProps<
 export type DefaultButtonProps = ButtonProps<'button'>;
 export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonBaseProps<ElementType>, ResponsivePropKeys> & {
     size?: import('../../utils/breakpoint/responsiveSSR').ResponsiveValue<NonNullable<ButtonSize | undefined>> | undefined;
-    fullWidth?: import('../../utils/breakpoint/responsiveSSR').ResponsiveValue<NonNullable<boolean | undefined>> | undefined;
     textAlign?: import('../../utils/breakpoint/responsiveSSR').ResponsiveValue<NonNullable<ButtonTextAlignement | undefined>> | undefined;
+    fullWidth?: import('../../utils/breakpoint/responsiveSSR').ResponsiveValue<NonNullable<boolean | undefined>> | undefined;
 } & import('react').RefAttributes<any>>;
 export default Button;

package/dist/components/CalloutBanner/CalloutBanner.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { default as IconButton } from '../IconButton';
-type StyleVariant = 'critical' | 'success' | 'information' | 'neutral';
+type StyleVariant = 'critical' | 'success' | 'information' | 'neutral' | 'accent';
 type DismissButtonProps = Omit<React.ComponentProps<typeof IconButton>, 'onPress' | 'iconProps' | 'size' | 'styleVariant' | 'emphasis' | 'tooltipLabel'>;
 export interface CalloutBannerBaseProps {
     /**
@@ -23,6 +23,7 @@ export interface CalloutBannerBaseProps {
      * - 'success' for confirmations, achievements
      * - 'information' for For general updates, tips
      * - 'neutral' for non-critical messages, guidance
+     * - 'accent' for any brand specific promotions or callouts
      * @default 'critical'
      */
     styleVariant?: StyleVariant;

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -1,10 +1,10 @@
-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_8kmdu_1",calloutBanner__icon:"_calloutBanner__icon_8kmdu_12","calloutBanner__meta-title":"_calloutBanner__meta-title_8kmdu_21","calloutBanner__meta-label":"_calloutBanner__meta-label_8kmdu_19",calloutBanner__start:"_calloutBanner__start_8kmdu_17",calloutBanner__end:"_calloutBanner__end_8kmdu_38",calloutBanner__dismiss:"_calloutBanner__dismiss_8kmdu_45",calloutBanner__meta:"_calloutBanner__meta_8kmdu_19","calloutBanner__meta-content":"_calloutBanner__meta-content_8kmdu_62","calloutBanner__header--row":"_calloutBanner__header--row_8kmdu_74","calloutBanner__meta-top":"_calloutBanner__meta-top_8kmdu_79","calloutBanner__custom-asset":"_calloutBanner__custom-asset_8kmdu_89","calloutBanner__meta-description":"_calloutBanner__meta-description_8kmdu_103","calloutBanner__severity-label":"_calloutBanner__severity-label_8kmdu_108","calloutBanner__default-asset--center":"_calloutBanner__default-asset--center_8kmdu_119","calloutBanner--critical":"_calloutBanner--critical_8kmdu_125","calloutBanner--primary":"_calloutBanner--primary_8kmdu_129","calloutBanner--secondary":"_calloutBanner--secondary_8kmdu_133","calloutBanner--tertiary":"_calloutBanner--tertiary_8kmdu_142","calloutBanner--success":"_calloutBanner--success_8kmdu_151","calloutBanner--information":"_calloutBanner--information_8kmdu_177","calloutBanner--neutral":"_calloutBanner--neutral_8kmdu_203"},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"]},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"}},_=({title:t,description:_,label:u,children:m,styleVariant:d="critical",emphasis:B="primary",headingLevel:h="h3",dismissButtonTooltipLabel:y,onDismiss:p,customAsset:f,hideIllustration:v=!1,alignButtons:b="left",headerLayout:k="column",severityLabel:N,role:L,dismissButtonProps:x={"aria-label":"Dismiss banner"},...I})=>{const V="function"==typeof p,{icon:g,severityLabel:w,role:j}=i[d],P=h,z=l.useId(),A=l.useId(),S=N??w,C=L||j,D=l.Children.toArray(m),E=D.find(a=>l.isValidElement(a)&&a.type===s),$=D.filter(a=>!(l.isValidElement(a)&&a.type===s)),q=!_;/* @__PURE__ */
-return a("div",{className:o({emphasis:B,styleVariant:d}),role:C,"aria-labelledby":z,"aria-describedby":_?A:void 0,...I,children:[
-/* @__PURE__ */a("div",{className:c.calloutBanner__start,children:[!v&&/* @__PURE__ */e("div",f?{className:c["calloutBanner__custom-asset"],children:f}:{className:q?c["calloutBanner__default-asset--center"]:void 0,children:/* @__PURE__ */e(n,{iconName:g,iconPrefix:"fas",className:c.calloutBanner__icon,iconSize:"1.25x",padding:"roomy"})}),
-/* @__PURE__ */a("div",{className:c.calloutBanner__meta,children:[V&&/* @__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,...x})}),
-/* @__PURE__ */a("div",{className:[c["calloutBanner__meta-content"],"right"===b?c["calloutBanner__meta-right"]:"","row"===k?c["calloutBanner__header--row"]:""].filter(Boolean).join(" "),children:[
-/* @__PURE__ */e("div",{children:/* @__PURE__ */a("div",{className:`${c["calloutBanner__meta-top"]} ${V?c["calloutBanner__meta-top-dismiss"]:""}`,children:[
-/* @__PURE__ */a(P,{id:z,className:c["calloutBanner__meta-title"],children:[
-/* @__PURE__ */a("span",{className:c["calloutBanner__severity-label"],dir:"auto",children:[S,S?": ":""]}),
-/* @__PURE__ */e("bdi",{dir:"auto",children:t})]}),_&&/* @__PURE__ */e("p",{id:A,className:c["calloutBanner__meta-description"],children:_||null})]})}),u&&/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:u}),E&&/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:E.props.children})]})]})]}),$.length>0&&/* @__PURE__ */e("div",{className:c.calloutBanner__end,children:$})]})},s=({children:a})=>/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:a});_.Action=s;export{_ as CalloutBanner,s as CalloutBannerAction,_ as default};
+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__ */
+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__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:[
+/* @__PURE__ */a("span",{className:c["calloutBanner__severity-label"],dir:"auto",children:[k,k?": ":""]}),
+/* @__PURE__ */e("bdi",{dir:"auto",children:t})]}),_&&/* @__PURE__ */e("p",{id:S,className:c["calloutBanner__meta-description"],children:_||null})]})}),u&&/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:u}),E&&/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:E.props.children})]})]})]}),$.length>0&&/* @__PURE__ */e("div",{className:c.calloutBanner__end,children:$})]})},s=({children:a})=>/* @__PURE__ */e("div",{className:c["calloutBanner__meta-label"],children:a});_.Action=s;export{_ as CalloutBanner,s as CalloutBannerAction,_ as default};
 //# sourceMappingURL=CalloutBanner.js.map

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    },\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 = 'critical' | 'success' | 'information' | 'neutral';\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   * @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} 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","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=\"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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"}

package/dist/components/Carousel/Carousel.d.ts

@@ -159,6 +159,11 @@ export interface CarouselBaseProps {
      * Use this to style the wrapper div around each carousel item
      */
     itemWrapperClassName?: string;
+    /**
+     * Class name for the scroll container
+     * Use this to customize the grid/scroll layout of carousel items
+     */
+    scrollerClassName?: string;
     /**
      * Class name for the currently active/visible carousel item
      * This class is applied to the item that corresponds to the current page
@@ -176,8 +181,31 @@ export interface CarouselBaseProps {
      * Callback fired when the autoplay button is pressed
      */
     onAutoplayPress?: (state: 'play' | 'pause') => void;
+    /**
+     * Imperative controls ref for driving carousel navigation from external UI.
+     */
+    controlsRef?: React.MutableRefObject<CarouselControls | null>;
+    /**
+     * Callback fired when carousel navigation state changes.
+     */
+    onNavigationStateChange?: (state: CarouselNavigationState) => void;
+}
+export interface CarouselControls {
+    prev: () => void;
+    next: () => void;
+    goToSlide: (index: number) => void;
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    currentPage: number;
+    totalPages: number;
+}
+export interface CarouselNavigationState {
+    canGoPrev: boolean;
+    canGoNext: boolean;
+    currentPage: number;
+    totalPages: number;
 }
 type ResponsiveKeys = 'itemsPerPage' | 'spaceBetweenItems' | 'scrollPadding' | 'showArrowsOnHover' | 'arrowSize' | 'hideDots';
 export type CarouselProps = WithResponsive<CarouselBaseProps, ResponsiveKeys>;
-export declare const Carousel: ({ children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, looping, itemsPerPage, spaceBetweenItems, scrollPadding, iconType, arrowStyleVariant, arrowSize, hideDisabledArrow, showArrowsOnHover, focusStyle, dotsSize, dotsVariant, hideDots, autoPlay, autoPlayInterval, autoPlayStyleVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, prevArrowClassName, nextArrowClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, itemWrapperClassName, activeItemClassName, onArrowPress, onDotPress, onAutoplayPress, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Carousel: ({ children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, looping, itemsPerPage, spaceBetweenItems, scrollPadding, iconType, arrowStyleVariant, arrowSize, hideDisabledArrow, showArrowsOnHover, focusStyle, dotsSize, dotsVariant, hideDots, autoPlay, autoPlayInterval, autoPlayStyleVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, prevArrowClassName, nextArrowClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, itemWrapperClassName, scrollerClassName, activeItemClassName, onArrowPress, onDotPress, onAutoplayPress, controlsRef, onNavigationStateChange, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
 export default Carousel;