@react-spectrum/color 3.0.0-beta.3 → 3.0.0-beta.31

package/dist/import.mjs

@@ -0,0 +1,570 @@
+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";
+import {useFormProps as $kF0Zw$useFormProps} from "@react-spectrum/form";
+
+
+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-ColorControl-handle--focused", () => $9d103974e3e19727$export$1dd67f16e0d58f73, (v) => $9d103974e3e19727$export$1dd67f16e0d58f73 = 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, "is-focused", () => $9d103974e3e19727$export$e7dc768d35940237, (v) => $9d103974e3e19727$export$e7dc768d35940237 = v);
+$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle", () => $9d103974e3e19727$export$cd9afaa621b6216f, (v) => $9d103974e3e19727$export$cd9afaa621b6216f = v);
+$parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle-color", () => $9d103974e3e19727$export$afe4c366ed4e659c, (v) => $9d103974e3e19727$export$afe4c366ed4e659c = v);
+var $9d103974e3e19727$export$1dd67f16e0d58f73;
+var $9d103974e3e19727$export$f39a09f249340e2a;
+var $9d103974e3e19727$export$d35bc1e505d1ebbf;
+var $9d103974e3e19727$export$e7dc768d35940237;
+var $9d103974e3e19727$export$cd9afaa621b6216f;
+var $9d103974e3e19727$export$afe4c366ed4e659c;
+$9d103974e3e19727$export$1dd67f16e0d58f73 = `hoc2UW_spectrum-ColorControl-handle--focused`;
+$9d103974e3e19727$export$f39a09f249340e2a = `hoc2UW_focus-ring ${$9d103974e3e19727$export$1dd67f16e0d58f73}`;
+$9d103974e3e19727$export$d35bc1e505d1ebbf = `hoc2UW_is-disabled`;
+$9d103974e3e19727$export$e7dc768d35940237 = `hoc2UW_is-focused ${$9d103974e3e19727$export$1dd67f16e0d58f73}`;
+$9d103974e3e19727$export$cd9afaa621b6216f = `hoc2UW_spectrum-ColorHandle`;
+$9d103974e3e19727$export$afe4c366ed4e659c = `hoc2UW_spectrum-ColorHandle-color`;
+
+
+var $f3cdcbdb4b87f010$exports = {};
+
+$parcel$export($f3cdcbdb4b87f010$exports, "is-open", () => $f3cdcbdb4b87f010$export$a9781837241c946d, (v) => $f3cdcbdb4b87f010$export$a9781837241c946d = v);
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe", () => $f3cdcbdb4b87f010$export$88d6ed2576b21809, (v) => $f3cdcbdb4b87f010$export$88d6ed2576b21809 = 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);
+$parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-outer", () => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c, (v) => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = v);
+var $f3cdcbdb4b87f010$export$a9781837241c946d;
+var $f3cdcbdb4b87f010$export$88d6ed2576b21809;
+var $f3cdcbdb4b87f010$export$397af82b48750fe5;
+var $f3cdcbdb4b87f010$export$f9a2a02e0b271024;
+var $f3cdcbdb4b87f010$export$d6ad38291e8aca9c;
+$f3cdcbdb4b87f010$export$a9781837241c946d = `HpWpfq_is-open`;
+$f3cdcbdb4b87f010$export$88d6ed2576b21809 = `HpWpfq_spectrum-ColorLoupe`;
+$f3cdcbdb4b87f010$export$397af82b48750fe5 = `HpWpfq_spectrum-ColorLoupe-inner-background`;
+$f3cdcbdb4b87f010$export$f9a2a02e0b271024 = `HpWpfq_spectrum-ColorLoupe-inner-checker`;
+$f3cdcbdb4b87f010$export$d6ad38291e8aca9c = `HpWpfq_spectrum-ColorLoupe-outer`;
+
+
+
+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, "focus-ring", () => $7d12200010f0192e$export$f39a09f249340e2a, (v) => $7d12200010f0192e$export$f39a09f249340e2a = v);
+$parcel$export($7d12200010f0192e$exports, "is-disabled", () => $7d12200010f0192e$export$d35bc1e505d1ebbf, (v) => $7d12200010f0192e$export$d35bc1e505d1ebbf = v);
+$parcel$export($7d12200010f0192e$exports, "is-focused", () => $7d12200010f0192e$export$e7dc768d35940237, (v) => $7d12200010f0192e$export$e7dc768d35940237 = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea", () => $7d12200010f0192e$export$bb6257a55a3c1efc, (v) => $7d12200010f0192e$export$bb6257a55a3c1efc = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-gradient", () => $7d12200010f0192e$export$40686f4fcb8a9916, (v) => $7d12200010f0192e$export$40686f4fcb8a9916 = v);
+$parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-handle", () => $7d12200010f0192e$export$d8addbd273c4e00, (v) => $7d12200010f0192e$export$d8addbd273c4e00 = 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$f39a09f249340e2a;
+var $7d12200010f0192e$export$d35bc1e505d1ebbf;
+var $7d12200010f0192e$export$e7dc768d35940237;
+var $7d12200010f0192e$export$bb6257a55a3c1efc;
+var $7d12200010f0192e$export$40686f4fcb8a9916;
+var $7d12200010f0192e$export$d8addbd273c4e00;
+var $7d12200010f0192e$export$7d727cacaa7cea1e;
+var $7d12200010f0192e$export$afe4c366ed4e659c;
+$7d12200010f0192e$export$f39a09f249340e2a = `lm1DSq_focus-ring`;
+$7d12200010f0192e$export$d35bc1e505d1ebbf = `lm1DSq_is-disabled`;
+$7d12200010f0192e$export$e7dc768d35940237 = `lm1DSq_is-focused`;
+$7d12200010f0192e$export$bb6257a55a3c1efc = `lm1DSq_spectrum-ColorArea`;
+$7d12200010f0192e$export$40686f4fcb8a9916 = `lm1DSq_spectrum-ColorArea-gradient`;
+$7d12200010f0192e$export$d8addbd273c4e00 = `lm1DSq_spectrum-ColorArea-handle`;
+$7d12200010f0192e$export$7d727cacaa7cea1e = `lm1DSq_spectrum-ColorArea-slider`;
+$7d12200010f0192e$export$afe4c366ed4e659c = `lm1DSq_spectrum-ColorHandle-color`;
+
+
+
+
+
+
+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, "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, "is-focused", () => $f60625fffea2b12e$export$e7dc768d35940237, (v) => $f60625fffea2b12e$export$e7dc768d35940237 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorControl-hiddenField", () => $f60625fffea2b12e$export$41ee4f903fc703f9, (v) => $f60625fffea2b12e$export$41ee4f903fc703f9 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel", () => $f60625fffea2b12e$export$b70a5ca28702fbc6, (v) => $f60625fffea2b12e$export$b70a5ca28702fbc6 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-gradient", () => $f60625fffea2b12e$export$9afaa791d7500a9b, (v) => $f60625fffea2b12e$export$9afaa791d7500a9b = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-handle", () => $f60625fffea2b12e$export$4cd23920eb8ac056, (v) => $f60625fffea2b12e$export$4cd23920eb8ac056 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-segment", () => $f60625fffea2b12e$export$ada9fbffdaa4f10, (v) => $f60625fffea2b12e$export$ada9fbffdaa4f10 = v);
+$parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-slider", () => $f60625fffea2b12e$export$f476ddda713d62b, (v) => $f60625fffea2b12e$export$f476ddda713d62b = v);
+var $f60625fffea2b12e$export$d35bc1e505d1ebbf;
+var $f60625fffea2b12e$export$8778c911bed6c759;
+var $f60625fffea2b12e$export$e7dc768d35940237;
+var $f60625fffea2b12e$export$41ee4f903fc703f9;
+var $f60625fffea2b12e$export$b70a5ca28702fbc6;
+var $f60625fffea2b12e$export$9afaa791d7500a9b;
+var $f60625fffea2b12e$export$4cd23920eb8ac056;
+var $f60625fffea2b12e$export$ada9fbffdaa4f10;
+var $f60625fffea2b12e$export$f476ddda713d62b;
+$f60625fffea2b12e$export$d35bc1e505d1ebbf = `qPIMxa_is-disabled`;
+$f60625fffea2b12e$export$8778c911bed6c759 = `qPIMxa_is-dragged`;
+$f60625fffea2b12e$export$e7dc768d35940237 = `qPIMxa_is-focused`;
+$f60625fffea2b12e$export$41ee4f903fc703f9 = `qPIMxa_spectrum-ColorControl-hiddenField`;
+$f60625fffea2b12e$export$b70a5ca28702fbc6 = `qPIMxa_spectrum-ColorWheel`;
+$f60625fffea2b12e$export$9afaa791d7500a9b = `qPIMxa_spectrum-ColorWheel-gradient`;
+$f60625fffea2b12e$export$4cd23920eb8ac056 = `qPIMxa_spectrum-ColorWheel-handle`;
+$f60625fffea2b12e$export$ada9fbffdaa4f10 = `qPIMxa_spectrum-ColorWheel-segment`;
+$f60625fffea2b12e$export$f476ddda713d62b = `qPIMxa_spectrum-ColorWheel-slider ${$f60625fffea2b12e$export$41ee4f903fc703f9}`;
+
+
+
+
+
+
+
+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, "contextualHelp", () => $670e80c7e5915fb5$export$4ba534aba1836d, (v) => $670e80c7e5915fb5$export$4ba534aba1836d = v);
+$parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
+$parcel$export($670e80c7e5915fb5$exports, "is-focused", () => $670e80c7e5915fb5$export$e7dc768d35940237, (v) => $670e80c7e5915fb5$export$e7dc768d35940237 = v);
+$parcel$export($670e80c7e5915fb5$exports, "label", () => $670e80c7e5915fb5$export$1237798dc640739a, (v) => $670e80c7e5915fb5$export$1237798dc640739a = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorControl-hiddenField", () => $670e80c7e5915fb5$export$41ee4f903fc703f9, (v) => $670e80c7e5915fb5$export$41ee4f903fc703f9 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = 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, "spectrum-ColorSlider-contextualHelp", () => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c, (v) => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-handle", () => $670e80c7e5915fb5$export$8c273ba92fabe1f1, (v) => $670e80c7e5915fb5$export$8c273ba92fabe1f1 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-labelContainer", () => $670e80c7e5915fb5$export$65139e62047f0361, (v) => $670e80c7e5915fb5$export$65139e62047f0361 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-slider", () => $670e80c7e5915fb5$export$2f08b72944af536, (v) => $670e80c7e5915fb5$export$2f08b72944af536 = v);
+$parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-valueLabel", () => $670e80c7e5915fb5$export$c2fbec5a538c1f81, (v) => $670e80c7e5915fb5$export$c2fbec5a538c1f81 = v);
+$parcel$export($670e80c7e5915fb5$exports, "value", () => $670e80c7e5915fb5$export$2ab9a8f9f1186f14, (v) => $670e80c7e5915fb5$export$2ab9a8f9f1186f14 = v);
+var $670e80c7e5915fb5$export$4ba534aba1836d;
+var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
+var $670e80c7e5915fb5$export$e7dc768d35940237;
+var $670e80c7e5915fb5$export$1237798dc640739a;
+var $670e80c7e5915fb5$export$41ee4f903fc703f9;
+var $670e80c7e5915fb5$export$a5f8b0989b27a604;
+var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
+var $670e80c7e5915fb5$export$33e97914f6746614;
+var $670e80c7e5915fb5$export$cd1c093289104c66;
+var $670e80c7e5915fb5$export$26ffe4cf5a5aa53c;
+var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
+var $670e80c7e5915fb5$export$65139e62047f0361;
+var $670e80c7e5915fb5$export$2f08b72944af536;
+var $670e80c7e5915fb5$export$c2fbec5a538c1f81;
+var $670e80c7e5915fb5$export$2ab9a8f9f1186f14;
+$670e80c7e5915fb5$export$4ba534aba1836d = `WJOmgG_contextualHelp`;
+$670e80c7e5915fb5$export$d35bc1e505d1ebbf = `WJOmgG_is-disabled`;
+$670e80c7e5915fb5$export$e7dc768d35940237 = `WJOmgG_is-focused`;
+$670e80c7e5915fb5$export$1237798dc640739a = `WJOmgG_label`;
+$670e80c7e5915fb5$export$41ee4f903fc703f9 = `WJOmgG_spectrum-ColorControl-hiddenField`;
+$670e80c7e5915fb5$export$a5f8b0989b27a604 = `WJOmgG_spectrum-ColorSlider`;
+$670e80c7e5915fb5$export$83dcf61b398bfaf1 = `WJOmgG_spectrum-ColorSlider--vertical`;
+$670e80c7e5915fb5$export$33e97914f6746614 = `WJOmgG_spectrum-ColorSlider-container--horizontal`;
+$670e80c7e5915fb5$export$cd1c093289104c66 = `WJOmgG_spectrum-ColorSlider-container--vertical`;
+$670e80c7e5915fb5$export$26ffe4cf5a5aa53c = `WJOmgG_spectrum-ColorSlider-contextualHelp`;
+$670e80c7e5915fb5$export$8c273ba92fabe1f1 = `WJOmgG_spectrum-ColorSlider-handle`;
+$670e80c7e5915fb5$export$65139e62047f0361 = `WJOmgG_spectrum-ColorSlider-labelContainer`;
+$670e80c7e5915fb5$export$2f08b72944af536 = `WJOmgG_spectrum-ColorSlider-slider ${$670e80c7e5915fb5$export$41ee4f903fc703f9}`;
+$670e80c7e5915fb5$export$c2fbec5a538c1f81 = `WJOmgG_spectrum-ColorSlider-valueLabel`;
+$670e80c7e5915fb5$export$2ab9a8f9f1186f14 = `WJOmgG_value`;
+
+
+
+
+
+
+
+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 = `UccskW_react-spectrum-ColorField-input`;
+
+
+
+
+
+
+
+function $0077d47e004328f0$var$ColorField(props, ref) {
+    props = (0, $kF0Zw$useProviderProps)(props);
+    props = (0, $kF0Zw$useFormProps)(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 result = (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,
+        ...result,
+        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 */
+.hoc2UW_spectrum-ColorHandle{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*calc(var(--spectrum-colorhandle-size,var(--spectrum-global-dimension-size-200))/2));margin-top:calc(-1*calc(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) + calc(-1*var(--spectrum-global-dimension-static-size-25,2px))),calc(var(--spectrum-global-dimension-static-size-100,8px) + calc(-1*var(--spectrum-global-dimension-static-size-25,2px)))calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + calc(-1*var(--spectrum-global-dimension-static-size-25,2px))),calc(-1*var(--spectrum-global-dimension-static-size-100,8px) + calc(-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;border-radius:100%;display:block;position:absolute}.hoc2UW_spectrum-ColorHandle:after{content:"";left:calc(50% - calc(var(--spectrum-global-dimension-size-300)/2));top:calc(50% - calc(var(--spectrum-global-dimension-size-300)/2));width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:100%;display:block;position:absolute}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled{pointer-events:none}.hoc2UW_spectrum-ColorControl-handle--focused{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)))}.hoc2UW_spectrum-ColorHandle-color{border-radius:100%;width:100%;height:100%}.hoc2UW_spectrum-ColorHandle{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%)}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled{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}.hoc2UW_spectrum-ColorHandle.hoc2UW_is-disabled .hoc2UW_spectrum-ColorHandle-color{display:none}.hoc2UW_spectrum-ColorHandle-color{box-shadow:inset 0 0 0 var(--spectrum-colorhandle-outer-border-size,var(--spectrum-global-dimension-static-size-10))#0000006b}@media (forced-colors:active){.hoc2UW_spectrum-ColorHandle{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}}.HpWpfq_spectrum-ColorLoupe{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% - calc(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)/2));pointer-events:none;transition:transform .1s ease-in-out,opacity .125s ease-in-out;position:absolute}.HpWpfq_spectrum-ColorLoupe.HpWpfq_is-open{opacity:1;z-index:2;transform:translate(0)}.HpWpfq_spectrum-ColorLoupe-outer{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)}.HpWpfq_spectrum-ColorLoupe-inner-background{fill:var(--spectrum-global-color-static-white,#fff)}.HpWpfq_spectrum-ColorLoupe-inner-checker{fill:var(--spectrum-global-color-static-gray-500,#bcbcbc)}@media (forced-colors:active){.HpWpfq_spectrum-ColorLoupe{forced-color-adjust:none;--spectrum-colorloupe-inner-border-color:ButtonText;--spectrum-colorloupe-outer-border-color:ButtonFace}}.lm1DSq_spectrum-ColorArea{inline-size:var(--spectrum-colorarea-default-width,var(--spectrum-global-dimension-size-2400));block-size:var(--spectrum-colorarea-default-height,var(--spectrum-global-dimension-size-2400));min-inline-size:var(--spectrum-colorarea-min-width,var(--spectrum-global-dimension-size-800));min-block-size: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}.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused{z-index:2}.lm1DSq_spectrum-ColorArea.lm1DSq_is-focused .lm1DSq_spectrum-ColorArea-handle{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)))}.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring{z-index:2}.lm1DSq_spectrum-ColorArea.lm1DSq_focus-ring .lm1DSq_spectrum-ColorArea-handle{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)))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{pointer-events:none}.lm1DSq_spectrum-ColorArea: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}.lm1DSq_spectrum-ColorArea-handle{top:0;left:0}.lm1DSq_spectrum-ColorArea-handle:focus-within{z-index:2}.lm1DSq_spectrum-ColorArea-gradient{border-radius:var(--spectrum-colorarea-border-radius,var(--spectrum-alias-border-radius-regular));width:100%;height:100%}.lm1DSq_spectrum-ColorArea-slider{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.lm1DSq_spectrum-ColorArea:before{box-shadow:inset 0 0 0 var(--spectrum-colorarea-border-size,var(--spectrum-alias-border-size-thin))var(--spectrum-colorarea-border-color)}.lm1DSq_spectrum-ColorArea-gradient,.lm1DSq_spectrum-ColorHandle-color{forced-color-adjust:none}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{background:var(--spectrum-colorarea-fill-color-disabled,var(--spectrum-global-color-gray-300))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled: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))}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled .lm1DSq_spectrum-ColorArea-gradient{display:none}@media (forced-colors:active){.lm1DSq_spectrum-ColorArea{--spectrum-colorarea-fill-color-disabled:GrayText;forced-color-adjust:none}.lm1DSq_spectrum-ColorArea.lm1DSq_is-disabled{forced-color-adjust:none}}.qPIMxa_spectrum-ColorControl-hiddenField{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel{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;touch-action:none;cursor:default;border-radius:100%;display:block;position:relative}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel .qPIMxa_spectrum-ColorWheel-handle{margin:0}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-focused{z-index:2}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled{pointer-events:none}.qPIMxa_spectrum-ColorWheel.qPIMxa_spectrum-ColorWheel.qPIMxa_is-dragged{z-index:2}.qPIMxa_spectrum-ColorWheel-gradient{z-index:0;width:calc(var(--spectrum-global-dimension-size-125)*16);height:calc(var(--spectrum-global-dimension-size-125)*16);position:relative}.qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel-gradient:after{content:"";border-width:var(--spectrum-colorwheel-border-size,var(--spectrum-alias-border-size-thin));border-style:solid;border-radius:100%;position:absolute}.qPIMxa_spectrum-ColorWheel-gradient:before{top:0;bottom:0;left:0;right:0}.qPIMxa_spectrum-ColorWheel-gradient: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)))}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient{background:var(--spectrum-colorwheel-fill-color-disabled,var(--spectrum-global-color-gray-300))!important}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-gradient:after{border-color:var(--spectrum-colorwheel-border-color-disabled,var(--spectrum-global-color-gray-300))}.qPIMxa_spectrum-ColorWheel.qPIMxa_is-disabled .qPIMxa_spectrum-ColorWheel-segment{display:none}.qPIMxa_spectrum-ColorWheel-gradient:before,.qPIMxa_spectrum-ColorWheel-gradient:after{border-color:var(--spectrum-colorarea-border-color)}@media (forced-colors:active){.qPIMxa_spectrum-ColorWheel{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}}.WJOmgG_spectrum-ColorControl-hiddenField{opacity:.0001;z-index:0;pointer-events:none;width:100%;height:100%;margin:0;position:absolute;top:0;left:0}.WJOmgG_spectrum-ColorSlider-container--horizontal{width:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400))}.WJOmgG_spectrum-ColorSlider-container--vertical{height:var(--spectrum-colorslider-default-length,var(--spectrum-global-dimension-size-2400));flex-direction:column;display:flex}.WJOmgG_spectrum-ColorSlider{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;touch-action:none;cursor:default;width:100%;display:block;position:relative}.WJOmgG_spectrum-ColorSlider .WJOmgG_spectrum-ColorSlider-handle.WJOmgG_spectrum-ColorSlider-handle{margin:0}.WJOmgG_spectrum-ColorSlider: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}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-focused{z-index:2}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled{pointer-events:none}.WJOmgG_spectrum-ColorSlider--vertical{width:var(--spectrum-colorslider-vertical-width,var(--spectrum-global-dimension-size-300));flex:1;display:inline-block}.WJOmgG_spectrum-ColorSlider--vertical .WJOmgG_spectrum-ColorSlider-handle{top:0;left:50%}.WJOmgG_spectrum-ColorSlider-handle{top:50%;left:0}.WJOmgG_spectrum-ColorSlider-handle:after{width:var(--spectrum-global-dimension-size-300);height:var(--spectrum-global-dimension-size-300);border-radius:0%}.WJOmgG_spectrum-ColorSlider-labelContainer{grid-template-columns:auto 1fr auto;grid-template-areas:"WJOmgG_label WJOmgG_contextualHelp WJOmgG_value";justify-items:start;display:grid}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp{margin-inline-start:var(--spectrum-global-dimension-size-50);margin-top:var(--spectrum-global-dimension-size-25);grid-area:WJOmgG_contextualHelp}.WJOmgG_spectrum-ColorSlider-valueLabel{grid-area:WJOmgG_value;margin-inline-start:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider{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)}.WJOmgG_spectrum-ColorSlider: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%)}.WJOmgG_spectrum-ColorSlider.WJOmgG_is-disabled{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){.WJOmgG_spectrum-ColorSlider{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}}.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown){unicode-bidi:plaintext}.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:end}.UccskW_react-spectrum-ColorField-input:not(:placeholder-shown):is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){text-align:end}