@bspk/ui 1.3.18 → 1.3.20

package/src/styles/base.scss

@@ -310,58 +310,6 @@ body[data-bspk] {
     }
 }
 
-@keyframes fade-in {
-    0% {
-        opacity: 0;
-        transform: translate(var(--spacing-sizing-01), var(--spacing-sizing-01));
-    }
-
-    100% {
-        opacity: 1;
-        transform: translate(0, 0);
-    }
-}
-
-@keyframes placement-left {
-    0% {
-        transform: translateX(-100vw);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-
-@keyframes placement-right {
-    0% {
-        transform: translateX(100vw);
-    }
-
-    100% {
-        transform: translateX(0);
-    }
-}
-
-@keyframes placement-top {
-    0% {
-        transform: translateY(-100vh);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
-
-@keyframes placement-bottom {
-    0% {
-        transform: translateY(100vh);
-    }
-
-    100% {
-        transform: translateY(0);
-    }
-}
-
 [data-hidden] {
     display: none !important;
 }

package/src/types/meta.ts

@@ -72,6 +72,12 @@ export type TypeProperty = {
     arrayType?: string;
 };
 
+export type BlockConfig = {
+    name: string;
+    component: string;
+    pattern: string;
+};
+
 export type ComponentMeta = BaseMeta & {
     slug: string;
     dependencies: string[];
@@ -83,6 +89,7 @@ export type ComponentMeta = BaseMeta & {
     };
     phase: ComponentPhase;
     generated?: boolean;
+    blockConfigs?: BlockConfig[];
 };
 
 export type UtilityMeta = BaseMeta & {

package/src/utils/blocks.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { ExamplePlaceholder } from '-/components/ExamplePlaceholder';
+
+export const Slot = ExamplePlaceholder;
+
+function BlockExample(props: { name: string; children: ReactNode }) {
+    return {
+        ...props,
+        type: '',
+        props: {},
+        key: '',
+    };
+}
+
+BlockExample.Pattern = (props: { children: ReactNode }) => {
+    return {
+        ...props,
+        type: '',
+        props: {},
+        key: '',
+    };
+};
+
+BlockExample.Component = BlockExample.Pattern;
+
+export { BlockExample };

package/src/utils/demo.ts

@@ -1,6 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
+import { CSSProperties, isValidElement, ReactNode } from 'react';
+
 import { AlertVariant, DataProps } from '-/types/common';
-import { ComponentMeta, TypeProperty } from '-/types/meta';
+import { BlockConfig, ComponentMeta, TypeProperty } from '-/types/meta';
 
 export type DemoAction = (message: string, variant?: AlertVariant) => void;
 
@@ -43,11 +44,13 @@ export type ComponentVariantOverride<Props> = {
 };
 
 export type ComponentPageSection<Props = Record<string, unknown>> = {
-    title: string;
-    content: (params: {
+    title?: string;
+    description?: string;
+    content?: (params: {
         Component?: React.ComponentType<Props>;
         props: Props;
         CodeExample: CodeExample;
+        CodePlayground: CodePlayground;
         Syntax: Syntax;
     }) => React.ReactNode;
     location?: 'afterDemo' | 'beforeDemo';
@@ -62,7 +65,10 @@ export type ComponentVariantOverrides<Props = Record<string, unknown>, PropName
     [Key in PropName]?: ComponentVariantOverride<Props> | false;
 };
 
-export type ComponentExample<Props = Record<string, unknown>, PropName extends keyof Props = keyof Props> = {
+export type ComponentExample<
+    Props extends Record<string, unknown> = Record<string, unknown>,
+    PropName extends keyof Props = keyof Props,
+> = {
     /**
      * The style of the wrapping component.
      *
@@ -118,6 +124,14 @@ export type ComponentExample<Props = Record<string, unknown>, PropName extends k
      * @default false
      */
     hideDemo?: boolean;
+    /**
+     * Hide the usage section entirely.
+     *
+     * @default false
+     */
+    hideUsage?: boolean;
+    /** Block Configs */
+    blockConfigs?: BlockConfig[];
 };
 
 export type Syntax = (params: {
@@ -128,20 +142,29 @@ export type Syntax = (params: {
 }) => React.ReactNode;
 
 export type CodeExample = (
-    params: DataProps & {
-        containerStyle?: CSSProperties;
-        children: ReactNode;
-        accessibility?: boolean;
-        code?: {
-            language?: PrettyParser | undefined;
-            str: string;
-        };
-    },
-) => React.ReactNode;
+    params: DataProps &
+        any & {
+            containerStyle?: CSSProperties;
+            children: ReactNode;
+            accessibility?: boolean;
+            code?: {
+                language?: PrettyParser | undefined;
+                str: string;
+            };
+            style?: CSSProperties;
+        },
+) => JSX.Element;
+
+export type CodePlaygroundProps = {
+    defaultCode: string;
+    defaultShowCode?: boolean;
+};
+
+export type CodePlayground = (params: CodePlaygroundProps) => JSX.Element;
 
 export type PrettyParser = 'css' | 'estree' | 'html' | 'scss' | 'typescript';
 
-export type ComponentExampleFn<Props = Record<string, unknown>> = (params: {
+export type ComponentExampleFn<Props extends Record<string, unknown> = Record<string, unknown>> = (params: {
     setState: DemoSetState<Props>;
     action: DemoAction;
     componentsMeta: ComponentMeta[];
@@ -160,11 +183,15 @@ export type Preset<Props> = {
     /** The props of the component. This is used to set props of the component. These values can't be changed in the UI. */
     propState: Omit<Props, OnHandlers> & Record<OnHandlers, unknown>;
     /**
-     * Hide the demo for this preset.
+     * Hide the demo option for this preset.
      *
      * @default false
      */
-    hideDemo?: boolean;
+    hideDemoOption?: boolean;
+    /** Hide the playground for this preset. */
+    hidePlayground?: boolean;
+    /** Preset used for block examples. */
+    block?: boolean;
 };
 
 export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {
@@ -174,3 +201,99 @@ export type DemoPreset<P = Record<string, unknown>> = Preset<P> & {
 export function createUid(prefix: string = 'uid'): string {
     return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
 }
+
+export function reactElementToString(element: React.ReactElement): string {
+    if (!isReactElement(element)) return '';
+    const subComponentName = typeof element.type === 'string' ? element.type : element.type.name || 'Component';
+    return componentToString(subComponentName, element.props);
+}
+
+export function componentToString<Props extends Record<string, any> = Record<string, any>>(
+    componentName: string,
+    propState: Props,
+    propsMeta?: TypePropertyDemo[],
+): string {
+    const propsString = Object.entries(propState)
+        .map(([key, value]) => {
+            const propMeta = propsMeta?.find((prop) => prop.name === key);
+
+            let formattedValue;
+            if (typeof value === 'string') {
+                formattedValue = `"${value}"`;
+                if (propMeta?.type === 'BspkIcon') formattedValue = `{<Svg${value} />}`;
+            } else if (typeof value === 'boolean' || typeof value === 'number') {
+                formattedValue = `{${value}}`;
+            } else if (isReactElement(value)) {
+                const subComponentName = typeof value.type === 'string' ? value.type : value.type.name || 'Component';
+                formattedValue = `{${componentToString(subComponentName, value.props)}}`;
+            } else if (Array.isArray(value)) {
+                return ` ${key}={[${value
+                    .map((item) => (isValidElement(item) ? convertReactToCodeString(item) : '...')) // Simplified for brevity
+                    .join(', ')}]}`;
+            } else if (typeof value === 'object') {
+                formattedValue = `{${JSON.stringify(value, null, 2)}}`;
+            } else if (value === null) {
+                formattedValue = '{null}';
+            } else if (value === undefined) {
+                return ''; // skip undefined props
+            } else {
+                formattedValue = `{${value.toString()}}`;
+            }
+            return `    ${key}=${formattedValue}`;
+        })
+        .filter(Boolean)
+        .join('\n');
+
+    return `<${componentName}\n${propsString}\n/>`;
+}
+
+function isReactElement(value: any): boolean {
+    return (
+        typeof value === 'object' &&
+        value !== null &&
+        (value.$$typeof === Symbol.for('react.element') ||
+            (value.type && (typeof value.type === 'string' || typeof value.type === 'function')))
+    );
+}
+
+export function kebabCase(str: string): string {
+    return (
+        str
+            .normalize('NFD') // Normalize to decompose accents
+            .replace(/[\u0300-\u036f&()']/g, '') // Remove accents
+            // Handle camelCase by inserting hyphens between lowercase and uppercase
+            .replace(/([a-zA-Z])([A-Z][a-z])/g, '$1-$2')
+            // do it again for the next uppercase letter
+            .replace(/([a-zA-Z])([A-Z][a-z])/g, '$1-$2')
+            .replace(/[^a-zA-Z0-9]+/g, '-') // Replace non-alphanumeric characters with hyphens
+            .replace(/^-+|-+$/g, '') // Trim leading or trailing hyphens
+            .replace(/--+/g, '-') // Replace multiple hyphens with a single hyphen
+            .toLowerCase()
+    ); // Convert to lowercase
+}
+
+export function convertReactToCodeString(element: React.ReactElement): string {
+    return `<${element.type}${Object.entries(element.props)
+        .map(([key, value]) => {
+            if (typeof value === 'string') {
+                return ` ${key}="${value}"`;
+            } else if (typeof value === 'number' || typeof value === 'boolean') {
+                return ` ${key}={${value}}`;
+            } else if (typeof value === 'function') {
+                return ` ${key}={() => {}}`;
+            } else if (isValidElement(value)) {
+                return ` ${key}={${convertReactToCodeString(value)}}`;
+            } else if (Array.isArray(value)) {
+                return ` ${key}={[${value
+                    .map((item) => (isValidElement(item) ? convertReactToCodeString(item) : '...')) // Simplified for brevity
+                    .join(', ')}]}`;
+            } else if (value === null) {
+                return ` ${key}={null}`;
+            } else if (value === undefined) {
+                return ` ${key}={undefined}`;
+            } else {
+                return ` ${key}={${JSON.stringify(value)}}`;
+            }
+        })
+        .join('')}>${element.props.children ? '...' : ''}</${element.type}>`;
+}

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

@@ -1,73 +0,0 @@
-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 { Button } from '@bspk/ui/Button';
- *     import { Drawer } from '@bspk/ui/Drawer';
- *
- *     () => {
- *         const [open, setOpen] = useState(false);
- *
- *         return (
- *             <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"
- *                 >
- *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
- *                 </Drawer>
- *             </div>
- *         );
- *     };
- *
- * @name Drawer
- * @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

@@ -1,46 +0,0 @@
-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';
-/**
- * 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 { Button } from '@bspk/ui/Button';
- *     import { Drawer } from '@bspk/ui/Drawer';
- *
- *     () => {
- *         const [open, setOpen] = useState(false);
- *
- *         return (
- *             <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"
- *                 >
- *                     <ExamplePlaceholder label="Drawer Content" style={{ flexGrow: 1 }} />
- *                 </Drawer>
- *             </div>
- *         );
- *     };
- *
- * @name Drawer
- * @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("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 }));
-}
-//# sourceMappingURL=Drawer.js.map

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

@@ -1 +0,0 @@
-{"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

@@ -1,5 +0,0 @@
-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,53 +0,0 @@
-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',
-        propState: { closeButton: true, modal: false, placement: 'left', children: null },
-    },
-    {
-        label: 'Right Responsive',
-        propState: { closeButton: true, modal: false, placement: 'right', children: null },
-    },
-];
-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 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: 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: 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: 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 +0,0 @@
-{"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

@@ -1,62 +0,0 @@
-[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);
-  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;
-  top: 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;
-}
-[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

@@ -1,67 +0,0 @@
-/** * 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);
-  display: flex;
-  flex-direction: column;
-}
-[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;
-  top: 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;
-}
-[data-bspk=drawer] [data-drawer-header] [data-drawer-title] {
-  font: var(--heading-h4);
-}
-
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
-`));
-document.head.appendChild(style);

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

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

package/dist/components/Drawer/index.js

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

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

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