@react-aria/color 3.0.0-beta.3 → 3.0.0-beta.31

package/dist/import.mjs

@@ -0,0 +1,1139 @@
+import $eccab2b0118aef08$exports from "./ar-AE.mjs";
+import $bf2b4507594e3d45$exports from "./bg-BG.mjs";
+import $01c08487af7ecd14$exports from "./cs-CZ.mjs";
+import $5e997db6ea0d10f6$exports from "./da-DK.mjs";
+import $fe5998f640a79fd2$exports from "./de-DE.mjs";
+import $18e4d1d5b500a9ee$exports from "./el-GR.mjs";
+import $bf90a11a7a42a0f7$exports from "./en-US.mjs";
+import $dd0d25f885b5c5f3$exports from "./es-ES.mjs";
+import $d950967017e3485b$exports from "./et-EE.mjs";
+import $00a415a3f0ab315a$exports from "./fi-FI.mjs";
+import $d80f30fe86c95741$exports from "./fr-FR.mjs";
+import $6912afb584340a2e$exports from "./he-IL.mjs";
+import $7b97fcacd84ec90f$exports from "./hr-HR.mjs";
+import $da9b443e89eebc6b$exports from "./hu-HU.mjs";
+import $35f135b45eb4d95b$exports from "./it-IT.mjs";
+import $760b09448e39c6cd$exports from "./ja-JP.mjs";
+import $fc7b7d43be9703ec$exports from "./ko-KR.mjs";
+import $74918a1664156912$exports from "./lt-LT.mjs";
+import $4e6cde11c2bc9840$exports from "./lv-LV.mjs";
+import $6faa3defebc3eb72$exports from "./nb-NO.mjs";
+import $6ac9b6b1b7e3ca12$exports from "./nl-NL.mjs";
+import $1be8b0ee8841f1e7$exports from "./pl-PL.mjs";
+import $f9507c2d404ed689$exports from "./pt-BR.mjs";
+import $8f872ea59c02d67e$exports from "./pt-PT.mjs";
+import $b03b45b62a7ccae4$exports from "./ro-RO.mjs";
+import $f1107d94c09df9b8$exports from "./ru-RU.mjs";
+import $b61325f242fafc7c$exports from "./sk-SK.mjs";
+import $f44b7cf39ac8f315$exports from "./sl-SI.mjs";
+import $aa8cd83fc8d4982b$exports from "./sr-SP.mjs";
+import $7c4f4e5bb7c06f1e$exports from "./sv-SE.mjs";
+import $8045cf930ef745aa$exports from "./tr-TR.mjs";
+import $ee2044a77f24b118$exports from "./uk-UA.mjs";
+import $4e1dbc65a687dd93$exports from "./zh-CN.mjs";
+import $b0fef28529309aa6$exports from "./zh-TW.mjs";
+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";
+
+
+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
+ * 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.
+ */ 
+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 { 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);
+        }
+    });
+    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");
+        }
+    });
+    let isMobile = (0, $7KHxM$isIOS)() || (0, $7KHxM$isAndroid)();
+    function getAriaValueTextForChannel(channel) {
+        return valueChangedViaKeyboard ? stringFormatter.format("colorNameAndValue", {
+            name: state.value.getChannelName(channel, locale),
+            value: state.value.formatChannelValue(channel, locale)
+        }) : [
+            stringFormatter.format("colorNameAndValue", {
+                name: state.value.getChannelName(channel, locale),
+                value: state.value.formatChannelValue(channel, locale)
+            }),
+            stringFormatter.format("colorNameAndValue", {
+                name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
+                value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
+            })
+        ].join(", ");
+    }
+    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),
+            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: (e)=>{
+                state.setXValue(parseFloat(e.target.value));
+            }
+        },
+        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: (e)=>{
+                state.setYValue(parseFloat(e.target.value));
+            }
+        }
+    };
+}
+
+
+/*
+ * 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 generateBackground = ()=>{
+        let value = state.getDisplayColor();
+        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"
+    };
+    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),
+            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
+    };
+}
+
+
+
+
+export {$60bd7d6e45dcddfa$export$2f92a7a615a014f6 as useColorArea, $40af666d6c251e36$export$106b7a4e66508f66 as useColorSlider, $b4a0a4fdc900495e$export$9064ff4e44b3729a as useColorWheel, $f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
+//# sourceMappingURL=module.js.map