@react-aria/color 3.0.0-beta.17 → 3.0.0-beta.18

package/dist/main.js

@@ -18,14 +18,32 @@ $parcel$export(module.exports, "useColorArea", () => $47925bd68062ac17$export$2f
 $parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$106b7a4e66508f66);
 $parcel$export(module.exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9064ff4e44b3729a);
 $parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$77e32ca575a28fdf);
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 var $4f97b428b4cbcd4e$exports = {};
 var $f141a15c3076a67b$exports = {};
 $f141a15c3076a67b$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `أداة انتقاء اللون`,
     "twoDimensionalSlider": `مُنزلق 2D`
 };
@@ -33,10 +51,8 @@ $f141a15c3076a67b$exports = {
 
 var $435ac2a9fdd2ae5e$exports = {};
 $435ac2a9fdd2ae5e$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Средство за избиране на цвят`,
     "twoDimensionalSlider": `2D плъзгач`
 };
@@ -44,10 +60,8 @@ $435ac2a9fdd2ae5e$exports = {
 
 var $6b29758b432284f5$exports = {};
 $6b29758b432284f5$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Výběr barvy`,
     "twoDimensionalSlider": `2D posuvník`
 };
@@ -55,10 +69,8 @@ $6b29758b432284f5$exports = {
 
 var $357597bcf4afd6fb$exports = {};
 $357597bcf4afd6fb$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Farvevælger`,
     "twoDimensionalSlider": `2D-skyder`
 };
@@ -66,10 +78,8 @@ $357597bcf4afd6fb$exports = {
 
 var $ddc6333960e2b591$exports = {};
 $ddc6333960e2b591$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Farbwähler`,
     "twoDimensionalSlider": `2D-Schieberegler`
 };
@@ -77,10 +87,8 @@ $ddc6333960e2b591$exports = {
 
 var $417ee93d3ca474c0$exports = {};
 $417ee93d3ca474c0$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Επιλογέας χρωμάτων`,
     "twoDimensionalSlider": `Ρυθμιστικό 2D`
 };
@@ -90,18 +98,15 @@ var $519561bc6dcff98b$exports = {};
 $519561bc6dcff98b$exports = {
     "colorPicker": `Color picker`,
     "twoDimensionalSlider": `2D slider`,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
 };
 
 
 var $7a34c3fcc03402b8$exports = {};
 $7a34c3fcc03402b8$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Selector de color`,
     "twoDimensionalSlider": `Regulador 2D`
 };
@@ -109,10 +114,8 @@ $7a34c3fcc03402b8$exports = {
 
 var $860f86d6eae22cba$exports = {};
 $860f86d6eae22cba$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Värvivalija`,
     "twoDimensionalSlider": `2D-liugur`
 };
@@ -120,10 +123,8 @@ $860f86d6eae22cba$exports = {
 
 var $8525d3c77b8a51b0$exports = {};
 $8525d3c77b8a51b0$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Värimuokkain`,
     "twoDimensionalSlider": `2D-liukusäädin`
 };
@@ -131,10 +132,8 @@ $8525d3c77b8a51b0$exports = {
 
 var $8240fe6825e900ec$exports = {};
 $8240fe6825e900ec$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name} : ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
     "colorPicker": `Sélecteur de couleurs`,
     "twoDimensionalSlider": `Curseur 2D`
 };
@@ -142,10 +141,8 @@ $8240fe6825e900ec$exports = {
 
 var $377849238307c673$exports = {};
 $377849238307c673$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `בוחר הצבעים`,
     "twoDimensionalSlider": `מחוון דו מימדי`
 };
@@ -153,10 +150,8 @@ $377849238307c673$exports = {
 
 var $5a6f44e0ec14b083$exports = {};
 $5a6f44e0ec14b083$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Odabir boje`,
     "twoDimensionalSlider": `2D klizač`
 };
@@ -164,10 +159,8 @@ $5a6f44e0ec14b083$exports = {
 
 var $82327d6e71e3e273$exports = {};
 $82327d6e71e3e273$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Színválasztó`,
     "twoDimensionalSlider": `2D-csúszka`
 };
@@ -175,10 +168,8 @@ $82327d6e71e3e273$exports = {
 
 var $b1e297275c248ab8$exports = {};
 $b1e297275c248ab8$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Selettore colore`,
     "twoDimensionalSlider": `Cursore 2D`
 };
@@ -186,10 +177,8 @@ $b1e297275c248ab8$exports = {
 
 var $b39c9f2638b4d2b9$exports = {};
 $b39c9f2638b4d2b9$exports = {
-    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name} : ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name} : ${args.value}`,
     "colorPicker": `カラーピッカー`,
     "twoDimensionalSlider": `2D スライダー`
 };
@@ -197,10 +186,8 @@ $b39c9f2638b4d2b9$exports = {
 
 var $2d2fbf4195848a62$exports = {};
 $2d2fbf4195848a62$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `색상 피커`,
     "twoDimensionalSlider": `2D 슬라이더`
 };
@@ -208,10 +195,8 @@ $2d2fbf4195848a62$exports = {
 
 var $ea88350d0828fa2c$exports = {};
 $ea88350d0828fa2c$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Spalvų parinkiklis`,
     "twoDimensionalSlider": `2D slankiklis`
 };
@@ -219,10 +204,8 @@ $ea88350d0828fa2c$exports = {
 
 var $0e0acd541630120a$exports = {};
 $0e0acd541630120a$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Krāsu atlasītājs`,
     "twoDimensionalSlider": `2D slīdnis`
 };
@@ -230,10 +213,8 @@ $0e0acd541630120a$exports = {
 
 var $952a458224052046$exports = {};
 $952a458224052046$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Fargevelger`,
     "twoDimensionalSlider": `2D-glidebryter`
 };
@@ -241,10 +222,8 @@ $952a458224052046$exports = {
 
 var $2d8e195bc5683483$exports = {};
 $2d8e195bc5683483$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Kleurkiezer`,
     "twoDimensionalSlider": `2D-schuifregelaar`
 };
