@bspk/ui 1.3.3 → 1.3.5

package/dist/components/{ChipUtility/chip-utility.css.js → Chip/chip.css.js}

@@ -1,7 +1,7 @@
 /** * 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-utility=chip-utility] {
+style.appendChild(document.createTextNode(`[data-bspk=chip] {
   flex-direction: row;
   gap: var(--spacing-sizing-02);
   height: var(--spacing-sizing-08);
@@ -13,37 +13,37 @@ style.appendChild(document.createTextNode(`[data-bspk-utility=chip-utility] {
   border-radius: var(--radius-sm);
   padding: 0 var(--spacing-sizing-03);
 }
-[data-bspk-utility=chip-utility] [data-touch-target] {
+[data-bspk=chip] [data-touch-target] {
   min-width: var(--spacing-sizing-12);
   min-height: var(--spacing-sizing-12);
 }
-[data-bspk-utility=chip-utility]:not([data-flat]) {
+[data-bspk=chip]:not([data-flat]) {
   box-shadow: var(--drop-shadow-raise);
 }
-[data-bspk-utility=chip-utility][data-variant=filter] {
+[data-bspk=chip][data-variant=filter] {
   cursor: pointer;
 }
-[data-bspk-utility=chip-utility][data-disabled] {
+[data-bspk=chip][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-utility=chip-utility]:not([data-disabled]):hover {
+[data-bspk=chip]:not([data-disabled]):hover {
   background-color: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk-utility=chip-utility]:not([data-disabled]):active {
+[data-bspk=chip]:not([data-disabled]):active {
   background-color: var(--interactions-neutral-press-opacity);
 }
-[data-bspk-utility=chip-utility]:not([data-disabled]):focus {
+[data-bspk=chip]:not([data-disabled]):focus {
   outline: 1px solid var(--stroke-neutral-focus);
   border-color: var(--stroke-neutral-focus);
 }
-[data-bspk-utility=chip-utility][data-selected] {
+[data-bspk=chip][data-selected] {
   background-color: var(--surface-brand-primary-highlight);
   border-color: var(--stroke-brand-primary);
 }
-[data-bspk-utility=chip-utility] [data-chip-icon] {
+[data-bspk=chip] [data-chip-icon] {
   display: flex;
   align-items: center;
 }

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

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

package/dist/components/Chip/index.js

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

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

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

package/dist/components/ChipGroup/ChipGroup.d.ts

@@ -1,7 +1,7 @@
 import './chip-group.scss';
 import { ReactNode } from 'react';
-import { ChipUtilityProps } from '-/components/ChipUtility';
-export type ChipGroupItem = Pick<ChipUtilityProps, 'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'>;
+import { ChipProps } from '-/components/Chip';
+export type ChipGroupItem = Pick<ChipProps, 'disabled' | 'flat' | 'label' | 'leadingIcon' | 'onClick' | 'selected' | 'trailingBadge' | 'trailingIcon'>;
 export type ChipGroupProps = {
     /**
      * To allow chips to wrap. If set to false chips will scroll.
@@ -9,21 +9,22 @@ export type ChipGroupProps = {
      * @default true
      */
     wrap?: boolean;
