@react-aria/color 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/main.js

@@ -1,500 +1,1143 @@
-var {
-  useTextField
-} = require("@react-aria/textfield");
-
-var {
-  useSpinButton
-} = require("@react-aria/spinbutton");
-
-var {
-  useKeyboard,
-  useMove
-} = require("@react-aria/interactions");
-
-var {
-  useCallback,
-  useRef
-} = require("react");
-
-var {
-  useSlider,
-  useSliderThumb
-} = require("@react-aria/slider");
-
-var {
-  useLocale
-} = require("@react-aria/i18n");
-
-var {
-  mergeProps,
-  focusWithoutScrolling,
-  useGlobalListeners,
-  useLabels,
-  useId
-} = require("@react-aria/utils");
-
-var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
+var $kZqDi$reactariautils = require("@react-aria/utils");
+var $kZqDi$react = require("react");
+var $kZqDi$reactariainteractions = require("@react-aria/interactions");
+var $kZqDi$reactariai18n = require("@react-aria/i18n");
+var $kZqDi$reactariavisuallyhidden = require("@react-aria/visually-hidden");
+var $kZqDi$reactariaslider = require("@react-aria/slider");
+var $kZqDi$reactariatextfield = require("@react-aria/textfield");
+var $kZqDi$reactariaspinbutton = require("@react-aria/spinbutton");
 
+function $parcel$exportWildcard(dest, source) {
+  Object.keys(source).forEach(function(key) {
+    if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {
+      return;
+    }
+
+    Object.defineProperty(dest, key, {
+      enumerable: true,
+      get: function get() {
+        return source[key];
+      }
+    });
+  });
+
+  return dest;
+}
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+var $47925bd68062ac17$exports = {};
 
