@eightshift/ui-components 1.9.1 → 2.0.1

package/dist/components/color-pickers/solid-color-picker.js

@@ -1,32 +1,32 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { useMemo, useRef, useState, useCallback, forwardRef, useContext, createContext } from "react";
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-2lR5GG9p.js";
-import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-BmaSD6gC.js";
+import { d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-39D0mStj.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dbj6MsFR.js";
-import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, n as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-ChK5oW-0.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-CZxTZUqH.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CGp3guTX.js";
+import { e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, p as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, m as $c87311424ea30a05$export$fedb369cb70207f1, i as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../focusSafely-CiqTTjWy.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-B0HgM8f4.js";
 import { $ as $9446cca9a3875146$export$cb6e0bb50bc19463, a as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-GajL10e1.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-CdZPiDxh.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-WnPbJUyQ.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-DDCE2RPv.js";
-import { b as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-C2xrPFl6.js";
-import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-CgEZmlNY.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DtrQ3I5U.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BurzRhbk.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-D0lsNfi4.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-huHsqqMP.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DCmTv_Qw.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8G0GMsc.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cld9rkzJ.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BxnASugK.js";
-import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-D_Azw6A1.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BlTDSskG.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-C_2wWraB.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-NpLM2e3G.js";
+import { b as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-087cO5Ct.js";
+import { e as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, f as $e8a7022cf87cba2a$export$36da96379f79f245, g as $bcca50147b47f54d$export$56b2c08e277f365, h as $47b897dc8cdb026b$export$8d15029008292ae, d as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-BZNaJylD.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-CDOs-GuR.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BQ4TF72x.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-ClTQo25k.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-D7A6s7O5.js";
+import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Se0m3ubj.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Ca9uelsn.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-aOUPPvTO.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-BWwmZQE2.js";
+import { $ as $de67e98908f0c6ee$export$7f629e9dc1ecf37c, b as $d2e8511e6f209edf$export$e908e06f4b8e3402, c as $7d0a636d7a4dcefd$export$2123ff2b87c81ca, d as $d841c8010a73d545$export$4f384c9210e583c3, a as $81397a9303501bda$export$23f548e970bdf099 } from "../../useNumberField-Bm6_BVl9.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { _ as __ } from "../../default-i18n-CM1-Xvzf.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
-import { Spacer } from "../spacer/spacer.js";
+import { Tabs, TabList, Tab, TabPanel } from "../tabs/tabs.js";
 const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#ffffff");
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
   let { value, defaultValue, colorSpace, xChannel, yChannel, onChange, onChangeEnd } = props;
@@ -971,7 +971,7 @@ function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
   }, state, inputRef);
 }
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
-function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
+const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef(function ColorThumb(props, ref) {
   let { state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false } = useContext($e2b71ec1d6016406$export$c80c0ea2ca5cb846);
   let { focusProps, isFocused, isFocusVisible } = $f7dceffc5ad7768b$export$4e328f61c538687f();
   let { hoverProps, isHovered } = $6179b936705e76d3$export$ae780daf29e6d456(props);
@@ -1011,10 +1011,9 @@ function $e2b71ec1d6016406$var$ColorThumb(props, ref) {
     ...yInputProps,
     ...focusProps
   }), renderProps.children);
-}
-const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef($e2b71ec1d6016406$var$ColorThumb);
+});
 const $0de070065d44825d$export$6b32221de49982e = /* @__PURE__ */ createContext(null);
-function $0de070065d44825d$var$ColorArea(props, ref) {
+const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef(function ColorArea(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$ebe63fadcdce34ed);
   let inputXRef = useRef(null);
   let inputYRef = useRef(null);
@@ -1063,10 +1062,9 @@ function $0de070065d44825d$var$ColorArea(props, ref) {
       ]
     ]
   }, renderProps.children));
-}
-const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef($0de070065d44825d$var$ColorArea);
+});
 const $3ada01a82feafb94$export$96b6d32b05a1a8ed = /* @__PURE__ */ createContext(null);
