@cube-dev/ui-kit 0.114.0 → 0.115.0

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -0,0 +1,135 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { AlertDialogZone } from "./AlertDialogZone.js";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import invariant from "tiny-invariant";
+
+//#region src/components/overlays/AlertDialog/AlertDialogApiProvider.tsx
+const DialogApiContext = createContext(null);
+/**
+* @internal Do not use it in your code!
+*/
+function AlertDialogApiProvider(props) {
+	const [openedDialog, setOpenedDialog] = useState(null);
+	const id = useRef(0);
+	const api = useMemo(() => ({ open: (dialogProps, params = {}) => {
+		const { onDismiss, ...restProps } = dialogProps;
+		const { cancelToken } = params;
+		const currentId = ++id.current;
+		const currentDialog = {
+			props: null,
+			meta: {
+				id: currentId,
+				isClosed: false,
+				isVisible: true
+			}
+		};
+		const close = () => {
+			if (currentDialog.meta.isClosed) return;
+			currentDialog.meta.isClosed = true;
+			params.cancelToken?.removeEventListener("abort", close);
+			setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : {
+				props: currentState.props,
+				meta: {
+					...currentState.meta,
+					isVisible: false
+				}
+			});
+			setTimeout(() => setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : null), 300);
+		};
+		if (cancelToken?.aborted) return new Promise(() => {});
+		cancelToken?.addEventListener("abort", close, { once: true });
+		currentDialog.meta.promise = new Promise((resolve, reject) => {
+			currentDialog.meta.resolve = (status) => {
+				close();
+				resolve(status);
+			};
+			currentDialog.meta.reject = (reason) => {
+				close();
+				reject(reason);
+			};
+		});
+		currentDialog.props = {
+			...restProps,
+			onDismiss: (e) => {
+				onDismiss?.(e);
+				currentDialog.meta.reject(void 0);
+			}
+		};
+		setOpenedDialog((openedDialog) => {
+			if (openedDialog !== null) {
+				currentDialog.meta.reject(/* @__PURE__ */ new Error("Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time"));
+				return openedDialog;
+			}
+			return currentDialog;
+		});
+		return currentDialog.meta.promise;
+	} }), []);
+	return /* @__PURE__ */ jsxs(DialogApiContext.Provider, {
+		value: api,
+		children: [/* @__PURE__ */ jsx(AlertDialogZone, { openedDialog }), props.children]
+	});
+}
+/**
+* Hook gives the ability to open `<AlertDialog />` imperatively.
+*
+* ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;
+* that means this api will reject all dialogs when there is already open one
+*
+* @example calling in a side effect
+* const alertDialogAPI = useAlertDialogAPI();
+*
+* useEffect(() => {
+*   const abortDialog = new AbortController();
+*   const openedDialog = alertDialogAPI.open({
+*     title: 'Are you sure?',
+*     content: <Paragraph>Test content</Paragraph>
+*   }, {
+*      cancelToken: abortDialog.signal
+*   });
+*
+*   openedDialog
+*     .then((status) => {
+*       // User confirmed or used secondary action
+*       if (status === 'confirm') {
+*         // Handle confirm
+*       } else if (status === 'secondary') {
+*         // Handle secondary action
+*       }
+*     })
+*     .catch(() => {
+*       // User cancelled or dismissed the dialog
+*       // Handle cancel/dismiss
+*     })
+*
+*   return () => {
+*     abortDialog.abort();
+*   }
+* }, [])
+*
+* @example opening dialog on Button click.
+* const alertDialogAPI = useAlertDialogAPI();
+*
+* const onPress = useCallback(() => {
+*   alertDialogAPI.open({...})
+*     .then((status) => {
+*       if (status === 'confirm') {
+*         // Handle confirm
+*       }
+*     })
+*     .catch(() => {
+*       // Handle cancel/dismiss
+*     })
+* }, [])
+*
+* return <Button onPress={onPress}>New issue</Button>
+*/
+function useAlertDialogAPI() {
+	const api = useContext(DialogApiContext);
+	invariant(api !== null, "You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component");
+	return api;
+}
+
+//#endregion
+export { AlertDialogApiProvider, useAlertDialogAPI };
+//# sourceMappingURL=AlertDialogApiProvider.js.map

