@medusajs/ui 0.0.0-alpha-20230713141422

package/build/esm/components/focus-modal/focus-modal.js

@@ -0,0 +1,80 @@
+import { XMark } from '@medusajs/icons';
+import * as Primitives from '@radix-ui/react-dialog';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { Kbd } from '../kbd/kbd.js';
+import { Button } from '../button/button.js';
+
+const Root = Primitives.Root;
+Root.displayName = "FocusModal.Root";
+const Trigger = Primitives.Trigger;
+Trigger.displayName = "FocusModal.Trigger";
+const Portal = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Primitives.DialogPortal, Object.assign({
+    className: clx(className)
+  }, props));
+};
+Portal.displayName = "FocusModal.Portal";
+const Overlay = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Overlay, Object.assign({
+    ref: ref,
+    className: clx("fixed inset-0 z-50",
+    // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",  // Re-enable when Admin UI has been cleaned up
+    className)
+  }, props));
+});
+Overlay.displayName = "FocusModal.Overlay";
+const Content = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Overlay, null), /*#__PURE__*/React.createElement(Primitives.Content, Object.assign({
+    ref: ref,
+    className: clx("bg-ui-bg-base shadow-elevation-modal fixed inset-2 z-50 flex flex-col rounded-lg border focus:outline-none",
+    // "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-200",  // Re-enable when Admin UI has been cleaned up
+    className)
+  }, props)));
+});
+Content.displayName = "FocusModal.Content";
+const Header = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("border-ui-border-base flex items-start justify-between gap-x-4 border-b p-4", className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-x-2"
+  }, /*#__PURE__*/React.createElement(Primitives.Close, {
+    asChild: true
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "transparent",
+    size: "sm",
+    format: "icon"
+  }, /*#__PURE__*/React.createElement(XMark, null))), /*#__PURE__*/React.createElement(Kbd, null, "esc")), /*#__PURE__*/React.createElement("div", null, children));
+};
+Header.displayName = "FocusModal.Header";
+const Body = ({
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: clx("flex-1", className)
+  }, props));
+};
+Body.displayName = "FocusModal.Body";
+const FocusModal = {
+  Root,
+  Trigger,
+  Content,
+  Header,
+  Body
+};
+
+export { FocusModal };

package/build/esm/components/heading/heading.js

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const headingVariants = cva("font-sans font-medium", {
+  variants: {
+    level: {
+      h1: "text-xl leading-8",
+      h2: "text-base leading-6",
+      h3: "text-sm leading-5"
+    }
+  },
+  defaultVariants: {
+    level: "h1"
+  }
+});
+const Heading = ({
+  level,
+  className,
+  ...props
+}) => {
+  const Component = level ? level : "h1";
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    className: clx(headingVariants({
+      level
+    }), className)
+  }, props));
+};
+
+export { Heading, headingVariants };

package/build/esm/components/input/input.js

@@ -0,0 +1,29 @@
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const inputVariants = cva("bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover border-ui-border-loud-muted invalid:!border-ui-border-error invalid:focus:!shadow-borders-error disabled:text-ui-fg-disabled disabled:!bg-ui-bg-disabled disabled:!border-ui-border-base focus:border-ui-border-interactive focus:shadow-borders-active placeholder:text-ui-fg-muted text-ui-fg-base relative w-full rounded-md border outline-none transition-all disabled:cursor-not-allowed disabled:!shadow-none", {
+  variants: {
+    size: {
+      base: "h-10 px-3 py-[9px]",
+      small: "h-8"
+    }
+  }
+});
+const Input = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement("input", Object.assign({
+    ref: ref,
+    className: clx(inputVariants({
+      size: "base"
+    }), labelVariants({
+      size: "base"
+    }), className)
+  }, props));
+});
+Input.displayName = "Input";
+
+export { Input };

