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

package/dist/main.js

@@ -1,724 +1,21 @@
-var $f141a15c3076a67b$exports = require("./ar-AE.main.js");
-var $435ac2a9fdd2ae5e$exports = require("./bg-BG.main.js");
-var $6b29758b432284f5$exports = require("./cs-CZ.main.js");
-var $357597bcf4afd6fb$exports = require("./da-DK.main.js");
-var $ddc6333960e2b591$exports = require("./de-DE.main.js");
-var $417ee93d3ca474c0$exports = require("./el-GR.main.js");
-var $519561bc6dcff98b$exports = require("./en-US.main.js");
-var $7a34c3fcc03402b8$exports = require("./es-ES.main.js");
-var $860f86d6eae22cba$exports = require("./et-EE.main.js");
-var $8525d3c77b8a51b0$exports = require("./fi-FI.main.js");
-var $8240fe6825e900ec$exports = require("./fr-FR.main.js");
-var $377849238307c673$exports = require("./he-IL.main.js");
-var $5a6f44e0ec14b083$exports = require("./hr-HR.main.js");
-var $82327d6e71e3e273$exports = require("./hu-HU.main.js");
-var $b1e297275c248ab8$exports = require("./it-IT.main.js");
-var $b39c9f2638b4d2b9$exports = require("./ja-JP.main.js");
-var $2d2fbf4195848a62$exports = require("./ko-KR.main.js");
-var $ea88350d0828fa2c$exports = require("./lt-LT.main.js");
-var $0e0acd541630120a$exports = require("./lv-LV.main.js");
-var $952a458224052046$exports = require("./nb-NO.main.js");
-var $2d8e195bc5683483$exports = require("./nl-NL.main.js");
-var $750d83f83c5f38d4$exports = require("./pl-PL.main.js");
-var $656b2846f611067c$exports = require("./pt-BR.main.js");
-var $58ce120874d069dd$exports = require("./pt-PT.main.js");
-var $fd6c85b4eba18825$exports = require("./ro-RO.main.js");
-var $8849a15ecc435984$exports = require("./ru-RU.main.js");
-var $5192372f064be783$exports = require("./sk-SK.main.js");
-var $094525f9176df65d$exports = require("./sl-SI.main.js");
-var $9795aa59b4ad40ed$exports = require("./sr-SP.main.js");
-var $9ebaa0b485f13e4d$exports = require("./sv-SE.main.js");
-var $ad58e2e4e0f2e750$exports = require("./tr-TR.main.js");
-var $dafc19306f8b2dfc$exports = require("./uk-UA.main.js");
-var $d31a8b80af5acc16$exports = require("./zh-CN.main.js");
-var $7377d28aec5fa200$exports = require("./zh-TW.main.js");
-var $kZqDi$reactariautils = require("@react-aria/utils");
-var $kZqDi$react = require("react");
-var $kZqDi$reactariainteractions = require("@react-aria/interactions");
-var $kZqDi$reactariai18n = require("@react-aria/i18n");
-var $kZqDi$reactariavisuallyhidden = require("@react-aria/visually-hidden");
-var $kZqDi$reactariaslider = require("@react-aria/slider");
-var $kZqDi$reactstatelyform = require("@react-stately/form");
-var $kZqDi$reactariatextfield = require("@react-aria/textfield");
-var $kZqDi$reactariaspinbutton = require("@react-aria/spinbutton");
+var $47925bd68062ac17$exports = require("./useColorArea.main.js");
+var $afbb9647440a7f5b$exports = require("./useColorSlider.main.js");
+var $1d29bf243d4a9a53$exports = require("./useColorWheel.main.js");
+var $58c850037bc7a7ce$exports = require("./useColorField.main.js");
+var $7c947b33be1ec2a6$exports = require("./useColorSwatch.main.js");
+var $d84c0c836f6e3601$exports = require("./useColorChannelField.main.js");
 
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
 
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "useColorArea", () => $47925bd68062ac17$export$2f92a7a615a014f6);
-$parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$106b7a4e66508f66);
-$parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9064ff4e44b3729a);
-$parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$77e32ca575a28fdf);
-/*
- * 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 $4a33e168940636d5$exports = {};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-$4a33e168940636d5$exports = {
-    "ar-AE": $f141a15c3076a67b$exports,
-    "bg-BG": $435ac2a9fdd2ae5e$exports,
-    "cs-CZ": $6b29758b432284f5$exports,
-    "da-DK": $357597bcf4afd6fb$exports,
-    "de-DE": $ddc6333960e2b591$exports,
-    "el-GR": $417ee93d3ca474c0$exports,
-    "en-US": $519561bc6dcff98b$exports,
-    "es-ES": $7a34c3fcc03402b8$exports,
-    "et-EE": $860f86d6eae22cba$exports,
-    "fi-FI": $8525d3c77b8a51b0$exports,
-    "fr-FR": $8240fe6825e900ec$exports,
-    "he-IL": $377849238307c673$exports,
-    "hr-HR": $5a6f44e0ec14b083$exports,
-    "hu-HU": $82327d6e71e3e273$exports,
-    "it-IT": $b1e297275c248ab8$exports,
-    "ja-JP": $b39c9f2638b4d2b9$exports,
-    "ko-KR": $2d2fbf4195848a62$exports,
-    "lt-LT": $ea88350d0828fa2c$exports,
-    "lv-LV": $0e0acd541630120a$exports,
-    "nb-NO": $952a458224052046$exports,
-    "nl-NL": $2d8e195bc5683483$exports,
-    "pl-PL": $750d83f83c5f38d4$exports,
-    "pt-BR": $656b2846f611067c$exports,
-    "pt-PT": $58ce120874d069dd$exports,
-    "ro-RO": $fd6c85b4eba18825$exports,
-    "ru-RU": $8849a15ecc435984$exports,
-    "sk-SK": $5192372f064be783$exports,
-    "sl-SI": $094525f9176df65d$exports,
-    "sr-SP": $9795aa59b4ad40ed$exports,
-    "sv-SE": $9ebaa0b485f13e4d$exports,
-    "tr-TR": $ad58e2e4e0f2e750$exports,
-    "uk-UA": $dafc19306f8b2dfc$exports,
-    "zh-CN": $d31a8b80af5acc16$exports,
-    "zh-TW": $7377d28aec5fa200$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$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 $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
-    let returnVal = (0, $kZqDi$react.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 = $99936ad0bf67c8c4$var$generateRGB_R(orientation, dir, zValue);
-                break;
-            case "green":
-                dir = xChannel === "red";
-                background = $99936ad0bf67c8c4$var$generateRGB_G(orientation, dir, zValue);
-                break;
-            case "blue":
-                dir = xChannel === "red";
-                background = $99936ad0bf67c8c4$var$generateRGB_B(orientation, dir, zValue);
-                break;
-            case "hue":
-                dir = xChannel !== "saturation";
-                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_H(orientation, dir, zValue);
-                else background = $99936ad0bf67c8c4$var$generateHSB_H(orientation, dir, zValue);
-                break;
-            case "saturation":
-                dir = xChannel === "hue";
-                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_S(orientation, dir, alphaValue);
-                else background = $99936ad0bf67c8c4$var$generateHSB_S(orientation, dir, alphaValue);
-                break;
-            case "brightness":
-                dir = xChannel === "hue";
-                background = $99936ad0bf67c8c4$var$generateHSB_B(orientation, dir, alphaValue);
-                break;
-            case "lightness":
-                dir = xChannel === "hue";
-                background = $99936ad0bf67c8c4$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 $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, "aria-label": ariaLabel, xName: xName, yName: yName } = props;
-    let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4a33e168940636d5$exports))), "@react-aria/color");
-    let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
-    let { direction: direction, locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
-    let [focusedInput, setFocusedInput] = (0, $kZqDi$react.useState)(null);
-    let focusInput = (0, $kZqDi$react.useCallback)((inputRef = inputXRef)=>{
-        if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
-    }, [
-        inputXRef
-    ]);
-    (0, $kZqDi$reactariautils.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, $kZqDi$react.useState)(false);
-    let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
-    let xChannelStep = state.xChannelStep;
-    let yChannelStep = state.yChannelStep;
-    let currentPosition = (0, $kZqDi$react.useRef)(null);
-    let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.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, $kZqDi$reactariainteractions.useMove)(moveHandler);
-    let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
-        onFocusWithinChange: (focusWithin)=>{
-            if (!focusWithin) setValueChangedViaKeyboard(false);
-        }
-    });
-    let currentPointer = (0, $kZqDi$react.useRef)(undefined);
-    let isOnColorArea = (0, $kZqDi$react.useRef)(false);
-    let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.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, $kZqDi$reactariautils.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, $kZqDi$reactariautils.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, $kZqDi$reactariainteractions.useFocus)({
-        onFocus: ()=>{
-            setFocusedInput("x");
-        }
-    });
-    let { focusProps: yInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
-        onFocus: ()=>{
-            setFocusedInput("y");
-        }
-    });
-    let isMobile = (0, $kZqDi$reactariautils.isIOS)() || (0, $kZqDi$reactariautils.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, $kZqDi$reactariautils.useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-            label: ariaLabel,
-            channelLabel: colorPickerLabel
-        }) : colorPickerLabel
-    });
-    let yInputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
-            label: ariaLabel,
-            channelLabel: colorPickerLabel
-        }) : colorPickerLabel
-    });
-    let colorAreaLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
-        ...props,
-        "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
-    }, isMobile ? colorPickerLabel : undefined);
-    let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
-    let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kZqDi$reactariavisuallyhidden.useVisuallyHidden)({
-        style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
-        }
-    });
-    let { colorAreaStyleProps: colorAreaStyleProps, gradientStyleProps: gradientStyleProps, thumbStyleProps: thumbStyleProps } = (0, $99936ad0bf67c8c4$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));
-            }
-        }
-    };
-}
-
-
+$parcel$export(module.exports, "useColorArea", () => $47925bd68062ac17$exports.useColorArea);
+$parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$exports.useColorSlider);
+$parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$exports.useColorWheel);
+$parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$exports.useColorField);
+$parcel$export(module.exports, "useColorSwatch", () => $7c947b33be1ec2a6$exports.useColorSwatch);
+$parcel$export(module.exports, "useColorChannelField", () => $d84c0c836f6e3601$exports.useColorChannelField);
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -732,414 +29,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
  */ 
 
 
