@eightshift/ui-components 1.9.1 → 2.0.0

package/dist/components/popover/popover.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, e as $de32f1b87079253c$export$3ddf2d174ce01153, f as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-17uxPRe5.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d, f as $de32f1b87079253c$export$3ddf2d174ce01153, g as $de32f1b87079253c$export$2e1e1122cf0cba88 } from "../../Dialog-CIh-hX93.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { Button } from "../button/button.js";
@@ -102,16 +102,17 @@ const Popover = (props) => {
       crossOffset,
       containerPadding,
       className: ({ isEntering, isExiting }) => clsx(
-        "es-uic-rounded-md es-uic-border es-uic-border-gray-200 es-uic-bg-white es-uic-shadow-lg es-uic-outline-none",
-        isEntering && "es-uic-animate-in es-uic-fade-in-0 es-uic-slide-in-from-top-3 es-uic-fill-mode-forwards",
-        isExiting && "es-uic-animate-out es-uic-fade-out-0 es-uic-slide-out-to-top-2 es-uic-fill-mode-forwards",
+        "es:rounded-lg es:border es:border-secondary-300 es:bg-white es:shadow-lg es:outline-hidden",
+        "es:motion-safe:motion-ease-spring-smooth",
+        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",
         wrapperClassName
       ),
       style,
       children: /* @__PURE__ */ jsx(
         $de32f1b87079253c$export$3ddf2d174ce01153,
         {
-          className: clsx("es-uic-p-1 es-uic-text-sm es-uic-outline-none", className),
+          className: clsx("es:p-1 es:text-sm es:outline-hidden", className),
           "aria-label": ariaLabel,
           ...other,
           children

package/dist/components/radio/radio.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8G0GMsc.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BmaSD6gC.js";
-import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-huHsqqMP.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, b as $64fa3d84918910a7$export$4d86445c2cf5e3, j as $64fa3d84918910a7$export$2881499e37b75b9a, m as $df56164dff5785e2$export$4338b53315abf666, n as $5dc95899b306f630$export$c9058316764c140e, i as $64fa3d84918910a7$export$ef03459518577ad4 } 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 { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-aOUPPvTO.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
 import React__default, { useMemo, useState, forwardRef, createContext, cloneElement } from "react";
-import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-BxnASugK.js";
-import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-ChK5oW-0.js";
-import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-7r2_SUa9.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DtrQ3I5U.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-DDCE2RPv.js";
-import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-C2xrPFl6.js";
-import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-DZ9pn6Jl.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dbj6MsFR.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-D0lsNfi4.js";
+import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "../../useFormValidation-BWwmZQE2.js";
+import { d as $9ab94262bd0047c7$export$420e68273165f4ec, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
+import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-Cs5_OoeA.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-NpLM2e3G.js";
+import { $ as $e6afbd83fe6ebbd2$export$4c014de7c8940b4c } from "../../useFocusable-087cO5Ct.js";
+import { $ as $f6c31cce2adf654f$export$45712eceda6fad21 } from "../../usePress-rg_OQIGW.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-ClTQo25k.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
 import { RichLabel } from "../rich-label/rich-label.js";
@@ -215,7 +215,7 @@ function $a54cdc5c1942b639$export$bca9d026f8e704eb(props) {
 const $b6c3ddc6086f204d$export$a79eda4ff50e30b6 = /* @__PURE__ */ createContext(null);
 const $b6c3ddc6086f204d$export$b118023277d4a5c3 = /* @__PURE__ */ createContext(null);
 const $b6c3ddc6086f204d$export$29d84393af70866c = /* @__PURE__ */ createContext(null);
-function $b6c3ddc6086f204d$var$RadioGroup(props, ref) {
+const $b6c3ddc6086f204d$export$a98f0dcb43a68a25 = /* @__PURE__ */ forwardRef(function RadioGroup(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $b6c3ddc6086f204d$export$a79eda4ff50e30b6);
   let { validationBehavior: formValidationBehavior } = $64fa3d84918910a7$export$fabf2dc03a41866e($d3e0e05bdfcf66bd$export$c24727297075ec6a) || {};
   var _props_validationBehavior, _ref;
@@ -281,8 +281,8 @@ function $b6c3ddc6086f204d$var$RadioGroup(props, ref) {
       ]
     ]
   }, renderProps.children));
-}
-function $b6c3ddc6086f204d$var$Radio(props, ref) {
+});
+const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef(function Radio(props, ref) {
   let { inputRef: userProvidedInputRef = null, ...otherProps } = props;
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(otherProps, ref, $b6c3ddc6086f204d$export$b118023277d4a5c3);
   let state = React__default.useContext($b6c3ddc6086f204d$export$29d84393af70866c);
@@ -333,9 +333,7 @@ function $b6c3ddc6086f204d$var$Radio(props, ref) {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
     ref: inputRef
   })), renderProps.children);
