@xsolla/xui-color-picker 0.89.0 → 0.91.0

package/native/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -39,7 +29,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/ColorPicker.tsx
-var import_react9 = require("react");
+var import_react6 = require("react");
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -207,270 +197,13 @@ var Box = ({
   );
 };
 
-// ../primitives-native/src/Text.tsx
-var import_react_native2 = require("react-native");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Spinner.tsx
-var import_react_native3 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Spinner = ({
-  color,
-  size,
-  role,
-  "aria-label": ariaLabel,
-  "aria-live": ariaLive,
-  testID
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_native3.View,
-    {
-      accessible: true,
-      accessibilityRole: role === "status" ? "none" : void 0,
-      accessibilityLabel: ariaLabel,
-      accessibilityLiveRegion: ariaLive === "polite" ? "polite" : ariaLive === "assertive" ? "assertive" : "none",
-      testID,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_react_native3.ActivityIndicator,
-        {
-          color,
-          size: typeof size === "number" ? size : "small"
-        }
-      )
-    }
-  );
-};
-Spinner.displayName = "Spinner";
-
-// ../primitives-native/src/Icon.tsx
-var import_react = __toESM(require("react"));
-var import_react_native4 = require("react-native");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Input.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var keyboardTypeMap = {
-  text: "default",
-  number: "numeric",
-  email: "email-address",
-  tel: "phone-pad",
-  url: "url",
-  decimal: "decimal-pad"
-};
-var inputModeToKeyboardType = {
-  none: "default",
-  text: "default",
-  decimal: "decimal-pad",
-  numeric: "number-pad",
-  tel: "phone-pad",
-  search: "default",
-  email: "email-address",
-  url: "url"
-};
-var autoCompleteToTextContentType = {
-  "one-time-code": "oneTimeCode",
-  email: "emailAddress",
-  username: "username",
-  password: "password",
-  "new-password": "newPassword",
-  tel: "telephoneNumber",
-  "postal-code": "postalCode",
-  name: "name"
-};
-var InputPrimitive = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
-    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        secureTextEntry: secureTextEntry || type === "password",
-        keyboardType,
-        textContentType,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-native/src/TextArea.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        multiline: true,
-        numberOfLines: rows || 4,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlignVertical: "top",
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
-
 // src/ColorPicker.tsx
 var import_xui_select = require("@xsolla/xui-select");
 var import_xui_button2 = require("@xsolla/xui-button");
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // src/ColorPickerArea.tsx
-var import_react5 = require("react");
+var import_react2 = require("react");
 var import_xui_core = require("@xsolla/xui-core");
 
 // src/colorUtils.ts
@@ -663,7 +396,7 @@ function createColorFromHsb(h, s, b, a = 1) {
 }
 
 // src/utils.ts
-var import_react4 = require("react");
+var import_react = require("react");
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
 }
