@bspk/ui 1.1.34 → 1.2.0

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

@@ -1,8 +1,8 @@
-import { ElementType, ReactNode } from 'react';
-import { ButtonSize, CommonProps, ElementProps, SetRef } from '../../index.js';
+import { AriaAttributes, ElementType, ReactNode } from 'react';
+import { ButtonSize, CommonProps, ElementProps, SetRef } from '-/types/common';
 import './button.scss';
 export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
-export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled'> & {
+export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabled' | 'owner'> & {
     /**
      * The label of the button.
      *
@@ -16,11 +16,14 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
      */
     icon?: ReactNode;
     /**
-     * Shows the button label. When label isn't showing it is used in a tooltip and as the aria-label prop.
+     * When true the button label is hidden and only the icon is shown. When label isn't showing it is used in a tooltip
+     * and as the aria-label prop.
      *
-     * @default true
+     * Ignored if `icon` is not provided.
+     *
+     * @default false
      */
-    showLabel?: boolean;
+    iconOnly?: boolean;
     /**
      * The element type to render as.
      *
@@ -85,11 +88,7 @@ export type ButtonProps<As extends ElementType = 'button'> = CommonProps<'disabl
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Button<As extends ElementType = 'button'>(props: ElementProps<ButtonProps<As>, As>): JSX.Element;
-declare namespace Button {
-    var bspkName: string;
-}
-export { Button };
+export declare function Button<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<ButtonProps<As>, As>): JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Button/Button.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isValidElement } from 'react';
 import { Tooltip } from '../Tooltip';
-import { isValidIcon } from '../../utils/children';
-import { useErrorLogger } from '../../utils/errors';
 import './button.css.js';
 /**
  * A clickable component that allows users to perform an action, make a choice or trigger a change in state.
@@ -24,25 +22,27 @@ import './button.css.js';
  *     }
  *
  * @name Button
- * @phase DesignReview
+ * @phase UXReview
  */
