@bspk/ui 1.3.8 → 1.3.9

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

@@ -1 +1 @@
-{"version":3,"file":"BottomNavigationExample.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigationExample.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BottomNavigationExample.js","sourceRoot":"","sources":["../../../src/components/BottomNavigation/BottomNavigationExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,OAAO,GAAoC;IACpD;QACI,KAAK,EAAE,eAAe;QACtB,SAAS,EAAE;YACP,OAAO,EAAE;gBACL;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,UAAU;oBAChB,YAAY,EAAE,cAAc;iBAC/B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,OAAO;oBACb,YAAY,EAAE,WAAW;iBAC5B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,YAAY;oBAClB,YAAY,EAAE,gBAAgB;iBACjC;aACJ;YACD,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,aAAa;SACvB;KACJ;IACD;QACI,KAAK,EAAE,cAAc;QACrB,SAAS,EAAE;YACP,OAAO,EAAE;gBACL;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,0BAA0B;oBACjC,IAAI,EAAE,UAAU;oBAChB,YAAY,EAAE,cAAc;iBAC/B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,0BAA0B;oBACjC,IAAI,EAAE,OAAO;oBACb,YAAY,EAAE,WAAW;iBAC5B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,0BAA0B;oBACjC,IAAI,EAAE,YAAY;oBAClB,YAAY,EAAE,gBAAgB;iBACjC;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,0BAA0B;oBACjC,IAAI,EAAE,OAAO;oBACb,YAAY,EAAE,WAAW;iBAC5B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,0BAA0B;oBACjC,IAAI,EAAE,QAAQ;oBACd,YAAY,EAAE,YAAY;iBAC7B;aACJ;YACD,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,aAAa;SACvB;KACJ;IACD;QACI,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE;YACP,OAAO,EAAE;gBACL;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,UAAU;oBAChB,YAAY,EAAE,cAAc;iBAC/B;gBACD;oBACI,KAAK,EAAE,GAAG;oBACV,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,OAAO;oBACb,YAAY,EAAE,WAAW;oBACzB,QAAQ,EAAE,IAAI;iBACjB;aACJ;YACD,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,aAAa;SACvB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAA4C;IAC5E,cAAc,EAAE;QACZ,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,CAAC;QACV,cAAc,EAAE,KAAK;KACxB;IACD,YAAY,EAAE;QACV,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YACnD,GAAG,MAAM;YACT,IAAI,EAAE,SAAS;YACf,YAAY,EAAE,SAAS;SAC1B,CAAC,CAAC;QACH,KAAK,EAAE,aAAa;KACvB;IACD,YAAY,EAAE,EAAE;IAChB,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/BottomNavigation/bottom-navigation.css

@@ -4,6 +4,7 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] {
   box-sizing: border-box;
   background-color: var(--background-base);
   height: var(--spacing-sizing-13);
+  gap: var(--spacing-sizing-02);
 }
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-variant=elevated] {
   box-shadow: var(--drop-shadow-north);
@@ -18,7 +19,7 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
   color: var(--foreground-neutral-on-surface-variant-02);
   font: var(--labels-x-small);
   flex-direction: column;
-  gap: 0;
+  justify-content: center;
   overflow: hidden;
 }
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
@@ -45,6 +46,12 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-disabled=tru
 [data-pseudo=active] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:first-child {
+  padding-left: var(--spacing-sizing-02);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:last-child {
+  padding-right: var(--spacing-sizing-02);
+}
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-mode=fixed] {
   position: fixed;
   bottom: 0;

package/dist/components/BottomNavigation/bottom-navigation.css.js

@@ -7,6 +7,7 @@ style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list][data-b
   box-sizing: border-box;
   background-color: var(--background-base);
   height: var(--spacing-sizing-13);
+  gap: var(--spacing-sizing-02);
 }
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-variant=elevated] {
   box-shadow: var(--drop-shadow-north);
@@ -21,7 +22,7 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li {
   color: var(--foreground-neutral-on-surface-variant-02);
   font: var(--labels-x-small);
   flex-direction: column;
-  gap: 0;
+  justify-content: center;
   overflow: hidden;
 }
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[data-pseudo=focus] > ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li, ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:focus-visible {
@@ -48,6 +49,12 @@ ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li[aria-disabled=tru
 [data-pseudo=active] ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]), ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:not([aria-disabled=true]):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:first-child {
+  padding-left: var(--spacing-sizing-02);
+}
+ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation] li:last-child {
+  padding-right: var(--spacing-sizing-02);
+}
 ul[data-bspk-utility=tab-list][data-bspk=bottom-navigation][data-mode=fixed] {
   position: fixed;
   bottom: 0;

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -33,24 +33,23 @@ export type BreadcrumbProps = CommonProps<'id'> & ScrollListItemsStyleProps & {
  * @example
  *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
  *
- *     function Example() {
- *         return (
- *             <Breadcrumb
- *                 items={[
- *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <Breadcrumb
+ *         id="example-breadcrumb"
+ *         scrollLimit={5}
+ *         items={[
+ *             { label: 'Brioche', href: '#brioche' },
+ *             { label: 'Whole Wheat', href: '#whole-wheat' },
+ *             { label: 'Sourdough', href: '#sourdough' },
+ *             { label: 'Rye', href: '#rye' },
+ *             { label: 'Multigrain', href: '#multigrain' },
+ *             { label: 'Baguette', href: '#baguette' },
+ *             { label: 'Focaccia', href: '#focaccia' },
+ *             { label: 'Ciabatta', href: '#ciabatta' },
+ *             { label: 'Pita', href: '#pita' },
+ *             { label: 'Naan', href: '#naan' },
+ *             { label: 'Flatbread', href: '#flatbread' },
+ *         ]}
+ *     />;
  *
  * @name Breadcrumb
  * @phase UXReview

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -11,24 +11,23 @@ import { useId } from '../../hooks/useId';
  * @example
  *     import { Breadcrumb } from '@bspk/ui/breadcrumb';
  *
- *     function Example() {
- *         return (
- *             <Breadcrumb
- *                 items={[
- *                     { label: 'level 1', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 2', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 3', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 4', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 5', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 6', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 7', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 8', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 9', href: 'https://bspk.anywhere.re' },
- *                     { label: 'level 10', href: 'https://bspk.anywhere.re' },
- *                 ]}
- *             />
- *         );
- *     }
+ *     <Breadcrumb
+ *         id="example-breadcrumb"
+ *         scrollLimit={5}
+ *         items={[
+ *             { label: 'Brioche', href: '#brioche' },
+ *             { label: 'Whole Wheat', href: '#whole-wheat' },
+ *             { label: 'Sourdough', href: '#sourdough' },
+ *             { label: 'Rye', href: '#rye' },
+ *             { label: 'Multigrain', href: '#multigrain' },
+ *             { label: 'Baguette', href: '#baguette' },
+ *             { label: 'Focaccia', href: '#focaccia' },
+ *             { label: 'Ciabatta', href: '#ciabatta' },
+ *             { label: 'Pita', href: '#pita' },
+ *             { label: 'Naan', href: '#naan' },
+ *             { label: 'Flatbread', href: '#flatbread' },
+ *         ]}
+ *     />;
  *
  * @name Breadcrumb
  * @phase UXReview

package/dist/components/Breadcrumb/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAkB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAgCtC;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,EAAmB;IAC/E,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAElC,OAAO,CACH,4BAAgB,YAAY,eAAW,YAAY,EAAC,EAAE,EAAE,EAAE,YACtD,yBACI,yBACI,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,EACpD,KAAC,eAAe,0BAAe,IAC9B,EACJ,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChB,KAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CACpG,CAAC,CAAC,CAAC,CACA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAChD,yBACI,KAAC,IAAI,OAAK,IAAI,GAAI,EAClB,KAAC,eAAe,0BAAe,KAF1B,cAAc,GAAG,EAAE,CAGvB,CACR,CAAC,CACL,EACD,6BAAiB,MAAM,YACnB,KAAC,GAAG,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,GAAO,GAC7D,IACJ,GACH,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"Breadcrumb.js","sourceRoot":"","sources":["../../../src/components/Breadcrumb/Breadcrumb.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,kBAAkB,EAAkB,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAgCtC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,WAAW,EAAmB;IAC/E,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QAAE,OAAO,IAAI,CAAC;IAElC,OAAO,CACH,4BAAgB,YAAY,eAAW,YAAY,EAAC,EAAE,EAAE,EAAE,YACtD,yBACI,yBACI,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAI,EACpD,KAAC,eAAe,0BAAe,IAC9B,EACJ,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAChB,KAAC,kBAAkB,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CACpG,CAAC,CAAC,CAAC,CACA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,CAAC,CAChD,yBACI,KAAC,IAAI,OAAK,IAAI,GAAI,EAClB,KAAC,eAAe,0BAAe,KAF1B,cAAc,GAAG,EAAE,CAGvB,CACR,CAAC,CACL,EACD,6BAAiB,MAAM,YACnB,KAAC,GAAG,IAAC,OAAO,EAAC,WAAW,YAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,GAAO,GAC7D,IACJ,GACH,CACT,CAAC;AACN,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -79,17 +79,7 @@ export type ButtonProps<As extends ElementType = ElementType> = CommonProps<'dis
  *     import { Button } from '@bspk/ui/Button';
  *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
+ *     <Button label="Click Me" size="medium" onClick={() => action('Button clicked')} icon={<SvgPerson />} />;
  *
  * @name Button
  * @phase UXReview

package/dist/components/Button/Button.js

@@ -9,17 +9,7 @@ import { Tooltip } from '../Tooltip';
  *     import { Button } from '@bspk/ui/Button';
  *     import { SvgPerson } from '@bspk/icons/Person';
  *
- *     function Example() {
- *         return (
- *             <Button
- *                 label="Click Me"
- *                 size="medium"
- *                 variant="primary"
- *                 onClick={() => console.log('Button clicked')}
- *                 icon={<SvgPerson />}
- *             />
- *         );
- *     }
+ *     <Button label="Click Me" size="medium" onClick={() => action('Button clicked')} icon={<SvgPerson />} />;
  *
  * @name Button
  * @phase UXReview

package/dist/components/Button/Button.js.map

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

package/dist/components/Button/ButtonExample.js

@@ -1,5 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SvgPerson } from '@bspk/icons/Person';
 export const presets = [
     {
         label: 'Icon & Text',
@@ -29,7 +27,7 @@ export const presets = [
 export const ButtonExample = {
     presets,
     variants: {
-        iconOnly: () => ({ icon: _jsx(SvgPerson, {}), label: 'Person' }),
+        iconOnly: { icon: 'Person', label: 'Person' },
     },
 };
 //# sourceMappingURL=ButtonExample.js.map

package/dist/components/Button/ButtonExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;SACf;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;IACP,QAAQ,EAAE;QACN,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC7D;CACJ,CAAC"}
+{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,aAAa;QACpB,SAAS,EAAE;YACP,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;YACZ,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,KAAK,EAAE,KAAK;YACZ,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,KAAK;SAClB;KACJ;IACD;QACI,KAAK,EAAE,WAAW;QAClB,SAAS,EAAE;YACP,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,KAAK;YACX,KAAK,EAAE,KAAK;SACf;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO;IACP,QAAQ,EAAE;QACN,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;KAChD;CACJ,CAAC"}

package/dist/components/ButtonDock/ButtonDock.d.ts

@@ -33,20 +33,16 @@ export type ButtonDockProps = {
  * @example
  *     import { ButtonDock } from '@bspk/ui/ButtonDock';
  *
- *     function Example() {
- *         return (
- *             <ButtonDock
- *                 primaryButton={{
- *                     children: 'Send',
- *                     label: 'send',
- *                 }}
- *                 secondaryButton={{
- *                     children: 'Cancel',
- *                     label: 'cancel',
- *                 }}
- *             />
- *         );
- *     }
+ *     <ButtonDock
+ *         primaryButton={{
+ *             children: 'Send',
+ *             label: 'send',
+ *         }}
+ *         secondaryButton={{
+ *             children: 'Cancel',
+ *             label: 'cancel',
+ *         }}
+ *     />;
  *
  * @name ButtonDock
  * @phase Dev

package/dist/components/ButtonDock/ButtonDock.js

@@ -8,20 +8,16 @@ import { Button } from '../Button/Button';
  * @example
  *     import { ButtonDock } from '@bspk/ui/ButtonDock';
  *
- *     function Example() {
- *         return (
- *             <ButtonDock
- *                 primaryButton={{
- *                     children: 'Send',
- *                     label: 'send',
- *                 }}
- *                 secondaryButton={{
- *                     children: 'Cancel',
- *                     label: 'cancel',
- *                 }}
- *             />
- *         );
- *     }
+ *     <ButtonDock
+ *         primaryButton={{
+ *             children: 'Send',
+ *             label: 'send',
+ *         }}
+ *         secondaryButton={{
+ *             children: 'Cancel',
+ *             label: 'cancel',
+ *         }}
+ *     />;
  *
  * @name ButtonDock
  * @phase Dev

package/dist/components/ButtonDock/ButtonDock.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonDock.js","sourceRoot":"","sources":["../../../src/components/ButtonDock/ButtonDock.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAe,MAAM,4BAA4B,CAAC;AA6BjE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAmB;IACjH,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;IAEhE,OAAO,CACH,mCAAuB,gBAAgB,eAAY,aAAa,eAAY,IAAI,aAC3E,eAAe,IAAI,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,eAAe,GAAM,EAEhG,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,aAAa,GAAM,IACtE,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ButtonDock.js","sourceRoot":"","sources":["../../../src/components/ButtonDock/ButtonDock.tsx"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAe,MAAM,4BAA4B,CAAC;AA6BjE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAmB;IACjH,MAAM,gBAAgB,GAAG,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC;IAEhE,OAAO,CACH,mCAAuB,gBAAgB,eAAY,aAAa,eAAY,IAAI,aAC3E,eAAe,IAAI,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,GAAG,eAAe,GAAM,EAEhG,KAAC,MAAM,IAAO,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,aAAa,GAAM,IACtE,CACT,CAAC;AACN,CAAC"}

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import './card.scss';
 import { ReactNode } from 'react';
-import { ElementProps } from '-/types/common';
+import { ElementProps, SetRef } from '-/types/common';
 export type CardProps = {
     /**
      * The content of the card.
@@ -14,6 +14,8 @@ export type CardProps = {
      * @default elevated
      */
     variant?: 'elevated' | 'outlined';
+    /** A ref to the list item div element. */
+    innerRef?: SetRef<HTMLElement>;
 };
 /**
  * Cards are often rectangular and contain various content, such as text, images, icons, multimedia, and interactive
@@ -25,17 +27,13 @@ export type CardProps = {
  * @example
  *     import { Card } from '@bspk/ui/card';
  *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
+ *     <Card variant="elevated" style={{ padding: 'var(--spacing-sizing-04)', maxWidth: '100%', width: '400px' }}>
+ *         <h3>Card Title</h3>
+ *         <p>This is some content inside the card.</p>
+ *     </Card>;
  *
  * @name Card
  * @phase UXReview
  */
-export declare function Card({ children, variant, ...props }: ElementProps<CardProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ children, variant, innerRef, ...props }: ElementProps<CardProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -10,19 +10,15 @@ import './card.css.js';
  * @example
  *     import { Card } from '@bspk/ui/card';
  *
- *     function Example() {
- *         return (
- *             <Card variant="elevated" showPadding={false}>
- *                 <h3>Card Title</h3>
- *                 <p>This is some content inside the card.</p>
- *             </Card>
- *         );
- *     }
+ *     <Card variant="elevated" style={{ padding: 'var(--spacing-sizing-04)', maxWidth: '100%', width: '400px' }}>
+ *         <h3>Card Title</h3>
+ *         <p>This is some content inside the card.</p>
+ *     </Card>;
  *
  * @name Card
  * @phase UXReview
  */
-export function Card({ children, variant = 'elevated', ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "card", "data-variant": variant, children: children }));
+export function Card({ children, variant = 'elevated', innerRef, ...props }) {
+    return (_jsx("div", { ...props, "data-bspk": "card", "data-variant": variant, ref: innerRef, children: children }));
 }
 //# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAmBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,GAAG,KAAK,EAAkC;IAC7F,OAAO,CACH,iBAAS,KAAK,eAAY,MAAM,kBAAe,OAAO,YACjD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAqBrB;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkC;IACvG,OAAO,CACH,iBAAS,KAAK,eAAY,MAAM,kBAAe,OAAO,EAAE,GAAG,EAAE,QAAQ,YAChE,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/Carousel/Carousel.d.ts

@@ -42,19 +42,15 @@ export type CarouselProps = {
  * @example
  *     import { Carousel } from '@bspk/ui/Carousel';
  *
- *     function Example() {
- *         return (
- *             <Carousel label="Example Carousel" width="1/2">
- *                 <div>child 1</div>
- *                 <div>child 2</div>
- *                 <div>child 3</div>
- *                 <div>child 4</div>
- *                 <div>child 5</div>
- *                 <div>child 6</div>
- *                 <div>child 7</div>
- *             </Carousel>
- *         );
- *     }
+ *     <Carousel label="Example Carousel" width="1/2">
+ *         <div>child 1</div>
+ *         <div>child 2</div>
+ *         <div>child 3</div>
+ *         <div>child 4</div>
+ *         <div>child 5</div>
+ *         <div>child 6</div>
+ *         <div>child 7</div>
+ *     </Carousel>;
  *
  * @name Carousel
  * @phase UXReview

package/dist/components/Carousel/Carousel.js

@@ -14,19 +14,15 @@ import { handleKeyDown } from '../../utils/handleKeyDown';
  * @example
  *     import { Carousel } from '@bspk/ui/Carousel';
  *
- *     function Example() {
- *         return (
- *             <Carousel label="Example Carousel" width="1/2">
- *                 <div>child 1</div>
- *                 <div>child 2</div>
- *                 <div>child 3</div>
- *                 <div>child 4</div>
- *                 <div>child 5</div>
- *                 <div>child 6</div>
- *                 <div>child 7</div>
- *             </Carousel>
- *         );
- *     }
+ *     <Carousel label="Example Carousel" width="1/2">
+ *         <div>child 1</div>
+ *         <div>child 2</div>
+ *         <div>child 3</div>
+ *         <div>child 4</div>
+ *         <div>child 5</div>
+ *         <div>child 6</div>
+ *         <div>child 7</div>
+ *     </Carousel>;
  *
  * @name Carousel
  * @phase UXReview

package/dist/components/Carousel/Carousel.js.map

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

package/dist/components/Carousel/CarouselExample.js

@@ -1,23 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
 import { COLOR_VARIANTS } from '../../utils/colorVariants';
-function ExampleSlide({ number, onClick }) {
-    return (_jsxs("div", { "data-color": COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length], style: {
-            backgroundColor: 'var(--background)',
-            color: 'var(--foreground)',
-            borderRadius: '8px',
-            minHeight: '180px',
-            padding: 20,
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            justifyContent: 'center',
-        }, children: ["Slide ", number, onClick && (_jsx(Button, { label: "Click me", onClick: () => onClick(`Slide ${number} clicked`), variant: "tertiary" }))] }));
-}
 export const CarouselExample = ({ action }) => {
     return {
         containerStyle: { width: '100%', padding: '16px', overflow: 'hidden' },
-        render: ({ props, Component }) => (_jsx(Component, { ...props, children: Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (_jsx(ExampleSlide, { number: num, onClick: action }, num))) })),
+        render: ({ props, Component }) => (_jsx(Component, { ...props, children: Array.from({ length: props.slideCount || 7 }, (_, i) => i + 1).map((num) => (_jsx(SlidePlaceholder, { number: num, onClick: action }, num))) })),
         sections: [],
         variants: false,
         presets: [
@@ -48,4 +35,17 @@ export const CarouselExample = ({ action }) => {
         ],
     };
 };
+function SlidePlaceholder({ number, onClick }) {
+    return (_jsxs("div", { "data-color": COLOR_VARIANTS[(number + 3) % COLOR_VARIANTS.length], style: {
+            backgroundColor: 'var(--background)',
+            color: 'var(--foreground)',
+            borderRadius: '8px',
+            minHeight: '180px',
+            padding: 20,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, children: ["Slide ", number, onClick && (_jsx(Button, { label: "Click me", onClick: () => onClick(`Slide ${number} clicked`), variant: "tertiary" }))] }));
+}
 //# sourceMappingURL=CarouselExample.js.map

package/dist/components/Carousel/CarouselExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselExample.js","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,SAAS,YAAY,CAAC,EAAE,MAAM,EAAE,OAAO,EAA2D;IAC9F,OAAO,CACH,6BACgB,cAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAChE,KAAK,EAAE;YACH,eAAe,EAAE,mBAAmB;YACpC,KAAK,EAAE,mBAAmB;YAC1B,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,OAAO;YAClB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SAC3B,uBAEM,MAAM,EACZ,OAAO,IAAI,CACR,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,MAAM,UAAU,CAAC,EAAE,OAAO,EAAC,UAAU,GAAG,CACpG,IACC,CACT,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,eAAe,GAA+D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtG,OAAO;QACH,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE;QACtE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzE,KAAC,YAAY,IAAW,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAjC,GAAG,CAAkC,CAC3D,CAAC,GACM,CACf;QACD,QAAQ,EAAE,EAAE;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,QAAQ;gBACf,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAEvE;aACJ;YACD;gBACI,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"CarouselExample.js","sourceRoot":"","sources":["../../../src/components/Carousel/CarouselExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,MAAM,CAAC,MAAM,eAAe,GAA+D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;IACtG,OAAO;QACH,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE;QACtE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAC9B,KAAC,SAAS,OAAK,KAAK,YACf,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,UAAU,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACzE,KAAC,gBAAgB,IAAW,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,IAAjC,GAAG,CAAkC,CAC/D,CAAC,GACM,CACf;QACD,QAAQ,EAAE,EAAE;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE;YACL;gBACI,KAAK,EAAE,QAAQ;gBACf,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAEvE;aACJ;YACD;gBACI,KAAK,EAAE,YAAY;gBACnB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAEtE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;YACD;gBACI,KAAK,EAAE,WAAW;gBAClB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAErE;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC;AAEF,SAAS,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAA2D;IAClG,OAAO,CACH,6BACgB,cAAc,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,EAChE,KAAK,EAAE;YACH,eAAe,EAAE,mBAAmB;YACpC,KAAK,EAAE,mBAAmB;YAC1B,YAAY,EAAE,KAAK;YACnB,SAAS,EAAE,OAAO;YAClB,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;SAC3B,uBAEM,MAAM,EACZ,OAAO,IAAI,CACR,KAAC,MAAM,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,SAAS,MAAM,UAAU,CAAC,EAAE,OAAO,EAAC,UAAU,GAAG,CACpG,IACC,CACT,CAAC;AACN,CAAC"}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -34,11 +34,14 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  * @example
  *     import { Checkbox } from '@bspk/ui/Checkbox';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
  *
  *         return (
- *             <label htmlFor="sample-checkbox">
+ *             <label
+ *                 htmlFor="sample-checkbox"
+ *                 style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sizing-02)' }}
+ *             >
  *                 <Checkbox
  *                     aria-label="Sample"
  *                     checked={checked}
@@ -50,7 +53,7 @@ export type CheckboxProps = Omit<FieldControlProps, 'onChange' | 'readOnly' | 'v
  *                 Checkbox Label
  *             </label>
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Checkbox/Checkbox.js

@@ -9,11 +9,14 @@ import { useEffect, useRef } from 'react';
  * @example
  *     import { Checkbox } from '@bspk/ui/Checkbox';
  *
- *     function Example() {
- *         const [checked, setChecked] = React.useState(false);
+ *     () => {
+ *         const [checked, setChecked] = useState(false);
  *
  *         return (
- *             <label htmlFor="sample-checkbox">
+ *             <label
+ *                 htmlFor="sample-checkbox"
+ *                 style={{ display: 'flex', alignItems: 'center', gap: 'var(--spacing-sizing-02)' }}
+ *             >
  *                 <Checkbox
  *                     aria-label="Sample"
  *                     checked={checked}
@@ -25,7 +28,7 @@ import { useEffect, useRef } from 'react';
  *                 Checkbox Label
  *             </label>
  *         );
- *     }
+ *     };
  *
  * @element
  *

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAAgB,UAAU,aACtB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA6BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAAgB,UAAU,aACtB,mBACQ,KAAK,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -35,8 +35,8 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  * @example
  *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
  *
- *     function Example() {
- *         const [value, setValue] = React.useState<string[]>([]);
+ *     () => {
+ *         const [value, setValue] = useState<string[]>([]);
  *
  *         return (
  *             <CheckboxGroup
@@ -53,7 +53,7 @@ export type CheckboxGroupProps = Omit<FieldControlProps<string[]>, 'readOnly'> &
  *                 }}
  *             />
  *         );
- *     }
+ *     };
  *
  * @name CheckboxGroup
  * @phase UXReview