@react-stately/color 3.5.4-nightly.4552 → 3.5.4-nightly.4558

package/dist/module.js

@@ -1,882 +1,8 @@
-import $2d805fd52bb48883$exports from "./ar-AE.module.js";
-import $6c28468dc1df643c$exports from "./bg-BG.module.js";
-import $807554f8230db0ed$exports from "./cs-CZ.module.js";
-import $7097f64386f1761c$exports from "./da-DK.module.js";
-import $bdd847d8beb08799$exports from "./de-DE.module.js";
-import $a53e00b683950971$exports from "./el-GR.module.js";
-import $21cdd87e84f28d89$exports from "./en-US.module.js";
-import $92fee9698e4d675a$exports from "./es-ES.module.js";
-import $7ea012e91a5ad3ee$exports from "./et-EE.module.js";
-import $8460c13bb2d75345$exports from "./fi-FI.module.js";
-import $2a2d5dc14e680587$exports from "./fr-FR.module.js";
-import $9a3f292371bb0589$exports from "./he-IL.module.js";
-import $4742231a685fa068$exports from "./hr-HR.module.js";
-import $05e247fd2960981e$exports from "./hu-HU.module.js";
-import $a67524a79ccbe190$exports from "./it-IT.module.js";
-import $a9eefe9d6c8cb7d5$exports from "./ja-JP.module.js";
-import $4a6b836d4f1bfaba$exports from "./ko-KR.module.js";
-import $c950e4b1c482abde$exports from "./lt-LT.module.js";
-import $d10d6b60dc50b438$exports from "./lv-LV.module.js";
-import $371a732b2494f452$exports from "./nb-NO.module.js";
-import $6d042cae6243464b$exports from "./nl-NL.module.js";
-import $d9ab5c2611e0bcd3$exports from "./pl-PL.module.js";
-import $73f77c9902e29ca6$exports from "./pt-BR.module.js";
-import $4f461eb266a95c10$exports from "./pt-PT.module.js";
-import $dc46bea2f2597899$exports from "./ro-RO.module.js";
-import $622bbd6719cc95af$exports from "./ru-RU.module.js";
-import $4da03c1ecd9a9c7d$exports from "./sk-SK.module.js";
-import $edb6b2fe456ed4e8$exports from "./sl-SI.module.js";
-import $264cd81c52b30815$exports from "./sr-SP.module.js";
-import $6f80afde0270dda7$exports from "./sv-SE.module.js";
-import $23a92651c6957668$exports from "./tr-TR.module.js";
-import $0f9b1074d04f4954$exports from "./uk-UA.module.js";
-import $a9cedf75b94e4916$exports from "./zh-CN.module.js";
-import $37cff576474bc8d4$exports from "./zh-TW.module.js";
-import {clamp as $cBgAy$clamp, toFixedNumber as $cBgAy$toFixedNumber, useControlledState as $cBgAy$useControlledState, snapValueToStep as $cBgAy$snapValueToStep} from "@react-stately/utils";
-import {LocalizedStringDictionary as $cBgAy$LocalizedStringDictionary, LocalizedStringFormatter as $cBgAy$LocalizedStringFormatter} from "@internationalized/string";
-import {NumberFormatter as $cBgAy$NumberFormatter} from "@internationalized/number";
-import {useRef as $cBgAy$useRef, useMemo as $cBgAy$useMemo, useState as $cBgAy$useState} from "react";
-import {useSliderState as $cBgAy$useSliderState} from "@react-stately/slider";
-import {useFormValidationState as $cBgAy$useFormValidationState} from "@react-stately/form";
-
-
-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 $f98dad178a72c00d$exports = {};
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-$f98dad178a72c00d$exports = {
-    "ar-AE": $2d805fd52bb48883$exports,
-    "bg-BG": $6c28468dc1df643c$exports,
-    "cs-CZ": $807554f8230db0ed$exports,
-    "da-DK": $7097f64386f1761c$exports,
-    "de-DE": $bdd847d8beb08799$exports,
-    "el-GR": $a53e00b683950971$exports,
-    "en-US": $21cdd87e84f28d89$exports,
-    "es-ES": $92fee9698e4d675a$exports,
-    "et-EE": $7ea012e91a5ad3ee$exports,
-    "fi-FI": $8460c13bb2d75345$exports,
-    "fr-FR": $2a2d5dc14e680587$exports,
-    "he-IL": $9a3f292371bb0589$exports,
-    "hr-HR": $4742231a685fa068$exports,
-    "hu-HU": $05e247fd2960981e$exports,
-    "it-IT": $a67524a79ccbe190$exports,
-    "ja-JP": $a9eefe9d6c8cb7d5$exports,
-    "ko-KR": $4a6b836d4f1bfaba$exports,
-    "lt-LT": $c950e4b1c482abde$exports,
-    "lv-LV": $d10d6b60dc50b438$exports,
-    "nb-NO": $371a732b2494f452$exports,
-    "nl-NL": $6d042cae6243464b$exports,
-    "pl-PL": $d9ab5c2611e0bcd3$exports,
-    "pt-BR": $73f77c9902e29ca6$exports,
-    "pt-PT": $4f461eb266a95c10$exports,
-    "ro-RO": $dc46bea2f2597899$exports,
-    "ru-RU": $622bbd6719cc95af$exports,
-    "sk-SK": $4da03c1ecd9a9c7d$exports,
-    "sl-SI": $edb6b2fe456ed4e8$exports,
-    "sr-SP": $264cd81c52b30815$exports,
-    "sv-SE": $6f80afde0270dda7$exports,
-    "tr-TR": $23a92651c6957668$exports,
-    "uk-UA": $0f9b1074d04f4954$exports,
-    "zh-CN": $a9cedf75b94e4916$exports,
-    "zh-TW": $37cff576474bc8d4$exports
-};
-
-
-
-
-let $799cddbef784668f$var$dictionary = new (0, $cBgAy$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($f98dad178a72c00d$exports))));
-function $799cddbef784668f$export$6e865ea70d7724f(value) {
-    let res = $799cddbef784668f$var$RGBColor.parse(value) || $799cddbef784668f$var$HSBColor.parse(value) || $799cddbef784668f$var$HSLColor.parse(value);
-    if (res) return res;
-    throw new Error("Invalid color value: " + value);
-}
-function $799cddbef784668f$export$4cde5df63f53f473(v) {
-    if (typeof v === "string") return $799cddbef784668f$export$6e865ea70d7724f(v);
-    else return v;
-}
-// Lightness threshold between orange and brown.
-const $799cddbef784668f$var$ORANGE_LIGHTNESS_THRESHOLD = 0.68;
-// Lightness threshold between pure yellow and "yellow green".
-const $799cddbef784668f$var$YELLOW_GREEN_LIGHTNESS_THRESHOLD = 0.85;
-// The maximum lightness considered to be "dark".
-const $799cddbef784668f$var$MAX_DARK_LIGHTNESS = 0.55;
-// The chroma threshold between gray and color.
-const $799cddbef784668f$var$GRAY_THRESHOLD = 0.001;
-const $799cddbef784668f$var$OKLCH_HUES = [
-    [
-        0,
-        "pink"
-    ],
-    [
-        15,
-        "red"
-    ],
-    [
-        48,
-        "orange"
-    ],
-    [
-        94,
-        "yellow"
-    ],
-    [
-        135,
-        "green"
-    ],
-    [
-        175,
-        "cyan"
-    ],
-    [
-        264,
-        "blue"
-    ],
-    [
-        284,
-        "purple"
-    ],
-    [
-        320,
-        "magenta"
-    ],
-    [
-        349,
-        "pink"
-    ]
-];
-class $799cddbef784668f$var$Color {
-    toHexInt() {
-        return this.toFormat("rgb").toHexInt();
-    }
-    getChannelValue(channel) {
-        if (channel in this) return this[channel];
-        throw new Error("Unsupported color channel: " + channel);
-    }
-    withChannelValue(channel, value) {
-        if (channel in this) {
-            let x = this.clone();
-            x[channel] = value;
-            return x;
-        }
-        throw new Error("Unsupported color channel: " + channel);
-    }
-    getChannelName(channel, locale) {
-        let strings = (0, $cBgAy$LocalizedStringDictionary).getGlobalDictionaryForPackage("@react-stately/color") || $799cddbef784668f$var$dictionary;
-        return strings.getStringForLocale(channel, locale);
-    }
-    getColorSpaceAxes(xyChannels) {
-        let { xChannel: xChannel, yChannel: yChannel } = xyChannels;
-        let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel);
-        let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh);
-        let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh);
-        return {
-            xChannel: xCh,
-            yChannel: yCh,
-            zChannel: zCh
-        };
-    }
-    getColorName(locale) {
-        // Convert to oklch color space, which has perceptually uniform lightness across all hues.
-        let [l, c, h] = $799cddbef784668f$var$toOKLCH(this);
-        let strings = (0, $cBgAy$LocalizedStringDictionary).getGlobalDictionaryForPackage("@react-stately/color") || $799cddbef784668f$var$dictionary;
-        if (l > 0.999) return strings.getStringForLocale("white", locale);
-        if (l < 0.001) return strings.getStringForLocale("black", locale);
-        let hue;
-        [hue, l] = this.getOklchHue(l, c, h, locale);
-        let lightness = "";
-        let chroma = "";
-        if (c <= 0.1 && c >= $799cddbef784668f$var$GRAY_THRESHOLD) {
-            if (l >= 0.7) chroma = "pale";
-            else chroma = "grayish";
-        } else if (c >= 0.15) chroma = "vibrant";
-        if (l < 0.3) lightness = "very dark";
-        else if (l < $799cddbef784668f$var$MAX_DARK_LIGHTNESS) lightness = "dark";
-        else if (l < 0.7) ;
-        else if (l < 0.85) lightness = "light";
-        else lightness = "very light";
-        if (chroma) chroma = strings.getStringForLocale(chroma, locale);
-        if (lightness) lightness = strings.getStringForLocale(lightness, locale);
-        let alpha = this.getChannelValue("alpha");
-        let formatter = new (0, $cBgAy$LocalizedStringFormatter)(locale, strings);
-        let transparency = "";
-        if (alpha < 1) {
-            let percent = new (0, $cBgAy$NumberFormatter)(locale, {
-                style: "percent"
-            }).format(1 - alpha);
-            transparency = formatter.format("transparency", {
-                percent: percent
-            });
-        }
-        return formatter.format("colorName", {
-            lightness: lightness,
-            chroma: chroma,
-            hue: hue,
-            transparency: transparency
-        }).replace(/\s+/g, " ").trim();
-    }
-    getOklchHue(l, c, h, locale) {
-        let strings = (0, $cBgAy$LocalizedStringDictionary).getGlobalDictionaryForPackage("@react-stately/color") || $799cddbef784668f$var$dictionary;
-        if (c < $799cddbef784668f$var$GRAY_THRESHOLD) return [
-            strings.getStringForLocale("gray", locale),
-            l
-        ];
-        for(let i = 0; i < $799cddbef784668f$var$OKLCH_HUES.length; i++){
-            let [hue, hueName] = $799cddbef784668f$var$OKLCH_HUES[i];
-            let [nextHue, nextHueName] = $799cddbef784668f$var$OKLCH_HUES[i + 1] || [
-                360,
-                "pink"
-            ];
-            if (h >= hue && h < nextHue) {
-                // Split orange hue into brown/orange depending on lightness.
-                if (hueName === "orange") {
-                    if (l < $799cddbef784668f$var$ORANGE_LIGHTNESS_THRESHOLD) hueName = "brown";
-                    else // Adjust lightness.
-                    l = l - $799cddbef784668f$var$ORANGE_LIGHTNESS_THRESHOLD + $799cddbef784668f$var$MAX_DARK_LIGHTNESS;
-                }
-                // If the hue is at least halfway to the next hue, add the next hue name as well.
-                if (h > hue + (nextHue - hue) / 2 && hueName !== nextHueName) hueName = `${hueName} ${nextHueName}`;
-                else if (hueName === "yellow" && l < $799cddbef784668f$var$YELLOW_GREEN_LIGHTNESS_THRESHOLD) // Yellow shifts toward green at lower lightnesses.
-                hueName = "yellow green";
-                let name = strings.getStringForLocale(hueName, locale).toLocaleLowerCase(locale);
-                return [
-                    name,
-                    l
-                ];
-            }
-        }
-        throw new Error("Unexpected hue");
-    }
-    getHueName(locale) {
-        let [l, c, h] = $799cddbef784668f$var$toOKLCH(this);
-        let [name] = this.getOklchHue(l, c, h, locale);
-        return name;
-    }
-}
-class $799cddbef784668f$var$RGBColor extends $799cddbef784668f$var$Color {
-    static parse(value) {
-        let colors = [];
-        // matching #rgb, #rgba, #rrggbb, #rrggbbaa
-        if (/^#[\da-f]+$/i.test(value) && [
-            4,
-            5,
-            7,
-            9
-        ].includes(value.length)) {
-            const values = (value.length < 6 ? value.replace(/[^#]/gi, "$&$&") : value).slice(1).split("");
-            while(values.length > 0)colors.push(parseInt(values.splice(0, 2).join(""), 16));
-            colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined;
-        }
-        // matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a)
-        const match = value.match(/^rgba?\((.*)\)$/);
-        if (match === null || match === void 0 ? void 0 : match[1]) {
-            colors = match[1].split(",").map((value)=>Number(value.trim()));
-            colors = colors.map((num, i)=>(0, $cBgAy$clamp)(num, 0, i < 3 ? 255 : 1));
-        }
-        var _colors_;
-        return colors.length < 3 ? undefined : new $799cddbef784668f$var$RGBColor(colors[0], colors[1], colors[2], (_colors_ = colors[3]) !== null && _colors_ !== void 0 ? _colors_ : 1);
-    }
-    toString(format) {
-        switch(format){
-            case "hex":
-                return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
-            case "hexa":
-                return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0") + Math.round(this.alpha * 255).toString(16).padStart(2, "0")).toUpperCase();
-            case "rgb":
-                return `rgb(${this.red}, ${this.green}, ${this.blue})`;
-            case "css":
-            case "rgba":
-                return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
-            default:
-                return this.toFormat(format).toString(format);
-        }
-    }
-    toFormat(format) {
-        switch(format){
-            case "hex":
-            case "hexa":
-            case "rgb":
-            case "rgba":
-                return this;
-            case "hsb":
-            case "hsba":
-                return this.toHSB();
-            case "hsl":
-            case "hsla":
-                return this.toHSL();
-            default:
-                throw new Error("Unsupported color conversion: rgb -> " + format);
-        }
-    }
-    toHexInt() {
-        return this.red << 16 | this.green << 8 | this.blue;
-    }
-    /**
-   * Converts an RGB color value to HSB.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
-   * @returns An HSBColor object.
-   */ toHSB() {
-        const red = this.red / 255;
-        const green = this.green / 255;
-        const blue = this.blue / 255;
-        const min = Math.min(red, green, blue);
-        const brightness = Math.max(red, green, blue);
-        const chroma = brightness - min;
-        const saturation = brightness === 0 ? 0 : chroma / brightness;
-        let hue = 0; // achromatic
-        if (chroma !== 0) {
-            switch(brightness){
-                case red:
-                    hue = (green - blue) / chroma + (green < blue ? 6 : 0);
-                    break;
-                case green:
-                    hue = (blue - red) / chroma + 2;
-                    break;
-                case blue:
-                    hue = (red - green) / chroma + 4;
-                    break;
-            }
-            hue /= 6;
-        }
-        return new $799cddbef784668f$var$HSBColor((0, $cBgAy$toFixedNumber)(hue * 360, 2), (0, $cBgAy$toFixedNumber)(saturation * 100, 2), (0, $cBgAy$toFixedNumber)(brightness * 100, 2), this.alpha);
-    }
-    /**
-   * Converts an RGB color value to HSL.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
-   * @returns An HSLColor object.
-   */ toHSL() {
-        const red = this.red / 255;
-        const green = this.green / 255;
-        const blue = this.blue / 255;
-        const min = Math.min(red, green, blue);
-        const max = Math.max(red, green, blue);
-        const lightness = (max + min) / 2;
-        const chroma = max - min;
-        let hue;
-        let saturation;
-        if (chroma === 0) hue = saturation = 0; // achromatic
-        else {
-            saturation = chroma / (lightness < .5 ? max + min : 2 - max - min);
-            switch(max){
-                case red:
-                    hue = (green - blue) / chroma + (green < blue ? 6 : 0);
-                    break;
-                case green:
-                    hue = (blue - red) / chroma + 2;
-                    break;
-                case blue:
-                    hue = (red - green) / chroma + 4;
-                    break;
-            }
-            hue /= 6;
-        }
-        return new $799cddbef784668f$var$HSLColor((0, $cBgAy$toFixedNumber)(hue * 360, 2), (0, $cBgAy$toFixedNumber)(saturation * 100, 2), (0, $cBgAy$toFixedNumber)(lightness * 100, 2), this.alpha);
-    }
-    clone() {
-        return new $799cddbef784668f$var$RGBColor(this.red, this.green, this.blue, this.alpha);
-    }
-    getChannelRange(channel) {
-        switch(channel){
-            case "red":
-            case "green":
-            case "blue":
-                return {
-                    minValue: 0x0,
-                    maxValue: 0xFF,
-                    step: 0x1,
-                    pageSize: 0x11
-                };
-            case "alpha":
-                return {
-                    minValue: 0,
-                    maxValue: 1,
-                    step: 0.01,
-                    pageSize: 0.1
-                };
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-    }
-    formatChannelValue(channel, locale) {
-        let options;
-        let value = this.getChannelValue(channel);
-        switch(channel){
-            case "red":
-            case "green":
-            case "blue":
-                options = {
-                    style: "decimal"
-                };
-                break;
-            case "alpha":
-                options = {
-                    style: "percent"
-                };
-                break;
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-        return new (0, $cBgAy$NumberFormatter)(locale, options).format(value);
-    }
-    getColorSpace() {
-        return "rgb";
-    }
-    getColorChannels() {
-        return $799cddbef784668f$var$RGBColor.colorChannels;
-    }
-    constructor(red, green, blue, alpha){
-        super();
-        this.red = red;
-        this.green = green;
-        this.blue = blue;
-        this.alpha = alpha;
-    }
-}
-$799cddbef784668f$var$RGBColor.colorChannels = [
-    "red",
-    "green",
-    "blue"
-];
-// X = <negative/positive number with/without decimal places>
-// before/after a comma, 0 or more whitespaces are allowed
-// - hsb(X, X%, X%)
-// - hsba(X, X%, X%, X)
-const $799cddbef784668f$var$HSB_REGEX = /hsb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
-class $799cddbef784668f$var$HSBColor extends $799cddbef784668f$var$Color {
-    static parse(value) {
-        let m;
-        if (m = value.match($799cddbef784668f$var$HSB_REGEX)) {
-            var _m_;
-            const [h, s, b, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(",").map((n)=>Number(n.trim().replace("%", "")));
-            return new $799cddbef784668f$var$HSBColor($799cddbef784668f$var$mod(h, 360), (0, $cBgAy$clamp)(s, 0, 100), (0, $cBgAy$clamp)(b, 0, 100), (0, $cBgAy$clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
-        }
-    }
-    toString(format) {
-        switch(format){
-            case "css":
-                return this.toHSL().toString("css");
-            case "hex":
-                return this.toRGB().toString("hex");
-            case "hexa":
-                return this.toRGB().toString("hexa");
-            case "hsb":
-                return `hsb(${this.hue}, ${(0, $cBgAy$toFixedNumber)(this.saturation, 2)}%, ${(0, $cBgAy$toFixedNumber)(this.brightness, 2)}%)`;
-            case "hsba":
-                return `hsba(${this.hue}, ${(0, $cBgAy$toFixedNumber)(this.saturation, 2)}%, ${(0, $cBgAy$toFixedNumber)(this.brightness, 2)}%, ${this.alpha})`;
-            default:
-                return this.toFormat(format).toString(format);
-        }
-    }
-    toFormat(format) {
-        switch(format){
-            case "hsb":
-            case "hsba":
-                return this;
-            case "hsl":
-            case "hsla":
-                return this.toHSL();
-            case "rgb":
-            case "rgba":
-                return this.toRGB();
-            default:
-                throw new Error("Unsupported color conversion: hsb -> " + format);
-        }
-    }
-    /**
-   * Converts a HSB color to HSL.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_HSL.
-   * @returns An HSLColor object.
-   */ toHSL() {
-        let saturation = this.saturation / 100;
-        let brightness = this.brightness / 100;
-        let lightness = brightness * (1 - saturation / 2);
-        saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
-        return new $799cddbef784668f$var$HSLColor((0, $cBgAy$toFixedNumber)(this.hue, 2), (0, $cBgAy$toFixedNumber)(saturation * 100, 2), (0, $cBgAy$toFixedNumber)(lightness * 100, 2), this.alpha);
-    }
-    /**
-   * Converts a HSV color value to RGB.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB_alternative.
-   * @returns An RGBColor object.
-   */ toRGB() {
-        let hue = this.hue;
-        let saturation = this.saturation / 100;
-        let brightness = this.brightness / 100;
-        let fn = (n, k = (n + hue / 60) % 6)=>brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
-        return new $799cddbef784668f$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
-    }
-    clone() {
-        return new $799cddbef784668f$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
-    }
-    getChannelRange(channel) {
-        switch(channel){
-            case "hue":
-                return {
-                    minValue: 0,
-                    maxValue: 360,
-                    step: 1,
-                    pageSize: 15
-                };
-            case "saturation":
-            case "brightness":
-                return {
-                    minValue: 0,
-                    maxValue: 100,
-                    step: 1,
-                    pageSize: 10
-                };
-            case "alpha":
-                return {
-                    minValue: 0,
-                    maxValue: 1,
-                    step: 0.01,
-                    pageSize: 0.1
-                };
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-    }
-    formatChannelValue(channel, locale) {
-        let options;
-        let value = this.getChannelValue(channel);
-        switch(channel){
-            case "hue":
-                options = {
-                    style: "unit",
-                    unit: "degree",
-                    unitDisplay: "narrow"
-                };
-                break;
-            case "saturation":
-            case "brightness":
-                options = {
-                    style: "percent"
-                };
-                value /= 100;
-                break;
-            case "alpha":
-                options = {
-                    style: "percent"
-                };
-                break;
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-        return new (0, $cBgAy$NumberFormatter)(locale, options).format(value);
-    }
-    getColorSpace() {
-        return "hsb";
-    }
-    getColorChannels() {
-        return $799cddbef784668f$var$HSBColor.colorChannels;
-    }
-    constructor(hue, saturation, brightness, alpha){
-        super();
-        this.hue = hue;
-        this.saturation = saturation;
-        this.brightness = brightness;
-        this.alpha = alpha;
-    }
-}
-$799cddbef784668f$var$HSBColor.colorChannels = [
-    "hue",
-    "saturation",
-    "brightness"
-];
-// X = <negative/positive number with/without decimal places>
-// before/after a comma, 0 or more whitespaces are allowed
-// - hsl(X, X%, X%)
-// - hsla(X, X%, X%, X)
-const $799cddbef784668f$var$HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
-function $799cddbef784668f$var$mod(n, m) {
-    return (n % m + m) % m;
-}
-class $799cddbef784668f$var$HSLColor extends $799cddbef784668f$var$Color {
-    static parse(value) {
-        let m;
-        if (m = value.match($799cddbef784668f$var$HSL_REGEX)) {
-            var _m_;
-            const [h, s, l, a] = ((_m_ = m[1]) !== null && _m_ !== void 0 ? _m_ : m[2]).split(",").map((n)=>Number(n.trim().replace("%", "")));
-            return new $799cddbef784668f$var$HSLColor($799cddbef784668f$var$mod(h, 360), (0, $cBgAy$clamp)(s, 0, 100), (0, $cBgAy$clamp)(l, 0, 100), (0, $cBgAy$clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
-        }
-    }
-    toString(format) {
-        switch(format){
-            case "hex":
-                return this.toRGB().toString("hex");
-            case "hexa":
-                return this.toRGB().toString("hexa");
-            case "hsl":
-                return `hsl(${this.hue}, ${(0, $cBgAy$toFixedNumber)(this.saturation, 2)}%, ${(0, $cBgAy$toFixedNumber)(this.lightness, 2)}%)`;
-            case "css":
-            case "hsla":
-                return `hsla(${this.hue}, ${(0, $cBgAy$toFixedNumber)(this.saturation, 2)}%, ${(0, $cBgAy$toFixedNumber)(this.lightness, 2)}%, ${this.alpha})`;
-            default:
-                return this.toFormat(format).toString(format);
-        }
-    }
-    toFormat(format) {
-        switch(format){
-            case "hsl":
-            case "hsla":
-                return this;
-            case "hsb":
-            case "hsba":
-                return this.toHSB();
-            case "rgb":
-            case "rgba":
-                return this.toRGB();
-            default:
-                throw new Error("Unsupported color conversion: hsl -> " + format);
-        }
-    }
-    /**
-   * Converts a HSL color to HSB.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
-   * @returns An HSBColor object.
-   */ toHSB() {
-        let saturation = this.saturation / 100;
-        let lightness = this.lightness / 100;
-        let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
-        saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
-        return new $799cddbef784668f$var$HSBColor((0, $cBgAy$toFixedNumber)(this.hue, 2), (0, $cBgAy$toFixedNumber)(saturation * 100, 2), (0, $cBgAy$toFixedNumber)(brightness * 100, 2), this.alpha);
-    }
-    /**
-   * Converts a HSL color to RGB.
-   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
-   * @returns An RGBColor object.
-   */ toRGB() {
-        let hue = this.hue;
-        let saturation = this.saturation / 100;
-        let lightness = this.lightness / 100;
-        let a = saturation * Math.min(lightness, 1 - lightness);
-        let fn = (n, k = (n + hue / 30) % 12)=>lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-        return new $799cddbef784668f$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
-    }
-    clone() {
-        return new $799cddbef784668f$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
-    }
-    getChannelRange(channel) {
-        switch(channel){
-            case "hue":
-                return {
-                    minValue: 0,
-                    maxValue: 360,
-                    step: 1,
-                    pageSize: 15
-                };
-            case "saturation":
-            case "lightness":
-                return {
-                    minValue: 0,
-                    maxValue: 100,
-                    step: 1,
-                    pageSize: 10
-                };
-            case "alpha":
-                return {
-                    minValue: 0,
-                    maxValue: 1,
-                    step: 0.01,
-                    pageSize: 0.1
-                };
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-    }
-    formatChannelValue(channel, locale) {
-        let options;
-        let value = this.getChannelValue(channel);
-        switch(channel){
-            case "hue":
-                options = {
-                    style: "unit",
-                    unit: "degree",
-                    unitDisplay: "narrow"
-                };
-                break;
-            case "saturation":
-            case "lightness":
-                options = {
-                    style: "percent"
-                };
-                value /= 100;
-                break;
-            case "alpha":
-                options = {
-                    style: "percent"
-                };
-                break;
-            default:
-                throw new Error("Unknown color channel: " + channel);
-        }
-        return new (0, $cBgAy$NumberFormatter)(locale, options).format(value);
-    }
-    getColorSpace() {
-        return "hsl";
-    }
-    getColorChannels() {
-        return $799cddbef784668f$var$HSLColor.colorChannels;
-    }
-    constructor(hue, saturation, lightness, alpha){
-        super();
-        this.hue = hue;
-        this.saturation = saturation;
-        this.lightness = lightness;
-        this.alpha = alpha;
-    }
-}
-$799cddbef784668f$var$HSLColor.colorChannels = [
-    "hue",
-    "saturation",
-    "lightness"
-];
-// https://www.w3.org/TR/css-color-4/#color-conversion-code
-function $799cddbef784668f$var$toOKLCH(color) {
-    let rgb = color.toFormat("rgb");
-    let red = rgb.getChannelValue("red") / 255;
-    let green = rgb.getChannelValue("green") / 255;
-    let blue = rgb.getChannelValue("blue") / 255;
-    [red, green, blue] = $799cddbef784668f$var$lin_sRGB(red, green, blue);
-    let [x, y, z] = $799cddbef784668f$var$lin_sRGB_to_XYZ(red, green, blue);
-    let [l, a, b] = $799cddbef784668f$var$XYZ_to_OKLab(x, y, z);
-    return $799cddbef784668f$var$OKLab_to_OKLCH(l, a, b);
-}
-function $799cddbef784668f$var$OKLab_to_OKLCH(l, a, b) {
-    var hue = Math.atan2(b, a) * 180 / Math.PI;
-    return [
-        l,
-        Math.sqrt(a ** 2 + b ** 2),
-        hue >= 0 ? hue : hue + 360 // Hue, in degrees [0 to 360)
-    ];
-}
-function $799cddbef784668f$var$lin_sRGB(r, g, b) {
-    // convert an array of sRGB values
-    // where in-gamut values are in the range [0 - 1]
-    // to linear light (un-companded) form.
-    // https://en.wikipedia.org/wiki/SRGB
-    // Extended transfer function:
-    // for negative values,  linear portion is extended on reflection of axis,
-    // then reflected power function is used.
-    return [
-        $799cddbef784668f$var$lin_sRGB_component(r),
-        $799cddbef784668f$var$lin_sRGB_component(g),
-        $799cddbef784668f$var$lin_sRGB_component(b)
-    ];
-}
-function $799cddbef784668f$var$lin_sRGB_component(val) {
-    let sign = val < 0 ? -1 : 1;
-    let abs = Math.abs(val);
-    if (abs <= 0.04045) return val / 12.92;
-    return sign * Math.pow((abs + 0.055) / 1.055, 2.4);
-}
-function $799cddbef784668f$var$lin_sRGB_to_XYZ(r, g, b) {
-    // convert an array of linear-light sRGB values to CIE XYZ
-    // using sRGB's own white, D65 (no chromatic adaptation)
-    const M = [
-        506752 / 1228815,
-        87881 / 245763,
-        12673 / 70218,
-        87098 / 409605,
-        175762 / 245763,
-        12673 / 175545,
-        7918 / 409605,
-        87881 / 737289,
-        1001167 / 1053270
-    ];
-    return $799cddbef784668f$var$multiplyMatrix(M, r, g, b);
-}
-function $799cddbef784668f$var$XYZ_to_OKLab(x, y, z) {
-    // Given XYZ relative to D65, convert to OKLab
-    const XYZtoLMS = [
-        0.8190224379967030,
-        0.3619062600528904,
-        -0.1288737815209879,
-        0.0329836539323885,
-        0.9292868615863434,
-        0.0361446663506424,
-        0.0481771893596242,
-        0.2642395317527308,
-        0.6335478284694309
-    ];
-    const LMStoOKLab = [
-        0.2104542683093140,
-        0.7936177747023054,
-        -0.0040720430116193,
-        1.9779985324311684,
-        -2.42859224204858,
-        0.4505937096174110,
-        0.0259040424655478,
-        0.7827717124575296,
-        -0.8086757549230774
-    ];
-    let [a, b, c] = $799cddbef784668f$var$multiplyMatrix(XYZtoLMS, x, y, z);
-    return $799cddbef784668f$var$multiplyMatrix(LMStoOKLab, Math.cbrt(a), Math.cbrt(b), Math.cbrt(c));
-}
-function $799cddbef784668f$var$multiplyMatrix(m, x, y, z) {
-    let a = m[0] * x + m[1] * y + m[2] * z;
-    let b = m[3] * x + m[4] * y + m[5] * z;
-    let c = m[6] * x + m[7] * y + m[8] * z;
-    return [
-        a,
-        b,
-        c
-    ];
-}
-
+import {parseColor as $799cddbef784668f$export$6e865ea70d7724f} from "./Color.module.js";
+import {useColorAreaState as $6e14a98a7f67141d$export$6df7f0e2cabc7eef} from "./useColorAreaState.module.js";
+import {useColorSliderState as $25a25ac0d1624665$export$57bc203e1c9c6d44} from "./useColorSliderState.module.js";
+import {useColorWheelState as $ee4262c74a467b07$export$f4301076d9336137} from "./useColorWheelState.module.js";
+import {useColorFieldState as $b335ada08155d9c0$export$d52a01683abdfcd6} from "./useColorFieldState.module.js";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -891,430 +17,6 @@ function $799cddbef784668f$var$multiplyMatrix(m, x, y, z) {
  */ 
 
 
-const $6e14a98a7f67141d$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#ffffff");
-function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
-    let { value: value, defaultValue: defaultValue, xChannel: xChannel, yChannel: yChannel, onChange: onChange, onChangeEnd: onChangeEnd } = props;
-    if (!value && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
-    let [color, setColorState] = (0, $cBgAy$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
-    let valueRef = (0, $cBgAy$useRef)(color);
-    let setColor = (color)=>{
-        valueRef.current = color;
-        setColorState(color);
-    };
-    let channels = (0, $cBgAy$useMemo)(()=>color.getColorSpaceAxes({
-            xChannel: xChannel,
-            yChannel: yChannel
-        }), [
-        color,
-        xChannel,
-        yChannel
-    ]);
-    let xChannelRange = color.getChannelRange(channels.xChannel);
-    let yChannelRange = color.getChannelRange(channels.yChannel);
-    let { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
-    let { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
-    let [isDragging, setDragging] = (0, $cBgAy$useState)(false);
-    let isDraggingRef = (0, $cBgAy$useRef)(false);
-    let xValue = color.getChannelValue(channels.xChannel);
-    let yValue = color.getChannelValue(channels.yChannel);
-    let setXValue = (v)=>{
-        if (v === xValue) return;
-        let newColor = color.withChannelValue(channels.xChannel, v);
-        setColor(newColor);
-    };
-    let setYValue = (v)=>{
-        if (v === yValue) return;
-        let newColor = color.withChannelValue(channels.yChannel, v);
-        setColor(newColor);
-    };
-    return {
-        channels: channels,
-        xChannelStep: stepX,
-        yChannelStep: stepY,
-        xChannelPageStep: pageSizeX,
-        yChannelPageStep: pageSizeY,
-        value: color,
-        setValue (value) {
-            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
-        },
-        xValue: xValue,
-        setXValue: setXValue,
-        yValue: yValue,
-        setYValue: setYValue,
-        setColorFromPoint (x, y) {
-            let newXValue = minValueX + (0, $cBgAy$clamp)(x, 0, 1) * (maxValueX - minValueX);
-            let newYValue = minValueY + (1 - (0, $cBgAy$clamp)(y, 0, 1)) * (maxValueY - minValueY);
-            let newColor;
-            if (newXValue !== xValue) {
-                // Round new value to multiple of step, clamp value between min and max
-                newXValue = (0, $cBgAy$snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
-                newColor = color.withChannelValue(channels.xChannel, newXValue);
-            }
-            if (newYValue !== yValue) {
-                // Round new value to multiple of step, clamp value between min and max
-                newYValue = (0, $cBgAy$snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
-                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-            }
-            if (newColor) setColor(newColor);
-        },
-        getThumbPosition () {
-            let x = (xValue - minValueX) / (maxValueX - minValueX);
-            let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
-            return {
-                x: x,
-                y: y
-            };
-        },
-        incrementX (stepSize) {
-            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $cBgAy$snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
-        },
-        incrementY (stepSize) {
-            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $cBgAy$snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
-        },
-        decrementX (stepSize) {
-            setXValue((0, $cBgAy$snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
-        },
-        decrementY (stepSize) {
-            setYValue((0, $cBgAy$snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
-        },
-        setDragging (isDragging) {
-            let wasDragging = isDraggingRef.current;
-            isDraggingRef.current = isDragging;
-            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
-            setDragging(isDragging);
-        },
-        isDragging: isDragging,
-        getDisplayColor () {
-            return color.withChannelValue("alpha", 1);
-        }
-    };
-}
-
-
-/*
- * 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 $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
-    let { channel: channel, value: value, defaultValue: defaultValue, onChange: onChange, locale: locale, ...otherProps } = props;
-    if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
-    let [color, setColor] = (0, $cBgAy$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
-    let sliderState = (0, $cBgAy$useSliderState)({
-        ...color.getChannelRange(channel),
-        ...otherProps,
-        // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
-        numberFormatter: null,
-        value: color.getChannelValue(channel),
-        onChange (v) {
-            setColor(color.withChannelValue(channel, v));
-        },
-        onChangeEnd (v) {
-            // onChange will have already been called with the right value, this is just to trigger onChangeEnd
-            if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
-        }
-    });
-    let { step: step, pageSize: pageSize } = color.getChannelRange(channel);
-    return {
-        ...sliderState,
-        value: color,
-        setValue (value) {
-            setColor((0, $799cddbef784668f$export$4cde5df63f53f473)(value));
-        },
-        getDisplayColor () {
-            switch(channel){
-                case "hue":
-                    return (0, $799cddbef784668f$export$6e865ea70d7724f)(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
-                case "lightness":
-                case "brightness":
-                case "saturation":
-                case "red":
-                case "green":
-                case "blue":
-                    return color.withChannelValue("alpha", 1);
-                case "alpha":
-                    return color;
-                default:
-                    throw new Error("Unknown color channel: " + channel);
-            }
-        },
-        getThumbValueLabel () {
-            return color.formatChannelValue(channel, locale);
-        },
-        step: step,
-        pageSize: pageSize
-    };
-}
-
-
-/*
- * 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.
- */ 
-
-
-const $ee4262c74a467b07$var$DEFAULT_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("hsl(0, 100%, 50%)");
-function $ee4262c74a467b07$var$roundToStep(value, step) {
-    return Math.round(value / step) * step;
-}
-function $ee4262c74a467b07$var$mod(n, m) {
-    return (n % m + m) % m;
-}
-function $ee4262c74a467b07$var$roundDown(v) {
-    let r = Math.floor(v);
-    if (r === v) return v - 1;
-    else return r;
-}
-function $ee4262c74a467b07$var$degToRad(deg) {
-    return deg * Math.PI / 180;
-}
-function $ee4262c74a467b07$var$radToDeg(rad) {
-    return rad * 180 / Math.PI;
-}
-// 0deg = 3 o'clock. increases clockwise
-function $ee4262c74a467b07$var$angleToCartesian(angle, radius) {
-    let rad = $ee4262c74a467b07$var$degToRad(360 - angle + 90);
-    let x = Math.sin(rad) * radius;
-    let y = Math.cos(rad) * radius;
-    return {
-        x: x,
-        y: y
-    };
-}
-function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
-    let deg = $ee4262c74a467b07$var$radToDeg(Math.atan2(y / radius, x / radius));
-    return (deg + 360) % 360;
-}
-function $ee4262c74a467b07$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue, onChange: onChange, onChangeEnd: onChangeEnd } = props;
-    if (!props.value && !defaultValue) defaultValue = $ee4262c74a467b07$var$DEFAULT_COLOR;
-    let [value, setValueState] = (0, $cBgAy$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
-    let valueRef = (0, $cBgAy$useRef)(value);
-    let setValue = (value)=>{
-        valueRef.current = value;
-        setValueState(value);
-    };
-    let channelRange = value.getChannelRange("hue");
-    let { minValue: minValueX, maxValue: maxValueX, step: step, pageSize: pageStep } = channelRange;
-    let [isDragging, setDragging] = (0, $cBgAy$useState)(false);
-    let isDraggingRef = (0, $cBgAy$useRef)(false);
-    let hue = value.getChannelValue("hue");
-    function setHue(v) {
-        if (v > 360) // Make sure you can always get back to 0.
-        v = 0;
-        v = $ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(v, 360), step);
-        if (hue !== v) {
-            let color = value.withChannelValue("hue", v);
-            setValue(color);
-        }
-    }
-    return {
-        value: value,
-        step: step,
-        pageStep: pageStep,
-        setValue (v) {
-            let color = (0, $799cddbef784668f$export$4cde5df63f53f473)(v);
-            setValue(color);
-        },
-        hue: hue,
-        setHue: setHue,
-        setHueFromPoint (x, y, radius) {
-            setHue($ee4262c74a467b07$var$cartesianToAngle(x, y, radius));
-        },
-        getThumbPosition (radius) {
-            return $ee4262c74a467b07$var$angleToCartesian(value.getChannelValue("hue"), radius);
-        },
-        increment (stepSize = 1) {
-            let s = Math.max(stepSize, step);
-            let newValue = hue + s;
-            if (newValue >= maxValueX) // Make sure you can always get back to 0.
-            newValue = minValueX;
-            setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(newValue, 360), s));
-        },
-        decrement (stepSize = 1) {
-            let s = Math.max(stepSize, step);
-            if (hue === 0) // We can't just subtract step because this might be the case:
-            // |(previous step) - 0| < step size
-            setHue($ee4262c74a467b07$var$roundDown(360 / s) * s);
-            else setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(hue - s, 360), s));
-        },
-        setDragging (isDragging) {
-            let wasDragging = isDraggingRef.current;
-            isDraggingRef.current = isDragging;
-            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
-            setDragging(isDragging);
-        },
-        isDragging: isDragging,
-        getDisplayColor () {
-            return value.toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
-        }
-    };
-}
-
-
-/*
- * 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.
- */ 
-
-function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
-    return (0, $cBgAy$useMemo)(()=>{
-        if (typeof value === "string") try {
-            return (0, $799cddbef784668f$export$6e865ea70d7724f)(value);
-        } catch (err) {
-            return undefined;
-        }
-        return value;
-    }, [
-        value
-    ]);
-}
-
-
-
-
-const $b335ada08155d9c0$var$MIN_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#000000");
-const $b335ada08155d9c0$var$MAX_COLOR = (0, $799cddbef784668f$export$6e865ea70d7724f)("#FFFFFF");
-const $b335ada08155d9c0$var$MIN_COLOR_INT = $b335ada08155d9c0$var$MIN_COLOR.toHexInt();
-const $b335ada08155d9c0$var$MAX_COLOR_INT = $b335ada08155d9c0$var$MAX_COLOR.toHexInt();
-function $b335ada08155d9c0$export$d52a01683abdfcd6(props) {
-    let { value: value, defaultValue: defaultValue, onChange: onChange } = props;
-    let { step: step } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange("red");
-    let initialValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(value);
-    let initialDefaultValue = (0, $aa90ad8b2b1d015f$export$5aadd9c0606af5c2)(defaultValue);
-    let [colorValue, setColorValue] = (0, $cBgAy$useControlledState)(initialValue, initialDefaultValue, onChange);
-    let [inputValue, setInputValue] = (0, $cBgAy$useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
-    let validation = (0, $cBgAy$useFormValidationState)({
-        ...props,
-        value: colorValue
-    });
-    let safelySetColorValue = (newColor)=>{
-        if (!colorValue || !newColor) {
-            setColorValue(newColor);
-            return;
-        }
-        if (newColor.toHexInt() !== colorValue.toHexInt()) {
-            setColorValue(newColor);
-            return;
-        }
-    };
-    let [prevValue, setPrevValue] = (0, $cBgAy$useState)(colorValue);
-    if (prevValue !== colorValue) {
-        setInputValue(colorValue ? colorValue.toString("hex") : "");
-        setPrevValue(colorValue);
-    }
-    let parsedValue = (0, $cBgAy$useMemo)(()=>{
-        let color;
-        try {
-            color = (0, $799cddbef784668f$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
-        } catch (err) {
-            color = null;
-        }
-        return color;
-    }, [
-        inputValue
-    ]);
-    let commit = ()=>{
-        // Set to empty state if input value is empty
-        if (!inputValue.length) {
-            safelySetColorValue(null);
-            setInputValue(value === undefined ? "" : colorValue.toString("hex"));
-            return;
-        }
-        // if it failed to parse, then reset input to formatted version of current number
-        if (parsedValue == null) {
-            setInputValue(colorValue ? colorValue.toString("hex") : "");
-            return;
-        }
-        safelySetColorValue(parsedValue);
-        // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
-        let newColorValue = "";
-        if (colorValue) newColorValue = colorValue.toString("hex");
-        setInputValue(newColorValue);
-    };
-    let increment = ()=>{
-        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, step);
-        // if we've arrived at the same value that was previously in the state, the
-        // input value should be updated to match
-        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
-        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
-        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
-        safelySetColorValue(newValue);
-        validation.commitValidation();
-    };
-    let decrement = ()=>{
-        let newValue = $b335ada08155d9c0$var$addColorValue(parsedValue, -step);
-        // if we've arrived at the same value that was previously in the state, the
-        // input value should be updated to match
-        // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
-        // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
-        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
-        safelySetColorValue(newValue);
-        validation.commitValidation();
-    };
-    let incrementToMax = ()=>safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR);
-    let decrementToMin = ()=>safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR);
-    let validate = (value)=>{
-        var _value_match;
-        return value === "" || !!((_value_match = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || _value_match === void 0 ? void 0 : _value_match[0]);
-    };
-    return {
-        ...validation,
-        validate: validate,
-        colorValue: colorValue,
-        inputValue: inputValue,
-        setInputValue: setInputValue,
-        commit: commit,
-        increment: increment,
-        incrementToMax: incrementToMax,
-        decrement: decrement,
-        decrementToMin: decrementToMin
-    };
-}
-function $b335ada08155d9c0$var$addColorValue(color, step) {
-    let newColor = color ? color : $b335ada08155d9c0$var$MIN_COLOR;
-    let colorInt = newColor.toHexInt();
-    let clampInt = Math.min(Math.max(colorInt + step, $b335ada08155d9c0$var$MIN_COLOR_INT), $b335ada08155d9c0$var$MAX_COLOR_INT);
-    if (clampInt !== colorInt) {
-        let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
-        newColor = (0, $799cddbef784668f$export$6e865ea70d7724f)(newColorString);
-    }
-    return newColor;
-}