package/build/esm/components/kbd/kbd.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const Kbd = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement("kbd", Object.assign({}, props, {
+    className: clx("bg-ui-tag-neutral-bg text-ui-tag-neutral-text border-ui-tag-neutral-border min-w-5 inline-flex h-5 w-fit items-center justify-center rounded-md border px-1", labelVariants({
+      size: "xsmall",
+      weight: "plus"
+    }), className)
+  }), children);
+};
+
+export { Kbd };

package/build/esm/components/label/label.js

@@ -0,0 +1,40 @@
+import * as Primitives from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const labelVariants = cva("font-sans", {
+  variants: {
+    size: {
+      xsmall: "text-xs leading-5",
+      small: "text-[13px] leading-5",
+      base: "text-sm leading-5",
+      large: "text-base leading-5"
+    },
+    weight: {
+      regular: "font-normal",
+      plus: "font-medium"
+    }
+  },
+  defaultVariants: {
+    size: "base",
+    weight: "regular"
+  }
+});
+const Label = /*#__PURE__*/React.forwardRef(({
+  className,
+  size = "base",
+  weight = "regular",
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({
+    ref: ref,
+    className: clx(labelVariants({
+      size,
+      weight
+    }), className)
+  }, props));
+});
+Label.displayName = "Label";
+
+export { Label, labelVariants };

package/build/esm/components/radio-group/radio-group.js

@@ -0,0 +1,38 @@
+import * as Primitives from '@radix-ui/react-radio-group';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const Root = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({
+    className: clx("grid gap-2", className)
+  }, props, {
+    ref: ref
+  }));
+});
+Root.displayName = "RadioGroup.Root";
+const Item = /*#__PURE__*/React.forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement(Primitives.Item, Object.assign({
+    ref: ref,
+    className: clx("group relative flex h-5 w-5 items-center justify-center outline-none", className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "shadow-borders-base-w-shadow group-hover:shadow-borders-strong-w-shadow bg-ui-bg-base group-data-[state=checked]:bg-ui-bg-interactive group-data-[state=checked]:shadow-borders-interactive group-focus:!shadow-borders-interactive-w-focus group-disabled:!bg-ui-bg-disabled group-disabled:!shadow-borders-base flex h-[14px] w-[14px] items-center justify-center rounded-full transition-all"
+  }, /*#__PURE__*/React.createElement(Primitives.Indicator, {
+    className: "flex items-center justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx("bg-ui-bg-base shadow-details-contrast-on-bg-interactive group-disabled:bg-ui-fg-disabled h-1.5 w-1.5 rounded-full group-disabled:shadow-none")
+  }))));
+});
+Item.displayName = "RadioGroup.Item";
+const RadioGroup = {
+  Root,
+  Item
+};
+
+export { RadioGroup };

package/build/esm/components/switch/switch.js

