@react-stately/color 3.0.0-beta.5 → 3.0.0-beta.6

package/dist/module.js

@@ -1,1187 +1,969 @@
-import { useRef, useState, useMemo, useEffect } from "react";
-import { useSliderState } from "@react-stately/slider";
-import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
-import { NumberFormatter } from "@internationalized/number";
-import { MessageDictionary } from "@internationalized/message";
-import { clamp, toFixedNumber, useControlledState } from "@react-stately/utils";
-import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ar-AE.json
-var $b2cd9264f0b716f5f6077988ebeb8d5$exports = {};
-$b2cd9264f0b716f5f6077988ebeb8d5$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/bg-BG.json
-var $cdad99d1d4c78a097fa29797f20e3ec$exports = {};
-$cdad99d1d4c78a097fa29797f20e3ec$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/cs-CZ.json
-var $f9cd6479f5235258a90316a784221e3b$exports = {};
-$f9cd6479f5235258a90316a784221e3b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/da-DK.json
-var $d9a48d423b3cf4f2d44abe3c990b$exports = {};
-$d9a48d423b3cf4f2d44abe3c990b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/de-DE.json
-var $c98aec81a0d1f104658866432f$exports = {};
-$c98aec81a0d1f104658866432f$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/el-GR.json
-var $d448bd8618b5533ccc4a8cc128b5f05a$exports = {};
-$d448bd8618b5533ccc4a8cc128b5f05a$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/en-US.json
-var $eaffba4fd6d2bfdbccc895c90029fc1b$exports = {};
-$eaffba4fd6d2bfdbccc895c90029fc1b$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/es-ES.json
-var $ba4a9d986c77d6b793c00d1e2392bade$exports = {};
-$ba4a9d986c77d6b793c00d1e2392bade$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/et-EE.json
-var $eea6c1402487c18ea84576423346b15$exports = {};
-$eea6c1402487c18ea84576423346b15$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fi-FI.json
-var $a74db7b52c67c25bc7440950d823b$exports = {};
-$a74db7b52c67c25bc7440950d823b$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/fr-FR.json
-var $fe5ec5953266844aed13956bf74a814$exports = {};
-$fe5ec5953266844aed13956bf74a814$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/he-IL.json
-var $c8b18e3105ca2bd3791c8ba8d5c080e9$exports = {};
-$c8b18e3105ca2bd3791c8ba8d5c080e9$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hr-HR.json
-var $b91aba8d136e0d182ab14d$exports = {};
-$b91aba8d136e0d182ab14d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/hu-HU.json
-var $e4a95e1cff41940abe4abd86d$exports = {};
-$e4a95e1cff41940abe4abd86d$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\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/it-IT.json
-var $cc9b471008e063931f187b9f17ea84$exports = {};
-$cc9b471008e063931f187b9f17ea84$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ja-JP.json
-var $b3ba4812949b99f64ae9c5343cef182$exports = {};
-$b3ba4812949b99f64ae9c5343cef182$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ko-KR.json
-var $a0635388d1896feed826078018e61cc3$exports = {};
-$a0635388d1896feed826078018e61cc3$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lt-LT.json
-var $b723c6ed4b6433c464915f350d7b37d$exports = {};
-$b723c6ed4b6433c464915f350d7b37d$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/lv-LV.json
-var $de160269d06dd11d79a46ad67519$exports = {};
-$de160269d06dd11d79a46ad67519$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nb-NO.json
-var $df7f70de921632c10878ba1ec274be$exports = {};
-$df7f70de921632c10878ba1ec274be$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/nl-NL.json
-var $f815b3f638134acc513a2b0c77d8dce0$exports = {};
-$f815b3f638134acc513a2b0c77d8dce0$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pl-PL.json
-var $aee27b855fc838cae4ebd8dfbbb95e33$exports = {};
-$aee27b855fc838cae4ebd8dfbbb95e33$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-BR.json
-var $b361c9c44348e09361feb2ebb7e33$exports = {};
-$b361c9c44348e09361feb2ebb7e33$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/pt-PT.json
-var $d6cb1234c3b503df17397aae027f5d6f$exports = {};
-$d6cb1234c3b503df17397aae027f5d6f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ro-RO.json
-var $b8d88afd8f44c22874b7fe6f22d03d1$exports = {};
-$b8d88afd8f44c22874b7fe6f22d03d1$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/ru-RU.json
-var $c188a27cabc6e80207754236eb1fec$exports = {};
-$c188a27cabc6e80207754236eb1fec$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sk-SK.json
-var $c40950a3513f1cbbb70121cc402a156f$exports = {};
-$c40950a3513f1cbbb70121cc402a156f$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sl-SI.json
-var $d6ba833b474990359bcaf23ae4062a5a$exports = {};
-$d6ba833b474990359bcaf23ae4062a5a$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sr-SP.json
-var $b540c0afbb8586393249300b9d058750$exports = {};
-$b540c0afbb8586393249300b9d058750$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/sv-SE.json
-var $f6f532bfe6495593ae520210aedcf6ee$exports = {};
-$f6f532bfe6495593ae520210aedcf6ee$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/tr-TR.json
-var $b002567dfed5d0563037184fe514$exports = {};
-$b002567dfed5d0563037184fe514$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\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/uk-UA.json
-var $e3caa848bb758a1d3e6ca0f18ece7f4$exports = {};
-$e3caa848bb758a1d3e6ca0f18ece7f4$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-CN.json
-var $d24ec9fef3a39ede5b3f154080d42$exports = {};
-$d24ec9fef3a39ede5b3f154080d42$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
-// ASSET: /Users/govett/dev/react-spectrum-v3/packages/@react-stately/color/intl/zh-TW.json
-var $a1e968ea81ccd941358c63d78a093ff0$exports = {};
-$a1e968ea81ccd941358c63d78a093ff0$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
-// @ts-ignore
-const $db5f3c2f048bca5be854d051d3f2729$var$intlMessages = {
-  "ar-AE": _babelRuntimeHelpersEsmInteropRequireDefault($b2cd9264f0b716f5f6077988ebeb8d5$exports).default,
-  "bg-BG": _babelRuntimeHelpersEsmInteropRequireDefault($cdad99d1d4c78a097fa29797f20e3ec$exports).default,
-  "cs-CZ": _babelRuntimeHelpersEsmInteropRequireDefault($f9cd6479f5235258a90316a784221e3b$exports).default,
-  "da-DK": _babelRuntimeHelpersEsmInteropRequireDefault($d9a48d423b3cf4f2d44abe3c990b$exports).default,
-  "de-DE": _babelRuntimeHelpersEsmInteropRequireDefault($c98aec81a0d1f104658866432f$exports).default,
-  "el-GR": _babelRuntimeHelpersEsmInteropRequireDefault($d448bd8618b5533ccc4a8cc128b5f05a$exports).default,
-  "en-US": _babelRuntimeHelpersEsmInteropRequireDefault($eaffba4fd6d2bfdbccc895c90029fc1b$exports).default,
-  "es-ES": _babelRuntimeHelpersEsmInteropRequireDefault($ba4a9d986c77d6b793c00d1e2392bade$exports).default,
-  "et-EE": _babelRuntimeHelpersEsmInteropRequireDefault($eea6c1402487c18ea84576423346b15$exports).default,
-  "fi-FI": _babelRuntimeHelpersEsmInteropRequireDefault($a74db7b52c67c25bc7440950d823b$exports).default,
-  "fr-FR": _babelRuntimeHelpersEsmInteropRequireDefault($fe5ec5953266844aed13956bf74a814$exports).default,
-  "he-IL": _babelRuntimeHelpersEsmInteropRequireDefault($c8b18e3105ca2bd3791c8ba8d5c080e9$exports).default,
-  "hr-HR": _babelRuntimeHelpersEsmInteropRequireDefault($b91aba8d136e0d182ab14d$exports).default,
-  "hu-HU": _babelRuntimeHelpersEsmInteropRequireDefault($e4a95e1cff41940abe4abd86d$exports).default,
-  "it-IT": _babelRuntimeHelpersEsmInteropRequireDefault($cc9b471008e063931f187b9f17ea84$exports).default,
-  "ja-JP": _babelRuntimeHelpersEsmInteropRequireDefault($b3ba4812949b99f64ae9c5343cef182$exports).default,
-  "ko-KR": _babelRuntimeHelpersEsmInteropRequireDefault($a0635388d1896feed826078018e61cc3$exports).default,
-  "lt-LT": _babelRuntimeHelpersEsmInteropRequireDefault($b723c6ed4b6433c464915f350d7b37d$exports).default,
-  "lv-LV": _babelRuntimeHelpersEsmInteropRequireDefault($de160269d06dd11d79a46ad67519$exports).default,
-  "nb-NO": _babelRuntimeHelpersEsmInteropRequireDefault($df7f70de921632c10878ba1ec274be$exports).default,
-  "nl-NL": _babelRuntimeHelpersEsmInteropRequireDefault($f815b3f638134acc513a2b0c77d8dce0$exports).default,
-  "pl-PL": _babelRuntimeHelpersEsmInteropRequireDefault($aee27b855fc838cae4ebd8dfbbb95e33$exports).default,
-  "pt-BR": _babelRuntimeHelpersEsmInteropRequireDefault($b361c9c44348e09361feb2ebb7e33$exports).default,
-  "pt-PT": _babelRuntimeHelpersEsmInteropRequireDefault($d6cb1234c3b503df17397aae027f5d6f$exports).default,
-  "ro-RO": _babelRuntimeHelpersEsmInteropRequireDefault($b8d88afd8f44c22874b7fe6f22d03d1$exports).default,
-  "ru-RU": _babelRuntimeHelpersEsmInteropRequireDefault($c188a27cabc6e80207754236eb1fec$exports).default,
-  "sk-SK": _babelRuntimeHelpersEsmInteropRequireDefault($c40950a3513f1cbbb70121cc402a156f$exports).default,
-  "sl-SI": _babelRuntimeHelpersEsmInteropRequireDefault($d6ba833b474990359bcaf23ae4062a5a$exports).default,
-  "sr-SP": _babelRuntimeHelpersEsmInteropRequireDefault($b540c0afbb8586393249300b9d058750$exports).default,
-  "sv-SE": _babelRuntimeHelpersEsmInteropRequireDefault($f6f532bfe6495593ae520210aedcf6ee$exports).default,
-  "tr-TR": _babelRuntimeHelpersEsmInteropRequireDefault($b002567dfed5d0563037184fe514$exports).default,
-  "uk-UA": _babelRuntimeHelpersEsmInteropRequireDefault($e3caa848bb758a1d3e6ca0f18ece7f4$exports).default,
-  "zh-CN": _babelRuntimeHelpersEsmInteropRequireDefault($d24ec9fef3a39ede5b3f154080d42$exports).default,
-  "zh-TW": _babelRuntimeHelpersEsmInteropRequireDefault($a1e968ea81ccd941358c63d78a093ff0$exports).default
-};
-const $db5f3c2f048bca5be854d051d3f2729$var$messages = new MessageDictionary($db5f3c2f048bca5be854d051d3f2729$var$intlMessages);
-/** Parses a color from a string value. Throws an error if the string could not be parsed. */
-
-export function parseColor(value) {
-  let res = $db5f3c2f048bca5be854d051d3f2729$var$RGBColor.parse(value) || $db5f3c2f048bca5be854d051d3f2729$var$HSBColor.parse(value) || $db5f3c2f048bca5be854d051d3f2729$var$HSLColor.parse(value);
-
-  if (res) {
-    return res;
-  }
-
-  throw new Error('Invalid color value: ' + value);
+import {clamp as $6YREh$clamp, toFixedNumber as $6YREh$toFixedNumber, useControlledState as $6YREh$useControlledState} from "@react-stately/utils";
+import {MessageDictionary as $6YREh$MessageDictionary} from "@internationalized/message";
+import {NumberFormatter as $6YREh$NumberFormatter} from "@internationalized/number";
+import {useSliderState as $6YREh$useSliderState} from "@react-stately/slider";
+import {useRef as $6YREh$useRef, useState as $6YREh$useState, useEffect as $6YREh$useEffect, useMemo as $6YREh$useMemo} from "react";
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
 }
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $19b55adb42b5e1b3$exports = {};
 
