@eightshift/ui-components 1.0.6 → 1.1.0

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

@@ -1,30 +1,30 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { forwardRef, useContext, createContext, useMemo, useRef, useState, useCallback } from "react";
 import { a as $4e85f108e88277b8$export$ebe63fadcdce34ed, b as $4e85f108e88277b8$export$44644b8a16031b5b, c as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-CrNYmadY.js";
-import { c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-DIBzm1e4.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-DG2RfOUr.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-CRx_hYC4.js";
-import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-B0hyd-S4.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-Ctkp0HDc.js";
-import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-rWqELA8W.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BRZdHY-4.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-C7E5SkOi.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-aHn6-wRk.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-CHfpEdlE.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-C5U5N7uM.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BAcFg5GO.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-WsEL47qR.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BPJVSUyp.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-ILxgMZy5.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BJA4rmIo.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-9x5iLJ-Y.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-Cyxp9ewv.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-CdYmOaXI.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 "../../useNumberFieldState-ZH2Qyyxh.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as $64fa3d84918910a7$export$4d86445c2cf5e3, d as $3ef42575df84b30b$export$9d1611c77c2fe928, e as $bdb11010cef70236$export$f680877a34711e37, a as $64fa3d84918910a7$export$29f1550f4b0d4415, j as $64fa3d84918910a7$export$2881499e37b75b9a, h as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, i as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-Dc35LwuT.js";
+import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-SPRI0-SN.js";
+import { $ as $6179b936705e76d3$export$ae780daf29e6d456, e as $458b0a5536c1a7cf$export$40bfa8c7b0832715, m as $7215afc6de606d6b$export$de79e2c695e052f3, d as $9ab94262bd0047c7$export$420e68273165f4ec, c as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, j as $c87311424ea30a05$export$fedb369cb70207f1, u as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-BS4dllCW.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-Dxaeitoh.js";
+import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-CHmNj-oR.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-exP_9srp.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-CfOtyOe2.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BVWgcyGO.js";
+import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-CLmhO94g.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-fULMI0gI.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-4oSz1ItD.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-BQCMno9k.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-Di1zXprL.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-J1-YPbi6.js";
+import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CX_rocyZ.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-Bg5O81Wb.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-WqetJduR.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-CthG9Fbc.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 "../../useNumberFieldState-BegO5X6F.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
-import { T as TriggeredPopover } from "../../popover-o2Q28Ljn.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { T as TriggeredPopover } from "../../popover-Dk2o4S7K.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
 const $e2b71ec1d6016406$export$c80c0ea2ca5cb846 = /* @__PURE__ */ createContext(null);
@@ -73,8 +73,7 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef($e2b
 const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f("#ffffff");
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
   let { value, defaultValue, colorSpace, xChannel, yChannel, onChange, onChangeEnd } = props;
-  if (!value && !defaultValue)
-    defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
+  if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
   let [colorValue, setColorState] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value && $799cddbef784668f$export$4cde5df63f53f473(value), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
     colorValue,
@@ -102,14 +101,12 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
   let xValue = color.getChannelValue(channels.xChannel);
   let yValue = color.getChannelValue(channels.yChannel);
   let setXValue = (v) => {
-    if (v === xValue)
-      return;
+    if (v === xValue) return;
     let newColor = color.withChannelValue(channels.xChannel, v);
     setColor(newColor);
   };
   let setYValue = (v) => {
-    if (v === yValue)
-      return;
+    if (v === yValue) return;
     let newColor = color.withChannelValue(channels.yChannel, v);
     setColor(newColor);
   };
@@ -139,8 +136,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         newYValue = $9446cca9a3875146$export$cb6e0bb50bc19463(newYValue, minValueY, maxValueY, stepY);
         newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
       }
-      if (newColor)
-        setColor(newColor);
+      if (newColor) setColor(newColor);
     },
     getThumbPosition() {
       let x = (xValue - minValueX) / (maxValueX - minValueX);
@@ -165,8 +161,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     setDragging(isDragging2) {
       let wasDragging = isDraggingRef.current;
       isDraggingRef.current = isDragging2;
-      if (onChangeEnd && !isDragging2 && wasDragging)
-        onChangeEnd(valueRef.current);
+      if (onChangeEnd && !isDragging2 && wasDragging) onChangeEnd(valueRef.current);
       setDragging(isDragging2);
     },
     isDragging,
@@ -177,8 +172,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
 }
 function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
   let { channel, colorSpace, value, defaultValue, onChange, locale, ...otherProps } = props;
-  if (value == null && defaultValue == null)
-    throw new Error("useColorSliderState requires a value or defaultValue");
+  if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
   let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value && $799cddbef784668f$export$4cde5df63f53f473(value), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
     colorValue,
@@ -194,8 +188,7 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
       setColor(color.withChannelValue(channel, v));
     },
     onChangeEnd(v) {
-      if (props.onChangeEnd)
-        props.onChangeEnd(color.withChannelValue(channel, v));
+      if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
     }
   });
   let { step, pageSize } = color.getChannelRange(channel);
