@eightshift/ui-components 1.3.2 → 1.4.1

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

@@ -1,29 +1,29 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import React__default, { forwardRef, useContext, createContext, useMemo, useRef, useState, useCallback } from "react";
 import { b as $4e85f108e88277b8$export$ebe63fadcdce34ed, c as $4e85f108e88277b8$export$44644b8a16031b5b, d as $4e85f108e88277b8$export$717b2c0a523a0b53 } from "../../RSPContexts-DQtGvvpM.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-DC-UMp1n.js";
+import { b as $64fa3d84918910a7$export$4d86445c2cf5e3, c 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-B4IdLYb8.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Dg5Y_10S.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-DGZ4R5fj.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-CkuKCPkT.js";
+import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-DsxEaA2J.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, v as $c87311424ea30a05$export$a11b0059900ceec8 } from "../../focusSafely-PMGZgZ9-.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../intlStrings-KQxgp5tS.js";
 import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-CHmNj-oR.js";
-import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-BLyBtNe2.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-D2RG7TdI.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-DJMtIgSL.js";
-import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-CQZyQp4q.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-Clme2C36.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BG_1RnbC.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-Cwm_siat.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BZPezMV5.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-CviphIN5.js";
-import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DWRQF0ro.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BXvY41yE.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-qjognpzK.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DDC_nImg.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-CVJOJnF1.js";
+import { $ as $03deb23ff14920c4$export$4eaf04e54aa8eed6 } from "../../textSelection-DS7-670U.js";
+import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-JaBafrnV.js";
+import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-BCPbwfnH.js";
+import { a as $46d819fcbaf35654$export$8f71654801c2f7cd } from "../../useFocusable-BFKHuYS9.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-D8a63VhT.js";
+import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-Bon2Gyx5.js";
+import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-CVIIVTgz.js";
+import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-DD480kAb.js";
+import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-CBPJ4Xx8.js";
+import { $ as $3985021b0ad6602f$export$37fb8590cf2c088c, a as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CaS4qmLb.js";
+import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-yZgqvhXc.js";
+import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-D8qh3_U7.js";
+import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../useFormValidationState-DC5jbhBW.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-BVFqhboT.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
 import { Spacer } from "../spacer/spacer.js";
@@ -74,7 +74,9 @@ const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7
 function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
   let { value, defaultValue, colorSpace, xChannel, yChannel, onChange, onChangeEnd } = props;
   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);
+  if (value) value = $799cddbef784668f$export$4cde5df63f53f473(value);
+  if (defaultValue) defaultValue = $799cddbef784668f$export$4cde5df63f53f473(defaultValue);
+  let [colorValue, setColorState] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
     colorValue,
     colorSpace
@@ -146,16 +148,16 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
         y
       };
     },
-    incrementX(stepSize) {
+    incrementX(stepSize = 1) {
       setXValue(xValue + stepSize > maxValueX ? maxValueX : $9446cca9a3875146$export$cb6e0bb50bc19463(xValue + stepSize, minValueX, maxValueX, stepX));
     },
-    incrementY(stepSize) {
+    incrementY(stepSize = 1) {
       setYValue(yValue + stepSize > maxValueY ? maxValueY : $9446cca9a3875146$export$cb6e0bb50bc19463(yValue + stepSize, minValueY, maxValueY, stepY));
     },
-    decrementX(stepSize) {
+    decrementX(stepSize = 1) {
       setXValue($9446cca9a3875146$export$cb6e0bb50bc19463(xValue - stepSize, minValueX, maxValueX, stepX));
     },
-    decrementY(stepSize) {
+    decrementY(stepSize = 1) {
       setYValue($9446cca9a3875146$export$cb6e0bb50bc19463(yValue - stepSize, minValueY, maxValueY, stepY));
     },
     setDragging(isDragging2) {
@@ -173,7 +175,9 @@ 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");
-  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value && $799cddbef784668f$export$4cde5df63f53f473(value), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
+  if (value) value = $799cddbef784668f$export$4cde5df63f53f473(value);
+  if (defaultValue) defaultValue = $799cddbef784668f$export$4cde5df63f53f473(defaultValue);
+  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
     colorValue,
     colorSpace
@@ -181,7 +185,8 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
   let sliderState = $28f99e3e86e6ec45$export$e5fda3247f5d67f9({
     ...color.getChannelRange(channel),
     ...otherProps,
-    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
+    // Unused except in getThumbValueLabel, which is overridden below. null to localize the TypeScript error for ignoring.
+    // @ts-ignore
     numberFormatter: null,
     value: color.getChannelValue(channel),
     onChange(v) {
@@ -279,7 +284,8 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
   let commit = () => {
     if (!inputValue.length) {
       safelySetColorValue(null);
-      setInputValue(value === void 0 ? "" : colorValue.toString("hex"));
+      if (value === void 0 || colorValue === null) setInputValue("");
+      else setInputValue(colorValue.toString("hex"));
       return;
     }
     if (parsedValue == null) {
@@ -334,10 +340,15 @@ function $b335ada08155d9c0$var$addColorValue(color, step) {
 }
 function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
   let { channel, colorSpace, locale } = props;
+  let black = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2("#000");
   let initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(props.value);
-  let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(props.defaultValue || "#0000");
-  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(initialValue || void 0, initialDefaultValue, props.onChange);
-  let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
+  let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(props.defaultValue);
+  let [colorValue, setColor] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(initialValue, initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : null, props.onChange);
+  let color = useMemo(() => {
+    let nonNullColorValue = colorValue || black;
+    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+  }, [
+    black,
     colorValue,
     colorSpace
   ]);
@@ -350,8 +361,11 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
   let multiplier = formatOptions.style === "percent" && range.maxValue === 100 ? 100 : 1;
   let numberFieldState = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
     locale,
-    value: value / multiplier,
-    onChange: (v) => setColor(color.withChannelValue(channel, v * multiplier)),
+    value: colorValue === null ? NaN : value / multiplier,
+    onChange: (v) => {
+      if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
+      else setColor(null);
+    },
     minValue: range.minValue / multiplier,
     maxValue: range.maxValue / multiplier,
     step: range.step / multiplier,

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

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { s as sprintf, _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { s as sprintf, _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";
 import { TriggeredPopover } from "../popover/popover.js";
-import { a as ButtonGroup } from "../../button-IxfzzzbP.js";
+import { ButtonGroup } from "../button/button.js";
 import { ToggleButton } from "../toggle-button/toggle-button.js";
 import { Spacer } from "../spacer/spacer.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 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-IxfzzzbP.js";
+import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { HStack } from "../layout/hstack.js";
 import { BaseControl } from "../base-control/base-control.js";
@@ -95,7 +95,7 @@ const ContainerPanel = (props) => {
       ),
       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",
+      labelClassName: "!es-uic-text-gray-600",
       children: [
         !closable && !onUseChange && typeof use === "undefined" && children,
         closable && typeof use === "undefined" && /* @__PURE__ */ jsx(

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-DjRnMEae.js";
-import { B as Button } from "../../button-IxfzzzbP.js";
+import { $ as $72e60046c03fbe42$export$e96fc9a8407faa6b } from "../../GridList-PBJsm70G.js";
+import { Button } from "../button/button.js";
 import { icons } from "../../icons/icons.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import { _ as __ } from "../../default-i18n-BqwLkgZv.js";
+import { _ as __ } from "../../default-i18n-BqWys-1G.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 /**
  * A DraggableList item.