@@ -0,0 +1,45 @@
+import * as Primitives from '@radix-ui/react-switch';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const switchVariants = cva("bg-ui-bg-toggle-off hover:bg-ui-bg-toggle-off-hover data-[state=unchecked]:hover:after:bg-toggle-off-hover-gradient before:shadow-details-switch-background focus:shadow-details-switch-background-focus data-[state=checked]:bg-ui-bg-interactive disabled:!bg-ui-bg-disabled group relative inline-flex items-center rounded-full outline-none transition-all before:absolute before:inset-0 before:rounded-full before:content-[''] after:absolute after:inset-0 after:rounded-full after:content-[''] disabled:cursor-not-allowed", {
+  variants: {
+    size: {
+      small: "h-[16px] w-[28px]",
+      base: "h-[18px] w-[32px]"
+    }
+  },
+  defaultVariants: {
+    size: "base"
+  }
+});
+const thumbVariants = cva("bg-ui-bg-base shadow-details-switch-thumb group-disabled:bg-ui-bg-disabled pointer-events-none z-10 h-[14px] w-[14px] rounded-full transition-all", {
+  variants: {
+    size: {
+      small: "h-[12px] w-[12px] data-[state=checked]:translate-x-3.5 data-[state=unchecked]:translate-x-0.5",
+      base: "h-[14px] w-[14px] data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5"
+    }
+  },
+  defaultVariants: {
+    size: "base"
+  }
+});
+const Switch = /*#__PURE__*/React.forwardRef(({
+  className,
+  size = "base",
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({
+  className: clx(switchVariants({
+    size
+  }), className)
+}, props, {
+  ref: ref
+}), /*#__PURE__*/React.createElement(Primitives.Thumb, {
+  className: clx(thumbVariants({
+    size
+  }))
+})));
+Switch.displayName = "Switch";
+
+export { Switch };

package/build/esm/components/text/text.js

@@ -0,0 +1,49 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+
+const textVariants = cva("", {
+  variants: {
+    size: {
+      base: "text-sm leading-6",
+      large: "text-base leading-7",
+      xlarge: "text-lg leading-8"
+    },
+    weight: {
+      regular: "font-normal",
+      plus: "font-medium"
+    },
+    family: {
+      sans: "font-sans",
+      mono: "font-mono"
+    }
+  },
+  defaultVariants: {
+    family: "sans",
+    size: "base",
+    weight: "regular"
+  }
+});
+const Text = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  size = "base",
+  weight = "regular",
+  family = "sans",
+  children,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot : "p";
+  return /*#__PURE__*/React.createElement(Component, Object.assign({
+    ref: ref,
+    className: clx(textVariants({
+      size,
+      weight,
+      family
+    }), className)
+  }, props), children);
+});
+Text.displayName = "Text";
+
+export { Text, textVariants };

package/build/esm/components/textarea/textarea.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { textVariants } from '../text/text.js';
+
+const Textarea = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement("textarea", Object.assign({
+    ref: ref,
+    className: clx(textVariants({
+      size: "base"
+    }), "bg-ui-bg-subtle focus:shadow-borders-active focus:border-ui-border-interactive border-ui-border-loud-muted shadow-buttons-secondary placeholder:text-ui-fg-muted min-h-[70px] w-full rounded-md border px-3 py-[7px] outline-none transition-colors", className)
+  }, props));
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/build/esm/components/toast/toast.js

