@bspk/ui 1.3.11 → 1.3.17

package/dist/components/DatePicker/DatePicker.js

@@ -1,16 +1,14 @@
 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 { format, startOfToday } from 'date-fns';
+import { useMemo, useState } from 'react';
 import { Button } from '../Button';
-import { Calendar } from '../Calendar';
+import { Calendar, parseDate } 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.
@@ -23,27 +21,23 @@ const parsableDate = (dateString) => /^\d{1,2}\/\d{1,2}\/\d{4}$/.test(dateString
  *     import { useState } from 'react';
  *
  *     () => {
- *         const [date, setDate] = useState<Date | undefined>(new Date());
+ *         const [fieldDate, setFieldDate] = useState<string>();
  *
  *         return (
- *             <>
- *                 // standalone date picker example
- *                 <DatePicker aria-label="Date" name="date2" value={date} onChange={setDate} />
- *                 <br />
- *                 // date picker used within a field
+ *             <div style={{ width: 320 }}>
  *                 <Field>
  *                     <FieldLabel>Date</FieldLabel>
- *                     <DatePicker name="date1" value={date} onChange={setDate} />
+ *                     <DatePicker name="date1" onChange={setFieldDate} required value={fieldDate} />
  *                     <FieldDescription>The date picker allows you to select a date.</FieldDescription>
  *                 </Field>
- *             </>
+ *             </div>
  *         );
  *     };
  *
  * @name DatePicker
- * @phase UXReview
+ * @phase Stable
  */
-export function DatePicker({ value: valueProp, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Date picker', }) {
+export function DatePicker({ value, onChange, disabled, readOnly, closeCalendarOnChange = true, name, placeholder, invalid: invalidProp, required = false, size, id: idProp, 'aria-label': ariaLabel = 'Enter or choose date', }) {
     const { id, ariaDescribedBy, ariaErrorMessage, invalid } = useFieldInit({
         idProp,
         required,
@@ -51,84 +45,27 @@ export function DatePicker({ value: valueProp, onChange, disabled, readOnly, clo
         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',
+        placement: 'bottom-start',
         strategy: 'absolute',
         offsetOptions: 4,
-        refWidth: true,
+        refWidth: false,
     });
     useOutsideClick({
-        elements: [elements.floating, containerRef.current],
+        elements: [elements.floating],
         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);
-        }
-    };
+    const calendarId = `${id}-calendar`;
+    const activeDate = useMemo(() => parseDate(value) || startOfToday(), [value]);
     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" }) }) }))] }));
+        }, children: [_jsx(InputElement, { "aria-describedby": ariaDescribedBy || undefined, "aria-errormessage": ariaErrorMessage || undefined, "aria-label": ariaLabel, disabled: disabled || undefined, id: id, invalid: invalid || undefined, name: name, onChange: onChange, 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: typeof value === 'string' ? value : '' }), calendarVisible && (_jsx("div", { "aria-label": "Choose Date", "aria-modal": "true", "data-bspk": "calendar-popup", ref: (node) => elements.setFloating(node), role: "dialog", style: { ...floatingStyles }, children: _jsx(Calendar, { focusTrap: true, id: calendarId, onChange: (next) => {
+                        if (closeCalendarOnChange)
+                            setCalendarVisible(false);
+                        onChange(format(next, 'MM/dd/yyyy'));
+                    }, value: activeDate }) }))] }));
 }
 //# sourceMappingURL=DatePicker.js.map

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

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

@@ -1,3 +1,4 @@
 import { DatePickerProps } from '.';
 import { ComponentExample } from '-/utils/demo';
 export declare const DatePickerExample: ComponentExample<DatePickerProps>;
+export declare const Usage: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DatePicker/DatePickerExample.js

@@ -1,10 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker } from '.';
+import { Field, FieldLabel, FieldDescription } from '../Field';
 export const DatePickerExample = {
+    containerStyle: { width: 320, padding: 0 },
     defaultState: {
-        value: new Date(1985, 5, 3),
+        value: '06/03/1985',
         'aria-label': 'Select date',
     },
     disableProps: [],
-    sections: [],
     variants: false,
 };
+export const Usage = () => {
+    const [fieldDate, setFieldDate] = useState();
+    return (_jsx("div", { style: { width: 320 }, children: _jsxs(Field, { children: [_jsx(FieldLabel, { children: "Date" }), _jsx(DatePicker, { name: "date1", onChange: setFieldDate, required: true, value: fieldDate }), _jsx(FieldDescription, { children: "The date picker allows you to select a date." })] }) }));
+};
 //# sourceMappingURL=DatePickerExample.js.map

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

@@ -1 +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"}
+{"version":3,"file":"DatePickerExample.js","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAmB,MAAM,GAAG,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGzE,MAAM,CAAC,MAAM,iBAAiB,GAAsC;IAChE,cAAc,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE;IAC1C,YAAY,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,YAAY,EAAE,aAAa;KAC9B;IACD,YAAY,EAAE,EAAE;IAEhB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,EAAU,CAAC;IAErD,OAAO,CACH,cAAK,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACtB,MAAC,KAAK,eACF,KAAC,UAAU,uBAAkB,EAC7B,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,QAAC,KAAK,EAAE,SAAS,GAAI,EAC9E,KAAC,gBAAgB,+DAAgE,IAC7E,GACN,CACT,CAAC;AACN,CAAC,CAAC"}

package/dist/components/DatePicker/date-picker.css

@@ -7,5 +7,14 @@
 [data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
+[data-bspk=date-picker] [data-bspk=calendar-popup] {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--drop-shadow-float);
+  z-index: var(--z-index-dropdown);
+  width: fit-content;
+}
+[data-bspk=date-picker] [data-bspk=inline-alert] {
+  margin-top: var(--spacing-sizing-01);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/DatePicker/date-picker.css.js

@@ -10,6 +10,15 @@ style.appendChild(document.createTextNode(`[data-bspk=date-picker] {
 [data-bspk=date-picker] [data-bspk=input] {
   padding-right: 0;
 }
+[data-bspk=date-picker] [data-bspk=calendar-popup] {
+  border-radius: var(--radius-lg);
+  box-shadow: var(--drop-shadow-float);
+  z-index: var(--z-index-dropdown);
+  width: fit-content;
+}
+[data-bspk=date-picker] [data-bspk=inline-alert] {
+  margin-top: var(--spacing-sizing-01);
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));

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

@@ -7,7 +7,7 @@ export type DatePickerFieldProps = FormFieldControlProps<DatePickerProps>;
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/DatePickerField/DatePickerField.js

@@ -7,7 +7,7 @@ import { FormField } from '../FormField';
  * This component takes properties from the FormField and DatePicker components.
  *
  * @name DatePickerField
- * @phase UXReview
+ * @phase Stable
  *
  * @generated
  */

package/dist/components/Divider/Divider.d.ts

@@ -37,14 +37,14 @@ export type DividerProps = {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     <div>
- *         <p>Content above the divider</p>
+ *     <div style={{ width: 320 }}>
+ *         <ExamplePlaceholder>Content above the divider</ExamplePlaceholder>
  *         <Divider orientation="horizontal" />
- *         <p>Content below the divider</p>
+ *         <ExamplePlaceholder>Content below the divider</ExamplePlaceholder>
  *     </div>;
  *
  * @name Divider
- * @phase UXReview
+ * @phase Stable
  */
 export declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/Divider/Divider.js

@@ -16,14 +16,14 @@ const insetToVariable = (insetProp) => {
  * @example
  *     import { Divider } from '@bspk/ui/Divider';
  *
- *     <div>
- *         <p>Content above the divider</p>
+ *     <div style={{ width: 320 }}>
+ *         <ExamplePlaceholder>Content above the divider</ExamplePlaceholder>
  *         <Divider orientation="horizontal" />
- *         <p>Content below the divider</p>
+ *         <ExamplePlaceholder>Content below the divider</ExamplePlaceholder>
  *     </div>;
  *
  * @name Divider
- * @phase UXReview
+ * @phase Stable
  */
 export function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
     return (_jsx("div", { ...props, "aria-hidden": true, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({

package/dist/components/Divider/DividerExample.js

@@ -1,32 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
-export const presets = [];
+export const presets = [
+    {
+        label: 'Divider - Horizontal',
+        propState: {
+            orientation: 'horizontal',
+        },
+    },
+    {
+        label: 'Divider - Vertical',
+        propState: {
+            orientation: 'vertical',
+        },
+    },
+];
 export const DividerExample = {
     render: ({ props, Component }) => {
-        const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
+        const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: 300 };
         return (_jsxs("div", { style: {
                 display: 'flex',
                 flexDirection: props.orientation === 'vertical' ? 'row' : 'column',
                 alignItems: props.orientation === 'vertical' ? 'center' : 'stretch',
                 justifyContent: props.orientation === 'vertical' ? 'center' : 'stretch',
-                maxWidth: props.orientation !== 'vertical' ? '300px' : 'auto',
-            }, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
+                maxWidth: props.orientation !== 'vertical' ? 300 : 'auto',
+            }, children: [_jsx(ExamplePlaceholder, { style: { ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' } }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { style: { ...style, flexDirection: props.orientation !== 'vertical' ? 'row' : 'column' } })] }));
     },
-    presets: [
-        {
-            label: 'Divider - Horizontal',
-            designPattern: 'Horizontal thin line that separates grouped content in a list or other containers with the option to include a section/group label.',
-            propState: {
-                orientation: 'horizontal',
-            },
-        },
-        {
-            label: 'Divider - Vertical',
-            designPattern: 'Vertical thin line that separates grouped content or other visual elements within a container.',
-            propState: {
-                orientation: 'vertical',
-            },
-        },
-    ],
 };
 //# sourceMappingURL=DividerExample.js.map

package/dist/components/Divider/DividerExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B,EAAE,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACrG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;aAChE,aAED,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACpG,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IAAC,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAClG,CACT,CAAC;IACN,CAAC;IACD,OAAO,EAAE;QACL;YACI,KAAK,EAAE,sBAAsB;YAC7B,aAAa,EACT,qIAAqI;YACzI,SAAS,EAAE;gBACP,WAAW,EAAE,YAAY;aAC5B;SACJ;QACD;YACI,KAAK,EAAE,oBAAoB;YAC3B,aAAa,EACT,gGAAgG;YACpG,SAAS,EAAE;gBACP,WAAW,EAAE,UAAU;aAC1B;SACJ;KACJ;CACJ,CAAC"}
+{"version":3,"file":"DividerExample.js","sourceRoot":"","sources":["../../../src/components/Divider/DividerExample.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,OAAO,GAA2B;IAC3C;QACI,KAAK,EAAE,sBAAsB;QAC7B,SAAS,EAAE;YACP,WAAW,EAAE,YAAY;SAC5B;KACJ;IACD;QACI,KAAK,EAAE,oBAAoB;QAC3B,SAAS,EAAE;YACP,WAAW,EAAE,UAAU;SAC1B;KACJ;CACJ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;QAC7B,MAAM,KAAK,GACP,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;QACjG,OAAO,CACH,eACI,KAAK,EAAE;gBACH,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ;gBAClE,UAAU,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACnE,cAAc,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS;gBACvE,QAAQ,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;aAC5D,aAED,KAAC,kBAAkB,IACf,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,GACzF,EACF,KAAC,SAAS,OAAK,KAAK,GAAI,EACxB,KAAC,kBAAkB,IACf,KAAK,EAAE,EAAE,GAAG,KAAK,EAAE,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,GACzF,IACA,CACT,CAAC;IACN,CAAC;CACJ,CAAC"}

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":"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"}
+{"version":3,"file":"DrawerExample.js","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAe,MAAM,GAAG,CAAC;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,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,aAAa,GAAG,GAAG,EAAE;YACvB,MAAM,CAAC,eAAe,CAAC,CAAC;YACxB,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEF,MAAM,YAAY,GAAG,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,GAAI,CAAC;QAEtG,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,YAEA,YAAY,GACX,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,YAEA,YAAY,GACX,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,YACzF,YAAY,GACX,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;AAEH,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,EAAE;IACtB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACH,eAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,aACtC,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAI,EAC/D,KAAC,MAAM,IACH,WAAW,EAAE,IAAI,EACjB,MAAM,EAAC,gBAAgB,EACvB,EAAE,EAAC,WAAW,EACd,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,OAAO,YAEjB,KAAC,kBAAkB,IAAC,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAI,GAChE,IACP,CACT,CAAC;AACN,CAAC,CAAC"}

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 */