@bspk/ui 1.3.3 → 1.3.5

package/dist/components/Snackbar/Snackbar.d.ts

@@ -1,27 +1,85 @@
 import './snackbar.scss';
-import { SnackbarData } from '-/utils/snackbarContext';
-export type SnackbarProps = {
-    /** Text to be shown in the snackbar */
+import { ReactNode } from 'react';
+import { CommonProps, SetRef } from '-/types/common';
+export type SnackbarProps = CommonProps<'id'> & {
+    /**
+     * Text to be shown in the snackbar
+     *
+     * @required
+     */
     text: string;
-    /** Optional action button */
-    button?: SnackbarData['button'];
-    /** Callback when the snackbar is dismissed */
+    /**
+     * Whether to show a close button on the snackbar.
+     *
+     * Since there is no default timeout, this is true by default. You can provide a timeout to auto-dismiss the
+     * snackbar in addition to the close button.
+     *
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Label for the close button.
+     *
+     * @default Dismiss
+     */
+    closeButtonLabel?: string;
+    /**
+     * The icon of the button.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when the snackbar is dismissed
+     *
+     * @required
+     */
     onClose: () => void;
+    /** Content to be rendered inside the snack bar provider, the snackbar trigger element. */
+    /**
+     * Time in milliseconds after which the snackbar will auto dismiss.
+     *
+     * If no timeout is provided, and closeButton is set to false the snackbar will not be dismissable.
+     */
+    timeout?: number;
+    /**
+     * If the snackbar is open or not.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /** A ref to the snackbar element. */
+    innerRef?: SetRef<HTMLDivElement>;
+    /**
+     * If focus trapping should be disabled. Generally this should not be disabled as snackbars should always trap
+     * focus.
+     *
+     * @default false
+     */
+    disableFocusTrap?: boolean;
 };
 /**
- * Snackbars are intended to provide feedback about an action without interrupting the customer experience. NOTE: While
- * they can be imported and used directly, they are intended to be used via the SnackbarProvider and the
- * useSnackbarContext hook.
+ * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
+ * experience.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { useState } from 'react';
  *
- *     function Example() {
- *         return <Snackbar text="Something happened!" />;
+ *     function ExampleComponent(props) {
+ *         const [snackbarOpen, setSnackbarOpen] = useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
+ *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *             </>
+ *         );
  *     }
  *
  * @name Snackbar
- * @phase Utility
+ *
+ * @phase UXReview
  */
-export declare function Snackbar({ text, button, onClose }: SnackbarProps): import("react/jsx-runtime").JSX.Element;
-/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+export declare function Snackbar({ id: propId, text, timeout, closeButton, closeButtonLabel, icon, onClose, open, innerRef, disableFocusTrap, }: SnackbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/Snackbar/Snackbar.js

@@ -1,23 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './snackbar.css.js';
+import { FocusTrap } from 'focus-trap-react';
+import { isValidElement, useEffect, useRef } from 'react';
 import { Button } from '../Button';
-import { Txt } from '../Txt';
+import { Portal } from '../Portal';
+import { Truncated } from '../Truncated';
+import { useId } from '../../hooks/useId';
 /**
- * Snackbars are intended to provide feedback about an action without interrupting the customer experience. NOTE: While
- * they can be imported and used directly, they are intended to be used via the SnackbarProvider and the
- * useSnackbarContext hook.
+ * Snackbars are intended to provide feedback about an action. Because of focus trap these will interrupt the customer
+ * experience.
  *
  * @example
  *     import { Snackbar } from '@bspk/ui/Snackbar';
+ *     import { Button } from '@bspk/ui/Button';
+ *     import { useState } from 'react';
  *
- *     function Example() {
- *         return <Snackbar text="Something happened!" />;
+ *     function ExampleComponent(props) {
+ *         const [snackbarOpen, setSnackbarOpen] = useState(false);
+ *
+ *         return (
+ *             <>
+ *                 <Button label="Show snackbar" onClick={() => setSnackbarOpen(true)} size="medium" title="Snackbar" />
+ *                 <Snackbar text="I am an example." open={snackbarOpen} onClose={() => setSnackbarOpen(false)} />
+ *             </>
+ *         );
  *     }
  *
  * @name Snackbar
- * @phase Utility
+ *
+ * @phase UXReview
  */
-export function Snackbar({ text, button, onClose }) {
-    return (_jsxs("span", { "data-bspk": "snackbar", role: "alert", children: [_jsx(Txt, { variant: "body-small", children: text }), button && (_jsx(Button, { label: button.label, onClick: button.onClick === 'close' ? onClose : button.onClick, variant: "tertiary", children: button.label }))] }));
+export function Snackbar({ id: propId, text, timeout, closeButton = true, closeButtonLabel = 'Dismiss', icon, onClose, open = false, innerRef, disableFocusTrap = false, }) {
+    const id = useId(propId);
+    const boxRef = useRef(null);
+    useEffect(() => {
+        if (open && timeout) {
+            const timer = setTimeout(() => {
+                onClose?.();
+            }, timeout);
+            return () => clearTimeout(timer);
+        }
+        return undefined;
+    }, [open, timeout, onClose]);
+    if (!open)
+        return null;
+    return (_jsx(Portal, { children: _jsx("div", { "aria-live": "off", "data-bspk": "snackbar", id: id, ref: innerRef, children: _jsx(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: {
+                    clickOutsideDeactivates: true,
+                    fallbackFocus: () => boxRef.current,
+                }, children: _jsxs("div", { "data-snackbar-content": true, role: "alert", children: [_jsxs("div", { "data-snackbar-icon-text": true, children: [!!icon && isValidElement(icon) && (_jsx("span", { "aria-hidden": true, "data-snackbar-icon": true, children: icon })), _jsx(Truncated, { "data-label": true, children: text })] }), closeButton && _jsx(Button, { label: closeButtonLabel, onClick: onClose, variant: "tertiary" })] }, id) }) }) }));
 }
 //# sourceMappingURL=Snackbar.js.map

package/dist/components/Snackbar/Snackbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AAYvC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAiB;IAC7D,OAAO,CACH,6BAAgB,UAAU,EAAC,IAAI,EAAC,OAAO,aACnC,KAAC,GAAG,IAAC,OAAO,EAAC,YAAY,YAAE,IAAI,GAAO,EAErC,MAAM,IAAI,CACP,KAAC,MAAM,IACH,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAC9D,OAAO,EAAC,UAAU,YAEjB,MAAM,CAAC,KAAK,GACR,CACZ,IACE,CACV,CAAC;AACN,CAAC"}
+{"version":3,"file":"Snackbar.js","sourceRoot":"","sources":["../../../src/components/Snackbar/Snackbar.tsx"],"names":[],"mappings":";AAAA,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAa,cAAc,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AA8DtC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,QAAQ,CAAC,EACrB,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,OAAO,EACP,WAAW,GAAG,IAAI,EAClB,gBAAgB,GAAG,SAAS,EAC5B,IAAI,EACJ,OAAO,EACP,IAAI,GAAG,KAAK,EACZ,QAAQ,EACR,gBAAgB,GAAG,KAAK,GACZ;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IACzB,MAAM,MAAM,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACnD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,IAAI,IAAI,OAAO,EAAE,CAAC;YAClB,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC1B,OAAO,EAAE,EAAE,CAAC;YAChB,CAAC,EAAE,OAAO,CAAC,CAAC;YACZ,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,SAAS,CAAC;IACrB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,OAAO,CACH,KAAC,MAAM,cACH,2BAAe,KAAK,eAAW,UAAU,EAAC,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,YAC3D,KAAC,SAAS,IACN,MAAM,EAAE,CAAC,gBAAgB,EACzB,gBAAgB,EAAE;oBACd,uBAAuB,EAAE,IAAI;oBAC7B,aAAa,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ;iBACvC,YAED,8CAAoC,IAAI,EAAC,OAAO,aAC5C,2DACK,CAAC,CAAC,IAAI,IAAI,cAAc,CAAC,IAAI,CAAC,IAAI,CAC/B,8BAAmB,IAAI,wCAClB,IAAI,GACF,CACV,EACD,KAAC,SAAS,kCAAa,IAAI,GAAa,IACtC,EACL,WAAW,IAAI,KAAC,MAAM,IAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,UAAU,GAAG,KAT5D,EAAE,CAU5B,GACE,GACV,GACD,CACZ,CAAC;AACN,CAAC"}

package/dist/components/Snackbar/SnackbarExample.d.ts

@@ -1,3 +1,3 @@
-import { SnackbarProps } from '.';
+import { SnackbarProps } from './Snackbar';
 import { ComponentExample } from '-/utils/demo';
 export declare const SnackbarExample: ComponentExample<SnackbarProps>;

package/dist/components/Snackbar/SnackbarExample.js

@@ -1,11 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Snackbar } from './Snackbar';
+import { Button } from '../Button';
 export const SnackbarExample = {
     containerStyle: { width: '100%' },
     defaultState: {},
     disableProps: [],
     presets: [],
-    render: ({ props, Component }) => _jsx(Component, { ...props }),
+    render: ({ props, setState }) => (_jsxs(_Fragment, { children: [_jsx(Snackbar, { ...props, onClose: () => setState({ open: false }) }), _jsx(Button, { label: "open snackbar", onClick: () => setState({ open: true }), size: "medium", title: "Snackbar" })] })),
     sections: [],
-    variants: {},
+    variants: false,
 };
 //# sourceMappingURL=SnackbarExample.js.map

package/dist/components/Snackbar/SnackbarExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;IAC1D,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,EAAE;CACf,CAAC"}
+{"version":3,"file":"SnackbarExample.js","sourceRoot":"","sources":["../../../src/components/Snackbar/SnackbarExample.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAG7C,MAAM,CAAC,MAAM,eAAe,GAAoC;IAC5D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC7B,8BACI,KAAC,QAAQ,OAAK,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,GAAI,EACjE,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,UAAU,GAAG,IACzG,CACN;IACD,QAAQ,EAAE,EAAE;IACZ,QAAQ,EAAE,KAAK;CAClB,CAAC"}

package/dist/components/Snackbar/snackbar.css

@@ -1,4 +1,17 @@
 [data-bspk=snackbar] {
+  position: fixed;
+  z-index: var(--z-index-dialog);
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: 100%;
+  overflow: hidden;
+  inset: 0;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  pointer-events: none;
+  padding: var(--spacing-sizing-02);
+}
+[data-bspk=snackbar] [data-snackbar-content] {
   pointer-events: auto;
   display: flex;
   flex-direction: row;
@@ -8,12 +21,28 @@
   padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
   gap: var(--spacing-sizing-03);
   width: 600px;
-  max-width: 100%;
   box-shadow: 0 0 1px 0 var(--shadow-variant-05), 0 0 12px 0 var(--shadow-variant-03);
   background-color: var(--surface-neutral-inverse);
   color: var(--foreground-neutral-on-inverse-surface);
   height: var(--spacing-sizing-14);
 }
-[data-bspk=snackbar] [data-bspk=button][data-variant=tertiary] {
+[data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon-text] {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=snackbar] [data-snackbar-content] [data-bspk=button][data-variant=tertiary] {
+  flex: 0 0 auto;
   color: inherit;
 }

package/dist/components/Snackbar/snackbar.css.js

@@ -2,6 +2,19 @@
 * Do not edit this file directly. */
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(`[data-bspk=snackbar] {
+  position: fixed;
+  z-index: var(--z-index-dialog);
+  display: flex;
+  flex-direction: column-reverse;
+  max-height: 100%;
+  overflow: hidden;
+  inset: 0;
+  align-items: center;
+  gap: var(--spacing-sizing-02);
+  pointer-events: none;
+  padding: var(--spacing-sizing-02);
+}
+[data-bspk=snackbar] [data-snackbar-content] {
   pointer-events: auto;
   display: flex;
   flex-direction: row;
@@ -11,13 +24,29 @@ style.appendChild(document.createTextNode(`[data-bspk=snackbar] {
   padding: var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-02) var(--spacing-sizing-04);
   gap: var(--spacing-sizing-03);
   width: 600px;
-  max-width: 100%;
   box-shadow: 0 0 1px 0 var(--shadow-variant-05), 0 0 12px 0 var(--shadow-variant-03);
   background-color: var(--surface-neutral-inverse);
   color: var(--foreground-neutral-on-inverse-surface);
   height: var(--spacing-sizing-14);
 }
-[data-bspk=snackbar] [data-bspk=button][data-variant=tertiary] {
+[data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon-text] {
+  flex: 1 1 0;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sizing-03);
+}
+[data-bspk=snackbar] [data-snackbar-content] [data-snackbar-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--spacing-sizing-05);
+  height: var(--spacing-sizing-05);
+}
+[data-bspk=snackbar] [data-snackbar-content] [data-bspk=button][data-variant=tertiary] {
+  flex: 0 0 auto;
   color: inherit;
 }
 `));

package/dist/components/StylesProviderDemo/StylesProviderDemo.d.ts

@@ -6,7 +6,7 @@ export type StylesProviderDemoProps = {
      *
      * @default anywhere
      */
-    brand?: Brand;
+    brand?: Brand | 'example';
 };
 /**
  * Used only on the demo site to switch between different brands styles.

package/dist/components/StylesProviderDemo/StylesProviderDemo.js

@@ -1,6 +1,8 @@
 import { useRef, useEffect } from 'react';
 import { BRANDS_CSS } from './brandsCss';
+import { EXAMPLE_CSS } from './exampleCss';
 import '../../styles/base.css.js';
+const THEME_CSS = { ...BRANDS_CSS, ...EXAMPLE_CSS };
 /**
  * Used only on the demo site to switch between different brands styles.
  *
@@ -21,7 +23,7 @@ export function StylesProviderDemo({ brand = 'anywhere' }) {
             styleElement.current = document.createElement('style');
             document.head.appendChild(styleElement.current);
         }
-        styleElement.current.textContent = (brand && BRANDS_CSS[brand]) || BRANDS_CSS.anywhere;
+        styleElement.current.textContent = (brand && THEME_CSS[brand]) || THEME_CSS.anywhere;
         return () => {
             if (!styleElement.current)
                 return;

package/dist/components/StylesProviderDemo/StylesProviderDemo.js.map

@@ -1 +1 @@
-{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,oBAAoB,CAAC;AAW5B;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC;QAEvF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}
+{"version":3,"file":"StylesProviderDemo.js","sourceRoot":"","sources":["../../../src/components/StylesProviderDemo/StylesProviderDemo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,OAAO,oBAAoB,CAAC;AAE5B,MAAM,SAAS,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,WAAW,EAAE,CAAC;AAWpD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,GAAG,UAAU,EAA2B;IAC9E,MAAM,YAAY,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE3D,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YACxB,YAAY,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;QAED,YAAY,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,SAAS,CAAC,QAAQ,CAAC;QAErF,OAAO,GAAG,EAAE;YACR,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAClC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAChD,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAChC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,IAAI,CAAC;AAChB,CAAC;AAED,sDAAsD"}

package/dist/components/StylesProviderDemo/exampleCss.d.ts

@@ -0,0 +1 @@
+export declare const EXAMPLE_CSS: Record<'example', string>;