@blockle/blocks-react 3.0.1 → 3.2.0

package/dist/components/typography/Text/Text.js

@@ -3,14 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import { classnames } from "@blockle/blocks-core";
 import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
 import { Box } from "../../layout/Box/Box.js";
+import { textOverflowClassName } from "../textOverflow.js";
 import { text } from "./text.css.js";
 const Text = ({
   asChild,
   children,
   className,
   color,
+  lineClamp,
   ref,
   tag,
+  truncate,
   ...restProps
 }) => {
   const Component = tag ?? "span";
@@ -22,7 +25,12 @@ const Text = ({
     Box,
     {
       asChild: true,
-      className: classnames(text, themeClassName, className),
+      className: classnames(
+        text,
+        themeClassName,
+        textOverflowClassName("Text", { lineClamp, truncate }),
+        className
+      ),
       color,
       ...restProps,
       children: asChild ? children : (

package/dist/components/typography/textOverflow.css.d.ts

@@ -0,0 +1,3 @@
+export declare const lineClamp: Record<1 | 2 | 3 | 4 | 5, string>;
+export declare const truncate: string;
+//# sourceMappingURL=textOverflow.css.d.ts.map

package/dist/components/typography/textOverflow.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textOverflow.css.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textOverflow.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,mCAYrB,CAAC;AAEF,eAAO,MAAM,QAAQ,QASnB,CAAC"}

package/dist/components/typography/textOverflow.css.js

@@ -0,0 +1,32 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { styleVariants, style } from "@vanilla-extract/css";
+setFileScope("src/components/typography/textOverflow.css.ts", "@blockle/blocks-react");
+const lineClamp = styleVariants(
+  { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 },
+  (lines) => ({
+    "@layer": {
+      [layers.molecule]: {
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: lines,
+        overflow: "hidden"
+      }
+    }
+  })
+);
+const truncate = style({
+  "@layer": {
+    [layers.molecule]: {
+      display: "block",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    }
+  }
+});
+endFileScope();
+export {
+  lineClamp,
+  truncate
+};

package/dist/components/typography/textOverflow.d.ts

@@ -0,0 +1,9 @@
+import * as styles from './textOverflow.css.js';
+export type TextOverflowProps = {
+    /** Clamps the text to this many lines and ends it in an ellipsis. */
+    lineClamp?: keyof typeof styles.lineClamp;
+    /** Keeps the text on one line and ends the overflow in an ellipsis. */
+    truncate?: boolean;
+};
+export declare const textOverflowClassName: (component: string, { lineClamp, truncate }: TextOverflowProps) => string | undefined;
+//# sourceMappingURL=textOverflow.d.ts.map

package/dist/components/typography/textOverflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textOverflow.d.ts","sourceRoot":"","sources":["../../../src/components/typography/textOverflow.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,uBAAuB,CAAC;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,WAAW,MAAM,EACjB,yBAAyB,iBAAiB,uBAa3C,CAAC"}

package/dist/components/typography/textOverflow.js

@@ -0,0 +1,10 @@
+import { lineClamp, truncate } from "./textOverflow.css.js";
+const textOverflowClassName = (component, { lineClamp: lineClamp$1, truncate: truncate$1 }) => {
+  if (lineClamp$1 !== void 0) {
+    return lineClamp[lineClamp$1];
+  }
+  return truncate$1 ? truncate : void 0;
+};
+export {
+  textOverflowClassName
+};

package/dist/hooks/useClickOutside/useClickOutside.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IAuBF,CAAC"}
+{"version":3,"file":"useClickOutside.d.ts","sourceRoot":"","sources":["../../../src/hooks/useClickOutside/useClickOutside.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,KAAK,sBAAsB,GAAG;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,eAAO,MAAM,eAAe,GAC1B,KAAK,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,gBAAgB,MAAM,IAAI,EAC1B,cAAoB,sBAA2B,KAC9C,IA0DF,CAAC"}

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -1,23 +1,43 @@
 "use client";
-import { useEffect } from "react";
+import { useRef, useEffect } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
 const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  const onClickOutsideRef = useRef(onClickOutside);
+  useIsomorphicLayoutEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }, [onClickOutside]);
   useEffect(() => {
     if (!enabled) {
       return;
     }
-    const listener = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onClickOutside();
+    let pointerInside = false;
+    const isInside = (event) => ref.current !== null && event.composedPath().includes(ref.current);
+    const onPointerDown = (event) => {
+      pointerInside = isInside(event);
+    };
+    const onPointerUp = (event) => {
+      pointerInside ||= isInside(event);
+    };
+    const onClick = (event) => {
+      const fromPointer = event.detail > 0;
+      const inside = fromPointer && pointerInside || isInside(event);
+      pointerInside = false;
+      if (ref.current && !inside) {
+        onClickOutsideRef.current();
       }
     };
     const rafId = requestAnimationFrame(() => {
-      document.addEventListener("click", listener);
+      document.addEventListener("pointerdown", onPointerDown, true);
+      document.addEventListener("pointerup", onPointerUp, true);
+      document.addEventListener("click", onClick);
     });
     return () => {
       cancelAnimationFrame(rafId);
-      document.removeEventListener("click", listener);
+      document.removeEventListener("pointerdown", onPointerDown, true);
+      document.removeEventListener("pointerup", onPointerUp, true);
+      document.removeEventListener("click", onClick);
     };
-  }, [ref, onClickOutside, enabled]);
+  }, [ref, enabled]);
 };
 export {
   useClickOutside

package/dist/hooks/useModalDialog/useModalDialog.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shows a <dialog> as modal while `open` is true, and keeps it rendered
+ * (`visible`) until its closing animation has ended.
+ *
+ * The dialog also closes whenever the effect is cleaned up while open, such as
+ * when React hides it in an <Activity> or unmounts it, so it never lingers in
+ * the top layer. Revealing it again shows it as modal.
+ */
+export declare const useModalDialog: (dialogRef: React.RefObject<HTMLDialogElement | null>, open: boolean) => {
+    visible: boolean;
+    onAnimationEnd: () => void;
+};
+//# sourceMappingURL=useModalDialog.d.ts.map

package/dist/hooks/useModalDialog/useModalDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalDialog.d.ts","sourceRoot":"","sources":["../../../src/hooks/useModalDialog/useModalDialog.ts"],"names":[],"mappings":"AAOA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,GACzB,WAAW,KAAK,CAAC,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,EACpD,MAAM,OAAO;;;CA+Cd,CAAC"}

package/dist/hooks/useModalDialog/useModalDialog.js

@@ -0,0 +1,39 @@
+"use client";
+import { hasAnimationDuration } from "@blockle/blocks-core";
+import { useState, useCallback } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const useModalDialog = (dialogRef, open) => {
+  const [visible, setVisible] = useState(open);
+  useIsomorphicLayoutEffect(() => {
+    const dialog = dialogRef.current;
+    if (open && visible) {
+      if (!dialog?.showModal) {
+        return;
+      }
+      if (dialog.open) {
+        dialog.close();
+      }
+      dialog.showModal();
+      return () => {
+        dialog.close();
+      };
+    }
+    if (open) {
+      setVisible(true);
+      return;
+    }
+    if (!hasAnimationDuration(dialog)) {
+      setVisible(false);
+    }
+    dialog?.close?.();
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  return { visible, onAnimationEnd };
+};
+export {
+  useModalDialog
+};

package/dist/icons/icons.d.ts

@@ -0,0 +1,8 @@
+type IconProps = Pick<React.SVGProps<SVGSVGElement>, 'className' | 'style'>;
+export declare const CheckIcon: React.FC<IconProps>;
+export declare const ChevronDownIcon: React.FC<IconProps>;
+export declare const MinusIcon: React.FC<IconProps>;
+export declare const PlusIcon: React.FC<IconProps>;
+export declare const CloseIcon: React.FC<IconProps>;
+export {};
+//# sourceMappingURL=icons.d.ts.map

package/dist/icons/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/icons/icons.tsx"],"names":[],"mappings":"AAIA,KAAK,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,CAAC;AA2B5E,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEzC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAS/C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEzC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAExC,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEzC,CAAC"}

package/dist/icons/icons.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+const StrokeIcon = ({
+  path,
+  strokeWidth = 2,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: path })
+  }
+);
+const CheckIcon = (props) => /* @__PURE__ */ jsx(StrokeIcon, { path: "m4.5 12.75 6 6 9-13.5", strokeWidth: 1.5, ...props });
+const ChevronDownIcon = (props) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", ...props, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "m11.625 14.3666 7.9365-7.653c.5241-.5055 1.3133-.4372 1.7625.1525.4493.5897.3886 1.4774-.1355 1.9829l-8.75 8.4375c-.4681.4513-1.1589.4513-1.627 0l-8.75-8.4375c-.5241-.5055-.5848-1.3932-.1356-1.9829.4493-.5897 1.2385-.658 1.7626-.1525l7.9365 7.653Z",
+    clipRule: "evenodd"
+  }
+) });
+const MinusIcon = (props) => /* @__PURE__ */ jsx(StrokeIcon, { path: "M5 12h14", ...props });
+const PlusIcon = (props) => /* @__PURE__ */ jsx(StrokeIcon, { path: "M12 5v14M5 12h14", ...props });
+const CloseIcon = (props) => /* @__PURE__ */ jsx(StrokeIcon, { path: "M18 6 6 18M6 6l12 12", ...props });
+export {
+  CheckIcon,
+  ChevronDownIcon,
+  CloseIcon,
+  MinusIcon,
+  PlusIcon
+};