package/dist/components/overlays/AlertDialog/AlertDialogApiProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialogApiProvider.js","names":[],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogApiProvider.tsx"],"sourcesContent":["import { createContext, useContext, useMemo, useRef, useState } from 'react';\nimport invariant from 'tiny-invariant';\n\nimport { AlertDialogZone } from './AlertDialogZone';\nimport { AlertDialogResolveStatus, Dialog, DialogProps } from './types';\n\nconst DialogApiContext = createContext<DialogApi | null>(null);\n\ninterface DialogApi {\n  open: (\n    dialogProps: DialogProps,\n    params?: DialogApiParams,\n  ) => Promise<AlertDialogResolveStatus>;\n}\n\ninterface DialogApiParams {\n  cancelToken?: AbortSignal;\n}\n\n/**\n * @internal Do not use it in your code!\n */\nexport function AlertDialogApiProvider(props) {\n  const [openedDialog, setOpenedDialog] = useState<Dialog | null>(null);\n  const id = useRef(0);\n\n  const api = useMemo<DialogApi>(\n    () => ({\n      open: (dialogProps, params = {}) => {\n        const { onDismiss, ...restProps } = dialogProps;\n        const { cancelToken } = params;\n        const currentId = ++id.current;\n        const currentDialog = {\n          props: null,\n          meta: { id: currentId, isClosed: false, isVisible: true },\n        } as unknown as Dialog;\n\n        const close = () => {\n          if (currentDialog.meta.isClosed) return;\n\n          currentDialog.meta.isClosed = true;\n          params.cancelToken?.removeEventListener('abort', close);\n\n          setOpenedDialog((currentState) =>\n            currentState?.meta.id !== currentId\n              ? currentState\n              : {\n                  props: currentState.props,\n                  meta: { ...currentState.meta, isVisible: false },\n                },\n          );\n\n          setTimeout(\n            () =>\n              setOpenedDialog((currentState) =>\n                currentState?.meta.id !== currentId ? currentState : null,\n              ),\n            300,\n          );\n        };\n\n        if (cancelToken?.aborted)\n          return new Promise<AlertDialogResolveStatus>(() => {});\n        cancelToken?.addEventListener('abort', close, { once: true });\n\n        currentDialog.meta.promise = new Promise((resolve, reject) => {\n          currentDialog.meta.resolve = (status: AlertDialogResolveStatus) => {\n            close();\n            resolve(status);\n          };\n          currentDialog.meta.reject = (reason) => {\n            close();\n            reject(reason);\n          };\n        });\n\n        currentDialog.props = {\n          ...restProps,\n          onDismiss: (e) => {\n            onDismiss?.(e);\n            currentDialog.meta.reject(undefined);\n          },\n        };\n\n        setOpenedDialog((openedDialog) => {\n          // we already have opened dialog, so we reject opening another\n          if (openedDialog !== null) {\n            currentDialog.meta.reject(\n              new Error(\n                \"Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time\",\n              ),\n            );\n\n            return openedDialog;\n          }\n\n          return currentDialog;\n        });\n\n        return currentDialog.meta.promise;\n      },\n    }),\n    [],\n  );\n\n  return (\n    <DialogApiContext.Provider value={api}>\n      <AlertDialogZone openedDialog={openedDialog} />\n      {props.children}\n    </DialogApiContext.Provider>\n  );\n}\n\n/**\n * Hook gives the ability to open `<AlertDialog />` imperatively.\n *\n * ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;\n * that means this api will reject all dialogs when there is already open one\n *\n * @example calling in a side effect\n * const alertDialogAPI = useAlertDialogAPI();\n *\n * useEffect(() => {\n *   const abortDialog = new AbortController();\n *   const openedDialog = alertDialogAPI.open({\n *     title: 'Are you sure?',\n *     content: <Paragraph>Test content</Paragraph>\n *   }, {\n *      cancelToken: abortDialog.signal\n *   });\n *\n *   openedDialog\n *     .then((status) => {\n *       // User confirmed or used secondary action\n *       if (status === 'confirm') {\n *         // Handle confirm\n *       } else if (status === 'secondary') {\n *         // Handle secondary action\n *       }\n *     })\n *     .catch(() => {\n *       // User cancelled or dismissed the dialog\n *       // Handle cancel/dismiss\n *     })\n *\n *   return () => {\n *     abortDialog.abort();\n *   }\n * }, [])\n *\n * @example opening dialog on Button click.\n * const alertDialogAPI = useAlertDialogAPI();\n *\n * const onPress = useCallback(() => {\n *   alertDialogAPI.open({...})\n *     .then((status) => {\n *       if (status === 'confirm') {\n *         // Handle confirm\n *       }\n *     })\n *     .catch(() => {\n *       // Handle cancel/dismiss\n *     })\n * }, [])\n *\n * return <Button onPress={onPress}>New issue</Button>\n */\nexport function useAlertDialogAPI(): DialogApi {\n  const api = useContext(DialogApiContext);\n\n  invariant(\n    api !== null,\n    \"You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component\",\n  );\n\n  return api;\n}\n"],"mappings":";;;;;;;AAMA,MAAM,mBAAmB,cAAgC,KAAK;;;;AAgB9D,SAAgB,uBAAuB,OAAO;CAC5C,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CACrE,MAAM,KAAK,OAAO,EAAE;CAEpB,MAAM,MAAM,eACH,EACL,OAAO,aAAa,SAAS,EAAE,KAAK;EAClC,MAAM,EAAE,WAAW,GAAG,cAAc;EACpC,MAAM,EAAE,gBAAgB;EACxB,MAAM,YAAY,EAAE,GAAG;EACvB,MAAM,gBAAgB;GACpB,OAAO;GACP,MAAM;IAAE,IAAI;IAAW,UAAU;IAAO,WAAW;IAAM;GAC1D;EAED,MAAM,cAAc;AAClB,OAAI,cAAc,KAAK,SAAU;AAEjC,iBAAc,KAAK,WAAW;AAC9B,UAAO,aAAa,oBAAoB,SAAS,MAAM;AAEvD,oBAAiB,iBACf,cAAc,KAAK,OAAO,YACtB,eACA;IACE,OAAO,aAAa;IACpB,MAAM;KAAE,GAAG,aAAa;KAAM,WAAW;KAAO;IACjD,CACN;AAED,oBAEI,iBAAiB,iBACf,cAAc,KAAK,OAAO,YAAY,eAAe,KACtD,EACH,IACD;;AAGH,MAAI,aAAa,QACf,QAAO,IAAI,cAAwC,GAAG;AACxD,eAAa,iBAAiB,SAAS,OAAO,EAAE,MAAM,MAAM,CAAC;AAE7D,gBAAc,KAAK,UAAU,IAAI,SAAS,SAAS,WAAW;AAC5D,iBAAc,KAAK,WAAW,WAAqC;AACjE,WAAO;AACP,YAAQ,OAAO;;AAEjB,iBAAc,KAAK,UAAU,WAAW;AACtC,WAAO;AACP,WAAO,OAAO;;IAEhB;AAEF,gBAAc,QAAQ;GACpB,GAAG;GACH,YAAY,MAAM;AAChB,gBAAY,EAAE;AACd,kBAAc,KAAK,OAAO,OAAU;;GAEvC;AAED,mBAAiB,iBAAiB;AAEhC,OAAI,iBAAiB,MAAM;AACzB,kBAAc,KAAK,uBACjB,IAAI,MACF,+GACD,CACF;AAED,WAAO;;AAGT,UAAO;IACP;AAEF,SAAO,cAAc,KAAK;IAE7B,GACD,EAAE,CACH;AAED,QACE,qBAAC,iBAAiB;EAAS,OAAO;aAChC,oBAAC,mBAA8B,eAAgB,EAC9C,MAAM;GACmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DhC,SAAgB,oBAA+B;CAC7C,MAAM,MAAM,WAAW,iBAAiB;AAExC,WACE,QAAQ,MACR,4HACD;AAED,QAAO"}

