@bspk/ui 1.1.32 → 1.1.34

package/dist/components/ChipInput/ChipInput.d.ts

@@ -0,0 +1,35 @@
+import { ChipUtilityProps } from '../ChipUtility';
+export type ChipInputProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'leadingIcon' | 'onClick'> & {
+    /**
+     * If true, a close icon will be added and the chip can be removed.
+     *
+     * @default true
+     */
+    removable?: boolean;
+};
+/**
+ * A range of short form key words or pieces of information a customer enters within multi entry field.
+ *
+ * @example
+ *     import { ChipInput } from '@bspk/ui/ChipInput';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipInput
+ *                 label="InputChip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Input Chip clicked')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipInput
+ * @phase DesignReview
+ */
+declare function ChipInput({ disabled, label, leadingIcon, onClick, removable }: ChipInputProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipInput {
+    var bspkName: string;
+}
+export { ChipInput };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipInput/ChipInput.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgClose } from '@bspk/icons/Close';
+import { ChipUtility } from '../ChipUtility';
+/**
+ * A range of short form key words or pieces of information a customer enters within multi entry field.
+ *
+ * @example
+ *     import { ChipInput } from '@bspk/ui/ChipInput';
+ *     import { SvgCloud } from '@bspk/icons/Cloud';
+ *
+ *     function Example() {
+ *         return (
+ *             <ChipInput
+ *                 label="InputChip"
+ *                 leadingIcon=<SvgCloud />
+ *                 onClick={() => console.log('Input Chip clicked')}
+ *             />
+ *         );
+ *     }
+ *
+ * @name ChipInput
+ * @phase DesignReview
+ */
+function ChipInput({ disabled, label, leadingIcon, onClick, removable = true }) {
+    return (_jsx(ChipUtility, { disabled: disabled, label: label, leadingIcon: leadingIcon, onClick: onClick, trailingIcon: removable ? _jsx(SvgClose, {}) : undefined }));
+}
+ChipInput.bspkName = 'ChipInput';
+export { ChipInput };
+//# sourceMappingURL=ChipInput.js.map

package/dist/components/ChipInput/ChipInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipInput.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAWzE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,SAAS,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,GAAG,IAAI,EAAkB;IAC1F,OAAO,CACH,KAAC,WAAW,IACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,SAAS,GACpD,CACL,CAAC;AACN,CAAC;AAED,SAAS,CAAC,QAAQ,GAAG,WAAW,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/ChipInput/ChipInputExample.d.ts

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

