@blockle/blocks 0.8.7 → 0.8.9

package/dist/styles/components/form/Checkbox/Checkbox.mjs

@@ -0,0 +1,48 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { container, input, icon } from "./checkbox.css.mjs";
+const Label = ({
+  asSpan,
+  children,
+  className,
+  required,
+  size,
+  cursor,
+  ...restProps
+}) => {
+  const Component = asSpan ? "span" : "label";
+  const containerClassName = useComponentStyles("label", {
+    base: true,
+    variants: { required, size }
+  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classnames(containerClassName, className, atoms({ cursor })),
+      ...restProps,
+      children
+    }
+  );
+};
+const Checkbox = forwardRef(function Checkbox2({ name, label, required, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("checkbox", { base: true }, false);
+  const iconClassName = useComponentStyles("checkbox", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "checkbox", name, className: input, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+  ] });
+  if (!label) {
+    return input$1;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input$1,
+    label && /* @__PURE__ */ jsx(Label, { asSpan: true, required, children: label })
+  ] });
+});
+export {
+  Checkbox,
+  Label
+};

package/dist/styles/components/{Checkbox → form/Checkbox}/checkbox.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 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/Checkbox/checkbox.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Checkbox → form/Checkbox}/checkbox.css.mjs

@@ -1,7 +1,7 @@
 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/Checkbox/checkbox.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Checkbox/checkbox.css.ts", "blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Input/Input.cjs

@@ -0,0 +1,27 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Input_input_css_cjs = require("./input.css.cjs");
+const Input = react.forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
+  const id = react.useId();
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { container: true }, false);
+  const inputClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(styles_components_display_Divider_Divider_cjs.Box, { display: "flex", alignItems: "center", className: styles_components_display_Divider_Divider_cjs.classnames(containerClassName, className), children: [
+    startSlot,
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id,
+        ref,
+        name,
+        type,
+        placeholder: placeholder || label,
+        className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Input_input_css_cjs.input, inputClassName),
+        ...restProps
+      }
+    ) }),
+    endSlot
+  ] }) });
+});
+exports.Input = Input;

package/dist/styles/components/form/Input/Input.mjs

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
+import { useComponentStyles, Box, classnames } from "../../display/Divider/Divider.mjs";
+import { input } from "./input.css.mjs";
+const Input = forwardRef(function Input2({ className, name, type = "text", startSlot, endSlot, label, placeholder, ...restProps }, ref) {
+  const id = useId();
+  const containerClassName = useComponentStyles("input", { container: true }, false);
+  const inputClassName = useComponentStyles("input", { input: true });
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", className: classnames(containerClassName, className), children: [
+    startSlot,
+    /* @__PURE__ */ jsx(Box, { asChild: true, width: "full", overflow: "hidden", children: /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        ref,
+        name,
+        type,
+        placeholder: placeholder || label,
+        className: classnames(input, inputClassName),
+        ...restProps
+      }
+    ) }),
+    endSlot
+  ] }) });
+});
+export {
+  Input
+};

package/dist/styles/components/{Input → form/Input}/input.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 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/Input/input.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Input/input.css.ts", "blocks");
 const input = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Input → form/Input}/input.css.mjs

@@ -1,7 +1,7 @@
 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/Input/input.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Input/input.css.ts", "blocks");
 const input = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Radio/Radio.cjs

@@ -0,0 +1,23 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Radio_radio_css_cjs = require("./radio.css.cjs");
+const styles_components_form_Checkbox_Checkbox_cjs = require("../Checkbox/Checkbox.cjs");
+const Radio = react.forwardRef(function Checkbox({ name, children, className, ...restProps }, ref) {
+  const containerClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { base: true }, false);
+  const iconClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("checkbox", { label: true }, false);
+  const input = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Radio_radio_css_cjs.container, containerClassName, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { ref, type: "radio", name, className: styles_components_form_Radio_radio_css_cjs.input, ...restProps }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_form_Radio_radio_css_cjs.icon, iconClassName) })
+  ] });
+  if (!children) {
+    return input;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: labelClassName, children: [
+    input,
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_form_Checkbox_Checkbox_cjs.Label, { asSpan: true, children })
+  ] });
+});
+exports.Radio = Radio;

