@react-aria/color 3.0.0-beta.8 → 3.0.0-beta.9

package/dist/module.js

@@ -1,31 +1,529 @@
-import {mergeProps as $l7vYy$mergeProps, useGlobalListeners as $l7vYy$useGlobalListeners, focusWithoutScrolling as $l7vYy$focusWithoutScrolling, useLabels as $l7vYy$useLabels, useId as $l7vYy$useId} from "@react-aria/utils";
-import {useLocale as $l7vYy$useLocale} from "@react-aria/i18n";
-import {useSlider as $l7vYy$useSlider, useSliderThumb as $l7vYy$useSliderThumb} from "@react-aria/slider";
-import {useCallback as $l7vYy$useCallback, useRef as $l7vYy$useRef, useState as $l7vYy$useState} from "react";
-import {useMove as $l7vYy$useMove, useKeyboard as $l7vYy$useKeyboard, useFocusWithin as $l7vYy$useFocusWithin, useScrollWheel as $l7vYy$useScrollWheel} from "@react-aria/interactions";
-import {useFormattedTextField as $l7vYy$useFormattedTextField} from "@react-aria/textfield";
-import {useSpinButton as $l7vYy$useSpinButton} from "@react-aria/spinbutton";
+import {useGlobalListeners as $7KHxM$useGlobalListeners, focusWithoutScrolling as $7KHxM$focusWithoutScrolling, mergeProps as $7KHxM$mergeProps, isIOS as $7KHxM$isIOS, isAndroid as $7KHxM$isAndroid, useLabels as $7KHxM$useLabels, useId as $7KHxM$useId} from "@react-aria/utils";
+import {useRef as $7KHxM$useRef, useCallback as $7KHxM$useCallback, useState as $7KHxM$useState} from "react";
+import {useKeyboard as $7KHxM$useKeyboard, useMove as $7KHxM$useMove, useFocusWithin as $7KHxM$useFocusWithin, useScrollWheel as $7KHxM$useScrollWheel} from "@react-aria/interactions";
+import {useMessageFormatter as $7KHxM$useMessageFormatter, useLocale as $7KHxM$useLocale} from "@react-aria/i18n";
+import {useVisuallyHidden as $7KHxM$useVisuallyHidden} from "@react-aria/visually-hidden";
+import {useSlider as $7KHxM$useSlider, useSliderThumb as $7KHxM$useSliderThumb} from "@react-aria/slider";
+import {useFormattedTextField as $7KHxM$useFormattedTextField} from "@react-aria/textfield";
+import {useSpinButton as $7KHxM$useSpinButton} from "@react-aria/spinbutton";
 