-class $db5f3c2f048bca5be854d051d3f2729$var$Color {
-  toHexInt() {
-    return this.toFormat('rgb').toHexInt();
-  }
+$parcel$export($19b55adb42b5e1b3$exports, "parseColor", () => $19b55adb42b5e1b3$export$6e865ea70d7724f);
 
-  getChannelValue(channel) {
-    if (channel in this) {
-      return this[channel];
-    }
+var $675273e4af08d62e$exports = {};
+var $077bd0bceac79457$exports = {};
+$077bd0bceac79457$exports = JSON.parse("{\"alpha\":\"ألفا\",\"blue\":\"أزرق\",\"brightness\":\"السطوع\",\"green\":\"أخضر\",\"hue\":\"درجة اللون\",\"lightness\":\"الإضاءة\",\"red\":\"أحمر\",\"saturation\":\"التشبع\"}");
 
-    throw new Error('Unsupported color channel: ' + channel);
-  }
 
-  withChannelValue(channel, value) {
-    if (channel in this) {
-      let x = this.clone();
-      x[channel] = value;
-      return x;
-    }
+var $cddd4812af0cd440$exports = {};
+$cddd4812af0cd440$exports = JSON.parse("{\"alpha\":\"Алфа\",\"blue\":\"Синьо\",\"brightness\":\"Яркост\",\"green\":\"Зелено\",\"hue\":\"Оттенък\",\"lightness\":\"Лекота\",\"red\":\"Червено\",\"saturation\":\"Наситеност\"}");
 
-    throw new Error('Unsupported color channel: ' + channel);
-  }
 
-  getChannelName(channel, locale) {
-    return $db5f3c2f048bca5be854d051d3f2729$var$messages.getStringForLocale(channel, locale);
-  }
+var $183858b76275efe7$exports = {};
+$183858b76275efe7$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odstín\",\"lightness\":\"Světlost\",\"red\":\"Červená\",\"saturation\":\"Sytost\"}");
 
-}
 
-const $db5f3c2f048bca5be854d051d3f2729$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)
+var $020bfa8dadaf30b2$exports = {};
+$020bfa8dadaf30b2$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grøn\",\"hue\":\"Tone\",\"lightness\":\"Lyshed\",\"red\":\"Rød\",\"saturation\":\"Farvemætning\"}");
 
