@bspk/ui 1.1.17 → 1.1.19

package/dist/SearchBar.d.ts

@@ -1,24 +1,50 @@
 import './search-bar.scss';
 import { MenuItem, MenuProps } from './Menu';
 import { TextInputProps } from './TextInput';
-export type SearchBarProps = Pick<MenuProps, 'itemCount' | 'items' | 'noResultsMessage'> & Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
+export type SearchBarProps<T extends MenuItem = MenuItem> = Pick<MenuProps<T>, 'itemCount' | 'noResultsMessage'> & Pick<TextInputProps, 'aria-label' | 'id' | 'inputRef' | 'name' | 'placeholder' | 'size'> & {
     /** The current value of the search bar. */
-    searchValue?: string;
+    value?: string;
     /**
      * Handler for state updates.
      *
      * @type (value: String) => void
      * @required
      */
-    setSearchValue: (value: string) => void;
+    onChange: (value: string) => void;
     onSelect: (item?: MenuItem) => void;
+    /**
+     * Content to display in the menu.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Apple Pie' },
+     *         { value: '2', label: 'Banana Split' },
+     *         { value: '3', label: 'Cherry Tart' },
+     *         { value: '4', label: 'Dragonfruit Sorbet' },
+     *         { value: '5', label: 'Elderberry Jam' },
+     *         { value: '6', label: 'Fig Newton' },
+     *         { value: '7', label: 'Grape Soda' },
+     *         { value: '8', label: 'Honeydew Smoothie' },
+     *         { value: '9', label: 'Ice Cream Sandwich' },
+     *         { value: '10', label: 'Jackfruit Pudding' },
+     *     ];
+     *
+     * @type Array<MenuItem>
+     */
+    items?: T[];
+    /**
+     * Message to display when no results are found
+     *
+     * @type multiline
+     */
+    noResultsMessage?: string;
 };
 /**
  * Component description coming soon.
  *
  * @name SearchBar
  */
-declare function SearchBar({ itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, searchValue, setSearchValue, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+declare function SearchBar({ itemCount, items, noResultsMessage, placeholder, 'aria-label': ariaLabel, id: idProp, inputRef, name, size, onSelect, value, onChange, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SearchBar {
     var bspkName: string;
 }

package/dist/SearchBar.js

@@ -6,6 +6,7 @@ import { useRef } from 'react';
 import { Menu } from './Menu';
 import { Portal } from './Portal';
 import { TextInput } from './TextInput';
+import { Txt } from './Txt';
 import { useFloatingMenu } from './hooks/useFloatingMenu';
 import { useId } from './hooks/useId';
 /**
@@ -13,30 +14,30 @@ import { useId } from './hooks/useId';
  *
  * @name SearchBar
  */
-function SearchBar({ itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, searchValue, setSearchValue, }) {
+function SearchBar({ itemCount, items, noResultsMessage, placeholder = 'Search', 'aria-label': ariaLabel, id: idProp, inputRef, name, size = 'medium', onSelect, value, onChange, }) {
     const id = useId(idProp);
     const { triggerProps: { ref: triggerRef, onClick, onKeyDownCapture, ...triggerProps }, menuProps, closeMenu, } = useFloatingMenu({
         placement: 'bottom-start',
     });
     const inputRefLocal = useRef(null);
-    return (_jsxs(_Fragment, { children: [_jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: triggerRef, "data-bspk": "search-bar", id: id, inputRef: (node) => {
-                    inputRef?.(node || null);
-                    inputRefLocal.current = node;
-                }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => setSearchValue(str), placeholder: placeholder, size: size, value: searchValue, ...triggerProps, onClick: (event) => {
-                    if (items?.length)
-                        onClick(event);
-                }, onKeyDownCapture: (event) => {
-                    const handled = onKeyDownCapture(event);
-                    if (handled)
-                        return;
-                    inputRefLocal.current?.focus();
-                } }), _jsx(Portal, { children: _jsx(Menu, { itemCount: itemCount, items: items, noResultsMessage: noResultsMessage, onChange: (selectedValues, event) => {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { "data-bspk": "search-bar", children: _jsx(TextInput, { "aria-label": ariaLabel, autoComplete: "off", containerRef: triggerRef, id: id, inputRef: (node) => {
+                        inputRef?.(node || null);
+                        inputRefLocal.current = node;
+                    }, leading: _jsx(SvgSearch, {}), name: name, onChange: (str) => onChange(str), placeholder: placeholder, size: size, value: value, ...triggerProps, onClick: (event) => {
+                        if (items?.length)
+                            onClick(event);
+                    }, onKeyDownCapture: (event) => {
+                        const handled = onKeyDownCapture(event);
+                        if (handled)
+                            return;
+                        inputRefLocal.current?.focus();
+                    } }) }), !!value?.trim().length && (_jsx(Portal, { children: _jsx(Menu, { itemCount: itemCount, items: items, noResultsMessage: !!value?.length && (_jsxs(_Fragment, { children: [_jsx(Txt, { as: "div", variant: "heading-h5", children: "No results found" }), noResultsMessage && (_jsx(Txt, { as: "div", variant: "body-base", children: noResultsMessage }))] })), onChange: (selectedValues, event) => {
                         event?.preventDefault();
                         const item = items?.find((i) => i.value === selectedValues[0]);
                         onSelect?.(item);
-                        setSearchValue(item?.label || '');
+                        onChange(item?.label || '');
                         closeMenu();
-                    }, ...menuProps }) })] }));
+                    }, ...menuProps }) }))] }));
 }
 SearchBar.bspkName = 'SearchBar';
 export { SearchBar };