+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 $8992d2cc13930492$exports = {};
+var $60bd7d6e45dcddfa$exports = {};
+
+$parcel$export($60bd7d6e45dcddfa$exports, "useColorArea", () => $60bd7d6e45dcddfa$export$2f92a7a615a014f6);
+
+var $052cfdf4c32eb7c3$exports = {};
+var $eccab2b0118aef08$exports = {};
+$eccab2b0118aef08$exports = JSON.parse("{\"twoDimensionalSlider\":\"شريط تمرير ثنائي الأبعاد\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $bf2b4507594e3d45$exports = {};
+$bf2b4507594e3d45$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D плъзгач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $01c08487af7ecd14$exports = {};
+$01c08487af7ecd14$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D posuvník\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $5e997db6ea0d10f6$exports = {};
+$5e997db6ea0d10f6$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-skyder\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $fe5998f640a79fd2$exports = {};
+$fe5998f640a79fd2$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-Schieberegler\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $18e4d1d5b500a9ee$exports = {};
+$18e4d1d5b500a9ee$exports = JSON.parse("{\"twoDimensionalSlider\":\"Ρυθμιστικό 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $bf90a11a7a42a0f7$exports = {};
+$bf90a11a7a42a0f7$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slider\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $dd0d25f885b5c5f3$exports = {};
+$dd0d25f885b5c5f3$exports = JSON.parse("{\"twoDimensionalSlider\":\"Control deslizante en 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $d950967017e3485b$exports = {};
+$d950967017e3485b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liugur\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $00a415a3f0ab315a$exports = {};
+$00a415a3f0ab315a$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-liukusäädin\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $d80f30fe86c95741$exports = {};
+$d80f30fe86c95741$exports = JSON.parse("{\"twoDimensionalSlider\":\"Curseur 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $6912afb584340a2e$exports = {};
+$6912afb584340a2e$exports = JSON.parse("{\"twoDimensionalSlider\":\"מחוון דו-ממדי\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $7b97fcacd84ec90f$exports = {};
+$7b97fcacd84ec90f$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D kliznik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $da9b443e89eebc6b$exports = {};
+$da9b443e89eebc6b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D csúszka\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $35f135b45eb4d95b$exports = {};
+$35f135b45eb4d95b$exports = JSON.parse("{\"twoDimensionalSlider\":\"Dispositivo di scorrimento 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $760b09448e39c6cd$exports = {};
+$760b09448e39c6cd$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D スライダー\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $fc7b7d43be9703ec$exports = {};
+$fc7b7d43be9703ec$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 슬라이더\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $74918a1664156912$exports = {};
+$74918a1664156912$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D slankiklis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $4e6cde11c2bc9840$exports = {};
+$4e6cde11c2bc9840$exports = JSON.parse("{\"twoDimensionalSlider\":\"Plaknes slīdnis\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $6faa3defebc3eb72$exports = {};
+$6faa3defebc3eb72$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-glidebryter\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $6ac9b6b1b7e3ca12$exports = {};
+$6ac9b6b1b7e3ca12$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-schuifregelaar\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $1be8b0ee8841f1e7$exports = {};
+$1be8b0ee8841f1e7$exports = JSON.parse("{\"twoDimensionalSlider\":\"Suwak 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $f9507c2d404ed689$exports = {};
+$f9507c2d404ed689$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controle deslizante 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $8f872ea59c02d67e$exports = {};
+$8f872ea59c02d67e$exports = JSON.parse("{\"twoDimensionalSlider\":\"Controlo de deslize 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $b03b45b62a7ccae4$exports = {};
+$b03b45b62a7ccae4$exports = JSON.parse("{\"twoDimensionalSlider\":\"Cursor 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $f1107d94c09df9b8$exports = {};
+$f1107d94c09df9b8$exports = JSON.parse("{\"twoDimensionalSlider\":\"Двумерный ползунок\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $b61325f242fafc7c$exports = {};
+$b61325f242fafc7c$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D jazdec\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $f44b7cf39ac8f315$exports = {};
+$f44b7cf39ac8f315$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-drsnik\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
 
-$parcel$export($8992d2cc13930492$exports, "useColorSlider", () => $8992d2cc13930492$export$106b7a4e66508f66);
+var $aa8cd83fc8d4982b$exports = {};
+$aa8cd83fc8d4982b$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D клизач\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
 
 
+var $7c4f4e5bb7c06f1e$exports = {};
+$7c4f4e5bb7c06f1e$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D-reglage\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
 
-function $8992d2cc13930492$export$106b7a4e66508f66(props, state) {
+
+var $8045cf930ef745aa$exports = {};
+$8045cf930ef745aa$exports = JSON.parse("{\"twoDimensionalSlider\":\"2B slayt gösterisi\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $ee2044a77f24b118$exports = {};
+$ee2044a77f24b118$exports = JSON.parse("{\"twoDimensionalSlider\":\"Повзунок 2D\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $4e1dbc65a687dd93$exports = {};
+$4e1dbc65a687dd93$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑块\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+var $b0fef28529309aa6$exports = {};
+$b0fef28529309aa6$exports = JSON.parse("{\"twoDimensionalSlider\":\"2D 滑桿\",\"colorNameAndValue\":\"{name}: {value}\",\"x/y\":\"{x} / {y}\"}");
+
+
+$052cfdf4c32eb7c3$exports = {
+    "ar-AE": $eccab2b0118aef08$exports,
+    "bg-BG": $bf2b4507594e3d45$exports,
+    "cs-CZ": $01c08487af7ecd14$exports,
+    "da-DK": $5e997db6ea0d10f6$exports,
+    "de-DE": $fe5998f640a79fd2$exports,
+    "el-GR": $18e4d1d5b500a9ee$exports,
+    "en-US": $bf90a11a7a42a0f7$exports,
+    "es-ES": $dd0d25f885b5c5f3$exports,
+    "et-EE": $d950967017e3485b$exports,
+    "fi-FI": $00a415a3f0ab315a$exports,
+    "fr-FR": $d80f30fe86c95741$exports,
+    "he-IL": $6912afb584340a2e$exports,
+    "hr-HR": $7b97fcacd84ec90f$exports,
+    "hu-HU": $da9b443e89eebc6b$exports,
+    "it-IT": $35f135b45eb4d95b$exports,
+    "ja-JP": $760b09448e39c6cd$exports,
+    "ko-KR": $fc7b7d43be9703ec$exports,
+    "lt-LT": $74918a1664156912$exports,
+    "lv-LV": $4e6cde11c2bc9840$exports,
+    "nb-NO": $6faa3defebc3eb72$exports,
+    "nl-NL": $6ac9b6b1b7e3ca12$exports,
+    "pl-PL": $1be8b0ee8841f1e7$exports,
+    "pt-BR": $f9507c2d404ed689$exports,
+    "pt-PT": $8f872ea59c02d67e$exports,
+    "ro-RO": $b03b45b62a7ccae4$exports,
+    "ru-RU": $f1107d94c09df9b8$exports,
+    "sk-SK": $b61325f242fafc7c$exports,
+    "sl-SI": $f44b7cf39ac8f315$exports,
+    "sr-SP": $aa8cd83fc8d4982b$exports,
+    "sv-SE": $7c4f4e5bb7c06f1e$exports,
+    "tr-TR": $8045cf930ef745aa$exports,
+    "uk-UA": $ee2044a77f24b118$exports,
+    "zh-CN": $4e1dbc65a687dd93$exports,
+    "zh-TW": $b0fef28529309aa6$exports
+};
+
+
+
+
+
+
+function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
+    let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef  } = props;
+    let formatMessage = $7KHxM$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($052cfdf4c32eb7c3$exports)));
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $7KHxM$useGlobalListeners();
+    let { direction: direction , locale: locale  } = $7KHxM$useLocale();
+    let focusedInputRef = $7KHxM$useRef(null);
+    let focusInput = $7KHxM$useCallback((inputRef = inputXRef)=>{
+        if (inputRef.current) $7KHxM$focusWithoutScrolling(inputRef.current);
+    }, [
+        inputXRef
+    ]);
+    let stateRef = $7KHxM$useRef(null);
+    stateRef.current = state;
+    let { xChannel: xChannel , yChannel: yChannel  } = stateRef.current.channels;
+    let xChannelStep1 = stateRef.current.xChannelStep;
+    let yChannelStep1 = stateRef.current.xChannelStep;
+    let currentPosition = $7KHxM$useRef(null);
+    let { keyboardProps: keyboardProps  } = $7KHxM$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;
+            }
+        }
+    });
+    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  } = $7KHxM$useMove(moveHandler);
+    let currentPointer = $7KHxM$useRef(undefined);
+    let isOnColorArea = $7KHxM$useRef(false);
+    let { moveProps: movePropsContainer  } = $7KHxM$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 ? {
+    } : $7KHxM$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 ? {
+    } : $7KHxM$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 = $7KHxM$isIOS() || $7KHxM$isAndroid();
+    let xInputLabellingProps = $7KHxM$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 = $7KHxM$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 = $7KHxM$useLabels(props);
+    let getValueTitle = ()=>[
+            formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName('red', locale),
+                value: state.value.formatChannelValue('red', locale)
+            }),
+            formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName('green', locale),
+                value: state.value.formatChannelValue('green', locale)
+            }),
+            formatMessage('colorNameAndValue', {
+                name: state.value.getChannelName('blue', locale),
+                value: state.value.formatChannelValue('blue', locale)
+            })
+        ].join(', ')
+    ;
+    let ariaRoleDescription = isMobile ? null : formatMessage('twoDimensionalSlider');
+    let { visuallyHiddenProps: visuallyHiddenProps  } = $7KHxM$useVisuallyHidden({
+        style: {
+            opacity: '0.0001',
+            width: '100%',
+            height: '100%',
+            pointerEvents: 'none'
+        }
+    });
+    return {
+        colorAreaProps: {
+            ...colorAriaLabellingProps,
+            ...colorAreaInteractions,
+            role: 'group'
+        },
+        gradientProps: {
+            role: 'presentation'
+        },
+        thumbProps: {
+            ...thumbInteractions,
+            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));
+            }
+        }
+    };
+}
+
+
+var $40af666d6c251e36$exports = {};
+
+$parcel$export($40af666d6c251e36$exports, "useColorSlider", () => $40af666d6c251e36$export$106b7a4e66508f66);
+
+
+
+function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
     let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , 'aria-label': ariaLabel  } = props;
