@bspk/ui 1.1.21 → 1.1.23

package/dist/Avatar.d.ts

@@ -59,9 +59,25 @@ export type AvatarProps = {
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
  *
- * The image if provided is displayed first, followed by the icon if provided, and finally the initials.
+ * @example
+ *     import { Avatar } from '@bspk/ui/Avatar';
+ *     import { SvgPerson } from '@bspk/icons/Person';
  *
- * If no initials are provided, the first two letters of the name will be used as initials.
+ *     function Example() {
+ *         return (
+ *             <Avatar
+ *                 name="Jane Doe"
+ *                 initials="JD"
+ *                 color="blue"
+ *                 size="large"
+ *                 icon={<SvgPerson />}
+ *                 image="/profile.jpg"
+ *                 showTooltip={true}
+ *             />
+ *         );
+ *     }
+ *
+ * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
  */

package/dist/Avatar.js

@@ -12,9 +12,25 @@ const DEFAULT = {
 /**
  * An avatar is a visual representation of a user or entity. It can be used to display an initials, icon, image.
  *
- * The image if provided is displayed first, followed by the icon if provided, and finally the initials.
+ * @example
+ *     import { Avatar } from '@bspk/ui/Avatar';
+ *     import { SvgPerson } from '@bspk/icons/Person';
  *
- * If no initials are provided, the first two letters of the name will be used as initials.
+ *     function Example() {
+ *         return (
+ *             <Avatar
+ *                 name="Jane Doe"
+ *                 initials="JD"
+ *                 color="blue"
+ *                 size="large"
+ *                 icon={<SvgPerson />}
+ *                 image="/profile.jpg"
+ *                 showTooltip={true}
+ *             />
+ *         );
+ *     }
+ *
+ * @exampleDescription The image if provided is displayed first, followed by the icon if provided, and finally the initials. If no initials are provided, the first two letters of the name will be used as initials.
  *
  * @name Avatar
  */

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAoEX;;;;;;;;GAQG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAE5D,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAa,OAAO,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,MAAM,OAAO,GAAG;IACZ,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,MAAM;IACb,WAAW,EAAE,IAAI;CACX,CAAC;AAoEX;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,SAAS,MAAM,CAAC,EACZ,QAAQ,EAAE,YAAY,EACtB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EAAE,SAAS,EACf,WAAW,GAAG,OAAO,CAAC,WAAW,GACvB;IACV,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,KAAK;YAAE,OAAO,cAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CAAC;QAEtD,IAAI,WAAW,CAAC,IAAI,CAAC;YAAE,OAAO,4CAAiB,IAAI,GAAQ,CAAC;QAE5D,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,IAAI,SAAS,IAAI,CAAC,QAAQ;YACtB,QAAQ,GAAG,SAAS;iBACf,KAAK,CAAC,GAAG,CAAC;iBACV,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;iBAC7B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;iBACX,IAAI,CAAC,EAAE,CAAC;iBACR,WAAW,EAAE,CAAC;QAEvB,IAAI,QAAQ;YAAE,OAAO,gDAAqB,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAQ,CAAC;QAEvE,OAAO,IAAI,CAAC;IAChB,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC;IAE3C,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,MAAM,MAAM,GAAG,CACX,4BAAiB,SAAS,eAAY,QAAQ,gBAAa,KAAK,eAAa,IAAI,YAC5E,QAAQ,GACP,CACT,CAAC;IAEF,OAAO,WAAW,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAE,SAAS,YAAG,MAAM,GAAW,CAAC,CAAC,CAAC,MAAM,CAAC;AAChF,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/AvatarGroup.d.ts

@@ -40,6 +40,20 @@ export type AvatarGroupProps = {
 /**
  * AvatarGroup component displays a group of avatars.
  *
+ * @example
+ *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
+ *
+ *     export function Example() {
+ *         return (
+ *             <AvatarGroup
+ *                 items={[
+ *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'John Smith', initials: 'JS' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
  * @name AvatarGroup
  */
 declare function AvatarGroup({ items, size, max, variant }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/AvatarGroup.js

@@ -5,6 +5,20 @@ styleAdd(`[data-bspk=avatar-group]{width:100%}[data-bspk=avatar-group] [data-wra
 /**
  * AvatarGroup component displays a group of avatars.
  *
+ * @example
+ *     import { AvatarGroup } from '@bspk/ui/AvatarGroup';
+ *
+ *     export function Example() {
+ *         return (
+ *             <AvatarGroup
+ *                 items={[
+ *                     { name: 'Jane Doe', image: '/path/to/image.jpg' },
+ *                     { name: 'John Smith', initials: 'JS' },
+ *                 ]}
+ *             />
+ *         );
+ *     }
+ *
  * @name AvatarGroup
  */
 function AvatarGroup({ items, size = 'small', max = 5, variant }) {

package/dist/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA4B,MAAM,UAAU,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAyC7B;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IAC9E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IAEzC,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,6CACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAAiB,IAAI,EAAE,IAAI,EAAE,IAAI,IAA3B,KAAK,CAA0B,CAC/C,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,eAAY,IAAI,YAC/C,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"AvatarGroup.js","sourceRoot":"","sources":["../src/AvatarGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAA4B,MAAM,UAAU,CAAC;AAC5D,OAAO,qBAAqB,CAAC;AAyC7B;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,OAAO,EAAE,GAAG,GAAG,CAAC,EAAE,OAAO,EAAoB;IAC9E,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;IAEzC,OAAO,CACH,2BAAe,cAAc,cAAW,GAAG,eAAa,IAAI,kBAAgB,OAAO,YAC/E,6CACK,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,KAAC,MAAM,OAAiB,IAAI,EAAE,IAAI,EAAE,IAAI,IAA3B,KAAK,CAA0B,CAC/C,CAAC,EACD,aAAa,GAAG,CAAC,IAAI,CAClB,gDAA2B,QAAQ,eAAY,IAAI,YAC/C,6DAA4B,aAAa,IAAQ,GAC/C,CACT,IACC,GACJ,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/Badge.d.ts

@@ -1,12 +1,19 @@
+import { ReactNode } from 'react';
 import './badge.scss';
 export type BadgeProps = {
     /**
      * The content of the badge. If larger than 99, the badge will display '99+'. If null or undefined, the badge will
      * be hidden.
      *
+     * @example
+     *     5;
+     *
+     * @default 1
+     *
      * @type number
+     * @minimum 1
      */
-    count?: number | string | null | undefined;
+    count?: number;
     /**
      * The size of the badge.
      *
@@ -19,13 +26,36 @@ export type BadgeProps = {
      * @default primary
      */
     variant?: 'primary' | 'secondary';
+    /**
+     * Whether the badge should have a border that matches the surface color.
+     *
+     * @default false
+     */
+    surfaceBorder?: boolean;
+    /**
+     * The context for which the badge is applied.
+     *
+     * Could be a button, link, or any other element that the badge is associated with.
+     *
+     * @type
+     */
+    children?: ReactNode;
 };
 /**
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
+ * @example
+ *     import { Badge } from '@bspk/ui/badge';
+ *
+ *     function Example() {
+ *         return <Badge count={5} size="small" variant="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
+ *
  * @name Badge
  */
-declare function Badge({ count: countProp, size, variant }: BadgeProps): false | import("react/jsx-runtime").JSX.Element;
+declare function Badge({ count: countProp, size, variant, surfaceBorder, children }: BadgeProps): import("react/jsx-runtime").JSX.Element | undefined;
 declare namespace Badge {
     var bspkName: string;
 }

package/dist/Badge.js

@@ -1,16 +1,41 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=badge]{--size: var(--spacing-sizing-06);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);width:fit-content;min-width:var(--size);padding:0 var(--spacing-sizing-02);font:var(--labels-x-small);color:var(--foreground-brand-on-primary);background:var(--surface-brand-primary)}[data-bspk=badge][data-size=x-small]{--size: var(--spacing-sizing-05);padding:2px var(--spacing-sizing-01)}[data-bspk=badge][data-variant=secondary]{color:var(--foreground-brand-on-secondary);background:var(--surface-brand-secondary)}`);;
+styleAdd(`[data-bspk=badge]{--size: var(--spacing-sizing-06);--padding-x: var(--spacing-sizing-02);--padding-y: 0;--border-width: 0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);width:fit-content;min-width:var(--size);font:var(--labels-x-small);color:var(--foreground-brand-on-primary);background:var(--surface-brand-primary);padding:calc(var(--padding-y) - var(--border-width)) calc(var(--padding-x) - var(--border-width))}[data-bspk=badge][data-size=x-small]{--size: var(--spacing-sizing-05);--padding-x: 2px;--padding-y: var(--spacing-sizing-01)}[data-bspk=badge][data-variant=secondary]{color:var(--foreground-brand-on-secondary);background:var(--surface-brand-secondary)}[data-bspk=badge][data-surface-border]{--border-width: 2px;border:2px solid var(--surface-neutral-t1-base)}[data-bspk=badge-wrapper]{display:inline-flex;align-items:center;justify-content:center;position:relative;width:fit-content;height:fit-content;flex-shrink:0}[data-bspk=badge-wrapper] [data-bspk=badge]{position:absolute;top:0;right:0;transform:scale(1) translate(50%, -50%);transform-origin:100% 0%;z-index:2}`);;
 import { tryIntParse } from './utils/tryIntPsrse';
 /**
  * Visual indicator for new items within a parent page represented with a numerical count of new items.
  *
+ * @example
+ *     import { Badge } from '@bspk/ui/badge';
+ *
+ *     function Example() {
+ *         return <Badge count={5} size="small" variant="primary" />;
+ *     }
+ *
+ * @exampleDescription This example shows a badge with a count of 5, size small, and primary variant.
+ *
  * @name Badge
  */
-function Badge({ count: countProp, size = 'small', variant = 'primary' }) {
+function Badge({ count: countProp, size = 'small', variant = 'primary', surfaceBorder, children }) {
     const count = tryIntParse(countProp);
-    return (count !== null && (_jsx("div", { "data-bspk": "badge", "data-size": size, "data-variant": variant, children: count > 99 ? '99+' : count })));
+    if (count === null)
+        return;
+    const badge = (_jsx("sup", { "data-bspk": "badge", "data-size": size, "data-surface-border": surfaceBorder || undefined, "data-variant": variant, children: count > 99 ? '99+' : count }));
+    if (children) {
+        return (_jsxs("span", { "data-bspk": "badge-wrapper", children: [children, badge] }));
+    }
+    return badge;
 }
+// position: relative;
+// display: -webkit-inline-box;
+// display: -webkit-inline-flex;
+// display: -ms-inline-flexbox;
+// display: inline-flex
+// ;
+// vertical-align: middle;
+// -webkit-flex-shrink: 0;
+// -ms-flex-negative: 0;
+// flex-shrink: 0;
 Badge.bspkName = 'Badge';
 export { Badge };
 //# sourceMappingURL=Badge.js.map

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAwBlD;;;;GAIG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAc;IAChF,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,OAAO,CACH,KAAK,KAAK,IAAI,IAAI,CACd,2BAAe,OAAO,eAAY,IAAI,kBAAgB,OAAO,YACxD,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CACJ,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.tsx"],"names":[],"mappings":";AAEA,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA4ClD;;;;;;;;;;;;;GAaG;AACH,SAAS,KAAK,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,GAAG,OAAO,EAAE,OAAO,GAAG,SAAS,EAAE,aAAa,EAAE,QAAQ,EAAc;IACzG,MAAM,KAAK,GAAkB,WAAW,CAAC,SAAS,CAAC,CAAC;IAEpD,IAAI,KAAK,KAAK,IAAI;QAAE,OAAO;IAE3B,MAAM,KAAK,GAAG,CACV,2BAAe,OAAO,eAAY,IAAI,yBAAuB,aAAa,IAAI,SAAS,kBAAgB,OAAO,YACzG,KAAK,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GACzB,CACT,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACX,OAAO,CACH,6BAAgB,eAAe,aAC1B,QAAQ,EACR,KAAK,IACH,CACV,CAAC;IACN,CAAC;IAED,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,sBAAsB;AACtB,+BAA+B;AAC/B,gCAAgC;AAChC,+BAA+B;AAC/B,uBAAuB;AACvB,IAAI;AACJ,0BAA0B;AAC1B,0BAA0B;AAC1B,wBAAwB;AACxB,kBAAkB;AAElB,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/BannerAlert.d.ts

@@ -43,6 +43,23 @@ export type BannerAlertProps = {
  * A visual and contextual message used to communicate an important message or notification to users relating to a
  * status or the body content of a page.
  *
+ * @example
+ *     import { BannerAlert } from '@bspk/ui/BannerAlert';
+ *
+ *     function Example() {
+ *         <BannerAlert
+ *             variant="error"
+ *             header="Error"
+ *             body="There was an error processing your request."
+ *             onClose={() => console.log('Alert closed')}
+ *         />;
+ *     }
+ *
+ * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
+ *
+ *
+ *
+ *
  * @name BannerAlert
  */
 declare function BannerAlert({ variant, onClose, header, callToAction, body, elevated, }: ElementProps<BannerAlertProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/BannerAlert.js

@@ -10,6 +10,23 @@ styleAdd(`[data-bspk=banner-alert]{--color: var(--status-information);--on-color
  * A visual and contextual message used to communicate an important message or notification to users relating to a
  * status or the body content of a page.
  *
+ * @example
+ *     import { BannerAlert } from '@bspk/ui/BannerAlert';
+ *
+ *     function Example() {
+ *         <BannerAlert
+ *             variant="error"
+ *             header="Error"
+ *             body="There was an error processing your request."
+ *             onClose={() => console.log('Alert closed')}
+ *         />;
+ *     }
+ *
+ * @exampleDescription This example shows how to use the BannerAlert component with an error variant, a header, and a body message.
+ *
+ *
+ *
+ *
  * @name BannerAlert
  */
 function BannerAlert({ variant = 'informational', onClose, header, callToAction, body, elevated = false, }) {

package/dist/BannerAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../src/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,qBAAqB,CAAC;AA2C7B;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"BannerAlert.js","sourceRoot":"","sources":["../src/BannerAlert.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEzD,OAAO,qBAAqB,CAAC;AA2C7B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,SAAS,WAAW,CAAC,EACjB,OAAO,GAAG,eAAe,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,QAAQ,GAAG,KAAK,GACoB;IACpC,OAAO,CACH,gCAAmB,cAAc,mBAAgB,QAAQ,IAAI,SAAS,kBAAgB,OAAO,aACzF,iDACK,OAAO,KAAK,OAAO,IAAI,KAAC,YAAY,KAAG,EACvC,OAAO,KAAK,eAAe,IAAI,KAAC,WAAW,KAAG,EAC9C,OAAO,KAAK,SAAS,IAAI,KAAC,kBAAkB,KAAG,EAC/C,OAAO,KAAK,SAAS,IAAI,KAAC,cAAc,KAAG,IAC1C,EACN,gDACK,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CACpB,6BACI,yBAAO,MAAM,GAAQ,EACpB,OAAO,OAAO,KAAK,UAAU,IAAI,CAC9B,+BAAmB,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,YACtD,KAAC,QAAQ,KAAG,GACP,CACZ,IACI,CACZ,EACD,6CACI,yBAAO,IAAI,GAAQ,EAClB,YAAY,EAAE,KAAK,IAAI,YAAY,EAAE,OAAO,IAAI,CAC7C,iBAAQ,OAAO,EAAE,YAAY,CAAC,OAAO,YAAG,YAAY,CAAC,KAAK,GAAU,CACvE,IACC,IACJ,IACA,CACb,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/Button.d.ts

@@ -66,6 +66,22 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
 /**
  * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
  *
+ * @example
+ *     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 />}
+ *             />
+ *         );
+ *     }
+ *
  * @name Button
  */
 declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;

package/dist/Button.js

@@ -8,6 +8,22 @@ import { useErrorLogger } from './utils/errors';
 /**
  * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
  *
+ * @example
+ *     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 />}
+ *             />
+ *         );
+ *     }
+ *
  * @name Button
  */
 function Button(props) {

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;GAIG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,OAAO,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE7D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAoEhD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,SAAS,EAAE,aAAa,GAAG,IAAI,EAC/B,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC;IAElD,MAAM,OAAO,GAAG,WAAW,IAAI,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAE7D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,KAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,kBACD,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,YAE9B,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACI,2CAA0B,EACzB,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,GACA,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/Card.d.ts

@@ -27,6 +27,18 @@ export type CardProps = {
  * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
  * details.
  *
+ * @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>
+ *         );
+ *     }
+ *
  * @name Card
  */
 declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Card.js

@@ -8,6 +8,18 @@ styleAdd(`[data-bspk=card]{display:block;background:var(--surface-neutral-t1-bas
  * They are similar in size and shape to playing cards and are intended to encourage users to click or tap to view more
  * details.
  *
+ * @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>
+ *         );
+ *     }
+ *
  * @name Card
  */
 function Card({ children, showPadding, variant = 'elevated' }) {

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAwBrB;;;;;;;;GAQG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAwBrB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,SAAS,IAAI,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,GAAG,UAAU,EAAa;IACpE,OAAO,CACH,2BAAe,MAAM,uBAAoB,WAAW,KAAK,KAAK,IAAI,SAAS,kBAAgB,OAAO,YAC7F,QAAQ,GACP,CACT,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/Checkbox.d.ts

@@ -27,6 +27,27 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & In
  * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
  * CheckboxGroup component.
  *
+ * @example
+ *     import { Checkbox } from '@bspk/ui/Checkbox';
+ *
+ *     function Example() {
+ *         const [checked, setChecked] = React.useState(false);
+ *
+ *         return (
+ *             <label htmlFor="sample-checkbox">
+ *                 <Checkbox
+ *                     aria-label="Sample"
+ *                     checked={checked}
+ *                     id="sample-checkbox"
+ *                     name="sample-checkbox"
+ *                     onChange={(nextChecked) => setChecked(nextChecked)}
+ *                     value="sample"
+ *                 />
+ *                 Checkbox Label
+ *             </label>
+ *         );
+ *     }
+ *
  * @element
  *
  * @name Checkbox

package/dist/Checkbox.js

@@ -7,6 +7,27 @@ import { useEffect, useRef } from 'react';
  * element and if used directly you must wrap it with a label. This will more often be used in the CheckboxOption or
  * CheckboxGroup component.
  *
+ * @example
+ *     import { Checkbox } from '@bspk/ui/Checkbox';
+ *
+ *     function Example() {
+ *         const [checked, setChecked] = React.useState(false);
+ *
+ *         return (
+ *             <label htmlFor="sample-checkbox">
+ *                 <Checkbox
+ *                     aria-label="Sample"
+ *                     checked={checked}
+ *                     id="sample-checkbox"
+ *                     name="sample-checkbox"
+ *                     onChange={(nextChecked) => setChecked(nextChecked)}
+ *                     value="sample"
+ *                 />
+ *                 Checkbox Label
+ *             </label>
+ *         );
+ *     }
+ *
  * @element
  *
  * @name Checkbox

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;GAQG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,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,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,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,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AA4BvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,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,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,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,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/CheckboxGroup.d.ts

@@ -20,6 +20,13 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
     /**
      * The options for the checkboxes.
      *
+     * @example
+     *     [
+     *         { label: 'Option 1', value: 'option1' },
+     *         { label: 'Option 2', value: 'option2' },
+     *         { label: 'Option 3', value: 'option3' },
+     *     ];
+     *
      * @type Array<CheckboxGroupOption>
      * @required
      */
@@ -42,6 +49,29 @@ export type CheckboxGroupProps = CommonProps<'aria-label'> & {
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * @example
+ *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
+ *
+ *     function Example() {
+ *         const [values, setValues] = React.useState<string[]>([]);
+ *
+ *         return (
+ *             <CheckboxGroup
+ *                 aria-label="Example Checkbox Group"
+ *                 name="example-checkbox-group"
+ *                 options={[
+ *                     { label: 'Option 1', value: 'option1' },
+ *                     { label: 'Option 2', value: 'option2' },
+ *                     { label: 'Option 3', value: 'option3' },
+ *                 ]}
+ *                 values={values}
+ *                 onChange={(nextValues: string[]) => {
+ *                     setValues(nextValues);
+ *                 }}
+ *             />
+ *         );
+ *     }
+ *
  * @name CheckboxGroup
  */
 declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/CheckboxGroup.js

@@ -4,6 +4,29 @@ import { ToggleOption } from './ToggleOption';
 /**
  * A group of checkboxes that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * @example
+ *     import { CheckboxGroup } from '@bspk/ui/CheckboxGroup';
+ *
+ *     function Example() {
+ *         const [values, setValues] = React.useState<string[]>([]);
+ *
+ *         return (
+ *             <CheckboxGroup
+ *                 aria-label="Example Checkbox Group"
+ *                 name="example-checkbox-group"
+ *                 options={[
+ *                     { label: 'Option 1', value: 'option1' },
+ *                     { label: 'Option 2', value: 'option2' },
+ *                     { label: 'Option 3', value: 'option3' },
+ *                 ]}
+ *                 values={values}
+ *                 onChange={(nextValues: string[]) => {
+ *                     setValues(nextValues);
+ *                 }}
+ *             />
+ *         );
+ *     }
+ *
  * @name CheckboxGroup
  */
 function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, ...props }) {

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../src/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA6CjE;;;;GAIG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBAAS,KAAK,eAAY,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAClD,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAC5D,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../src/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAoDjE;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBAAS,KAAK,eAAY,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAClD,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAC5D,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/CheckboxOption.d.ts

@@ -12,9 +12,31 @@ export type CheckboxOptionProps = InvalidPropsLibrary & Pick<CheckboxProps, 'che
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a Checkbox is needed, consider using the `Checkbox` component directly.
+ *
+ * @example
+ *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
+ *
+ *     function Example() {
+ *         const [checked, setChecked] = React.useState(false);
+ *         return (
+ *             <CheckboxOption
+ *                 checked={checked}
+ *                 description="This is an example checkbox option."
+ *                 label="Example Checkbox"
+ *                 name="example-checkbox-name"
+ *                 onChange={(nextChecked, event) => {
+ *                     setChecked(nextChecked);
+ *                     console.log('Checkbox changed:', nextChecked, event);
+ *                 }}
+ *                 value="example-checkbox-value"
+ *             />
+ *         );
+ *     }
+ *
  * @name CheckboxOption
  */
-declare function CheckboxOption({ label, description, ...checkboxProps }: CheckboxOptionProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 declare namespace CheckboxOption {
     var bspkName: string;
 }

package/dist/CheckboxOption.js

@@ -4,10 +4,33 @@ import { ToggleOption } from './ToggleOption';
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
+ * If only a Checkbox is needed, consider using the `Checkbox` component directly.
+ *
+ * @example
+ *     import { CheckboxOption } from '@bspk/ui/CheckboxOption';
+ *
+ *     function Example() {
+ *         const [checked, setChecked] = React.useState(false);
+ *         return (
+ *             <CheckboxOption
+ *                 checked={checked}
+ *                 description="This is an example checkbox option."
+ *                 label="Example Checkbox"
+ *                 name="example-checkbox-name"
+ *                 onChange={(nextChecked, event) => {
+ *                     setChecked(nextChecked);
+ *                     console.log('Checkbox changed:', nextChecked, event);
+ *                 }}
+ *                 value="example-checkbox-value"
+ *             />
+ *         );
+ *     }
+ *
  * @name CheckboxOption
  */
-function CheckboxOption({ label, description, ...checkboxProps }) {
-    return (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": label }) }));
+function CheckboxOption({ label: labelProp, description, ...checkboxProps }) {
+    const label = labelProp || description;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": label }) })));
 }
 CheckboxOption.bspkName = 'CheckboxOption';
 export { CheckboxOption };

package/dist/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../src/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;GAIG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB;IACjF,OAAO,CACH,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC5E,KAAC,QAAQ,OAAK,aAAa,gBAAc,KAAK,GAAI,GACvC,CAClB,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../src/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB;IAC5F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC5E,KAAC,QAAQ,OAAK,aAAa,gBAAc,KAAK,GAAI,GACvC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/Chip.d.ts

@@ -42,6 +42,17 @@ export type ChipProps = CommonProps<'disabled'> & {
 /**
  * Dynamically generated options that are suggested to the user as responses or prompts.
  *
+ * @example
+ *     import { Chip } from '@bspk/ui/Chip';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip variant="filter" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
  * @name Chip
  */
 declare function Chip({ children, wrap, variant, flat, disabled, selected, onClick, style: styleProp, }: ChipProps): import("react/jsx-runtime").JSX.Element;