@bspk/ui 1.3.8 → 1.3.9

package/dist/components/Accordion/Accordion.d.ts

@@ -62,9 +62,25 @@ export type AccordionProps = {
  * @example
  *     import { Accordion } from '@bspk/ui/Accordion';
  *
- *     function Example() {
- *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
- *     }
+ *     <Accordion
+ *         singleOpen={true}
+ *         items={[
+ *             {
+ *                 id: 1,
+ *                 title: 'Lawrence Welk',
+ *                 subtitle: 'The Champagne Music Maker',
+ *                 children:
+ *                     'Lawrence Welk was an American accordionist, bandleader, and television impresario, who hosted The Lawrence Welk Show from 1951 to 1982.',
+ *             },
+ *             {
+ *                 id: 2,
+ *                 title: 'Myron Floren',
+ *                 subtitle: 'The Happy Norwegian',
+ *                 children:
+ *                     'Myron Floren was an American accordionist best known as the featured accordionist on The Lawrence Welk Show.',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name Accordion
  * @phase UXReview

package/dist/components/Accordion/Accordion.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @cspell/spellchecker */
 import './accordion.css.js';
 import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgKeyboardArrowUp } from '@bspk/icons/KeyboardArrowUp';
@@ -11,9 +12,25 @@ import { randomString } from '../../utils/random';
  * @example
  *     import { Accordion } from '@bspk/ui/Accordion';
  *
- *     function Example() {
- *         return <Accordion items={[{ id: 1, title: 'Section', children: 'Example content' }]} />;
- *     }
+ *     <Accordion
+ *         singleOpen={true}
+ *         items={[
+ *             {
+ *                 id: 1,
+ *                 title: 'Lawrence Welk',
+ *                 subtitle: 'The Champagne Music Maker',
+ *                 children:
+ *                     'Lawrence Welk was an American accordionist, bandleader, and television impresario, who hosted The Lawrence Welk Show from 1951 to 1982.',
+ *             },
+ *             {
+ *                 id: 2,
+ *                 title: 'Myron Floren',
+ *                 subtitle: 'The Happy Norwegian',
+ *                 children:
+ *                     'Myron Floren was an American accordionist best known as the featured accordionist on The Lawrence Welk Show.',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name Accordion
  * @phase UXReview

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}

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

@@ -69,21 +69,20 @@ export type AvatarProps = CommonProps<'disabled'> & {
  *
  * @example
  *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 color="blue"
- *                 icon={<SvgPerson />}
- *                 image="/avatar-01.png"
- *                 initials="AR"
- *                 name="Andre Giant"
- *                 showTooltip
- *                 size="large"
- *             />
- *         );
- *     }
+ *     <Avatar
+ *         color="blue"
+ *         showIcon
+ *         image="/avatar-01.png"
+ *         initials="AR"
+ *         name="Andre Giant"
+ *         hideTooltip
+ *         size="large"
+ *         disabled={false}
+ *         onClick={() => action('Launch avatar popover')}
+ *         showIcon={false}
+ *         hideTooltip={true}
+ *     />;
  *
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *

package/dist/components/Avatar/Avatar.js

@@ -8,21 +8,20 @@ import { Tooltip } from '../Tooltip';
  *
  * @example
  *     import { Avatar } from '@bspk/ui/Avatar';
- *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Avatar
- *                 color="blue"
- *                 icon={<SvgPerson />}
- *                 image="/avatar-01.png"
- *                 initials="AR"
- *                 name="Andre Giant"
- *                 showTooltip
- *                 size="large"
- *             />
- *         );
- *     }
+ *     <Avatar
+ *         color="blue"
+ *         showIcon
+ *         image="/avatar-01.png"
+ *         initials="AR"
+ *         name="Andre Giant"
+ *         hideTooltip
+ *         size="large"
+ *         disabled={false}
+ *         onClick={() => action('Launch avatar popover')}
+ *         showIcon={false}
+ *         hideTooltip={true}
+ *     />;
  *
  * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *

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,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,EACJ,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,IAAI,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEpE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,IAAI,IAAI,CAAC,QAAQ;YACjB,QAAQ,GAAG,IAAI;iBACV,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,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1C,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,IAAI,0BACK,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,KAAK,EAChC,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,IAAI,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAChF,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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,MAAM,EACd,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,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,IAAI,iBAAe,IAAI,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEpE,IAAI,QAAQ;YACR,OAAO,CACH,8BAAmB,IAAI,+BACnB,KAAC,SAAS,KAAG,GACV,CACV,CAAC;QAEN,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,IAAI,IAAI,CAAC,QAAQ;YACjB,QAAQ,GAAG,IAAI;iBACV,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,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE1C,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,IAAI,0BACK,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,KAAK,EAChC,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,IAAI,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;AAChF,CAAC"}

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

@@ -39,7 +39,7 @@ export type AvatarGroupProps = CommonProps<'style'> & {
     /**
      * The variant of the avatar group.
      *
-     * @default auto
+     * @default stacked
      */
     variant?: 'spread' | 'stacked';
 };
@@ -49,17 +49,34 @@ export type AvatarGroupProps = CommonProps<'style'> & {
  * @example
  *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
  *
- *     function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                     { name: 'Princess Buttercup' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <AvatarGroup
+ *         style={{ marginLeft: 'var(--spacing-sizing-12)' }}
+ *         size="medium"
+ *         max={4}
+ *         variant="stacked"
+ *         items={[
+ *             {
+ *                 name: 'Alice Johnson',
+ *                 image: '/avatar-01.png',
+ *             },
+ *             {
+ *                 name: 'Bob Smith',
+ *                 image: '/avatar-02.png',
+ *             },
+ *             {
+ *                 name: 'Charlie Brown',
+ *                 image: '/avatar-03.png',
+ *             },
+ *             {
+ *                 name: 'Diana Prince',
+ *                 image: '/avatar-04.png',
+ *             },
+ *             {
+ *                 name: 'Ethan Hunt',
+ *                 image: '/avatar-05.png',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name AvatarGroup
  * @phase UXReview

package/dist/components/AvatarGroup/AvatarGroup.js

@@ -8,22 +8,39 @@ import { Avatar } from '../Avatar';
  * @example
  *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
  *
- *     function Example() {
- *         return (
- *             <AvatarGroup
- *                 items={[
- *                     { name: 'Andre Giant', image: '/path/to/image.jpg' },
- *                     { name: 'John Smith', initials: 'JS' },
- *                     { name: 'Princess Buttercup' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <AvatarGroup
+ *         style={{ marginLeft: 'var(--spacing-sizing-12)' }}
+ *         size="medium"
+ *         max={4}
+ *         variant="stacked"
+ *         items={[
+ *             {
+ *                 name: 'Alice Johnson',
+ *                 image: '/avatar-01.png',
+ *             },
+ *             {
+ *                 name: 'Bob Smith',
+ *                 image: '/avatar-02.png',
+ *             },
+ *             {
+ *                 name: 'Charlie Brown',
+ *                 image: '/avatar-03.png',
+ *             },
+ *             {
+ *                 name: 'Diana Prince',
+ *                 image: '/avatar-04.png',
+ *             },
+ *             {
+ *                 name: 'Ethan Hunt',
+ *                 image: '/avatar-05.png',
+ *             },
+ *         ]}
+ *     />;
  *
  * @name AvatarGroup
  * @phase UXReview
  */
-export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'spread', style }) {
+export function AvatarGroup({ items, size = 'small', max: maxProp = 5, variant = 'stacked', style }) {
     const max = maxProp > items.length ? items.length : maxProp;
     const overflowItems = items.slice(max);
     return !Array.isArray(items) || !items?.length ? null : (_jsx("div", { "data-bspk": "avatar-group", "data-max": max, "data-size": size, "data-variant": variant, style: style, children: _jsxs("div", { "data-wrap": true, children: [items.slice(0, max).map((item, index) => (_jsx(Avatar, { ...item, onClick: () => { }, size: size }, index))), overflowItems.length > 0 && (_jsx(AvatarGroupOverflow, { items: overflowItems, overflow: overflowItems.length, size: size }))] }) }));

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,qBAAqB,CAAC;AAC7B,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA+CvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAChH,MAAM,GAAG,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpD,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,YAC7F,6CACK,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,OAAiB,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAA9C,KAAK,CAA6C,CAClE,CAAC,EACD,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,KAAC,mBAAmB,IAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAC5F,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,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AA+CvE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,EAAE,KAAK,EAAoB;IACjH,MAAM,GAAG,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC5D,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IAEvC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpD,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,YAC7F,6CACK,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACtC,KAAC,MAAM,OAAiB,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAA9C,KAAK,CAA6C,CAClE,CAAC,EACD,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,CACzB,KAAC,mBAAmB,IAAC,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,GAAI,CAC5F,IACC,GACJ,CACT,CAAC;AACN,CAAC"}

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

@@ -45,9 +45,7 @@ export type BadgeProps = {
  * @example
  *     import { Badge } from '@bspk/ui/Badge';
  *
- *     function Example() {
- *         return <Badge count={5} size="small" color="primary" />;
- *     }
+ *     <Badge count={5} size="small" color="primary" surfaceBorder={true} />;
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *

package/dist/components/Badge/Badge.js

@@ -7,9 +7,7 @@ import { tryIntParse } from '../../utils/tryIntPsrse';
  * @example
  *     import { Badge } from '@bspk/ui/Badge';
  *
- *     function Example() {
- *         return <Badge count={5} size="small" color="primary" />;
- *     }
+ *     <Badge count={5} size="small" color="primary" surfaceBorder={true} />;
  *
  * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
  *

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

@@ -1 +1 @@
-{"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"}
+{"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;;;;;;;;;;;;GAYG;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

@@ -33,14 +33,14 @@ export type BadgeDotProps = {
  * @example
  *     import { BadgeDot } from '@bspk/ui/BadgeDot';
  *
- *     function Example() {
- *         return <BadgeDot color="primary" />;
- *     }
+ *     <BadgeDot color="secondary" size={12} outline={true}>
+ *         <Button>Messages</Button>
+ *     </BadgeDot>;
  *
  * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
  *
  * @name BadgeDot
  * @phase UXReview
  */
-export declare function BadgeDot({ children, color, size, outline }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
+export declare function BadgeDot({ children, color, size: sizeProp, outline }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/BadgeDot/BadgeDot.js

@@ -13,16 +13,17 @@ const OUTLINE_WIDTHS = {
  * @example
  *     import { BadgeDot } from '@bspk/ui/BadgeDot';
  *
- *     function Example() {
- *         return <BadgeDot color="primary" />;
- *     }
+ *     <BadgeDot color="secondary" size={12} outline={true}>
+ *         <Button>Messages</Button>
+ *     </BadgeDot>;
  *
  * @exampleDescription This example shows a badge-dot with a count of 5, size small, and primary variant.
  *
  * @name BadgeDot
  * @phase UXReview
  */
-export function BadgeDot({ children, color = 'primary', size = 6, outline = false }) {
+export function BadgeDot({ children, color = 'primary', size: sizeProp = 6, outline = false }) {
+    const size = sizeProp in OUTLINE_WIDTHS ? sizeProp : 6;
     const badgeDot = (_jsx("sup", { "data-attachment": !!children || undefined, "data-bspk": "badge-dot", "data-color": color, "data-outline": outline || undefined, style: cssWithVars({
             '--size': `${size}px`,
             '--outline-width': `${OUTLINE_WIDTHS[size]}px`,

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

@@ -1 +1 @@
-{"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"}
+{"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,EAAE,QAAQ,GAAG,CAAC,EAAE,OAAO,GAAG,KAAK,EAAiB;IACxG,MAAM,IAAI,GAAG,QAAQ,IAAI,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAEvD,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

@@ -46,18 +46,17 @@ export type BannerAlertProps = {
  * @example
  *     import { BannerAlert } from '@bspk/ui/BannerAlert';
  *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *             callToAction={{
- *                 label = 'Click me',
- *                 onClick = () => action('Call to action clicked!'),
- *             }}
- *         />;
- *     }
+ *     <BannerAlert
+ *         elevated={true}
+ *         variant="error"
+ *         header="Error"
+ *         body="There was an error processing your request."
+ *         onClose={() => sendSnackbar('Alert closed')}
+ *         callToAction={{
+ *             label = 'Click me',
+ *             onClick = () => action('Call to action clicked!'),
+ *         }}
+ *     />;
  *
  * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
  *

package/dist/components/BannerAlert/BannerAlert.js

@@ -13,18 +13,17 @@ import { Button } from '../Button';
  * @example
  *     import { BannerAlert } from '@bspk/ui/BannerAlert';
  *
- *     function Example() {
- *         <BannerAlert
- *             variant="error"
- *             header="Error"
- *             body="There was an error processing your request."
- *             onClose={() => console.log('Alert closed')}
- *             callToAction={{
- *                 label = 'Click me',
- *                 onClick = () => action('Call to action clicked!'),
- *             }}
- *         />;
- *     }
+ *     <BannerAlert
+ *         elevated={true}
+ *         variant="error"
+ *         header="Error"
+ *         body="There was an error processing your request."
+ *         onClose={() => sendSnackbar('Alert closed')}
+ *         callToAction={{
+ *             label = 'Click me',
+ *             onClick = () => action('Call to action clicked!'),
+ *         }}
+ *     />;
  *
  * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
  *

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,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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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/BottomNavigation/BottomNavigation.d.ts

@@ -21,13 +21,16 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState<string>('1');
  *
  *         return (
  *             <BottomNavigation
+ *                 variant="elevated"
+ *                 mode="inline"
+ *                 label="Bottom Navigation Example"
  *                 value={value}
- *                 onChange={onChange}
+ *                 onChange={(next) => setValue(next)}
  *                 options={[
  *                     {
  *                         value: '1',
@@ -44,7 +47,7 @@ export type BottomNavigationProps = Pick<TabListProps, 'label' | 'onChange' | 'o
  *                 ]}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name BottomNavigation
  * @phase Dev

package/dist/components/BottomNavigation/BottomNavigation.js

@@ -8,13 +8,16 @@ import { TabList } from '../TabList';
  *     import { BottomNavigation } from '@bspk/ui/BottomNavigation';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState<string>('1');
  *
  *         return (
  *             <BottomNavigation
+ *                 variant="elevated"
+ *                 mode="inline"
+ *                 label="Bottom Navigation Example"
  *                 value={value}
- *                 onChange={onChange}
+ *                 onChange={(next) => setValue(next)}
  *                 options={[
  *                     {
  *                         value: '1',
@@ -31,7 +34,7 @@ import { TabList } from '../TabList';
  *                 ]}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name BottomNavigation
  * @phase Dev

package/dist/components/BottomNavigation/BottomNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,YAAY,EAAyB;IAC1G,OAAO,CACH,KAAC,OAAO,iBAAW,mBAAmB,eAAY,IAAI,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,YAAY,GAAI,CACnH,CAAC;AACN,CAAC"}
+{"version":3,"file":"BottomNavigation.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,OAAO,EAAgB,MAAM,sBAAsB,CAAC;AAiB7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAE,GAAG,YAAY,EAAyB;IAC1G,OAAO,CACH,KAAC,OAAO,iBAAW,mBAAmB,eAAY,IAAI,kBAAgB,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,YAAY,GAAI,CACnH,CAAC;AACN,CAAC"}

package/dist/components/BottomNavigation/BottomNavigationExample.js

@@ -1,14 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SvgCloud } from '@bspk/icons/Cloud';
-import { SvgCloudFill } from '@bspk/icons/CloudFill';
-import { SvgEvent } from '@bspk/icons/Event';
-import { SvgEventFill } from '@bspk/icons/EventFill';
-import { SvgPerson } from '@bspk/icons/Person';
-import { SvgPersonFill } from '@bspk/icons/PersonFill';
-import { SvgSettings } from '@bspk/icons/Settings';
-import { SvgSettingsFill } from '@bspk/icons/SettingsFill';
-import { SvgSmartphone } from '@bspk/icons/Smartphone';
-import { SvgSmartphoneFill } from '@bspk/icons/SmartphoneFill';
 export const presets = [
     {
         label: 'Three options',
@@ -17,20 +7,20 @@ export const presets = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: _jsx(SvgSettings, {}),
-                    iconSelected: _jsx(SvgSettingsFill, {}),
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: _jsx(SvgCloud, {}),
-                    iconSelected: _jsx(SvgCloudFill, {}),
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
                     label: 'Item 3',
-                    icon: _jsx(SvgSmartphone, {}),
-                    iconSelected: _jsx(SvgSmartphoneFill, {}),
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
             ],
             value: '1',
@@ -43,33 +33,33 @@ export const presets = [
             options: [
                 {
                     value: '1',
-                    label: 'Item 1',
-                    icon: _jsx(SvgSettings, {}),
-                    iconSelected: _jsx(SvgSettingsFill, {}),
+                    label: 'Item 1 With Longer Label',
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
-                    label: 'Item 2',
-                    icon: _jsx(SvgCloud, {}),
-                    iconSelected: _jsx(SvgCloudFill, {}),
+                    label: 'Item 2 With Longer Label',
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                 },
                 {
                     value: '3',
-                    label: 'Item 3',
-                    icon: _jsx(SvgSmartphone, {}),
-                    iconSelected: _jsx(SvgSmartphoneFill, {}),
+                    label: 'Item 3 With Longer Label',
+                    icon: 'Smartphone',
+                    iconSelected: 'SmartphoneFill',
                 },
                 {
                     value: '4',
-                    label: 'Item 4',
-                    icon: _jsx(SvgEvent, {}),
-                    iconSelected: _jsx(SvgEventFill, {}),
+                    label: 'Item 4 With Longer Label',
+                    icon: 'Event',
+                    iconSelected: 'EventFill',
                 },
                 {
                     value: '5',
-                    label: 'Item 5',
-                    icon: _jsx(SvgPerson, {}),
-                    iconSelected: _jsx(SvgPersonFill, {}),
+                    label: 'Item 5 With Longer Label',
+                    icon: 'Person',
+                    iconSelected: 'PersonFill',
                 },
             ],
             value: '1',
@@ -83,14 +73,14 @@ export const presets = [
                 {
                     value: '1',
                     label: 'Item 1',
-                    icon: _jsx(SvgSettings, {}),
-                    iconSelected: _jsx(SvgSettingsFill, {}),
+                    icon: 'Settings',
+                    iconSelected: 'SettingsFill',
                 },
                 {
                     value: '2',
                     label: 'Item 2',
-                    icon: _jsx(SvgCloud, {}),
-                    iconSelected: _jsx(SvgCloudFill, {}),
+                    icon: 'Cloud',
+                    iconSelected: 'CloudFill',
                     disabled: true,
                 },
             ],
@@ -108,7 +98,12 @@ export const BottomNavigationExample = {
     },
     defaultState: {
         value: '1',
-        options: presets[0].propState.options,
+        options: presets[0].propState.options.map((option) => ({
+            ...option,
+            icon: undefined,
+            iconSelected: undefined,
+        })),
+        label: 'Single Icon',
     },
     disableProps: [],
     presets,