-function $3ada01a82feafb94$var$ColorField(props, ref) {
+const $3ada01a82feafb94$export$b865d4358897bb17 = /* @__PURE__ */ forwardRef(function ColorField(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$44644b8a16031b5b);
   if (props.channel) return /* @__PURE__ */ React__default.createElement($3ada01a82feafb94$var$ColorChannelField, {
     ...props,
@@ -1077,8 +1075,7 @@ function $3ada01a82feafb94$var$ColorField(props, ref) {
     ...props,
     forwardedRef: ref
   });
-}
-const $3ada01a82feafb94$export$b865d4358897bb17 = /* @__PURE__ */ forwardRef($3ada01a82feafb94$var$ColorField);
+});
 function $3ada01a82feafb94$var$ColorChannelField(props) {
   let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   let state = $31a863bb88e75dd6$export$b9fc0d69c9190c4a({
@@ -1173,7 +1170,7 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
   }));
 }
 const $1cca5300a3c2e7f9$export$c7fad7ea00194428 = /* @__PURE__ */ createContext(null);
-function $1cca5300a3c2e7f9$var$ColorSlider(props, ref) {
+const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(function ColorSlider(props, ref) {
   [props, ref] = $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, $4e85f108e88277b8$export$717b2c0a523a0b53);
   let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   let state = $25a25ac0d1624665$export$57bc203e1c9c6d44({
@@ -1248,8 +1245,7 @@ function $1cca5300a3c2e7f9$var$ColorSlider(props, ref) {
     "data-orientation": state.orientation,
     "data-disabled": state.isDisabled || void 0
   }));
-}
-const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef($1cca5300a3c2e7f9$var$ColorSlider);
+});
 /**
  * A solid color picker.
  *
@@ -1294,10 +1290,15 @@ const SolidColorPicker = (props) => {
     onChange(color2 == null ? void 0 : color2.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
   };
   const valueInputClassName = clsx(
-    "es-uic-h-8 es-uic-w-12 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-tabular-nums es-uic-text-sm es-uic-shadow-sm es-uic-transition es-uic-text-right selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950",
-    "focus:es-uic-outline-none 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:h-8 es:w-12",
+    "es:tabular-nums es:font-mono",
+    "es:border es:rounded-lg es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+    "es:any-focus:outline-hidden",
+    "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+    "es:focus-visible:border-accent-500",
+    "es:inset-ring es:inset-ring-secondary-100"
   );
-  return /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-flex-col es-uic-items-center es-uic-gap-2", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-col es:items-center es:gap-2", children: [
     /* @__PURE__ */ jsx(
       $0de070065d44825d$export$b2103f68a961418e,
       {
@@ -1305,24 +1306,14 @@ const SolidColorPicker = (props) => {
         xChannel: "saturation",
         yChannel: "lightness",
         className: clsx(
-          "es-uic-size-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm es-uic-transition",
-          '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
-          "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
+          "es:size-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm es:transition",
+          'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+          "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
         ),
         onChange: handleChange,
         onChangeEnd: handleChangeEnd,
         isDisabled: disabled,
-        children: /* @__PURE__ */ jsx(
-          $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
-          {
-            className: clsx(
-              "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
-              "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
-              "focus-visible:!-es-uic-translate-x-1/2 focus-visible:!-es-uic-translate-y-1/2 focus-visible:!es-uic-scale-125",
-              "disabled:es-uic-invisible"
-            )
-          }
-        )
+        children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:size-5 es:rounded-full es:transition es:dragging:scale-110! es:border es:border-white es:shadow-[0_0_0_1px_black] es:disabled:invisible" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1336,22 +1327,11 @@ const SolidColorPicker = (props) => {
           $6f909507e6374d18$export$105594979f116971,
           {
             className: clsx(
-              "es-uic-h-7 es-uic-w-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
-              '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
-              "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
+              "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
+              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
-            children: /* @__PURE__ */ jsx(
-              $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
-              {
-                className: clsx(
-                  "es-uic-top-3.25",
-                  "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
-                  "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
-                  "focus-visible:!-es-uic-translate-x-1/2 focus-visible:!-es-uic-translate-y-1/2 focus-visible:!es-uic-scale-125",
-                  "disabled:es-uic-invisible"
-                )
-              }
-            )
+            children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:dragging:scale-110! es:disabled:invisible" })
           }
         )
       }
@@ -1367,9 +1347,9 @@ const SolidColorPicker = (props) => {
           $6f909507e6374d18$export$105594979f116971,
           {
             className: clsx(
-              "es-uic-h-7 es-uic-w-48 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-shadow-sm",
-              '[&:has(>_[data-focus-visible="true"])]:es-uic-ring [&:has(>_[data-focus-visible="true"])]:es-uic-ring-teal-500 [&:has(>_[data-focus-visible="true"])]:es-uic-ring-opacity-50',
-              "disabled:!es-uic-bg-gradient-to-r disabled:es-uic-from-white disabled:es-uic-to-gray-100"
+              "es:h-7 es:w-48 es:rounded-md es:border es:border-secondary-300 es:shadow-sm",
+              'es:[&:has(>_[data-focus-visible="true"])]:ring es:[&:has(>_[data-focus-visible="true"])]:ring-accent-500/50',
+              "es:disabled:bg-linear-to-r! es:disabled:from-white es:disabled:to-secondary-100"
             ),
             style: () => {
               const startColor = color.clone().withChannelValue("alpha", 0).toString("hsla");
@@ -1378,23 +1358,12 @@ const SolidColorPicker = (props) => {
                 background: `linear-gradient(to right, ${startColor}, ${endColor}), repeating-conic-gradient(rgb(204, 204, 204) 0%, rgb(204, 204, 204) 25%, white 0%, white 50%) 50% center / 14px 14px`
               };
             },
-            children: /* @__PURE__ */ jsx(
-              $e2b71ec1d6016406$export$a3cc47cee1c1ccc,
-              {
-                className: clsx(
-                  "es-uic-top-3.25",
-                  "es-uic-size-5 es-uic-rounded-full es-uic-border es-uic-border-white es-uic-shadow-[0_0_0_1px_black] es-uic-transition",
-                  "dragging:!-es-uic-translate-x-1/2 dragging:!-es-uic-translate-y-1/2 dragging:!es-uic-scale-110",
-                  "focus-visible:!-es-uic-translate-x-1/2 focus-visible:!-es-uic-translate-y-1/2 focus-visible:!es-uic-scale-125",
-                  "disabled:es-uic-invisible"
-                )
-              }
-            )
+            children: /* @__PURE__ */ jsx($e2b71ec1d6016406$export$a3cc47cee1c1ccc, { className: "es:top-3.25 es:size-5 es:rounded-full es:border es:border-white es:shadow-[0_0_0_1px_black] es:transition es:disabled:invisible" })
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "es-uic-flex es-uic-items-center es-uic-justify-center es-uic-gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-center", children: [
       /* @__PURE__ */ jsx(
         $3ada01a82feafb94$export$b865d4358897bb17,
         {
@@ -1406,8 +1375,14 @@ const SolidColorPicker = (props) => {
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: clsx(
-                "es-uic-h-9 es-uic-w-20 es-uic-rounded-md es-uic-border es-uic-border-gray-300 es-uic-p-2 es-uic-text-sm es-uic-tabular-nums es-uic-shadow-sm es-uic-transition",
-                "focus:es-uic-outline-none 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:h-9 es:w-20",
+                "es:tabular-nums es:font-mono",
+                "es:border es:border-secondary-300 es:p-2 es:text-sm es:shadow-xs es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                "es:any-focus:outline-hidden",
+                "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50 es:focus-visible:z-10",
+                "es:focus-visible:border-accent-500",
+                "es:inset-ring es:inset-ring-secondary-100",
+                noAdvancedOptions ? "es:rounded-lg" : "es:rounded-l-lg"
               )
             }
           )
@@ -1416,180 +1391,173 @@ const SolidColorPicker = (props) => {
       /* @__PURE__ */ jsxs(
         TriggeredPopover,
         {
-          triggerButtonIcon: icons.options,
-          className: "es-uic-w-48 es-uic-space-y-1 es-uic-p-2",
+          triggerButtonIcon: icons.dropdownCaretAlt,
+          className: "es:w-52 es:p-3",
           triggerButtonProps: {
             disabled,
-            tooltip: __("Advanced color options", "eightshift-ui-components")
+            tooltip: __("Advanced color options", "eightshift-ui-components"),
+            className: "es:rounded-l-none es:rounded-r-l es:-ml-px es:w-6 es:icon:size-4.5!"
           },
           hidden: noAdvancedOptions,
           children: [
-            /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es-uic-text-sm", children: __("Advanced color options", "eightshift-ui-components") }),
-            /* @__PURE__ */ jsx(
-              Spacer,
-              {
-                border: true,
-                text: "RGB"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "red",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+            /* @__PURE__ */ jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "es:text-sm es:tracking-tight es:mb-2 es:inline-block", children: __("Advanced color options", "eightshift-ui-components") }),
+            /* @__PURE__ */ jsxs(Tabs, { type: "pillInverse", children: [
+              /* @__PURE__ */ jsxs(TabList, { children: [
+                /* @__PURE__ */ jsx(Tab, { children: "RGB" }),
+                /* @__PURE__ */ jsx(Tab, { children: "HSL" }),
+                /* @__PURE__ */ jsx(Tab, { children: "HSB" })
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Red", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "red",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Red", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "green",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Green", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "green",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Green", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "blue",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Blue", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "rgba" : "rgb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "blue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Blue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
                 )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Spacer,
-              {
-                border: true,
-                text: "HSL"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "hue",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Hue", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "hue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Hue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "saturation",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Saturation", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "saturation",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Saturation", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "lightness",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Lightness", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsla" : "hsl"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "lightness",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Lightness", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
                 )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Spacer,
-              {
-                border: true,
-                text: "HSB"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "hue",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+              ] }),
+              /* @__PURE__ */ jsxs(TabPanel, { children: [
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Hue", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "hue",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Hue", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "saturation",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Saturation", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "saturation",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Saturation", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $3ada01a82feafb94$export$b865d4358897bb17,
-              {
-                value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
-                onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
-                channel: "brightness",
-                children: /* @__PURE__ */ jsx(
-                  BaseControl,
+                ),
+                /* @__PURE__ */ jsx(
+                  $3ada01a82feafb94$export$b865d4358897bb17,
                   {
-                    label: __("Brightness", "eightshift-ui-components"),
-                    inline: true,
-                    children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    value: color == null ? void 0 : color.toFormat(allowTransparency ? "hsba" : "hsb"),
+                    onChange: (color2) => handleChange(color2 == null ? void 0 : color2.toFormat("hsl")),
+                    channel: "brightness",
+                    children: /* @__PURE__ */ jsx(
+                      BaseControl,
+                      {
+                        label: __("Brightness", "eightshift-ui-components"),
+                        inline: true,
+                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                      }
+                    )
                   }
                 )
-              }
-            )
+              ] })
+            ] })
           ]
         }
       )

package/dist/components/component-toggle/component-toggle.js

@@ -60,7 +60,7 @@ const ComponentToggle = (props) => {
     controlOnly,
     expandButtonDisabled,
     hideUseToggleOnExpand,
-    contentClassName = "es-uic-space-y-2.5",
+    contentClassName = "es:space-y-2.5",
     design = "default",
     hidden
   } = props;
@@ -89,12 +89,12 @@ const ComponentToggle = (props) => {
         TriggeredPopover,
         {
           triggerButtonProps: {
-            className: "es-uic-w-5.5 es-uic-stroke-[1.25]",
+            className: "es:w-5.5 es:stroke-[1.25]",
             tooltip: optionsLabel,
             disabled: !useComponent
           },
           triggerButtonIcon: icons.dropdownCaretAlt,
-          className: clsx("es-uic-w-[18.5rem] es-uic-p-2", contentClassName),
+          className: clsx("es:w-[18.5rem] es:p-2", contentClassName),
           children: [
             /* @__PURE__ */ jsx(Spacer, { text: optionsLabel }),
             children