@bspk/ui 1.1.34 → 1.3.0

package/dist/components/Dialog/dialog.css.js

@@ -5,17 +5,23 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
   position: fixed;
   inset: 0;
   z-index: var(--z-index-dialog);
+  display: flex;
+  pointer-events: none;
 }
 [data-bspk=dialog] [data-dialog-box] {
+  pointer-events: all;
   text-align: start;
   position: relative;
-  border-radius: var(--radius-large);
   box-shadow: var(--drop-shadow-float);
   background: var(--surface-neutral-t1-base);
   color: var(--foreground-neutral-on-surface);
   max-height: calc(100vh - var(--spacing-sizing-24));
   z-index: 2;
   width: calc(100% - var(--spacing-sizing-08));
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 [data-bspk=dialog] [data-dialog-box] > :first-of-type {
   margin-top: 0;
@@ -43,83 +49,58 @@ style.appendChild(document.createTextNode(`[data-bspk=dialog] {
     width: 50%;
   }
 }
-[data-bspk=dialog] [data-dialog-backdrop] {
-  z-index: 1;
-  position: fixed;
-  inset: 0;
-  background-color: var(--background-scrim);
-  opacity: 0;
-  transition: opacity 0.3s;
-}
-[data-bspk=dialog][data-visibility=show] [data-dialog-backdrop] {
-  opacity: 1;
-}
 [data-bspk=dialog][data-placement=center] {
-  display: flex;
+  --box-animation-name: fade-in;
   justify-content: center;
   align-items: center;
 }
 [data-bspk=dialog][data-placement=center] [data-dialog-box] {
-  transition: opacity 1s;
-  opacity: 0;
+  border-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=center][data-visibility=show] [data-dialog-box] {
-  opacity: 1;
+[data-bspk=dialog][data-placement=bottom] {
+  --box-animation-name: placement-bottom;
+  justify-content: center;
+  align-items: end;
 }
 [data-bspk=dialog][data-placement=bottom] [data-dialog-box] {
-  position: absolute;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -100vh;
-  transition: bottom 0.3s;
-}
-[data-bspk=dialog][data-placement=bottom][data-visibility=show] [data-dialog-box] {
-  bottom: 0;
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+[data-bspk=dialog][data-placement=top] {
+  --box-animation-name: placement-top;
+  justify-content: center;
+  align-items: start;
 }
 [data-bspk=dialog][data-placement=top] [data-dialog-box] {
-  position: absolute;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  width: 600px;
-  left: 50%;
-  transform: translateX(-50%);
-  top: -100vh;
-  transition: top 0.3s;
-}
-[data-bspk=dialog][data-placement=top][data-visibility=show] [data-dialog-box] {
-  top: 0;
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=dialog][data-placement=left] {
+  --box-animation-name: placement-left;
+  justify-content: flex-start;
 }
 [data-bspk=dialog][data-placement=left] [data-dialog-box] {
-  position: absolute;
   max-height: unset;
   width: 280px;
   height: 100vh;
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-  left: -100vw;
-  transition: left 0.3s;
+  border-bottom-right-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=left][data-visibility=show] [data-dialog-box] {
-  left: 0;
+[data-bspk=dialog][data-placement=right] {
+  --box-animation-name: placement-right;
+  justify-content: flex-end;
 }
 [data-bspk=dialog][data-placement=right] [data-dialog-box] {
-  position: absolute;
   max-height: unset;
   width: 280px;
   height: 100vh;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  right: -100vw;
-  transition: right 0.3s;
+  border-bottom-left-radius: var(--radius-lg);
+  border-top-left-radius: var(--radius-lg);
 }
-[data-bspk=dialog][data-placement=right][data-visibility=show] [data-dialog-box] {
-  right: 0;
+[data-bspk=dialog] [data-width-full=true] {
+  width: 100%;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -1,5 +1,5 @@
-import { ElementProps } from '../../index.js';
 import './divider.scss';
+import { ElementProps } from '-/types/common';
 export type DividerProps = {
     /**
      * The orientation of the divider.
@@ -48,11 +48,7 @@ export type DividerProps = {
  *     }
  *
  * @name Divider
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function Divider({ padding, orientation, thickness, inset, ...props }: ElementProps<DividerProps, 'div'>): import("react/jsx-runtime").JSX.Element;
-declare namespace Divider {
-    var bspkName: string;
-}
-export { Divider };
+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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { cssWithVars } from '../../utils/cwv';
 import './divider.css.js';
+import { cssWithVars } from '../../utils/cwv';
 const insetToVariable = (insetProp) => {
     const inset = Number(insetProp);
     if (inset === undefined || inset === null || inset < 1 || inset > 12)
@@ -27,14 +27,12 @@ const insetToVariable = (insetProp) => {
  *     }
  *
  * @name Divider
- * @phase DesignReview
+ * @phase UXReview
  */
-function Divider({ padding = true, orientation = 'horizontal', thickness = 'light', inset = 0, ...props }) {
-    return (_jsx("div", { ...props, "aria-orientation": orientation, "data-bspk": "divider", "data-hide-padding": !padding || undefined, "data-orientation": orientation, "data-thickness": thickness, role: "separator", style: cssWithVars({
+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({
             ...props.style,
             '--inset': insetToVariable(inset),
         }) }));
 }
-Divider.bspkName = 'Divider';
-export { Divider };
 //# sourceMappingURL=Divider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,gBAAgB,CAAC;AA+BxB,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,SAAS,OAAO,CAAC,EACb,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,sBACS,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC;AAED,OAAO,CAAC,QAAQ,GAAG,SAAS,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":";AAAA,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AA+B1C,MAAM,eAAe,GAAG,CAAC,SAA0B,EAAE,EAAE;IACnD,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IAChC,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,GAAG,EAAE;QAAE,OAAO,KAAK,CAAC;IACnF,OAAO,wBAAwB,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,OAAO,CAAC,EACpB,OAAO,GAAG,IAAI,EACd,WAAW,GAAG,YAAY,EAC1B,SAAS,GAAG,OAAO,EACnB,KAAK,GAAG,CAAC,EACT,GAAG,KAAK,EACwB;IAChC,OAAO,CACH,iBACQ,KAAK,2CAES,WAAW,eACnB,SAAS,uBACA,CAAC,OAAO,IAAI,SAAS,sBACtB,WAAW,oBACb,SAAS,EACzB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,WAAW,CAAC;YACf,GAAG,KAAK,CAAC,KAAK;YACd,SAAS,EAAE,eAAe,CAAC,KAAK,CAAC;SACpC,CAAC,GACJ,CACL,CAAC;AACN,CAAC"}

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

@@ -1,2 +1,4 @@
-import { ComponentExample } from '../../utils/demo';
-export declare const DividerExample: ComponentExample;
+import { DividerProps } from './Divider';
+import { ComponentExample, Preset } from '-/utils/demo';
+export declare const presets: Preset<DividerProps>[];
+export declare const DividerExample: ComponentExample<DividerProps>;

package/dist/components/Divider/DividerExample.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExamplePlaceholder } from '../ExamplePlaceholder';
+export const presets = [];
 export const DividerExample = {
     render: ({ props, Component }) => {
         const style = props.orientation === 'vertical' ? { height: 300, width: 100 } : { height: 100, width: '300px' };
@@ -11,5 +12,6 @@ export const DividerExample = {
                 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 })] }));
     },
+    presets,
 };
 //# 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":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAGrE,MAAM,CAAC,MAAM,cAAc,GAAqB;IAC5C,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;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,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;CACV,CAAC"}

package/dist/components/Divider/divider.css

@@ -6,7 +6,7 @@
   place-content: stretch stretch;
   margin: 0;
   padding: 0;
-  content: "hello";
+  content: "";
   --length: calc(100% - var(--inset) * 2);
 }
 [data-bspk=divider], [data-bspk=divider][data-thickness=light] {
@@ -16,19 +16,15 @@
 [data-bspk=divider][data-thickness=heavy] {
   --line-thickness: 2px;
   --padding: var(--spacing-sizing-04);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=divider], [data-bspk=divider][data-orientation=horizontal] {
-  width: unset;
-  min-height: unset;
-  height: var(--line-thickness);
+  min-height: var(--line-thickness);
   min-width: var(--length);
   margin: var(--padding) var(--inset);
 }
 [data-bspk=divider][data-orientation=vertical] {
-  height: unset;
-  min-width: unset;
-  width: var(--line-thickness);
+  min-width: var(--line-thickness);
   min-height: var(--length);
   margin: var(--inset) var(--padding);
 }

package/dist/components/Divider/divider.css.js

@@ -9,7 +9,7 @@ style.appendChild(document.createTextNode(`[data-bspk=divider] {
   place-content: stretch stretch;
   margin: 0;
   padding: 0;
-  content: "hello";
+  content: "";
   --length: calc(100% - var(--inset) * 2);
 }
 [data-bspk=divider], [data-bspk=divider][data-thickness=light] {
@@ -19,19 +19,15 @@ style.appendChild(document.createTextNode(`[data-bspk=divider] {
 [data-bspk=divider][data-thickness=heavy] {
   --line-thickness: 2px;
   --padding: var(--spacing-sizing-04);
-  border-radius: var(--radius-circular);
+  border-radius: var(--radius-full);
 }
 [data-bspk=divider], [data-bspk=divider][data-orientation=horizontal] {
-  width: unset;
-  min-height: unset;
-  height: var(--line-thickness);
+  min-height: var(--line-thickness);
   min-width: var(--length);
   margin: var(--padding) var(--inset);
 }
 [data-bspk=divider][data-orientation=vertical] {
-  height: unset;
-  min-width: unset;
-  width: var(--line-thickness);
+  min-width: var(--line-thickness);
   min-height: var(--length);
   margin: var(--inset) var(--padding);
 }
@@ -42,4 +38,3 @@ style.appendChild(document.createTextNode(`[data-bspk=divider] {
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

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

@@ -0,0 +1,75 @@
+import './drawer.scss';
+import { ReactNode } from 'react';
+import { DialogProps } from '-/components/Dialog';
+export type DrawerProps = Pick<DialogProps, 'container' | 'disableFocusTrap' | 'id' | 'innerRef' | 'owner'> & {
+    /** Drawer header. */
+    header?: string;
+    /**
+     * The content of the drawer.
+     *
+     * @required
+     */
+    children: ReactNode;
+    /**
+     * Controls whether the drawer is open.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * When true the drawer is temporarily displayed above all other content until closed.
+     *
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * If true, a close button will be displayed in the drawer header.
+     *
+     * @default false
+     */
+    closeButton?: boolean;
+    /**
+     * The placement of the drawer.
+     *
+     * @default right
+     */
+    placement?: 'bottom' | 'left' | 'right' | 'top';
+    /** Optional callback when the drawer requests to close. */
+    onClose?: () => void;
+};
+/**
+ * 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';
+ *
+ *     export function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *                 <Drawer
+ *                     id="exampleId"
+ *                     onClose={() => setOpen(false)}
+ *                     open={open}
+ *                     placement="right"
+ *                     modal={false}
+ *                     header="Example Drawer"
+ *                     closeButton={true}
+ *                 >
+ *                     Example Drawer
+ *                 </Drawer>
+ *             </>
+ *         );
+ *     }
+ *
+ * @name Drawer
+ * @phase UXReview
+ */
+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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+ *
+ *     export function Example() {
+ *         const [open, setOpen] = React.useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Open Drawer" onClick={() => setOpen(true)} />
+ *                 <Drawer
+ *                     id="exampleId"
+ *                     onClose={() => setOpen(false)}
+ *                     open={open}
+ *                     placement="right"
+ *                     modal={false}
+ *                     header="Example Drawer"
+ *                     closeButton={true}
+ *                 >
+ *                     Example Drawer
+ *                 </Drawer>
+ *             </>
+ *         );
+ *     }
+ *
+ * @name Drawer
+ * @phase UXReview
+ */
+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] }));
+    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 }));
+}
+//# sourceMappingURL=Drawer.js.map

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

@@ -0,0 +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;AAEH,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"}

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

@@ -0,0 +1,4 @@
+import { DrawerProps } from '.';
+import { ComponentExampleFn, Preset } from '-/utils/demo';
+export declare const presets: Preset<DrawerProps>[];
+export declare const DrawerExample: ComponentExampleFn<DrawerProps>;

package/dist/components/Drawer/DrawerExample.js

@@ -0,0 +1,47 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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, {}) },
+    },
+    {
+        label: 'Right Responsive',
+        propState: { closeButton: true, modal: false, placement: 'right', children: _jsx(_Fragment, {}) },
+    },
+];
+export const DrawerExample = ({ action }) => ({
+    containerStyle: {
+        height: '300px',
+        width: '100%',
+        padding: 0,
+        overflow: 'hidden', // hides box-shadow of drawer
+    },
+    presets,
+    render: ({ props, preset, setState, Component }) => {
+        if (!preset)
+            return null;
+        const label = 'Open Drawer';
+        const handleOnClose = () => {
+            action('Drawer closed');
+            setState({ open: false });
+        };
+        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 }) }) })] }));
+            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!"] }) })] }));
+            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!"] }) })] }));
+        }
+    },
+    variants: false,
+});
+//# sourceMappingURL=DrawerExample.js.map

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

@@ -0,0 +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,mBAAK,EAAE;KACrF;IACD;QACI,KAAK,EAAE,kBAAkB;QACzB,SAAS,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,mBAAK,EAAE;KACtF;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"}

package/dist/components/Drawer/drawer.css

@@ -0,0 +1,56 @@
+[data-bspk=drawer] {
+  padding: var(--spacing-sizing-03);
+  color: var(--foreground-neutral-on-surface);
+  background: var(--surface-neutral-t1-base);
+}
+[data-bspk=drawer][data-no-portal] {
+  box-shadow: var(--drop-shadow-float);
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=top] {
+  --box-animation-name: placement-top;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=right] {
+  --box-animation-name: placement-right;
+  position: absolute;
+  right: 0;
+  height: 100%;
+  border-top-left-radius: var(--radius-lg);
+  border-bottom-left-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=bottom] {
+  --box-animation-name: placement-bottom;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=left] {
+  --box-animation-name: placement-left;
+  position: absolute;
+  left: 0;
+  height: 100%;
+  border-top-right-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer] [data-drawer-header] {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=drawer] [data-drawer-header][data-drawer-close-only=true] {
+  justify-content: flex-end;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -0,0 +1,61 @@
+/** * 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=drawer] {
+  padding: var(--spacing-sizing-03);
+  color: var(--foreground-neutral-on-surface);
+  background: var(--surface-neutral-t1-base);
+}
+[data-bspk=drawer][data-no-portal] {
+  box-shadow: var(--drop-shadow-float);
+  animation-name: var(--box-animation-name);
+  animation-duration: 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=top] {
+  --box-animation-name: placement-top;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  border-bottom-left-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=right] {
+  --box-animation-name: placement-right;
+  position: absolute;
+  right: 0;
+  height: 100%;
+  border-top-left-radius: var(--radius-lg);
+  border-bottom-left-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=bottom] {
+  --box-animation-name: placement-bottom;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer][data-no-portal][data-persistent-placement=left] {
+  --box-animation-name: placement-left;
+  position: absolute;
+  left: 0;
+  height: 100%;
+  border-top-right-radius: var(--radius-lg);
+  border-bottom-right-radius: var(--radius-lg);
+}
+[data-bspk=drawer] [data-drawer-header] {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sizing-04);
+}
+[data-bspk=drawer] [data-drawer-header][data-drawer-close-only=true] {
+  justify-content: flex-end;
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

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

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

package/dist/components/Drawer/index.js

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

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

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

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { CallToActionButton } from '../../index.js';
+import { CallToActionButton } from '-/types/common';
 export type EmptyStateProps = {
     /** The image or icon to display in the empty state. */
     children?: ReactNode;
@@ -44,11 +44,7 @@ export type EmptyStateProps = {
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-declare function EmptyState({ children, header, body, callToAction, bodyAlign }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;
-declare namespace EmptyState {
-    var bspkName: string;
-}
-export { EmptyState };
+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

@@ -17,14 +17,12 @@ import { Txt } from '../Txt';
  *     }
  *
  * @name EmptyState
- * @phase DesignReview
+ * @phase UXReview
  */
-function EmptyState({ children, header, body, callToAction, bodyAlign = 'center' }) {
+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" }))] }));
 }
-EmptyState.bspkName = 'EmptyState';
-export { EmptyState };
 //# sourceMappingURL=EmptyState.js.map