@eightshift/ui-components 5.1.4 → 5.2.1

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

@@ -1,27 +1,27 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React__default, { useMemo, useRef, useState, useCallback, forwardRef, createContext, useContext } from "react";
+import React__default, { useState, useMemo, useRef, useCallback, forwardRef, createContext, useContext } 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, e as $bdb11010cef70236$export$f680877a34711e37, b as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$29f1550f4b0d4415, i as $64fa3d84918910a7$export$2881499e37b75b9a, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, h as $64fa3d84918910a7$export$ef03459518577ad4 } from "../../utils-CZt7LCbO.js";
-import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-EDDcM64A.js";
-import { a as $9ab94262bd0047c7$export$420e68273165f4ec, $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Bv0UJQl8.js";
-import { b as $458b0a5536c1a7cf$export$40bfa8c7b0832715, g as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, p as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, c as $c87311424ea30a05$export$fedb369cb70207f1, v as $c87311424ea30a05$export$a11b0059900ceec8, $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-C2SkI1Fn.js";
-import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-CNqKeT8D.js";
-import { a as $9446cca9a3875146$export$cb6e0bb50bc19463, $ as $9446cca9a3875146$export$7d15b64cf5a3a4c4 } from "../../number-CHmNj-oR.js";
-import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-B7-lUnAF.js";
-import { $ as $99facab73266f662$export$5add1d006293d136 } from "../../useFormReset-D2YaWRIA.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-uOPcIpqS.js";
-import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-BbYZoHvX.js";
-import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "../../useLocalizedStringFormatter-C9GO0IDB.js";
-import { a as $5c3e21d68f1c4674$export$a966af930f325cab } from "../../VisuallyHidden-BYi0pekx.js";
-import { $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "../../FieldError-DHrSdE_Q.js";
-import { a as $3985021b0ad6602f$export$37fb8590cf2c088c, $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-DfSBLhDx.js";
-import { a as $01b77f81d0f07f68$export$75b6ee27786ba447, $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "../../Text-BuJgePCv.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-y0dLc_6m.js";
-import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../Form-Bnyyv3Im.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 { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
+import { $ as $9ab94262bd0047c7$export$420e68273165f4ec, a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D5BfOWag.js";
+import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715, f as $03deb23ff14920c4$export$4eaf04e54aa8eed6, z as $7215afc6de606d6b$export$de79e2c695e052f3, A as $46d819fcbaf35654$export$8f71654801c2f7cd, o as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6, b as $c87311424ea30a05$export$fedb369cb70207f1, t as $c87311424ea30a05$export$a11b0059900ceec8, e as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-44IApaa2.js";
+import { $ as $799cddbef784668f$export$6e865ea70d7724f, b as $799cddbef784668f$export$4cde5df63f53f473, a as $3493a52097159720$exports } from "../../Color-WxFE7lQB.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-BQFSEhvk.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-D9s7FTtC.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 "../../Group-C4cXobNT.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-JhWPy1JY.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, c as $e5be200c675c3b3a$export$a763b9476acd3eb } from "../../Form-BeMxJA29.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
+import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
 import { TriggeredPopover } from "../popover/popover.js";
 import { icons } from "../../icons/icons.js";
 import { Tabs, TabList, Tab, TabPanel } from "../tabs/tabs.js";
@@ -32,6 +32,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
   if (value) value = $799cddbef784668f$export$4cde5df63f53f473(value);
   if (defaultValue) defaultValue = $799cddbef784668f$export$4cde5df63f53f473(defaultValue);
   let [colorValue, setColorState] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(value, defaultValue, onChange);
+  let [initialValue] = useState(colorValue);
   let color = useMemo(() => colorSpace && colorValue ? colorValue.toFormat(colorSpace) : colorValue, [
     colorValue,
     colorSpace
@@ -74,6 +75,7 @@ function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
     xChannelPageStep: pageSizeX,
     yChannelPageStep: pageSizeY,
     value: color,
+    defaultValue: value !== void 0 ? initialValue : defaultValue,
     setValue(value2) {
       setColor($799cddbef784668f$export$4cde5df63f53f473(value2));
     },
@@ -137,6 +139,12 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     colorValue,
     colorSpace
   ]);
+  let [initialValue] = useState(colorValue);
+  let defaultColorValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : initialValue;
+  let defaultColor = useMemo(() => colorSpace && defaultColorValue ? defaultColorValue.toFormat(colorSpace) : defaultColorValue, [
+    defaultColorValue,
+    colorSpace
+  ]);
   let sliderState = $28f99e3e86e6ec45$export$e5fda3247f5d67f9({
     ...color.getChannelRange(channel),
     ...otherProps,
@@ -144,6 +152,7 @@ function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     // @ts-ignore
     numberFormatter: null,
     value: color.getChannelValue(channel),
+    defaultValue: defaultColor.getChannelValue(channel),
     onChange(v) {
       setColor(color.withChannelValue(channel, v));
     },
@@ -202,9 +211,9 @@ const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHe
 function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
   let { value, defaultValue, onChange } = props;
   let { step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange("red");
-  let initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value);
   let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(defaultValue);
-  let [colorValue, setColorValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715(initialValue, initialDefaultValue, onChange);
+  let [colorValue, setColorValue] = $458b0a5536c1a7cf$export$40bfa8c7b0832715($aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value), initialDefaultValue, onChange);
+  let [initialValue] = useState(colorValue);
   let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
   let validation = $e5be200c675c3b3a$export$fc1a364ae1f3ff10({
     ...props,
@@ -251,6 +260,7 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     let newColorValue = "";
     if (colorValue) newColorValue = colorValue.toString("hex");
     setInputValue(newColorValue);
+    validation.commitValidation();
   };
   let increment = () => {
     let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
@@ -274,6 +284,8 @@ function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
     ...validation,
     validate,
     colorValue,
+    defaultColorValue: initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialValue,
+    setColorValue,
     inputValue,
     setInputValue,
     commit,
@@ -295,18 +307,13 @@ 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);
   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
-  ]);
+  let color = $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace);
+  let [initialColorValue] = useState(colorValue);
+  let defaultColorValue = initialDefaultValue !== null && initialDefaultValue !== void 0 ? initialDefaultValue : initialColorValue;
+  let defaultColor = $31a863bb88e75dd6$var$useConvertColor(defaultColorValue, colorSpace);
   let value = color.getChannelValue(channel);
   let range = color.getChannelRange(channel);
   let formatOptions = useMemo(() => color.getChannelFormatOptions(channel), [
@@ -317,6 +324,7 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
   let numberFieldState = $de67e98908f0c6ee$export$7f629e9dc1ecf37c({
     locale,
     value: colorValue === null ? NaN : value / multiplier,
+    defaultValue: defaultColorValue === null ? NaN : defaultColor.getChannelValue(channel) / multiplier,
     onChange: (v) => {
       if (!Number.isNaN(v)) setColor(color.withChannelValue(channel, v * multiplier));
       else setColor(null);
@@ -328,9 +336,22 @@ function $31a863bb88e75dd6$export$b9fc0d69c9190c4a(props) {
   });
   return {
     ...numberFieldState,
-    colorValue: color
+    colorValue: color,
+    defaultColorValue,
+    setColorValue: setColor
   };
 }
+function $31a863bb88e75dd6$var$useConvertColor(colorValue, colorSpace) {
+  let black = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2("#000");
+  return useMemo(() => {
+    let nonNullColorValue = colorValue || black;
+    return colorSpace && nonNullColorValue ? nonNullColorValue.toFormat(colorSpace) : nonNullColorValue;
+  }, [
+    black,
+    colorValue,
+    colorSpace
+  ]);
+}
 const $40297c24c53588e6$var$hue = (color) => [
   0,
   60,
@@ -431,7 +452,7 @@ function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-  let { isDisabled, inputXRef, inputYRef, containerRef, "aria-label": ariaLabel, xName, yName } = props;
+  let { isDisabled, inputXRef, inputYRef, containerRef, "aria-label": ariaLabel, xName, yName, form } = props;
   let stringFormatter = $fca6afa0e843324b$export$f12b703ca79dfbb1($parcel$interopDefault($3493a52097159720$exports), "@react-aria/color");
   let { addGlobalListener, removeGlobalListener } = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
   let { direction, locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
@@ -441,13 +462,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   }, [
     inputXRef
   ]);
-  $99facab73266f662$export$5add1d006293d136(inputXRef, [
-    state.xValue,
-    state.yValue
-  ], ([x, y]) => {
-    let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
-    state.setValue(newColor);
-  });
+  $99facab73266f662$export$5add1d006293d136(inputXRef, state.defaultValue, state.setValue);
   let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
   let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = useState(false);
   let { xChannel, yChannel, zChannel } = state.channels;
@@ -758,6 +773,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       disabled: isDisabled,
       value: state.value.getChannelValue(xChannel),
       name: xName,
+      form,
       tabIndex: isMobile || !focusedInput || focusedInput === "x" ? void 0 : -1,
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -783,6 +799,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
       disabled: isDisabled,
       value: state.value.getChannelValue(yChannel),
       name: yName,
+      form,
       tabIndex: isMobile || focusedInput === "y" ? void 0 : -1,
       /*
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
@@ -795,7 +812,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
   };
 }
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-  let { trackRef, inputRef, orientation, channel, "aria-label": ariaLabel, name } = props;
+  let { trackRef, inputRef, orientation, channel, "aria-label": ariaLabel, name, form } = props;
   let { locale, direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
   if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
   let { groupProps, trackProps, labelProps, outputProps } = $bcca50147b47f54d$export$56b2c08e277f365({
@@ -807,6 +824,7 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     orientation,
     isDisabled: props.isDisabled,
     name,
+    form,
     trackRef,
     inputRef
   }, state);
@@ -933,13 +951,16 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
     ...props,
     id: inputId,
     value: inputValue,
-    defaultValue: void 0,
+    // Intentionally invalid value that will be ignored by onChange during form reset
+    // This is handled separately below.
+    defaultValue: "!",
     validate: void 0,
     [$e5be200c675c3b3a$export$a763b9476acd3eb]: state,
     type: "text",
     autoComplete: "off",
     onChange
   }, state, ref);
+  $99facab73266f662$export$5add1d006293d136(ref, state.defaultColorValue, state.setColorValue);
   inputProps = $3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, spinButtonProps, focusWithinProps, {
     role: "textbox",
     "aria-valuemax": null,
@@ -989,7 +1010,9 @@ const $e2b71ec1d6016406$export$a3cc47cee1c1ccc = /* @__PURE__ */ forwardRef(func
       isDisabled
     }
   });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
   delete DOMProps.id;
   return /* @__PURE__ */ React__default.createElement("div", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(thumbProps, hoverProps, DOMProps),
@@ -1031,13 +1054,13 @@ const $0de070065d44825d$export$b2103f68a961418e = /* @__PURE__ */ forwardRef(fun
       isDisabled: props.isDisabled || false
     }
   });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
   delete DOMProps.id;
   return /* @__PURE__ */ React__default.createElement("div", {
     ref,
-    ...colorAreaProps,
-    ...DOMProps,
-    ...renderProps,
+    ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, colorAreaProps, renderProps),
     slot: props.slot || void 0,
     "data-disabled": props.isDisabled || void 0
   }, /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
@@ -1091,6 +1114,7 @@ function $3ada01a82feafb94$var$ColorChannelField(props) {
   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", {
     type: "hidden",
     name: props.name,
+    form: props.form,
     value: isNaN(state.numberValue) ? "" : state.numberValue
   }));
 }
@@ -1121,7 +1145,9 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
     },
     defaultClassName: "react-aria-ColorField"
   });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
   delete DOMProps.id;
   return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [
@@ -1143,6 +1169,14 @@ function $3ada01a82feafb94$var$useChildren(props, state, ref, inputProps, inputR
           ref: labelRef
         }
       ],
