@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/select/styles.js

@@ -1,31 +1,31 @@
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 const controlStyles = {
-  base: "es-uic-border es-uic-border-gray-300 es-uic-rounded-md es-uic-bg-white es-uic-text-sm es-uic-transition es-uic-group es-uic-shadow-sm !es-uic-min-h-10",
-  focus: "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
+  base: "es:border es:border-gray-300 es:rounded-lg es:bg-white es:text-sm es:transition es:group es:shadow-xs es:min-h-10! es:inset-ring es:inset-ring-secondary-100",
+  focus: "es:ring-2 es:ring-accent-500/50 es:border-accent-500!"
 };
-const placeholderStyles = "es-uic-text-gray-400 es-uic-ml-0.5";
-const selectInputStyles = "focus:es-uic-outline-none [&_input]:!es-uic-shadow-none [&_input:focus]:!es-uic-shadow-none";
-const valueContainerStyles = "es-uic-gap-1 es-uic-ml-1 es-uic-my-1 !es-uic-overflow-visible";
-const singleValueStyles = "es-uic-ml-0.5";
+const placeholderStyles = "es:text-gray-400 es:ml-1";
+const selectInputStyles = "es:focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
+const valueContainerStyles = "es:gap-1 es:ml-1 es:my-1 es:overflow-visible!";
+const singleValueStyles = "es:ml-0.5 es:px-1";
 const multiValueStyles = clsx(
-  "es-uic-bg-gray-100 es-uic-rounded es-uic-p-1 es-uic-border es-uic-border-gray-100 hover:border-gray-300 es-uic-items-center es-uic-gap-1.5 es-uic-transition es-uic-overflow-visible es-uic-max-w-40",
-  "[:focus-visible_&]:es-uic-outline-none [:focus-visible_&]:es-uic-ring",
-  "[:focus-visible_&]:es-uic-ring-teal-500 [:focus-visible_&]:es-uic-ring-opacity-50"
+  "es:bg-gray-100 es:rounded-md es:py-1 es:px-1.5 es:border es:border-gray-100 hover:border-gray-300 es:items-center es:gap-1.5 es:transition es:overflow-visible es:max-w-40",
+  "es:in-focus-visible:outline-hidden es:in-focus-visible:ring",
+  "es:in-focus-visible:ring-accent-500/50"
 );
-const multiValueLabelStyles = "es-uic-select-none";
-const multiValueRemoveStyles = "hover:es-uic-bg-red-500/15 hover:es-uic-text-red-900 es-uic-text-gray-500 es-uic-rounded es-uic-p-0.5 [&>svg]:es-uic-size-3.5 [&>svg]:es-uic-stroke-[1.5] es-uic-transition";
-const clearIndicatorStyles = "es-uic-text-gray-500 es-uic-p-1 es-uic-rounded-md hover:bg-red-50 hover:text-red-800 es-uic-transition";
-const dropdownIndicatorStyles = "es-uic-text-gray-500 es-uic-px-1 group-hover:es-uic-text-black [&>svg]:es-uic-transition-transform [&>svg]:es-uic-duration-500 [&>svg]:es-uic-size-5.5";
-const menuStyles = "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-mt-1 es-uic-text-sm es-uic-overflow-x-hidden";
+const multiValueLabelStyles = "es:select-none";
+const multiValueRemoveStyles = "es:hover:bg-red-500/15 es:hover:text-red-900 es:text-gray-500 es:rounded es:p-0.5 es:icon:size-3.5 es:icon:stroke-[1.5] es:transition";
+const clearIndicatorStyles = "es:text-gray-500 es:p-1 es:rounded-md hover:bg-red-50 hover:text-red-800 es:transition";
+const dropdownIndicatorStyles = "es:text-gray-500 es:px-1 es:group-hover:text-black es:icon:transition-transform es:icon:duration-500 es:icon:size-5.5";
+const menuStyles = "es:rounded-lg es:border es:border-gray-200 es:bg-white es:shadow-lg es:mt-1 es:text-sm es:overflow-x-hidden es:min-w-48";
 const optionStyles = {
-  base: "es-uic-p-2 !es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-gray-800 es-uic-rounded [&>svg]:es-uic-size-5 [&>svg]:es-uic-text-gray-500 es-uic-transition es-uic-mx-1 first:es-uic-mt-1 last:es-uic-mb-1 !es-uic-w-auto es-uic-min-h-9",
-  focus: "es-uic-bg-gray-100 active:es-uic-bg-teal-700/15",
-  selected: "es-uic-bg-teal-600/15 es-uic-text-teal-950"
+  base: "es:p-2 es:flex! es:items-center es:gap-1.5 es:text-gray-800 es:rounded-md es:icon:size-5 es:icon:text-gray-500 es:transition es:mx-1 es:first:mt-1 es:last:mb-1 es:w-auto! es:min-h-9",
+  focus: "es:bg-gray-100 es:active:bg-accent-700/15",
+  selected: "es:bg-accent-600/15 es:text-accent-950"
 };