@@ -0,0 +1,106 @@
+import { InformationCircleSolid, Spinner, XCircleSolid, ExclamationCircleSolid, CheckCircleSolid } from '@medusajs/icons';
+import * as Primitives from '@radix-ui/react-toast';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const ToastProvider = Primitives.Provider;
+ToastProvider.displayName = "ToastProvider";
+const ToastViewport = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(Primitives.Viewport, Object.assign({
+  ref: ref,
+  className: clx("fixed right-0 top-0 z-[100] w-full p-6 md:max-w-[484px]", className)
+}, props)));
+ToastViewport.displayName = "ToastViewport";
+const Toast = /*#__PURE__*/React.forwardRef(({
+  className,
+  variant,
+  title,
+  description,
+  action,
+  disableDismiss = false,
+  ...props
+}, ref) => {
+  let Icon = undefined;
+  switch (variant) {
+    case "success":
+      Icon = /*#__PURE__*/React.createElement(CheckCircleSolid, {
+        className: "text-ui-tag-green-icon"
+      });
+      break;
+    case "warning":
+      Icon = /*#__PURE__*/React.createElement(ExclamationCircleSolid, {
+        className: "text-ui-tag-orange-icon"
+      });
+      break;
+    case "error":
+      Icon = /*#__PURE__*/React.createElement(XCircleSolid, {
+        className: "text-ui-tag-red-icon"
+      });
+      break;
+    case "loading":
+      Icon = /*#__PURE__*/React.createElement(Spinner, {
+        className: "text-ui-tag-blue-icon animate-spin"
+      });
+      break;
+    default:
+      Icon = /*#__PURE__*/React.createElement(InformationCircleSolid, {
+        className: "text-ui-fg-base"
+      });
+      break;
+  }
+  if (action && !action.altText) {
+    // eslint-disable-next-line turbo/no-undeclared-env-vars
+    if (process.env.NODE_ENV === "development") {
+      console.warn("Omitting `altText` from the action is not recommended. Please provide a description for screen readers.");
+    }
+  }
+  return /*#__PURE__*/React.createElement(Primitives.Root, Object.assign({
+    ref: ref,
+    className: clx("bg-ui-bg-base shadow-elevation-flyout flex h-fit min-h-[74px] w-full overflow-hidden rounded-md md:max-w-[440px]", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none", className)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "border-ui-border-base flex flex-1 items-start space-x-3 border-r p-4"
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": true
+  }, Icon), /*#__PURE__*/React.createElement("div", null, title && /*#__PURE__*/React.createElement(Primitives.Title, {
+    className: clx(labelVariants({
+      size: "small",
+      weight: "plus"
+    }), "text-ui-fg-base")
+  }, title), description && /*#__PURE__*/React.createElement(Primitives.Description, {
+    className: clx(labelVariants({
+      size: "base"
+    }), "text-ui-fg-subtle")
+  }, description))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col"
+  }, action && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Primitives.Action, {
+    altText: action.altText,
+    className: clx("text-ui-fg-base bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors", labelVariants({
+      size: "small",
+      weight: "plus"
+    }), {
+      "text-ui-fg-error": variant === "error"
+    }),
+    onClick: e => {
+      e.preventDefault();
+      action.onClick();
+    },
+    type: "button"
+  }, action.label), /*#__PURE__*/React.createElement("div", {
+    className: "bg-ui-border-base h-px w-full"
+  })), !disableDismiss && /*#__PURE__*/React.createElement(Primitives.Close, {
+    className: clx("text-ui-fg-subtle bg-ui-bg-base hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed flex flex-1 items-center justify-center px-6 transition-colors", labelVariants({
+      size: "small",
+      weight: "plus"
+    }), {
+      "h-1/2": action,
+      "h-full": !action
+    }),
+    "aria-label": "Close"
+  }, "Close")));
+});
+Toast.displayName = "Toast";
+
+export { Toast, ToastProvider, ToastViewport };

package/build/esm/components/toaster/toaster.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useToast } from '../../hooks/use-toast/use-toast.js';
+import { ToastProvider, Toast, ToastViewport } from '../toast/toast.js';
+
+const Toaster = () => {
+  const {
+    toasts
+  } = useToast();
+  return /*#__PURE__*/React.createElement(ToastProvider, {
+    swipeDirection: "right"
+  }, toasts.map(({
+    id,
+    ...props
+  }) => {
+    return /*#__PURE__*/React.createElement(Toast, Object.assign({
+      key: id
+    }, props));
+  }), /*#__PURE__*/React.createElement(ToastViewport, null));
+};
+
+export { Toaster };

package/build/esm/components/tooltip/tooltip.js

@@ -0,0 +1,46 @@
+import * as Primitives from '@radix-ui/react-tooltip';
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { labelVariants } from '../label/label.js';
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  maxWidth = 220,
+  className,
+  side,
+  sideOffset = 4,
+  onClick,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Primitives.Provider, {
+    delayDuration: 100
+  }, /*#__PURE__*/React.createElement(Primitives.Root, {
+    open: open,
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    delayDuration: delayDuration
+  }, /*#__PURE__*/React.createElement(Primitives.Trigger, {
+    onClick: onClick,
+    asChild: true
+  }, children), /*#__PURE__*/React.createElement(Primitives.Portal, null, /*#__PURE__*/React.createElement(Primitives.Content, Object.assign({
+    side: side,
+    sideOffset: sideOffset,
+    align: "center",
+    className: clx("text-ui-fg-subtle animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-ui-bg-base shadow-elevation-tooltip z-[999] rounded-lg px-3 py-2", labelVariants({
+      size: "xsmall",
+      weight: "plus"
+    }), className)
+  }, props, {
+    style: {
+      ...props.style,
+      maxWidth
+    }
+  }), content))));
+};
+
+export { Tooltip };

