@react-stately/color 3.2.2-nightly.3599 → 3.2.2-nightly.3600

package/dist/main.js

@@ -1,3 +1,4 @@
+require("@swc/helpers/lib/_define_property.js");
 var $4tN2K$reactstatelyutils = require("@react-stately/utils");
 var $4tN2K$internationalizedstring = require("@internationalized/string");
 var $4tN2K$internationalizednumber = require("@internationalized/number");
@@ -16,6 +17,27 @@ $parcel$export(module.exports, "useColorAreaState", () => $af2d7ac9990cfee2$expo
 $parcel$export(module.exports, "useColorSliderState", () => $5386a492cfd3234c$export$57bc203e1c9c6d44);
 $parcel$export(module.exports, "useColorWheelState", () => $9d7d8736d45f74b8$export$f4301076d9336137);
 $parcel$export(module.exports, "useColorFieldState", () => $d59d0c2b2ce1568f$export$d52a01683abdfcd6);
+/*
+ * 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 $c0b600cf8eafdee9$exports = {};
 var $b044e7150534af04$exports = {};
@@ -500,23 +522,23 @@ $c0b600cf8eafdee9$exports = {
 
 
 
-const $83fe1a57d631223b$var$strings = new $4tN2K$internationalizedstring.LocalizedStringDictionary((/*@__PURE__*/$parcel$interopDefault($c0b600cf8eafdee9$exports)));
+const $83fe1a57d631223b$var$strings = new (0, $4tN2K$internationalizedstring.LocalizedStringDictionary)((0, (/*@__PURE__*/$parcel$interopDefault($c0b600cf8eafdee9$exports))));
 function $83fe1a57d631223b$export$6e865ea70d7724f(value) {
     let res = $83fe1a57d631223b$var$RGBColor.parse(value) || $83fe1a57d631223b$var$HSBColor.parse(value) || $83fe1a57d631223b$var$HSLColor.parse(value);
     if (res) return res;
-    throw new Error('Invalid color value: ' + value);
+    throw new Error("Invalid color value: " + value);
 }
 function $83fe1a57d631223b$export$4cde5df63f53f473(v) {
-    if (typeof v === 'string') return $83fe1a57d631223b$export$6e865ea70d7724f(v);
+    if (typeof v === "string") return $83fe1a57d631223b$export$6e865ea70d7724f(v);
     else return v;
 }
 class $83fe1a57d631223b$var$Color {
     toHexInt() {
-        return this.toFormat('rgb').toHexInt();
+        return this.toFormat("rgb").toHexInt();
     }
     getChannelValue(channel) {
         if (channel in this) return this[channel];
-        throw new Error('Unsupported color channel: ' + channel);
+        throw new Error("Unsupported color channel: " + channel);
     }
     withChannelValue(channel, value) {
         if (channel in this) {
@@ -524,19 +546,16 @@ class $83fe1a57d631223b$var$Color {
             x[channel] = value;
             return x;
         }
-        throw new Error('Unsupported color channel: ' + channel);
+        throw new Error("Unsupported color channel: " + channel);
     }
     getChannelName(channel, locale) {
         return $83fe1a57d631223b$var$strings.getStringForLocale(channel, locale);
     }
     getColorSpaceAxes(xyChannels) {
         let { xChannel: xChannel , yChannel: yChannel  } = xyChannels;
-        let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel
-        );
-        let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh
-        );
-        let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh
-        );
+        let xCh = xChannel || this.getColorChannels().find((c)=>c !== yChannel);
+        let yCh = yChannel || this.getColorChannels().find((c)=>c !== xCh);
+        let zCh = this.getColorChannels().find((c)=>c !== xCh && c !== yCh);
         return {
             xChannel: xCh,
             yChannel: yCh,
@@ -545,40 +564,38 @@ class $83fe1a57d631223b$var$Color {
     }
 }
 class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
