@react-stately/color 3.0.0-beta.7 → 3.0.0-beta.8

package/dist/module.js

@@ -1,8 +1,8 @@
-import {clamp as $8sEfR$clamp, toFixedNumber as $8sEfR$toFixedNumber, useControlledState as $8sEfR$useControlledState} from "@react-stately/utils";
-import {MessageDictionary as $8sEfR$MessageDictionary} from "@internationalized/message";
-import {NumberFormatter as $8sEfR$NumberFormatter} from "@internationalized/number";
-import {useSliderState as $8sEfR$useSliderState} from "@react-stately/slider";
-import {useRef as $8sEfR$useRef, useState as $8sEfR$useState, useEffect as $8sEfR$useEffect, useMemo as $8sEfR$useMemo} from "react";
+import {clamp as $cBgAy$clamp, toFixedNumber as $cBgAy$toFixedNumber, useControlledState as $cBgAy$useControlledState, snapValueToStep as $cBgAy$snapValueToStep} from "@react-stately/utils";
+import {MessageDictionary as $cBgAy$MessageDictionary} from "@internationalized/message";
+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;
@@ -10,194 +10,195 @@ function $parcel$interopDefault(a) {
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-var $ed27c69866ff45f2$exports = {};
 
-$parcel$export($ed27c69866ff45f2$exports, "parseColor", () => $ed27c69866ff45f2$export$6e865ea70d7724f);
+var $7a451c0c6841e6b9$exports = {};
+var $2d805fd52bb48883$exports = {};
+$2d805fd52bb48883$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
 
-var $0374a82a32e1c8c8$exports = {};
-var $f79cd856a93a8555$exports = {};
-$f79cd856a93a8555$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
 
+var $6c28468dc1df643c$exports = {};
+$6c28468dc1df643c$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
 
-var $0392c206ed1a088c$exports = {};
-$0392c206ed1a088c$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
 
+var $807554f8230db0ed$exports = {};
+$807554f8230db0ed$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
 
-var $7d0d490f8015f125$exports = {};
-$7d0d490f8015f125$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
 
+var $7097f64386f1761c$exports = {};
+$7097f64386f1761c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
 
-var $d10fb5e7ed22c57f$exports = {};
-$d10fb5e7ed22c57f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
 
+var $bdd847d8beb08799$exports = {};
+$bdd847d8beb08799$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
 
-var $d66a4b557c1b4b94$exports = {};
-$d66a4b557c1b4b94$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
 
+var $a53e00b683950971$exports = {};
+$a53e00b683950971$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
 
-var $9b0efe1614275e13$exports = {};
-$9b0efe1614275e13$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
 
+var $21cdd87e84f28d89$exports = {};
+$21cdd87e84f28d89$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}");
 
-var $c150b1de62e68b51$exports = {};
-$c150b1de62e68b51$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}");
 
+var $92fee9698e4d675a$exports = {};
+$92fee9698e4d675a$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
 
-var $92da1a3ab873f3f3$exports = {};
-$92da1a3ab873f3f3$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
 
+var $7ea012e91a5ad3ee$exports = {};
+$7ea012e91a5ad3ee$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
 
-var $e39eccb2d120b0b3$exports = {};
-$e39eccb2d120b0b3$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
 
+var $8460c13bb2d75345$exports = {};
+$8460c13bb2d75345$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}");
 
