@eightshift/ui-components 1.9.0 → 2.0.0

package/dist/components/link-input/link-input.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BMFbEXg1.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-VR9-vNZv.js";
-import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-D96edUPC.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BXSxJ_44.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BtoiUpt8.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-BMpo-Cem.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BlYTPzgB.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-OQ5EIPvt.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-BnlZjJ3T.js";
+import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-D6tr3U_n.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Se0m3ubj.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-D9dFEh5A.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-CIh-hX93.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -83,6 +83,7 @@ const LinkInput = (props) => {
     }
   });
   const [shouldShowSuggestions, setShouldShowSuggestions] = useState(false);
+  useState(false);
   useEffect(() => {
     suggestionList.setFilterText(url);
     if (!canShowSuggestions) {
@@ -126,17 +127,23 @@ const LinkInput = (props) => {
             children: /* @__PURE__ */ jsxs(
               $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
               {
-                className: "es-uic-relative",
+                className: "es:relative",
                 ref: triggerRef,
                 children: [
                   /* @__PURE__ */ jsx(
                     $3985021b0ad6602f$export$f5b8910cec6cf069,
                     {
-                      placeholder,
+                      placeholder: !disabled && placeholder,
                       className: clsx(
-                        "es-uic-min-h-10 es-uic-w-full es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-py-2 es-uic-pl-2 es-uic-pr-1 es-uic-text-sm es-uic-shadow-sm es-uic-transition selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
-                        "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-                        (url == null ? void 0 : url.length) > 0 && "es-uic-pr-10",
+                        "es:min-h-10 es:w-full es:rounded-t-lg es:border es:border-secondary-300 es:py-2 es:pl-2 es:pr-1 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                        "es:any-focus:outline-hidden",
+                        "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                        "es:focus-visible:border-accent-500",
+                        "es:inset-ring es:inset-ring-secondary-100",
+                        "es:disabled:shadow-none! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
+                        !suggestionList.isLoading && "es:aria-[expanded=false]:rounded-b-lg",
+                        suggestionList.isLoading && "es:rounded-b-lg",
+                        (url == null ? void 0 : url.length) > 0 && "es:pr-10",
                         className
                       )
                     }
@@ -144,10 +151,10 @@ const LinkInput = (props) => {
                   /* @__PURE__ */ jsx(
                     AnimatedVisibility,
                     {
-                      visible: (url == null ? void 0 : url.length) > 0,
-                      className: "es-uic-absolute es-uic-inset-y-1 es-uic-right-1",
+                      visible: !disabled && (url == null ? void 0 : url.length) > 0,
+                      className: "es:absolute es:inset-y-1 es:right-1",
                       transition: "fade",
-                      children: /* @__PURE__ */ jsx(
+                      children: /* @__PURE__ */ jsxs(
                         $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                         {
                           slot: null,
@@ -155,18 +162,21 @@ const LinkInput = (props) => {
                             suggestionList.setFilterText("");
                             onChange({ url: void 0, isAnchor: false });
                           },
-                          className: "focus:es-uic-outline-none",
-                          children: /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              className: clsx(
-                                "es-uic-flex es-uic-size-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-bg-white/85 es-uic-text-gray-600 es-uic-backdrop-blur es-uic-transition",
-                                "hover:es-uic-bg-red-50 hover:es-uic-text-red-500",
-                                "[&>svg]:es-uic-size-6"
-                              ),
-                              children: removeIcon
-                            }
-                          ) })
+                          className: "es:focus:outline-hidden",
+                          children: [
+                            !(shouldShowSuggestions && suggestionList.isLoading) && /* @__PURE__ */ jsx(Tooltip, { text: __("Clear", "eightshift-ui-components"), children: /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: clsx(
+                                  "es:flex es:size-8 es:items-center es:justify-center es:rounded es:bg-white/85 es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
+                                  "es:hover:bg-red-600/5 es:hover:text-red-600",
+                                  "es:icon:size-6"
+                                ),
+                                children: removeIcon
+                              }
+                            ) }),
+                            shouldShowSuggestions && suggestionList.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-1.5", children: cloneElement(icons.loader, { className: "es:text-accent-600! es:stroke-2 es:motion-preset-spin es:motion-duration-1500" }) })
+                          ]
                         }
                       )
                     }
@@ -176,39 +186,32 @@ const LinkInput = (props) => {
             )
           }
         ),
-        canShowSuggestions && shouldShowSuggestions && /* @__PURE__ */ jsxs(
+        canShowSuggestions && shouldShowSuggestions && !suggestionList.isLoading && /* @__PURE__ */ jsxs(
           $07b14b47974efb58$export$5b6b19405a83ff9d,
           {
             "aria-label": __("URL suggestions", "eightshift-ui-components"),
             className: ({ isEntering, isExiting }) => clsx(
-              "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-outline-none",
-              isEntering && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
-              isExiting && "es-uic-animate-out es-uic-fade-out-0 es-uic-slide-out-to-top-2 es-uic-fill-mode-forwards",
-              !shouldShowSuggestions && suggestionList.items.length < 1 && "es-uic-invisible"
+              "es:rounded-b-lg es:border es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden",
+              isEntering && "es:not-motion-reduce:motion-preset-slide-down-sm es:motion-reduce:motion-preset-fade es:motion-duration-300",
+              isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200",
+              !shouldShowSuggestions && suggestionList.items.length < 1 && "es:invisible"
             ),
+            offset: -2,
             style: {
               width: `${(_a = triggerRef.current) == null ? void 0 : _a.offsetWidth}px`
             },
             children: [
-              shouldShowSuggestions && suggestionList.isLoading && /* @__PURE__ */ jsx(
-                RichLabel,
-                {
-                  icon: cloneElement(icons.emptyCircle, { className: "es-uic-animate-spin" }),
-                  label: __("Loading suggestions", "eightshift-ui-components"),
-                  className: "es-uic-min-h-12 es-uic-p-2"
-                }
-              ),
               shouldShowSuggestions && !suggestionList.isLoading && suggestionList.items.length === 0 && /* @__PURE__ */ jsx(
                 RichLabel,
                 {
                   icon: icons.searchEmpty,
                   label: __("No results", "eightshift-ui-components"),
                   subtitle: __("Try a different search term.", "eightshift-ui-components"),
-                  className: "es-uic-min-h-12 es-uic-p-2"
+                  className: "es:min-h-12 es:p-2"
                 }
               ),
               !suggestionList.isLoading && suggestionList.items.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es-uic-space-y-1 es-uic-p-1", children: (item) => {
+                /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-1 es:p-1", children: (item) => {
                   const {
                     label: title,
                     value: url2,
@@ -238,10 +241,10 @@ const LinkInput = (props) => {
                     {
                       id: item.value,
                       className: clsx(
-                        "es-uic-rounded es-uic-p-1 es-uic-text-sm es-uic-transition",
-                        "hover:es-uic-border-gray-300 hover:es-uic-bg-gray-100",
-                        "focus-visible:es-uic-border-gray-300 focus-visible:es-uic-bg-gray-100",
-                        "selected:es-uic-bg-teal-600/10 selected:es-uic-text-teal-900 selected:focus-visible:es-uic-bg-teal-600/15"
+                        "es:rounded es:p-1 es:text-sm es:transition",
+                        "es:hover:border-secondary-300 es:hover:bg-secondary-100",
+                        "es:focus-visible:border-secondary-300 es:focus-visible:bg-secondary-100",
+                        "selected:es:bg-accent-600/10 selected:es:text-accent-900 selected:focus-visible:es:bg-accent-600/15"
                       ),
                       textValue: url2,
                       children: /* @__PURE__ */ jsx(
@@ -256,18 +259,27 @@ const LinkInput = (props) => {
                     }
                   );
                 } }),
-                /* @__PURE__ */ jsx(Spacer, { border: true }),
-                /* @__PURE__ */ jsxs("div", { className: "es-uic-grid es-uic-select-none es-uic-grid-cols-[auto,_1fr] es-uic-items-center es-uic-gap-x-1.5 es-uic-gap-y-1 es-uic-p-2 es-uic-text-sm es-uic-text-gray-500", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-justify-self-center", children: [
-                    /* @__PURE__ */ jsx("kbd", { className: "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-font-sans es-uic-text-xs es-uic-text-gray-400", children: "↓" }),
-                    /* @__PURE__ */ jsx("kbd", { className: "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-font-sans es-uic-text-xs es-uic-text-gray-400", children: "↑" })
+                /* @__PURE__ */ jsx(
+                  Spacer,
+                  {
+                    border: true,
+                    className: "es:opacity-40"
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-wrap es:items-center es:justify-end es:gap-x-3 es:gap-y-1.5 es:p-2 es:text-sm es:text-secondary-500", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↓" }),
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↑" }),
+                    __("Navigate", "eightshift-ui-components")
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:size-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:text-secondary-600", children: "↵" }),
+                    __("Select", "eightshift-ui-components")
                   ] }),
-                  __("Navigate", "eightshift-ui-components"),
-                  /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-gap-0.5 es-uic-justify-self-center", children: /* @__PURE__ */ jsx("kbd", { className: "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-justify-self-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-font-sans es-uic-text-xs es-uic-text-gray-400", children: "↵" }) }),
-                  __("Select", "eightshift-ui-components"),
-                  /* @__PURE__ */ jsx("kbd", { className: "es-uic-flex es-uic-h-5 es-uic-min-w-5 es-uic-items-center es-uic-justify-center es-uic-justify-self-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-font-sans es-uic-text-xs es-uic-text-gray-400", children: "Esc" }),
-                  " ",
-                  __("Hide suggestions", "eightshift-ui-components")
+                  /* @__PURE__ */ jsxs("div", { className: "es:flex es:gap-1", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: "es:flex es:h-4 es:items-center es:justify-center es:rounded es:bg-radial es:from-secondary-100 es:to-secondary-200 es:font-mono es:text-xs es:tracking-tighter es:px-0.5 es:text-secondary-600", children: "Esc" }),
+                    __("Hide", "eightshift-ui-components")
+                  ] })
                 ] })
               ] })
             ]

