@eightshift/ui-components 5.0.2 → 5.0.3

package/dist/components/button/button.js

@@ -150,7 +150,7 @@ const Button = (props) => {
       "es:btn-group-mid:rounded-none",
       "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
       "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
-      "es:not-disabled:cursor-pointer",
+      "es:enabled:cursor-pointer",
       "es:shrink-0",
       icon && children ? "es:justify-start" : "es:justify-center",
       className
@@ -158,18 +158,18 @@ const Button = (props) => {
     {
       variants: {
         size: {
-          small: "es:icon:size-4.5 es:rounded-md",
-          default: "es:icon:size-5.5 es:rounded-lg",
-          large: "es:icon:size-6 es:rounded-lg"
+          small: "es:icon:size-4.5 es:rounded-7",
+          default: "es:icon:size-5.5 es:rounded-10",
+          large: "es:icon:size-6 es:rounded-xl"
         },
         type: {
           default: "es:bg-radial-[at_50%_125%] es:inset-ring es:inset-shadow-xs",
           selected: "es:bg-radial-[at_50%_125%] es:inset-ring es:inset-shadow-xs",
           danger: "es:bg-radial-[at_50%_125%] es:inset-ring es:inset-shadow-xs",
-          ghost: "es:border-transparent es:text-secondary-700 es:not-disabled:hover:bg-secondary-100 es:disabled:border-transparent!",
+          ghost: "es:border-transparent es:text-secondary-700 es:enabled:hover:bg-secondary-100 es:enabled:active:bg-accent-50 es:enabled:pressed:bg-accent-50 es:enabled:active:text-accent-950 es:enabled:pressed:text-accent-950 es:disabled:border-transparent!",
           dangerGhost: [
-            "es:border-transparent es:text-red-600",
-            "es:not-disabled:hover:bg-red-500/5",
+            "es:border-transparent es:text-red-700",
+            "es:enabled:hover:bg-red-500/5 es:enabled:active:bg-red-500/10 es:enabled:pressed:bg-red-500/10",
             "es:focus-visible:text-red-700",
             "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
             "es:disabled:border-transparent!"
@@ -187,8 +187,8 @@ const Button = (props) => {
             "es:border-secondary-300",
             "es:inset-ring-secondary-100",
             "es:inset-shadow-secondary-100/50",
-            "es:shadow-xs",
-            "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+            "es:shadow-sm",
+            "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
             "es:hover:text-accent-950",
             "es:focus-visible:text-accent-950"
           ]
@@ -205,22 +205,22 @@ const Button = (props) => {
             "es:focus-visible:border-accent-700",
             "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
             "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow es:shadow-accent-600/30"
+            "es:shadow es:shadow-accent-600/30 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
           ]
         },
         {
           type: "danger",
           disabled: false,
           class: [
-            "es:text-red-800",
+            "es:text-red-700",
             "es:from-red-50/75 es:to-white",
-            "es:border-red-600/50",
+            "es:border-red-700/50",
             "es:inset-ring-red-100",
             "es:inset-shadow-red-50",
             "es:hover:inset-shadow-red-100 es:hover:inset-ring-red-100 es:hover:text-red-800 es:hover:border-red-600",
             "es:focus-visible:text-red-900",
             "es:focus-visible:ring-red-500/30 es:focus-visible:border-red-600 es:focus-visible:inset-ring-red-100",
-            "es:shadow"
+            "es:shadow es:shadow-red-700/20 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
           ]
         },
         {

package/dist/components/checkbox/checkbox.js

@@ -265,10 +265,10 @@ const Checkbox2 = (props) => {
           "div",
           {
             className: clsx(
-              "es:size-5 es:flex es:items-center es:justify-center",
+              "es:size-5 es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1 es:*:row-start-1 es:*:col-start-1",
               "es:transition es:cursor-pointer",
               "es:bg-radial es:border es:rounded-md",
-              "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 es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
               !selectedOrIntermediate && "es:group-focus-visible:border-accent-500",
               !selectedOrIntermediate && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
@@ -283,7 +283,7 @@ const Checkbox2 = (props) => {
               /* @__PURE__ */ jsx(
                 AnimatedVisibility,
                 {
-                  transition: "scaleFade",
+                  transition: "scaleRotateFade",
                   visible: indeterminate,
                   className: "es:transition-none",
                   children: /* @__PURE__ */ jsx("div", { className: "es:h-0.5 es:w-3 es:rounded es:bg-white" })

package/dist/components/color-pickers/color-swatch.js

@@ -47,10 +47,10 @@ const ColorSwatch = (props) => {
       style: {
         background: (color || gradient) && backgroundGradient
       },
-      className: () => clsx("es:size-6 es:rounded es:border es:border-secondary-300 es:shadow-xs", !color && !gradient && !customGradient && "es:bg-white", className),
+      className: () => clsx("es:size-6 es:rounded-md es:border es:border-secondary-300 es:shadow-sm", !color && !gradient && !customGradient && "es:bg-white", className),
       colorName: !color && !gradient && !customGradient ? __("No color", "eightshift-ui-components") : colorName,
       color,
-      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded es:bg-red-500" })
+      children: !color && !gradient && !customGradient && /* @__PURE__ */ jsx("div", { className: "es:m-auto es:h-full es:w-px es:rotate-45 es:rounded-md es:bg-red-500" })
     }
   );
 };

package/dist/components/color-pickers/gradient-editor.js

@@ -134,12 +134,12 @@ const gradientTypes = [
   {
     label: __("Radial"),
     value: "radial",
-    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-[radial-gradient(var(--tw-gradient-stops))] es:from-current" })
+    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-radial es:from-current/75 es:to-current/10" })
   },
   {
     label: __("Conic"),
     value: "conic",
-    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-[conic-gradient(var(--tw-gradient-stops))] es:from-current" })
+    icon: /* @__PURE__ */ jsx("div", { className: "es:transparent es:size-4 es:rounded-full es:bg-conic es:from-current" })
   }
 ];
 const linearDirections = [

package/dist/components/color-pickers/solid-color-picker.js

@@ -1290,7 +1290,7 @@ const SolidColorPicker = (props) => {
   const valueInputClassName = clsx(
     "es:h-8 es:w-12",
     "es:tabular-nums es:font-mono",
-    "es:border es:rounded-lg 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:border es:rounded-lg es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm 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:z-10",
     "es:focus-visible:border-accent-500",
@@ -1304,7 +1304,7 @@ const SolidColorPicker = (props) => {
         xChannel: "saturation",
         yChannel: "lightness",
         className: clsx(
-          "es:size-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm es:transition",
+          "es:size-48 es:rounded-xl es:border es:border-secondary-300 es:shadow-sm es:transition",
           'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
           "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
         ),
@@ -1325,7 +1325,7 @@ const SolidColorPicker = (props) => {
           $6f909507e6374d18$export$105594979f116971,
           {
             className: clsx(
-              "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
+              "es:h-7 es:w-48 es:rounded-10 es:border es:border-secondary-300 es:shadow-sm",
               'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
@@ -1345,7 +1345,7 @@ const SolidColorPicker = (props) => {
           $6f909507e6374d18$export$105594979f116971,
           {
             className: clsx(
-              "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
+              "es:h-7 es:w-48 es:rounded-10 es:border es:border-secondary-300 es:shadow-sm",
               'es:[&:has(>_[data-focus-visible="true"])]:ring-2 es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
               "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
@@ -1375,7 +1375,7 @@ const SolidColorPicker = (props) => {
               className: clsx(
                 "es:h-9 es:w-20",
                 "es:tabular-nums es:font-mono",
-                "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:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-sm 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:z-10",
                 "es:focus-visible:border-accent-500",

package/dist/components/component-toggle/component-toggle.js

@@ -23,7 +23,6 @@ import { AnimatedVisibility } from "../animated-visibility/animated-visibility.j
  * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
  * @param {boolean} [props.noExpandButton] - If `true`, the expand button is not shown.
  * @param {boolean} [props.noLabel] - If `true`, the label is not shown.
- * @param {boolean} [props.noUseToggle] - If `true`, the toggle is not displayed.
  * @param {boolean} [props.expandButtonDisabled] - If `true`, the expand button is disabled.
  * @param {boolean} [props.controlOnly] - If `true`, only the control is displayed.
  * @param {boolean} [props.hideUseToggleOnExpand] - If `true`, and the component is display in a variant where it can be expanded, the use toggle will hide when the component is expanded.

package/dist/components/expandable/expandable.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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: [