package/dist/styles/components/form/Radio/Radio.mjs

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { container, input, icon } from "./radio.css.mjs";
+import { Label } from "../Checkbox/Checkbox.mjs";
+const Radio = forwardRef(function Checkbox({ name, children, className, ...restProps }, ref) {
+  const containerClassName = useComponentStyles("radio", { base: true }, false);
+  const iconClassName = useComponentStyles("radio", { icon: true }, false);
+  const labelClassName = useComponentStyles("checkbox", { label: true }, false);
+  const input$1 = /* @__PURE__ */ jsxs("div", { className: classnames(container, containerClassName, className), children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", name, className: input, ...restProps }),
+    /* @__PURE__ */ jsx("div", { className: classnames(icon, iconClassName) })
+  ] });
+  if (!children) {
+    return input$1;
+  }
+  return /* @__PURE__ */ jsxs("label", { className: labelClassName, children: [
+    input$1,
+    /* @__PURE__ */ jsx(Label, { asSpan: true, children })
+  ] });
+});
+export {
+  Radio
+};

package/dist/styles/components/{Radio → form/Radio}/radio.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 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/Radio/radio.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Radio → form/Radio}/radio.css.mjs

@@ -1,7 +1,7 @@
 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/Radio/radio.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Radio/radio.css.ts", "blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/form/Switch/Switch.cjs

@@ -0,0 +1,61 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_form_Switch_switch_css_cjs = require("./switch.css.cjs");
+const Switch = react.forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = react.useState(defaultChecked || checked || false);
+  const baseClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { base: true });
+  const sliderClassName = styles_components_display_Divider_Divider_cjs.useComponentStyles("switch", { slider: true }, false);
+  react.useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = react.useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = react.useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: styles_components_display_Divider_Divider_cjs.classnames(className, styles_components_form_Switch_switch_css_cjs.container, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: styles_components_form_Switch_switch_css_cjs.input,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
+exports.Switch = Switch;

package/dist/styles/components/form/Switch/Switch.mjs

@@ -0,0 +1,62 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState, useEffect, useCallback } from "react";
+import { useComponentStyles, classnames } from "../../display/Divider/Divider.mjs";
+import { container, input } from "./switch.css.mjs";
+const Switch = forwardRef(function Switch2({ className, checked, onChange, defaultChecked, ...restProps }, ref) {
+  const [isChecked, setIsChecked] = useState(defaultChecked || checked || false);
+  const baseClassName = useComponentStyles("switch", { base: true });
+  const sliderClassName = useComponentStyles("switch", { slider: true }, false);
+  useEffect(() => {
+    if (checked !== void 0) {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+  const toggle = useCallback(() => {
+    setIsChecked((checked2) => {
+      const newValue = !checked2;
+      if (onChange) {
+        onChange(newValue);
+      }
+      return newValue;
+    });
+  }, [onChange]);
+  const onChangeHandler = useCallback(
+    (event) => {
+      setIsChecked(event.target.checked);
+      if (onChange) {
+        onChange(event.target.checked);
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classnames(className, container, baseClassName),
+      "data-checked": isChecked,
+      onClick: (event) => {
+        if (event.target.tagName === "INPUT") {
+          return;
+        }
+        toggle();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            className: input,
+            checked: isChecked,
+            onChange: onChangeHandler,
+            ...restProps
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: sliderClassName, "data-checked": isChecked })
+      ]
+    }
+  ) });
+});
+export {
+  Switch
+};

package/dist/styles/components/{Switch → form/Switch}/switch.css.cjs

@@ -1,8 +1,8 @@
 "use strict";
 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/Switch/switch.css.ts?used", "blocks");
+const styles_lib_css_layers_layers_css_cjs = require("../../../lib/css/layers/layers.css.cjs");
+fileScope.setFileScope("src/components/form/Switch/switch.css.ts", "blocks");
 const container = css.style({
   "@layer": {
     [styles_lib_css_layers_layers_css_cjs.blocksLayer]: {

package/dist/styles/components/{Switch → form/Switch}/switch.css.mjs

@@ -1,7 +1,7 @@
 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/Switch/switch.css.ts?used", "blocks");
+import { blocksLayer } from "../../../lib/css/layers/layers.css.mjs";
+setFileScope("src/components/form/Switch/switch.css.ts", "blocks");
 const container = style({
   "@layer": {
     [blocksLayer]: {

package/dist/styles/components/other/BlocksProvider/BlocksProvider.cjs

@@ -0,0 +1,20 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const styles_lib_css_atoms_sprinkles_css_cjs = require("../../../lib/css/atoms/sprinkles.css.cjs");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(styles_components_display_Divider_Divider_cjs.BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: styles_components_display_Divider_Divider_cjs.classnames(theme.vars, styles_lib_css_atoms_sprinkles_css_cjs.atoms({ fontFamily: "primary" }), className),
+      ...restProps,
+      children
+    }
+  ) });
+};
+exports.BlocksProvider = BlocksProvider;

package/dist/styles/components/other/BlocksProvider/BlocksProvider.mjs

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { atoms } from "../../../lib/css/atoms/sprinkles.css.mjs";
+import { BlocksProviderContext, classnames } from "../../display/Divider/Divider.mjs";
+const BlocksProvider = ({
+  children,
+  theme,
+  className,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(BlocksProviderContext.Provider, { value: theme, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classnames(theme.vars, atoms({ fontFamily: "primary" }), className),
+      ...restProps,
+      children
+    }
+  ) });
+};
+export {
+  BlocksProvider
+};

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

@@ -0,0 +1,245 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const styles_components_display_Divider_Divider_cjs = require("../../display/Divider/Divider.cjs");
+const styles_components_overlay_Dialog_dialog_css_cjs = require("./dialog.css.cjs");
+const reactDom = require("react-dom");
+const styles_components_other_BlocksProvider_BlocksProvider_cjs = require("../../other/BlocksProvider/BlocksProvider.cjs");
+const Portal = ({ children, container }) => {
+  const context = styles_components_display_Divider_Divider_cjs.useTheme();
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(styles_components_other_BlocksProvider_BlocksProvider_cjs.BlocksProvider, { theme: context, children }),
+    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(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback();
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+const useLayer = () => {
+  const layerRef = react.useRef();
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = void 0;
+      }
+    },
+    []
+  );
+  return () => {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  };
+};
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+const isBrowser = typeof window !== "undefined";
+const useRestoreFocus = (active) => {
+  const target = react.useRef(null);
+  if (isBrowser && active && !target.current) {
+    target.current = document.activeElement;
+  }
+  react.useEffect(() => {
+    if (target.current && !active && target.current instanceof HTMLElement) {
+      target.current.focus();
+    }
+    if (!active) {
+      target.current = null;
+    }
+  }, [active]);
+};
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = react.useState(open);
+  const hide = react.useCallback(() => {
+    setVisible(false);
+  }, []);
+  react.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+function hasAnimationDuration(element) {
+  if (!element) {
+    return false;
+  }
+  const style = window.getComputedStyle(element);
+  return style.transitionDuration !== "0s" || style.animationDuration !== "0s";
+}
+const DialogContext = react.createContext(void 0);
+const useNestedDialog = (open) => {
+  const parentDialog = react.useContext(DialogContext);
+  react.useEffect(() => {
+    if (!parentDialog || !open) {
+      return;
+    }
+    parentDialog.setEnabled(false);
+    return () => {
+      parentDialog.setEnabled(true);
+    };
+  }, [parentDialog, open]);
+  return !!parentDialog;
+};
+const Dialog = ({
+  children,
+  open,
+  className,
+  onRequestClose,
+  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(
+    (event) => {
+      if (event.target === event.currentTarget) {
+        onRequestClose();
+      }
+    },
+    [onRequestClose]
+  );
+  useFocusLock({ ref: dialogRef, active: open && enabled });
+  useRestoreFocus(open);
+  const isNested = useNestedDialog(visible);
+  usePreventBodyScroll(visible && !isNested);
+  useKeyboard("Escape", onRequestClose, { enabled: open && enabled });
+  useIsomorphicLayoutEffect(() => {
+    var _a, _b;
+    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", "");
+        (_b2 = dialogRef.current) == null ? void 0 : _b2.setAttribute("data-open", "");
+      });
+    });
+    return () => {
+      cancelAnimationFrame(timer);
+    };
+  }, [open, visible]);
+  const onAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      hide();
+    }
+  }, [hide, open]);
+  react.useEffect(() => {
+    if (open) {
+      return;
+    }
+    if (!hasAnimationDuration(dialogRef.current)) {
+      hide();
+    }
+  }, [hide, open]);
+  if (!visible) {
+    return null;
+  }
+  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,
+    {
+      ref: backdropRef,
+      className: styles_components_display_Divider_Divider_cjs.classnames(styles_components_overlay_Dialog_dialog_css_cjs.backdrop, backdropClassName),
+      "data-open": dataOpen,
+      onClick: onBackdropClick,
+      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
+        }
+      )
+    }
+  ) }) });
+};
+exports.Dialog = Dialog;
+exports.Portal = Portal;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useKeyboard = useKeyboard;
+exports.usePreventBodyScroll = usePreventBodyScroll;