package/dist/components/overlays/AlertDialog/AlertDialogZone.d.ts

@@ -0,0 +1,3 @@
+
+import "./types.js";
+import "react/jsx-runtime";

package/dist/components/overlays/AlertDialog/AlertDialogZone.js

@@ -0,0 +1,63 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { Portal } from "../../portal/Portal.js";
+import { DialogContainer } from "../Dialog/DialogContainer.js";
+import { _AlertDialog } from "./AlertDialog.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/AlertDialog/AlertDialogZone.tsx
+const PORTAL_KEY = "AlertDialogZone";
+/**
+* @internal Do not use it
+*/
+function AlertDialogZone(props) {
+	const { openedDialog } = props;
+	if (openedDialog === null) return /* @__PURE__ */ jsx(Portal, {}, PORTAL_KEY);
+	const { type, isDismissable = true, actions, onDismiss, content, ...options } = openedDialog.props;
+	const { resolve, reject, isVisible, dialogType } = openedDialog.meta;
+	const _actions = (() => {
+		const mergeActionProps = (action, status) => {
+			if (typeof action === "undefined") return;
+			if (typeof action === "boolean") return action ? { onPress: () => resolve(status) } : false;
+			const onPress = action.onPress;
+			return {
+				...action,
+				onPress: (e) => {
+					onPress?.(e);
+					resolve(status);
+				}
+			};
+		};
+		if (typeof actions === "undefined") return {};
+		return {
+			confirm: mergeActionProps(actions.confirm, "confirm"),
+			secondary: mergeActionProps(actions.secondary, "secondary"),
+			cancel: typeof actions.cancel === "undefined" ? void 0 : typeof actions.cancel === "boolean" ? actions.cancel ? { onPress: () => reject(void 0) } : false : {
+				...actions.cancel,
+				onPress: (e) => {
+					actions.cancel.onPress?.(e);
+					reject(void 0);
+				}
+			}
+		};
+	})();
+	return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(DialogContainer, {
+		isOpen: isVisible,
+		isDismissable,
+		type,
+		onDismiss,
+		children: /* @__PURE__ */ jsx(_AlertDialog, {
+			noActions: dialogType === "form",
+			actions: _actions,
+			isHidden: !isVisible,
+			content: typeof content === "function" ? content({
+				resolve,
+				reject
+			}) : content,
+			...options
+		})
+	}) }, PORTAL_KEY);
+}
+
+//#endregion
+export { AlertDialogZone };
+//# sourceMappingURL=AlertDialogZone.js.map