-const noOptionsMessageStyles = "es-uic-text-gray-400 es-uic-p-4";
-const groupHeadingStyles = "es-uic-ml-3 es-uic-mt-2 es-uic-text-gray-500 es-uic-empty:hidden";
-const groupStyles = "es-uic-border-b es-uic-border-b-gray-200 last:es-uic-border-b-0";
-const loadingMessageStyles = "es-uic-p-4";
+const noOptionsMessageStyles = "es:text-gray-400 es:p-4";
+const groupHeadingStyles = "es:ml-3 es:mt-3 es:mb-1 es:text-gray-500/80 es:empty:hidden";
+const groupStyles = "es:border-b es:border-b-gray-200 es:last:border-b-0";
+const loadingMessageStyles = "es:p-4";
 const eightshiftSelectClasses = {
   clearIndicator: () => clearIndicatorStyles,
   control: ({ isFocused }) => clsx(isFocused && controlStyles.focus, controlStyles.base),

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

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { _ as __ } from "../../../default-i18n-CM1-Xvzf.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BEIi9mB_.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-DVPU5XzU.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-DCmTv_Qw.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-D8G0GMsc.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BxZwDp9o.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-17uxPRe5.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-Cld9rkzJ.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-OQ5EIPvt.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-BnlZjJ3T.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-Se0m3ubj.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-Ca9uelsn.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-D9dFEh5A.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CIh-hX93.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-aOUPPvTO.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
 import { BaseControl } from "../../base-control/base-control.js";
@@ -14,7 +14,7 @@ import { useEffect, useRef, cloneElement, useContext } from "react";
 import { icons } from "../../../icons/icons.js";
 import "../../../react-jsx-parser.min-CVit0rZn.js";
 import { unescapeHTML } from "../../../utilities/text-helpers.js";
-import { c as clsx } from "../../../utils-BmaSD6gC.js";
+import { c as clsx } from "../../../utils-39D0mStj.js";
 /**
  * Select menu with async loading.
  *
@@ -170,11 +170,12 @@ const __ExperimentalAsyncSelect = (props) => {
               "div",
               {
                 className: clsx(
-                  "es-uic-relative es-uic-flex es-uic-max-w-80 es-uic-items-center es-uic-gap-1 es-uic-p-1 focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500/50",
-                  "es-uic-h-9 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-bg-white es-uic-text-sm es-uic-shadow-sm es-uic-transition",
-                  "focus:es-uic-outline-none",
-                  !inline && "es-uic-w-full",
-                  disabled && "es-uic-select-none"
+                  "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:focus:outline-hidden",
+                  !inline && "es:w-full",
+                  disabled && "es:select-none",
+                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
                 ),
                 ref,
                 children: [
@@ -182,12 +183,10 @@ const __ExperimentalAsyncSelect = (props) => {
                     $3985021b0ad6602f$export$f5b8910cec6cf069,
                     {
                       className: clsx(
-                        "es-uic-peer es-uic-h-6 es-uic-w-full es-uic-grow es-uic-rounded-sm es-uic-p-1 es-uic-text-sm es-uic-text-transparent es-uic-transition",
-                        "focus:es-uic-text-current focus:es-uic-outline-none",
-                        "focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500/50",
-                        "selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
-                        disabled && "es-uic-bg-transparent es-uic-text-gray-400 selection:es-uic-bg-transparent selection:es-uic-text-transparent",
-                        !((value == null ? void 0 : value.value) && list.filterText.length) && "es-uic-pr-6"
+                        "es:peer es:h-6 es:w-full es:grow es:rounded-sm es:p-1 es:pr-6 es:text-sm es:text-transparent es:transition",
+                        "es:focus:text-current es:any-focus:outline-hidden",
+                        "es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                        disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent"
                       ),
                       placeholder: placeholder ?? __("Select...", "eightshift-ui-components")
                     }
@@ -196,9 +195,9 @@ const __ExperimentalAsyncSelect = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es-uic-pointer-events-none es-uic-absolute es-uic-bottom-0 es-uic-left-2 es-uic-top-0 es-uic-my-auto es-uic-flex es-uic-select-none es-uic-items-center es-uic-overflow-hidden",
-                        "has-[svg]:es-uic-left-1 peer-data-[focused=true]:es-uic-invisible peer-disabled:es-uic-opacity-40",
-                        clearable ? "es-uic-right-16" : "es-uic-right-6"
+                        "es:pointer-events-none es:absolute es:bottom-0 es:left-2 es:top-0 es:my-auto es:flex es:select-none es:items-center es:overflow-hidden",
+                        "es:has-[svg]:left-1 es:peer-data-[focused=true]:invisible es:peer-disabled:opacity-40",
+                        clearable ? "es:right-16" : "es:right-6"
                       ),
                       children: [
                         customValueDisplay && customValueDisplay(value),
@@ -208,26 +207,17 @@ const __ExperimentalAsyncSelect = (props) => {
                             icon: getIcon(value),
                             label: value == null ? void 0 : value.label,
                             subtitle: value == null ? void 0 : value.subtitle,
-                            className: "[&_span]:es-uic-overflow-hidden [&_span]:es-uic-text-ellipsis [&_span]:es-uic-text-nowrap"
+                            className: "es:[&_span]:overflow-hidden es:[&_span]:text-ellipsis es:[&_span]:text-nowrap"
                           }
                         )
                       ]
                     }
                   ),
                   clearable && /* @__PURE__ */ jsx(ClearButton, { disabled }),
-                  /* @__PURE__ */ jsx(
-                    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                    {
-                      className: clsx(
-                        "es-uic-group es-uic-absolute es-uic-bottom-0 es-uic-right-0 es-uic-top-0 es-uic-my-auto es-uic-size-6",
-                        disabled ? "es-uic-text-gray-300" : "es-uic-text-gray-500"
-                      ),
-                      children: cloneElement(icons.dropdownCaretAlt, {
-                        className: "es-uic-w-4 group-aria-expanded:-es-uic-scale-y-100 es-uic-transition-transform es-uic-duration-200",
-                        "aria-hidden": true
-                      })
-                    }
-                  )
+                  /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: clsx("es:group es:absolute es:bottom-0 es:right-0 es:top-0 es:my-auto es:size-6", disabled ? "es:text-secondary-300" : "es:text-secondary-500"), children: cloneElement(icons.dropdownCaretAlt, {
+                    className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
+                    "aria-hidden": true
+                  }) })
                 ]
               }
             )