-    /** Only ChipUtility, ChipInput, ChipFilter, ChipSuggestion, or ChipAssist components should be used as children. */
+    /** Only Chip components should be used as children. */
     children?: ReactNode;
 };
 /**
- * A group of chips that can be used to display a set of related items or actions.
+ * A component that manages the layout of a group of chips.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
  *             <ChipGroup wrap={false}>
- *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
- *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
- *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
+ *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
+ *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
  *             </ChipGroup>
  *         );
  *     }

package/dist/components/ChipGroup/ChipGroup.js

@@ -1,17 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import './chip-group.css.js';
 /**
- * A group of chips that can be used to display a set of related items or actions.
+ * A component that manages the layout of a group of chips.
  *
  * @example
  *     import { ChipGroup } from '@bspk/ui/ChipGroup';
+ *     import { Chip } from '@bspk/ui/Chip';
  *
  *     function Example() {
  *         return (
  *             <ChipGroup wrap={false}>
- *                 <ChipSuggestion label="suggestion 1" onClick={() => console.log('Suggestion 1')} />
- *                 <ChipSuggestion label="suggestion 2" onClick={() => console.log('Suggestion 2')} />
- *                 <ChipSuggestion label="suggestion 3" onClick={() => console.log('Suggestion 3')} />
+ *                 <Chip label="chip 1" onClick={() => console.log('Chip 1')} />
+ *                 <Chip label="chip 2" onClick={() => console.log('Chip 2')} />
+ *                 <Chip label="chip 3" onClick={() => console.log('Chip 3')} />
  *             </ChipGroup>
  *         );
  *     }

package/dist/components/ChipGroup/ChipGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ChipGroup.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAqB3B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,IAAI,EAAkB;IAC/D,OAAO,CACH,2BAAe,YAAY,eAAY,IAAI,IAAI,SAAS,YACnD,QAAQ,GACP,CACT,CAAC;AACN,CAAC"}

package/dist/components/ChipGroup/ChipGroupExample.js

@@ -7,43 +7,16 @@ import { SvgKeyboardArrowDown } from '@bspk/icons/KeyboardArrowDown';
 import { SvgLightbulb } from '@bspk/icons/Lightbulb';
 import { SvgOpportunities } from '@bspk/icons/Opportunities';
 import { SvgSignLanguage } from '@bspk/icons/SignLanguage';
-import { ChipAssist } from '../ChipAssist';
-import { ChipFilter } from '../ChipFilter';
-import { ChipGroup } from '.';
-import { ChipInput } from '../ChipInput';
-import { ChipSuggestion } from '../ChipSuggestion';
-import { ChipUtility } from '../ChipUtility';
+import { Chip } from '../Chip';
 export const presets = [
-    { label: 'wrap', propState: { wrap: true } },
     { label: 'scroll', propState: { wrap: false } },
-    { label: 'suggestion', propState: { wrap: true } },
-    { label: 'assist', propState: { wrap: true } },
-    { label: 'input', propState: { wrap: true } },
-    { label: 'filter', propState: { wrap: true } },
+    { label: 'wrap', propState: { wrap: true } },
 ];
 export const ChipGroupExample = ({ action }) => ({
     presets,
-    // containerStyle: { width: '100%' },
-    render: ({ props, preset }) => {
-        if (!preset)
-            return null;
+    render: ({ props, Component }) => {
         const handleChipInputClick = () => action('Chip clicked!');
-        switch (preset.label) {
-            case 'wrap':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipUtility, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
-            case 'scroll':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipUtility, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(ChipUtility, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(ChipUtility, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
-            case 'suggestion':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipSuggestion, { label: "suggestion 1", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 2", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 3", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 4", onClick: handleChipInputClick }), _jsx(ChipSuggestion, { label: "suggestion 5", onClick: handleChipInputClick })] }));
-            case 'assist':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipAssist, { label: "assist 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 2", onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 4", onClick: handleChipInputClick }), _jsx(ChipAssist, { label: "assist 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick })] }));
-            case 'input':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipInput, { label: "input 1", onClick: handleChipInputClick, removable: false }), _jsx(ChipInput, { label: "input 2", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 3", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 4", onClick: handleChipInputClick }), _jsx(ChipInput, { label: "input 5", onClick: handleChipInputClick })] }));
-            case 'filter':
-                return (_jsxs(ChipGroup, { ...props, children: [_jsx(ChipFilter, { label: "filter 1", onClick: handleChipInputClick, trailingIcon: "SvgClose" }), _jsx(ChipFilter, { label: "filter 2", onClick: handleChipInputClick, trailingIcon: "SvgChevronRight" }), _jsx(ChipFilter, { label: "filter 3", onClick: handleChipInputClick, trailingIcon: "SvgKeyboardArrowDown" }), _jsx(ChipFilter, { label: "filter 1", onClick: handleChipInputClick, trailingBadgeCount: 5 }), _jsx(ChipFilter, { label: "filter 1", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingBadgeCount: 7 })] }));
-            default:
-                return null;
-        }
+        return (_jsxs(Component, { ...props, children: [_jsx(Chip, { label: "chip 1", leadingIcon: _jsx(SvgLightbulb, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 2", leadingIcon: _jsx(SvgIcecream, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgChevronRight, {}) }), _jsx(Chip, { label: "chip 3", leadingIcon: _jsx(SvgSignLanguage, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 4", leadingIcon: _jsx(SvgOpportunities, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgClose, {}) }), _jsx(Chip, { label: "chip 5", leadingIcon: _jsx(SvgCloud, {}), onClick: handleChipInputClick, trailingIcon: _jsx(SvgKeyboardArrowDown, {}) })] }));
     },
 });
 //# sourceMappingURL=ChipGroupExample.js.map

package/dist/components/ChipGroup/ChipGroupExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC5C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAClD,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC9C,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,OAAO;IACP,qCAAqC;IACrC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC1B,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QAEzB,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAE3D,QAAQ,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACP,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;YACN,KAAK,QAAQ;gBACT,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,WAAW,IACR,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;YACN,KAAK,YAAY;gBACb,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,oBAAoB,GAAI,EACtE,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,oBAAoB,GAAI,EACtE,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,oBAAoB,GAAI,EACtE,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,oBAAoB,GAAI,EACtE,KAAC,cAAc,IAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,oBAAoB,GAAI,IAC9D,CACf,CAAC;YACN,KAAK,QAAQ;gBACT,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAE,KAAC,YAAY,KAAG,EAAE,OAAO,EAAE,oBAAoB,GAAI,EAC7F,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,oBAAoB,GAAI,EAC9D,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAE,KAAC,eAAe,KAAG,EAAE,OAAO,EAAE,oBAAoB,GAAI,EAChG,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,oBAAoB,GAAI,EAC9D,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAE,KAAC,QAAQ,KAAG,EAAE,OAAO,EAAE,oBAAoB,GAAI,IACjF,CACf,CAAC;YACN,KAAK,OAAO;gBACR,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,KAAK,GAAI,EAC9E,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,oBAAoB,GAAI,EAC5D,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,oBAAoB,GAAI,EAC5D,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,oBAAoB,GAAI,EAC5D,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,oBAAoB,GAAI,IACpD,CACf,CAAC;YACN,KAAK,QAAQ;gBACT,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAC,UAAU,GAAG,EACtF,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAC,iBAAiB,GAAG,EAC7F,KAAC,UAAU,IACP,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAC,sBAAsB,GACrC,EACF,KAAC,UAAU,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC,GAAI,EACrF,KAAC,UAAU,IACP,KAAK,EAAC,UAAU,EAChB,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,kBAAkB,EAAE,CAAC,GACvB,IACM,CACf,CAAC;YACN;gBACI,OAAO,IAAI,CAAC;QACpB,CAAC;IACL,CAAC;CACJ,CAAC,CAAC"}
+{"version":3,"file":"ChipGroupExample.js","sourceRoot":"","sources":["../../../src/components/ChipGroup/ChipGroupExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAIzC,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAC/C,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAuC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACjF,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAE3D,OAAO,CACH,MAAC,SAAS,OAAK,KAAK,aAChB,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,YAAY,KAAG,EAC7B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,WAAW,KAAG,EAC5B,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,eAAe,KAAG,GACnC,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,eAAe,KAAG,EAChC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,gBAAgB,KAAG,EACjC,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,QAAQ,KAAG,GAC5B,EACF,KAAC,IAAI,IACD,KAAK,EAAC,QAAQ,EACd,WAAW,EAAE,KAAC,QAAQ,KAAG,EACzB,OAAO,EAAE,oBAAoB,EAC7B,YAAY,EAAE,KAAC,oBAAoB,KAAG,GACxC,IACM,CACf,CAAC;IACN,CAAC;CACJ,CAAC,CAAC"}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,50 @@
+import './date-picker.scss';
+import { InputProps } from '-/components/Input';
+import { FieldControlProps } from '-/types/common';
+export type DatePickerProps = FieldControlProps<Date | undefined> & Pick<InputProps, 'size'> & {
+    /**
+     * If the calendar should close when a date is selected.
+     *
+     * @default true
+     */
+    closeCalendarOnChange?: boolean;
+    /**
+     * The placeholder text for the date input field.
+     *
+     * @default mm/dd/yyyy
+     */
+    placeholder?: string;
+};
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a the Calendar component to select a
+ * date.
+ *
+ * For a more complete example with field usage, see the DatePickerField component.
+ *
+ * @example
+ *     import { DatePicker } from '@bspk/ui/DatePicker';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Date</FieldLabel>
+ *                 <DatePicker name="date1" value={date} onChange={setDate} />
+ *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name DatePicker
+ * @phase UXReview
+ */
+export declare function DatePicker({ value: valueProp, onChange, disabled, readOnly, closeCalendarOnChange, name, placeholder, invalid: invalidProp, required, size, id: idProp, 'aria-label': ariaLabel, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './date-picker.css.js';
+import { SvgEvent } from '@bspk/icons/Event';
+import { format, isValid, parse } from 'date-fns';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from '../Button';
+import { Calendar } from '../Calendar';
+import { useFieldInit } from '../Field';
+import { InputElement } from '../Input';
+import { Portal } from '../Portal';
+import { useFloating } from '../../hooks/useFloating';
+import { useOutsideClick } from '../../hooks/useOutsideClick';
+const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString);
+/**
+ * An input that allows a customer to manually type in a specific date or triggers a the Calendar component to select a
+ * date.
+ *
+ * For a more complete example with field usage, see the DatePickerField component.
+ *
+ * @example
+ *     import { DatePicker } from '@bspk/ui/DatePicker';
+ *     import { Field, FieldLabel } from '@bspk/ui/Field';
+ *     import { useState } from 'react';
+ *
+ *     function ExampleStandalone() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *         return <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />;
+ *     }
+ *
+ *     function ExampleWithField() {
+ *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *
+ *         return (
+ *             <Field>
+ *                 <FieldLabel>Date</FieldLabel>
+ *                 <DatePicker name="date1" value={date} onChange={setDate} />
+ *                 <FieldDescription>The date picker allows you to select a date.</FieldDescription>
+ *             </Field>
+ *         );
+ *     }
+ *
+ * @name DatePicker
+ * @phase UXReview
+ */
+export function DatePicker({ value: valueProp, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Date picker', }) {
+    const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
+        idProp,
+        required,
+        disabled,
+        readOnly,
+        invalidProp,
+    });
+    const value = useMemo(() => {
+        if (typeof valueProp === 'string') {
+            const parsedDate = new Date(valueProp);
+            return isValid(parsedDate) ? parsedDate : undefined;
+        }
+        return valueProp instanceof Date && isValid(valueProp) ? valueProp : undefined;
+    }, [valueProp]);
+    useEffect(() => {
+        const formattedValue = value ? format(value, 'MM/dd/yyyy') : '';
+        setTextValue(formattedValue);
+    }, [value]);
+    const [textValue, setTextValue] = useState(() => (value ? format(value, 'MM/dd/yyyy') : ''));
+    const [calendarVisible, setCalendarVisible] = useState(false);
+    const containerRef = useRef(null);
+    const { elements, floatingStyles } = useFloating({
+        placement: 'bottom',
+        strategy: 'absolute',
+        offsetOptions: 4,
+        refWidth: true,
+    });
+    useOutsideClick({
+        elements: [elements.floating, containerRef.current],
+        callback: () => setCalendarVisible(false),
+        disabled: !calendarVisible,
+    });
+    const isValidDate = (next) => {
+        const parsedDate = parse(next, 'MM/dd/yyyy', new Date());
+        return isValid(parsedDate) ? parsedDate : undefined;
+    };
+    const validate = () => {
+        let nextDate;
+        let nextTextValue = '';
+        if (parsableDate(textValue)) {
+            nextDate = isValidDate(textValue);
+            if (nextDate)
+                nextTextValue = format(nextDate, 'MM/dd/yyyy');
+        }
+        setTextValue(nextTextValue);
+        onChange(nextDate);
+    };
+    const handleTextChange = (nextValue) => {
+        // Add slashes as the user types
+        if (/^\d{2}$/.test(nextValue) || /^\d{1,2}\/\d{2}$/.test(nextValue))
+            nextValue = `${nextValue}/`;
+        // Remove extra slashes
+        if (nextValue.endsWith('//'))
+            nextValue = nextValue.slice(0, -1);
+        setTextValue(nextValue);
+        if (parsableDate(nextValue)) {
+            const next = isValidDate(nextValue);
+            if (next)
+                onChange(next);
+        }
+    };
+    return (_jsxs("div", { "data-bspk": "date-picker", ref: (node) => {
+            containerRef.current = node;
+            elements.setReference(node);
+        }, children: [_jsx(InputElement, { "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled || undefined, id: id, invalid: invalid || undefined, name: name, onBlur: () => validate(), onChange: handleTextChange, onKeyDown: (event) => {
+                    // allow select all and other keyboard shortcuts
+                    if (event.ctrlKey || event.metaKey) {
+                        return;
+                    }
+                    // handle backspace and delete to remove the slash and the number before it
+                    if (event.key === 'Backspace' || (event.key === 'Delete' && textValue.endsWith('/'))) {
+                        event.preventDefault();
+                        setTextValue((prev) => prev.slice(0, -2));
+                    }
+                    // if a single key and not a number or forward slash ignore
+                    if (event.key.length === 1 && !/[0-9/]/.test(event.key)) {
+                        event.preventDefault();
+                    }
+                }, placeholder: placeholder || 'mm/dd/yyyy', readOnly: readOnly, required: required, showClearButton: false, size: size, trailing: !disabled &&
+                    !readOnly && (_jsx(Button, { icon: _jsx(SvgEvent, {}), iconOnly: true, label: "Toggle calendar", onClick: () => setCalendarVisible((prev) => !prev), variant: "tertiary" })), value: textValue }), calendarVisible && (_jsx(Portal, { children: _jsx("div", { "data-placement": "bottom", ref: (node) => {
+                        elements.setFloating(node);
+                    }, style: { ...floatingStyles, zIndex: 'var( --z-index-dropdown)' }, children: _jsx(Calendar, { focusTrap: true, onChange: (next) => {
+                            if (closeCalendarOnChange)
+                                setCalendarVisible(false);
+                            onChange(next);
+                        }, value: value, variant: "elevated" }) }) }))] }));
+}
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

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

package/dist/components/DatePicker/DatePickerExample.d.ts

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

package/dist/components/DatePicker/DatePickerExample.js

@@ -0,0 +1,10 @@
+export const DatePickerExample = {
+    defaultState: {
+        value: new Date(1985, 5, 3),
+        'aria-label': 'Select date',
+    },
+    disableProps: [],
+    sections: [],
+    variants: false,
+};
+//# sourceMappingURL=DatePickerExample.js.map

package/dist/components/DatePicker/DatePickerExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,YAAY,EAAE;QACV,KAAK,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC;QAC3B,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAChB,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/{DateInput/date-input.css → DatePicker/date-picker.css}

@@ -1,11 +1,10 @@
-[data-bspk=date-input] {
+[data-bspk=date-picker] {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 360px;
   width: 100%;
 }
-[data-bspk=date-input] [data-bspk=text-input] {
+[data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
 

package/dist/components/{DateInput/date-input.css.js → DatePicker/date-picker.css.js}

@@ -1,14 +1,13 @@
 /** * 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=date-input] {
+style.appendChild(document.createTextNode(`[data-bspk=date-picker] {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  min-width: 360px;
   width: 100%;
 }
-[data-bspk=date-input] [data-bspk=text-input] {
+[data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
 

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

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

package/dist/components/DatePicker/index.js

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

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

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

package/dist/components/DatePickerField/DatePickerField.d.ts

@@ -0,0 +1,15 @@
+import { DatePickerProps } from '-/components/DatePicker';
+import { FormFieldControlProps } from '-/components/FormField';
+export type DatePickerFieldProps = FormFieldControlProps<DatePickerProps>;
+/**
+ * A field wrapper for the DatePicker component.
+ *
+ * This component takes properties from the FormField and DatePicker components.
+ *
+ * @name DatePickerField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export declare function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }: DatePickerFieldProps): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePickerField/DatePickerField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatePicker } from '../DatePicker';
+import { FormField } from '../FormField';
+/**
+ * A field wrapper for the DatePicker component.
+ *
+ * This component takes properties from the FormField and DatePicker components.
+ *
+ * @name DatePickerField
+ * @phase UXReview
+ *
+ * @generated
+ */
+export function DatePickerField({ label, helperText, labelTrailing, errorMessage, style, ...controlProps }) {
+    return (_jsx(FormField, { errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, style: style, children: _jsx(DatePicker, { ...controlProps }) }));
+}
+//# sourceMappingURL=DatePickerField.js.map

package/dist/components/DatePickerField/DatePickerField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerField.js","sourceRoot":"","sources":["../../../src/components/DatePickerField/DatePickerField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAyB,MAAM,wBAAwB,CAAC;AAI1E;;;;;;;;;GASG;AACH,MAAM,UAAU,eAAe,CAAC,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,YAAY,EACZ,KAAK,EACL,GAAG,YAAY,EACI;IACnB,OAAO,CACH,KAAC,SAAS,IACN,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,YAEZ,KAAC,UAAU,OAAK,YAAY,GAAI,GACxB,CACf,CAAC;AACN,CAAC"}

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

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

package/dist/components/DatePickerField/index.js

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

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

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

package/dist/components/Drawer/Drawer.d.ts

@@ -47,7 +47,7 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [open, setOpen] = React.useState(false);
  *
  *         return (

package/dist/components/Drawer/Drawer.js

@@ -14,7 +14,7 @@ import { Txt } from '../Txt';
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
- *     export function Example() {
+ *     function Example() {
  *         const [open, setOpen] = React.useState(false);
  *
  *         return (

package/dist/components/Drawer/DrawerExample.js

@@ -1,14 +1,14 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Drawer } from '.';
 import { Button } from '../Button';
 export const presets = [
     {
         label: 'Left Responsive',
-        propState: { closeButton: true, modal: false, placement: 'left', children: _jsx(_Fragment, {}) },
+        propState: { closeButton: true, modal: false, placement: 'left', children: null },
     },
     {
         label: 'Right Responsive',
-        propState: { closeButton: true, modal: false, placement: 'right', children: _jsx(_Fragment, {}) },
+        propState: { closeButton: true, modal: false, placement: 'right', children: null },
     },
 ];
 export const DrawerExample = ({ action }) => ({

package/dist/components/Drawer/DrawerExample.js.map

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

package/dist/components/EmptyState/EmptyState.d.ts

@@ -35,7 +35,7 @@ export type EmptyStateProps = {
  * @example
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <EmptyState body="Example body" header="Example header">
  *                 Example EmptyState

package/dist/components/EmptyState/EmptyState.js

@@ -8,7 +8,7 @@ import { Txt } from '../Txt';
  * @example
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
- *     export function Example() {
+ *     function Example() {
  *         return (
  *             <EmptyState body="Example body" header="Example header">
  *                 Example EmptyState

package/dist/components/Fab/Fab.d.ts

@@ -3,7 +3,7 @@ import { AriaAttributes, ElementType } from 'react';
 import { ButtonProps } from '-/components/Button';
 import { ElementProps } from '-/types/common';
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
-export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>, 'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
+export type FabProps<As extends ElementType = ElementType> = Pick<ButtonProps<As>, 'as' | 'icon' | 'iconOnly' | 'onClick' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
     /**
      * The size of the button.
      *
@@ -37,12 +37,12 @@ export type FabProps<As extends ElementType = 'button'> = Pick<ButtonProps<As>,
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     export function Example() {
+ *     function Example() {
  *         return <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
  *     }
  *
  * @name Fab
  * @phase UXReview
  */
-export declare function Fab<As extends ElementType = 'button'>(props: AriaAttributes & ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;
+export declare function Fab<As extends ElementType = ElementType>(props: AriaAttributes & ElementProps<FabProps<As>, As>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */