@eightshift/ui-components 5.0.0 → 5.0.1

package/dist/components/menu/menu.js

@@ -0,0 +1,285 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-B88tj5YD.js";
+import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$4b1545b4f2016d26, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-D190gMbE.js";
+import { icons } from "../../icons/icons.js";
+import { Button } from "../button/button.js";
+import { Popover } from "../popover/popover.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { cloneElement } from "react";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+/**
+ * A simple menu component.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.triggerLabel] - The label of the trigger button.
+ * @param {JSX.Element} [props.triggerIcon] - The icon of the trigger button.
+ * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
+ * @param {string} [props.tooltip] - Tooltip text to display on the trigger button.
+ * @param {boolean} [props.keepOpen=false] - If `true`, the menu will not close when an item is selected.
+ * @param {boolean} [props.openOnLongPress=false] - If `true`, the menu will open on long press instead of click. If enabled, a regular `onPress` event can also be passed to the trigger button to enable dual behavior.
+ * @param {Object} [props.popoverProps] - Props to pass to the popover.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The Menu component.
+ *
+ * @example
+ * <Menu>
+ * 	<MenuSection label='Section 1'>
+ * 		<MenuItem>Item 1</MenuItem>
+ * 		<MenuItem>Item 2</MenuItem>
+ * 	</MenuSection>
+ * 	<MenuSection label='Section 2'>
+ * 		<MenuItem>Item 3</MenuItem>
+ * 		<MenuItem>Item 4</MenuItem>
+ * 	</MenuSection>
+ * </Menu>
+ *
+ * @example
+ * <Menu>
+ * 	<MenuItem>Item 1</MenuItem>
+ * 	<MenuItem>Item 2</MenuItem>
+ * 	<MenuSeparator />
+ * 	<MenuItem>Item 3</MenuItem>
+ * 	<MenuItem>Item 4</MenuItem>
+ * </Menu>
+ *
+ * @example
+ * <Menu>
+ * 	<MenuItem>Item 1</MenuItem>
+ * 	<MenuItem>Item 2</MenuItem>
+ * 	<SubMenuItem
+ * 		trigger={<MenuItem>Submenu</MenuItem>}
+ * 	>
+ * 		<MenuItem>Subitem 1</MenuItem>
+ * 		<MenuItem>Subitem 2</MenuItem>
+ * 	</SubMenuItem>
+ * </Menu>
+ *
+ *
+ * @preserve
+ */
+const Menu = (props) => {
+  var _a;
+  const {
+    children,
+    triggerLabel,
+    triggerIcon = !triggerLabel && icons.hamburgerMenu,
+    triggerProps,
+    popoverProps,
+    tooltip,
+    keepOpen = false,
+    "aria-label": ariaLabel = triggerLabel ?? __("Menu", "eightshift-ui-components"),
+    openOnLongPress = false,
+    hidden
+  } = props;
+  if (hidden) {
+    return null;
+  }
+  let additionalProps = {};
+  if (keepOpen) {
+    additionalProps = {
+      ...additionalProps,
+      selectionMode: "multiple",
+      selectedKeys: [],
+      onSelectionChange: () => {
+      },
+      items: []
+    };
+  }
+  if (openOnLongPress) {
+    additionalProps.trigger = "longPress";
+  }
+  const hasSubmenuItems = Array.isArray(children) ? children.some((child) => {
+    var _a2;
+    return ((_a2 = child == null ? void 0 : child.type) == null ? void 0 : _a2.displayName) === "SubMenuItem";
+  }) : ((_a = children == null ? void 0 : children.type) == null ? void 0 : _a.displayName) === "SubMenuItem";
+  return /* @__PURE__ */ jsxs(
+    $3674c52c6b3c5bce$export$27d2ad3c5815583e,
+    {
+      ...props,
+      ...additionalProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: triggerIcon,
+            tooltip,
+            ...triggerProps,
+            children: triggerLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: "es:p-0! es:any-focus:outline-hidden",
+            "aria-label": ariaLabel,
+            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto"),
+            ...popoverProps,
+            children: /* @__PURE__ */ jsx(
+              $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
+              {
+                className: "es:outline-hidden",
+                ...props,
+                ...additionalProps,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+/**
+ * A wrapper for `MenuItem` components that visually groups them and ensures proper keyboard navigation.
+ *
+ * **Important**: <MenuSection> cannot be mixed with other <MenuItem> in the top-level of the same menu.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - The label of the section.
+ *
+ * @returns {JSX.Element} The MenuSection component.
+ *
+ * @see {@link Menu} for usage example.
+ *
+ * @preserve
+ */
+const MenuSection = (props) => {
+  const { children, label } = props;
+  return /* @__PURE__ */ jsxs(
+    $3674c52c6b3c5bce$export$4b1545b4f2016d26,
+    {
+      className: clsx(
+        "es:space-y-1 es:border-b es:border-b-secondary-200 es:last:border-b-0",
+        label && "es:pt-2 es:first:pt-1.5 es:last:pb-0",
+        !label && "es:has-[>_:only-child]:pb-0"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-1.5 es:text-xs es:font-medium es:text-secondary-400", children: label }),
+        children
+      ]
+    }
+  );
+};
+/**
+ * A menu separator.
+ *
+ * @returns {JSX.Element} The MenuSeparator component.
+ *
+ * @see {@link Menu} for usage example.
+ *
+ * @preserve
+ */
+const MenuSeparator = () => {
+  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200/50" });
+};
+/**
+ * A menu item.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} [props.icon] - The icon of the item.
+ * @param {string} [props.shortcut] - A slot for text like the keyboard shortcut, displayed on the right side of the item.
+ * @param {boolean} [props.checked] - If `true`, the item is marked as checked. This is visually represented by a checkmark icon.
+ * @param {boolean} [props.selected] - If `true`, the item is marked as selected. This is visually represented by a circle.
+ * @param {boolean} [props.disabled] - If `true`, the item will be disabled.
+ * @param {JSX.Element} [props.endIcon] - The icon at the right side of the item.
+ * @param {Function} [props.onClick] - Function to run when the item is clicked.
+ * @param {string} [props.className] - Classes to pass to the menu item.
+ *
+ * @returns {JSX.Element} The MenuItem component.
+ *
+ * @see {@link Menu} for usage example.
+ *
+ * @preserve
+ */
+const MenuItem = (props) => {
+  const {
+    icon,
+    children,
+    checked,
+    selected,
+    disabled,
+    endIcon,
+    onClick,
+    shortcut,
+    className,
+    "aria-label": ariaLabel = typeof children === "string" ? children : __("Menu item", "eightshift-ui-components")
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    $3674c52c6b3c5bce$export$2ce376c2cc3355c8,
+    {
+      ...props,
+      "aria-label": ariaLabel,
+      isDisabled: disabled,
+      className: clsx(
+        "es:mx-1 es:mb-1 es:flex es:min-w-44 es:min-h-8 es:items-center es:gap-1.5",
+        "es:first:mt-1 es:icon:size-5 es:icon:text-secondary-500",
+        "es:select-none es:rounded-md es:p-1.5 es:text-sm es:transition",
+        "es:any-focus:outline-hidden",
+        !disabled && "es:hover:bg-secondary-100 es:focus-visible:inset-ring es:focus-visible:inset-ring-secondary-100/30 es:focus-visible:bg-secondary-100 es:contrast-more:focus-visible:bg-accent-500/15",
+        disabled ? "es:text-secondary-400" : "es:text-secondary-800",
+        className
+      ),
+      onAction: onClick,
+      children: [
+        checked === true && icons.menuItemCheck,
+        selected === true && icons.menuItemCircle,
+        (selected === false || checked === false) && icons.dummySpacer,
+        icon,
+        children,
+        shortcut && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:pl-2 es:text-[0.6875rem] es:tracking-tight es:text-secondary-400", children: shortcut }),
+        endIcon && /* @__PURE__ */ jsx("div", { className: clsx(!shortcut && "es:ml-auto es:pl-2"), children: endIcon })
+      ]
+    }
+  );
+};
+/**
+ * A supplementary menu item that triggers a submenu.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {JSX.Element} props.trigger - The trigger button for the submenu. **This should be a `MenuItem`.**
+ * @param {Object} [props.popoverProps] - Props to pass to the popover.
+ *
+ * @returns {JSX.Element} The SubMenuItem component.
+ *
+ * @see {@link Menu} for usage example.
+ *
+ * @preserve
+ */
+const SubMenuItem = (props) => {
+  const { children, trigger, popoverProps } = props;
+  return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
+    cloneElement(trigger, {
+      endIcon: /* @__PURE__ */ jsx("span", { className: "es:text-secondary-400", children: icons.caretRightFill })
+    }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
+        className: "es:p-0! es:any-focus:outline-hidden",
+        offset: -1,
+        ...popoverProps,
+        children: /* @__PURE__ */ jsx(
+          $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
+          {
+            "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
+            className: "es:any-focus:outline-hidden",
+            children
+          }
+        )
+      }
+    )
+  ] });
+};
+SubMenuItem.displayName = "SubMenuItem";
+export {
+  Menu,
+  MenuItem,
+  MenuSection,
+  MenuSeparator,
+  SubMenuItem
+};

package/dist/components/modal/modal.js

@@ -0,0 +1,305 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { h as $a11501f3d1d39e6c$export$ea8f71083e90600f, i as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, j as $337b884510726a0d$export$14c98a7594375490, k as $5e3802645cc19319$export$1c3ebcada18427bf, l as $de32f1b87079253c$export$d2f961adcb0afbe, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, n as $337b884510726a0d$export$c6fdb837b070b4ff, g as $de32f1b87079253c$export$2e1e1122cf0cba88, f as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-D190gMbE.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-D-Pboe4p.js";
+import { n as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-B94NDG0v.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import React__default, { useState, useEffect, forwardRef, useContext, createContext, useRef, useMemo } from "react";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-BpB9uB_I.js";
+import { Button } from "../button/button.js";
+import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-DZCiis5V.js";
+import { HStack } from "../layout/hstack.js";
+let $5df64b3807dc15ee$var$visualViewport = typeof document !== "undefined" && window.visualViewport;
+function $5df64b3807dc15ee$export$d699905dd57c73ca() {
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  let [size, setSize] = useState(() => isSSR ? {
+    width: 0,
+    height: 0
+  } : $5df64b3807dc15ee$var$getViewportSize());
+  useEffect(() => {
+    let onResize = () => {
+      setSize((size2) => {
+        let newSize = $5df64b3807dc15ee$var$getViewportSize();
+        if (newSize.width === size2.width && newSize.height === size2.height) return size2;
+        return newSize;
+      });
+    };
+    if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener("resize", onResize);
+    else $5df64b3807dc15ee$var$visualViewport.addEventListener("resize", onResize);
+    return () => {
+      if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener("resize", onResize);
+      else $5df64b3807dc15ee$var$visualViewport.removeEventListener("resize", onResize);
+    };
+  }, []);
+  return size;
+}
+function $5df64b3807dc15ee$var$getViewportSize() {
+  return {
+    width: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.width) || window.innerWidth,
+    height: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.height) || window.innerHeight
+  };
+}
+function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
+  let { overlayProps, underlayProps } = $a11501f3d1d39e6c$export$ea8f71083e90600f({
+    ...props,
+    isOpen: state.isOpen,
+    onClose: state.close
+  }, ref);
+  $49c51c25361d4cd2$export$ee0f7cc6afcd1c18({
+    isDisabled: !state.isOpen
+  });
+  $337b884510726a0d$export$14c98a7594375490();
+  useEffect(() => {
+    if (state.isOpen && ref.current) return $5e3802645cc19319$export$1c3ebcada18427bf([
+      ref.current
+    ]);
+  }, [
+    state.isOpen,
+    ref
+  ]);
+  return {
+    modalProps: $3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps),
+    underlayProps
+  };
+}
+const $f3f84453ead64de5$export$ab57792b9b6974a6 = /* @__PURE__ */ createContext(null);
+const $f3f84453ead64de5$var$InternalModalContext = /* @__PURE__ */ createContext(null);
+const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef(function Modal(props, ref) {
+  let ctx = useContext($f3f84453ead64de5$var$InternalModalContext);
+  if (ctx) return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
+    ...props,
+    modalRef: ref
+  }, props.children);
+  let { isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, onOpenChange, children, isEntering, isExiting, UNSTABLE_portalContainer, shouldCloseOnInteractOutside, ...otherProps } = props;
+  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$export$8948f78d83984c69, {
+    isDismissable,
+    isKeyboardDismissDisabled,
+    isOpen,
+    defaultOpen,
+    onOpenChange,
+    isEntering,
+    isExiting,
+    UNSTABLE_portalContainer,
+    shouldCloseOnInteractOutside
+  }, /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalContent, {
+    ...otherProps,
+    modalRef: ref
+  }, children));
+});
+function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
+  [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
+  let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+  let localState = $fc909762b330b746$export$61c6a8c84e605fb6(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
+  let modalRef = useRef(null);
+  let isOverlayExiting = $d3f049242431219c$export$45fda7c47f93fd48(objectRef, state.isOpen);
+  let isModalExiting = $d3f049242431219c$export$45fda7c47f93fd48(modalRef, state.isOpen);
+  let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
+  let isSSR = $b5e257d569688ac6$export$535bd6ca7f90a273();
+  if (!state.isOpen && !isExiting || isSSR) return null;
+  return /* @__PURE__ */ React__default.createElement($f3f84453ead64de5$var$ModalOverlayInner, {
+    ...props,
+    state,
+    isExiting,
+    overlayRef: objectRef,
+    modalRef
+  });
+}
+const $f3f84453ead64de5$export$8948f78d83984c69 = /* @__PURE__ */ forwardRef($f3f84453ead64de5$var$ModalOverlayWithForwardRef);
+function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...props }) {
+  let modalRef = props.modalRef;
+  let { state } = props;
+  let { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, modalRef);
+  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-ModalOverlay",
+    values: {
+      isEntering: entering,
+      isExiting: props.isExiting,
+      state
+    }
+  });
+  let viewport = $5df64b3807dc15ee$export$d699905dd57c73ca();
+  let style = {
+    ...renderProps.style,
+    "--visual-viewport-height": viewport.height + "px"
+  };
+  return /* @__PURE__ */ React__default.createElement($337b884510726a0d$export$c6fdb837b070b4ff, {
+    isExiting: props.isExiting,
+    portalContainer: UNSTABLE_portalContainer
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), underlayProps),
+    ...renderProps,
+    style,
+    ref: props.overlayRef,
+    "data-entering": entering || void 0,
+    "data-exiting": props.isExiting || void 0
+  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+    values: [
+      [
+        $f3f84453ead64de5$var$InternalModalContext,
+        {
+          modalProps,
+          modalRef,
+          isExiting: props.isExiting,
+          isDismissable: props.isDismissable
+        }
+      ],
+      [
+        $de32f1b87079253c$export$d2f961adcb0afbe,
+        state
+      ]
+    ]
+  }, renderProps.children)));
+}
+function $f3f84453ead64de5$var$ModalContent(props) {
+  let { modalProps, modalRef, isExiting, isDismissable } = useContext($f3f84453ead64de5$var$InternalModalContext);
+  let state = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
+  let mergedRefs = useMemo(() => $5dc95899b306f630$export$c9058316764c140e(props.modalRef, modalRef), [
+    props.modalRef,
+    modalRef
+  ]);
+  let ref = $df56164dff5785e2$export$4338b53315abf666(mergedRefs);
+  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(ref);
+  let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
+    ...props,
+    defaultClassName: "react-aria-Modal",
+    values: {
+      isEntering: entering,
+      isExiting,
+      state
+    }
+  });
+  return /* @__PURE__ */ React__default.createElement("div", {
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928($65484d02dcb7eb3e$export$457c3d6518dd4c6f(props), modalProps),
+    ...renderProps,
+    ref,
+    "data-entering": entering || void 0,
+    "data-exiting": isExiting || void 0
+  }, isDismissable && /* @__PURE__ */ React__default.createElement($86ea4cb521eb2e37$export$2317d149ed6f78c4, {
+    onDismiss: state.close
+  }), renderProps.children);
+}
+/**
+ * Modal dialog.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {boolean} [props.open] - **Controlled mode ** - whether the modal is open.
+ * @param {boolean} [props.defaultOpen] - **Uncontrolled mode ** - whether the modal is initially open.
+ * @param {string|JSX.Element} [props.triggerLabel] - Label for the trigger button.
+ * @param {JSX.Element} [props.triggerIcon] - Trigger button icon.
+ * @param {Object} [props.triggerProps] - Props to pass to the trigger button.
+ * @param {ReactNode} [props.customTrigger] - If provided, replaces the default trigger button. The passed component should be something button-related that can open the modal.
+ * @param {string|JSX.Element} [props.title] - Title of the modal.
+ * @param {boolean} [props.noCloseButton] - If `true`, the close button will not be displayed.
+ * @param {boolean} [props.noClickToDismiss] - If `true`, the modal will not close when clicking outside of it.
+ * @param {boolean} [props.noKeyboardDismiss] - If `true`, the modal will not close when pressing the `Esc` key.
+ * @param {string} [props.className] - Classes to pass to the modal container.
+ * @param {string} [props.overlayClassName] - Classes to pass to the modal backdrop.
+ * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
+ *
+ * @returns {JSX.Element} The Modal component.
+ *
+ * @example
+ * <Modal>
+ *  <p>Modal content</p>
+ * </Modal>
+ *
+ * @preserve
+ */
+const Modal2 = (props) => {
+  const {
+    children,
+    shouldCloseOnInteractOutside,
+    open,
+    defaultOpen,
+    triggerLabel,
+    triggerIcon,
+    triggerProps,
+    customTrigger,
+    title,
+    noCloseButton,
+    noClickToDismiss,
+    noKeyboardDismiss,
+    "aria-label": ariaLabel,
+    className,
+    overlayClassName
+  } = props;
+  return /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
+    !customTrigger && /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: triggerIcon,
+        ...triggerProps,
+        children: triggerLabel ?? (!triggerIcon && __("Open", "eightshift-frontend-libs"))
+      }
+    ),
+    customTrigger,
+    /* @__PURE__ */ jsx(
+      $f3f84453ead64de5$export$8948f78d83984c69,
+      {
+        isDismissable: !noClickToDismiss,
+        defaultOpen,
+        isOpen: open,
+        shouldCloseOnInteractOutside,
+        isKeyboardDismissDisabled: noKeyboardDismiss,
+        className: ({ isEntering, isExiting }) => clsx(
+          "es:fixed es:inset-0 es:z-9999 es:flex es:min-h-full es:items-center es:justify-center es:overflow-y-auto es:bg-black/25 es:p-4 es:text-center es:backdrop-blur-xs",
+          isEntering && "es:motion-opacity-in es:motion-duration-150",
+          isExiting && "es:motion-opacity-out es:motion-duration-150",
+          overlayClassName
+        ),
+        children: /* @__PURE__ */ jsx(
+          $f3f84453ead64de5$export$2b77a92f1a5ad772,
+          {
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:w-full es:max-w-lg es:overflow-hidden es:rounded-xl es:border es:border-secondary-100 es:bg-white es:p-5 es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
+              isEntering && "es:motion-safe:motion-scale-in-95 es:motion-fade-in es:motion-duration-300 es:motion-ease-spring-smooth/scale",
+              isExiting && "es:motion-safe:motion-scale-out-95 es:motion-fade-out es:motion-duration-250 es:motion-ease-spring-smooth/scale",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(
+              $de32f1b87079253c$export$3ddf2d174ce01153,
+              {
+                className: "es:relative es:text-sm es:outline-hidden",
+                "aria-label": ariaLabel,
+                children: ({ close }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs(HStack, { children: [
+                    title && /* @__PURE__ */ jsx(
+                      $5cb03073d3f54797$export$a8a3e93435678ff9,
+                      {
+                        className: "es:text-balance es:text-base",
+                        slot: "title",
+                        children: title
+                      }
+                    ),
+                    !noCloseButton && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        className: "es:ml-auto",
+                        onPress: close,
+                        type: "ghost",
+                        size: "small",
+                        icon: icons.clear,
+                        "aria-label": __("Close modal", "eightshift-frontend-libs")
+                      }
+                    )
+                  ] }),
+                  children
+                ] })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+export {
+  Modal2 as Modal
+};