@bspk/ui 1.3.8 → 1.3.10

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="success"
+ *         header="Success"
+ *         body="Your request was processed successfully."
+ *         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="success"
+ *         header="Success"
+ *         body="Your request was processed successfully."
+ *         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,