-    let { locale: locale , direction: direction  } = $l7vYy$useLocale();
+    let { locale: locale , direction: direction  } = $7KHxM$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  } = $l7vYy$useSlider({
+    let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps  } = $7KHxM$useSlider({
         ...props,
         'aria-label': ariaLabel
     }, state, trackRef);
-    let { inputProps: inputProps , thumbProps: thumbProps  } = $l7vYy$useSliderThumb({
+    let { inputProps: inputProps , thumbProps: thumbProps  } = $7KHxM$useSliderThumb({
         index: 0,
         orientation: orientation,
         isDisabled: props.isDisabled,
@@ -71,7 +569,7 @@ function $8992d2cc13930492$export$106b7a4e66508f66(props, state) {
     if (orientation === 'vertical' || direction === 'rtl') thumbPosition = 1 - thumbPosition;
     return {
         trackProps: {
-            ...$l7vYy$mergeProps(groupProps, trackProps),
+            ...$7KHxM$mergeProps(groupProps, trackProps),
             style: {
                 position: 'relative',
                 touchAction: 'none',
@@ -94,38 +592,61 @@ function $8992d2cc13930492$export$106b7a4e66508f66(props, state) {
 }
 
 
-var $e8f573825f77431c$exports = {};
+var $b4a0a4fdc900495e$exports = {};
 
-$parcel$export($e8f573825f77431c$exports, "useColorWheel", () => $e8f573825f77431c$export$9064ff4e44b3729a);
+$parcel$export($b4a0a4fdc900495e$exports, "useColorWheel", () => $b4a0a4fdc900495e$export$9064ff4e44b3729a);
 
 
 
 
-const $e8f573825f77431c$var$PAGE_MIN_STEP_SIZE = 6;
-function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
-    let { isDisabled: isDisabled , step: step = 1 , innerRadius: innerRadius , outerRadius: outerRadius , 'aria-label': ariaLabel  } = props;
-    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $l7vYy$useGlobalListeners();
+function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
+    let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , 'aria-label': ariaLabel  } = props;
+    let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener  } = $7KHxM$useGlobalListeners();
     let thumbRadius = (innerRadius + outerRadius) / 2;
-    let focusInput = $l7vYy$useCallback(()=>{
-        if (inputRef.current) $l7vYy$focusWithoutScrolling(inputRef.current);
+    let focusInput = $7KHxM$useCallback(()=>{
+        if (inputRef.current) $7KHxM$focusWithoutScrolling(inputRef.current);
     }, [
         inputRef
     ]);
-    let stateRef = $l7vYy$useRef(null);
+    let stateRef = $7KHxM$useRef(null);
     stateRef.current = state;
-    let currentPosition = $l7vYy$useRef(null);
+    let currentPosition = $7KHxM$useRef(null);
+    let { keyboardProps: keyboardProps  } = $7KHxM$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  }) {
+        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();
-                else if (deltaX < 0 || deltaY > 0) state.decrement();
+                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 () {
@@ -134,10 +655,10 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
             focusInput();
         }
     };
-    let { moveProps: movePropsThumb  } = $l7vYy$useMove(moveHandler);
-    let currentPointer = $l7vYy$useRef(undefined);
-    let isOnTrack = $l7vYy$useRef(false);
-    let { moveProps: movePropsContainer  } = $l7vYy$useMove({
+    let { moveProps: movePropsThumb  } = $7KHxM$useMove(moveHandler);
+    let currentPointer = $7KHxM$useRef(undefined);
+    let isOnTrack = $7KHxM$useRef(false);
+    let { moveProps: movePropsContainer  } = $7KHxM$useMove({
         onMoveStart () {
             if (isOnTrack.current) moveHandler.onMoveStart();
         },
@@ -210,22 +731,8 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
             }
         }
     };
-    let { keyboardProps: keyboardProps  } = $l7vYy$useKeyboard({
-        onKeyDown (e) {
-            switch(e.key){
-                case 'PageUp':
-                    e.preventDefault();
-                    state.increment($e8f573825f77431c$var$PAGE_MIN_STEP_SIZE);
-                    break;
-                case 'PageDown':
-                    e.preventDefault();
-                    state.decrement($e8f573825f77431c$var$PAGE_MIN_STEP_SIZE);
-                    break;
-            }
-        }
-    });
     let trackInteractions = isDisabled ? {
-    } : $l7vYy$mergeProps({
+    } : $7KHxM$mergeProps({
         ...typeof PointerEvent !== 'undefined' ? {
             onPointerDown: (e)=>{
                 if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) return;
@@ -242,7 +749,7 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
         }
     }, movePropsContainer);
     let thumbInteractions = isDisabled ? {
-    } : $l7vYy$mergeProps({
+    } : $7KHxM$mergeProps({
         onMouseDown: (e)=>{
             if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) return;
             onThumbDown(undefined);
@@ -254,15 +761,16 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
         onTouchStart: (e)=>{
             onThumbDown(e.changedTouches[0].identifier);
         }
-    }, movePropsThumb, keyboardProps);
+    }, keyboardProps, movePropsThumb);
     let { x: x1 , y: y1  } = state.getThumbPosition(thumbRadius);
     // Provide a default aria-label if none is given
-    let { locale: locale  } = $l7vYy$useLocale();
+    let { locale: locale  } = $7KHxM$useLocale();
     if (ariaLabel == null && props['aria-labelledby'] == null) ariaLabel = state.value.getChannelName('hue', locale);
-    let inputLabellingProps = $l7vYy$useLabels({
+    let inputLabellingProps = $7KHxM$useLabels({
         ...props,
         'aria-label': ariaLabel
     });
+    let { minValue: minValue , maxValue: maxValue , step: step  } = state.value.getChannelRange('hue');
     return {
         trackProps: {
             ...trackInteractions,
@@ -289,7 +797,7 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
             hsl(360, 100%, 50%)
           )
         `,
-                clipPath: `path(evenodd, "${$e8f573825f77431c$var$circlePath(outerRadius, outerRadius, outerRadius)} ${$e8f573825f77431c$var$circlePath(outerRadius, outerRadius, innerRadius)}")`
+                clipPath: `path(evenodd, "${$b4a0a4fdc900495e$var$circlePath(outerRadius, outerRadius, outerRadius)} ${$b4a0a4fdc900495e$var$circlePath(outerRadius, outerRadius, innerRadius)}")`
             }
         },
         thumbProps: {
@@ -302,10 +810,10 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
                 touchAction: 'none'
             }
         },
-        inputProps: $l7vYy$mergeProps(inputLabellingProps, {
+        inputProps: $7KHxM$mergeProps(inputLabellingProps, {
             type: 'range',
-            min: '0',
-            max: '360',
+            min: String(minValue),
+            max: String(maxValue),
             step: String(step),
             'aria-valuetext': state.value.formatChannelValue('hue', locale),
             disabled: isDisabled,
@@ -317,24 +825,24 @@ function $e8f573825f77431c$export$9064ff4e44b3729a(props, state, inputRef) {
     };
 }
 // Creates an SVG path string for a circle.
-function $e8f573825f77431c$var$circlePath(cx, cy, r) {
+function $b4a0a4fdc900495e$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`;
 }
 
 
-var $bb9d9837d0b340e7$exports = {};
+var $f6896b05b2ecad12$exports = {};
 
-$parcel$export($bb9d9837d0b340e7$exports, "useColorField", () => $bb9d9837d0b340e7$export$77e32ca575a28fdf);
+$parcel$export($f6896b05b2ecad12$exports, "useColorField", () => $f6896b05b2ecad12$export$77e32ca575a28fdf);
 
 
 
 
 
-function $bb9d9837d0b340e7$export$77e32ca575a28fdf(props, state, ref) {
+function $f6896b05b2ecad12$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 = $l7vYy$useId();
-    let { spinButtonProps: spinButtonProps  } = $l7vYy$useSpinButton({
+    let inputId = $7KHxM$useId();
+    let { spinButtonProps: spinButtonProps  } = $7KHxM$useSpinButton({
         isDisabled: isDisabled,
         isReadOnly: isReadOnly,
         isRequired: isRequired,
@@ -347,31 +855,29 @@ function $bb9d9837d0b340e7$export$77e32ca575a28fdf(props, state, ref) {
         value: colorValue ? colorValue.toHexInt() : undefined,
         textValue: colorValue ? colorValue.toString('hex') : undefined
     });
-    let [focusWithin, setFocusWithin] = $l7vYy$useState(false);
-    let { focusWithinProps: focusWithinProps  } = $l7vYy$useFocusWithin({
+    let [focusWithin, setFocusWithin] = $7KHxM$useState(false);
+    let { focusWithinProps: focusWithinProps  } = $7KHxM$useFocusWithin({
         isDisabled: isDisabled,
         onFocusWithinChange: setFocusWithin
     });
-    let onWheel = $l7vYy$useCallback((e)=>{
+    let onWheel = $7KHxM$useCallback((e)=>{
         if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
         if (e.deltaY > 0) increment();
         else if (e.deltaY < 0) decrement();
     }, [
-        isReadOnly,
-        isDisabled,
         decrement,
         increment
     ]);
     // If the input isn't supposed to receive input, disable scrolling.
     let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
-    $l7vYy$useScrollWheel({
+    $7KHxM$useScrollWheel({
         onScroll: onWheel,
         isDisabled: scrollingDisabled
     }, ref);
     let onChange = (value)=>{
         state.setInputValue(value);
     };
-    let { labelProps: labelProps , inputProps: inputProps  } = $l7vYy$useFormattedTextField($l7vYy$mergeProps(props, {
+    let { labelProps: labelProps , inputProps: inputProps  } = $7KHxM$useFormattedTextField($7KHxM$mergeProps(props, {
         id: inputId,
         value: inputValue,
         defaultValue: undefined,
@@ -381,7 +887,7 @@ function $bb9d9837d0b340e7$export$77e32ca575a28fdf(props, state, ref) {
     }), state, ref);
     return {
         labelProps: labelProps,
-        inputProps: $l7vYy$mergeProps(inputProps, spinButtonProps, focusWithinProps, {
+        inputProps: $7KHxM$mergeProps(inputProps, spinButtonProps, focusWithinProps, {
             role: 'textbox',
             'aria-valuemax': null,
             'aria-valuemin': null,
@@ -397,5 +903,5 @@ function $bb9d9837d0b340e7$export$77e32ca575a28fdf(props, state, ref) {
 
 
 
-export {$8992d2cc13930492$export$106b7a4e66508f66 as useColorSlider, $e8f573825f77431c$export$9064ff4e44b3729a as useColorWheel, $bb9d9837d0b340e7$export$77e32ca575a28fdf as useColorField};
+export {$60bd7d6e45dcddfa$export$2f92a7a615a014f6 as useColorArea, $40af666d6c251e36$export$106b7a4e66508f66 as useColorSlider, $b4a0a4fdc900495e$export$9064ff4e44b3729a as useColorWheel, $f6896b05b2ecad12$export$77e32ca575a28fdf as useColorField};
 //# sourceMappingURL=module.js.map