@@ -232,12 +225,11 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
 }
 function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
   return useMemo(() => {
-    if (typeof value === "string")
-      try {
-        return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
-      } catch (err) {
-        return void 0;
-      }
+    if (typeof value === "string") try {
+      return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
+    } catch (err) {
+      return void 0;
+    }
     return value;
   }, [
     value
@@ -296,21 +288,18 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     }
     safelySetColorValue(parsedValue);
     let newColorValue = "";
-    if (colorValue)
-      newColorValue = colorValue.toString("hex");
+    if (colorValue) newColorValue = colorValue.toString("hex");
     setInputValue(newColorValue);
   };
   let increment = () => {
     let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
-    if (newValue === colorValue)
-      setInputValue(newValue.toString("hex"));
+    if (newValue === colorValue) setInputValue(newValue.toString("hex"));
     safelySetColorValue(newValue);
     validation.commitValidation();
   };
   let decrement = () => {
     let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
-    if (newValue === colorValue)
-      setInputValue(newValue.toString("hex"));
+    if (newValue === colorValue) setInputValue(newValue.toString("hex"));
     safelySetColorValue(newValue);
     validation.commitValidation();
   };
@@ -418,8 +407,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction, state, zChannel,
         let channels = state.value.getColorChannels();
         let value = $799cddbef784668f$export$6e865ea70d7724f("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
         let bg = channels.filter((c) => c !== zChannel).map((c) => `linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
-        if (zChannel === "hue")
-          bg.push(value.toString("css"));
+        if (zChannel === "hue") bg.push(value.toString("css"));
         colorAreaStyles = {
           background: bg.join(", ")
         };
@@ -429,8 +417,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction, state, zChannel,
         let channels = state.value.getColorChannels();
         let value = $799cddbef784668f$export$6e865ea70d7724f("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
         let bg = channels.filter((c) => c !== zChannel).map((c) => `linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
-        if (zChannel === "hue")
-          bg.push(value.toString("css"));
+        if (zChannel === "hue") bg.push(value.toString("css"));
         colorAreaStyles = {
           background: bg.join(", ")
         };
@@ -438,8 +425,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction, state, zChannel,
       }
     }
     let { x, y } = state.getThumbPosition();
-    if (direction === "rtl")
-      x = 1 - x;
+    if (direction === "rtl") x = 1 - x;
     let forcedColorAdjustNoneStyle = {
       forcedColorAdjust: "none"
     };