package/dist/index.d.ts

@@ -2,14 +2,16 @@ export { VisuallyHidden, type VisuallyHiddenProps, } from './components/accessib
 export { Divider, type DividerProps, } from './components/display/Divider/Divider.js';
 export { createIconMask } from './components/display/Icon/createIconMask.js';
 export { IconMask, type IconMaskProps, } from './components/display/Icon/IconMask.js';
+export { Tag, type TagProps } from './components/display/Tag/Tag.js';
 export { Alert, type AlertProps, } from './components/feedback/Alert/Alert.js';
 export { Progress, type ProgressProps, } from './components/feedback/Progress/Progress.js';
 export { Skeleton, type SkeletonProps, } from './components/feedback/Skeleton/Skeleton.js';
 export { Spinner, type SpinnerProps, } from './components/feedback/Spinner/Spinner.js';
-export { ToastProvider, type ToastProviderProps, } from './components/feedback/Toast/ToastProvider.js';
+export { type ToastPlacement, ToastProvider, type ToastProviderProps, } from './components/feedback/Toast/ToastProvider.js';
 export { type ToastProps, useToast, } from './components/feedback/Toast/useToast.js';
 export { Button, type ButtonProps } from './components/form/Button/Button.js';
 export { Checkbox, type CheckboxProps, } from './components/form/Checkbox/Checkbox.js';