-}
-const $b6c3ddc6086f204d$export$a98f0dcb43a68a25 = /* @__PURE__ */ forwardRef($b6c3ddc6086f204d$var$RadioGroup);
-const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef($b6c3ddc6086f204d$var$Radio);
+});
 /**
  * A simple radio button.
  *
@@ -349,6 +347,7 @@ const $b6c3ddc6086f204d$export$d7b12c4107be0d61 = /* @__PURE__ */ forwardRef($b6
  * @param {string} [props.labelClassName] - Additional classes to add to the label container.
  * @param {boolean} [props.alignEnd] - Whether the label should be aligned to the end.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ * @param {boolean} [props.inlineSubtitle] - If `true`, the subtitle is shown after the label instead of below it.
  *
  * @returns {JSX.Element} The RadioButton component.
  *
@@ -367,6 +366,7 @@ const RadioButton = (props) => {
     design = "default",
     alignEnd,
     children,
+    inlineSubtitle,
     hidden,
     ...rest
   } = props;
@@ -375,51 +375,66 @@ const RadioButton = (props) => {
   }
   const styleClassName = {
     segmented: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-min-h-10",
-      "first:es-uic-rounded-t-lg last:es-uic-rounded-b-lg",
-      "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
+      "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:min-h-10",
+      "es:first:rounded-t-xl es:last:rounded-b-xl",
+      "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+      "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+      "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
     ),
     segmentedHorizontal: clsx(
-      "es-uic-py-1 es-uic-px-1.5 es-uic-border es-uic-border-gray-300 hover:es-uic-bg-gray-50 es-uic-transition es-uic-grow es-uic-min-h-10",
-      "first:es-uic-rounded-l-lg last:es-uic-rounded-r-lg",
-      "focus-visible:es-uic-ring focus-visible:es-uic-ring-teal-500 focus-visible:es-uic-ring-opacity-50 focus-visible:es-uic-z-10"
+      "es:cursor-pointer es:py-1 es:px-1.5 es:border es:border-secondary-300 es:hover:bg-secondary-100/75 es:transition es:grow es:min-h-10",
+      "es:first:rounded-l-xl es:last:rounded-r-xl",
+      "es:focus-visible:ring-2 es:focus-visible:border-accent-500 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+      "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+      "es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50"
     )
   };
   return /* @__PURE__ */ jsx(
     $b6c3ddc6086f204d$export$d7b12c4107be0d61,
     {
       isDisabled: disabled,
-      className: clsx("es-uic-flex es-uic-items-center es-uic-gap-1.5 es-uic-text-sm", styleClassName[design], className),
+      className: clsx("es:group es:flex es:items-center es:gap-1.5 es:text-sm", styleClassName[design], className),
       ...rest,
-      children: ({ isSelected, isFocusVisible }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
         alignEnd && (label || subtitle || icon) && /* @__PURE__ */ jsx(
           RichLabel,
           {
             icon,
             label,
             subtitle,
-            className: labelClassName,
-            fullWidth: true
+            className: clsx("es:ml-1", labelClassName),
+            inlineSubtitle,
+            fullWidth: true,
+            fullSizeSubtitle: true
           }
         ),
         /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
-              "es-uic-flex es-uic-size-5 es-uic-items-center es-uic-justify-center es-uic-rounded-full es-uic-border es-uic-text-gray-600 es-uic-shadow-sm es-uic-transition",
-              isSelected && !disabled && "es-uic-border-teal-600 es-uic-bg-teal-600 es-uic-text-white",
-              isSelected && disabled && "es-uic-border-gray-400 es-uic-bg-gray-400 es-uic-text-white",
-              !isSelected && "es-uic-border-gray-300",
-              !(design == null ? void 0 : design.startsWith("segmented")) && isFocusVisible && "es-uic-ring es-uic-ring-teal-500 es-uic-ring-opacity-50"
+              "es:size-5 es:flex es:items-center es:justify-center",
+              "es:transition es:cursor-pointer",
+              "es:bg-radial es:border es:rounded-full",
+              "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+              "es:any-focus:outline-hidden",
+              !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
+              !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
+              !isSelected && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+              isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
+              isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
+              isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
+              !(design == null ? void 0 : design.startsWith("segmented")) && "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
+              !(design == null ? void 0 : design.startsWith("segmented")) && !isSelected && "es:group-focus-visible:border-accent-500",
+              !(design == null ? void 0 : design.startsWith("segmented")) && !alignEnd && subtitle && "es:mb-auto"
             ),
             children: /* @__PURE__ */ jsx(
               AnimatedVisibility,
               {
                 transition: "scaleFade",
                 visible: isSelected,
-                className: clsx("[&>svg]:es-uic-size-3 [&>svg]:es-uic-stroke-2", disabled && "es-uic-opacity-55"),
+                className: clsx("es:icon:size-3 es:icon:stroke-2", disabled && "es:opacity-55"),
                 noInitial: true,
-                children: /* @__PURE__ */ jsx("div", { className: "es-uic-size-2.5 es-uic-rounded-full es-uic-bg-white es-uic-shadow-sm" })
+                children: /* @__PURE__ */ jsx("div", { className: "es:size-2 es:rounded-full es:bg-white es:shadow-sm" })
               }
             )
           }
@@ -427,10 +442,12 @@ const RadioButton = (props) => {
         !alignEnd && /* @__PURE__ */ jsx(
           RichLabel,
           {
-            icon,
+            icon: alignEnd && icon,
             label,
             subtitle,
-            className: clsx(labelClassName, "[&_>_span_>_svg]:!es-uic-size-5", disabled && "es-uic-opacity-55")
+            className: clsx(labelClassName, subtitle && "es:mt-0.5", "es:[&_>_span_>_svg]:size-5 es:ml-0.5 es:*:space-y-0.5", disabled && "es:opacity-55"),
+            inlineSubtitle,
+            fullSizeSubtitle: true
           }
         ),
         !(icon || label || subtitle) && children
@@ -519,7 +536,7 @@ const RadioButtonGroup = (props) => {
   return /* @__PURE__ */ jsx(
     $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
     {
-      className: clsx("es-uic-w-full", className),
+      className: clsx("es:w-full", className),
       isDisabled: disabled,
       isReadOnly: readOnly,
       onChange,
@@ -540,10 +557,10 @@ const RadioButtonGroup = (props) => {
             "div",
             {
               className: clsx(
-                design === "default" && orientation === "horizontal" && "es-uic-flex es-uic-flex-wrap es-uic-gap-2.5",
-                design === "default" && orientation === "vertical" && "es-uic-flex es-uic-flex-col es-uic-gap-2.5",
-                design === "segmented" && orientation === "vertical" && "es-uic-flex es-uic-flex-col -es-uic-space-y-px",
-                design === "segmented" && orientation === "horizontal" && "es-uic-nowrap es-uic-flex -es-uic-space-x-px"
+                design === "default" && orientation === "horizontal" && "es:flex es:flex-wrap es:gap-2.5",
+                design === "default" && orientation === "vertical" && "es:flex es:flex-col es:gap-2.5",
+                design === "segmented" && orientation === "vertical" && "es:flex es:flex-col es:-space-y-px",
+                design === "segmented" && orientation === "horizontal" && "es:nowrap es:flex es:-space-x-px"
               ),
               children: mappedChildren
             }

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

@@ -38,25 +38,25 @@ const RepeaterItem = (props) => {
       label: isOutOfBounds ? __("Release to delete", "eightshift-ui-components") : label,
       subtitle: isOutOfBounds ? null : subtitle,
       className: clsx(
-        "es-uic-transition",
-        isDragged && "es-uic-border es-uic-border-gray-100 es-uic-bg-white/50 es-uic-shadow-md es-uic-backdrop-blur-lg",
-        isOutOfBounds && "es-uic-border !es-uic-border-red-200 es-uic-bg-red-50 es-uic-shadow-red-500/20 [&_button]:es-uic-invisible [&_svg_path]:es-uic-stroke-red-500"
+        "es:transition",
+        isDragged && "es:border es:border-secondary-100 es:bg-white/50 es:shadow-md es:backdrop-blur-lg",
+        isOutOfBounds && "es:border es:border-red-200! es:bg-red-50 es:shadow-red-500/20 es:[&_button]:invisible es:[&_svg_path]:stroke-red-500"
       ),
-      labelClassName: clsx(className, isDragged ? "es-uic-cursor-grabbing" : "es-uic-cursor-grab"),
+      labelClassName: clsx(className, isDragged ? "es:cursor-grabbing" : "es:cursor-grab"),
       headerClassName: clsx(
-        "es-uic-transition es-uic-rounded-md",
-        isSelected && "es-uic-bg-teal-50 es-uic-border-teal-100",
-        "group-focus:es-uic-outline-none group-focus-visible:es-uic-ring group-focus-visible:es-uic-ring-teal-500 group-focus-visible:es-uic-ring-opacity-50"
+        "es:transition es:rounded-md",
+        isSelected && "es:bg-accent-50 es:border-accent-100",
+        "es:group-focus:outline-hidden es:group-focus-visible:ring es:group-focus-visible:ring-accent-500/50"
       ),
       customOpenButton: ({ open, toggleOpen, tooltip, disabled }) => {
-        return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-gap-px", children: [
+        return /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:gap-px", children: [
           /* @__PURE__ */ jsxs(
             Menu,
             {
               hidden: noMenuButton,
               triggerIcon: icons.moreH,
               triggerProps: {
-                className: "[&>svg]:es-uic-size-5 [&>svg]:es-uic-shrink-0",
+                className: "es:icon:size-5 es:icon:shrink-0",
                 size: "small",
                 type: "ghost"
               },
@@ -93,7 +93,7 @@ const RepeaterItem = (props) => {
               onPress: toggleOpen,
               tooltip,
               disabled,
-              className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", open && "[&>svg]:-es-uic-scale-y-100"),
+              className: clsx("es:icon:size-5 es:icon:transition-transform", open && "es:icon:-scale-y-100"),
               size: "small"
             }
           )

package/dist/components/repeater/repeater.js

@@ -7,7 +7,7 @@ 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 { L as List, a as arrayRemove, b as arrayMove } from "../../List-C7L49CxW.js";
+import { L as List, a as arrayRemove, b as arrayMove } from "../../List-Br274SP1.js";
 const fixIds = (items, itemIdBase) => {
   return items == null ? void 0 : items.map((item, i) => ({
     ...item,
@@ -120,12 +120,12 @@ const Repeater = (props) => {
             },
             size: "small",
             icon: icons.add,
-            className: clsx("[&>svg]:es-uic-size-4", !hideEmptyState && items.length < 1 && "es-uic-invisible"),
+            className: clsx("es:icon:size-4", !hideEmptyState && items.length < 1 && "es:invisible"),
             tooltip: __("Add item", "eightshift-ui-components"),
             disabled: addDisabled || !canAdd
           }
         ),
-        addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es-uic-invisible"), children: addButton({
+        addButton && /* @__PURE__ */ jsx("div", { className: clsx(!hideEmptyState && items.length < 1 && "es:invisible"), children: addButton({
           addItem: (additional = {}) => {
             const newItem = { id: `${itemIdBase}${items.length + 1}`, ...addDefaultItem, ...additional };
             onChange([...items, newItem]);
@@ -136,7 +136,7 @@ const Repeater = (props) => {
           disabled: addDisabled
         }) })
       ] }),
-      className: "es-uic-w-full",
+      className: "es:w-full",
       children: [
         /* @__PURE__ */ jsx(
           List,
@@ -148,7 +148,7 @@ const Repeater = (props) => {
               return /* @__PURE__ */ jsx(
                 "ul",
                 {
-                  className: clsx("es-uic-w-full es-uic-list-none", className),
+                  className: clsx("es:w-full es:list-none", className),
                   ...rest,
                   children: children2
                 },
@@ -160,7 +160,7 @@ const Repeater = (props) => {
               return /* @__PURE__ */ jsx(
                 "li",
                 {
-                  className: "es-uic-group es-uic-w-full es-uic-list-none focus:es-uic-outline-none",
+                  className: "es:group es:w-full es:list-none es:focus:outline-hidden",
                   ...rest,
                   children: /* @__PURE__ */ jsx(
                     RepeaterContext.Provider,
@@ -212,7 +212,7 @@ const Repeater = (props) => {
         ),
         /* @__PURE__ */ jsxs(AnimatedVisibility, { visible: items.length < 1, children: [
           emptyState,
-          !hideEmptyState && /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-center es-uic-gap-2 es-uic-rounded-md es-uic-border es-uic-border-dashed es-uic-border-gray-300 es-uic-p-4 es-uic-text-center es-uic-text-sm es-uic-text-gray-400", children: [
+          !hideEmptyState && /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-col es:items-center es:gap-2 es:rounded-md es:border es:border-dashed es:border-secondary-300 es:p-4 es:text-center es:text-sm es:text-secondary-400", children: [
             !addButton && /* @__PURE__ */ jsx(
               Button,
               {
@@ -225,7 +225,7 @@ const Repeater = (props) => {
                 },
                 size: "small",
                 icon: icons.add,
-                className: "[&>svg]:es-uic-size-4",
+                className: "es:icon:size-4",
                 disabled: addDisabled,
                 children: __("Add item", "eightshift-ui-components")
               }

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

@@ -12,7 +12,7 @@ import { Spacer } from "../spacer/spacer.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { OptionSelect } from "../option-select/option-select.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-Cld9rkzJ.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../Text-aOUPPvTO.js";
 /**
  * A compact, inline version of `Responsive`. Allows the user to set different values for different breakpoints.
  *
@@ -110,18 +110,18 @@ const MiniResponsive = (props) => {
       DecorativeTooltip,
       {
         placement: "left",
-        className: "es-uic-p-3",
+        className: "es:p-3",
         theme: "light",
         offset: 7.5,
         arrow: true,
-        text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-64 es-uic-p-1", children: [
-          /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-text-balance es-uic-font-semibold es-uic-tabular-nums", children: __("Default", "eightshift-ui-components") }),
-          /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+        text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-64 es:p-1", children: [
+          /* @__PURE__ */ jsx("span", { className: "es:block es:text-balance es:font-semibold es:tabular-nums", children: __("Default", "eightshift-ui-components") }),
+          /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
             !firstMobileFirstOverride && !lastDesktopFirstOverride && __("Always applied, regardless of browser width.", "eightshift-ui-components"),
             firstMobileFirstOverride && !isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or less.", "eightshift-ui-components"), breakpointData[firstMobileFirstOverride] - 1),
             lastDesktopFirstOverride && isDesktopFirst && sprintf(__("Applies when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[lastDesktopFirstOverride.replace("max-", "")])
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto", children: [
+          /* @__PURE__ */ jsxs("div", { className: "es:mx-auto", children: [
             firstMobileFirstOverride && !isDesktopFirst && /* @__PURE__ */ jsx(
               BreakpointPreview,
               {
@@ -164,7 +164,7 @@ const MiniResponsive = (props) => {
             )
           ] })
         ] }),
-        children: /* @__PURE__ */ jsx("div", { className: "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-border-teal-500/10 es-uic-bg-teal-50 es-uic-p-0.5 es-uic-text-teal-800 es-uic-shadow-sm es-uic-shadow-teal-600/25 [&>svg]:es-uic-size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
+        children: /* @__PURE__ */ jsx("div", { className: "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:border-accent-500/10 es:bg-accent-50 es:p-0.5 es:text-accent-800 es:shadow-sm es:shadow-accent-600/25 es:icon:size-5", children: ((_h = icons) == null ? void 0 : _h[overrideIcon]) ?? overrideIcon ?? icons[`screen${upperFirst(isDesktopFirst ? rawBreakpoints.at(-1) : rawBreakpoints.at(0))}`] })
       }
     );
   };
@@ -191,15 +191,15 @@ const MiniResponsive = (props) => {
         /* @__PURE__ */ jsxs(
           TriggeredPopover,
           {
-            triggerButtonIcon: cloneElement(isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2, { className: "!es-uic-size-5" }),
+            triggerButtonIcon: cloneElement(isDesktopFirst ? icons.responsiveOverridesAlt : icons.responsiveOverridesAlt2, { className: "es:size-5!" }),
             triggerButtonProps: {
               tooltip: __("Responsive overrides", "eightshift-ui-components"),
-              className: "es-uic-w-7"
+              className: "es:w-7"
             },
-            className: "es-uic-min-w-80 es-uic-divide-y es-uic-divide-gray-200 !es-uic-p-0",
+            className: "es:min-w-80 es:divide-y es:divide-secondary-200 es:p-0!",
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-justify-between es-uic-p-2", children: [
-                /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: "es-uic-block es-uic-text-xs es-uic-text-gray-500", children: __("Responsive overrides", "eightshift-ui-components") }),
+              /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-between es:p-2", children: [
+                /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { className: "es:block es:text-xs es:text-secondary-500", children: __("Responsive overrides", "eightshift-ui-components") }),
                 /* @__PURE__ */ jsx(
                   OptionSelect,
                   {
@@ -222,20 +222,20 @@ const MiniResponsive = (props) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es-uic-space-y-2 es-uic-px-2 es-uic-py-2.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "es:space-y-2 es:px-2 es:py-2.5", children: [
                 !isDesktopFirst && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: clsx(
-                      "es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-                      innerContentAlign === "start" && "es-uic-justify-items-start",
-                      innerContentAlign === "center" && "es-uic-justify-items-center",
-                      innerContentAlign === "end" && "es-uic-justify-items-end",
-                      innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                      "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                      innerContentAlign === "start" && "es:justify-items-start",
+                      innerContentAlign === "center" && "es:justify-items-center",
+                      innerContentAlign === "end" && "es:justify-items-end",
+                      innerContentAlign === "stretch" && "es:justify-items-stretch"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(DefaultTooltip, {}),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                      /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                         breakpoint: "_default",
                         currentValue: value == null ? void 0 : value["_default"],
                         handleChange: (newValue) => onChange({
@@ -260,11 +260,11 @@ const MiniResponsive = (props) => {
                     "div",
                     {
                       className: clsx(
-                        "es-uic-grid es-uic-grid-cols-[minmax(0,_auto),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-                        innerContentAlign === "start" && "es-uic-justify-items-start",
-                        innerContentAlign === "center" && "es-uic-justify-items-center",
-                        innerContentAlign === "end" && "es-uic-justify-items-end",
-                        innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                        "es:grid es:grid-cols-[minmax(0,auto)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                        innerContentAlign === "start" && "es:justify-items-start",
+                        innerContentAlign === "center" && "es:justify-items-center",
+                        innerContentAlign === "end" && "es:justify-items-end",
+                        innerContentAlign === "stretch" && "es:justify-items-stretch"
                       ),
                       children: [
                         /* @__PURE__ */ jsx(
@@ -274,9 +274,9 @@ const MiniResponsive = (props) => {
                             theme: "light",
                             offset: 7.5,
                             arrow: true,
-                            text: /* @__PURE__ */ jsxs("div", { className: "es-uic-max-w-96 es-uic-p-1", children: [
-                              /* @__PURE__ */ jsx("span", { className: "es-uic-block es-uic-font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
-                              /* @__PURE__ */ jsxs("span", { className: "es-uic-block es-uic-text-balance es-uic-tabular-nums", children: [
+                            text: /* @__PURE__ */ jsxs("div", { className: "es:max-w-96 es:p-1", children: [
+                              /* @__PURE__ */ jsx("span", { className: "es:block es:font-semibold", children: ((_a = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _a.label) ?? upperFirst(realBreakpointName) }),
+                              /* @__PURE__ */ jsxs("span", { className: "es:block es:text-balance es:tabular-nums", children: [
                                 !isDesktopFirst && /* @__PURE__ */ jsxs(Fragment, { children: [
                                   !belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(__("Applied when the browser width is %dpx or more.", "eightshift-ui-components"), breakpointData[realBreakpointName]),
                                   belowOverride && typeof value[breakpoint] !== "undefined" && sprintf(
@@ -296,8 +296,8 @@ const MiniResponsive = (props) => {
                                   typeof value[breakpoint] === "undefined" && sprintf(__("Up to %dpx", "eightshift-ui-components"), breakpointData[breakpoint == null ? void 0 : breakpoint.replace("max-", "")])
                                 ] })
                               ] }),
-                              typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es-uic-mt-2 es-uic-block es-uic-font-medium es-uic-italic", children: __("Not set", "eightshift-ui-components") }),
-                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es-uic-mx-auto es-uic-mt-2", children: [
+                              typeof value[breakpoint] === "undefined" && /* @__PURE__ */ jsx("span", { className: "es:mt-2 es:block es:font-medium es:italic", children: __("Not set", "eightshift-ui-components") }),
+                              typeof value[breakpoint] !== "undefined" && /* @__PURE__ */ jsxs("div", { className: "es:mx-auto es:mt-2", children: [
                                 !isDesktopFirst && /* @__PURE__ */ jsx(
                                   BreakpointPreview,
                                   {
@@ -367,8 +367,8 @@ const MiniResponsive = (props) => {
                               "div",
                               {
                                 className: clsx(
-                                  "es-uic-flex es-uic-size-7 es-uic-items-center es-uic-justify-center es-uic-rounded es-uic-border es-uic-p-0.5 es-uic-shadow-sm es-uic-transition-colors [&>svg]:es-uic-size-5",
-                                  typeof value[breakpoint] !== "undefined" ? "es-uic-border-gray-200 es-uic-bg-gray-50 es-uic-text-gray-700" : "es-uic-border-gray-100 es-uic-bg-white es-uic-text-gray-500"
+                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded es:border es:p-0.5 es:shadow-sm es:transition-colors es:icon:size-5",
+                                  typeof value[breakpoint] !== "undefined" ? "es:border-secondary-200 es:bg-secondary-50 es:text-secondary-700" : "es:border-secondary-100 es:bg-white es:text-secondary-500"
                                 ),
                                 children: ((_r = icons) == null ? void 0 : _r[(_q = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _q.icon]) ?? ((_s = breakpointUiData == null ? void 0 : breakpointUiData[realBreakpointName]) == null ? void 0 : _s.icon) ?? ((_t = icons) == null ? void 0 : _t[`screen${upperFirst(realBreakpointName)}`])
                               }
@@ -409,15 +409,15 @@ const MiniResponsive = (props) => {
                   "div",
                   {
                     className: clsx(
-                      "es-uic-grid es-uic-grid-cols-[minmax(0,_1.75rem),_minmax(0,_1fr),_minmax(0,_2.25rem)] es-uic-items-center es-uic-gap-x-2",
-                      innerContentAlign === "start" && "es-uic-justify-items-start",
-                      innerContentAlign === "center" && "es-uic-justify-items-center",
-                      innerContentAlign === "end" && "es-uic-justify-items-end",
-                      innerContentAlign === "stretch" && "es-uic-justify-items-stretch"
+                      "es:grid es:grid-cols-[minmax(0,1.75rem)_minmax(0,1fr)_minmax(0,2.25rem)] es:items-center es:gap-x-2",
+                      innerContentAlign === "start" && "es:justify-items-start",
+                      innerContentAlign === "center" && "es:justify-items-center",
+                      innerContentAlign === "end" && "es:justify-items-end",
+                      innerContentAlign === "stretch" && "es:justify-items-stretch"
                     ),
                     children: [
                       /* @__PURE__ */ jsx(DefaultTooltip, {}),
-                      /* @__PURE__ */ jsx("div", { className: "es-uic-col-start-2 es-uic-col-end-2", children: children({
+                      /* @__PURE__ */ jsx("div", { className: "es:col-start-2 es:col-end-2", children: children({
                         breakpoint: "_default",
                         currentValue: value == null ? void 0 : value["_default"],
                         handleChange: (newValue) => onChange({
@@ -433,7 +433,7 @@ const MiniResponsive = (props) => {
                   "_default-desktop-first"
                 )
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "es-uic-grid es-uic-grid-cols-[1fr_auto_1fr] es-uic-gap-x-1 es-uic-px-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "es:grid es:grid-cols-[1fr_auto_1fr] es:gap-x-1 es:px-1", children: [
                 /* @__PURE__ */ jsx(
                   TriggeredPopover,
                   {
@@ -441,7 +441,7 @@ const MiniResponsive = (props) => {
                     triggerButtonProps: {
                       disabled: !Object.keys(value).some((key) => !(key == null ? void 0 : key.startsWith("_")) && typeof (value == null ? void 0 : value[key]) !== "undefined"),
                       type: "ghost",
-                      className: "es-uic-my-1"
+                      className: "es:my-1"
                     },
                     children: /* @__PURE__ */ jsx(
                       ResponsivePreview,
@@ -460,7 +460,7 @@ const MiniResponsive = (props) => {
                 /* @__PURE__ */ jsx(
                   Spacer,
                   {
-                    className: "*:!es-uic-bg-gray-200",
+                    className: "es:*:bg-secondary-200!",
                     vertical: true,
                     border: true
                   }
@@ -478,7 +478,7 @@ const MiniResponsive = (props) => {
                       onChange(newValue);
                     },
                     type: "ghost",
-                    className: "es-uic-my-1 es-uic-justify-center",
+                    className: "es:my-1 es:justify-center",
                     children: __("Clear all overrides", "eightshift-ui-components")
                   }
                 )