@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/slider/slider.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-BmaSD6gC.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-D8G0GMsc.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-CgEZmlNY.js";
+import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-39D0mStj.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-Ca9uelsn.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, c as $6f909507e6374d18$export$a590f758a961cb5b, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-BZNaJylD.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { NumberPicker } from "../number-picker/number-picker.js";
@@ -101,7 +101,7 @@ const Slider = (props) => {
       step,
       isDisabled: disabled,
       orientation: vertical ? "vertical" : "horizontal",
-      className: clsx("es-uic-w-full", (markerEntries == null ? void 0 : markerEntries.some(([_, value2]) => (value2 == null ? void 0 : value2.length) > 0)) && "es-uic-pb-3.5"),
+      className: clsx("es:w-full", (markerEntries == null ? void 0 : markerEntries.some(([_, value2]) => (value2 == null ? void 0 : value2.length) > 0)) && "es:pb-3.5"),
       onChangeEnd,
       ...other,
       children: /* @__PURE__ */ jsx(
@@ -113,7 +113,7 @@ const Slider = (props) => {
           help,
           actions: /* @__PURE__ */ jsxs(Fragment, { children: [
             actions,
-            !inputField && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
+            !inputField && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" – ") }),
             inputField && /* @__PURE__ */ jsx(
               NumberInputField,
               {
@@ -128,190 +128,181 @@ const Slider = (props) => {
           ] }),
           labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
           className: labelClassName,
-          children: /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-2.5 !es-uic-space-y-0", vertical && "es-uic-flex-col"), children: [
-            before && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: before }),
-            /* @__PURE__ */ jsx(
-              $6f909507e6374d18$export$105594979f116971,
-              {
-                className: clsx(
-                  "es-uic-isolate es-uic-grid es-uic-grid-cols-1 es-uic-grid-rows-1",
-                  vertical ? "es-uic-mx-auto es-uic-h-40 es-uic-w-4" : "es-uic-h-4 es-uic-w-full es-uic-grow"
+          children: /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-2.5 es:space-y-0!", vertical && "es:flex-col"), children: [
+            before && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: before }),
+            /* @__PURE__ */ jsx($6f909507e6374d18$export$105594979f116971, { className: clsx("es:isolate es:grid es:grid-cols-1 es:grid-rows-1", vertical ? "es:mx-auto es:h-40 es:w-4" : "es:h-4 es:w-full es:grow"), children: ({ state }) => {
+              let activeBarLeft;
+              let activeBarBottom;
+              let activeBarWidth;
+              let activeBarHeight;
+              let activeBarOffset = false;
+              let shouldRoundStart = false;
+              let shouldRoundEnd = false;
+              const currValue = state.getThumbValue(0);
+              if (vertical && !noActiveHighlight) {
+                if (Array.isArray(value)) {
+                  activeBarBottom = state.getThumbPercent(0) * 100;
+                  activeBarHeight = state.getThumbPercent(value.length - 1) * 100 - activeBarBottom;
+                } else if (startPoint && currValue >= startPoint) {
+                  activeBarBottom = state.getValuePercent(startPoint) * 100;
+                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
+                  activeBarOffset = true;
+                } else if (startPoint && currValue < startPoint) {
+                  activeBarBottom = state.getThumbPercent(0) * 100;
+                  activeBarHeight = state.getValuePercent(startPoint) * 100 - activeBarBottom;
+                } else if (min < 0 && currValue >= 0) {
+                  activeBarBottom = state.getValuePercent(0) * 100;
+                  activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
+                } else if (min < 0 && currValue < 0) {
+                  activeBarBottom = state.getThumbPercent(0) * 100;
+                  activeBarHeight = state.getValuePercent(0) * 100 - activeBarBottom;
+                } else {
+                  activeBarBottom = state.getValuePercent(min) * 100;
+                  activeBarHeight = state.getThumbPercent(0) * 100;
+                  shouldRoundEnd = true;
+                }
+              } else if (!noActiveHighlight) {
+                if (Array.isArray(value)) {
+                  activeBarLeft = state.getThumbPercent(0) * 100;
+                  activeBarWidth = state.getThumbPercent(value.length - 1) * 100 - activeBarLeft;
+                } else if (startPoint && currValue >= startPoint) {
+                  activeBarLeft = state.getValuePercent(startPoint) * 100;
+                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
+                } else if (startPoint && currValue < startPoint) {
+                  activeBarLeft = state.getThumbPercent(0) * 100;
+                  activeBarWidth = state.getValuePercent(startPoint) * 100 - activeBarLeft;
+                } else if (min < 0 && currValue >= 0) {
+                  activeBarLeft = state.getValuePercent(0) * 100;
+                  activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
+                  activeBarOffset = true;
+                } else if (min < 0 && currValue < 0) {
+                  activeBarLeft = state.getThumbPercent(0) * 100;
+                  activeBarWidth = state.getValuePercent(0) * 100 - activeBarLeft;
+                } else {
+                  activeBarLeft = state.getValuePercent(min) * 100;
+                  activeBarWidth = state.getThumbPercent(0) * 100;
+                  shouldRoundStart = true;
+                }
+              }
+              return /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "es:relative es:col-start-1 es:row-start-1 es:rounded-full es:border",
+                      !vertical && "es:h-1.5 es:w-full es:self-center",
+                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
+                      disabled ? "es:border-secondary-200 es:bg-white" : "es:border-secondary-300 es:bg-secondary-50 es:shadow-xs"
+                    ),
+                    style: trackStyle
+                  }
                 ),
-                children: ({ state }) => {
-                  let activeBarLeft;
-                  let activeBarBottom;
-                  let activeBarWidth;
-                  let activeBarHeight;
-                  let activeBarOffset = false;
-                  let shouldRoundStart = false;
-                  let shouldRoundEnd = false;
-                  const currValue = state.getThumbValue(0);
-                  if (vertical && !noActiveHighlight) {
-                    if (Array.isArray(value)) {
-                      activeBarBottom = state.getThumbPercent(0) * 100;
-                      activeBarHeight = state.getThumbPercent(value.length - 1) * 100 - activeBarBottom;
-                    } else if (startPoint && currValue >= startPoint) {
-                      activeBarBottom = state.getValuePercent(startPoint) * 100;
-                      activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                      activeBarOffset = true;
-                    } else if (startPoint && currValue < startPoint) {
-                      activeBarBottom = state.getThumbPercent(0) * 100;
-                      activeBarHeight = state.getValuePercent(startPoint) * 100 - activeBarBottom;
-                    } else if (min < 0 && currValue >= 0) {
-                      activeBarBottom = state.getValuePercent(0) * 100;
-                      activeBarHeight = state.getThumbPercent(0) * 100 - activeBarBottom;
-                    } else if (min < 0 && currValue < 0) {
-                      activeBarBottom = state.getThumbPercent(0) * 100;
-                      activeBarHeight = state.getValuePercent(0) * 100 - activeBarBottom;
-                    } else {
-                      activeBarBottom = state.getValuePercent(min) * 100;
-                      activeBarHeight = state.getThumbPercent(0) * 100;
-                      shouldRoundEnd = true;
-                    }
-                  } else if (!noActiveHighlight) {
-                    if (Array.isArray(value)) {
-                      activeBarLeft = state.getThumbPercent(0) * 100;
-                      activeBarWidth = state.getThumbPercent(value.length - 1) * 100 - activeBarLeft;
-                    } else if (startPoint && currValue >= startPoint) {
-                      activeBarLeft = state.getValuePercent(startPoint) * 100;
-                      activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                    } else if (startPoint && currValue < startPoint) {
-                      activeBarLeft = state.getThumbPercent(0) * 100;
-                      activeBarWidth = state.getValuePercent(startPoint) * 100 - activeBarLeft;
-                    } else if (min < 0 && currValue >= 0) {
-                      activeBarLeft = state.getValuePercent(0) * 100;
-                      activeBarWidth = state.getThumbPercent(0) * 100 - activeBarLeft;
-                      activeBarOffset = true;
-                    } else if (min < 0 && currValue < 0) {
-                      activeBarLeft = state.getThumbPercent(0) * 100;
-                      activeBarWidth = state.getValuePercent(0) * 100 - activeBarLeft;
-                    } else {
-                      activeBarLeft = state.getValuePercent(min) * 100;
-                      activeBarWidth = state.getThumbPercent(0) * 100;
-                      shouldRoundStart = true;
+                !noActiveHighlight && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "es:absolute es:col-start-1 es:row-start-1 es:border",
+                      !vertical && "es:h-1.5 es:w-full es:self-center",
+                      vertical && "es:h-full es:w-1.5 es:flex-col es:justify-self-center",
+                      !vertical && shouldRoundStart && "es:rounded-l-full",
+                      !vertical && shouldRoundEnd && "es:rounded-r-full",
+                      vertical && shouldRoundStart && "es:rounded-t-full",
+                      vertical && shouldRoundEnd && "es:rounded-b-full",
+                      !vertical && activeBarOffset && "es:-translate-x-px",
+                      vertical && activeBarOffset && "es:translate-y-px",
+                      disabled ? "es:border-secondary-200 es:bg-secondary-50" : "es:border-accent-500 es:bg-accent-500/30"
+                    ),
+                    style: {
+                      bottom: vertical ? `${activeBarBottom}%` : null,
+                      height: vertical ? `${activeBarHeight}%` : null,
+                      width: vertical ? null : `${activeBarWidth}%`,
+                      left: vertical ? null : `${activeBarLeft}%`
                     }
                   }
-                  return /* @__PURE__ */ jsxs(Fragment, { children: [
-                    /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: clsx(
-                          "es-uic-relative es-uic-col-start-1 es-uic-row-start-1 es-uic-rounded-full es-uic-border",
-                          !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
-                          vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
-                          disabled ? "es-uic-border-gray-200 es-uic-bg-white" : "es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-shadow-sm"
-                        ),
-                        style: trackStyle
-                      }
+                ),
+                markers && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      "es:relative es:col-start-1 es:row-start-1",
+                      !vertical && "es:h-1 es:w-full es:self-center",
+                      vertical && "es:h-full es:w-1 es:flex-col es:justify-self-center"
                     ),
-                    !noActiveHighlight && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: clsx(
-                          "es-uic-absolute es-uic-col-start-1 es-uic-row-start-1 es-uic-border",
-                          !vertical && "es-uic-h-1.5 es-uic-w-full es-uic-self-center",
-                          vertical && "es-uic-h-full es-uic-w-1.5 es-uic-flex-col es-uic-justify-self-center",
-                          !vertical && shouldRoundStart && "es-uic-rounded-l-full",
-                          !vertical && shouldRoundEnd && "es-uic-rounded-r-full",
-                          vertical && shouldRoundStart && "es-uic-rounded-t-full",
-                          vertical && shouldRoundEnd && "es-uic-rounded-b-full",
-                          !vertical && activeBarOffset && "-es-uic-translate-x-px",
-                          vertical && activeBarOffset && "es-uic-translate-y-px",
-                          disabled ? "es-uic-border-gray-200 es-uic-bg-gray-50" : "es-uic-border-teal-500 es-uic-bg-teal-500/30"
-                        ),
-                        style: {
-                          bottom: vertical ? `${activeBarBottom}%` : null,
-                          height: vertical ? `${activeBarHeight}%` : null,
-                          width: vertical ? null : `${activeBarWidth}%`,
-                          left: vertical ? null : `${activeBarLeft}%`
-                        }
+                    children: markerData.map(([rawDotValue, labelData], index) => {
+                      const dotValue = parseFloat(rawDotValue);
+                      let isWithinActiveBar = false;
+                      if (Array.isArray(value)) {
+                        isWithinActiveBar = value[0] <= dotValue && dotValue <= value[value.length - 1];
+                      } else if (startPoint && dotValue >= startPoint) {
+                        isWithinActiveBar = dotValue >= startPoint && dotValue <= currValue && dotValue !== startPoint;
+                      } else if (startPoint && dotValue < startPoint) {
+                        isWithinActiveBar = dotValue <= startPoint && dotValue >= currValue && dotValue !== startPoint;
+                      } else if (min < 0 && dotValue >= 0) {
+                        isWithinActiveBar = dotValue >= 0 && dotValue <= currValue && dotValue !== 0;
+                      } else if (min < 0 && dotValue < 0) {
+                        isWithinActiveBar = dotValue <= 0 && dotValue >= currValue && dotValue !== 0;
+                      } else {
+                        isWithinActiveBar = dotValue <= currValue && dotValue > min && dotValue < max;
                       }
-                    ),
-                    markers && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: clsx(
-                          "es-uic-relative es-uic-col-start-1 es-uic-row-start-1",
-                          !vertical && "es-uic-h-1 es-uic-w-full es-uic-self-center",
-                          vertical && "es-uic-h-full es-uic-w-1 es-uic-flex-col es-uic-justify-self-center"
-                        ),
-                        children: markerData.map(([rawDotValue, labelData], index) => {
-                          const dotValue = parseFloat(rawDotValue);
-                          let isWithinActiveBar = false;
-                          if (Array.isArray(value)) {
-                            isWithinActiveBar = value[0] <= dotValue && dotValue <= value[value.length - 1];
-                          } else if (startPoint && dotValue >= startPoint) {
-                            isWithinActiveBar = dotValue >= startPoint && dotValue <= currValue && dotValue !== startPoint;
-                          } else if (startPoint && dotValue < startPoint) {
-                            isWithinActiveBar = dotValue <= startPoint && dotValue >= currValue && dotValue !== startPoint;
-                          } else if (min < 0 && dotValue >= 0) {
-                            isWithinActiveBar = dotValue >= 0 && dotValue <= currValue && dotValue !== 0;
-                          } else if (min < 0 && dotValue < 0) {
-                            isWithinActiveBar = dotValue <= 0 && dotValue >= currValue && dotValue !== 0;
-                          } else {
-                            isWithinActiveBar = dotValue <= currValue && dotValue > min && dotValue < max;
-                          }
-                          return /* @__PURE__ */ jsx(
-                            "div",
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: clsx(
+                            "es:absolute",
+                            vertical ? "es:h-px es:w-1" : "es:h-1 es:w-px es:translate-x-1/2",
+                            !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es:bg-secondary-300",
+                            !noActiveHighlight && isWithinActiveBar && "es:bg-accent-500/75"
+                          ),
+                          style: {
+                            left: vertical ? null : `${state.getValuePercent(dotValue) * 100}%`,
+                            top: vertical ? `calc(${state.getValuePercent(dotValue) * 100}%)` : null
+                          },
+                          children: /* @__PURE__ */ jsx(
+                            "span",
                             {
                               className: clsx(
-                                "es-uic-absolute",
-                                vertical ? "es-uic-h-px es-uic-w-1" : "es-uic-h-1 es-uic-w-px es-uic-translate-x-1/2",
-                                !(dotValue === min || dotValue === max || dotValue === startPoint && !noActiveHighlight || min < 0 && dotValue === 0 && !noActiveHighlight || isWithinActiveBar) && "es-uic-bg-gray-300",
-                                !noActiveHighlight && isWithinActiveBar && "es-uic-bg-teal-500/75"
+                                "es:absolute es:select-none es:text-xs es:transition-colors",
+                                vertical ? "es:left-3.5 es:top-0 es:-translate-y-1/2" : "es:left-0 es:top-2.5 es:-translate-x-1/2",
+                                (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es:text-accent-700" : "es:text-secondary-300"
                               ),
-                              style: {
-                                left: vertical ? null : `${state.getValuePercent(dotValue) * 100}%`,
-                                top: vertical ? `calc(${state.getValuePercent(dotValue) * 100}%)` : null
-                              },
-                              children: /* @__PURE__ */ jsx(
-                                "span",
-                                {
-                                  className: clsx(
-                                    "es-uic-absolute es-uic-select-none es-uic-text-xs es-uic-transition-colors",
-                                    vertical ? "es-uic-left-3.5 es-uic-top-0 -es-uic-translate-y-1/2" : "es-uic-left-0 es-uic-top-2.5 -es-uic-translate-x-1/2",
-                                    (Array.isArray(value) ? value.includes(Number(dotValue)) : value === Number(dotValue) && !disabled) ? "es-uic-text-teal-700" : "es-uic-text-gray-300"
-                                  ),
-                                  children: markers && markers !== "dots" && labelData
-                                }
-                              )
-                            },
-                            index
-                          );
-                        })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: "es-uic-relative es-uic-col-start-1 es-uic-row-start-1 es-uic-p-px", children: state.values.map((_, i) => /* @__PURE__ */ jsxs(
-                      $6f909507e6374d18$export$2c1b491743890dec,
-                      {
-                        index: i,
-                        "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
-                        className: clsx(
-                          "es-uic-absolute es-uic-size-3.5 es-uic-rounded-full es-uic-border es-uic-transition es-uic-duration-300",
-                          vertical ? "!-es-uic-translate-y-1/2 !es-uic-translate-x-0" : "!-es-uic-translate-x-1/2 !es-uic-translate-y-0",
-                          "es-uic-shadow dragging:es-uic-bg-teal-600 disabled:es-uic-border-gray-200 disabled:es-uic-bg-gray-100 disabled:es-uic-shadow-none",
-                          "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"
-                        ),
-                        onFocus: () => {
-                          if (state.values.length < 2) {
-                            return;
-                          }
-                          setCurrentThumbIndex(i);
+                              children: markers && markers !== "dots" && labelData
+                            }
+                          )
                         },
-                        children: [
-                          inputField && state.values.length > 1 && currentThumbIndex === i && /* @__PURE__ */ jsx("div", { className: "es-uic-m-0.5 es-uic-size-2 es-uic-rounded-full es-uic-bg-teal-100" }),
-                          thumbContent && thumbContent(i)
-                        ]
-                      },
-                      i
-                    )) })
-                  ] });
-                }
-              }
-            ),
-            after && /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-shrink-0 es-uic-items-center es-uic-gap-1", children: after })
+                        index
+                      );
+                    })
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "es:relative es:col-start-1 es:row-start-1 es:p-px", children: state.values.map((_, i) => /* @__PURE__ */ jsxs(
+                  $6f909507e6374d18$export$2c1b491743890dec,
+                  {
+                    index: i,
+                    "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
+                    className: clsx(
+                      "es:absolute es:size-3.5 es:rounded-full es:border es:transition es:duration-300",
+                      vertical ? "es:translate-x-1/2!" : "es:translate-y-1/2!",
+                      "es:shadow dragging:es:bg-accent-600 es:disabled:border-secondary-200 es:disabled:bg-secondary-100 es:disabled:shadow-none",
+                      "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"
+                    ),
+                    onFocus: () => {
+                      if (state.values.length < 2) {
+                        return;
+                      }
+                      setCurrentThumbIndex(i);
+                    },
+                    children: [
+                      inputField && state.values.length > 1 && currentThumbIndex === i && /* @__PURE__ */ jsx("div", { className: "es:m-0.5 es:size-2 es:rounded-full es:bg-accent-100" }),
+                      thumbContent && thumbContent(i)
+                    ]
+                  },
+                  i
+                )) })
+              ] });
+            } }),
+            after && /* @__PURE__ */ jsx("div", { className: "es:flex es:shrink-0 es:items-center es:gap-1", children: after })
           ] })
         }
       )
