@react-aria/color 3.0.0-nightly.4624 → 3.0.0-nightly.4629

package/dist/useColorArea.module.js

@@ -28,8 +28,8 @@ function $parcel$interopDefault(a) {
 
 
 function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
-    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, "aria-label": ariaLabel, xName: xName, yName: yName } = props;
-    let stringFormatter = (0, $8t1z9$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8t1z9$intlStringsmodulejs))), "@react-aria/color");
+    let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, 'aria-label': ariaLabel, xName: xName, yName: yName } = props;
+    let stringFormatter = (0, $8t1z9$useLocalizedStringFormatter)((0, ($parcel$interopDefault($8t1z9$intlStringsmodulejs))), '@react-aria/color');
     let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $8t1z9$useGlobalListeners)();
     let { direction: direction, locale: locale } = (0, $8t1z9$useLocale)();
     let [focusedInput, setFocusedInput] = (0, $8t1z9$useState)(null);
@@ -65,26 +65,26 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             setValueChangedViaKeyboard(true);
             let dir;
             switch(e.key){
-                case "PageUp":
+                case 'PageUp':
                     state.incrementY(state.yChannelPageStep);
-                    dir = "y";
+                    dir = 'y';
                     break;
-                case "PageDown":
+                case 'PageDown':
                     state.decrementY(state.yChannelPageStep);
-                    dir = "y";
+                    dir = 'y';
                     break;
-                case "Home":
-                    direction === "rtl" ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
-                    dir = "x";
+                case 'Home':
+                    direction === 'rtl' ? state.incrementX(state.xChannelPageStep) : state.decrementX(state.xChannelPageStep);
+                    dir = 'x';
                     break;
-                case "End":
-                    direction === "rtl" ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
-                    dir = "x";
+                case 'End':
+                    direction === 'rtl' ? state.decrementX(state.xChannelPageStep) : state.incrementX(state.xChannelPageStep);
+                    dir = 'x';
                     break;
             }
             state.setDragging(false);
             if (dir) {
-                let input = dir === "x" ? inputXRef : inputYRef;
+                let input = dir === 'x' ? inputXRef : inputYRef;
                 focusInput(input);
                 setFocusedInput(dir);
             }
@@ -104,19 +104,19 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
                 height: 0
             };
             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);
                 setValueChangedViaKeyboard(valueChanged);
                 // set the focused input based on which axis has the greater delta
-                focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? "y" : "x";
+                focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';
                 setFocusedInput(focusedInput);
             } 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);
             }
@@ -124,7 +124,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         onMoveEnd () {
             isOnColorArea.current = false;
             state.setDragging(false);
-            let input = focusedInput === "x" ? inputXRef : inputYRef;
+            let input = focusedInput === 'x' ? inputXRef : inputYRef;
             focusInput(input);
         }
     };
@@ -156,10 +156,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             setValueChangedViaKeyboard(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);
             }
         }
     };
@@ -173,10 +173,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             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);
             }
         }
     };
@@ -185,7 +185,7 @@ function $60bd7d6e45dcddfa$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;
             setValueChangedViaKeyboard(false);
@@ -193,10 +193,10 @@ function $60bd7d6e45dcddfa$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);
             }
         }
     };
