@bspk/ui 1.1.16 → 1.1.18

package/dist/Menu.d.ts

@@ -1,14 +1,14 @@
 import './menu.scss';
-import { ComponentProps, MouseEvent as ReactMouseEvent } from 'react';
+import { ComponentProps } from 'react';
 import { ListItem } from './ListItem';
-import { CommonProps, ElementProps } from './';
+import { CommonProps, ElementProps, SetRef } from './';
 export declare const MIN_ITEM_COUNT = 3;
 export declare const MAX_ITEM_COUNT = 10;
 export declare function menuItemId(menuId: string, index: number): string;
 /** The props for the renderListItem function. Useful for customizing menu list items. */
-export type RenderListItemParams<M extends MenuItem> = Pick<MenuProps<M>, 'activeIndex' | 'isMulti' | 'selectedValues'> & {
+export type RenderListItemParams<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'activeIndex' | 'isMulti' | 'selectedValues'> & {
     index: number;
-    item: M;
+    item: T;
     menuId: string;
     selected: boolean;
     itemId?: string;
@@ -22,7 +22,7 @@ export type MenuItem = CommonProps<'disabled'> & {
     /** The unique id of the menu item. */
     id?: string;
 };
-export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
+export type MenuProps<T extends MenuItem = MenuItem> = CommonProps<'disabled' | 'id'> & {
     /**
      * The number of items to display in the menu
      *
@@ -34,11 +34,25 @@ export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled'
     /**
      * Content to display in the menu.
      *
-     * @type MenuItems
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *         { value: '4', label: 'Option 4' },
+     *         { value: '5', label: 'Option 5' },
+     *         { value: '6', label: 'Option 6' },
+     *         { value: '7', label: 'Option 7' },
+     *         { value: '8', label: 'Option 8' },
+     *         { value: '9', label: 'Option 9' },
+     *         { value: '10', label: 'Option 10' },
+     *     ];
+     *
+     * @type Array<MenuItem>
      */
-    items?: Item[];
+    items?: T[];
     /** A ref to the inner div element. */
-    innerRef?: (node: HTMLElement | null) => void;
+    innerRef?: SetRef<HTMLDivElement>;
     /**
      * Message to display when no results are found
      *
@@ -56,7 +70,7 @@ export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled'
      * @param {RenderListItemParams} props
      * @returns {ComponentProps<typeof ListItem>}
      */
-    renderListItem?: (props: RenderListItemParams<Item>) => Partial<ComponentProps<typeof ListItem>>;
+    renderListItem?: (props: RenderListItemParams<T>) => Partial<ComponentProps<typeof ListItem>>;
     /**
      * Whether the menu allows multiple selections.
      *
@@ -66,19 +80,17 @@ export type MenuProps<Item extends MenuItem = MenuItem> = CommonProps<'disabled'
     /**
      * The function to call when the selected values change.
      *
-     * @type (selectedValues: String[], event: ChangeEvent) => void
-     * @param {string[]} selectedValues
-     * @param {ChangeEvent} event
-     * @returns {void}
+     * @example
+     *     (selectedValues, event) => setState({ selectedValues });
      */
-    onChange?: (selectedValues: string[], event?: ReactMouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    onChange?: (selectedValues: string[], event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 };
 /**
  * A container housing a simple list of options presented to the user to select one option at a time.
  *
  * @name Menu
  */
-declare function Menu<Item extends MenuItem = MenuItem>({ itemCount: itemCountProp, items: itemsProp, noResultsMessage, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, renderListItem, isMulti, ...props }: ElementProps<MenuProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function Menu({ itemCount: itemCountProp, items: itemsProp, noResultsMessage, innerRef, onChange, activeIndex, selectedValues, disabled, id: idProp, renderListItem, isMulti, ...props }: ElementProps<MenuProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Menu {
     var bspkName: string;
 }

package/dist/Menu.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-list-item]{min-height:var(--item-size);height:var(--item-size)}`);;
+styleAdd(`[data-bspk=menu]{/*! --item-count: is set via inline style */width:332px;border:1px solid var(--stroke-neutral-low);background-color:var(--surface-neutral-t1-base);box-shadow:var(--drop-shadow-float);border-radius:var(--radius-large);display:flex;flex-direction:column;--item-size: var(--spacing-sizing-12)}[data-bspk=menu][data-floating]{z-index:var(--z-index-dropdown)}[data-bspk=menu][data-item-count]{height:calc(var(--item-count)*var(--item-size));overflow-y:scroll}[data-bspk=menu][data-no-items]{padding:var(--spacing-sizing-08) var(--spacing-sizing-04);align-items:center;justify-content:center;gap:var(--spacing-sizing-03)}[data-bspk=menu] [data-bspk=list-item]{min-height:var(--item-size);height:var(--item-size)}`);;
 import { useMemo } from 'react';
 import { Checkbox } from './Checkbox';
 import { ListItem } from './ListItem';

package/dist/Menu.js.map

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

package/dist/NumberInput.d.ts

@@ -3,7 +3,11 @@ import { CommonProps, InvalidPropsLibrary } from '.';
 export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & {
     /** The value of the control. */
     value?: number;
-    /** Callback when the value changes. */
+    /**
+     * Callback when the value changes.
+     *
+     * @required
+     */
     onChange: (value: number | undefined) => void;
     /**
      * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.

package/dist/NumberInput.js

@@ -32,8 +32,9 @@ function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.si
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);
-    const fix = (next = value) => {
-        if (typeof next !== 'number') {
+    const fix = (nextValue) => {
+        const next = isNumber(nextValue);
+        if (typeof next !== 'number' || isNaN(next)) {
             onChange(undefined);
             return;
         }
@@ -53,10 +54,11 @@ function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.si
         onChange: fix,
         value,
     };
-    return (_jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, "data-bspk": "number-input", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && _jsx(IncrementButton, { ...buttonProps, increment: -1 }), _jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, name: name, onBlur: () => {
-                    fix();
+    return (_jsxs("div", { "aria-valuemax": max || undefined, "aria-valuemin": min || undefined, "data-bspk": "number-input", "data-centered": centered || undefined, "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-size": size, "data-stepper-input": true, children: [!!centered && _jsx(IncrementButton, { ...buttonProps, increment: -1 }), _jsx("input", { "aria-label": ariaLabel, disabled: disabled, id: inputId, max: max, min: min, name: name, onBlur: (event) => {
+                    // Fix the value on blur to ensure it is a valid number
+                    fix(event.target.value);
                 }, onChange: (event) => {
-                    onChange(event.target.value);
+                    onChange(isNumber(event.target.value));
                 }, readOnly: readOnly, type: "number", value: value }), !centered && (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": true, "data-divider": true }), _jsx(IncrementButton, { ...buttonProps, increment: -1 })] })), _jsx(IncrementButton, { ...buttonProps, increment: 1 })] }));
 }
 // eslint-disable-next-line react/no-multi-comp

package/dist/NumberInput.js.map

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

package/dist/Portal.d.ts

@@ -6,7 +6,11 @@ export type PortalProps = {
      * @required
      */
     children: ReactNode;
-    /** The container to render the portal in. */
+    /**
+     * The container to render the portal in.
+     *
+     * @optional
+     */
     container?: HTMLElement;
 };
 /**

package/dist/Portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAazC;;;;;;GAMG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}
+{"version":3,"file":"Portal.js","sourceRoot":"","sources":["../src/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAiBzC;;;;;;GAMG;AACH,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAe;IAChD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAqB,SAAS,IAAI,IAAI,CAAC,CAAC;IAE9F,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,eAAe,IAAI,OAAO,MAAM,KAAK,WAAW;YAAE,kBAAkB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7F,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,wCAAwC;IACxC,OAAO,eAAe,IAAI,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAC;AACtE,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,sDAAsD"}

package/dist/ProgressBar.d.ts

@@ -9,9 +9,13 @@ export type ProgressBarProps = {
     /**
      * The current progress of the progressbar.
      *
+     * @example
+     *     42;
+     *
      * @default 0
      * @minimum 0
      * @maximum 100
+     *
      * @required
      */
     completion: number;

package/dist/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AA4B7C;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAmB,GAAI,EACrF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../src/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAiB,KAAK,EAAE,MAAM,OAAO,CAAC;AAgC7C;;;;;GAKG;AACH,SAAS,WAAW,CAAC,EAAE,IAAI,GAAG,OAAO,EAAE,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,QAAQ,EAAE,KAAK,EAAoB;IAC9F,MAAM,EAAE,GAAG,KAAK,EAAE,CAAC;IAEnB,OAAO,CACH,6BAAiB,KAAK,eAAY,cAAc,eAAY,IAAI,aAC5D,iCACe,UAAU,GAAG,GAAG,gBAChB,sCAAsC,mBAClC,GAAG,mBACH,CAAC,mBACD,UAAU,EACzB,EAAE,EAAE,EAAE,EACN,GAAG,EAAC,KAAK,EACT,KAAK,EAAE,UAAU,aAEhB,UAAU,SACJ,EACX,qDAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,GAAG,UAAU,GAAG,EAAmB,GAAI,EACrF,gBAAO,OAAO,EAAE,EAAE,YAAG,KAAK,GAAS,IACjC,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/ProgressionStepper.d.ts

@@ -29,7 +29,14 @@ export type ProgressionStepperProps = {
     /**
      * The steps to display in the progress bar.
      *
-     * @type ProgressionStepperItem[]
+     * @example
+     *     [
+     *         { name: '[Name of step to proceed forward 1]' },
+     *         { name: '[Name of step to proceed forward 2]' },
+     *         { name: '[Name of step to proceed forward 3]' },
+     *     ];
+     *
+     * @type Array<ProgressionStepperItem>
      * @required
      */
     steps: ProgressionStepperItem[];
@@ -58,7 +65,7 @@ export type ProgressionStepperProps = {
  *
  * @name ProgressionStepper
  */
-declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function ProgressionStepper({ steps, currentStep: currentStepProp, variant, ...containerProps }: ElementProps<ProgressionStepperProps, 'div'>): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ProgressionStepper {
     var bspkName: string;
 }

package/dist/ProgressionStepper.js

@@ -9,7 +9,7 @@ styleAdd(`[data-bspk=progression-stepper]{width:100%;--circle-width: var(--spaci
  */
 function ProgressionStepper({ steps = [], currentStep: currentStepProp = 0, variant = 'horizontal', ...containerProps }) {
     const currentStep = Math.max(0, Math.min(currentStepProp, steps.length + 1));
-    return (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
+    return !steps?.length ? null : (_jsxs("div", { ...containerProps, "data-bspk": "progression-stepper", "data-variant": variant, children: [variant === 'widget' && (_jsxs("label", { children: [_jsx("span", { "data-title": true, children: steps[Math.max(0, Math.min(currentStep - 1, steps.length - 1))].name }), _jsx("span", { "data-subtitle": true, children: currentStep >= steps.length ? ('Completed') : (_jsxs(_Fragment, { children: ["Step ", currentStep, " of ", steps.length] })) })] })), _jsx("ol", { children: steps.flatMap(({ name, subtext }, index) => {
                     const stepNum = index + 1;
                     let status = 'incomplete';
                     if (stepNum < currentStep)

package/dist/ProgressionStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AAuDpC;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CACH,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}
+{"version":3,"file":"ProgressionStepper.js","sourceRoot":"","sources":["../src/ProgressionStepper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,4BAA4B,CAAC;AA8DpC;;;;GAIG;AACH,SAAS,kBAAkB,CAAC,EACxB,KAAK,GAAG,EAAE,EACV,WAAW,EAAE,eAAe,GAAG,CAAC,EAChC,OAAO,GAAG,YAAY,EACtB,GAAG,cAAc,EAC0B;IAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,eAAe,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;IAC7E,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC3B,kBAAS,cAAc,eAAY,qBAAqB,kBAAe,OAAO,aACzE,OAAO,KAAK,QAAQ,IAAI,CACrB,4BACI,6CAAkB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAQ,EAC9F,gDACK,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAC3B,WAAW,CACd,CAAC,CAAC,CAAC,CACA,uCACU,WAAW,UAAM,KAAK,CAAC,MAAM,IACpC,CACN,GACE,IACH,CACX,EACD,uBACK,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE;oBACxC,MAAM,OAAO,GAAG,KAAK,GAAG,CAAC,CAAC;oBAC1B,IAAI,MAAM,GAA0C,YAAY,CAAC;oBACjE,IAAI,OAAO,GAAG,WAAW;wBAAE,MAAM,GAAG,UAAU,CAAC;yBAC1C,IAAI,OAAO,KAAK,WAAW;wBAAE,MAAM,GAAG,SAAS,CAAC;oBAErD,OAAO,CACH,6BAAiB,MAAM,eAAa,OAAO,aACvC,0EACI,4BAAgB,QAAQ,GAAG,EAC3B,gDACI,yBAAO,OAAO,GAAQ,EACrB,MAAM,KAAK,UAAU,IAAI,KAAC,QAAQ,KAAG,IACnC,EACP,4BAAgB,OAAO,GAAG,IACvB,EACN,OAAO,KAAK,QAAQ,IAAI,CACrB,iDACI,4CAAiB,IAAI,GAAQ,EAC5B,OAAO,IAAI,+CAAoB,OAAO,GAAQ,IAC5C,CACV,KAd6C,QAAQ,KAAK,EAAE,CAe5D,CACR,CAAC;gBACN,CAAC,CAAC,GACD,IACH,CACT,CAAC;AACN,CAAC;AAED,kBAAkB,CAAC,QAAQ,GAAG,oBAAoB,CAAC;AAEnD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/ProgressionStepperBar.d.ts

@@ -3,6 +3,9 @@ export type ProgressionStepperBarProps = {
     /**
      * The number of steps in the progress bar.
      *
+     * @example
+     *     5;
+     *
      * @minimum 2
      * @maximum 10
      * @required
@@ -11,6 +14,9 @@ export type ProgressionStepperBarProps = {
     /**
      * The last step completed.
      *
+     * @example
+     *     2;
+     *
      * @default 0
      * @minimum 0
      */

package/dist/ProgressionStepperBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../src/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,gCAAgC,CAAC;AA2BxC;;;;GAIG;AACH,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACH,4BAAe,yBAAyB,eAAY,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAmB,aACtG,4CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,+BAAoB,CAAC,GAAG,aAAa,IAAI,SAAS,eAAa,CAAC,IAAO,CAAC,CAAI,CAC/E,CAAC,GACA,EACN,4BACK,aAAa,UAAM,SAAS,yBACzB,IACN,CACT,CAAC;AACN,CAAC;AAED,qBAAqB,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"ProgressionStepperBar.js","sourceRoot":"","sources":["../src/ProgressionStepperBar.tsx"],"names":[],"mappings":";AAAA,OAAO,gCAAgC,CAAC;AAiCxC;;;;GAIG;AACH,SAAS,qBAAqB,CAAC,EAC3B,SAAS,EACT,aAAa,EAAE,iBAAiB,GAAG,CAAC,EACpC,IAAI,GAAG,OAAO,GACW;IACzB,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACH,4BAAe,yBAAyB,eAAY,IAAI,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAmB,aACtG,4CACK,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACzC,+BAAoB,CAAC,GAAG,aAAa,IAAI,SAAS,eAAa,CAAC,IAAO,CAAC,CAAI,CAC/E,CAAC,GACA,EACN,4BACK,aAAa,UAAM,SAAS,yBACzB,IACN,CACT,CAAC;AACN,CAAC;AAED,qBAAqB,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/Radio.d.ts

@@ -1,6 +1,20 @@
 import './radio.scss';
-import { ToggleControlProps, ElementProps, InvalidPropsLibrary } from './';
-export type RadioProps = InvalidPropsLibrary & Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'name' | 'onChange' | 'value'>;
+import { ChangeEvent } from 'react';
+import { ElementProps, InvalidPropsLibrary, CommonProps } from './';
+export type RadioProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+    /**
+     * Marks the radio as checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
 /**
  * A round control that allows user to choose one option from a set. This is the base element and if used directly you
  * must wrap it with a label. This will more often be used in the RadioOption or RadioGroup component.

package/dist/Radio.js

@@ -10,8 +10,8 @@ styleAdd(`[data-bspk=radio]{display:block;position:relative;width:var(--spacing-
  * @name Radio
  */
 function Radio(props) {
-    const { checked = false, invalid, disabled, onChange, ...otherProps } = props;
-    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
+    const { checked = false, invalid, disabled, onChange, errorMessage, ...otherProps } = props;
+    return (_jsxs("span", { "data-bspk": "radio", children: [_jsx("input", { ...otherProps, checked: !!checked, "data-errormessage": errorMessage || undefined, "data-invalid": invalid || undefined, disabled: disabled || undefined, onChange: (event) => onChange(!!event.target.checked, event), type: "radio" }), _jsx("span", { "aria-hidden": true })] }));
 }
 Radio.bspkName = 'Radio';
 export { Radio };

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAMtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,KAAwC;IACnD,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,kBACJ,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,GACd,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAsBtB;;;;;;;GAOG;AACH,SAAS,KAAK,CAAC,KAAwC;IACnD,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAC;IAE5F,OAAO,CACH,6BAAgB,OAAO,aACnB,mBACQ,UAAU,EACd,OAAO,EAAE,CAAC,CAAC,OAAO,uBACC,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAC5D,IAAI,EAAC,OAAO,GACd,EACF,qCAAoB,IACjB,CACV,CAAC;AACN,CAAC;AAED,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;AAEzB,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/RadioGroup.d.ts

@@ -1,21 +1,44 @@
 import { ToggleOptionProps } from './ToggleOption';
 import { ElementProps, CommonProps } from './';
 export type RadioGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type RadioGroupProps = CommonProps<'name' | 'value'> & {
+export type RadioGroupProps = CommonProps<'name'> & {
+    /**
+     * The value of the control.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: string;
     /**
      * The function to call when the radios are changed.
      *
+     * @example
+     *     (value) => setState({ value }),
+     *
      * @required
      */
     onChange: (value: string) => void;
     /**
      * The options for the radios.
      *
-     * @type RadioGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1', description: 'Description here' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<RadioGroupOption>
      * @required
      */
     options: RadioGroupOption[];
-    /** The size of the radio group labels. */
+    /**
+     * The size of the radio group labels.
+     *
+     * @default base
+     */
     size?: 'base' | 'large' | 'small';
 };
 /**

package/dist/RadioGroup.js

@@ -6,9 +6,9 @@ import { ToggleOption } from './ToggleOption';
  *
  * @name RadioGroup
  */
-function RadioGroup({ onChange, options = [], name, value: groupValue, size, ...props }) {
-    return (_jsx("div", { ...props, "data-bspk": "radio-group", role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }) => {
-            return (_jsx(ToggleOption, { description: description, label: label, size: size, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, value));
+function RadioGroup({ onChange, options = [], name, value: groupValue, size = 'base', ...props }) {
+    return (_jsx("div", { ...props, "data-bspk": "radio-group", role: "radiogroup", style: { display: 'contents' }, children: options.map(({ label, description, value }, index) => {
+            return (_jsx(ToggleOption, { description: description, label: label, size: size, children: _jsx(Radio, { "aria-label": label, checked: groupValue === value, name: name, onChange: (checked) => checked && onChange(value), value: value }) }, `toggle-option-${value || index}`));
         }) }));
 }
 RadioGroup.bspkName = 'RadioGroup';

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAwBjE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,EACJ,GAAG,KAAK,EAC2B;IACnC,OAAO,CACH,iBAAS,KAAK,eAAY,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACnF,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE;YAC3C,OAAO,CACH,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,YACxE,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAPuC,KAAK,CAQnC,CAClB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA+CjE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAChB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,UAAU,EACjB,IAAI,GAAG,MAAM,EACb,GAAG,KAAK,EAC2B;IACnC,OAAO,CACH,iBAAS,KAAK,eAAY,aAAa,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,YACnF,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE;YAClD,OAAO,CACH,KAAC,YAAY,IACT,WAAW,EAAE,WAAW,EAExB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,YAEV,KAAC,KAAK,kBACU,KAAK,EACjB,OAAO,EAAE,UAAU,KAAK,KAAK,EAC7B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,EACjD,KAAK,EAAE,KAAK,GACd,IAVG,iBAAiB,KAAK,IAAI,KAAK,EAAE,CAW3B,CAClB,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/RadioOption.d.ts

@@ -1,7 +1,15 @@
+import { ChangeEvent } from 'react';
 import { RadioProps } from './Radio';
 import { ToggleOptionProps } from './ToggleOption';
 import { InvalidPropsLibrary } from '.';
-export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'> & {
+    /**
+     * The function to call when the radio is checked.
+     *
+     * @required
+     */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
+};
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *

package/dist/RadioOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IAC3E,OAAO,CACH,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../src/RadioOption.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAc,KAAK,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAejE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,aAAa,EAAoB;IAC3E,OAAO,CACH,KAAC,YAAY,iBAAW,cAAc,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YACzE,KAAC,KAAK,OAAK,aAAa,gBAAc,KAAK,GAAI,GACpC,CAClB,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/SegmentedControl.d.ts

@@ -15,21 +15,40 @@ export type SegmentedControlOption = {
     disabled?: boolean;
     /** The value of the option. If not provided, the label will be used as the value. */
     value?: string;
-    /** The the icon to display before the label. */
+    /**
+     * The the icon to display before the label.
+     *
+     * @type BspkIcon
+     */
     icon?: React.ReactNode;
+    /**
+     * The icon to display before the label when the option is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: React.ReactNode;
 };
 export type SegmentedControlProps = {
     /**
      * The options to display. Each option has a label and an optional leading icon.
      *
-     * @type SegmentedControlOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<SegmentedControlOption>
      * @required
      */
     options: SegmentedControlOption[];
     /**
      * The id of the selected option.
      *
+     * @example
+     *     1;
+     *
      * @required
      */
     value: SegmentedControlOption['value'];

package/dist/SegmentedControl.js

@@ -1,6 +1,6 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}`);;
+styleAdd(`[data-bspk=segmented-control]{display:flex;flex-direction:row;max-width:100%;--outer-height: var(--spacing-sizing-10);--inner-height: var(--spacing-sizing-08);--svg-width: 20px}[data-bspk=segmented-control][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1;margin:0 var(--spacing-sizing-04)}[data-bspk=segmented-control][data-width=hug]{width:fit-content;--btn-flex-grow: 0}[data-bspk=segmented-control][data-size=small]{--outer-height: var(--spacing-sizing-08);--inner-height: var(--spacing-sizing-06);--svg-width: 16px}[data-bspk=segmented-control] svg{width:var(--svg-width) !important}[data-bspk=segmented-control] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface);flex-grow:var(--btn-flex-grow);font:var(--labels-small);margin:0;height:var(--spacing-sizing-12);background:rgba(0,0,0,0);position:relative;white-space:nowrap}[data-bspk=segmented-control] button [data-focus-ring]{display:none}[data-bspk=segmented-control] button [data-outer]{height:var(--outer-height);background:var(--surface-neutral-t3-low);margin:var(--spacing-sizing-01) 0;padding:var(--spacing-sizing-01) 0;display:block}[data-bspk=segmented-control] button [data-inner]{display:flex;flex-direction:row;align-items:center;height:var(--inner-height);border-bottom:1px solid rgba(0,0,0,0);justify-content:center;gap:var(--spacing-sizing-01);border-radius:var(--radius-small);padding:var(--spacing-sizing-02) var(--spacing-sizing-03)}[data-bspk=segmented-control] button:first-of-type [data-outer]{border-top-left-radius:var(--radius-medium);border-bottom-left-radius:var(--radius-medium);padding-left:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:last-of-type [data-outer]{border-top-right-radius:var(--radius-medium);border-bottom-right-radius:var(--radius-medium);padding-right:var(--spacing-sizing-01)}[data-bspk=segmented-control] button:not(:disabled):hover [data-inner]{background:var(--interactions-neutral-hover-opacity)}[data-bspk=segmented-control] button:not(:disabled):active [data-inner]{background:var(--interactions-neutral-press-opacity)}[data-bspk=segmented-control] button:not(:disabled)[data-selected] [data-inner]{background:var(--surface-neutral-t1-base)}[data-bspk=segmented-control] button:not(:disabled):focus-visible{z-index:2;outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=segmented-control] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface);cursor:not-allowed}`);;
 import { Fragment } from 'react';
 import { Tooltip } from './Tooltip';
 import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';

package/dist/SegmentedControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAkEtE;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../src/SegmentedControl.tsx"],"names":[],"mappings":";AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAqFtE;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC9D,qBAAqB,CAAC,OAAO,CAAC,CAAC;IAE/B,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAEhG,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YACtC,OAAO,CACH,KAAC,QAAQ,cACL,KAAC,OAAO,IAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAC,KAAK,YAC9D,+BACgB,IAAI,CAAC,KAAK,gBACV,KAAK,KAAK,CAAC,IAAI,SAAS,eACzB,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACrC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,YAEjD,6CACI,+CACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,IACvB,GACJ,GACF,GACH,IAjBC,IAAI,CAAC,KAAK,CAkBd,CACd,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,gBAAgB,CAAC,QAAQ,GAAG,kBAAkB,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/Switch.d.ts

@@ -1,7 +1,7 @@
 import './switch.scss';
 import { ChangeEvent } from 'react';
 import { CommonProps } from './';
-export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'onClick' | 'value'> & {
+export type SwitchProps = CommonProps<'aria-label' | 'disabled' | 'name' | 'value'> & {
     /**
      * Marks the control as checked.
      *

package/dist/SwitchGroup.d.ts

@@ -1,6 +1,6 @@
 import { ToggleOptionProps } from './ToggleOption';
-import { ToggleControlProps, ElementProps, CommonProps } from './';
-export type SwitchGroupOption = Pick<ToggleControlProps<HTMLInputElement>, 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+import { ElementProps, CommonProps } from './';
+export type SwitchGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
 export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
     /**
      * The function to call when the switches are changed.
@@ -11,23 +11,30 @@ export type SwitchGroupProps = CommonProps<'aria-label' | 'name'> & {
     /**
      * The options for the switches.
      *
-     * @type SwitchGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<SwitchGroupOption>
      * @required
      */
     options: SwitchGroupOption[];
     /**
      * The values of the switches in the on state.
      *
-     * @type string[]
+     * @type Array<string>
      */
-    values?: SwitchGroupProps['options'][number]['value'][];
+    value?: SwitchGroupProps['options'][number]['value'][];
 };
 /**
  * A group of switches that allows users to choose one or more items from a list or turn an feature on or off.
  *
  * @name SwitchGroup
  */
-declare function SwitchGroup({ onChange, options, name, values, ...props }: ElementProps<SwitchGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SwitchGroup({ onChange, options, name, value: values, ...props }: ElementProps<SwitchGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace SwitchGroup {
     var bspkName: string;
 }

package/dist/SwitchGroup.js

@@ -6,7 +6,7 @@ import { ToggleOption } from './ToggleOption';
  *
  * @name SwitchGroup
  */
-function SwitchGroup({ onChange, options = [], name, values = [], ...props }) {
+function SwitchGroup({ onChange, options = [], name, value: values = [], ...props }) {
     return (_jsx("div", { ...props, "data-bspk": "switch-group", role: "group", children: options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Switch, { "aria-label": label, checked: values.includes(value), name: name, onChange: (checked) => {
                     onChange(checked ? [...values, value] : values.filter((v) => v !== value));
                 }, value: value }) }, value))) }));

package/dist/SwitchGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchGroup.js","sourceRoot":"","sources":["../src/SwitchGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AA6BjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,GAAG,EAAE,EAAE,GAAG,KAAK,EAAyC;IAC/G,OAAO,CACH,iBAAS,KAAK,eAAY,cAAc,EAAC,IAAI,EAAC,OAAO,YAChD,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,MAAM,kBACS,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;oBAClB,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;gBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
+{"version":3,"file":"SwitchGroup.js","sourceRoot":"","sources":["../src/SwitchGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAqB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmCjE;;;;GAIG;AACH,SAAS,WAAW,CAAC,EACjB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,KAAK,EAAE,MAAM,GAAG,EAAE,EAClB,GAAG,KAAK,EAC4B;IACpC,OAAO,CACH,iBAAS,KAAK,eAAY,cAAc,EAAC,IAAI,EAAC,OAAO,YAChD,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,MAAM,kBACS,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;oBAClB,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;gBAC/E,CAAC,EACD,KAAK,EAAE,KAAK,GACd,IATuC,KAAK,CAUnC,CAClB,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}