@eightshift/ui-components 5.6.1 → 6.0.0

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

@@ -1,30 +1,29 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useState, useMemo, useRef, useCallback, forwardRef, createContext, useContext } from "react";
+import $dbSRa$react__default, { useState, useMemo, useRef, useCallback, forwardRef, createContext, useContext } from "react";
 import { d as $4e85f108e88277b8$export$ebe63fadcdce34ed, e as $4e85f108e88277b8$export$44644b8a16031b5b, f as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-CJ-HBf0L.js";
-import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-cvK1vxO7.js";
+import { a as $3ef42575df84b30b$export$9d1611c77c2fe928, b as $bdb11010cef70236$export$f680877a34711e37, g as $64fa3d84918910a7$export$4d86445c2cf5e3, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$2881499e37b75b9a, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DGpXyJOJ.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, e as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, n as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-WxFE7lQB.js";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, e as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, n as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, s as $c87311424ea30a05$export$a11b0059900ceec8, w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { a as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, c as $3493a52097159720$exports, C as ColorSwatch } from "../../color-swatch-CFIuSPcO.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-7sOvrqo0.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-Cdxi6JSa.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-yV9VVy9R.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-DfU6bRtH.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-DMOmz986.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-eaZiN2tE.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-CgnIuZJ2.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-B8BgFmIQ.js";
-import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-8yja_IHC.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-AxKZjtFm.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-D16dDfYF.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-CeNsUGWK.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B49ptFDX.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-WUv2PdFO.js";
+import { d as $28f99e3e86e6ec45$export$e5fda3247f5d67f9, e as $e8a7022cf87cba2a$export$36da96379f79f245, f as $bcca50147b47f54d$export$56b2c08e277f365, g as $47b897dc8cdb026b$export$8d15029008292ae, h as $6f909507e6374d18$export$1e7083018727fa60, i as $6f909507e6374d18$export$f1fce0420cc6d8ee, j as $6f909507e6374d18$export$6189c2744041d8f8, a as $6f909507e6374d18$export$105594979f116971 } from "../../Slider-CL5CM9S8.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BQvmiUqb.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-NETP-8H8.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-DTUuKFiI.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DwBG6m1U.js";
+import { b as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $a049562f99e7db0e$export$f9c6924e160136d1, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNksOWg.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-D8a3eYb-.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-ztX6G1zR.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-D2fUHql3.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidation-DQeXkyLm.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-DBm-GqWM.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.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;
@@ -1014,7 +1013,7 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef(func
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(thumbProps, hoverProps, DOMProps),
     ...renderProps,
     ref,
@@ -1023,11 +1022,11 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef(func
     "data-focused": isFocused || void 0,
     "data-focus-visible": isFocusVisible || void 0,
     "data-disabled": isDisabled || void 0
-  }, /* @__PURE__ */ React__default.createElement("input", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     ref: inputXRef,
     ...xInputProps,
     ...focusProps
-  }), yInputProps && /* @__PURE__ */ React__default.createElement("input", {
+  }), yInputProps && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     ref: inputYRef,
     ...yInputProps,
     ...focusProps
@@ -1058,12 +1057,12 @@ const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef(fun
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement("div", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ref,
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorAreaProps, renderProps),
     slot: props.slot || void 0,
     "data-disabled": props.isDisabled || void 0
-  }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $0de070065d44825d$export$6b32221de49982e,
@@ -1087,12 +1086,12 @@ const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef(fun
 const $3ada01a82feafb94$export$96b6d32b05a1a8ed = /* @__PURE__ */ createContext(null);
 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, {
+  if (props.channel) return /* @__PURE__ */ $dbSRa$react__default.createElement($3ada01a82feafb94$var$ColorChannelField, {
     ...props,
     channel: props.channel,
     forwardedRef: ref
   });
-  else return /* @__PURE__ */ React__default.createElement($3ada01a82feafb94$var$HexColorField, {
+  else return /* @__PURE__ */ $dbSRa$react__default.createElement($3ada01a82feafb94$var$HexColorField, {
     ...props,
     forwardedRef: ref
   });
@@ -1111,7 +1110,7 @@ function $3ada01a82feafb94$var$ColorChannelField(props) {
     label,
     validationBehavior: (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : "native"
   }, state, inputRef);
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && /* @__PURE__ */ React__default.createElement("input", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($dbSRa$react__default.Fragment, null, $3ada01a82feafb94$var$useChildren(props, state, props.forwardedRef, inputProps, inputRef, labelProps, labelRef, descriptionProps, errorMessageProps, validation), props.name && /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     type: "hidden",
     name: props.name,
     form: props.form,
@@ -1149,7 +1148,7 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $3ada01a82feafb94$export$96b6d32b05a1a8ed,
@@ -1191,7 +1190,7 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
         validation
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...DOMProps,
     ...renderProps,
     ref,
@@ -1209,8 +1208,8 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
     ...props,
     locale
   });
-  let trackRef = React__default.useRef(null);
-  let inputRef = React__default.useRef(null);
+  let trackRef = $dbSRa$react__default.useRef(null);
+  let inputRef = $dbSRa$react__default.useRef(null);
   let [labelRef, label] = $64fa3d84918910a7$export$9d4c57ee4c6ffdd8(!props["aria-label"] && !props["aria-labelledby"]);
   let { trackProps, thumbProps, inputProps, labelProps, outputProps } = $40af666d6c251e36$export$106b7a4e66508f66({
     ...props,
@@ -1231,7 +1230,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
     global: true
   });
   delete DOMProps.id;
-  return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
       [
         $1cca5300a3c2e7f9$export$c7fad7ea00194428,
@@ -1271,7 +1270,7 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
         }
       ]
     ]
-  }, /* @__PURE__ */ React__default.createElement("div", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("div", {
     ...DOMProps,
     ...renderProps,
     ref,
@@ -1324,13 +1323,25 @@ const SolidColorPicker = (props) => {
     onChange(color2?.toString(outputFormat ?? (allowTransparency ? "hexa" : "hex")));
   };
   const valueInputClassName = clsx(
-    "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-sm es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+    "es:leading-none",
+    "es:max-w-14",
+    "es:min-h-9",
+    "es:px-3",
+    "es:font-mono es:text-12",
+    "es:rounded-lg es:focus:rounded-xl es:aria-[controls]:rounded-xl",
+    "es:transition-plus",
     "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"
+    "es:inset-ring",
+    "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
+    "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
+    "es:focus:placeholder:text-surface-400",
+    "es:inset-ring-secondary-100",
+    "es:focus:text-accent-950",
+    "es:text-secondary-900",
+    "es:placeholder:text-secondary-500/80",
+    "es:bg-secondary-100 es:focus:bg-surface-50",
+    "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200",
+    "es:selection:bg-surface-100 es:selection:text-accent-800"
   );
   return /* @__PURE__ */ jsxs("div", { className: "es:flex es:flex-col es:items-center es:gap-2", children: [
     /* @__PURE__ */ jsx(
@@ -1397,7 +1408,7 @@ const SolidColorPicker = (props) => {
         )
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "es:flex es:items-center es:justify-center es:gap-0.75", children: [
       /* @__PURE__ */ jsx(
         $3ada01a82feafb94$export$b865d4358897bb17,
         {
@@ -1409,14 +1420,27 @@ const SolidColorPicker = (props) => {
             $3985021b0ad6602f$export$f5b8910cec6cf069,
             {
               className: clsx(
-                "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-sm es:transition es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                "es:leading-none",
+                "es:w-20",
+                "es:transition-plus",
                 "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"
+                "es:inset-ring",
+                "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/30",
+                "es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500",
+                "es:focus:placeholder:text-surface-400",
+                "es:h-8",
+                "es:px-3",
+                "es:font-mono es:text-12",
+                "es:bg-white",
+                "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+                "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+                "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400",
+                "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+                "es:hover:placeholder:text-surface-400",
+                "es:placeholder:text-secondary-400",
+                "es:shadow-xs es:shadow-black/5",
+                "es:rounded-lg es:focus:rounded-xl",
+                "es:border-none!"
               )
             }
           )
@@ -1430,168 +1454,246 @@ const SolidColorPicker = (props) => {
           triggerButtonProps: {
             disabled,
             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!"
+            className: "es:w-6 es:h-8 es:icon:size-4.5!"
           },
           hidden: noAdvancedOptions,
           children: [
-            /* @__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: "pillCompactInverse", 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,
-                  {
-                    value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "rgba" : "rgb"),
-                    onChange: (color2) => handleChange(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__ */ jsxs(TabPanel, { children: [
-                /* @__PURE__ */ jsx(
-                  $3ada01a82feafb94$export$b865d4358897bb17,
-                  {
-                    value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsla" : "hsl"),
-                    onChange: (color2) => handleChange(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__ */ jsxs(TabPanel, { children: [
-                /* @__PURE__ */ jsx(
-                  $3ada01a82feafb94$export$b865d4358897bb17,
-                  {
-                    value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(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?.toFormat(allowTransparency ? "hsba" : "hsb"),
-                    onChange: (color2) => handleChange(color2?.toFormat("hsl")),
-                    channel: "brightness",
-                    children: /* @__PURE__ */ jsx(
-                      BaseControl,
-                      {
-                        label: __("Brightness", "eightshift-ui-components"),
-                        inline: true,
-                        children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
-                      }
-                    )
-                  }
-                )
-              ] })
-            ] })
+            /* @__PURE__ */ jsxs(BaseControl, { label: "RGB", children: [
+              /* @__PURE__ */ jsx(
+                $3ada01a82feafb94$export$b865d4358897bb17,
+                {
+                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                  channel: "red",
+                  children: /* @__PURE__ */ jsx(
+                    BaseControl,
+                    {
+                      icon: /* @__PURE__ */ jsx(
+                        ColorSwatch,
+                        {
+                          color: "#ff0000",
+                          className: "es:size-5!",
+                          flat: true
+                        }
+                      ),
+                      label: __("Red", "eightshift-ui-components"),
+                      inline: true,
+                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                $3ada01a82feafb94$export$b865d4358897bb17,
+                {
+                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                  channel: "green",
+                  children: /* @__PURE__ */ jsx(
+                    BaseControl,
+                    {
+                      icon: /* @__PURE__ */ jsx(
+                        ColorSwatch,
+                        {
+                          color: "#00ff00",
+                          className: "es:size-5!",
+                          flat: true
+                        }
+                      ),
+                      label: __("Green", "eightshift-ui-components"),
+                      inline: true,
+                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                $3ada01a82feafb94$export$b865d4358897bb17,
+                {
+                  value: color?.toFormat(allowTransparency ? "rgba" : "rgb"),
+                  onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                  channel: "blue",
+                  children: /* @__PURE__ */ jsx(
+                    BaseControl,
+                    {
+                      icon: /* @__PURE__ */ jsx(
+                        ColorSwatch,
+                        {
+                          color: "#0000ff",
+                          className: "es:size-5!",
+                          flat: true
+                        }
+                      ),
+                      label: __("Blue", "eightshift-ui-components"),
+                      inline: true,
+                      children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs(
+              BaseControl,
+              {
+                label: "HSL",
+                className: "es:mt-3",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "hue",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Hue", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "saturation",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Saturation", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsla" : "hsl"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "lightness",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Lightness", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              BaseControl,
+              {
+                label: "HSB",
+                className: "es:mt-3",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "hue",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta)",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Hue", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "saturation",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, var(--es-color-surface-400), var(--es-color-accent-500))",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Saturation", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    $3ada01a82feafb94$export$b865d4358897bb17,
+                    {
+                      value: color?.toFormat(allowTransparency ? "hsba" : "hsb"),
+                      onChange: (color2) => handleChange(color2?.toFormat("hsl")),
+                      channel: "brightness",
+                      children: /* @__PURE__ */ jsx(
+                        BaseControl,
+                        {
+                          icon: /* @__PURE__ */ jsx(
+                            ColorSwatch,
+                            {
+                              gradient: "linear-gradient(to right, var(--es-color-secondary-50), var(--es-color-secondary-100), var(--es-color-secondary-200), var(--es-color-secondary-300), var(--es-color-secondary-400), var(--es-color-secondary-500), var(--es-color-secondary-600), var(--es-color-secondary-700), var(--es-color-secondary-800), var(--es-color-secondary-900))",
+                              className: "es:size-5!",
+                              flat: true
+                            }
+                          ),
+                          label: __("Brightness", "eightshift-ui-components"),
+                          inline: true,
+                          children: /* @__PURE__ */ jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: valueInputClassName })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
       )