@react-spectrum/color 3.0.0-nightly.3698 → 3.0.0-nightly.3709

package/dist/import.mjs

@@ -0,0 +1,548 @@
+import "./main.css";
+import {dimensionValue as $kF0Zw$dimensionValue, useStyleProps as $kF0Zw$useStyleProps, useFocusableRef as $kF0Zw$useFocusableRef, classNames as $kF0Zw$classNames, SlotProvider as $kF0Zw$SlotProvider} from "@react-spectrum/utils";
+import {mergeProps as $kF0Zw$mergeProps, useId as $kF0Zw$useId, useResizeObserver as $kF0Zw$useResizeObserver} from "@react-aria/utils";
+import $kF0Zw$react, {useRef as $kF0Zw$useRef, useState as $kF0Zw$useState, useCallback as $kF0Zw$useCallback, useEffect as $kF0Zw$useEffect} from "react";
+import {useColorArea as $kF0Zw$useColorArea, useColorWheel as $kF0Zw$useColorWheel, useColorSlider as $kF0Zw$useColorSlider, useColorField as $kF0Zw$useColorField} from "@react-aria/color";
+import {useColorAreaState as $kF0Zw$useColorAreaState, useColorWheelState as $kF0Zw$useColorWheelState, useColorSliderState as $kF0Zw$useColorSliderState, useColorFieldState as $kF0Zw$useColorFieldState} from "@react-stately/color";
+import {useFocusRing as $kF0Zw$useFocusRing} from "@react-aria/focus";
+import {useProviderProps as $kF0Zw$useProviderProps} from "@react-spectrum/provider";
+import {Label as $kF0Zw$Label} from "@react-spectrum/label";
+import {useFocusVisible as $kF0Zw$useFocusVisible, useFocus as $kF0Zw$useFocus} from "@react-aria/interactions";
+import {useLocale as $kF0Zw$useLocale} from "@react-aria/i18n";
+import {TextFieldBase as $kF0Zw$TextFieldBase} from "@react-spectrum/textfield";
+
+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});
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ /// <reference types="css-module-types" />
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+var $9d103974e3e19727$exports = {};
+
+$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle", () => $9d103974e3e19727$export$cd9afaa621b6216f, (v) => $9d103974e3e19727$export$cd9afaa621b6216f = v);
+$parcel$export($9d103974e3e19727$exports, "is-focused", () => $9d103974e3e19727$export$e7dc768d35940237, (v) => $9d103974e3e19727$export$e7dc768d35940237 = v);
+$parcel$export($9d103974e3e19727$exports, "focus-ring", () => $9d103974e3e19727$export$f39a09f249340e2a, (v) => $9d103974e3e19727$export$f39a09f249340e2a = v);
+$parcel$export($9d103974e3e19727$exports, "is-disabled", () => $9d103974e3e19727$export$d35bc1e505d1ebbf, (v) => $9d103974e3e19727$export$d35bc1e505d1ebbf = v);
+$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle-color", () => $9d103974e3e19727$export$afe4c366ed4e659c, (v) => $9d103974e3e19727$export$afe4c366ed4e659c = v);
+var $9d103974e3e19727$export$cd9afaa621b6216f;
+var $9d103974e3e19727$export$e7dc768d35940237;
+var $9d103974e3e19727$export$f39a09f249340e2a;
+var $9d103974e3e19727$export$d35bc1e505d1ebbf;
+var $9d103974e3e19727$export$afe4c366ed4e659c;
+$9d103974e3e19727$export$cd9afaa621b6216f = "spectrum-ColorHandle_5a9f41";
+$9d103974e3e19727$export$e7dc768d35940237 = "is-focused_5a9f41";
+$9d103974e3e19727$export$f39a09f249340e2a = "focus-ring_5a9f41";
+$9d103974e3e19727$export$d35bc1e505d1ebbf = "is-disabled_5a9f41";
+$9d103974e3e19727$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_5a9f41";
+
+
+var $f3cdcbdb4b87f010$exports = {};
+
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe", () => $f3cdcbdb4b87f010$export$88d6ed2576b21809, (v) => $f3cdcbdb4b87f010$export$88d6ed2576b21809 = v);
+$parcel$export($f3cdcbdb4b87f010$exports, "is-open", () => $f3cdcbdb4b87f010$export$a9781837241c946d, (v) => $f3cdcbdb4b87f010$export$a9781837241c946d = v);
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-outer", () => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c, (v) => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = v);
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-background", () => $f3cdcbdb4b87f010$export$397af82b48750fe5, (v) => $f3cdcbdb4b87f010$export$397af82b48750fe5 = v);
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-checker", () => $f3cdcbdb4b87f010$export$f9a2a02e0b271024, (v) => $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = v);
+var $f3cdcbdb4b87f010$export$88d6ed2576b21809;
+var $f3cdcbdb4b87f010$export$a9781837241c946d;
+var $f3cdcbdb4b87f010$export$d6ad38291e8aca9c;
+var $f3cdcbdb4b87f010$export$397af82b48750fe5;
+var $f3cdcbdb4b87f010$export$f9a2a02e0b271024;
+$f3cdcbdb4b87f010$export$88d6ed2576b21809 = "spectrum-ColorLoupe_c818a8";
+$f3cdcbdb4b87f010$export$a9781837241c946d = "is-open_c818a8";
+$f3cdcbdb4b87f010$export$d6ad38291e8aca9c = "spectrum-ColorLoupe-outer_c818a8";
+$f3cdcbdb4b87f010$export$397af82b48750fe5 = "spectrum-ColorLoupe-inner-background_c818a8";
+$f3cdcbdb4b87f010$export$f9a2a02e0b271024 = "spectrum-ColorLoupe-inner-checker_c818a8";
+
+
+
+function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
+    let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = "" , ...otherProps } = props;
+    let patternId = (0, $kF0Zw$useId)();
+    let valueCSS = value.toString("css");
+    return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports))), "spectrum-ColorHandle", {
+            "is-focused": isFocused,
+            "is-disabled": isDisabled
+        }) + " " + className,
+        ...otherProps
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports))), "spectrum-ColorHandle-color"),
+        style: {
+            backgroundColor: valueCSS
+        }
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("svg", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe", {
+            "is-open": isDragging
+        }),
+        "aria-hidden": "true"
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("pattern", {
+        id: patternId,
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16",
+        patternUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-background"),
+        x: "0",
+        y: "0",
+        width: "16",
+        height: "16"
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-checker"),
+        x: "0",
+        y: "0",
+        width: "8",
+        height: "8"
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-checker"),
+        x: "8",
+        y: "8",
+        width: "8",
+        height: "8"
+    })), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner"),
+        d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
+        fill: `url(#${patternId})`
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner"),
+        d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
+        fill: valueCSS
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-outer"),
+        d: "M25 3A21.98 21.98 0 003 25c0 6.2 4 14.794 11.568 24.853A144.233 144.233 0 0025 62.132a144.085 144.085 0 0010.4-12.239C42.99 39.816 47 31.209 47 25A21.98 21.98 0 0025 3m0-2a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z"
+    })), children);
+}
+
+
+
+
+var $7d12200010f0192e$exports = {};
+
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea", () => $7d12200010f0192e$export$bb6257a55a3c1efc, (v) => $7d12200010f0192e$export$bb6257a55a3c1efc = v);
+$parcel$export($7d12200010f0192e$exports, "is-focused", () => $7d12200010f0192e$export$e7dc768d35940237, (v) => $7d12200010f0192e$export$e7dc768d35940237 = v);
+$parcel$export($7d12200010f0192e$exports, "focus-ring", () => $7d12200010f0192e$export$f39a09f249340e2a, (v) => $7d12200010f0192e$export$f39a09f249340e2a = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-handle", () => $7d12200010f0192e$export$d8addbd273c4e00, (v) => $7d12200010f0192e$export$d8addbd273c4e00 = v);
+$parcel$export($7d12200010f0192e$exports, "is-disabled", () => $7d12200010f0192e$export$d35bc1e505d1ebbf, (v) => $7d12200010f0192e$export$d35bc1e505d1ebbf = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-gradient", () => $7d12200010f0192e$export$40686f4fcb8a9916, (v) => $7d12200010f0192e$export$40686f4fcb8a9916 = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-slider", () => $7d12200010f0192e$export$7d727cacaa7cea1e, (v) => $7d12200010f0192e$export$7d727cacaa7cea1e = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorHandle-color", () => $7d12200010f0192e$export$afe4c366ed4e659c, (v) => $7d12200010f0192e$export$afe4c366ed4e659c = v);
+var $7d12200010f0192e$export$bb6257a55a3c1efc;
+var $7d12200010f0192e$export$e7dc768d35940237;
+var $7d12200010f0192e$export$f39a09f249340e2a;
+var $7d12200010f0192e$export$d8addbd273c4e00;
+var $7d12200010f0192e$export$d35bc1e505d1ebbf;
+var $7d12200010f0192e$export$40686f4fcb8a9916;
+var $7d12200010f0192e$export$7d727cacaa7cea1e;
+var $7d12200010f0192e$export$afe4c366ed4e659c;
+$7d12200010f0192e$export$bb6257a55a3c1efc = "spectrum-ColorArea_35e2c0";
+$7d12200010f0192e$export$e7dc768d35940237 = "is-focused_35e2c0";
+$7d12200010f0192e$export$f39a09f249340e2a = "focus-ring_35e2c0";
+$7d12200010f0192e$export$d8addbd273c4e00 = "spectrum-ColorArea-handle_35e2c0";
+$7d12200010f0192e$export$d35bc1e505d1ebbf = "is-disabled_35e2c0";
+$7d12200010f0192e$export$40686f4fcb8a9916 = "spectrum-ColorArea-gradient_35e2c0";
+$7d12200010f0192e$export$7d727cacaa7cea1e = "spectrum-ColorArea-slider_35e2c0";
+$7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
+
+
+
+
+
+
+function $40046aa1a7ccb226$var$ColorArea(props, ref) {
+    props = (0, $kF0Zw$useProviderProps)(props);
+    let { isDisabled: isDisabled  } = props;
+    let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
+    let { styleProps: styleProps  } = (0, $kF0Zw$useStyleProps)(props);
+    let inputXRef = (0, $kF0Zw$useRef)(null);
+    let inputYRef = (0, $kF0Zw$useRef)(null);
+    let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputXRef);
+    let state = (0, $kF0Zw$useColorAreaState)(props);
+    let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps  } = (0, $kF0Zw$useColorArea)({
+        ...props,
+        inputXRef: inputXRef,
+        inputYRef: inputYRef,
+        containerRef: containerRef
+    }, state);
+    let { focusProps: focusProps , isFocusVisible: isFocusVisible  } = (0, $kF0Zw$useFocusRing)();
+    return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        ...colorAreaProps,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea", {
+            "is-disabled": isDisabled
+        }, styleProps.className),
+        ref: containerRef,
+        style: {
+            ...colorAreaProps.style,
+            ...styleProps.style,
+            // Workaround around https://github.com/adobe/spectrum-css/issues/1032
+            width: size,
+            height: size
+        }
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        ...gradientProps,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-gradient")
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+        value: state.getDisplayColor(),
+        isFocused: isFocusVisible,
+        isDisabled: isDisabled,
+        isDragging: state.isDragging,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-handle"),
+        ...thumbProps
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        role: "presentation"
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-slider"),
+        ...(0, $kF0Zw$mergeProps)(xInputProps, focusProps),
+        ref: inputXRef
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-slider"),
+        ...(0, $kF0Zw$mergeProps)(yInputProps, focusProps),
+        ref: inputYRef
+    }))));
+}
+/**
+ * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+var $f60625fffea2b12e$exports = {};
+
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel", () => $f60625fffea2b12e$export$b70a5ca28702fbc6, (v) => $f60625fffea2b12e$export$b70a5ca28702fbc6 = v);
+$parcel$export($f60625fffea2b12e$exports, "is-focused", () => $f60625fffea2b12e$export$e7dc768d35940237, (v) => $f60625fffea2b12e$export$e7dc768d35940237 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-handle", () => $f60625fffea2b12e$export$4cd23920eb8ac056, (v) => $f60625fffea2b12e$export$4cd23920eb8ac056 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-slider", () => $f60625fffea2b12e$export$f476ddda713d62b, (v) => $f60625fffea2b12e$export$f476ddda713d62b = v);
+$parcel$export($f60625fffea2b12e$exports, "is-disabled", () => $f60625fffea2b12e$export$d35bc1e505d1ebbf, (v) => $f60625fffea2b12e$export$d35bc1e505d1ebbf = v);
+$parcel$export($f60625fffea2b12e$exports, "is-dragged", () => $f60625fffea2b12e$export$8778c911bed6c759, (v) => $f60625fffea2b12e$export$8778c911bed6c759 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-gradient", () => $f60625fffea2b12e$export$9afaa791d7500a9b, (v) => $f60625fffea2b12e$export$9afaa791d7500a9b = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-segment", () => $f60625fffea2b12e$export$ada9fbffdaa4f10, (v) => $f60625fffea2b12e$export$ada9fbffdaa4f10 = v);
+var $f60625fffea2b12e$export$b70a5ca28702fbc6;
+var $f60625fffea2b12e$export$e7dc768d35940237;
+var $f60625fffea2b12e$export$4cd23920eb8ac056;
+var $f60625fffea2b12e$export$f476ddda713d62b;
+var $f60625fffea2b12e$export$d35bc1e505d1ebbf;
+var $f60625fffea2b12e$export$8778c911bed6c759;
+var $f60625fffea2b12e$export$9afaa791d7500a9b;
+var $f60625fffea2b12e$export$ada9fbffdaa4f10;
+$f60625fffea2b12e$export$b70a5ca28702fbc6 = "spectrum-ColorWheel_31462a";
+$f60625fffea2b12e$export$e7dc768d35940237 = "is-focused_31462a";
+$f60625fffea2b12e$export$4cd23920eb8ac056 = "spectrum-ColorWheel-handle_31462a";
+$f60625fffea2b12e$export$f476ddda713d62b = "spectrum-ColorWheel-slider_31462a";
+$f60625fffea2b12e$export$d35bc1e505d1ebbf = "is-disabled_31462a";
+$f60625fffea2b12e$export$8778c911bed6c759 = "is-dragged_31462a";
+$f60625fffea2b12e$export$9afaa791d7500a9b = "spectrum-ColorWheel-gradient_31462a";
+$f60625fffea2b12e$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
+
+
+
+
+
+
+
+const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
+function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
+    props = (0, $kF0Zw$useProviderProps)(props);
+    let { isDisabled: isDisabled  } = props;
+    let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
+    let { styleProps: styleProps  } = (0, $kF0Zw$useStyleProps)(props);
+    let inputRef = (0, $kF0Zw$useRef)(null);
+    let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
+    let [wheelRadius, setWheelRadius] = (0, $kF0Zw$useState)(0);
+    let [wheelThickness, setWheelThickness] = (0, $kF0Zw$useState)($3aac1c27203f04b5$var$WHEEL_THICKNESS);
+    let resizeHandler = (0, $kF0Zw$useCallback)(()=>{
+        if (containerRef.current) {
+            setWheelRadius(containerRef.current.offsetWidth / 2);
+            let thickness = window.getComputedStyle(containerRef.current).getPropertyValue("--spectrum-colorwheel-track-thickness");
+            if (thickness) setWheelThickness(parseInt(thickness, 10));
+        }
+    }, [
+        containerRef,
+        setWheelRadius,
+        setWheelThickness
+    ]);
+    (0, $kF0Zw$useEffect)(()=>{
+        // the size observer's fallback to the window resize event doesn't fire on mount
+        if (wheelRadius === 0) resizeHandler();
+    }, [
+        wheelRadius,
+        resizeHandler
+    ]);
+    (0, $kF0Zw$useResizeObserver)({
+        ref: containerRef,
+        onResize: resizeHandler
+    });
+    let state = (0, $kF0Zw$useColorWheelState)(props);
+    let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps  } = (0, $kF0Zw$useColorWheel)({
+        ...props,
+        innerRadius: wheelRadius - wheelThickness,
+        outerRadius: wheelRadius
+    }, state, inputRef);
+    let { focusProps: focusProps , isFocusVisible: isFocusVisible  } = (0, $kF0Zw$useFocusRing)();
+    return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel", {
+            "is-disabled": isDisabled
+        }, styleProps.className),
+        ref: containerRef,
+        style: {
+            ...styleProps.style,
+            // Workaround around https://github.com/adobe/spectrum-css/issues/1032
+            // @ts-ignore
+            "width": size,
+            "height": size
+        }
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        ...trackProps,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-gradient")
+    }), /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+        value: state.getDisplayColor(),
+        isFocused: isFocusVisible,
+        isDisabled: isDisabled,
+        isDragging: state.isDragging,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-handle"),
+        ...thumbProps
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
+        ...focusProps,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-slider"),
+        ...inputProps,
+        ref: inputRef
+    })));
+}
+/**
+ * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
+ */ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+var $670e80c7e5915fb5$exports = {};
+
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
+$parcel$export($670e80c7e5915fb5$exports, "is-focused", () => $670e80c7e5915fb5$export$e7dc768d35940237, (v) => $670e80c7e5915fb5$export$e7dc768d35940237 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-handle", () => $670e80c7e5915fb5$export$8c273ba92fabe1f1, (v) => $670e80c7e5915fb5$export$8c273ba92fabe1f1 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-slider", () => $670e80c7e5915fb5$export$2f08b72944af536, (v) => $670e80c7e5915fb5$export$2f08b72944af536 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--horizontal", () => $670e80c7e5915fb5$export$33e97914f6746614, (v) => $670e80c7e5915fb5$export$33e97914f6746614 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--vertical", () => $670e80c7e5915fb5$export$cd1c093289104c66, (v) => $670e80c7e5915fb5$export$cd1c093289104c66 = v);
+$parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-labelContainer", () => $670e80c7e5915fb5$export$65139e62047f0361, (v) => $670e80c7e5915fb5$export$65139e62047f0361 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-contextualHelp", () => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c, (v) => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-valueLabel", () => $670e80c7e5915fb5$export$c2fbec5a538c1f81, (v) => $670e80c7e5915fb5$export$c2fbec5a538c1f81 = v);
+var $670e80c7e5915fb5$export$a5f8b0989b27a604;
+var $670e80c7e5915fb5$export$e7dc768d35940237;
+var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
+var $670e80c7e5915fb5$export$2f08b72944af536;
+var $670e80c7e5915fb5$export$33e97914f6746614;
+var $670e80c7e5915fb5$export$cd1c093289104c66;
+var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
+var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
+var $670e80c7e5915fb5$export$65139e62047f0361;
+var $670e80c7e5915fb5$export$26ffe4cf5a5aa53c;
+var $670e80c7e5915fb5$export$c2fbec5a538c1f81;
+$670e80c7e5915fb5$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
+$670e80c7e5915fb5$export$e7dc768d35940237 = "is-focused_a5bb06";
+$670e80c7e5915fb5$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
+$670e80c7e5915fb5$export$2f08b72944af536 = "spectrum-ColorSlider-slider_a5bb06";
+$670e80c7e5915fb5$export$33e97914f6746614 = "spectrum-ColorSlider-container--horizontal_a5bb06";
+$670e80c7e5915fb5$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
+$670e80c7e5915fb5$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
+$670e80c7e5915fb5$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
+$670e80c7e5915fb5$export$65139e62047f0361 = "spectrum-ColorSlider-labelContainer_a5bb06";
+$670e80c7e5915fb5$export$26ffe4cf5a5aa53c = "spectrum-ColorSlider-contextualHelp_a5bb06";
+$670e80c7e5915fb5$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5bb06";
+
+
+
+
+
+
+
+function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
+    props = (0, $kF0Zw$useProviderProps)(props);
+    let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , "aria-label": ariaLabel  } = props;
+    let vertical = orientation === "vertical";
+    let { styleProps: styleProps  } = (0, $kF0Zw$useStyleProps)(props);
+    let { locale: locale  } = (0, $kF0Zw$useLocale)();
+    let inputRef = (0, $kF0Zw$useRef)(null);
+    let trackRef = (0, $kF0Zw$useRef)(null);
+    let domRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
+    let state = (0, $kF0Zw$useColorSliderState)({
+        ...props,
+        locale: locale
+    });
+    // If vertical and a label is provided, use it as an aria-label instead.
+    if (vertical && label) {
+        ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
+        label = null;
+    }
+    // If no external label, aria-label or aria-labelledby is provided,
+    // default to displaying the localized channel value.
+    // Specifically check if label is undefined. If label is `null` then display no visible label.
+    // A default aria-label is provided by useColorSlider in that case.
+    if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
+    // Show the value label by default if there is a visible label
+    if (showValueLabel == null) showValueLabel = !!label;
+    let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps  } = (0, $kF0Zw$useColorSlider)({
+        ...props,
+        label: label,
+        "aria-label": ariaLabel,
+        trackRef: trackRef,
+        inputRef: inputRef
+    }, state);
+    let { isFocusVisible: isFocusVisible  } = (0, $kF0Zw$useFocusVisible)();
+    let [isFocused, setIsFocused] = (0, $kF0Zw$useState)(false);
+    let { focusProps: focusProps  } = (0, $kF0Zw$useFocus)({
+        isDisabled: isDisabled,
+        onFocusChange: setIsFocused
+    });
+    return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        ref: domRef,
+        ...styleProps,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), {
+            "spectrum-ColorSlider-container--horizontal": !vertical,
+            "spectrum-ColorSlider-container--vertical": vertical
+        })
+    }, label && /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-labelContainer")
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$SlotProvider), {
+        slots: {
+            actionButton: {
+                UNSAFE_className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-contextualHelp")
+            }
+        }
+    }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$Label), {
+        elementType: "span",
+        UNSAFE_className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-valueLabel")
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
+        ...trackProps,
+        ref: trackRef,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider", {
+            "is-disabled": isDisabled,
+            "spectrum-ColorSlider--vertical": vertical
+        })
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
+        value: state.getDisplayColor(),
+        isFocused: isFocused && isFocusVisible,
+        isDisabled: isDisabled,
+        isDragging: state.isThumbDragging(0),
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-handle"),
+        ...thumbProps
+    }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
+        ...inputProps,
+        ...focusProps,
+        ref: inputRef,
+        className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-slider")
+    }))));
+}
+/**
+ * ColorSliders allow users to adjust an individual channel of a color value.
+ */ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
+
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+var $9d47b39540b9e48a$exports = {};
+
+$parcel$export($9d47b39540b9e48a$exports, "react-spectrum-ColorField-input", () => $9d47b39540b9e48a$export$7d80c6630a750b1, (v) => $9d47b39540b9e48a$export$7d80c6630a750b1 = v);
+var $9d47b39540b9e48a$export$7d80c6630a750b1;
+$9d47b39540b9e48a$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde3a";
+
+
+
+
+
+
+function $0077d47e004328f0$var$ColorField(props, ref) {
+    props = (0, $kF0Zw$useProviderProps)(props);
+    let { value: // These disabled props are handled by the state hook
+    value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
+    let state = (0, $kF0Zw$useColorFieldState)(props);
+    let inputRef = (0, $kF0Zw$useRef)(null);
+    let { labelProps: labelProps , inputProps: inputProps  } = (0, $kF0Zw$useColorField)(otherProps, state, inputRef);
+    if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ColorField.html#help-text");
+    return /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$TextFieldBase), {
+        ...otherProps,
+        ref: ref,
+        inputRef: inputRef,
+        labelProps: labelProps,
+        inputProps: inputProps,
+        inputClassName: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d47b39540b9e48a$exports))), "react-spectrum-ColorField-input")
+    });
+}
+/**
+ * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($0077d47e004328f0$var$ColorField);
+
+
+
+
+export {$40046aa1a7ccb226$export$b2103f68a961418e as ColorArea, $3aac1c27203f04b5$export$f80663f808113381 as ColorWheel, $3870e4ce67ed7ee1$export$44fd664bcca5b6fb as ColorSlider, $0077d47e004328f0$export$b865d4358897bb17 as ColorField};
+//# sourceMappingURL=module.js.map

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-spectrum/color",
-  "version": "3.0.0-nightly.3698+72ee92f6d",
+  "version": "3.0.0-nightly.3709+0f953cac8",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -31,27 +36,27 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/color": "3.0.0-nightly.3698+72ee92f6d",
-    "@react-aria/focus": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-aria/i18n": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-aria/interactions": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-aria/slider": "3.2.5-nightly.3698+72ee92f6d",
-    "@react-aria/utils": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-spectrum/label": "3.10.2-nightly.3698+72ee92f6d",
-    "@react-spectrum/layout": "3.4.5-nightly.3698+72ee92f6d",
-    "@react-spectrum/textfield": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-spectrum/utils": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-stately/color": "3.2.3-nightly.3698+72ee92f6d",
-    "@react-stately/slider": "3.2.5-nightly.3698+72ee92f6d",
-    "@react-stately/utils": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-types/color": "3.0.0-nightly.3698+72ee92f6d",
-    "@react-types/shared": "3.0.0-nightly.1998+72ee92f6d",
-    "@react-types/slider": "3.3.2-nightly.3698+72ee92f6d",
-    "@react-types/textfield": "3.0.0-nightly.1998+72ee92f6d",
+    "@react-aria/color": "3.0.0-nightly.3709+0f953cac8",
+    "@react-aria/focus": "3.0.0-nightly.2009+0f953cac8",
+    "@react-aria/i18n": "3.0.0-nightly.2009+0f953cac8",
+    "@react-aria/interactions": "3.0.0-nightly.2009+0f953cac8",
+    "@react-aria/slider": "3.2.5-nightly.3709+0f953cac8",
+    "@react-aria/utils": "3.0.0-nightly.2009+0f953cac8",
+    "@react-spectrum/label": "3.10.2-nightly.3709+0f953cac8",
+    "@react-spectrum/layout": "3.4.5-nightly.3709+0f953cac8",
+    "@react-spectrum/textfield": "3.0.0-nightly.2009+0f953cac8",
+    "@react-spectrum/utils": "3.0.0-nightly.2009+0f953cac8",
+    "@react-stately/color": "3.2.3-nightly.3709+0f953cac8",
+    "@react-stately/slider": "3.2.5-nightly.3709+0f953cac8",
+    "@react-stately/utils": "3.0.0-nightly.2009+0f953cac8",
+    "@react-types/color": "3.0.0-nightly.3709+0f953cac8",
+    "@react-types/shared": "3.0.0-nightly.2009+0f953cac8",
+    "@react-types/slider": "3.3.2-nightly.3709+0f953cac8",
+    "@react-types/textfield": "3.0.0-nightly.2009+0f953cac8",
     "@swc/helpers": "^0.4.14"
   },
   "devDependencies": {
-    "@adobe/spectrum-css-temp": "3.0.0-nightly.1998+72ee92f6d"
+    "@adobe/spectrum-css-temp": "3.0.0-nightly.2009+0f953cac8"
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
@@ -61,5 +66,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "72ee92f6d497163468a80642ccb96576f822f365"
+  "gitHead": "0f953cac84f98cdff29f2348c120ce541ebb6da8"
 }