-var $56489bc0134adb6a$exports = {};
-$56489bc0134adb6a$exports = JSON.parse("{\"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 = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
 
-var $aa6a5ed9d5efeb69$exports = {};
-$aa6a5ed9d5efeb69$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
 
+var $9a3f292371bb0589$exports = {};
+$9a3f292371bb0589$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
 
-var $51bf015ed0c73b08$exports = {};
-$51bf015ed0c73b08$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
 
+var $4742231a685fa068$exports = {};
+$4742231a685fa068$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
 
-var $861b4dcde21e078b$exports = {};
-$861b4dcde21e078b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
 
+var $05e247fd2960981e$exports = {};
+$05e247fd2960981e$exports = JSON.parse("{\"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 $8b004b0c6d72513e$exports = {};
-$8b004b0c6d72513e$exports = JSON.parse("{\"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 = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
 
-var $3eb66eb9579408ce$exports = {};
-$3eb66eb9579408ce$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
 
+var $a9eefe9d6c8cb7d5$exports = {};
+$a9eefe9d6c8cb7d5$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
 
-var $e8a554e99056d6bd$exports = {};
-$e8a554e99056d6bd$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
 
+var $4a6b836d4f1bfaba$exports = {};
+$4a6b836d4f1bfaba$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
 
-var $c63f256bb8c038c2$exports = {};
-$c63f256bb8c038c2$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
 
+var $c950e4b1c482abde$exports = {};
+$c950e4b1c482abde$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
 
-var $68505ef47b1ac6a7$exports = {};
-$68505ef47b1ac6a7$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
 
+var $d10d6b60dc50b438$exports = {};
+$d10d6b60dc50b438$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}");
 
-var $24cb133f20e85c27$exports = {};
-$24cb133f20e85c27$exports = JSON.parse("{\"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 = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
 
-var $64f2745d4ddb954d$exports = {};
-$64f2745d4ddb954d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
 
+var $6d042cae6243464b$exports = {};
+$6d042cae6243464b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
 
-var $dcb8f13db15acdb8$exports = {};
-$dcb8f13db15acdb8$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
 
+var $d9ab5c2611e0bcd3$exports = {};
+$d9ab5c2611e0bcd3$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
 
-var $0ef596f59415b4bb$exports = {};
-$0ef596f59415b4bb$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
 
+var $73f77c9902e29ca6$exports = {};
+$73f77c9902e29ca6$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
-var $bbb5b83ca182b9e7$exports = {};
-$bbb5b83ca182b9e7$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
+var $4f461eb266a95c10$exports = {};
+$4f461eb266a95c10$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
-var $564e95b406d0dc84$exports = {};
-$564e95b406d0dc84$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
+var $dc46bea2f2597899$exports = {};
+$dc46bea2f2597899$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
 
-var $7eb3ecd9dc0320ab$exports = {};
-$7eb3ecd9dc0320ab$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
 
+var $622bbd6719cc95af$exports = {};
+$622bbd6719cc95af$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
 
-var $6752101738952fdb$exports = {};
-$6752101738952fdb$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
 
+var $4da03c1ecd9a9c7d$exports = {};
+$4da03c1ecd9a9c7d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
 
-var $27ed00b951516a4d$exports = {};
-$27ed00b951516a4d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
 
+var $edb6b2fe456ed4e8$exports = {};
+$edb6b2fe456ed4e8$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
 
-var $c0aa93444ae4b0ca$exports = {};
-$c0aa93444ae4b0ca$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
 
+var $264cd81c52b30815$exports = {};
+$264cd81c52b30815$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
 
-var $6809c66d997aaacf$exports = {};
-$6809c66d997aaacf$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
 
+var $6f80afde0270dda7$exports = {};
+$6f80afde0270dda7$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}");
 
-var $77839a6d0a465311$exports = {};
-$77839a6d0a465311$exports = JSON.parse("{\"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 = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mavi\",\"brightness\":\"Parlaklık\",\"green\":\"Yeşil\",\"hue\":\"Ton\",\"lightness\":\"Canlılık\",\"red\":\"Kırmızı\",\"saturation\":\"Doygunluk\"}");
 
-var $5eb08cf4653400f5$exports = {};
-$5eb08cf4653400f5$exports = JSON.parse("{\"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 = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
 
-var $96079736d8339dc2$exports = {};
-$96079736d8339dc2$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
 
+var $a9cedf75b94e4916$exports = {};
+$a9cedf75b94e4916$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
 
-var $a1df1831dafc647a$exports = {};
-$a1df1831dafc647a$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
 
+var $37cff576474bc8d4$exports = {};
+$37cff576474bc8d4$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
 
-var $28a02b1bdcc0138a$exports = {};
-$28a02b1bdcc0138a$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
 
-
-$0374a82a32e1c8c8$exports = {
-    "ar-AE": $f79cd856a93a8555$exports,
-    "bg-BG": $0392c206ed1a088c$exports,
-    "cs-CZ": $7d0d490f8015f125$exports,
-    "da-DK": $d10fb5e7ed22c57f$exports,
-    "de-DE": $d66a4b557c1b4b94$exports,
-    "el-GR": $9b0efe1614275e13$exports,
-    "en-US": $c150b1de62e68b51$exports,
-    "es-ES": $92da1a3ab873f3f3$exports,
-    "et-EE": $e39eccb2d120b0b3$exports,
-    "fi-FI": $56489bc0134adb6a$exports,
-    "fr-FR": $aa6a5ed9d5efeb69$exports,
-    "he-IL": $51bf015ed0c73b08$exports,
-    "hr-HR": $861b4dcde21e078b$exports,
-    "hu-HU": $8b004b0c6d72513e$exports,
-    "it-IT": $3eb66eb9579408ce$exports,
-    "ja-JP": $e8a554e99056d6bd$exports,
-    "ko-KR": $c63f256bb8c038c2$exports,
-    "lt-LT": $68505ef47b1ac6a7$exports,
-    "lv-LV": $24cb133f20e85c27$exports,
-    "nb-NO": $64f2745d4ddb954d$exports,
-    "nl-NL": $dcb8f13db15acdb8$exports,
-    "pl-PL": $0ef596f59415b4bb$exports,
-    "pt-BR": $bbb5b83ca182b9e7$exports,
-    "pt-PT": $564e95b406d0dc84$exports,
-    "ro-RO": $7eb3ecd9dc0320ab$exports,
-    "ru-RU": $6752101738952fdb$exports,
-    "sk-SK": $27ed00b951516a4d$exports,
-    "sl-SI": $c0aa93444ae4b0ca$exports,
-    "sr-SP": $6809c66d997aaacf$exports,
-    "sv-SE": $77839a6d0a465311$exports,
-    "tr-TR": $5eb08cf4653400f5$exports,
-    "uk-UA": $96079736d8339dc2$exports,
-    "zh-CN": $a1df1831dafc647a$exports,
-    "zh-TW": $28a02b1bdcc0138a$exports
+$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 $ed27c69866ff45f2$var$messages = new $8sEfR$MessageDictionary((/*@__PURE__*/$parcel$interopDefault($0374a82a32e1c8c8$exports)));
-function $ed27c69866ff45f2$export$6e865ea70d7724f(value) {
-    let res = $ed27c69866ff45f2$var$RGBColor.parse(value) || $ed27c69866ff45f2$var$HSBColor.parse(value) || $ed27c69866ff45f2$var$HSLColor.parse(value);
+const $799cddbef784668f$var$messages = new $cBgAy$MessageDictionary((/*@__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);
 }
-class $ed27c69866ff45f2$var$Color {
+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();
     }
@@ -214,36 +215,36 @@ class $ed27c69866ff45f2$var$Color {
         throw new Error('Unsupported color channel: ' + channel);
     }
     getChannelName(channel, locale) {
-        return $ed27c69866ff45f2$var$messages.getStringForLocale(channel, locale);
+        return $799cddbef784668f$var$messages.getStringForLocale(channel, locale);
     }
 }
-const $ed27c69866ff45f2$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
+const $799cddbef784668f$var$HEX_REGEX = /^#(?:([0-9a-f]{3})|([0-9a-f]{6}))$/i;
 // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - rgb(X, X, X)
 // - rgba(X, X, X, X)
-const $ed27c69866ff45f2$var$RGB_REGEX = /rgb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?)\)|rgba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d(.\d+)?)\)/;
-class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
+const $799cddbef784668f$var$RGB_REGEX = /rgb\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?)\)|rgba\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d(.\d+)?)\)/;
+class $799cddbef784668f$var$RGBColor extends $799cddbef784668f$var$Color {
     static parse(value) {
         let m;
-        if (m = value.match($ed27c69866ff45f2$var$HEX_REGEX)) {
+        if (m = value.match($799cddbef784668f$var$HEX_REGEX)) {
             if (m[1]) {
                 let r = parseInt(m[1][0] + m[1][0], 16);
                 let g = parseInt(m[1][1] + m[1][1], 16);
                 let b = parseInt(m[1][2] + m[1][2], 16);
-                return new $ed27c69866ff45f2$var$RGBColor(r, g, b, 1);
+                return new $799cddbef784668f$var$RGBColor(r, g, b, 1);
             } else if (m[2]) {
                 let r = parseInt(m[2][0] + m[2][1], 16);
                 let g = parseInt(m[2][2] + m[2][3], 16);
                 let b = parseInt(m[2][4] + m[2][5], 16);
-                return new $ed27c69866ff45f2$var$RGBColor(r, g, b, 1);
+                return new $799cddbef784668f$var$RGBColor(r, g, b, 1);
             }
         }
-        if (m = value.match($ed27c69866ff45f2$var$RGB_REGEX)) {
+        if (m = value.match($799cddbef784668f$var$RGB_REGEX)) {
             var ref;
             const [r, g, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim())
             );
-            return new $ed27c69866ff45f2$var$RGBColor($8sEfR$clamp(r, 0, 255), $8sEfR$clamp(g, 0, 255), $8sEfR$clamp(b, 0, 255), $8sEfR$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
+            return new $799cddbef784668f$var$RGBColor($cBgAy$clamp(r, 0, 255), $cBgAy$clamp(g, 0, 255), $cBgAy$clamp(b, 0, 255), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
         }
     }
     toString(format) {
@@ -308,7 +309,7 @@ class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
             }
             hue /= 6;
         }
-        return new $ed27c69866ff45f2$var$HSBColor($8sEfR$toFixedNumber(hue * 360, 2), $8sEfR$toFixedNumber(saturation * 100, 2), $8sEfR$toFixedNumber(brightness * 100, 2), this.alpha);
+        return new $799cddbef784668f$var$HSBColor($cBgAy$toFixedNumber(hue * 360, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(brightness * 100, 2), this.alpha);
     }
     /**
    * Converts an RGB color value to HSL.
@@ -340,10 +341,10 @@ class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
             }
             hue /= 6;
         }
-        return new $ed27c69866ff45f2$var$HSLColor($8sEfR$toFixedNumber(hue * 360, 2), $8sEfR$toFixedNumber(saturation * 100, 2), $8sEfR$toFixedNumber(lightness * 100, 2), this.alpha);
+        return new $799cddbef784668f$var$HSLColor($cBgAy$toFixedNumber(hue * 360, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(lightness * 100, 2), this.alpha);
     }
     clone() {
-        return new $ed27c69866ff45f2$var$RGBColor(this.red, this.green, this.blue, this.alpha);
+        return new $799cddbef784668f$var$RGBColor(this.red, this.green, this.blue, this.alpha);
     }
     getChannelRange(channel) {
         switch(channel){
@@ -353,13 +354,15 @@ class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 255,
-                    step: 1
+                    step: 1,
+                    pageSize: 17
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -384,7 +387,7 @@ class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
             default:
                 throw new Error('Unknown color channel: ' + channel);
         }
-        return new $8sEfR$NumberFormatter(locale, options).format(value);
+        return new $cBgAy$NumberFormatter(locale, options).format(value);
     }
     getColorSpace() {
         return 'rgb';
@@ -401,15 +404,15 @@ class $ed27c69866ff45f2$var$RGBColor extends $ed27c69866ff45f2$var$Color {
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsb(X, X%, X%)
 // - hsba(X, X%, X%, X)
-const $ed27c69866ff45f2$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 $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
+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($ed27c69866ff45f2$var$HSB_REGEX)) {
+        if (m = value.match($799cddbef784668f$var$HSB_REGEX)) {
             var ref;
             const [h, s, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
             );
-            return new $ed27c69866ff45f2$var$HSBColor($ed27c69866ff45f2$var$mod(h, 360), $8sEfR$clamp(s, 0, 100), $8sEfR$clamp(b, 0, 100), $8sEfR$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
+            return new $799cddbef784668f$var$HSBColor($799cddbef784668f$var$mod(h, 360), $cBgAy$clamp(s, 0, 100), $cBgAy$clamp(b, 0, 100), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
         }
     }
     toString(format) {
@@ -421,9 +424,9 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
             case 'hexa':
                 return this.toRGB().toString('hexa');
             case 'hsb':
-                return `hsb(${this.hue}, ${$8sEfR$toFixedNumber(this.saturation, 2)}%, ${$8sEfR$toFixedNumber(this.brightness, 2)}%)`;
+                return `hsb(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.brightness, 2)}%)`;
             case 'hsba':
-                return `hsba(${this.hue}, ${$8sEfR$toFixedNumber(this.saturation, 2)}%, ${$8sEfR$toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
+                return `hsba(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
             default:
                 return this.toFormat(format).toString(format);
         }
@@ -452,7 +455,7 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
         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 $ed27c69866ff45f2$var$HSLColor($8sEfR$toFixedNumber(this.hue, 2), $8sEfR$toFixedNumber(saturation * 100, 2), $8sEfR$toFixedNumber(lightness * 100, 2), this.alpha);
+        return new $799cddbef784668f$var$HSLColor($cBgAy$toFixedNumber(this.hue, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(lightness * 100, 2), this.alpha);
     }
     /**
    * Converts a HSV color value to RGB.
@@ -464,10 +467,10 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
         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 $ed27c69866ff45f2$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
+        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 $ed27c69866ff45f2$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
+        return new $799cddbef784668f$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
     }
     getChannelRange(channel) {
         switch(channel){
@@ -475,20 +478,23 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 360,
-                    step: 1
+                    step: 1,
+                    pageSize: 15
                 };
             case 'saturation':
             case 'brightness':
                 return {
                     minValue: 0,
                     maxValue: 100,
-                    step: 1
+                    step: 1,
+                    pageSize: 10
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -520,7 +526,7 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
             default:
                 throw new Error('Unknown color channel: ' + channel);
         }
-        return new $8sEfR$NumberFormatter(locale, options).format(value);
+        return new $cBgAy$NumberFormatter(locale, options).format(value);
     }
     getColorSpace() {
         return 'hsb';
@@ -537,18 +543,18 @@ class $ed27c69866ff45f2$var$HSBColor extends $ed27c69866ff45f2$var$Color {
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsl(X, X%, X%)
 // - hsla(X, X%, X%, X)
-const $ed27c69866ff45f2$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 $ed27c69866ff45f2$var$mod(n, m) {
+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 $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
+class $799cddbef784668f$var$HSLColor extends $799cddbef784668f$var$Color {
     static parse(value) {
         let m;
-        if (m = value.match($ed27c69866ff45f2$var$HSL_REGEX)) {
+        if (m = value.match($799cddbef784668f$var$HSL_REGEX)) {
             var ref;
             const [h, s, l, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
             );
-            return new $ed27c69866ff45f2$var$HSLColor($ed27c69866ff45f2$var$mod(h, 360), $8sEfR$clamp(s, 0, 100), $8sEfR$clamp(l, 0, 100), $8sEfR$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
+            return new $799cddbef784668f$var$HSLColor($799cddbef784668f$var$mod(h, 360), $cBgAy$clamp(s, 0, 100), $cBgAy$clamp(l, 0, 100), $cBgAy$clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
         }
     }
     toString(format) {
@@ -558,10 +564,10 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
             case 'hexa':
                 return this.toRGB().toString('hexa');
             case 'hsl':
-                return `hsl(${this.hue}, ${$8sEfR$toFixedNumber(this.saturation, 2)}%, ${$8sEfR$toFixedNumber(this.lightness, 2)}%)`;
+                return `hsl(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.lightness, 2)}%)`;
             case 'css':
             case 'hsla':
-                return `hsla(${this.hue}, ${$8sEfR$toFixedNumber(this.saturation, 2)}%, ${$8sEfR$toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
+                return `hsla(${this.hue}, ${$cBgAy$toFixedNumber(this.saturation, 2)}%, ${$cBgAy$toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
             default:
                 return this.toFormat(format).toString(format);
         }
@@ -590,7 +596,7 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
         let lightness = this.lightness / 100;
         let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
         saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
-        return new $ed27c69866ff45f2$var$HSBColor($8sEfR$toFixedNumber(this.hue, 2), $8sEfR$toFixedNumber(saturation * 100, 2), $8sEfR$toFixedNumber(brightness * 100, 2), this.alpha);
+        return new $799cddbef784668f$var$HSBColor($cBgAy$toFixedNumber(this.hue, 2), $cBgAy$toFixedNumber(saturation * 100, 2), $cBgAy$toFixedNumber(brightness * 100, 2), this.alpha);
     }
     /**
    * Converts a HSL color to RGB.
@@ -603,10 +609,10 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
         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 $ed27c69866ff45f2$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
+        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 $ed27c69866ff45f2$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
+        return new $799cddbef784668f$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
     }
     getChannelRange(channel) {
         switch(channel){
@@ -614,20 +620,23 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
                 return {
                     minValue: 0,
                     maxValue: 360,
-                    step: 1
+                    step: 1,
+                    pageSize: 15
                 };
             case 'saturation':
             case 'lightness':
                 return {
                     minValue: 0,
                     maxValue: 100,
-                    step: 1
+                    step: 1,
+                    pageSize: 10
                 };
             case 'alpha':
                 return {
                     minValue: 0,
                     maxValue: 1,
-                    step: 0.01
+                    step: 0.01,
+                    pageSize: 0.1
                 };
             default:
                 throw new Error('Unknown color channel: ' + channel);
@@ -659,7 +668,7 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
             default:
                 throw new Error('Unknown color channel: ' + channel);
         }
-        return new $8sEfR$NumberFormatter(locale, options).format(value);
+        return new $cBgAy$NumberFormatter(locale, options).format(value);
     }
     getColorSpace() {
         return 'hsl';
@@ -674,21 +683,164 @@ class $ed27c69866ff45f2$var$HSLColor extends $ed27c69866ff45f2$var$Color {
 }
 
 
-var $3d60b153dd2f1b1b$exports = {};
+var $6e14a98a7f67141d$exports = {};
 
-$parcel$export($3d60b153dd2f1b1b$exports, "useColorSliderState", () => $3d60b153dd2f1b1b$export$57bc203e1c9c6d44);
+$parcel$export($6e14a98a7f67141d$exports, "useColorAreaState", () => $6e14a98a7f67141d$export$6df7f0e2cabc7eef);
 
 
 
-function $3d60b153dd2f1b1b$var$normalizeColor(v) {
-    if (typeof v === 'string') return $ed27c69866ff45f2$export$6e865ea70d7724f(v);
-    else return v;
+const $6e14a98a7f67141d$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#ffffff');
+const $6e14a98a7f67141d$var$RGBSet = new Set([
+    'red',
+    'green',
+    'blue'
+]);
+let $6e14a98a7f67141d$var$difference = (a, b)=>new Set([
+        ...a
+    ].filter((x)=>!b.has(x)
+    ))
+;
+function $6e14a98a7f67141d$export$6df7f0e2cabc7eef(props) {
+    let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
+    if (!value1 && !defaultValue) defaultValue = $6e14a98a7f67141d$var$DEFAULT_COLOR;
+    let [color, setColor] = $cBgAy$useControlledState(value1 && $799cddbef784668f$export$4cde5df63f53f473(value1), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
+    let valueRef = $cBgAy$useRef(color);
+    valueRef.current = color;
+    let channels = $cBgAy$useMemo(()=>{
+        if (!xChannel) switch(yChannel){
+            case 'red':
+            case 'green':
+                xChannel = 'blue';
+                break;
+            case 'blue':
+                xChannel = 'red';
+                break;
+            default:
+                xChannel = 'blue';
+                yChannel = 'green';
+        }
+        else if (!yChannel) switch(xChannel){
+            case 'red':
+                yChannel = 'green';
+                break;
+            case 'blue':
+                yChannel = 'red';
+                break;
+            default:
+                xChannel = 'blue';
+                yChannel = 'green';
+        }
+        let xyChannels = new Set([
+            xChannel,
+            yChannel
+        ]);
+        let zChannel = $6e14a98a7f67141d$var$difference($6e14a98a7f67141d$var$RGBSet, xyChannels).values().next().value;
+        return {
+            xChannel: xChannel,
+            yChannel: yChannel,
+            zChannel: zChannel
+        };
+    }, [
+        xChannel,
+        yChannel
+    ]);
+    let xChannelRange = color.getChannelRange(channels.xChannel);
+    let yChannelRange = color.getChannelRange(channels.yChannel);
+    let { minValue: minValueX1 , maxValue: maxValueX1 , step: stepX , pageSize: pageSizeX  } = xChannelRange;
+    let { minValue: minValueY1 , maxValue: maxValueY1 , step: stepY , pageSize: pageSizeY  } = yChannelRange;
+    let [isDragging1, setDragging] = $cBgAy$useState(false);
+    let isDraggingRef = $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 = $799cddbef784668f$export$4cde5df63f53f473(value);
+            valueRef.current = c;
+            setColor(c);
+        },
+        xValue: xValue,
+        setXValue: setXValue,
+        yValue: yValue,
+        setYValue: setYValue,
+        setColorFromPoint (x, y) {
+            let { minValue: minValueX , maxValue: maxValueX  } = color.getChannelRange(channels.xChannel);
+            let { minValue: minValueY , maxValue: maxValueY  } = color.getChannelRange(channels.yChannel);
+            let newXValue = minValueX + $cBgAy$clamp(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - $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 = $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 = $cBgAy$snapValueToStep(newYValue, minValueY, maxValueY, stepY);
+                newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+            }
+            if (newColor) setColor(newColor);
+        },
+        getThumbPosition () {
+            let x = (xValue - minValueX1) / (maxValueX1 - minValueX1);
+            let y = 1 - (yValue - minValueY1) / (maxValueY1 - minValueY1);
+            return {
+                x: x,
+                y: y
+            };
+        },
+        incrementX (stepSize) {
+            setXValue(xValue + stepSize > maxValueX1 ? maxValueX1 : $cBgAy$snapValueToStep(xValue + stepSize, minValueX1, maxValueX1, stepX));
+        },
+        incrementY (stepSize) {
+            setYValue(yValue + stepSize > maxValueY1 ? maxValueY1 : $cBgAy$snapValueToStep(yValue + stepSize, minValueY1, maxValueY1, stepY));
+        },
+        decrementX (stepSize) {
+            setXValue($cBgAy$snapValueToStep(xValue - stepSize, minValueX1, maxValueX1, stepX));
+        },
+        decrementY (stepSize) {
+            setYValue($cBgAy$snapValueToStep(yValue - stepSize, minValueY1, maxValueY1, stepY));
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef;
+            isDraggingRef = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging1,
+        getDisplayColor () {
+            return color.withChannelValue('alpha', 1);
+        }
+    };
 }
-function $3d60b153dd2f1b1b$export$57bc203e1c9c6d44(props) {
+
+
+var $25a25ac0d1624665$exports = {};
+
+$parcel$export($25a25ac0d1624665$exports, "useColorSliderState", () => $25a25ac0d1624665$export$57bc203e1c9c6d44);
+
+
+
+function $25a25ac0d1624665$export$57bc203e1c9c6d44(props) {
     let { channel: channel , value: value1 , defaultValue: defaultValue , onChange: onChange , locale: locale , ...otherProps } = props;
     if (value1 == null && defaultValue == null) throw new Error('useColorSliderState requires a value or defaultValue');
-    let [color, setColor] = $8sEfR$useControlledState(value1 && $3d60b153dd2f1b1b$var$normalizeColor(value1), defaultValue && $3d60b153dd2f1b1b$var$normalizeColor(defaultValue), onChange);
-    let sliderState = $8sEfR$useSliderState({
+    let [color, setColor] = $cBgAy$useControlledState(value1 && $799cddbef784668f$export$4cde5df63f53f473(value1), defaultValue && $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
+    let sliderState = $cBgAy$useSliderState({
         ...color.getChannelRange(channel),
         ...otherProps,
         // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
@@ -700,20 +852,21 @@ function $3d60b153dd2f1b1b$export$57bc203e1c9c6d44(props) {
             setColor(color.withChannelValue(channel, v));
         },
         onChangeEnd ([v]) {
-            // onChange will have already been called with the right value, this is just to trigger onChangEnd
+            // 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($3d60b153dd2f1b1b$var$normalizeColor(value));
+            setColor($799cddbef784668f$export$4cde5df63f53f473(value));
         },
         getDisplayColor () {
             switch(channel){
                 case 'hue':
-                    return $ed27c69866ff45f2$export$6e865ea70d7724f(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
+                    return $799cddbef784668f$export$6e865ea70d7724f(`hsl(${color.getChannelValue('hue')}, 100%, 50%)`);
                 case 'lightness':
                 case 'brightness':
                 case 'saturation':
@@ -729,42 +882,40 @@ function $3d60b153dd2f1b1b$export$57bc203e1c9c6d44(props) {
         },
         getThumbValueLabel () {
             return color.formatChannelValue(channel, locale);
-        }
+        },
+        step: step,
+        pageSize: pageSize
     };
 }
 
 
-var $2b492d761166c9cc$exports = {};
+var $ee4262c74a467b07$exports = {};
 
-$parcel$export($2b492d761166c9cc$exports, "useColorWheelState", () => $2b492d761166c9cc$export$f4301076d9336137);
+$parcel$export($ee4262c74a467b07$exports, "useColorWheelState", () => $ee4262c74a467b07$export$f4301076d9336137);
 
 
 
-function $2b492d761166c9cc$var$normalizeColor(v) {
-    if (typeof v === 'string') return $ed27c69866ff45f2$export$6e865ea70d7724f(v);
-    else return v;
-}
-const $2b492d761166c9cc$var$DEFAULT_COLOR = $ed27c69866ff45f2$export$6e865ea70d7724f('hsl(0, 100%, 50%)');
-function $2b492d761166c9cc$var$roundToStep(value, step) {
+const $ee4262c74a467b07$var$DEFAULT_COLOR = $799cddbef784668f$export$6e865ea70d7724f('hsl(0, 100%, 50%)');
+function $ee4262c74a467b07$var$roundToStep(value, step) {
     return Math.round(value / step) * step;
 }
-function $2b492d761166c9cc$var$mod(n, m) {
+function $ee4262c74a467b07$var$mod(n, m) {
     return (n % m + m) % m;
 }
-function $2b492d761166c9cc$var$roundDown(v) {
+function $ee4262c74a467b07$var$roundDown(v) {
     let r = Math.floor(v);
     if (r === v) return v - 1;
     else return r;
 }
-function $2b492d761166c9cc$var$degToRad(deg) {
+function $ee4262c74a467b07$var$degToRad(deg) {
     return deg * Math.PI / 180;
 }
-function $2b492d761166c9cc$var$radToDeg(rad) {
+function $ee4262c74a467b07$var$radToDeg(rad) {
     return rad * 180 / Math.PI;
 }
 // 0deg = 3 o'clock. increases clockwise
-function $2b492d761166c9cc$var$angleToCartesian(angle, radius) {
-    let rad = $2b492d761166c9cc$var$degToRad(360 - angle + 90);
+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 {
@@ -772,23 +923,25 @@ function $2b492d761166c9cc$var$angleToCartesian(angle, radius) {
         y: y
     };
 }
-function $2b492d761166c9cc$var$cartesianToAngle(x, y, radius) {
-    let deg = $2b492d761166c9cc$var$radToDeg(Math.atan2(y / radius, x / radius));
+function $ee4262c74a467b07$var$cartesianToAngle(x, y, radius) {
+    let deg = $ee4262c74a467b07$var$radToDeg(Math.atan2(y / radius, x / radius));
     return (deg + 360) % 360;
 }
-function $2b492d761166c9cc$export$f4301076d9336137(props) {
-    let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd , step: step = 1  } = props;
-    if (!props.value && !defaultValue) defaultValue = $2b492d761166c9cc$var$DEFAULT_COLOR;
-    let [value, setValue] = $8sEfR$useControlledState($2b492d761166c9cc$var$normalizeColor(props.value), $2b492d761166c9cc$var$normalizeColor(defaultValue), onChange);
-    let valueRef = $8sEfR$useRef(value);
+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] = $cBgAy$useControlledState($799cddbef784668f$export$4cde5df63f53f473(props.value), $799cddbef784668f$export$4cde5df63f53f473(defaultValue), onChange);
+    let valueRef = $cBgAy$useRef(value);
     valueRef.current = value;
-    let [isDragging1, setDragging] = $8sEfR$useState(false);
-    let isDraggingRef = $8sEfR$useRef(false).current;
+    let channelRange = value.getChannelRange('hue');
+    let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep  } = channelRange;
+    let [isDragging1, setDragging] = $cBgAy$useState(false);
+    let isDraggingRef = $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 = $2b492d761166c9cc$var$roundToStep($2b492d761166c9cc$var$mod(v, 360), step);
+        v = $ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(v, 360), step);
         if (hue !== v) {
             let color = value.withChannelValue('hue', v);
             valueRef.current = color;
@@ -797,31 +950,34 @@ function $2b492d761166c9cc$export$f4301076d9336137(props) {
     }
     return {
         value: value,
+        step: step,
+        pageStep: pageStep,
         setValue (v) {
-            let color = $2b492d761166c9cc$var$normalizeColor(v);
+            let color = $799cddbef784668f$export$4cde5df63f53f473(v);
             valueRef.current = color;
             setValue(color);
         },
         hue: hue,
         setHue: setHue,
         setHueFromPoint (x, y, radius) {
-            setHue($2b492d761166c9cc$var$cartesianToAngle(x, y, radius));
+            setHue($ee4262c74a467b07$var$cartesianToAngle(x, y, radius));
         },
         getThumbPosition (radius) {
-            return $2b492d761166c9cc$var$angleToCartesian(value.getChannelValue('hue'), radius);
+            return $ee4262c74a467b07$var$angleToCartesian(value.getChannelValue('hue'), radius);
         },
-        increment (minStepSize = 0) {
-            let newValue = hue + Math.max(minStepSize, step);
-            if (newValue > 360) // Make sure you can always get back to 0.
-            newValue = 0;
-            setHue(newValue);
+        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 (minStepSize = 0) {
-            let s = Math.max(minStepSize, step);
+        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($2b492d761166c9cc$var$roundDown(360 / s) * s);
-            else setHue(hue - s);
+            setHue($ee4262c74a467b07$var$roundDown(360 / s) * s);
+            else setHue($ee4262c74a467b07$var$roundToStep($ee4262c74a467b07$var$mod(hue - s, 360), s));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -837,16 +993,16 @@ function $2b492d761166c9cc$export$f4301076d9336137(props) {
 }
 
 
-var $8c33114d2dc9460c$exports = {};
+var $b335ada08155d9c0$exports = {};
 
-$parcel$export($8c33114d2dc9460c$exports, "useColorFieldState", () => $8c33114d2dc9460c$export$d52a01683abdfcd6);
+$parcel$export($b335ada08155d9c0$exports, "useColorFieldState", () => $b335ada08155d9c0$export$d52a01683abdfcd6);
 
 
 
-function $9de9e313fa61a4b6$export$5aadd9c0606af5c2(value) {
-    return $8sEfR$useMemo(()=>{
+function $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value) {
+    return $cBgAy$useMemo(()=>{
         if (typeof value === 'string') try {
-            return $ed27c69866ff45f2$export$6e865ea70d7724f(value);
+            return $799cddbef784668f$export$6e865ea70d7724f(value);
         } catch (err) {
             return undefined;
         }
@@ -859,16 +1015,17 @@ function $9de9e313fa61a4b6$export$5aadd9c0606af5c2(value) {
 
 
 
-const $8c33114d2dc9460c$var$MIN_COLOR = $ed27c69866ff45f2$export$6e865ea70d7724f('#000000');
-const $8c33114d2dc9460c$var$MAX_COLOR = $ed27c69866ff45f2$export$6e865ea70d7724f('#FFFFFF');
-const $8c33114d2dc9460c$var$MIN_COLOR_INT = $8c33114d2dc9460c$var$MIN_COLOR.toHexInt();
-const $8c33114d2dc9460c$var$MAX_COLOR_INT = $8c33114d2dc9460c$var$MAX_COLOR.toHexInt();
-function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
-    let { step: step = 1 , value: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
-    let initialValue = $9de9e313fa61a4b6$export$5aadd9c0606af5c2(value1);
-    let initialDefaultValue = $9de9e313fa61a4b6$export$5aadd9c0606af5c2(defaultValue);
-    let [colorValue, setColorValue] = $8sEfR$useControlledState(initialValue, initialDefaultValue, onChange);
-    let [inputValue, setInputValue] = $8sEfR$useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : ''
+const $b335ada08155d9c0$var$MIN_COLOR = $799cddbef784668f$export$6e865ea70d7724f('#000000');
+const $b335ada08155d9c0$var$MAX_COLOR = $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: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
+    let { step: step  } = $b335ada08155d9c0$var$MIN_COLOR.getChannelRange('red');
+    let initialValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(value1);
+    let initialDefaultValue = $aa90ad8b2b1d015f$export$5aadd9c0606af5c2(defaultValue);
+    let [colorValue, setColorValue] = $cBgAy$useControlledState(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = $cBgAy$useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : ''
     );
     let safelySetColorValue = (newColor)=>{
         if (!colorValue || !newColor) {
@@ -880,25 +1037,24 @@ function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
             return;
         }
     };
-    $8sEfR$useEffect(()=>{
+    let prevValue = $cBgAy$useRef(colorValue);
+    if (prevValue.current !== colorValue) {
         setInputValue(colorValue ? colorValue.toString('hex') : '');
-    }, [
-        colorValue,
-        setInputValue
-    ]);
-    let parsedValue = $8sEfR$useMemo(()=>{
+        prevValue.current = colorValue;
+    }
+    let parsedValue = $cBgAy$useMemo(()=>{
         let color;
         try {
-            color = $ed27c69866ff45f2$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+            color = $799cddbef784668f$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
         } catch (err) {
             color = null;
         }
         return color;
     }, [
-        $ed27c69866ff45f2$export$6e865ea70d7724f,
+        $799cddbef784668f$export$6e865ea70d7724f,
         inputValue
     ]);
-    let parsed = $8sEfR$useRef(null);
+    let parsed = $cBgAy$useRef(null);
     parsed.current = parsedValue;
     let commit = ()=>{
         // Set to empty state if input value is empty
@@ -919,7 +1075,7 @@ function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
         setInputValue(newColorValue);
     };
     let increment = ()=>{
-        let newValue = $8c33114d2dc9460c$var$addColorValue(parsed.current, step);
+        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
@@ -928,7 +1084,7 @@ function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
         safelySetColorValue(newValue);
     };
     let decrement = ()=>{
-        let newValue = $8c33114d2dc9460c$var$addColorValue(parsed.current, -step);
+        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
@@ -936,9 +1092,9 @@ function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
         if (newValue === colorValue) setInputValue(newValue.toString('hex'));
         safelySetColorValue(newValue);
     };
-    let incrementToMax = ()=>safelySetColorValue($8c33114d2dc9460c$var$MAX_COLOR)
+    let incrementToMax = ()=>safelySetColorValue($b335ada08155d9c0$var$MAX_COLOR)
     ;
-    let decrementToMin = ()=>safelySetColorValue($8c33114d2dc9460c$var$MIN_COLOR)
+    let decrementToMin = ()=>safelySetColorValue($b335ada08155d9c0$var$MIN_COLOR)
     ;
     let validate = (value)=>{
         var ref;
@@ -956,13 +1112,13 @@ function $8c33114d2dc9460c$export$d52a01683abdfcd6(props) {
         decrementToMin: decrementToMin
     };
 }
-function $8c33114d2dc9460c$var$addColorValue(color, step) {
-    let newColor = color ? color : $8c33114d2dc9460c$var$MIN_COLOR;
+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, $8c33114d2dc9460c$var$MIN_COLOR_INT), $8c33114d2dc9460c$var$MAX_COLOR_INT);
+    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 = $ed27c69866ff45f2$export$6e865ea70d7724f(newColorString);
+        newColor = $799cddbef784668f$export$6e865ea70d7724f(newColorString);
     }
     return newColor;
 }
@@ -970,5 +1126,5 @@ function $8c33114d2dc9460c$var$addColorValue(color, step) {
 
 
 
-export {$ed27c69866ff45f2$export$6e865ea70d7724f as parseColor, $3d60b153dd2f1b1b$export$57bc203e1c9c6d44 as useColorSliderState, $2b492d761166c9cc$export$f4301076d9336137 as useColorWheelState, $8c33114d2dc9460c$export$d52a01683abdfcd6 as useColorFieldState};
+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