-function $afbb9647440a7f5b$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, $kZqDi$reactariai18n.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, $kZqDi$reactariaslider.useSlider)({
-        ...props,
-        "aria-label": ariaLabel
-    }, state, trackRef);
-    let { inputProps: inputProps, thumbProps: thumbProps } = (0, $kZqDi$reactariaslider.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, $kZqDi$reactariautils.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 $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
-    let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
-    let thumbRadius = (innerRadius + outerRadius) / 2;
-    let focusInput = (0, $kZqDi$react.useCallback)(()=>{
-        if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
-    }, [
-        inputRef
-    ]);
-    (0, $kZqDi$reactariautils.useFormReset)(inputRef, state.hue, state.setHue);
-    let currentPosition = (0, $kZqDi$react.useRef)(null);
-    let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.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, $kZqDi$reactariainteractions.useMove)(moveHandler);
-    let currentPointer = (0, $kZqDi$react.useRef)(undefined);
-    let isOnTrack = (0, $kZqDi$react.useRef)(false);
-    let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.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, $kZqDi$reactariautils.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, $kZqDi$reactariautils.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, $kZqDi$reactariai18n.useLocale)();
-    if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
-    let inputLabellingProps = (0, $kZqDi$reactariautils.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, "${$1d29bf243d4a9a53$var$circlePath(outerRadius, outerRadius, outerRadius)} ${$1d29bf243d4a9a53$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, $kZqDi$reactariautils.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 $1d29bf243d4a9a53$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 $58c850037bc7a7ce$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, $kZqDi$reactariautils.useId)();
-    let { spinButtonProps: spinButtonProps } = (0, $kZqDi$reactariaspinbutton.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, $kZqDi$react.useState)(false);
-    let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
-        isDisabled: isDisabled,
-        onFocusWithinChange: setFocusWithin
-    });
-    let onWheel = (0, $kZqDi$react.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, $kZqDi$reactariainteractions.useScrollWheel)({
-        onScroll: onWheel,
-        isDisabled: scrollingDisabled
-    }, ref);
-    let onChange = (value)=>{
-        if (state.validate(value)) state.setInputValue(value);
-    };
-    let { inputProps: inputProps, ...otherProps } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
-        id: inputId,
-        value: inputValue,
-        defaultValue: undefined,
-        validate: undefined,
-        [(0, $kZqDi$reactstatelyform.privateValidationStateProp)]: state,
-        type: "text",
-        autoComplete: "off",
-        onChange: onChange
-    }), state, ref);
-    inputProps = (0, $kZqDi$reactariautils.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
-    };
-}