@eightshift/ui-components 6.0.2 → 6.0.4

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

@@ -13,7 +13,7 @@ import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQ
 import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D2fUHql3.js";
 import { ButtonGroup, Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /* @__PURE__ */ createContext(null);
@@ -277,10 +277,10 @@ const NumberPicker = ({
               /* @__PURE__ */ jsx(
                 $3985021b0ad6602f$export$f5b8910cec6cf069,
                 {
-                  className: 'es:tracking-wide es:font-variation-["wdth"_84,"YTLC"_520,"wght"_325,"slnt"_0,"YTFI"_788] es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8] es:any-focus:outline-hidden! es:p-px es:border-none! es:shadow-none! es:bg-transparent',
+                  className: 'es:font-variation-["wdth"_84,"YTLC"_520,"wght"_325,"slnt"_0,"YTFI"_788] es:placeholder-shown:font-variation-["wdth"_100,"YTLC"_500,"wght"_250,"slnt"_-8] es:any-focus:outline-hidden! es:p-px es:border-none! es:shadow-none! es:bg-transparent es:text-13!',
                   placeholder,
                   style: {
-                    width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "0.75ch + " : "0.5ch + "}${(max ?? 1e3)?.toString()?.length} * 1ch)`
+                    width: fixedWidth ? `calc(${fixedWidth}ch + 2px)` : `calc(${min < 0 ? "1ch + " : "0.75ch + "}${Math.max((max ?? 1e3)?.toString()?.length, (placeholder ?? "")?.length)} * 1ch)`
                   }
                 }
               ),

package/dist/components/options-panel/options-panel.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { $ as $5cb03073d3f54797$export$a8a3e93435678ff9 } from "../../Heading-BmRX4BRL.js";
 import { cloneElement } from "react";

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { icons } from "../../icons/icons.js";
 import "react";
 import "../../react-jsx-parser.min-B_hvYYa1.js";

package/dist/components/popover/popover.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, g as $de32f1b87079253c$export$3ddf2d174ce01153, h as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-D8bjn-nh.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { Button } from "../button/button.js";
 /**

package/dist/components/radio/radio.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { a as $b6c3ddc6086f204d$export$d7b12c4107be0d61, $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25 } from "../../RadioGroup-BVFvITWO.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -118,12 +118,12 @@ const RadioButton = (props) => {
     compoundVariants: [
       {
         design: ["segmented", "segmentedHorizontal"],
-        class: ["es:px-3 es:py-2 es:w-fill es:inset-ring", "es:transition-plus es:duration-300 es:ease-spring-snappy", !flat && "es:shadow-xs es:shadow-black/5"]
+        class: ["es:px-3 es:py-2 es:w-fill es:inset-ring es:min-h-13", "es:transition-plus es:duration-300", !flat && "es:shadow-xs es:shadow-black/5"]
       },
       {
         checked: false,
         design: ["segmented", "segmentedHorizontal"],
-        class: "es:bg-secondary-50 es:inset-ring-secondary-200/50 es:rounded-md es:hover:rounded-xl"
+        class: ["es:bg-white es:bg-linear-to-b es:from-secondary-50/75 es:to-secondary-100/50 es:from-25% es:inset-ring-secondary-200/50", "es:rounded-md es:hover:rounded-18"]
       },
       {
         checked: true,
@@ -131,8 +131,8 @@ const RadioButton = (props) => {
         class: "es:bg-surface-100 es:text-accent-900 es:inset-ring-accent-600/10 es:rounded-3xl"
       },
       //
-      { design: "segmented", checked: false, class: "es:first:rounded-t-xl es:last:rounded-b-xl es:before-current:rounded-b-xl es:after-current:rounded-t-xl" },
-      { design: "segmentedHorizontal", checked: false, class: "es:first:rounded-l-xl es:last:rounded-r-xl es:before-current:rounded-l-xl es:after-current:rounded-r-xl" }
+      { design: "segmented", checked: false, class: "es:first:rounded-t-2xl es:last:rounded-b-2xl es:before-current:rounded-b-2xl es:after-current:rounded-t-2xl" },
+      { design: "segmentedHorizontal", checked: false, class: "es:first:rounded-l-2xl es:last:rounded-r-2xl es:before-current:rounded-r-2xl es:after-current:rounded-l-2xl" }
     ],
     defaultVariants: {
       design: "default",

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "../button/button.js";
 import { Menu, MenuSeparator, MenuItem } from "../menu/menu.js";
 import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useContext } from "react";
 import { Expandable } from "../expandable/expandable.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";

package/dist/components/repeater/repeater.js

@@ -6,7 +6,7 @@ import { icons } from "../../icons/icons.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RepeaterContext } from "./repeater-context.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { L as List, a as arrayRemove, b as arrayMove } from "../../List-BGHOoFf0.js";
 import { Menu, MenuItem, MenuSeparator } from "../menu/menu.js";
 /**
@@ -215,7 +215,7 @@ const Repeater = (props) => {
                         allOpen,
                         setAllOpen,
                         setOpenItems,
-                        isItemOpen: openItems[item.id] ?? allOpen,
+                        isItemOpen: openItems?.[item?.id] ?? allOpen,
                         noDuplicateButton
                       },
                       children: children({

package/dist/components/responsive/mini-responsive.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cloneElement } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";

package/dist/components/responsive/responsive-legacy.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";

package/dist/components/responsive/responsive.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { DecorativeTooltip } from "../tooltip/tooltip.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BreakpointPreview } from "../breakpoint-preview/breakpoint-preview.js";

package/dist/components/rich-label/rich-label.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * Component that displays a label, with an optional icon and subtitle.
  *

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

@@ -8,18 +8,19 @@ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNk
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DOxXagm0.js";
 import { useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
 import { Spinner } from "../../icons/spinner.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { unescapeHTML } from "../../utilities/text-helpers.js";
+import { randomId } from "../../utilities/hash.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { DraggableList } from "../draggable-list/draggable-list.js";
 import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 /**
  * Async multi-select menu.
@@ -432,9 +433,9 @@ const AsyncMultiSelect = (props) => {
                               {
                                 placeholder: __("Search...", "eightshift-ui-components"),
                                 className: clsx(
-                                  "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
-                                  "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                  "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                  "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                   "es:text-accent-950 es:placeholder:text-accent-700/50",
                                   "es:transition"
                                 )
@@ -487,7 +488,7 @@ const AsyncMultiSelect = (props) => {
                             return /* @__PURE__ */ jsxs(
                               OptionItemBase,
                               {
-                                id: item?.value,
+                                id: item?.value ?? randomId(8),
                                 className: item?.className,
                                 selectIndicator: true,
                                 children: [

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

@@ -7,15 +7,16 @@ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNk
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DOxXagm0.js";
 import { useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
 import { Spinner } from "../../icons/spinner.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { unescapeHTML } from "../../utilities/text-helpers.js";
-import { c as cva } from "../../index-BHpUy2Ix.js";
+import { randomId } from "../../utilities/hash.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 /**
  * Select menu with async loading.
@@ -354,9 +355,9 @@ const AsyncSelect = (props) => {
                               {
                                 placeholder: __("Search...", "eightshift-ui-components"),
                                 className: clsx(
-                                  "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
-                                  "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                  "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                  "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                   "es:text-accent-950 es:placeholder:text-accent-700/50",
                                   "es:transition"
                                 )
@@ -407,7 +408,7 @@ const AsyncSelect = (props) => {
                             return /* @__PURE__ */ jsxs(
                               OptionItemBase,
                               {
-                                id: item?.value,
+                                id: item?.value ?? randomId(8),
                                 className: item?.className,
                                 selectIndicator: true,
                                 children: [

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

@@ -8,16 +8,17 @@ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNk
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
-import { g as getValue, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { g as getValue, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DOxXagm0.js";
 import { useRef, cloneElement, isValidElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { DraggableList } from "../draggable-list/draggable-list.js";
 import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { randomId } from "../../utilities/hash.js";
 import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-bhxeEDg8.js";
 /**
  * Multi-select menu.
@@ -307,7 +308,7 @@ const MultiSelect = (props) => {
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
-                            items: value,
+                            items: simpleValue ? value.map((item) => options.find((option) => option.value === item)) : value,
                             onChange: (value2) => {
                               handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
                             },
@@ -380,9 +381,9 @@ const MultiSelect = (props) => {
                             {
                               placeholder: __("Search...", "eightshift-ui-components"),
                               className: clsx(
-                                "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
-                                "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                 "es:text-accent-950 es:placeholder:text-accent-700/50",
                                 "es:transition"
                               )
@@ -427,7 +428,7 @@ const MultiSelect = (props) => {
                           return /* @__PURE__ */ jsxs(
                             OptionItemBase,
                             {
-                              id: item.value,
+                              id: item?.value ?? randomId(8),
                               className: item?.className,
                               selectIndicator: true,
                               children: [
@@ -472,7 +473,7 @@ const MultiSelect = (props) => {
                         return /* @__PURE__ */ jsxs(
                           OptionItemBase,
                           {
-                            id: item.value,
+                            id: item?.value ?? randomId(8),
                             className: item?.className,
                             selectIndicator: true,
                             children: [

package/dist/components/select/shared.js

@@ -2,12 +2,12 @@ import "react/jsx-runtime";
 import "../../default-i18n-CnQeC5Pl.js";
 import "../../Button-BXjXzdW_.js";
 import "../../ListBox-Dd37zMvs.js";
-import { O, S, g, m } from "../../shared-DwjRce5e.js";
+import { O, S, g, m } from "../../shared-DOxXagm0.js";
 import "../../icons/icons.js";
 import "react";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
-import "../animated-visibility/animated-visibility.js";
 import "../../clsx-DgYk2OaC.js";
+import "../animated-visibility/animated-visibility.js";
 export {
   O as OptionItemBase,
   S as SelectClearButton,

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

@@ -7,13 +7,14 @@ import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNk
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
 import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DOxXagm0.js";
 import { useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
+import { randomId } from "../../utilities/hash.js";
 import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-bhxeEDg8.js";
 /**
  * Select menu.
@@ -301,9 +302,9 @@ const Select = (props) => {
                             {
                               placeholder: __("Search...", "eightshift-ui-components"),
                               className: clsx(
-                                "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
-                                "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                 "es:text-accent-950 es:placeholder:text-accent-700/50",
                                 "es:transition"
                               )
@@ -348,7 +349,7 @@ const Select = (props) => {
                           return /* @__PURE__ */ jsxs(
                             OptionItemBase,
                             {
-                              id: item.value,
+                              id: item?.value ?? randomId(8),
                               className: item?.className,
                               selectIndicator: true,
                               children: [

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

@@ -141,8 +141,8 @@ const ColumnConfigSlider = (props) => {
                         "es:transition es:duration-300",
                         !flat && !disabled && "es:shadow-xs es:shadow-black/5",
                         "es:mx-1.25",
-                        value[0] === 1 && "es:ml-4.25",
-                        value[1] === columns && "es:mr-4.25",
+                        value[0] === 1 && "es:ml-1.75",
+                        value[1] === columns && "es:mr-1.75",
                         !disabled && [
                           "es:bg-accent-500 es:bg-linear-to-b es:from-accent-100/15 es:to-accent-100/0 es:from-25%",
                           "es:inset-ring es:inset-ring-accent-700/10",
@@ -165,8 +165,8 @@ const ColumnConfigSlider = (props) => {
                           "es:transition es:duration-300 es:ease-spring-smooth",
                           marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-900" : "es:text-surface-400",
                           disabled && "es:opacity-0",
-                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-0.25",
-                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-0.25",
+                          !disableOffset && index === 0 && value[0] === 2 && "es:-translate-x-px",
+                          !disableWidth && index === columns - 1 && value[1] === columns - 1 && "es:translate-x-px",
                           !disableOffset && index === 0 && value[0] === 1 && "es:opacity-0 es:scale-50",
                           !disableWidth && index === columns - 1 && value[1] === columns && "es:opacity-0 es:scale-50"
                         ),
@@ -221,7 +221,10 @@ const ColumnConfigSlider = (props) => {
                           !disabled && "es:hover:not-dragging:cursor-grab",
                           i === 0 && disableOffset && "es:hidden",
                           i === 1 && disableWidth && "es:hidden",
-                          "es:justify-self-center",
+                          i === 0 && state.values[0] === 1 && "es:justify-self-start",
+                          i === 0 && state.values[0] > 1 && "es:justify-self-center",
+                          i === 1 && state.values[1] < columns && "es:justify-self-center",
+                          i === 1 && state.values[1] === columns && "es:justify-self-end",
                           !flat && !disabled && "es:shadow-xs es:shadow-black/5"
                         ),
                         style: {

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { useState, useRef, useEffect, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
@@ -8,7 +8,7 @@ import { DecorativeTooltip } from "../tooltip/tooltip.js";
 import { useImageAnalysisWorker } from "../../utilities/web-workers.js";
 import workerInline from "./worker-inline.js";
 import { cyrb64Hash } from "../../utilities/hash.js";
-import { a as analyzeImage } from "../../general-lYMgCPqJ.js";
+import { b as analyzeImage } from "../../general-ChNQK6O9.js";
 /**
  * @typedef {Object} CustomImageProps
  * @property {JSX.Element} [props.renderError] - Component to render if image analysis fails. `(error) => JSX:Element`.

package/dist/components/spacer/spacer.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A simple spacer/divider component, with optional text or icon.

package/dist/components/tabs/tabs.js

@@ -16,7 +16,7 @@ import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRi
 import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BBTu4shO.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Notice } from "../notice/notice.js";
 import { RichLabel } from "../rich-label/rich-label.js";

package/dist/components/toggle/toggle.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { Switch } from "./switch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A toggle switch with a label and optional icon and subtitle.
  *

package/dist/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ import { w as $6179b936705e76d3$export$ae780daf29e6d456, $ as $f645667febf57a63$
 import $dbSRa$react__default, { useContext, useState, useMemo, useRef, useEffect, forwardRef, createContext } from "react";
 import { a as $96b38030c423d352$export$9fc1347d4195ccb3 } from "../../PortalProvider-CHPnqDSH.js";
 import { $ as $dbSRa$reactdom } from "../../index-oFgxU4zs.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 const $f57aed4a881a3485$var$Context = /* @__PURE__ */ $dbSRa$react__default.createContext(null);
 function $f57aed4a881a3485$export$178405afcd8c5eb(props) {
   let { children } = props;

package/dist/{general-lYMgCPqJ.js → general-ChNQK6O9.js}

@@ -4367,10 +4367,10 @@ const analyzeImageData = ({ buffer, imageData, width, height, settings, skipTran
 };
 export {
   FLOAT_RGBA as F,
-  analyzeImage as a,
-  analyzeImageAsync as b,
-  checkTransparency as c,
-  analyzeImageData as d,
+  analyzeImageData as a,
+  analyzeImage as b,
+  analyzeImageAsync as c,
+  checkTransparency as d,
   floatBufferFromCanvas as f,
   getFileExtension as g,
   isColorDark as i,

package/dist/icons/spinner.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { c as clsx } from "../lite-DVmmD_-j.js";
+import { c as clsx } from "../clsx-DgYk2OaC.js";
 /**
  * A simple loading indicator.
  *

package/dist/index.js

@@ -5,7 +5,7 @@ import { Button, ButtonGroup } from "./components/button/button.js";
 import { Checkbox } from "./components/checkbox/checkbox.js";
 import { ComponentToggle } from "./components/component-toggle/component-toggle.js";
 import { ContainerPanel } from "./components/container-panel/container-panel.js";
-import { C } from "./color-swatch-CFIuSPcO.js";
+import { C } from "./color-swatch-BEBLRxTy.js";
 import { ColorPicker } from "./components/color-pickers/color-picker.js";
 import { ColumnConfigSlider, ColumnConfigSliderOutput } from "./components/slider/column-config-slider.js";
 import { Container, ContainerGroup } from "./components/base-control/container.js";

package/dist/utilities/general.js

@@ -1,10 +1,10 @@
 import "./hash.js";
-import { a, b, d, c, g, i } from "../general-lYMgCPqJ.js";
+import { b, c, a, d, g, i } from "../general-ChNQK6O9.js";
 export {
-  a as analyzeImage,
-  b as analyzeImageAsync,
-  d as analyzeImageData,
-  c as checkTransparency,
+  b as analyzeImage,
+  c as analyzeImageAsync,
+  a as analyzeImageData,
+  d as checkTransparency,
   g as getFileExtension,
   i as isColorDark
 };

package/dist/utilities/hash.js

@@ -24,7 +24,16 @@ const cyrb64Hash = (str, seed = 0) => {
   const [h2, h1] = cyrb64(str, seed);
   return h2.toString(36).padStart(7, "0") + h1.toString(36).padStart(7, "0");
 };
+const randomId = (length) => {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+};
 export {
   cyrb64Hash,
+  randomId,
   simpleHash
 };

package/dist/utilities/index.js

@@ -2,17 +2,22 @@ import { arrayMoveMultiple, fixIds } from "./array-helpers.js";
 import { camelCase, has, isEmpty, isEqual, isObject, isPlainObject, isString, kebabCase, lowerFirst, pascalCase, snakeCase, upperFirst } from "./es-dash.js";
 import { truncate, truncateEnd, truncateMiddle, unescapeHTML } from "./text-helpers.js";
 import { debounce, throttle } from "./debounce-throttle.js";
-import { a, b, d, c, g, i } from "../general-lYMgCPqJ.js";
-import { c as c2 } from "../lite-DVmmD_-j.js";
-import { cyrb64Hash, simpleHash } from "./hash.js";
+import { b, c, a, d, g, i } from "../general-ChNQK6O9.js";
+import { c as c2 } from "../clsx-DgYk2OaC.js";
+import { cyrb64Hash, randomId, simpleHash } from "./hash.js";
+function clsx() {
+  for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
+  return e;
+}
 export {
-  a as analyzeImage,
-  b as analyzeImageAsync,
-  d as analyzeImageData,
+  b as analyzeImage,
+  c as analyzeImageAsync,
+  a as analyzeImageData,
   arrayMoveMultiple,
   camelCase,
-  c as checkTransparency,
-  c2 as clsx,
+  d as checkTransparency,
+  clsx,
+  c2 as clsxFull,
   cyrb64Hash,
   debounce,
   fixIds,
@@ -27,6 +32,7 @@ export {
   kebabCase,
   lowerFirst,
   pascalCase,
+  randomId,
   simpleHash,
   snakeCase,
   throttle,

package/dist/workers/image-analysis.worker.js

@@ -1,4 +1,4 @@
-import { f as floatBufferFromCanvas, d as analyzeImageData, F as FLOAT_RGBA } from "../general-lYMgCPqJ.js";
+import { f as floatBufferFromCanvas, a as analyzeImageData, F as FLOAT_RGBA } from "../general-ChNQK6O9.js";
 self.onmessage = async (event) => {
   const { imageBitmap, settings } = event.data;
   try {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.0.2",
+	"version": "6.0.4",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -62,10 +62,10 @@
 		"@react-stately/collections": "^3.12.8",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
 		"@tailwindcss/vite": "^4.1.17",
-		"@thi.ng/color": "^5.8.2",
-		"@thi.ng/pixel": "^7.5.16",
-		"@thi.ng/pixel-analysis": "^2.0.17",
-		"@thi.ng/pixel-dominant-colors": "^2.0.21",
+		"@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",
 		"@types/react": "^18.3.27",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^4.2.2",
@@ -76,7 +76,7 @@
 		"css-gradient-parser": "^0.0.18",
 		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-jsdoc": "^61.4.0",
+		"eslint-plugin-jsdoc": "^61.4.1",
 		"eslint-plugin-prettier": "^5.5.4",
 		"glob": "^13.0.0",
 		"globals": "^16.5.0",

package/dist/lite-DVmmD_-j.js

@@ -1,7 +0,0 @@
-function clsx() {
-  for (var t, r = 0, e = "", n = arguments.length; r < n; r++) (t = arguments[r]) && "string" == typeof t && (e += (e && " ") + t);
-  return e;
-}
-export {
-  clsx as c
-};