-    static parse(value1) {
+    static parse(value) {
         let colors = [];
         // matching #rgb, #rgba, #rrggbb, #rrggbbaa
-        if (/^#[\da-f]+$/i.test(value1) && [
+        if (/^#[\da-f]+$/i.test(value) && [
             4,
             5,
             7,
             9
-        ].includes(value1.length)) {
-            const values = (value1.length < 6 ? value1.replace(/[^#]/gi, '$&$&') : value1).slice(1).split('');
-            while(values.length > 0)colors.push(parseInt(values.splice(0, 2).join(''), 16));
+        ].includes(value.length)) {
+            const values = (value.length < 6 ? value.replace(/[^#]/gi, "$&$&") : value).slice(1).split("");
+            while(values.length > 0)colors.push(parseInt(values.splice(0, 2).join(""), 16));
             colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined;
         }
         // matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a)
-        const match = value1.match(/^rgba?\((.*)\)$/);
+        const match = value.match(/^rgba?\((.*)\)$/);
         if (match === null || match === void 0 ? void 0 : match[1]) {
-            colors = match[1].split(',').map((value)=>Number(value.trim())
-            );
-            colors = colors.map((num, i)=>$4tN2K$reactstatelyutils.clamp(num, 0, i < 3 ? 255 : 1)
-            );
+            colors = match[1].split(",").map((value)=>Number(value.trim()));
+            colors = colors.map((num, i)=>(0, $4tN2K$reactstatelyutils.clamp)(num, 0, i < 3 ? 255 : 1));
         }
         var ref;
         return colors.length < 3 ? undefined : new $83fe1a57d631223b$var$RGBColor(colors[0], colors[1], colors[2], (ref = colors[3]) !== null && ref !== void 0 ? ref : 1);
     }
     toString(format) {
         switch(format){
-            case 'hex':
-                return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0')).toUpperCase();
-            case 'hexa':
-                return '#' + (this.red.toString(16).padStart(2, '0') + this.green.toString(16).padStart(2, '0') + this.blue.toString(16).padStart(2, '0') + Math.round(this.alpha * 255).toString(16).padStart(2, '0')).toUpperCase();
-            case 'rgb':
+            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':
+            case "css":
+            case "rgba":
                 return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
             default:
                 return this.toFormat(format).toString(format);
@@ -586,19 +603,19 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
     }
     toFormat(format) {
         switch(format){
-            case 'hex':
-            case 'hexa':
-            case 'rgb':
-            case 'rgba':
+            case "hex":
+            case "hexa":
+            case "rgb":
+            case "rgba":
                 return this;
-            case 'hsb':
-            case 'hsba':
+            case "hsb":
+            case "hsba":
                 return this.toHSB();
-            case 'hsl':
-            case 'hsla':
+            case "hsl":
+            case "hsla":
                 return this.toHSL();
             default:
-                throw new Error('Unsupported color conversion: rgb -> ' + format);
+                throw new Error("Unsupported color conversion: rgb -> " + format);
         }
     }
     toHexInt() {
@@ -631,7 +648,7 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
             }
             hue /= 6;
         }
-        return new $83fe1a57d631223b$var$HSBColor($4tN2K$reactstatelyutils.toFixedNumber(hue * 360, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(brightness * 100, 2), this.alpha);
+        return new $83fe1a57d631223b$var$HSBColor((0, $4tN2K$reactstatelyutils.toFixedNumber)(hue * 360, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(saturation * 100, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(brightness * 100, 2), this.alpha);
     }
     /**
    * Converts an RGB color value to HSL.
@@ -649,7 +666,7 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
         let saturation;
         if (chroma === 0) hue = saturation = 0; // achromatic
         else {
-            saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min);
+            saturation = chroma / (lightness < .5 ? max + min : 2 - max - min);
             switch(max){
                 case red:
                     hue = (green - blue) / chroma + (green < blue ? 6 : 0);
@@ -663,23 +680,23 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
             }
             hue /= 6;
         }
-        return new $83fe1a57d631223b$var$HSLColor($4tN2K$reactstatelyutils.toFixedNumber(hue * 360, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(lightness * 100, 2), this.alpha);
+        return new $83fe1a57d631223b$var$HSLColor((0, $4tN2K$reactstatelyutils.toFixedNumber)(hue * 360, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(saturation * 100, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(lightness * 100, 2), this.alpha);
     }
     clone() {
         return new $83fe1a57d631223b$var$RGBColor(this.red, this.green, this.blue, this.alpha);
     }
     getChannelRange(channel) {
         switch(channel){
-            case 'red':
-            case 'green':
-            case 'blue':
+            case "red":
+            case "green":
+            case "blue":
                 return {
-                    minValue: 0,
-                    maxValue: 255,
-                    step: 1,
-                    pageSize: 17
+                    minValue: 0x0,
+                    maxValue: 0xFF,
+                    step: 0x1,
+                    pageSize: 0x11
                 };
-            case 'alpha':
+            case "alpha":
                 return {
                     minValue: 0,
                     maxValue: 1,
@@ -687,32 +704,32 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
                     pageSize: 0.1
                 };
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                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':
+            case "red":
+            case "green":
+            case "blue":
                 options = {
-                    style: 'decimal'
+                    style: "decimal"
                 };
                 break;
-            case 'alpha':
+            case "alpha":
                 options = {
-                    style: 'percent'
+                    style: "percent"
                 };
                 break;
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
-        return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value);
+        return new (0, $4tN2K$internationalizednumber.NumberFormatter)(locale, options).format(value);
     }
     getColorSpace() {
-        return 'rgb';
+        return "rgb";
     }
     getColorChannels() {
         return $83fe1a57d631223b$var$RGBColor.colorChannels;
@@ -725,11 +742,11 @@ class $83fe1a57d631223b$var$RGBColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
-$83fe1a57d631223b$var$RGBColor.colorChannels = [
-    'red',
-    'green',
-    'blue'
-];
+(0, $83fe1a57d631223b$import$d76420afe0f7f8c4$2e2bcd8739ae039)($83fe1a57d631223b$var$RGBColor, "colorChannels", [
+    "red",
+    "green",
+    "blue"
+]);
 // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsb(X, X%, X%)
@@ -740,40 +757,39 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
         let m;
         if (m = value.match($83fe1a57d631223b$var$HSB_REGEX)) {
             var ref;
-            const [h, s, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
-            );
-            return new $83fe1a57d631223b$var$HSBColor($83fe1a57d631223b$var$mod(h, 360), $4tN2K$reactstatelyutils.clamp(s, 0, 100), $4tN2K$reactstatelyutils.clamp(b, 0, 100), $4tN2K$reactstatelyutils.clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
+            const [h, s, b, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(",").map((n)=>Number(n.trim().replace("%", "")));
+            return new $83fe1a57d631223b$var$HSBColor($83fe1a57d631223b$var$mod(h, 360), (0, $4tN2K$reactstatelyutils.clamp)(s, 0, 100), (0, $4tN2K$reactstatelyutils.clamp)(b, 0, 100), (0, $4tN2K$reactstatelyutils.clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
         }
     }
     toString(format) {
         switch(format){
-            case 'css':
-                return this.toHSL().toString('css');
-            case 'hex':
-                return this.toRGB().toString('hex');
-            case 'hexa':
-                return this.toRGB().toString('hexa');
-            case 'hsb':
-                return `hsb(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.brightness, 2)}%)`;
-            case 'hsba':
-                return `hsba(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.brightness, 2)}%, ${this.alpha})`;
+            case "css":
+                return this.toHSL().toString("css");
+            case "hex":
+                return this.toRGB().toString("hex");
+            case "hexa":
+                return this.toRGB().toString("hexa");
+            case "hsb":
+                return `hsb(${this.hue}, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.brightness, 2)}%)`;
+            case "hsba":
+                return `hsba(${this.hue}, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.brightness, 2)}%, ${this.alpha})`;
             default:
                 return this.toFormat(format).toString(format);
         }
     }
     toFormat(format) {
         switch(format){
-            case 'hsb':
-            case 'hsba':
+            case "hsb":
+            case "hsba":
                 return this;
-            case 'hsl':
-            case 'hsla':
+            case "hsl":
+            case "hsla":
                 return this.toHSL();
-            case 'rgb':
-            case 'rgba':
+            case "rgb":
+            case "rgba":
                 return this.toRGB();
             default:
-                throw new Error('Unsupported color conversion: hsb -> ' + format);
+                throw new Error("Unsupported color conversion: hsb -> " + format);
         }
     }
     /**
@@ -785,7 +801,7 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
         let brightness = this.brightness / 100;
         let lightness = brightness * (1 - saturation / 2);
         saturation = lightness === 0 || lightness === 1 ? 0 : (brightness - lightness) / Math.min(lightness, 1 - lightness);
-        return new $83fe1a57d631223b$var$HSLColor($4tN2K$reactstatelyutils.toFixedNumber(this.hue, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(lightness * 100, 2), this.alpha);
+        return new $83fe1a57d631223b$var$HSLColor((0, $4tN2K$reactstatelyutils.toFixedNumber)(this.hue, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(saturation * 100, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(lightness * 100, 2), this.alpha);
     }
     /**
    * Converts a HSV color value to RGB.
@@ -795,8 +811,7 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
         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)
-        ;
+        let fn = (n, k = (n + hue / 60) % 6)=>brightness - saturation * brightness * Math.max(Math.min(k, 4 - k, 1), 0);
         return new $83fe1a57d631223b$var$RGBColor(Math.round(fn(5) * 255), Math.round(fn(3) * 255), Math.round(fn(1) * 255), this.alpha);
     }
     clone() {
@@ -804,22 +819,22 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
     }
     getChannelRange(channel) {
         switch(channel){
-            case 'hue':
+            case "hue":
                 return {
                     minValue: 0,
                     maxValue: 360,
                     step: 1,
                     pageSize: 15
                 };
-            case 'saturation':
-            case 'brightness':
+            case "saturation":
+            case "brightness":
                 return {
                     minValue: 0,
                     maxValue: 100,
                     step: 1,
                     pageSize: 10
                 };
-            case 'alpha':
+            case "alpha":
                 return {
                     minValue: 0,
                     maxValue: 1,
@@ -827,39 +842,39 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
                     pageSize: 0.1
                 };
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
     }
     formatChannelValue(channel, locale) {
         let options;
         let value = this.getChannelValue(channel);
         switch(channel){
-            case 'hue':
+            case "hue":
                 options = {
-                    style: 'unit',
-                    unit: 'degree',
-                    unitDisplay: 'narrow'
+                    style: "unit",
+                    unit: "degree",
+                    unitDisplay: "narrow"
                 };
                 break;
-            case 'saturation':
-            case 'brightness':
+            case "saturation":
+            case "brightness":
                 options = {
-                    style: 'percent'
+                    style: "percent"
                 };
                 value /= 100;
                 break;
-            case 'alpha':
+            case "alpha":
                 options = {
-                    style: 'percent'
+                    style: "percent"
                 };
                 break;
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
-        return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value);
+        return new (0, $4tN2K$internationalizednumber.NumberFormatter)(locale, options).format(value);
     }
     getColorSpace() {
-        return 'hsb';
+        return "hsb";
     }
     getColorChannels() {
         return $83fe1a57d631223b$var$HSBColor.colorChannels;
@@ -872,11 +887,11 @@ class $83fe1a57d631223b$var$HSBColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
-$83fe1a57d631223b$var$HSBColor.colorChannels = [
-    'hue',
-    'saturation',
-    'brightness'
-];
+(0, $83fe1a57d631223b$import$d76420afe0f7f8c4$2e2bcd8739ae039)($83fe1a57d631223b$var$HSBColor, "colorChannels", [
+    "hue",
+    "saturation",
+    "brightness"
+]);
 // X = <negative/positive number with/without decimal places>
 // before/after a comma, 0 or more whitespaces are allowed
 // - hsl(X, X%, X%)
@@ -890,39 +905,38 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
         let m;
         if (m = value.match($83fe1a57d631223b$var$HSL_REGEX)) {
             var ref;
-            const [h, s, l, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(',').map((n)=>Number(n.trim().replace('%', ''))
-            );
-            return new $83fe1a57d631223b$var$HSLColor($83fe1a57d631223b$var$mod(h, 360), $4tN2K$reactstatelyutils.clamp(s, 0, 100), $4tN2K$reactstatelyutils.clamp(l, 0, 100), $4tN2K$reactstatelyutils.clamp(a !== null && a !== void 0 ? a : 1, 0, 1));
+            const [h, s, l, a] = ((ref = m[1]) !== null && ref !== void 0 ? ref : m[2]).split(",").map((n)=>Number(n.trim().replace("%", "")));
+            return new $83fe1a57d631223b$var$HSLColor($83fe1a57d631223b$var$mod(h, 360), (0, $4tN2K$reactstatelyutils.clamp)(s, 0, 100), (0, $4tN2K$reactstatelyutils.clamp)(l, 0, 100), (0, $4tN2K$reactstatelyutils.clamp)(a !== null && a !== void 0 ? a : 1, 0, 1));
         }
     }
     toString(format) {
         switch(format){
-            case 'hex':
-                return this.toRGB().toString('hex');
-            case 'hexa':
-                return this.toRGB().toString('hexa');
-            case 'hsl':
-                return `hsl(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.lightness, 2)}%)`;
-            case 'css':
-            case 'hsla':
-                return `hsla(${this.hue}, ${$4tN2K$reactstatelyutils.toFixedNumber(this.saturation, 2)}%, ${$4tN2K$reactstatelyutils.toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
+            case "hex":
+                return this.toRGB().toString("hex");
+            case "hexa":
+                return this.toRGB().toString("hexa");
+            case "hsl":
+                return `hsl(${this.hue}, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.lightness, 2)}%)`;
+            case "css":
+            case "hsla":
+                return `hsla(${this.hue}, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.saturation, 2)}%, ${(0, $4tN2K$reactstatelyutils.toFixedNumber)(this.lightness, 2)}%, ${this.alpha})`;
             default:
                 return this.toFormat(format).toString(format);
         }
     }
     toFormat(format) {
         switch(format){
-            case 'hsl':
-            case 'hsla':
+            case "hsl":
+            case "hsla":
                 return this;
-            case 'hsb':
-            case 'hsba':
+            case "hsb":
+            case "hsba":
                 return this.toHSB();
-            case 'rgb':
-            case 'rgba':
+            case "rgb":
+            case "rgba":
                 return this.toRGB();
             default:
-                throw new Error('Unsupported color conversion: hsl -> ' + format);
+                throw new Error("Unsupported color conversion: hsl -> " + format);
         }
     }
     /**
@@ -934,7 +948,7 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
         let lightness = this.lightness / 100;
         let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
         saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
-        return new $83fe1a57d631223b$var$HSBColor($4tN2K$reactstatelyutils.toFixedNumber(this.hue, 2), $4tN2K$reactstatelyutils.toFixedNumber(saturation * 100, 2), $4tN2K$reactstatelyutils.toFixedNumber(brightness * 100, 2), this.alpha);
+        return new $83fe1a57d631223b$var$HSBColor((0, $4tN2K$reactstatelyutils.toFixedNumber)(this.hue, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(saturation * 100, 2), (0, $4tN2K$reactstatelyutils.toFixedNumber)(brightness * 100, 2), this.alpha);
     }
     /**
    * Converts a HSL color to RGB.
@@ -945,8 +959,7 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
         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)
-        ;
+        let fn = (n, k = (n + hue / 30) % 12)=>lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
         return new $83fe1a57d631223b$var$RGBColor(Math.round(fn(0) * 255), Math.round(fn(8) * 255), Math.round(fn(4) * 255), this.alpha);
     }
     clone() {
@@ -954,22 +967,22 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
     }
     getChannelRange(channel) {
         switch(channel){
-            case 'hue':
+            case "hue":
                 return {
                     minValue: 0,
                     maxValue: 360,
                     step: 1,
                     pageSize: 15
                 };
-            case 'saturation':
-            case 'lightness':
+            case "saturation":
+            case "lightness":
                 return {
                     minValue: 0,
                     maxValue: 100,
                     step: 1,
                     pageSize: 10
                 };
-            case 'alpha':
+            case "alpha":
                 return {
                     minValue: 0,
                     maxValue: 1,
@@ -977,39 +990,39 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
                     pageSize: 0.1
                 };
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
     }
     formatChannelValue(channel, locale) {
         let options;
         let value = this.getChannelValue(channel);
         switch(channel){
-            case 'hue':
+            case "hue":
                 options = {
-                    style: 'unit',
-                    unit: 'degree',
-                    unitDisplay: 'narrow'
+                    style: "unit",
+                    unit: "degree",
+                    unitDisplay: "narrow"
                 };
                 break;
-            case 'saturation':
-            case 'lightness':
+            case "saturation":
+            case "lightness":
                 options = {
-                    style: 'percent'
+                    style: "percent"
                 };
                 value /= 100;
                 break;
-            case 'alpha':
+            case "alpha":
                 options = {
-                    style: 'percent'
+                    style: "percent"
                 };
                 break;
             default:
-                throw new Error('Unknown color channel: ' + channel);
+                throw new Error("Unknown color channel: " + channel);
         }
-        return new $4tN2K$internationalizednumber.NumberFormatter(locale, options).format(value);
+        return new (0, $4tN2K$internationalizednumber.NumberFormatter)(locale, options).format(value);
     }
     getColorSpace() {
-        return 'hsl';
+        return "hsl";
     }
     getColorChannels() {
         return $83fe1a57d631223b$var$HSLColor.colorChannels;
@@ -1022,28 +1035,37 @@ class $83fe1a57d631223b$var$HSLColor extends $83fe1a57d631223b$var$Color {
         this.alpha = alpha;
     }
 }
-$83fe1a57d631223b$var$HSLColor.colorChannels = [
-    'hue',
-    'saturation',
-    'lightness'
-];
-
-
-
-
-
-const $af2d7ac9990cfee2$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#ffffff');
+(0, $83fe1a57d631223b$import$d76420afe0f7f8c4$2e2bcd8739ae039)($83fe1a57d631223b$var$HSLColor, "colorChannels", [
+    "hue",
+    "saturation",
+    "lightness"
+]);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+const $af2d7ac9990cfee2$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$export$6e865ea70d7724f)("#ffffff");
 function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
-    let { value: value1 , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
-    if (!value1 && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
-    let [color, setColor] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
-    let valueRef = $4tN2K$react.useRef(color);
+    let { value: value , defaultValue: defaultValue , xChannel: xChannel , yChannel: yChannel , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
+    if (!value && !defaultValue) defaultValue = $af2d7ac9990cfee2$var$DEFAULT_COLOR;
+    let [color, setColor] = (0, $4tN2K$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value), defaultValue && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $4tN2K$react.useRef)(color);
     valueRef.current = color;
-    let channels = $4tN2K$react.useMemo(()=>valueRef.current.getColorSpaceAxes({
+    let channels = (0, $4tN2K$react.useMemo)(()=>valueRef.current.getColorSpaceAxes({
             xChannel: xChannel,
             yChannel: yChannel
-        })
-    , [
+        }), [
         xChannel,
         yChannel
     ]);
@@ -1051,8 +1073,8 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
     let yChannelRange = color.getChannelRange(channels.yChannel);
     let { minValue: minValueX , maxValue: maxValueX , step: stepX , pageSize: pageSizeX  } = xChannelRange;
     let { minValue: minValueY , maxValue: maxValueY , step: stepY , pageSize: pageSizeY  } = yChannelRange;
-    let [isDragging1, setDragging] = $4tN2K$react.useState(false);
-    let isDraggingRef = $4tN2K$react.useRef(false).current;
+    let [isDragging, setDragging] = (0, $4tN2K$react.useState)(false);
+    let isDraggingRef = (0, $4tN2K$react.useRef)(false).current;
     let xValue = color.getChannelValue(channels.xChannel);
     let yValue = color.getChannelValue(channels.yChannel);
     let setXValue = (v)=>{
@@ -1073,7 +1095,7 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
         yChannelPageStep: pageSizeY,
         value: color,
         setValue (value) {
-            let c = $83fe1a57d631223b$export$4cde5df63f53f473(value);
+            let c = (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value);
             valueRef.current = c;
             setColor(c);
         },
@@ -1082,17 +1104,17 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
         yValue: yValue,
         setYValue: setYValue,
         setColorFromPoint (x, y) {
-            let newXValue = minValueX + $4tN2K$reactstatelyutils.clamp(x, 0, 1) * (maxValueX - minValueX);
-            let newYValue = minValueY + (1 - $4tN2K$reactstatelyutils.clamp(y, 0, 1)) * (maxValueY - minValueY);
+            let newXValue = minValueX + (0, $4tN2K$reactstatelyutils.clamp)(x, 0, 1) * (maxValueX - minValueX);
+            let newYValue = minValueY + (1 - (0, $4tN2K$reactstatelyutils.clamp)(y, 0, 1)) * (maxValueY - minValueY);
             let newColor;
             if (newXValue !== xValue) {
                 // Round new value to multiple of step, clamp value between min and max
-                newXValue = $4tN2K$reactstatelyutils.snapValueToStep(newXValue, minValueX, maxValueX, stepX);
+                newXValue = (0, $4tN2K$reactstatelyutils.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
                 newColor = color.withChannelValue(channels.xChannel, newXValue);
             }
             if (newYValue !== yValue) {
                 // Round new value to multiple of step, clamp value between min and max
-                newYValue = $4tN2K$reactstatelyutils.snapValueToStep(newYValue, minValueY, maxValueY, stepY);
+                newYValue = (0, $4tN2K$reactstatelyutils.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
                 newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
             }
             if (newColor) setColor(newColor);
@@ -1106,16 +1128,16 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
             };
         },
         incrementX (stepSize) {
-            setXValue(xValue + stepSize > maxValueX ? maxValueX : $4tN2K$reactstatelyutils.snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX));
+            setXValue(xValue + stepSize > maxValueX ? maxValueX : (0, $4tN2K$reactstatelyutils.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX));
         },
         incrementY (stepSize) {
-            setYValue(yValue + stepSize > maxValueY ? maxValueY : $4tN2K$reactstatelyutils.snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY));
+            setYValue(yValue + stepSize > maxValueY ? maxValueY : (0, $4tN2K$reactstatelyutils.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY));
         },
         decrementX (stepSize) {
-            setXValue($4tN2K$reactstatelyutils.snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX));
+            setXValue((0, $4tN2K$reactstatelyutils.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX));
         },
         decrementY (stepSize) {
-            setYValue($4tN2K$reactstatelyutils.snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY));
+            setYValue((0, $4tN2K$reactstatelyutils.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY));
         },
         setDragging (isDragging) {
             let wasDragging = isDraggingRef;
@@ -1123,22 +1145,32 @@ function $af2d7ac9990cfee2$export$6df7f0e2cabc7eef(props) {
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
-        isDragging: isDragging1,
+        isDragging: isDragging,
         getDisplayColor () {
-            return color.withChannelValue('alpha', 1);
+            return color.withChannelValue("alpha", 1);
         }
     };
 }
 
 
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
 function $5386a492cfd3234c$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] = $4tN2K$reactstatelyutils.useControlledState(value1 && $83fe1a57d631223b$export$4cde5df63f53f473(value1), defaultValue && $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
-    let sliderState = $4tN2K$reactstatelyslider.useSliderState({
+    let { channel: channel , value: value , defaultValue: defaultValue , onChange: onChange , locale: locale , ...otherProps } = props;
+    if (value == null && defaultValue == null) throw new Error("useColorSliderState requires a value or defaultValue");
+    let [color, setColor] = (0, $4tN2K$reactstatelyutils.useControlledState)(value && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(value), defaultValue && (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
+    let sliderState = (0, $4tN2K$reactstatelyslider.useSliderState)({
         ...color.getChannelRange(channel),
         ...otherProps,
         // Unused except in getThumbValueLabel, which is overridden below. null to appease TypeScript.
@@ -1157,23 +1189,23 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
         ...sliderState,
         value: color,
         setValue (value) {
-            setColor($83fe1a57d631223b$export$4cde5df63f53f473(value));
+            setColor((0, $83fe1a57d631223b$export$4cde5df63f53f473)(value));
         },
         getDisplayColor () {
             switch(channel){
-                case 'hue':
-                    return $83fe1a57d631223b$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':
+                case "hue":
+                    return (0, $83fe1a57d631223b$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);
+                    throw new Error("Unknown color channel: " + channel);
             }
         },
         getThumbValueLabel () {
@@ -1185,10 +1217,20 @@ function $5386a492cfd3234c$export$57bc203e1c9c6d44(props) {
 }
 
 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 
-
-const $9d7d8736d45f74b8$var$DEFAULT_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('hsl(0, 100%, 50%)');
+const $9d7d8736d45f74b8$var$DEFAULT_COLOR = (0, $83fe1a57d631223b$export$6e865ea70d7724f)("hsl(0, 100%, 50%)");
 function $9d7d8736d45f74b8$var$roundToStep(value, step) {
     return Math.round(value / step) * step;
 }
@@ -1223,20 +1265,20 @@ function $9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius) {
 function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
     let { defaultValue: defaultValue , onChange: onChange , onChangeEnd: onChangeEnd  } = props;
     if (!props.value && !defaultValue) defaultValue = $9d7d8736d45f74b8$var$DEFAULT_COLOR;
-    let [value, setValue] = $4tN2K$reactstatelyutils.useControlledState($83fe1a57d631223b$export$4cde5df63f53f473(props.value), $83fe1a57d631223b$export$4cde5df63f53f473(defaultValue), onChange);
-    let valueRef = $4tN2K$react.useRef(value);
+    let [value, setValue] = (0, $4tN2K$reactstatelyutils.useControlledState)((0, $83fe1a57d631223b$export$4cde5df63f53f473)(props.value), (0, $83fe1a57d631223b$export$4cde5df63f53f473)(defaultValue), onChange);
+    let valueRef = (0, $4tN2K$react.useRef)(value);
     valueRef.current = value;
-    let channelRange = value.getChannelRange('hue');
+    let channelRange = value.getChannelRange("hue");
     let { minValue: minValueX , maxValue: maxValueX , step: step , pageSize: pageStep  } = channelRange;
-    let [isDragging1, setDragging] = $4tN2K$react.useState(false);
-    let isDraggingRef = $4tN2K$react.useRef(false).current;
-    let hue = value.getChannelValue('hue');
+    let [isDragging, setDragging] = (0, $4tN2K$react.useState)(false);
+    let isDraggingRef = (0, $4tN2K$react.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 = $9d7d8736d45f74b8$var$roundToStep($9d7d8736d45f74b8$var$mod(v, 360), step);
         if (hue !== v) {
-            let color = value.withChannelValue('hue', v);
+            let color = value.withChannelValue("hue", v);
             valueRef.current = color;
             setValue(color);
         }
@@ -1246,7 +1288,7 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
         step: step,
         pageStep: pageStep,
         setValue (v) {
-            let color = $83fe1a57d631223b$export$4cde5df63f53f473(v);
+            let color = (0, $83fe1a57d631223b$export$4cde5df63f53f473)(v);
             valueRef.current = color;
             setValue(color);
         },
@@ -1256,7 +1298,7 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
             setHue($9d7d8736d45f74b8$var$cartesianToAngle(x, y, radius));
         },
         getThumbPosition (radius) {
-            return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue('hue'), radius);
+            return $9d7d8736d45f74b8$var$angleToCartesian(value.getChannelValue("hue"), radius);
         },
         increment (stepSize = 1) {
             let s = Math.max(stepSize, step);
@@ -1278,21 +1320,41 @@ function $9d7d8736d45f74b8$export$f4301076d9336137(props) {
             if (onChangeEnd && !isDragging && wasDragging) onChangeEnd(valueRef.current);
             setDragging(isDragging);
         },
-        isDragging: isDragging1,
+        isDragging: isDragging,
         getDisplayColor () {
-            return value.toFormat('hsl').withChannelValue('saturation', 100).withChannelValue('lightness', 50).withChannelValue('alpha', 1);
+            return value.toFormat("hsl").withChannelValue("saturation", 100).withChannelValue("lightness", 50).withChannelValue("alpha", 1);
         }
     };
 }
 
 
-
-
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
 function $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value) {
-    return $4tN2K$react.useMemo(()=>{
-        if (typeof value === 'string') try {
-            return $83fe1a57d631223b$export$6e865ea70d7724f(value);
+    return (0, $4tN2K$react.useMemo)(()=>{
+        if (typeof value === "string") try {
+            return (0, $83fe1a57d631223b$export$6e865ea70d7724f)(value);
         } catch (err) {
             return undefined;
         }
@@ -1305,18 +1367,17 @@ function $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value) {
 
 
 
-const $d59d0c2b2ce1568f$var$MIN_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#000000');
-const $d59d0c2b2ce1568f$var$MAX_COLOR = $83fe1a57d631223b$export$6e865ea70d7724f('#FFFFFF');
+const $d59d0c2b2ce1568f$var$MIN_COLOR = (0, $83fe1a57d631223b$export$6e865ea70d7724f)("#000000");
+const $d59d0c2b2ce1568f$var$MAX_COLOR = (0, $83fe1a57d631223b$export$6e865ea70d7724f)("#FFFFFF");
 const $d59d0c2b2ce1568f$var$MIN_COLOR_INT = $d59d0c2b2ce1568f$var$MIN_COLOR.toHexInt();
 const $d59d0c2b2ce1568f$var$MAX_COLOR_INT = $d59d0c2b2ce1568f$var$MAX_COLOR.toHexInt();
 function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
-    let { value: value1 , defaultValue: defaultValue , onChange: onChange  } = props;
-    let { step: step  } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange('red');
-    let initialValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(value1);
-    let initialDefaultValue = $f8b3be23ba4462b1$export$5aadd9c0606af5c2(defaultValue);
-    let [colorValue, setColorValue] = $4tN2K$reactstatelyutils.useControlledState(initialValue, initialDefaultValue, onChange);
-    let [inputValue, setInputValue] = $4tN2K$react.useState(()=>(value1 || defaultValue) && colorValue ? colorValue.toString('hex') : ''
-    );
+    let { value: value , defaultValue: defaultValue , onChange: onChange  } = props;
+    let { step: step  } = $d59d0c2b2ce1568f$var$MIN_COLOR.getChannelRange("red");
+    let initialValue = (0, $f8b3be23ba4462b1$export$5aadd9c0606af5c2)(value);
+    let initialDefaultValue = (0, $f8b3be23ba4462b1$export$5aadd9c0606af5c2)(defaultValue);
+    let [colorValue, setColorValue] = (0, $4tN2K$reactstatelyutils.useControlledState)(initialValue, initialDefaultValue, onChange);
+    let [inputValue, setInputValue] = (0, $4tN2K$react.useState)(()=>(value || defaultValue) && colorValue ? colorValue.toString("hex") : "");
     let safelySetColorValue = (newColor)=>{
         if (!colorValue || !newColor) {
             setColorValue(newColor);
@@ -1327,15 +1388,15 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
             return;
         }
     };
-    let prevValue = $4tN2K$react.useRef(colorValue);
+    let prevValue = (0, $4tN2K$react.useRef)(colorValue);
     if (prevValue.current !== colorValue) {
-        setInputValue(colorValue ? colorValue.toString('hex') : '');
+        setInputValue(colorValue ? colorValue.toString("hex") : "");
         prevValue.current = colorValue;
     }
-    let parsedValue = $4tN2K$react.useMemo(()=>{
+    let parsedValue = (0, $4tN2K$react.useMemo)(()=>{
         let color;
         try {
-            color = $83fe1a57d631223b$export$6e865ea70d7724f(inputValue.startsWith('#') ? inputValue : `#${inputValue}`);
+            color = (0, $83fe1a57d631223b$export$6e865ea70d7724f)(inputValue.startsWith("#") ? inputValue : `#${inputValue}`);
         } catch (err) {
             color = null;
         }
@@ -1343,24 +1404,24 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
     }, [
         inputValue
     ]);
-    let parsed = $4tN2K$react.useRef(null);
+    let parsed = (0, $4tN2K$react.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'));
+            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') : '');
+            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');
+        let newColorValue = "";
+        if (colorValue) newColorValue = colorValue.toString("hex");
         setInputValue(newColorValue);
     };
     let increment = ()=>{
@@ -1369,7 +1430,7 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         // 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'));
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
         safelySetColorValue(newValue);
     };
     let decrement = ()=>{
@@ -1378,16 +1439,14 @@ function $d59d0c2b2ce1568f$export$d52a01683abdfcd6(props) {
         // 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'));
+        if (newValue === colorValue) setInputValue(newValue.toString("hex"));
         safelySetColorValue(newValue);
     };
-    let incrementToMax = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MAX_COLOR)
-    ;
-    let decrementToMin = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MIN_COLOR)
-    ;
+    let incrementToMax = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MAX_COLOR);
+    let decrementToMin = ()=>safelySetColorValue($d59d0c2b2ce1568f$var$MIN_COLOR);
     let validate = (value)=>{
         var ref;
-        return value === '' || !!((ref = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || ref === void 0 ? void 0 : ref[0]);
+        return value === "" || !!((ref = value.match(/^#?[0-9a-f]{0,6}$/i)) === null || ref === void 0 ? void 0 : ref[0]);
     };
     return {
         validate: validate,
@@ -1406,8 +1465,8 @@ function $d59d0c2b2ce1568f$var$addColorValue(color, step) {
     let colorInt = newColor.toHexInt();
     let clampInt = Math.min(Math.max(colorInt + step, $d59d0c2b2ce1568f$var$MIN_COLOR_INT), $d59d0c2b2ce1568f$var$MAX_COLOR_INT);
     if (clampInt !== colorInt) {
-        let newColorString = `#${clampInt.toString(16).padStart(6, '0').toUpperCase()}`;
-        newColor = $83fe1a57d631223b$export$6e865ea70d7724f(newColorString);
+        let newColorString = `#${clampInt.toString(16).padStart(6, "0").toUpperCase()}`;
+        newColor = (0, $83fe1a57d631223b$export$6e865ea70d7724f)(newColorString);
     }
     return newColor;
 }