+export { IconButton, type IconButtonProps, } from './components/form/IconButton/IconButton.js';
 export { Label, type LabelProps } from './components/form/Label/Label.js';
 export { NumericInput, type NumericInputProps, } from './components/form/NumericInput/NumericInput.js';
 export { Radio, type RadioProps } from './components/form/Radio/Radio.js';
@@ -27,8 +29,9 @@ export { Stack, type StackProps } from './components/layout/Stack/Stack.js';
 export { Link, type LinkProps } from './components/navigation/Link/Link.js';
 export { Dialog, type DialogProps, } from './components/overlay/Dialog/Dialog.js';
 export { Drawer, type DrawerProps, } from './components/overlay/Drawer/Drawer.js';
-export { Popover, type PopoverProps, } from './components/overlay/Popover/Popover.js';
+export { Popover, type PopoverPlacement, type PopoverProps, } from './components/overlay/Popover/Popover.js';
 export { Portal, type PortalProps, } from './components/overlay/Portal/Portal.js';
+export type { RequestCloseReason } from './components/overlay/requestCloseReason.js';
 export { Tooltip, type TooltipProps, } from './components/overlay/Tooltip/Tooltip.js';
 export { BlocksProvider, type BlocksProviderProps, } from './components/providers/BlocksProvider/BlocksProvider.js';
 export { Heading, type HeadingProps, } from './components/typography/Heading/Heading.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -2,6 +2,7 @@ import { VisuallyHidden } from "./components/accessibility/VisuallyHidden/Visual
 import { Divider } from "./components/display/Divider/Divider.js";
 import { createIconMask } from "./components/display/Icon/createIconMask.js";
 import { IconMask } from "./components/display/Icon/IconMask.js";
+import { Tag } from "./components/display/Tag/Tag.js";
 import { Alert } from "./components/feedback/Alert/Alert.js";
 import { Progress } from "./components/feedback/Progress/Progress.js";
 import { Skeleton } from "./components/feedback/Skeleton/Skeleton.js";
@@ -10,6 +11,7 @@ import { ToastProvider } from "./components/feedback/Toast/ToastProvider.js";
 import { useToast } from "./components/feedback/Toast/useToast.js";
 import { Button } from "./components/form/Button/Button.js";
 import { Checkbox } from "./components/form/Checkbox/Checkbox.js";
+import { IconButton } from "./components/form/IconButton/IconButton.js";
 import { Label } from "./components/form/Label/Label.js";
 import { NumericInput } from "./components/form/NumericInput/NumericInput.js";
 import { Radio } from "./components/form/Radio/Radio.js";
