@eightshift/ui-components 5.0.1 → 5.0.3

package/dist/components/expandable/expandable.js

@@ -6,14 +6,14 @@ import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-wERNNG0T.js";
-import { e as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-B94NDG0v.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-BpwTmkAe.js";
+import { e as $bdb11010cef70236$export$f680877a34711e37, n as $b5e257d569688ac6$export$535bd6ca7f90a273, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, d as $3ef42575df84b30b$export$9d1611c77c2fe928, m as $5dc95899b306f630$export$c9058316764c140e } from "../../utils-CZt7LCbO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-VO5tcIli.js";
+import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "../../useHover-C2SkI1Fn.js";
 import { r as reactDomExports } from "../../index-CFozsmNS.js";
-import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-D5o_CqDH.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-nMG2uzxS.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
+import { $ as $e9faafb641e167db$export$90fc3a17d93f704c } from "../../useEvent-ICdlokG-.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
 function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
   let { isDisabled } = props;
   let triggerId = $bdb11010cef70236$export$f680877a34711e37();
@@ -269,59 +269,66 @@ const Expandable = (props) => {
       className: clsx("es:w-full es:rounded-xl es:border es:border-secondary-300/0 es:text-sm es:transition", isOpen && "es:border-secondary-300/100 es:shadow-lg", className),
       ...other,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName), children: [
-          /* @__PURE__ */ jsx(
-            RichLabel,
-            {
-              icon,
-              label,
-              subtitle,
-              className: labelClassName,
-              as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-              fullWidth: true
-            }
-          ),
-          actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
-            AnimatedVisibility,
-            {
-              visible: !isOpen,
-              className: "es:ml-auto es:flex es:gap-2",
-              transition: "slideFadeDownSlight",
-              noInitial: true,
-              children: actions
-            }
-          ),
-          actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
-          customOpenButton && customOpenButton({
-            open: isOpen,
-            toggleOpen: () => {
-              setIsOpen(!isOpen);
-              if (onOpenChange) {
-                onOpenChange(!isOpen);
-              }
-            },
-            tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-            disabled
-          }),
-          !customOpenButton && /* @__PURE__ */ jsx(
-            Button,
-            {
-              slot: "trigger",
-              type: "ghost",
-              icon: isOpen ? icons.caretDownFill : icons.caretDown,
-              onPress: () => {
-                setIsOpen(!isOpen);
-                if (onOpenChange) {
-                  onOpenChange(!isOpen);
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx("es:flex es:h-10 es:items-center es:gap-1 es:transition-[padding]", isOpen && "es:py-1 es:pl-2 es:pr-1", headerClassName),
+            ...headerProps,
+            children: [
+              /* @__PURE__ */ jsx(
+                RichLabel,
+                {
+                  icon,
+                  label,
+                  subtitle,
+                  className: labelClassName,
+                  as: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+                  fullWidth: true
+                }
+              ),
+              actions && !keepActionsOnExpand && /* @__PURE__ */ jsx(
+                AnimatedVisibility,
+                {
+                  visible: !isOpen,
+                  className: "es:ml-auto es:flex es:gap-2",
+                  transition: "slideFadeDownSlight",
+                  noInitial: true,
+                  children: actions
                 }
-              },
-              tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
-              disabled,
-              className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
-              size: "small"
-            }
-          )
-        ] }),
+              ),
+              actions && keepActionsOnExpand && /* @__PURE__ */ jsx("div", { className: "es:ml-auto es:flex es:gap-2", children: actions }),
+              customOpenButton && customOpenButton({
+                open: isOpen,
+                toggleOpen: () => {
+                  setIsOpen(!isOpen);
+                  if (onOpenChange) {
+                    onOpenChange(!isOpen);
+                  }
+                },
+                tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+                disabled
+              }),
+              !customOpenButton && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  slot: "trigger",
+                  type: "ghost",
+                  icon: isOpen ? icons.caretDownFill : icons.caretDown,
+                  onPress: () => {
+                    setIsOpen(!isOpen);
+                    if (onOpenChange) {
+                      onOpenChange(!isOpen);
+                    }
+                  },
+                  tooltip: isOpen ? __("Close", "eightshift-ui-components") : __("Open", "eightshift-ui-components"),
+                  disabled,
+                  className: clsx("es:icon:size-5 es:icon:transition-transform", isOpen && "es:icon:-scale-y-100"),
+                  size: "small"
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           $28f4fd908f0de97f$export$feabaa331e1d464c,
           {

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

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, b as $2d73ec29415bd339$export$712718f7aec83d5, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input--mF4XVE1.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-B94NDG0v.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, b as $2d73ec29415bd339$export$712718f7aec83d5, $ 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 $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
 import React__default, { forwardRef, createContext, useRef, useState, useCallback } from "react";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VO5tcIli.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-nMG2uzxS.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DeUh5Wkw.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.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-DRpwWot2.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
 import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-rE6uR-lr.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -194,7 +194,7 @@ const InputField = (props) => {
                 ...other,
                 type,
                 className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md 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",
@@ -210,12 +210,12 @@ const InputField = (props) => {
               {
                 ...other,
                 className: clsx(
-                  "es:min-h-10 es:w-full es:rounded-lg es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                  "es:min-h-10 es:w-full es:rounded-10 es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm es:not-readonly:focus:shadow-md 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",
+                  "es:disabled:shadow-none! es:readonly:shadow-xs! es:disabled:border-secondary-200 es:disabled:bg-secondary-50 es:disabled:text-secondary-500 es:disabled:cursor-default es:readonly:bg-secondary-50",
                   className
                 )
               }

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

@@ -1,15 +1,15 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-wERNNG0T.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a } from "../../ComboBox-D1LPUwWP.js";
-import { $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-C5iZpSAM.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input--mF4XVE1.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../ListBox-4oW9kh3R.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D190gMbE.js";
+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 $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 __ } from "../../default-i18n-CT_oS1Fy.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { useRef, useState, useEffect, cloneElement } from "react";
+import { useRef, useEffect, cloneElement } from "react";
 import { Spacer } from "../spacer/spacer.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
@@ -68,10 +68,16 @@ const LinkInput = (props) => {
   } = props;
   const canShowSuggestions = typeof fetchSuggestions !== "undefined";
   const triggerRef = useRef(null);
+  let shouldShowSuggestions = true;
+  if (!canShowSuggestions || !showSuggestionsWhenEmpty && url.length < 1) {
+    shouldShowSuggestions = false;
+  } else {
+    shouldShowSuggestions = !(showSuggestionsWhenEmpty !== true && url.trim().length < 3 || url.startsWith("#") || url.startsWith(":") || url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("www"));
+  }
   const suggestionList = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
     initialFilterText: url,
     async load({ signal, filterText }) {
-      if (!canShowSuggestions) {
+      if (disabled || !canShowSuggestions || !shouldShowSuggestions || !filterText || filterText.length < 3) {
         return {
           items: []
         };
@@ -82,20 +88,8 @@ const LinkInput = (props) => {
       };
     }
   });
-  const [shouldShowSuggestions, setShouldShowSuggestions] = useState(false);
   useEffect(() => {
     suggestionList.setFilterText(url);
-    if (!canShowSuggestions) {
-      setShouldShowSuggestions(false);
-      return;
-    }
-    if (!showSuggestionsWhenEmpty && url.length < 1) {
-      setShouldShowSuggestions(false);
-      return;
-    }
-    setShouldShowSuggestions(
-      !(showSuggestionsWhenEmpty !== true && url.trim().length < 3 || url.startsWith("#") || url.startsWith(":") || url.startsWith("mailto") || url.startsWith("tel") || url.startsWith("http") || url.startsWith("www"))
-    );
   }, [url]);
   if (hidden) {
     return null;
@@ -107,7 +101,6 @@ const LinkInput = (props) => {
       inputValue: suggestionList.filterText,
       onInputChange: (value) => {
         onChange({ url: value, isAnchor: value == null ? void 0 : value.includes("#") });
-        suggestionList.setFilterText(value);
       },
       allowsCustomValue: true,
       allowsEmptyCollection: true,
@@ -134,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",
@@ -188,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"
@@ -203,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: [
@@ -238,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-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 { $ 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 { 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-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 { 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 { $ 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-BpB9uB_I.js";
+import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-5aDgmImj.js";
 import { Button } from "../button/button.js";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
@@ -258,7 +258,7 @@ const Modal2 = (props) => {
           $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",
+              "es:w-full es:max-w-lg es:overflow-hidden es:rounded-2xl 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-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

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

@@ -1,17 +1,17 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default, { forwardRef, createContext, useRef, useState, cloneElement } from "react";
 import { _ as __ } from "../../default-i18n-CT_oS1Fy.js";
-import { a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 } from "../../Group-C5iZpSAM.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input--mF4XVE1.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "../../Button-wERNNG0T.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-B94NDG0v.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DeUh5Wkw.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 $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-DRpwWot2.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-BYWrbm1z.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-C9dmERhP.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 { 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/options-panel/options-panel.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-D-Pboe4p.js";
+import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-ba38ScjJ.js";
 /**
  * Component that provides a container panel for options, with an optional title.
  * Best used within the Gutenberg sidebar, instead of the default `PanelBody` component.

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-D190gMbE.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-O9uw63D7.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

@@ -1,19 +1,19 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Fp6AwSRn.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-B94NDG0v.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DeUh5Wkw.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, h as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-CZt7LCbO.js";
+import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ 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-DRpwWot2.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.js";
 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-DlmRL87g.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DjNo5790.js";
-import { a as $f645667febf57a63$export$4c014de7c8940b4c, b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-VO5tcIli.js";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-D0_aaK-e.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-C-plSxbS.js";
-import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-nMG2uzxS.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BYWrbm1z.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DsKYcRQ_.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-BrJylgPR.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";
+import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-BYi0pekx.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -287,7 +287,10 @@ const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef(fun
   let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $b6c3ddc6086f204d$export$b118023277d4a5c3);
   let state = React__default.useContext($b6c3ddc6086f204d$export$29d84393af70866c);
-  let inputRef = $df56164dff5785e2$export$4338b53315abf666($5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null));
+  let inputRef = $df56164dff5785e2$export$4338b53315abf666(useMemo(() => $5dc95899b306f630$export$c9058316764c140e(userProvidedInputRef, props.inputRef !== void 0 ? props.inputRef : null), [
+    userProvidedInputRef,
+    props.inputRef
+  ]));
   let { labelProps, inputProps, isSelected, isDisabled, isPressed } = $0d5c49892c1215da$export$37b0961d2f4751e2({
     ...$64fa3d84918910a7$export$ef03459518577ad4(props),
     // ReactNode type doesn't allow function children.
@@ -379,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"
     )
   };
@@ -417,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",