-function Button(props) {
-    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, 
-    // showLabel: showLabelProp = true,
-    showLabel = true, toolTip: toolTipProp, children, innerRef, ...containerProps } = props;
+export function Button(props) {
+    const { size = 'medium', variant = 'primary', destructive = false, width = 'hug', as: As = 'button', disabled = false, label: labelProp, icon, iconOnly: iconOnlyProp = false, toolTip: toolTipProp, children, innerRef, owner, ...containerProps } = props;
     const label = typeof children === 'string' ? children : labelProp || '';
-    // ignore showLabel=false if there is no icon
-    const hideLabel = showLabel === false && icon;
-    const toolTip = toolTipProp || (hideLabel ? label : undefined);
-    const { logError } = useErrorLogger();
-    logError(!!icon && !isValidIcon(icon), 'Button - The icon prop must be a valid icon element.');
-    logError(!label, 'Button - The button must have a label.');
-    const button = (_jsxs(As, { ...containerProps, "aria-label": label, "data-bspk": "button", "data-destructive": destructive || undefined, "data-size": size, "data-touch-target-parent": true, "data-variant": variant, "data-width": width, disabled: disabled || undefined, ref: innerRef, children: [children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [!!icon && isValidElement(icon) && _jsx("span", { "data-button-icon": true, children: icon }), !hideLabel && _jsx("span", { "data-button-label": true, children: label })] })), _jsx("span", { "data-touch-target": true })] }));
-    if (toolTip) {
+    // ignore iconOnly if there is no icon
+    const iconOnly = iconOnlyProp === true && !!icon;
+    // if toolTip label is not provided and iconOnly is true, toolTip should be label
+    const toolTip = toolTipProp || (iconOnly ? label : undefined);
+    const button = (triggerProps) => (_jsxs(As, { ...containerProps, "aria-describedby": triggerProps['aria-describedby'] || containerProps['aria-describedby'], "aria-label": label, "data-bspk": "button", "data-bspk-owner": owner || undefined, "data-destructive": destructive || undefined, "data-size": size, "data-touch-target-parent": true, "data-variant": variant, "data-width": width, disabled: disabled || undefined, onFocus: (e) => {
+            triggerProps.onFocus?.();
+            containerProps.onFocus?.(e);
+        }, onMouseLeave: (e) => {
+            triggerProps.onMouseLeave?.();
+            containerProps.onMouseLeave?.(e);
+        }, onMouseOver: (e) => {
+            triggerProps.onMouseOver?.();
+            containerProps.onMouseOver?.(e);
+        }, ref: innerRef, children: [children && typeof children !== 'string' ? (children) : (_jsxs(_Fragment, { children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-button-icon": true, children: icon })), !iconOnly && _jsx("span", { "data-button-label": true, children: label })] })), _jsx("span", { "data-touch-target": true })] }));
+    if (toolTip)
         return (_jsx(Tooltip, { label: toolTip, placement: "top", children: button }));
-    }
-    return button;
+    return button({});
 }
-Button.bspkName = 'Button';
-export { Button };
 //# sourceMappingURL=Button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,cAAc,EAAE,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,eAAe,CAAC;AAoEvB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,MAAM,CAAoC,KAAwC;IACvF,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI;IACJ,mCAAmC;IACnC,SAAS,GAAG,IAAI,EAChB,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,6CAA6C;IAC7C,MAAM,SAAS,GAAG,SAAS,KAAK,KAAK,IAAI,IAAI,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC/D,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,QAAQ,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,sDAAsD,CAAC,CAAC;IAC/F,QAAQ,CAAC,CAAC,KAAK,EAAE,wCAAwC,CAAC,CAAC;IAE3D,MAAM,MAAM,GAAG,CACX,MAAC,EAAE,OACK,cAAc,gBACN,KAAK,eACP,QAAQ,sBACA,WAAW,IAAI,SAAS,eAC/B,IAAI,oDAED,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,GAAG,EAAE,QAAQ,aAEZ,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,mDAAwB,IAAI,GAAQ,EACtE,CAAC,SAAS,IAAI,oDAAyB,KAAK,GAAQ,IACtD,CACN,EACD,2CAA0B,IACzB,CACR,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,MAAM,CAAC;AAClB,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0C,cAAc,EAAE,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAGpE,OAAO,eAAe,CAAC;AAuEvB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,MAAM,CAClB,KAAyD;IAEzD,MAAM,EACF,IAAI,GAAG,QAAQ,EACf,OAAO,GAAG,SAAS,EACnB,WAAW,GAAG,KAAK,EACnB,KAAK,GAAG,KAAK,EACb,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,QAAQ,GAAG,KAAK,EAChB,KAAK,EAAE,SAAS,EAChB,IAAI,EACJ,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,cAAc,EACpB,GAAG,KAAK,CAAC;IACV,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;IAExE,sCAAsC;IACtC,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IACjD,iFAAiF;IACjF,MAAM,OAAO,GAAG,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE9D,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,cAAc,sBACA,YAAY,CAAC,kBAAkB,CAAC,IAAI,cAAc,CAAC,kBAAkB,CAAC,gBAC5E,KAAK,eACP,QAAQ,qBACD,KAAK,IAAI,SAAS,sBACjB,WAAW,IAAI,SAAS,eAC/B,IAAI,oDAED,OAAO,gBACT,KAAK,EACjB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,cAAc,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,cAAc,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACrC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,cAAc,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QACpC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACxC,QAAQ,CACX,CAAC,CAAC,CAAC,CACA,8BACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,sCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,oDAAyB,KAAK,GAAQ,IACrD,CACN,EACD,2CAA0B,IACzB,CACR,CAAC;IAEF,IAAI,OAAO;QACP,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,EAAE,SAAS,EAAC,KAAK,YACnC,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}

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

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { ButtonProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const ButtonExample: ComponentExample<ButtonProps>;

package/dist/components/Button/ButtonExample.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgPerson } from '@bspk/icons/Person';
 export const ButtonExample = {
     presets: [
         {
@@ -5,6 +7,7 @@ export const ButtonExample = {
             propState: {
                 icon: 'Add',
                 label: 'Add',
+                iconOnly: false,
             },
         },
         {
@@ -12,16 +15,20 @@ export const ButtonExample = {
             propState: {
                 label: 'Add',
                 icon: undefined,
+                iconOnly: false,
             },
         },
         {
             label: 'Icon only',
             propState: {
-                showLabel: false,
+                iconOnly: true,
                 icon: 'Add',
                 label: 'Add',
             },
         },
     ],
+    variants: {
+        iconOnly: () => ({ icon: _jsx(SvgPerson, {}), label: 'Person' }),
+    },
 };
 //# sourceMappingURL=ButtonExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,SAAS;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,SAAS,EAAE,KAAK;gBAChB,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"ButtonExample.js","sourceRoot":"","sources":["../../../src/components/Button/ButtonExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/C,MAAM,CAAC,MAAM,aAAa,GAAkC;IACxD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;gBACZ,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,KAAK,EAAE,KAAK;gBACZ,IAAI,EAAE,SAAS;gBACf,QAAQ,EAAE,KAAK;aAClB;SACJ;QACD;YACI,KAAK,EAAE,WAAW;YAClB,SAAS,EAAE;gBACP,QAAQ,EAAE,IAAI;gBACd,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,KAAK;aACf;SACJ;KACJ;IACD,QAAQ,EAAE;QACN,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,KAAC,SAAS,KAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;KAC7D;CACJ,CAAC"}

package/dist/components/Button/button.css

@@ -86,7 +86,7 @@
 }
 [data-bspk=button][data-variant=primary] {
   --primary-background: var(--surface-brand-primary);
-  background: linear-gradient(var(--primary-background), var(--primary-background));
+  background-color: var(--primary-background);
   color: var(--foreground-brand-on-primary);
   border-radius: var(--radius-sm);
 }

package/dist/components/Button/button.css.js

@@ -89,7 +89,7 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
 }
 [data-bspk=button][data-variant=primary] {
   --primary-background: var(--surface-brand-primary);
-  background: linear-gradient(var(--primary-background), var(--primary-background));
+  background-color: var(--primary-background);
   color: var(--foreground-brand-on-primary);
   border-radius: var(--radius-sm);
 }
@@ -156,4 +156,3 @@ style.appendChild(document.createTextNode(`[data-bspk=button] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -40,11 +40,7 @@ export type CardProps = {
  *     }
  *
  * @name Card
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Card {
-    var bspkName: string;
-}
-export { Card };
+export declare function Card({ children, showPadding, variant }: CardProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Card/Card.js

@@ -20,11 +20,9 @@ import './card.css.js';
  *     }
  *
  * @name Card
- * @phase DesignReview
+ * @phase UXReview
  */
-function Card({ children, showPadding, variant = 'elevated' }) {
+export function Card({ children, showPadding, variant = 'elevated' }) {
     return (_jsx("div", { "data-bspk": "card", "data-hide-padding": showPadding === false || undefined, "data-variant": variant, children: children }));
 }
-Card.bspkName = 'Card';
-export { Card };
 //# sourceMappingURL=Card.js.map

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

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

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

@@ -1,2 +1,2 @@
-import { ComponentExample } from '../../utils/demo';
+import { ComponentExample } from '-/utils/demo';
 export declare const CardExample: ComponentExample;

package/dist/components/Card/card.css.js

@@ -21,4 +21,3 @@ style.appendChild(document.createTextNode(`[data-bspk=card] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,11 +1,13 @@
 import { ChangeEvent } from 'react';
-import { CommonProps, ElementProps, InvalidPropsLibrary } from '../../index.js';
+import { CommonProps, ElementProps, FormFieldControlProps, RequiredCommonProps } from '-/types/common';
 import './checkbox.scss';
-export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & InvalidPropsLibrary & Required<CommonProps<'value'>> & {
+export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'invalid' | 'name'> & FormFieldControlProps & RequiredCommonProps<'value'> & {
     /**
      * If the checkbox is partially checked or
      * [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).
      *
+     * This will override the `checked` prop.
+     *
      * @default false
      */
     indeterminate?: boolean;
@@ -51,11 +53,7 @@ export type CheckboxProps = CommonProps<'aria-label' | 'disabled' | 'name'> & In
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-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;
-}
-export { Checkbox };
+export declare function Checkbox({ checked: checkedProp, indeterminate: indeterminateProp, invalid, disabled, ...props }: ElementProps<CheckboxProps, 'input'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Checkbox/Checkbox.js

@@ -30,9 +30,9 @@ import './checkbox.css.js';
  * @element
  *
  * @name Checkbox
- * @phase DesignReview
+ * @phase UXReview
  */
-function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, errorMessage, ...props }) {
+export function Checkbox({ checked: checkedProp = false, indeterminate: indeterminateProp, invalid, disabled, ...props }) {
     const indeterminate = !!indeterminateProp;
     const checked = !!checkedProp && !indeterminate;
     const inputRef = useRef();
@@ -41,13 +41,11 @@ function Checkbox({ checked: checkedProp = false, indeterminate: indeterminatePr
             return;
         inputRef.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    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) => {
+    return (_jsxs("span", { "data-bspk": "checkbox", children: [_jsx("input", { ...props, "aria-describedby": props['aria-describedby'] || undefined, "aria-errormessage": props['aria-errormessage'] || undefined, "aria-invalid": invalid || undefined, checked: checked, "data-indeterminate": indeterminate || undefined, disabled: disabled || undefined, onChange: (event) => props.onChange(!!event.target.checked, event), ref: (node) => {
                     if (!node)
                         return;
                     inputRef.current = node;
                     node.indeterminate = indeterminate;
-                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) }), _jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) })] })] }));
+                }, type: "checkbox" }), _jsxs("span", { "aria-hidden": true, children: [checked && (_jsx("svg", { "data-checked": true, fill: "none", viewBox: "0 0 14 11", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M5.485 10.182a1 1 0 0 1-1.414 0l-3.03-3.03a1 1 0 0 1 0-1.415l.14-.141a1 1 0 0 1 1.415 0l2.182 2.182 6.626-6.627a1 1 0 0 1 1.414 0l.142.142a1 1 0 0 1 0 1.414l-7.475 7.475Z", fill: "currentColor" }) })), indeterminate && (_jsx("svg", { "data-indeterminate": true, fill: "none", viewBox: "0 0 12 4", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M1.44444 3.11089C0.892158 3.11089 0.444443 2.66318 0.444443 2.11089V1.88867C0.444443 1.33639 0.892158 0.888672 1.44444 0.888672H10.5556C11.1078 0.888672 11.5556 1.33639 11.5556 1.88867V2.11089C11.5556 2.66318 11.1078 3.11089 10.5556 3.11089H1.44444Z", fill: "currentColor" }) }))] })] }));
 }
-Checkbox.bspkName = 'Checkbox';
-export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,iBAAiB,CAAC;AA0BzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,EAAE,WAAW,GAAG,KAAK,EAC5B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EACP,QAAQ,EACR,YAAY,EAEZ,GAAG,KAAK,EAC2B;IACnC,MAAM,aAAa,GAAG,CAAC,CAAC,iBAAiB,CAAC;IAC1C,MAAM,OAAO,GAAG,CAAC,CAAC,WAAW,IAAI,CAAC,aAAa,CAAC;IAEhD,MAAM,QAAQ,GAAG,MAAM,EAAoB,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO;QAC9B,QAAQ,CAAC,OAAO,CAAC,aAAa,GAAG,aAAa,CAAC;IACnD,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,OAAO,CACH,6BAEc,UAAU,aAEpB,mBACQ,KAAK,uBACU,YAAY,IAAI,SAAS,kBAC9B,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACI,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,EACN,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,IACH,IACJ,CACV,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAIvD,OAAO,iBAAiB,CAAC;AA4BzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,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,sBACS,KAAK,CAAC,kBAAkB,CAAC,IAAI,SAAS,uBACrC,KAAK,CAAC,mBAAmB,CAAC,IAAI,SAAS,kBAC5C,OAAO,IAAI,SAAS,EAClC,OAAO,EAAE,OAAO,wBACI,aAAa,IAAI,SAAS,EAC9C,QAAQ,EAAE,QAAQ,IAAI,SAAS,EAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,KAAK,CAAC,EAClE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;oBACV,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAClB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;gBACvC,CAAC,EACD,IAAI,EAAC,UAAU,GACjB,EACF,gDACK,OAAO,IAAI,CACR,oCAAkB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,YAChF,eACI,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACrB,GACA,CACT,EACA,aAAa,IAAI,CACd,0CAAwB,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAC,4BAA4B,YACrF,eACI,CAAC,EAAC,2PAA2P,EAC7P,IAAI,EAAC,cAAc,GACrB,GACA,CACT,IACE,IACJ,CACV,CAAC;AACN,CAAC"}

package/dist/components/Checkbox/checkbox.css

@@ -35,11 +35,9 @@
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
-  display: none;
 }
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
-  display: none;
 }
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
@@ -47,10 +45,6 @@
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:checked + span svg[data-checked],
-[data-bspk=checkbox] input[type=checkbox]:indeterminate + span svg[data-indeterminate] {
-  display: block;
-}
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
 [data-bspk=checkbox] input[type=checkbox]:indeterminate + span {
   --stroke: var(--stroke-brand-primary);

package/dist/components/Checkbox/checkbox.css.js

@@ -38,11 +38,9 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 }
 [data-bspk=checkbox] span svg[data-checked] {
   width: 14px;
-  display: none;
 }
 [data-bspk=checkbox] span svg[data-indeterminate] {
   width: 12px;
-  display: none;
 }
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):hover + span {
   background-color: var(--interactions-neutral-hover-opacity);
@@ -50,10 +48,6 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 [data-bspk=checkbox] input[type=checkbox]:not(:checked, :indeterminate, :disabled):active + span {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=checkbox] input[type=checkbox]:checked + span svg[data-checked],
-[data-bspk=checkbox] input[type=checkbox]:indeterminate + span svg[data-indeterminate] {
-  display: block;
-}
 [data-bspk=checkbox] input[type=checkbox]:checked + span,
 [data-bspk=checkbox] input[type=checkbox]:indeterminate + span {
   --stroke: var(--stroke-brand-primary);
@@ -80,4 +74,3 @@ style.appendChild(document.createTextNode(`[data-bspk=checkbox] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,7 +1,7 @@
-import { ElementProps, CommonProps } from '../../index.js';
-import { ToggleOptionProps } from '../ToggleOption';
-export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'label'> & Required<CommonProps<'value'>>;
-export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & {
+import { ToggleOptionProps } from '-/components/ToggleOption';
+import { ElementProps, CommonProps, FormFieldControlProps } from '-/types/common';
+export type CheckboxGroupOption = Pick<ToggleOptionProps, 'description' | 'disabled' | 'label'> & Required<CommonProps<'value'>>;
+export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOnly'> & FormFieldControlProps & {
     /**
      * The function to call when the checkboxes are changed.
      *
@@ -73,11 +73,7 @@ export type CheckboxGroupProps = CommonProps<'aria-label' | 'disabled' | 'readOn
  *     }
  *
  * @name CheckboxGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, disabled, readOnly, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace CheckboxGroup {
-    var bspkName: string;
-}
-export { CheckboxGroup };
+export declare function CheckboxGroup({ onChange, options, name, values, selectAll, selectAllProps, disabled: disabledGroup, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }: ElementProps<CheckboxGroupProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -28,13 +28,11 @@ import { ToggleOption } from '../ToggleOption';
  *     }
  *
  * @name CheckboxGroup
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, disabled, readOnly, ...props }) {
-    return (_jsxs("div", { ...props, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, disabled: disabled, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) }) })), options.map(({ label, description, value }) => (_jsx(ToggleOption, { description: description, label: label, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), disabled: disabled, name: name, onChange: (checked) => {
+export function CheckboxGroup({ onChange, options = [], name, values = [], selectAll, selectAllProps, disabled: disabledGroup = false, readOnly, 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, ...props }) {
+    return (_jsxs("div", { ...props, "aria-describedby": ariaErrorMessage || ariaDescribedBy || undefined, "data-bspk": "checkbox-group", role: "group", children: [selectAll && (_jsx(_Fragment, { children: _jsx(ToggleOption, { label: selectAllProps?.label || 'All', children: _jsx(Checkbox, { "aria-label": selectAllProps?.label || 'All', checked: !!values.length && values.length === options.length, "data-testid": "selectAll-Checkbox", disabled: disabledGroup, indeterminate: !!values.length && values.length < options.length, name: name, onChange: (checked) => onChange(checked ? options.map((o) => o.value) : []), readOnly: readOnly, value: "all" }) }) })), options.map(({ label, description, value, disabled }) => (_jsx(ToggleOption, { description: description, disabled: disabled || disabledGroup, label: label, children: _jsx(Checkbox, { "aria-label": label, checked: values.includes(value), disabled: disabled || disabledGroup, name: name, onChange: (checked) => {
                         onChange(checked ? [...values, value] : values.filter((v) => v !== value));
                     }, readOnly: readOnly, value: value }) }, value)))] }));
 }
-CheckboxGroup.bspkName = 'CheckboxGroup';
-export { CheckboxGroup };
 //# sourceMappingURL=CheckboxGroup.js.map

package/dist/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAkD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,aAAa,CAAC,EACnB,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBAAS,KAAK,eAAY,gBAAgB,EAAC,IAAI,EAAC,OAAO,aAClD,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,EAC5D,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAC5C,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAc,KAAK,EAAE,KAAK,YAC5D,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,IAXuC,KAAK,CAYnC,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAqD5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,aAAa,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,EAAE,EACZ,IAAI,EACJ,MAAM,GAAG,EAAE,EACX,SAAS,EACT,cAAc,EACd,QAAQ,EAAE,aAAa,GAAG,KAAK,EAC/B,QAAQ,EACR,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,gBAAgB,EACrC,GAAG,KAAK,EAC8B;IACtC,OAAO,CACH,kBACQ,KAAK,sBACS,gBAAgB,IAAI,eAAe,IAAI,SAAS,eACxD,gBAAgB,EAC1B,IAAI,EAAC,OAAO,aAEX,SAAS,IAAI,CACV,4BACI,KAAC,YAAY,IAAC,KAAK,EAAE,cAAc,EAAE,KAAK,IAAI,KAAK,YAC/C,KAAC,QAAQ,kBACO,cAAc,EAAE,KAAK,IAAI,KAAK,EAC1C,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,OAAO,CAAC,MAAM,iBAChD,oBAAoB,EAChC,QAAQ,EAAE,aAAa,EACvB,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,EAChE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAC3E,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAC,KAAK,GACb,GACS,GAChB,CACN,EACA,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CACtD,KAAC,YAAY,IAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,IAAI,aAAa,EAAc,KAAK,EAAE,KAAK,YACjG,KAAC,QAAQ,kBACO,KAAK,EACjB,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC/B,QAAQ,EAAE,QAAQ,IAAI,aAAa,EACnC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,OAAO,EAAE,EAAE;wBAClB,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC;oBAC/E,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACd,IAX4E,KAAK,CAYxE,CAClB,CAAC,IACA,CACT,CAAC;AACN,CAAC"}

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

@@ -1,3 +1,3 @@
-import { ComponentExample } from '../../utils/demo';
 import { CheckboxGroupProps } from '.';
+import { ComponentExample } from '-/utils/demo';
 export declare const CheckboxGroupExample: ComponentExample<CheckboxGroupProps>;

package/dist/components/CheckboxGroup/CheckboxGroupExample.js

@@ -3,9 +3,30 @@ export const CheckboxGroupExample = {
         {
             label: 'With Descriptions',
             propState: {
+                disabled: false,
                 options: [
                     { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
-                    { label: 'Option 2', value: 'option2', description: 'Description for option 2' },
+                    {
+                        label: 'Option 2',
+                        value: 'option2',
+                        description: 'Description for option 2 (disabled)',
+                        disabled: true,
+                    },
+                    { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
+                ],
+            },
+        },
+        {
+            label: 'Group disabled',
+            propState: {
+                disabled: true,
+                options: [
+                    { label: 'Option 1', value: 'option1', description: 'Description for option 1' },
+                    {
+                        label: 'Option 2',
+                        value: 'option2',
+                        description: 'Description for option 2 (disabled)',
+                    },
                     { label: 'Option 3', value: 'option3', description: 'Description for option 3' },
                 ],
             },
@@ -13,6 +34,7 @@ export const CheckboxGroupExample = {
         {
             label: 'Long labels',
             propState: {
+                disabled: false,
                 options: [
                     { label: 'This is a very long label for option 1 that never seems to end', value: 'option1' },
                     { label: 'This is a very long label for option 2 that never seems to end', value: 'option2' },

package/dist/components/CheckboxGroup/CheckboxGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;iBACxE;aACJ;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"CheckboxGroupExample.js","sourceRoot":"","sources":["../../../src/components/CheckboxGroup/CheckboxGroupExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,oBAAoB,GAAyC;IACtE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF;wBACI,KAAK,EAAE,UAAU;wBACjB,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,qCAAqC;wBAClD,QAAQ,EAAE,IAAI;qBACjB;oBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;oBAChF;wBACI,KAAK,EAAE,UAAU;wBACjB,KAAK,EAAE,SAAS;wBAChB,WAAW,EAAE,qCAAqC;qBACrD;oBACD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,0BAA0B,EAAE;iBACnF;aACJ;SACJ;QACD;YACI,KAAK,EAAE,aAAa;YACpB,SAAS,EAAE;gBACP,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE;oBACL,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,gEAAgE,EAAE,KAAK,EAAE,SAAS,EAAE;oBAC7F,EAAE,KAAK,EAAE,wCAAwC,EAAE,KAAK,EAAE,SAAS,EAAE;iBACxE;aACJ;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/CheckboxOption/CheckboxOption.d.ts

@@ -1,14 +1,6 @@
-import { InvalidPropsLibrary } from '../../index.js';
-import { CheckboxProps } from '../Checkbox';
-import { ToggleOptionProps } from '../ToggleOption';
-export type CheckboxOptionProps = InvalidPropsLibrary & Pick<CheckboxProps, 'checked' | 'disabled' | 'indeterminate' | 'name' | 'value'> & Pick<ToggleOptionProps, 'description' | 'label'> & {
-    /**
-     * The function to call when the checkbox is checked or unchecked.
-     *
-     * @required
-     */
-    onChange: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
-};
+import { CheckboxProps } from '-/components/Checkbox';
+import { ToggleOptionControlProps } from '-/components/ToggleOption';
+export type CheckboxOptionProps = ToggleOptionControlProps<CheckboxProps>;
 /**
  * A control that allows users to choose one or more items from a list or turn an feature on or off.
  *
@@ -35,11 +27,7 @@ export type CheckboxOptionProps = InvalidPropsLibrary & Pick<CheckboxProps, 'che
  *     }
  *
  * @name CheckboxOption
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function CheckboxOption({ label: labelProp, description, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
-declare namespace CheckboxOption {
-    var bspkName: string;
-}
-export { CheckboxOption };
+export declare function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }: CheckboxOptionProps): "" | import("react/jsx-runtime").JSX.Element | undefined;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/CheckboxOption/CheckboxOption.js

@@ -27,12 +27,11 @@ import { ToggleOption } from '../ToggleOption';
  *     }
  *
  * @name CheckboxOption
- * @phase DesignReview
+ * @phase UXReview
  */
-function CheckboxOption({ label: labelProp, description, ...checkboxProps }) {
+export function CheckboxOption({ label: labelProp, description, disabled, ...checkboxProps }) {
     const label = labelProp || description;
-    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": label }) })));
+    const ariaLabel = description ? `${labelProp} - ${description}` : labelProp;
+    return (label && (_jsx(ToggleOption, { "data-bspk": "checkbox-option", description: description, disabled: disabled, label: label, children: _jsx(Checkbox, { ...checkboxProps, "aria-label": ariaLabel }) })));
 }
-CheckboxOption.bspkName = 'CheckboxOption';
-export { CheckboxOption };
 //# sourceMappingURL=CheckboxOption.js.map

package/dist/components/CheckboxOption/CheckboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AACA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAqB,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAa5E;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,aAAa,EAAuB;IAC5F,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,KAAK,EAAE,KAAK,YAC5E,KAAC,QAAQ,OAAK,aAAa,gBAAc,KAAK,GAAI,GACvC,CAClB,CACJ,CAAC;AACN,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"CheckboxOption.js","sourceRoot":"","sources":["../../../src/components/CheckboxOption/CheckboxOption.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,YAAY,EAA4B,MAAM,2BAA2B,CAAC;AAInF;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAuB;IAC7G,MAAM,KAAK,GAAG,SAAS,IAAI,WAAW,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,MAAM,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5E,OAAO,CACH,KAAK,IAAI,CACL,KAAC,YAAY,iBAAW,iBAAiB,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAChG,KAAC,QAAQ,OAAK,aAAa,gBAAc,SAAS,GAAI,GAC3C,CAClB,CACJ,CAAC;AACN,CAAC"}

package/dist/components/ChipAssist/ChipAssist.d.ts

@@ -1,4 +1,4 @@
-import { ChipUtilityProps } from '../ChipUtility';
+import { ChipUtilityProps } from '-/components/ChipUtility';
 export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'>;
 /**
  * A dynamic action element that helps trigger and perform an action for the customer. A supplement option to buttons.
@@ -18,11 +18,7 @@ export type ChipAssistProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipAssist
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ChipAssist {
-    var bspkName: string;
-}
-export { ChipAssist };
+export declare function ChipAssist({ disabled, label, leadingIcon, onClick }: ChipAssistProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipAssist/ChipAssist.js

@@ -18,11 +18,9 @@ import { ChipUtility } from '../ChipUtility';
  *     }
  *
  * @name ChipAssist
- * @phase DesignReview
+ * @phase UXReview
  */
-function ChipAssist({ disabled, label, leadingIcon, onClick }) {
-    return _jsx(ChipUtility, { disabled: disabled, label: label, leadingIcon: leadingIcon, onClick: onClick });
+export function ChipAssist({ disabled, label, leadingIcon, onClick }) {
+    return (_jsx(ChipUtility, { "data-bspk": "chip-assist", disabled: disabled, label: label, leadingIcon: leadingIcon, onClick: onClick }));
 }
-ChipAssist.bspkName = 'ChipAssist';
-export { ChipAssist };
 //# sourceMappingURL=ChipAssist.js.map

package/dist/components/ChipAssist/ChipAssist.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipAssist.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssist.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAmB;IAC1E,OAAO,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AACzG,CAAC;AAED,UAAU,CAAC,QAAQ,GAAG,YAAY,CAAC;AAEnC,OAAO,EAAE,UAAU,EAAE,CAAC"}
+{"version":3,"file":"ChipAssist.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssist.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAmB;IACjF,OAAO,CACH,KAAC,WAAW,iBACE,aAAa,EACvB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAClB,CACL,CAAC;AACN,CAAC"}

package/dist/components/ChipAssist/ChipAssistExample.d.ts

@@ -1,3 +1,3 @@
-import { ComponentExampleFn } from '../../utils/demo';
 import { ChipAssistProps } from '.';
+import { ComponentExampleFn } from '-/utils/demo';
 export declare const ChipAssistExample: ComponentExampleFn<ChipAssistProps>;

package/dist/components/ChipAssist/ChipAssistExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipAssistExample.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssistExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAI,CAAC;IAClF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;aACvB;SACJ;QACD;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;gBAC3B,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ChipAssistExample.js","sourceRoot":"","sources":["../../../src/components/ChipAssist/ChipAssistExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,OAAO,KAAC,SAAS,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAI,CAAC;IAClF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;aACvB;SACJ;QACD;YACI,KAAK,EAAE,kBAAkB;YACzB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;aAC9B;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;gBAC3B,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/ChipFilter/ChipFilter.d.ts

@@ -1,4 +1,4 @@
-import { ChipUtilityProps } from '../ChipUtility';
+import { ChipUtilityProps } from '-/components/ChipUtility';
 export type chipTrailingIcon = 'SvgChevronRight' | 'SvgClose' | 'SvgKeyboardArrowDown';
 export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
     /**
@@ -34,11 +34,7 @@ export type ChipFilterProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'lea
  *     }
  *
  * @name ChipFilter
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount }: ChipFilterProps): import("react/jsx-runtime").JSX.Element;
-declare namespace ChipFilter {
-    var bspkName: string;
-}
-export { ChipFilter };
+export declare function ChipFilter({ disabled, label, leadingIcon, onClick, trailingIcon, trailingBadgeCount, }: ChipFilterProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */