@bspk/ui 1.3.7 → 1.3.9

package/dist/components/Skeleton/Skeleton.d.ts

@@ -45,20 +45,16 @@ export type SkeletonProps = {
  * @example
  *     import { Skeleton } from '@bspk/ui/skeleton';
  *
- *     function Example(item: { title: string; src: string } | null) {
- *         return (
- *             <Skeleton variant="photo" width={210} height={118}>
- *                 <img
- *                     style={{
- *                         width: 210,
- *                         height: 118,
- *                     }}
- *                     alt={item.title}
- *                     src={item.src}
- *                 />
- *             </Skeleton>
- *         );
- *     }
+ *     <Skeleton variant="photo" width={210} height={118}>
+ *         <img
+ *             style={{
+ *                 width: 210,
+ *                 height: 118,
+ *             }}
+ *             alt={'A cool photo'}
+ *             src={'https://example.com/cool-photo.jpg'}
+ *         />
+ *     </Skeleton>;
  *
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *

package/dist/components/Skeleton/Skeleton.js

@@ -15,20 +15,16 @@ import { cssWithVars } from '../../utils/cwv';
  * @example
  *     import { Skeleton } from '@bspk/ui/skeleton';
  *
- *     function Example(item: { title: string; src: string } | null) {
- *         return (
- *             <Skeleton variant="photo" width={210} height={118}>
- *                 <img
- *                     style={{
- *                         width: 210,
- *                         height: 118,
- *                     }}
- *                     alt={item.title}
- *                     src={item.src}
- *                 />
- *             </Skeleton>
- *         );
- *     }
+ *     <Skeleton variant="photo" width={210} height={118}>
+ *         <img
+ *             style={{
+ *                 width: 210,
+ *                 height: 118,
+ *             }}
+ *             alt={'A cool photo'}
+ *             src={'https://example.com/cool-photo.jpg'}
+ *         />
+ *     </Skeleton>;
  *
  * @exampleDescription This example shows a skeleton loading state for an image but can be used for any element.
  *

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,aAAa,EAAE,QAAQ,GAAG,IAAI,EAAiB;IAC3G,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,UAAU,kBACN,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAmC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,GAAG,EAAE,OAAO,GAAG,aAAa,EAAE,QAAQ,GAAG,IAAI,EAAiB;IAC3G,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,UAAU,kBACN,OAAO,EACrB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,UAAU,EAAE,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;YAC/D,SAAS,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK;SAC9D,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

package/dist/components/Skeleton/SkeletonExample.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Avatar } from '../Avatar';
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
-import { useTimeout } from '../../hooks/useTimeout';
 export const presets = [
     {
         label: 'Loading Transition',
@@ -22,7 +21,9 @@ export const SkeletonExample = {
 };
 function SkeletonTransition({ Component, props, }) {
     const [loaded, setLoaded] = useState(false);
-    useTimeout(() => setLoaded(true), 3000);
+    useEffect(() => {
+        setTimeout(() => setLoaded(true), 3000);
+    }, []);
     return _jsx(Component, { ...props, children: loaded && PROP_VARIANT_CHILDREN[props.variant] });
 }
 const PROP_VARIANT_CHILDREN = {

package/dist/components/Skeleton/SkeletonExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAE9G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO;CACV,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,KAAK,GACiE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAExC,OAAO,KAAC,SAAS,OAAK,KAAK,YAAG,MAAM,IAAI,qBAAqB,CAAC,KAAM,CAAC,OAA0B,CAAC,GAAa,CAAC;AAClH,CAAC;AAED,MAAM,qBAAqB,GAAuD;IAC9E,WAAW,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;IAChE,QAAQ,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG;IAC9F,KAAK,EAAE,CACH,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,uBAE3B,CACxB;IACD,OAAO,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,eAAe,GAAG;IACpD,SAAS,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;CACjE,CAAC"}
+{"version":3,"file":"SkeletonExample.js","sourceRoot":"","sources":["../../../src/components/Skeleton/SkeletonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA4B;IAC5C;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAClB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE;QACrC,IAAI,MAAM,EAAE,KAAK,KAAK,oBAAoB;YAAE,OAAO,KAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAE9G,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;IACD,OAAO;CACV,CAAC;AAEF,SAAS,kBAAkB,CAAC,EACxB,SAAS,EACT,KAAK,GACiE;IACtE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC;IAC5C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAC,SAAS,OAAK,KAAK,YAAG,MAAM,IAAI,qBAAqB,CAAC,KAAM,CAAC,OAA0B,CAAC,GAAa,CAAC;AAClH,CAAC;AAED,MAAM,qBAAqB,GAAuD;IAC9E,WAAW,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;IAChE,QAAQ,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG;IAC9F,KAAK,EAAE,CACH,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,uBAE3B,CACxB;IACD,OAAO,EAAE,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,eAAe,GAAG;IACpD,SAAS,EAAE,KAAC,kBAAkB,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,GAAG;CACjE,CAAC"}

package/dist/components/SkeletonText/SkeletonText.d.ts

@@ -29,15 +29,11 @@ export type SkeletonTextProps = {
  * @example
  *     import { SkeletonText } from '@bspk/ui/SkeletonText';
  *
- *     function Example(item: { content: string } | null) {
- *         return (
- *             <SkeletonText textLines={1} textVariant="body-base">
- *                 <Txt as="p" variant="body-base">
- *                     {item?.content}
- *                 </Txt>
- *             </SkeletonText>
- *         );
- *     }
+ *     <SkeletonText textLines={1} textVariant="body-base">
+ *         <Txt as="p" variant="body-base">
+ *             {'This is the loaded text content that was previously loading.'}
+ *         </Txt>
+ *     </SkeletonText>;
  *
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *

package/dist/components/SkeletonText/SkeletonText.js

@@ -6,15 +6,11 @@ import { cssWithVars } from '../../utils/cwv';
  * @example
  *     import { SkeletonText } from '@bspk/ui/SkeletonText';
  *
- *     function Example(item: { content: string } | null) {
- *         return (
- *             <SkeletonText textLines={1} textVariant="body-base">
- *                 <Txt as="p" variant="body-base">
- *                     {item?.content}
- *                 </Txt>
- *             </SkeletonText>
- *         );
- *     }
+ *     <SkeletonText textLines={1} textVariant="body-base">
+ *         <Txt as="p" variant="body-base">
+ *             {'This is the loaded text content that was previously loading.'}
+ *         </Txt>
+ *     </SkeletonText>;
  *
  * @exampleDescription This example shows a skeleton loading state for some text but can be used for any element.
  *

package/dist/components/SkeletonText/SkeletonText.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,GAAG,IAAI,EAAqB;IACjG,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SkeletonText.js","sourceRoot":"","sources":["../../../src/components/SkeletonText/SkeletonText.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA2B1C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,GAAG,IAAI,EAAqB;IACjG,OAAO,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,CACvE,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,2BACc,MAAM,gBACL,SAAS,eACV,eAAe,EACzB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,WAAW,CAAC;YACf,eAAe,EAAE,SAAS,OAAO,QAAQ;YACzC,eAAe,EAAE,cAAc,OAAO,yBAAyB,OAAO,SAAS;SAClF,CAAC,YAED,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,mCAAoB,KAAK,CAAI,CAChC,CAAC,GACA,CACT,CAAC;AACN,CAAC"}

package/dist/components/Slider/Slider.d.ts

@@ -67,11 +67,11 @@ export type SliderProps<Value> = Pick<CommonPropsLibrary, 'disabled' | 'readOnly
  *     import { Slider } from '@bspk/ui/Slider';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState(50);
  *
  *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
- *     }
+ *     };
  *
  * @name Slider
  * @phase UXReview

package/dist/components/Slider/Slider.js

@@ -12,11 +12,11 @@ import { Txt } from '../Txt';
  *     import { Slider } from '@bspk/ui/Slider';
  *     import { useState } from 'react';
  *
- *     function Example() {
+ *     () => {
  *         const [value, setValue] = useState(50);
  *
  *         return <Slider value={value} min={0} max={100} label="Slider Example" onChange={setValue} />;
- *     }
+ *     };
  *
  * @name Slider
  * @phase UXReview

package/dist/components/Slider/SliderExample.js

@@ -16,19 +16,20 @@ export const SliderExample = {
     },
     presets: [
         {
-            label: 'Basic Slider',
+            label: 'Formatted Number',
             propState: {
-                label: 'Basic option',
-                min: 20,
-                max: 80,
-                step: 1,
-                value: 30,
+                label: 'Price option',
+                min: 0,
+                max: 100,
+                step: 5,
+                value: 50,
                 formatNumber: (num) => `$${num}`,
-                name: 'basic-slider',
+                name: 'formatted-number-slider',
             },
         },
         {
             label: 'Range Slider',
+            designPattern: 'A control element that allows customers to select a value or adjust a setting by moving the handle along a horizontal track.',
             propState: {
                 label: 'Range option',
                 min: 0,
@@ -42,21 +43,42 @@ export const SliderExample = {
             },
         },
         {
-            label: 'Undefined Value',
+            label: 'Continuous Slider',
+            designPattern: 'Continuous sliders allow users to select a value along a subjective range.',
             propState: {
-                label: 'undefined',
-                min: 50,
-                max: 150,
+                label: 'What is the purpose of life?',
+                min: 0,
+                max: 100,
+                value: 42,
                 step: 1,
-                value: null,
-                formatNumber: (num, context) => {
-                    if (context === 'max')
-                        return `${num}% Passing`;
-                    return `${num}%`;
-                },
-                name: 'undefined-slider',
+                formatNumber: (num) => num.toFixed(0),
+                name: 'continuous-slider',
+                marks: false,
+            },
+        },
+        {
+            label: 'Discrete Slider',
+            designPattern: 'Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with marks={true}.',
+            propState: {
+                label: 'Discrete option',
+                min: 0,
+                max: 100,
+                step: 10,
+                value: 40,
+                formatNumber: (num) => num.toString(),
+                name: 'discrete-slider',
+                marks: true,
             },
         },
     ],
+    defaultState: {
+        label: 'Basic option',
+        min: 20,
+        max: 80,
+        step: 1,
+        value: 30,
+        formatNumber: (num) => `$${num}`,
+        name: 'basic-slider',
+    },
 };
 //# sourceMappingURL=SliderExample.js.map

package/dist/components/Slider/SliderExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAKjC,MAAM,CAAC,MAAM,aAAa,GAA6D;IACnF,qCAAqC;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,UAAU,GAAG,CAAC,WAAmD,EAAE,EAAE;YACvE,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC;gBACjD,CAAC,CAAC,WAAW,CAAC,KAAK;gBACnB,CAAC,CAAC,OAAO,WAAW,CAAC,KAAK,KAAK,QAAQ;oBACrC,CAAC,CAAC,WAAW,CAAC,KAAK;oBACnB,CAAC,CAAC,CAAC,CAAC;YAEV,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;YAEjD,OAAO,KAAC,SAAS,OAAK,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;QAC5E,CAAC,CAAC;QAEF,OAAO,KAAC,UAAU,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,EAAE,GAAI,CAAC;IAC3G,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,EAAE;gBACT,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,GAAG,EAAE;gBAChC,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,CAAC;gBACN,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;gBACf,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE;oBAClB,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,cAAc;aACvB;SACJ;QACD;YACI,KAAK,EAAE,iBAAiB;YACxB,SAAS,EAAE;gBACP,KAAK,EAAE,WAAW;gBAClB,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,GAAG;gBACR,IAAI,EAAE,CAAC;gBACP,KAAK,EAAE,IAAmC;gBAC1C,YAAY,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,EAAE;oBAC3B,IAAI,OAAO,KAAK,KAAK;wBAAE,OAAO,GAAG,GAAG,WAAW,CAAC;oBAChD,OAAO,GAAG,GAAG,GAAG,CAAC;gBACrB,CAAC;gBACD,IAAI,EAAE,kBAAkB;aAC3B;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"SliderExample.js","sourceRoot":"","sources":["../../../src/components/Slider/SliderExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Snackbar/Manager.d.ts

@@ -0,0 +1,29 @@
+import { SnackbarProps } from './Snackbar';
+import { BspkIcon } from '-/types/common';
+export type SendSnackbarProps = Omit<SnackbarProps, 'icon' | 'innerRef' | 'onClose'> & {
+    onClose?: SnackbarProps['onClose'];
+    icon?: BspkIcon;
+};
+export type SnackbarManagerProps = {
+    /**
+     * Default timeout for snackbars sent via the manager (in milliseconds).
+     *
+     * @default 5000
+     */
+    defaultTimeout?: number;
+};
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ *
+ * @phase UXReview
+ */
+export declare function SnackbarManager({ defaultTimeout }: SnackbarManagerProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const sendSnackbar: (props: SendSnackbarProps | string) => void;
+export declare const clearSnackbar: () => void;

package/dist/components/Snackbar/Manager.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgIcon } from '@bspk/icons/SvgIcon';
+import { useState } from 'react';
+import { Snackbar } from './Snackbar';
+import { createCustomEvent } from '../../utils/createCustomEvent';
+const CLEAR_EVENT = 'bspk-snackbar-clear';
+const SnackbarEvent = createCustomEvent('bspk-snackbar-event');
+/**
+ * SnackbarManager is a single use component that listens for snackbar events and displays them to the user.
+ *
+ * We use a custom event to communicate between components and this manager.
+ *
+ * We don't store the snackbar props in React.Context to avoid unnecessary re-renders of all components that consume the
+ * context. :)
+ *
+ * @name SnackbarManager
+ *
+ * @phase UXReview
+ */
+export function SnackbarManager({ defaultTimeout = 5000 }) {
+    const [snackbarProps, setSnackbarProps] = useState();
+    const { useEventListener } = SnackbarEvent;
+    useEventListener((detail) => {
+        if (detail === CLEAR_EVENT || !detail)
+            return setSnackbarProps(undefined);
+        setSnackbarProps(typeof detail === 'string' ? { text: detail, timeout: defaultTimeout } : detail);
+    });
+    return snackbarProps ? (_jsx(Snackbar, { ...snackbarProps, icon: snackbarProps.icon ? _jsx(SvgIcon, { name: snackbarProps.icon }) : undefined, onClose: () => {
+            setSnackbarProps(undefined);
+            snackbarProps?.onClose?.();
+        }, open: true })) : null;
+}
+export const sendSnackbar = (props) => SnackbarEvent.send(props);
+export const clearSnackbar = () => SnackbarEvent.send(CLEAR_EVENT);
+//# sourceMappingURL=Manager.js.map

package/dist/components/Snackbar/Manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Manager.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Manager.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,WAAW,GAAG,qBAA8B,CAAC;AAiBnD,MAAM,aAAa,GAAG,iBAAiB,CAAkD,qBAAqB,CAAC,CAAC;AAEhH;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,EAAwB;IAC3E,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,EAAiC,CAAC;IACpF,MAAM,EAAE,gBAAgB,EAAE,GAAG,aAAa,CAAC;IAE3C,gBAAgB,CAAC,CAAC,MAAM,EAAE,EAAE;QACxB,IAAI,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM;YAAE,OAAO,gBAAgB,CAAC,SAAS,CAAC,CAAC;QAE1E,gBAAgB,CAAC,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACtG,CAAC,CAAC,CAAC;IAEH,OAAO,aAAa,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,OACD,aAAa,EACjB,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,aAAa,CAAC,IAAgB,GAAI,CAAC,CAAC,CAAC,SAAS,EACxF,OAAO,EAAE,GAAG,EAAE;YACV,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,aAAa,EAAE,OAAO,EAAE,EAAE,CAAC;QAC/B,CAAC,EACD,IAAI,EAAE,IAAI,GACZ,CACL,CAAC,CAAC,CAAC,IAAI,CAAC;AACb,CAAC;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE7F,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC"}

package/dist/components/Snackbar/Snackbar.d.ts

@@ -35,7 +35,6 @@ export type SnackbarProps = CommonProps<'id'> & {
      * @required
      */
     onClose: () => void;
-    /** Content to be rendered inside the snack bar provider, the snackbar trigger element. */
     /**
      * Time in milliseconds after which the snackbar will auto dismiss.
      *
@@ -59,24 +58,43 @@ export type SnackbarProps = CommonProps<'id'> & {
     disableFocusTrap?: boolean;
 };
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
  *

package/dist/components/Snackbar/Snackbar.js

@@ -7,24 +7,43 @@ import { Portal } from '../Portal';
 import { Truncated } from '../Truncated';
 import { useId } from '../../hooks/useId';
 /**
- * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
- * experience.
+ * Snackbars provide brief feedback about user actions. Because they use a focus trap, they interrupt the user's
+ * workflow and should be used sparingly.
+ *
+ * #### Inline
+ *
+ * Render the Snackbar inside the component that triggers it and control visibility with local state/props. This is
+ * simple and useful for small or isolated components, but can lead to duplicate snackbars or inadvertent render loops
+ * if state is not managed carefully.
+ *
+ * #### Managed
+ *
+ * Use the SnackbarManager together with `sendSnackbar` and `clearSnackbar` to control snackbars globally. This lets any
+ * part of the app trigger snackbars without prop drilling and helps avoid duplicates. and prevents duplicate snackbars
+ * from being shown.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
  *     import { Button } from '@bspk/ui/Button';
  *     import { useState } from 'react';
+ *     import { sendSnackbar } from '@bspk/ui/Snackbar/Manager';
  *
- *     function ExampleComponent(props) {
+ *     () => {
  *         const [snackbarOpen, setSnackbarOpen] = useState(false);
  *
  *         return (
  *             <>
+ *                 // -- inline snackbar
  *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
  *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *                 // -- managed snackbar
+ *                 <Button
+ *                     label="Show managed snackbar"
+ *                     onClick={() => sendSnackbar({ text: 'I am a managed snackbar!' })}
+ *                 />
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Snackbar
  *

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA8DtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA4DtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Snackbar/SnackbarExample.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { clearSnackbar, sendSnackbar } from './Manager';
 import { Snackbar } from './Snackbar';
 import { Button } from '../Button';
 export const SnackbarExample = {
@@ -6,7 +7,13 @@ export const SnackbarExample = {
     defaultState: {},
     disableProps: [],
     presets: [],
-    render: ({ props, setState }) => (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "open snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" })] })),
+    render: ({ props, setState }) => {
+        return (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "Launch Inline Snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" }), _jsx("br", {}), _jsx(Button, { label: "Launch Managed Snackbar", onClick: () => sendSnackbar({
+                        ...props,
+                        text: `Managed: ${props.text}`,
+                        icon: 'icon:icon-name' in props ? props['icon:icon-name'] : undefined,
+                    }) }), _jsx("br", {}), _jsx(Button, { label: "Clear Managed Snackbar", onClick: () => clearSnackbar() })] }));
+    },
     sections: [],
     variants: false,
 };

package/dist/components/Snackbar/SnackbarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7B,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,GAAG,IACzG,CACN;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}
+{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;QAC5B,OAAO,CACH,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IACH,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EACvC,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,UAAU,GAClB,EACF,cAAM,EACN,KAAC,MAAM,IACH,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,GAAG,EAAE,CACV,YAAY,CAAC;wBACT,GAAG,KAAK;wBACR,IAAI,EAAE,YAAY,KAAK,CAAC,IAAI,EAAE;wBAC9B,IAAI,EAAE,gBAAgB,IAAI,KAAK,CAAC,CAAC,CAAE,KAAK,CAAC,gBAAgB,CAAc,CAAC,CAAC,CAAC,SAAS;qBACtF,CAAC,GAER,EACF,cAAM,EACN,KAAC,MAAM,IAAC,KAAK,EAAC,wBAAwB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,GAAI,IAC1E,CACN,CAAC;IACN,CAAC;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

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

@@ -1 +1,2 @@
 export * from './Snackbar';
+export * from './Manager';

package/dist/components/Snackbar/index.js

@@ -1,2 +1,3 @@
 export * from './Snackbar';
+export * from './Manager';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Snackbar/index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}

package/dist/components/StylesProviderDemo/StylesProviderDemo.d.ts

@@ -14,9 +14,7 @@ export type StylesProviderDemoProps = {
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js

@@ -9,9 +9,7 @@ const THEME_CSS = { ...BRANDS_CSS, ...EXAMPLE_CSS };
  * @example
  *     import { StylesProviderDemo } from '@bspk/ui/StylesProviderDemo';
  *
- *     function Example() {
- *         return <StylesProviderDemo brand="anywhere" />;
- *     }
+ *     <StylesProviderDemo brand="anywhere" />;
  *
  * @name StylesProviderDemo
  * @phase Utility

package/dist/components/StylesProviderDemo/StylesProviderDemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/Switch/Switch.d.ts

@@ -27,7 +27,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -38,7 +38,7 @@ export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name'> & {
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Switch/Switch.js

@@ -9,7 +9,7 @@ import './switch.css.js';
  *     import { useState } from 'react';
  *     import { Switch } from '@bspk/ui/Switch';
  *
- *     function Example() {
+ *     () => {
  *         const [isChecked, setIsChecked] = useState<boolean>(false);
  *
  *         return (
@@ -20,7 +20,7 @@ import './switch.css.js';
  *                 checked={isChecked}
  *             />
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Switch/SwitchExample.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const SwitchExample = {
-    render: ({ props, Component }) => _jsx(Component, { ...props, "aria-label": props['aria-label'] || 'switch aria-label' }),
+    defaultState: {
+        'aria-label': 'switch aria-label',
+    },
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
 };
 //# sourceMappingURL=SwitchExample.js.map

package/dist/components/Switch/SwitchExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchExample.js","sourceRoot":"","sources":["../../../src/components/Switch/SwitchExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,gBAAc,KAAK,CAAC,YAAY,CAAC,IAAI,mBAAmB,GAAI;CACrH,CAAC"}
+{"version":3,"file":"SwitchExample.js","sourceRoot":"","sources":["../../../src/components/Switch/SwitchExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,YAAY,EAAE;QACV,YAAY,EAAE,mBAAmB;KACpC;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

package/dist/components/TabGroup/TabGroup.d.ts

@@ -18,7 +18,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *     import { useState } from 'react';
  *     import { TabGroup } from '@bspk/ui/TabGroup';
  *
- *     function Example() {
+ *     () => {
  *         const [selectedTab, setSelectedTab] = useState<string>();
  *
  *         return (
@@ -32,7 +32,7 @@ export type TabGroupProps = Omit<TabListProps<TabOption>, 'iconsOnly'> & {
  *                 value={selectedTab}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name TabGroup
  * @phase UXReview