@react-spectrum/color 3.0.0-beta.2 → 3.0.0-beta.20

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/dist/main.css

@@ -1,2 +1 @@
-._spectrum-ColorHandle_cc6c6._focus-ring_cc6c6,._spectrum-ColorHandle_cc6c6._is-focused_cc6c6{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorHandle_cc6c6{display:block;position:absolute;z-index:1;box-sizing:border-box;width:var(--spectrum-global-dimension-size-200);height:var(--spectrum-global-dimension-size-200);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);margin-top:calc(-1 * var(--spectrum-global-dimension-size-200) / 2);border-width:var(--spectrum-global-dimension-static-size-25,2px);border-style:solid;background-size:16px 16px;background-position:-2px -2px,-2px 6px,6px -10px,-10px -2px;transition:width .13s ease-in-out,height .13s ease-in-out,border-width .13s ease-in-out,margin-left .13s ease-in-out,margin-top .13s ease-in-out}._spectrum-ColorHandle_cc6c6,._spectrum-ColorHandle_cc6c6:after{border-radius:100%}._spectrum-ColorHandle_cc6c6:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300) / 2);top:calc(50% - var(--spectrum-global-dimension-size-300) / 2);position:absolute;display:block;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6{pointer-events:none}._spectrum-ColorHandle-color_cc6c6{border-radius:100%;width:100%;height:100%}._spectrum-ColorHandle_cc6c6{border-color:var(--spectrum-global-color-static-white,#fff);box-shadow:0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42);background-color:#fff;background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6{border-color:var(--spectrum-global-color-gray-400);background:var(--spectrum-global-color-gray-300);box-shadow:none}._spectrum-ColorHandle_cc6c6._is-disabled_cc6c6 ._spectrum-ColorHandle-color_cc6c6{display:none}._spectrum-ColorHandle-color_cc6c6{box-shadow:inset 0 0 0 var(--spectrum-global-dimension-static-size-10,1px) rgba(0,0,0,.42)}._spectrum-ColorLoupe_583f5{width:calc(var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);height:calc(var(--spectrum-global-dimension-static-size-800, 64px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2);position:absolute;transform:translateY(8px);opacity:0;transform-origin:bottom center;bottom:calc(50% + 16px);left:calc(50% - (var(--spectrum-global-dimension-static-size-600, 48px) + var(--spectrum-global-dimension-static-size-25, 2px) * 2) / 2);transition:transform .1s ease-in-out,opacity 125ms ease-in-out;pointer-events:none}._spectrum-ColorLoupe_583f5._is-open_583f5{transform:translate(0);opacity:1}._spectrum-ColorLoupe-outer_583f5{stroke-width:var(--spectrum-global-dimension-static-size-10,1px);fill:var(--spectrum-global-color-static-white,#fff);stroke:rgba(50,50,50,.1)}._spectrum-ColorLoupe-inner-background_583f5{fill:#fff}._spectrum-ColorLoupe-inner-checker_583f5{fill:#bcbcbc}._spectrum-ColorWheel_5efa1._is-focused_5efa1 ._spectrum-ColorWheel-handle_5efa1{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorWheel-slider_5efa1{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorWheel_5efa1{position:relative;display:block;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16);--spectrum-colorwheel-track-thickness:var(--spectrum-global-dimension-size-300);border-radius:100%;-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorWheel_5efa1 ._spectrum-ColorWheel-handle_5efa1{margin:0}._spectrum-ColorWheel_5efa1._is-focused_5efa1{z-index:2}._spectrum-ColorWheel_5efa1._is-disabled_5efa1{pointer-events:none}._spectrum-ColorWheel_5efa1._is-dragged_5efa1{z-index:2}._spectrum-ColorWheel-gradient_5efa1{position:relative;z-index:0;width:calc(var(--spectrum-global-dimension-size-125) * 16);height:calc(var(--spectrum-global-dimension-size-125) * 16)}._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel-gradient_5efa1:before{content:"";position:absolute;border-radius:100%;border-width:var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10));border-style:solid}._spectrum-ColorWheel-gradient_5efa1:before{top:0;left:0;bottom:0;right:0}._spectrum-ColorWheel-gradient_5efa1:after{top:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));left:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));bottom:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)));right:calc(var(--spectrum-global-dimension-size-300) - var(--spectrum-alias-border-size-thin, var(--spectrum-global-dimension-static-size-10)))}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1{background:var(--spectrum-global-color-gray-300)!important}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-gradient_5efa1:before{border-color:var(--spectrum-global-color-gray-300)}._spectrum-ColorWheel_5efa1._is-disabled_5efa1 ._spectrum-ColorWheel-segment_5efa1{display:none}._spectrum-ColorWheel-gradient_5efa1:after,._spectrum-ColorWheel-gradient_5efa1:before{border-color:var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_5a55e._is-focused_5a55e ._spectrum-ColorSlider-handle_5a55e{width:calc(var(--spectrum-global-dimension-size-200) * 2);height:calc(var(--spectrum-global-dimension-size-200) * 2);margin-left:calc(-1 * var(--spectrum-global-dimension-size-200));margin-top:calc(-1 * var(--spectrum-global-dimension-size-200))}._spectrum-ColorSlider-slider_5a55e{opacity:.0001;position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;margin:0;pointer-events:none}._spectrum-ColorSlider-container--horizontal_5a55e{width:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider-container--vertical_5a55e{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:var(--spectrum-global-dimension-size-2400)}._spectrum-ColorSlider_5a55e{position:relative;display:block;width:100%;height:var(--spectrum-global-dimension-size-300);-webkit-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default}._spectrum-ColorSlider_5a55e,._spectrum-ColorSlider_5a55e:before{border-radius:var(--spectrum-alias-border-radius-regular,var(--spectrum-global-dimension-size-50))}._spectrum-ColorSlider_5a55e:before{content:"";z-index:-1;position:absolute;top:0;left:0;bottom:0;right:0;background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}._spectrum-ColorSlider_5a55e._is-focused_5a55e{z-index:2}._spectrum-ColorSlider_5a55e._is-disabled_5a55e{pointer-events:none}._spectrum-ColorSlider--vertical_5a55e{display:inline-block;width:var(--spectrum-global-dimension-size-300);-ms-flex:1;flex:1}._spectrum-ColorSlider--vertical_5a55e ._spectrum-ColorSlider-handle_5a55e{left:50%;top:0}._spectrum-ColorSlider-handle_5a55e{left:0;top:50%}._spectrum-ColorSlider-handle_5a55e:after{border-radius:0;width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300)}._spectrum-ColorSlider_5a55e{background-color:#fff;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-colorarea-border-color)}._spectrum-ColorSlider_5a55e:before{background-image:linear-gradient(-45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(45deg,transparent 75.5%,#bcbcbc 0),linear-gradient(-45deg,#bcbcbc 25.5%,transparent 0),linear-gradient(45deg,#bcbcbc 25.5%,transparent 0)}._spectrum-ColorSlider_5a55e._is-disabled_5a55e{background:var(--spectrum-global-color-gray-300)!important;box-shadow:inset 0 0 0 var(--spectrum-alias-border-size-thin,var(--spectrum-global-dimension-static-size-10)) var(--spectrum-global-color-gray-300)}._spectrum-ColorSlider_5a55e ._spectrum-ColorSlider-handle_5a55e{margin:0}[dir=ltr] ._react-spectrum-ColorField-input_4e4c4{text-align:left}[dir=rtl] ._react-spectrum-ColorField-input_4e4c4{text-align:right}._react-spectrum-ColorField-input_4e4c4{direction:ltr}
-/*# sourceMappingURL=main.css.map */
+.spectrum-ColorHandle_5a9f41.is-focused_5a9f41,.spectrum-ColorHandle_5a9f41.focus-ring_5a9f41{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorHandle_5a9f41{z-index:1;box-sizing:border-box;width:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));height:var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200));margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2);border-width:var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-25,2px))calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + -1*var(--spectrum-global-dimension-static-size-25,2px))calc(-1*var(--spectrum-global-dimension-static-size-25,2px));transition:width var(--spectrum-global-animation-duration-100,.13s)ease-in-out,height var(--spectrum-global-animation-duration-100,.13s)ease-in-out,border-width var(--spectrum-global-animation-duration-100,.13s)ease-in-out,margin-left var(--spectrum-global-animation-duration-100,.13s)ease-in-out,margin-top var(--spectrum-global-animation-duration-100,.13s)ease-in-out;border-style:solid;display:block;position:absolute}.spectrum-ColorHandle_5a9f41,.spectrum-ColorHandle_5a9f41:after{border-radius:100%}.spectrum-ColorHandle_5a9f41:after{content:"";left:calc(50% - var(--spectrum-global-dimension-size-300)/2);top:calc(50% - var(--spectrum-global-dimension-size-300)/2);width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);display:block;position:absolute}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{pointer-events:none}.spectrum-ColorHandle-color_5a9f41{width:100%;height:100%;border-radius:100%}.spectrum-ColorHandle_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color,var(--spectrum-global-color-static-white));box-shadow:0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b;background-color:var(--spectrum-global-color-static-white,#fff);background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41{border-color:var(--spectrum-colorhandle-inner-border-color-disabled,var(--spectrum-global-color-gray-400));background:var(--spectrum-colorhandle-fill-color-disabled,var(--spectrum-global-color-gray-300));box-shadow:none}.spectrum-ColorHandle_5a9f41.is-disabled_5a9f41 .spectrum-ColorHandle-color_5a9f41{display:none}.spectrum-ColorHandle-color_5a9f41{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}@media (forced-colors:active){.spectrum-ColorHandle_5a9f41{forced-color-adjust:none;--spectrum-colorhandle-inner-border-color-disabled:GrayText;--spectrum-colorhandle-fill-color-disabled:GrayText;--spectrum-colorhandle-inner-border-color:ButtonText;--spectrum-colorhandle-outer-border-color:ButtonFace}}[dir=ltr] .react-spectrum-ColorField-input_7bde3a{text-align:left}[dir=rtl] .react-spectrum-ColorField-input_7bde3a{text-align:right}.react-spectrum-ColorField-input_7bde3a{direction:ltr}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06 .spectrum-ColorSlider-handle_a5bb06{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorSlider-slider_a5bb06{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorSlider-container--horizontal_a5bb06{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.spectrum-ColorSlider-container--vertical_a5bb06{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.spectrum-ColorSlider_a5bb06{width:100%;height:var(--spectrum-colorslider-height,var(--spectrum-global-dimension-size-300));border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;display:block;position:relative}.spectrum-ColorSlider_a5bb06 .spectrum-ColorSlider-handle_a5bb06.spectrum-ColorSlider-handle_a5bb06{margin:0}.spectrum-ColorSlider_a5bb06:before{content:"";z-index:-1;border-radius:var(--spectrum-colorslider-border-radius,var(--spectrum-alias-border-radius-regular));background-size:var(--spectrum-global-dimension-static-size-200,16px)var(--spectrum-global-dimension-static-size-200,16px);background-position:0 0,0 var(--spectrum-global-dimension-static-size-100,8px),var(--spectrum-global-dimension-static-size-100,8px)calc(-1*var(--spectrum-global-dimension-static-size-100,8px)),calc(-1*var(--spectrum-global-dimension-static-size-100,8px))0;position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorSlider_a5bb06.is-focused_a5bb06{z-index:2}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{pointer-events:none}.spectrum-ColorSlider--vertical_a5bb06{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.spectrum-ColorSlider--vertical_a5bb06 .spectrum-ColorSlider-handle_a5bb06{top:0;left:50%}.spectrum-ColorSlider-handle_a5bb06{top:50%;left:0}.spectrum-ColorSlider-handle_a5bb06:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.spectrum-ColorSlider-labelContainer_a5bb06{display:-ms-grid;-ms-grid-columns:auto 1fr auto;-ms-grid-column-align:start;grid-template-columns:auto 1fr auto;grid-template-areas:"label contextualHelp value";justify-items:start;display:grid}[dir=ltr] .spectrum-ColorSlider-contextualHelp_a5bb06.spectrum-ColorSlider-contextualHelp_a5bb06{margin-left:var(--spectrum-global-dimension-size-50)}[dir=rtl] .spectrum-ColorSlider-contextualHelp_a5bb06.spectrum-ColorSlider-contextualHelp_a5bb06{margin-right:var(--spectrum-global-dimension-size-50)}.spectrum-ColorSlider-contextualHelp_a5bb06.spectrum-ColorSlider-contextualHelp_a5bb06{margin-top:var(--spectrum-global-dimension-size-25);grid-area:contextualHelp}[dir=ltr] .spectrum-ColorSlider-valueLabel_a5bb06{margin-left:var(--spectrum-global-dimension-size-50)}[dir=rtl] .spectrum-ColorSlider-valueLabel_a5bb06{margin-right:var(--spectrum-global-dimension-size-50)}.spectrum-ColorSlider-valueLabel_a5bb06{grid-area:value}.spectrum-ColorSlider_a5bb06{background-color:var(--spectrum-global-color-static-white,#fff);box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorSlider_a5bb06:before{background-image:linear-gradient(-45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(45deg,transparent 75.5%,var(--spectrum-global-color-static-gray-500,#bcbcbc)75.5%),linear-gradient(-45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%),linear-gradient(45deg,var(--spectrum-global-color-static-gray-500,#bcbcbc)25.5%,transparent 25.5%)}.spectrum-ColorSlider_a5bb06.is-disabled_a5bb06{box-shadow:inset 0 0 0 var(--spectrum-colorslider-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorslider-border-color-disabled,var(--spectrum-global-color-gray-300));background:var(--spectrum-colorslider-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}@media (forced-colors:active){.spectrum-ColorSlider_a5bb06{forced-color-adjust:none;--spectrum-colorslider-fill-color-disabled:GrayText;--spectrum-colorslider-border-color-disabled:GrayText;--spectrum-colorslider-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-focused_31462a .spectrum-ColorWheel-handle_31462a{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorWheel-slider_31462a{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a{width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);--spectrum-colorwheel-track-thickness:var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300));-webkit-user-select:none;user-select:none;-ms-touch-action:none;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a .spectrum-ColorWheel-handle_31462a{margin:0}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-focused_31462a{z-index:2}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-disabled_31462a{pointer-events:none}.spectrum-ColorWheel_31462a.spectrum-ColorWheel_31462a.is-dragged_31462a{z-index:2}.spectrum-ColorWheel-gradient_31462a{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-style:solid;border-radius:100%;position:absolute}.spectrum-ColorWheel-gradient_31462a:before{top:0;bottom:0;left:0;right:0}.spectrum-ColorWheel-gradient_31462a:after{top:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));left:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));bottom:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)));right:calc(var(--spectrum-colorwheel-track-width,var(--spectrum-global-dimension-size-300)) - var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin)))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorWheel_31462a.is-disabled_31462a .spectrum-ColorWheel-segment_31462a{display:none}.spectrum-ColorWheel-gradient_31462a:before,.spectrum-ColorWheel-gradient_31462a:after{border-color:var(--spectrum-colorarea-border-color)}@media (forced-colors:active){.spectrum-ColorWheel_31462a{forced-color-adjust:none;--spectrum-colorwheel-fill-color-disabled:GrayText;--spectrum-colorwheel-border-color-disabled:GrayText;--spectrum-colorwheel-border-color:ButtonText;--spectrum-colorarea-border-color:ButtonText}}.spectrum-ColorArea_35e2c0{width:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));height:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-width:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-height:var(--spectrum-colorarea-min-height,var(--spectrum-global-dimension-size-800));border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));cursor:default;-webkit-user-select:none;user-select:none;display:inline-block;position:relative}.spectrum-ColorArea_35e2c0.is-focused_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0{z-index:2}.spectrum-ColorArea_35e2c0.is-focused_35e2c0 .spectrum-ColorArea-handle_35e2c0,.spectrum-ColorArea_35e2c0.focus-ring_35e2c0 .spectrum-ColorArea-handle_35e2c0{width:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);height:calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))*2);margin-left:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)));margin-top:calc(-1*var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200)))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{pointer-events:none}.spectrum-ColorArea_35e2c0:before{content:"";z-index:1;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));position:absolute;top:0;bottom:0;left:0;right:0}.spectrum-ColorArea-handle_35e2c0{top:0;left:0}.spectrum-ColorArea-handle_35e2c0:focus-within{z-index:2}.spectrum-ColorArea-gradient_35e2c0{width:100%;height:100%;border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular))}.spectrum-ColorArea-slider_35e2c0{opacity:.0001;width:100%;height:100%;z-index:0;pointer-events:none;margin:0;position:absolute;top:0;left:0}.spectrum-ColorArea_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.spectrum-ColorArea-gradient_35e2c0,.spectrum-ColorHandle-color_35e2c0{forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color-disabled,var(--spectrum-global-color-gray-300))}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0 .spectrum-ColorArea-gradient_35e2c0{display:none}@media (forced-colors:active){.spectrum-ColorArea_35e2c0{--spectrum-colorarea-fill-color-disabled:GrayText;forced-color-adjust:none}.spectrum-ColorArea_35e2c0.is-disabled_35e2c0{forced-color-adjust:none}}.spectrum-ColorLoupe_c818a8{width:calc(var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);height:calc(var(--spectrum-colorloupe-height,var(--spectrum-global-dimension-static-size-800)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2);transform:translate(0,var(--spectrum-global-dimension-static-size-100,8px));opacity:0;transform-origin:bottom;bottom:calc(50% + var(--spectrum-global-dimension-static-size-200,16px));left:calc(50% - (var(--spectrum-colorloupe-width,var(--spectrum-global-dimension-static-size-600)) + var(--spectrum-colorhandle-inner-border-size,var(--spectrum-global-dimension-static-size-25))*2)/2);pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.spectrum-ColorLoupe_c818a8.is-open_c818a8{opacity:1;z-index:2;transform:translate(0)}.spectrum-ColorLoupe-outer_c818a8{stroke-width:var(--spectrum-colorloupe-outer-border-size,var(--spectrum-global-dimension-static-size-10));fill:var(--spectrum-colorloupe-inner-border-color,var(--spectrum-global-color-static-white));stroke:var(--spectrum-colorloupe-outer-border-color,#3232321a)}.spectrum-ColorLoupe-inner-background_c818a8{fill:var(--spectrum-global-color-static-white,#fff)}.spectrum-ColorLoupe-inner-checker_c818a8{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}@media (forced-colors:active){.spectrum-ColorLoupe_c818a8{forced-color-adjust:none;--spectrum-colorloupe-inner-border-color:ButtonText;--spectrum-colorloupe-outer-border-color:ButtonFace}}