@react-stately/color 3.2.3-nightly.3698 → 3.2.3-nightly.3705

package/dist/import.mjs

@@ -0,0 +1,1469 @@
+import $cBgAy$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
+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} 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";
+
+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 $7a451c0c6841e6b9$exports = {};
+var $2d805fd52bb48883$exports = {};
+$2d805fd52bb48883$exports = {
+    "alpha": `ألفا`,
+    "blue": `أزرق`,
+    "brightness": `السطوع`,
+    "green": `أخضر`,
+    "hue": `درجة اللون`,
+    "lightness": `الإضاءة`,
+    "red": `أحمر`,
+    "saturation": `التشبع`
+};
+
+
+var $6c28468dc1df643c$exports = {};
+$6c28468dc1df643c$exports = {
+    "alpha": `Алфа`,
+    "blue": `Синьо`,
+    "brightness": `Яркост`,
+    "green": `Зелено`,
+    "hue": `Оттенък`,
+    "lightness": `Лекота`,
+    "red": `Червено`,
+    "saturation": `Наситеност`
+};
+
+
+var $807554f8230db0ed$exports = {};
+$807554f8230db0ed$exports = {
+    "alpha": `Alfa`,
+    "blue": `Modrá`,
+    "brightness": `Jas`,
+    "green": `Zelená`,
+    "hue": `Odstín`,
+    "lightness": `Světlost`,
+    "red": `Červená`,
+    "saturation": `Sytost`
+};
+
+
+var $7097f64386f1761c$exports = {};
+$7097f64386f1761c$exports = {
+    "alpha": `Alfa`,
+    "blue": `Blå`,
+    "brightness": `Lysstyrke`,
+    "green": `Grøn`,
+    "hue": `Tone`,
+    "lightness": `Lyshed`,
+    "red": `Rød`,
+    "saturation": `Farvemætning`
+};
+
+
+var $bdd847d8beb08799$exports = {};
+$bdd847d8beb08799$exports = {
+    "alpha": `Alpha`,
+    "blue": `Blau`,
+    "brightness": `Helligkeit`,
+    "green": `Grün`,
+    "hue": `Farbton`,
+    "lightness": `Leuchtkraft`,
+    "red": `Rot`,
+    "saturation": `Sättigung`
+};
+
+
+var $a53e00b683950971$exports = {};
+$a53e00b683950971$exports = {
+    "alpha": `Άλφα`,
+    "blue": `Μπλε`,
+    "brightness": `Φωτεινότητα`,
+    "green": `Πράσινο`,
+    "hue": `Τόνος`,
+    "lightness": `Φωτεινότητα`,
+    "red": `Κόκκινο`,
+    "saturation": `Κορεσμός`
+};
+
+
+var $21cdd87e84f28d89$exports = {};
+$21cdd87e84f28d89$exports = {
+    "hue": `Hue`,
+    "saturation": `Saturation`,
+    "lightness": `Lightness`,
+    "brightness": `Brightness`,
+    "red": `Red`,
+    "green": `Green`,
+    "blue": `Blue`,
+    "alpha": `Alpha`
+};
+
+
+var $92fee9698e4d675a$exports = {};
+$92fee9698e4d675a$exports = {
+    "alpha": `Alpha`,
+    "blue": `Azul`,
+    "brightness": `Brillo`,
+    "green": `Verde`,
+    "hue": `Tono`,
+    "lightness": `Luminosidad`,
+    "red": `Rojo`,
+    "saturation": `Saturación`
+};
+
+
+var $7ea012e91a5ad3ee$exports = {};
+$7ea012e91a5ad3ee$exports = {
+    "alpha": `Alfa`,
+    "blue": `Sinine`,
+    "brightness": `Heledus`,
+    "green": `Roheline`,
+    "hue": `Värv`,
+    "lightness": `Valgus`,
+    "red": `Punane`,
+    "saturation": `Küllastus`
+};
+
+
+var $8460c13bb2d75345$exports = {};
+$8460c13bb2d75345$exports = {
+    "alpha": `Alpha`,
+    "blue": `Sininen`,
+    "brightness": `Kirkkaus`,
+    "green": `Vihreä`,
+    "hue": `Sävy`,
+    "lightness": `Valomäärä`,
+    "red": `Punainen`,
+    "saturation": `Värikylläisyys`
+};
+
+
+var $2a2d5dc14e680587$exports = {};
+$2a2d5dc14e680587$exports = {
+    "alpha": `Alpha`,
+    "blue": `Bleu`,
+    "brightness": `Luminosité`,
+    "green": `Vert`,
+    "hue": `Teinte`,
+    "lightness": `Luminosité`,
+    "red": `Rouge`,
+    "saturation": `Saturation`
+};
+
+
+var $9a3f292371bb0589$exports = {};
+$9a3f292371bb0589$exports = {
+    "alpha": `אלפא`,
+    "blue": `כחול`,
+    "brightness": `בהירות`,
+    "green": `ירוק`,
+    "hue": `גוון`,
+    "lightness": `כמות אור`,
+    "red": `אדום`,
+    "saturation": `רוויה`
+};
+
+
+var $4742231a685fa068$exports = {};
+$4742231a685fa068$exports = {
+    "alpha": `Alfa`,
+    "blue": `Plava`,
+    "brightness": `Svjetlina`,
+    "green": `Zelena`,
+    "hue": `Nijansa`,
+    "lightness": `Osvijetljenost`,
+    "red": `Crvena`,
+    "saturation": `Zasićenost`
+};
+
+
+var $05e247fd2960981e$exports = {};
+$05e247fd2960981e$exports = {
+    "alpha": `Alfa`,
+    "blue": `Kék`,
+    "brightness": `Fényesség`,
+    "green": `Zöld`,
+    "hue": `Színárnyalat`,
+    "lightness": `Világosság`,
+    "red": `Piros`,
+    "saturation": `Telítettség`
+};
+
+
+var $a67524a79ccbe190$exports = {};
+$a67524a79ccbe190$exports = {
+    "alpha": `Alfa`,
+    "blue": `Blu`,
+    "brightness": `Luminosità`,
+    "green": `Verde`,
+    "hue": `Tonalità`,
+    "lightness": `Luminosità`,
+    "red": `Rosso`,
+    "saturation": `Saturazione`
+};
+
+
+var $a9eefe9d6c8cb7d5$exports = {};
+$a9eefe9d6c8cb7d5$exports = {
+    "alpha": `アルファ`,
+    "blue": `青`,
+    "brightness": `明るさ`,
+    "green": `緑`,
+    "hue": `色相`,
+    "lightness": `明度`,
+    "red": `赤`,
+    "saturation": `彩度`
+};
+
+
+var $4a6b836d4f1bfaba$exports = {};
+$4a6b836d4f1bfaba$exports = {
+    "alpha": `알파`,
+    "blue": `파랑`,
+    "brightness": `명도`,
+    "green": `초록`,
+    "hue": `색조`,
+    "lightness": `밝기`,
+    "red": `빨강`,
+    "saturation": `채도`
+};
+
+
+var $c950e4b1c482abde$exports = {};
+$c950e4b1c482abde$exports = {
+    "alpha": `Alfa`,
+    "blue": `Mėlyna`,
+    "brightness": `Ryškumas`,
+    "green": `Žalia`,
+    "hue": `Atspalvis`,
+    "lightness": `Šviesumas`,
+    "red": `Raudona`,
+    "saturation": `Įsotinimas`
+};
+
+
+var $d10d6b60dc50b438$exports = {};
+$d10d6b60dc50b438$exports = {
+    "alpha": `Alfa`,
+    "blue": `Zila`,
+    "brightness": `Spilgtums`,
+    "green": `Zaļa`,
+    "hue": `Nokrāsa`,
+    "lightness": `Gaišums`,
+    "red": `Sarkana`,
+    "saturation": `Piesātinājums`
+};
+
+
+var $371a732b2494f452$exports = {};
+$371a732b2494f452$exports = {
+    "alpha": `Alfa`,
+    "blue": `Blå`,
+    "brightness": `Lysstyrke`,
+    "green": `Grønn`,
+    "hue": `Fargetone`,
+    "lightness": `Lyshet`,
+    "red": `Rød`,
+    "saturation": `Metning`
+};
+
+
+var $6d042cae6243464b$exports = {};
+$6d042cae6243464b$exports = {
+    "alpha": `Alfa`,
+    "blue": `Blauw`,
+    "brightness": `Helderheid`,
+    "green": `Groen`,
+    "hue": `Kleurtoon`,
+    "lightness": `Lichtsterkte`,
+    "red": `Rood`,
+    "saturation": `Verzadiging`
+};
+
+
+var $d9ab5c2611e0bcd3$exports = {};
+$d9ab5c2611e0bcd3$exports = {
+    "alpha": `Alfa`,
+    "blue": `Niebieski`,
+    "brightness": `Jasność`,
+    "green": `Zielony`,
+    "hue": `Odcień`,
+    "lightness": `Jaskrawość`,
+    "red": `Czerwony`,
+    "saturation": `Nasycenie`
+};
+
+
+var $73f77c9902e29ca6$exports = {};
+$73f77c9902e29ca6$exports = {
+    "alpha": `Alfa`,
+    "blue": `Azul`,
+    "brightness": `Brilho`,
+    "green": `Verde`,
+    "hue": `Matiz`,
+    "lightness": `Luminosidade`,
+    "red": `Vermelho`,
+    "saturation": `Saturação`
+};
+
+
+var $4f461eb266a95c10$exports = {};
+$4f461eb266a95c10$exports = {
+    "alpha": `Alfa`,
+    "blue": `Azul`,
+    "brightness": `Luminosidade`,
+    "green": `Verde`,
+    "hue": `Tonalidade`,
+    "lightness": `Claridade`,
+    "red": `Vermelho`,
+    "saturation": `Saturação`
+};
+
+
+var $dc46bea2f2597899$exports = {};
+$dc46bea2f2597899$exports = {
+    "alpha": `Alfa`,
+    "blue": `Albastru`,
+    "brightness": `Luminozitate`,
+    "green": `Verde`,
+    "hue": `Nuanță`,
+    "lightness": `Luminozitate`,
+    "red": `Roșu`,
+    "saturation": `Saturație`
+};
+
+
+var $622bbd6719cc95af$exports = {};
+$622bbd6719cc95af$exports = {
+    "alpha": `Альфа`,
+    "blue": `Синий`,
+    "brightness": `Яркость`,
+    "green": `Зеленый`,
+    "hue": `Оттенок`,
+    "lightness": `Освещенность`,
+    "red": `Красный`,
+    "saturation": `Насыщенность`
+};
+
+
+var $4da03c1ecd9a9c7d$exports = {};
+$4da03c1ecd9a9c7d$exports = {
+    "alpha": `Alfa`,
+    "blue": `Modrá`,
+    "brightness": `Jas`,
+    "green": `Zelená`,
+    "hue": `Odtieň`,
+    "lightness": `Svetlosť`,
+    "red": `Červená`,
+    "saturation": `Sýtosť`
+};
+
+
+var $edb6b2fe456ed4e8$exports = {};
+$edb6b2fe456ed4e8$exports = {
+    "alpha": `Alfa`,
+    "blue": `Modra`,
+    "brightness": `Svetlost`,
+    "green": `Zelena`,
+    "hue": `Barva`,
+    "lightness": `Lahkost`,
+    "red": `Rdeča`,
+    "saturation": `Nasičenost`
+};
+
+
+var $264cd81c52b30815$exports = {};
+$264cd81c52b30815$exports = {
+    "alpha": `Alfa`,
+    "blue": `Plava`,
+    "brightness": `Osvetljenost`,
+    "green": `Zelena`,
+    "hue": `Nijansa`,
+    "lightness": `Osvetljenje`,
+    "red": `Crvena`,
+    "saturation": `Zasićenje`
+};
+
+
+var $6f80afde0270dda7$exports = {};
+$6f80afde0270dda7$exports = {
+    "alpha": `Alfa`,
+    "blue": `Blått`,
+    "brightness": `Ljusstyrka`,
+    "green": `Grönt`,
+    "hue": `Nyans`,
+    "lightness": `Ljushet`,
+    "red": `Rött`,
+    "saturation": `Mättnad`
+};
+
+
+var $23a92651c6957668$exports = {};
+$23a92651c6957668$exports = {
+    "alpha": `Alfa`,
+    "blue": `Mavi`,
+    "brightness": `Parlaklık`,
+    "green": `Yeşil`,
+    "hue": `Ton`,
+    "lightness": `Canlılık`,
+    "red": `Kırmızı`,
+    "saturation": `Doygunluk`
+};
+
+
+var $0f9b1074d04f4954$exports = {};
+$0f9b1074d04f4954$exports = {
+    "alpha": `Альфа`,
+    "blue": `Синій`,
+    "brightness": `Яскравість`,
+    "green": `Зелений`,
+    "hue": `Тон`,
+    "lightness": `Освітленість`,
+    "red": `Червоний`,
+    "saturation": `Насиченість`
+};
+
+
+var $a9cedf75b94e4916$exports = {};
+$a9cedf75b94e4916$exports = {
+    "alpha": `Alpha`,
+    "blue": `蓝色`,
+    "brightness": `亮度`,
+    "green": `绿色`,
+    "hue": `色相`,
+    "lightness": `明亮度`,
+    "red": `红色`,
+    "saturation": `饱和度`
+};
+
+
+var $37cff576474bc8d4$exports = {};
+$37cff576474bc8d4$exports = {
+    "alpha": `Alpha`,
+    "blue": `藍色`,
+    "brightness": `亮度`,
+    "green": `綠色`,
+    "hue": `色相`,
+    "lightness": `明亮`,
+    "red": `紅色`,
+    "saturation": `飽和度`
+};
+
+
+$7a451c0c6841e6b9$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
+};
+
+
+
+
+const $799cddbef784668f$var$strings = new (0, $cBgAy$LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($7a451c0c6841e6b9$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;
+}
+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) {
+        return $799cddbef784668f$var$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
+        };
+    }
+}
+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;
+    }
+}
+(0, $cBgAy$swchelperssrc_define_propertymjs)($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;
+    }
+}
+(0, $cBgAy$swchelperssrc_define_propertymjs)($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;
+    }
+}
+(0, $cBgAy$swchelperssrc_define_propertymjs)($799cddbef784668f$var$HSLColor, "colorChannels", [
+    "hue",
+    "saturation",
+    "lightness"
+]);
+
+
+/*
+ * 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 $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, setColor] = (0, $cBgAy$useControlledState)(value && (0, $799cddbef784668f$export$4cde5df63f53f473)(value), defaultValue && (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $cBgAy$useRef)(color);
+    valueRef.current = color;
+    let channels = (0, $cBgAy$useMemo)(()=>valueRef.current.getColorSpaceAxes({
+            xChannel: xChannel,
+            yChannel: yChannel
+        }), [
+        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).current;
+    let xValue = color.getChannelValue(channels.xChannel);
+    let yValue = color.getChannelValue(channels.yChannel);
+    let setXValue = (v)=>{
+        if (v === xValue) return;
+        valueRef.current = color.withChannelValue(channels.xChannel, v);
+        setColor(valueRef.current);
+    };
+    let setYValue = (v)=>{
+        if (v === yValue) return;
+        valueRef.current = color.withChannelValue(channels.yChannel, v);
+        setColor(valueRef.current);
+    };
+    return {
+        channels: channels,
+        xChannelStep: stepX,
+        yChannelStep: stepY,
+        xChannelPageStep: pageSizeX,
+        yChannelPageStep: pageSizeY,
+        value: color,
+        setValue (value) {
+            let c = (0, $799cddbef784668f$export$4cde5df63f53f473)(value);
+            valueRef.current = c;
+            setColor(c);
+        },
+        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;
+            isDraggingRef = 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, setValue] = (0, $cBgAy$useControlledState)((0, $799cddbef784668f$export$4cde5df63f53f473)(props.value), (0, $799cddbef784668f$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $cBgAy$useRef)(value);
+    valueRef.current = 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).current;
+    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);
+            valueRef.current = color;
+            setValue(color);
+        }
+    }
+    return {
+        value: value,
+        step: step,
+        pageStep: pageStep,
+        setValue (v) {
+            let color = (0, $799cddbef784668f$export$4cde5df63f53f473)(v);
+            valueRef.current = color;
+            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;
+            isDraggingRef = 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 safelySetColorValue = (newColor)=>{
+        if (!colorValue || !newColor) {
+            setColorValue(newColor);
+            return;
+        }
+        if (newColor.toHexInt() !== colorValue.toHexInt()) {
+            setColorValue(newColor);
+            return;
+        }
+    };
+    let prevValue = (0, $cBgAy$useRef)(colorValue);
+    if (prevValue.current !== colorValue) {
+        setInputValue(colorValue ? colorValue.toString("hex") : "");
+        prevValue.current = 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 parsed = (0, $cBgAy$useRef)(null);
+    parsed.current = parsedValue;
+    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 (parsed.current == null) {
+            setInputValue(colorValue ? colorValue.toString("hex") : "");
+            return;
+        }
+        safelySetColorValue(parsed.current);
+        // 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(parsed.current, 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);
+    };
+    let decrement = ()=>{
+        let newValue = $b335ada08155d9c0$var$addColorValue(parsed.current, -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);
+    };
+    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 {
+        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;
+}
+
+
+
+
+export {$799cddbef784668f$export$6e865ea70d7724f as parseColor, $6e14a98a7f67141d$export$6df7f0e2cabc7eef as useColorAreaState, $25a25ac0d1624665$export$57bc203e1c9c6d44 as useColorSliderState, $ee4262c74a467b07$export$f4301076d9336137 as useColorWheelState, $b335ada08155d9c0$export$d52a01683abdfcd6 as useColorFieldState};
+//# sourceMappingURL=module.js.map