@@ -340,11 +331,11 @@ const NumberInputField = (props) => {
           }
           props.setFocusedThumb(-1);
         },
-        className: fieldIndex === -1 && !isSingleValue ? "es-uic-invisible" : "",
+        className: fieldIndex === -1 && !isSingleValue ? "es:invisible" : "",
         ...other
       }
     ),
-    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es-uic-text-xs es-uic-tabular-nums es-uic-text-gray-600"), children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ") })
+    fieldIndex === -1 && !isSingleValue && /* @__PURE__ */ jsx($6f909507e6374d18$export$a590f758a961cb5b, { className: clsx("es:text-xs es:tabular-nums es:text-secondary-600"), children: ({ state: state2 }) => state2.values.map((_, i) => state2.getThumbValueLabel(i)).join(" – ") })
   ] });
 };
 export {

package/dist/components/spacer/spacer.js

@@ -38,55 +38,55 @@ const Spacer = (props) => {
   }
   const sizes = {
     px: {
-      sizeHorizontal: "es-uic-h-px",
-      sizeHorizontalBorder: "es-uic-h-px",
-      sizeVertical: "es-uic-w-px",
-      sizeVerticalBorder: "es-uic-w-px"
+      sizeHorizontal: "es:h-px",
+      sizeHorizontalBorder: "es:h-px",
+      sizeVertical: "es:w-px",
+      sizeVerticalBorder: "es:w-px"
     },
     xs: {
-      sizeHorizontal: "es-uic-h-1",
-      sizeHorizontalBorder: "es-uic-h-0.5",
-      sizeVertical: "es-uic-w-1",
-      sizeVerticalBorder: "es-uic-w-0.5"
+      sizeHorizontal: "es:h-1",
+      sizeHorizontalBorder: "es:h-0.5",
+      sizeVertical: "es:w-1",
+      sizeVerticalBorder: "es:w-0.5"
     },
     s: {
-      sizeHorizontal: "es-uic-h-2.5",
-      sizeHorizontalBorder: "es-uic-h-1",
-      sizeVertical: "es-uic-w-2.5",
-      sizeVerticalBorder: "es-uic-w-1"
+      sizeHorizontal: "es:h-2.5",
+      sizeHorizontalBorder: "es:h-1",
+      sizeVertical: "es:w-2.5",
+      sizeVerticalBorder: "es:w-1"
     },
     m: {
-      sizeHorizontal: "es-uic-h-5",
-      sizeHorizontalBorder: "es-uic-h-2",
-      sizeVertical: "es-uic-w-5",
-      sizeVerticalBorder: "es-uic-w-2"
+      sizeHorizontal: "es:h-5",
+      sizeHorizontalBorder: "es:h-2",
+      sizeVertical: "es:w-5",
+      sizeVerticalBorder: "es:w-2"
     }
   };
   const spaceClass = clsx(
-    vertical ? "es-uic-h-full" : "es-uic-w-full",
+    vertical ? "es:h-full" : "es:w-full",
     !vertical && !border && sizes[size].sizeHorizontal,
     !vertical && border && sizes[size].sizeHorizontalBorder,
     vertical && !border && sizes[size].sizeVertical,
     vertical && border && sizes[size].sizeVerticalBorder
   );
   if (text || icon) {
-    return /* @__PURE__ */ jsxs("div", { className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1.5", className), children: [
+    return /* @__PURE__ */ jsxs("div", { className: clsx("es:flex es:items-center es:gap-1.5", className), children: [
       /* @__PURE__ */ jsx(
         RichLabel,
         {
           icon,
           label: text,
           subtitle,
-          className: "es-uic-shrink-0 es-uic-text-slate-500"
+          className: "es:shrink-0 es:text-secondary-500"
         }
       ),
-      border && /* @__PURE__ */ jsx("div", { className: "es-uic-h-px es-uic-w-full es-uic-bg-slate-300 es-uic-leading-3" })
+      border && /* @__PURE__ */ jsx("div", { className: "es:h-px es:w-full es:bg-secondary-300 es:leading-3" })
     ] });
   }
   if (border) {
     return /* @__PURE__ */ jsxs("div", { className, children: [
       size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass }),
-      /* @__PURE__ */ jsx("div", { className: clsx("es-uic-bg-gray-300", vertical ? "es-uic-h-full es-uic-w-px" : "es-uic-h-px es-uic-w-full") }),
+      /* @__PURE__ */ jsx("div", { className: clsx("es:bg-secondary-300", vertical ? "es:h-full es:w-px" : "es:h-px es:w-full") }),
       size !== "px" && /* @__PURE__ */ jsx("div", { className: spaceClass })
     ] });
   }