@bspk/ui 1.3.8 → 1.3.9

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -12,8 +12,8 @@ const ALL_LABEL = 'All';
  * @example
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
- *     function Example() {
- *         const [value, setValue] = React.useState<string[]>([]);
+ *     () => {
+ *         const [value, setValue] = useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -30,7 +30,7 @@ const ALL_LABEL = 'All';
  *                 }}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxGroup
  * @phase UXReview

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -10,8 +10,9 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  * @example
  *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
+ *
  *         return (
  *             <CheckboxOption
  *                 checked={checked}
@@ -20,12 +21,11 @@ export type CheckboxOptionProps = CommonProps<'style'> & ToggleOptionControlProp
  *                 name="example-checkbox-name"
  *                 onChange={(nextChecked, event) => {
  *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
  *                 }}
  *                 value="example-checkbox-value"
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxOption
  * @phase UXReview

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -9,8 +9,9 @@ import { ToggleOption } from '../ToggleOption';
  * @example
  *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
+ *
  *         return (
  *             <CheckboxOption
  *                 checked={checked}
@@ -19,12 +20,11 @@ import { ToggleOption } from '../ToggleOption';
  *                 name="example-checkbox-name"
  *                 onChange={(nextChecked, event) => {
  *                     setChecked(nextChecked);
- *                     console.log('Checkbox changed:', nextChecked, event);
  *                 }}
  *                 value="example-checkbox-value"
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxOption
  * @phase UXReview

package/dist/components/Chip/Chip.d.ts

@@ -60,13 +60,9 @@ export type ChipProps = {
  * @example
  *     import { Chip } from '@bspk/ui/Chip';
  *
- *     function Example() {
- *         return (
- *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
+ *     <Chip label="Label" onClick={() => sendSnackbar('Chip clicked!')}>
+ *         Example Chip
+ *     </Chip>;
  *
  * @name Chip
  * @phase UXReview

package/dist/components/Chip/Chip.js

@@ -8,13 +8,9 @@ import { Badge } from '../Badge';
  * @example
  *     import { Chip } from '@bspk/ui/Chip';
  *
- *     function Example() {
- *         return (
- *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
- *                 Example Chip
- *             </Chip>
- *         );
- *     }
+ *     <Chip label="Label" onClick={() => sendSnackbar('Chip clicked!')}>
+ *         Example Chip
+ *     </Chip>;
  *
  * @name Chip
  * @phase UXReview

package/dist/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AAyDvD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,IAAI,CAAC,EACjB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,YAAY,EACZ,aAAa,GACL;IACR,OAAO,CACH,+BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,oCAEpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,aAEtC,cAAc,CAAC,WAAW,CAAC,IAAI,CAC5B,8BAAkB,MAAM,oCACnB,WAAW,GACT,CACV,EACD,yBAAO,KAAK,GAAQ,EACnB,cAAc,CAAC,YAAY,CAAC,IAAI,CAC7B,8BAAkB,MAAM,oCACnB,YAAY,GACV,CACV,EACA,aAAa,IAAI,CAAC,YAAY,IAAI,CAC/B,KAAC,KAAK,IACF,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,aAAa,EAAE,aAAa,CAAC,aAAa,GAC5C,CACL,EACD,2CAA0B,IACrB,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AAyDvD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,IAAI,CAAC,EACjB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,YAAY,EACZ,aAAa,GACL;IACR,OAAO,CACH,+BACc,MAAM,mBACD,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,oCAEpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,aAEtC,cAAc,CAAC,WAAW,CAAC,IAAI,CAC5B,8BAAkB,MAAM,oCACnB,WAAW,GACT,CACV,EACD,yBAAO,KAAK,GAAQ,EACnB,cAAc,CAAC,YAAY,CAAC,IAAI,CAC7B,8BAAkB,MAAM,oCACnB,YAAY,GACV,CACV,EACA,aAAa,IAAI,CAAC,YAAY,IAAI,CAC/B,KAAC,KAAK,IACF,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,aAAa,EAAE,aAAa,CAAC,aAAa,GAC5C,CACL,EACD,2CAA0B,IACrB,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Chip/ChipExample.js

@@ -4,6 +4,9 @@ export const presets = [
         label: 'Basic',
         propState: {
             label: 'chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
@@ -11,15 +14,17 @@ export const presets = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
         },
     },
     {
         label: 'Trailing Icon',
         propState: {
             label: 'chip',
-            leadingIcon: '',
+            leadingIcon: undefined,
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -28,6 +33,7 @@ export const presets = [
             label: 'chip',
             leadingIcon: 'Add',
             trailingIcon: 'Add',
+            trailingBadge: undefined,
         },
     },
     {
@@ -36,6 +42,7 @@ export const presets = [
             label: 'chip',
             leadingIcon: 'Bumblebee',
             trailingIcon: 'Rabbit',
+            trailingBadge: undefined,
         },
     },
     {
@@ -43,7 +50,7 @@ export const presets = [
         propState: {
             label: 'chip',
             leadingIcon: 'Add',
-            trailingIcon: '',
+            trailingIcon: undefined,
             trailingBadge: { count: 2, size: 'x-small' },
         },
     },
@@ -55,6 +62,46 @@ export const presets = [
             trailingBadge: { count: 2, size: 'x-small' },
         },
     },
+    {
+        label: 'Assist Chip',
+        propState: {
+            label: 'Assist Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern: 'A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons. ',
+    },
+    {
+        label: 'Filter Chip',
+        propState: {
+            label: 'Filter Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'KeyboardArrowDown',
+            trailingBadge: undefined,
+        },
+        designPattern: 'Short form descriptive words that filter out content or represent active filter setting.',
+    },
+    {
+        label: 'Input Chip',
+        propState: {
+            label: 'Input Chip',
+            leadingIcon: 'Cloud',
+            trailingIcon: 'Close',
+            trailingBadge: undefined,
+        },
+        designPattern: 'A range of short form key words or pieces of information a customer enters within multi entry field.',
+    },
+    {
+        label: 'Suggest Chip',
+        propState: {
+            label: 'Suggest Chip',
+            leadingIcon: undefined,
+            trailingIcon: undefined,
+            trailingBadge: undefined,
+        },
+        designPattern: 'Dynamically generated options that are suggested to the customer as responses or prompts. ',
+    },
 ];
 export const ChipExample = {
     render: ({ props, Component }) => _jsx(Component, { ...props }),

package/dist/components/Chip/ChipExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipExample.js","sourceRoot":"","sources":["../../../src/components/Chip/ChipExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAAwB;IACxC;QACI,KAAK,EAAE,OAAO;QACd,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;SAChB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,EAAE;SACnB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,EAAE;YACf,YAAY,EAAE,KAAK;SACtB;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;SACtB;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,QAAQ;SACzB;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,OAAO;YACrB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO;CACV,CAAC"}
+{"version":3,"file":"ChipExample.js","sourceRoot":"","sources":["../../../src/components/Chip/ChipExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAAwB;IACxC;QACI,KAAK,EAAE,OAAO;QACd,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,SAAS;YACtB,YAAY,EAAE,SAAS;YACvB,aAAa,EAAE,SAAS;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,SAAS;YACvB,aAAa,EAAE,SAAS;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,SAAS;YACtB,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,SAAS;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,KAAK;YACnB,aAAa,EAAE,SAAS;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,WAAW;YACxB,YAAY,EAAE,QAAQ;YACtB,aAAa,EAAE,SAAS;SAC3B;KACJ;IACD;QACI,KAAK,EAAE,gBAAgB;QACvB,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,WAAW,EAAE,KAAK;YAClB,YAAY,EAAE,SAAS;YACvB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;IACD;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,KAAK,EAAE,MAAM;YACb,YAAY,EAAE,OAAO;YACrB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAA8B,EAAE;SACpE;KACJ;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,OAAO;YACpB,YAAY,EAAE,SAAS;YACvB,aAAa,EAAE,SAAS;SAC3B;QACD,aAAa,EACT,sHAAsH;KAC7H;IACD;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,KAAK,EAAE,aAAa;YACpB,WAAW,EAAE,OAAO;YACpB,YAAY,EAAE,mBAAmB;YACjC,aAAa,EAAE,SAAS;SAC3B;QACD,aAAa,EAAE,0FAA0F;KAC5G;IACD;QACI,KAAK,EAAE,YAAY;QACnB,SAAS,EAAE;YACP,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,OAAO;YACpB,YAAY,EAAE,OAAO;YACrB,aAAa,EAAE,SAAS;SAC3B;QACD,aAAa,EACT,sGAAsG;KAC7G;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,KAAK,EAAE,cAAc;YACrB,WAAW,EAAE,SAAS;YACtB,YAAY,EAAE,SAAS;YACvB,aAAa,EAAE,SAAS;SAC3B;QACD,aAAa,EAAE,4FAA4F;KAC9G;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAgC;IACpD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,OAAO;CACV,CAAC"}

package/dist/components/ChipGroup/ChipGroup.d.ts

@@ -16,18 +16,29 @@ export type ChipGroupProps = {
  * A component that manages the layout of a group of chips.
  *
  * @example
- *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *     import { Chip } from '@bspk/ui/Chip';
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     function Example() {
- *         return (
- *             <ChipGroup wrap={false}>
- *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
- *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
- *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
- *             </ChipGroup>
- *         );
- *     }
+ *     <ChipGroup wrap={false}>
+ *         <Chip
+ *             label="chip 1"
+ *             leadingIcon={<SvgLightbulb />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 2"
+ *             leadingIcon={<SvgIcecream />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 3"
+ *             leadingIcon={<SvgSignLanguage />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgClose />}
+ *         />
+ *     </ChipGroup>;
  *
  * @name ChipGroup
  * @phase UXReview

package/dist/components/ChipGroup/ChipGroup.js

@@ -4,18 +4,29 @@ import './chip-group.css.js';
  * A component that manages the layout of a group of chips.
  *
  * @example
- *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *     import { Chip } from '@bspk/ui/Chip';
+ *     import { ChipGroup } from '@bspk/ui/ChipGroup';
  *
- *     function Example() {
- *         return (
- *             <ChipGroup wrap={false}>
- *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
- *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
- *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
- *             </ChipGroup>
- *         );
- *     }
+ *     <ChipGroup wrap={false}>
+ *         <Chip
+ *             label="chip 1"
+ *             leadingIcon={<SvgLightbulb />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 2"
+ *             leadingIcon={<SvgIcecream />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgChevronRight />}
+ *         />
+ *         <Chip
+ *             label="chip 3"
+ *             leadingIcon={<SvgSignLanguage />}
+ *             onClick={() => action('Chip clicked!')}
+ *             trailingIcon={<SvgClose />}
+ *         />
+ *     </ChipGroup>;
  *
  * @name ChipGroup
  * @phase UXReview

package/dist/components/ChipGroup/ChipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/ChipGroup/ChipGroupExample.js

@@ -13,6 +13,7 @@ export const presets = [
     { label: 'wrap', propState: { wrap: true } },
 ];
 export const ChipGroupExample = ({ action }) => ({
+    containerStyle: { width: '600px' },
     presets,
     render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');

package/dist/components/ChipGroup/ChipGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAE3D,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,cAAc,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3D,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC,CAAC"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -26,22 +26,23 @@ export type DatePickerProps = FieldControlProps<Date | undefined> & Pick<InputPr
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
- *     }
- *
- *     function ExampleWithField() {
+ *     () => {
  *         const [date, setDate] = useState<Date | undefined>(new Date());
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Date</FieldLabel>
- *                 <DatePicker name="date1" value={date} onChange={setDate} />
- *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone date picker example
+ *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
+ *                 <br />
+ *                 // date picker used within a field
+ *                 <Field>
+ *                     <FieldLabel>Date</FieldLabel>
+ *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name DatePicker
  * @phase UXReview

package/dist/components/DatePicker/DatePicker.js

@@ -22,22 +22,23 @@ const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString
  *     import { Field, FieldLabel } from '@bspk/ui/Field';
  *     import { useState } from 'react';
  *
- *     function ExampleStandalone() {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
- *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
- *     }
- *
- *     function ExampleWithField() {
+ *     () => {
  *         const [date, setDate] = useState<Date | undefined>(new Date());
  *
  *         return (
- *             <Field>
- *                 <FieldLabel>Date</FieldLabel>
- *                 <DatePicker name="date1" value={date} onChange={setDate} />
- *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
- *             </Field>
+ *             <>
+ *                 // standalone date picker example
+ *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
+ *                 <br />
+ *                 // date picker used within a field
+ *                 <Field>
+ *                     <FieldLabel>Date</FieldLabel>
+ *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *                 </Field>
+ *             </>
  *         );
- *     }
+ *     };
  *
  * @name DatePicker
  * @phase UXReview

package/dist/components/DatePicker/DatePicker.js.map

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

package/dist/components/Dialog/Dialog.d.ts

@@ -50,24 +50,29 @@ export type DialogProps = CommonProps<'id' | 'owner'> & Pick<PortalProps, 'conta
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
+ * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
  *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
+ *                         <h1>Dialog Title</h1>
+ *                         <p>This is the content of the dialog.</p>
+ *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                     </div>
  *                 </Dialog>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Dialog
  * @phase Utility

package/dist/components/Dialog/Dialog.js

@@ -9,24 +9,29 @@ import { useId } from '../../hooks/useId';
  * Dialogs display important information that users need to acknowledge. They appear over the interface and block
  * further interactions until an action is selected.
  *
+ * This is a low-level component that provides the container and functionality for dialogs. You will typically want to
+ * use a higher-level component that provides a consistent UI and behavior for dialogs such as Modal.
+ *
  * @example
  *     import { Dialog } from '@bspk/ui/Dialog';
  *     import { Button } from '@bspk/ui/Button';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
  *                 <Button label="Open Dialog" onClick={() => setOpen(true)} />
  *                 <Dialog open={open} onClose={() => setOpen(false)}>
- *                     <h1>Dialog Title</h1>
- *                     <p>This is the content of the dialog.</p>
- *                     <button onClick={() => setOpen(false)}>Close</button>
+ *                     <div style={{ padding: 'var(--spacing-sizing-04)' }}>
+ *                         <h1>Dialog Title</h1>
+ *                         <p>This is the content of the dialog.</p>
+ *                         <Button label="Cancel" variant="secondary" onClick={() => setOpen(false)} />
+ *                     </div>
  *                 </Dialog>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Dialog
  * @phase Utility

package/dist/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkDtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,SAAS,GAAG,QAAQ,EACpB,SAAS,GAAG,IAAI,EAChB,SAAS,GAAG,KAAK,EACjB,EAAE,EAAE,MAAM,EACV,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,GAAG,cAAc,EACc;IAC/B,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAElH,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QAC/D,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACR,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC;YAC7C,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC3D,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1B,OAAO,CACH,IAAI,IAAI,CACJ,MAAC,MAAM,IAAC,SAAS,EAAE,SAAS,aACxB,iBACQ,cAAc,eACR,QAAQ,qBACD,KAAK,IAAI,SAAS,oBACnB,SAAS,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,cAAc,YAEnB,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;wBACd,uBAAuB,EAAE,IAAI;wBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;qBACvC,YAED,0DAEqB,SAAS,EAC1B,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;4BACV,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;wBAC1B,CAAC,EACD,QAAQ,EAAE,CAAC,CAAC,YAEX,QAAQ,GACP,GACE,GACV,EACN,KAAC,KAAK,IACF,OAAO,EAAE,GAAG,EAAE;oBACV,OAAO,EAAE,CAAC;gBACd,CAAC,EACD,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,SAAS,KAAK,KAAK,GAC9B,IACG,CACZ,CACJ,CAAC;AACN,CAAC"}

package/dist/components/Divider/Divider.d.ts

@@ -37,15 +37,11 @@ export type DividerProps = {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
+ *     <div>
+ *         <p>Content above the divider</p>
+ *         <Divider orientation="horizontal" />
+ *         <p>Content below the divider</p>
+ *     </div>;
  *
  * @name Divider
  * @phase UXReview

package/dist/components/Divider/Divider.js

@@ -16,15 +16,11 @@ const insetToVariable = (insetProp) => {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     function Example() {
- *         return (
- *             <div>
- *                 <p>Content above the divider</p>
- *                 <Divider orientation="horizontal" />
- *                 <p>Content below the divider</p>
- *             </div>
- *         );
- *     }
+ *     <div>
+ *         <p>Content above the divider</p>
+ *         <Divider orientation="horizontal" />
+ *         <p>Content below the divider</p>
+ *     </div>;
  *
  * @name Divider
  * @phase UXReview

package/dist/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA+B1C,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA+B1C,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

package/dist/components/Divider/DividerExample.js

@@ -12,6 +12,21 @@ export const DividerExample = {
                 maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
             }, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
     },
-    presets,
+    presets: [
+        {
+            label: 'Divider - Horizontal',
+            designPattern: 'Horizontal thin line that separates grouped content in a list or other containers with the option to include a section/group label.',
+            propState: {
+                orientation: 'horizontal',
+            },
+        },
+        {
+            label: 'Divider - Vertical',
+            designPattern: 'Vertical thin line that separates grouped content or other visual elements within a container.',
+            propState: {
+                orientation: 'vertical',
+            },
+        },
+    ],
 };
 //# sourceMappingURL=DividerExample.js.map

package/dist/components/Divider/DividerExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;IACD,OAAO;CACV,CAAC"}
+{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,sBAAsB;YAC7B,aAAa,EACT,qIAAqI;YACzI,SAAS,EAAE;gBACP,WAAW,EAAE,YAAY;aAC5B;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,aAAa,EACT,gGAAgG;YACpG,SAAS,EAAE;gBACP,WAAW,EAAE,UAAU;aAC1B;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/Drawer/Drawer.d.ts

@@ -47,8 +47,8 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
- *     function Example() {
- *         const [open, setOpen] = React.useState(false);
+ *     () => {
+ *         const [open, setOpen] = useState(false);
  *
  *         return (
  *             <>
@@ -66,7 +66,7 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *                 </Drawer>
  *             </>
  *         );
- *     }
+ *     };
  *
  * @name Drawer
  * @phase UXReview