@@ -210,17 +210,17 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             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 ? {} : (0, $8t1z9$mergeProps)({
-        ...typeof PointerEvent !== "undefined" ? {
+        ...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);
             }
         } : {
@@ -234,9 +234,9 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         }
     }, movePropsContainer);
     let thumbInteractions = isDisabled ? {} : (0, $8t1z9$mergeProps)({
-        ...typeof PointerEvent !== "undefined" ? {
+        ...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);
             }
         } : {
@@ -251,12 +251,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     }, focusWithinProps, keyboardProps, movePropsThumb);
     let { focusProps: xInputFocusProps } = (0, $8t1z9$useFocus)({
         onFocus: ()=>{
-            setFocusedInput("x");
+            setFocusedInput('x');
         }
     });
     let { focusProps: yInputFocusProps } = (0, $8t1z9$useFocus)({
         onFocus: ()=>{
-            setFocusedInput("y");
+            setFocusedInput('y');
         }
     });
     const onChange = (e)=>{
@@ -269,23 +269,23 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
     let value = state.getDisplayColor();
     const getAriaValueTextForChannel = (0, $8t1z9$useCallback)((channel)=>{
         const isAfterInput = valueChangedViaInputChangeEvent || valueChangedViaKeyboard;
-        return `${isAfterInput ? stringFormatter.format("colorNameAndValue", {
+        return `${isAfterInput ? stringFormatter.format('colorNameAndValue', {
             name: value.getChannelName(channel, locale),
             value: value.formatChannelValue(channel, locale)
         }) : [
-            stringFormatter.format("colorNameAndValue", {
+            stringFormatter.format('colorNameAndValue', {
                 name: value.getChannelName(channel, locale),
                 value: value.formatChannelValue(channel, locale)
             }),
-            stringFormatter.format("colorNameAndValue", {
+            stringFormatter.format('colorNameAndValue', {
                 name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
                 value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale)
             }),
-            stringFormatter.format("colorNameAndValue", {
+            stringFormatter.format('colorNameAndValue', {
                 name: value.getChannelName(zChannel, locale),
                 value: value.formatChannelValue(zChannel, locale)
             })
-        ].join(", ")}, ${value.getColorName(locale)}`;
+        ].join(', ')}, ${value.getColorName(locale)}`;
     }, [
         locale,
         value,
@@ -296,32 +296,32 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
         yChannel,
         zChannel
     ]);
-    let colorPickerLabel = stringFormatter.format("colorPicker");
+    let colorPickerLabel = stringFormatter.format('colorPicker');
     let xInputLabellingProps = (0, $8t1z9$useLabels)({
         ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
+        'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {
             label: ariaLabel,
             channelLabel: colorPickerLabel
         }) : colorPickerLabel
     });
     let yInputLabellingProps = (0, $8t1z9$useLabels)({
         ...props,
-        "aria-label": ariaLabel ? stringFormatter.format("colorInputLabel", {
+        'aria-label': ariaLabel ? stringFormatter.format('colorInputLabel', {
             label: ariaLabel,
             channelLabel: colorPickerLabel
         }) : colorPickerLabel
     });
     let colorAreaLabellingProps = (0, $8t1z9$useLabels)({
         ...props,
-        "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
+        'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
     }, isMobile ? colorPickerLabel : undefined);
-    let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
+    let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');
     let { visuallyHiddenProps: visuallyHiddenProps } = (0, $8t1z9$useVisuallyHidden)({
         style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
         }
     });
     let { colorAreaStyleProps: colorAreaStyleProps, thumbStyleProps: thumbStyleProps } = (0, $40297c24c53588e6$export$dd62420467d245ca)({
@@ -336,59 +336,59 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
             ...colorAreaLabellingProps,
             ...colorAreaInteractions,
             ...colorAreaStyleProps,
-            role: "group"
+            role: 'group'
         },
         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: xChannelStep,
-            "aria-roledescription": ariaRoleDescription,
-            "aria-valuetext": getAriaValueTextForChannel(xChannel),
-            "aria-orientation": "horizontal",
-            "aria-describedby": props["aria-describedby"],
-            "aria-details": props["aria-details"],
+            'aria-roledescription': ariaRoleDescription,
+            'aria-valuetext': getAriaValueTextForChannel(xChannel),
+            'aria-orientation': 'horizontal',
+            'aria-describedby': props['aria-describedby'],
+            'aria-details': props['aria-details'],
             disabled: isDisabled,
             value: state.value.getChannelValue(xChannel),
             name: xName,
-            tabIndex: isMobile || !focusedInput || focusedInput === "x" ? undefined : -1,
+            tabIndex: isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1,
             /*
         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 || !focusedInput || focusedInput === "x" || valueChangedViaKeyboard ? undefined : "true",
+      */ 'aria-hidden': isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard ? undefined : 'true',
             onChange: onChange
         },
         yInputProps: {
             ...yInputLabellingProps,
             ...visuallyHiddenProps,
             ...yInputFocusProps,
-            type: "range",
+            type: 'range',
             min: state.value.getChannelRange(yChannel).minValue,
             max: state.value.getChannelRange(yChannel).maxValue,
             step: yChannelStep,
-            "aria-roledescription": ariaRoleDescription,
-            "aria-valuetext": getAriaValueTextForChannel(yChannel),
-            "aria-orientation": "vertical",
-            "aria-describedby": props["aria-describedby"],
-            "aria-details": props["aria-details"],
+            'aria-roledescription': ariaRoleDescription,
+            'aria-valuetext': getAriaValueTextForChannel(yChannel),
+            'aria-orientation': 'vertical',
+            'aria-describedby': props['aria-describedby'],
+            'aria-details': props['aria-details'],
             disabled: isDisabled,
             value: state.value.getChannelValue(yChannel),
             name: yName,
-            tabIndex: isMobile || focusedInput === "y" ? undefined : -1,
+            tabIndex: isMobile || focusedInput === 'y' ? undefined : -1,
             /*
         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 || focusedInput === "y" || valueChangedViaKeyboard ? undefined : "true",
+      */ 'aria-hidden': isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',
             onChange: onChange
         }
     };

package/dist/useColorAreaGradient.main.js

@@ -27,27 +27,27 @@ const $99936ad0bf67c8c4$var$hue = (color)=>[
         240,
         300,
         360
-    ].map((hue)=>color.withChannelValue("hue", hue).toString("css")).join(", ");
-const $99936ad0bf67c8c4$var$saturation = (color)=>`${color.withChannelValue("saturation", 0)}, transparent`;
+    ].map((hue)=>color.withChannelValue('hue', hue).toString('css')).join(', ');
+const $99936ad0bf67c8c4$var$saturation = (color)=>`${color.withChannelValue('saturation', 0)}, transparent`;
 const $99936ad0bf67c8c4$var$hslChannels = {
     hue: $99936ad0bf67c8c4$var$hue,
     saturation: $99936ad0bf67c8c4$var$saturation,
-    lightness: ()=>"black, transparent, white"
+    lightness: ()=>'black, transparent, white'
 };
 const $99936ad0bf67c8c4$var$hsbChannels = {
     hue: $99936ad0bf67c8c4$var$hue,
     saturation: $99936ad0bf67c8c4$var$saturation,
-    brightness: ()=>"black, transparent"
+    brightness: ()=>'black, transparent'
 };
 function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, yChannel: yChannel }) {
     let returnVal = (0, $9t8qo$react.useMemo)(()=>{
-        let end = direction === "rtl" ? "left" : "right";
+        let end = direction === 'rtl' ? 'left' : 'right';
         let colorAreaStyles = {};
         let zValue = state.value.getChannelValue(zChannel);
         switch(state.value.getColorSpace()){
-            case "rgb":
+            case 'rgb':
                 {
-                    let rgb = (0, $9t8qo$reactstatelycolor.parseColor)("rgb(0, 0, 0)");
+                    let rgb = (0, $9t8qo$reactstatelycolor.parseColor)('rgb(0, 0, 0)');
                     colorAreaStyles = {
                         background: [
                             // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
@@ -56,55 +56,55 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state
                             `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
                             `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
                             rgb.withChannelValue(zChannel, zValue)
-                        ].join(","),
-                        backgroundBlendMode: "screen"
+                        ].join(','),
+                        backgroundBlendMode: 'screen'
                     };
                     break;
                 }
-            case "hsl":
+            case 'hsl':
                 {
                     let channels = state.value.getColorChannels();
-                    let value = (0, $9t8qo$reactstatelycolor.parseColor)("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
-                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$99936ad0bf67c8c4$var$hslChannels[c](value)})`).reverse();
-                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    let value = (0, $9t8qo$reactstatelycolor.parseColor)('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$99936ad0bf67c8c4$var$hslChannels[c](value)})`).reverse();
+                    if (zChannel === 'hue') bg.push(value.toString('css'));
                     colorAreaStyles = {
-                        background: bg.join(", ")
+                        background: bg.join(', ')
                     };
                     break;
                 }
-            case "hsb":
+            case 'hsb':
                 {
                     let channels = state.value.getColorChannels();
-                    let value = (0, $9t8qo$reactstatelycolor.parseColor)("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
-                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$99936ad0bf67c8c4$var$hsbChannels[c](value)})`).reverse();
-                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    let value = (0, $9t8qo$reactstatelycolor.parseColor)('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$99936ad0bf67c8c4$var$hsbChannels[c](value)})`).reverse();
+                    if (zChannel === 'hue') bg.push(value.toString('css'));
                     colorAreaStyles = {
-                        background: bg.join(", ")
+                        background: bg.join(', ')
                     };
                     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,
                     ...colorAreaStyles
                 }
             },
             thumbStyleProps: {
                 style: {
-                    position: "absolute",
+                    position: 'absolute',
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
-                    transform: "translate(-50%, -50%)",
-                    touchAction: "none",
+                    transform: 'translate(-50%, -50%)',
+                    touchAction: 'none',
                     ...forcedColorAdjustNoneStyle
                 }
             }

