@eightshift/ui-components 6.0.4 → 6.0.6

package/dist/assets/style-admin.css

@@ -2496,6 +2496,11 @@ input[data-rac]::-webkit-search-cancel-button {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
+:is(body, body #wpwrap) .es\:-translate-y-4 {
+  --tw-translate-y: calc(var(--es-spacing) * -4);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :is(body, body #wpwrap) .es\:translate-y-0 {
   --tw-translate-y: calc(var(--es-spacing) * 0);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2766,10 +2771,6 @@ input[data-rac]::-webkit-search-cancel-button {
   cursor: not-allowed;
 }
 
-:is(body, body #wpwrap) .es\:cursor-pointer {
-  cursor: pointer;
-}
-
 :is(body, body #wpwrap) .es\:cursor-wait {
   cursor: wait;
 }
@@ -3166,6 +3167,10 @@ input[data-rac]::-webkit-search-cancel-button {
   border-radius: var(--es-radius-18);
 }
 
+:is(body, body #wpwrap) .es\:rounded-20\! {
+  border-radius: var(--es-radius-20) !important;
+}
+
 :is(body, body #wpwrap) .es\:rounded-28 {
   border-radius: var(--es-radius-28);
 }
@@ -7864,10 +7869,6 @@ input[data-rac]::-webkit-search-cancel-button {
   border-bottom-left-radius: var(--es-radius-md);
 }
 
-:is(body, body #wpwrap) .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])) {
-  cursor: pointer;
-}
-
 :is(body, body #wpwrap) .es\:not-has-any-icon\:aspect-5\/3:not(:has(* svg)) {
   aspect-ratio: 5 / 3;
 }

package/dist/assets/style-editor.css

@@ -2464,6 +2464,11 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   translate: var(--tw-translate-x) var(--tw-translate-y);
 }
 
+:is(body, #wpwrap #editor) .es\:-translate-y-4 {
+  --tw-translate-y: calc(var(--es-spacing) * -4);
+  translate: var(--tw-translate-x) var(--tw-translate-y);
+}
+
 :is(body, #wpwrap #editor) .es\:translate-y-0 {
   --tw-translate-y: calc(var(--es-spacing) * 0);
   translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -2734,10 +2739,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   cursor: not-allowed;
 }
 
-:is(body, #wpwrap #editor) .es\:cursor-pointer {
-  cursor: pointer;
-}
-
 :is(body, #wpwrap #editor) .es\:cursor-wait {
   cursor: wait;
 }
@@ -3134,6 +3135,10 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-radius: var(--es-radius-18);
 }
 
+:is(body, #wpwrap #editor) .es\:rounded-20\! {
+  border-radius: var(--es-radius-20) !important;
+}
+
 :is(body, #wpwrap #editor) .es\:rounded-28 {
   border-radius: var(--es-radius-28);
 }
@@ -7832,10 +7837,6 @@ button, input:where([type="button"], [type="reset"], [type="submit"]) {
   border-bottom-left-radius: var(--es-radius-md);
 }
 
-:is(body, #wpwrap #editor) .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])) {
-  cursor: pointer;
-}
-
 :is(body, #wpwrap #editor) .es\:not-has-any-icon\:aspect-5\/3:not(:has(* svg)) {
   aspect-ratio: 5 / 3;
 }

package/dist/assets/style.css

@@ -2949,6 +2949,11 @@ input[data-rac]::-webkit-search-cancel-button {
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .es\:-translate-y-4 {
+    --tw-translate-y: calc(var(--es-spacing) * -4);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .es\:translate-y-0 {
     --tw-translate-y: calc(var(--es-spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3219,10 +3224,6 @@ input[data-rac]::-webkit-search-cancel-button {
     cursor: not-allowed;
   }
 
-  .es\:cursor-pointer {
-    cursor: pointer;
-  }
-
   .es\:cursor-wait {
     cursor: wait;
   }
@@ -3619,6 +3620,10 @@ input[data-rac]::-webkit-search-cancel-button {
     border-radius: var(--es-radius-18);
   }
 
+  .es\:rounded-20\! {
+    border-radius: var(--es-radius-20) !important;
+  }
+
   .es\:rounded-28 {
     border-radius: var(--es-radius-28);
   }
@@ -8317,10 +8322,6 @@ input[data-rac]::-webkit-search-cancel-button {
     border-bottom-left-radius: var(--es-radius-md);
   }
 
-  .es\:not-disabled\:cursor-pointer:not(:is(:disabled, [data-rac][data-disabled])) {
-    cursor: pointer;
-  }
-
   .es\:not-has-any-icon\:aspect-5\/3:not(:has(* svg)) {
     aspect-ratio: 5 / 3;
   }

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

@@ -247,7 +247,7 @@ const GradientEditor = (props) => {
         "button",
         {
           className: clsx(
-            "es:shadow-sm, es:mx-auto es:block es:h-40 es:cursor-pointer es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy",
+            "es:shadow-sm, es:mx-auto es:block es:h-40 es:rounded-lg es:border es:border-secondary-300 es:transition-[width] es:duration-300 es:ease-spring-snappy",
             "es:mb-2",
             squarePreview ? "es:w-40" : "es:w-full"
           ),

package/dist/components/draggable/draggable-handle.js

@@ -26,7 +26,7 @@ const DraggableHandle = (props) => {
     "div",
     {
       className: clsx(
-        "es:flex es:h-5 es:w-4 es:cursor-pointer es:items-center es:justify-center es:rounded-sm es:hover:rounded-md es:inset-ring es:inset-ring-surface-400/10 es:bg-surface-50 es:text-surface-500/80 es:transition-plus",
+        "es:flex es:h-5 es:w-4 es:items-center es:justify-center es:rounded-sm es:hover:rounded-md es:inset-ring es:inset-ring-surface-400/10 es:bg-surface-50 es:text-surface-500/80 es:transition-plus",
         "es:shadow-2xs es:shadow-surface-900/2",
         "es:icon:size-4 es:icon:shrink-0",
         "es:active:inset-ring-accent-500/30 es:active:bg-surface-100 es:active:text-accent-500 es:active:rounded-xl",

package/dist/components/draggable-list/draggable-list-item.js

@@ -37,7 +37,7 @@ const DraggableListItem = (props) => {
             icon,
             label,
             subtitle,
-            className: clsx("es:mr-auto", labelContainerClassName),
+            className: clsx("es:mr-auto es:min-h-9", labelContainerClassName),
             iconClassName,
             labelClassName,
             subtitleClassName,
@@ -72,7 +72,7 @@ const DraggableListItemHandle = (props) => {
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: className ?? 'es:relative es:h-6 es:w-2 es:cursor-pointer es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
+      className: className ?? 'es:relative es:h-6 es:w-2 es:items-center es:justify-center es:self-center es:rounded es:border es:border-secondary-300 es:bg-secondary-50 es:transition es:after:absolute es:after:inset-0 es:after:m-auto es:after:h-4 es:after:w-px es:after:bg-secondary-200 es:after:transition es:after:content-[""] es:hover:border-accent-500 es:hover:bg-accent-400 es:hover:after:bg-accent-500',
       ...rest,
       "data-movable-handle": true,
       tabIndex: -1,

package/dist/components/draggable-list/draggable-list.js

@@ -81,7 +81,7 @@ const DraggableList = (props) => {
     console.warn(__("DraggableList: 'items' are not an array or are undefined!", "eightshift-ui-components"));
   }
   const items = fixIds(rawItems ?? [], itemIdBase);
-  if (hidden) {
+  if (hidden || !items?.length) {
     return null;
   }
   return /* @__PURE__ */ jsx(

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

@@ -1678,7 +1678,7 @@ const LinkInput = (props) => {
                           {
                             className: clsx(
                               "es:opacity-0 es:group-hover:opacity-100 es:group-focus-within:opacity-100 es:focus-visible:opacity-100",
-                              "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:text-secondary-600 es:backdrop-blur es:transition es:cursor-pointer",
+                              "es:flex es:size-8 es:items-center es:justify-center es:rounded-md es:text-secondary-600 es:backdrop-blur es:transition",
                               "es:hover:bg-red-600/5 es:hover:text-red-600",
                               "es:icon:size-6"
                             ),

package/dist/components/placeholders/file-picker-shell.js

@@ -99,29 +99,32 @@ const FilePickerShell = (props) => {
       errorClassName: "es:aspect-3-2 es:rounded-2xl es:bg-linear-to-br es:from-white es:to-secondary-50 es:border es:border-dashed es:border-secondary-200",
       imageAnalysisSettings: { yFrom: 0.25, yTo: 0.75 },
       ...rest,
-      children: ({ image, dominantColors, isDark, hasAnalysed, isTransparent }) => /* @__PURE__ */ jsxs(
+      children: ({ image, dominantColors, isDark, hasAnalysed, isTransparent, hasError, errorBadge }) => /* @__PURE__ */ jsxs(
         "div",
         {
           className: clsx(
             "es:border es:justify-between es:rounded-2xl es:isolate es:relative es:flex-col es:gap-y-2 es:grid es:grid-cols-1 es:overflow-clip es:aspect-3-2 es:transition",
-            hasAnalysed ? "es:border-secondary-200" : "es:border-secondary-200/0",
-            hasAnalysed && !isTransparent && "es:group es:grid-rows-1",
-            hasAnalysed && isTransparent && "es:p-2 es:grid-rows-[minmax(0,1fr)_auto] es:h-fit",
+            !hasError && hasAnalysed ? "es:border-secondary-200" : "es:border-secondary-200/0",
+            !hasError && hasAnalysed && !isTransparent && "es:group es:grid-rows-1",
+            !hasError && hasAnalysed && isTransparent && "es:p-2 es:grid-rows-[minmax(0,1fr)_auto] es:h-fit",
             !hasAnalysed && "es:shimmer-dark es:bg-secondary-50",
+            hasError && "es:flex es:items-center es:justify-center",
             className
           ),
-          style: hasAnalysed && isTransparent ? { backgroundColor: `color-mix(in srgb, ${dominantColors[0]?.color || "#ffffff"} ${dominantColors[0]?.isDark ? 10 : 80}%, #ffffff)` } : {},
+          style: !hasError && hasAnalysed && isTransparent ? { backgroundColor: `color-mix(in srgb, ${dominantColors[0]?.color || "#ffffff"} ${dominantColors[0]?.isDark ? 10 : 80}%, #ffffff)` } : {},
           children: [
             image,
-            hasAnalysed && children && /* @__PURE__ */ jsx(
+            hasError && errorBadge,
+            children && /* @__PURE__ */ jsx(
               "div",
               {
                 className: clsx(
                   "es:flex es:items-center-safe es:gap-0.75",
                   "es-button-group-h",
-                  !isTransparent && "es:absolute es:bottom-2 es:left-2 es:right-2 es:translate-y-[125%] es:group-hover:translate-y-0 es:has-aria-expanded:translate-y-0 es:has-focus-visible:translate-y-0 es:transition-transform es:ease-spring-smooth"
+                  !hasError && !isTransparent && "es:absolute es:bottom-2 es:left-2 es:right-2 es:translate-y-[125%] es:group-hover:translate-y-0 es:has-aria-expanded:translate-y-0 es:has-focus-visible:translate-y-0 es:transition-transform es:ease-spring-smooth",
+                  hasError && "es:absolute es:bottom-2 es:left-2 es:right-2"
                 ),
-                children: typeof children === "function" ? children({ dominantColors, isDark, isTransparent }) : children
+                children: typeof children === "function" ? children({ dominantColors, isDark, isTransparent, hasError }) : children
               }
             )
           ]

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

@@ -38,8 +38,7 @@ const FilePlaceholder = (props) => {
               "es:inset-ring es:inset-ring-surface-300/40",
               "es:inset-shadow-xs es:inset-shadow-surface-50/50",
               "es:text-surface-800",
-              !flat && "es:shadow-xs es:shadow-black/5",
-              "es:cursor-pointer"
+              !flat && "es:shadow-xs es:shadow-black/5"
             ],
             !fileName && "es:bg-secondary-100 es:text-secondary-500"
           ),

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

@@ -162,7 +162,7 @@ const AsyncMultiSelect = (props) => {
       return;
     }
     const selectedValues = [...selected].map((item) => {
-      const option = list.items.find((option2) => option2.value === item) || value.find((option2) => option2.value === item);
+      const option = list?.items?.find((option2) => option2.value === item) || value.find((option2) => option2.value === item);
       if (!option) {
         return null;
       }
@@ -181,6 +181,19 @@ const AsyncMultiSelect = (props) => {
   };
   const ref = useRef();
   const currentValueKeys = value?.map((item) => item?.value ?? item);
+  const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+    variants: {
+      size: {
+        small: ["es:min-h-8", "es:px-2.5"],
+        medium: ["es:min-h-9", "es:px-3"],
+        default: ["es:min-h-10", "es:px-3"],
+        large: ["es:min-h-12", "es:px-4"]
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
   const selectClass = cva(
     [
       "es:relative",
@@ -200,12 +213,6 @@ const AsyncMultiSelect = (props) => {
     ],
     {
       variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5"],
-          medium: ["es:min-h-9", "es:px-3"],
-          default: ["es:min-h-10", "es:px-3"],
-          large: ["es:min-h-12", "es:px-4"]
-        },
         disabled: {
           false: "es:selection:bg-surface-100 es:selection:text-accent-800",
           true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
@@ -252,7 +259,7 @@ const AsyncMultiSelect = (props) => {
     {
       selectionMode: "multiple",
       isDisabled: disabled,
-      value: currentValueKeys,
+      value: currentValueKeys ?? [],
       onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
@@ -274,7 +281,7 @@ const AsyncMultiSelect = (props) => {
                 className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
                     /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:select-none es:pointer-events-none", children: ({ isPlaceholder, selectedItems }) => {
                       const [selectedItem] = selectedItems;
                       if (!currentValueKeys?.length || isPlaceholder) {
@@ -347,14 +354,14 @@ const AsyncMultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip",
-                      hidden: noReorder || disabled || value?.length < 2,
+                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
+                      hidden: noReorder || disabled || (value ?? [])?.length < 2,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-lg es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
-                            items: value,
+                            items: value ?? [],
                             onChange: (value2) => {
                               handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
                             },
@@ -376,7 +383,7 @@ const AsyncMultiSelect = (props) => {
                                   iconClassName: "es:pointer-events-none es:select-none",
                                   labelClassName: "es:line-clamp-1",
                                   subtitleClassName: "es:line-clamp-1",
-                                  className: clsx("es:min-h-8 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
+                                  className: clsx("es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
                                 }
                               );
                             }
@@ -447,7 +454,7 @@ const AsyncMultiSelect = (props) => {
                                 "aria-label": __("Clear", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
                                   "es:peer-placeholder-shown:opacity-0"
                                 ),
                                 children: icons.clearAlt
@@ -461,7 +468,7 @@ const AsyncMultiSelect = (props) => {
                         $eed445e0843c11d0$export$41f133550aa26f48,
                         {
                           className: clsx("es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl", list?.isLoading && "es:hidden"),
-                          items: list.items,
+                          items: list?.items ?? [],
                           selectedKeys: list.selectedKeys,
                           selectionMode: "multiple",
                           selectionBehavior: "toggle",

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

@@ -148,6 +148,19 @@ const AsyncSelect = (props) => {
   if (hidden) {
     return null;
   }
+  const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+    variants: {
+      size: {
+        small: ["es:min-h-8", "es:px-2.5"],
+        medium: ["es:min-h-9", "es:px-3"],
+        default: ["es:min-h-10", "es:px-3"],
+        large: ["es:min-h-12", "es:px-4"]
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
   const selectClass = cva(
     [
       "es:relative",
@@ -167,12 +180,6 @@ const AsyncSelect = (props) => {
     ],
     {
       variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5"],
-          medium: ["es:min-h-9", "es:px-3"],
-          default: ["es:min-h-10", "es:px-3"],
-          large: ["es:min-h-12", "es:px-4"]
-        },
         disabled: {
           false: "es:selection:bg-surface-100 es:selection:text-accent-800",
           true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
@@ -258,7 +265,7 @@ const AsyncSelect = (props) => {
                 className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
                     /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItems }) => {
                       const [selectedItem] = selectedItems;
                       if (!isPlaceholder && selectedItem && customValueDisplay) {
@@ -369,7 +376,7 @@ const AsyncSelect = (props) => {
                                 "aria-label": __("Clear", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
                                   "es:peer-placeholder-shown:opacity-0"
                                 ),
                                 children: icons.clearAlt

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

@@ -139,6 +139,19 @@ const MultiSelect = (props) => {
   if (hidden) {
     return null;
   }
+  const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+    variants: {
+      size: {
+        small: ["es:min-h-8", "es:px-2.5"],
+        medium: ["es:min-h-9", "es:px-3"],
+        default: ["es:min-h-10", "es:px-3"],
+        large: ["es:min-h-12", "es:px-4"]
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
   const selectClass = cva(
     [
       "es:relative",
@@ -158,12 +171,6 @@ const MultiSelect = (props) => {
     ],
     {
       variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5"],
-          medium: ["es:min-h-9", "es:px-3"],
-          default: ["es:min-h-10", "es:px-3"],
-          large: ["es:min-h-12", "es:px-4"]
-        },
         disabled: {
           false: "es:selection:bg-surface-100 es:selection:text-accent-800",
           true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
@@ -229,7 +236,7 @@ const MultiSelect = (props) => {
                 className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
                     /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:select-none es:pointer-events-none", children: ({ isPlaceholder, selectedItems }) => {
                       const [selectedItem] = selectedItems;
                       if (!currentValueKeys?.length || isPlaceholder) {
@@ -301,14 +308,14 @@ const MultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip",
+                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
                       hidden: noReorder || disabled || currentValue?.length < 2,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-lg es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
-                            items: simpleValue ? value.map((item) => options.find((option) => option.value === item)) : value,
+                            items: simpleValue ? value?.map((item) => options.find((option) => option.value === item)) ?? [] : value ?? [],
                             onChange: (value2) => {
                               handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
                             },
@@ -326,7 +333,7 @@ const MultiSelect = (props) => {
                                   iconClassName: "es:pointer-events-none es:select-none",
                                   labelClassName: "es:line-clamp-1",
                                   subtitleClassName: "es:line-clamp-1",
-                                  className: clsx("es:min-h-8 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
+                                  className: clsx("es:min-h-9 es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
                                 }
                               );
                             }
@@ -395,7 +402,7 @@ const MultiSelect = (props) => {
                               "aria-label": __("Clear", "eightshift-ui-components"),
                               className: clsx(
                                 "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
                                 "es:peer-placeholder-shown:opacity-0"
                               ),
                               children: icons.clearAlt

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

@@ -98,6 +98,19 @@ const Select = (props) => {
   if (hidden) {
     return null;
   }
+  const buttonClass = cva("es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", {
+    variants: {
+      size: {
+        small: ["es:min-h-8", "es:px-2.5"],
+        medium: ["es:min-h-9", "es:px-3"],
+        default: ["es:min-h-10", "es:px-3"],
+        large: ["es:min-h-12", "es:px-4"]
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  });
   const selectClass = cva(
     [
       "es:relative",
@@ -117,12 +130,6 @@ const Select = (props) => {
     ],
     {
       variants: {
-        size: {
-          small: ["es:min-h-8", "es:px-2.5"],
-          medium: ["es:min-h-9", "es:px-3"],
-          default: ["es:min-h-10", "es:px-3"],
-          large: ["es:min-h-12", "es:px-4"]
-        },
         disabled: {
           false: "es:selection:bg-surface-100 es:selection:text-accent-800",
           true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
@@ -210,8 +217,8 @@ const Select = (props) => {
                 className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
-                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItems }) => {
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:pointer-events-none", children: ({ isPlaceholder, selectedItems }) => {
                       const [selectedItem] = selectedItems;
                       if (!isPlaceholder && currentValue && customValueDisplay) {
                         return customValueDisplay(selectedItem);
@@ -316,7 +323,7 @@ const Select = (props) => {
                               "aria-label": __("Clear", "eightshift-ui-components"),
                               className: clsx(
                                 "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
-                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
                                 "es:peer-placeholder-shown:opacity-0"
                               ),
                               children: icons.clearAlt

package/dist/components/slider/column-config-slider.js

@@ -7,7 +7,7 @@ import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DkQpcQgI.js";
 /**
  * A two-thumb slider for selecting a range of columns.
  *

package/dist/components/slider/slider.js

@@ -6,7 +6,7 @@ import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
 import { generateMarkers, generateGridTemplate } from "./utils.js";
 import { HStack } from "../layout/hstack.js";
-import { A as AnimatePresence, m as motion } from "../../proxy-0B6wWuDe.js";
+import { A as AnimatePresence, m as motion } from "../../proxy-DkQpcQgI.js";
 /**
  * A single/multi-thumb slider component.
  *

package/dist/components/smart-image/smart-image.js

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useRef, useEffect, cloneElement } from "react";
@@ -167,7 +167,33 @@ const SmartImage = (props) => {
   if (error && renderError) {
     return renderError(error);
   } else if (error) {
-    return /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2 es:motion-preset-fade", errorClassName), children: /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }) });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          typeof children !== "function" && "es:flex es:flex-col es:gap-2 es:items-center-safe es:justify-center-safe es:p-2",
+          "es:motion-preset-fade",
+          errorClassName
+        ),
+        children: [
+          typeof children !== "function" && /* @__PURE__ */ jsx(DecorativeTooltip, { text: __("Error loading image", "eightshift-ui-components"), children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" }) }),
+          typeof children === "function" ? children({
+            image: cloneElement(imageElement, { crossOrigin: null }),
+            hasAnalysed: true,
+            isTransparent: false,
+            hasError: true,
+            errorBadge: /* @__PURE__ */ jsx(
+              DecorativeTooltip,
+              {
+                wrapperClassName: "es:size-8 es:-translate-y-4 es:m-auto",
+                text: __("Error loading image", "eightshift-ui-components"),
+                children: cloneElement(icons.imageError, { className: "es:text-secondary-500 es:size-8" })
+              }
+            )
+          }) : cloneElement(imageElement, { crossOrigin: null })
+        ]
+      }
+    );
   }
   if (!children) {
     return imageElement;

package/dist/components/tabs/tabs.js

@@ -460,6 +460,9 @@ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /* @__PURE__ */ $f39a9eba43920
  * @param {string} [props.className] - Classes to pass to the tabs container.
  * @param {TabsType} [props.type='underline'] - Design of the tabs.
  * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {string} [props.defaultSelectedKey] - **(uncontrolled mode)** The initial selected tab ID.
+ * @param {string} [props.selectedKey] - **(controlled mode)** The selected tab ID.
+ * @param {Function} [props.onSelectionChange] - Handler that is called when the selection changes. `(key: string) => void`.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Tabs component.
@@ -487,6 +490,7 @@ const Tabs2 = (props) => {
   let tabPanelCounter = 1;
   let tabCounter = 1;
   const preparedChildren = Array.isArray(children) ? children : [children];
+  let realTabIds = preparedChildren?.[0]?.props?.children?.map((tab, i) => tab?.props?.id ?? `tab-${baseId}-${i + 1}`);
   const childrenWithIds = preparedChildren.reduce((acc, child, index) => {
     if (child.type.displayName === "TabList") {
       const childItems = Array.isArray(child?.props?.children) ? child?.props?.children : [child?.props?.children].filter(Boolean);
@@ -504,7 +508,7 @@ const Tabs2 = (props) => {
           },
           childItems?.map(
             (innerChild, i) => cloneElement(innerChild, {
-              id: `tab-${baseId}-${i + 1}`,
+              id: innerChild?.props?.id ?? realTabIds?.[i] ?? `tab-${baseId}-${i + 1}`,
               key: i,
               isParentVertical: vertical,
               type,
@@ -518,7 +522,7 @@ const Tabs2 = (props) => {
       return [
         ...acc,
         cloneElement(child, {
-          id: `tab-${baseId}-${tabPanelCounter++}`,
+          id: realTabIds?.[tabPanelCounter++ - 1] ?? `tab-${baseId}-${tabPanelCounter++}`,
           key: index,
           className: child.props.className,
           flat,
@@ -678,6 +682,7 @@ TabList2.displayName = "TabList";
  * @param {boolean} [props.invisible] - If `true`, the tab is disabled and not rendered, but is not unmounted from the DOM.
  * @param {string} [props.label] - Tab label. **Note**: overrides inner items!
  * @param {string} [props.subtitle] - Tab subtitle. **Note**: overrides inner items!
+ * @param {string} [props.id] - The tab unique identifier.
  *
  * @returns {JSX.Element} The Tab component.
  *
@@ -691,7 +696,7 @@ const Tab = (props) => {
     [
       "es:group es:relative es:shrink-0",
       "es:flex es:items-center es:gap-1.5",
-      "es:select-none es:not-disabled:cursor-pointer",
+      "es:select-none",
       "es:transition-plus es:text-center es:text-12 es:leading-[1.15] es:text-box-trim",
       "es:any-focus:outline-hidden",
       "es:contrast-more:inset-ring es:contrast-more:inset-ring-accent-500/0 es:contrast-more:focus-visible:inset-ring-accent-500",

package/dist/components/toggle/switch.js

@@ -125,7 +125,7 @@ const Switch2 = (props) => {
           default: "es:h-6 es:w-10 es:p-1"
         },
         disabled: {
-          false: [!flat && "es:shadow-xs es:shadow-black/5", "es:cursor-pointer"]
+          false: [!flat && "es:shadow-xs es:shadow-black/5"]
         }
       },
       compoundVariants: [

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

@@ -186,7 +186,6 @@ const ToggleButton2 = (props) => {
       "es:text-box-trim",
       "es:leading-none",
       "es:icon:size-5",
-      !disabled && "es:cursor-pointer",
       icon && children ? "es:justify-start" : "es:justify-center-safe",
       className
     ],

package/dist/icons/icons.js

@@ -3402,8 +3402,10 @@ const icons = {
     /* @__PURE__ */ jsx("rect", { x: "1", y: "7", width: "7", height: "12", rx: "1.5", fill: "currentColor" })
   ] }),
   reorder: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: [
-    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 5.5h15m-15 3h15m-15 3h15m-15 3h15", fill: "none" }),
-    /* @__PURE__ */ jsx("path", { d: "M12.148 3H7.852a.5.5 0 0 1-.326-.88L9.675.28a.5.5 0 0 1 .65 0l2.149 1.841a.5.5 0 0 1-.326.88Zm0 14H7.852a.5.5 0 0 0-.326.88l2.149 1.841a.5.5 0 0 0 .65 0l2.149-1.841a.5.5 0 0 0-.326-.88Z", fill: "currentColor" })
+    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 5.5h15", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M17.5 8a.5.5 0 0 1 0 1h-15a.5.5 0 0 1 0-1h15Zm0 3a.5.5 0 0 1 0 1h-15a.5.5 0 0 1 0-1h15Z", fill: "currentColor" }),
+    /* @__PURE__ */ jsx("path", { stroke: "currentColor", strokeLinecap: "round", d: "M2.5 14.5h15", fill: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M12.5 3h-5a.5.5 0 0 1-.3-.9L9.7.225a.5.5 0 0 1 .6 0L12.8 2.1a.5.5 0 0 1-.3.9Zm0 14h-5a.5.5 0 0 0-.3.9l2.5 1.875a.5.5 0 0 0 .6 0l2.5-1.875a.5.5 0 0 0-.3-.9Z", fill: "currentColor" })
   ] }),
   loaderAlt: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", width: "20", height: "20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M10 19v-2m-9-7h2m13.367 6.367-1.414-1.414m-11.32 1.414 1.414-1.414M10 3V1m7 9h2M5.047 5.047 3.633 3.633m11.32 1.414 1.414-1.414M10 17v-1.555M3 10h1.555m10.396 4.951-1.1-1.1m-8.803 1.1 1.1-1.1M10 4.556V3m5.444 7H17M6.147 6.147l-1.1-1.1m8.806 1.1 1.1-1.1", stroke: "currentColor", strokeLinecap: "round", fill: "none" }) })
 };

package/dist/{proxy-0B6wWuDe.js → proxy-DkQpcQgI.js}

@@ -6184,6 +6184,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.treeScale = { x: 1, y: 1 };
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.hasTreeAnimated = false;
+      this.layoutVersion = 0;
       this.updateScheduled = false;
       this.scheduleUpdate = () => this.update();
       this.projectionUpdateScheduled = false;
@@ -6201,6 +6202,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.nodes.forEach(cleanDirtyNodes);
       };
       this.resolvedRelativeTargetAt = 0;
+      this.linkedParentVersion = 0;
       this.hasProjected = false;
       this.isVisible = true;
       this.animationProgress = 0;
@@ -6456,6 +6458,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       const prevLayout = this.layout;
       this.layout = this.measure(false);
+      this.layoutVersion++;
       this.layoutCorrected = createBox();
       this.isLayoutDirty = false;
       this.projectionDelta = void 0;
@@ -6623,17 +6626,15 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (!this.layout || !(layout2 || layoutId))
         return;
       this.resolvedRelativeTargetAt = frameData.timestamp;
+      const relativeParent = this.getClosestProjectingParent();
+      if (relativeParent && this.linkedParentVersion !== relativeParent.layoutVersion && !relativeParent.options.layoutRoot) {
+        this.removeRelativeTarget();
+      }
       if (!this.targetDelta && !this.relativeTarget) {
-        const relativeParent = this.getClosestProjectingParent();
-        if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+        if (relativeParent && relativeParent.layout) {
+          this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
         } else {
-          this.relativeParent = this.relativeTarget = void 0;
+          this.removeRelativeTarget();
         }
       }
       if (!this.relativeTarget && !this.targetDelta)
@@ -6657,14 +6658,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       if (this.attemptToResolveRelativeTarget) {
         this.attemptToResolveRelativeTarget = false;
-        const relativeParent = this.getClosestProjectingParent();
         if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+          this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
         } else {
           this.relativeParent = this.relativeTarget = void 0;
         }
@@ -6683,6 +6678,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     isProjecting() {
       return Boolean((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
     }
+    createRelativeTarget(relativeParent, layout2, parentLayout) {
+      this.relativeParent = relativeParent;
+      this.linkedParentVersion = relativeParent.layoutVersion;
+      this.forceRelativeParentToResolveTarget();
+      this.relativeTarget = createBox();
+      this.relativeTargetOrigin = createBox();
+      calcRelativePosition(this.relativeTargetOrigin, layout2, parentLayout);
+      copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+    }
+    removeRelativeTarget() {
+      this.relativeParent = this.relativeTarget = void 0;
+    }
     calcProjection() {
       const lead = this.getLead();
       const isShared = Boolean(this.resumingFrom) || this !== lead;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.4",
+	"version": "6.0.6",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -62,14 +62,14 @@
 		"@react-stately/collections": "^3.12.8",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
 		"@tailwindcss/vite": "^4.1.17",
-		"@thi.ng/color": "^5.8.3",
-		"@thi.ng/pixel": "^7.5.17",
-		"@thi.ng/pixel-analysis": "^2.0.18",
-		"@thi.ng/pixel-dominant-colors": "^2.0.22",
+		"@thi.ng/color": "^5.8.4",
+		"@thi.ng/pixel": "^7.5.18",
+		"@thi.ng/pixel-analysis": "^2.0.19",
+		"@thi.ng/pixel-dominant-colors": "^2.0.23",
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^4.2.2",
-		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/i18n": "^6.9.0",
 		"autoprefixer": "^10.4.22",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -88,7 +88,7 @@
 		"just-throttle": "^4.2.0",
 		"lightningcss": "^1.30.2",
 		"postcss": "^8.5.6",
-		"prettier": "^3.6.2",
+		"prettier": "^3.7.3",
 		"prettier-plugin-tailwindcss": "^0.7.1",
 		"react": "^18.3.1",
 		"react-aria": "^3.44.0",
@@ -101,12 +101,12 @@
 		"tailwindcss": "^4.1.17",
 		"tailwindcss-motion": "^1.1.1",
 		"tailwindcss-react-aria-components": "^2.0.1",
-		"vite": "^7.2.4",
+		"vite": "^7.2.6",
 		"vite-plugin-lib-inject-css": "^2.2.2"
 	},
 	"dependencies": {
 		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@fontsource-variable/roboto-flex": "^5.2.8",
-		"motion": "^12.23.24"
+		"motion": "^12.23.25"
 	}
 }