package/dist/SearchBar.js.map

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

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"}

package/dist/TabGroup.d.ts

@@ -21,23 +21,41 @@ export type TabGroupOption = {
      * If not provided, the label will be used as the value.
      */
     value?: string;
-    /** The icon to display on the left side of the tab. */
+    /**
+     * The icon to display on the left side of the tab.
+     *
+     * @type BspkIcon
+     */
     icon?: ReactNode;
-    /** The icon to display on the left side of the tab when the tab is active. */
+    /**
+     * The icon to display on the left side of the tab when the tab is active.
+     *
+     * @type BspkIcon
+     */
     iconActive?: ReactNode;
-    /** The badge count to display on the tab. */
+    /** The badge count to display on the tab */
     badge?: number;
 };
 export type TabGroupProps = {
     /**
      * The tabs to display. Each tab has a label and an optional leading icon.
      *
-     * @type TabGroupOption[]
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<TabGroupOption>
      * @required
      */
     options: TabGroupOption[];
     /**
-     * The id of the selected tab.
+     * The value of the selected tab.
+     *
+     * @example
+     *     1;
      *
      * @required
      */

package/dist/TabGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface-variant-02);background:none;flex-grow:var(--btn-flex-grow);font:var(--font)}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button span{display:flex;flex-direction:row;align-items:center;margin:0 var(--spacing-sizing-04);height:var(--height);justify-content:center;position:relative;gap:var(--spacing-sizing-02)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] span::after{content:"";display:block;width:100%;height:2px;background-color:var(--stroke-brand-primary);bottom:-1px;position:absolute;border-top-right-radius:2px;border-top-left-radius:2px}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}`);;
+styleAdd(`[data-bspk=tab-group]{display:flex;flex-direction:row;--btn-flex-grow: 0;border-bottom:1px solid var(--stroke-neutral-low);width:100%;--font: var(--labels-base);--height: var(--spacing-sizing-10)}[data-bspk=tab-group][data-width=fill]{align-items:stretch;width:100%;--btn-flex-grow: 1}[data-bspk=tab-group][data-size=small]{--font: var(--labels-small);--height: var(--spacing-sizing-08)}[data-bspk=tab-group][data-size=large]{--font: var(--labels-large);--height: var(--spacing-sizing-12)}[data-bspk=tab-group] button{border:0;cursor:pointer;color:var(--foreground-neutral-on-surface-variant-02);background:none;flex-grow:var(--btn-flex-grow);font:var(--font);white-space:nowrap}[data-bspk=tab-group] button:hover{background:var(--interactions-neutral-hover-opacity)}[data-bspk=tab-group] button:active{background:var(--interactions-neutral-press-opacity)}[data-bspk=tab-group] button:disabled{pointer-events:none;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=tab-group] button:focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=tab-group] button span{display:flex;flex-direction:row;align-items:center;margin:0 var(--spacing-sizing-04);height:var(--height);justify-content:center;position:relative;gap:var(--spacing-sizing-02)}[data-bspk=tab-group] button span svg{width:var(--spacing-sizing-05)}[data-bspk=tab-group] button[data-active]{color:var(--foreground-brand-primary)}[data-bspk=tab-group] button[data-active] span::after{content:"";display:block;width:100%;height:2px;background-color:var(--stroke-brand-primary);bottom:-1px;position:absolute;border-top-right-radius:2px;border-top-left-radius:2px}[data-bspk=tab-group] button[data-active] span svg{color:var(--surface-brand-primary)}[data-bspk=tab-group][data-hide-trail]{border-bottom:none}[data-bspk=tab-group][data-hide-trail] button{border-bottom:1px solid var(--stroke-neutral-low)}`);;
 import { Badge } from './Badge';
 import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 const TAB_BADGE_SIZES = {

package/dist/TabGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../src/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AAuEF;;;;GAIG;AACH,SAAS,QAAQ,CAAC;AACd,EAAE;AACF,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB;IACjC,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,OAAO,CACH,iBACQ,cAAc,eACR,WAAW,qBACJ,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,eAClD,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,gCACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,GAAG,EAAE;oBACV,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC,YAED,2BACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAC1C,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAAI,CAC5D,IACE,IAXF,IAAI,CAAC,KAAK,CAYV,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"TabGroup.js","sourceRoot":"","sources":["../src/TabGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,kBAAkB,CAAC;AAG1B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAMtE,MAAM,eAAe,GAA6C;IAC9D,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,SAAS;CACnB,CAAC;AAyFF;;;;GAIG;AACH,SAAS,QAAQ,CAAC;AACd,EAAE;AACF,QAAQ,EAAE,WAAW,EACrB,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EAAE,WAAW,EACpB,KAAK,GAAG,KAAK,EACb,SAAS,GAAG,KAAK,EACjB,GAAG,cAAc,EACgB;IACjC,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,OAAO,CACH,iBACQ,cAAc,eACR,WAAW,qBACJ,CAAC,KAAK,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,SAAS,eAClD,IAAI,gBACH,KAAK,YAEhB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,SAAS,EAAE,EAAE;YAC7B,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;YAEtC,OAAO,CACH,gCACiB,QAAQ,IAAI,SAAS,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EAEpC,OAAO,EAAE,GAAG,EAAE;oBACV,WAAW,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;gBACrD,CAAC,YAED,2BACK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,IAAI,EAC1C,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CAC1C,KAAC,KAAK,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,eAAe,CAAC,IAAI,CAAC,GAAI,CAC5D,IACE,IAXF,IAAI,CAAC,KAAK,CAYV,CACZ,CAAC;QACN,CAAC,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/Tag.d.ts

@@ -1,7 +1,7 @@
-import './tag.scss';
 import { ElementType, ReactNode } from 'react';
 import { ColorVariant } from './utils/colorVariants';
 import { ElementProps } from './';
+import './tag.scss';
 export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The element type to render as.
@@ -13,6 +13,9 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The content of the tag.
      *
+     * @example
+     *     New;
+     *
      * @required
      */
     children: ReactNode;
@@ -25,7 +28,7 @@ export type TagProps<As extends ElementType = 'span'> = {
     /**
      * The color of the tag.
      *
-     * @default white
+     * @default grey
      */
     color?: ColorVariant;
     /**

package/dist/Tag.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}`);;
+styleAdd(`[data-bspk=tag]{display:flex;flex-direction:column;justify-content:center;width:fit-content;position:relative;padding:0 var(--spacing-sizing-03);border-radius:var(--radius-small);color:var(--foreground) !important;background:var(--background);font:unset;text-decoration:unset;white-space:nowrap;pointer-events:none}[data-bspk=tag][data-wrap]{height:auto}[data-bspk=tag][data-variant=pill]{border-radius:var(--radius-circular)}[data-bspk=tag][data-variant=corner-wrap]{border-bottom-right-radius:0}[data-bspk=tag][data-size=small]{font:var(--labels-small);height:var(--spacing-sizing-08)}[data-bspk=tag][data-size=x-small]{font:var(--labels-x-small);height:var(--spacing-sizing-06)}[data-bspk=tag][data-color=white]{box-shadow:var(--drop-shadow-south)}[data-bspk=tag] [data-triangle]{position:absolute;bottom:-12px;right:0;width:0;height:0;border-style:solid;border-width:12px 12px 0 0;border-color:var(--foreground) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transform:rotate(0deg)}`);;
 /**
  * A non-interactive visual indicators to draw attention or categorization of a component.
  *

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AAiDpB;;;;GAIG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../src/Tag.tsx"],"names":[],"mappings":";AAKA,OAAO,YAAY,CAAC;AA+CpB;;;;GAIG;AACH,SAAS,GAAG,CAAkC,EAC1C,QAAQ,EACR,EAAE,EACF,KAAK,GAAG,OAAO,EACf,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,MAAM,EAChB,IAAI,EACJ,GAAG,KAAK,EACqB;IAC7B,MAAM,EAAE,GAAgB,EAAE,IAAI,MAAM,CAAC;IAErC,OAAO,CACH,MAAC,EAAE,OACK,KAAK,eACC,KAAK,gBACH,KAAK,eACN,IAAI,kBACD,OAAO,eACV,IAAI,IAAI,SAAS,aAE3B,QAAQ,EACR,OAAO,KAAK,aAAa,IAAI,sCAAqB,IAClD,CACR,CAAC;AACN,CAAC;AAED,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAC;AAErB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/TextInput.d.ts

@@ -1,25 +1,34 @@
-import './text-input.scss';
 import { ChangeEvent, HTMLInputAutoCompleteAttribute, HTMLInputTypeAttribute, ReactNode } from 'react';
-import { ElementProps, CommonProps, InvalidPropsLibrary } from '.';
+import { ElementProps, CommonProps, InvalidPropsLibrary, SetRef } from '.';
+import './text-input.scss';
+export declare const DEFAULT: {
+    readonly size: "medium";
+    readonly value: "";
+    readonly type: Extract<HTMLInputTypeAttribute, "number" | "text">;
+    readonly autoComplete: "off";
+};
 export type TextInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'required' | 'size' | 'value'> & InvalidPropsLibrary & {
     /**
      * Callback when the value of the field changes.
      *
-     * @type (next: String, Event) => void
      * @required
      */
     onChange: (next: string, event?: ChangeEvent<HTMLInputElement>) => void;
     /** The ref of the container. */
-    containerRef?: (node: HTMLElement | null) => void;
+    containerRef?: SetRef<HTMLDivElement>;
     /** The ref of the input. */
-    inputRef?: (node: HTMLElement | null) => void;
+    inputRef?: SetRef<HTMLInputElement>;
     /** The trailing element to display in the field. */
     trailing?: ReactNode;
     /** The leading element to display in the field. */
     leading?: ReactNode;
     /** The placeholder of the field. */
     placeholder?: string;
-    /** The type of the input. */
+    /**
+     * The type of the input.
+     *
+     * @default text
+     */
     type?: Extract<HTMLInputTypeAttribute, 'number' | 'text'>;
     /**
      * Specifies if user agent has any permission to provide automated assistance in filling out form field values.

package/dist/TextInput.js

@@ -1,8 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SvgCancel } from '@bspk/icons/Cancel';
-import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:none;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}[data-bspk=text-input]:focus-within button[data-clear]{display:flex}[data-bspk=text-input]:has(button[data-clear]){padding-right:0}`);;
 import { useId } from './hooks/useId';
+import { styleAdd } from './utils/styleAdd';
+styleAdd(`[data-bspk=text-input]{--border-color: var(--stroke-neutral-base);display:flex;flex-flow:row nowrap;background-color:var(--surface-neutral-t1-base);border:solid 1px var(--border-color);height:var(--field-height);border-radius:var(--radius-small);padding:0 0 0 var(--field-padding);gap:var(--spacing-sizing-01);width:100%}[data-bspk=text-input]>*{display:flex;justify-content:center;align-items:center;height:var(--field-height);font:var(--field-font);color:var(--foreground-neutral-on-surface);min-width:0}[data-bspk=text-input]:hover:not(:focus-within){background:linear-gradient(var(--interactions-hover-opacity), var(--interactions-hover-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input]:active:not(:focus-within){background:linear-gradient(var(--interactions-press-opacity), var(--interactions-press-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-readonly]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]{--border-color: var(--stroke-neutral-disabled-light);background:linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=text-input][data-disabled]>*{color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=text-input][data-invalid]{--border-color: var(--status-error)}[data-bspk=text-input][data-size=small]{--field-padding: var(--spacing-sizing-02);--field-height: var(--spacing-sizing-08);--field-font: var(--body-small);--field-icon-width: var(--spacing-sizing-04);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=medium]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-10);--field-font: var(--body-base);--field-icon-width: var(--spacing-sizing-05);--field-clear-width: var(--spacing-sizing-05)}[data-bspk=text-input][data-size=large]{--field-padding: var(--spacing-sizing-03);--field-height: var(--spacing-sizing-12);--field-font: var(--body-large);--field-icon-width: var(--spacing-sizing-06);--field-clear-width: var(--spacing-sizing-06)}[data-bspk=text-input] [data-leading] svg,[data-bspk=text-input] [data-trailing] svg{width:var(--field-icon-width)}[data-bspk=text-input] label{font:var(--labels-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=text-input] input{flex:1;background-color:rgba(0,0,0,0) !important;border:none;outline:none;padding:0;pointer-events:all;text-overflow:ellipsis}[data-bspk=text-input] input[type=number]::-webkit-inner-spin-button,[data-bspk=text-input] input[type=number]::-webkit-outer-spin-button{display:none}[data-bspk=text-input] button[data-clear]{display:flex;border:none;background:none;padding:0;cursor:pointer;pointer-events:all;margin-left:var(--spacing-sizing-02);padding-right:var(--field-padding)}[data-bspk=text-input] button[data-clear] svg{pointer-events:none;width:var(--field-clear-width)}[data-bspk=text-input]:not(:focus-within),[data-bspk=text-input][data-empty],[data-bspk=text-input][data-readonly],[data-bspk=text-input][data-disabled]{padding-right:var(--field-padding)}[data-bspk=text-input]:not(:focus-within) button[data-clear],[data-bspk=text-input][data-empty] button[data-clear],[data-bspk=text-input][data-readonly] button[data-clear],[data-bspk=text-input][data-disabled] button[data-clear]{display:none}[data-bspk=text-input]:focus-within{--border-color: var(--stroke-brand-primary)}`);;
+export const DEFAULT = {
+    size: 'medium',
+    value: '',
+    type: 'text',
+    autoComplete: 'off',
+};
 /**
  * A text input that allows users to enter text, numbers or symbols in a singular line. This is the base element and is
  * not intended to be used directly. Use the TextField component.
@@ -11,12 +17,12 @@ import { useId } from './hooks/useId';
  *
  * @name TextInput
  */
-function TextInput({ invalid: invalidProp, onChange, size = 'medium', value = '', name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type, readOnly, disabled, autoComplete = 'off', containerRef, errorMessage, ...otherProps }) {
+function TextInput({ invalid: invalidProp, onChange, size = DEFAULT.size, value = DEFAULT.value, name, 'aria-label': ariaLabel, inputRef, required, placeholder, id: idProp, leading, trailing, type = DEFAULT.type, readOnly, disabled, autoComplete = DEFAULT.autoComplete, containerRef, errorMessage, ...otherProps }) {
     const id = useId(idProp);
     const invalid = !readOnly && !disabled && invalidProp;
-    return (_jsxs("div", { "data-bspk": "text-input", "data-disabled": disabled || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, ref: containerRef, ...otherProps, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
+    return (_jsxs("div", { "data-bspk": "text-input", "data-disabled": disabled || undefined, "data-empty": !value.toString().length || undefined, "data-invalid": invalid || undefined, "data-readonly": readOnly || undefined, "data-required": required || undefined, "data-size": size, ref: containerRef, ...otherProps, children: [leading && _jsx("span", { "data-leading": true, children: leading }), _jsx("input", { "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "aria-label": ariaLabel, autoComplete: autoComplete, disabled: disabled || undefined, id: id, name: name, onChange: (event) => {
                     onChange(event.target.value, event);
-                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), value?.toString().length > 0 && !readOnly && !disabled && (_jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: _jsx(SvgCancel, {}) }))] }));
+                }, placeholder: placeholder || ' ', readOnly: readOnly || undefined, ref: inputRef, required: required || undefined, type: type, value: value }), trailing && _jsx("span", { "data-trailing": true, children: trailing }), _jsx("button", { "aria-label": "clear", "data-clear": true, onClick: () => onChange(''), children: _jsx(SvgCancel, {}) })] }));
 }
 TextInput.bspkName = 'TextInput';
 export { TextInput };

package/dist/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAoCtC;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,EAAE,EACV,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,KAAK,EACpB,YAAY,EACZ,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,kBACtB,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EACjD,KAAK,EAAE,QAAQ,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,CACvD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,CACZ,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../src/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAItC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,CAAC,MAAM,OAAO,GAAG;IACnB,IAAI,EAAE,QAAQ;IACd,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,MAA4D;IAClE,YAAY,EAAE,KAAK;CACb,CAAC;AAqCX;;;;;;;GAOG;AACH,SAAS,SAAS,CAAC,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,KAAK,GAAG,OAAO,CAAC,KAAK,EACrB,IAAI,EACJ,YAAY,EAAE,SAAS,EACvB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,IAAI,GAAG,OAAO,CAAC,IAAI,EACnB,QAAQ,EACR,QAAQ,EACR,YAAY,GAAG,OAAO,CAAC,YAAY,EACnC,YAAY,EACZ,YAAY,EACZ,GAAG,UAAU,EACqB;IAClC,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,OAAO,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,IAAI,WAAW,CAAC;IAEtD,OAAO,CACH,4BACc,YAAY,mBACP,QAAQ,IAAI,SAAS,gBACxB,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,SAAS,kBACnC,OAAO,IAAI,SAAS,mBACnB,QAAQ,IAAI,SAAS,mBACrB,QAAQ,IAAI,SAAS,eACzB,IAAI,EACf,GAAG,EAAE,YAAY,KACb,UAAU,aAEb,OAAO,IAAI,+CAAoB,OAAO,GAAQ,EAC/C,qCACuB,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,gBACtB,SAAS,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;oBAChB,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;gBACxC,CAAC,EACD,WAAW,EAAE,WAAW,IAAI,GAAG,EAC/B,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,EACb,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,GACd,EACD,QAAQ,IAAI,gDAAqB,QAAQ,GAAQ,EAClD,+BAAmB,OAAO,sBAAY,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,YAC7D,KAAC,SAAS,KAAG,GACR,IACP,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/Textarea.d.ts