-/**
- * Provides the behavior and accessibility implementation for a color slider component.
- * Color sliders allow users to adjust an individual channel of a color value.
- */
-function useColorSlider(props, state) {
-  let {
-    trackRef,
-    inputRef,
-    orientation,
-    channel,
-    'aria-label': ariaLabel
-  } = props;
-  let {
-    locale,
-    direction
-  } = 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);
-  } // @ts-ignore - ignore unused incompatible props
-
-
-  let {
-    groupProps,
-    trackProps,
-    labelProps,
-    outputProps
-  } = useSlider(_babelRuntimeHelpersExtends({}, props, {
-    'aria-label': ariaLabel
-  }), state, trackRef);
-  let {
-    inputProps,
-    thumbProps
-  } = useSliderThumb({
-    index: 0,
-    orientation,
-    isDisabled: props.isDisabled,
-    trackRef,
-    inputRef
-  }, state);
-
-  let generateBackground = () => {
-    let value = state.getDisplayColor();
-    let to;
-
-    if (orientation === 'vertical') {
-      to = 'top';
-    } else if (direction === 'ltr') {
-      to = 'right';
-    } else {
-      to = 'left';
-    }
+$parcel$export($47925bd68062ac17$exports, "useColorArea", () => $47925bd68062ac17$export$2f92a7a615a014f6);
 
-    switch (channel) {
-      case 'hue':
-        return "linear-gradient(to " + to + ", rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)";
-
-      case 'lightness':
-        {
-          // 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');
-          return "linear-gradient(to " + to + ", " + start + ", " + middle + ", " + end + ")";
-        }
+var $4f97b428b4cbcd4e$exports = {};
+var $f141a15c3076a67b$exports = {};
+$f141a15c3076a67b$exports = JSON.parse("{\"twoDimensionalSlider\":\"شريط تمرير ثنائي الأبعاد\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
 
-      case 'saturation':
-      case 'brightness':
-      case 'red':
-      case 'green':
-      case 'blue':
-      case 'alpha':
-        {
-          let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
-          let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
-          return "linear-gradient(to " + to + ", " + start + ", " + end + ")";
-        }
 
-      default:
-        throw new Error('Unknown color channel: ' + channel);
-    }
-  };
+var $435ac2a9fdd2ae5e$exports = {};
+$435ac2a9fdd2ae5e$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D плъзгач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
 
-  let thumbPosition = state.getThumbPercent(0);
 
-  if (orientation === 'vertical' || direction === 'rtl') {
-    thumbPosition = 1 - thumbPosition;
-  }
+var $6b29758b432284f5$exports = {};
+$6b29758b432284f5$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D posuvník\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
 
-  return {
-    trackProps: _babelRuntimeHelpersExtends({}, mergeProps(groupProps, trackProps), {
-      style: {
-        position: 'relative',
-        touchAction: 'none',
-        background: generateBackground()
-      }
-    }),
-    inputProps,
-    thumbProps: _babelRuntimeHelpersExtends({}, thumbProps, {
-      style: {
-        touchAction: 'none',
-        position: 'absolute',
-        [orientation === 'vertical' ? 'top' : 'left']: thumbPosition * 100 + "%",
-        transform: 'translate(-50%, -50%)'
-      }
-    }),
-    labelProps,
-    outputProps
-  };
+
+var $357597bcf4afd6fb$exports = {};
+$357597bcf4afd6fb$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-skyder\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $ddc6333960e2b591$exports = {};
+$ddc6333960e2b591$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-Schieberegler\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $417ee93d3ca474c0$exports = {};
+$417ee93d3ca474c0$exports = JSON.parse("{\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $519561bc6dcff98b$exports = {};
+$519561bc6dcff98b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $7a34c3fcc03402b8$exports = {};
+$7a34c3fcc03402b8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Control deslizante en 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $860f86d6eae22cba$exports = {};
+$860f86d6eae22cba$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liugur\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $8525d3c77b8a51b0$exports = {};
+$8525d3c77b8a51b0$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liukusäädin\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $8240fe6825e900ec$exports = {};
+$8240fe6825e900ec$exports = JSON.parse("{\"twoDimensionalSlider\":\"Curseur 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $377849238307c673$exports = {};
+$377849238307c673$exports = JSON.parse("{\"twoDimensionalSlider\":\"מחוון דו-ממדי\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $5a6f44e0ec14b083$exports = {};
+$5a6f44e0ec14b083$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D kliznik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $82327d6e71e3e273$exports = {};
+$82327d6e71e3e273$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D csúszka\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $b1e297275c248ab8$exports = {};
+$b1e297275c248ab8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Dispositivo di scorrimento 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $b39c9f2638b4d2b9$exports = {};
+$b39c9f2638b4d2b9$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D スライダー\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $2d2fbf4195848a62$exports = {};
+$2d2fbf4195848a62$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 슬라이더\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $ea88350d0828fa2c$exports = {};
+$ea88350d0828fa2c$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slankiklis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $0e0acd541630120a$exports = {};
+$0e0acd541630120a$exports = JSON.parse("{\"twoDimensionalSlider\":\"Plaknes slīdnis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $952a458224052046$exports = {};
+$952a458224052046$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-glidebryter\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $2d8e195bc5683483$exports = {};
+$2d8e195bc5683483$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-schuifregelaar\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $750d83f83c5f38d4$exports = {};
+$750d83f83c5f38d4$exports = JSON.parse("{\"twoDimensionalSlider\":\"Suwak 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $656b2846f611067c$exports = {};
+$656b2846f611067c$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controle deslizante 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $58ce120874d069dd$exports = {};
+$58ce120874d069dd$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controlo de deslize 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $fd6c85b4eba18825$exports = {};
+$fd6c85b4eba18825$exports = JSON.parse("{\"twoDimensionalSlider\":\"Cursor 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $8849a15ecc435984$exports = {};
+$8849a15ecc435984$exports = JSON.parse("{\"twoDimensionalSlider\":\"Двумерный ползунок\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $5192372f064be783$exports = {};
+$5192372f064be783$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D jazdec\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $094525f9176df65d$exports = {};
+$094525f9176df65d$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-drsnik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $9795aa59b4ad40ed$exports = {};
+$9795aa59b4ad40ed$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D клизач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $9ebaa0b485f13e4d$exports = {};
+$9ebaa0b485f13e4d$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-reglage\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $ad58e2e4e0f2e750$exports = {};
+$ad58e2e4e0f2e750$exports = JSON.parse("{\"twoDimensionalSlider\":\"2B slayt gösterisi\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $dafc19306f8b2dfc$exports = {};
+$dafc19306f8b2dfc$exports = JSON.parse("{\"twoDimensionalSlider\":\"Повзунок 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $d31a8b80af5acc16$exports = {};
+$d31a8b80af5acc16$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑块\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $7377d28aec5fa200$exports = {};
+$7377d28aec5fa200$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑桿\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+$4f97b428b4cbcd4e$exports = {
+    "ar-AE": $f141a15c3076a67b$exports,
+    "bg-BG": $435ac2a9fdd2ae5e$exports,
+    "cs-CZ": $6b29758b432284f5$exports,
+    "da-DK": $357597bcf4afd6fb$exports,
+    "de-DE": $ddc6333960e2b591$exports,
+    "el-GR": $417ee93d3ca474c0$exports,
+    "en-US": $519561bc6dcff98b$exports,
+    "es-ES": $7a34c3fcc03402b8$exports,
+    "et-EE": $860f86d6eae22cba$exports,
+    "fi-FI": $8525d3c77b8a51b0$exports,
+    "fr-FR": $8240fe6825e900ec$exports,
+    "he-IL": $377849238307c673$exports,
+    "hr-HR": $5a6f44e0ec14b083$exports,
+    "hu-HU": $82327d6e71e3e273$exports,
+    "it-IT": $b1e297275c248ab8$exports,
+    "ja-JP": $b39c9f2638b4d2b9$exports,
+    "ko-KR": $2d2fbf4195848a62$exports,
+    "lt-LT": $ea88350d0828fa2c$exports,
+    "lv-LV": $0e0acd541630120a$exports,
+    "nb-NO": $952a458224052046$exports,
+    "nl-NL": $2d8e195bc5683483$exports,
+    "pl-PL": $750d83f83c5f38d4$exports,
+    "pt-BR": $656b2846f611067c$exports,
+    "pt-PT": $58ce120874d069dd$exports,
+    "ro-RO": $fd6c85b4eba18825$exports,
+    "ru-RU": $8849a15ecc435984$exports,
+    "sk-SK": $5192372f064be783$exports,
+    "sl-SI": $094525f9176df65d$exports,
+    "sr-SP": $9795aa59b4ad40ed$exports,
+    "sv-SE": $9ebaa0b485f13e4d$exports,
+    "tr-TR": $ad58e2e4e0f2e750$exports,
+    "uk-UA": $dafc19306f8b2dfc$exports,
+    "zh-CN": $d31a8b80af5acc16$exports,
+    "zh-TW": $7377d28aec5fa200$exports
+};
+
+
+
+
+const $99936ad0bf67c8c4$var$generateRGB_R = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+            'WebkitMaskImage': maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateRGB_G = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+            'WebkitMaskImage': maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateRGB_B = (orientation, dir, zValue)=>{
+    let maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+    let result = {
+        colorAreaStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
+        },
+        gradientStyles: {
+            backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+            'WebkitMaskImage': maskImage,
+            maskImage: maskImage
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSL_H = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+                `hsl(${zValue}, 100%, 50%)`
+            ].join(',')
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSL_S = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                'hsl(0, 0%, 50%)'
+            ].join(',')
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSL_L = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            backgroundImage: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
+            ].join(',')
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSB_H = (orientation, dir, zValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+                `hsl(${zValue}, 100%, 50%)`
+            ].join(',')
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSB_S = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
+            ].join(',')
+        }
+    };
+    return result;
+};
+const $99936ad0bf67c8c4$var$generateHSB_B = (orientation, dir, alphaValue)=>{
+    let result = {
+        colorAreaStyles: {
+        },
+        gradientStyles: {
+            background: [
+                `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+                `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+                '#000'
+            ].join(',')
+        }
+    };
+    return result;
+};
+function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled  }) {
+    let returnVal = $kZqDi$react.useMemo(()=>{
+        let orientation = [
+            'top',
+            direction === 'rtl' ? 'left' : 'right'
+        ];
+        let dir = false;
+        let background = {
+            colorAreaStyles: {
+            },
+            gradientStyles: {
+            }
+        };
+        let zValue = state.value.getChannelValue(zChannel);
+        let { minValue: zMin , maxValue: zMax  } = state.value.getChannelRange(zChannel);
+        let alphaValue = (zValue - zMin) / (zMax - zMin);
+        let isHSL = state.value.getColorSpace() === 'hsl';
+        if (!isDisabled) switch(zChannel){
+            case 'red':
+                dir = xChannel === 'green';
+                background = $99936ad0bf67c8c4$var$generateRGB_R(orientation, dir, zValue);
+                break;
+            case 'green':
+                dir = xChannel === 'red';
+                background = $99936ad0bf67c8c4$var$generateRGB_G(orientation, dir, zValue);
+                break;
+            case 'blue':
+                dir = xChannel === 'red';
+                background = $99936ad0bf67c8c4$var$generateRGB_B(orientation, dir, zValue);
+                break;
+            case 'hue':
+                dir = xChannel !== 'saturation';
+                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_H(orientation, dir, zValue);
+                else background = $99936ad0bf67c8c4$var$generateHSB_H(orientation, dir, zValue);
+                break;
+            case 'saturation':
+                dir = xChannel === 'hue';
+                if (isHSL) background = $99936ad0bf67c8c4$var$generateHSL_S(orientation, dir, alphaValue);
+                else background = $99936ad0bf67c8c4$var$generateHSB_S(orientation, dir, alphaValue);
+                break;
+            case 'brightness':
+                dir = xChannel === 'hue';
+                background = $99936ad0bf67c8c4$var$generateHSB_B(orientation, dir, alphaValue);
+                break;
+            case 'lightness':
+                dir = xChannel === 'hue';
+                background = $99936ad0bf67c8c4$var$generateHSL_L(orientation, dir, zValue);
+                break;
+        }
+        let { x: x , y: y  } = state.getThumbPosition();
+        if (direction === 'rtl') x = 1 - x;
+        return {
+            colorAreaStyleProps: {
+                style: {
+                    position: 'relative',
+                    touchAction: 'none',
+                    ...background.colorAreaStyles
+                }
+            },
+            gradientStyleProps: {
+                style: {
+                    touchAction: 'none',
+                    ...background.gradientStyles
+                }
+            },
+            thumbStyleProps: {
+                style: {
+                    position: 'absolute',
+                    left: `${x * 100}%`,
+                    top: `${y * 100}%`,
+                    transform: 'translate(0%, 0%)',
+                    touchAction: 'none'
+                }
+            }
+        };
+    }, [
+        direction,
+        state,
+        zChannel,
+        xChannel,
+        isDisabled
+    ]);
+    return returnVal;
 }
 
-exports.useColorSlider = useColorSlider;
-const $c5e318998f160f365e09b073e8447c3d$var$PAGE_MIN_STEP_SIZE = 6;
-/**
- * Provides the behavior and accessibility implementation for a color wheel component.
- * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-
-function useColorWheel(props, state, inputRef) {
-  let {
-    isDisabled,
-    step = 1,
-    innerRadius,
-    outerRadius,
-    'aria-label': ariaLabel
-  } = props;
-  let {
-    addGlobalListener,
-    removeGlobalListener
-  } = useGlobalListeners();
-  let thumbRadius = (innerRadius + outerRadius) / 2;
-  let focusInput = useCallback(() => {
-    if (inputRef.current) {
-      focusWithoutScrolling(inputRef.current);
-    }
-  }, [inputRef]);
-  let stateRef = useRef(null);
-  stateRef.current = state;
-  let currentPosition = useRef(null);
-  let moveHandler = {
-    onMoveStart() {
-      currentPosition.current = null;
-      state.setDragging(true);
-    },
-
-    onMove(_ref) {
-      let {
-        deltaX,
-        deltaY,
-        pointerType
-      } = _ref;
-
-      if (currentPosition.current == null) {
-        currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
-      }
 
-      currentPosition.current.x += deltaX;
-      currentPosition.current.y += deltaY;
 
-      if (pointerType === 'keyboard') {
-        if (deltaX > 0 || deltaY < 0) {
-          state.increment();
-        } else if (deltaX < 0 || deltaY > 0) {
-          state.decrement();
+
+
+function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef  } = props;
+    let formatMessage = $kZqDi$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($4f97b428b4cbcd4e$exports)));
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $kZqDi$reactariautils.useGlobalListeners();
+    let { direction: direction , locale: locale  } = $kZqDi$reactariai18n.useLocale();
+    let focusedInputRef = $kZqDi$react.useRef(null);
+    let focusInput = $kZqDi$react.useCallback((inputRef = inputXRef)=>{
+        if (inputRef.current) $kZqDi$reactariautils.focusWithoutScrolling(inputRef.current);
+    }, [
+        inputXRef
+    ]);
+    let stateRef = $kZqDi$react.useRef(null);
+    stateRef.current = state;
+    let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel  } = stateRef.current.channels;
+    let xChannelStep1 = stateRef.current.xChannelStep;
+    let yChannelStep1 = stateRef.current.yChannelStep;
+    let currentPosition = $kZqDi$react.useRef(null);
+    let { keyboardProps: keyboardProps  } = $kZqDi$reactariainteractions.useKeyboard({
+        onKeyDown (e) {
+            // these are the cases that useMove doesn't handle
+            if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
+                e.continuePropagation();
+                return;
+            }
+            // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
+            e.preventDefault();
+            // remember to set this and unset it so that onChangeEnd is fired
+            stateRef.current.setDragging(true);
+            switch(e.key){
+                case 'PageUp':
+                    stateRef.current.incrementY(stateRef.current.yChannelPageStep);
+                    focusedInputRef.current = inputYRef.current;
+                    break;
+                case 'PageDown':
+                    stateRef.current.decrementY(stateRef.current.yChannelPageStep);
+                    focusedInputRef.current = inputYRef.current;
+                    break;
+                case 'Home':
+                    direction === 'rtl' ? stateRef.current.incrementX(stateRef.current.xChannelPageStep) : stateRef.current.decrementX(stateRef.current.xChannelPageStep);
+                    focusedInputRef.current = inputXRef.current;
+                    break;
+                case 'End':
+                    direction === 'rtl' ? stateRef.current.decrementX(stateRef.current.xChannelPageStep) : stateRef.current.incrementX(stateRef.current.xChannelPageStep);
+                    focusedInputRef.current = inputXRef.current;
+                    break;
+            }
+            stateRef.current.setDragging(false);
+            if (focusedInputRef.current) {
+                focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
+                focusedInputRef.current = undefined;
+            }
         }
-      } else {
-        stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
-      }
-    },
+    });
+    let moveHandler = {
+        onMoveStart () {
+            currentPosition.current = null;
+            stateRef.current.setDragging(true);
+        },
+        onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey  }) {
+            let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint  } = stateRef.current;
+            if (currentPosition.current == null) currentPosition.current = getThumbPosition();
+            let { width: width , height: height  } = containerRef.current.getBoundingClientRect();
+            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);
+                else if (deltaY > 0) decrementY(deltaYValue);
+                else if (deltaY < 0) incrementY(deltaYValue);
+                // set the focused input based on which axis has the greater delta
+                focusedInputRef.current = (deltaX !== 0 || deltaY !== 0) && Math.abs(deltaY) > Math.abs(deltaX) ? inputYRef.current : inputXRef.current;
+            } else {
+                currentPosition.current.x += (direction === 'rtl' ? -1 : 1) * deltaX / width;
+                currentPosition.current.y += deltaY / height;
+                setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
+            }
+        },
+        onMoveEnd () {
+            isOnColorArea.current = undefined;
+            stateRef.current.setDragging(false);
+            focusInput(focusedInputRef.current ? focusedInputRef : inputXRef);
+            focusedInputRef.current = undefined;
+        }
+    };
+    let { moveProps: movePropsThumb  } = $kZqDi$reactariainteractions.useMove(moveHandler);
+    let currentPointer = $kZqDi$react.useRef(undefined);
+    let isOnColorArea = $kZqDi$react.useRef(false);
+    let { moveProps: movePropsContainer  } = $kZqDi$reactariainteractions.useMove({
+        onMoveStart () {
+            if (isOnColorArea.current) moveHandler.onMoveStart();
+        },
+        onMove (e) {
+            if (isOnColorArea.current) moveHandler.onMove(e);
+        },
+        onMoveEnd () {
+            if (isOnColorArea.current) moveHandler.onMoveEnd();
+        }
+    });
+    let onThumbDown = (id)=>{
+        if (!state.isDragging) {
+            currentPointer.current = id;
+            focusInput();
+            state.setDragging(true);
+            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
+            else {
+                addGlobalListener(window, 'mouseup', onThumbUp, false);
+                addGlobalListener(window, 'touchend', onThumbUp, false);
+            }
+        }
+    };
+    let onThumbUp = (e)=>{
+        var ref;
+        var _pointerId;
+        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        if (id === currentPointer.current) {
+            focusInput();
+            state.setDragging(false);
+            currentPointer.current = undefined;
+            isOnColorArea.current = false;
+            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
+            else {
+                removeGlobalListener(window, 'mouseup', onThumbUp, false);
+                removeGlobalListener(window, 'touchend', onThumbUp, false);
+            }
+        }
+    };
+    let onColorAreaDown = (colorArea, id, clientX, clientY)=>{
+        let rect = colorArea.getBoundingClientRect();
+        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 (x >= 0 && x <= 1 && y >= 0 && y <= 1 && !state.isDragging && currentPointer.current === undefined) {
+            isOnColorArea.current = true;
+            currentPointer.current = id;
+            state.setColorFromPoint(x, y);
+            focusInput();
+            state.setDragging(true);
+            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onColorAreaUp, false);
+            else {
+                addGlobalListener(window, 'mouseup', onColorAreaUp, false);
+                addGlobalListener(window, 'touchend', onColorAreaUp, false);
+            }
+        }
+    };
+    let onColorAreaUp = (e)=>{
+        var ref;
+        var _pointerId;
+        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        if (isOnColorArea.current && id === currentPointer.current) {
+            isOnColorArea.current = false;
+            currentPointer.current = undefined;
+            state.setDragging(false);
+            focusInput();
+            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onColorAreaUp, false);
+            else {
+                removeGlobalListener(window, 'mouseup', onColorAreaUp, false);
+                removeGlobalListener(window, 'touchend', onColorAreaUp, false);
+            }
+        }
+    };
+    let colorAreaInteractions = isDisabled ? {
+    } : $kZqDi$reactariautils.mergeProps({
+        ...typeof PointerEvent !== 'undefined' ? {
+            onPointerDown: (e)=>{
+                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
+            }
+        } : {
+            onMouseDown: (e)=>{
+                if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+                onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);
+            },
+            onTouchStart: (e)=>{
+                onColorAreaDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+            }
+        }
+    }, movePropsContainer);
+    let thumbInteractions = isDisabled ? {
+    } : $kZqDi$reactariautils.mergeProps({
+        ...typeof PointerEvent !== 'undefined' ? {
+            onPointerDown: (e)=>{
+                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                onThumbDown(e.pointerId);
+            }
+        } : {
+            onMouseDown: (e)=>{
+                if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+                onThumbDown(undefined);
+            },
+            onTouchStart: (e)=>{
+                onThumbDown(e.changedTouches[0].identifier);
+            }
+        }
+    }, keyboardProps, movePropsThumb);
+    let isMobile = $kZqDi$reactariautils.isIOS() || $kZqDi$reactariautils.isAndroid();
+    let xInputLabellingProps = $kZqDi$reactariautils.useLabels({
+        ...props,
+        'aria-label': isMobile ? state.value.getChannelName(xChannel, locale) : formatMessage('x/y', {
+            x: state.value.getChannelName(xChannel, locale),
+            y: state.value.getChannelName(yChannel, locale)
+        })
+    });
+    let yInputLabellingProps = $kZqDi$reactariautils.useLabels({
+        ...props,
+        'aria-label': isMobile ? state.value.getChannelName(yChannel, locale) : formatMessage('x/y', {
+            x: state.value.getChannelName(xChannel, locale),
+            y: state.value.getChannelName(yChannel, locale)
+        })
+    });
+    let colorAriaLabellingProps = $kZqDi$reactariautils.useLabels(props);
+    let getValueTitle = ()=>{
+        const channels = state.value.getColorChannels();
+        const colorNamesAndValues = [];
+        channels.forEach((channel)=>colorNamesAndValues.push(formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName(channel, locale),
+                value: state.value.formatChannelValue(channel, locale)
+            }))
+        );
+        return colorNamesAndValues.length ? colorNamesAndValues.join(', ') : null;
+    };
+    let ariaRoleDescription = isMobile ? null : formatMessage('twoDimensionalSlider');
+    let { visuallyHiddenProps: visuallyHiddenProps  } = $kZqDi$reactariavisuallyhidden.useVisuallyHidden({
+        style: {
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
+        }
+    });
+    let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps  } = $99936ad0bf67c8c4$export$dd62420467d245ca({
+        direction: direction,
+        state: state,
+        xChannel: xChannel,
+        zChannel: zChannel,
+        isDisabled: props.isDisabled
+    });
+    return {
+        colorAreaProps: {
+            ...colorAriaLabellingProps,
+            ...colorAreaInteractions,
+            ...colorAreaStyleProps,
+            role: 'group'
+        },
+        gradientProps: {
+            ...gradientStyleProps,
+            role: 'presentation'
+        },
+        thumbProps: {
+            ...thumbInteractions,
+            ...thumbStyleProps,
+            role: 'presentation'
+        },
+        xInputProps: {
+            ...xInputLabellingProps,
+            ...visuallyHiddenProps,
+            type: 'range',
+            min: state.value.getChannelRange(xChannel).minValue,
+            max: state.value.getChannelRange(xChannel).maxValue,
+            step: xChannelStep1,
+            'aria-roledescription': ariaRoleDescription,
+            'aria-valuetext': isMobile ? formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName(xChannel, locale),
+                value: state.value.formatChannelValue(xChannel, locale)
+            }) : [
+                formatMessage('colorNameAndValue', {
+                    name: state.value.getChannelName(xChannel, locale),
+                    value: state.value.formatChannelValue(xChannel, locale)
+                }),
+                formatMessage('colorNameAndValue', {
+                    name: state.value.getChannelName(yChannel, locale),
+                    value: state.value.formatChannelValue(yChannel, locale)
+                })
+            ].join(', '),
+            title: getValueTitle(),
+            disabled: isDisabled,
+            value: state.value.getChannelValue(xChannel),
+            tabIndex: 0,
+            onChange: (e)=>{
+                state.setXValue(parseFloat(e.target.value));
+            }
+        },
+        yInputProps: {
+            ...yInputLabellingProps,
+            ...visuallyHiddenProps,
+            type: 'range',
+            min: state.value.getChannelRange(yChannel).minValue,
+            max: state.value.getChannelRange(yChannel).maxValue,
+            step: yChannelStep1,
+            'aria-roledescription': ariaRoleDescription,
+            'aria-valuetext': isMobile ? formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName(yChannel, locale),
+                value: state.value.formatChannelValue(yChannel, locale)
+            }) : [
+                formatMessage('colorNameAndValue', {
+                    name: state.value.getChannelName(yChannel, locale),
+                    value: state.value.formatChannelValue(yChannel, locale)
+                }),
+                formatMessage('colorNameAndValue', {
+                    name: state.value.getChannelName(xChannel, locale),
+                    value: state.value.formatChannelValue(xChannel, locale)
+                })
+            ].join(', '),
+            'aria-orientation': 'vertical',
+            title: getValueTitle(),
+            disabled: isDisabled,
+            value: state.value.getChannelValue(yChannel),
+            tabIndex: -1,
+            onChange: (e)=>{
+                state.setYValue(parseFloat(e.target.value));
+            }
+        }
+    };
+}
 
-    onMoveEnd() {
-      isOnTrack.current = undefined;
-      state.setDragging(false);
-      focusInput();
-    }
 
-  };
-  let {
-    moveProps: movePropsThumb
-  } = useMove(moveHandler);
-  let currentPointer = useRef(undefined);
-  let isOnTrack = useRef(false);
-  let {
-    moveProps: movePropsContainer
-  } = useMove({
-    onMoveStart() {
-      if (isOnTrack.current) {
-        moveHandler.onMoveStart();
-      }
-    },
+var $afbb9647440a7f5b$exports = {};
 
-    onMove(e) {
-      if (isOnTrack.current) {
-        moveHandler.onMove(e);
-      }
-    },
+$parcel$export($afbb9647440a7f5b$exports, "useColorSlider", () => $afbb9647440a7f5b$export$106b7a4e66508f66);
 
-    onMoveEnd() {
-      if (isOnTrack.current) {
-        moveHandler.onMoveEnd();
-      }
-    }
 
-  });
 
-  let onThumbDown = id => {
-    if (!state.isDragging) {
-      currentPointer.current = id;
-      focusInput();
-      state.setDragging(true);
-      addGlobalListener(window, 'mouseup', onThumbUp, false);
-      addGlobalListener(window, 'touchend', onThumbUp, false);
-      addGlobalListener(window, 'pointerup', onThumbUp, false);
-    }
-  };
+function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
+    let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , 'aria-label': ariaLabel  } = props;
+    let { locale: locale , direction: direction  } = $kZqDi$reactariai18n.useLocale();
+    // 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);
+    // @ts-ignore - ignore unused incompatible props
+    let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps  } = $kZqDi$reactariaslider.useSlider({
+        ...props,
+        'aria-label': ariaLabel
+    }, state, trackRef);
+    let { inputProps: inputProps , thumbProps: thumbProps  } = $kZqDi$reactariaslider.useSliderThumb({
+        index: 0,
+        orientation: orientation,
+        isDisabled: props.isDisabled,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let generateBackground = ()=>{
+        let value = state.getDisplayColor();
+        let to;
+        if (orientation === 'vertical') to = 'top';
+        else if (direction === 'ltr') to = 'right';
+        else to = 'left';
+        switch(channel){
+            case 'hue':
+                return `linear-gradient(to ${to}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
+            case 'lightness':
+                {
+                    // 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');
+                    return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
+                }
+            case 'saturation':
+            case 'brightness':
+            case 'red':
+            case 'green':
+            case 'blue':
+            case 'alpha':
+                {
+                    let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
+                    let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
+                    return `linear-gradient(to ${to}, ${start}, ${end})`;
+                }
+            default:
+                throw new Error('Unknown color channel: ' + channel);
+        }
+    };
+    let thumbPosition = state.getThumbPercent(0);
+    if (orientation === 'vertical' || direction === 'rtl') thumbPosition = 1 - thumbPosition;
+    return {
+        trackProps: {
+            ...$kZqDi$reactariautils.mergeProps(groupProps, trackProps),
+            style: {
+                position: 'relative',
+                touchAction: 'none',
+                background: generateBackground()
+            }
+        },
+        inputProps: inputProps,
+        thumbProps: {
+            ...thumbProps,
+            style: {
+                touchAction: 'none',
+                position: 'absolute',
+                [orientation === 'vertical' ? 'top' : 'left']: `${thumbPosition * 100}%`,
+                transform: 'translate(-50%, -50%)'
+            }
+        },
+        labelProps: labelProps,
+        outputProps: outputProps
+    };
+}
 
-  let onThumbUp = e => {
-    var _e$pointerId, _e$changedTouches;
 
-    let id = (_e$pointerId = e.pointerId) != null ? _e$pointerId : (_e$changedTouches = e.changedTouches) == null ? void 0 : _e$changedTouches[0].identifier;
+var $1d29bf243d4a9a53$exports = {};
 
-    if (id === currentPointer.current) {
-      focusInput();
-      state.setDragging(false);
-      currentPointer.current = undefined;
-      isOnTrack.current = false;
-      removeGlobalListener(window, 'mouseup', onThumbUp, false);
-      removeGlobalListener(window, 'touchend', onThumbUp, false);
-      removeGlobalListener(window, 'pointerup', onThumbUp, false);
-    }
-  };
-
-  let onTrackDown = (track, id, pageX, pageY) => {
-    let rect = track.getBoundingClientRect();
-    let x = pageX - rect.x - rect.width / 2;
-    let y = pageY - rect.y - rect.height / 2;
-    let radius = Math.sqrt(x * x + y * y);
-
-    if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
-      isOnTrack.current = true;
-      currentPointer.current = id;
-      stateRef.current.setHueFromPoint(x, y, radius);
-      focusInput();
-      state.setDragging(true);
-      addGlobalListener(window, 'mouseup', onTrackUp, false);
-      addGlobalListener(window, 'touchend', onTrackUp, false);
-      addGlobalListener(window, 'pointerup', onTrackUp, false);
-    }
-  };
+$parcel$export($1d29bf243d4a9a53$exports, "useColorWheel", () => $1d29bf243d4a9a53$export$9064ff4e44b3729a);
 
-  let onTrackUp = e => {
-    var _e$pointerId2, _e$changedTouches2;
 
-    let id = (_e$pointerId2 = e.pointerId) != null ? _e$pointerId2 : (_e$changedTouches2 = e.changedTouches) == null ? void 0 : _e$changedTouches2[0].identifier;
 
-    if (isOnTrack.current && id === currentPointer.current) {
-      isOnTrack.current = false;
-      currentPointer.current = undefined;
-      state.setDragging(false);
-      focusInput();
-      removeGlobalListener(window, 'mouseup', onTrackUp, false);
-      removeGlobalListener(window, 'touchend', onTrackUp, false);
-      removeGlobalListener(window, 'pointerup', onTrackUp, false);
-    }
-  };
-
-  let {
-    keyboardProps
-  } = useKeyboard({
-    onKeyDown(e) {
-      switch (e.key) {
-        case 'PageUp':
-          e.preventDefault();
-          state.increment($c5e318998f160f365e09b073e8447c3d$var$PAGE_MIN_STEP_SIZE);
-          break;
-
-        case 'PageDown':
-          e.preventDefault();
-          state.decrement($c5e318998f160f365e09b073e8447c3d$var$PAGE_MIN_STEP_SIZE);
-          break;
-      }
-    }
 
-  });
-  let trackInteractions = isDisabled ? {} : mergeProps({
-    onMouseDown: e => {
-      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
-        return;
-      }
+function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
+    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , 'aria-label': ariaLabel  } = props;
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $kZqDi$reactariautils.useGlobalListeners();
+    let thumbRadius = (innerRadius + outerRadius) / 2;
+    let focusInput = $kZqDi$react.useCallback(()=>{
+        if (inputRef.current) $kZqDi$reactariautils.focusWithoutScrolling(inputRef.current);
+    }, [
+        inputRef
+    ]);
+    let stateRef = $kZqDi$react.useRef(null);
+    stateRef.current = state;
+    let currentPosition = $kZqDi$react.useRef(null);
+    let { keyboardProps: keyboardProps  } = $kZqDi$reactariainteractions.useKeyboard({
+        onKeyDown (e) {
+            // these are the cases that useMove doesn't handle
+            if (!/^(PageUp|PageDown)$/.test(e.key)) {
+                e.continuePropagation();
+                return;
+            }
+            // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
+            e.preventDefault();
+            // remember to set this and unset it so that onChangeEnd is fired
+            stateRef.current.setDragging(true);
+            switch(e.key){
+                case 'PageUp':
+                    e.preventDefault();
+                    state.increment(stateRef.current.pageStep);
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    state.decrement(stateRef.current.pageStep);
+                    break;
+            }
+            stateRef.current.setDragging(false);
+        }
+    });
+    let moveHandler = {
+        onMoveStart () {
+            currentPosition.current = null;
+            state.setDragging(true);
+        },
+        onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey  }) {
+            if (currentPosition.current == null) currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
+            currentPosition.current.x += deltaX;
+            currentPosition.current.y += deltaY;
+            if (pointerType === 'keyboard') {
+                if (deltaX > 0 || deltaY < 0) state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
+                else if (deltaX < 0 || deltaY > 0) state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
+            } else stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
+        },
+        onMoveEnd () {
+            isOnTrack.current = undefined;
+            state.setDragging(false);
+            focusInput();
+        }
+    };
+    let { moveProps: movePropsThumb  } = $kZqDi$reactariainteractions.useMove(moveHandler);
+    let currentPointer = $kZqDi$react.useRef(undefined);
+    let isOnTrack = $kZqDi$react.useRef(false);
+    let { moveProps: movePropsContainer  } = $kZqDi$reactariainteractions.useMove({
+        onMoveStart () {
+            if (isOnTrack.current) moveHandler.onMoveStart();
+        },
+        onMove (e) {
+            if (isOnTrack.current) moveHandler.onMove(e);
+        },
+        onMoveEnd () {
+            if (isOnTrack.current) moveHandler.onMoveEnd();
+        }
+    });
+    let onThumbDown = (id)=>{
+        if (!state.isDragging) {
+            currentPointer.current = id;
+            focusInput();
+            state.setDragging(true);
+            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onThumbUp, false);
+            else {
+                addGlobalListener(window, 'mouseup', onThumbUp, false);
+                addGlobalListener(window, 'touchend', onThumbUp, false);
+            }
+        }
+    };
+    let onThumbUp = (e)=>{
+        var ref;
+        var _pointerId;
+        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        if (id === currentPointer.current) {
+            focusInput();
+            state.setDragging(false);
+            currentPointer.current = undefined;
+            isOnTrack.current = false;
+            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onThumbUp, false);
+            else {
+                removeGlobalListener(window, 'mouseup', onThumbUp, false);
+                removeGlobalListener(window, 'touchend', onThumbUp, false);
+            }
+        }
+    };
+    let onTrackDown = (track, id, pageX, pageY)=>{
+        let rect = track.getBoundingClientRect();
+        let x = pageX - rect.x - rect.width / 2;
+        let y = pageY - rect.y - rect.height / 2;
+        let radius = Math.sqrt(x * x + y * y);
+        if (innerRadius < radius && radius < outerRadius && !state.isDragging && currentPointer.current === undefined) {
+            isOnTrack.current = true;
+            currentPointer.current = id;
+            stateRef.current.setHueFromPoint(x, y, radius);
+            focusInput();
+            state.setDragging(true);
+            if (typeof PointerEvent !== 'undefined') addGlobalListener(window, 'pointerup', onTrackUp, false);
+            else {
+                addGlobalListener(window, 'mouseup', onTrackUp, false);
+                addGlobalListener(window, 'touchend', onTrackUp, false);
+            }
+        }
+    };
+    let onTrackUp = (e)=>{
+        var ref;
+        var _pointerId;
+        let id = (_pointerId = e.pointerId) !== null && _pointerId !== void 0 ? _pointerId : (ref = e.changedTouches) === null || ref === void 0 ? void 0 : ref[0].identifier;
+        if (isOnTrack.current && id === currentPointer.current) {
+            isOnTrack.current = false;
+            currentPointer.current = undefined;
+            state.setDragging(false);
+            focusInput();
+            if (typeof PointerEvent !== 'undefined') removeGlobalListener(window, 'pointerup', onTrackUp, false);
+            else {
+                removeGlobalListener(window, 'mouseup', onTrackUp, false);
+                removeGlobalListener(window, 'touchend', onTrackUp, false);
+            }
+        }
+    };
+    let trackInteractions = isDisabled ? {
+    } : $kZqDi$reactariautils.mergeProps({
+        ...typeof PointerEvent !== 'undefined' ? {
+            onPointerDown: (e)=>{
+                if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+                onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
+            }
+        } : {
+            onMouseDown: (e)=>{
+                if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+                onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);
+            },
+            onTouchStart: (e)=>{
+                onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+            }
+        }
+    }, movePropsContainer);
+    let thumbInteractions = isDisabled ? {
+    } : $kZqDi$reactariautils.mergeProps({
+        onMouseDown: (e)=>{
+            if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
+            onThumbDown(undefined);
+        },
+        onPointerDown: (e)=>{
+            if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
+            onThumbDown(e.pointerId);
+        },
+        onTouchStart: (e)=>{
+            onThumbDown(e.changedTouches[0].identifier);
+        }
+    }, keyboardProps, movePropsThumb);
+    let { x: x1 , y: y1  } = state.getThumbPosition(thumbRadius);
+    // Provide a default aria-label if none is given
+    let { locale: locale  } = $kZqDi$reactariai18n.useLocale();
+    if (ariaLabel == null && props['aria-labelledby'] == null) ariaLabel = state.value.getChannelName('hue', locale);
+    let inputLabellingProps = $kZqDi$reactariautils.useLabels({
+        ...props,
+        'aria-label': ariaLabel
+    });
+    let { minValue: minValue , maxValue: maxValue , step: step  } = state.value.getChannelRange('hue');
+    return {
+        trackProps: {
+            ...trackInteractions,
+            style: {
+                position: 'relative',
+                touchAction: 'none',
+                width: outerRadius * 2,
+                height: outerRadius * 2,
+                background: `
+          conic-gradient(
+            from 90deg,
+            hsl(0, 100%, 50%),
+            hsl(30, 100%, 50%),
+            hsl(60, 100%, 50%),
+            hsl(90, 100%, 50%),
+            hsl(120, 100%, 50%),
+            hsl(150, 100%, 50%),
+            hsl(180, 100%, 50%),
+            hsl(210, 100%, 50%),
+            hsl(240, 100%, 50%),
+            hsl(270, 100%, 50%),
+            hsl(300, 100%, 50%),
+            hsl(330, 100%, 50%),
+            hsl(360, 100%, 50%)
+          )
+        `,
+                clipPath: `path(evenodd, "${$1d29bf243d4a9a53$var$circlePath(outerRadius, outerRadius, outerRadius)} ${$1d29bf243d4a9a53$var$circlePath(outerRadius, outerRadius, innerRadius)}")`
+            }
+        },
+        thumbProps: {
+            ...thumbInteractions,
+            style: {
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: `translate(calc(${x1}px - 50%), calc(${y1}px - 50%))`,
+                touchAction: 'none'
+            }
+        },
+        inputProps: $kZqDi$reactariautils.mergeProps(inputLabellingProps, {
+            type: 'range',
+            min: String(minValue),
+            max: String(maxValue),
+            step: String(step),
+            'aria-valuetext': state.value.formatChannelValue('hue', locale),
+            disabled: isDisabled,
+            value: `${state.value.getChannelValue('hue')}`,
+            onChange: (e)=>{
+                state.setHue(parseFloat(e.target.value));
+            }
+        })
+    };
+}
+// Creates an SVG path string for a circle.
+function $1d29bf243d4a9a53$var$circlePath(cx, cy, r) {
+    return `M ${cx}, ${cy} m ${-r}, 0 a ${r}, ${r}, 0, 1, 0, ${r * 2}, 0 a ${r}, ${r}, 0, 1, 0 ${-r * 2}, 0`;
+}
 
-      onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);
-    },
-    onPointerDown: e => {
-      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
-        return;
-      }
 
-      onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
-    },
-    onTouchStart: e => {
-      onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-    }
-  }, movePropsContainer);
-  let thumbInteractions = isDisabled ? {} : mergeProps({
-    onMouseDown: e => {
-      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
-        return;
-      }
+var $58c850037bc7a7ce$exports = {};
 
-      onThumbDown(undefined);
-    },
-    onPointerDown: e => {
-      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
-        return;
-      }
+$parcel$export($58c850037bc7a7ce$exports, "useColorField", () => $58c850037bc7a7ce$export$77e32ca575a28fdf);
 
-      onThumbDown(e.pointerId);
-    },
-    onTouchStart: e => {
-      onThumbDown(e.changedTouches[0].identifier);
-    }
-  }, movePropsThumb, keyboardProps);
-  let {
-    x,
-    y
-  } = state.getThumbPosition(thumbRadius); // Provide a default aria-label if none is given
-
-  let {
-    locale
-  } = useLocale();
-
-  if (ariaLabel == null && props['aria-labelledby'] == null) {
-    ariaLabel = state.value.getChannelName('hue', locale);
-  }
-
-  let inputLabellingProps = useLabels(_babelRuntimeHelpersExtends({}, props, {
-    'aria-label': ariaLabel
-  }));
-  return {
-    trackProps: _babelRuntimeHelpersExtends({}, trackInteractions, {
-      style: {
-        position: 'relative',
-        touchAction: 'none',
-        width: outerRadius * 2,
-        height: outerRadius * 2,
-        background: "\n          conic-gradient(\n            from 90deg,\n            hsl(0, 100%, 50%),\n            hsl(30, 100%, 50%),\n            hsl(60, 100%, 50%),\n            hsl(90, 100%, 50%),\n            hsl(120, 100%, 50%),\n            hsl(150, 100%, 50%),\n            hsl(180, 100%, 50%),\n            hsl(210, 100%, 50%),\n            hsl(240, 100%, 50%),\n            hsl(270, 100%, 50%),\n            hsl(300, 100%, 50%),\n            hsl(330, 100%, 50%),\n            hsl(360, 100%, 50%)\n          )\n        ",
-        clipPath: "path(evenodd, \"" + $c5e318998f160f365e09b073e8447c3d$var$circlePath(outerRadius, outerRadius, outerRadius) + " " + $c5e318998f160f365e09b073e8447c3d$var$circlePath(outerRadius, outerRadius, innerRadius) + "\")"
-      }
-    }),
-    thumbProps: _babelRuntimeHelpersExtends({}, thumbInteractions, {
-      style: {
-        position: 'absolute',
-        left: '50%',
-        top: '50%',
-        transform: "translate(calc(" + x + "px - 50%), calc(" + y + "px - 50%))",
-        touchAction: 'none'
-      }
-    }),
-    inputProps: mergeProps(inputLabellingProps, {
-      type: 'range',
-      min: '0',
-      max: '360',
-      step: String(step),
-      'aria-valuetext': state.value.formatChannelValue('hue', locale),
-      disabled: isDisabled,
-      value: "" + state.value.getChannelValue('hue'),
-      onChange: e => {
-        state.setHue(parseFloat(e.target.value));
-      }
-    })
-  };
-} // Creates an SVG path string for a circle.
 
 
-exports.useColorWheel = useColorWheel;
 
-function $c5e318998f160f365e09b073e8447c3d$var$circlePath(cx, cy, r) {
-  return "M " + cx + ", " + cy + " m " + -r + ", 0 a " + r + ", " + r + ", 0, 1, 0, " + r * 2 + ", 0 a " + r + ", " + r + ", 0, 1, 0 " + -r * 2 + ", 0";
+
+function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
+    let { isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired  } = props;
+    let { colorValue: colorValue , inputValue: inputValue , commit: commit , increment: increment , decrement: decrement , incrementToMax: incrementToMax , decrementToMin: decrementToMin  } = state;
+    let inputId = $kZqDi$reactariautils.useId();
+    let { spinButtonProps: spinButtonProps  } = $kZqDi$reactariaspinbutton.useSpinButton({
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly,
+        isRequired: isRequired,
+        maxValue: 16777215,
+        minValue: 0,
+        onIncrement: increment,
+        onIncrementToMax: incrementToMax,
+        onDecrement: decrement,
+        onDecrementToMin: decrementToMin,
+        value: colorValue ? colorValue.toHexInt() : undefined,
+        textValue: colorValue ? colorValue.toString('hex') : undefined
+    });
+    let [focusWithin, setFocusWithin] = $kZqDi$react.useState(false);
+    let { focusWithinProps: focusWithinProps  } = $kZqDi$reactariainteractions.useFocusWithin({
+        isDisabled: isDisabled,
+        onFocusWithinChange: setFocusWithin
+    });
+    let onWheel = $kZqDi$react.useCallback((e)=>{
+        if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+        if (e.deltaY > 0) increment();
+        else if (e.deltaY < 0) decrement();
+    }, [
+        decrement,
+        increment
+    ]);
+    // If the input isn't supposed to receive input, disable scrolling.
+    let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
+    $kZqDi$reactariainteractions.useScrollWheel({
+        onScroll: onWheel,
+        isDisabled: scrollingDisabled
+    }, ref);
+    let onChange = (value)=>{
+        state.setInputValue(value);
+    };
+    let { labelProps: labelProps , inputProps: inputProps  } = $kZqDi$reactariatextfield.useFormattedTextField($kZqDi$reactariautils.mergeProps(props, {
+        id: inputId,
+        value: inputValue,
+        defaultValue: undefined,
+        type: 'text',
+        autoComplete: 'off',
+        onChange: onChange
+    }), state, ref);
+    return {
+        labelProps: labelProps,
+        inputProps: $kZqDi$reactariautils.mergeProps(inputProps, spinButtonProps, focusWithinProps, {
+            role: 'textbox',
+            'aria-valuemax': null,
+            'aria-valuemin': null,
+            'aria-valuenow': null,
+            'aria-valuetext': null,
+            autoCorrect: 'off',
+            spellCheck: 'false',
+            onBlur: commit
+        })
+    };
 }
 
-/**
- * Provides the behavior and accessibility implementation for a color field component.
- * Color fields allow users to enter and adjust a hex color value.
- */
-function useColorField(props, state, ref) {
-  let {
-    isDisabled,
-    isReadOnly,
-    isRequired
-  } = props;
-  let {
-    colorValue,
-    inputValue,
-    setInputValue,
-    commit,
-    increment,
-    decrement,
-    incrementToMax,
-    decrementToMin
-  } = state;
-  let inputId = useId();
-  let {
-    spinButtonProps
-  } = useSpinButton({
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    maxValue: 0xFFFFFF,
-    minValue: 0,
-    onIncrement: increment,
-    onIncrementToMax: incrementToMax,
-    onDecrement: decrement,
-    onDecrementToMin: decrementToMin,
-    value: colorValue ? colorValue.toHexInt() : undefined,
-    textValue: colorValue ? colorValue.toString('hex') : undefined
-  });
 
-  let onWheel = e => {
-    if (isDisabled || isReadOnly) {
-      return;
-    }
+$parcel$exportWildcard(module.exports, $47925bd68062ac17$exports);
+$parcel$exportWildcard(module.exports, $afbb9647440a7f5b$exports);
+$parcel$exportWildcard(module.exports, $1d29bf243d4a9a53$exports);
+$parcel$exportWildcard(module.exports, $58c850037bc7a7ce$exports);
 
-    if (e.deltaY < 0) {
-      increment();
-    } else {
-      decrement();
-    }
-  };
-
-  let {
-    labelProps,
-    inputProps
-  } = useTextField(mergeProps(props, {
-    id: inputId,
-    value: inputValue,
-    type: 'text',
-    autoComplete: 'off',
-    onChange: setInputValue
-  }), ref);
-  return {
-    labelProps,
-    inputProps: mergeProps(inputProps, spinButtonProps, {
-      role: 'textbox',
-      'aria-valuemax': null,
-      'aria-valuemin': null,
-      'aria-valuenow': null,
-      'aria-valuetext': null,
-      autoCorrect: 'off',
-      onBlur: commit,
-      onWheel
-    })
-  };
-}
 
-exports.useColorField = useColorField;
 //# sourceMappingURL=main.js.map