@bspk/ui 1.2.0 → 1.3.1

package/dist/components/Accordion/accordion.css.js

@@ -3,75 +3,78 @@
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=accordion] {
   width: 100%;
+  padding: var(--spacing-sizing-02);
 }
-[data-bspk=accordion] [data-accordion-section] {
+[data-bspk=accordion] > section {
   --border-bottom-color: var(--stroke-neutral-base);
   display: flex;
   flex-direction: column;
   justify-content: center;
+  color: var(--foreground-neutral-on-surface);
 }
-[data-bspk=accordion] [data-accordion-section][data-divider] [data-not-a-divider-divider] {
-  display: block;
-  height: 1px;
-  width: calc(100% - var(--spacing-sizing-04));
-  margin: -1px var(--spacing-sizing-02) 0;
-  background-color: var(--border-bottom-color);
-}
-[data-bspk=accordion] [data-accordion-section][data-disabled] {
+[data-bspk=accordion] > section[data-disabled] {
   --border-bottom-color: var(--stroke-neutral-disabled-light);
   background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] {
+[data-bspk=accordion] > section button[data-header] {
   display: flex;
   flex-direction: row;
   align-items: center;
   background: none;
   color: inherit;
   border: none;
-  padding: var(--spacing-sizing-02);
-  gap: var(--spacing-sizing-04);
+  padding: 0 var(--spacing-sizing-02);
+  gap: var(--spacing-sizing-02);
   font: inherit;
-  outline: inherit;
   cursor: pointer;
+  outline: none;
+  min-height: var(--spacing-sizing-12);
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-header-body] {
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  flex: 1;
-  gap: var(--spacing-sizing-03);
-}
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] {
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex: 1;
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header] [data-accordion-title-wrapper] [data-bspk=txt] {
-  text-align: left;
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-title] {
+  font: var(--labels-base);
+}
+[data-bspk=accordion] > section button[data-header] [data-title-subtitle] [data-subtitle] {
+  font: var(--body-x-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):hover {
+[data-bspk=accordion] > section button[data-header] [data-arrow] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--spacing-sizing-02);
+}
+[data-bspk=accordion] > section button[data-header]:not(:disabled):hover {
   background-image: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):active {
+[data-bspk=accordion] > section button[data-header]:not(:disabled):active {
   background-image: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:not(:disabled):focus-visible {
-  outline: 2px solid var(--stroke-neutral-focus);
-  border-color: var(--stroke-neutral-focus);
-  margin-bottom: 1px;
-}
-[data-bspk=accordion] [data-accordion-section] [data-accordion-header]:disabled {
+[data-bspk=accordion] > section button[data-header]:disabled {
   cursor: not-allowed;
   color: var(--foreground-neutral-disabled-on-surface);
   border-color: var(--stroke-neutral-disabled-light);
 }
-[data-bspk=accordion] [data-accordion-section] [data-accordion-content] {
+[data-bspk=accordion] > section:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+  margin-bottom: 1px;
+}
+[data-bspk=accordion] > section [data-content] {
   padding: var(--spacing-sizing-01) var(--spacing-sizing-02) var(--spacing-sizing-04);
 }
-[data-bspk=accordion] [data-accordion-section] [data-not-a-divider-divider] {
-  display: none;
+[data-bspk=accordion] [data-divider] {
+  display: block;
+  height: 1px;
+  width: calc(100% - var(--spacing-sizing-04));
+  margin: -1px var(--spacing-sizing-02) 0;
+  background-color: var(--border-bottom-color);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
+import './avatar.scss';
 import { CommonProps } from '-/types/common';
 import { ColorVariant } from '-/utils/colorVariants';
-import './avatar.scss';
 export type SizeVariant = 'large' | 'medium' | 'small' | 'x-large' | 'x-small' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'xxxxx-large';
 export type AvatarProps = CommonProps<'disabled'> & {
     /**
@@ -35,7 +35,9 @@ export type AvatarProps = CommonProps<'disabled'> & {
      */
     initials?: string;
     /**
-     * Whether to show the icon in the avatar.
+     * Whether to show the icon in the avatar instead of the initials.
+     *
+     * If an image is provided, the image will be shown instead of the icon.
      *
      * @default true
      */
@@ -43,16 +45,18 @@ export type AvatarProps = CommonProps<'disabled'> & {
     /**
      * The url to the image to display in the avatar.
      *
+     * When provided the image will be displayed instead of the icon or initials.
+     *
      * @example
      *     /profile.jpg
      */
     image?: string;
     /**
-     * Whether to show the represented user's name as a tooltip.
+     * Whether to hide the represented user's name as a tooltip.
      *
-     * @default true
+     * @default false
      */
-    showTooltip?: boolean;
+    hideTooltip?: boolean;
     /**
      * The function to call when the avatar is clicked.
      *
@@ -86,5 +90,5 @@ export type AvatarProps = CommonProps<'disabled'> & {
  * @name Avatar
  * @phase UXReview
  */
-export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, showTooltip, onClick, disabled, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Avatar({ initials: initialsProp, color, size, showIcon, image, name: ariaLabel, hideTooltip, onClick, disabled, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Avatar/Avatar.js

@@ -1,13 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import './avatar.css.js';
 import { SvgPerson } from '@bspk/icons/Person';
 import { useMemo } from 'react';
 import { Tooltip } from '../Tooltip';
-import './avatar.css.js';
-const DEFAULT = {
-    size: 'small',
-    color: 'grey',
-    showTooltip: true,
-};
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, or image.
  *
@@ -34,7 +29,7 @@ const DEFAULT = {
  * @name Avatar
  * @phase UXReview
  */
-export function Avatar({ initials: initialsProp, color = DEFAULT.color, size = DEFAULT.size, showIcon, image, name: ariaLabel, showTooltip = DEFAULT.showTooltip, onClick, disabled, ...props }) {
+export function Avatar({ initials: initialsProp, color = 'grey', size = 'small', showIcon, image, name: ariaLabel, hideTooltip = false, onClick, disabled, ...props }) {
     const children = useMemo(() => {
         if (image)
             return _jsx("img", { alt: ariaLabel, "aria-hidden": true, src: image });
@@ -49,12 +44,12 @@ export function Avatar({ initials: initialsProp, color = DEFAULT.color, size = D
                 .join('')
                 .toUpperCase();
         if (initials)
-            return _jsx("span", { "data-initials": true, children: initials.slice(0, 2) });
+            return (_jsx("span", { "aria-hidden": true, "data-initials": true, children: initials.slice(0, 2) }));
         return null;
     }, [ariaLabel, showIcon, image, initialsProp]);
     if (!children)
         return null;
-    const avatar = (triggerProps) => (_jsx("button", { ...triggerProps, "aria-describedby": triggerProps?.['aria-describedby'] || ariaLabel, "aria-label": ariaLabel, "data-bspk": "avatar", "data-color": color, "data-size": size, disabled: disabled || undefined, onClick: disabled ? undefined : onClick, tabIndex: 0, ...props, children: children }));
-    return showTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar();
+    const avatar = (triggerProps) => (_jsx("div", { ...props, ...triggerProps, "aria-disabled": disabled || undefined, "aria-label": onClick ? ariaLabel : undefined, "aria-labelledby": onClick ? triggerProps['aria-labelledby'] : undefined, "aria-roledescription": "person", "data-bspk": "avatar", "data-color": color, "data-size": size, onClickCapture: disabled ? undefined : onClick, role: onClick ? 'button' : '', tabIndex: onClick && !disabled ? 0 : undefined, children: children }));
+    return !hideTooltip ? _jsx(Tooltip, { label: ariaLabel, children: avatar }) : avatar({});
 }
 //# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAIpE,OAAO,eAAe,CAAC;AAEvB,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAwEX;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,EACjC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACE;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEzE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CAAC,YAAkC,EAAE,EAAE,CAAC,CACnD,oBACQ,YAAY,sBACE,YAAY,EAAE,CAAC,kBAAkB,CAAC,IAAI,SAAS,gBACrD,SAAS,eACX,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACvC,QAAQ,EAAE,CAAC,KACP,KAAK,YAER,QAAQ,GACJ,CACZ,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;AAClF,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AA8EpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,KAAK,EACnB,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACE;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEzE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,mCAClB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAClB,CACV,CAAC;QAEN,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE/C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,iBACQ,KAAK,KACL,YAAY,mBACD,QAAQ,IAAI,SAAS,gBACxB,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,qBAC1B,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,0BACjD,QAAQ,eACnB,QAAQ,gBACN,KAAK,eACN,IAAI,EACf,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC9C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAC7B,QAAQ,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,YAE7C,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AACrF,CAAC"}

package/dist/components/Avatar/AvatarExample.d.ts

@@ -1,3 +1,4 @@
 import { AvatarProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<AvatarProps>[];
 export declare const AvatarExample: ComponentExample<AvatarProps>;

package/dist/components/Avatar/AvatarExample.js

@@ -1,48 +1,49 @@
-export const AvatarExample = {
-    presets: [
-        {
-            label: 'Name Only',
-            propState: {
-                name: 'Andre Giant',
-                image: undefined, // Ensure no image is set
-                initials: undefined, // Ensure no initials are set
-                showIcon: false,
-            },
+export const presets = [
+    {
+        label: 'Name Only',
+        propState: {
+            name: 'Andre Giant',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
         },
-        {
-            label: 'One Word Name',
-            propState: {
-                name: 'Andre',
-                image: undefined, // Ensure no image is set
-                initials: undefined, // Ensure no initials are set
-                showIcon: false,
-            },
+    },
+    {
+        label: 'One Word Name',
+        propState: {
+            name: 'Andre',
+            image: undefined, // Ensure no image is set
+            initials: undefined, // Ensure no initials are set
+            showIcon: false,
         },
-        {
-            label: 'With Initials',
-            propState: {
-                name: 'Andre The Giant',
-                initials: 'AG',
-                image: undefined, // Ensure no image is set
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Initials',
+        propState: {
+            name: 'Andre The Giant',
+            initials: 'AG',
+            image: undefined, // Ensure no image is set
+            showIcon: false,
         },
-        {
-            label: 'With Icon',
-            propState: {
-                name: 'Andre Giant',
-                showIcon: true,
-                image: undefined, // Ensure no image is set
-            },
+    },
+    {
+        label: 'With Icon',
+        propState: {
+            name: 'Andre Giant',
+            showIcon: true,
+            image: undefined, // Ensure no image is set
         },
-        {
-            label: 'With Image',
-            propState: {
-                name: 'Andre Giant',
-                image: '/profile.jpg',
-                showIcon: false,
-            },
+    },
+    {
+        label: 'With Image',
+        propState: {
+            name: 'Andre Giant',
+            image: '/profile.jpg',
+            showIcon: false,
         },
-    ],
+    },
+];
+export const AvatarExample = {
+    presets,
 };
 //# sourceMappingURL=AvatarExample.js.map

package/dist/components/Avatar/AvatarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;gBAClD,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,IAAI,EAAE,iBAAiB;gBACvB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;gBAC3C,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,QAAQ,EAAE,IAAI;gBACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;aAC9C;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,IAAI,EAAE,aAAa;gBACnB,KAAK,EAAE,cAAc;gBACrB,QAAQ,EAAE,KAAK;aAClB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"AvatarExample.js","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,SAAS,EAAE,6BAA6B;YAClD,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,IAAI,EAAE,iBAAiB;YACvB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;YAC3C,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE,IAAI;YACd,KAAK,EAAE,SAAS,EAAE,yBAAyB;SAC9C;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,cAAc;YACrB,QAAQ,EAAE,KAAK;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;CACV,CAAC"}

package/dist/components/AvatarGroup/AvatarGroup.d.ts

@@ -1,5 +1,5 @@
-import { AvatarProps, SizeVariant } from '-/components/Avatar';
 import './avatar-group.scss';
+import { AvatarProps, SizeVariant } from '-/components/Avatar';
 export type AvatarItem = Pick<AvatarProps, 'color' | 'image' | 'initials' | 'name' | 'showIcon'>;
 export type AvatarGroupProps = {
     /**

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar } from '../Avatar';
 import './avatar-group.css.js';
+import { Avatar } from '../Avatar';
 /**
  * AvatarGroup component displays a group of avatars.
  *

package/dist/components/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AAEvE,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IACrF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC;IAErD,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,2BAAe,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,gCAClE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,oBACW,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,KAEnE,IAAI,EACR,IAAI,EAAE,IAAI,IAFL,KAAK,CAGZ,CACL,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA0CvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IACrF,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IACzC,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,OAAO,CAAC;IAErD,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,2BAAe,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,gCAClE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,oBACW,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,KAEnE,IAAI,EACR,IAAI,EAAE,IAAI,IAFL,KAAK,CAGZ,CACL,CAAC,EAED,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,gBAAY,OAAO,eAAY,IAAI,YAClE,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/AvatarGroup/AvatarGroupExample.d.ts

@@ -1,3 +1,4 @@
 import { AvatarGroupProps } from '.';
-import { ComponentExample } from '-/utils/demo';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<AvatarGroupProps>[];
 export declare const AvatarGroupExample: ComponentExample<AvatarGroupProps>;

package/dist/components/AvatarGroup/AvatarGroupExample.js

@@ -1,31 +1,37 @@
-export const AvatarGroupExample = {
-    presets: [
-        {
-            label: 'Stacked',
-            propState: {
-                items: [
-                    { name: 'Fezzik', image: '/profile.jpg' },
-                    { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
-                    { name: 'Miracle Max', initials: 'MM', showIcon: false, color: 'green' },
-                    { name: 'Princess Buttercup', showIcon: true, color: 'purple' },
-                ],
-                variant: 'stacked',
-            },
+import { COLOR_VARIANTS } from '../../utils/colorVariants';
+const BLUE = COLOR_VARIANTS[4];
+const GREEN = COLOR_VARIANTS[5];
+const GREY = COLOR_VARIANTS[0];
+const PURPLE = COLOR_VARIANTS[10];
+export const presets = [
+    {
+        label: 'Stacked',
+        propState: {
+            items: [
+                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
+                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
+                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+            ],
+            variant: 'stacked',
         },
-        {
-            label: 'Stacked + Overflow',
-            propState: {
-                items: [
-                    { name: 'Fezzik', image: '/profile.jpg' },
-                    { name: 'Inigo Montoya', initials: 'IM', color: 'blue' },
-                    { name: 'Miracle Max', initials: 'MM', showIcon: false, color: 'green' },
-                    { name: 'Westley Man In Black', initials: 'WB', color: 'grey' },
-                    { name: 'Princess Buttercup', showIcon: true, color: 'purple' },
-                ],
-                max: 3,
-                variant: 'stacked',
-            },
+    },
+    {
+        label: 'Stacked + Overflow',
+        propState: {
+            items: [
+                { name: 'Fezzik', image: '/profile.jpg' },
+                { name: 'Inigo Montoya', initials: 'IM', color: BLUE },
+                { name: 'Miracle Max', initials: 'MM', showIcon: false, color: GREEN },
+                { name: 'Westley Man In Black', initials: 'WB', color: GREY },
+                { name: 'Princess Buttercup', showIcon: true, color: PURPLE },
+            ],
+            max: 3,
+            variant: 'stacked',
         },
-    ],
+    },
+];
+export const AvatarGroupExample = {
+    presets,
 };
 //# sourceMappingURL=AvatarGroupExample.js.map

package/dist/components/AvatarGroup/AvatarGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,SAAS;YAChB,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;oBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBACxD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;oBACxE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;iBAClE;gBACD,OAAO,EAAE,SAAS;aACrB;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE;gBACP,KAAK,EAAE;oBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;oBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBACxD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;oBACxE,EAAE,IAAI,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;oBAC/D,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE;iBAClE;gBACD,GAAG,EAAE,CAAC;gBACN,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"AvatarGroupExample.js","sourceRoot":"","sources":["../../../src/components/AvatarGroup/AvatarGroupExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,KAAK,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAChC,MAAM,IAAI,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AAC/B,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,OAAO,GAA+B;IAC/C;QACI,KAAK,EAAE,SAAS;QAChB,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,OAAO,EAAE,SAAwC;SACpD;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE;gBACH,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE;gBACzC,EAAE,IAAI,EAAE,eAAe,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBACtD,EAAE,IAAI,EAAE,aAAa,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;gBACtE,EAAE,IAAI,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE;gBAC7D,EAAE,IAAI,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE;aAChE;YACD,GAAG,EAAE,CAAC;YACN,OAAO,EAAE,SAAwC;SACpD;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO;CACV,CAAC"}

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import './badge.scss';
+import { ReactNode } from 'react';
 export type BadgeProps = {
     /**
      * The content of the badge. If larger than 99, the badge will display '99+'.

package/dist/components/Badge/Badge.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { tryIntParse } from '../../utils/tryIntPsrse';
 import './badge.css.js';
+import { tryIntParse } from '../../utils/tryIntPsrse';
 /**
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *

package/dist/components/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,cAAc,CAAC;AA0CtB;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAc;IAC9G,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,OAAO,KAAK,KAAK,WAAW;QAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;IAE1D,MAAM,KAAK,GAAG,CACV,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,OAAO,gBACL,KAAK,eACN,IAAI,yBACM,aAAa,IAAI,SAAS,YAE9C,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACtD,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAGtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA0ClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAc;IAC9G,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,OAAO,KAAK,KAAK,WAAW;QAAE,OAAO,QAAQ,IAAI,IAAI,CAAC;IAE1D,MAAM,KAAK,GAAG,CACV,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,OAAO,gBACL,KAAK,eACN,IAAI,yBACM,aAAa,IAAI,SAAS,YAE9C,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACtD,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/components/BadgeDot/BadgeDot.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from 'react';
 import './badge-dot.scss';
+import { ReactNode } from 'react';
 type BadgeDotSize = 6 | 8 | 10 | 12;
 export type BadgeDotProps = {
     /**

package/dist/components/BadgeDot/BadgeDot.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cssWithVars } from '../../utils/cwv';
 import './badge-dot.css.js';
+import { cssWithVars } from '../../utils/cwv';
 const OUTLINE_WIDTHS = {
     6: 1,
     8: 2,

package/dist/components/BadgeDot/BadgeDot.js.map

@@ -1 +1 @@
-{"version":3,"file":"BadgeDot.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDot.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,kBAAkB,CAAC;AAI1B,MAAM,cAAc,GAAiC;IACjD,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AA6BF;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAiB;IAC9F,MAAM,QAAQ,GAAG,CACb,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,WAAW,gBACT,KAAK,kBACH,OAAO,IAAI,SAAS,EAClC,KAAK,EAAE,WAAW,CAAC;YACf,QAAQ,EAAE,GAAG,IAAI,IAAI;YACrB,iBAAiB,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI;SACjD,CAAC,GACJ,CACL,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,QAAQ,IACN,CACV,CAAC;IACN,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC"}
+{"version":3,"file":"BadgeDot.js","sourceRoot":"","sources":["../../../src/components/BadgeDot/BadgeDot.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI1C,MAAM,cAAc,GAAiC;IACjD,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACR,CAAC;AA6BF;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAiB;IAC9F,MAAM,QAAQ,GAAG,CACb,iCACqB,CAAC,CAAC,QAAQ,IAAI,SAAS,eAC9B,WAAW,gBACT,KAAK,kBACH,OAAO,IAAI,SAAS,EAClC,KAAK,EAAE,WAAW,CAAC;YACf,QAAQ,EAAE,GAAG,IAAI,IAAI;YACrB,iBAAiB,EAAE,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI;SACjD,CAAC,GACJ,CACL,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,4DACK,QAAQ,EACR,QAAQ,IACN,CACV,CAAC;IACN,CAAC;IAED,OAAO,QAAQ,CAAC;AACpB,CAAC"}

package/dist/components/BannerAlert/BannerAlert.d.ts

@@ -1,5 +1,5 @@
-import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
 import './banner-alert.scss';
+import { ElementProps, AlertVariant, CallToActionButton } from '-/types/common';
 export type BannerAlertProps = {
     /**
      * The color variant of the banner alert.

package/dist/components/BannerAlert/BannerAlert.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './banner-alert.css.js';
 import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgClose } from '@bspk/icons/Close';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { SvgWarningFill } from '@bspk/icons/WarningFill';
-import './banner-alert.css.js';
+import { Button } from '../Button';
 /**
  * A visual and contextual message used to communicate an important message or notification to users relating to a
  * status or the body content of a page.
@@ -34,6 +35,6 @@ import './banner-alert.css.js';
  * @phase UXReview
  */
 export function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {
-    return (_jsxs("div", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, role: "alert", children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx("button", { "aria-label": "Close", onClick: onClose, type: "button", children: _jsx(SvgClose, {}) }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx("button", { onClick: callToAction.onClick, children: callToAction.label }))] })] })] }));
+    return (_jsxs("div", { "data-bspk": "banner-alert", "data-elevated": elevated || undefined, "data-variant": variant, role: "alert", children: [_jsxs("div", { "data-icon-bar": true, children: [variant === 'error' && _jsx(SvgErrorFill, {}), variant === 'informational' && _jsx(SvgInfoFill, {}), variant === 'success' && _jsx(SvgCheckCircleFill, {}), variant === 'warning' && _jsx(SvgWarningFill, {})] }), _jsxs("div", { "data-content": true, children: [(header || onClose) && (_jsxs("header", { children: [_jsx("span", { children: header }), typeof onClose === 'function' && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "Close", onClick: onClose, size: "small", variant: "tertiary" }))] })), _jsxs("div", { "data-body": true, children: [_jsx("span", { children: body }), callToAction?.label && callToAction?.onClick && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: "small", variant: "tertiary" }))] })] })] }));
 }
 //# sourceMappingURL=BannerAlert.js.map

package/dist/components/BannerAlert/BannerAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,OAAO,qBAAqB,CAAC;AA0C7B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,4BAAe,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,aACnG,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACJ,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AA2C7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,WAAW,CAAC,EACxB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,4BAAe,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,aACnG,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,KAAC,MAAM,IACH,IAAI,EAAE,KAAC,QAAQ,KAAG,EAClB,QAAQ,QACR,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,GACpB,CACL,IACC,IACJ,IACJ,CACT,CAAC;AACN,CAAC"}

package/dist/components/BannerAlert/BannerAlertExample.js

@@ -19,6 +19,8 @@ export const BannerAlertExample = ({ action }) => ({
         {
             label: 'With CallToAction',
             propState: {
+                header: 'With CallToAction Header',
+                body: 'With CallToAction body',
                 callToAction: {
                     label: 'Click me',
                     onClick: () => action('Call to action clicked!'),
@@ -28,6 +30,8 @@ export const BannerAlertExample = ({ action }) => ({
         {
             label: 'Without OnClose',
             propState: {
+                header: 'Without OnClose Header',
+                body: 'Without OnClose body',
                 onClose: undefined,
             },
         },

package/dist/components/BannerAlert/BannerAlertExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlertExample.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlertExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAyC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACtC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,wBAAwB,CAAC;QAC1D,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACxC,IAAI,OAAO,CAAC,KAAK,KAAK,eAAe;gBAAE,UAAU,GAAG,8BAA8B,CAAC;YACnF,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,OAAO;gBAAE,UAAU,GAAG,sBAAsB,CAAC;QACvE,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"BannerAlertExample.js","sourceRoot":"","sources":["../../../src/components/BannerAlert/BannerAlertExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,kBAAkB,GAAyC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACrF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE;QACtC,IAAI,UAAU,GAAG,KAAK,CAAC,MAAM,IAAI,wBAAwB,CAAC;QAC1D,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACxC,IAAI,OAAO,CAAC,KAAK,KAAK,eAAe;gBAAE,UAAU,GAAG,8BAA8B,CAAC;YACnF,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,SAAS;gBAAE,UAAU,GAAG,wBAAwB,CAAC;YACvE,IAAI,OAAO,CAAC,KAAK,KAAK,OAAO;gBAAE,UAAU,GAAG,sBAAsB,CAAC;QACvE,CAAC;QACD,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,MAAM,EAAE,UAAU,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,MAAM,EAAE,0BAA0B;gBAClC,IAAI,EAAE,wBAAwB;gBAC9B,YAAY,EAAE;oBACV,KAAK,EAAE,UAAU;oBACjB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,yBAAyB,CAAC;iBACnD;aACJ;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,MAAM,EAAE,wBAAwB;gBAChC,IAAI,EAAE,sBAAsB;gBAC5B,OAAO,EAAE,SAAS;aACrB;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/BannerAlert/banner-alert.css

@@ -58,26 +58,6 @@
     font: var(--heading-h6);
   }
 }
-[data-bspk=banner-alert] [data-content] header button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  margin: 0 0 0 auto;
-  color: var(--foreground-neutral-on-surface-variant-01);
-  height: var(--spacing-sizing-08);
-  width: var(--spacing-sizing-08);
-}
-@media (any-pointer: coarse) {
-  [data-bspk=banner-alert] [data-content] header button {
-    height: var(--spacing-sizing-12);
-    width: var(--spacing-sizing-12);
-  }
-}
-[data-bspk=banner-alert] [data-content] header button svg {
-  width: var(--spacing-sizing-04);
-  height: var(--spacing-sizing-04);
-}
 [data-bspk=banner-alert] [data-content] [data-body] {
   display: flex;
   flex-direction: column;
@@ -89,12 +69,6 @@
 }
 [data-bspk=banner-alert] [data-content] [data-body] button {
   margin-left: auto;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0 var(--spacing-sizing-03);
-  height: var(--spacing-sizing-12);
-  font: var(--labels-small);
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */