@bspk/ui 1.3.10 → 1.3.16

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

@@ -42,8 +42,6 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  * content or actions without navigating away from the current view.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
@@ -51,25 +49,25 @@ export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | '
  *         const [open, setOpen] = useState(false);
  *
  *         return (
- *             <>
- *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *             <div style={{ width: '100%', height: 180 }}>
+ *                 <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
  *                 <Drawer
+ *                     closeButton={true}
+ *                     header="Example Drawer"
  *                     id="exampleId"
+ *                     modal={false}
  *                     onClose={() => setOpen(false)}
  *                     open={open}
  *                     placement="right"
- *                     modal={false}
- *                     header="Example Drawer"
- *                     closeButton={true}
  *                 >
- *                     Example Drawer
+ *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
  *                 </Drawer>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name Drawer
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Drawer({ header, children, open, modal, closeButton, placement, onClose, disableFocusTrap, ...dialogProps }: DrawerProps): import("react/jsx-runtime").JSX.Element | null;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Drawer/Drawer.js

@@ -3,14 +3,11 @@ import './drawer.css.js';
 import { SvgClose } from '@bspk/icons/Close';
 import { Button } from '../Button';
 import { Dialog } from '../Dialog';
-import { Txt } from '../Txt';
 /**
  * Drawer component displays a panel that slides in from the edge of the screen. It can be used to show additional
  * content or actions without navigating away from the current view.
  *
  * @example
- *     import React from 'react';
- *
  *     import { Button } from '@bspk/ui/Button';
  *     import { Drawer } from '@bspk/ui/Drawer';
  *
@@ -18,30 +15,30 @@ import { Txt } from '../Txt';
  *         const [open, setOpen] = useState(false);
  *
  *         return (
- *             <>
- *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *             <div style={{ width: '100%', height: 180 }}>
+ *                 <Button label="Toggle Drawer" onClick={() => setOpen(!open)} />
  *                 <Drawer
+ *                     closeButton={true}
+ *                     header="Example Drawer"
  *                     id="exampleId"
+ *                     modal={false}
  *                     onClose={() => setOpen(false)}
  *                     open={open}
  *                     placement="right"
- *                     modal={false}
- *                     header="Example Drawer"
- *                     closeButton={true}
  *                 >
- *                     Example Drawer
+ *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
  *                 </Drawer>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name Drawer
- * @phase UXReview
+ * @phase Stable
  */
 export function Drawer({ header, children, open = false, modal = true, closeButton = false, placement = 'right', onClose, disableFocusTrap, ...dialogProps }) {
     if (!open)
         return null;
-    const drawerContent = (_jsxs("section", { "aria-modal": modal ? 'true' : undefined, "data-bspk": "drawer", "data-no-portal": modal ? null : true, "data-persistent-placement": modal ? null : placement, role: modal ? 'dialog' : 'complementary', children: [(header || closeButton) && (_jsxs("div", { "data-drawer-close-only": !header, "data-drawer-header": true, children: [header && (_jsx(Txt, { as: "div", "data-drawer-title": true, variant: "heading-h4", children: header })), closeButton && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: onClose, variant: "tertiary" }))] })), children] }));
+    const drawerContent = (_jsxs("section", { "aria-modal": modal ? 'true' : undefined, "data-bspk": "drawer", "data-no-portal": modal ? null : true, "data-persistent-placement": modal ? null : placement, role: modal ? 'dialog' : 'complementary', children: [(header || closeButton) && (_jsxs("div", { "data-drawer-close-only": !header, "data-drawer-header": true, children: [header && _jsx("div", { "data-drawer-title": true, children: header }), closeButton && (_jsx(Button, { icon: _jsx(SvgClose, {}), iconOnly: true, label: "close", onClick: onClose, variant: "tertiary" }))] })), children] }));
     if (!modal)
         return drawerContent;
     return (_jsx(Dialog, { ...dialogProps, disableFocusTrap: disableFocusTrap, onClose: onClose || (() => { }), open: open, placement: placement, showScrim: true, widthFull: placement === 'bottom' || placement === 'top', children: drawerContent }));

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAuCvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,IAAI,EACZ,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,gBAAgB,EAChB,GAAG,WAAW,EACJ;IACV,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,aAAa,GAAG,CAClB,iCACgB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eAC5B,QAAQ,oBACF,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,+BACR,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,aAEvC,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,CACxB,yCAA6B,CAAC,MAAM,yCAC/B,MAAM,IAAI,CACP,KAAC,GAAG,IAAC,EAAE,EAAC,KAAK,6BAAmB,OAAO,EAAC,YAAY,YAC/C,MAAM,GACL,CACT,EACA,WAAW,IAAI,CACZ,KAAC,MAAM,IAAC,IAAI,EAAE,KAAC,QAAQ,KAAG,EAAE,QAAQ,QAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,CAC7F,IACC,CACT,EAEA,QAAQ,IACH,CACb,CAAC;IAEF,IAAI,CAAC,KAAK;QAAE,OAAO,aAAa,CAAC;IAEjC,OAAO,CACH,KAAC,MAAM,OACC,WAAW,EACf,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,KAAK,YAEvD,aAAa,GACT,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAuC1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,MAAM,CAAC,EACnB,MAAM,EACN,QAAQ,EACR,IAAI,GAAG,KAAK,EACZ,KAAK,GAAG,IAAI,EACZ,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,OAAO,EACnB,OAAO,EACP,gBAAgB,EAChB,GAAG,WAAW,EACJ;IACV,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,MAAM,aAAa,GAAG,CAClB,iCACgB,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,eAC5B,QAAQ,oBACF,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,+BACR,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACnD,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,aAEvC,CAAC,MAAM,IAAI,WAAW,CAAC,IAAI,CACxB,yCAA6B,CAAC,MAAM,yCAC/B,MAAM,IAAI,mDAAwB,MAAM,GAAO,EAC/C,WAAW,IAAI,CACZ,KAAC,MAAM,IAAC,IAAI,EAAE,KAAC,QAAQ,KAAG,EAAE,QAAQ,QAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,CAC7F,IACC,CACT,EAEA,QAAQ,IACH,CACb,CAAC;IAEF,IAAI,CAAC,KAAK;QAAE,OAAO,aAAa,CAAC;IAEjC,OAAO,CACH,KAAC,MAAM,OACC,WAAW,EACf,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,IAAI,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,EACf,SAAS,EAAE,SAAS,KAAK,QAAQ,IAAI,SAAS,KAAK,KAAK,YAEvD,aAAa,GACT,CACZ,CAAC;AACN,CAAC"}

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

@@ -2,3 +2,4 @@ import { DrawerProps } from '.';
 import { ComponentExampleFn, Preset } from '-/utils/demo';
 export declare const presets: Preset<DrawerProps>[];
 export declare const DrawerExample: ComponentExampleFn<DrawerProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Drawer/DrawerExample.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Drawer } from '.';
 import { Button } from '../Button';
+import { ExamplePlaceholder } from '../ExamplePlaceholder';
 export const presets = [
     {
         label: 'Left Responsive',
@@ -22,26 +24,30 @@ export const DrawerExample = ({ action }) => ({
     render: ({ props, preset, setState, Component }) => {
         if (!preset)
             return null;
-        const label = 'Open Drawer';
         const handleOnClose = () => {
             action('Drawer closed');
             setState({ open: false });
         };
+        const toggleButton = _jsx(Button, { label: "Toggle Drawer", onClick: () => setState({ open: !props.open }) });
         switch (preset.label) {
             case 'Left Responsive':
                 return (_jsxs(_Fragment, { children: [_jsx(Drawer, { ...props, onClose: handleOnClose, children: _jsxs("div", { style: { width: '280px' }, children: ["Hello, ", _jsx("br", {}), " I am a ", props.placement, ", responsive drawer!"] }) }), _jsx("div", { style: {
                                 transition: 'margin 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
                                 marginLeft: props.open ? `280px` : 0,
-                            }, children: _jsx(Button, { label: label, onClick: () => setState({ open: true }) }) })] }));
+                            }, children: toggleButton })] }));
             case 'Right Responsive':
                 return (_jsxs(_Fragment, { children: [_jsx("div", { style: {
                                 transition: 'margin 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
                                 marginRight: props.open ? `280px` : 0,
-                            }, children: _jsx(Button, { label: label, onClick: () => setState({ open: true }) }) }), _jsx(Drawer, { ...props, onClose: handleOnClose, children: _jsxs("div", { style: { width: '280px' }, children: ["Hello, ", _jsx("br", {}), " I am a ", props.placement, ", responsive drawer!"] }) })] }));
+                            }, children: toggleButton }), _jsx(Drawer, { ...props, onClose: handleOnClose, children: _jsxs("div", { style: { width: '280px' }, children: ["Hello, ", _jsx("br", {}), " I am a ", props.placement, ", responsive drawer!"] }) })] }));
             default:
-                return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 'var(--spacing-sizing-04)' }, children: _jsx(Button, { label: label, onClick: () => setState({ open: true }) }) }), _jsx(Component, { "data-example-component": true, ...props, closeButton: props.closeButton ?? false, id: "exampleId", modal: props.modal ?? true, onClose: handleOnClose, open: props.open ?? false, placement: props.placement ?? 'right', children: _jsxs("div", { style: {}, children: ["Hello, I am a (", props.placement, ") drawer!"] }) })] }));
+                return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: 'flex', justifyContent: 'center', padding: 'var(--spacing-sizing-04)' }, children: toggleButton }), _jsx(Component, { "data-example-component": true, ...props, closeButton: props.closeButton ?? false, id: "exampleId", modal: props.modal ?? true, onClose: handleOnClose, open: props.open ?? false, placement: props.placement ?? 'right', children: _jsxs("div", { style: {}, children: ["Hello, I am a (", props.placement, ") drawer!"] }) })] }));
         }
     },
     variants: false,
 });
+export const Usage = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs("div", { style: { width: '100%', height: 180 }, children: [_jsx(Button, { label: "Toggle Drawer", onClick: () => setOpen(!open) }), _jsx(Drawer, { closeButton: true, header: "Example Drawer", id: "exampleId", modal: false, onClose: () => setOpen(false), open: open, placement: "right", children: _jsx(ExamplePlaceholder, { label: "Drawer Content", style: { flexGrow: 1 } }) })] }));
+};
 //# sourceMappingURL=DrawerExample.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerExample.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAe,MAAM,GAAG,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,OAAO,GAA0B;IAC1C;QACI,KAAK,EAAE,iBAAiB;QACxB,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;KACpF;IACD;QACI,KAAK,EAAE,kBAAkB;QACzB,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE;KACrF;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAoC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3E,cAAc,EAAE;QACZ,MAAM,EAAE,OAAO;QACf,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,QAAQ,EAAE,6BAA6B;KACpD;IACD,OAAO;IACP,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;QAC/C,IAAI,CAAC,MAAM;YAAE,OAAO,IAAI,CAAC;QACzB,MAAM,KAAK,GAAG,aAAa,CAAC;QAC5B,MAAM,aAAa,GAAG,GAAG,EAAE;YACvB,MAAM,CAAC,eAAe,CAAC,CAAC;YACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,QAAQ,MAAM,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,iBAAiB;gBAClB,OAAO,CACH,8BACI,KAAC,MAAM,OAAK,KAAK,EAAE,OAAO,EAAE,aAAa,YACrC,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,wBACnB,cAAM,cAAS,KAAK,CAAC,SAAS,4BACnC,GACD,EAET,cACI,KAAK,EAAE;gCACH,UAAU,EAAE,0CAA0C;gCACtD,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;6BACvC,YAED,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAC/D,IACP,CACN,CAAC;YACN,KAAK,kBAAkB;gBACnB,OAAO,CACH,8BACI,cACI,KAAK,EAAE;gCACH,UAAU,EAAE,0CAA0C;gCACtD,WAAW,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;6BACxC,YAED,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAC/D,EACN,KAAC,MAAM,OAAK,KAAK,EAAE,OAAO,EAAE,aAAa,YACrC,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,wBACnB,cAAM,cAAS,KAAK,CAAC,SAAS,4BACnC,GACD,IACV,CACN,CAAC;YACN;gBACI,OAAO,CACH,8BACI,cAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,OAAO,EAAE,0BAA0B,EAAE,YAC1F,KAAC,MAAM,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,GAC/D,EACN,KAAC,SAAS,uCAEF,KAAK,EACT,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,KAAK,EACvC,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,IAAI,EAC1B,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,KAAK,EACzB,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,OAAO,YAErC,eAAK,KAAK,EAAE,EAAE,gCAAkB,KAAK,CAAC,SAAS,iBAAgB,GACvD,IACb,CACN,CAAC;QACV,CAAC;IACL,CAAC;IACD,QAAQ,EAAE,KAAK;CAClB,CAAC,CAAC"}
+{"version":3,"file":"DrawerExample.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerExample.tsx"],"names":[],"mappings":"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"}

package/dist/components/Drawer/drawer.css

@@ -2,6 +2,8 @@
   padding: var(--spacing-sizing-03);
   color: var(--foreground-neutral-on-surface);
   background: var(--surface-neutral-t1-base);
+  display: flex;
+  flex-direction: column;
 }
 [data-bspk=drawer][data-no-portal] {
   box-shadow: var(--drop-shadow-float);
@@ -22,6 +24,7 @@
   --box-animation-name: placement-right;
   position: absolute;
   right: 0;
+  top: 0;
   height: 100%;
   border-top-left-radius: var(--radius-lg);
   border-bottom-left-radius: var(--radius-lg);
@@ -52,5 +55,8 @@
 [data-bspk=drawer] [data-drawer-header][data-drawer-close-only=true] {
   justify-content: flex-end;
 }
+[data-bspk=drawer] [data-drawer-header] [data-drawer-title] {
+  font: var(--heading-h4);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Drawer/drawer.css.js

@@ -5,6 +5,8 @@ style.appendChild(document.createTextNode(`[data-bspk=drawer] {
   padding: var(--spacing-sizing-03);
   color: var(--foreground-neutral-on-surface);
   background: var(--surface-neutral-t1-base);
+  display: flex;
+  flex-direction: column;
 }
 [data-bspk=drawer][data-no-portal] {
   box-shadow: var(--drop-shadow-float);
@@ -25,6 +27,7 @@ style.appendChild(document.createTextNode(`[data-bspk=drawer] {
   --box-animation-name: placement-right;
   position: absolute;
   right: 0;
+  top: 0;
   height: 100%;
   border-top-left-radius: var(--radius-lg);
   border-bottom-left-radius: var(--radius-lg);
@@ -55,6 +58,9 @@ style.appendChild(document.createTextNode(`[data-bspk=drawer] {
 [data-bspk=drawer] [data-drawer-header][data-drawer-close-only=true] {
   justify-content: flex-end;
 }
+[data-bspk=drawer] [data-drawer-header] [data-drawer-title] {
+  font: var(--heading-h4);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

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

@@ -36,11 +36,11 @@ export type EmptyStateProps = {
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
  *     <EmptyState body="Example body" header="Example header">
- *         Example EmptyState
+ *         <ExamplePlaceholder height="200px" width="200px" label="Illustration slot or icon slot" />
  *     </EmptyState>;
  *
  * @name EmptyState
- * @phase UXReview
+ * @phase Stable
  */
 export declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/EmptyState/EmptyState.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../Button';
-import { Layout } from '../Layout';
+import { Flex } from '../Flex';
 import { Txt } from '../Txt';
 /**
  * A design pattern component that indicates to users that system has no content to display.
@@ -9,16 +9,13 @@ import { Txt } from '../Txt';
  *     import { EmptyState } from '@bspk/ui/EmptyState';
  *
  *     <EmptyState body="Example body" header="Example header">
- *         Example EmptyState
+ *         <ExamplePlaceholder height="200px" width="200px" label="Illustration slot or icon slot" />
  *     </EmptyState>;
  *
  * @name EmptyState
- * @phase UXReview
+ * @phase Stable
  */
 export function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
-    return (_jsxs(Layout, { align: "center", column: true, "data-bspk": "empty-state", style: {
-            margin: 'var(--spacing-sizing-04)',
-            maxWidth: '500px',
-        }, children: [children, _jsxs(Layout, { align: "center", column: true, gap: "4", children: [_jsx(Txt, { as: "header", variant: "heading-h5", children: header }), _jsx(Txt, { as: "p", style: { textAlign: bodyAlign }, variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
+    return (_jsxs(Flex, { align: "center", "data-bspk": "empty-state", direction: "column", gap: "16", children: [children, _jsxs(Flex, { align: bodyAlign === 'left' ? 'flex-start' : 'center', direction: "column", gap: "4", style: { textAlign: bodyAlign }, children: [_jsx(Txt, { variant: "heading-h5", children: header }), _jsx(Txt, { variant: "body-base", children: body })] }), callToAction && (_jsx(Button, { label: callToAction.label, onClick: callToAction.onClick, size: callToAction.size || 'medium', variant: "primary" }))] }));
 }
 //# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState/EmptyState.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAiCvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IACtG,OAAO,CACH,MAAC,MAAM,IACH,KAAK,EAAC,QAAQ,EACd,MAAM,qBACI,aAAa,EACvB,KAAK,EAAE;YACH,MAAM,EAAE,0BAA0B;YAClC,QAAQ,EAAE,OAAO;SACpB,aAEA,QAAQ,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,QAAC,GAAG,EAAC,GAAG,aACjC,KAAC,GAAG,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,YAAY,YAChC,MAAM,GACL,EACN,KAAC,GAAG,IAAC,EAAE,EAAC,GAAG,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,OAAO,EAAC,WAAW,YAC3D,IAAI,GACH,IACD,EACR,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACI,CACZ,CAAC;AACN,CAAC"}
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyState.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAiCvC;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,SAAS,GAAG,QAAQ,EAAmB;IACtG,OAAO,CACH,MAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,eAAW,aAAa,EAAC,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACnE,QAAQ,EACT,MAAC,IAAI,IACD,KAAK,EAAE,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,EACrD,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAC,GAAG,EACP,KAAK,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAE/B,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,MAAM,GAAO,EACxC,KAAC,GAAG,IAAC,OAAO,EAAC,WAAW,YAAE,IAAI,GAAO,IAClC,EACN,YAAY,IAAI,CACb,KAAC,MAAM,IACH,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,OAAO,EAAE,YAAY,CAAC,OAAO,EAC7B,IAAI,EAAE,YAAY,CAAC,IAAI,IAAI,QAAQ,EACnC,OAAO,EAAC,SAAS,GACnB,CACL,IACE,CACV,CAAC;AACN,CAAC"}

package/dist/components/EmptyState/EmptyStateExample.js

@@ -5,18 +5,17 @@ export const presets = [
         label: 'With Custom Content',
         propState: {
             callToAction: undefined,
-            body: 'Example body',
-            header: 'Example header',
-            children: (_jsx(ExamplePlaceholder, { style: {
+            body: 'No results found',
+            header: 'We couldn’t find any matching results. Try changing your search.',
+            children: (_jsx(ExamplePlaceholder, { label: "Illustration slot or icon slot", style: {
                     height: '200px',
-                    width: '60%',
-                    minWidth: '250px',
+                    width: '200px',
                 } })),
         },
     },
 ];
 export const EmptyStateExample = ({ action }) => ({
-    containerStyle: { width: '100%' },
+    containerStyle: { width: '400px' },
     render: ({ props: { children, ...props }, Component }) => _jsx(Component, { ...props, children: children }),
     presets: [
         {

package/dist/components/EmptyState/EmptyStateExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmptyStateExample.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyStateExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA8B;IAC9C;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,YAAY,EAAE,SAAS;YACvB,IAAI,EAAE,cAAc;YACpB,MAAM,EAAE,gBAAgB;YACxB,QAAQ,EAAE,CACN,KAAC,kBAAkB,IACf,KAAK,EAAE;oBACH,MAAM,EAAE,OAAO;oBACf,KAAK,EAAE,KAAK;oBACZ,QAAQ,EAAE,OAAO;iBACpB,GACH,CACL;SACJ;KACJ;CACJ,CAAC;AAEF,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,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa;IACtG,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE,gBAAgB;gBACxB,YAAY,EAAE;oBACV,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA6B,CAAC;iBACvD;gBACD,QAAQ,EAAE,SAAS;aACtB;SACJ;QACD,GAAG,OAAO;KACb;CACJ,CAAC,CAAC"}
+{"version":3,"file":"EmptyStateExample.js","sourceRoot":"","sources":["../../../src/components/EmptyState/EmptyStateExample.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA8B;IAC9C;QACI,KAAK,EAAE,qBAAqB;QAC5B,SAAS,EAAE;YACP,YAAY,EAAE,SAAS;YACvB,IAAI,EAAE,kBAAkB;YACxB,MAAM,EAAE,kEAAkE;YAC1E,QAAQ,EAAE,CACN,KAAC,kBAAkB,IACf,KAAK,EAAC,gCAAgC,EACtC,KAAK,EAAE;oBACH,MAAM,EAAE,OAAO;oBACf,KAAK,EAAE,OAAO;iBACjB,GACH,CACL;SACJ;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAwC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IACnF,cAAc,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa;IACtG,OAAO,EAAE;QACL;YACI,KAAK,EAAE,mBAAmB;YAC1B,SAAS,EAAE;gBACP,IAAI,EAAE,cAAc;gBACpB,MAAM,EAAE,gBAAgB;gBACxB,YAAY,EAAE;oBACV,KAAK,EAAE,oBAAoB;oBAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,6BAA6B,CAAC;iBACvD;gBACD,QAAQ,EAAE,SAAS;aACtB;SACJ;QACD,GAAG,OAAO;KACb;CACJ,CAAC,CAAC"}

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.d.ts

@@ -1,11 +1,6 @@
+import { ReactNode } from 'react';
 import { ElementProps } from '-/types/common';
 export type ExamplePlaceholderProps = {
-    /**
-     * Whether to hide the size text.
-     *
-     * @default false
-     */
-    hideSize?: boolean;
     /**
      * The height of the placeholder.
      *
@@ -20,12 +15,10 @@ export type ExamplePlaceholderProps = {
      * @type string
      */
     width?: number | string;
-    /**
-     * The direction of the placeholder.
-     *
-     * @default 'row'
-     */
-    direction?: 'column' | 'row';
+    /** An optional label for the placeholder. */
+    label?: string;
+    /** Optional children to display inside the placeholder instead of the label. */
+    children?: ReactNode;
 };
 /**
  * A utility component that serves as a placeholder for examples.
@@ -33,4 +26,4 @@ export type ExamplePlaceholderProps = {
  * @name ExamplePlaceholder
  * @phase Utility
  */
-export declare function ExamplePlaceholder({ hideSize, height, width, direction, ...props }: ElementProps<ExamplePlaceholderProps, 'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function ExamplePlaceholder({ height, width, label, children, ...props }: ElementProps<ExamplePlaceholderProps, 'div'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from 'react';
 import { Txt } from '../Txt';
 const dimension = (value) => (typeof value === 'number' ? `${value}px` : `${value}`);
 /**
@@ -8,13 +7,19 @@ const dimension = (value) => (typeof value === 'number' ? `${value}px` : `${valu
  * @name ExamplePlaceholder
  * @phase Utility
  */
-export function ExamplePlaceholder({ hideSize = false, height = 100, width = '100%', direction = 'row', ...props }) {
-    const ref = useRef(null);
-    return (_jsx("div", { ...props, "data-bspk-utility": "example-placeholder", "data-example-placeholder": true, ref: ref, style: {
-            ...props.style,
+export function ExamplePlaceholder({ height = 100, width = '100%', label, children, ...props }) {
+    return (_jsx("div", { ...props, "data-bspk-utility": "example-placeholder", style: {
+            flexDirection: 'column',
+            gap: 'var(--spacing-sizing-01)',
             width: dimension(width),
             height: dimension(height),
-            flexDirection: direction,
-        }, children: !hideSize && (_jsxs(_Fragment, { children: [_jsx(Txt, { variant: "labels-large", children: dimension(width) }), _jsx(Txt, { children: "\u00D7" }), _jsx(Txt, { variant: "labels-large", children: dimension(height) })] })) }));
+            background: 'var(--surface-neutral-t3-low)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            textAlign: 'center',
+            font: 'var(--body-x-small)',
+            ...props.style,
+        }, children: children || label || (_jsxs(_Fragment, { children: [_jsx(Txt, { variant: "labels-large", children: dimension(width) }), _jsx(Txt, { children: "\u00D7" }), _jsx(Txt, { variant: "labels-large", children: dimension(height) })] })) }));
 }
 //# sourceMappingURL=ExamplePlaceholder.js.map

package/dist/components/ExamplePlaceholder/ExamplePlaceholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExamplePlaceholder.js","sourceRoot":"","sources":["../../../src/components/ExamplePlaceholder/ExamplePlaceholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,SAAS,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;AA+BtG;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,QAAQ,GAAG,KAAK,EAChB,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,MAAM,EACd,SAAS,GAAG,KAAK,EACjB,GAAG,KAAK,EACmC;IAC3C,MAAM,GAAG,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACH,iBACQ,KAAK,uBACS,qBAAqB,oCAEvC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE;YACH,GAAG,KAAK,CAAC,KAAK;YACd,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;YACvB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC;YACzB,aAAa,EAAE,SAAS;SAC3B,YAEA,CAAC,QAAQ,IAAI,CACV,8BACI,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,KAAK,CAAC,GAAO,EACpD,KAAC,GAAG,yBAAc,EAClB,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,MAAM,CAAC,GAAO,IACtD,CACN,GACC,CACT,CAAC;AACN,CAAC"}
+{"version":3,"file":"ExamplePlaceholder.js","sourceRoot":"","sources":["../../../src/components/ExamplePlaceholder/ExamplePlaceholder.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAGvC,MAAM,SAAS,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;AAuBtG;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAC/B,MAAM,GAAG,GAAG,EACZ,KAAK,GAAG,MAAM,EACd,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACmC;IAC3C,OAAO,CACH,iBACQ,KAAK,uBACS,qBAAqB,EACvC,KAAK,EAAE;YACH,aAAa,EAAE,QAAQ;YACvB,GAAG,EAAE,0BAA0B;YAC/B,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC;YACvB,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC;YACzB,UAAU,EAAE,+BAA+B;YAC3C,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,SAAS,EAAE,QAAQ;YACnB,IAAI,EAAE,qBAAqB;YAC3B,GAAG,KAAK,CAAC,KAAK;SACjB,YAEA,QAAQ,IAAI,KAAK,IAAI,CAClB,8BACI,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,KAAK,CAAC,GAAO,EACpD,KAAC,GAAG,yBAAc,EAClB,KAAC,GAAG,IAAC,OAAO,EAAC,cAAc,YAAE,SAAS,CAAC,MAAM,CAAC,GAAO,IACtD,CACN,GACC,CACT,CAAC;AACN,CAAC"}

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

@@ -4,7 +4,7 @@ import { ButtonProps } from '-/components/Button';
 import { ElementProps } from '-/types/common';
 export type FabSize = 'medium' | 'small';
 export type FabVariant = 'neutral' | 'primary' | 'secondary';
-export type FabProps<As extends ElementType = ElementType> = Pick<ButtonProps<As>, 'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'toolTip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
+export type FabProps<As extends ElementType = ElementType> = Pick<ButtonProps<As>, 'aria-label' | 'as' | 'icon' | 'iconOnly' | 'innerRef' | 'onClick' | 'tooltip'> & Required<Pick<ButtonProps<As>, 'label'>> & {
     /**
      * The size of the button.
      *
@@ -38,10 +38,12 @@ export type FabProps<As extends ElementType = ElementType> = Pick<ButtonProps<As
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
+ *     <div style={{ width: '100%', height: 100 }}>
+ *         <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+ *     </div>;
  *
  * @name Fab
- * @phase UXReview
+ * @phase Stable
  */
 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 */

package/dist/components/Fab/Fab.js

@@ -10,16 +10,18 @@ import { Tooltip } from '../Tooltip';
  *     import { SvgBolt } from '@bspk/icons/Bolt';
  *     import { Fab } from '@bspk/ui/Fab';
  *
- *     <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />;
+ *     <div style={{ width: '100%', height: 100 }}>
+ *         <Fab icon={<SvgBolt />} label="Example label" placement="bottom-right" variant="neutral" />
+ *     </div>;
  *
  * @name Fab
- * @phase UXReview
+ * @phase Stable
  */
 export function Fab(props) {
-    const { size = 'small', variant = 'primary', iconOnly: iconOnlyProp = false, as: As = 'button', placement = 'bottom-right', container = 'local', label, icon, toolTip, innerRef, ...otherProps } = props;
+    const { 'aria-label': ariaLabel, size = 'small', variant = 'primary', iconOnly: iconOnlyProp = false, as: As = 'button', placement = 'bottom-right', container = 'local', label, icon, tooltip, innerRef, ...otherProps } = props;
     // ignore iconOnly=true if there is no icon
     const iconOnly = iconOnlyProp === true && !!icon;
-    const button = (triggerProps) => (_jsxs(As, { ...otherProps, ...triggerProps, "aria-label": label, "data-bspk": "fab", "data-container": container, "data-placement": placement, "data-position": container === 'page' ? 'fixed' : 'absolute', "data-round": iconOnly || undefined, "data-size": size, "data-variant": variant, onBlur: (e) => {
+    const button = (triggerProps) => (_jsxs(As, { ...otherProps, ...triggerProps, "aria-label": ariaLabel || label, "data-bspk": "fab", "data-container": container, "data-placement": placement, "data-position": container === 'page' ? 'fixed' : 'absolute', "data-round": iconOnly || undefined, "data-size": size, "data-variant": variant, onBlur: (e) => {
             triggerProps.onBlur?.();
             otherProps.onBlur?.(e);
         }, onFocus: (e) => {
@@ -32,8 +34,8 @@ export function Fab(props) {
             triggerProps.onMouseOver?.();
             otherProps.onMouseOver?.(e);
         }, ref: innerRef, children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-fab-icon": true, children: icon })), !iconOnly && _jsx("span", { "data-fab-label": true, children: label })] }));
-    if (toolTip || iconOnly)
-        return (_jsx(Tooltip, { label: toolTip || label, placement: "top", children: button }));
+    if (tooltip || iconOnly)
+        return (_jsx(Tooltip, { label: tooltip || label, placement: "top", children: button }));
     return button({});
 }
 //# sourceMappingURL=Fab.js.map

package/dist/components/Fab/Fab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAA+B,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAsCpE;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,GAAG,CAAuC,KAAsD;IAC5G,MAAM,EACF,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,UAAU,KACV,YAAY,gBACJ,KAAK,eACP,KAAK,oBACC,SAAS,oBACT,SAAS,mBACV,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,gBAC9C,QAAQ,IAAI,SAAS,eACtB,IAAI,kBACD,OAAO,EACrB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;YACxB,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,mCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,iDAAsB,KAAK,GAAQ,IAChD,CACR,CAAC;IAEF,IAAI,OAAO,IAAI,QAAQ;QACnB,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}
+{"version":3,"file":"Fab.js","sourceRoot":"","sources":["../../../src/components/Fab/Fab.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,CAAC;AACpB,OAAO,EAA+B,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAE,OAAO,EAAuB,MAAM,sBAAsB,CAAC;AAsCpE;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,GAAG,CAAuC,KAAsD;IAC5G,MAAM,EACF,YAAY,EAAE,SAAS,EACvB,IAAI,GAAG,OAAO,EACd,OAAO,GAAG,SAAS,EACnB,QAAQ,EAAE,YAAY,GAAG,KAAK,EAC9B,EAAE,EAAE,EAAE,GAAG,QAAQ,EACjB,SAAS,GAAG,cAAc,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,UAAU,EAChB,GAAG,KAAK,CAAC;IAEV,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,YAAY,KAAK,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC;IAEjD,MAAM,MAAM,GAAG,CAAC,YAAiC,EAAE,EAAE,CAAC,CAClD,MAAC,EAAE,OACK,UAAU,KACV,YAAY,gBACJ,SAAS,IAAI,KAAK,eACpB,KAAK,oBACC,SAAS,oBACT,SAAS,mBACV,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,gBAC9C,QAAQ,IAAI,SAAS,eACtB,IAAI,kBACD,OAAO,EACrB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;YACV,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC;YACxB,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACX,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC;YACzB,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QAC5B,CAAC,EACD,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE;YAChB,YAAY,CAAC,YAAY,EAAE,EAAE,CAAC;YAC9B,UAAU,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC,EACD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC;YAC7B,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC;QAChC,CAAC,EACD,GAAG,EAAE,QAAQ,aAEZ,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,mCAClB,IAAI,GACF,CACV,EACA,CAAC,QAAQ,IAAI,iDAAsB,KAAK,GAAQ,IAChD,CACR,CAAC;IAEF,IAAI,OAAO,IAAI,QAAQ;QACnB,OAAO,CACH,KAAC,OAAO,IAAC,KAAK,EAAE,OAAO,IAAI,KAAK,EAAE,SAAS,EAAC,KAAK,YAC5C,MAAM,GACD,CACb,CAAC;IAEN,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACtB,CAAC"}

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

@@ -2,3 +2,4 @@ import { FabProps } from './Fab';
 import { ComponentExample } from '-/utils/demo';
 export declare const presets: import("-/utils/demo").Preset<import("../Button").ButtonProps>[];
 export declare const FabExample: ComponentExample<FabProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Fab/FabExample.js

@@ -1,3 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SvgBolt } from '@bspk/icons/Bolt';
+import { Fab } from './Fab';
 import { ButtonExample } from '../Button/ButtonExample';
 export const presets = ButtonExample.presets || [];
 export const FabExample = {
@@ -23,4 +26,7 @@ export const FabExample = {
         },
     },
 };
+export const Usage = () => {
+    return (_jsx("div", { style: { width: '100%', height: 100 }, children: _jsx(Fab, { icon: _jsx(SvgBolt, {}), label: "Example label", placement: "bottom-right", variant: "neutral" }) }));
+};
 //# sourceMappingURL=FabExample.js.map

package/dist/components/Fab/FabExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"FabExample.js","sourceRoot":"","sources":["../../../src/components/Fab/FabExample.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,IAAI,EAAE,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAA+B;IAClD,cAAc,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;IACpE,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC7C,GAAG,MAAM;QACT,SAAS,EAAE;YACP,GAAG,MAAM,CAAC,SAAS;YACnB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;SACrB;KACJ,CAAC,CAAC;IACH,YAAY,EAAE;QACV,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,cAAc;KAC5B;IACD,QAAQ,EAAE;QACN,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,WAAW;SACrB;KACJ;CACJ,CAAC"}
+{"version":3,"file":"FabExample.js","sourceRoot":"","sources":["../../../src/components/Fab/FabExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAGlE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,IAAI,EAAE,CAAC;AAEnD,MAAM,CAAC,MAAM,UAAU,GAA+B;IAClD,cAAc,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE;IACpE,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;QAC7C,GAAG,MAAM;QACT,SAAS,EAAE;YACP,GAAG,MAAM,CAAC,SAAS;YACnB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,SAAS;SACrB;KACJ,CAAC,CAAC;IACH,YAAY,EAAE;QACV,SAAS,EAAE,OAAO;QAClB,SAAS,EAAE,cAAc;KAC5B;IACD,QAAQ,EAAE;QACN,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE;YACN,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,WAAW;SACrB;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,YACtC,KAAC,GAAG,IAAC,IAAI,EAAE,KAAC,OAAO,KAAG,EAAE,KAAK,EAAC,eAAe,EAAC,SAAS,EAAC,cAAc,EAAC,OAAO,EAAC,SAAS,GAAG,GACzF,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/Fab/fab.css

@@ -11,9 +11,6 @@
   z-index: var(--z-index-fab);
   box-shadow: var(--drop-shadow-float);
   border-radius: var(--radius-sm);
-  background: var(--variant-background);
-  color: var(--variant-foreground);
-  --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
 }
 [data-bspk=fab][data-container=page] {
   position: fixed;
@@ -75,6 +72,11 @@
   --variant-background: var(--surface-neutral-t1-base);
   --variant-foreground: var(--foreground-neutral-on-surface-variant-01);
 }
+[data-bspk=fab] {
+  background: var(--variant-background);
+  color: var(--variant-foreground);
+  --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
+}
 [data-pseudo=hover] > [data-bspk=fab], [data-bspk=fab]:hover {
   background: linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)), var(--variant-gradient);
 }

package/dist/components/Fab/fab.css.js

@@ -14,9 +14,6 @@ style.appendChild(document.createTextNode(`[data-bspk=fab] {
   z-index: var(--z-index-fab);
   box-shadow: var(--drop-shadow-float);
   border-radius: var(--radius-sm);
-  background: var(--variant-background);
-  color: var(--variant-foreground);
-  --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
 }
 [data-bspk=fab][data-container=page] {
   position: fixed;
@@ -78,6 +75,11 @@ style.appendChild(document.createTextNode(`[data-bspk=fab] {
   --variant-background: var(--surface-neutral-t1-base);
   --variant-foreground: var(--foreground-neutral-on-surface-variant-01);
 }
+[data-bspk=fab] {
+  background: var(--variant-background);
+  color: var(--variant-foreground);
+  --variant-gradient: linear-gradient(var(--variant-background), var(--variant-background));
+}
 [data-pseudo=hover] > [data-bspk=fab], [data-bspk=fab]:hover {
   background: linear-gradient(var(--interactions-brand-hover-opacity), var(--interactions-brand-hover-opacity)), var(--variant-gradient);
 }

package/dist/components/FileUpload/FileUpload.d.ts

@@ -81,7 +81,7 @@ export type FileUploadProps = Pick<FileUploadItemProps, 'cancelButtonLabel' | 'o
  *     };
  *
  * @name FileUpload
- * @phase UXReview
+ * @phase Stable
  */
 export declare function FileUpload({ dragAndDrop, multipleFiles, uploadSubtitle, maxFileSize, acceptedFileTypes, files, onUpload, onError, onCancel, cancelButtonLabel, }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUpload/FileUpload.js

@@ -32,7 +32,7 @@ const MB = 1048576;
  *     };
  *
  * @name FileUpload
- * @phase UXReview
+ * @phase Stable
  */
 export function FileUpload({ dragAndDrop = false, multipleFiles = false, uploadSubtitle, maxFileSize = 2, acceptedFileTypes = [], files = [], onUpload, onError, onCancel, cancelButtonLabel = 'Cancel', }) {
     const fileInputRef = useRef(null);

package/dist/components/FileUploadItem/FileUploadItem.d.ts

@@ -30,7 +30,7 @@ export type FileUploadItemProps = FileEntry & {
  *     />;
  *
  * @name FileUploadItem
- * @phase UXReview
+ * @phase Stable
  */
 export declare function FileUploadItem({ fileName, status, fileSize, onCancel, cancelButtonLabel: onCancelToolTip, progress, errorMessage, }: FileUploadItemProps): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/FileUploadItem/FileUploadItem.js

@@ -23,7 +23,7 @@ import { DEFAULT_ERROR_MESSAGE } from '../../utils/fileUploads';
  *     />;
  *
  * @name FileUploadItem
- * @phase UXReview
+ * @phase Stable
  */
 export function FileUploadItem({ fileName = '', status, fileSize, onCancel, cancelButtonLabel: onCancelToolTip = 'Cancel', progress = 0, errorMessage = DEFAULT_ERROR_MESSAGE, }) {
     const subText = [fileSizeFormat(fileSize), status].filter(Boolean).join(' • ');