@bspk/ui 1.1.13 → 1.1.15

package/dist/Checkbox.d.ts

@@ -18,7 +18,7 @@ export type CheckboxProps = ToggleControlProps<HTMLInputElement> & {
  *
  * @name Checkbox
  */
-declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
+declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 declare namespace Checkbox {
     var bspkName: string;
 }

package/dist/Checkbox.js

@@ -11,7 +11,7 @@ import { useEffect, useRef } from 'react';
  *
  * @name Checkbox
  */
-function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
+function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }) {
     const indeterminate = !!indeterminateProp;
     const checked = !!checkedProp && !indeterminate;
     const inputRef = useRef();
@@ -20,7 +20,7 @@ function Checkbox({ checked: checkedProp = false, indeterminate: indeterminatePr
             return;
         inputRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
+    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, checked: checked, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
                     if (!node)
                         return;
                     inputRef.current = node;

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAc1C;;;;;;;;GAQG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,kBACK,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAc1C;;;;;;;;GAQG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/CheckboxOption.d.ts

@@ -1,6 +1,7 @@
 import { CheckboxProps } from './Checkbox';
 import { ToggleOptionProps } from './ToggleOption';
-export type CheckboxOptionProps = Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'invalid' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+import { InvalidPropsLibrary } from '.';
+export type CheckboxOptionProps = InvalidPropsLibrary & Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *

package/dist/Dropdown.d.ts

@@ -1,14 +1,14 @@
 import './dropdown.scss';
 import { MenuProps } from './Menu';
 import { Placement } from './hooks/useFloating';
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 export type DropdownOption = {
     /** The value of the option. */
     value: string;
     /** The label of the option. This is the text that will be displayed on the option. */
     label: string;
 };
-export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
+export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & Pick<MenuProps<O>, 'isMulti' | 'itemCount' | 'onChange' | 'renderListItem'> & {
     /**
      * Array of options to display in the dropdown
      *
@@ -42,7 +42,7 @@ export type DropdownProps<O extends DropdownOption = DropdownOption> = CommonPro
  *
  * @name Dropdown
  */
-declare function Dropdown<O extends DropdownOption = DropdownOption>({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, readOnly, placement, name, isMulti, renderListItem, style: styleProp, }: DropdownProps<O>): import("react/jsx-runtime").JSX.Element;
+declare function Dropdown<O extends DropdownOption = DropdownOption>({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly, placement, name, isMulti, renderListItem, style: styleProp, }: DropdownProps<O>): import("react/jsx-runtime").JSX.Element;
 declare namespace Dropdown {
     var bspkName: string;
 }

package/dist/Dropdown.js

@@ -12,7 +12,7 @@ import { useId } from './hooks/useId';
  *
  * @name Dropdown
  */
-function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, }) {
+function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, }) {
     const id = useId(propId);
     const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
         placement,
@@ -20,6 +20,7 @@ function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaL
             disabled,
             invalid,
             readOnly,
+            errorMessage,
         },
     });
     const dropdownLabel = isMulti

package/dist/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA4CtC;;;;GAIG;AACH,SAAS,QAAQ,CAA4C,EACzD,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,GACD;IACf,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;SACX;KACJ,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;QACzB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,UAAU,gBACR,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC5B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC9E,2CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE;wBAChC,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC;oBAC/B,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA6CtC;;;;GAIG;AACH,SAAS,QAAQ,CAA4C,EACzD,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,GACD;IACf,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,YAAY;SACf;KACJ,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;QACzB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,UAAU,gBACR,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC5B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC9E,2CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,cAAc,EAAE,KAAK,EAAE,EAAE;wBAChC,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,cAAc,CAAC,CAAC;oBAC/B,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/FormField.d.ts

@@ -1,5 +1,5 @@
 import './form-field.scss';
-import { CommonProps } from './';
+import { CommonProps, InvalidPropsLibrary } from './';
 export type FieldControlProps = {
     /**
      * Marks the element as invalid and displays error message.
@@ -12,7 +12,7 @@ export type FieldControlProps = {
     /** The id of the error message */
     'aria-errormessage'?: string;
 };
-export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
+export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
     /**
      * The label of the field.
      *
@@ -22,7 +22,8 @@ export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
     /** The id of the control. */
     controlId: string;
     /**
-     * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or TimePicker.
+     * The children of the form field. This should be a control such as TextInput, Dropdown, DatePicker, or
+     * TimePicker.
      *
      * @type (childProps: FieldControlProps) => JSX.Element
      * @required
@@ -40,7 +41,7 @@ export type FormFieldProps = CommonProps<'errorMessage' | 'required'> & {
  *
  * @name FormField
  */
-declare function FormField({ label, errorMessage, helperText, children, labelTrailing, controlId, required }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;
+declare function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }: FormFieldProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace FormField {
     var bspkName: string;
 }

package/dist/FormField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=form-field]{box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}[data-bspk=form-field] header label{flex-grow:1}`);;
+styleAdd(`[data-bspk=form-field]{box-sizing:border-box;max-width:100%;width:fit-content;display:flex;flex-direction:column;gap:var(--spacing-sizing-01)}[data-bspk=form-field] header label{flex-grow:1}`);;
 import { InlineAlert } from './InlineAlert';
 import { Layout } from './Layout';
 import { Txt } from './Txt';
@@ -11,12 +11,12 @@ import { Txt } from './Txt';
  *
  * @name FormField
  */
-function FormField({ label, errorMessage, helperText, children, labelTrailing, controlId, required }) {
+function FormField({ label, invalid, errorMessage, helperText, children, labelTrailing, controlId, required, }) {
     const errorMessageId = errorMessage && `${controlId}-error-message`;
     const helperTextId = helperText && `${controlId}-helper-text`;
     if (typeof children !== 'function')
         return null;
-    return (_jsxs("div", { "data-bspk": "form-field", children: [_jsxs(Layout, { as: "header", children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
+    return (_jsxs("div", { "data-bspk": "form-field", "data-invalid": invalid || undefined, children: [_jsxs(Layout, { as: "header", children: [_jsxs("label", { htmlFor: controlId, children: [_jsx(Txt, { as: "span", variant: "labels-small", children: label }), required && (_jsx(Txt, { as: "span", variant: "body-small", children: ' (Required)' }))] }), labelTrailing] }), children({
                 invalid: !!errorMessage,
                 'aria-describedby': helperTextId,
                 'aria-errormessage': errorMessageId,

package/dist/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAuC5B;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAkB;IAChH,MAAM,cAAc,GAAG,YAAY,IAAI,GAAG,SAAS,gBAAgB,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,IAAI,GAAG,SAAS,cAAc,CAAC;IAE9D,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,aACvB,MAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,aACf,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO,EAAE,CAAC,CAAC,YAAY;gBACvB,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../src/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAyC5B;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,EACf,KAAK,EACL,OAAO,EACP,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,aAAa,EACb,SAAS,EACT,QAAQ,GACK;IACb,MAAM,cAAc,GAAG,YAAY,IAAI,GAAG,SAAS,gBAAgB,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,IAAI,GAAG,SAAS,cAAc,CAAC;IAE9D,IAAI,OAAO,QAAQ,KAAK,UAAU;QAAE,OAAO,IAAI,CAAC;IAEhD,OAAO,CACH,4BAAe,YAAY,kBAAe,OAAO,IAAI,SAAS,aAC1D,MAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,aACf,iBAAO,OAAO,EAAE,SAAS,aACrB,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,cAAc,YAChC,KAAK,GACJ,EACL,QAAQ,IAAI,CACT,KAAC,GAAG,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,YAAY,YAC9B,aAAa,GACZ,CACT,IACG,EACP,aAAa,IACT,EACR,QAAQ,CAAC;gBACN,OAAO,EAAE,CAAC,CAAC,YAAY;gBACvB,kBAAkB,EAAE,YAAY;gBAChC,mBAAmB,EAAE,cAAc;aACtC,CAAC,EACD,YAAY,IAAI,CACb,KAAC,WAAW,IAAC,EAAE,EAAE,cAAc,EAAE,OAAO,EAAC,OAAO,YAC3C,YAAY,GACH,CACjB,EACA,UAAU,IAAI,CACX,KAAC,GAAG,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,YAAY,YACtC,UAAU,GACT,CACT,IACC,CACT,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/InlineAlert.js

@@ -3,7 +3,7 @@ import { SvgCheckCircleFill } from '@bspk/icons/CheckCircleFill';
 import { SvgErrorFill } from '@bspk/icons/ErrorFill';
 import { SvgInfoFill } from '@bspk/icons/InfoFill';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:center;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}`);;
+styleAdd(`[data-bspk=inline-alert]{display:flex;align-items:start;justify-content:start;flex-direction:row;gap:var(--spacing-sizing-02)}[data-bspk=inline-alert] [data-txt]{flex:1}[data-bspk=inline-alert][data-variant=error]{color:var(--status-error);--first-tone: var(--status-error);--second-tone: var(--status-on-information)}[data-bspk=inline-alert][data-variant=success]{color:var(--status-success);--first-tone: var(--status-success);--second-tone: var(--status-on-success)}[data-bspk=inline-alert][data-variant=warning]{color:var(--foreground-neutral-on-surface);--first-tone: var(--status-warning);--second-tone: var(--status-on-warning)}[data-bspk=inline-alert][data-variant=informational]{color:var(--status-information);--first-tone: var(--status-information);--second-tone: var(--status-on-information)}[data-bspk=inline-alert] svg{color:var(--first-tone);width:var(--spacing-sizing-05);height:var(--spacing-sizing-05)}[data-bspk=inline-alert] svg [data-second-tone]{fill:var(--second-tone)}`);;
 import { Txt } from './Txt';
 /**
  * Inline alerts provide contextual feedback messages for typical user actions with a handful of available and flexible

package/dist/Link.d.ts

@@ -1,6 +1,7 @@
 import './link.scss';
 import { AnchorHTMLAttributes } from 'react';
-export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & {
+import { CommonPropsLibrary } from '.';
+export type LinkProps = Pick<AnchorHTMLAttributes<unknown>, 'target'> & Pick<CommonPropsLibrary, 'disabled'> & {
     /**
      * The label of the link.
      *

package/dist/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,aAAa,CAAC;AA6BrB;;;;GAIG;AACH,SAAS,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAa;IACrE,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,EAC9D,GAAG,EAAC,YAAY,EAChB,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,aAE7D,yBAAO,KAAK,GAAQ,EACnB,YAAY,KAAK,UAAU,IAAI,KAAC,YAAY,KAAG,EAC/C,YAAY,KAAK,SAAS,IAAI,KAAC,eAAe,KAAG,EACjD,YAAY,KAAK,MAAM,IAAI,KAAC,OAAO,KAAG,IACvC,CACP,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../src/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,aAAa,CAAC;AAgCrB;;;;GAIG;AACH,SAAS,IAAI,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,EAAa;IACrE,OAAO,CACH,gBACQ,KAAK,eACC,MAAM,eACL,IAAI,iBACF,OAAO,KAAK,QAAQ,IAAI,SAAS,yBACzB,OAAO,KAAK,gBAAgB,IAAI,SAAS,EAC9D,GAAG,EAAC,YAAY,EAChB,MAAM,EAAE,YAAY,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,aAE7D,yBAAO,KAAK,GAAQ,EACnB,YAAY,KAAK,UAAU,IAAI,KAAC,YAAY,KAAG,EAC/C,YAAY,KAAK,SAAS,IAAI,KAAC,eAAe,KAAG,EACjD,YAAY,KAAK,MAAM,IAAI,KAAC,OAAO,KAAG,IACvC,CACP,CAAC;AACN,CAAC;AAED,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;AAEvB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/ListItem.d.ts

@@ -54,7 +54,7 @@ export type ListItemProps<As extends ElementType = 'div'> = CommonProps<'active'
  *
  * @name ListItem
  */