package/build/esm/hooks/use-alert-dialog/dialog.js

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { clx } from '../../utils/clx.js';
+import { AlertDialog } from '../../components/alert-dialog/alert-dialog.js';
+import { Label, labelVariants } from '../../components/label/label.js';
+import { Input } from '../../components/input/input.js';
+
+const Dialog = ({
+  open,
+  title,
+  description,
+  verificationText,
+  cancelText = "Cancel",
+  confirmText = "Confirm",
+  onConfirm,
+  onCancel
+}) => {
+  const [userInput, setUserInput] = React.useState("");
+  const handleUserInput = event => {
+    setUserInput(event.target.value);
+  };
+  const validInput = React.useMemo(() => {
+    if (!verificationText) {
+      return true;
+    }
+    return userInput === verificationText;
+  }, [userInput, verificationText]);
+  const handleFormSubmit = event => {
+    event.preventDefault();
+    if (validInput) {
+      onConfirm();
+    }
+  };
+  React.useEffect(() => {
+    const handleEscape = event => {
+      if (event.key === "Escape" && open) {
+        onCancel();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onCancel, open]);
+  return /*#__PURE__*/React.createElement(AlertDialog, {
+    open: open
+  }, /*#__PURE__*/React.createElement(AlertDialog.Content, null, /*#__PURE__*/React.createElement(AlertDialog.Header, null, /*#__PURE__*/React.createElement(AlertDialog.Title, null, title), /*#__PURE__*/React.createElement(AlertDialog.Description, null, description)), verificationText && /*#__PURE__*/React.createElement("form", {
+    onSubmit: handleFormSubmit
+  }, /*#__PURE__*/React.createElement("fieldset", {
+    className: "border-ui-border-base mt-6 flex flex-col gap-y-4 border-y p-6"
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: "verificationText",
+    className: "text-subtle"
+  }, "Please type", " ", /*#__PURE__*/React.createElement("span", {
+    className: clx(labelVariants({
+      size: "base",
+      weight: "plus"
+    }), "text-ui-fg-base")
+  }, verificationText), " ", "to confirm."), /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    autoComplete: "off",
+    id: "verificationText",
+    placeholder: verificationText,
+    onChange: handleUserInput
+  }))), /*#__PURE__*/React.createElement(AlertDialog.Footer, null, /*#__PURE__*/React.createElement(AlertDialog.Cancel, {
+    onClick: onCancel
+  }, cancelText), /*#__PURE__*/React.createElement(AlertDialog.Action, {
+    onClick: verificationText ? undefined : onConfirm,
+    disabled: !validInput,
+    type: verificationText ? "submit" : "button"
+  }, confirmText))));
+};
+var Dialog$1 = Dialog;
+
+export { Dialog$1 as default };

package/build/esm/hooks/use-alert-dialog/use-alert-dialog.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import Dialog from './dialog.js';
+
+const useAlertDialog = () => {
+  const dialog = async props => {
+    return new Promise(resolve => {
+      let open = true;
+      const onCancel = () => {
+        open = false;
+        render();
+        resolve(false);
+      };
+      const onConfirm = () => {
+        open = false;
+        resolve(true);
+        render();
+      };
+      const mountRoot = createRoot(document.createElement("div"));
+      const render = () => {
+        mountRoot.render( /*#__PURE__*/React.createElement(Dialog, Object.assign({
+          open: open,
+          onConfirm: onConfirm,
+          onCancel: onCancel
+        }, props)));
+      };
+      render();
+    });
+  };
+  return dialog;
+};
+
+export { useAlertDialog };