@@ -252,10 +231,8 @@ $2d8e195bc5683483$exports = {
 
 var $750d83f83c5f38d4$exports = {};
 $750d83f83c5f38d4$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Próbnik kolorów`,
     "twoDimensionalSlider": `Suwak 2D`
 };
@@ -263,10 +240,8 @@ $750d83f83c5f38d4$exports = {
 
 var $656b2846f611067c$exports = {};
 $656b2846f611067c$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Seletor de cores`,
     "twoDimensionalSlider": `Controle deslizante 2D`
 };
@@ -274,10 +249,8 @@ $656b2846f611067c$exports = {
 
 var $58ce120874d069dd$exports = {};
 $58ce120874d069dd$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Seletor de cores`,
     "twoDimensionalSlider": `Controle deslizante 2D`
 };
@@ -285,10 +258,8 @@ $58ce120874d069dd$exports = {
 
 var $fd6c85b4eba18825$exports = {};
 $fd6c85b4eba18825$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Selector de culori`,
     "twoDimensionalSlider": `Glisor 2D`
 };
@@ -296,10 +267,8 @@ $fd6c85b4eba18825$exports = {
 
 var $8849a15ecc435984$exports = {};
 $8849a15ecc435984$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Палитра цветов`,
     "twoDimensionalSlider": `Ползунок 2D`
 };
@@ -307,10 +276,8 @@ $8849a15ecc435984$exports = {
 
 var $5192372f064be783$exports = {};
 $5192372f064be783$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Výber farieb`,
     "twoDimensionalSlider": `2D jazdec`
 };
@@ -318,10 +285,8 @@ $5192372f064be783$exports = {
 
 var $094525f9176df65d$exports = {};
 $094525f9176df65d$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Izbirnik barv`,
     "twoDimensionalSlider": `2D drsnik`
 };
@@ -329,10 +294,8 @@ $094525f9176df65d$exports = {
 
 var $9795aa59b4ad40ed$exports = {};
 $9795aa59b4ad40ed$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Birač boja`,
     "twoDimensionalSlider": `2D klizač`
 };
@@ -340,10 +303,8 @@ $9795aa59b4ad40ed$exports = {
 
 var $9ebaa0b485f13e4d$exports = {};
 $9ebaa0b485f13e4d$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Färgväljaren`,
     "twoDimensionalSlider": `2D-reglage`
 };
@@ -351,10 +312,8 @@ $9ebaa0b485f13e4d$exports = {
 
 var $ad58e2e4e0f2e750$exports = {};
 $ad58e2e4e0f2e750$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Renk Seçici`,
     "twoDimensionalSlider": `2D sürgü`
 };
@@ -362,10 +321,8 @@ $ad58e2e4e0f2e750$exports = {
 
 var $dafc19306f8b2dfc$exports = {};
 $dafc19306f8b2dfc$exports = {
-    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}, ${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}: ${args.value}`,
     "colorPicker": `Палітра кольорів`,
     "twoDimensionalSlider": `Повзунок 2D`
 };
@@ -373,10 +330,8 @@ $dafc19306f8b2dfc$exports = {
 
 var $d31a8b80af5acc16$exports = {};
 $d31a8b80af5acc16$exports = {
-    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}：${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}、${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}：${args.value}`,
     "colorPicker": `拾色器`,
     "twoDimensionalSlider": `2D 滑块`
 };
