@react-aria/color 3.0.0-beta.32 → 3.0.0-beta.33

package/dist/useColorAreaGradient.module.js

@@ -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
                 }
             }

package/dist/useColorChannelField.main.js

@@ -28,7 +28,7 @@ function $d84c0c836f6e3601$export$e55dd820142d3131(props, state, inputRef) {
         onChange: undefined,
         validate: undefined,
         // Provide a default aria-label if no other label is provided.
-        "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
+        'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
     }, state, inputRef);
 }
 

package/dist/useColorChannelField.mjs

@@ -22,10 +22,10 @@ function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
         onChange: undefined,
         validate: undefined,
         // Provide a default aria-label if no other label is provided.
-        "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
+        'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
     }, state, inputRef);
 }
 
 
 export {$5e632d1ff0188f00$export$e55dd820142d3131 as useColorChannelField};
-//# sourceMappingURL=useColorChannelField.mjs.map
+//# sourceMappingURL=useColorChannelField.module.js.map

package/dist/useColorChannelField.module.js

@@ -22,7 +22,7 @@ function $5e632d1ff0188f00$export$e55dd820142d3131(props, state, inputRef) {
         onChange: undefined,
         validate: undefined,
         // Provide a default aria-label if no other label is provided.
-        "aria-label": props["aria-label"] || (props.label || props["aria-labelledby"] ? undefined : state.colorValue.getChannelName(props.channel, locale))
+        'aria-label': props['aria-label'] || (props.label || props['aria-labelledby'] ? undefined : state.colorValue.getChannelName(props.channel, locale))
     }, state, inputRef);
 }
 

package/dist/useColorField.main.js

@@ -28,7 +28,7 @@ $parcel$export(module.exports, "useColorField", () => $58c850037bc7a7ce$export$7
 
 
 function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
     let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
     let inputId = (0, $grujV$reactariautils.useId)();
     let { spinButtonProps: spinButtonProps } = (0, $grujV$reactariaspinbutton.useSpinButton)({
@@ -42,7 +42,7 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
         onDecrement: decrement,
         onDecrementToMin: decrementToMin,
         value: colorValue ? colorValue.toHexInt() : undefined,
-        textValue: colorValue ? colorValue.toString("hex") : undefined
+        textValue: colorValue ? colorValue.toString('hex') : undefined
     });
     let [focusWithin, setFocusWithin] = (0, $grujV$react.useState)(false);
     let { focusWithinProps: focusWithinProps } = (0, $grujV$reactariainteractions.useFocusWithin)({
@@ -73,21 +73,21 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
         defaultValue: undefined,
         validate: undefined,
         [(0, $grujV$reactstatelyform.privateValidationStateProp)]: state,
-        type: "text",
-        autoComplete: "off",
+        type: 'text',
+        autoComplete: 'off',
         onChange: onChange
     }, state, ref);
     inputProps = (0, $grujV$reactariautils.mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuenow": null,
-        "aria-valuetext": null,
-        autoCorrect: "off",
-        spellCheck: "false",
+        role: 'textbox',
+        'aria-valuemax': null,
+        'aria-valuemin': null,
+        'aria-valuenow': null,
+        'aria-valuetext': null,
+        autoCorrect: 'off',
+        spellCheck: 'false',
         onBlur: commit
     });
-    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
     return {
         inputProps: inputProps,
         ...otherProps

package/dist/useColorField.mjs

@@ -22,7 +22,7 @@ import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
 
 
 function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
     let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
     let inputId = (0, $f8mV7$useId)();
     let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
@@ -36,7 +36,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         onDecrement: decrement,
         onDecrementToMin: decrementToMin,
         value: colorValue ? colorValue.toHexInt() : undefined,
-        textValue: colorValue ? colorValue.toString("hex") : undefined
+        textValue: colorValue ? colorValue.toString('hex') : undefined
     });
     let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
     let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
@@ -67,21 +67,21 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         defaultValue: undefined,
         validate: undefined,
         [(0, $f8mV7$privateValidationStateProp)]: state,
-        type: "text",
-        autoComplete: "off",
+        type: 'text',
+        autoComplete: 'off',
         onChange: onChange
     }, state, ref);
     inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuenow": null,
-        "aria-valuetext": null,
-        autoCorrect: "off",
-        spellCheck: "false",
+        role: 'textbox',
+        'aria-valuemax': null,
+        'aria-valuemin': null,
+        'aria-valuenow': null,
+        'aria-valuetext': null,
+        autoCorrect: 'off',
+        spellCheck: 'false',
         onBlur: commit
     });
-    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
     return {
         inputProps: inputProps,
         ...otherProps
@@ -90,4 +90,4 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
 
 
 export {$f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
-//# sourceMappingURL=useColorField.mjs.map
+//# sourceMappingURL=useColorField.module.js.map

package/dist/useColorField.module.js

@@ -22,7 +22,7 @@ import {useSpinButton as $f8mV7$useSpinButton} from "@react-aria/spinbutton";
 
 
 function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
-    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = "aria" } = props;
+    let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, isWheelDisabled: isWheelDisabled, validationBehavior: validationBehavior = 'aria' } = props;
     let { colorValue: colorValue, inputValue: inputValue, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin, commit: commit } = state;
     let inputId = (0, $f8mV7$useId)();
     let { spinButtonProps: spinButtonProps } = (0, $f8mV7$useSpinButton)({
@@ -36,7 +36,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         onDecrement: decrement,
         onDecrementToMin: decrementToMin,
         value: colorValue ? colorValue.toHexInt() : undefined,
-        textValue: colorValue ? colorValue.toString("hex") : undefined
+        textValue: colorValue ? colorValue.toString('hex') : undefined
     });
     let [focusWithin, setFocusWithin] = (0, $f8mV7$useState)(false);
     let { focusWithinProps: focusWithinProps } = (0, $f8mV7$useFocusWithin)({
@@ -67,21 +67,21 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
         defaultValue: undefined,
         validate: undefined,
         [(0, $f8mV7$privateValidationStateProp)]: state,
-        type: "text",
-        autoComplete: "off",
+        type: 'text',
+        autoComplete: 'off',
         onChange: onChange
     }, state, ref);
     inputProps = (0, $f8mV7$mergeProps)(inputProps, spinButtonProps, focusWithinProps, {
-        role: "textbox",
-        "aria-valuemax": null,
-        "aria-valuemin": null,
-        "aria-valuenow": null,
-        "aria-valuetext": null,
-        autoCorrect: "off",
-        spellCheck: "false",
+        role: 'textbox',
+        'aria-valuemax': null,
+        'aria-valuemin': null,
+        'aria-valuenow': null,
+        'aria-valuetext': null,
+        autoCorrect: 'off',
+        spellCheck: 'false',
         onBlur: commit
     });
