@blockle/blocks 0.12.0 → 0.12.1

package/dist/index.cjs

@@ -352,6 +352,13 @@ const Tooltip = ({
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 exports.breakpointQuery = styles_lib_css_atoms_breakpoints_cjs.breakpointQuery;
 exports.style = styles_lib_css_style_style_cjs.style;
 exports.makeComponentTheme = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme;
@@ -380,7 +387,6 @@ exports.Portal = styles_components_overlay_Dialog_Dialog_cjs.Portal;
 exports.useIsomorphicLayoutEffect = styles_components_overlay_Dialog_Dialog_cjs.useIsomorphicLayoutEffect;
 exports.useKeyboard = styles_components_overlay_Dialog_Dialog_cjs.useKeyboard;
 exports.usePreventBodyScroll = styles_components_overlay_Dialog_Dialog_cjs.usePreventBodyScroll;
-exports.useRootAriaHidden = styles_components_overlay_Dialog_Dialog_cjs.useRootAriaHidden;
 exports.Heading = styles_components_typography_Heading_Heading_cjs.Heading;
 exports.Text = styles_components_typography_Text_Text_cjs.Text;
 exports.Inline = Inline;
@@ -388,3 +394,4 @@ exports.Link = Link;
 exports.Progress = Progress;
 exports.Stack = Stack;
 exports.Tooltip = Tooltip;
+exports.useRootAriaHidden = useRootAriaHidden;

package/dist/index.mjs

@@ -5,11 +5,11 @@ import { style } from "./styles/lib/css/style/style.mjs";
 import { makeComponentTheme } from "./styles/lib/theme/makeComponentTheme.mjs";
 import { makeTheme } from "./styles/lib/theme/makeTheme.mjs";
 import { vars } from "./styles/lib/theme/vars.css.mjs";
-import { useComponentStyles, Box, classnames, createSlottable, composeRefs } from "./styles/components/display/Divider/Divider.mjs";
+import { useComponentStyles, Box, classnames, createSlottable, composeRefs, BlocksProviderContext } from "./styles/components/display/Divider/Divider.mjs";
 import { Divider, Slot, useComponentStyleDefaultProps } from "./styles/components/display/Divider/Divider.mjs";
 import { atoms } from "./styles/lib/css/atoms/sprinkles.css.mjs";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement } from "react";
+import { forwardRef, useEffect, useState, useRef, useLayoutEffect, useCallback, useId, Children, isValidElement, cloneElement, useContext } from "react";
 import { Button, Spinner } from "./styles/components/form/Button/Button.mjs";
 import { Checkbox, Label } from "./styles/components/form/Checkbox/Checkbox.mjs";
 import { Input } from "./styles/components/form/Input/Input.mjs";
@@ -19,7 +19,7 @@ import { Slider } from "./styles/components/form/Slider/Slider.mjs";
 import { Switch } from "./styles/components/form/Switch/Switch.mjs";
 import { BlocksProvider } from "./styles/components/other/BlocksProvider/BlocksProvider.mjs";
 import { useLayer, useVisibilityState, useIsomorphicLayoutEffect, hasAnimationDuration, useKeyboard, Portal } from "./styles/components/overlay/Dialog/Dialog.mjs";
-import { Dialog, usePreventBodyScroll, useRootAriaHidden } from "./styles/components/overlay/Dialog/Dialog.mjs";
+import { Dialog, usePreventBodyScroll } from "./styles/components/overlay/Dialog/Dialog.mjs";
 import { Heading } from "./styles/components/typography/Heading/Heading.mjs";
 import { Text } from "./styles/components/typography/Text/Text.mjs";
 const Progress = forwardRef(function Progress2({ value, max = 100, className, ...restProps }, ref) {
@@ -354,6 +354,13 @@ const Tooltip = ({
     )
   ] });
 };
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
 export {
   BlocksProvider,
   Box,

package/dist/momotaro.chunk.d.ts

@@ -234,7 +234,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "textWrap">;
+    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "textWrap" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration">;
 };
 
 declare const breakpoints: {
@@ -330,7 +330,6 @@ type DividerTheme = {
     };
 };
 type DialogTheme = {
-    backdrop: string;
     dialog: string;
     variants: {
         size: 'small' | 'medium' | 'large';
@@ -1139,7 +1138,7 @@ type UseKeyboardOptions = {
     enabled?: boolean;
     type?: 'keydown' | 'keyup';
 };
-declare const useKeyboard: (key: KeyboardEvent['key'], callback: () => void, { enabled, type }?: UseKeyboardOptions) => void;
+declare const useKeyboard: (key: KeyboardEvent['key'], callback: (event: KeyboardEvent) => void, { enabled, type }?: UseKeyboardOptions) => void;
 
 declare const usePreventBodyScroll: (enabled?: boolean) => void;
 

package/dist/styles/components/overlay/Dialog/Dialog.cjs

@@ -12,33 +12,6 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  react.useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => {
-      document.removeEventListener("focusin", handleFocus);
-    };
-  }, [active, ref]);
-};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   react.useEffect(() => {
@@ -47,7 +20,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -110,21 +83,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   react.useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-const useRootAriaHidden = (hidden) => {
-  const context = react.useContext(styles_components_display_Divider_Divider_cjs.BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = react.useState(open);
   const hide = react.useCallback(() => {
@@ -166,38 +131,56 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = react.useRef(null);
   const dialogRef = react.useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = react.useState(true);
-  const onBackdropClick = react.useCallback(
+  const lastAction = react.useRef(0);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = react.useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  react.useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    lastAction.current = Date.now();
+    const listener = (event) => {
+      var _a;
+      if (lastAction.current + 30 > Date.now()) {
+        return;
+      }
+      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      onRequestClose();
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [enabled, onRequestClose, open]);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -223,26 +206,16 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsxRuntime.jsx(
-    styles_components_display_Divider_Divider_cjs.Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: styles_components_display_Divider_Divider_cjs.classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
@@ -253,5 +226,4 @@ exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useKeyboard = useKeyboard;
 exports.useLayer = useLayer;
 exports.usePreventBodyScroll = usePreventBodyScroll;
-exports.useRootAriaHidden = useRootAriaHidden;
 exports.useVisibilityState = useVisibilityState;

package/dist/styles/components/overlay/Dialog/Dialog.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useRef, useContext, useState, useCallback, createContext } from "react";
-import { useTheme, BlocksProviderContext, useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
-import { backdrop } from "./dialog.css.mjs";
+import { useEffect, useLayoutEffect, useRef, useState, useCallback, createContext, useContext } from "react";
+import { useTheme, useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { dialog } from "./dialog.css.mjs";
 import { createPortal } from "react-dom";
 import { BlocksProvider } from "../../other/BlocksProvider/BlocksProvider.mjs";
 const Portal = ({ children, container }) => {
@@ -11,33 +11,6 @@ const Portal = ({ children, container }) => {
     container || document.body
   );
 };
-const focusableSelectors = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-const getFirstFocusableElement = (container) => {
-  const focusable = container.querySelector(focusableSelectors);
-  return focusable || null;
-};
-const focusFirstElement = (container) => {
-  const focusable = getFirstFocusableElement(container);
-  if (focusable) {
-    focusable.focus();
-  }
-};
-const useFocusLock = ({ ref, active }) => {
-  useEffect(() => {
-    if (!active) {
-      return;
-    }
-    const handleFocus = (event) => {
-      if (ref.current && event.target instanceof HTMLElement && !ref.current.contains(event.target)) {
-        focusFirstElement(ref.current);
-      }
-    };
-    document.addEventListener("focusin", handleFocus);
-    return () => {
-      document.removeEventListener("focusin", handleFocus);
-    };
-  }, [active, ref]);
-};
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
   useEffect(() => {
@@ -46,7 +19,7 @@ const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) =
     }
     function handleKeyDown(event) {
       if (event.key === key) {
-        callback();
+        callback(event);
       }
     }
     document.addEventListener(type, handleKeyDown);
@@ -109,21 +82,13 @@ const useRestoreFocus = (active) => {
     target.current = document.activeElement;
   }
   useEffect(() => {
+    var _a;
     if (target.current && !active && target.current instanceof HTMLElement) {
-      target.current.focus();
-    }
-    if (!active) {
+      (_a = target.current) == null ? void 0 : _a.focus();
       target.current = null;
     }
   }, [active]);
 };
-const useRootAriaHidden = (hidden) => {
-  const context = useContext(BlocksProviderContext);
-  if (!context) {
-    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
-  }
-  context.setAriaHidden(hidden);
-};
 const useVisibilityState = (open) => {
   const [visible, setVisible] = useState(open);
   const hide = useCallback(() => {
@@ -165,38 +130,56 @@ const Dialog = ({
   size,
   ...restProps
 }) => {
-  const backdropClassName = useComponentStyles("dialog", { backdrop: true }, false);
   const dialogClassName = useComponentStyles("dialog", { dialog: true, variants: { size } });
-  const backdropRef = useRef(null);
   const dialogRef = useRef(null);
   const layer = useLayer();
   const [visible, hide] = useVisibilityState(open);
   const [enabled, setEnabled] = useState(true);
-  const onBackdropClick = useCallback(
+  const lastAction = useRef(0);
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  const onEscape = useCallback(
     (event) => {
-      if (event.target === event.currentTarget) {
-        onRequestClose();
-      }
+      event.preventDefault();
+      onRequestClose();
     },
     [onRequestClose]
   );
-  useFocusLock({ ref: dialogRef, active: open && enabled });
-  useRestoreFocus(open);
-  const isNested = useNestedDialog(visible);
-  usePreventBodyScroll(visible && !isNested);
-  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
-  useRootAriaHidden(visible);
+  useKeyboard("Escape", onEscape, { enabled: open && enabled });
+  useEffect(() => {
+    if (!open || !enabled) {
+      return;
+    }
+    lastAction.current = Date.now();
+    const listener = (event) => {
+      var _a;
+      if (lastAction.current + 30 > Date.now()) {
+        return;
+      }
+      if ((_a = dialogRef.current) == null ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      onRequestClose();
+    };
+    document.addEventListener("click", listener);
+    return () => {
+      document.removeEventListener("click", listener);
+    };
+  }, [enabled, onRequestClose, open]);
   useIsomorphicLayoutEffect(() => {
     var _a, _b;
+    if (!visible) {
+      (_a = dialogRef.current) == null ? void 0 : _a.close();
+    }
     if (!open) {
-      (_a = backdropRef.current) == null ? void 0 : _a.removeAttribute("data-open");
       (_b = dialogRef.current) == null ? void 0 : _b.removeAttribute("data-open");
       return;
     }
     let timer = requestAnimationFrame(() => {
       timer = requestAnimationFrame(() => {
         var _a2, _b2;
-        (_a2 = backdropRef.current) == null ? void 0 : _a2.setAttribute("data-open", "");
+        (_a2 = dialogRef.current) == null ? void 0 : _a2.showModal();
         (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
       });
     });
@@ -222,26 +205,16 @@ const Dialog = ({
   }
   const dataOpen = typeof window === "undefined" && open ? "" : void 0;
   return /* @__PURE__ */ jsx(Portal, { container: layer(), children: /* @__PURE__ */ jsx(DialogContext.Provider, { value: { setEnabled }, children: /* @__PURE__ */ jsx(
-    Box,
+    "dialog",
     {
-      ref: backdropRef,
-      className: classnames(backdrop, backdropClassName),
+      ref: dialogRef,
+      "aria-modal": "true",
       "data-open": dataOpen,
-      onClick: onBackdropClick,
+      className: classnames(dialog, dialogClassName, className),
       onAnimationEnd,
       onTransitionEnd: onAnimationEnd,
-      children: /* @__PURE__ */ jsx(
-        "dialog",
-        {
-          ref: dialogRef,
-          "aria-modal": "true",
-          open: true,
-          "data-open": dataOpen,
-          className: classnames(dialogClassName, className),
-          ...restProps,
-          children
-        }
-      )
+      ...restProps,
+      children
     }
   ) }) });
 };
@@ -253,6 +226,5 @@ export {
   useKeyboard,
   useLayer,
   usePreventBodyScroll,
-  useRootAriaHidden,
   useVisibilityState
 };

package/dist/styles/components/overlay/Dialog/dialog.css.cjs

@@ -3,21 +3,19 @@ const fileScope = require("@vanilla-extract/css/fileScope");
 const css = require("@vanilla-extract/css");
 const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
 fileScope.setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = css.style({
+const dialog = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 fileScope.endFileScope();
-exports.backdrop = backdrop;
+exports.dialog = dialog;

package/dist/styles/components/overlay/Dialog/dialog.css.mjs

@@ -2,23 +2,21 @@ import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
 import { style } from "@vanilla-extract/css";
 import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
 setFileScope("src/components/overlay/Dialog/dialog.css.ts", "@blockle/blocks");
-const backdrop = style({
+const dialog = style({
   "@layer": {
     [blocksLayer]: {
-      contain: "layout",
-      display: "flex",
-      placeItems: "center",
       position: "fixed",
-      inlineSize: "100%",
-      blockSize: "100%",
-      insetInlineStart: 0,
-      insetBlockStart: 0,
-      overflow: "hidden",
-      zIndex: 1e3
+      inset: 0,
+      border: "none",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
     }
   }
-}, "backdrop");
+}, "dialog");
 endFileScope();
 export {
-  backdrop
+  dialog
 };

package/dist/styles/themes/momotaro/components/dialog.css.cjs

@@ -16,34 +16,31 @@ const dialog = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("dialo
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: css.style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: css.style({

package/dist/styles/themes/momotaro/components/dialog.css.mjs

@@ -15,34 +15,31 @@ const dialog = makeComponentTheme("dialog", {
   }), {
     maxHeight: "90%",
     minWidth: "300px",
-    selectors: {
-      "&[data-open]": {
-        transform: "scale(1)"
-      }
+    "::backdrop": {
+      backgroundColor: "rgba(0, 0, 0, 0.5)"
     },
-    // Apply the animation only if the user has not requested reduced motion
-    "@media": {
-      "(prefers-reduced-motion: no-preference)": {
-        transform: "scale(0.9)",
-        transition: "transform 160ms"
-      }
-    }
-  }], "dialog_dialog"),
-  backdrop: style({
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
     selectors: {
       "&[data-open]": {
+        transform: "translate(0, 0)",
+        opacity: 1
+      },
+      "&[data-open]::backdrop": {
         opacity: 1
       }
     },
     // Apply the animation only if the user has not requested reduced motion
     "@media": {
       "(prefers-reduced-motion: no-preference)": {
+        transform: "translate(0, -120px)",
         opacity: 0,
-        transition: "opacity 160ms"
+        transition: "transform 240ms, opacity 160ms",
+        "::backdrop": {
+          opacity: 0,
+          transition: "opacity 160ms"
+        }
       }
     }
-  }, "dialog_backdrop"),
+  }], "dialog_dialog"),
   variants: {
     size: {
       small: style({

package/dist/styles/themes/momotaro/components/progress.css.cjs

@@ -37,12 +37,12 @@ const progress = styles_lib_theme_makeComponentTheme_cjs.makeComponentTheme("pro
         // For reduce motion we show a striped pattern instead of animating
         "(prefers-reduced-motion: reduce)": {
           backgroundImage: `repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 20px,
-            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
-            ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
-          )`
+          45deg,
+          transparent,
+          transparent 20px,
+          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 20px,
+          ${styles_lib_theme_vars_css_cjs.vars.color.primaryDark} 40px
+        )`
         },
         "(prefers-reduced-motion: no-preference)": {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`

package/dist/styles/themes/momotaro/components/progress.css.mjs

@@ -36,12 +36,12 @@ const progress = makeComponentTheme("progress", {
         // For reduce motion we show a striped pattern instead of animating
         "(prefers-reduced-motion: reduce)": {
           backgroundImage: `repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 20px,
-            ${vars.color.primaryDark} 20px,
-            ${vars.color.primaryDark} 40px
-          )`
+          45deg,
+          transparent,
+          transparent 20px,
+          ${vars.color.primaryDark} 20px,
+          ${vars.color.primaryDark} 40px
+        )`
         },
         "(prefers-reduced-motion: no-preference)": {
           animation: `${indeterminateAnimation} 3s ease-in-out infinite`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Blocks design system",
   "repository": "git@github.com:Blockle/blocks.git",
   "license": "MIT",
@@ -60,48 +60,49 @@
     "string-width": "^4.2.2"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.1",
-    "@crackle/cli": "^0.15.2",
-    "@crackle/core": "^0.33.1",
-    "@storybook/addon-a11y": "^8.0.2",
-    "@storybook/addon-coverage": "^1.0.1",
-    "@storybook/addon-essentials": "^8.0.2",
-    "@storybook/addon-interactions": "^8.0.2",
-    "@storybook/addon-links": "^8.0.2",
+    "@changesets/cli": "^2.27.5",
+    "@crackle/cli": "^0.15.4",
+    "@crackle/core": "^0.33.3",
+    "@storybook/addon-a11y": "^8.1.6",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-essentials": "^8.1.6",
+    "@storybook/addon-interactions": "^8.1.6",
+    "@storybook/addon-links": "^8.1.6",
     "@storybook/addons": "^7.6.17",
-    "@storybook/blocks": "^8.0.2",
-    "@storybook/react": "^8.0.2",
-    "@storybook/react-vite": "^8.0.2",
-    "@storybook/test": "^8.0.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vanilla-extract/css": "^1.14.1",
-    "@vanilla-extract/css-utils": "^0.1.3",
-    "@vanilla-extract/sprinkles": "^1.6.1",
-    "@vanilla-extract/vite-plugin": "^4.0.6",
-    "@vitest/coverage-v8": "^1.4.0",
-    "autoprefixer": "^10.4.18",
+    "@storybook/blocks": "^8.1.6",
+    "@storybook/react": "^8.1.6",
+    "@storybook/react-vite": "^8.1.6",
+    "@storybook/test": "^8.1.6",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^16.0.0",
+    "@types/eslint": "^8.56.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
+    "@vanilla-extract/css": "^1.15.2",
+    "@vanilla-extract/css-utils": "^0.1.4",
+    "@vanilla-extract/sprinkles": "^1.6.2",
+    "@vanilla-extract/vite-plugin": "^4.0.10",
+    "@vitest/coverage-v8": "^1.6.0",
+    "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-unicorn": "^51.0.1",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
+    "eslint-plugin-unicorn": "^53.0.0",
+    "jsdom": "^24.1.0",
+    "prettier": "^3.3.1",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "storybook": "^8.0.2",
-    "typescript": "^5.4.2",
-    "vitest": "^1.4.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^8.1.6",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "@vanilla-extract/css": "^1.14",