-const $db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$var$RGBColor extends $db5f3c2f048bca5be854d051d3f2729$var$Color {
-  constructor(red, green, blue, alpha) {
-    super();
-    this.red = red;
-    this.green = green;
-    this.blue = blue;
-    this.alpha = alpha;
-  }
-
-  static parse(value) {
-    let m;
-
-    if (m = value.match($db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$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 $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(r, g, b, 1);
-      }
-    }
 
-    if (m = value.match($db5f3c2f048bca5be854d051d3f2729$var$RGB_REGEX)) {
-      var _m$;
+var $9d6c5c82d9282c0f$exports = {};
+$9d6c5c82d9282c0f$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Blau\",\"brightness\":\"Helligkeit\",\"green\":\"Grün\",\"hue\":\"Farbton\",\"lightness\":\"Leuchtkraft\",\"red\":\"Rot\",\"saturation\":\"Sättigung\"}");
 
-      const [r, g, b, a] = ((_m$ = m[1]) != null ? _m$ : m[2]).split(',').map(n => Number(n.trim()));
-      return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(clamp(r, 0, 255), clamp(g, 0, 255), clamp(b, 0, 255), clamp(a != null ? a : 1, 0, 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();
+var $854ad75b322fe89a$exports = {};
+$854ad75b322fe89a$exports = JSON.parse("{\"alpha\":\"Άλφα\",\"blue\":\"Μπλε\",\"brightness\":\"Φωτεινότητα\",\"green\":\"Πράσινο\",\"hue\":\"Τόνος\",\"lightness\":\"Φωτεινότητα\",\"red\":\"Κόκκινο\",\"saturation\":\"Κορεσμός\"}");
 
-      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 + ")";
+var $be9ad9682b370ddc$exports = {};
+$be9ad9682b370ddc$exports = JSON.parse("{\"hue\":\"Hue\",\"saturation\":\"Saturation\",\"lightness\":\"Lightness\",\"brightness\":\"Brightness\",\"red\":\"Red\",\"green\":\"Green\",\"blue\":\"Blue\",\"alpha\":\"Alpha\"}");
 
-      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);
-    }
-  }
+var $05a0b4f28c8ee761$exports = {};
+$05a0b4f28c8ee761$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Azul\",\"brightness\":\"Brillo\",\"green\":\"Verde\",\"hue\":\"Tono\",\"lightness\":\"Luminosidad\",\"red\":\"Rojo\",\"saturation\":\"Saturación\"}");
 
-  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 $db5f3c2f048bca5be854d051d3f2729$var$HSBColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), 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;
-    }
+var $5d177f7c41df0d7c$exports = {};
+$5d177f7c41df0d7c$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Sinine\",\"brightness\":\"Heledus\",\"green\":\"Roheline\",\"hue\":\"Värv\",\"lightness\":\"Valgus\",\"red\":\"Punane\",\"saturation\":\"Küllastus\"}");
 
-    return new $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(toFixedNumber(hue * 360, 2), toFixedNumber(saturation * 100, 2), toFixedNumber(lightness * 100, 2), this.alpha);
-  }
-
-  clone() {
-    return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(this.red, this.green, this.blue, this.alpha);
-  }
-
-  getChannelRange(channel) {
-    switch (channel) {
-      case 'red':
-      case 'green':
-      case 'blue':
-        return {
-          minValue: 0,
-          maxValue: 255,
-          step: 1
-        };
-
-      case 'alpha':
-        return {
-          minValue: 0,
-          maxValue: 1,
-          step: 0.01
-        };
-
-      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 NumberFormatter(locale, options).format(value);
-  }
+var $c0c8e1b6dbe88b42$exports = {};
+$c0c8e1b6dbe88b42$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Sininen\",\"brightness\":\"Kirkkaus\",\"green\":\"Vihreä\",\"hue\":\"Sävy\",\"lightness\":\"Valomäärä\",\"red\":\"Punainen\",\"saturation\":\"Värikylläisyys\"}");
 
-  getColorSpace() {
-    return 'rgb';
-  }
 
-} // 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)
+var $f78038f3c5ac85bf$exports = {};
+$f78038f3c5ac85bf$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"Bleu\",\"brightness\":\"Luminosité\",\"green\":\"Vert\",\"hue\":\"Teinte\",\"lightness\":\"Luminosité\",\"red\":\"Rouge\",\"saturation\":\"Saturation\"}");
 
 
-const $db5f3c2f048bca5be854d051d3f2729$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+)?)\)/;
+var $99f849eae7055e0d$exports = {};
+$99f849eae7055e0d$exports = JSON.parse("{\"alpha\":\"אלפא\",\"blue\":\"כחול\",\"brightness\":\"בהירות\",\"green\":\"ירוק\",\"hue\":\"גוון\",\"lightness\":\"כמות אור\",\"red\":\"אדום\",\"saturation\":\"רוויה\"}");
 
-class $db5f3c2f048bca5be854d051d3f2729$var$HSBColor extends $db5f3c2f048bca5be854d051d3f2729$var$Color {
-  constructor(hue, saturation, brightness, alpha) {
-    super();
-    this.hue = hue;
-    this.saturation = saturation;
-    this.brightness = brightness;
-    this.alpha = alpha;
-  }
 
-  static parse(value) {
-    let m;
+var $d0b14a225bb73c77$exports = {};
+$d0b14a225bb73c77$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Svjetlina\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvijetljenost\",\"red\":\"Crvena\",\"saturation\":\"Zasićenost\"}");
 
-    if (m = value.match($db5f3c2f048bca5be854d051d3f2729$var$HSB_REGEX)) {
-      var _m$2;
 
-      const [h, s, b, a] = ((_m$2 = m[1]) != null ? _m$2 : m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
-      return new $db5f3c2f048bca5be854d051d3f2729$var$HSBColor($db5f3c2f048bca5be854d051d3f2729$var$mod(h, 360), clamp(s, 0, 100), clamp(b, 0, 100), clamp(a != null ? a : 1, 0, 1));
-    }
-  }
+var $b47e94169ab16ffb$exports = {};
+$b47e94169ab16ffb$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\"}");
 
-  toString(format) {
-    switch (format) {
-      case 'css':
-        return this.toHSL().toString('css');
 
-      case 'hex':
-        return this.toRGB().toString('hex');
+var $3ca86f7c5a542fc2$exports = {};
+$3ca86f7c5a542fc2$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blu\",\"brightness\":\"Luminosità\",\"green\":\"Verde\",\"hue\":\"Tonalità\",\"lightness\":\"Luminosità\",\"red\":\"Rosso\",\"saturation\":\"Saturazione\"}");
 
-      case 'hexa':
-        return this.toRGB().toString('hexa');
 
-      case 'hsb':
-        return "hsb(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.brightness, 2) + "%)";
+var $9c9adbefd088dfec$exports = {};
+$9c9adbefd088dfec$exports = JSON.parse("{\"alpha\":\"アルファ\",\"blue\":\"青\",\"brightness\":\"明るさ\",\"green\":\"緑\",\"hue\":\"色相\",\"lightness\":\"明度\",\"red\":\"赤\",\"saturation\":\"彩度\"}");
 
-      case 'hsba':
-        return "hsba(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.brightness, 2) + "%, " + this.alpha + ")";
 
-      default:
-        return this.toFormat(format).toString(format);
-    }
-  }
+var $e0a855e991915bcf$exports = {};
+$e0a855e991915bcf$exports = JSON.parse("{\"alpha\":\"알파\",\"blue\":\"파랑\",\"brightness\":\"명도\",\"green\":\"초록\",\"hue\":\"색조\",\"lightness\":\"밝기\",\"red\":\"빨강\",\"saturation\":\"채도\"}");
 