@@ -678,7 +411,7 @@ function snapValueToStep(value, min, max, step) {
   return snappedValue;
 }
 function useMergedRefs(...refs) {
-  return (0, import_react4.useCallback)((node) => {
+  return (0, import_react.useCallback)((node) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
         ref(node);
@@ -689,9 +422,9 @@ function useMergedRefs(...refs) {
   }, refs);
 }
 function useUpdatableState(updater, deps, initialUpdate = false) {
-  const [state, setState] = (0, import_react4.useState)(() => updater(void 0));
-  const isFirstRender = (0, import_react4.useRef)(true);
-  (0, import_react4.useEffect)(() => {
+  const [state, setState] = (0, import_react.useState)(() => updater(void 0));
+  const isFirstRender = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
     if (isFirstRender.current && !initialUpdate) {
       isFirstRender.current = false;
       return;
@@ -702,8 +435,8 @@ function useUpdatableState(updater, deps, initialUpdate = false) {
 }
 
 // src/ColorPickerArea.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(props, ref) {
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ColorPickerArea = (0, import_react2.forwardRef)(function CustomColorArea(props, ref) {
   const {
     xChannelStep = 0.1,
     yChannelStep = 0.1,
@@ -713,15 +446,15 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     onChangeEnd,
     className
   } = props;
-  const internalRef = (0, import_react5.useRef)(null);
+  const internalRef = (0, import_react2.useRef)(null);
   const containerRef = useMergedRefs(ref, internalRef);
-  const [layout, setLayout] = (0, import_react5.useState)({ width: 0, height: 0 });
-  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
-  const [currentColor, setCurrentColor] = (0, import_react5.useState)(() => {
+  const [layout, setLayout] = (0, import_react2.useState)({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const [currentColor, setCurrentColor] = (0, import_react2.useState)(() => {
     const initialValue = value || defaultValue || "#ffffff";
     return parseColor(initialValue);
   });
-  (0, import_react5.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (value !== void 0) {
       setCurrentColor(parseColor(value));
     }
@@ -732,7 +465,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
   const brightness = hsb.b * 100;
   const thumbX = saturation / 100 * 100;
   const thumbY = 100 - brightness / 100 * 100;
-  const updateColor = (0, import_react5.useCallback)(
+  const updateColor = (0, import_react2.useCallback)(
     (x, y) => {
       const newSaturation = snapValueToStep(x * 100, 0, 100, xChannelStep);
       const newBrightness = snapValueToStep(
@@ -753,7 +486,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     },
     [hue, hsb.a, xChannelStep, yChannelStep, onChange]
   );
-  const handleMouseDown = (0, import_react5.useCallback)(
+  const handleMouseDown = (0, import_react2.useCallback)(
     (e) => {
       if (import_xui_core.isNative) return;
       setIsDragging(true);
@@ -764,7 +497,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     },
     [updateColor]
   );
-  const handleMouseMove = (0, import_react5.useCallback)(
+  const handleMouseMove = (0, import_react2.useCallback)(
     (e) => {
       if (!isDragging || import_xui_core.isNative) return;
       const rect = internalRef.current?.getBoundingClientRect?.();
@@ -775,13 +508,13 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     },
     [isDragging, updateColor]
   );
-  const handleMouseUp = (0, import_react5.useCallback)(() => {
+  const handleMouseUp = (0, import_react2.useCallback)(() => {
     if (isDragging) {
       setIsDragging(false);
       onChangeEnd?.(currentColor.toString());
     }
   }, [isDragging, currentColor, onChangeEnd]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (import_xui_core.isWeb && isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -791,7 +524,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleResponderMove = (0, import_react5.useCallback)(
+  const handleResponderMove = (0, import_react2.useCallback)(
     (e) => {
       const { locationX, locationY } = e.nativeEvent;
       const x = clamp(locationX / layout.width, 0, 1);
@@ -800,7 +533,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     },
     [layout, updateColor]
   );
-  const handleResponderRelease = (0, import_react5.useCallback)(() => {
+  const handleResponderRelease = (0, import_react2.useCallback)(() => {
     setIsDragging(false);
     onChangeEnd?.(currentColor.toString());
   }, [currentColor, onChangeEnd]);
@@ -816,7 +549,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
     // Fallback for native without LinearGradient
   };
   const thumbColor = currentColor.toString("hex");
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Box,
     {
       "data-testid": "color-picker-color-area",
@@ -841,7 +574,7 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
       onResponderMove: handleResponderMove,
       onResponderRelease: handleResponderRelease,
       onResponderTerminate: handleResponderRelease,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Box, { width: "100%", height: "100%", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Box, { width: "100%", height: "100%", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Box,
         {
           "data-testid": "color-picker-color-area-thumb",
@@ -865,9 +598,9 @@ var ColorPickerArea = (0, import_react5.forwardRef)(function CustomColorArea(pro
 });
 
 // src/ColorPickerSlider.tsx
-var import_react6 = require("react");
+var import_react3 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var ColorPickerSlider = ({
   channel,
   value,
@@ -875,9 +608,9 @@ var ColorPickerSlider = ({
   onChangeEnd
 }) => {
   const { theme } = (0, import_xui_core2.useDesignSystem)();
-  const trackRef = (0, import_react6.useRef)(null);
-  const [layout, setLayout] = (0, import_react6.useState)({ width: 0, height: 0 });
-  const [isDragging, setIsDragging] = (0, import_react6.useState)(false);
+  const trackRef = (0, import_react3.useRef)(null);
+  const [layout, setLayout] = (0, import_react3.useState)({ width: 0, height: 0 });
+  const [isDragging, setIsDragging] = (0, import_react3.useState)(false);
   const currentColor = parseColor(value);
   const hsb = currentColor.toHsb();
   const getChannelValue = () => {
@@ -888,7 +621,7 @@ var ColorPickerSlider = ({
   const channelValue = getChannelValue();
   const maxValue = getMaxValue();
   const thumbPosition = channelValue / maxValue * 100;
-  const updateColor = (0, import_react6.useCallback)(
+  const updateColor = (0, import_react3.useCallback)(
     (x) => {
       const newValue = snapValueToStep(x * maxValue, 0, maxValue, 1);
       let newColor;
@@ -912,7 +645,7 @@ var ColorPickerSlider = ({
     },
     [channel, maxValue, hsb, onChange]
   );
-  const handleMouseDown = (0, import_react6.useCallback)(
+  const handleMouseDown = (0, import_react3.useCallback)(
     (e) => {
       if (import_xui_core2.isNative) return;
       setIsDragging(true);
@@ -922,7 +655,7 @@ var ColorPickerSlider = ({
     },
     [updateColor]
   );
-  const handleMouseMove = (0, import_react6.useCallback)(
+  const handleMouseMove = (0, import_react3.useCallback)(
     (e) => {
       if (!isDragging || import_xui_core2.isNative) return;
       const rect = trackRef.current?.getBoundingClientRect?.();
@@ -932,13 +665,13 @@ var ColorPickerSlider = ({
     },
     [isDragging, updateColor]
   );
-  const handleMouseUp = (0, import_react6.useCallback)(() => {
+  const handleMouseUp = (0, import_react3.useCallback)(() => {
     if (isDragging) {
       setIsDragging(false);
       onChangeEnd?.(currentColor.toString());
     }
   }, [isDragging, currentColor, onChangeEnd]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (import_xui_core2.isWeb && isDragging) {
       document.addEventListener("mousemove", handleMouseMove);
       document.addEventListener("mouseup", handleMouseUp);
@@ -948,7 +681,7 @@ var ColorPickerSlider = ({
       };
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
-  const handleResponderMove = (0, import_react6.useCallback)(
+  const handleResponderMove = (0, import_react3.useCallback)(
     (e) => {
       const { locationX } = e.nativeEvent;
       const x = clamp(locationX / layout.width, 0, 1);
@@ -956,7 +689,7 @@ var ColorPickerSlider = ({
     },
     [layout, updateColor]
   );
-  const handleResponderRelease = (0, import_react6.useCallback)(() => {
+  const handleResponderRelease = (0, import_react3.useCallback)(() => {
     setIsDragging(false);
     onChangeEnd?.(currentColor.toString());
   }, [currentColor, onChangeEnd]);
@@ -968,7 +701,7 @@ var ColorPickerSlider = ({
     return `linear-gradient(to right, transparent 0%, ${colorHex} 100%)`;
   };
   const thumbColor = channel === "hue" ? createColorFromHsb(channelValue, 100, 100, 1).toString("hex") : currentColor.toString("hex");
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Box,
     {
       height: 12,
@@ -989,7 +722,7 @@ var ColorPickerSlider = ({
       onResponderMove: handleResponderMove,
       onResponderRelease: handleResponderRelease,
       onResponderTerminate: handleResponderRelease,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { ref: trackRef, width: "100%", height: "100%", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Box, { ref: trackRef, width: "100%", height: "100%", position: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         Box,
         {
           position: "absolute",
@@ -1012,9 +745,9 @@ var ColorPickerSlider = ({
 };
 
 // src/ColorPickerInput.tsx
-var import_react7 = require("react");
+var import_react4 = require("react");
 var import_xui_input = require("@xsolla/xui-input");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ColorPickerInput = ({
   value,
   valueType,
@@ -1025,8 +758,8 @@ var ColorPickerInput = ({
   const channelRange = value.getChannelRange(channel);
   const intValue = channel === "alpha" ? channelValue * 100 : channelValue;
   const roundedValue = Math.round(intValue);
-  const [inputValue, setInputValue] = (0, import_react7.useState)(String(roundedValue));
-  (0, import_react7.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react4.useState)(String(roundedValue));
+  (0, import_react4.useEffect)(() => {
     setInputValue(String(roundedValue));
   }, [roundedValue]);
   const handleChange = (e) => {
@@ -1045,7 +778,7 @@ var ColorPickerInput = ({
   const handleBlur = () => {
     setInputValue(String(roundedValue));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Box, { flex: 1, minWidth: 40, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Box, { flex: 1, minWidth: 40, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_xui_input.Input,
     {
       size: "sm",
@@ -1057,15 +790,15 @@ var ColorPickerInput = ({
 };
 
 // src/ColorPickerHexInput.tsx
-var import_react8 = require("react");
+var import_react5 = require("react");
 var import_xui_input2 = require("@xsolla/xui-input");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ColorPickerHexInput = ({
   value,
   onChange
 }) => {
-  const [inputValue, setInputValue] = (0, import_react8.useState)(value);
-  (0, import_react8.useEffect)(() => {
+  const [inputValue, setInputValue] = (0, import_react5.useState)(value);
+  (0, import_react5.useEffect)(() => {
     setInputValue(value);
   }, [value]);
   const handleChange = (e) => {
@@ -1091,7 +824,7 @@ var ColorPickerHexInput = ({
       setInputValue(value);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Box, { flex: 1, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_xui_input2.Input,
     {
       size: "sm",
@@ -1104,8 +837,8 @@ var ColorPickerHexInput = ({
 
 // src/ColorPickerEyedropper.tsx
 var import_xui_button = require("@xsolla/xui-button");
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var DropletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var DropletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1116,7 +849,7 @@ var DropletIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5s-3 3.5-3 5.5a7 7 0 0 0 7 7z" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5s-3 3.5-3 5.5a7 7 0 0 0 7 7z" })
   }
 );
 var ColorPickerEyedropper = ({ onColorPick }) => {
@@ -1131,26 +864,26 @@ var ColorPickerEyedropper = ({ onColorPick }) => {
     }
   };
   if (typeof EyeDropper === "undefined") return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_xui_button.IconButton,
     {
       size: "sm",
       variant: "secondary",
       tone: "mono",
       onPress: onEyedropperButtonClick,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropletIcon, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropletIcon, {}),
       "aria-label": "Pick color from screen"
     }
   );
 };
 
 // src/ColorPicker.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var DEFAULT_VALUE = "#66E6FFFF";
 var supportedFormats = ["hex", "hsl", "rgb", "hsb"];
 var addAlfaToChannel = (channelName, alpha) => alpha ? `${channelName}a` : channelName;
 var removeAlfaFromChannel = (channelName) => channelName.slice(0, 3);
-var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1162,12 +895,12 @@ var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
     ]
   }
 );
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1178,10 +911,10 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "20 6 9 17 4 12" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "20 6 9 17 4 12" })
   }
 );
-var ResetIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+var ResetIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
   "svg",
   {
     viewBox: "0 0 24 24",
@@ -1193,12 +926,12 @@ var ResetIcon = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("polyline", { points: "3 3 3 8 8 8" })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "3 3 3 8 8 8" })
     ]
   }
 );
-var ColorPicker = (0, import_react9.forwardRef)(
+var ColorPicker = (0, import_react6.forwardRef)(
   ({
     colorFormat: defaultColorFormat = "hex",
     alpha = true,
@@ -1211,7 +944,7 @@ var ColorPicker = (0, import_react9.forwardRef)(
     testID
   }, ref) => {
     const { theme } = (0, import_xui_core3.useDesignSystem)();
-    const prevColorRef = (0, import_react9.useRef)(propValue);
+    const prevColorRef = (0, import_react6.useRef)(propValue);
     const [innerValue, setInnerValue] = useUpdatableState(
       (prevState) => {
         if (prevColorRef.current === propValue && prevState) return prevState;
@@ -1221,8 +954,8 @@ var ColorPicker = (0, import_react9.forwardRef)(
       [propValue],
       true
     );
-    const [initialValue] = (0, import_react9.useState)(() => innerValue);
-    const [isValueCopied, setValueCopied] = (0, import_react9.useState)(false);
+    const [initialValue] = (0, import_react6.useState)(() => innerValue);
+    const [isValueCopied, setValueCopied] = (0, import_react6.useState)(false);
     const [colorFormat, setColorFormat] = useUpdatableState(
       () => addAlfaToChannel(defaultColorFormat, alpha),
       [defaultColorFormat, alpha],
@@ -1266,7 +999,7 @@ var ColorPicker = (0, import_react9.forwardRef)(
       value: f
     }));
     const channels = colorFormat.includes("hex") ? [] : colorFormat.includes("rgb") ? ["red", "green", "blue"] : colorFormat.includes("hsl") ? ["hue", "saturation", "lightness"] : ["hue", "saturation", "brightness"];
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       Box,
       {
         ref,
@@ -1278,17 +1011,17 @@ var ColorPicker = (0, import_react9.forwardRef)(
         width: 312,
         style: { boxShadow: "0px 4px 16px 0px rgba(7, 7, 8, 0.1)" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ColorPickerArea,
             {
               value: innerValue.toString(),
               onChange: handleChange
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { flexDirection: "row", gap: 8, alignItems: "center", children: [
-            eyedropper && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ColorPickerEyedropper, { onColorPick: handleChange }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { flex: 1, gap: 8, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box, { flexDirection: "row", gap: 8, alignItems: "center", children: [
+            eyedropper && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColorPickerEyedropper, { onColorPick: handleChange }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box, { flex: 1, gap: 8, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColorPickerSlider,
                 {
                   channel: "hue",
@@ -1296,7 +1029,7 @@ var ColorPicker = (0, import_react9.forwardRef)(
                   onChange: handleChange
                 }
               ),
-              alpha && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              alpha && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColorPickerSlider,
                 {
                   channel: "alpha",
@@ -1306,8 +1039,8 @@ var ColorPicker = (0, import_react9.forwardRef)(
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { flexDirection: "row", gap: 8, alignItems: "center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Box, { width: 80, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box, { flexDirection: "row", gap: 8, alignItems: "center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Box, { width: 80, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               import_xui_select.Select,
               {
                 size: "sm",
@@ -1316,14 +1049,14 @@ var ColorPicker = (0, import_react9.forwardRef)(
                 onChange: handleChangeFormat
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { flex: 1, flexDirection: "row", gap: 4, children: [
-              colorFormat.includes("hex") ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box, { flex: 1, flexDirection: "row", gap: 4, children: [
+              colorFormat.includes("hex") ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColorPickerHexInput,
                 {
                   value: innerValue.toString(colorFormat),
                   onChange: handleChange
                 }
-              ) : channels.map((channel) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              ) : channels.map((channel) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColorPickerInput,
                 {
                   value: innerValue,
@@ -1333,7 +1066,7 @@ var ColorPicker = (0, import_react9.forwardRef)(
                 },
                 channel
               )),
-              alpha && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              alpha && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 ColorPickerInput,
                 {
                   channel: "alpha",
@@ -1343,26 +1076,26 @@ var ColorPicker = (0, import_react9.forwardRef)(
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Box, { flexDirection: "row", gap: 4, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Box, { flexDirection: "row", gap: 4, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 import_xui_button2.IconButton,
                 {
                   size: "sm",
                   variant: "secondary",
                   tone: "mono",
                   onPress: onCopy,
-                  icon: isValueCopied ? copiedIcon || /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CopyIcon, {}),
+                  icon: isValueCopied ? copiedIcon || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CopyIcon, {}),
                   "aria-label": "Copy color"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 import_xui_button2.IconButton,
                 {
                   size: "sm",
                   variant: "secondary",
                   tone: "mono",
                   onPress: onReset,
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ResetIcon, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ResetIcon, {}),
                   "aria-label": "Reset color"
                 }
               )