@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,37 @@
+
+import { CubeButtonProps } from "../../actions/Button/Button.js";
+import "../../actions/index.js";
+import { FieldTypes } from "../../form/Form/types.js";
+import { CubeFormProps } from "../../form/Form/Form.js";
+import "../../form/index.js";
+import { CubeDialogProps } from "./Dialog.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/DialogForm.d.ts
+interface CubeDialogFormProps<T extends FieldTypes = FieldTypes> extends Omit<CubeDialogProps, 'children'>, Omit<CubeFormProps<T>, 'role' | 'children'> {
+  /** Whether the submit button has a `danger` theme */
+  danger?: boolean;
+  /** Properties for submit button. Use `label` to change text. */
+  submitProps?: CubeButtonProps;
+  /** Properties for cancel button. Use `label` to change text. */
+  cancelProps?: CubeButtonProps;
+  /** WIP. Preserve form values even if field is deleted */
+  preserve?: boolean;
+  /** Whether to hide action button so developer can manually specify them */
+  noActions?: boolean;
+  /** The title of the dialog */
+  title?: string;
+  /** Children nodes or render function  */
+  children?: CubeFormProps['children'] | ((onLocalDismiss: () => void) => CubeFormProps['children']);
+}
+interface CubeDialogFormRef {
+  open: () => void;
+  close: () => void;
+}
+/**
+ * DialogForms are a specific type of Dialog. They contain forms to fill.
+ */
+declare function DialogForm<T extends FieldTypes = FieldTypes>(props: CubeDialogFormProps<T>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeDialogFormProps, CubeDialogFormRef, DialogForm };
+//# sourceMappingURL=DialogForm.d.ts.map

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

@@ -0,0 +1,76 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { _Title } from "../../content/Title.js";
+import { ButtonGroup } from "../../actions/ButtonGroup/ButtonGroup.js";
+import { Button } from "../../actions/index.js";
+import { useDialogContext } from "./context.js";
+import { Content } from "../../content/Content.js";
+import { Header } from "../../content/Header.js";
+import { useForm } from "../../form/Form/use-form.js";
+import { _SubmitButton } from "../../form/Form/SubmitButton/SubmitButton.js";
+import { Form } from "../../form/Form/index.js";
+import { Dialog } from "./Dialog.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/DialogForm.tsx
+/**
+* DialogForms are a specific type of Dialog. They contain forms to fill.
+*/
+function DialogForm(props) {
+	let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, necessityIndicator, necessityLabel, isReadOnly, validationState, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, ...dialogProps } = props;
+	[form] = useForm(form);
+	const { onClose } = useDialogContext();
+	function onLocalDismiss() {
+		onClose?.();
+		onDismiss?.();
+		if (!preserve) setTimeout(() => {
+			form?.resetFields();
+		}, 250);
+	}
+	return /* @__PURE__ */ jsxs(Dialog, {
+		qa: `${qa || ""}Dialog`,
+		size,
+		closeIcon,
+		...dialogProps,
+		children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(_Title, {
+			ellipsis: true,
+			children: title
+		}) }), /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsxs(Form, {
+			qa: qa || "DialogForm",
+			form,
+			name,
+			defaultValues,
+			labelStyles,
+			labelPosition,
+			requiredMark,
+			necessityIndicator,
+			necessityLabel,
+			isReadOnly,
+			validationState,
+			validateTrigger,
+			onSubmit: async (data) => {
+				await onSubmit?.(data);
+				onClose?.();
+				if (!preserve) setTimeout(() => {
+					form.resetFields();
+				}, 250);
+			},
+			onSubmitFailed,
+			onValuesChange,
+			children: [typeof children === "function" ? children(onLocalDismiss) : children, !noActions ? /* @__PURE__ */ jsxs(ButtonGroup, { children: [/* @__PURE__ */ jsx(_SubmitButton, {
+				qa: `${qa || ""}SubmitButton`,
+				theme: danger ? "danger" : void 0,
+				label: "Submit",
+				...submitProps || {}
+			}), /* @__PURE__ */ jsx(Button, {
+				qa: `${qa || ""}CancelButton`,
+				label: "Cancel",
+				onPress: onLocalDismiss,
+				...cancelProps || {}
+			})] }) : void 0]
+		}) })]
+	});
+}
+
+//#endregion
+export { DialogForm };
+//# sourceMappingURL=DialogForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogForm.js","names":["Title","SubmitButton"],"sources":["../../../../src/components/overlays/Dialog/DialogForm.tsx"],"sourcesContent":["import { Button, ButtonGroup, CubeButtonProps } from '../../actions';\nimport { Content } from '../../content/Content';\nimport { Header } from '../../content/Header';\nimport { Title } from '../../content/Title';\nimport {\n  CubeFormProps,\n  FieldTypes,\n  Form,\n  SubmitButton,\n  useForm,\n} from '../../form';\n\nimport { useDialogContext } from './context';\nimport { CubeDialogProps, Dialog } from './Dialog';\n\nexport interface CubeDialogFormProps<T extends FieldTypes = FieldTypes>\n  extends Omit<CubeDialogProps, 'children'>,\n    Omit<CubeFormProps<T>, 'role' | 'children'> {\n  /** Whether the submit button has a `danger` theme */\n  danger?: boolean;\n  /** Properties for submit button. Use `label` to change text. */\n  submitProps?: CubeButtonProps;\n  /** Properties for cancel button. Use `label` to change text. */\n  cancelProps?: CubeButtonProps;\n  /** WIP. Preserve form values even if field is deleted */\n  preserve?: boolean;\n  /** Whether to hide action button so developer can manually specify them */\n  noActions?: boolean;\n  /** The title of the dialog */\n  title?: string;\n  /** Children nodes or render function  */\n  children?:\n    | CubeFormProps['children']\n    | ((onLocalDismiss: () => void) => CubeFormProps['children']);\n}\n\nexport interface CubeDialogFormRef {\n  open: () => void;\n  close: () => void;\n}\n\n/**\n * DialogForms are a specific type of Dialog. They contain forms to fill.\n */\nexport function DialogForm<T extends FieldTypes = FieldTypes>(\n  props: CubeDialogFormProps<T>,\n) {\n  let {\n    qa,\n    name,\n    form,\n    defaultValues,\n    onDismiss,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    labelStyles,\n    labelPosition,\n    requiredMark,\n    necessityIndicator,\n    necessityLabel,\n    isReadOnly,\n    validationState,\n    validateTrigger,\n    children,\n    danger,\n    noActions,\n    submitProps,\n    cancelProps,\n    preserve,\n    title,\n    size,\n    closeIcon,\n    ...dialogProps\n  } = props;\n\n  [form] = useForm(form);\n\n  const { onClose } = useDialogContext();\n\n  function onLocalDismiss() {\n    onClose?.();\n    onDismiss?.();\n\n    if (!preserve) {\n      // let animations finish before resetting the form\n      setTimeout(() => {\n        form?.resetFields();\n      }, 250);\n    }\n  }\n\n  return (\n    <Dialog\n      qa={`${qa || ''}Dialog`}\n      size={size}\n      closeIcon={closeIcon}\n      {...dialogProps}\n    >\n      <Header>\n        <Title ellipsis>{title}</Title>\n      </Header>\n      <Content>\n        <Form<T>\n          qa={qa || 'DialogForm'}\n          form={form}\n          name={name}\n          defaultValues={defaultValues}\n          labelStyles={labelStyles}\n          labelPosition={labelPosition}\n          requiredMark={requiredMark}\n          necessityIndicator={necessityIndicator}\n          necessityLabel={necessityLabel}\n          isReadOnly={isReadOnly}\n          validationState={validationState}\n          validateTrigger={validateTrigger}\n          onSubmit={async (data) => {\n            await onSubmit?.(data);\n\n            onClose?.();\n\n            if (!preserve) {\n              // let animations finish before resetting the form\n              setTimeout(() => {\n                form.resetFields();\n              }, 250);\n            }\n          }}\n          onSubmitFailed={onSubmitFailed}\n          onValuesChange={onValuesChange}\n        >\n          {typeof children === 'function' ? children(onLocalDismiss) : children}\n\n          {!noActions ? (\n            <ButtonGroup>\n              <SubmitButton\n                qa={`${qa || ''}SubmitButton`}\n                theme={danger ? 'danger' : undefined}\n                label=\"Submit\"\n                {...(submitProps || {})}\n              />\n              <Button\n                qa={`${qa || ''}CancelButton`}\n                label=\"Cancel\"\n                onPress={onLocalDismiss}\n                {...(cancelProps || {})}\n              />\n            </ButtonGroup>\n          ) : undefined}\n        </Form>\n      </Content>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AA4CA,SAAgB,WACd,OACA;CACA,IAAI,EACF,IACA,MACA,MACA,eACA,WACA,UACA,gBACA,gBACA,aACA,eACA,cACA,oBACA,gBACA,YACA,iBACA,iBACA,UACA,QACA,WACA,aACA,aACA,UACA,OACA,MACA,WACA,GAAG,gBACD;AAEJ,EAAC,QAAQ,QAAQ,KAAK;CAEtB,MAAM,EAAE,YAAY,kBAAkB;CAEtC,SAAS,iBAAiB;AACxB,aAAW;AACX,eAAa;AAEb,MAAI,CAAC,SAEH,kBAAiB;AACf,SAAM,aAAa;KAClB,IAAI;;AAIX,QACE,qBAAC;EACC,IAAI,GAAG,MAAM,GAAG;EACV;EACK;EACX,GAAI;aAEJ,oBAAC,oBACC,oBAACA;GAAM;aAAU;IAAc,GACxB,EACT,oBAAC,qBACC,qBAAC;GACC,IAAI,MAAM;GACJ;GACA;GACS;GACF;GACE;GACD;GACM;GACJ;GACJ;GACK;GACA;GACjB,UAAU,OAAO,SAAS;AACxB,UAAM,WAAW,KAAK;AAEtB,eAAW;AAEX,QAAI,CAAC,SAEH,kBAAiB;AACf,UAAK,aAAa;OACjB,IAAI;;GAGK;GACA;cAEf,OAAO,aAAa,aAAa,SAAS,eAAe,GAAG,UAE5D,CAAC,YACA,qBAAC,0BACC,oBAACC;IACC,IAAI,GAAG,MAAM,GAAG;IAChB,OAAO,SAAS,WAAW;IAC3B,OAAM;IACN,GAAK,eAAe,EAAE;KACtB,EACF,oBAAC;IACC,IAAI,GAAG,MAAM,GAAG;IAChB,OAAM;IACN,SAAS;IACT,GAAK,eAAe,EAAE;KACtB,IACU,GACZ;IACC,GACC;GACH"}

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