package/dist/components/ChipInput/ChipInputExample.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChipInputExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props, onClick: () => action('ChipInput clicked!') });
+    },
+    presets: [
+        {
+            label: 'Basic ChipInput',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'with leadingIcon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+            },
+        },
+        {
+            label: 'with removable = false',
+            propState: {
+                label: 'chip option',
+                removable: false,
+            },
+        },
+        {
+            label: 'with removable = false and leadingIcon',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+                removable: false,
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                leadingIcon: 'SignLanguage',
+                disabled: true,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=ChipInputExample.js.map

package/dist/components/ChipInput/ChipInputExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipInputExample.js","sourceRoot":"","sources":["../../../src/components/ChipInput/ChipInputExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,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,oBAAoB,CAAC,GAAI,CAAC;IACjF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,iBAAiB;YACxB,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,wBAAwB;YAC/B,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,SAAS,EAAE,KAAK;aACnB;SACJ;QACD;YACI,KAAK,EAAE,wCAAwC;YAC/C,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,cAAc;gBAC3B,SAAS,EAAE,KAAK;aACnB;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/ChipInput/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipInput';

package/dist/components/ChipInput/index.js

@@ -0,0 +1,2 @@
+export * from './ChipInput';
+//# sourceMappingURL=index.js.map

package/dist/components/ChipInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipInput/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/ChipSuggestion/ChipSuggestion.d.ts

@@ -0,0 +1,21 @@
+import { ChipUtilityProps } from '../ChipUtility';
+export type ChipSuggestionProps = Pick<ChipUtilityProps, 'disabled' | 'label' | 'onClick'>;
+/**
+ * Dynamically generated options that are suggested to the customer as responses or prompts.
+ *
+ * @example
+ *     import { ChipSuggestion } from '@bspk/ui/ChipSuggestion';
+ *
+ *     function Example() {
+ *         return <ChipSuggestion label="Suggestion Chip" onClick={() => console.log('Suggestion')} />;
+ *     }
+ *
+ * @name ChipSuggestion
+ * @phase DesignReview
+ */
+declare function ChipSuggestion({ disabled, label, onClick }: ChipSuggestionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipSuggestion {
+    var bspkName: string;
+}
+export { ChipSuggestion };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipSuggestion/ChipSuggestion.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChipUtility } from '../ChipUtility';
+/**
+ * Dynamically generated options that are suggested to the customer as responses or prompts.
+ *
+ * @example
+ *     import { ChipSuggestion } from '@bspk/ui/ChipSuggestion';
+ *
+ *     function Example() {
+ *         return <ChipSuggestion label="Suggestion Chip" onClick={() => console.log('Suggestion')} />;
+ *     }
+ *
+ * @name ChipSuggestion
+ * @phase DesignReview
+ */
+function ChipSuggestion({ disabled, label, onClick }) {
+    return _jsx(ChipUtility, { disabled: disabled, label: label, onClick: onClick });
+}
+ChipSuggestion.bspkName = 'ChipSuggestion';
+export { ChipSuggestion };
+//# sourceMappingURL=ChipSuggestion.js.map

package/dist/components/ChipSuggestion/ChipSuggestion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSuggestion.js","sourceRoot":"","sources":["../../../src/components/ChipSuggestion/ChipSuggestion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,0BAA0B,CAAC;AAIzE;;;;;;;;;;;;GAYG;AACH,SAAS,cAAc,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAuB;IACrE,OAAO,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,CAAC;AAC/E,CAAC;AAED,cAAc,CAAC,QAAQ,GAAG,gBAAgB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/ChipSuggestion/ChipSuggestionExample.d.ts

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

package/dist/components/ChipSuggestion/ChipSuggestionExample.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ChipSuggestionExample = ({ action }) => ({
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => {
+        return _jsx(Component, { ...props, onClick: () => action('ChipSuggestion clicked!') });
+    },
+    presets: [
+        {
+            label: 'ChipSuggestion example',
+            propState: {
+                label: 'chip option',
+            },
+        },
+        {
+            label: 'disabled',
+            propState: {
+                label: 'chip option',
+                disabled: true,
+            },
+        },
+    ],
+});
+//# sourceMappingURL=ChipSuggestionExample.js.map

package/dist/components/ChipSuggestion/ChipSuggestionExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSuggestionExample.js","sourceRoot":"","sources":["../../../src/components/ChipSuggestion/ChipSuggestionExample.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,MAAM,qBAAqB,GAA4C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3F,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,yBAAyB,CAAC,GAAI,CAAC;IACtF,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,wBAAwB;YAC/B,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;aACvB;SACJ;QACD;YACI,KAAK,EAAE,UAAU;YACjB,SAAS,EAAE;gBACP,KAAK,EAAE,aAAa;gBACpB,QAAQ,EAAE,IAAI;aACjB;SACJ;KACJ;CACJ,CAAC,CAAC"}

package/dist/components/ChipSuggestion/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipSuggestion';

package/dist/components/ChipSuggestion/index.js

@@ -0,0 +1,2 @@
+export * from './ChipSuggestion';
+//# sourceMappingURL=index.js.map

package/dist/components/ChipSuggestion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipSuggestion/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/components/ChipUtility/ChipUtility.d.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { BadgeProps } from '../Badge';
+import './chip-utility.scss';
+export type BadgeItem = Pick<BadgeProps, 'count' | 'size' | 'surfaceBorder' | 'variant'>;
+export type ChipUtilityProps = {
+    /**
+     * Is the chip disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Is the chip elevated or flat. If flat the drop shadow is removed.
+     *
+     * @default false
+     */
+    flat?: boolean;
+    /**
+     * The label of the chip.
+     *
+     * @example
+     *     'Hello I am Chip';
+     *
+     * @required
+     */
+    label: string;
+    /** The function to call when the chip is clicked. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    /**
+     * Whether the chip is currently selected.
+     *
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * The leading icon of the chip.
+     *
+     * @type BspkIcon
+     */
+    leadingIcon?: ReactNode;
+    /**
+     * The trailing icon of the chip.
+     *
+     * You can only have one of the trailing options, trailingIcon **or** trailingBadge. If both are present the
+     * trailingIcon will be visible.
+     *
+     * @type BspkIcon
+     */
+    trailingIcon?: ReactNode;
+    /**
+     * The trailing Badge for use in the ChipFilter.
+     *
+     * If a trailingIcon is provided the Badge will **not** be visible.
+     */
+    trailingBadge?: BadgeItem;
+};
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
+ * @name ChipUtility
+ * @phase Utility
+ */
+declare function ChipUtility({ flat, disabled, label, selected, leadingIcon, onClick, trailingIcon, trailingBadge, }: ChipUtilityProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChipUtility {
+    var bspkName: string;
+}
+export { ChipUtility };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipUtility/ChipUtility.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from 'react';
+import { Badge } from '../Badge';
+import { isValidIcon } from '../../utils/children';
+import './chip-utility.css.js';
+/**
+ * Dynamically generated options that are suggested to the user as responses or prompts.
+ *
+ * @example
+ *     import { ChipUtility } from '@bspk/ui/ChipUtility';
+ *
+ *     function Example() {
+ *         return (
+ *             <Chip label="Label" onClick={() => console.log('Chip clicked!')}>
+ *                 Example Chip
+ *             </Chip>
+ *         );
+ *     }
+ *
+ * @name ChipUtility
+ * @phase Utility
+ */
+function ChipUtility({ flat = false, disabled = false, label, selected = false, leadingIcon, onClick, trailingIcon, trailingBadge, }) {
+    return (_jsxs("button", { "data-bspk": "chip-utility", "data-disabled": disabled || undefined, "data-flat": flat || undefined, "data-selected": selected || undefined, "data-touch-target-parent": true, onClick: disabled ? undefined : onClick, children: [_jsxs(_Fragment, { children: [isValidIcon(leadingIcon) && isValidElement(leadingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: leadingIcon })), _jsx("span", { children: label }), isValidIcon(trailingIcon) && isValidElement(trailingIcon) && (_jsx("span", { "aria-hidden": "true", "data-chip-icon": true, children: trailingIcon })), trailingBadge && !trailingIcon && (_jsx(Badge, { count: trailingBadge.count, size: trailingBadge.size, surfaceBorder: trailingBadge.surfaceBorder, variant: trailingBadge.variant }))] }), _jsx("span", { "data-touch-target": true })] }));
+}
+ChipUtility.bspkName = 'ChipUtility';
+export { ChipUtility };
+//# sourceMappingURL=ChipUtility.js.map

package/dist/components/ChipUtility/ChipUtility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipUtility.js","sourceRoot":"","sources":["../../../src/components/ChipUtility/ChipUtility.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,cAAc,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,KAAK,EAAc,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,qBAAqB,CAAC;AAyD7B;;;;;;;;;;;;;;;;GAgBG;AACH,SAAS,WAAW,CAAC,EACjB,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,WAAW,EACX,OAAO,EACP,YAAY,EACZ,aAAa,GACE;IACf,OAAO,CACH,+BACc,cAAc,mBACT,QAAQ,IAAI,SAAS,eACzB,IAAI,IAAI,SAAS,mBACb,QAAQ,IAAI,SAAS,oCAEpC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,aAEvC,8BACK,WAAW,CAAC,WAAW,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC,IAAI,CACxD,8BAAkB,MAAM,oCACnB,WAAW,GACT,CACV,EACD,yBAAO,KAAK,GAAQ,EACnB,WAAW,CAAC,YAAY,CAAC,IAAI,cAAc,CAAC,YAAY,CAAC,IAAI,CAC1D,8BAAkB,MAAM,oCACnB,YAAY,GACV,CACV,EACA,aAAa,IAAI,CAAC,YAAY,IAAI,CAC/B,KAAC,KAAK,IACF,KAAK,EAAE,aAAa,CAAC,KAAK,EAC1B,IAAI,EAAE,aAAa,CAAC,IAAI,EACxB,aAAa,EAAE,aAAa,CAAC,aAAa,EAC1C,OAAO,EAAE,aAAa,CAAC,OAAO,GAChC,CACL,IACF,EACH,2CAA0B,IACrB,CACZ,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ChipUtility/ChipUtilityExample.d.ts

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

package/dist/components/ChipUtility/ChipUtilityExample.js

@@ -0,0 +1,60 @@
+export const ChipUtilityExample = {
+    presets: [
+        {
+            label: 'Basic',
+            propState: {
+                label: 'chip',
+            },
+        },
+        {
+            label: 'Leading Icon',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: '',
+            },
+        },
+        {
+            label: 'Trailing Icon',
+            propState: {
+                label: 'chip',
+                leadingIcon: '',
+                trailingIcon: 'Add',
+            },
+        },
+        {
+            label: 'Both Icons',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: 'Add',
+            },
+        },
+        {
+            label: 'Invalid Icons',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Bumblebee',
+                trailingIcon: 'Rabbit',
+            },
+        },
+        {
+            label: 'Trailing Badge',
+            propState: {
+                label: 'chip',
+                leadingIcon: 'Add',
+                trailingIcon: '',
+                trailingBadge: { count: 2, size: 'x-small' },
+            },
+        },
+        {
+            label: 'Trailing Badge Icon',
+            propState: {
+                label: 'chip',
+                trailingIcon: 'Cloud',
+                trailingBadge: { count: 2, size: 'x-small' },
+            },
+        },
+    ],
+};
+//# sourceMappingURL=ChipUtilityExample.js.map

package/dist/components/ChipUtility/ChipUtilityExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipUtilityExample.js","sourceRoot":"","sources":["../../../src/components/ChipUtility/ChipUtilityExample.tsx"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IAClE,OAAO,EAAE;QACL;YACI,KAAK,EAAE,OAAO;YACd,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;aAChB;SACJ;QACD;YACI,KAAK,EAAE,cAAc;YACrB,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,KAAK;gBAClB,YAAY,EAAE,EAAE;aACnB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,EAAE;gBACf,YAAY,EAAE,KAAK;aACtB;SACJ;QACD;YACI,KAAK,EAAE,YAAY;YACnB,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,KAAK;gBAClB,YAAY,EAAE,KAAK;aACtB;SACJ;QACD;YACI,KAAK,EAAE,eAAe;YACtB,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,WAAW;gBACxB,YAAY,EAAE,QAAQ;aACzB;SACJ;QACD;YACI,KAAK,EAAE,gBAAgB;YACvB,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,WAAW,EAAE,KAAK;gBAClB,YAAY,EAAE,EAAE;gBAChB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;aAC/C;SACJ;QACD;YACI,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE;gBACP,KAAK,EAAE,MAAM;gBACb,YAAY,EAAE,OAAO;gBACrB,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE;aAC/C;SACJ;KACJ;CACJ,CAAC"}

package/dist/components/ChipUtility/chip-utility.css

@@ -0,0 +1,48 @@
+[data-bspk=chip-utility] {
+  flex-direction: row;
+  gap: var(--spacing-sizing-02);
+  height: var(--spacing-sizing-08);
+  text-wrap: nowrap;
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  background-color: var(--surface-neutral-t1-base);
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: var(--radius-sm);
+  padding: 0 var(--spacing-sizing-03);
+}
+[data-bspk=chip-utility] [data-touch-target] {
+  min-width: var(--spacing-sizing-12);
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=chip-utility]:not([data-flat]) {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=chip-utility][data-variant=filter] {
+  cursor: pointer;
+}
+[data-bspk=chip-utility][data-disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+  border-color: var(--stroke-neutral-disabled-light);
+  background-color: var(--interactions-disabled-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):focus {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=chip-utility][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+  border-color: var(--stroke-brand-primary);
+}
+[data-bspk=chip-utility] [data-chip-icon] {
+  display: flex;
+  align-items: center;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/ChipUtility/chip-utility.css.js

@@ -0,0 +1,54 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`[data-bspk=chip-utility] {
+  flex-direction: row;
+  gap: var(--spacing-sizing-02);
+  height: var(--spacing-sizing-08);
+  text-wrap: nowrap;
+  font: var(--labels-small);
+  color: var(--foreground-neutral-on-surface-variant-01);
+  background-color: var(--surface-neutral-t1-base);
+  border: 1px solid var(--stroke-neutral-low);
+  border-radius: var(--radius-sm);
+  padding: 0 var(--spacing-sizing-03);
+}
+[data-bspk=chip-utility] [data-touch-target] {
+  min-width: var(--spacing-sizing-12);
+  min-height: var(--spacing-sizing-12);
+}
+[data-bspk=chip-utility]:not([data-flat]) {
+  box-shadow: var(--drop-shadow-raise);
+}
+[data-bspk=chip-utility][data-variant=filter] {
+  cursor: pointer;
+}
+[data-bspk=chip-utility][data-disabled] {
+  color: var(--foreground-neutral-disabled-on-surface);
+  cursor: not-allowed;
+  border-color: var(--stroke-neutral-disabled-light);
+  background-color: var(--interactions-disabled-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):hover {
+  background-color: var(--interactions-neutral-hover-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):active {
+  background-color: var(--interactions-neutral-press-opacity);
+}
+[data-bspk=chip-utility]:not([data-disabled]):focus {
+  outline: 1px solid var(--stroke-neutral-focus);
+  border-color: var(--stroke-neutral-focus);
+}
+[data-bspk=chip-utility][data-selected] {
+  background-color: var(--surface-brand-primary-highlight);
+  border-color: var(--stroke-brand-primary);
+}
+[data-bspk=chip-utility] [data-chip-icon] {
+  display: flex;
+  align-items: center;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);
+

package/dist/components/ChipUtility/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipUtility';

package/dist/components/ChipUtility/index.js

@@ -0,0 +1,2 @@
+export * from './ChipUtility';
+//# sourceMappingURL=index.js.map

package/dist/components/ChipUtility/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChipUtility/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/Combobox/Combobox.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode } from 'react';
+import { CommonProps, ElementProps } from '../../index.js';
+import { ListItemProps } from '../ListItem';
+import { MenuProps } from '../Menu';
+import { ModalProps } from '../Modal';
+import { ToggleProps, UseComboboxProps } from '../../hooks/useCombobox';
+export declare const MIN_ITEM_COUNT = 3;
+export declare const MAX_ITEM_COUNT = 10;
+/** The props for the listbox items. */
+export type ComboboxItemProps = CommonProps<'disabled'> & ListItemProps & {
+    /** The content to display in the listbox item. */
+    label: string;
+    /** The value of the listbox item. */
+    value: string;
+};
+export type ComboboxProps<Item extends ComboboxItemProps = ComboboxItemProps> = CommonProps<'data-bspk-owner' | 'id'> & Pick<MenuProps, 'itemDisplayCount'> & Pick<ModalProps, 'description' | 'header'> & Pick<UseComboboxProps, 'disabled' | 'errorMessage' | 'invalid' | 'offsetOptions' | 'readOnly' | 'refWidth'> & {
+    /**
+     * Content to display in the listbox.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Option 2' },
+     *         { value: '3', label: 'Option 3' },
+     *         { value: '4', label: 'Option 4' },
+     *         { value: '5', label: 'Option 5' },
+     *         { value: '6', label: 'Option 6' },
+     *         { value: '7', label: 'Option 7' },
+     *         { value: '8', label: 'Option 8' },
+     *         { value: '9', label: 'Option 9' },
+     *         { value: '10', label: 'Option 10' },
+     *     ];
+     *
+     * @type Array<MenuItem>
+     */
+    items?: Item[];
+    /**
+     * Array of selected values
+     *
+     * @type Array<string>
+     */
+    value?: Array<string>;
+    /**
+     * Whether the listbox allows multiple selections.
+     *
+     * @default false
+     */
+    isMulti?: boolean;
+    /**
+     * The label for the "Select All" option.
+     *
+     * Ignored if `isMulti` is false.
+     *
+     * If `isMulti` is `true`, defaults to "Select All". If a string, it will be used as the label. If false the
+     * select all option will not be rendered.
+     *
+     * @default false
+     */
+    selectAll?: boolean | string;
+    /**
+     * The function to call when the selected values change.
+     *
+     * @example
+     *     (selectedValues, event) => setState({ selectedValues });
+     *
+     * @required
+     */
+    onChange: (selectedValues: string[], event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    /**
+     * The children of the listbox added after the items.
+     *
+     * Usually only used for showing no items found.
+     */
+    children: (params: {
+        setReference: (node: HTMLElement) => void;
+        toggleProps: ToggleProps;
+    }) => ReactNode;
+    /**
+     * The label for the select element, used for accessibility, and the dropdown modal header.
+     *
+     * @required
+     */
+    label: string;
+};
+/**
+ * A utility widget that allows users to select one or more items from a list of choices.
+ *
+ * @name Combobox
+ * @phase Utility
+ */
+declare function Combobox<Item extends ComboboxItemProps>({ itemDisplayCount, items, onChange, value: selectedValues, disabled, id: idProp, isMulti, selectAll: selectAllProp, children, invalid, readOnly, errorMessage, refWidth, offsetOptions, header, description, ...props }: ElementProps<ComboboxProps<Item>, 'div'>): import("react/jsx-runtime").JSX.Element;
+declare namespace Combobox {
+    var bspkName: string;
+}
+export { Combobox };
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */