@dnanpm/ui-components 0.7.0 → 0.9.0

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,62 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type ModalSize = 'small' | 'medium' | 'large';
+export type ModalHeaderStyle = 'light' | 'dark';
+type ModalAccessibleName = {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+} | {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title?: never;
+    readonly 'aria-label': string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title?: never;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+};
+export type ModalProps = Omit<ComponentPropsWithRef<'dialog'>, 'children' | 'open' | 'onClose' | 'onCancel' | 'aria-label' | 'aria-labelledby' | 'title'> & ModalAccessibleName & {
+    /**
+     * Controls whether the dialog is open. The dialog unmounts after its close animation unless
+     * `keepMounted` is true.
+     * `undefined` is treated as closed. @default false
+     */
+    readonly open?: boolean;
+    /**
+     * Keeps the closed dialog and its descendants mounted, preserving their React state and effects.
+     * @default false
+     */
+    readonly keepMounted?: boolean;
+    /** Called with false when the user requests closing. Opening and closing are controlled by `open`. */
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Supporting text displayed below the heading. */
+    readonly description?: ReactNode;
+    /** Content displayed in the dialog body. */
+    readonly children: ReactNode;
+    /** Optional content displayed in the bottom action bar. */
+    readonly footer?: ReactNode;
+    /** Dialog width. */
+    readonly size?: ModalSize;
+    /** Visual style of the header and close button. */
+    readonly headerStyle?: ModalHeaderStyle;
+    /** Keeps the header fixed while the body scrolls. @default false */
+    readonly fixedTitle?: boolean;
+    /** Aligns the dialog to the top instead of vertically centering it. @default false */
+    readonly alignToTop?: boolean;
+    /**
+     * Disables the close button, backdrop click, and Escape key. Provide an action that sets
+     * `open` to false when this is enabled. @default false
+     */
+    readonly disableCloseOptions?: boolean;
+    /** Accessible label for the close button. @default 'Sulje dialogi' */
+    readonly closeLabel?: string;
+};
+export {};
+//# sourceMappingURL=Modal.types.d.ts.map

package/dist/components/Modal/Modal.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEhD,KAAK,mBAAmB,GAClB;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,CAAC;AAER,MAAM,MAAM,UAAU,GAAG,IAAI,CACzB,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,iBAAiB,GAAG,OAAO,CAC5F,GACG,mBAAmB,GAAG;IAClB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,sGAAsG;IACtG,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,mDAAmD;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4CAA4C;IAC5C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,oBAAoB;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,mDAAmD;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC;IACxC,oEAAoE;IACpE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,sFAAsF;IACtF,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,sEAAsE;IACtE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Modal } from './Modal';
+export type { ModalHeaderStyle, ModalProps, ModalSize } from './Modal.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/Modal/useDialogDismissal.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useDialogDismissal = ({
+  close,
+  disableCloseOptions,
+  onClick,
+  onKeyDown,
+  onPointerDown
+}) => {
+  const backdropPointerDownRef = react.useRef(false);
+  return {
+    onCancel: (event) => {
+      event.preventDefault();
+      backdropPointerDownRef.current = false;
+      if (!disableCloseOptions) close();
+    },
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        backdropPointerDownRef.current = false;
+        if (disableCloseOptions) event.preventDefault();
+      }
+    },
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+    },
+    onPointerDown: (event) => {
+      backdropPointerDownRef.current = event.target === event.currentTarget;
+      onPointerDown?.(event);
+    },
+    onClick: (event) => {
+      onClick?.(event);
+      if (!disableCloseOptions && event.target === event.currentTarget) close();
+      setTimeout(() => {
+        backdropPointerDownRef.current = false;
+      }, 0);
+    }
+  };
+};
+exports.useDialogDismissal = useDialogDismissal;
+//# sourceMappingURL=useDialogDismissal.cjs.map

package/dist/components/Modal/useDialogDismissal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogDismissal.cjs","sources":["../../../src/components/Modal/useDialogDismissal.ts"],"sourcesContent":["import { useRef } from 'react';\nimport type { ComponentPropsWithRef } from 'react';\n\ninterface UseDialogDismissalOptions {\n    close: () => void;\n    disableCloseOptions: boolean;\n    onClick?: ComponentPropsWithRef<'dialog'>['onClick'];\n    onKeyDown?: ComponentPropsWithRef<'dialog'>['onKeyDown'];\n    onPointerDown?: ComponentPropsWithRef<'dialog'>['onPointerDown'];\n}\n\nexport const useDialogDismissal = ({\n    close,\n    disableCloseOptions,\n    onClick,\n    onKeyDown,\n    onPointerDown,\n}: UseDialogDismissalOptions) => {\n    const backdropPointerDownRef = useRef(false);\n\n    return {\n        onCancel: (event: React.SyntheticEvent<HTMLDialogElement>) => {\n            event.preventDefault();\n            backdropPointerDownRef.current = false;\n            if (!disableCloseOptions) close();\n        },\n        onKeyDownCapture: (event: React.KeyboardEvent<HTMLDialogElement>) => {\n            if (event.key === 'Escape') {\n                backdropPointerDownRef.current = false;\n                if (disableCloseOptions) event.preventDefault();\n            }\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDialogElement>) => {\n            onKeyDown?.(event);\n        },\n        onPointerDown: (event: React.PointerEvent<HTMLDialogElement>) => {\n            backdropPointerDownRef.current = event.target === event.currentTarget;\n            onPointerDown?.(event);\n        },\n        onClick: (event: React.MouseEvent<HTMLDialogElement>) => {\n            onClick?.(event);\n            if (!disableCloseOptions && event.target === event.currentTarget) close();\n            setTimeout(() => {\n                backdropPointerDownRef.current = false;\n            }, 0);\n        },\n    };\n};\n"],"names":["useRef"],"mappings":";;;AAWO,MAAM,qBAAqB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAiC;AAC7B,QAAM,yBAAyBA,MAAAA,OAAO,KAAK;AAE3C,SAAO;AAAA,IACH,UAAU,CAAC,UAAmD;AAC1D,YAAM,eAAA;AACN,6BAAuB,UAAU;AACjC,UAAI,CAAC,oBAAqB,OAAA;AAAA,IAC9B;AAAA,IACA,kBAAkB,CAAC,UAAkD;AACjE,UAAI,MAAM,QAAQ,UAAU;AACxB,+BAAuB,UAAU;AACjC,YAAI,2BAA2B,eAAA;AAAA,MACnC;AAAA,IACJ;AAAA,IACA,WAAW,CAAC,UAAkD;AAC1D,kBAAY,KAAK;AAAA,IACrB;AAAA,IACA,eAAe,CAAC,UAAiD;AAC7D,6BAAuB,UAAU,MAAM,WAAW,MAAM;AACxD,sBAAgB,KAAK;AAAA,IACzB;AAAA,IACA,SAAS,CAAC,UAA+C;AACrD,gBAAU,KAAK;AACf,UAAI,CAAC,uBAAuB,MAAM,WAAW,MAAM,cAAe,OAAA;AAClE,iBAAW,MAAM;AACb,+BAAuB,UAAU;AAAA,MACrC,GAAG,CAAC;AAAA,IACR;AAAA,EAAA;AAER;;"}

package/dist/components/Modal/useDialogDismissal.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPropsWithRef } from 'react';
+interface UseDialogDismissalOptions {
+    close: () => void;
+    disableCloseOptions: boolean;
+    onClick?: ComponentPropsWithRef<'dialog'>['onClick'];
+    onKeyDown?: ComponentPropsWithRef<'dialog'>['onKeyDown'];
+    onPointerDown?: ComponentPropsWithRef<'dialog'>['onPointerDown'];
+}
+export declare const useDialogDismissal: ({ close, disableCloseOptions, onClick, onKeyDown, onPointerDown, }: UseDialogDismissalOptions) => {
+    onCancel: (event: React.SyntheticEvent<HTMLDialogElement>) => void;
+    onKeyDownCapture: (event: React.KeyboardEvent<HTMLDialogElement>) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLDialogElement>) => void;
+    onPointerDown: (event: React.PointerEvent<HTMLDialogElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLDialogElement>) => void;
+};
+export {};
+//# sourceMappingURL=useDialogDismissal.d.ts.map

package/dist/components/Modal/useDialogDismissal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogDismissal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useDialogDismissal.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAEnD,UAAU,yBAAyB;IAC/B,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,OAAO,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC;IACrD,SAAS,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;IACzD,aAAa,CAAC,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,kBAAkB,GAAI,oEAMhC,yBAAyB;sBAIF,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;8BAK/B,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;uBAM7C,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC;2BAGlC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC;qBAI3C,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC;CAQ3D,CAAC"}

package/dist/components/Modal/useDialogDismissal.js

@@ -0,0 +1,41 @@
+import { useRef } from "react";
+const useDialogDismissal = ({
+  close,
+  disableCloseOptions,
+  onClick,
+  onKeyDown,
+  onPointerDown
+}) => {
+  const backdropPointerDownRef = useRef(false);
+  return {
+    onCancel: (event) => {
+      event.preventDefault();
+      backdropPointerDownRef.current = false;
+      if (!disableCloseOptions) close();
+    },
+    onKeyDownCapture: (event) => {
+      if (event.key === "Escape") {
+        backdropPointerDownRef.current = false;
+        if (disableCloseOptions) event.preventDefault();
+      }
+    },
+    onKeyDown: (event) => {
+      onKeyDown?.(event);
+    },
+    onPointerDown: (event) => {
+      backdropPointerDownRef.current = event.target === event.currentTarget;
+      onPointerDown?.(event);
+    },
+    onClick: (event) => {
+      onClick?.(event);
+      if (!disableCloseOptions && event.target === event.currentTarget) close();
+      setTimeout(() => {
+        backdropPointerDownRef.current = false;
+      }, 0);
+    }
+  };
+};
+export {
+  useDialogDismissal
+};
+//# sourceMappingURL=useDialogDismissal.js.map

package/dist/components/Modal/useDialogDismissal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogDismissal.js","sources":["../../../src/components/Modal/useDialogDismissal.ts"],"sourcesContent":["import { useRef } from 'react';\nimport type { ComponentPropsWithRef } from 'react';\n\ninterface UseDialogDismissalOptions {\n    close: () => void;\n    disableCloseOptions: boolean;\n    onClick?: ComponentPropsWithRef<'dialog'>['onClick'];\n    onKeyDown?: ComponentPropsWithRef<'dialog'>['onKeyDown'];\n    onPointerDown?: ComponentPropsWithRef<'dialog'>['onPointerDown'];\n}\n\nexport const useDialogDismissal = ({\n    close,\n    disableCloseOptions,\n    onClick,\n    onKeyDown,\n    onPointerDown,\n}: UseDialogDismissalOptions) => {\n    const backdropPointerDownRef = useRef(false);\n\n    return {\n        onCancel: (event: React.SyntheticEvent<HTMLDialogElement>) => {\n            event.preventDefault();\n            backdropPointerDownRef.current = false;\n            if (!disableCloseOptions) close();\n        },\n        onKeyDownCapture: (event: React.KeyboardEvent<HTMLDialogElement>) => {\n            if (event.key === 'Escape') {\n                backdropPointerDownRef.current = false;\n                if (disableCloseOptions) event.preventDefault();\n            }\n        },\n        onKeyDown: (event: React.KeyboardEvent<HTMLDialogElement>) => {\n            onKeyDown?.(event);\n        },\n        onPointerDown: (event: React.PointerEvent<HTMLDialogElement>) => {\n            backdropPointerDownRef.current = event.target === event.currentTarget;\n            onPointerDown?.(event);\n        },\n        onClick: (event: React.MouseEvent<HTMLDialogElement>) => {\n            onClick?.(event);\n            if (!disableCloseOptions && event.target === event.currentTarget) close();\n            setTimeout(() => {\n                backdropPointerDownRef.current = false;\n            }, 0);\n        },\n    };\n};\n"],"names":[],"mappings":";AAWO,MAAM,qBAAqB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAiC;AAC7B,QAAM,yBAAyB,OAAO,KAAK;AAE3C,SAAO;AAAA,IACH,UAAU,CAAC,UAAmD;AAC1D,YAAM,eAAA;AACN,6BAAuB,UAAU;AACjC,UAAI,CAAC,oBAAqB,OAAA;AAAA,IAC9B;AAAA,IACA,kBAAkB,CAAC,UAAkD;AACjE,UAAI,MAAM,QAAQ,UAAU;AACxB,+BAAuB,UAAU;AACjC,YAAI,2BAA2B,eAAA;AAAA,MACnC;AAAA,IACJ;AAAA,IACA,WAAW,CAAC,UAAkD;AAC1D,kBAAY,KAAK;AAAA,IACrB;AAAA,IACA,eAAe,CAAC,UAAiD;AAC7D,6BAAuB,UAAU,MAAM,WAAW,MAAM;AACxD,sBAAgB,KAAK;AAAA,IACzB;AAAA,IACA,SAAS,CAAC,UAA+C;AACrD,gBAAU,KAAK;AACf,UAAI,CAAC,uBAAuB,MAAM,WAAW,MAAM,cAAe,OAAA;AAClE,iBAAW,MAAM;AACb,+BAAuB,UAAU;AAAA,MACrC,GAAG,CAAC;AAAA,IACR;AAAA,EAAA;AAER;"}

package/dist/components/Modal/useNativeDialog.cjs

@@ -0,0 +1,126 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
+const lockBodyScroll = () => {
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+};
+const unlockBodyScroll = () => {
+  bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+};
+const setDialogOpen = (dialog, open) => {
+  {
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    }
+  }
+};
+const findAutofocusTarget = (dialog) => {
+  if (dialog.hasAttribute("autofocus")) return dialog;
+  return dialog.querySelector("[autofocus]") ?? Array.from(dialog.querySelectorAll("*")).find(
+    (element) => "autofocus" in element && element.autofocus
+  );
+};
+const useNativeDialog = ({ open, keepMounted, onOpenChange }) => {
+  const dialogRef = react.useRef(null);
+  const restoreFocusRef = react.useRef(null);
+  const closeTimerRef = react.useRef(null);
+  const bodyScrollLockedRef = react.useRef(false);
+  const [phase, setPhase] = react.useState("closed");
+  const isPresent = keepMounted || open || phase !== "closed";
+  const notifyOpenChange = react.useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const finishClose = react.useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    closeTimerRef.current = null;
+    if (dialog.open) {
+      dialog.close();
+    } else {
+      setPhase("closed");
+    }
+  }, []);
+  const close = react.useCallback(() => notifyOpenChange(false), [notifyOpenChange]);
+  const clearCloseTimer = react.useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      clearCloseTimer();
+      if (phase === "closing" || phase === "closed") setPhase("open");
+      if (!dialog.open) {
+        restoreFocusRef.current = document.activeElement;
+        const autofocusTarget = findAutofocusTarget(dialog);
+        const existingFocusTarget = document.activeElement instanceof HTMLElement && document.activeElement !== dialog && dialog.contains(document.activeElement) ? document.activeElement : null;
+        setDialogOpen(dialog);
+        (autofocusTarget ?? existingFocusTarget ?? dialog.querySelector("[data-dialog-autofocus]"))?.focus();
+      }
+      if (dialog.open && !bodyScrollLockedRef.current) {
+        lockBodyScroll();
+        bodyScrollLockedRef.current = true;
+      }
+    } else if (dialog.open && phase === "open") {
+      setPhase("closing");
+    }
+  }, [clearCloseTimer, open, phase]);
+  react.useEffect(() => {
+    if (phase !== "closing") return;
+    const dialog = dialogRef.current;
+    if (!dialog || !dialog.open) return;
+    const styles = window.getComputedStyle(dialog);
+    const durations = `${styles.transitionDuration},${styles.animationDuration}`.split(",").map((duration2) => {
+      const value = Number.parseFloat(duration2);
+      return Number.isFinite(value) ? duration2.trim().endsWith("ms") ? value : value * 1e3 : 0;
+    });
+    const duration = Math.max(...durations, 0);
+    closeTimerRef.current = setTimeout(finishClose, duration);
+    return () => {
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, finishClose, phase]);
+  react.useEffect(
+    () => () => {
+      clearCloseTimer();
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+    },
+    [clearCloseTimer]
+  );
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => {
+      clearCloseTimer();
+      setPhase("closed");
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+      restoreFocusRef.current?.focus();
+      restoreFocusRef.current = null;
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [clearCloseTimer, isPresent]);
+  return { dialogRef, close, phase, isPresent };
+};
+exports.useNativeDialog = useNativeDialog;
+//# sourceMappingURL=useNativeDialog.cjs.map

package/dist/components/Modal/useNativeDialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.cjs","sources":["../../../src/components/Modal/useNativeDialog.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseNativeDialogOptions {\n    open: boolean;\n    keepMounted: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\ntype DialogPhase = 'closed' | 'open' | 'closing';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n    bodyScrollLockCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n    bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);\n    if (bodyScrollLockCount === 0) {\n        document.body.style.overflow = previousBodyOverflow;\n        previousBodyOverflow = '';\n    }\n};\n\nconst setDialogOpen = (dialog: HTMLDialogElement, open: boolean) => {\n    if (open) {\n        if (typeof dialog.showModal === 'function') {\n            if (!dialog.open) dialog.showModal();\n        }\n    } else if (dialog.open) {\n        if (typeof dialog.close === 'function') {\n            dialog.close();\n        }\n    }\n};\n\nconst findAutofocusTarget = (dialog: HTMLDialogElement) => {\n    if (dialog.hasAttribute('autofocus')) return dialog;\n\n    return (\n        dialog.querySelector<HTMLElement>('[autofocus]') ??\n        Array.from(dialog.querySelectorAll<HTMLElement>('*')).find(\n            (element) =>\n                'autofocus' in element &&\n                (element as HTMLElement & { autofocus: boolean }).autofocus,\n        )\n    );\n};\n\nexport const useNativeDialog = ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const restoreFocusRef = useRef<HTMLElement | null>(null);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const bodyScrollLockedRef = useRef(false);\n    const [phase, setPhase] = useState<DialogPhase>('closed');\n    const isPresent = keepMounted || open || phase !== 'closed';\n\n    const notifyOpenChange = useCallback(\n        (nextOpen: boolean) => {\n            onOpenChange?.(nextOpen);\n        },\n        [onOpenChange],\n    );\n\n    const finishClose = useCallback(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n        closeTimerRef.current = null;\n        if (dialog.open) {\n            dialog.close();\n        } else {\n            setPhase('closed');\n        }\n    }, []);\n\n    const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);\n\n    const clearCloseTimer = useCallback(() => {\n        if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n    }, []);\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        if (open) {\n            clearCloseTimer();\n            if (phase === 'closing' || phase === 'closed') setPhase('open');\n            if (!dialog.open) {\n                restoreFocusRef.current = document.activeElement as HTMLElement | null;\n                const autofocusTarget = findAutofocusTarget(dialog);\n                const existingFocusTarget =\n                    document.activeElement instanceof HTMLElement &&\n                    document.activeElement !== dialog &&\n                    dialog.contains(document.activeElement)\n                        ? document.activeElement\n                        : null;\n                setDialogOpen(dialog, true);\n                (\n                    autofocusTarget ??\n                    existingFocusTarget ??\n                    dialog.querySelector<HTMLElement>('[data-dialog-autofocus]')\n                )?.focus();\n            }\n            if (dialog.open && !bodyScrollLockedRef.current) {\n                lockBodyScroll();\n                bodyScrollLockedRef.current = true;\n            }\n        } else if (dialog.open && phase === 'open') {\n            setPhase('closing');\n        }\n    }, [clearCloseTimer, open, phase]);\n\n    useEffect(() => {\n        if (phase !== 'closing') return;\n        const dialog = dialogRef.current;\n        if (!dialog || !dialog.open) return;\n\n        const styles = window.getComputedStyle(dialog);\n        const durations = `${styles.transitionDuration},${styles.animationDuration}`\n            .split(',')\n            .map((duration) => {\n                const value = Number.parseFloat(duration);\n                return Number.isFinite(value)\n                    ? duration.trim().endsWith('ms')\n                        ? value\n                        : value * 1000\n                    : 0;\n            });\n        const duration = Math.max(...durations, 0);\n        closeTimerRef.current = setTimeout(finishClose, duration);\n\n        return () => {\n            clearCloseTimer();\n        };\n    }, [clearCloseTimer, finishClose, phase]);\n\n    useEffect(\n        () => () => {\n            clearCloseTimer();\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n        },\n        [clearCloseTimer],\n    );\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        const handleClose = () => {\n            clearCloseTimer();\n            setPhase('closed');\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n            restoreFocusRef.current?.focus();\n            restoreFocusRef.current = null;\n        };\n\n        dialog.addEventListener('close', handleClose);\n        return () => dialog.removeEventListener('close', handleClose);\n    }, [clearCloseTimer, isPresent]);\n\n    return { dialogRef, close, phase, isPresent };\n};\n"],"names":["useRef","useState","useCallback","useEffect","duration"],"mappings":"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"}

package/dist/components/Modal/useNativeDialog.d.ts

@@ -0,0 +1,14 @@
+interface UseNativeDialogOptions {
+    open: boolean;
+    keepMounted: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+type DialogPhase = 'closed' | 'open' | 'closing';
+export declare const useNativeDialog: ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {
+    dialogRef: import('react').RefObject<HTMLDialogElement | null>;
+    close: () => void;
+    phase: DialogPhase;
+    isPresent: boolean;
+};
+export {};
+//# sourceMappingURL=useNativeDialog.d.ts.map

package/dist/components/Modal/useNativeDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/useNativeDialog.ts"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,KAAK,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AA8CjD,eAAO,MAAM,eAAe,GAAI,qCAAqC,sBAAsB;;;;;CAwH1F,CAAC"}

package/dist/components/Modal/useNativeDialog.js

@@ -0,0 +1,126 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
+const lockBodyScroll = () => {
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+};
+const unlockBodyScroll = () => {
+  bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+};
+const setDialogOpen = (dialog, open) => {
+  {
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    }
+  }
+};
+const findAutofocusTarget = (dialog) => {
+  if (dialog.hasAttribute("autofocus")) return dialog;
+  return dialog.querySelector("[autofocus]") ?? Array.from(dialog.querySelectorAll("*")).find(
+    (element) => "autofocus" in element && element.autofocus
+  );
+};
+const useNativeDialog = ({ open, keepMounted, onOpenChange }) => {
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const bodyScrollLockedRef = useRef(false);
+  const [phase, setPhase] = useState("closed");
+  const isPresent = keepMounted || open || phase !== "closed";
+  const notifyOpenChange = useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const finishClose = useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    closeTimerRef.current = null;
+    if (dialog.open) {
+      dialog.close();
+    } else {
+      setPhase("closed");
+    }
+  }, []);
+  const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      clearCloseTimer();
+      if (phase === "closing" || phase === "closed") setPhase("open");
+      if (!dialog.open) {
+        restoreFocusRef.current = document.activeElement;
+        const autofocusTarget = findAutofocusTarget(dialog);
+        const existingFocusTarget = document.activeElement instanceof HTMLElement && document.activeElement !== dialog && dialog.contains(document.activeElement) ? document.activeElement : null;
+        setDialogOpen(dialog);
+        (autofocusTarget ?? existingFocusTarget ?? dialog.querySelector("[data-dialog-autofocus]"))?.focus();
+      }
+      if (dialog.open && !bodyScrollLockedRef.current) {
+        lockBodyScroll();
+        bodyScrollLockedRef.current = true;
+      }
+    } else if (dialog.open && phase === "open") {
+      setPhase("closing");
+    }
+  }, [clearCloseTimer, open, phase]);
+  useEffect(() => {
+    if (phase !== "closing") return;
+    const dialog = dialogRef.current;
+    if (!dialog || !dialog.open) return;
+    const styles = window.getComputedStyle(dialog);
+    const durations = `${styles.transitionDuration},${styles.animationDuration}`.split(",").map((duration2) => {
+      const value = Number.parseFloat(duration2);
+      return Number.isFinite(value) ? duration2.trim().endsWith("ms") ? value : value * 1e3 : 0;
+    });
+    const duration = Math.max(...durations, 0);
+    closeTimerRef.current = setTimeout(finishClose, duration);
+    return () => {
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, finishClose, phase]);
+  useEffect(
+    () => () => {
+      clearCloseTimer();
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+    },
+    [clearCloseTimer]
+  );
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => {
+      clearCloseTimer();
+      setPhase("closed");
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+      restoreFocusRef.current?.focus();
+      restoreFocusRef.current = null;
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [clearCloseTimer, isPresent]);
+  return { dialogRef, close, phase, isPresent };
+};
+export {
+  useNativeDialog
+};
+//# sourceMappingURL=useNativeDialog.js.map

package/dist/components/Modal/useNativeDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.js","sources":["../../../src/components/Modal/useNativeDialog.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseNativeDialogOptions {\n    open: boolean;\n    keepMounted: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\ntype DialogPhase = 'closed' | 'open' | 'closing';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n    bodyScrollLockCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n    bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);\n    if (bodyScrollLockCount === 0) {\n        document.body.style.overflow = previousBodyOverflow;\n        previousBodyOverflow = '';\n    }\n};\n\nconst setDialogOpen = (dialog: HTMLDialogElement, open: boolean) => {\n    if (open) {\n        if (typeof dialog.showModal === 'function') {\n            if (!dialog.open) dialog.showModal();\n        }\n    } else if (dialog.open) {\n        if (typeof dialog.close === 'function') {\n            dialog.close();\n        }\n    }\n};\n\nconst findAutofocusTarget = (dialog: HTMLDialogElement) => {\n    if (dialog.hasAttribute('autofocus')) return dialog;\n\n    return (\n        dialog.querySelector<HTMLElement>('[autofocus]') ??\n        Array.from(dialog.querySelectorAll<HTMLElement>('*')).find(\n            (element) =>\n                'autofocus' in element &&\n                (element as HTMLElement & { autofocus: boolean }).autofocus,\n        )\n    );\n};\n\nexport const useNativeDialog = ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const restoreFocusRef = useRef<HTMLElement | null>(null);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const bodyScrollLockedRef = useRef(false);\n    const [phase, setPhase] = useState<DialogPhase>('closed');\n    const isPresent = keepMounted || open || phase !== 'closed';\n\n    const notifyOpenChange = useCallback(\n        (nextOpen: boolean) => {\n            onOpenChange?.(nextOpen);\n        },\n        [onOpenChange],\n    );\n\n    const finishClose = useCallback(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n        closeTimerRef.current = null;\n        if (dialog.open) {\n            dialog.close();\n        } else {\n            setPhase('closed');\n        }\n    }, []);\n\n    const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);\n\n    const clearCloseTimer = useCallback(() => {\n        if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n    }, []);\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        if (open) {\n            clearCloseTimer();\n            if (phase === 'closing' || phase === 'closed') setPhase('open');\n            if (!dialog.open) {\n                restoreFocusRef.current = document.activeElement as HTMLElement | null;\n                const autofocusTarget = findAutofocusTarget(dialog);\n                const existingFocusTarget =\n                    document.activeElement instanceof HTMLElement &&\n                    document.activeElement !== dialog &&\n                    dialog.contains(document.activeElement)\n                        ? document.activeElement\n                        : null;\n                setDialogOpen(dialog, true);\n                (\n                    autofocusTarget ??\n                    existingFocusTarget ??\n                    dialog.querySelector<HTMLElement>('[data-dialog-autofocus]')\n                )?.focus();\n            }\n            if (dialog.open && !bodyScrollLockedRef.current) {\n                lockBodyScroll();\n                bodyScrollLockedRef.current = true;\n            }\n        } else if (dialog.open && phase === 'open') {\n            setPhase('closing');\n        }\n    }, [clearCloseTimer, open, phase]);\n\n    useEffect(() => {\n        if (phase !== 'closing') return;\n        const dialog = dialogRef.current;\n        if (!dialog || !dialog.open) return;\n\n        const styles = window.getComputedStyle(dialog);\n        const durations = `${styles.transitionDuration},${styles.animationDuration}`\n            .split(',')\n            .map((duration) => {\n                const value = Number.parseFloat(duration);\n                return Number.isFinite(value)\n                    ? duration.trim().endsWith('ms')\n                        ? value\n                        : value * 1000\n                    : 0;\n            });\n        const duration = Math.max(...durations, 0);\n        closeTimerRef.current = setTimeout(finishClose, duration);\n\n        return () => {\n            clearCloseTimer();\n        };\n    }, [clearCloseTimer, finishClose, phase]);\n\n    useEffect(\n        () => () => {\n            clearCloseTimer();\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n        },\n        [clearCloseTimer],\n    );\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        const handleClose = () => {\n            clearCloseTimer();\n            setPhase('closed');\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n            restoreFocusRef.current?.focus();\n            restoreFocusRef.current = null;\n        };\n\n        dialog.addEventListener('close', handleClose);\n        return () => dialog.removeEventListener('close', handleClose);\n    }, [clearCloseTimer, isPresent]);\n\n    return { dialogRef, close, phase, isPresent };\n};\n"],"names":["duration"],"mappings":"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"}

package/dist/components/Notification/Notification.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * Notification Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).
@@ -86,5 +90,4 @@
 ._notification__close_m746g_69 svg {
     width: 24px;
     height: 24px;
-}
-}
+} }

package/dist/components/Pictograph/Pictograph.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * Pictograph Component Styles
  *
  * Grid-based layout for pictograph items with responsive columns,
@@ -198,5 +202,4 @@
         --_pictograph-text-color: var(--color-semantic-foreground-inverse);
         --_pictograph-icon-color: var(--color-semantic-foreground-inverse);
     }
-}
-}
+} }

package/dist/components/Pictograph/PictographItem.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * PictographItem Component Styles
  *
  * Individual pictograph item containing an icon and text area.
@@ -62,5 +66,4 @@
 
 ._pictograph-item_1jsnm_9[data-pictograph-content='long'] ._pictograph-item__text_1jsnm_35 > p {
     font: var(--_pictograph-long-body-font);
-}
-}
+} }

package/dist/components/Quote/Quote.css

@@ -1,4 +1,4 @@
-@layer dds-components {._quote_1dakr_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._quote_1dakr_1 {
     display: flex;
     align-items: flex-start;
     gap: var(--spacing-space-20);
@@ -91,5 +91,4 @@
     ._quote__mark_1dakr_15 {
         color: CanvasText;
     }
-}
-}
+} }

package/dist/components/Spinner/Spinner.css

@@ -1,4 +1,8 @@
-@layer dds-components {/* ─────────────────────────────────────────────────────────────
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/* ─────────────────────────────────────────────────────────────
    Spinner — base
    ───────────────────────────────────────────────────────────── */
 
@@ -112,5 +116,4 @@
     ._spinner__car_j28th_88 {
         animation-duration: 3s;
     }
-}
-}
+} }

package/dist/index.cjs

@@ -5,12 +5,17 @@ const Accordion = require("./components/Accordion/Accordion.cjs");
 const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
+const ButtonCard = require("./components/ButtonCard/ButtonCard.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
+const ContentCard = require("./components/ContentCard/ContentCard.cjs");
+const Drawer = require("./components/Drawer/Drawer.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
+const FunctionButton = require("./components/FunctionButton/FunctionButton.cjs");
 const Hero = require("./components/Hero/Hero.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const Label = require("./components/Label/Label.cjs");
 const MainNavigation = require("./components/MainNavigation/MainNavigation.cjs");
+const Modal = require("./components/Modal/Modal.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
 const Pictograph = require("./components/Pictograph/Pictograph.cjs");
 const PictographItem = require("./components/Pictograph/PictographItem.cjs");
@@ -21,12 +26,17 @@ exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
+exports.ButtonCard = ButtonCard.ButtonCard;
 exports.ColorScheme = ColorScheme.ColorScheme;
+exports.ContentCard = ContentCard.ContentCard;
+exports.Drawer = Drawer.Drawer;
 exports.Footer = Footer.Footer;
+exports.FunctionButton = FunctionButton.FunctionButton;
 exports.Hero = Hero.Hero;
 exports.IconButton = IconButton.IconButton;
 exports.Label = Label.Label;
 exports.MainNavigation = MainNavigation.MainNavigation;
+exports.Modal = Modal.Modal;
 exports.Notification = Notification.Notification;
 exports.Pictograph = Pictograph.Pictograph;
 exports.PictographItem = PictographItem.PictographItem;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}