@@ -0,0 +1,56 @@
+
+import { Styles } from "../../../tasty/styles/types.js";
+import "../../../tasty/index.js";
+import { WithCloseBehavior } from "../Modal/types.js";
+import "../Modal/index.js";
+import { ReactElement, RefObject } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { OverlayTriggerProps, Placement, PositionProps } from "react-aria";
+import { OverlayTriggerState } from "react-stately";
+
+//#region src/components/overlays/Dialog/DialogTrigger.d.ts
+type CubeDialogClose = (close: () => void) => ReactElement;
+interface CubeDialogTriggerProps extends OverlayTriggerProps, PositionProps, WithCloseBehavior {
+  /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */
+  children: [ReactElement | ((state: OverlayTriggerState) => ReactElement), CubeDialogClose | ReactElement];
+  /**
+   * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each.
+   * @default 'modal'
+   */
+  type?: 'modal' | 'popover' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel';
+  /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */
+  mobileType?: 'modal' | 'tray' | 'fullscreen' | 'fullscreenTakeover' | 'panel' | 'popover';
+  placement?: Placement;
+  /**
+   * Whether a popover type Dialog's arrow should be hidden.
+   */
+  hideArrow?: boolean;
+  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */
+  targetRef?: RefObject<HTMLElement | null>;
+  /** Whether a modal type Dialog should be dismissable. */
+  isDismissable?: boolean;
+  /** Whether pressing the escape key to close the dialog should be disabled. */
+  isKeyboardDismissDisabled?: boolean;
+  /** The screen breakpoint for the mobile type */
+  mobileViewport?: number;
+  /** The style map for the overlay **/
+  styles?: Styles;
+  shouldCloseOnInteractOutside?: (element: Element) => boolean;
+  onDismiss?: (action?: string) => void;
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+  defaultOpen?: boolean;
+  shouldFlip?: boolean;
+  shouldUpdatePosition?: boolean;
+  /** Minimum padding in pixels between the popover and viewport edges */
+  containerPadding?: number;
+}
+/**
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+ * open state with the trigger's press state. Additionally, it allows you to customize the type and
+ * positioning of the Dialog.
+ */
+declare function DialogTrigger(props: CubeDialogTriggerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeDialogClose, CubeDialogTriggerProps, DialogTrigger };
+//# sourceMappingURL=DialogTrigger.d.ts.map

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