package/dist/components/overlays/AlertDialog/AlertDialogZone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialogZone.js","names":["AlertDialog"],"sources":["../../../../src/components/overlays/AlertDialog/AlertDialogZone.tsx"],"sourcesContent":["import { Portal } from '../../portal';\nimport { DialogContainer } from '../Dialog';\n\nimport { AlertDialog, CubeAlertDialogActionsProps } from './AlertDialog';\nimport { AlertDialogResolveStatus, Dialog } from './types';\n\nimport type { CubeButtonProps } from '../../actions/Button/Button';\n\nexport interface DialogZoneProps {\n  openedDialog: Dialog | null;\n}\n\nconst PORTAL_KEY = 'AlertDialogZone';\n\n/**\n * @internal Do not use it\n */\nexport function AlertDialogZone(props: DialogZoneProps) {\n  const { openedDialog } = props;\n\n  if (openedDialog === null) return <Portal key={PORTAL_KEY} />;\n\n  const {\n    type,\n    isDismissable = true,\n    actions,\n    onDismiss,\n    content,\n    ...options\n  } = openedDialog.props;\n  const { resolve, reject, isVisible, dialogType } = openedDialog.meta;\n\n  const _actions: CubeAlertDialogActionsProps = (() => {\n    const mergeActionProps = <\n      T extends\n        | CubeAlertDialogActionsProps['confirm']\n        | CubeAlertDialogActionsProps['secondary'],\n    >(\n      action: T,\n      status: AlertDialogResolveStatus,\n    ): T => {\n      if (typeof action === 'undefined') {\n        return undefined as unknown as T;\n      }\n\n      if (typeof action === 'boolean') {\n        return (action\n          ? { onPress: () => resolve(status) }\n          : false) as unknown as T;\n      }\n\n      const onPress = action.onPress;\n\n      return {\n        ...(action as CubeButtonProps),\n        onPress: (e) => {\n          onPress?.(e);\n          resolve(status);\n        },\n      } as unknown as T;\n    };\n\n    if (typeof actions === 'undefined') return {};\n\n    return {\n      confirm: mergeActionProps(actions.confirm, 'confirm'),\n      secondary: mergeActionProps(actions.secondary, 'secondary'),\n      cancel:\n        typeof actions.cancel === 'undefined'\n          ? undefined\n          : typeof actions.cancel === 'boolean'\n            ? actions.cancel\n              ? { onPress: () => reject(undefined) }\n              : false\n            : {\n                ...(actions.cancel as CubeButtonProps),\n                onPress: (e) => {\n                  (actions.cancel as CubeButtonProps).onPress?.(e);\n                  reject(undefined);\n                },\n              },\n    };\n  })();\n\n  return (\n    <Portal key={PORTAL_KEY}>\n      <DialogContainer\n        isOpen={isVisible}\n        isDismissable={isDismissable}\n        type={type}\n        onDismiss={onDismiss}\n      >\n        <AlertDialog\n          noActions={dialogType === 'form'}\n          actions={_actions}\n          isHidden={!isVisible}\n          content={\n            typeof content === 'function'\n              ? content({ resolve, reject })\n              : content\n          }\n          {...options}\n        />\n      </DialogContainer>\n    </Portal>\n  );\n}\n"],"mappings":";;;;;;;AAYA,MAAM,aAAa;;;;AAKnB,SAAgB,gBAAgB,OAAwB;CACtD,MAAM,EAAE,iBAAiB;AAEzB,KAAI,iBAAiB,KAAM,QAAO,oBAAC,YAAY,WAAc;CAE7D,MAAM,EACJ,MACA,gBAAgB,MAChB,SACA,WACA,SACA,GAAG,YACD,aAAa;CACjB,MAAM,EAAE,SAAS,QAAQ,WAAW,eAAe,aAAa;CAEhE,MAAM,kBAA+C;EACnD,MAAM,oBAKJ,QACA,WACM;AACN,OAAI,OAAO,WAAW,YACpB;AAGF,OAAI,OAAO,WAAW,UACpB,QAAQ,SACJ,EAAE,eAAe,QAAQ,OAAO,EAAE,GAClC;GAGN,MAAM,UAAU,OAAO;AAEvB,UAAO;IACL,GAAI;IACJ,UAAU,MAAM;AACd,eAAU,EAAE;AACZ,aAAQ,OAAO;;IAElB;;AAGH,MAAI,OAAO,YAAY,YAAa,QAAO,EAAE;AAE7C,SAAO;GACL,SAAS,iBAAiB,QAAQ,SAAS,UAAU;GACrD,WAAW,iBAAiB,QAAQ,WAAW,YAAY;GAC3D,QACE,OAAO,QAAQ,WAAW,cACtB,SACA,OAAO,QAAQ,WAAW,YACxB,QAAQ,SACN,EAAE,eAAe,OAAO,OAAU,EAAE,GACpC,QACF;IACE,GAAI,QAAQ;IACZ,UAAU,MAAM;AACd,KAAC,QAAQ,OAA2B,UAAU,EAAE;AAChD,YAAO,OAAU;;IAEpB;GACV;KACC;AAEJ,QACE,oBAAC,oBACC,oBAAC;EACC,QAAQ;EACO;EACT;EACK;YAEX,oBAACA;GACC,WAAW,eAAe;GAC1B,SAAS;GACT,UAAU,CAAC;GACX,SACE,OAAO,YAAY,aACf,QAAQ;IAAE;IAAS;IAAQ,CAAC,GAC5B;GAEN,GAAI;IACJ;GACc,IAlBP,WAmBJ"}

package/dist/components/overlays/AlertDialog/index.d.ts

@@ -0,0 +1,4 @@
+
+import { CubeAlertDialogActionsProps, CubeAlertDialogProps, _AlertDialog } from "./AlertDialog.js";
+import { useAlertDialogAPI } from "./AlertDialogApiProvider.js";
+import "./AlertDialogZone.js";

package/dist/components/overlays/AlertDialog/types.d.ts