@@ -53,6 +55,7 @@ export {
   Grid,
   GridItem,
   Heading,
+  IconButton,
   IconMask,
   Inline,
   Label,
@@ -68,6 +71,7 @@ export {
   Spinner,
   Stack,
   Switch,
+  Tag,
   Text,
   TextInput,
   Textarea,

package/dist/testUtils/browser/consumerStyles.css.d.ts

@@ -0,0 +1,2 @@
+export declare const squareMarkers: string;
+//# sourceMappingURL=consumerStyles.css.d.ts.map

package/dist/testUtils/browser/consumerStyles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consumerStyles.css.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/consumerStyles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,QAAiC,CAAC"}

package/dist/testUtils/browser/pointer.d.ts

@@ -0,0 +1,18 @@
+export type Point = {
+    x: number;
+    y: number;
+};
+/**
+ * Dispatches a trusted mouse event at a point in the test frame. Chromium only.
+ */
+export declare const mouse: (type: "mousePressed" | "mouseMoved" | "mouseReleased", point: Point) => Promise<void>;
+/**
+ * Presses the left button at `from`, moves to `to` and releases it there.
+ */
+export declare const press: (from: Point, to?: Point) => Promise<void>;
+export declare const centerOf: (element: Element) => Point;
+/**
+ * The bottom right corner of the viewport, clear of the overlays under test.
+ */
+export declare const outside: () => Point;
+//# sourceMappingURL=pointer.d.ts.map

package/dist/testUtils/browser/pointer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pointer.d.ts","sourceRoot":"","sources":["../../../src/testUtils/browser/pointer.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAgB7C;;GAEG;AACH,eAAO,MAAM,KAAK,GAChB,MAAM,cAAc,GAAG,YAAY,GAAG,eAAe,EACrD,OAAO,KAAK,kBASb,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,GAAU,MAAM,KAAK,EAAE,KAAI,KAAY,kBAQxD,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,SAAS,OAAO,KAAG,KAI3C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,OAAO,QAAO,KAGzB,CAAC"}

package/dist/testUtils/testTheme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KAuMvB,CAAC"}
+{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KAyMvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "3.0.1",
+  "version": "3.2.0",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -34,7 +34,7 @@
     "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
-    "@blockle/blocks-core": ">=3.0.x",
+    "@blockle/blocks-core": ">=3.2.x",
     "@blockle/blocks-react-slot": ">=1.2.x",
     "@vanilla-extract/css": "^1.18.0",
     "react": ">=19.1.0",

package/dist/components/feedback/Alert/Alert.css.d.ts

@@ -1,2 +0,0 @@
-export declare const closeButton: string;
-//# sourceMappingURL=Alert.css.d.ts.map

package/dist/components/feedback/Alert/Alert.css.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/Alert/Alert.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,WAAW,QAMtB,CAAC"}

package/dist/components/feedback/Alert/Alert.css.js

@@ -1,15 +0,0 @@
-import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { layers } from "@blockle/blocks-core";
-import { style } from "@vanilla-extract/css";
-setFileScope("src/components/feedback/Alert/Alert.css.ts", "@blockle/blocks-react");
-const closeButton = style({
-  "@layer": {
-    [layers.molecule]: {
-      color: "currentColor"
-    }
-  }
-});
-endFileScope();
-export {
-  closeButton
-};

package/dist/components/overlay/Dialog/dialogHelper.d.ts

@@ -1,7 +0,0 @@
-type DialogContextValue = {
-    setEnabled: (active: boolean) => void;
-};
-export declare const DialogContext: import('react').Context<DialogContextValue | undefined>;
-export declare const useNestedDialog: (open: boolean) => boolean;
-export {};
-//# sourceMappingURL=dialogHelper.d.ts.map

package/dist/components/overlay/Dialog/dialogHelper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"dialogHelper.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Dialog/dialogHelper.tsx"],"names":[],"mappings":"AAIA,KAAK,kBAAkB,GAAG;IACxB,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF,eAAO,MAAM,aAAa,yDAEzB,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,MAAM,OAAO,KAAG,OAgB/C,CAAC"}

package/dist/components/overlay/Dialog/dialogHelper.js

@@ -1,22 +0,0 @@
-"use client";
-import { useContext, useEffect, createContext } from "react";
-const DialogContext = createContext(
-  void 0
-);
-const useNestedDialog = (open) => {
-  const parentDialog = useContext(DialogContext);
-  useEffect(() => {
-    if (!parentDialog || !open) {
-      return;
-    }
-    parentDialog.setEnabled(false);
-    return () => {
-      parentDialog.setEnabled(true);
-    };
-  }, [parentDialog, open]);
-  return !!parentDialog;
-};
-export {
-  DialogContext,
-  useNestedDialog
-};