package/dist/components/matrix-align/matrix-align.js

@@ -1,12 +1,8 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
-import { Popover } from "../popover/popover.js";
-import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
-import { upperFirst, camelCase } from "../../utilities/es-dash.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { Tooltip } from "../tooltip/tooltip.js";
+import { upperFirst, camelCase, pascalCase } from "../../utilities/es-dash.js";
+import { Menu, MenuItem } from "../menu/menu.js";
 import { BaseControl } from "../base-control/base-control.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
@@ -48,14 +44,8 @@ const MatrixAlign = (props) => {
     icon,
     subtitle,
     "aria-label": ariaLabel,
-    popoverPosition,
     hidden
   } = props;
-  const [currentValue, setCurrentValue] = useState(value);
-  const [tooltipText, setTooltipText] = useState(null);
-  const [popoverOpen, setPopoverOpen] = useState(false);
-  const ref = useRef(null);
-  const innerRef = useRef(null);
   if (hidden) {
     return null;
   }
@@ -106,80 +96,38 @@ const MatrixAlign = (props) => {
       availableOn: ["3x3", "2x2"]
     }
   ];
-  const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size)).map((item) => ({
-    ...item,
-    icon: item.value === currentValue ? icons.matrixAlignControlDotActive : icons.matrixAlignControlDotInactive
-  }));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      BaseControl,
-      {
-        icon,
-        label,
-        subtitle,
-        inline: true,
-        children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: icons[`position${size}${upperFirst(camelCase(currentValue))}`],
-            onPress: () => {
-              setPopoverOpen(true);
-            },
-            forwardedRef: ref,
-            tooltip,
-            children: !(icon || subtitle) && label
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        "aria-label": ariaLabel ?? __("Select position", "eightshift-ui-components"),
-        position: popoverPosition,
-        triggerRef: ref,
-        onOpenChange: setPopoverOpen,
-        isOpen: popoverOpen,
-        ariaLabel: label ?? tooltip,
-        children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            text: tooltipText,
-            placement: "bottom",
-            delayDuration: 200,
-            open: popoverOpen && tooltipText !== null,
-            offset: 10,
-            triggerRef: innerRef,
-            className: tooltipText === null ? "es-uic-opacity-0" : "",
-            children: /* @__PURE__ */ jsx(
-              "div",
+  const sizeOptions = allSizeOptions.filter(({ availableOn }) => availableOn.includes(size));
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      icon,
+      label,
+      subtitle,
+      inline: true,
+      children: /* @__PURE__ */ jsx(
+        Menu,
+        {
+          triggerIcon: icons[`position${size}${upperFirst(camelCase(value))}`],
+          triggerProps: { "aria-label": ariaLabel },
+          tooltip,
+          keepOpen: true,
+          children: sizeOptions.map(({ value: itemValue, label: label2 }) => {
+            var _a;
+            return /* @__PURE__ */ jsx(
+              MenuItem,
               {
-                ref: innerRef,
-                className: clsx("es-uic-grid", size === "3x3" && "es-uic-grid-cols-3 es-uic-grid-rows-3", size === "2x2" && "es-uic-grid-cols-2 es-uic-grid-rows-2"),
-                children: sizeOptions.map(({ value: value2, label: label2, icon: icon2 }) => /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    icon: icon2,
-                    type: "ghost",
-                    onHoverStart: () => setTooltipText(label2),
-                    onHoverEnd: () => setTooltipText(null),
-                    onFocus: () => setTooltipText(label2),
-                    onPress: () => {
-                      setCurrentValue(value2);
-                      setTooltipText(null);
-                      setPopoverOpen(false);
-                      onChange(value2);
-                    }
-                  },
-                  value2
-                ))
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
+                endIcon: (_a = icons) == null ? void 0 : _a[`position${size}${pascalCase(itemValue)}`],
+                selected: value === itemValue,
+                onClick: () => onChange(itemValue),
+                children: label2
+              },
+              itemValue
+            );
+          })
+        }
+      )
+    }
+  );
 };
 export {
   MatrixAlign

package/dist/components/menu/menu.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-DUhFmbD-.js";
-import { $ as $7135fc7d473fd974$export$6e2c8f0811a474ce } from "../../SelectionManager-D-89MUJW.js";
-import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, d as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-BlYTPzgB.js";
+import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BhZycTUp.js";
+import { a as $3674c52c6b3c5bce$export$27d2ad3c5815583e, b as $3674c52c6b3c5bce$export$d9b273488cd8ce6f, c as $3674c52c6b3c5bce$export$4b1545b4f2016d26, d as $3674c52c6b3c5bce$export$2ce376c2cc3355c8, e as $3674c52c6b3c5bce$export$ecabc99eeffab7ca } from "../../Dialog-CIh-hX93.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";
@@ -113,14 +112,14 @@ const Menu = (props) => {
         /* @__PURE__ */ jsx(
           Popover,
           {
-            className: "!es-uic-p-0 focus:es-uic-outline-none",
+            className: "es:p-0! es:focus:outline-hidden",
             "aria-label": ariaLabel,
-            wrapperClassName: clsx(!hasSubmenuItems && "es-uic-overflow-y-auto"),
+            wrapperClassName: clsx(!hasSubmenuItems && "es:overflow-y-auto"),
             ...popoverProps,
             children: /* @__PURE__ */ jsx(
               $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
               {
-                className: "es-uic-outline-none",
+                className: "es:outline-hidden",
                 ...props,
                 ...additionalProps,
                 children
@@ -150,15 +149,15 @@ const Menu = (props) => {
 const MenuSection = (props) => {
   const { children, label } = props;
   return /* @__PURE__ */ jsxs(
-    $7135fc7d473fd974$export$6e2c8f0811a474ce,
+    $3674c52c6b3c5bce$export$4b1545b4f2016d26,
     {
       className: clsx(
-        "es-uic-space-y-1 es-uic-border-b es-uic-border-b-gray-200 es-uic-pb-1 last:es-uic-border-b-0",
-        label && "es-uic-pt-2 first:es-uic-pt-1.5",
-        !label && "last:es-uic-pb-1 has-[>_:only-child]:es-uic-pb-0"
+        "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-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400", children: label }),
+        label && /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:ml-1.5 es:text-xs es:font-medium es:text-secondary-400", children: label }),
         children
       ]
     }
@@ -174,7 +173,7 @@ const MenuSection = (props) => {
  * @preserve
  */
 const MenuSeparator = () => {
-  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es-uic-mb-1 es-uic-border-b es-uic-border-gray-300" });
+  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200/50" });
 };
 /**
  * A menu item.
@@ -216,12 +215,12 @@ const MenuItem = (props) => {
       "aria-label": ariaLabel,
       isDisabled: disabled,
       className: clsx(
-        "es-uic-mx-1 es-uic-mb-1 es-uic-flex es-uic-min-w-40 es-uic-items-center es-uic-gap-1.5",
-        "first:es-uic-mt-1 [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500",
-        "es-uic-select-none es-uic-rounded es-uic-border es-uic-border-transparent es-uic-px-1 es-uic-py-1.5 es-uic-text-sm es-uic-transition",
-        "hover:es-uic-bg-gray-100",
-        "focus:es-uic-outline-none focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-        disabled ? "es-uic-text-gray-400" : "es-uic-text-gray-800",
+        "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,
@@ -231,8 +230,8 @@ const MenuItem = (props) => {
         (selected === false || checked === false) && icons.dummySpacer,
         icon,
         children,
-        shortcut && /* @__PURE__ */ jsx("div", { className: "es-uic-ml-auto es-uic-pl-2 es-uic-text-[0.6875rem] es-uic-tracking-tight es-uic-text-gray-400", children: shortcut }),
-        endIcon && /* @__PURE__ */ jsx("div", { className: clsx(!shortcut && "es-uic-ml-auto es-uic-pl-2"), children: endIcon })
+        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 })
       ]
     }
   );
@@ -255,20 +254,20 @@ const SubMenuItem = (props) => {
   const { children, trigger, popoverProps } = props;
   return /* @__PURE__ */ jsxs($3674c52c6b3c5bce$export$ecabc99eeffab7ca, { children: [
     cloneElement(trigger, {
-      endIcon: /* @__PURE__ */ jsx("span", { className: "es-uic-text-gray-400", children: icons.caretRightFill })
+      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-uic-p-0 focus:es-uic-outline-none",
+        className: "es:p-0! es:focus:outline-hidden",
         offset: -1,
         ...popoverProps,
         children: /* @__PURE__ */ jsx(
           $3674c52c6b3c5bce$export$d9b273488cd8ce6f,
           {
             "aria-label": props["aria-label"] ?? __("Submenu", "eightshift-ui-components"),
-            className: "focus:es-uic-outline-none",
+            className: "es:focus:outline-hidden",
             children
           }
         )

package/dist/components/modal/modal.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { g as $a11501f3d1d39e6c$export$ea8f71083e90600f, h as $49c51c25361d4cd2$export$ee0f7cc6afcd1c18, i as $337b884510726a0d$export$14c98a7594375490, j as $5e3802645cc19319$export$1c3ebcada18427bf, k as $de32f1b87079253c$export$d2f961adcb0afbe, l as $337b884510726a0d$export$c6fdb837b070b4ff, m as $86ea4cb521eb2e37$export$2317d149ed6f78c4, f as $de32f1b87079253c$export$2e1e1122cf0cba88, e as $de32f1b87079253c$export$3ddf2d174ce01153 } from "../../Dialog-BlYTPzgB.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-GytTjUsy.js";
-import { e as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, m as $df56164dff5785e2$export$4338b53315abf666, p as $64fa3d84918910a7$export$45fda7c47f93fd48, q as $64fa3d84918910a7$export$6d3443f2c48bfc20, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, n as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-BSLBwuuO.js";
+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-CIh-hX93.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-DiYTXoIW.js";
+import { e as $b5e257d569688ac6$export$535bd6ca7f90a273, d as $3ef42575df84b30b$export$9d1611c77c2fe928, n as $5dc95899b306f630$export$c9058316764c140e, m as $df56164dff5785e2$export$4338b53315abf666, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-39D0mStj.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import React__default, { useState, useEffect, forwardRef, useContext, useRef, useMemo, createContext } from "react";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6 } from "../../OverlayArrow-4epQ99-E.js";
+import React__default, { useState, useEffect, forwardRef, useContext, useMemo, createContext, useRef } from "react";
+import { $ as $d3f049242431219c$export$6d3443f2c48bfc20, a as $fc909762b330b746$export$61c6a8c84e605fb6, b as $d3f049242431219c$export$45fda7c47f93fd48 } from "../../OverlayArrow-1jx-ZyCR.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -66,7 +66,7 @@ function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
 }
 const $f3f84453ead64de5$export$ab57792b9b6974a6 = /* @__PURE__ */ createContext(null);
 const $f3f84453ead64de5$var$InternalModalContext = /* @__PURE__ */ createContext(null);
-function $f3f84453ead64de5$var$Modal(props, ref) {
+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,
@@ -87,8 +87,7 @@ function $f3f84453ead64de5$var$Modal(props, ref) {
     ...otherProps,
     modalRef: ref
   }, children));
-}
-const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /* @__PURE__ */ forwardRef($f3f84453ead64de5$var$Modal);
+});
 function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
   let contextState = useContext($de32f1b87079253c$export$d2f961adcb0afbe);
@@ -96,8 +95,8 @@ function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
   let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
   let objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
   let modalRef = useRef(null);
-  let isOverlayExiting = $64fa3d84918910a7$export$45fda7c47f93fd48(objectRef, state.isOpen);
-  let isModalExiting = $64fa3d84918910a7$export$45fda7c47f93fd48(modalRef, state.isOpen);
+  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;
@@ -114,7 +113,7 @@ function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer, ...
   let modalRef = props.modalRef;
   let { state } = props;
   let { modalProps, underlayProps } = $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, modalRef);
-  let entering = $64fa3d84918910a7$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
+  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(props.overlayRef) || props.isEntering || false;
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
     ...props,
     defaultClassName: "react-aria-ModalOverlay",
@@ -165,7 +164,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
     modalRef
   ]);
   let ref = $df56164dff5785e2$export$4338b53315abf666(mergedRefs);
-  let entering = $64fa3d84918910a7$export$6d3443f2c48bfc20(ref);
+  let entering = $d3f049242431219c$export$6d3443f2c48bfc20(ref);
   let renderProps = $64fa3d84918910a7$export$4d86445c2cf5e3({
     ...props,
     defaultClassName: "react-aria-Modal",
@@ -213,7 +212,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  *
  * @preserve
  */
-const Modal = (props) => {
+const Modal2 = (props) => {
   const {
     children,
     shouldCloseOnInteractOutside,
@@ -249,32 +248,32 @@ const Modal = (props) => {
         isOpen: open,
         shouldCloseOnInteractOutside,
         isKeyboardDismissDisabled: noKeyboardDismiss,
-        className: clsx(
-          "es-uic-fixed es-uic-inset-0 es-uic-z-10 es-uic-flex es-uic-min-h-full es-uic-items-center es-uic-justify-center es-uic-overflow-y-auto es-uic-bg-black/25 es-uic-p-4 es-uic-text-center es-uic-backdrop-blur",
-          "entering:es-uic-duration-300 entering:es-uic-ease-out entering:es-uic-animate-in entering:es-uic-fade-in",
-          "exiting:es-uic-duration-200 exiting:es-uic-ease-in exiting:es-uic-animate-out exiting:es-uic-fade-out",
+        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",
+          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: clsx(
-              "es-uic-w-full es-uic-max-w-lg es-uic-overflow-hidden es-uic-rounded-xl es-uic-border es-uic-border-gray-100 es-uic-bg-white es-uic-p-5 es-uic-text-left es-uic-align-middle es-uic-shadow-xl",
-              "entering:es-uic-duration-300 entering:es-uic-ease-out entering:es-uic-animate-in entering:es-uic-zoom-in-95",
-              "exiting:es-uic-duration-200 exiting:es-uic-ease-in exiting:es-uic-animate-out exiting:es-uic-zoom-out-95",
+            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-uic-relative es-uic-text-sm es-uic-outline-none",
+                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-uic-text-balance es-uic-text-base",
+                        className: "es:text-balance es:text-base",
                         slot: "title",
                         children: title
                       }
@@ -282,7 +281,7 @@ const Modal = (props) => {
                     !noCloseButton && /* @__PURE__ */ jsx(
                       Button,
                       {
-                        className: "es-uic-ml-auto",
+                        className: "es:ml-auto",
                         onPress: close,
                         type: "ghost",
                         size: "small",
@@ -302,5 +301,5 @@ const Modal = (props) => {
   ] });
 };
 export {
-  Modal
+  Modal2 as Modal
 };