@@ -1,6 +1,6 @@
 import './textarea.scss';
-import { ChangeEvent, Ref } from 'react';
-import { CommonProps, InvalidPropsLibrary } from './';
+import { ChangeEvent } from 'react';
+import { CommonProps, InvalidPropsLibrary, SetRef } from './';
 export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'readOnly' | 'required'> & InvalidPropsLibrary & {
     /**
      * Callback when the value of the field changes.
@@ -28,7 +28,7 @@ export type TextareaProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'read
      */
     name: string;
     /** The ref of the field. */
-    innerRef?: Ref<HTMLTextAreaElement>;
+    innerRef?: SetRef<HTMLTextAreaElement>;
     /** The placeholder of the field. */
     placeholder?: string;
     /**

package/dist/avatar-group.css

@@ -0,0 +1 @@
+[data-bspk=avatar-group]{width:100%}[data-bspk=avatar-group] [data-wrap]{width:100%;display:flex;flex-direction:row;align-items:end;justify-content:end;gap:var(--spacing-sizing-02);overflow:hidden}

package/dist/avatar.css

@@ -1 +1 @@
-[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:999px;background-color:var(--background);color:var(--foreground);font:var(--font)}[data-bspk=avatar]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large)}
+[data-bspk=avatar]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-10);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0;height:var(--height);width:var(--height);aspect-ratio:1/1;border-radius:999px;background-color:var(--background);color:var(--foreground);font:var(--font)}[data-bspk=avatar]:not([data-color]){--foreground: var(--foreground-neutral-on-surface);--background: var(--surface-neutral-t3-low)}[data-bspk=avatar]:has(img){overflow:hidden}[data-bspk=avatar] img{max-width:100%}[data-bspk=avatar] svg{width:var(--svg-size);height:var(--svg-size)}[data-bspk=avatar] [data-icon]{display:flex;align-items:center;justify-content:center}[data-bspk=avatar][data-size=x-small]{--height: var(--spacing-sizing-06);--font: var(--labels-x-small);--svg-size: var(--spacing-sizing-04)}[data-bspk=avatar][data-size=small]{--height: var(--spacing-sizing-08);--font: var(--labels-small);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=medium]{--height: var(--spacing-sizing-10);--font: var(--labels-base);--svg-size: var(--spacing-sizing-05)}[data-bspk=avatar][data-size=large]{--height: var(--spacing-sizing-12);--font: var(--labels-large);--svg-size: var(--spacing-sizing-06)}[data-bspk=avatar][data-size=x-large]{--height: var(--spacing-sizing-14);--font: var(--subheader-x-large);--svg-size: var(--spacing-sizing-08)}[data-bspk=avatar][data-size=xx-large]{--height: var(--spacing-sizing-17);--font: var(--subheader-xx-large);--svg-size: var(--spacing-sizing-09)}[data-bspk=avatar][data-size=xxx-large]{--height: var(--spacing-sizing-19);--font: var(--display-regular-small);--svg-size: var(--spacing-sizing-12)}[data-bspk=avatar][data-size=xxxx-large]{--height: var(--spacing-sizing-21);--font: var(--display-regular-medium);--svg-size: var(--spacing-sizing-15)}[data-bspk=avatar][data-size=xxxxx-large]{--height: var(--spacing-sizing-23);--font: var(--display-regular-large);--svg-size: var(--spacing-sizing-17)}

package/dist/badge.css

@@ -1 +1 @@
-[data-bspk=badge]{--size: var(--spacing-sizing-06);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-circular);height:var(--size);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)}
+[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)}

package/dist/button.css

@@ -1 +1 @@
-[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}
+[data-bspk=button]{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--spacing-sizing-02);border:none;cursor:pointer;box-sizing:border-box;background:rgba(0,0,0,0);text-decoration:none;width:fit-content;font-family:var(--typeface);position:relative}[data-bspk=button] [data-touch-target]{min-width:var(--spacing-sizing-12);min-height:var(--spacing-sizing-12)}[data-bspk=button][data-width=hug]{width:fit-content}[data-bspk=button][data-width=fill]{width:100%}[data-bspk=button][data-size=x-small]{font-size:var(--typography-size-xs);line-height:var(--typography-line-height-lh-1);height:var(--spacing-sizing-06);min-width:var(--spacing-sizing-06);gap:var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small]:has([data-button-label]),[data-bspk=button][data-size=x-small][data-override]{padding:0 var(--spacing-sizing-02)}[data-bspk=button][data-size=x-small] [data-button-icon]{width:var(--spacing-sizing-04);height:var(--spacing-sizing-04)}[data-bspk=button][data-size=small]{font-size:var(--typography-size-sm);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-08);min-width:var(--spacing-sizing-08)}[data-bspk=button][data-size=small]:has([data-button-label]),[data-bspk=button][data-size=small][data-override]{padding:6px var(--spacing-sizing-04)}[data-bspk=button][data-size=small] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=medium]{font-size:var(--typography-size-base);line-height:var(--typography-line-height-lh-2);height:var(--spacing-sizing-10);min-width:var(--spacing-sizing-10)}[data-bspk=button][data-size=medium]:has([data-button-label]),[data-bspk=button][data-size=medium][data-override]{padding:var(--spacing-sizing-02) var(--spacing-sizing-04)}[data-bspk=button][data-size=medium] [data-button-icon]{width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=button][data-size=large]{font-size:var(--typography-size-bp-md);line-height:var(--typography-line-height-lh-4);height:var(--spacing-sizing-12);min-width:var(--spacing-sizing-12)}[data-bspk=button][data-size=large]:has([data-button-label]),[data-bspk=button][data-size=large][data-override]{padding:var(--spacing-sizing-03) var(--spacing-sizing-04)}[data-bspk=button][data-size=large] [data-button-icon]{width:var(--spacing-sizing-06);height:var(--spacing-sizing-06)}[data-bspk=button][disabled]{cursor:not-allowed}[data-bspk=button] [data-button-icon]{display:flex;flex-direction:column;align-items:center}[data-bspk=button] [data-button-label]{display:flex;flex-direction:row;align-items:center}[data-bspk=button][data-variant=primary]{--primary-background: var(--surface-brand-primary);background:linear-gradient(var(--primary-background), var(--primary-background));color:var(--foreground-brand-on-primary);border-radius:var(--radius-small)}[data-bspk=button][data-variant=primary][disabled]{color:var(--foreground-neutral-disabled-on-surface);background:var(--interactions-disabled-opacity)}[data-pseudo=hover]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):hover{background:linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=active]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):active{background:linear-gradient(var(--interactions-brand-press-opacity), var(--interactions-brand-press-opacity)),linear-gradient(var(--primary-background), var(--primary-background))}[data-pseudo=focus]>[data-bspk=button][data-variant=primary]:not([disabled]),[data-bspk=button][data-variant=primary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=primary][data-destructive]{--primary-background: var(--status-error);color:var(--foreground-brand-on-primary)}[data-bspk=button][data-variant=secondary]{border:solid 1px var(--stroke-neutral-base);border-radius:var(--radius-small);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=secondary][disabled]{color:var(--foreground-neutral-disabled-on-surface);border:solid 1px var(--stroke-neutral-disabled-light)}[data-pseudo=hover]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):hover{background-color:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):active{background-color:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=secondary]:not([disabled]),[data-bspk=button][data-variant=secondary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=secondary][data-destructive]{background:rgba(0,0,0,0);color:var(--status-error);border:solid 1px var(--status-error)}[data-bspk=button][data-variant=tertiary]{background:rgba(0,0,0,0);color:var(--foreground-neutral-on-surface-variant-01)}[data-bspk=button][data-variant=tertiary][disabled]{color:var(--foreground-neutral-disabled-on-surface)}[data-pseudo=hover]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):hover{background:var(--interactions-neutral-hover-opacity)}[data-pseudo=active]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):active{background:var(--interactions-neutral-press-opacity)}[data-pseudo=focus]>[data-bspk=button][data-variant=tertiary]:not([disabled]),[data-bspk=button][data-variant=tertiary]:not([disabled]):focus-visible{outline:solid 2px var(--stroke-neutral-focus)}[data-bspk=button][data-variant=tertiary][data-destructive]{color:var(--status-error)}

package/dist/demo/ExampleModalRender.d.ts

@@ -0,0 +1,7 @@
+import { ModalProps } from '../Modal';
+import { Preset, DemoSetState } from './examples';
+export declare function ExampleModalRender({ props, preset, setState, }: {
+    props: ModalProps & Record<string, any>;
+    preset?: Preset<ModalProps>;
+    setState: DemoSetState;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/demo/ExampleModalRender.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { Button } from '../Button';
+import { Modal } from '../Modal';
+import { useModalState } from '../hooks/useModalState';
+export function ExampleModalRender({ props, preset, setState, }) {
+    let label = 'Open Modal';
+    const dialogId = useId();
+    const openKey = `${dialogId}-open`;
+    const { open, onClose, onOpen } = useModalState(!!props[openKey], (next) => setState({ [openKey]: next }));
+    const presetState = preset?.state || {};
+    if (presetState?.placement)
+        label += ` (${presetState?.placement})`;
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { label: label, onClick: () => onOpen() }), _jsx(Modal, { "data-example-component": true, id: "exampleId", ...props, onClose: onClose, open: open, children: _jsx("pre", { children: JSON.stringify(props, null, '\t') }) })] }));
+}
+//# sourceMappingURL=ExampleModalRender.js.map

package/dist/demo/ExampleModalRender.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleModalRender.js","sourceRoot":"","sources":["../../src/demo/ExampleModalRender.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAc,KAAK,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAIvD,MAAM,UAAU,kBAAkB,CAAC,EAC/B,KAAK,EACL,MAAM,EACN,QAAQ,GAMX;IACG,IAAI,KAAK,GAAG,YAAY,CAAC;IAEzB,MAAM,QAAQ,GAAG,KAAK,EAAE,CAAC;IACzB,MAAM,OAAO,GAAG,GAAG,QAAQ,OAAO,CAAC;IAEnC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAE3G,MAAM,WAAW,GAAwB,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC;IAC7D,IAAI,WAAW,EAAE,SAAS;QAAE,KAAK,IAAI,KAAK,WAAW,EAAE,SAAS,GAAG,CAAC;IAEpE,OAAO,CACH,8BACI,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,EAAE,GAAI,EACjD,KAAC,KAAK,oCAAwB,EAAE,EAAC,WAAW,KAAK,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,YAChF,wBAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,GAAO,GAC1C,IACT,CACN,CAAC;AACN,CAAC"}

package/dist/demo/ExamplePlaceholder.d.ts

@@ -0,0 +1,7 @@
+import { ElementProps } from '..';
+export declare function ExamplePlaceholder({ hideSize, height, width, direction, ...props }: ElementProps<{
+    hideSize?: boolean;
+    height?: number | string;
+    width?: number | string;
+    direction?: 'column' | 'row';
+}, 'div'>): import("react/jsx-runtime").JSX.Element;