-  toFormat(format) {
-    switch (format) {
-      case 'hsb':
-      case 'hsba':
-        return this;
 
-      case 'hsl':
-      case 'hsla':
-        return this.toHSL();
+var $b2bbcc4a6d0f4ff0$exports = {};
+$b2bbcc4a6d0f4ff0$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Mėlyna\",\"brightness\":\"Ryškumas\",\"green\":\"Žalia\",\"hue\":\"Atspalvis\",\"lightness\":\"Šviesumas\",\"red\":\"Raudona\",\"saturation\":\"Įsotinimas\"}");
 
-      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.
-   */
+var $d1a2e38b31bf8b62$exports = {};
+$d1a2e38b31bf8b62$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Zila\",\"brightness\":\"Spilgtums\",\"green\":\"Zaļa\",\"hue\":\"Nokrāsa\",\"lightness\":\"Gaišums\",\"red\":\"Sarkana\",\"saturation\":\"Piesātinājums\"}");
 
 
-  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 $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(toFixedNumber(this.hue, 2), toFixedNumber(saturation * 100, 2), 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.
-   */
+var $08e30a9af5d53702$exports = {};
+$08e30a9af5d53702$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blå\",\"brightness\":\"Lysstyrke\",\"green\":\"Grønn\",\"hue\":\"Fargetone\",\"lightness\":\"Lyshet\",\"red\":\"Rød\",\"saturation\":\"Metning\"}");
 
 
-  toRGB() {
-    let hue = this.hue;
-    let saturation = this.saturation / 100;
-    let brightness = this.brightness / 100;
+var $659611dede656c7e$exports = {};
+$659611dede656c7e$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blauw\",\"brightness\":\"Helderheid\",\"green\":\"Groen\",\"hue\":\"Kleurtoon\",\"lightness\":\"Lichtsterkte\",\"red\":\"Rood\",\"saturation\":\"Verzadiging\"}");
 
-    let fn = function fn(n, k) {
-      if (k === void 0) {
-        k = (n + hue / 60) % 6;
-      }
 
-      return brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
-    };
+var $0f93c75b665df87b$exports = {};
+$0f93c75b665df87b$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Niebieski\",\"brightness\":\"Jasność\",\"green\":\"Zielony\",\"hue\":\"Odcień\",\"lightness\":\"Jaskrawość\",\"red\":\"Czerwony\",\"saturation\":\"Nasycenie\"}");
 
-    return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
-  }
-
-  clone() {
-    return new $db5f3c2f048bca5be854d051d3f2729$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
-  }
-
-  getChannelRange(channel) {
-    switch (channel) {
-      case 'hue':
-        return {
-          minValue: 0,
-          maxValue: 360,
-          step: 1
-        };
-
-      case 'saturation':
-      case 'brightness':
-        return {
-          minValue: 0,
-          maxValue: 100,
-          step: 1
-        };
-
-      case 'alpha':
-        return {
-          minValue: 0,
-          maxValue: 1,
-          step: 0.01
-        };
-
-      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 NumberFormatter(locale, options).format(value);
-  }
+var $c00ea759839bb843$exports = {};
+$c00ea759839bb843$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Brilho\",\"green\":\"Verde\",\"hue\":\"Matiz\",\"lightness\":\"Luminosidade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
-  getColorSpace() {
-    return 'hsb';
-  }
 
-} // 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)
+var $821dfa0d9faae4f9$exports = {};
+$821dfa0d9faae4f9$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Azul\",\"brightness\":\"Luminosidade\",\"green\":\"Verde\",\"hue\":\"Tonalidade\",\"lightness\":\"Claridade\",\"red\":\"Vermelho\",\"saturation\":\"Saturação\"}");
 
 
-const $db5f3c2f048bca5be854d051d3f2729$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+)?)\)/;
+var $fdb474da024beb51$exports = {};
+$fdb474da024beb51$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Albastru\",\"brightness\":\"Luminozitate\",\"green\":\"Verde\",\"hue\":\"Nuanță\",\"lightness\":\"Luminozitate\",\"red\":\"Roșu\",\"saturation\":\"Saturație\"}");
 
-function $db5f3c2f048bca5be854d051d3f2729$var$mod(n, m) {
-  return (n % m + m) % m;
-}
 
-class $db5f3c2f048bca5be854d051d3f2729$var$HSLColor extends $db5f3c2f048bca5be854d051d3f2729$var$Color {
-  constructor(hue, saturation, lightness, alpha) {
-    super();
-    this.hue = hue;
-    this.saturation = saturation;
-    this.lightness = lightness;
-    this.alpha = alpha;
-  }
+var $f51a8c7858d3993f$exports = {};
+$f51a8c7858d3993f$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синий\",\"brightness\":\"Яркость\",\"green\":\"Зеленый\",\"hue\":\"Оттенок\",\"lightness\":\"Освещенность\",\"red\":\"Красный\",\"saturation\":\"Насыщенность\"}");
 
-  static parse(value) {
-    let m;
 
-    if (m = value.match($db5f3c2f048bca5be854d051d3f2729$var$HSL_REGEX)) {
-      var _m$3;
+var $a69372503f9b6f3a$exports = {};
+$a69372503f9b6f3a$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modrá\",\"brightness\":\"Jas\",\"green\":\"Zelená\",\"hue\":\"Odtieň\",\"lightness\":\"Svetlosť\",\"red\":\"Červená\",\"saturation\":\"Sýtosť\"}");
 
-      const [h, s, l, a] = ((_m$3 = m[1]) != null ? _m$3 : m[2]).split(',').map(n => Number(n.trim().replace('%', '')));
-      return new $db5f3c2f048bca5be854d051d3f2729$var$HSLColor($db5f3c2f048bca5be854d051d3f2729$var$mod(h, 360), clamp(s, 0, 100), clamp(l, 0, 100), clamp(a != null ? a : 1, 0, 1));
-    }
-  }
 
-  toString(format) {
-    switch (format) {
-      case 'hex':
-        return this.toRGB().toString('hex');
+var $820c47d01f6be0f0$exports = {};
+$820c47d01f6be0f0$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Modra\",\"brightness\":\"Svetlost\",\"green\":\"Zelena\",\"hue\":\"Barva\",\"lightness\":\"Lahkost\",\"red\":\"Rdeča\",\"saturation\":\"Nasičenost\"}");
 
-      case 'hexa':
-        return this.toRGB().toString('hexa');
 
-      case 'hsl':
-        return "hsl(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.lightness, 2) + "%)";
+var $1948f454f1b262d8$exports = {};
+$1948f454f1b262d8$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Plava\",\"brightness\":\"Osvetljenost\",\"green\":\"Zelena\",\"hue\":\"Nijansa\",\"lightness\":\"Osvetljenje\",\"red\":\"Crvena\",\"saturation\":\"Zasićenje\"}");
 
-      case 'css':
-      case 'hsla':
-        return "hsla(" + this.hue + ", " + toFixedNumber(this.saturation, 2) + "%, " + toFixedNumber(this.lightness, 2) + "%, " + this.alpha + ")";
 
-      default:
-        return this.toFormat(format).toString(format);
-    }
-  }
+var $af6617ce4e290100$exports = {};
+$af6617ce4e290100$exports = JSON.parse("{\"alpha\":\"Alfa\",\"blue\":\"Blått\",\"brightness\":\"Ljusstyrka\",\"green\":\"Grönt\",\"hue\":\"Nyans\",\"lightness\":\"Ljushet\",\"red\":\"Rött\",\"saturation\":\"Mättnad\"}");
 