+      [
+        $a049562f99e7db0e$export$f9c6924e160136d1,
+        {
+          role: "presentation",
+          isInvalid: validation.isInvalid,
+          isDisabled: props.isDisabled || false
+        }
+      ],
       [
         $514c0188e459b4c0$export$9afb8bc826b033ea,
         {
@@ -1193,7 +1227,9 @@ const $1cca5300a3c2e7f9$export$44fd664bcca5b6fb = /* @__PURE__ */ forwardRef(fun
     },
     defaultClassName: "react-aria-ColorSlider"
   });
-  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props);
+  let DOMProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    global: true
+  });
   delete DOMProps.id;
   return /* @__PURE__ */ React__default.createElement($64fa3d84918910a7$export$2881499e37b75b9a, {
     values: [

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

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __, s as sprintf } from "../../default-i18n-OFa3zAyB.js";
+import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
+import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
 import { Expandable } from "../expandable/expandable.js";
 import { icons } from "../../icons/icons.js";
 import { Switch } from "../toggle/switch.js";

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

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
-import "../../default-i18n-OFa3zAyB.js";
+import "../../default-i18n-DY6EfUSA.js";
 import { DraggableContext } from "./draggable-context.js";
 import { useContext } from "react";
 import { icons } from "../../icons/icons.js";