@react-aria/color 3.0.0-nightly.4552 → 3.0.0-nightly.4558

package/dist/module.js

@@ -1,62 +1,9 @@
-import $eccab2b0118aef08$exports from "./ar-AE.module.js";
-import $bf2b4507594e3d45$exports from "./bg-BG.module.js";
-import $01c08487af7ecd14$exports from "./cs-CZ.module.js";
-import $5e997db6ea0d10f6$exports from "./da-DK.module.js";
-import $fe5998f640a79fd2$exports from "./de-DE.module.js";
-import $18e4d1d5b500a9ee$exports from "./el-GR.module.js";
-import $bf90a11a7a42a0f7$exports from "./en-US.module.js";
-import $dd0d25f885b5c5f3$exports from "./es-ES.module.js";
-import $d950967017e3485b$exports from "./et-EE.module.js";
-import $00a415a3f0ab315a$exports from "./fi-FI.module.js";
-import $d80f30fe86c95741$exports from "./fr-FR.module.js";
-import $6912afb584340a2e$exports from "./he-IL.module.js";
-import $7b97fcacd84ec90f$exports from "./hr-HR.module.js";
-import $da9b443e89eebc6b$exports from "./hu-HU.module.js";
-import $35f135b45eb4d95b$exports from "./it-IT.module.js";
-import $760b09448e39c6cd$exports from "./ja-JP.module.js";
-import $fc7b7d43be9703ec$exports from "./ko-KR.module.js";
-import $74918a1664156912$exports from "./lt-LT.module.js";
-import $4e6cde11c2bc9840$exports from "./lv-LV.module.js";
-import $6faa3defebc3eb72$exports from "./nb-NO.module.js";
-import $6ac9b6b1b7e3ca12$exports from "./nl-NL.module.js";
-import $1be8b0ee8841f1e7$exports from "./pl-PL.module.js";
-import $f9507c2d404ed689$exports from "./pt-BR.module.js";
-import $8f872ea59c02d67e$exports from "./pt-PT.module.js";
-import $b03b45b62a7ccae4$exports from "./ro-RO.module.js";
-import $f1107d94c09df9b8$exports from "./ru-RU.module.js";
-import $b61325f242fafc7c$exports from "./sk-SK.module.js";
-import $f44b7cf39ac8f315$exports from "./sl-SI.module.js";
-import $aa8cd83fc8d4982b$exports from "./sr-SP.module.js";
-import $7c4f4e5bb7c06f1e$exports from "./sv-SE.module.js";
-import $8045cf930ef745aa$exports from "./tr-TR.module.js";
-import $ee2044a77f24b118$exports from "./uk-UA.module.js";
-import $4e1dbc65a687dd93$exports from "./zh-CN.module.js";
-import $b0fef28529309aa6$exports from "./zh-TW.module.js";
-import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, useFormReset as $7KHxM$useFormReset, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
-import {useState as $7KHxM$useState, useCallback as $7KHxM$useCallback, useRef as $7KHxM$useRef, useMemo as $7KHxM$useMemo} from "react";
-import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useFocus as $7KHxM$useFocus, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
-import {useLocalizedStringFormatter as $7KHxM$useLocalizedStringFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
-import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
-import {useSlider as $7KHxM$useSlider, useSliderThumb as $7KHxM$useSliderThumb} from "@react-aria/slider";
-import {privateValidationStateProp as $7KHxM$privateValidationStateProp} from "@react-stately/form";
-import {useFormattedTextField as $7KHxM$useFormattedTextField} from "@react-aria/textfield";
-import {useSpinButton as $7KHxM$useSpinButton} from "@react-aria/spinbutton";
+import {useColorArea as $60bd7d6e45dcddfa$export$2f92a7a615a014f6} from "./useColorArea.module.js";
+import {useColorSlider as $40af666d6c251e36$export$106b7a4e66508f66} from "./useColorSlider.module.js";
+import {useColorWheel as $b4a0a4fdc900495e$export$9064ff4e44b3729a} from "./useColorWheel.module.js";
+import {useColorField as $f6896b05b2ecad12$export$77e32ca575a28fdf} from "./useColorField.module.js";
 
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
 /*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -67,1094 +14,7 @@ function $parcel$interopDefault(a) {
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-var $3493a52097159720$exports = {};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-$3493a52097159720$exports = {
-    "ar-AE": $eccab2b0118aef08$exports,
-    "bg-BG": $bf2b4507594e3d45$exports,
-    "cs-CZ": $01c08487af7ecd14$exports,
-    "da-DK": $5e997db6ea0d10f6$exports,
-    "de-DE": $fe5998f640a79fd2$exports,
-    "el-GR": $18e4d1d5b500a9ee$exports,
-    "en-US": $bf90a11a7a42a0f7$exports,
-    "es-ES": $dd0d25f885b5c5f3$exports,
-    "et-EE": $d950967017e3485b$exports,
-    "fi-FI": $00a415a3f0ab315a$exports,
-    "fr-FR": $d80f30fe86c95741$exports,
-    "he-IL": $6912afb584340a2e$exports,
-    "hr-HR": $7b97fcacd84ec90f$exports,
-    "hu-HU": $da9b443e89eebc6b$exports,
-    "it-IT": $35f135b45eb4d95b$exports,
-    "ja-JP": $760b09448e39c6cd$exports,
-    "ko-KR": $fc7b7d43be9703ec$exports,
-    "lt-LT": $74918a1664156912$exports,
-    "lv-LV": $4e6cde11c2bc9840$exports,
-    "nb-NO": $6faa3defebc3eb72$exports,
-    "nl-NL": $6ac9b6b1b7e3ca12$exports,
-    "pl-PL": $1be8b0ee8841f1e7$exports,
-    "pt-BR": $f9507c2d404ed689$exports,
-    "pt-PT": $8f872ea59c02d67e$exports,
-    "ro-RO": $b03b45b62a7ccae4$exports,
-    "ru-RU": $f1107d94c09df9b8$exports,
-    "sk-SK": $b61325f242fafc7c$exports,
-    "sl-SI": $f44b7cf39ac8f315$exports,
-    "sr-SP": $aa8cd83fc8d4982b$exports,
-    "sv-SE": $7c4f4e5bb7c06f1e$exports,
-    "tr-TR": $8045cf930ef745aa$exports,
-    "uk-UA": $ee2044a77f24b118$exports,
-    "zh-CN": $4e1dbc65a687dd93$exports,
-    "zh-TW": $b0fef28529309aa6$exports
-};
-
-
-
-/*
- * Copyright 2022 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
-*/ 
-const $40297c24c53588e6$var$generateRGB_R = (orientation, dir, zValue)=>{
-    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-    let result = {
-        colorAreaStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-        },
-        gradientStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-            "WebkitMaskImage": maskImage,
-            maskImage: maskImage
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateRGB_G = (orientation, dir, zValue)=>{
-    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-    let result = {
-        colorAreaStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-        },
-        gradientStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-            "WebkitMaskImage": maskImage,
-            maskImage: maskImage
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateRGB_B = (orientation, dir, zValue)=>{
-    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-    let result = {
-        colorAreaStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-        },
-        gradientStyles: {
-            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-            "WebkitMaskImage": maskImage,
-            maskImage: maskImage
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSL_H = (orientation, dir, zValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            background: [
-                `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
-                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
-                `hsl(${zValue}, 100%, 50%)`
-            ].join(",")
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSL_S = (orientation, dir, alphaValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            background: [
-                `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
-                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-                "hsl(0, 0%, 50%)"
-            ].join(",")
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSL_L = (orientation, dir, zValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            backgroundImage: [
-                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
-                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
-            ].join(",")
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSB_H = (orientation, dir, zValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            background: [
-                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
-                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
-                `hsl(${zValue}, 100%, 50%)`
-            ].join(",")
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSB_S = (orientation, dir, alphaValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            background: [
-                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
-                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
-            ].join(",")
-        }
-    };
-    return result;
-};
-const $40297c24c53588e6$var$generateHSB_B = (orientation, dir, alphaValue)=>{
-    let result = {
-        colorAreaStyles: {},
-        gradientStyles: {
-            background: [
-                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
-                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-                "#000"
-            ].join(",")
-        }
-    };
-    return result;
-};
-function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
-    let returnVal = (0, $7KHxM$useMemo)(()=>{
-        let orientation = [
-            "top",
-            direction === "rtl" ? "left" : "right"
-        ];
-        let dir = false;
-        let background = {
-            colorAreaStyles: {},
-            gradientStyles: {}
-        };
-        let zValue = state.value.getChannelValue(zChannel);
-        let { minValue: zMin, maxValue: zMax } = state.value.getChannelRange(zChannel);
-        let alphaValue = (zValue - zMin) / (zMax - zMin);
-        let isHSL = state.value.getColorSpace() === "hsl";
-        if (!isDisabled) switch(zChannel){
-            case "red":
-                dir = xChannel === "green";
-                background = $40297c24c53588e6$var$generateRGB_R(orientation, dir, zValue);
-                break;
-            case "green":
-                dir = xChannel === "red";
-                background = $40297c24c53588e6$var$generateRGB_G(orientation, dir, zValue);
-                break;
-            case "blue":
-                dir = xChannel === "red";
-                background = $40297c24c53588e6$var$generateRGB_B(orientation, dir, zValue);
-                break;
-            case "hue":
-                dir = xChannel !== "saturation";
-                if (isHSL) background = $40297c24c53588e6$var$generateHSL_H(orientation, dir, zValue);
-                else background = $40297c24c53588e6$var$generateHSB_H(orientation, dir, zValue);
-                break;
-            case "saturation":
-                dir = xChannel === "hue";
-                if (isHSL) background = $40297c24c53588e6$var$generateHSL_S(orientation, dir, alphaValue);
-                else background = $40297c24c53588e6$var$generateHSB_S(orientation, dir, alphaValue);
-                break;
-            case "brightness":
-                dir = xChannel === "hue";
-                background = $40297c24c53588e6$var$generateHSB_B(orientation, dir, alphaValue);
-                break;
-            case "lightness":
-                dir = xChannel === "hue";
-                background = $40297c24c53588e6$var$generateHSL_L(orientation, dir, zValue);
-                break;
-        }
-        let { x: x, y: y } = state.getThumbPosition();
-        if (direction === "rtl") x = 1 - x;
-        let forcedColorAdjustNoneStyle = {
-            forcedColorAdjust: "none"
-        };
-        return {
-            colorAreaStyleProps: {
-                style: {
-                    position: "relative",
-                    touchAction: "none",
-                    ...forcedColorAdjustNoneStyle,
-                    ...background.colorAreaStyles
-                }
-            },
-            gradientStyleProps: {
-                style: {
-                    touchAction: "none",
-                    ...forcedColorAdjustNoneStyle,
-                    ...background.gradientStyles
-                }
-            },
-            thumbStyleProps: {
-                style: {
-                    position: "absolute",
-                    left: `${x * 100}%`,
-                    top: `${y * 100}%`,
-                    transform: "translate(0%, 0%)",
-                    touchAction: "none",
-                    ...forcedColorAdjustNoneStyle
-                }
-            }
-        };
-    }, [
-        direction,
-        state,
-        zChannel,
-        xChannel,
-        isDisabled
-    ]);
-    return returnVal;
-}
-
-
-
-
-
-function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, "aria-label": ariaLabel, xName: xName, yName: yName } = props;
-    let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($3493a52097159720$exports))), "@react-aria/color");
-    let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
-    let { direction: direction, locale: locale } = (0, $7KHxM$useLocale)();
-    let [focusedInput, setFocusedInput] = (0, $7KHxM$useState)(null);
-    let focusInput = (0, $7KHxM$useCallback)((inputRef = inputXRef)=>{
-        if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
-    }, [
-        inputXRef
-    ]);
-    (0, $7KHxM$useFormReset)(inputXRef, [
-        state.xValue,
-        state.yValue
-    ], ([x, y])=>{
-        let newColor = state.value.withChannelValue(state.channels.xChannel, x).withChannelValue(state.channels.yChannel, y);
-        state.setValue(newColor);
-    });
-    let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $7KHxM$useState)(false);
-    let [valueChangedViaInputChangeEvent, setValueChangedViaInputChangeEvent] = (0, $7KHxM$useState)(false);
-    let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
-    let xChannelStep = state.xChannelStep;
-    let yChannelStep = state.yChannelStep;
-    let currentPosition = (0, $7KHxM$useRef)(null);
-    let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
-        onKeyDown (e) {
-            // these are the cases that useMove doesn't handle
-            if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
-                e.continuePropagation();
-                return;
-            }
-            // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
-            e.preventDefault();
-            // remember to set this and unset it so that onChangeEnd is fired
-            state.setDragging(true);
-            setValueChangedViaKeyboard(true);
-            let dir;
-            switch(e.key){
-                case "PageUp":
-                    state.incrementY(state.yChannelPageStep);
-                    dir = "y";
-                    break;
-                case "PageDown":
-                    state.decrementY(state.yChannelPageStep);
-                    dir = "y";
-                    break;
-                case "Home":
-                    direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
-                    dir = "x";
-                    break;
-                case "End":
-                    direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
-                    dir = "x";
-                    break;
-            }
-            state.setDragging(false);
-            if (dir) {
-                let input = dir === "x" ? inputXRef : inputYRef;
-                focusInput(input);
-                setFocusedInput(dir);
-            }
-        }
-    });
-    let moveHandler = {
-        onMoveStart () {
-            currentPosition.current = null;
-            state.setDragging(true);
-        },
-        onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
-            var _containerRef_current;
-            let { incrementX: incrementX, decrementX: decrementX, incrementY: incrementY, decrementY: decrementY, xChannelPageStep: xChannelPageStep, xChannelStep: xChannelStep, yChannelPageStep: yChannelPageStep, yChannelStep: yChannelStep, getThumbPosition: getThumbPosition, setColorFromPoint: setColorFromPoint } = state;
-            if (currentPosition.current == null) currentPosition.current = getThumbPosition();
-            let { width: width, height: height } = ((_containerRef_current = containerRef.current) === null || _containerRef_current === void 0 ? void 0 : _containerRef_current.getBoundingClientRect()) || {
-                width: 0,
-                height: 0
-            };
-            let valueChanged = deltaX !== 0 || deltaY !== 0;
-            if (pointerType === "keyboard") {
-                let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
-                let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
-                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);
-                // set the focused input based on which axis has the greater delta
-                focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
-                setFocusedInput(focusedInput);
-            } else {
-                currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
-                currentPosition.current.y += deltaY / height;
-                setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
-            }
-        },
-        onMoveEnd () {
-            isOnColorArea.current = false;
-            state.setDragging(false);
-            let input = focusedInput === "x" ? inputXRef : inputYRef;
-            focusInput(input);
-        }
-    };
-    let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
-    let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
-        onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) {
-                setValueChangedViaKeyboard(false);
-                setValueChangedViaInputChangeEvent(false);
-            }
-        }
-    });
-    let currentPointer = (0, $7KHxM$useRef)(undefined);
-    let isOnColorArea = (0, $7KHxM$useRef)(false);
-    let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
-        onMoveStart () {
-            if (isOnColorArea.current) moveHandler.onMoveStart();
-        },
-        onMove (e) {
-            if (isOnColorArea.current) moveHandler.onMove(e);
-        },
-        onMoveEnd () {
-            if (isOnColorArea.current) moveHandler.onMoveEnd();
-        }
-    });
-    let onThumbDown = (id)=>{
-        if (!state.isDragging) {
-            currentPointer.current = id;
-            setValueChangedViaKeyboard(false);
-            focusInput();
-            state.setDragging(true);
-            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
-            else {
-                addGlobalListener(window, "mouseup", onThumbUp, false);
-                addGlobalListener(window, "touchend", onThumbUp, false);
-            }
-        }
-    };
-    let onThumbUp = (e)=>{
-        var _e_changedTouches;
-        var _e_pointerId;
-        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-        if (id === currentPointer.current) {
-            setValueChangedViaKeyboard(false);
-            focusInput();
-            state.setDragging(false);
-            currentPointer.current = undefined;
-            isOnColorArea.current = false;
-            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
-            else {
-                removeGlobalListener(window, "mouseup", onThumbUp, false);
-                removeGlobalListener(window, "touchend", onThumbUp, false);
-            }
-        }
-    };
-    let onColorAreaDown = (colorArea, id, clientX, clientY)=>{
-        let rect = colorArea.getBoundingClientRect();
-        let { width: width, height: height } = rect;
-        let x = (clientX - rect.x) / width;
-        let y = (clientY - rect.y) / height;
-        if (direction === "rtl") x = 1 - x;
-        if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
-            isOnColorArea.current = true;
-            setValueChangedViaKeyboard(false);
-            currentPointer.current = id;
-            state.setColorFromPoint(x, y);
-            focusInput();
-            state.setDragging(true);
-            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onColorAreaUp, false);
-            else {
-                addGlobalListener(window, "mouseup", onColorAreaUp, false);
-                addGlobalListener(window, "touchend", onColorAreaUp, false);
-            }
-        }
-    };
-    let onColorAreaUp = (e)=>{
-        var _e_changedTouches;
-        var _e_pointerId;
-        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-        if (isOnColorArea.current && id === currentPointer.current) {
-            isOnColorArea.current = false;
-            setValueChangedViaKeyboard(false);
-            currentPointer.current = undefined;
-            state.setDragging(false);
-            focusInput();
-            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onColorAreaUp, false);
-            else {
-                removeGlobalListener(window, "mouseup", onColorAreaUp, false);
-                removeGlobalListener(window, "touchend", onColorAreaUp, false);
-            }
-        }
-    };
-    let colorAreaInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
-        ...typeof PointerEvent !== "undefined" ? {
-            onPointerDown: (e)=>{
-                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;
-                onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);
-            },
-            onTouchStart: (e)=>{
-                onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-            }
-        }
-    }, movePropsContainer);
-    let thumbInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
-        ...typeof PointerEvent !== "undefined" ? {
-            onPointerDown: (e)=>{
-                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;
-                onThumbDown(undefined);
-            },
-            onTouchStart: (e)=>{
-                onThumbDown(e.changedTouches[0].identifier);
-            }
-        }
-    }, focusWithinProps, keyboardProps, movePropsThumb);
-    let { focusProps: xInputFocusProps } = (0, $7KHxM$useFocus)({
-        onFocus: ()=>{
-            setFocusedInput("x");
-        }
-    });
-    let { focusProps: yInputFocusProps } = (0, $7KHxM$useFocus)({
-        onFocus: ()=>{
-            setFocusedInput("y");
-        }
-    });
-    const onChange = (e)=>{
-        const { target: target } = e;
-        setValueChangedViaInputChangeEvent(true);
-        if (target === inputXRef.current) state.setXValue(parseFloat(target.value));
-        else if (target === inputYRef.current) state.setYValue(parseFloat(target.value));
-    };
-    let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
-    let value = state.getDisplayColor();
-    const getAriaValueTextForChannel = (0, $7KHxM$useCallback)((channel)=>{
-        const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
-        return `${isAfterInput ? stringFormatter.format("colorNameAndValue", {
-            name: value.getChannelName(channel, locale),
-            value: value.formatChannelValue(channel, locale)
-        }) : [
-            stringFormatter.format("colorNameAndValue", {
-                name: value.getChannelName(channel, locale),
-                value: value.formatChannelValue(channel, locale)
-            }),
-            stringFormatter.format("colorNameAndValue", {
-                name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
-                value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
-            }),
-            stringFormatter.format("colorNameAndValue", {
-                name: value.getChannelName(zChannel, locale),
-                value: value.formatChannelValue(zChannel, locale)
-            })
-        ].join(", ")}, ${value.getColorName(locale)}`;
-    }, [
-        locale,
-        value,
-        stringFormatter,
-        valueChangedViaInputChangeEvent,
-        valueChangedViaKeyboard,
-        xChannel,
-        yChannel,
-        zChannel
-    ]);
-    let colorPickerLabel = stringFormatter.format("colorPicker");
-    let xInputLabellingProps = (0, $7KHxM$useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-            label: ariaLabel,
-            channelLabel: colorPickerLabel
-        }) : colorPickerLabel
-    });
-    let yInputLabellingProps = (0, $7KHxM$useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-            label: ariaLabel,
-            channelLabel: colorPickerLabel
-        }) : colorPickerLabel
-    });
-    let colorAreaLabellingProps = (0, $7KHxM$useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
-    }, isMobile ? colorPickerLabel : undefined);
-    let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
-    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $7KHxM$useVisuallyHidden)({
-        style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
-        }
-    });
-    let { colorAreaStyleProps: colorAreaStyleProps, gradientStyleProps: gradientStyleProps, thumbStyleProps: thumbStyleProps } = (0, $40297c24c53588e6$export$dd62420467d245ca)({
-        direction: direction,
-        state: state,
-        xChannel: xChannel,
-        zChannel: zChannel,
-        isDisabled: props.isDisabled
-    });
-    return {
-        colorAreaProps: {
-            ...colorAreaLabellingProps,
-            ...colorAreaInteractions,
-            ...colorAreaStyleProps,
-            role: "group"
-        },
-        gradientProps: {
-            ...gradientStyleProps,
-            role: "presentation"
-        },
-        thumbProps: {
-            ...thumbInteractions,
-            ...thumbStyleProps,
-            role: "presentation"
-        },
-        xInputProps: {
-            ...xInputLabellingProps,
-            ...visuallyHiddenProps,
-            ...xInputFocusProps,
-            type: "range",
-            min: state.value.getChannelRange(xChannel).minValue,
-            max: state.value.getChannelRange(xChannel).maxValue,
-            step: xChannelStep,
-            "aria-roledescription": ariaRoleDescription,
-            "aria-valuetext": getAriaValueTextForChannel(xChannel),
-            "aria-orientation": "horizontal",
-            disabled: isDisabled,
-            value: state.value.getChannelValue(xChannel),
-            name: xName,
-            tabIndex: isMobile || !focusedInput || focusedInput === "x" ? undefined : -1,
-            /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
-        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ "aria-hidden": isMobile || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: onChange
-        },
-        yInputProps: {
-            ...yInputLabellingProps,
-            ...visuallyHiddenProps,
-            ...yInputFocusProps,
-            type: "range",
-            min: state.value.getChannelRange(yChannel).minValue,
-            max: state.value.getChannelRange(yChannel).maxValue,
-            step: yChannelStep,
-            "aria-roledescription": ariaRoleDescription,
-            "aria-valuetext": getAriaValueTextForChannel(yChannel),
-            "aria-orientation": "vertical",
-            disabled: isDisabled,
-            value: state.value.getChannelValue(yChannel),
-            name: yName,
-            tabIndex: isMobile || focusedInput === "y" ? undefined : -1,
-            /*
-        So that only a single "2d slider" control shows up when listing form elements for screen readers,
-        add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
-        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ "aria-hidden": isMobile || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
-            onChange: onChange
-        }
-    };
-}
-
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
-    let { locale: locale, direction: direction } = (0, $7KHxM$useLocale)();
-    // Provide a default aria-label if there is no other label provided.
-    if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
-    // @ts-ignore - ignore unused incompatible props
-    let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $7KHxM$useSlider)({
-        ...props,
-        "aria-label": ariaLabel
-    }, state, trackRef);
-    let { inputProps: inputProps, thumbProps: thumbProps } = (0, $7KHxM$useSliderThumb)({
-        index: 0,
-        orientation: orientation,
-        isDisabled: props.isDisabled,
-        name: name,
-        trackRef: trackRef,
-        inputRef: inputRef
-    }, state);
-    let value = state.getDisplayColor();
-    let generateBackground = ()=>{
-        let to;
-        if (orientation === "vertical") to = "top";
-        else if (direction === "ltr") to = "right";
-        else to = "left";
-        switch(channel){
-            case "hue":
-                return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-            case "lightness":
-                {
-                    // We have to add an extra color stop in the middle so that the hue shows up at all.
-                    // Otherwise it will always just be black to white.
-                    let min = state.getThumbMinValue(0);
-                    let max = state.getThumbMaxValue(0);
-                    let start = value.withChannelValue(channel, min).toString("css");
-                    let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
-                    let end = value.withChannelValue(channel, max).toString("css");
-                    return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
-                }
-            case "saturation":
-            case "brightness":
-            case "red":
-            case "green":
-            case "blue":
-            case "alpha":
-                {
-                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
-                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
-                    return `linear-gradient(to ${to}, ${start}, ${end})`;
-                }
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-    };
-    let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: "none"
-    };
-    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
-    return {
-        trackProps: {
-            ...(0, $7KHxM$mergeProps)(groupProps, trackProps),
-            style: {
-                ...trackProps.style,
-                ...forcedColorAdjustNoneStyle,
-                background: generateBackground()
-            }
-        },
-        inputProps: inputProps,
-        thumbProps: {
-            ...thumbProps,
-            style: {
-                ...thumbProps.style,
-                ...forcedColorAdjustNoneStyle
-            }
-        },
-        labelProps: labelProps,
-        outputProps: outputProps
-    };
-}
-
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
-    let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
-    let thumbRadius = (innerRadius + outerRadius) / 2;
-    let focusInput = (0, $7KHxM$useCallback)(()=>{
-        if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
-    }, [
-        inputRef
-    ]);
-    (0, $7KHxM$useFormReset)(inputRef, state.hue, state.setHue);
-    let currentPosition = (0, $7KHxM$useRef)(null);
-    let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
-        onKeyDown (e) {
-            // these are the cases that useMove doesn't handle
-            if (!/^(PageUp|PageDown)$/.test(e.key)) {
-                e.continuePropagation();
-                return;
-            }
-            // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
-            e.preventDefault();
-            // remember to set this and unset it so that onChangeEnd is fired
-            state.setDragging(true);
-            switch(e.key){
-                case "PageUp":
-                    e.preventDefault();
-                    state.increment(state.pageStep);
-                    break;
-                case "PageDown":
-                    e.preventDefault();
-                    state.decrement(state.pageStep);
-                    break;
-            }
-            state.setDragging(false);
-        }
-    });
-    let moveHandler = {
-        onMoveStart () {
-            currentPosition.current = null;
-            state.setDragging(true);
-        },
-        onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
-            if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
-            currentPosition.current.x += deltaX;
-            currentPosition.current.y += deltaY;
-            if (pointerType === "keyboard") {
-                if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? state.pageStep : state.step);
-                else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? state.pageStep : state.step);
-            } else state.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
-        },
-        onMoveEnd () {
-            isOnTrack.current = false;
-            state.setDragging(false);
-            focusInput();
-        }
-    };
-    let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
-    let currentPointer = (0, $7KHxM$useRef)(undefined);
-    let isOnTrack = (0, $7KHxM$useRef)(false);
-    let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
-        onMoveStart () {
-            if (isOnTrack.current) moveHandler.onMoveStart();
-        },
-        onMove (e) {
-            if (isOnTrack.current) moveHandler.onMove(e);
-        },
-        onMoveEnd () {
-            if (isOnTrack.current) moveHandler.onMoveEnd();
-        }
-    });
-    let onThumbDown = (id)=>{
-        if (!state.isDragging) {
-            currentPointer.current = id;
-            focusInput();
-            state.setDragging(true);
-            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
-            else {
-                addGlobalListener(window, "mouseup", onThumbUp, false);
-                addGlobalListener(window, "touchend", onThumbUp, false);
-            }
-        }
-    };
-    let onThumbUp = (e)=>{
-        var _e_changedTouches;
-        var _e_pointerId;
-        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-        if (id === currentPointer.current) {
-            focusInput();
-            state.setDragging(false);
-            currentPointer.current = undefined;
-            isOnTrack.current = false;
-            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
-            else {
-                removeGlobalListener(window, "mouseup", onThumbUp, false);
-                removeGlobalListener(window, "touchend", onThumbUp, false);
-            }
-        }
-    };
-    let onTrackDown = (track, id, pageX, pageY)=>{
-        let rect = track.getBoundingClientRect();
-        let x = pageX - rect.x - rect.width / 2;
-        let y = pageY - rect.y - rect.height / 2;
-        let radius = Math.sqrt(x * x + y * y);
-        if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
-            isOnTrack.current = true;
-            currentPointer.current = id;
-            state.setHueFromPoint(x, y, radius);
-            focusInput();
-            state.setDragging(true);
-            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
-            else {
-                addGlobalListener(window, "mouseup", onTrackUp, false);
-                addGlobalListener(window, "touchend", onTrackUp, false);
-            }
-        }
-    };
-    let onTrackUp = (e)=>{
-        var _e_changedTouches;
-        var _e_pointerId;
-        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
-        if (isOnTrack.current && id === currentPointer.current) {
-            isOnTrack.current = false;
-            currentPointer.current = undefined;
-            state.setDragging(false);
-            focusInput();
-            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onTrackUp, false);
-            else {
-                removeGlobalListener(window, "mouseup", onTrackUp, false);
-                removeGlobalListener(window, "touchend", onTrackUp, false);
-            }
-        }
-    };
-    let trackInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
-        ...typeof PointerEvent !== "undefined" ? {
-            onPointerDown: (e)=>{
-                if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
-                onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
-            }
-        } : {
-            onMouseDown: (e)=>{
-                if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
-                onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);
-            },
-            onTouchStart: (e)=>{
-                onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-            }
-        }
-    }, movePropsContainer);
-    let thumbInteractions = isDisabled ? {} : (0, $7KHxM$mergeProps)({
-        onMouseDown: (e)=>{
-            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
-            onThumbDown(undefined);
-        },
-        onPointerDown: (e)=>{
-            if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
-            onThumbDown(e.pointerId);
-        },
-        onTouchStart: (e)=>{
-            onThumbDown(e.changedTouches[0].identifier);
-        }
-    }, keyboardProps, movePropsThumb);
-    let { x: x, y: y } = state.getThumbPosition(thumbRadius);
-    // Provide a default aria-label if none is given
-    let { locale: locale } = (0, $7KHxM$useLocale)();
-    if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
-    let inputLabellingProps = (0, $7KHxM$useLabels)({
-        ...props,
-        "aria-label": ariaLabel
-    });
-    let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange("hue");
-    let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: "none"
-    };
-    return {
-        trackProps: {
-            ...trackInteractions,
-            style: {
-                position: "relative",
-                touchAction: "none",
-                width: outerRadius * 2,
-                height: outerRadius * 2,
-                background: `
-          conic-gradient(
-            from 90deg,
-            hsl(0, 100%, 50%),
-            hsl(30, 100%, 50%),
-            hsl(60, 100%, 50%),
-            hsl(90, 100%, 50%),
-            hsl(120, 100%, 50%),
-            hsl(150, 100%, 50%),
-            hsl(180, 100%, 50%),
-            hsl(210, 100%, 50%),
-            hsl(240, 100%, 50%),
-            hsl(270, 100%, 50%),
-            hsl(300, 100%, 50%),
-            hsl(330, 100%, 50%),
-            hsl(360, 100%, 50%)
-          )
-        `,
-                clipPath: `path(evenodd, "${$b4a0a4fdc900495e$var$circlePath(outerRadius, outerRadius, outerRadius)} ${$b4a0a4fdc900495e$var$circlePath(outerRadius, outerRadius, innerRadius)}")`,
-                ...forcedColorAdjustNoneStyle
-            }
-        },
-        thumbProps: {
-            ...thumbInteractions,
-            style: {
-                position: "absolute",
-                left: "50%",
-                top: "50%",
-                transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
-                touchAction: "none",
-                ...forcedColorAdjustNoneStyle
-            }
-        },
-        inputProps: (0, $7KHxM$mergeProps)(inputLabellingProps, {
-            type: "range",
-            min: String(minValue),
-            max: String(maxValue),
-            step: String(step),
-            "aria-valuetext": `${state.value.formatChannelValue("hue", locale)}, ${state.value.getHueName(locale)}`,
-            disabled: isDisabled,
-            value: `${state.value.getChannelValue("hue")}`,
-            name: name,
-            onChange: (e)=>{
-                state.setHue(parseFloat(e.target.value));
-            }
-        })
-    };
-}
-// Creates an SVG path string for a circle.
-function $b4a0a4fdc900495e$var$circlePath(cx, cy, r) {
-    return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;
-}
-
-
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */ 
-
-
-
-
 
-function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
-    let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
-    let inputId = (0, $7KHxM$useId)();
-    let { spinButtonProps: spinButtonProps } = (0, $7KHxM$useSpinButton)({
-        isDisabled: isDisabled,
-        isReadOnly: isReadOnly,
-        isRequired: isRequired,
-        maxValue: 0xFFFFFF,
-        minValue: 0,
-        onIncrement: increment,
-        onIncrementToMax: incrementToMax,
-        onDecrement: decrement,
-        onDecrementToMin: decrementToMin,
-        value: colorValue ? colorValue.toHexInt() : undefined,
-        textValue: colorValue ? colorValue.toString("hex") : undefined
-    });
-    let [focusWithin, setFocusWithin] = (0, $7KHxM$useState)(false);
-    let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
-        isDisabled: isDisabled,
-        onFocusWithinChange: setFocusWithin
-    });
-    let onWheel = (0, $7KHxM$useCallback)((e)=>{
-        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
-        if (e.deltaY > 0) increment();
-        else if (e.deltaY < 0) decrement();
-    }, [
-        decrement,
-        increment
-    ]);
-    // If the input isn't supposed to receive input, disable scrolling.
-    let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
-    (0, $7KHxM$useScrollWheel)({
-        onScroll: onWheel,
-        isDisabled: scrollingDisabled
-    }, ref);
-    let onChange = (value)=>{
-        if (state.validate(value)) state.setInputValue(value);
-    };
-    let { inputProps: inputProps, ...otherProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
-        id: inputId,
-        value: inputValue,
-        defaultValue: undefined,
-        validate: undefined,
-        [(0, $7KHxM$privateValidationStateProp)]: state,
-        type: "text",
-        autoComplete: "off",
-        onChange: onChange
-    }), state, ref);
-    inputProps = (0, $7KHxM$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuenow": null,
-        "aria-valuetext": null,
-        autoCorrect: "off",
-        spellCheck: "false",
-        onBlur: commit
-    });
-    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
-    return {
-        inputProps: inputProps,
-        ...otherProps
-    };
-}