@@ -0,0 +1,176 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { _Modal } from "../Modal/Modal.js";
+import { _Tray } from "../Modal/Tray.js";
+import { _Popover } from "../Modal/Popover.js";
+import { DialogContext } from "./context.js";
+import { Fragment, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPosition, useOverlayTrigger } from "react-aria";
+import { useMediaQuery } from "@react-spectrum/utils";
+import { useOverlayTriggerState } from "react-stately";
+import { PressResponder } from "@react-aria/interactions";
+
+//#region src/components/overlays/Dialog/DialogTrigger.tsx
+/**
+* DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+* open state with the trigger's press state. Additionally, it allows you to customize the type and
+* positioning of the Dialog.
+*/
+function DialogTrigger(props) {
+	let { children, type = "modal", mobileType = type === "popover" ? "modal" : type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, hideOnClose, shouldCloseOnInteractOutside, ...positionProps } = props;
+	if (!Array.isArray(children) || children.length > 2) throw new Error("DialogTrigger must have exactly 2 children");
+	let [trigger, content] = children;
+	if (useMediaQuery(`(max-width: ${mobileViewport}px)`)) {
+		if (type !== "modal" && mobileType === "modal") isDismissable = true;
+		type = mobileType;
+	}
+	let state = useOverlayTriggerState(props);
+	if (typeof trigger === "function") trigger = trigger(state);
+	let wasOpen = useRef(false);
+	let isExiting = useRef(false);
+	let onExiting = () => isExiting.current = true;
+	let onExited = () => isExiting.current = false;
+	wasOpen.current = state.isOpen;
+	useEffect(() => {
+		return () => {
+			if ((wasOpen.current || isExiting.current) && type !== "popover" && type !== "tray") console.warn("CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.");
+		};
+	}, []);
+	function onClose(action) {
+		if (isDismissable) {
+			onDismiss && onDismiss(action);
+			state.close();
+		}
+	}
+	if (type === "popover") return /* @__PURE__ */ jsx(PopoverTrigger, {
+		...positionProps,
+		hideOnClose,
+		state,
+		styles,
+		targetRef,
+		trigger,
+		content,
+		isKeyboardDismissDisabled,
+		hideArrow,
+		shouldCloseOnInteractOutside,
+		onClose
+	});
+	let renderOverlay = () => {
+		switch (type) {
+			case "panel":
+			case "fullscreen":
+			case "fullscreenTakeover":
+			case "modal": return /* @__PURE__ */ jsx(_Modal, {
+				hideOnClose,
+				isOpen: state.isOpen,
+				isDismissable,
+				type,
+				isKeyboardDismissDisabled,
+				styles,
+				shouldCloseOnInteractOutside,
+				onClose,
+				onExiting,
+				onExited,
+				children: typeof content === "function" ? content(state.close) : content
+			});
+			case "tray": return /* @__PURE__ */ jsx(_Tray, {
+				hideOnClose,
+				isOpen: state.isOpen,
+				isKeyboardDismissDisabled,
+				styles,
+				onClose,
+				children: typeof content === "function" ? content(state.close) : content
+			});
+		}
+	};
+	return /* @__PURE__ */ jsx(DialogTriggerBase, {
+		type,
+		state,
+		isDismissable,
+		trigger,
+		overlay: renderOverlay(),
+		hideOnClose,
+		onClose
+	});
+}
+function PopoverTrigger(allProps) {
+	let { state, styles, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, hideOnClose, shouldCloseOnInteractOutside, keepOpenOnScroll, ...props } = allProps;
+	let triggerRef = useRef(null);
+	let overlayRef = useRef(null);
+	let { overlayProps: popoverProps, placement, arrowProps, updatePosition } = useOverlayPosition({
+		targetRef: targetRef || triggerRef,
+		overlayRef,
+		placement: props.placement,
+		containerPadding: props.containerPadding,
+		offset: props.offset || 8,
+		crossOffset: props.crossOffset,
+		shouldFlip: props.shouldFlip,
+		shouldUpdatePosition: props.shouldUpdatePosition,
+		isOpen: state.isOpen
+	});
+	let overlayTriggerState = state;
+	if (keepOpenOnScroll) overlayTriggerState = {
+		...state,
+		close: updatePosition
+	};
+	let { triggerProps, overlayProps } = useOverlayTrigger({ type: "dialog" }, overlayTriggerState, triggerRef);
+	return /* @__PURE__ */ jsx(DialogTriggerBase, {
+		type: "popover",
+		state,
+		triggerProps: {
+			...triggerProps,
+			ref: targetRef ? void 0 : triggerRef
+		},
+		dialogProps: overlayProps,
+		trigger,
+		overlay: /* @__PURE__ */ jsx(_Popover, {
+			ref: overlayRef,
+			styles,
+			hideOnClose,
+			isOpen: state.isOpen,
+			style: popoverProps.style,
+			placement,
+			arrowProps,
+			isKeyboardDismissDisabled,
+			hideArrow,
+			updatePosition,
+			shouldCloseOnInteractOutside,
+			onClose,
+			children: typeof content === "function" ? content(state.close) : content
+		}),
+		onClose
+	});
+}
+function DialogTriggerBase(props) {
+	const ref = useCombinedRefs(props.ref);
+	const wasOpenRef = useRef(false);
+	let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger } = props;
+	let context = {
+		type,
+		onClose,
+		isDismissable,
+		isOpen: state.isOpen,
+		...dialogProps
+	};
+	useEffect(() => {
+		if (!state.isOpen && wasOpenRef.current) {
+			wasOpenRef.current = false;
+			ref.current?.focus();
+		} else if (state.isOpen) wasOpenRef.current = true;
+	}, [state.isOpen]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PressResponder, {
+		ref,
+		...triggerProps,
+		isPressed: state.isOpen && type !== "modal" && type !== "fullscreen" && type !== "fullscreenTakeover",
+		onPress: state.toggle,
+		children: trigger
+	}), /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: context,
+		children: overlay
+	})] });
+}
+
+//#endregion
+export { DialogTrigger };
+//# sourceMappingURL=DialogTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTrigger.js","names":["Modal","Tray","Popover"],"sources":["../../../../src/components/overlays/Dialog/DialogTrigger.tsx"],"sourcesContent":["import { PressResponder } from '@react-aria/interactions';\nimport { useMediaQuery } from '@react-spectrum/utils';\nimport { Fragment, ReactElement, RefObject, useEffect, useRef } from 'react';\nimport {\n  OverlayTriggerProps,\n  Placement,\n  PositionProps,\n  useOverlayPosition,\n  useOverlayTrigger,\n} from 'react-aria';\nimport { OverlayTriggerState, useOverlayTriggerState } from 'react-stately';\n\nimport { Styles } from '../../../tasty';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { Modal, Popover, Tray, WithCloseBehavior } from '../Modal';\n\nimport { DialogContext } from './context';\n\nexport type CubeDialogClose = (close: () => void) => ReactElement;\n\nexport interface CubeDialogTriggerProps\n  extends OverlayTriggerProps,\n    PositionProps,\n    WithCloseBehavior {\n  /** The Dialog and its trigger element. See the DialogTrigger [Content section](#content) for more information on what to provide as children. */\n  children: [\n    ReactElement | ((state: OverlayTriggerState) => ReactElement),\n    CubeDialogClose | ReactElement,\n  ];\n  /**\n   * The type of Dialog that should be rendered. See the DialogTrigger [types section](#dialog-types) for an explanation on each.\n   * @default 'modal'\n   */\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  /** The type of Dialog that should be rendered when on a mobile device. See DialogTrigger [types section](#dialog-types) for an explanation on each. */\n  mobileType?:\n    | 'modal'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel'\n    | 'popover';\n  placement?: Placement;\n  /**\n   * Whether a popover type Dialog's arrow should be hidden.\n   */\n  hideArrow?: boolean;\n  /** The ref of the element the Dialog should visually attach itself to. Defaults to the trigger button if not defined. */\n  targetRef?: RefObject<HTMLElement | null>;\n  /** Whether a modal type Dialog should be dismissable. */\n  isDismissable?: boolean;\n  /** Whether pressing the escape key to close the dialog should be disabled. */\n  isKeyboardDismissDisabled?: boolean;\n  /** The screen breakpoint for the mobile type */\n  mobileViewport?: number;\n  /** The style map for the overlay **/\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n  onDismiss?: (action?: string) => void;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  shouldFlip?: boolean;\n  shouldUpdatePosition?: boolean;\n  /** Minimum padding in pixels between the popover and viewport edges */\n  containerPadding?: number;\n}\n\n/**\n * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's\n * open state with the trigger's press state. Additionally, it allows you to customize the type and\n * positioning of the Dialog.\n */\nexport function DialogTrigger(props: CubeDialogTriggerProps) {\n  let {\n    children,\n    type = 'modal',\n    mobileType = type === 'popover' ? 'modal' : type,\n    hideArrow,\n    targetRef,\n    onDismiss,\n    isDismissable = true,\n    isKeyboardDismissDisabled,\n    styles,\n    mobileViewport = 700,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    ...positionProps\n  } = props;\n\n  if (!Array.isArray(children) || children.length > 2) {\n    throw new Error('DialogTrigger must have exactly 2 children');\n  }\n  // if a function is passed as the second child, it won't appear in toArray\n  let [trigger, content] = children;\n\n  // On small devices, show a modal or tray instead of a popover.\n  let isMobile = useMediaQuery(`(max-width: ${mobileViewport}px)`);\n  if (isMobile) {\n    // handle cases where desktop popovers need a close button for the mobile modal view\n    if (type !== 'modal' && mobileType === 'modal') {\n      isDismissable = true;\n    }\n\n    type = mobileType;\n  }\n\n  let state = useOverlayTriggerState(props);\n\n  if (typeof trigger === 'function') {\n    trigger = trigger(state);\n  }\n\n  let wasOpen = useRef(false);\n  let isExiting = useRef(false);\n  let onExiting = () => (isExiting.current = true);\n  let onExited = () => (isExiting.current = false);\n\n  wasOpen.current = state.isOpen;\n\n  useEffect(() => {\n    return () => {\n      if (\n        (wasOpen.current || isExiting.current) &&\n        type !== 'popover' &&\n        type !== 'tray'\n      ) {\n        console.warn(\n          'CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.',\n        );\n      }\n    };\n  }, []);\n\n  function onClose(action) {\n    if (isDismissable) {\n      onDismiss && onDismiss(action);\n      state.close();\n    }\n  }\n\n  if (type === 'popover') {\n    return (\n      <PopoverTrigger\n        {...positionProps}\n        hideOnClose={hideOnClose}\n        state={state}\n        styles={styles}\n        targetRef={targetRef}\n        trigger={trigger}\n        content={content}\n        isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n        hideArrow={hideArrow}\n        shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n        onClose={onClose}\n      />\n    );\n  }\n\n  let renderOverlay = () => {\n    switch (type) {\n      case 'panel':\n      case 'fullscreen':\n      case 'fullscreenTakeover':\n      case 'modal':\n        return (\n          <Modal\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isDismissable={isDismissable}\n            type={type}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n            onClose={onClose}\n            onExiting={onExiting}\n            onExited={onExited}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Modal>\n        );\n      case 'tray':\n        return (\n          <Tray\n            hideOnClose={hideOnClose}\n            isOpen={state.isOpen}\n            isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n            styles={styles}\n            onClose={onClose}\n          >\n            {typeof content === 'function' ? content(state.close) : content}\n          </Tray>\n        );\n    }\n  };\n\n  return (\n    <DialogTriggerBase\n      type={type}\n      state={state}\n      isDismissable={isDismissable}\n      trigger={trigger}\n      overlay={renderOverlay()}\n      hideOnClose={hideOnClose}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction PopoverTrigger(allProps) {\n  let {\n    state,\n    styles,\n    targetRef,\n    trigger,\n    content,\n    hideArrow,\n    onClose,\n    isKeyboardDismissDisabled,\n    hideOnClose,\n    shouldCloseOnInteractOutside,\n    keepOpenOnScroll,\n    ...props\n  } = allProps;\n\n  let triggerRef = useRef<HTMLButtonElement>(null);\n  let overlayRef = useRef<HTMLDivElement>(null);\n\n  let {\n    overlayProps: popoverProps,\n    placement,\n    arrowProps,\n    updatePosition,\n  } = useOverlayPosition({\n    targetRef: targetRef || triggerRef,\n    overlayRef: overlayRef,\n    placement: props.placement,\n    containerPadding: props.containerPadding,\n    offset: props.offset || 8,\n    crossOffset: props.crossOffset,\n    shouldFlip: props.shouldFlip,\n    shouldUpdatePosition: props.shouldUpdatePosition,\n    isOpen: state.isOpen,\n  });\n\n  let overlayTriggerState = state;\n\n  if (keepOpenOnScroll) {\n    overlayTriggerState = { ...state, close: updatePosition };\n  }\n\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: 'dialog' },\n    overlayTriggerState,\n    triggerRef,\n  );\n\n  let triggerPropsWithRef = {\n    ...triggerProps,\n    ref: targetRef ? undefined : triggerRef,\n  };\n\n  let overlay = (\n    <Popover\n      ref={overlayRef}\n      styles={styles}\n      hideOnClose={hideOnClose}\n      isOpen={state.isOpen}\n      style={popoverProps.style}\n      placement={placement}\n      arrowProps={arrowProps}\n      isKeyboardDismissDisabled={isKeyboardDismissDisabled}\n      hideArrow={hideArrow}\n      updatePosition={updatePosition}\n      shouldCloseOnInteractOutside={shouldCloseOnInteractOutside}\n      onClose={onClose}\n    >\n      {typeof content === 'function' ? content(state.close) : content}\n    </Popover>\n  );\n\n  return (\n    <DialogTriggerBase\n      type=\"popover\"\n      state={state}\n      triggerProps={triggerPropsWithRef}\n      dialogProps={overlayProps}\n      trigger={trigger}\n      overlay={overlay}\n      onClose={onClose}\n    />\n  );\n}\n\nfunction DialogTriggerBase(props: any) {\n  const ref = useCombinedRefs<HTMLElement>(props.ref);\n  const wasOpenRef = useRef(false);\n\n  let {\n    type,\n    state,\n    onClose,\n    isDismissable,\n    dialogProps = {},\n    triggerProps = {},\n    overlay,\n    trigger,\n  } = props;\n\n  let context = {\n    type,\n    onClose,\n    isDismissable,\n    isOpen: state.isOpen,\n    ...dialogProps,\n  };\n\n  // Restore focus manually when the dialog closes\n  useEffect(() => {\n    if (!state.isOpen && wasOpenRef.current) {\n      wasOpenRef.current = false;\n      ref.current?.focus();\n    } else if (state.isOpen) {\n      wasOpenRef.current = true;\n    }\n  }, [state.isOpen]);\n\n  return (\n    <Fragment>\n      <PressResponder\n        ref={ref}\n        {...triggerProps}\n        isPressed={\n          state.isOpen &&\n          type !== 'modal' &&\n          type !== 'fullscreen' &&\n          type !== 'fullscreenTakeover'\n        }\n        onPress={state.toggle}\n      >\n        {trigger}\n      </PressResponder>\n      <DialogContext.Provider value={context}>{overlay}</DialogContext.Provider>\n    </Fragment>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { createContext, useContext } from "react";
+import invariant from "tiny-invariant";
+
+//#region src/components/overlays/Dialog/context.tsx
+const DialogContext = createContext({});
+function useDialogContext() {
+	const dialogContext = useContext(DialogContext);
+	invariant(dialogContext !== null, "");
+	return dialogContext;
+}
+
+//#endregion
+export { DialogContext, useDialogContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/overlays/Dialog/context.tsx"],"sourcesContent":["import { createContext, HTMLAttributes, useContext } from 'react';\nimport invariant from 'tiny-invariant';\n\nexport interface DialogContextValue extends HTMLAttributes<HTMLElement> {\n  type?:\n    | 'modal'\n    | 'popover'\n    | 'tray'\n    | 'fullscreen'\n    | 'fullscreenTakeover'\n    | 'panel';\n  isDismissable?: boolean;\n  onClose?: (arg?: string) => void;\n  isOpen?: boolean;\n}\n\nexport const DialogContext = createContext<DialogContextValue | null>({});\n\nexport function useDialogContext() {\n  const dialogContext = useContext(DialogContext);\n\n  invariant(dialogContext !== null, '');\n\n  return dialogContext;\n}\n"],"mappings":";;;;;AAgBA,MAAa,gBAAgB,cAAyC,EAAE,CAAC;AAEzE,SAAgB,mBAAmB;CACjC,MAAM,gBAAgB,WAAW,cAAc;AAE/C,WAAU,kBAAkB,MAAM,GAAG;AAErC,QAAO"}

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

@@ -0,0 +1,6 @@
+
+import { CubeDialogContainerProps, DialogContainer } from "./DialogContainer.js";
+import { CubeDialogProps, Dialog } from "./Dialog.js";
+import { CubeDialogFormProps, CubeDialogFormRef, DialogForm } from "./DialogForm.js";
+import { CubeDialogClose, CubeDialogTriggerProps, DialogTrigger } from "./DialogTrigger.js";
+import { useDialogContainer } from "./use-dialog-container.js";

package/dist/components/overlays/Dialog/use-dialog-container.d.ts

@@ -0,0 +1,22 @@
+
+import { DialogContainer } from "./DialogContainer.js";
+import { ComponentProps, ComponentType } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/use-dialog-container.d.ts
+/**
+ * Generic hook to manage a dialog component.
+ *
+ * @param Component - A React component that represents the dialog content. It must accept props of type P.
+ * @param defaultContainerProps - Default props to pass to the DialogContainer.
+ * @returns An object with `open` function to open the dialog with provided props and `rendered` JSX element to include in your component tree.
+ */
+declare function useDialogContainer<P, E = ComponentProps<typeof DialogContainer>>(Component: ComponentType<P>, defaultContainerProps?: ComponentProps<typeof DialogContainer>): {
+  open: (props: P, containerProps?: E | undefined) => void;
+  update: (props: P, containerProps?: E | undefined) => void;
+  close: () => void;
+  readonly rendered: react_jsx_runtime0.JSX.Element | null;
+};
+//#endregion
+export { useDialogContainer };
+//# sourceMappingURL=use-dialog-container.d.ts.map

package/dist/components/overlays/Dialog/use-dialog-container.js

@@ -0,0 +1,65 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps } from "../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { DialogContainer } from "./DialogContainer.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/overlays/Dialog/use-dialog-container.tsx
+/**
+* Generic hook to manage a dialog component.
+*
+* @param Component - A React component that represents the dialog content. It must accept props of type P.
+* @param defaultContainerProps - Default props to pass to the DialogContainer.
+* @returns An object with `open` function to open the dialog with provided props and `rendered` JSX element to include in your component tree.
+*/
+function useDialogContainer(Component, defaultContainerProps) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [componentProps, setComponentProps] = useState(null);
+	const [containerProps, setContainerProps] = useState(null);
+	const setupRef = useRef(false);
+	function setupCheck() {
+		if (!setupRef.current) throw new Error("useDialogContainer: DialogContainer must be rendered. Use `rendered` property to include it in your component tree.");
+	}
+	const open = useEvent((props, containerProps) => {
+		setupCheck();
+		setComponentProps(props);
+		setContainerProps(containerProps ?? null);
+		setIsOpen(true);
+	});
+	const update = useEvent((props, containerProps) => {
+		setupCheck();
+		setComponentProps(props);
+		setContainerProps(containerProps ?? null);
+	});
+	const close = useEvent(() => {
+		setIsOpen(false);
+	});
+	const renderedDialog = useMemo(() => {
+		if (!componentProps) return null;
+		return /* @__PURE__ */ jsx(DialogContainer, {
+			isOpen,
+			onDismiss: close,
+			...mergeProps(defaultContainerProps, containerProps || void 0),
+			children: /* @__PURE__ */ jsx(Component, { ...componentProps })
+		});
+	}, [
+		componentProps,
+		containerProps,
+		isOpen,
+		defaultContainerProps
+	]);
+	return {
+		open,
+		update,
+		close,
+		get rendered() {
+			setupRef.current = true;
+			return renderedDialog;
+		}
+	};
+}
+
+//#endregion
+export { useDialogContainer };
+//# sourceMappingURL=use-dialog-container.js.map

