@eightshift/ui-components 6.0.3 → 6.0.5

package/dist/components/matrix-align/matrix-align.js

@@ -2,11 +2,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { icons } from "../../icons/icons.js";
 import { upperFirst, camelCase } from "../../utilities/es-dash.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { $ as $b6c3ddc6086f204d$export$a98f0dcb43a68a25, a as $b6c3ddc6086f204d$export$d7b12c4107be0d61 } from "../../RadioGroup-BVFvITWO.js";
 import { RichLabel } from "../rich-label/rich-label.js";
-import { c as clsx } from "../../clsx-DgYk2OaC.js";
 /**
  * A component that can provide a 3x3 or a 2x2 grid of positions to pick from.
  * Replaces the default Gutenberg `AlignmentMatrixControl`/`BlockAlignmentMatrixControl`/`BlockAlignmentMatrixToolbar`.

package/dist/components/menu/menu.js

@@ -4,7 +4,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
 import { icons } from "../../icons/icons.js";
 import { Button } from "../button/button.js";
 import { Popover } from "../popover/popover.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { cloneElement } from "react";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 /**

package/dist/components/modal/modal.js

@@ -8,7 +8,7 @@ import $dbSRa$react__default, { useState, useEffect, forwardRef, useContext, cre
 import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../OverlayArrow-DokC40S3.js";
 import { Button } from "../button/button.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 { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-B_hvYYa1.js";
 import { HStack } from "../layout/hstack.js";

package/dist/components/notice/notice.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 { icons } from "../../icons/icons.js";
 /**
  * A simple notice component.

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,7 +277,7 @@ 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 ? "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";
@@ -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/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.
@@ -180,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",
@@ -199,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"
@@ -273,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) {
@@ -432,9 +440,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"
                                 )
@@ -446,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
@@ -487,7 +495,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.
@@ -147,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",
@@ -166,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"
@@ -257,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) {
@@ -354,9 +362,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"
                                 )
@@ -368,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
@@ -407,7 +415,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.
@@ -138,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",
@@ -157,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"
@@ -228,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) {
@@ -380,9 +388,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"
                               )
@@ -394,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
@@ -427,7 +435,7 @@ const MultiSelect = (props) => {
                           return /* @__PURE__ */ jsxs(
                             OptionItemBase,
                             {
-                              id: item.value,
+                              id: item?.value ?? randomId(8),
                               className: item?.className,
                               selectIndicator: true,
                               children: [
@@ -472,7 +480,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,