-declare function ListItem<As extends ElementType = 'div'>({ as, disabled, invalid, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | undefined;
+declare function ListItem<As extends ElementType = 'div'>({ as, disabled, invalid, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, errorMessage, ...props }: ElementProps<ListItemProps<As>, As>): import("react/jsx-runtime").JSX.Element | undefined;
 declare namespace ListItem {
     var bspkName: string;
     var Button: typeof ListItemButton;

package/dist/ListItem.js

@@ -32,7 +32,7 @@ export const TRAILING_COMPONENTS = Object.freeze([
  *
  * @name ListItem
  */
-function ListItem({ as, disabled, invalid, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, ...props }) {
+function ListItem({ as, disabled, invalid, leading: leadingProp, trailing: trailingProp, label, subText, active, readOnly, errorMessage, ...props }) {
     let As = as || 'div';
     const { logError } = useErrorLogger();
     const { leading, trailing } = useChildren(leadingProp, trailingProp);
@@ -57,7 +57,7 @@ function ListItem({ as, disabled, invalid, leading: leadingProp, trailing: trail
     if (!As && 'onClick' in props)
         As = 'button';
     const actionable = ('onClick' in props || 'href' in props) && !disabled && !readOnly;
-    return (_jsx(As, { ...props, "aria-disabled": disabled || undefined, "aria-invalid": invalid || undefined, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-component": leading?.name || undefined, "data-readonly": readOnly || undefined, role: as !== 'button' && 'onClick' in props ? 'button' : undefined, children: _jsxs("span", { "data-inner": true, children: [leading && (_jsx("span", { "data-component": leading.name, "data-leading": true, children: leading.child })), _jsxs("span", { "data-item-label": true, children: [_jsx("span", { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && (_jsx("span", { "data-component": trailing.name, "data-trailing": true, children: trailing.child }))] }) }));
+    return (_jsx(As, { ...props, "aria-disabled": disabled || undefined, "aria-errormessage": errorMessage || undefined, "aria-invalid": invalid || undefined, "data-action": actionable || undefined, "data-active": active || undefined, "data-bspk": "list-item", "data-component": leading?.name || undefined, "data-readonly": readOnly || undefined, role: as !== 'button' && 'onClick' in props ? 'button' : undefined, children: _jsxs("span", { "data-inner": true, children: [leading && (_jsx("span", { "data-component": leading.name, "data-leading": true, children: leading.child })), _jsxs("span", { "data-item-label": true, children: [_jsx("span", { "data-text": true, children: label }), subText && _jsx("span", { "data-sub-text": true, children: subText })] }), trailing && (_jsx("span", { "data-component": trailing.name, "data-trailing": true, children: trailing.child }))] }) }));
 }
 ListItem.bspkName = 'ListItem';
 /** A button that can be used as a trailing element in a ListItem. */

package/dist/ListItem.js.map

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

package/dist/NumberField.d.ts

@@ -1,6 +1,7 @@
 import { FormFieldProps } from './FormField';
 import { NumberInputProps } from './NumberInput';
-export type NumberFieldProps = Pick<NumberInputProps, 'centered' | 'disabled' | 'id' | 'invalid' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
+import { InvalidPropsLibrary } from '.';
+export type NumberFieldProps = InvalidPropsLibrary & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'> & Pick<NumberInputProps, 'align' | 'disabled' | 'id' | 'name' | 'onChange' | 'readOnly' | 'size' | 'value'>;
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).

package/dist/NumberInput.d.ts

@@ -1,32 +1,42 @@
 import './number-input.scss';
-import { CommonProps } from '.';
-export type NumberInputProps = CommonProps<'aria-label' | 'disabled' | 'id' | 'invalid' | 'name' | 'readOnly' | 'size'> & {
+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. */
+    onChange: (value: number | undefined) => void;
     /**
-     * The value of the control.
+     * The alignment of the input box. Centered between the plus and minus buttons or to the left of the buttons.
      *
-     * @required
+     * @default center
      */
-    value?: number;
-    /** Callback when the value changes. */
-    onChange: (value: number) => void;
+    align?: 'center' | 'left';
     /**
-     * If the value should be centered between the up & down buttons.
+     * Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is
+     * accepted.
      *
-     * @default false
+     * @default 99
+     * @maximum 99
+     * @minimum 1
      */
-    centered?: boolean;
-    /** Defines the [maximum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max) value that is accepted. */
     max?: number;
-    /** Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is accepted. */
+    /**
+     * Defines the [minimum](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min) value that is
+     * accepted.
+     *
+     * @minimum 0
+     */
     min?: number;
 };
 /**
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
  *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
  * @name NumberInput
  */
-declare function NumberInput({ value, onChange, centered, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+declare function NumberInput({ value, onChange, align, size, disabled, readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 declare namespace NumberInput {
     var bspkName: string;
 }

package/dist/NumberInput.js

@@ -2,9 +2,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { SvgAdd } from '@bspk/icons/Add';
 import { SvgRemove } from '@bspk/icons/Remove';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base)}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary);outline:1px solid var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{min-width:var(--height);background:none;border:none;cursor:pointer;font:var(--font);display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);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=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}`);;
+styleAdd(`[data-bspk=number-input]{--font: var(--body-base);--height: var(--spacing-sizing-10);--svg-width: var(--spacing-sizing-05);--color: var(--foreground-neutral-on-surface);width:100%;display:flex;flex-flow:row nowrap;font:var(--font);height:var(--height);border:1px solid var(--stroke-neutral-base);border-radius:var(--radius-small);background:var(--surface-neutral-t1-base);max-width:280px}[data-bspk=number-input]:focus-within{border-color:var(--stroke-brand-primary)}[data-bspk=number-input] [data-divider]{width:4px;border-right:1px solid var(--stroke-neutral-base);height:calc(var(--height) - 8px);margin:3px 0}[data-bspk=number-input] button{width:var(--height);height:var(--height);background:none;border:none;cursor:pointer;font:var(--font);flex-shrink:0;display:flex;justify-content:center;align-items:center;color:var(--color)}[data-bspk=number-input] button svg{width:var(--svg-width)}[data-bspk=number-input] button:disabled{cursor:not-allowed;color:var(--foreground-neutral-disabled-on-surface)}[data-bspk=number-input] input{color:var(--color);min-width:0;display:block;font:var(--font);text-align:center;padding:0 var(--spacing-sizing-03);background:rgba(0,0,0,0);border:none;flex-grow:1}[data-bspk=number-input] input:focus{outline:none}[data-bspk=number-input] input::-webkit-outer-spin-button,[data-bspk=number-input] input::-webkit-inner-spin-button{appearance:none;margin:0}[data-bspk=number-input] input[type=number]{appearance:textfield}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:hover,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):hover{background-color:var(--interactions-hover-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly]) input:active,[data-bspk=number-input]:not([data-disabled],[data-readonly]) button:not(:disabled):active{background-color:var(--interactions-press-opacity)}[data-bspk=number-input]:not([data-disabled],[data-readonly])[data-invalid]{border-color:var(--status-error);outline-color:var(--status-error)}[data-bspk=number-input][data-disabled],[data-bspk=number-input][data-readonly]{--color: var(--foreground-neutral-disabled-on-surface);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=number-input][data-disabled] [data-divider],[data-bspk=number-input][data-readonly] [data-divider]{border-color:var(--stroke-neutral-disabled-light)}[data-bspk=number-input][data-readonly] input{color:var(--foreground-neutral-on-surface) !important}[data-bspk=number-input][data-size=small]{--font: var(--body-small);--height: var(--spacing-sizing-08)}[data-bspk=number-input][data-size=large]{--font: var(--body-large);--height: var(--spacing-sizing-12);--svg-width: var(--spacing-sizing-06)}`);;
 import { useId } from './hooks/useId';
 import { useLongPress } from './hooks/useLongPress';
+const DEFAULT = {
+    align: 'center',
+    size: 'medium',
+    disabled: false,
+    readOnly: false,
+};
 function isNumber(value) {
     if (typeof value === 'number')
         return value;
@@ -17,15 +23,20 @@ function isNumber(value) {
  * A input element that allows users to either input a numerical value or singularly increase or decrease the values by
  * pressing the (+) or (-).
  *
+ * The value of the input is a number. The value is clamped to the min and max values if they are provided.
+ *
  * @name NumberInput
  */
-function NumberInput({ 
-//
-value = 1, onChange, centered = false, size = 'medium', disabled = false, readOnly = false, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }) {
+function NumberInput({ value, onChange, align = DEFAULT.align, size = DEFAULT.size, disabled = DEFAULT.disabled, readOnly = DEFAULT.readOnly, name, id: inputIdProp, invalid, 'aria-label': ariaLabel, max: maxProp, min: minProp, }) {
+    const centered = align !== 'left';
     const inputId = useId(inputIdProp);
     const max = isNumber(maxProp);
     const min = isNumber(minProp);
     const fix = (next = value) => {
+        if (typeof next !== 'number') {
+            onChange(undefined);
+            return;
+        }
         let fixValue = next;
         if (typeof min !== 'undefined' && next < min)
             fixValue = min;

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/Radio.d.ts

@@ -1,6 +1,6 @@
 import './radio.scss';
-import { ToggleControlProps, ElementProps } from './';
-export type RadioProps = Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'>;
+import { ToggleControlProps, ElementProps, InvalidPropsLibrary } from './';
+export type RadioProps = InvalidPropsLibrary & Pick<ToggleControlProps<HTMLInputElement>, 'aria-label' | 'checked' | 'disabled' | 'name' | 'onChange' | 'value'>;
 /**
  * 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.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../src/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,cAAc,CAAC;AAQtB;;;;;;;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;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"}

package/dist/RadioOption.d.ts

@@ -1,6 +1,7 @@
 import { RadioProps } from './Radio';
 import { ToggleOptionProps } from './ToggleOption';
-export type RadioOptionProps = Pick<RadioProps, 'checked' | 'disabled' | 'invalid' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
+import { InvalidPropsLibrary } from '.';
+export type RadioOptionProps = InvalidPropsLibrary & Pick<RadioProps, 'checked' | 'disabled' | 'name' | 'onChange' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'>;
 /**
  * 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;AAKjE;;;;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":";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"}

package/dist/SegmentedControl.d.ts

@@ -1,6 +1,6 @@
 import './segmented-control.scss';
 import { ElementProps } from './';
-export type SegmentedToggleOption = {
+export type SegmentedControlOption = {
     /**
      * The label of the option. This is the text that will be displayed on the option.
      *
@@ -23,18 +23,22 @@ export type SegmentedControlProps = {
     /**
      * The options to display. Each option has a label and an optional leading icon.
      *
-     * @type SegmentedToggleOption[]
+     * @type SegmentedControlOption[]
      * @required
      */
-    options: SegmentedToggleOption[];
-    /** The id of the selected option. */
-    value?: SegmentedToggleOption['value'];
+    options: SegmentedControlOption[];
+    /**
+     * The id of the selected option.
+     *
+     * @required
+     */
+    value: SegmentedControlOption['value'];
     /**
      * The function to call when the option is clicked.
      *
      * @required
      */
-    onChange: (value: SegmentedToggleOption['value']) => void;
+    onChange: (value: SegmentedControlOption['value']) => void;
     /**
      * The size of the options.
      *
@@ -61,7 +65,7 @@ export type SegmentedControlProps = {
  *
  * @name SegmentedControl
  */
-declare function SegmentedControl({ onChange, value, size, options, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ onChange, value, size, options: optionsProp, width, showLabels: showLabelsProp, ...containerProps }: ElementProps<SegmentedControlProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControl {
     var bspkName: string;
 }

package/dist/SegmentedControl.js

@@ -3,18 +3,19 @@ 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}`);;
 import { Fragment } from 'react';
 import { Tooltip } from './Tooltip';
-import { useNavOptions } from './hooks/useNavOptions';
+import { useOptionIconsInvalid } from './hooks/useOptionIconsInvalid';
 /**
  * Navigation tool that organizes content across different screens and views.
  *
  * @name SegmentedControl
  */
-function SegmentedControl({ onChange, value, size = 'medium', options, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
-    const items = useNavOptions(options);
-    const hideLabels = showLabelsProp === false && items.every((item) => item.icon && item.label);
-    return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: items.map((item, index) => {
+function SegmentedControl({ onChange, value, size = 'medium', options: optionsProp, width = 'hug', showLabels: showLabelsProp = true, ...containerProps }) {
+    const options = Array.isArray(optionsProp) ? optionsProp : [];
+    useOptionIconsInvalid(options);
+    const hideLabels = showLabelsProp === false && options.every((item) => item.icon && item.label);
+    return (_jsx("div", { ...containerProps, "data-bspk": "segmented-control", "data-size": size, "data-width": width, children: options.map((item, index) => {
             const isActive = item.value === value;
-            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === items.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
+            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !hideLabels, label: item.label, placement: "top", children: _jsx("button", { "aria-label": item.label, "data-first": index === 0 || undefined, "data-last": index === options.length - 1 || undefined, "data-selected": isActive || undefined, disabled: item.disabled || undefined, onClick: () => onChange(item.value || item.label), children: _jsx("span", { "data-outer": true, children: _jsxs("span", { "data-inner": true, children: [(isActive && item.iconActive) || item.icon, !hideLabels && item.label] }) }) }) }) }, item.value));
         }) }));
 }
 SegmentedControl.bspkName = 'SegmentedControl';

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,aAAa,EAAE,MAAM,uBAAuB,CAAC;AA8DtD;;;;GAIG;AACH,SAAS,gBAAgB,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,KAAK,GAAG,KAAK,EACb,UAAU,EAAE,cAAc,GAAG,IAAI,EACjC,GAAG,cAAc,EACwB;IACzC,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAErC,MAAM,UAAU,GAAG,cAAc,KAAK,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9F,OAAO,CACH,iBAAS,cAAc,eAAY,mBAAmB,eAAY,IAAI,gBAAc,KAAK,YACpF,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACvB,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,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,SAAS,mBACnC,QAAQ,IAAI,SAAS,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,YAEnC,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;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"}

package/dist/StylesProviderAnywhere.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/anywhere.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:hover{color:var(--foreground-link-text-default-hovered)}a:visited{color:var(--foreground-link-text-default-visited)}a:disabled{pointer-events:none;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Anywhere styles to the application.
  *

package/dist/StylesProviderBetterHomesGardens.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@bspk/styles/better-homes-gardens.css';
 import { styleAdd } from './utils/styleAdd';
-styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:hover{color:var(--foreground-link-text-default-hovered)}a:visited{color:var(--foreground-link-text-default-visited)}a:disabled{pointer-events:none;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
+styleAdd(`[data-color=grey]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t2-lowest)}[data-color=white]{--foreground: var(--foreground-neutral-on-surface-variant-01);--background: var(--surface-neutral-t1-base)}[data-color=primary]{--foreground: var(--foreground-brand-primary-depth);--background: var(--surface-brand-primary-highlight)}[data-color=secondary]{--foreground: var(--foreground-brand-secondary-depth);--background: var(--surface-brand-secondary-highlight)}[data-color=blue]{--foreground: var(--foreground-spectrum-blue);--background: var(--surface-spectrum-blue)}[data-color=green]{--foreground: var(--foreground-spectrum-green);--background: var(--surface-spectrum-green)}[data-color=lime]{--foreground: var(--foreground-spectrum-lime);--background: var(--surface-spectrum-lime)}[data-color=magenta]{--foreground: var(--foreground-spectrum-magenta);--background: var(--surface-spectrum-magenta)}[data-color=orange]{--foreground: var(--foreground-spectrum-orange);--background: var(--surface-spectrum-orange)}[data-color=pink]{--foreground: var(--foreground-spectrum-pink);--background: var(--surface-spectrum-pink)}[data-color=purple]{--foreground: var(--foreground-spectrum-purple);--background: var(--surface-spectrum-purple)}[data-color=red]{--foreground: var(--foreground-spectrum-red);--background: var(--surface-spectrum-red)}[data-color=teal]{--foreground: var(--foreground-spectrum-teal);--background: var(--surface-spectrum-teal)}[data-color=yellow]{--foreground: var(--foreground-spectrum-yellow);--background: var(--surface-spectrum-yellow)}:root{--z-index-tooltip-popover: 1100;--z-index-dialog: 1000;--z-index-dropdown: 900;--z-index-fab: 800;--z-index-navbar: 700;--z-index-footer: 600}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}@media(prefers-reduced-motion){[data-animated]{animation:none !important}}body,html{height:100%;scroll-behavior:smooth}body{font:var(--body-base);background-color:var(--background-base);color:var(--foreground-neutral-on-surface)}a{color:var(--foreground-link-text-default)}a:not([disabled]):hover{color:var(--foreground-link-text-default-hovered)}a:not([disabled]):visited{color:var(--foreground-link-text-default-visited)}a[disabled]{pointer-events:none;cursor:text;color:var(--foreground-link-text-default-disabled)}a[data-subtle]{color:var(--foreground-neutral-on-surface)}a[data-subtle]:hover{color:var(--foreground-link-text-subtle-hovered)}a[data-subtle]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-disabled)}a[data-subtle-inverse]{color:var(--foreground-neutral-inverse-on-surface)}a[data-subtle-inverse]:hover{color:var(--foreground-link-text-subtle-inverse-hovered)}a[data-subtle-inverse]:disabled{pointer-events:none;color:var(--foreground-link-text-subtle-inversed-disabled)}input:-internal-autofill-previewed,input:-internal-autofill-selected,textarea:-internal-autofill-previewed,textarea:-internal-autofill-selected,select:-internal-autofill-previewed,select:-internal-autofill-selected{transition:color calc(infinity*1s) step-end,background-color calc(infinity*1s) step-end}[data-sr-only]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}ol{list-style-type:decimal}ol li{list-style-type:decimal;margin-left:var(--spacing-sizing-05)}ul{list-style-type:disc}ul li{list-style-type:disc;margin-left:var(--spacing-sizing-05)}[data-touch-target]{display:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;user-select:none;position:absolute;z-index:1;height:100%;width:100%;top:auto;left:auto}[data-touch-target]~*{position:relative;z-index:2}@media(any-pointer: coarse){[data-touch-target]{display:block}}`);;
 /**
  * Utility to provide the Better Homes & Gardens styles to the application.
  *