@eightshift/ui-components 5.0.2 → 5.0.4

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-BpwTmkAe.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-BJpTEATT.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-DH22t_SM.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-D7KpCYaK.js";
 import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
 import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-BTxlCGcc.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-O9uw63D7.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-_nDFq8-H.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-CJVCRT8_.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -127,7 +127,7 @@ const LinkInput = (props) => {
                     {
                       placeholder: disabled ? null : placeholder,
                       className: clsx(
-                        "es:min-h-10 es:w-full es:rounded-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:bg-white",
+                        "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:py-2 es:pl-2 es:pr-1 es:text-sm es:shadow-sm es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950 es:bg-white",
                         "es:any-focus:outline-hidden",
                         "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                         "es:focus-visible:border-accent-500",
@@ -181,7 +181,7 @@ const LinkInput = (props) => {
           {
             "aria-label": __("URL suggestions", "eightshift-ui-components"),
             className: ({ isEntering, isExiting }) => clsx(
-              "es:border es:rounded-lg es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden es:min-w-72",
+              "es:border es:rounded-xl es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden es:min-w-72",
               isEntering || !(suggestionList.isLoading || !shouldShowSuggestions) && "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",
               (suggestionList.isLoading || !shouldShowSuggestions) && "es:invisible"
@@ -196,8 +196,10 @@ const LinkInput = (props) => {
                 {
                   icon: icons.searchEmpty,
                   label: __("No results", "eightshift-ui-components"),
-                  subtitle: __("Try a different search term.", "eightshift-ui-components"),
-                  className: "es:min-h-12 es:p-2"
+                  subtitle: __("Try a different search term", "eightshift-ui-components"),
+                  className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto",
+                  iconClassName: "es:text-accent-700 es:icon:size-7!",
+                  noColor: true
                 }
               ),
               suggestionList.items.length > 0 && !suggestionList.isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -231,7 +233,7 @@ const LinkInput = (props) => {
                     {
                       id: item.value,
                       className: clsx(
-                        "es:rounded es:p-1 es:text-sm es:transition",
+                        "es:rounded-10 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"

package/dist/components/menu/menu.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-CaTBkETC.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-O9uw63D7.js";
+import { $ as $72a5793c14baf454$export$8b251419efc915eb, a as $431f98aba6844401$export$1ff3c3f08ae963c0 } from "../../Separator-BN3mjL6q.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-CJVCRT8_.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";
@@ -173,7 +173,7 @@ const MenuSection = (props) => {
  * @preserve
  */
 const MenuSeparator = () => {
-  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200/50" });
+  return /* @__PURE__ */ jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: "es:mb-1 es:border-b es:border-secondary-200" });
 };
 /**
  * A menu item.
@@ -215,9 +215,9 @@ const MenuItem = (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:mx-1 es:mb-1 es:flex es:min-w-44 es:min-h-9 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:select-none es:rounded-xl es:py-1.5 es:px-2.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",

package/dist/components/modal/modal.js

@@ -1,10 +1,10 @@
-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-O9uw63D7.js";
+import { jsx, jsxs, 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-CJVCRT8_.js";
 import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-ba38ScjJ.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-CZt7LCbO.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-5aDgmImj.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-CjvnevpX.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -191,6 +191,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @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 {JSX.Element|JSX.Element[]} [props.actions] - Actions to display in the modal footer, typically buttons.
  * @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.
@@ -201,7 +202,11 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @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 {string} [props.actionsClassName] - Classes to pass to the modal footer (actions) container.
+ * @param {string} [props.headerClassName] - Classes to pass to the modal header container.
+ * @param {string} [props.contentContainerClassName] - Classes to pass to the modal content container.
  * @param {Function} [props.shouldCloseOnInteractOutside=() => true] - Allows ignoring close events for certain elements. `(element: HTMLElement) => boolean`.
+ * @param {Function} [props.onOpenChange] - Function called when the modal's open state changes. `(isOpen: boolean) => void`
  *
  * @returns {JSX.Element} The Modal component.
  *
@@ -213,92 +218,111 @@ function $f3f84453ead64de5$var$ModalContent(props) {
  * @preserve
  */
 const Modal2 = (props) => {
+  const { triggerLabel, triggerIcon, triggerProps, customTrigger, open } = props;
+  if (typeof open !== "undefined") {
+    return /* @__PURE__ */ jsx(ModalInternal, { ...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(ModalInternal, { ...props })
+  ] });
+};
+const ModalInternal = (props) => {
   const {
     children,
     shouldCloseOnInteractOutside,
     open,
     defaultOpen,
-    triggerLabel,
-    triggerIcon,
-    triggerProps,
-    customTrigger,
+    onOpenChange,
     title,
+    actions,
     noCloseButton,
     noClickToDismiss,
     noKeyboardDismiss,
     "aria-label": ariaLabel,
     className,
-    overlayClassName
+    headerClassName,
+    actionsClassName,
+    overlayClassName,
+    contentContainerClassName,
+    ...rest
   } = 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
-                ] })
-              }
-            )
-          }
-        )
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx(
+    $f3f84453ead64de5$export$8948f78d83984c69,
+    {
+      isDismissable: !noClickToDismiss,
+      defaultOpen,
+      isOpen: open,
+      shouldCloseOnInteractOutside,
+      onOpenChange,
+      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:p-4 es:text-center es:bg-black/30 es:backdrop-blur-sm",
+        isEntering && "es:motion-opacity-in es:motion-duration-150",
+        isExiting && "es:motion-opacity-out es:motion-duration-150",
+        overlayClassName
+      ),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        $f3f84453ead64de5$export$2b77a92f1a5ad772,
+        {
+          className: ({ isEntering, isExiting }) => clsx(
+            "es:w-full es:max-w-lg es:overflow-hidden es:rounded-3xl es:border es:border-secondary-100 es:bg-white es:text-left es:align-middle es:shadow-xl es:inset-ring es:inset-ring-secondary-50",
+            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,
+                  {
+                    className: clsx(!title && "es:relative", title && "es:px-5 es:py-3 es:justify-between es:bg-secondary-50 es:border-b es:border-secondary-200", headerClassName),
+                    children: [
+                      title && /* @__PURE__ */ jsx(
+                        $5cb03073d3f54797$export$a8a3e93435678ff9,
+                        {
+                          className: "es:text-balance es:text-base! es:my-0! es:font-medium!",
+                          slot: "title",
+                          children: title
+                        }
+                      ),
+                      !noCloseButton && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          className: !title && "es:absolute es:top-4 es:right-4 es:bg-white/60 es:backdrop-blur-lg",
+                          onPress: close,
+                          type: "ghost",
+                          size: "small",
+                          icon: icons.clear,
+                          "aria-label": __("Close", "eightshift-frontend-libs"),
+                          tooltip: true
+                        }
+                      )
+                    ]
+                  }
+                ),
+                children && /* @__PURE__ */ jsx("div", { className: clsx("es:p-5 es:space-y-2.5", contentContainerClassName), children }),
+                actions && /* @__PURE__ */ jsx(HStack, { className: clsx("es:justify-end es:px-5 es:py-3 es:border-t es:border-secondary-100", actionsClassName), children: actions })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
 };
 export {
   Modal2 as Modal

package/dist/components/notice/notice.js

@@ -31,30 +31,30 @@ const Notice = (props) => {
   const styles = {
     info: {
       icon: icons.infoCircle,
-      className: "es:border-blue-400 es:shadow-blue-500/15 es:bg-blue-100/5",
+      className: "es:border-blue-400/75 es:shadow-blue-500/15 es:bg-blue-200/5",
       iconColor: "es:text-blue-400",
-      textColor: "es:text-blue-900",
+      textColor: "es:text-blue-500 es:saturate-75",
       subtitleColor: "es:text-blue-950/60"
     },
     success: {
       icon: icons.checkSquare,
-      className: "es:border-green-500 es:shadow-green-500/15 es:bg-green-100/5",
-      iconColor: "es:text-green-500",
-      textColor: "es:text-green-900",
-      subtitleColor: "es:text-green-950/60"
+      className: "es:border-emerald-500/75 es:shadow-emerald-500/15 es:bg-emerald-200/5",
+      iconColor: "es:text-emerald-500",
+      textColor: "es:text-emerald-600",
+      subtitleColor: "es:text-emerald-950/60"
     },
     warning: {
       icon: icons.warning,
-      className: "es:border-amber-500 es:shadow-amber-500/15 es:bg-amber-100/5",
-      iconColor: "es:text-amber-500",
-      textColor: "es:text-amber-900",
-      subtitleColor: "es:text-amber-950/60"
+      className: "es:border-orange-500/75 es:shadow-orange-500/15 es:bg-orange-200/5",
+      iconColor: "es:text-orange-500",
+      textColor: "es:text-orange-700",
+      subtitleColor: "es:text-orange-950/60"
     },
     error: {
       icon: icons.errorCircle,
-      className: "es:border-red-400 es:shadow-red-500/15 es:bg-red-100/5",
-      iconColor: "es:text-red-400",
-      textColor: "es:text-red-900",
+      className: "es:border-red-300 es:shadow-red-500/15 es:bg-red-200/5",
+      iconColor: "es:text-red-500",
+      textColor: "es:text-red-700",
       subtitleColor: "es:text-red-950/60"
     },
     placeholder: {
@@ -75,9 +75,9 @@ const Notice = (props) => {
     "div",
     {
       className: clsx(
-        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-md es:border es:bg-linear-to-tr es:shadow-sm",
+        "es:grid es:grid-cols-[auto_1fr] es:grid-rows-[auto_auto] es:rounded-xl es:border es:bg-linear-to-tr es:shadow-sm",
         styles[type].className,
-        icon || styles[type].icon ? "es:gap-x-1.5 es:p-1.5" : "es:px-2 es:py-1.5",
+        icon || styles[type].icon ? "es:gap-x-1.5 es:p-2" : "es:px-2 es:py-2",
         className
       ),
       children: [
@@ -85,7 +85,7 @@ const Notice = (props) => {
           "span",
           {
             className: clsx(
-              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-7",
+              "es:col-span-1 es:col-start-1 es:row-span-2 es:row-start-1 es:shrink-0 es:icon:size-6",
               alignIconToTitle ? "es:self-baseline" : "es:self-center",
               styles[type].iconColor
             ),

package/dist/components/number-picker/number-picker.js

@@ -4,14 +4,14 @@ import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-DDPhPPTQ.js";
 import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BmDS8Juy.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-DH22t_SM.js";
 import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
 import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../Form-Cq3fu75_.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-CU1_u8ze.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D0u2bh8g.js";
 import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -218,7 +218,7 @@ const NumberPicker = ({
             $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
             {
               className: clsx(
-                "es:group es:flex es:w-fit es:items-center es:rounded-lg es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-xs es:transition",
+                "es:group es:flex es:w-fit es:items-center es:rounded-10 es:border es:border-secondary-300 es:pl-1 es:pr-0.5 es:shadow-sm es:focus-within:shadow-md es:transition",
                 "es:inset-ring es:inset-ring-secondary-100",
                 isInputFocused && "es:outline-hidden es:focus-visible:border-accent-500 es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                 !prefix && (((_a = sizes == null ? void 0 : sizes[size]) == null ? void 0 : _a.noPrefixPadding) ?? sizes.default.noPrefixPadding),

package/dist/components/placeholders/file-placeholder.js

@@ -27,13 +27,20 @@ const FilePlaceholder = (props) => {
   return /* @__PURE__ */ jsx(
     RichLabel,
     {
-      icon: icon ?? icons.file,
+      icon: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "es:w-fit es:rounded-xl es:border es:border-secondary-300 es:p-2",
+            fileName && "es:shadow-sm es:bg-gradient-to-br es:from-secondary-50 es:to-secondary-100 es:text-secondary-600",
+            !fileName && "es:border-dashed es:text-secondary-500"
+          ),
+          children: icon ?? icons.file
+        }
+      ),
       label: (fileName ? fileName : children) ?? __("No file selected", "eightshift-ui-components"),
-      className: clsx(
-        "es:w-fit es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:p-2 es:pr-3 es:text-xs es:text-secondary-300 es:shadow-xs",
-        fileName && "es:font-mono",
-        className
-      )
+      className: clsx(fileName && "es:font-mono", className),
+      noColor: true
     }
   );
 };

package/dist/components/placeholders/image-placeholder.js

@@ -32,8 +32,8 @@ const ImagePlaceholder = (props) => {
     return null;
   }
   const styleClassName = {
-    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-300 es:shadow-xs",
-    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-300"
+    default: "es:rounded-2xl es:border es:border-secondary-300 es:bg-gradient-to-br es:from-white es:to-secondary-50 es:text-secondary-300 es:shadow-sm",
+    simple: "es:rounded-2xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-300"
   };
   const sizeClassName = {
     auto: "",

package/dist/components/placeholders/media-placeholder.js

@@ -29,8 +29,8 @@ const MediaPlaceholder = (props) => {
     return null;
   }
   const styleClassName = {
-    default: "es:rounded-xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-400 es:shadow-xs",
-    simple: "es:rounded-xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-400"
+    default: "es:rounded-2xl es:border es:border-secondary-300 es:bg-secondary-50 es:text-secondary-400 es:shadow-sm",
+    simple: "es:rounded-2xl es:border es:border-secondary-300 es:border-dashed es:text-secondary-400"
   };
   const sizeClassName = {
     auto: "",

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-O9uw63D7.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-CJVCRT8_.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { Button } from "../button/button.js";
@@ -102,7 +102,7 @@ const Popover = (props) => {
       crossOffset,
       containerPadding,
       className: ({ isEntering, isExiting }) => clsx(
-        "es:rounded-lg es:border es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden",
+        "es:rounded-2xl es:border es:border-secondary-300 es:bg-white es:inset-ring es:inset-ring-secondary-100 es:shadow-xl es:outline-hidden",
         "es:motion-safe:motion-ease-spring-smooth",
         isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
         isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200",

package/dist/components/radio/radio.js

@@ -7,7 +7,7 @@ import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJge
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BrJylgPR.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DWBuejBp.js";
 import { a as $f645667febf57a63$export$4c014de7c8940b4c, b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
 import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-Dy0PXJg5.js";
 import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BEPI2m7u.js";
@@ -382,14 +382,14 @@ const RadioButton = (props) => {
       "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:min-h-10",
       "es:first:rounded-t-xl es:last:rounded-b-xl",
       "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
-      "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+      "es:shadow-sm es:inset-ring es:inset-shadow-xs",
       "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
     ),
     segmentedHorizontal: clsx(
       "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:grow es:min-h-10",
       "es:first:rounded-l-xl es:last:rounded-r-xl",
       "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
-      "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+      "es:shadow-sm es:inset-ring es:inset-shadow-xs",
       "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
     )
   };
@@ -420,7 +420,7 @@ const RadioButton = (props) => {
               "es:size-5 es:flex es:items-center es:justify-center",
               "es:transition es:cursor-pointer",
               "es:bg-radial es:border es:rounded-full",
-              "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+              "es:shadow-sm es:inset-ring es:inset-shadow-xs",
               "es:any-focus:outline-hidden",
               !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
               !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",

package/dist/components/repeater/repeater-item.js

@@ -30,7 +30,7 @@ import { RepeaterContext } from "./repeater-context.js";
  */
 const RepeaterItem = (props) => {
   const { children, icon, label, subtitle, "aria-label": ariaLabel, className, actions, textValue, expandDisabled, menuOptions, noMenuButton, ...rest } = props;
-  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, isSelected, canDelete, canAdd, allOpen, setAllOpen } = useContext(RepeaterContext);
+  const { deleteItem, duplicateItem, isDragged, isOutOfBounds, isSelected, canDelete, canAdd, allOpen, setAllOpen, setOpenItems, id, isItemOpen } = useContext(RepeaterContext);
   return /* @__PURE__ */ jsx(
     Expandable,
     {
@@ -39,20 +39,21 @@ const RepeaterItem = (props) => {
       subtitle: isOutOfBounds ? null : subtitle,
       className: clsx(
         "es:transition",
-        isDragged && "es:border es:border-secondary-100 es:bg-white/50 es:shadow-md es:backdrop-blur-lg",
-        isOutOfBounds && "es:border es:border-red-200! es:bg-red-50 es:shadow-red-500/20 es:[&_button]:invisible es:[&_svg_path]:stroke-red-500"
+        !isItemOpen && isDragged && "es:border es:border-secondary-100 es:bg-white/50 es:shadow-md es:backdrop-blur-lg",
+        !isItemOpen && isOutOfBounds && "es:border es:border-red-200! es:bg-red-50 es:shadow-red-500/20 es:[&_button]:invisible es:[&_svg_path]:stroke-red-500"
       ),
-      labelClassName: clsx(className, isDragged ? "es:cursor-grabbing" : "es:cursor-grab"),
+      labelClassName: clsx(className, isDragged && "es:cursor-grabbing", !isDragged && !isItemOpen && "es:cursor-grab"),
       headerClassName: clsx(
         "es:transition es:rounded-lg es:border es:border-transparent",
         isSelected && "es:bg-accent-50 es:border-accent-100",
-        "es:group-focus:outline-hidden es:group-focus:border-accent-500 es:group-focus:ring-2 es:group-focus:ring-accent-500/50"
+        !isItemOpen && "es:group-focus:outline-hidden es:group-focus:border-accent-500 es:group-focus:ring-2 es:group-focus:ring-accent-500/50"
       ),
       open: allOpen,
       onOpenChange: (open) => {
         if (allOpen && !open) {
           setAllOpen(false);
         }
+        setOpenItems((prev) => ({ ...prev, [id]: open }));
       },
       customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
         return /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-px", children: [

package/dist/components/repeater/repeater.js

@@ -38,6 +38,7 @@ const fixIds = (items, itemIdBase) => {
  * @param {JSX.Element} [props.addButton] - If provided, overrides the default add button. `(props: { addItem: (additional: Object<string, any>?) => void, disabled: Boolean }) => JSX.Element`.
  * @param {string} [props.className] - Classes to pass to the item wrapper.
  * @param {boolean} [props.noExpandAllButton] - If `true`, the "Expand all"/"Collapse all" button is not displayed.
+ * @param {boolean} [props.noDragToRemove] - If `true`, the "drag to remove" functionality will be disabled.
  * @param {JSX.Element|JSX.Element[]} [props.moreOptions] - Options to add in the "More options" menu.
  * @param {JSX.Element} [props.emptyState] - Allows overriding the default empty state.
  *
@@ -92,10 +93,12 @@ const Repeater = (props) => {
     className,
     emptyState,
     noExpandAllButton,
+    noDragToRemove,
     moreOptions,
     hidden
   } = props;
   const [allOpen, setAllOpen] = useState(false);
+  const [openItems, setOpenItems] = useState({});
   if (typeof rawItems === "undefined" || rawItems === null || !Array.isArray(rawItems)) {
     console.warn(__("Repeater: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
@@ -168,7 +171,7 @@ const Repeater = (props) => {
         /* @__PURE__ */ jsx(
           List,
           {
-            values: items,
+            values: items.map((item) => ({ ...item, disabled: openItems[item.id] })),
             onChange: ({ oldIndex, newIndex }) => onChange(newIndex === -1 ? arrayRemove(items, oldIndex) : arrayMove(items, oldIndex, newIndex)),
             renderList: ({ children: children2, props: props2 }) => {
               const { key, ...rest } = props2;
@@ -214,7 +217,9 @@ const Repeater = (props) => {
                         canDelete,
                         canAdd,
                         allOpen,
-                        setAllOpen
+                        setAllOpen,
+                        setOpenItems,
+                        isItemOpen: openItems[item.id] ?? allOpen
                       },
                       children: children({
                         ...item,
@@ -236,7 +241,7 @@ const Repeater = (props) => {
                 (item == null ? void 0 : item.id) ?? key
               );
             },
-            removableByMove: true
+            removableByMove: !noDragToRemove
           }
         ),
         /* @__PURE__ */ jsxs(AnimatedVisibility, { visible: items.length < 1, children: [

package/dist/components/select/async-multi-select.js

@@ -143,6 +143,7 @@ const AsyncMultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPlacement: "auto",
               menuPortalTarget: document.body,
               ...additionalProps
             }

package/dist/components/select/async-single-select.js

@@ -125,6 +125,7 @@ const AsyncSelect = (props) => {
             DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
             ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
           },
+          menuPlacement: "auto",
           menuPortalTarget: document.body,
           ...additionalProps
         }

package/dist/components/select/multi-select.js

@@ -137,6 +137,7 @@ const MultiSelect = (props) => {
                 DropdownIndicator: customDropdownArrow ?? CustomSelectDefaultDropdownIndicator,
                 ClearIndicator: customClearIndicator ?? CustomSelectDefaultClearIndicator
               },
+              menuPlacement: "auto",
               menuPortalTarget: document.body,
               ...additionalProps
             }