package/dist/components/overlays/Dialog/use-dialog-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dialog-container.js","names":[],"sources":["../../../../src/components/overlays/Dialog/use-dialog-container.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentType,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { useEvent } from '../../../_internal';\nimport { mergeProps } from '../../../utils/react';\n\nimport { DialogContainer } from './DialogContainer';\n\n/**\n * Generic hook to manage a dialog component.\n *\n * @param Component - A React component that represents the dialog content. It must accept props of type P.\n * @param defaultContainerProps - Default props to pass to the DialogContainer.\n * @returns An object with `open` function to open the dialog with provided props and `rendered` JSX element to include in your component tree.\n */\nexport function useDialogContainer<\n  P,\n  E = ComponentProps<typeof DialogContainer>,\n>(\n  Component: ComponentType<P>,\n  defaultContainerProps?: ComponentProps<typeof DialogContainer>,\n) {\n  const [isOpen, setIsOpen] = useState(false);\n  const [componentProps, setComponentProps] = useState<P | null>(null);\n  const [containerProps, setContainerProps] = useState<E | null>(null);\n  const setupRef = useRef(false);\n\n  function setupCheck() {\n    if (!setupRef.current) {\n      throw new Error(\n        'useDialogContainer: DialogContainer must be rendered. Use `rendered` property to include it in your component tree.',\n      );\n    }\n  }\n\n  // 'open' accepts props required by the Component and opens the dialog\n  const open = useEvent((props: P, containerProps?: E) => {\n    setupCheck();\n\n    setComponentProps(props);\n    setContainerProps(containerProps ?? null);\n    setIsOpen(true);\n  });\n\n  const update = useEvent((props: P, containerProps?: E) => {\n    setupCheck();\n\n    setComponentProps(props);\n    setContainerProps(containerProps ?? null);\n  });\n\n  const close = useEvent(() => {\n    setIsOpen(false);\n  });\n\n  // Render the dialog only when componentProps is set\n  const renderedDialog = useMemo(() => {\n    if (!componentProps) return null;\n\n    return (\n      <DialogContainer\n        isOpen={isOpen}\n        onDismiss={close}\n        {...mergeProps(defaultContainerProps, containerProps || undefined)}\n      >\n        <Component {...componentProps} />\n      </DialogContainer>\n    );\n  }, [componentProps, containerProps, isOpen, defaultContainerProps]);\n\n  return {\n    open,\n    update,\n    close,\n    get rendered() {\n      setupRef.current = true;\n\n      return renderedDialog;\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,SAAgB,mBAId,WACA,uBACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAC3C,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,KAAK;CACpE,MAAM,CAAC,gBAAgB,qBAAqB,SAAmB,KAAK;CACpE,MAAM,WAAW,OAAO,MAAM;CAE9B,SAAS,aAAa;AACpB,MAAI,CAAC,SAAS,QACZ,OAAM,IAAI,MACR,sHACD;;CAKL,MAAM,OAAO,UAAU,OAAU,mBAAuB;AACtD,cAAY;AAEZ,oBAAkB,MAAM;AACxB,oBAAkB,kBAAkB,KAAK;AACzC,YAAU,KAAK;GACf;CAEF,MAAM,SAAS,UAAU,OAAU,mBAAuB;AACxD,cAAY;AAEZ,oBAAkB,MAAM;AACxB,oBAAkB,kBAAkB,KAAK;GACzC;CAEF,MAAM,QAAQ,eAAe;AAC3B,YAAU,MAAM;GAChB;CAGF,MAAM,iBAAiB,cAAc;AACnC,MAAI,CAAC,eAAgB,QAAO;AAE5B,SACE,oBAAC;GACS;GACR,WAAW;GACX,GAAI,WAAW,uBAAuB,kBAAkB,OAAU;aAElE,oBAAC,aAAU,GAAI,iBAAkB;IACjB;IAEnB;EAAC;EAAgB;EAAgB;EAAQ;EAAsB,CAAC;AAEnE,QAAO;EACL;EACA;EACA;EACA,IAAI,WAAW;AACb,YAAS,UAAU;AAEnB,UAAO;;EAEV"}

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

@@ -0,0 +1,3 @@
+
+import "../../../tasty/index.js";
+import "./types.js";

package/dist/components/overlays/Modal/Modal.js

@@ -0,0 +1,113 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { mergeProps as mergeProps$1 } from "../../../utils/react/mergeProps.js";
+import { _Overlay } from "./Overlay.js";
+import { _Underlay } from "./Underlay.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useModal, useOverlay, usePreventScroll } from "react-aria";
+import { useDOMRef } from "@react-spectrum/utils";
+
+//#region src/components/overlays/Modal/Modal.tsx
+const OVERLAY_WRAPPER_STYLES = {
+	position: "fixed",
+	display: "grid",
+	left: 0,
+	top: 0,
+	placeItems: {
+		"": "center",
+		"type=fullscreen": "center",
+		"type=fullscreenTakeover | type=panel": "stretch"
+	},
+	boxSizing: "border-box",
+	width: "100vw",
+	height: "100dvh",
+	pointerEvents: "none",
+	zIndex: 10,
+	transition: {
+		"": "visibility .5s steps(2, start)",
+		open: "visibility 0s linear"
+	}
+};
+const ModalWrapperElement = tasty({
+	qa: "ModalWrapper",
+	styles: OVERLAY_WRAPPER_STYLES
+});
+const ModalElement = tasty({ styles: {
+	display: {
+		"": "none",
+		"entering | entered": "grid",
+		exiting: "grid",
+		exited: "none"
+	},
+	zIndex: 10,
+	height: {
+		"": "max 90dvh",
+		"type=fullscreenTakeover | type=panel": "100dvh 100dvh",
+		"type=fullscreen": "(100dvh - 8x) (100dvh - 8x)",
+		"type=panel": "auto"
+	},
+	width: {
+		"": "$min-dialog-size (100dvw - 8x)",
+		"type=panel": "auto"
+	},
+	pointerEvents: "none",
+	transition: "opacity .25s linear, transform .25s ease-in-out",
+	transform: {
+		"": "initial",
+		"type=modal & !open": "translate(0, -3x) scale(1, 1)",
+		"(type^=fullscreen | type=panel) & !open": "translate(0, 0) scale(1.02, 1.02)"
+	},
+	opacity: {
+		"": 0,
+		open: .9999
+	}
+} });
+function Modal(props, ref) {
+	let { qa, children, onClose, type, styles, ...otherProps } = props;
+	let domRef = useDOMRef(ref);
+	let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);
+	return /* @__PURE__ */ jsxs(_Overlay, {
+		...otherProps,
+		children: [type !== "fullscreenTakeover" && type !== "panel" && /* @__PURE__ */ jsx(_Underlay, { ...underlayProps }), /* @__PURE__ */ jsx(ModalWrapper, {
+			ref: domRef,
+			qa,
+			type,
+			overlayProps,
+			styles,
+			onClose,
+			children
+		})]
+	});
+}
+let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
+	let { qa, children, isOpen, type, placement, styles, overlayProps, transitionState, ...otherProps } = props;
+	usePreventScroll({ isDisabled: transitionState !== "entered" });
+	let { modalProps } = useModal({ isDisabled: transitionState !== "entered" });
+	return /* @__PURE__ */ jsx(ModalWrapperElement, {
+		"data-type": type,
+		"data-placement": placement,
+		children: /* @__PURE__ */ jsx(ModalElement, {
+			qa: qa || "Modal",
+			styles,
+			mods: {
+				open: isOpen,
+				entering: transitionState === "entering",
+				exiting: transitionState === "exiting",
+				exited: transitionState === "exited",
+				entered: transitionState === "entered"
+			},
+			"data-type": type,
+			"data-placement": placement,
+			...mergeProps$1(otherProps, overlayProps, modalProps),
+			ref,
+			children
+		})
+	});
+});
+let _Modal = forwardRef(Modal);
+_Modal.displayName = "Modal";
+
+//#endregion
+export { OVERLAY_WRAPPER_STYLES, _Modal };
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":["Overlay","Underlay","mergeProps"],"sources":["../../../../src/components/overlays/Modal/Modal.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { forwardRef, ReactNode } from 'react';\nimport { useModal, useOverlay, usePreventScroll } from 'react-aria';\n\nimport { BaseProps, Props, Styles, tasty } from '../../../tasty';\nimport { mergeProps } from '../../../utils/react';\n\nimport { Overlay } from './Overlay';\nimport { ModalProps, TransitionState, WithCloseBehavior } from './types';\nimport { Underlay } from './Underlay';\n\nexport const OVERLAY_WRAPPER_STYLES: Styles = {\n  position: 'fixed',\n  display: 'grid',\n  left: 0,\n  top: 0,\n  placeItems: {\n    '': 'center',\n    'type=fullscreen': 'center',\n    'type=fullscreenTakeover | type=panel': 'stretch',\n  },\n  boxSizing: 'border-box',\n  width: '100vw',\n  height: '100dvh',\n  pointerEvents: 'none',\n  zIndex: 10,\n  transition: {\n    '': 'visibility .5s steps(2, start)',\n    open: 'visibility 0s linear',\n  },\n};\n\nconst ModalWrapperElement = tasty({\n  qa: 'ModalWrapper',\n  styles: OVERLAY_WRAPPER_STYLES,\n});\n\nconst ModalElement = tasty({\n  styles: {\n    display: {\n      '': 'none',\n      'entering | entered': 'grid',\n      exiting: 'grid',\n      exited: 'none',\n    },\n    zIndex: 10,\n    height: {\n      '': 'max 90dvh',\n      'type=fullscreenTakeover | type=panel': '100dvh 100dvh',\n      'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',\n      'type=panel': 'auto',\n    },\n    width: {\n      '': '$min-dialog-size (100dvw - 8x)',\n      'type=panel': 'auto',\n    },\n    pointerEvents: 'none',\n    transition: 'opacity .25s linear, transform .25s ease-in-out',\n    transform: {\n      '': 'initial',\n      'type=modal & !open': 'translate(0, -3x) scale(1, 1)',\n      '(type^=fullscreen | type=panel) & !open':\n        'translate(0, 0) scale(1.02, 1.02)',\n    },\n    opacity: {\n      '': 0,\n      open: 0.9999,\n    },\n  },\n});\n\nexport interface CubeModalProps\n  extends Omit<ModalProps, 'container' | 'type' | 'nodeRef'>,\n    WithCloseBehavior {\n  container?: HTMLElement;\n  qa?: BaseProps['qa'];\n  onClose?: (action?: string) => void;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  styles?: Styles;\n  shouldCloseOnInteractOutside?: (element: Element) => boolean;\n}\n\nfunction Modal(props: CubeModalProps, ref) {\n  let { qa, children, onClose, type, styles, ...otherProps } = props;\n  let domRef = useDOMRef(ref);\n\n  let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);\n\n  return (\n    <Overlay {...otherProps}>\n      {type !== 'fullscreenTakeover' && type !== 'panel' && (\n        <Underlay {...underlayProps} />\n      )}\n      <ModalWrapper\n        ref={domRef}\n        qa={qa}\n        type={type}\n        overlayProps={overlayProps}\n        styles={styles}\n        onClose={onClose}\n      >\n        {children}\n      </ModalWrapper>\n    </Overlay>\n  );\n}\n\ninterface ModalWrapperProps extends TransitionState {\n  children?: ReactNode;\n  qa?: BaseProps['qa'];\n  isOpen?: boolean;\n  type?: 'modal' | 'fullscreen' | 'fullscreenTakeover' | 'panel';\n  placement?: 'top' | 'bottom';\n  styles?: Styles;\n  overlayProps?: Props;\n  onClose?: () => void;\n}\n\nlet ModalWrapper = forwardRef(function ModalWrapper(\n  props: ModalWrapperProps,\n  ref,\n) {\n  let {\n    qa,\n    children,\n    isOpen,\n    type,\n    placement,\n    styles,\n    overlayProps,\n    transitionState,\n    ...otherProps\n  } = props;\n\n  usePreventScroll({ isDisabled: transitionState !== 'entered' });\n\n  let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });\n\n  return (\n    <ModalWrapperElement data-type={type} data-placement={placement}>\n      <ModalElement\n        qa={qa || 'Modal'}\n        styles={styles}\n        mods={{\n          open: isOpen,\n          entering: transitionState === 'entering',\n          exiting: transitionState === 'exiting',\n          exited: transitionState === 'exited',\n          entered: transitionState === 'entered',\n        }}\n        data-type={type}\n        data-placement={placement}\n        {...mergeProps(otherProps, overlayProps, modalProps)}\n        ref={ref}\n      >\n        {children}\n      </ModalElement>\n    </ModalWrapperElement>\n  );\n});\n\nlet _Modal = forwardRef(Modal);\n\n_Modal.displayName = 'Modal';\n\nexport { _Modal as Modal };\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,yBAAiC;CAC5C,UAAU;CACV,SAAS;CACT,MAAM;CACN,KAAK;CACL,YAAY;EACV,IAAI;EACJ,mBAAmB;EACnB,wCAAwC;EACzC;CACD,WAAW;CACX,OAAO;CACP,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;EACV,IAAI;EACJ,MAAM;EACP;CACF;AAED,MAAM,sBAAsB,MAAM;CAChC,IAAI;CACJ,QAAQ;CACT,CAAC;AAEF,MAAM,eAAe,MAAM,EACzB,QAAQ;CACN,SAAS;EACP,IAAI;EACJ,sBAAsB;EACtB,SAAS;EACT,QAAQ;EACT;CACD,QAAQ;CACR,QAAQ;EACN,IAAI;EACJ,wCAAwC;EACxC,mBAAmB;EACnB,cAAc;EACf;CACD,OAAO;EACL,IAAI;EACJ,cAAc;EACf;CACD,eAAe;CACf,YAAY;CACZ,WAAW;EACT,IAAI;EACJ,sBAAsB;EACtB,2CACE;EACH;CACD,SAAS;EACP,IAAI;EACJ,MAAM;EACP;CACF,EACF,CAAC;AAaF,SAAS,MAAM,OAAuB,KAAK;CACzC,IAAI,EAAE,IAAI,UAAU,SAAS,MAAM,QAAQ,GAAG,eAAe;CAC7D,IAAI,SAAS,UAAU,IAAI;CAE3B,IAAI,EAAE,cAAc,kBAAkB,WAAW,EAAE,GAAG,OAAO,EAAE,OAAO;AAEtE,QACE,qBAACA;EAAQ,GAAI;aACV,SAAS,wBAAwB,SAAS,WACzC,oBAACC,aAAS,GAAI,gBAAiB,EAEjC,oBAAC;GACC,KAAK;GACD;GACE;GACQ;GACN;GACC;GAER;IACY;GACP;;AAed,IAAI,eAAe,WAAW,SAAS,aACrC,OACA,KACA;CACA,IAAI,EACF,IACA,UACA,QACA,MACA,WACA,QACA,cACA,iBACA,GAAG,eACD;AAEJ,kBAAiB,EAAE,YAAY,oBAAoB,WAAW,CAAC;CAE/D,IAAI,EAAE,eAAe,SAAS,EAAE,YAAY,oBAAoB,WAAW,CAAC;AAE5E,QACE,oBAAC;EAAoB,aAAW;EAAM,kBAAgB;YACpD,oBAAC;GACC,IAAI,MAAM;GACF;GACR,MAAM;IACJ,MAAM;IACN,UAAU,oBAAoB;IAC9B,SAAS,oBAAoB;IAC7B,QAAQ,oBAAoB;IAC5B,SAAS,oBAAoB;IAC9B;GACD,aAAW;GACX,kBAAgB;GAChB,GAAIC,aAAW,YAAY,cAAc,WAAW;GAC/C;GAEJ;IACY;GACK;EAExB;AAEF,IAAI,SAAS,WAAW,MAAM;AAE9B,OAAO,cAAc"}