@@ -0,0 +1,22 @@
+
+import "../../../tasty/index.js";
+import { CubeDialogContainerProps } from "../Dialog/DialogContainer.js";
+import "../Dialog/index.js";
+import { CubeAlertDialogProps } from "./AlertDialog.js";
+import { ReactNode } from "react";
+import { AriaDialogProps } from "react-aria";
+
+//#region src/components/overlays/AlertDialog/types.d.ts
+interface DialogProps extends Omit<CubeDialogContainerProps, 'onDismiss' | 'children'>, Omit<CubeAlertDialogProps, 'type' | 'id' | 'content'> {
+  content: ReactNode | (({
+    resolve,
+    reject
+  }: {
+    resolve: any;
+    reject: any;
+  }) => ReactNode);
+}
+type AlertDialogResolveStatus = 'confirm' | 'secondary';
+//#endregion
+export { AlertDialogResolveStatus, DialogProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/overlays/Dialog/Dialog.d.ts

@@ -0,0 +1,30 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import { BaseProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps } from "../../../tasty/types.js";
+import "../../../tasty/index.js";
+import * as react from "react";
+import { ReactElement } from "react";
+import { AriaDialogProps } from "react-aria";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/overlays/Dialog/Dialog.d.ts
+interface CubeDialogProps extends Omit<BaseProps, 'role'>, AriaDialogProps, BaseStyleProps, BlockStyleProps, DimensionStyleProps {
+  /** The size of the dialog */
+  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';
+  /** Whether the dialog is dismissable */
+  isDismissable?: boolean;
+  /** Trigger when the dialog is dismissed */
+  onDismiss?: (arg?: any) => void;
+  /** That you can replace the close icon with */
+  closeIcon?: ReactElement;
+  closeButtonStyles?: Styles;
+  role?: 'dialog' | 'alertdialog';
+}
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+declare const Dialog: react.ForwardRefExoticComponent<CubeDialogProps & react.RefAttributes<_react_types_shared0.DOMRefValue<HTMLDivElement>>>;
+//#endregion
+export { CubeDialogProps, Dialog };
+//# sourceMappingURL=Dialog.d.ts.map

package/dist/components/overlays/Dialog/Dialog.js

@@ -0,0 +1,228 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, FLOW_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { SlotProvider } from "../../../utils/react/Slots.js";
+import { CloseIcon } from "../../../icons/CloseIcon.js";
+import { _ItemButton } from "../../actions/ItemButton/ItemButton.js";
+import { useOpenTransitionContext } from "../Modal/OpenTransition.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DismissButton, FocusScope, useDialog, useMessageFormatter } from "react-aria";
+import { useDOMRef } from "@react-spectrum/utils";
+import { createFocusManager } from "@react-aria/focus";
+
+//#region src/components/overlays/Dialog/Dialog.tsx
+const STYLES_LIST = [
+	...BASE_STYLES,
+	...DIMENSION_STYLES,
+	...BLOCK_STYLES,
+	...FLOW_STYLES
+];
+const DialogElement = tasty({
+	as: "section",
+	styles: {
+		display: "flex",
+		flow: "column",
+		fill: "#white",
+		pointerEvents: "auto",
+		outline: 0,
+		position: {
+			"": "relative",
+			"type=panel": "absolute"
+		},
+		width: {
+			"": "$min-dialog-size $dialog-size (100dvw - 8x)",
+			"type=fullscreen": "(100dvw - 8x) (100dvw - 8x)",
+			"type=fullscreenTakeover": "100dvw 100dvw",
+			"type=panel": "auto"
+		},
+		height: {
+			"": "auto (100dvh - 8x)",
+			"type=fullscreen": "(100dvh - 8x) (100dvh - 8x)",
+			"type=fullscreenTakeover | type=panel": "100dvh 100dvh",
+			"type=popover": "initial initial (50dvh - 5x)"
+		},
+		gap: 0,
+		border: {
+			"": false,
+			"type=popover": true
+		},
+		radius: {
+			"": "1cr",
+			"type=tray": "1cr top",
+			"type=fullscreenTakeover": "0r"
+		},
+		shadow: {
+			"": "$dialog-shadow",
+			"type=popover | type=panel": "$shadow"
+		},
+		top: {
+			"": false,
+			"type=modal": "((50vh - 50%) / -3)",
+			"type=panel": "auto"
+		},
+		"$dialog-title-padding-v": {
+			"": "1.5x",
+			"type=popover": "1x"
+		},
+		"$dialog-content-padding-v": {
+			"": "1.5x",
+			"type=popover": "1x"
+		},
+		"$dialog-padding-h": {
+			"": "1.5x",
+			"type=popover": "1x"
+		},
+		"$dialog-footer-v": {
+			"": "1.5x",
+			"type=popover": "1x"
+		},
+		"$dialog-content-gap": {
+			"": "1.5x",
+			"type=popover": "1x"
+		}
+	}
+});
+const CloseButton = tasty(_ItemButton, {
+	qa: "ModalCloseButton",
+	type: "neutral",
+	styles: {
+		position: "absolute",
+		top: "1x",
+		right: "1x"
+	}
+});
+const sizeMap = {
+	S: "small",
+	M: "medium",
+	L: "large"
+};
+const sizePxMap = {
+	small: 360,
+	medium: 479,
+	large: 798
+};
+const intlMessages = { "en-US": {
+	dismiss: "Dismiss",
+	alert: "Alert"
+} };
+/**
+* Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+* Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+*/
+const Dialog = forwardRef(function Dialog(props, ref) {
+	const isEntered = useOpenTransitionContext()?.transitionState === "entered";
+	const context = useDialogContext();
+	const content = useMemo(() => {
+		return /* @__PURE__ */ jsx(DialogContent, {
+			...props,
+			ref
+		}, "content");
+	}, [props, ref]);
+	const shouldContainFocus = isEntered && context.type !== "panel";
+	const previouslyFocusedRef = useRef(null);
+	useEffect(() => {
+		if (context.isOpen) previouslyFocusedRef.current = document.activeElement;
+	}, [context.isOpen]);
+	useEffect(() => {
+		if (!context.isOpen && previouslyFocusedRef.current) {
+			const elementToFocus = previouslyFocusedRef.current;
+			setTimeout(() => {
+				elementToFocus?.focus?.();
+			});
+			previouslyFocusedRef.current = null;
+		}
+	}, [context.isOpen]);
+	return /* @__PURE__ */ jsx(FocusScope, {
+		restoreFocus: true,
+		contain: shouldContainFocus,
+		children: content
+	});
+});
+const DialogContent = forwardRef(function DialogContent(props, ref) {
+	let { type = "modal", ...contextProps } = useDialogContext();
+	let { qa, children, size = "M", isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
+	size = sizeMap[size.toUpperCase()] || size;
+	const styles = extractStyles(otherProps, STYLES_LIST);
+	let formatMessage = useMessageFormatter(intlMessages);
+	let domRef = useDOMRef(ref);
+	let { dialogProps, titleProps } = useDialog(mergeProps$1(contextProps, props), domRef);
+	let dismissButton;
+	if (type === "popover" || type === "tray") dismissButton = /* @__PURE__ */ jsx(DismissButton, { onDismiss });
+	useEffect(() => {
+		if (contextProps.isOpen) setTimeout(() => {
+			if (domRef.current && !domRef.current.contains(document.activeElement)) {
+				const priorityElement = domRef.current.querySelector("input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]");
+				if (priorityElement) priorityElement.focus();
+				else if (!createFocusManager(domRef).focusFirst({ tabbable: true })) domRef.current.focus();
+			}
+		});
+	}, [contextProps.isOpen]);
+	let slots = {
+		title: {
+			level: 2,
+			preset: "h4",
+			...titleProps
+		},
+		content: { styles: {
+			flexGrow: 1,
+			padding: "$dialog-content-padding-v $dialog-padding-h",
+			gap: "$dialog-content-gap",
+			height: {
+				"": "max (100% - (2 * $dialog-content-padding-v))",
+				":last-child": "max (100% - $dialog-content-padding-v)"
+			}
+		} },
+		header: {
+			ellipsis: true,
+			styles: {
+				display: "flex",
+				flow: "row",
+				gap: "1x",
+				placeItems: "center stretch",
+				placeContent: "space-between",
+				padding: `$dialog-title-padding-v ${isDismissable ? "($dialog-padding-h + 4x)" : "$dialog-padding-h"} $dialog-title-padding-v $dialog-padding-h`,
+				border: "bottom"
+			}
+		},
+		footer: { styles: {
+			display: "flex",
+			gap: "1x",
+			flow: "row-reverse",
+			placeItems: "baseline stretch",
+			placeContent: "space-between",
+			padding: "$dialog-footer-v $dialog-padding-h"
+		} },
+		buttonGroup: { styles: { flow: "row-reverse" } }
+	};
+	return /* @__PURE__ */ jsxs(DialogElement, {
+		ref: domRef,
+		"data-id": "Dialog",
+		"data-qa": qa || "Dialog",
+		styles,
+		as: "section",
+		...dialogProps,
+		mods: { dismissable: isDismissable },
+		style: {
+			"--dialog-size": `${sizePxMap[size] || sizePxMap.small}px`,
+			...style
+		},
+		"data-type": type,
+		"data-size": size,
+		children: [dismissButton, /* @__PURE__ */ jsxs(SlotProvider, {
+			slots,
+			children: [isDismissable && /* @__PURE__ */ jsx(CloseButton, {
+				icon: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { size: 20 }),
+				label: formatMessage("dismiss"),
+				onPress: () => onDismiss && onDismiss()
+			}), children]
+		})]
+	});
+});
+
+//#endregion
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist/components/overlays/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","names":["ItemButton","mergeProps"],"sources":["../../../../src/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import { createFocusManager } from '@react-aria/focus';\nimport { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport { forwardRef, ReactElement, useEffect, useMemo, useRef } from 'react';\nimport {\n  AriaDialogProps,\n  DismissButton,\n  FocusScope,\n  useDialog,\n  useMessageFormatter,\n} from 'react-aria';\n\nimport { CloseIcon } from '../../../icons';\nimport {\n  BASE_STYLES,\n  BaseProps,\n  BaseStyleProps,\n  BLOCK_STYLES,\n  BlockStyleProps,\n  DIMENSION_STYLES,\n  DimensionStyleProps,\n  extractStyles,\n  FLOW_STYLES,\n  Styles,\n  tasty,\n} from '../../../tasty';\nimport { mergeProps, SlotProvider } from '../../../utils/react';\nimport { ItemButton } from '../../actions';\nimport { useOpenTransitionContext } from '../Modal/OpenTransition';\n\nimport { useDialogContext } from './context';\n\nconst STYLES_LIST = [\n  ...BASE_STYLES,\n  ...DIMENSION_STYLES,\n  ...BLOCK_STYLES,\n  ...FLOW_STYLES,\n];\n\nconst DialogElement = tasty({\n  as: 'section',\n  styles: {\n    display: 'flex',\n    flow: 'column',\n    fill: '#white',\n    pointerEvents: 'auto',\n    outline: 0,\n    position: {\n      '': 'relative',\n      'type=panel': 'absolute',\n    },\n    width: {\n      '': '$min-dialog-size $dialog-size (100dvw - 8x)',\n      'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',\n      'type=fullscreenTakeover': '100dvw 100dvw',\n      'type=panel': 'auto',\n    },\n    height: {\n      '': 'auto (100dvh - 8x)',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=popover': 'initial initial (50dvh - 5x)',\n    },\n    gap: 0,\n    border: {\n      '': false,\n      'type=popover': true,\n    },\n    radius: {\n      '': '1cr',\n      'type=tray': '1cr top',\n      'type=fullscreenTakeover': '0r',\n    },\n    shadow: {\n      '': '$dialog-shadow',\n      'type=popover | type=panel': '$shadow',\n    },\n    top: {\n      '': false,\n      'type=modal': '((50vh - 50%) / -3)',\n      'type=panel': 'auto',\n    },\n    '$dialog-title-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-padding-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-padding-h': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-footer-v': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n    '$dialog-content-gap': {\n      '': '1.5x',\n      'type=popover': '1x',\n    },\n  },\n});\n\nconst CloseButton = tasty(ItemButton, {\n  qa: 'ModalCloseButton',\n  type: 'neutral',\n  styles: {\n    position: 'absolute',\n    top: '1x',\n    right: '1x',\n  },\n});\n\nconst sizeMap = {\n  S: 'small',\n  M: 'medium',\n  L: 'large',\n};\nconst sizePxMap = {\n  small: 360,\n  medium: 479,\n  large: 798,\n};\n\nconst intlMessages = {\n  'en-US': {\n    dismiss: 'Dismiss',\n    alert: 'Alert',\n  },\n};\n\nexport interface CubeDialogProps\n  extends Omit<BaseProps, 'role'>,\n    AriaDialogProps,\n    BaseStyleProps,\n    BlockStyleProps,\n    DimensionStyleProps {\n  /** The size of the dialog */\n  size?: 'S' | 'M' | 'L' | 'small' | 'medium' | 'large';\n  /** Whether the dialog is dismissable */\n  isDismissable?: boolean;\n  /** Trigger when the dialog is dismissed */\n  onDismiss?: (arg?: any) => void;\n  /** That you can replace the close icon with */\n  closeIcon?: ReactElement;\n  closeButtonStyles?: Styles;\n  role?: 'dialog' | 'alertdialog';\n}\n\n/**\n * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.\n * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.\n */\nexport const Dialog = forwardRef(function Dialog(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  const transitionContext = useOpenTransitionContext();\n\n  const isEntered = transitionContext?.transitionState === 'entered';\n\n  const context = useDialogContext();\n\n  const content = useMemo(() => {\n    return <DialogContent key=\"content\" {...props} ref={ref} />;\n  }, [props, ref]);\n\n  const shouldContainFocus = isEntered && context.type !== 'panel';\n\n  // Track the element that was focused before the dialog opened\n  // This handles hideOnClose case where FocusScope doesn't unmount\n  const previouslyFocusedRef = useRef<Element | null>(null);\n\n  // Capture the focused element when dialog opens\n  useEffect(() => {\n    if (context.isOpen) {\n      previouslyFocusedRef.current = document.activeElement;\n    }\n  }, [context.isOpen]);\n\n  // Restore focus when dialog closes (for hideOnClose case where component stays mounted)\n  useEffect(() => {\n    if (!context.isOpen && previouslyFocusedRef.current) {\n      const elementToFocus = previouslyFocusedRef.current as HTMLElement;\n\n      // Use setTimeout to ensure this runs after the close transition\n      setTimeout(() => {\n        elementToFocus?.focus?.();\n      });\n      previouslyFocusedRef.current = null;\n    }\n  }, [context.isOpen]);\n\n  return (\n    // This component traps the focus inside the dialog and restores it on close.\n    <FocusScope restoreFocus contain={shouldContainFocus}>\n      {content}\n    </FocusScope>\n  );\n});\n\nconst DialogContent = forwardRef(function DialogContent(\n  props: CubeDialogProps,\n  ref: DOMRef<HTMLDivElement>,\n) {\n  let { type = 'modal', ...contextProps } = useDialogContext();\n\n  let {\n    qa,\n    children,\n    size = 'M',\n    isDismissable = contextProps.isDismissable,\n    onDismiss = contextProps.onClose,\n    closeIcon,\n    closeButtonStyles,\n    style,\n    ...otherProps\n  } = props;\n\n  size = sizeMap[size.toUpperCase()] || size;\n\n  const styles: Styles = extractStyles(otherProps, STYLES_LIST);\n\n  let formatMessage = useMessageFormatter(intlMessages);\n\n  let domRef = useDOMRef(ref);\n  let { dialogProps, titleProps } = useDialog(\n    mergeProps(contextProps, props),\n    domRef,\n  );\n\n  // If rendered in a popover or tray there won't be a visible dismiss button,\n  // so we render a hidden one for screen readers.\n  let dismissButton;\n  if (type === 'popover' || type === 'tray') {\n    dismissButton = <DismissButton onDismiss={onDismiss} />;\n  }\n\n  // Focus the first focusable element in the dialog when it opens\n  useEffect(() => {\n    if (contextProps.isOpen) {\n      setTimeout(() => {\n        if (\n          domRef.current &&\n          !domRef.current.contains(document.activeElement)\n        ) {\n          // Priority 1: autofocus input or primary button\n          const priorityElement = domRef.current.querySelector(\n            'input[data-autofocus], button[type=\"submit\"], button[data-type=\"primary\"]',\n          ) as HTMLElement | null;\n\n          if (priorityElement) {\n            priorityElement.focus();\n          } else {\n            // Fallback: focus first tabbable element, or dialog itself\n            const focusManager = createFocusManager(domRef);\n\n            if (!focusManager.focusFirst({ tabbable: true })) {\n              domRef.current.focus();\n            }\n          }\n        }\n      });\n    }\n  }, [contextProps.isOpen]);\n\n  // let hasHeader = useHasChild('[data-id=\"Header\"]', domRef);\n  // let hasFooter = useHasChild('[data-id=\"Footer\"]', domRef);\n\n  let slots = {\n    title: {\n      level: 2,\n      preset: 'h4',\n      ...titleProps,\n    },\n    content: {\n      styles: {\n        flexGrow: 1,\n        padding: '$dialog-content-padding-v $dialog-padding-h',\n        gap: '$dialog-content-gap',\n        height: {\n          '': 'max (100% - (2 * $dialog-content-padding-v))',\n          ':last-child': 'max (100% - $dialog-content-padding-v)',\n        },\n      },\n    },\n    header: {\n      ellipsis: true,\n      styles: {\n        display: 'flex',\n        flow: 'row',\n        gap: '1x',\n        placeItems: 'center stretch',\n        placeContent: 'space-between',\n        padding: `$dialog-title-padding-v ${\n          isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'\n        } $dialog-title-padding-v $dialog-padding-h`,\n        border: 'bottom',\n      },\n    },\n    footer: {\n      styles: {\n        display: 'flex',\n        gap: '1x',\n        flow: 'row-reverse',\n        placeItems: 'baseline stretch',\n        placeContent: 'space-between',\n        padding: '$dialog-footer-v $dialog-padding-h',\n      },\n    },\n    buttonGroup: {\n      styles: {\n        flow: 'row-reverse',\n      },\n    },\n  };\n\n  return (\n    <DialogElement\n      ref={domRef}\n      data-id=\"Dialog\"\n      data-qa={qa || 'Dialog'}\n      styles={styles}\n      as=\"section\"\n      {...dialogProps}\n      mods={{ dismissable: isDismissable }}\n      style={{\n        '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,\n        ...style,\n      }}\n      data-type={type}\n      data-size={size}\n    >\n      {dismissButton}\n\n      <SlotProvider slots={slots}>\n        {isDismissable && (\n          <CloseButton\n            icon={closeIcon || <CloseIcon size={20} />}\n            label={formatMessage('dismiss')}\n            onPress={() => onDismiss && onDismiss()}\n          />\n        )}\n        {children}\n      </SlotProvider>\n    </DialogElement>\n  );\n});\n"],"mappings":"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"}

package/dist/components/overlays/Dialog/DialogContainer.d.ts

@@ -0,0 +1,36 @@
+
+import { WithCloseBehavior } from "../Modal/types.js";
+import "../Modal/index.js";
+import { ReactNode } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/DialogContainer.d.ts
+interface CubeDialogContainerProps extends WithCloseBehavior {
+  /** The Dialog to display, if any. */
+  children?: ReactNode;
+  /** Handler that is called when the 'x' button of a dismissible Dialog is clicked. */
+  onDismiss?: (arg?: any) => void;
+  /**
+   * The type of Dialog that should be rendered. See the visual options below for examples of each.
+   * @default 'modal'
+   */
+  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
+  /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */
+  isDismissable?: boolean;
+  /**
+   * This prop allows you to configure whenever the modal is open or not
+   */
+  isOpen?: boolean;
+  /** Whether pressing the escape key to close the dialog should be disabled. */
+  isKeyboardDismissDisabled?: boolean;
+}
+/**
+ * A DialogContainer accepts a single Dialog as a child, and manages to show and hide
+ * it in a modal.
+ * Useful in cases where there is no trigger element
+ * or when the trigger unmounts while the dialog is open.
+ */
+declare function DialogContainer(props: CubeDialogContainerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeDialogContainerProps, DialogContainer };
+//# sourceMappingURL=DialogContainer.d.ts.map

package/dist/components/overlays/Dialog/DialogContainer.js

@@ -0,0 +1,44 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { _Modal } from "../Modal/Modal.js";
+import { DialogContext } from "./context.js";
+import { Children, isValidElement, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/DialogContainer.tsx
+/**
+* A DialogContainer accepts a single Dialog as a child, and manages to show and hide
+* it in a modal.
+* Useful in cases where there is no trigger element
+* or when the trigger unmounts while the dialog is open.
+*/
+function DialogContainer(props) {
+	const { children, type = "modal", onDismiss, isDismissable = true, isKeyboardDismissDisabled, isOpen, hideOnClose } = props;
+	const childArray = Children.toArray(children);
+	if (childArray.length > 1) throw new Error("Only a single child can be passed to DialogContainer.");
+	const lastChild = useRef(null);
+	const child = isValidElement(childArray[0]) ? childArray[0] : null;
+	if (child) lastChild.current = child;
+	const isActuallyOpened = typeof isOpen !== "boolean" ? !!child : isOpen;
+	const context = {
+		type,
+		onClose: onDismiss,
+		isDismissable,
+		isOpen
+	};
+	return /* @__PURE__ */ jsx(_Modal, {
+		isOpen: isActuallyOpened,
+		type,
+		hideOnClose,
+		isDismissable,
+		isKeyboardDismissDisabled,
+		onClose: isDismissable ? onDismiss : void 0,
+		children: /* @__PURE__ */ jsx(DialogContext.Provider, {
+			value: context,
+			children: child
+		})
+	});
+}
+
+//#endregion
+export { DialogContainer };
+//# sourceMappingURL=DialogContainer.js.map

package/dist/components/overlays/Dialog/DialogContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContainer.js","names":["Modal"],"sources":["../../../../src/components/overlays/Dialog/DialogContainer.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useRef,\n} from 'react';\n\nimport { Modal, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport interface CubeDialogContainerProps extends WithCloseBehavior {\n  /** The Dialog to display, if any. */\n  children?: ReactNode;\n  /** Handler that is called when the 'x' button of a dismissible Dialog is clicked. */\n  onDismiss?: (arg?: any) => void;\n  /**\n   * The type of Dialog that should be rendered. See the visual options below for examples of each.\n   * @default 'modal'\n   */\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  /** Whether the Dialog is dismissible. See the [Dialog docs](Dialog.html#dismissable-dialogs) for more details. */\n  isDismissable?: boolean;\n  /**\n   * This prop allows you to configure whenever the modal is open or not\n   */\n  isOpen?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n}\n\n/**\n * A DialogContainer accepts a single Dialog as a child, and manages to show and hide\n * it in a modal.\n * Useful in cases where there is no trigger element\n * or when the trigger unmounts while the dialog is open.\n */\nexport function DialogContainer(props: CubeDialogContainerProps) {\n  const {\n    children,\n    type = 'modal',\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    isOpen,\n    hideOnClose,\n  } = props;\n\n  const childArray = Children.toArray(children);\n  if (childArray.length > 1) {\n    throw new Error('Only a single child can be passed to DialogContainer.');\n  }\n\n  const lastChild = useRef<ReactElement>(null);\n  const child = isValidElement(childArray[0]) ? childArray[0] : null;\n\n  if (child) {\n    lastChild.current = child;\n  }\n\n  const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;\n\n  const context = {\n    type,\n    onClose: onDismiss,\n    isDismissable,\n    isOpen,\n  };\n\n  return (\n    <Modal\n      isOpen={isActuallyOpened}\n      type={type}\n      hideOnClose={hideOnClose}\n      isDismissable={isDismissable}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      onClose={isDismissable ? onDismiss : undefined}\n    >\n      <DialogContext.Provider value={context}>{child}</DialogContext.Provider>\n    </Modal>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAsCA,SAAgB,gBAAgB,OAAiC;CAC/D,MAAM,EACJ,UACA,OAAO,SACP,WACA,gBAAgB,MAChB,2BACA,QACA,gBACE;CAEJ,MAAM,aAAa,SAAS,QAAQ,SAAS;AAC7C,KAAI,WAAW,SAAS,EACtB,OAAM,IAAI,MAAM,wDAAwD;CAG1E,MAAM,YAAY,OAAqB,KAAK;CAC5C,MAAM,QAAQ,eAAe,WAAW,GAAG,GAAG,WAAW,KAAK;AAE9D,KAAI,MACF,WAAU,UAAU;CAGtB,MAAM,mBAAmB,OAAO,WAAW,YAAY,CAAC,CAAC,QAAQ;CAEjE,MAAM,UAAU;EACd;EACA,SAAS;EACT;EACA;EACD;AAED,QACE,oBAACA;EACC,QAAQ;EACF;EACO;EACE;EACY;EAC3B,SAAS,gBAAgB,YAAY;YAErC,oBAAC,cAAc;GAAS,OAAO;aAAU;IAA+B;GAClE"}