package/dist/useColorAreaGradient.mjs

@@ -21,27 +21,27 @@ const $40297c24c53588e6$var$hue = (color)=>[
         240,
         300,
         360
-    ].map((hue)=>color.withChannelValue("hue", hue).toString("css")).join(", ");
-const $40297c24c53588e6$var$saturation = (color)=>`${color.withChannelValue("saturation", 0)}, transparent`;
+    ].map((hue)=>color.withChannelValue('hue', hue).toString('css')).join(', ');
+const $40297c24c53588e6$var$saturation = (color)=>`${color.withChannelValue('saturation', 0)}, transparent`;
 const $40297c24c53588e6$var$hslChannels = {
     hue: $40297c24c53588e6$var$hue,
     saturation: $40297c24c53588e6$var$saturation,
-    lightness: ()=>"black, transparent, white"
+    lightness: ()=>'black, transparent, white'
 };
 const $40297c24c53588e6$var$hsbChannels = {
     hue: $40297c24c53588e6$var$hue,
     saturation: $40297c24c53588e6$var$saturation,
-    brightness: ()=>"black, transparent"
+    brightness: ()=>'black, transparent'
 };
 function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, yChannel: yChannel }) {
     let returnVal = (0, $hLqEt$useMemo)(()=>{
-        let end = direction === "rtl" ? "left" : "right";
+        let end = direction === 'rtl' ? 'left' : 'right';
         let colorAreaStyles = {};
         let zValue = state.value.getChannelValue(zChannel);
         switch(state.value.getColorSpace()){
-            case "rgb":
+            case 'rgb':
                 {
-                    let rgb = (0, $hLqEt$parseColor)("rgb(0, 0, 0)");
+                    let rgb = (0, $hLqEt$parseColor)('rgb(0, 0, 0)');
                     colorAreaStyles = {
                         background: [
                             // The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
@@ -50,55 +50,55 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state
                             `linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
                             `linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
                             rgb.withChannelValue(zChannel, zValue)
-                        ].join(","),
-                        backgroundBlendMode: "screen"
+                        ].join(','),
+                        backgroundBlendMode: 'screen'
                     };
                     break;
                 }
-            case "hsl":
+            case 'hsl':
                 {
                     let channels = state.value.getColorChannels();
-                    let value = (0, $hLqEt$parseColor)("hsl(0, 100%, 50%)").withChannelValue(zChannel, zValue);
-                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
-                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    let value = (0, $hLqEt$parseColor)('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$40297c24c53588e6$var$hslChannels[c](value)})`).reverse();
+                    if (zChannel === 'hue') bg.push(value.toString('css'));
                     colorAreaStyles = {
-                        background: bg.join(", ")
+                        background: bg.join(', ')
                     };
                     break;
                 }
-            case "hsb":
+            case 'hsb':
                 {
                     let channels = state.value.getColorChannels();
-                    let value = (0, $hLqEt$parseColor)("hsb(0, 100%, 100%)").withChannelValue(zChannel, zValue);
-                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : "top"}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
-                    if (zChannel === "hue") bg.push(value.toString("css"));
+                    let value = (0, $hLqEt$parseColor)('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
+                    let bg = channels.filter((c)=>c !== zChannel).map((c)=>`linear-gradient(to ${c === xChannel ? end : 'top'}, ${$40297c24c53588e6$var$hsbChannels[c](value)})`).reverse();
+                    if (zChannel === 'hue') bg.push(value.toString('css'));
                     colorAreaStyles = {
-                        background: bg.join(", ")
+                        background: bg.join(', ')
                     };
                     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,
                     ...colorAreaStyles
                 }
             },
             thumbStyleProps: {
                 style: {
-                    position: "absolute",
+                    position: 'absolute',
                     left: `${x * 100}%`,
                     top: `${y * 100}%`,
-                    transform: "translate(-50%, -50%)",
-                    touchAction: "none",
+                    transform: 'translate(-50%, -50%)',
+                    touchAction: 'none',
                     ...forcedColorAdjustNoneStyle
                 }
             }