-  toFormat(format) {
-    switch (format) {
-      case 'hsl':
-      case 'hsla':
-        return this;
 
-      case 'hsb':
-      case 'hsba':
-        return this.toHSB();
+var $e04fd2d342e58988$exports = {};
+$e04fd2d342e58988$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\"}");
 
-      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.
-   */
+var $b969554fc221bec5$exports = {};
+$b969554fc221bec5$exports = JSON.parse("{\"alpha\":\"Альфа\",\"blue\":\"Синій\",\"brightness\":\"Яскравість\",\"green\":\"Зелений\",\"hue\":\"Тон\",\"lightness\":\"Освітленість\",\"red\":\"Червоний\",\"saturation\":\"Насиченість\"}");
 
 
-  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 $db5f3c2f048bca5be854d051d3f2729$var$HSBColor(toFixedNumber(this.hue, 2), toFixedNumber(saturation * 100, 2), 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.
-   */
+var $7910c263a77ba3c7$exports = {};
+$7910c263a77ba3c7$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"蓝色\",\"brightness\":\"亮度\",\"green\":\"绿色\",\"hue\":\"色相\",\"lightness\":\"明亮度\",\"red\":\"红色\",\"saturation\":\"饱和度\"}");
 
 
-  toRGB() {
-    let hue = this.hue;
-    let saturation = this.saturation / 100;
-    let lightness = this.lightness / 100;
-    let a = saturation * Math.min(lightness, 1 - lightness);
+var $e2007de7934364b7$exports = {};
+$e2007de7934364b7$exports = JSON.parse("{\"alpha\":\"Alpha\",\"blue\":\"藍色\",\"brightness\":\"亮度\",\"green\":\"綠色\",\"hue\":\"色相\",\"lightness\":\"明亮\",\"red\":\"紅色\",\"saturation\":\"飽和度\"}");
 
-    let fn = function fn(n, k) {
-      if (k === void 0) {
-        k = (n + hue / 30) % 12;
-      }
 
-      return lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-    };
+$675273e4af08d62e$exports = {
+    "ar-AE": $077bd0bceac79457$exports,
+    "bg-BG": $cddd4812af0cd440$exports,
+    "cs-CZ": $183858b76275efe7$exports,
+    "da-DK": $020bfa8dadaf30b2$exports,
+    "de-DE": $9d6c5c82d9282c0f$exports,
+    "el-GR": $854ad75b322fe89a$exports,
+    "en-US": $be9ad9682b370ddc$exports,
+    "es-ES": $05a0b4f28c8ee761$exports,
+    "et-EE": $5d177f7c41df0d7c$exports,
+    "fi-FI": $c0c8e1b6dbe88b42$exports,
+    "fr-FR": $f78038f3c5ac85bf$exports,
+    "he-IL": $99f849eae7055e0d$exports,
+    "hr-HR": $d0b14a225bb73c77$exports,
+    "hu-HU": $b47e94169ab16ffb$exports,
+    "it-IT": $3ca86f7c5a542fc2$exports,
+    "ja-JP": $9c9adbefd088dfec$exports,
+    "ko-KR": $e0a855e991915bcf$exports,
+    "lt-LT": $b2bbcc4a6d0f4ff0$exports,
+    "lv-LV": $d1a2e38b31bf8b62$exports,
+    "nb-NO": $08e30a9af5d53702$exports,
+    "nl-NL": $659611dede656c7e$exports,
+    "pl-PL": $0f93c75b665df87b$exports,
+    "pt-BR": $c00ea759839bb843$exports,
+    "pt-PT": $821dfa0d9faae4f9$exports,
+    "ro-RO": $fdb474da024beb51$exports,
+    "ru-RU": $f51a8c7858d3993f$exports,
+    "sk-SK": $a69372503f9b6f3a$exports,
+    "sl-SI": $820c47d01f6be0f0$exports,
+    "sr-SP": $1948f454f1b262d8$exports,
+    "sv-SE": $af6617ce4e290100$exports,
+    "tr-TR": $e04fd2d342e58988$exports,
+    "uk-UA": $b969554fc221bec5$exports,
+    "zh-CN": $7910c263a77ba3c7$exports,
+    "zh-TW": $e2007de7934364b7$exports
+};
 
-    return new $db5f3c2f048bca5be854d051d3f2729$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
-  }
-
-  clone() {
-    return new $db5f3c2f048bca5be854d051d3f2729$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
-  }
-
-  getChannelRange(channel) {
-    switch (channel) {
-      case 'hue':
-        return {
-          minValue: 0,
-          maxValue: 360,
-          step: 1
-        };
-
-      case 'saturation':
-      case 'lightness':
-        return {
-          minValue: 0,
-          maxValue: 100,
-          step: 1
-        };
-
-      case 'alpha':
-        return {
-          minValue: 0,
-          maxValue: 1,
-          step: 0.01
-        };
-
-      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 NumberFormatter(locale, options).format(value);
-  }
 
-  getColorSpace() {
-    return 'hsl';
-  }
 
+const $19b55adb42b5e1b3$var$messages = new $6YREh$MessageDictionary((/*@__PURE__*/$parcel$interopDefault($675273e4af08d62e$exports)));
+function $19b55adb42b5e1b3$export$6e865ea70d7724f(value) {
+    let res = $19b55adb42b5e1b3$var$RGBColor.parse(value) || $19b55adb42b5e1b3$var$HSBColor.parse(value) || $19b55adb42b5e1b3$var$HSLColor.parse(value);
+    if (res) return res;
+    throw new Error('Invalid color value: ' + value);
 }
-
-function $dfa319d4be3239bcd232b84e0e071$var$normalizeColor(v) {
-  if (typeof v === 'string') {
-    return parseColor(v);
-  } else {
-    return v;
-  }
+class $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$var$messages.getStringForLocale(channel, locale);
+    }
 }
-/**
- * Provides state management for a color slider component.
- * Color sliders allow users to adjust an individual channel of a color value.
- */
-
-
-export function useColorSliderState(props) {
-  let {
-    channel,
-    value,
-    defaultValue,
-    onChange,
-    locale
-  } = props,
-      otherProps = _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose(props, ["channel", "value", "defaultValue", "onChange", "locale"]);
-
-  if (value == null && defaultValue == null) {
-    throw new Error('useColorSliderState requires a value or defaultValue');
-  }
-
-  let [color, setColor] = useControlledState(value && $dfa319d4be3239bcd232b84e0e071$var$normalizeColor(value), defaultValue && $dfa319d4be3239bcd232b84e0e071$var$normalizeColor(defaultValue), onChange);
-  let sliderState = useSliderState(_babelRuntimeHelpersEsmExtends({}, color.getChannelRange(channel), otherProps, {
-    // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
-    numberFormatter: null,
-    value: [color.getChannelValue(channel)],
-
-    onChange(_ref) {
-      let [v] = _ref;
-      setColor(color.withChannelValue(channel, v));
-    },
-
-    onChangeEnd(_ref2) {
-      let [v] = _ref2;
-
-      // onChange will have already been called with the right value, this is just to trigger onChangEnd
-      if (props.onChangeEnd) {
-        props.onChangeEnd(color.withChannelValue(channel, v));
-      }
+const $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$var$RGBColor extends $19b55adb42b5e1b3$var$Color {
+    constructor(red, green, blue, alpha){
+        super();
+        this.red = red;
+        this.green = green;
+        this.blue = blue;
+        this.alpha = alpha;
+    }
+    static parse(value) {
+        let m;
+        if (m = value.match($19b55adb42b5e1b3$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 $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$var$RGBColor(r, g, b, 1);
+            }
+        }
+        if (m = value.match($19b55adb42b5e1b3$var$RGB_REGEX)) {
+            const [r, g, b, a] = (m[1] ?? m[2]).split(',').map((n)=>Number(n.trim())
+            );
+            return new $19b55adb42b5e1b3$var$RGBColor($6YREh$clamp(r, 0, 255), $6YREh$clamp(g, 0, 255), $6YREh$clamp(b, 0, 255), $6YREh$clamp(a ?? 1, 0, 1));
+        }
     }
-
-  }));
-  return _babelRuntimeHelpersEsmExtends({}, sliderState, {
-    value: color,
-
-    setValue(value) {
-      setColor($dfa319d4be3239bcd232b84e0e071$var$normalizeColor(value));
-    },
-
-    getDisplayColor() {
-      switch (channel) {
-        case 'hue':
-          return parseColor("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);
+    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 $19b55adb42b5e1b3$var$HSBColor($6YREh$toFixedNumber(hue * 360, 2), $6YREh$toFixedNumber(saturation * 100, 2), $6YREh$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 < 0.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 $19b55adb42b5e1b3$var$HSLColor($6YREh$toFixedNumber(hue * 360, 2), $6YREh$toFixedNumber(saturation * 100, 2), $6YREh$toFixedNumber(lightness * 100, 2), this.alpha);
+    }
+    clone() {
+        return new $19b55adb42b5e1b3$var$RGBColor(this.red, this.green, this.blue, this.alpha);
+    }
+    getChannelRange(channel) {
+        switch(channel){
+            case 'red':
+            case 'green':
+            case 'blue':
+                return {
+                    minValue: 0,
+                    maxValue: 255,
+                    step: 1
+                };
+            case 'alpha':
+                return {
+                    minValue: 0,
+                    maxValue: 1,
+                    step: 0.01
+                };
+            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 $6YREh$NumberFormatter(locale, options).format(value);
+    }
+    getColorSpace() {
+        return 'rgb';
     }
-
-  });
 }
-
-function $a54bad0097d5f20f12ac194ac13764$var$normalizeColor(v) {
-  if (typeof v === 'string') {
-    return parseColor(v);
-  } else {
-    return v;
-  }
+// 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 $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$var$HSBColor extends $19b55adb42b5e1b3$var$Color {
+    constructor(hue, saturation, brightness, alpha){
+        super();
+        this.hue = hue;
+        this.saturation = saturation;
+        this.brightness = brightness;
+        this.alpha = alpha;
+    }
+    static parse(value) {
+        let m;
+        if (m = value.match($19b55adb42b5e1b3$var$HSB_REGEX)) {
+            const [h, s, b, a] = (m[1] ?? m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
+            );
+            return new $19b55adb42b5e1b3$var$HSBColor($19b55adb42b5e1b3$var$mod(h, 360), $6YREh$clamp(s, 0, 100), $6YREh$clamp(b, 0, 100), $6YREh$clamp(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}, ${$6YREh$toFixedNumber(this.saturation, 2)}%, ${$6YREh$toFixedNumber(this.brightness, 2)}%)`;
+            case 'hsba':
+                return `hsba(${this.hue}, ${$6YREh$toFixedNumber(this.saturation, 2)}%, ${$6YREh$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 $19b55adb42b5e1b3$var$HSLColor($6YREh$toFixedNumber(this.hue, 2), $6YREh$toFixedNumber(saturation * 100, 2), $6YREh$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 $19b55adb42b5e1b3$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
+    }
+    clone() {
+        return new $19b55adb42b5e1b3$var$HSBColor(this.hue, this.saturation, this.brightness, this.alpha);
+    }
+    getChannelRange(channel) {
+        switch(channel){
+            case 'hue':
+                return {
+                    minValue: 0,
+                    maxValue: 360,
+                    step: 1
+                };
+            case 'saturation':
+            case 'brightness':
+                return {
+                    minValue: 0,
+                    maxValue: 100,
+                    step: 1
+                };
+            case 'alpha':
+                return {
+                    minValue: 0,
+                    maxValue: 1,
+                    step: 0.01
+                };
+            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 $6YREh$NumberFormatter(locale, options).format(value);
+    }
+    getColorSpace() {
+        return 'hsb';
+    }
 }
-
-const $a54bad0097d5f20f12ac194ac13764$var$DEFAULT_COLOR = parseColor('hsl(0, 100%, 50%)');
-
-function $a54bad0097d5f20f12ac194ac13764$var$roundToStep(value, step) {
-  return Math.round(value / step) * step;
+// 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 $19b55adb42b5e1b3$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 $19b55adb42b5e1b3$var$mod(n, m) {
+    return (n % m + m) % m;
 }
-
-function $a54bad0097d5f20f12ac194ac13764$var$mod(n, m) {
-  return (n % m + m) % m;
+class $19b55adb42b5e1b3$var$HSLColor extends $19b55adb42b5e1b3$var$Color {
+    constructor(hue, saturation, lightness, alpha){
+        super();
+        this.hue = hue;
+        this.saturation = saturation;
+        this.lightness = lightness;
+        this.alpha = alpha;
+    }
+    static parse(value) {
+        let m;
+        if (m = value.match($19b55adb42b5e1b3$var$HSL_REGEX)) {
+            const [h, s, l, a] = (m[1] ?? m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
+            );
+            return new $19b55adb42b5e1b3$var$HSLColor($19b55adb42b5e1b3$var$mod(h, 360), $6YREh$clamp(s, 0, 100), $6YREh$clamp(l, 0, 100), $6YREh$clamp(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}, ${$6YREh$toFixedNumber(this.saturation, 2)}%, ${$6YREh$toFixedNumber(this.lightness, 2)}%)`;
+            case 'css':
+            case 'hsla':
+                return `hsla(${this.hue}, ${$6YREh$toFixedNumber(this.saturation, 2)}%, ${$6YREh$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 $19b55adb42b5e1b3$var$HSBColor($6YREh$toFixedNumber(this.hue, 2), $6YREh$toFixedNumber(saturation * 100, 2), $6YREh$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 $19b55adb42b5e1b3$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
+    }
+    clone() {
+        return new $19b55adb42b5e1b3$var$HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
+    }
+    getChannelRange(channel) {
+        switch(channel){
+            case 'hue':
+                return {
+                    minValue: 0,
+                    maxValue: 360,
+                    step: 1
+                };
+            case 'saturation':
+            case 'lightness':
+                return {
+                    minValue: 0,
+                    maxValue: 100,
+                    step: 1
+                };
+            case 'alpha':
+                return {
+                    minValue: 0,
+                    maxValue: 1,
+                    step: 0.01
+                };
+            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 $6YREh$NumberFormatter(locale, options).format(value);
+    }
+    getColorSpace() {
+        return 'hsl';
+    }
 }
 
-function $a54bad0097d5f20f12ac194ac13764$var$roundDown(v) {
-  let r = Math.floor(v);
 
-  if (r === v) {
-    return v - 1;
-  } else {
-    return r;
-  }
-}
+var $86a06515e79ac54d$exports = {};
 
-function $a54bad0097d5f20f12ac194ac13764$var$degToRad(deg) {
-  return deg * Math.PI / 180;
-}
+$parcel$export($86a06515e79ac54d$exports, "useColorSliderState", () => $86a06515e79ac54d$export$57bc203e1c9c6d44);
 
-function $a54bad0097d5f20f12ac194ac13764$var$radToDeg(rad) {
-  return rad * 180 / Math.PI;
-} // 0deg = 3 o'clock. increases clockwise
 
 
-function $a54bad0097d5f20f12ac194ac13764$var$angleToCartesian(angle, radius) {
-  let rad = $a54bad0097d5f20f12ac194ac13764$var$degToRad(360 - angle + 90);
-  let x = Math.sin(rad) * radius;
-  let y = Math.cos(rad) * radius;
-  return {
-    x,
-    y
-  };
+function $86a06515e79ac54d$var$normalizeColor(v) {
+    if (typeof v === 'string') return $19b55adb42b5e1b3$export$6e865ea70d7724f(v);
+    else return v;
 }
-
-function $a54bad0097d5f20f12ac194ac13764$var$cartesianToAngle(x, y, radius) {
-  let deg = $a54bad0097d5f20f12ac194ac13764$var$radToDeg(Math.atan2(y / radius, x / radius));
-  return (deg + 360) % 360;
+function $86a06515e79ac54d$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] = $6YREh$useControlledState(value1 && $86a06515e79ac54d$var$normalizeColor(value1), defaultValue && $86a06515e79ac54d$var$normalizeColor(defaultValue), onChange);
+    let sliderState = $6YREh$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 onChangEnd
+            if (props.onChangeEnd) props.onChangeEnd(color.withChannelValue(channel, v));
+        }
+    });
+    return {
+        ...sliderState,
+        value: color,
+        setValue (value) {
+            setColor($86a06515e79ac54d$var$normalizeColor(value));
+        },
+        getDisplayColor () {
+            switch(channel){
+                case 'hue':
+                    return $19b55adb42b5e1b3$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);
+        }
+    };
 }
-/**
- * Provides state management for a color wheel component.
- * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-
-
-export function useColorWheelState(props) {
-  let {
-    defaultValue,
-    onChange,
-    onChangeEnd,
-    step = 1
-  } = props;
-
-  if (!props.value && !defaultValue) {
-    defaultValue = $a54bad0097d5f20f12ac194ac13764$var$DEFAULT_COLOR;
-  }
-
-  let [value, setValue] = useControlledState($a54bad0097d5f20f12ac194ac13764$var$normalizeColor(props.value), $a54bad0097d5f20f12ac194ac13764$var$normalizeColor(defaultValue), onChange);
-  let valueRef = useRef(value);
-  valueRef.current = value;
-  let [isDragging, setDragging] = useState(false);
-  let isDraggingRef = 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 = $a54bad0097d5f20f12ac194ac13764$var$roundToStep($a54bad0097d5f20f12ac194ac13764$var$mod(v, 360), step);
-
-    if (hue !== v) {
-      let color = value.withChannelValue('hue', v);
-      valueRef.current = color;
-      setValue(color);
-    }
-  }
-
-  return {
-    value,
-
-    setValue(v) {
-      let color = $a54bad0097d5f20f12ac194ac13764$var$normalizeColor(v);
-      valueRef.current = color;
-      setValue(color);
-    },
-
-    hue,
-    setHue,
-
-    setHueFromPoint(x, y, radius) {
-      setHue($a54bad0097d5f20f12ac194ac13764$var$cartesianToAngle(x, y, radius));
-    },
-
-    getThumbPosition(radius) {
-      return $a54bad0097d5f20f12ac194ac13764$var$angleToCartesian(value.getChannelValue('hue'), radius);
-    },
-
-    increment(minStepSize) {
-      if (minStepSize === void 0) {
-        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);
-    },
-
-    decrement(minStepSize) {
-      if (minStepSize === void 0) {
-        minStepSize = 0;
-      }
-
-      let s = Math.max(minStepSize, step);
-
-      if (hue === 0) {
-        // We can't just subtract step because this might be the case:
-        // |(previous step) - 0| < step size
-        setHue($a54bad0097d5f20f12ac194ac13764$var$roundDown(360 / s) * s);
-      } else {
-        setHue(hue - s);
-      }
-    },
 
-    setDragging(isDragging) {
-      let wasDragging = isDraggingRef;
-      isDraggingRef = isDragging;
 
-      if (onChangeEnd && !isDragging && wasDragging) {
-        onChangeEnd(valueRef.current);
-      }
+var $b42abd16499dffa8$exports = {};
 
-      setDragging(isDragging);
-    },
+$parcel$export($b42abd16499dffa8$exports, "useColorWheelState", () => $b42abd16499dffa8$export$f4301076d9336137);
 
-    isDragging,
 
-    getDisplayColor() {
-      return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
-    }
 
-  };
+function $b42abd16499dffa8$var$normalizeColor(v) {
+    if (typeof v === 'string') return $19b55adb42b5e1b3$export$6e865ea70d7724f(v);
+    else return v;
 }
-
-function $a8b4ca293b41af7f07c8a5216dae5f3$export$useColor(value) {
-  return useMemo(() => {
-    if (typeof value === 'string') {
-      try {
-        return parseColor(value);
-      } catch (err) {
-        return undefined;
-      }
-    }
-
-    return value;
-  }, [value]);
+const $b42abd16499dffa8$var$DEFAULT_COLOR = $19b55adb42b5e1b3$export$6e865ea70d7724f('hsl(0, 100%, 50%)');
+function $b42abd16499dffa8$var$roundToStep(value, step) {
+    return Math.round(value / step) * step;
 }
-
-const $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR = parseColor('#000000');
-const $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR = parseColor('#FFFFFF');
-const $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR_INT = $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR.toHexInt();
-const $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT = $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR.toHexInt();
-/**
- * Provides state management for a color field component. Color fields allow
- * users to enter and adjust a hex color value.
- */
-
-export function useColorFieldState(props) {
-  let {
-    step = 1,
-    value,
-    defaultValue,
-    onChange
-  } = props;
-  let initialValue = $a8b4ca293b41af7f07c8a5216dae5f3$export$useColor(value);
-  let initialDefaultValue = $a8b4ca293b41af7f07c8a5216dae5f3$export$useColor(defaultValue);
-  let [colorValue, setColorValue] = useControlledState(initialValue, initialDefaultValue, onChange);
-  let [inputValue, setInputValue] = useState(() => (value || defaultValue) && colorValue ? colorValue.toString('hex') : '');
-
-  let safelySetColorValue = newColor => {
-    if (typeof newColor === 'function') {
-      setColorValue(prev => {
-        let resolved = newColor(prev);
-
-        if (!prev || !resolved) {
-          return resolved;
-        }
-
-        if (resolved.toHexInt() !== prev.toHexInt()) {
-          return resolved;
+function $b42abd16499dffa8$var$mod(n, m) {
+    return (n % m + m) % m;
+}
+function $b42abd16499dffa8$var$roundDown(v) {
+    let r = Math.floor(v);
+    if (r === v) return v - 1;
+    else return r;
+}
+function $b42abd16499dffa8$var$degToRad(deg) {
+    return deg * Math.PI / 180;
+}
+function $b42abd16499dffa8$var$radToDeg(rad) {
+    return rad * 180 / Math.PI;
+}
+// 0deg = 3 o'clock. increases clockwise
+function $b42abd16499dffa8$var$angleToCartesian(angle, radius) {
+    let rad = $b42abd16499dffa8$var$degToRad(360 - angle + 90);
+    let x = Math.sin(rad) * radius;
+    let y = Math.cos(rad) * radius;
+    return {
+        x: x,
+        y: y
+    };
+}
+function $b42abd16499dffa8$var$cartesianToAngle(x, y, radius) {
+    let deg = $b42abd16499dffa8$var$radToDeg(Math.atan2(y / radius, x / radius));
+    return (deg + 360) % 360;
+}
+function $b42abd16499dffa8$export$f4301076d9336137(props) {
+    let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd , step: step = 1  } = props;
+    if (!props.value && !defaultValue) defaultValue = $b42abd16499dffa8$var$DEFAULT_COLOR;
+    let [value, setValue] = $6YREh$useControlledState($b42abd16499dffa8$var$normalizeColor(props.value), $b42abd16499dffa8$var$normalizeColor(defaultValue), onChange);
+    let valueRef = $6YREh$useRef(value);
+    valueRef.current = value;
+    let [isDragging1, setDragging] = $6YREh$useState(false);
+    let isDraggingRef = $6YREh$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 = $b42abd16499dffa8$var$roundToStep($b42abd16499dffa8$var$mod(v, 360), step);
+        if (hue !== v) {
+            let color = value.withChannelValue('hue', v);
+            valueRef.current = color;
+            setValue(color);
         }
-
-        return prev;
-      });
-      return;
-    }
-
-    if (!colorValue || !newColor) {
-      setColorValue(newColor);
-      return;
-    }
-
-    if (newColor.toHexInt() !== colorValue.toHexInt()) {
-      setColorValue(newColor);
-      return;
-    }
-  };
-
-  useEffect(() => {
-    setInputValue(colorValue ? colorValue.toString('hex') : '');
-  }, [colorValue, setInputValue]);
-  let parsedValue = useMemo(() => {
-    let color;
-
-    try {
-      color = parseColor(inputValue.startsWith('#') ? inputValue : "#" + inputValue);
-    } catch (err) {
-      color = null;
     }
+    return {
+        value: value,
+        setValue (v) {
+            let color = $b42abd16499dffa8$var$normalizeColor(v);
+            valueRef.current = color;
+            setValue(color);
+        },
+        hue: hue,
+        setHue: setHue,
+        setHueFromPoint (x, y, radius) {
+            setHue($b42abd16499dffa8$var$cartesianToAngle(x, y, radius));
+        },
+        getThumbPosition (radius) {
+            return $b42abd16499dffa8$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);
+        },
+        decrement (minStepSize = 0) {
+            let s = Math.max(minStepSize, step);
+            if (hue === 0) // We can't just subtract step because this might be the case:
+            // |(previous step) - 0| < step size
+            setHue($b42abd16499dffa8$var$roundDown(360 / s) * s);
+            else setHue(hue - s);
+        },
+        setDragging (isDragging) {
+            let wasDragging = isDraggingRef;
+            isDraggingRef = isDragging;
+            if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
+            setDragging(isDragging);
+        },
+        isDragging: isDragging1,
+        getDisplayColor () {
+            return value.withChannelValue('saturation', 100).withChannelValue('lightness', 50);
+        }
+    };
+}
 
-    return color;
-  }, [parseColor, inputValue]);
-  let parsed = 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 = () => {
-    safelySetColorValue(prevColor => {
-      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$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 === prevColor) {
-        setInputValue(newValue.toString('hex'));
-      }
 
-      return newValue;
-    });
-  };
+var $d47b7df9567aae8f$exports = {};
 
-  let decrement = () => {
-    safelySetColorValue(prevColor => {
-      let newValue = $f1bad1ec575cba40fc263dc06b9eb3a9$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
+$parcel$export($d47b7df9567aae8f$exports, "useColorFieldState", () => $d47b7df9567aae8f$export$d52a01683abdfcd6);
 
-      if (newValue === prevColor) {
-        setInputValue(newValue.toString('hex'));
-      }
 
-      return newValue;
-    });
-  };
 
-  let incrementToMax = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR);
+function $0887d6d920adea87$export$5aadd9c0606af5c2(value) {
+    return $6YREh$useMemo(()=>{
+        if (typeof value === 'string') try {
+            return $19b55adb42b5e1b3$export$6e865ea70d7724f(value);
+        } catch (err) {
+            return undefined;
+        }
+        return value;
+    }, [
+        value
+    ]);
+}
 
-  let decrementToMin = () => safelySetColorValue($f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR);
 
-  let validate = value => {
-    var _value$match;
 
-    return value === '' || !!((_value$match = value.match(/^#?[0-9a-f]{0,6}$/i)) != null && _value$match[0]);
-  };
 
-  return {
-    validate,
-    colorValue,
-    inputValue,
-    setInputValue,
-    commit,
-    increment,
-    incrementToMax,
-    decrement,
-    decrementToMin
-  };
+const $d47b7df9567aae8f$var$MIN_COLOR = $19b55adb42b5e1b3$export$6e865ea70d7724f('#000000');
+const $d47b7df9567aae8f$var$MAX_COLOR = $19b55adb42b5e1b3$export$6e865ea70d7724f('#FFFFFF');
+const $d47b7df9567aae8f$var$MIN_COLOR_INT = $d47b7df9567aae8f$var$MIN_COLOR.toHexInt();
+const $d47b7df9567aae8f$var$MAX_COLOR_INT = $d47b7df9567aae8f$var$MAX_COLOR.toHexInt();
+function $d47b7df9567aae8f$export$d52a01683abdfcd6(props) {
+    let { step: step = 1 , value: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
+    let initialValue = $0887d6d920adea87$export$5aadd9c0606af5c2(value1);
+    let initialDefaultValue = $0887d6d920adea87$export$5aadd9c0606af5c2(defaultValue);
+    let [colorValue, setColorValue] = $6YREh$useControlledState(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = $6YREh$useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : ''
+    );
+    let safelySetColorValue = (newColor)=>{
+        if (!colorValue || !newColor) {
+            setColorValue(newColor);
+            return;
+        }
+        if (newColor.toHexInt() !== colorValue.toHexInt()) {
+            setColorValue(newColor);
+            return;
+        }
+    };
+    $6YREh$useEffect(()=>{
+        setInputValue(colorValue ? colorValue.toString('hex') : '');
+    }, [
+        colorValue,
+        setInputValue
+    ]);
+    let parsedValue = $6YREh$useMemo(()=>{
+        let color;
+        try {
+            color = $19b55adb42b5e1b3$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+        } catch (err) {
+            color = null;
+        }
+        return color;
+    }, [
+        $19b55adb42b5e1b3$export$6e865ea70d7724f,
+        inputValue
+    ]);
+    let parsed = $6YREh$useRef(null);
+    parsed.current = parsedValue;
+    let commit = ()=>{
+        // Set to empty state if input value is empty
+        if (!inputValue.length) {
+            safelySetColorValue(null);
+            setInputValue(value1 === 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 = $d47b7df9567aae8f$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 = $d47b7df9567aae8f$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($d47b7df9567aae8f$var$MAX_COLOR)
+    ;
+    let decrementToMin = ()=>safelySetColorValue($d47b7df9567aae8f$var$MIN_COLOR)
+    ;
+    let validate = (value)=>value === '' || !!value.match(/^#?[0-9a-f]{0,6}$/i)?.[0]
+    ;
+    return {
+        validate: validate,
+        colorValue: colorValue,
+        inputValue: inputValue,
+        setInputValue: setInputValue,
+        commit: commit,
+        increment: increment,
+        incrementToMax: incrementToMax,
+        decrement: decrement,
+        decrementToMin: decrementToMin
+    };
+}
+function $d47b7df9567aae8f$var$addColorValue(color, step) {
+    let newColor = color ? color : $d47b7df9567aae8f$var$MIN_COLOR;
+    let colorInt = newColor.toHexInt();
+    let clampInt = Math.min(Math.max(colorInt + step, $d47b7df9567aae8f$var$MIN_COLOR_INT), $d47b7df9567aae8f$var$MAX_COLOR_INT);
+    if (clampInt !== colorInt) {
+        let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;
+        newColor = $19b55adb42b5e1b3$export$6e865ea70d7724f(newColorString);
+    }
+    return newColor;
 }
 
-function $f1bad1ec575cba40fc263dc06b9eb3a9$var$addColorValue(color, step) {
-  let newColor = color ? color : $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR;
-  let colorInt = newColor.toHexInt();
-  let clampInt = Math.min(Math.max(colorInt + step, $f1bad1ec575cba40fc263dc06b9eb3a9$var$MIN_COLOR_INT), $f1bad1ec575cba40fc263dc06b9eb3a9$var$MAX_COLOR_INT);
 
-  if (clampInt !== colorInt) {
-    let newColorString = "#" + clampInt.toString(16).padStart(6, '0').toUpperCase();
-    newColor = parseColor(newColorString);
-  }
 
-  return newColor;
-}
+
+export {$19b55adb42b5e1b3$export$6e865ea70d7724f as parseColor, $86a06515e79ac54d$export$57bc203e1c9c6d44 as useColorSliderState, $b42abd16499dffa8$export$f4301076d9336137 as useColorWheelState, $d47b7df9567aae8f$export$d52a01683abdfcd6 as useColorFieldState};
 //# sourceMappingURL=module.js.map