@@ -482,8 +468,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   let { direction, locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   let [focusedInput, setFocusedInput] = useState(null);
   let focusInput = useCallback((inputRef = inputXRef) => {
-    if (inputRef.current)
-      $7215afc6de606d6b$export$de79e2c695e052f3(inputRef.current);
+    if (inputRef.current) $7215afc6de606d6b$export$de79e2c695e052f3(inputRef.current);
   }, [
     inputXRef
   ]);
@@ -544,8 +529,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     onMove({ deltaX, deltaY, pointerType, shiftKey }) {
       var _containerRef_current;
       let { incrementX, decrementX, incrementY, decrementY, xChannelPageStep, xChannelStep: xChannelStep2, yChannelPageStep, yChannelStep: yChannelStep2, getThumbPosition, setColorFromPoint } = state;
-      if (currentPosition.current == null)
-        currentPosition.current = getThumbPosition();
+      if (currentPosition.current == null) currentPosition.current = getThumbPosition();
       let { width, height } = ((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect()) || {
         width: 0,
         height: 0
@@ -554,14 +538,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       if (pointerType === "keyboard") {
         let deltaXValue = shiftKey && xChannelPageStep > xChannelStep2 ? xChannelPageStep : xChannelStep2;
         let deltaYValue = shiftKey && yChannelPageStep > yChannelStep2 ? yChannelPageStep : yChannelStep2;
-        if (deltaX > 0 && direction === "ltr" || deltaX < 0 && direction === "rtl")
-          incrementX(deltaXValue);
-        else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl")
-          decrementX(deltaXValue);
-        else if (deltaY > 0)
-          decrementY(deltaYValue);
-        else if (deltaY < 0)
-          incrementY(deltaYValue);
+        if (deltaX > 0 && direction === "ltr" || deltaX < 0 && direction === "rtl") incrementX(deltaXValue);
+        else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
+        else if (deltaY > 0) decrementY(deltaYValue);
+        else if (deltaY < 0) incrementY(deltaYValue);
         setValueChangedViaKeyboard(valueChanged);
         focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
         setFocusedInput(focusedInput);
@@ -591,16 +571,13 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   let isOnColorArea = useRef(false);
   let { moveProps: movePropsContainer } = $e8a7022cf87cba2a$export$36da96379f79f245({
     onMoveStart() {
-      if (isOnColorArea.current)
-        moveHandler.onMoveStart();
+      if (isOnColorArea.current) moveHandler.onMoveStart();
     },
     onMove(e) {
-      if (isOnColorArea.current)
-        moveHandler.onMove(e);
+      if (isOnColorArea.current) moveHandler.onMove(e);
     },
     onMoveEnd() {
-      if (isOnColorArea.current)
-        moveHandler.onMoveEnd();
+      if (isOnColorArea.current) moveHandler.onMoveEnd();
     }
   });
   let onThumbDown = (id) => {
@@ -609,8 +586,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       setValueChangedViaKeyboard(false);
       focusInput();
       state.setDragging(true);
-      if (typeof PointerEvent !== "undefined")
-        addGlobalListener(window, "pointerup", onThumbUp, false);
+      if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
       else {
         addGlobalListener(window, "mouseup", onThumbUp, false);
         addGlobalListener(window, "touchend", onThumbUp, false);
@@ -627,8 +603,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       state.setDragging(false);
       currentPointer.current = void 0;
       isOnColorArea.current = false;
-      if (typeof PointerEvent !== "undefined")
-        removeGlobalListener(window, "pointerup", onThumbUp, false);
+      if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
       else {
         removeGlobalListener(window, "mouseup", onThumbUp, false);
         removeGlobalListener(window, "touchend", onThumbUp, false);
@@ -640,8 +615,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     let { width, height } = rect;
     let x = (clientX - rect.x) / width;
     let y = (clientY - rect.y) / height;
-    if (direction === "rtl")
-      x = 1 - x;
+    if (direction === "rtl") x = 1 - x;
     if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === void 0) {
       isOnColorArea.current = true;
       setValueChangedViaKeyboard(false);
@@ -649,8 +623,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       state.setColorFromPoint(x, y);
       focusInput();
       state.setDragging(true);
-      if (typeof PointerEvent !== "undefined")
-        addGlobalListener(window, "pointerup", onColorAreaUp, false);
+      if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onColorAreaUp, false);
       else {
         addGlobalListener(window, "mouseup", onColorAreaUp, false);
         addGlobalListener(window, "touchend", onColorAreaUp, false);
@@ -667,8 +640,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       currentPointer.current = void 0;
       state.setDragging(false);
       focusInput();
-      if (typeof PointerEvent !== "undefined")
-        removeGlobalListener(window, "pointerup", onColorAreaUp, false);
+      if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onColorAreaUp, false);
       else {
         removeGlobalListener(window, "mouseup", onColorAreaUp, false);
         removeGlobalListener(window, "touchend", onColorAreaUp, false);
@@ -678,14 +650,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   let colorAreaInteractions = isDisabled ? {} : $3ef42575df84b30b$export$9d1611c77c2fe928({
     ...typeof PointerEvent !== "undefined" ? {
       onPointerDown: (e) => {
-        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey))
-          return;
+        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
         onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
       }
     } : {
       onMouseDown: (e) => {
-        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)
-          return;
+        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
         onColorAreaDown(e.currentTarget, void 0, e.clientX, e.clientY);
       },
       onTouchStart: (e) => {
@@ -696,14 +666,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   let thumbInteractions = isDisabled ? {} : $3ef42575df84b30b$export$9d1611c77c2fe928({
     ...typeof PointerEvent !== "undefined" ? {
       onPointerDown: (e) => {
-        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey))
-          return;
+        if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
         onThumbDown(e.pointerId);
       }
     } : {
       onMouseDown: (e) => {
-        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)
-          return;
+        if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
         onThumbDown(void 0);
       },
       onTouchStart: (e) => {
@@ -724,10 +692,8 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   const onChange = (e) => {
     const { target } = e;
     setValueChangedViaInputChangeEvent(true);
-    if (target === inputXRef.current)
-      state.setXValue(parseFloat(target.value));
-    else if (target === inputYRef.current)
-      state.setYValue(parseFloat(target.value));
+    if (target === inputXRef.current) state.setXValue(parseFloat(target.value));
+    else if (target === inputYRef.current) state.setYValue(parseFloat(target.value));
   };
   let isMobile = $c87311424ea30a05$export$fedb369cb70207f1() || $c87311424ea30a05$export$a11b0059900ceec8();
   let value = state.getDisplayColor();
@@ -862,8 +828,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
   let { trackRef, inputRef, orientation, channel, "aria-label": ariaLabel, name } = props;
   let { locale, direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
-  if (!props.label && !ariaLabel && !props["aria-labelledby"])
-    ariaLabel = state.value.getChannelName(channel, locale);
+  if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
   let { groupProps, trackProps, labelProps, outputProps } = $bcca50147b47f54d$export$56b2c08e277f365({
     ...props,
     "aria-label": ariaLabel
@@ -879,12 +844,9 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
   let value = state.getDisplayColor();
   let generateBackground = () => {
     let to;
-    if (orientation === "vertical")
-      to = "top";
-    else if (direction === "ltr")
-      to = "right";
-    else
-      to = "left";
+    if (orientation === "vertical") to = "top";
+    else if (direction === "ltr") to = "right";
+    else to = "left";
     switch (channel) {
       case "hue": {
         let stops = [
@@ -923,10 +885,8 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
   let forcedColorAdjustNoneStyle = {
     forcedColorAdjust: "none"
   };
-  if (channel === "hue")
-    inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-  else if (channel !== "alpha")
-    inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+  if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
+  else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
   let { visuallyHiddenProps } = $5c3e21d68f1c4674$export$a966af930f325cab({
     style: {
       opacity: "0.0001",
@@ -985,12 +945,9 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
     onFocusWithinChange: setFocusWithin
   });
   let onWheel = useCallback((e) => {
-    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX))
-      return;
-    if (e.deltaY > 0)
-      increment();
-    else if (e.deltaY < 0)
-      decrement();
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+    if (e.deltaY > 0) increment();
+    else if (e.deltaY < 0) decrement();
   }, [
     decrement,
     increment
@@ -1001,8 +958,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
     isDisabled: scrollingDisabled
   }, ref);
   let onChange = (value) => {
-    if (state.validate(value))
-      state.setInputValue(value);
+    if (state.validate(value)) state.setInputValue(value);
   };
   let { inputProps, ...otherProps } = $d841c8010a73d545$export$4f384c9210e583c3({
     ...props,
@@ -1025,8 +981,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
     spellCheck: "false",
     onBlur: commit
   });
-  if (validationBehavior === "native")
-    inputProps["aria-required"] = void 0;
+  if (validationBehavior === "native") inputProps["aria-required"] = void 0;
   return {
     inputProps,
     ...otherProps
@@ -1099,17 +1054,15 @@ const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef($0d
 const $3ada01a82feafb94$export$96b6d32b05a1a8ed = /* @__PURE__ */ createContext(null);
 function $3ada01a82feafb94$var$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,
-      channel: props.channel,
-      forwardedRef: ref
-    });
-  else
-    return /* @__PURE__ */ React__default.createElement($3ada01a82feafb94$var$HexColorField, {
-      ...props,
-      forwardedRef: ref
-    });
+  if (props.channel) return /* @__PURE__ */ React__default.createElement($3ada01a82feafb94$var$ColorChannelField, {
+    ...props,
+    channel: props.channel,
+    forwardedRef: ref
+  });
+  else return /* @__PURE__ */ React__default.createElement($3ada01a82feafb94$var$HexColorField, {
+    ...props,
+    forwardedRef: ref
+  });
 }
 const $3ada01a82feafb94$export$b865d4358897bb17 = /* @__PURE__ */ forwardRef($3ada01a82feafb94$var$ColorField);
 function $3ada01a82feafb94$var$ColorChannelField(props) {

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

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { s as sprintf, _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { s as sprintf, _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
-import { T as TriggeredPopover } from "../../popover-o2Q28Ljn.js";
-import { a as ButtonGroup } from "../../button-idVI4jmd.js";
+import { T as TriggeredPopover } from "../../popover-Dk2o4S7K.js";
+import { a as ButtonGroup } from "../../button-CD8Q1eok.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Spacer } from "../spacer/spacer.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 /**
  * A component that provides a nice way to toggle a component on and off, and display its content in an expandable panel.
  *

package/dist/components/container-panel/container-panel.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState } from "react";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { Switch } from "../toggle/switch.js";
 import { AnimatedVisibility } from "../animated-visibility/animated-visibility.js";
-import { B as Button } from "../../button-idVI4jmd.js";
+import { B as Button } from "../../button-CD8Q1eok.js";
 import { icons } from "../../icons/icons.js";
 import { HStack } from "../layout/hstack.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -75,10 +75,7 @@ const ContainerPanel = (props) => {
                   icon: open ? icons.caretDownFill : icons.caretDown,
                   type: "ghost",
                   size: "small",
-                  className: clsx(
-                    "[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform",
-                    open && "[&>svg]:-es-uic-scale-y-100"
-                  ),
+                  className: clsx("[&>svg]:es-uic-size-5 [&>svg]:es-uic-transition-transform", open && "[&>svg]:-es-uic-scale-y-100"),
                   disabled: typeof use !== "undefined" && !use
                 }
               )
@@ -96,11 +93,7 @@ const ContainerPanel = (props) => {
         !closable && !onUseChange && "es-uic-px-4",
         className
       ),
-      labelContainerClassName: clsx(
-        (closable || onUseChange) && "es-uic-pl-4 es-uic-pr-3 es-uic-min-h-12",
-        !(closable || onUseChange) && "es-uic-mt-3",
-        "!es-uic-pb-0"
-      ),
+      labelContainerClassName: clsx((closable || onUseChange) && "es-uic-pl-4 es-uic-pr-3 es-uic-min-h-12", !(closable || onUseChange) && "es-uic-mt-3", "!es-uic-pb-0"),
       controlContainerClassName: "es-uic-px-4",
       labelClassName: "!es-uic-text-gray-500",
       children: [

package/dist/components/draggable-list/draggable-list-item.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CzpWxJsS.js";
-import { B as Button } from "../../button-idVI4jmd.js";
+import { a as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-CEzzyr-l.js";
+import { B as Button } from "../../button-CD8Q1eok.js";
 import { icons } from "../../icons/icons.js";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A DraggableList item.

package/dist/components/draggable-list/draggable-list.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CzpWxJsS.js";
-import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-D3Vr4vvC.js";
+import { $ as $72e60046c03fbe42$export$a7bfbda1311ca015 } from "../../GridList-CEzzyr-l.js";
+import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6, a as $d8f176866e6dc039$export$62ed72bc21f6b8a6 } from "../../ListBox-CCWXTj0t.js";
 import { useId, useEffect } from "react";
-import { c as clsx } from "../../lite-pbIeT7tm.js";
-import { _ as __ } from "../../default-i18n-Bk1GxDHz.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
+import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListData-BelKu4kx.js";
+import { $ as $0d86e9c8f07f9a7b$export$762f73dccccd255d } from "../../useListData-BpYQj7kK.js";
 /**
  * A component that allows re-ordering a list of items.
  *