@@ -384,10 +339,8 @@ $d31a8b80af5acc16$exports = {
 
 var $7377d28aec5fa200$exports = {};
 $7377d28aec5fa200$exports = {
-    "colorInputLabel": (args)=>`${args.label}，${args.channelLabel}`
-    ,
-    "colorNameAndValue": (args)=>`${args.name}：${args.value}`
-    ,
+    "colorInputLabel": (args)=>`${args.label}，${args.channelLabel}`,
+    "colorNameAndValue": (args)=>`${args.name}：${args.value}`,
     "colorPicker": `檢色器`,
     "twoDimensionalSlider": `2D 滑桿`
 };
@@ -432,7 +385,17 @@ $4f97b428b4cbcd4e$exports = {
 
 
 
-
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+*/ 
 const $99936ad0bf67c8c4$var$generateRGB_R = (orientation, dir, zValue)=>{
     let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
     let result = {
@@ -441,7 +404,7 @@ const $99936ad0bf67c8c4$var$generateRGB_R = (orientation, dir, zValue)=>{
         },
         gradientStyles: {
             backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-            'WebkitMaskImage': maskImage,
+            "WebkitMaskImage": maskImage,
             maskImage: maskImage
         }
     };
@@ -455,7 +418,7 @@ const $99936ad0bf67c8c4$var$generateRGB_G = (orientation, dir, zValue)=>{
         },
         gradientStyles: {
             backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-            'WebkitMaskImage': maskImage,
+            "WebkitMaskImage": maskImage,
             maskImage: maskImage
         }
     };
@@ -469,7 +432,7 @@ const $99936ad0bf67c8c4$var$generateRGB_B = (orientation, dir, zValue)=>{
         },
         gradientStyles: {
             backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-            'WebkitMaskImage': maskImage,
+            "WebkitMaskImage": maskImage,
             maskImage: maskImage
         }
     };
@@ -477,164 +440,156 @@ const $99936ad0bf67c8c4$var$generateRGB_B = (orientation, dir, zValue)=>{
 };
 const $99936ad0bf67c8c4$var$generateHSL_H = (orientation, dir, zValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             background: [
                 `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
                 `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
                 `hsl(${zValue}, 100%, 50%)`
-            ].join(',')
+            ].join(",")
         }
     };
     return result;
 };
 const $99936ad0bf67c8c4$var$generateHSL_S = (orientation, dir, alphaValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             background: [
                 `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
                 `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-                'hsl(0, 0%, 50%)'
-            ].join(',')
+                "hsl(0, 0%, 50%)"
+            ].join(",")
         }
     };
     return result;
 };
 const $99936ad0bf67c8c4$var$generateHSL_L = (orientation, dir, zValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             backgroundImage: [
                 `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
                 `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
-            ].join(',')
+            ].join(",")
         }
     };
     return result;
 };
 const $99936ad0bf67c8c4$var$generateHSB_H = (orientation, dir, zValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             background: [
                 `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
                 `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
                 `hsl(${zValue}, 100%, 50%)`
-            ].join(',')
+            ].join(",")
         }
     };
     return result;
 };
 const $99936ad0bf67c8c4$var$generateHSB_S = (orientation, dir, alphaValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             background: [
                 `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
                 `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
                 `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
-            ].join(',')
+            ].join(",")
         }
     };
     return result;
 };
 const $99936ad0bf67c8c4$var$generateHSB_B = (orientation, dir, alphaValue)=>{
     let result = {
-        colorAreaStyles: {
-        },
+        colorAreaStyles: {},
         gradientStyles: {
             background: [
                 `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
                 `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-                '#000'
-            ].join(',')
+                "#000"
+            ].join(",")
         }
     };
     return result;
 };
 function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled  }) {
-    let returnVal = $kZqDi$react.useMemo(()=>{
+    let returnVal = (0, $kZqDi$react.useMemo)(()=>{
         let orientation = [
-            'top',
-            direction === 'rtl' ? 'left' : 'right'
+            "top",
+            direction === "rtl" ? "left" : "right"
         ];
         let dir = false;
         let background = {
-            colorAreaStyles: {
-            },
-            gradientStyles: {
-            }
+            colorAreaStyles: {},
+            gradientStyles: {}
         };
         let zValue = state.value.getChannelValue(zChannel);
         let { minValue: zMin , maxValue: zMax  } = state.value.getChannelRange(zChannel);
         let alphaValue = (zValue - zMin) / (zMax - zMin);
-        let isHSL = state.value.getColorSpace() === 'hsl';
+        let isHSL = state.value.getColorSpace() === "hsl";
         if (!isDisabled) switch(zChannel){
-            case 'red':
-                dir = xChannel === 'green';
+            case "red":
+                dir = xChannel === "green";
                 background = $99936ad0bf67c8c4$var$generateRGB_R(orientation, dir, zValue);
                 break;
-            case 'green':
-                dir = xChannel === 'red';
+            case "green":
+                dir = xChannel === "red";
                 background = $99936ad0bf67c8c4$var$generateRGB_G(orientation, dir, zValue);
                 break;
-            case 'blue':
-                dir = xChannel === 'red';
+            case "blue":
+                dir = xChannel === "red";
                 background = $99936ad0bf67c8c4$var$generateRGB_B(orientation, dir, zValue);
                 break;
-            case 'hue':
-                dir = xChannel !== 'saturation';
+            case "hue":
+                dir = xChannel !== "saturation";
                 if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_H(orientation, dir, zValue);
                 else background = $99936ad0bf67c8c4$var$generateHSB_H(orientation, dir, zValue);
                 break;
-            case 'saturation':
-                dir = xChannel === 'hue';
+            case "saturation":
+                dir = xChannel === "hue";
                 if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_S(orientation, dir, alphaValue);
                 else background = $99936ad0bf67c8c4$var$generateHSB_S(orientation, dir, alphaValue);
                 break;
-            case 'brightness':
-                dir = xChannel === 'hue';
+            case "brightness":
+                dir = xChannel === "hue";
                 background = $99936ad0bf67c8c4$var$generateHSB_B(orientation, dir, alphaValue);
                 break;
-            case 'lightness':
-                dir = xChannel === 'hue';
+            case "lightness":
+                dir = xChannel === "hue";
                 background = $99936ad0bf67c8c4$var$generateHSL_L(orientation, dir, zValue);
                 break;
         }
         let { x: x , y: y  } = state.getThumbPosition();
-        if (direction === 'rtl') x = 1 - x;
+        if (direction === "rtl") x = 1 - x;
         let forcedColorAdjustNoneStyle = {
-            forcedColorAdjust: 'none'
+            forcedColorAdjust: "none"
         };
         return {
             colorAreaStyleProps: {
                 style: {
-                    position: 'relative',
-                    touchAction: 'none',
+                    position: "relative",
+                    touchAction: "none",
                     ...forcedColorAdjustNoneStyle,
                     ...background.colorAreaStyles
                 }
             },
             gradientStyleProps: {
                 style: {
-                    touchAction: 'none',
+                    touchAction: "none",
                     ...forcedColorAdjustNoneStyle,
                     ...background.gradientStyles
                 }
             },
             thumbStyleProps: {
                 style: {
-                    position: 'absolute',
+                    position: "absolute",
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
-                    transform: 'translate(0%, 0%)',
-                    touchAction: 'none',
+                    transform: "translate(0%, 0%)",
+                    touchAction: "none",
                     ...forcedColorAdjustNoneStyle
                 }
             }
@@ -654,23 +609,23 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
 
 
 function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , 'aria-label': ariaLabel  } = props;
-    let stringFormatter = $kZqDi$reactariai18n.useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports)));
-    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $kZqDi$reactariautils.useGlobalListeners();
-    let { direction: direction , locale: locale  } = $kZqDi$reactariai18n.useLocale();
-    let focusedInputRef = $kZqDi$react.useRef(null);
-    let focusInput = $kZqDi$react.useCallback((inputRef = inputXRef)=>{
-        if (inputRef.current) $kZqDi$reactariautils.focusWithoutScrolling(inputRef.current);
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel  } = props;
+    let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports))));
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = (0, $kZqDi$reactariautils.useGlobalListeners)();
+    let { direction: direction , locale: locale  } = (0, $kZqDi$reactariai18n.useLocale)();
+    let focusedInputRef = (0, $kZqDi$react.useRef)(null);
+    let focusInput = (0, $kZqDi$react.useCallback)((inputRef = inputXRef)=>{
+        if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
     }, [
         inputXRef
     ]);
-    let stateRef = $kZqDi$react.useRef(null);
+    let stateRef = (0, $kZqDi$react.useRef)(null);
     stateRef.current = state;
     let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel  } = stateRef.current.channels;
-    let xChannelStep1 = stateRef.current.xChannelStep;
-    let yChannelStep1 = stateRef.current.yChannelStep;
-    let currentPosition = $kZqDi$react.useRef(null);
-    let { keyboardProps: keyboardProps  } = $kZqDi$reactariainteractions.useKeyboard({
+    let xChannelStep = stateRef.current.xChannelStep;
+    let yChannelStep = stateRef.current.yChannelStep;
+    let currentPosition = (0, $kZqDi$react.useRef)(null);
+    let { keyboardProps: keyboardProps  } = (0, $kZqDi$reactariainteractions.useKeyboard)({
         onKeyDown (e) {
             // these are the cases that useMove doesn't handle
             if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
@@ -683,20 +638,20 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             stateRef.current.setDragging(true);
             valueChangedViaKeyboard.current = true;
             switch(e.key){
-                case 'PageUp':
+                case "PageUp":
                     stateRef.current.incrementY(stateRef.current.yChannelPageStep);
                     focusedInputRef.current = inputYRef.current;
                     break;
-                case 'PageDown':
+                case "PageDown":
                     stateRef.current.decrementY(stateRef.current.yChannelPageStep);
                     focusedInputRef.current = inputYRef.current;
                     break;
-                case 'Home':
-                    direction === 'rtl' ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
+                case "Home":
+                    direction === "rtl" ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
                     focusedInputRef.current = inputXRef.current;
                     break;
-                case 'End':
-                    direction === 'rtl' ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
+                case "End":
+                    direction === "rtl" ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
                     focusedInputRef.current = inputXRef.current;
                     break;
             }
@@ -714,18 +669,18 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             if (currentPosition.current == null) currentPosition.current = getThumbPosition();
             let { width: width , height: height  } = containerRef.current.getBoundingClientRect();
             let valueChanged = deltaX !== 0 || deltaY !== 0;
-            if (pointerType === 'keyboard') {
+            if (pointerType === "keyboard") {
                 let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
                 let deltaYValue = shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
-                if (deltaX > 0 && direction === 'ltr' || deltaX < 0 && direction === 'rtl') incrementX(deltaXValue);
-                else if (deltaX < 0 && direction === 'ltr' || deltaX > 0 && direction === 'rtl') decrementX(deltaXValue);
+                if (deltaX > 0 && direction === "ltr" || deltaX < 0 && direction === "rtl") incrementX(deltaXValue);
+                else if (deltaX < 0 && direction === "ltr" || deltaX > 0 && direction === "rtl") decrementX(deltaXValue);
                 else if (deltaY > 0) decrementY(deltaYValue);
                 else if (deltaY < 0) incrementY(deltaYValue);
                 valueChangedViaKeyboard.current = valueChanged;
                 // set the focused input based on which axis has the greater delta
                 focusedInputRef.current = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
             } else {
-                currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width;
+                currentPosition.current.x += (direction === "rtl" ? -1 : 1) * deltaX / width;
                 currentPosition.current.y += deltaY / height;
                 setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
             }
@@ -736,9 +691,9 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
         }
     };
-    let { moveProps: movePropsThumb  } = $kZqDi$reactariainteractions.useMove(moveHandler);
-    let valueChangedViaKeyboard = $kZqDi$react.useRef(false);
-    let { focusWithinProps: focusWithinProps  } = $kZqDi$reactariainteractions.useFocusWithin({
+    let { moveProps: movePropsThumb  } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
+    let valueChangedViaKeyboard = (0, $kZqDi$react.useRef)(false);
+    let { focusWithinProps: focusWithinProps  } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
         onFocusWithinChange: (focusWithin)=>{
             if (!focusWithin) {
                 valueChangedViaKeyboard.current = false;
@@ -746,9 +701,9 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             }
         }
     });
-    let currentPointer = $kZqDi$react.useRef(undefined);
-    let isOnColorArea = $kZqDi$react.useRef(false);
-    let { moveProps: movePropsContainer  } = $kZqDi$reactariainteractions.useMove({
+    let currentPointer = (0, $kZqDi$react.useRef)(undefined);
+    let isOnColorArea = (0, $kZqDi$react.useRef)(false);
+    let { moveProps: movePropsContainer  } = (0, $kZqDi$reactariainteractions.useMove)({
         onMoveStart () {
             if (isOnColorArea.current) moveHandler.onMoveStart();
         },
@@ -765,27 +720,27 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             valueChangedViaKeyboard.current = false;
             focusInput();
             state.setDragging(true);
-            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
+            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
             else {
-                addGlobalListener(window, 'mouseup', onThumbUp, false);
-                addGlobalListener(window, 'touchend', onThumbUp, false);
+                addGlobalListener(window, "mouseup", onThumbUp, false);
+                addGlobalListener(window, "touchend", onThumbUp, false);
             }
         }
     };
     let onThumbUp = (e)=>{
-        var ref;
-        var _pointerId;
-        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        var _e_changedTouches;
+        var _e_pointerId;
+        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (id === currentPointer.current) {
             valueChangedViaKeyboard.current = false;
             focusInput();
             state.setDragging(false);
             currentPointer.current = undefined;
             isOnColorArea.current = false;
-            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
+            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
             else {
-                removeGlobalListener(window, 'mouseup', onThumbUp, false);
-                removeGlobalListener(window, 'touchend', onThumbUp, false);
+                removeGlobalListener(window, "mouseup", onThumbUp, false);
+                removeGlobalListener(window, "touchend", onThumbUp, false);
             }
         }
     };
@@ -794,7 +749,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         let { width: width , height: height  } = rect;
         let x = (clientX - rect.x) / width;
         let y = (clientY - rect.y) / height;
-        if (direction === 'rtl') x = 1 - x;
+        if (direction === "rtl") x = 1 - x;
         if (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
             isOnColorArea.current = true;
             valueChangedViaKeyboard.current = false;
@@ -802,35 +757,34 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             state.setColorFromPoint(x, y);
             focusInput();
             state.setDragging(true);
-            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onColorAreaUp, false);
+            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onColorAreaUp, false);
             else {
-                addGlobalListener(window, 'mouseup', onColorAreaUp, false);
-                addGlobalListener(window, 'touchend', onColorAreaUp, false);
+                addGlobalListener(window, "mouseup", onColorAreaUp, false);
+                addGlobalListener(window, "touchend", onColorAreaUp, false);
             }
         }
     };
     let onColorAreaUp = (e)=>{
-        var ref;
-        var _pointerId;
-        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        var _e_changedTouches;
+        var _e_pointerId;
+        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (isOnColorArea.current && id === currentPointer.current) {
             isOnColorArea.current = false;
             valueChangedViaKeyboard.current = false;
             currentPointer.current = undefined;
             state.setDragging(false);
             focusInput();
-            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onColorAreaUp, false);
+            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onColorAreaUp, false);
             else {
-                removeGlobalListener(window, 'mouseup', onColorAreaUp, false);
-                removeGlobalListener(window, 'touchend', onColorAreaUp, false);
+                removeGlobalListener(window, "mouseup", onColorAreaUp, false);
+                removeGlobalListener(window, "touchend", onColorAreaUp, false);
             }
         }
     };
-    let colorAreaInteractions = isDisabled ? {
-    } : $kZqDi$reactariautils.mergeProps({
-        ...typeof PointerEvent !== 'undefined' ? {
+    let colorAreaInteractions = isDisabled ? {} : (0, $kZqDi$reactariautils.mergeProps)({
+        ...typeof PointerEvent !== "undefined" ? {
             onPointerDown: (e)=>{
-                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
                 onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
             }
         } : {
@@ -843,11 +797,10 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             }
         }
     }, movePropsContainer);
-    let thumbInteractions = isDisabled ? {
-    } : $kZqDi$reactariautils.mergeProps({
-        ...typeof PointerEvent !== 'undefined' ? {
+    let thumbInteractions = isDisabled ? {} : (0, $kZqDi$reactariautils.mergeProps)({
+        ...typeof PointerEvent !== "undefined" ? {
             onPointerDown: (e)=>{
-                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
                 onThumbDown(e.pointerId);
             }
         } : {
@@ -860,61 +813,61 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             }
         }
     }, focusWithinProps, keyboardProps, movePropsThumb);
-    let { focusProps: xInputFocusProps  } = $kZqDi$reactariainteractions.useFocus({
+    let { focusProps: xInputFocusProps  } = (0, $kZqDi$reactariainteractions.useFocus)({
         onFocus: ()=>{
             focusedInputRef.current = inputXRef.current;
         }
     });
-    let { focusProps: yInputFocusProps  } = $kZqDi$reactariainteractions.useFocus({
+    let { focusProps: yInputFocusProps  } = (0, $kZqDi$reactariainteractions.useFocus)({
         onFocus: ()=>{
             focusedInputRef.current = inputYRef.current;
         }
     });
-    let isMobile = $kZqDi$reactariautils.isIOS() || $kZqDi$reactariautils.isAndroid();
+    let isMobile = (0, $kZqDi$reactariautils.isIOS)() || (0, $kZqDi$reactariautils.isAndroid)();
     function getAriaValueTextForChannel(channel) {
-        return valueChangedViaKeyboard.current ? stringFormatter.format('colorNameAndValue', {
+        return valueChangedViaKeyboard.current ? stringFormatter.format("colorNameAndValue", {
             name: state.value.getChannelName(channel, locale),
             value: state.value.formatChannelValue(channel, locale)
         }) : [
-            stringFormatter.format('colorNameAndValue', {
+            stringFormatter.format("colorNameAndValue", {
                 name: state.value.getChannelName(channel, locale),
                 value: state.value.formatChannelValue(channel, locale)
             }),
-            stringFormatter.format('colorNameAndValue', {
+            stringFormatter.format("colorNameAndValue", {
                 name: state.value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
                 value: state.value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
             })
-        ].join(', ');
+        ].join(", ");
     }
-    let colorPickerLabel = stringFormatter.format('colorPicker');
-    let xInputLabellingProps = $kZqDi$reactariautils.useLabels({
+    let colorPickerLabel = stringFormatter.format("colorPicker");
+    let xInputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
         ...props,
-        'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {
+        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
             label: ariaLabel,
             channelLabel: colorPickerLabel
         }) : colorPickerLabel
     });
-    let yInputLabellingProps = $kZqDi$reactariautils.useLabels({
+    let yInputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
         ...props,
-        'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {
+        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
             label: ariaLabel,
             channelLabel: colorPickerLabel
         }) : colorPickerLabel
     });
-    let colorAreaLabellingProps = $kZqDi$reactariautils.useLabels({
+    let colorAreaLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
         ...props,
-        'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
+        "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
     }, isMobile ? colorPickerLabel : undefined);
-    let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');
-    let { visuallyHiddenProps: visuallyHiddenProps  } = $kZqDi$reactariavisuallyhidden.useVisuallyHidden({
+    let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
+    let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $kZqDi$reactariavisuallyhidden.useVisuallyHidden)({
         style: {
-            opacity: '0.0001',
-            width: '100%',
-            height: '100%',
-            pointerEvents: 'none'
+            opacity: "0.0001",
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
         }
     });
-    let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps  } = $99936ad0bf67c8c4$export$dd62420467d245ca({
+    let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps  } = (0, $99936ad0bf67c8c4$export$dd62420467d245ca)({
         direction: direction,
         state: state,
         xChannel: xChannel,
@@ -926,27 +879,27 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             ...colorAreaLabellingProps,
             ...colorAreaInteractions,
             ...colorAreaStyleProps,
-            role: 'group'
+            role: "group"
         },
         gradientProps: {
             ...gradientStyleProps,
-            role: 'presentation'
+            role: "presentation"
         },
         thumbProps: {
             ...thumbInteractions,
             ...thumbStyleProps,
-            role: 'presentation'
+            role: "presentation"
         },
         xInputProps: {
             ...xInputLabellingProps,
             ...visuallyHiddenProps,
             ...xInputFocusProps,
-            type: 'range',
+            type: "range",
             min: state.value.getChannelRange(xChannel).minValue,
             max: state.value.getChannelRange(xChannel).maxValue,
-            step: xChannelStep1,
-            'aria-roledescription': ariaRoleDescription,
-            'aria-valuetext': getAriaValueTextForChannel(xChannel),
+            step: xChannelStep,
+            "aria-roledescription": ariaRoleDescription,
+            "aria-valuetext": getAriaValueTextForChannel(xChannel),
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             tabIndex: isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current ? undefined : -1,
@@ -954,7 +907,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
         add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ 'aria-hidden': isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : 'true',
+      */ "aria-hidden": isMobile || !focusedInputRef.current || focusedInputRef.current === inputXRef.current || valueChangedViaKeyboard.current ? undefined : "true",
             onChange: (e)=>{
                 state.setXValue(parseFloat(e.target.value));
             }
@@ -963,13 +916,13 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
             ...yInputLabellingProps,
             ...visuallyHiddenProps,
             ...yInputFocusProps,
-            type: 'range',
+            type: "range",
             min: state.value.getChannelRange(yChannel).minValue,
             max: state.value.getChannelRange(yChannel).maxValue,
-            step: yChannelStep1,
-            'aria-roledescription': ariaRoleDescription,
-            'aria-valuetext': getAriaValueTextForChannel(yChannel),
-            'aria-orientation': 'vertical',
+            step: yChannelStep,
+            "aria-roledescription": ariaRoleDescription,
+            "aria-valuetext": getAriaValueTextForChannel(yChannel),
+            "aria-orientation": "vertical",
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
             tabIndex: isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current ? undefined : -1,
@@ -977,7 +930,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
         So that only a single "2d slider" control shows up when listing form elements for screen readers,
         add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
         but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
-      */ 'aria-hidden': isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : 'true',
+      */ "aria-hidden": isMobile || focusedInputRef.current && focusedInputRef.current === inputYRef.current || valueChangedViaKeyboard.current ? undefined : "true",
             onChange: (e)=>{
                 state.setYValue(parseFloat(e.target.value));
             }
@@ -986,20 +939,30 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
 }
 
 
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , 'aria-label': ariaLabel  } = props;
-    let { locale: locale , direction: direction  } = $kZqDi$reactariai18n.useLocale();
+    let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel  } = props;
+    let { locale: locale , direction: direction  } = (0, $kZqDi$reactariai18n.useLocale)();
     // Provide a default aria-label if there is no other label provided.
-    if (!props.label && !ariaLabel && !props['aria-labelledby']) ariaLabel = state.value.getChannelName(channel, locale);
+    if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
     // @ts-ignore - ignore unused incompatible props
-    let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps  } = $kZqDi$reactariaslider.useSlider({
+    let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps  } = (0, $kZqDi$reactariaslider.useSlider)({
         ...props,
-        'aria-label': ariaLabel
+        "aria-label": ariaLabel
     }, state, trackRef);
-    let { inputProps: inputProps , thumbProps: thumbProps  } = $kZqDi$reactariaslider.useSliderThumb({
+    let { inputProps: inputProps , thumbProps: thumbProps  } = (0, $kZqDi$reactariaslider.useSliderThumb)({
         index: 0,
         orientation: orientation,
         isDisabled: props.isDisabled,
@@ -1009,44 +972,44 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
     let generateBackground = ()=>{
         let value = state.getDisplayColor();
         let to;
-        if (orientation === 'vertical') to = 'top';
-        else if (direction === 'ltr') to = 'right';
-        else to = 'left';
+        if (orientation === "vertical") to = "top";
+        else if (direction === "ltr") to = "right";
+        else to = "left";
         switch(channel){
-            case 'hue':
+            case "hue":
                 return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-            case 'lightness':
+            case "lightness":
                 {
                     // We have to add an extra color stop in the middle so that the hue shows up at all.
                     // Otherwise it will always just be black to white.
                     let min = state.getThumbMinValue(0);
                     let max = state.getThumbMaxValue(0);
-                    let start = value.withChannelValue(channel, min).toString('css');
-                    let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
-                    let end = value.withChannelValue(channel, max).toString('css');
+                    let start = value.withChannelValue(channel, min).toString("css");
+                    let middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+                    let end = value.withChannelValue(channel, max).toString("css");
                     return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
                 }
-            case 'saturation':
-            case 'brightness':
-            case 'red':
-            case 'green':
-            case 'blue':
-            case 'alpha':
+            case "saturation":
+            case "brightness":
+            case "red":
+            case "green":
+            case "blue":
+            case "alpha":
                 {
-                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
-                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
-                    return `linear-gradient(to ${to}, ${start}, ${end})`;
+                    let start1 = value.withChannelValue(channel, state.getThumbMinValue(0)).toString("css");
+                    let end1 = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString("css");
+                    return `linear-gradient(to ${to}, ${start1}, ${end1})`;
                 }
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
     };
     let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: 'none'
+        forcedColorAdjust: "none"
     };
     return {
         trackProps: {
-            ...$kZqDi$reactariautils.mergeProps(groupProps, trackProps),
+            ...(0, $kZqDi$reactariautils.mergeProps)(groupProps, trackProps),
             style: {
                 ...trackProps.style,
                 ...forcedColorAdjustNoneStyle,
@@ -1067,23 +1030,33 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
 }
 
 
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 
 function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , 'aria-label': ariaLabel  } = props;
-    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $kZqDi$reactariautils.useGlobalListeners();
+    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel  } = props;
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = (0, $kZqDi$reactariautils.useGlobalListeners)();
     let thumbRadius = (innerRadius + outerRadius) / 2;
-    let focusInput = $kZqDi$react.useCallback(()=>{
-        if (inputRef.current) $kZqDi$reactariautils.focusWithoutScrolling(inputRef.current);
+    let focusInput = (0, $kZqDi$react.useCallback)(()=>{
+        if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
     }, [
         inputRef
     ]);
-    let stateRef = $kZqDi$react.useRef(null);
+    let stateRef = (0, $kZqDi$react.useRef)(null);
     stateRef.current = state;
-    let currentPosition = $kZqDi$react.useRef(null);
-    let { keyboardProps: keyboardProps  } = $kZqDi$reactariainteractions.useKeyboard({
+    let currentPosition = (0, $kZqDi$react.useRef)(null);
+    let { keyboardProps: keyboardProps  } = (0, $kZqDi$reactariainteractions.useKeyboard)({
         onKeyDown (e) {
             // these are the cases that useMove doesn't handle
             if (!/^(PageUp|PageDown)$/.test(e.key)) {
@@ -1095,11 +1068,11 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             // remember to set this and unset it so that onChangeEnd is fired
             stateRef.current.setDragging(true);
             switch(e.key){
-                case 'PageUp':
+                case "PageUp":
                     e.preventDefault();
                     state.increment(stateRef.current.pageStep);
                     break;
-                case 'PageDown':
+                case "PageDown":
                     e.preventDefault();
                     state.decrement(stateRef.current.pageStep);
                     break;
@@ -1116,7 +1089,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
             currentPosition.current.x += deltaX;
             currentPosition.current.y += deltaY;
-            if (pointerType === 'keyboard') {
+            if (pointerType === "keyboard") {
                 if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
                 else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
             } else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
@@ -1127,10 +1100,10 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             focusInput();
         }
     };
-    let { moveProps: movePropsThumb  } = $kZqDi$reactariainteractions.useMove(moveHandler);
-    let currentPointer = $kZqDi$react.useRef(undefined);
-    let isOnTrack = $kZqDi$react.useRef(false);
-    let { moveProps: movePropsContainer  } = $kZqDi$reactariainteractions.useMove({
+    let { moveProps: movePropsThumb  } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
+    let currentPointer = (0, $kZqDi$react.useRef)(undefined);
+    let isOnTrack = (0, $kZqDi$react.useRef)(false);
+    let { moveProps: movePropsContainer  } = (0, $kZqDi$reactariainteractions.useMove)({
         onMoveStart () {
             if (isOnTrack.current) moveHandler.onMoveStart();
         },
@@ -1146,26 +1119,26 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             currentPointer.current = id;
             focusInput();
             state.setDragging(true);
-            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
+            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onThumbUp, false);
             else {
-                addGlobalListener(window, 'mouseup', onThumbUp, false);
-                addGlobalListener(window, 'touchend', onThumbUp, false);
+                addGlobalListener(window, "mouseup", onThumbUp, false);
+                addGlobalListener(window, "touchend", onThumbUp, false);
             }
         }
     };
     let onThumbUp = (e)=>{
-        var ref;
-        var _pointerId;
-        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        var _e_changedTouches;
+        var _e_pointerId;
+        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (id === currentPointer.current) {
             focusInput();
             state.setDragging(false);
             currentPointer.current = undefined;
             isOnTrack.current = false;
-            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
+            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onThumbUp, false);
             else {
-                removeGlobalListener(window, 'mouseup', onThumbUp, false);
-                removeGlobalListener(window, 'touchend', onThumbUp, false);
+                removeGlobalListener(window, "mouseup", onThumbUp, false);
+                removeGlobalListener(window, "touchend", onThumbUp, false);
             }
         }
     };
@@ -1180,34 +1153,33 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             stateRef.current.setHueFromPoint(x, y, radius);
             focusInput();
             state.setDragging(true);
-            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onTrackUp, false);
+            if (typeof PointerEvent !== "undefined") addGlobalListener(window, "pointerup", onTrackUp, false);
             else {
-                addGlobalListener(window, 'mouseup', onTrackUp, false);
-                addGlobalListener(window, 'touchend', onTrackUp, false);
+                addGlobalListener(window, "mouseup", onTrackUp, false);
+                addGlobalListener(window, "touchend", onTrackUp, false);
             }
         }
     };
     let onTrackUp = (e)=>{
-        var ref;
-        var _pointerId;
-        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        var _e_changedTouches;
+        var _e_pointerId;
+        let id = (_e_pointerId = e.pointerId) !== null && _e_pointerId !== void 0 ? _e_pointerId : (_e_changedTouches = e.changedTouches) === null || _e_changedTouches === void 0 ? void 0 : _e_changedTouches[0].identifier;
         if (isOnTrack.current && id === currentPointer.current) {
             isOnTrack.current = false;
             currentPointer.current = undefined;
             state.setDragging(false);
             focusInput();
-            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onTrackUp, false);
+            if (typeof PointerEvent !== "undefined") removeGlobalListener(window, "pointerup", onTrackUp, false);
             else {
-                removeGlobalListener(window, 'mouseup', onTrackUp, false);
-                removeGlobalListener(window, 'touchend', onTrackUp, false);
+                removeGlobalListener(window, "mouseup", onTrackUp, false);
+                removeGlobalListener(window, "touchend", onTrackUp, false);
             }
         }
     };
-    let trackInteractions = isDisabled ? {
-    } : $kZqDi$reactariautils.mergeProps({
-        ...typeof PointerEvent !== 'undefined' ? {
+    let trackInteractions = isDisabled ? {} : (0, $kZqDi$reactariautils.mergeProps)({
+        ...typeof PointerEvent !== "undefined" ? {
             onPointerDown: (e)=>{
-                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
                 onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
             }
         } : {
@@ -1220,38 +1192,37 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
             }
         }
     }, movePropsContainer);
-    let thumbInteractions = isDisabled ? {
-    } : $kZqDi$reactariautils.mergeProps({
+    let thumbInteractions = isDisabled ? {} : (0, $kZqDi$reactariautils.mergeProps)({
         onMouseDown: (e)=>{
             if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
             onThumbDown(undefined);
         },
         onPointerDown: (e)=>{
-            if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+            if (e.pointerType === "mouse" && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
             onThumbDown(e.pointerId);
         },
         onTouchStart: (e)=>{
             onThumbDown(e.changedTouches[0].identifier);
         }
     }, keyboardProps, movePropsThumb);
-    let { x: x1 , y: y1  } = state.getThumbPosition(thumbRadius);
+    let { x: x , y: y  } = state.getThumbPosition(thumbRadius);
     // Provide a default aria-label if none is given
-    let { locale: locale  } = $kZqDi$reactariai18n.useLocale();
-    if (ariaLabel == null && props['aria-labelledby'] == null) ariaLabel = state.value.getChannelName('hue', locale);
-    let inputLabellingProps = $kZqDi$reactariautils.useLabels({
+    let { locale: locale  } = (0, $kZqDi$reactariai18n.useLocale)();
+    if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
+    let inputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
         ...props,
-        'aria-label': ariaLabel
+        "aria-label": ariaLabel
     });
-    let { minValue: minValue , maxValue: maxValue , step: step  } = state.value.getChannelRange('hue');
+    let { minValue: minValue , maxValue: maxValue , step: step  } = state.value.getChannelRange("hue");
     let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: 'none'
+        forcedColorAdjust: "none"
     };
     return {
         trackProps: {
             ...trackInteractions,
             style: {
-                position: 'relative',
-                touchAction: 'none',
+                position: "relative",
+                touchAction: "none",
                 width: outerRadius * 2,
                 height: outerRadius * 2,
                 background: `
@@ -1279,22 +1250,22 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
         thumbProps: {
             ...thumbInteractions,
             style: {
-                position: 'absolute',
-                left: '50%',
-                top: '50%',
-                transform: `translate(calc(${x1}px - 50%), calc(${y1}px - 50%))`,
-                touchAction: 'none',
+                position: "absolute",
+                left: "50%",
+                top: "50%",
+                transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
+                touchAction: "none",
                 ...forcedColorAdjustNoneStyle
             }
         },
-        inputProps: $kZqDi$reactariautils.mergeProps(inputLabellingProps, {
-            type: 'range',
+        inputProps: (0, $kZqDi$reactariautils.mergeProps)(inputLabellingProps, {
+            type: "range",
             min: String(minValue),
             max: String(maxValue),
             step: String(step),
-            'aria-valuetext': state.value.formatChannelValue('hue', locale),
+            "aria-valuetext": state.value.formatChannelValue("hue", locale),
             disabled: isDisabled,
-            value: `${state.value.getChannelValue('hue')}`,
+            value: `${state.value.getChannelValue("hue")}`,
             onChange: (e)=>{
                 state.setHue(parseFloat(e.target.value));
             }
@@ -1307,7 +1278,17 @@ function $1d29bf243d4a9a53$var$circlePath(cx, cy, r) {
 }
 
 
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 
@@ -1315,26 +1296,26 @@ function $1d29bf243d4a9a53$var$circlePath(cx, cy, r) {
 function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
     let { isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
     let { colorValue: colorValue , inputValue: inputValue , commit: commit , increment: increment , decrement: decrement , incrementToMax: incrementToMax , decrementToMin: decrementToMin  } = state;
-    let inputId = $kZqDi$reactariautils.useId();
-    let { spinButtonProps: spinButtonProps  } = $kZqDi$reactariaspinbutton.useSpinButton({
+    let inputId = (0, $kZqDi$reactariautils.useId)();
+    let { spinButtonProps: spinButtonProps  } = (0, $kZqDi$reactariaspinbutton.useSpinButton)({
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         isRequired: isRequired,
-        maxValue: 16777215,
+        maxValue: 0xFFFFFF,
         minValue: 0,
         onIncrement: increment,
         onIncrementToMax: incrementToMax,
         onDecrement: decrement,
         onDecrementToMin: decrementToMin,
         value: colorValue ? colorValue.toHexInt() : undefined,
-        textValue: colorValue ? colorValue.toString('hex') : undefined
+        textValue: colorValue ? colorValue.toString("hex") : undefined
     });
-    let [focusWithin, setFocusWithin] = $kZqDi$react.useState(false);
-    let { focusWithinProps: focusWithinProps  } = $kZqDi$reactariainteractions.useFocusWithin({
+    let [focusWithin, setFocusWithin] = (0, $kZqDi$react.useState)(false);
+    let { focusWithinProps: focusWithinProps  } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
         isDisabled: isDisabled,
         onFocusWithinChange: setFocusWithin
     });
-    let onWheel = $kZqDi$react.useCallback((e)=>{
+    let onWheel = (0, $kZqDi$react.useCallback)((e)=>{
         if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
         if (e.deltaY > 0) increment();
         else if (e.deltaY < 0) decrement();
@@ -1344,31 +1325,31 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
     ]);
     // If the input isn't supposed to receive input, disable scrolling.
     let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
-    $kZqDi$reactariainteractions.useScrollWheel({
+    (0, $kZqDi$reactariainteractions.useScrollWheel)({
         onScroll: onWheel,
         isDisabled: scrollingDisabled
     }, ref);
     let onChange = (value)=>{
         state.setInputValue(value);
     };
-    let { labelProps: labelProps , inputProps: inputProps  } = $kZqDi$reactariatextfield.useFormattedTextField($kZqDi$reactariautils.mergeProps(props, {
+    let { labelProps: labelProps , inputProps: inputProps  } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
         id: inputId,
         value: inputValue,
         defaultValue: undefined,
-        type: 'text',
-        autoComplete: 'off',
+        type: "text",
+        autoComplete: "off",
         onChange: onChange
     }), state, ref);
     return {
         labelProps: labelProps,
-        inputProps: $kZqDi$reactariautils.mergeProps(inputProps, spinButtonProps, focusWithinProps, {
-            role: 'textbox',
-            'aria-valuemax': null,
-            'aria-valuemin': null,
-            'aria-valuenow': null,
-            'aria-valuetext': null,
-            autoCorrect: 'off',
-            spellCheck: 'false',
+        inputProps: (0, $kZqDi$reactariautils.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
+            role: "textbox",
+            "aria-valuemax": null,
+            "aria-valuemin": null,
+            "aria-valuenow": null,
+            "aria-valuetext": null,
+            autoCorrect: "off",
+            spellCheck: "false",
             onBlur: commit
         })
     };