@@ -236,16 +226,16 @@ const __ExperimentalAsyncSelect = (props) => {
         /* @__PURE__ */ jsxs(
           $07b14b47974efb58$export$5b6b19405a83ff9d,
           {
-            className: clsx(
-              "es-uic-flex es-uic-w-80 es-uic-min-w-9 es-uic-max-w-80 es-uic-flex-col es-uic-overflow-x-hidden es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-text-sm es-uic-shadow-lg",
-              "focus:es-uic-outline-none",
-              "entering:es-uic-animate-in entering:es-uic-fade-in-0 entering:es-uic-slide-in-from-top-3 entering:es-uic-fill-mode-forwards",
-              "exiting:es-uic-animate-out exiting:es-uic-fade-out-0 exiting:es-uic-slide-out-to-top-2 exiting:es-uic-fill-mode-forwards"
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:flex es:w-80 es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
+              "es:focus:outline-hidden",
+              isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
+              isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
             ),
             placement: "bottom left",
             triggerRef: ref,
             children: [
-              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es-uic-space-y-0.5 es-uic-p-1 focus:es-uic-outline-none", children: (item) => {
+              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.5 es:p-1 es:focus:outline-hidden", children: (item) => {
                 return /* @__PURE__ */ jsxs(
                   OptionItemBase,
                   {
@@ -265,12 +255,12 @@ const __ExperimentalAsyncSelect = (props) => {
                   }
                 );
               } }),
-              list.isLoading && cloneElement(icons.loader, { className: "es-uic-mx-auto es-uic-my-4 es-uic-animate-spin es-uic-size-5.5 es-uic-text-teal-700" }),
-              !list.isLoading && list.items.length === 0 && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-p-2", children: /* @__PURE__ */ jsxs(
+              list.isLoading && cloneElement(icons.loader, { className: "es:mx-auto es:my-4 es:animate-spin es:size-5.5 es:text-accent-700" }),
+              !list.isLoading && list.items.length === 0 && /* @__PURE__ */ jsx("div", { className: "es:flex es:p-2", children: /* @__PURE__ */ jsxs(
                 $514c0188e459b4c0$export$5f1af8db9871e1d6,
                 {
                   slot: "errorMessage",
-                  className: clsx("es-uic-flex es-uic-w-full es-uic-items-center es-uic-gap-1 es-uic-rounded es-uic-text-amber-950"),
+                  className: clsx("es:flex es:w-full es:items-center es:gap-1 es:rounded es:text-amber-950"),
                   children: [
                     icons.searchEmpty,
                     __("Nothing found", "eightshift-ui-components")
@@ -292,8 +282,8 @@ const ClearButton = ({ disabled }) => {
     {
       "aria-label": __("Clear value", "eightshift-ui-components"),
       className: clsx(
-        "es-uic-mr-7 es-uic-flex es-uic-h-6 es-uic-w-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-text-sm es-uic-text-gray-600 es-uic-transition hover:es-uic-bg-red-50 hover:es-uic-text-red-900 focus:es-uic-outline-none focus:es-uic-ring focus:es-uic-ring-teal-500/50 disabled:es-uic-text-gray-300",
-        isEmpty ? "es-uic-hidden" : "es-uic-flex"
+        "es:mr-7 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+        isEmpty ? "es:hidden" : "es:flex"
       ),
       onPress: () => state == null ? void 0 : state.setSelectedKey(null),
       slot: null,

package/dist/components/select/v2/shared.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
-import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BxZwDp9o.js";
-import { c as clsx } from "../../../utils-BmaSD6gC.js";
+import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-D9dFEh5A.js";
+import { c as clsx } from "../../../utils-39D0mStj.js";
 const OptionItemBase = (props) => {
   var _a;
   return /* @__PURE__ */ jsx(
@@ -9,12 +9,12 @@ const OptionItemBase = (props) => {
       ...props,
       textValue: (_a = props == null ? void 0 : props.value) == null ? void 0 : _a.label,
       className: clsx(
-        "es-uic-flex es-uic-min-h-9 es-uic-select-none es-uic-items-center es-uic-gap-1 es-uic-rounded es-uic-p-2 es-uic-transition",
-        "focus:es-uic-outline-none",
-        "hover:es-uic-bg-gray-100 hover:es-uic-outline-none",
-        "selected:es-uic-bg-teal-600/15 selected:es-uic-text-teal-950",
-        "focus-visible:es-uic-bg-gray-100 focus-visible:es-uic-outline-none",
-        "active:es-uic-bg-teal-700/15"
+        "es:flex es:min-h-9 es:select-none es:items-center es:gap-1 es:rounded es:p-2 es:transition",
+        "es:focus:outline-hidden",
+        "es:hover:bg-secondary-100 es:hover:outline-hidden",
+        "selected:es:bg-accent-600/15 selected:es:text-accent-950",
+        "es:focus-visible:bg-secondary-100 es:focus-visible:outline-hidden",
+        "es:active:bg-accent-700/15"
       )
     }
   );

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

@@ -1,26 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../../default-i18n-CM1-Xvzf.js";
 import { BaseControl } from "../../base-control/base-control.js";
-import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BEIi9mB_.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-D8G0GMsc.js";
-import { b as $eed445e0843c11d0$export$7ff8f37d2d81a48d, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BxZwDp9o.js";
-import { n as $168583247155ddda$export$dc9c12ed27dd1b49, k as $de32f1b87079253c$export$d2f961adcb0afbe, o as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-17uxPRe5.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, r as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, c as clsx } from "../../../utils-BmaSD6gC.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../../FieldError-huHsqqMP.js";
+import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-OQ5EIPvt.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-Ca9uelsn.js";
+import { b as $eed445e0843c11d0$export$7ff8f37d2d81a48d, c as $eed445e0843c11d0$export$7c5906fe4f1f2af2, $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-D9dFEh5A.js";
+import { o as $168583247155ddda$export$dc9c12ed27dd1b49, l as $de32f1b87079253c$export$d2f961adcb0afbe, p as $07b14b47974efb58$export$9b9a0cd73afb7ca4, $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CIh-hX93.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, p as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, c as clsx } from "../../../utils-39D0mStj.js";
+import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../../FieldError-D7A6s7O5.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "../../../Form-Cq3fu75_.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../../Text-Cld9rkzJ.js";
-import { n as $fb3050f43d946246$export$e32c88dfddc6e1d8, f as $e1995378a142960e$export$bf788dd355e3a401 } from "../../../SelectionManager-DGbP8Ntl.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../../Text-aOUPPvTO.js";
+import { n as $fb3050f43d946246$export$e32c88dfddc6e1d8, d as $e1995378a142960e$export$bf788dd355e3a401 } from "../../../Collection-CJM_asJz.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../../filterDOMProps-EDDcM64A.js";
-import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, d as $9daab02d461809db$export$683480f191c0e3ea } from "../../../OverlayArrow-Dca2JXYU.js";
+import { a as $fc909762b330b746$export$61c6a8c84e605fb6, f as $9daab02d461809db$export$683480f191c0e3ea } from "../../../OverlayArrow-1jx-ZyCR.js";
 import React__default, { useMemo, useRef, useState, createContext, forwardRef, useCallback, useContext, cloneElement } from "react";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../../useFormValidation-BxnASugK.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../../useSingleSelectListState-Dr843geC.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../../useFocusRing-Dbj6MsFR.js";
-import { d as $325a3faab7a68acd$export$a16aca283550c30d, e as $2a25aae57d74318e$export$a05409b8bb224a5a } from "../../../Separator-B_VdRHCf.js";
-import { i as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "../../../focusSafely-ChK5oW-0.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../../useFormReset-DDCE2RPv.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../../VisuallyHidden-D0lsNfi4.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../../useLocalizedStringFormatter-BurzRhbk.js";
+import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../../useFormValidation-BWwmZQE2.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../../useSingleSelectListState-Cu3xtEJS.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../../useFocusRing-CGp3guTX.js";
+import { e as $325a3faab7a68acd$export$a16aca283550c30d, f as $2a25aae57d74318e$export$a05409b8bb224a5a } from "../../../Separator-BhZycTUp.js";
+import { l as $507fabe10e71c6fb$export$8397ddfc504fdb9a } from "../../../focusSafely-CiqTTjWy.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../../useFormReset-NpLM2e3G.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../../VisuallyHidden-ClTQo25k.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../../useLocalizedStringFormatter-BQ4TF72x.js";
 import { icons } from "../../../icons/icons.js";
 import "../../../react-jsx-parser.min-CVit0rZn.js";
 import { OptionItemBase } from "./shared.js";
@@ -537,7 +537,7 @@ function $parcel$interopDefault(a) {
 }
 const $82d7e5349645de74$export$7540cee5be7dc19b = /* @__PURE__ */ createContext(null);
 const $82d7e5349645de74$export$ef445b55be0601bd = /* @__PURE__ */ createContext(null);
-function $82d7e5349645de74$var$Select(props, ref) {
+const $82d7e5349645de74$export$ef9b1a59e592288f = /* @__PURE__ */ forwardRef(function Select(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$7540cee5be7dc19b);
   let { children, isDisabled = false, isInvalid = false, isRequired = false } = props;
   let content = useMemo(() => typeof children === "function" ? children({
@@ -561,7 +561,7 @@ function $82d7e5349645de74$var$Select(props, ref) {
     collection,
     selectRef: ref
   }));
-}
+});
 function $82d7e5349645de74$var$SelectInner({ props, selectRef: ref, collection }) {
   let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
   var _props_validationBehavior, _ref;
@@ -699,6 +699,7 @@ function $82d7e5349645de74$var$SelectInner({ props, selectRef: ref, collection }
     "data-invalid": validation.isInvalid || void 0,
     "data-required": props.isRequired || void 0
   }), /* @__PURE__ */ React__default.createElement($bdd25dc72710631f$export$cbd84cdb2e668835, {
+    autoComplete: props.autoComplete,
     state,
     triggerRef: buttonRef,
     label,
@@ -706,9 +707,8 @@ function $82d7e5349645de74$var$SelectInner({ props, selectRef: ref, collection }
     isDisabled: props.isDisabled
   }));
 }
-const $82d7e5349645de74$export$ef9b1a59e592288f = /* @__PURE__ */ forwardRef($82d7e5349645de74$var$Select);
 const $82d7e5349645de74$export$f8f745c04421623f = /* @__PURE__ */ createContext(null);
-function $82d7e5349645de74$var$SelectValue(props, ref) {
+const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef(function SelectValue(props, ref) {
   var _state_selectedItem, _state_selectedItem1;
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $82d7e5349645de74$export$f8f745c04421623f);
   let state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
@@ -749,8 +749,7 @@ function $82d7e5349645de74$var$SelectValue(props, ref) {
   }, /* @__PURE__ */ React__default.createElement($514c0188e459b4c0$export$9afb8bc826b033ea.Provider, {
     value: void 0
   }, renderProps.children));
-}
-const $82d7e5349645de74$export$e288731fd71264f0 = /* @__PURE__ */ forwardRef($82d7e5349645de74$var$SelectValue);
+});
 /**
  * Select menu.
  *
@@ -858,11 +857,12 @@ const __ExperimentalSelect = (props) => {
               "div",
               {
                 className: clsx(
-                  "es-uic-relative es-uic-flex es-uic-max-w-80 es-uic-items-center es-uic-gap-1 es-uic-p-1 focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500/50",
-                  "es-uic-h-9 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-bg-white es-uic-text-sm es-uic-shadow-sm es-uic-transition",
-                  "focus:es-uic-outline-none",
-                  !inline && "es-uic-w-full",
-                  disabled && "es-uic-select-none"
+                  "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:any-focus:outline-hidden",
+                  !inline && "es:w-full",
+                  disabled && "es:select-none",
+                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
                 ),
                 ref,
                 children: [
@@ -870,13 +870,12 @@ const __ExperimentalSelect = (props) => {
                     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                     {
                       className: clsx(
-                        "es-uic-group es-uic-h-6 es-uic-w-full es-uic-rounded-sm es-uic-p-1 es-uic-text-sm es-uic-transition",
-                        "es-uic-flex es-uic-grow es-uic-items-center",
-                        "focus:es-uic-outline-none",
-                        "focus-visible:es-uic-outline-none focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500/50",
-                        disabled && "es-uic-bg-transparent es-uic-text-gray-400 selection:es-uic-bg-transparent selection:es-uic-text-transparent",
-                        currentValue && !clearable && "es-uic-pr-6",
-                        !currentValue && "es-uic-text-gray-400"
+                        "es:group es:h-6 es:w-full es:rounded-sm es:p-1 es:text-sm es:transition",
+                        "es:flex es:grow es:items-center",
+                        "es:any-focus:outline-hidden",
+                        disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent",
+                        currentValue && !clearable && "es:pr-6",
+                        !currentValue && "es:text-secondary-400"
                       ),
                       children: [
                         /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ defaultChildren, isPlaceholder, selectedItem }) => {
@@ -903,13 +902,10 @@ const __ExperimentalSelect = (props) => {
                         /* @__PURE__ */ jsx(
                           "div",
                           {
-                            className: clsx(
-                              "es-uic-absolute es-uic-bottom-0 es-uic-right-1 es-uic-top-0 es-uic-my-auto es-uic-flex es-uic-items-center",
-                              disabled ? "es-uic-text-gray-300" : "es-uic-text-gray-500"
-                            ),
+                            className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
                             "aria-hidden": "true",
                             children: cloneElement(icons.dropdownCaretAlt, {
-                              className: "es-uic-w-5.5 group-aria-expanded:-es-uic-scale-y-100 es-uic-transition-transform es-uic-duration-200"
+                              className: "es:w-5.5 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
                             })
                           }
                         )
@@ -923,18 +919,18 @@ const __ExperimentalSelect = (props) => {
             /* @__PURE__ */ jsx(
               $07b14b47974efb58$export$5b6b19405a83ff9d,
               {
-                className: clsx(
-                  "es-uic-flex es-uic-min-w-9 es-uic-max-w-80 es-uic-flex-col es-uic-overflow-x-hidden es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-text-sm es-uic-shadow-lg",
-                  "focus:es-uic-outline-none",
-                  "entering:es-uic-animate-in entering:es-uic-fade-in-0 entering:es-uic-slide-in-from-top-3 entering:es-uic-fill-mode-forwards",
-                  "exiting:es-uic-animate-out exiting:es-uic-fade-out-0 exiting:es-uic-slide-out-to-top-2 exiting:es-uic-fill-mode-forwards"
+                className: ({ isEntering, isExiting }) => clsx(
+                  "es:flex es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
+                  "es:any-focus:outline-hidden",
+                  isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
+                  isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
                 ),
                 placement: "bottom left",
                 triggerRef: ref,
                 children: /* @__PURE__ */ jsx(
                   $eed445e0843c11d0$export$41f133550aa26f48,
                   {
-                    className: "es-uic-space-y-0.5 es-uic-p-1 focus:es-uic-outline-none",
+                    className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden",
                     items: options,
                     children: (item) => {
                       var _a;
@@ -979,8 +975,8 @@ const SelectClearButton = () => {
     {
       "aria-label": __("Clear value", "eightshift-ui-components"),
       className: clsx(
-        "es-uic-mr-6 es-uic-flex es-uic-h-6 es-uic-w-8 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-text-sm es-uic-text-gray-600 es-uic-transition hover:es-uic-bg-red-50 hover:es-uic-text-red-900 focus:es-uic-outline-none focus:es-uic-ring focus:es-uic-ring-teal-500/50 disabled:es-uic-text-gray-300",
-        isEmpty ? "es-uic-hidden" : "es-uic-flex"
+        "es:mr-6 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+        isEmpty ? "es:hidden" : "es:flex"
       ),
       onPress: () => state == null ? void 0 : state.setSelectedKey(null),
       slot: null,

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8G0GMsc.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-CgEZmlNY.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-BZNaJylD.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";
@@ -72,7 +72,7 @@ const ColumnConfigSlider = (props) => {
       step: 1,
       isDisabled: disabled,
       orientation: "horizontal",
-      className: "es-uic-w-full",
+      className: "es:w-full",
       onChangeEnd,
       ...other,
       children: /* @__PURE__ */ jsx(
@@ -88,11 +88,11 @@ const ColumnConfigSlider = (props) => {
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          controlContainerClassName: "es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0",
+          controlContainerClassName: "es:flex es:items-center es:gap-2.5 es:space-y-0!",
           children: /* @__PURE__ */ jsx(
             $6f909507e6374d18$export$105594979f116971,
             {
-              className: "es-uic-isolate es-uic-grid es-uic-h-10 es-uic-w-full es-uic-grid-rows-1",
+              className: "es:isolate es:grid es:h-10 es:w-full es:grid-rows-1",
               style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
               children: ({ state }) => {
                 return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -100,8 +100,8 @@ const ColumnConfigSlider = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es-uic-col-span-full es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-full es-uic-grow es-uic-rounded-md es-uic-border",
-                        disabled ? "es-uic-border-gray-200 es-uic-bg-white" : "es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-shadow-sm"
+                        "es:col-span-full es:row-span-1 es:row-start-1 es:h-full es:w-full es:grow es:rounded-lg es:border",
+                        disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-xs"
                       )
                     }
                   ),
@@ -109,9 +109,9 @@ const ColumnConfigSlider = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es-uic-row-span-1 es-uic-row-start-1 es-uic-h-full es-uic-w-px es-uic-justify-self-center",
-                        marker >= value[0] - 1 && marker < value[1] ? "es-uic-bg-teal-700/25" : "es-uic-bg-gray-300",
-                        (marker === value[0] - 2 || marker === value[1] - 1) && "es-uic-hidden"
+                        "es:row-span-1 es:row-start-1 es:h-full es:w-px es:justify-self-center",
+                        marker >= value[0] - 1 && marker < value[1] ? "es:bg-accent-700/25" : "es:bg-secondary-300",
+                        (marker === value[0] - 2 || marker === value[1] - 1) && "es:hidden"
                       ),
                       style: { gridColumn: `${marker + 1} / span 2` }
                     },
@@ -121,9 +121,9 @@ const ColumnConfigSlider = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es-uic-pointer-events-none es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
-                        "es-uic-h-full es-uic-w-full es-uic-self-center es-uic-rounded-md",
-                        disabled ? "es-uic-border-gray-200 es-uic-bg-gray-50" : "es-uic-border-teal-500 es-uic-bg-teal-500/30"
+                        "es:pointer-events-none es:col-start-1 es:row-start-1 es:border",
+                        "es:h-full es:w-full es:self-center es:rounded-lg",
+                        disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
                       ),
                       style: {
                         gridColumn: `${value[0]} / span ${value[1] - value[0] + 1}`
@@ -135,10 +135,10 @@ const ColumnConfigSlider = (props) => {
                       "span",
                       {
                         className: clsx(
-                          "es-uic-row-span-1 es-uic-row-start-1 es-uic-select-none es-uic-place-self-center es-uic-text-xs es-uic-transition-colors",
-                          "es-uic-inset-y-0 es-uic-my-auto es-uic-h-fit es-uic-pl-px es-uic-text-center",
-                          "[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-[1.5]",
-                          marker >= value[0] - 1 && marker < value[1] ? "es-uic-text-teal-700" : "es-uic-text-gray-400"
+                          "es:row-span-1 es:row-start-1 es:select-none es:place-self-center es:text-xs es:transition-colors",
+                          "es:inset-y-0 es:my-auto es:h-fit es:pl-px es:text-center",
+                          "es:icon:size-3 es:icon:stroke-[1.5]",
+                          marker >= value[0] - 1 && marker < value[1] ? "es:text-accent-700" : "es:text-secondary-400"
                         ),
                         style: { gridColumn: `${index + 1} / span 1` },
                         children: [
@@ -158,13 +158,13 @@ const ColumnConfigSlider = (props) => {
                       "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                       isDisabled: i === 0 && disableOffset || i === 1 && disableWidth,
                       className: clsx(
-                        "!es-uic-static es-uic-row-span-1 es-uic-row-start-1 es-uic-h-6 es-uic-w-1.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
-                        i === 0 && "!-es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-start",
-                        i === 1 && "!es-uic-translate-x-1/2 !es-uic-translate-y-0 es-uic-self-center es-uic-justify-self-end",
-                        "es-uic-shadow dragging:es-uic-bg-teal-600 disabled:es-uic-opacity-0",
-                        "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50",
-                        "es-uic-border-teal-600 es-uic-bg-teal-500 es-uic-shadow-teal-600/50",
-                        "hover:es-uic-cursor-grab dragging:es-uic-cursor-grabbing"
+                        "es:static! es:row-span-1 es:row-start-1 es:h-6 es:w-1.5 es:rounded-full es:border es:transition es:duration-300",
+                        i === 0 && "es:translate-y-1/2! es:self-center es:justify-self-start",
+                        i === 1 && "es:translate-x-full! es:translate-y-1/2! es:self-center es:justify-self-end",
+                        "es:shadow dragging:es:bg-accent-600 es:disabled:opacity-0",
+                        "es:focus-visible:ring es:focus-visible:ring-accent-500/50",
+                        "es:border-accent-600 es:bg-accent-500 es:shadow-accent-600/50",
+                        "es:hover:cursor-grab dragging:es:cursor-grabbing"
                       ),
                       style: {
                         gridColumn: `${state.values[i]} / span 1`
@@ -197,7 +197,7 @@ const ColumnConfigSlider = (props) => {
  *
  * @preserve
  */
-const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state }) => {
+const ColumnConfigSliderOutput = ({ showOuterAsGutter }) => /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => {
   const columns = state.getThumbMaxValue(1);
   const offset = parseInt(state.getThumbValueLabel(0));
   const endOffset = parseInt(state.getThumbValueLabel(1));