-    if (validationBehavior === "native") inputProps["aria-required"] = undefined;
+    if (validationBehavior === 'native') inputProps['aria-required'] = undefined;
     return {
         inputProps: inputProps,
         ...otherProps

package/dist/useColorSlider.main.js

@@ -24,14 +24,14 @@ $parcel$export(module.exports, "useColorSlider", () => $afbb9647440a7f5b$export$
 
 
 function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
     let { locale: locale, direction: direction } = (0, $edxco$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 } = (0, $edxco$reactariaslider.useSlider)({
         ...props,
-        "aria-label": ariaLabel
+        'aria-label': ariaLabel
     }, state, trackRef);
     let { inputProps: inputProps, thumbProps: thumbProps } = (0, $edxco$reactariaslider.useSliderThumb)({
         index: 0,
@@ -44,11 +44,11 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
     let value = state.getDisplayColor();
     let generateBackground = ()=>{
         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':
                 {
                     let stops = [
                         0,
@@ -58,46 +58,46 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
                         240,
                         300,
                         360
-                    ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
+                    ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
                     return `linear-gradient(to ${to}, ${stops})`;
                 }
-            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");
+                    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})`;
                 }
             default:
-                throw new Error("Unknown color channel: " + channel);
+                throw new Error('Unknown color channel: ' + channel);
         }
     };
     let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: "none"
+        forcedColorAdjust: 'none'
     };
-    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
+    else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
     let { visuallyHiddenProps: visuallyHiddenProps } = (0, $edxco$reactariavisuallyhidden.useVisuallyHidden)({
         style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
         }
     });
     return {

package/dist/useColorSlider.mjs

@@ -18,14 +18,14 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$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 } = (0, $6WsjB$useSlider)({
         ...props,
-        "aria-label": ariaLabel
+        'aria-label': ariaLabel
     }, state, trackRef);
     let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
         index: 0,
@@ -38,11 +38,11 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let value = state.getDisplayColor();
     let generateBackground = ()=>{
         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':
                 {
                     let stops = [
                         0,
@@ -52,46 +52,46 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
                         240,
                         300,
                         360
-                    ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
+                    ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
                     return `linear-gradient(to ${to}, ${stops})`;
                 }
-            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");
+                    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})`;
                 }
             default:
-                throw new Error("Unknown color channel: " + channel);
+                throw new Error('Unknown color channel: ' + channel);
         }
     };
     let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: "none"
+        forcedColorAdjust: 'none'
     };
-    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
+    else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
     let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
         style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
         }
     });
     return {
@@ -124,4 +124,4 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
 
 
 export {$40af666d6c251e36$export$106b7a4e66508f66 as useColorSlider};
-//# sourceMappingURL=useColorSlider.mjs.map
+//# sourceMappingURL=useColorSlider.module.js.map

package/dist/useColorSlider.module.js

@@ -18,14 +18,14 @@ import {useVisuallyHidden as $6WsjB$useVisuallyHidden} from "@react-aria/visuall
 
 
 function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
-    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
+    let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, 'aria-label': ariaLabel, name: name } = props;
     let { locale: locale, direction: direction } = (0, $6WsjB$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 } = (0, $6WsjB$useSlider)({
         ...props,
-        "aria-label": ariaLabel
+        'aria-label': ariaLabel
     }, state, trackRef);
     let { inputProps: inputProps, thumbProps: thumbProps } = (0, $6WsjB$useSliderThumb)({
         index: 0,
@@ -38,11 +38,11 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let value = state.getDisplayColor();
     let generateBackground = ()=>{
         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':
                 {
                     let stops = [
                         0,
@@ -52,46 +52,46 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
                         240,
                         300,
                         360
-                    ].map((hue)=>value.withChannelValue("hue", hue).toString("css")).join(", ");
+                    ].map((hue)=>value.withChannelValue('hue', hue).toString('css')).join(', ');
                     return `linear-gradient(to ${to}, ${stops})`;
                 }
-            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");
+                    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})`;
                 }
             default:
-                throw new Error("Unknown color channel: " + channel);
+                throw new Error('Unknown color channel: ' + channel);
         }
     };
     let forcedColorAdjustNoneStyle = {
-        forcedColorAdjust: "none"
+        forcedColorAdjust: 'none'
     };
-    if (channel === "hue") inputProps["aria-valuetext"] += `, ${value.getHueName(locale)}`;
-    else if (channel !== "alpha") inputProps["aria-valuetext"] += `, ${value.getColorName(locale)}`;
+    if (channel === 'hue') inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
+    else if (channel !== 'alpha') inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
     let { visuallyHiddenProps: visuallyHiddenProps } = (0, $6WsjB$useVisuallyHidden)({
         style: {
-            opacity: "0.0001",
-            width: "100%",
-            height: "100%",
-            pointerEvents: "none"
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
         }
     });
     return {