@react-spectrum/color 3.0.0-nightly.4153 → 3.0.0-nightly.4157

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/import.mjs CHANGED
@@ -53,45 +53,48 @@ function $parcel$export(e, n, v, s) {
53
53
 
54
54
  var $9d103974e3e19727$exports = {};
55
55
 
56
- $parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle", () => $9d103974e3e19727$export$cd9afaa621b6216f, (v) => $9d103974e3e19727$export$cd9afaa621b6216f = v);
57
- $parcel$export($9d103974e3e19727$exports, "is-focused", () => $9d103974e3e19727$export$e7dc768d35940237, (v) => $9d103974e3e19727$export$e7dc768d35940237 = v);
56
+ $parcel$export($9d103974e3e19727$exports, "spectrum-ColorControl-handle--focused", () => $9d103974e3e19727$export$1dd67f16e0d58f73, (v) => $9d103974e3e19727$export$1dd67f16e0d58f73 = v);
58
57
  $parcel$export($9d103974e3e19727$exports, "focus-ring", () => $9d103974e3e19727$export$f39a09f249340e2a, (v) => $9d103974e3e19727$export$f39a09f249340e2a = v);
59
58
  $parcel$export($9d103974e3e19727$exports, "is-disabled", () => $9d103974e3e19727$export$d35bc1e505d1ebbf, (v) => $9d103974e3e19727$export$d35bc1e505d1ebbf = v);
59
+ $parcel$export($9d103974e3e19727$exports, "is-focused", () => $9d103974e3e19727$export$e7dc768d35940237, (v) => $9d103974e3e19727$export$e7dc768d35940237 = v);
60
+ $parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle", () => $9d103974e3e19727$export$cd9afaa621b6216f, (v) => $9d103974e3e19727$export$cd9afaa621b6216f = v);
60
61
  $parcel$export($9d103974e3e19727$exports, "spectrum-ColorHandle-color", () => $9d103974e3e19727$export$afe4c366ed4e659c, (v) => $9d103974e3e19727$export$afe4c366ed4e659c = v);
61
- var $9d103974e3e19727$export$cd9afaa621b6216f;
62
- var $9d103974e3e19727$export$e7dc768d35940237;
62
+ var $9d103974e3e19727$export$1dd67f16e0d58f73;
63
63
  var $9d103974e3e19727$export$f39a09f249340e2a;
64
64
  var $9d103974e3e19727$export$d35bc1e505d1ebbf;
65
+ var $9d103974e3e19727$export$e7dc768d35940237;
66
+ var $9d103974e3e19727$export$cd9afaa621b6216f;
65
67
  var $9d103974e3e19727$export$afe4c366ed4e659c;
66
- $9d103974e3e19727$export$cd9afaa621b6216f = "spectrum-ColorHandle_5a9f41";
67
- $9d103974e3e19727$export$e7dc768d35940237 = "is-focused_5a9f41";
68
- $9d103974e3e19727$export$f39a09f249340e2a = "focus-ring_5a9f41";
69
- $9d103974e3e19727$export$d35bc1e505d1ebbf = "is-disabled_5a9f41";
70
- $9d103974e3e19727$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_5a9f41";
68
+ $9d103974e3e19727$export$1dd67f16e0d58f73 = `hoc2UW_spectrum-ColorControl-handle--focused`;
69
+ $9d103974e3e19727$export$f39a09f249340e2a = `hoc2UW_focus-ring ${$9d103974e3e19727$export$1dd67f16e0d58f73}`;
70
+ $9d103974e3e19727$export$d35bc1e505d1ebbf = `hoc2UW_is-disabled`;
71
+ $9d103974e3e19727$export$e7dc768d35940237 = `hoc2UW_is-focused ${$9d103974e3e19727$export$1dd67f16e0d58f73}`;
72
+ $9d103974e3e19727$export$cd9afaa621b6216f = `hoc2UW_spectrum-ColorHandle`;
73
+ $9d103974e3e19727$export$afe4c366ed4e659c = `hoc2UW_spectrum-ColorHandle-color`;
71
74
 
72
75
 
73
76
  var $f3cdcbdb4b87f010$exports = {};
74
77
 
75
- $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe", () => $f3cdcbdb4b87f010$export$88d6ed2576b21809, (v) => $f3cdcbdb4b87f010$export$88d6ed2576b21809 = v);
76
78
  $parcel$export($f3cdcbdb4b87f010$exports, "is-open", () => $f3cdcbdb4b87f010$export$a9781837241c946d, (v) => $f3cdcbdb4b87f010$export$a9781837241c946d = v);
77
- $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-outer", () => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c, (v) => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = v);
79
+ $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe", () => $f3cdcbdb4b87f010$export$88d6ed2576b21809, (v) => $f3cdcbdb4b87f010$export$88d6ed2576b21809 = v);
78
80
  $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-background", () => $f3cdcbdb4b87f010$export$397af82b48750fe5, (v) => $f3cdcbdb4b87f010$export$397af82b48750fe5 = v);
79
81
  $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-inner-checker", () => $f3cdcbdb4b87f010$export$f9a2a02e0b271024, (v) => $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = v);
80
- var $f3cdcbdb4b87f010$export$88d6ed2576b21809;
82
+ $parcel$export($f3cdcbdb4b87f010$exports, "spectrum-ColorLoupe-outer", () => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c, (v) => $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = v);
81
83
  var $f3cdcbdb4b87f010$export$a9781837241c946d;
82
- var $f3cdcbdb4b87f010$export$d6ad38291e8aca9c;
84
+ var $f3cdcbdb4b87f010$export$88d6ed2576b21809;
83
85
  var $f3cdcbdb4b87f010$export$397af82b48750fe5;
84
86
  var $f3cdcbdb4b87f010$export$f9a2a02e0b271024;
85
- $f3cdcbdb4b87f010$export$88d6ed2576b21809 = "spectrum-ColorLoupe_c818a8";
86
- $f3cdcbdb4b87f010$export$a9781837241c946d = "is-open_c818a8";
87
- $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = "spectrum-ColorLoupe-outer_c818a8";
88
- $f3cdcbdb4b87f010$export$397af82b48750fe5 = "spectrum-ColorLoupe-inner-background_c818a8";
89
- $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = "spectrum-ColorLoupe-inner-checker_c818a8";
87
+ var $f3cdcbdb4b87f010$export$d6ad38291e8aca9c;
88
+ $f3cdcbdb4b87f010$export$a9781837241c946d = `HpWpfq_is-open`;
89
+ $f3cdcbdb4b87f010$export$88d6ed2576b21809 = `HpWpfq_spectrum-ColorLoupe`;
90
+ $f3cdcbdb4b87f010$export$397af82b48750fe5 = `HpWpfq_spectrum-ColorLoupe-inner-background`;
91
+ $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = `HpWpfq_spectrum-ColorLoupe-inner-checker`;
92
+ $f3cdcbdb4b87f010$export$d6ad38291e8aca9c = `HpWpfq_spectrum-ColorLoupe-outer`;
90
93
 
91
94
 
92
95
 
93
96
  function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
94
- let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = "" , ...otherProps } = props;
97
+ let { value: value, isDisabled: isDisabled, isDragging: isDragging, isFocused: isFocused, children: children, className: className = "", ...otherProps } = props;
95
98
  let patternId = (0, $kF0Zw$useId)();
96
99
  let valueCSS = value.toString("css");
97
100
  return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
@@ -154,30 +157,30 @@ function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
154
157
 
155
158
  var $7d12200010f0192e$exports = {};
156
159
 
157
- $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea", () => $7d12200010f0192e$export$bb6257a55a3c1efc, (v) => $7d12200010f0192e$export$bb6257a55a3c1efc = v);
158
- $parcel$export($7d12200010f0192e$exports, "is-focused", () => $7d12200010f0192e$export$e7dc768d35940237, (v) => $7d12200010f0192e$export$e7dc768d35940237 = v);
159
160
  $parcel$export($7d12200010f0192e$exports, "focus-ring", () => $7d12200010f0192e$export$f39a09f249340e2a, (v) => $7d12200010f0192e$export$f39a09f249340e2a = v);
160
- $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-handle", () => $7d12200010f0192e$export$d8addbd273c4e00, (v) => $7d12200010f0192e$export$d8addbd273c4e00 = v);
161
161
  $parcel$export($7d12200010f0192e$exports, "is-disabled", () => $7d12200010f0192e$export$d35bc1e505d1ebbf, (v) => $7d12200010f0192e$export$d35bc1e505d1ebbf = v);
162
+ $parcel$export($7d12200010f0192e$exports, "is-focused", () => $7d12200010f0192e$export$e7dc768d35940237, (v) => $7d12200010f0192e$export$e7dc768d35940237 = v);
163
+ $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea", () => $7d12200010f0192e$export$bb6257a55a3c1efc, (v) => $7d12200010f0192e$export$bb6257a55a3c1efc = v);
162
164
  $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-gradient", () => $7d12200010f0192e$export$40686f4fcb8a9916, (v) => $7d12200010f0192e$export$40686f4fcb8a9916 = v);
165
+ $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-handle", () => $7d12200010f0192e$export$d8addbd273c4e00, (v) => $7d12200010f0192e$export$d8addbd273c4e00 = v);
163
166
  $parcel$export($7d12200010f0192e$exports, "spectrum-ColorArea-slider", () => $7d12200010f0192e$export$7d727cacaa7cea1e, (v) => $7d12200010f0192e$export$7d727cacaa7cea1e = v);
164
167
  $parcel$export($7d12200010f0192e$exports, "spectrum-ColorHandle-color", () => $7d12200010f0192e$export$afe4c366ed4e659c, (v) => $7d12200010f0192e$export$afe4c366ed4e659c = v);
165
- var $7d12200010f0192e$export$bb6257a55a3c1efc;
166
- var $7d12200010f0192e$export$e7dc768d35940237;
167
168
  var $7d12200010f0192e$export$f39a09f249340e2a;
168
- var $7d12200010f0192e$export$d8addbd273c4e00;
169
169
  var $7d12200010f0192e$export$d35bc1e505d1ebbf;
170
+ var $7d12200010f0192e$export$e7dc768d35940237;
171
+ var $7d12200010f0192e$export$bb6257a55a3c1efc;
170
172
  var $7d12200010f0192e$export$40686f4fcb8a9916;
173
+ var $7d12200010f0192e$export$d8addbd273c4e00;
171
174
  var $7d12200010f0192e$export$7d727cacaa7cea1e;
172
175
  var $7d12200010f0192e$export$afe4c366ed4e659c;
173
- $7d12200010f0192e$export$bb6257a55a3c1efc = "spectrum-ColorArea_35e2c0";
174
- $7d12200010f0192e$export$e7dc768d35940237 = "is-focused_35e2c0";
175
- $7d12200010f0192e$export$f39a09f249340e2a = "focus-ring_35e2c0";
176
- $7d12200010f0192e$export$d8addbd273c4e00 = "spectrum-ColorArea-handle_35e2c0";
177
- $7d12200010f0192e$export$d35bc1e505d1ebbf = "is-disabled_35e2c0";
178
- $7d12200010f0192e$export$40686f4fcb8a9916 = "spectrum-ColorArea-gradient_35e2c0";
179
- $7d12200010f0192e$export$7d727cacaa7cea1e = "spectrum-ColorArea-slider_35e2c0";
180
- $7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
176
+ $7d12200010f0192e$export$f39a09f249340e2a = `lm1DSq_focus-ring`;
177
+ $7d12200010f0192e$export$d35bc1e505d1ebbf = `lm1DSq_is-disabled`;
178
+ $7d12200010f0192e$export$e7dc768d35940237 = `lm1DSq_is-focused`;
179
+ $7d12200010f0192e$export$bb6257a55a3c1efc = `lm1DSq_spectrum-ColorArea`;
180
+ $7d12200010f0192e$export$40686f4fcb8a9916 = `lm1DSq_spectrum-ColorArea-gradient`;
181
+ $7d12200010f0192e$export$d8addbd273c4e00 = `lm1DSq_spectrum-ColorArea-handle`;
182
+ $7d12200010f0192e$export$7d727cacaa7cea1e = `lm1DSq_spectrum-ColorArea-slider`;
183
+ $7d12200010f0192e$export$afe4c366ed4e659c = `lm1DSq_spectrum-ColorHandle-color`;
181
184
 
182
185
 
183
186
 
@@ -186,20 +189,20 @@ $7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
186
189
 
187
190
  function $40046aa1a7ccb226$var$ColorArea(props, ref) {
188
191
  props = (0, $kF0Zw$useProviderProps)(props);
189
- let { isDisabled: isDisabled } = props;
192
+ let { isDisabled: isDisabled } = props;
190
193
  let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
191
- let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
194
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
192
195
  let inputXRef = (0, $kF0Zw$useRef)(null);
193
196
  let inputYRef = (0, $kF0Zw$useRef)(null);
194
197
  let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputXRef);
195
198
  let state = (0, $kF0Zw$useColorAreaState)(props);
196
- let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = (0, $kF0Zw$useColorArea)({
199
+ let { colorAreaProps: colorAreaProps, gradientProps: gradientProps, xInputProps: xInputProps, yInputProps: yInputProps, thumbProps: thumbProps } = (0, $kF0Zw$useColorArea)({
197
200
  ...props,
198
201
  inputXRef: inputXRef,
199
202
  inputYRef: inputYRef,
200
203
  containerRef: containerRef
201
204
  }, state);
202
- let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
205
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
203
206
  return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
204
207
  ...colorAreaProps,
205
208
  className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea", {
@@ -255,30 +258,33 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
255
258
 
256
259
  var $f60625fffea2b12e$exports = {};
257
260
 
258
- $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel", () => $f60625fffea2b12e$export$b70a5ca28702fbc6, (v) => $f60625fffea2b12e$export$b70a5ca28702fbc6 = v);
259
- $parcel$export($f60625fffea2b12e$exports, "is-focused", () => $f60625fffea2b12e$export$e7dc768d35940237, (v) => $f60625fffea2b12e$export$e7dc768d35940237 = v);
260
- $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-handle", () => $f60625fffea2b12e$export$4cd23920eb8ac056, (v) => $f60625fffea2b12e$export$4cd23920eb8ac056 = v);
261
- $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-slider", () => $f60625fffea2b12e$export$f476ddda713d62b, (v) => $f60625fffea2b12e$export$f476ddda713d62b = v);
262
261
  $parcel$export($f60625fffea2b12e$exports, "is-disabled", () => $f60625fffea2b12e$export$d35bc1e505d1ebbf, (v) => $f60625fffea2b12e$export$d35bc1e505d1ebbf = v);
263
262
  $parcel$export($f60625fffea2b12e$exports, "is-dragged", () => $f60625fffea2b12e$export$8778c911bed6c759, (v) => $f60625fffea2b12e$export$8778c911bed6c759 = v);
263
+ $parcel$export($f60625fffea2b12e$exports, "is-focused", () => $f60625fffea2b12e$export$e7dc768d35940237, (v) => $f60625fffea2b12e$export$e7dc768d35940237 = v);
264
+ $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorControl-hiddenField", () => $f60625fffea2b12e$export$41ee4f903fc703f9, (v) => $f60625fffea2b12e$export$41ee4f903fc703f9 = v);
265
+ $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel", () => $f60625fffea2b12e$export$b70a5ca28702fbc6, (v) => $f60625fffea2b12e$export$b70a5ca28702fbc6 = v);
264
266
  $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-gradient", () => $f60625fffea2b12e$export$9afaa791d7500a9b, (v) => $f60625fffea2b12e$export$9afaa791d7500a9b = v);
267
+ $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-handle", () => $f60625fffea2b12e$export$4cd23920eb8ac056, (v) => $f60625fffea2b12e$export$4cd23920eb8ac056 = v);
265
268
  $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-segment", () => $f60625fffea2b12e$export$ada9fbffdaa4f10, (v) => $f60625fffea2b12e$export$ada9fbffdaa4f10 = v);
266
- var $f60625fffea2b12e$export$b70a5ca28702fbc6;
267
- var $f60625fffea2b12e$export$e7dc768d35940237;
268
- var $f60625fffea2b12e$export$4cd23920eb8ac056;
269
- var $f60625fffea2b12e$export$f476ddda713d62b;
269
+ $parcel$export($f60625fffea2b12e$exports, "spectrum-ColorWheel-slider", () => $f60625fffea2b12e$export$f476ddda713d62b, (v) => $f60625fffea2b12e$export$f476ddda713d62b = v);
270
270
  var $f60625fffea2b12e$export$d35bc1e505d1ebbf;
271
271
  var $f60625fffea2b12e$export$8778c911bed6c759;
272
+ var $f60625fffea2b12e$export$e7dc768d35940237;
273
+ var $f60625fffea2b12e$export$41ee4f903fc703f9;
274
+ var $f60625fffea2b12e$export$b70a5ca28702fbc6;
272
275
  var $f60625fffea2b12e$export$9afaa791d7500a9b;
276
+ var $f60625fffea2b12e$export$4cd23920eb8ac056;
273
277
  var $f60625fffea2b12e$export$ada9fbffdaa4f10;
274
- $f60625fffea2b12e$export$b70a5ca28702fbc6 = "spectrum-ColorWheel_31462a";
275
- $f60625fffea2b12e$export$e7dc768d35940237 = "is-focused_31462a";
276
- $f60625fffea2b12e$export$4cd23920eb8ac056 = "spectrum-ColorWheel-handle_31462a";
277
- $f60625fffea2b12e$export$f476ddda713d62b = "spectrum-ColorWheel-slider_31462a";
278
- $f60625fffea2b12e$export$d35bc1e505d1ebbf = "is-disabled_31462a";
279
- $f60625fffea2b12e$export$8778c911bed6c759 = "is-dragged_31462a";
280
- $f60625fffea2b12e$export$9afaa791d7500a9b = "spectrum-ColorWheel-gradient_31462a";
281
- $f60625fffea2b12e$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
278
+ var $f60625fffea2b12e$export$f476ddda713d62b;
279
+ $f60625fffea2b12e$export$d35bc1e505d1ebbf = `qPIMxa_is-disabled`;
280
+ $f60625fffea2b12e$export$8778c911bed6c759 = `qPIMxa_is-dragged`;
281
+ $f60625fffea2b12e$export$e7dc768d35940237 = `qPIMxa_is-focused`;
282
+ $f60625fffea2b12e$export$41ee4f903fc703f9 = `qPIMxa_spectrum-ColorControl-hiddenField`;
283
+ $f60625fffea2b12e$export$b70a5ca28702fbc6 = `qPIMxa_spectrum-ColorWheel`;
284
+ $f60625fffea2b12e$export$9afaa791d7500a9b = `qPIMxa_spectrum-ColorWheel-gradient`;
285
+ $f60625fffea2b12e$export$4cd23920eb8ac056 = `qPIMxa_spectrum-ColorWheel-handle`;
286
+ $f60625fffea2b12e$export$ada9fbffdaa4f10 = `qPIMxa_spectrum-ColorWheel-segment`;
287
+ $f60625fffea2b12e$export$f476ddda713d62b = `qPIMxa_spectrum-ColorWheel-slider ${$f60625fffea2b12e$export$41ee4f903fc703f9}`;
282
288
 
283
289
 
284
290
 
@@ -289,9 +295,9 @@ $f60625fffea2b12e$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
289
295
  const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
290
296
  function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
291
297
  props = (0, $kF0Zw$useProviderProps)(props);
292
- let { isDisabled: isDisabled } = props;
298
+ let { isDisabled: isDisabled } = props;
293
299
  let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
294
- let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
300
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
295
301
  let inputRef = (0, $kF0Zw$useRef)(null);
296
302
  let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
297
303
  let [wheelRadius, setWheelRadius] = (0, $kF0Zw$useState)(0);
@@ -319,12 +325,12 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
319
325
  onResize: resizeHandler
320
326
  });
321
327
  let state = (0, $kF0Zw$useColorWheelState)(props);
322
- let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = (0, $kF0Zw$useColorWheel)({
328
+ let { trackProps: trackProps, inputProps: inputProps, thumbProps: thumbProps } = (0, $kF0Zw$useColorWheel)({
323
329
  ...props,
324
330
  innerRadius: wheelRadius - wheelThickness,
325
331
  outerRadius: wheelRadius
326
332
  }, state, inputRef);
327
- let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
333
+ let { focusProps: focusProps, isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
328
334
  return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
329
335
  className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel", {
330
336
  "is-disabled": isDisabled
@@ -375,39 +381,51 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
375
381
 
376
382
  var $670e80c7e5915fb5$exports = {};
377
383
 
378
- $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
384
+ $parcel$export($670e80c7e5915fb5$exports, "contextualHelp", () => $670e80c7e5915fb5$export$4ba534aba1836d, (v) => $670e80c7e5915fb5$export$4ba534aba1836d = v);
385
+ $parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
379
386
  $parcel$export($670e80c7e5915fb5$exports, "is-focused", () => $670e80c7e5915fb5$export$e7dc768d35940237, (v) => $670e80c7e5915fb5$export$e7dc768d35940237 = v);
380
- $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-handle", () => $670e80c7e5915fb5$export$8c273ba92fabe1f1, (v) => $670e80c7e5915fb5$export$8c273ba92fabe1f1 = v);
381
- $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-slider", () => $670e80c7e5915fb5$export$2f08b72944af536, (v) => $670e80c7e5915fb5$export$2f08b72944af536 = v);
387
+ $parcel$export($670e80c7e5915fb5$exports, "label", () => $670e80c7e5915fb5$export$1237798dc640739a, (v) => $670e80c7e5915fb5$export$1237798dc640739a = v);
388
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorControl-hiddenField", () => $670e80c7e5915fb5$export$41ee4f903fc703f9, (v) => $670e80c7e5915fb5$export$41ee4f903fc703f9 = v);
389
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider", () => $670e80c7e5915fb5$export$a5f8b0989b27a604, (v) => $670e80c7e5915fb5$export$a5f8b0989b27a604 = v);
390
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = v);
382
391
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--horizontal", () => $670e80c7e5915fb5$export$33e97914f6746614, (v) => $670e80c7e5915fb5$export$33e97914f6746614 = v);
383
392
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-container--vertical", () => $670e80c7e5915fb5$export$cd1c093289104c66, (v) => $670e80c7e5915fb5$export$cd1c093289104c66 = v);
384
- $parcel$export($670e80c7e5915fb5$exports, "is-disabled", () => $670e80c7e5915fb5$export$d35bc1e505d1ebbf, (v) => $670e80c7e5915fb5$export$d35bc1e505d1ebbf = v);
385
- $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider--vertical", () => $670e80c7e5915fb5$export$83dcf61b398bfaf1, (v) => $670e80c7e5915fb5$export$83dcf61b398bfaf1 = v);
386
- $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-labelContainer", () => $670e80c7e5915fb5$export$65139e62047f0361, (v) => $670e80c7e5915fb5$export$65139e62047f0361 = v);
387
393
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-contextualHelp", () => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c, (v) => $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = v);
394
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-handle", () => $670e80c7e5915fb5$export$8c273ba92fabe1f1, (v) => $670e80c7e5915fb5$export$8c273ba92fabe1f1 = v);
395
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-labelContainer", () => $670e80c7e5915fb5$export$65139e62047f0361, (v) => $670e80c7e5915fb5$export$65139e62047f0361 = v);
396
+ $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-slider", () => $670e80c7e5915fb5$export$2f08b72944af536, (v) => $670e80c7e5915fb5$export$2f08b72944af536 = v);
388
397
  $parcel$export($670e80c7e5915fb5$exports, "spectrum-ColorSlider-valueLabel", () => $670e80c7e5915fb5$export$c2fbec5a538c1f81, (v) => $670e80c7e5915fb5$export$c2fbec5a538c1f81 = v);
389
- var $670e80c7e5915fb5$export$a5f8b0989b27a604;
398
+ $parcel$export($670e80c7e5915fb5$exports, "value", () => $670e80c7e5915fb5$export$2ab9a8f9f1186f14, (v) => $670e80c7e5915fb5$export$2ab9a8f9f1186f14 = v);
399
+ var $670e80c7e5915fb5$export$4ba534aba1836d;
400
+ var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
390
401
  var $670e80c7e5915fb5$export$e7dc768d35940237;
391
- var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
392
- var $670e80c7e5915fb5$export$2f08b72944af536;
402
+ var $670e80c7e5915fb5$export$1237798dc640739a;
403
+ var $670e80c7e5915fb5$export$41ee4f903fc703f9;
404
+ var $670e80c7e5915fb5$export$a5f8b0989b27a604;
405
+ var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
393
406
  var $670e80c7e5915fb5$export$33e97914f6746614;
394
407
  var $670e80c7e5915fb5$export$cd1c093289104c66;
395
- var $670e80c7e5915fb5$export$d35bc1e505d1ebbf;
396
- var $670e80c7e5915fb5$export$83dcf61b398bfaf1;
397
- var $670e80c7e5915fb5$export$65139e62047f0361;
398
408
  var $670e80c7e5915fb5$export$26ffe4cf5a5aa53c;
409
+ var $670e80c7e5915fb5$export$8c273ba92fabe1f1;
410
+ var $670e80c7e5915fb5$export$65139e62047f0361;
411
+ var $670e80c7e5915fb5$export$2f08b72944af536;
399
412
  var $670e80c7e5915fb5$export$c2fbec5a538c1f81;
400
- $670e80c7e5915fb5$export$a5f8b0989b27a604 = "spectrum-ColorSlider_a5bb06";
401
- $670e80c7e5915fb5$export$e7dc768d35940237 = "is-focused_a5bb06";
402
- $670e80c7e5915fb5$export$8c273ba92fabe1f1 = "spectrum-ColorSlider-handle_a5bb06";
403
- $670e80c7e5915fb5$export$2f08b72944af536 = "spectrum-ColorSlider-slider_a5bb06";
404
- $670e80c7e5915fb5$export$33e97914f6746614 = "spectrum-ColorSlider-container--horizontal_a5bb06";
405
- $670e80c7e5915fb5$export$cd1c093289104c66 = "spectrum-ColorSlider-container--vertical_a5bb06";
406
- $670e80c7e5915fb5$export$d35bc1e505d1ebbf = "is-disabled_a5bb06";
407
- $670e80c7e5915fb5$export$83dcf61b398bfaf1 = "spectrum-ColorSlider--vertical_a5bb06";
408
- $670e80c7e5915fb5$export$65139e62047f0361 = "spectrum-ColorSlider-labelContainer_a5bb06";
409
- $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = "spectrum-ColorSlider-contextualHelp_a5bb06";
410
- $670e80c7e5915fb5$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5bb06";
413
+ var $670e80c7e5915fb5$export$2ab9a8f9f1186f14;
414
+ $670e80c7e5915fb5$export$4ba534aba1836d = `WJOmgG_contextualHelp`;
415
+ $670e80c7e5915fb5$export$d35bc1e505d1ebbf = `WJOmgG_is-disabled`;
416
+ $670e80c7e5915fb5$export$e7dc768d35940237 = `WJOmgG_is-focused`;
417
+ $670e80c7e5915fb5$export$1237798dc640739a = `WJOmgG_label`;
418
+ $670e80c7e5915fb5$export$41ee4f903fc703f9 = `WJOmgG_spectrum-ColorControl-hiddenField`;
419
+ $670e80c7e5915fb5$export$a5f8b0989b27a604 = `WJOmgG_spectrum-ColorSlider`;
420
+ $670e80c7e5915fb5$export$83dcf61b398bfaf1 = `WJOmgG_spectrum-ColorSlider--vertical`;
421
+ $670e80c7e5915fb5$export$33e97914f6746614 = `WJOmgG_spectrum-ColorSlider-container--horizontal`;
422
+ $670e80c7e5915fb5$export$cd1c093289104c66 = `WJOmgG_spectrum-ColorSlider-container--vertical`;
423
+ $670e80c7e5915fb5$export$26ffe4cf5a5aa53c = `WJOmgG_spectrum-ColorSlider-contextualHelp`;
424
+ $670e80c7e5915fb5$export$8c273ba92fabe1f1 = `WJOmgG_spectrum-ColorSlider-handle`;
425
+ $670e80c7e5915fb5$export$65139e62047f0361 = `WJOmgG_spectrum-ColorSlider-labelContainer`;
426
+ $670e80c7e5915fb5$export$2f08b72944af536 = `WJOmgG_spectrum-ColorSlider-slider ${$670e80c7e5915fb5$export$41ee4f903fc703f9}`;
427
+ $670e80c7e5915fb5$export$c2fbec5a538c1f81 = `WJOmgG_spectrum-ColorSlider-valueLabel`;
428
+ $670e80c7e5915fb5$export$2ab9a8f9f1186f14 = `WJOmgG_value`;
411
429
 
412
430
 
413
431
 
@@ -417,10 +435,10 @@ $670e80c7e5915fb5$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5b
417
435
 
418
436
  function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
419
437
  props = (0, $kF0Zw$useProviderProps)(props);
420
- let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , "aria-label": ariaLabel } = props;
438
+ let { isDisabled: isDisabled, channel: channel, orientation: orientation, label: label, showValueLabel: showValueLabel, "aria-label": ariaLabel } = props;
421
439
  let vertical = orientation === "vertical";
422
- let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
423
- let { locale: locale } = (0, $kF0Zw$useLocale)();
440
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
441
+ let { locale: locale } = (0, $kF0Zw$useLocale)();
424
442
  let inputRef = (0, $kF0Zw$useRef)(null);
425
443
  let trackRef = (0, $kF0Zw$useRef)(null);
426
444
  let domRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
@@ -440,16 +458,16 @@ function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
440
458
  if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
441
459
  // Show the value label by default if there is a visible label
442
460
  if (showValueLabel == null) showValueLabel = !!label;
443
- let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = (0, $kF0Zw$useColorSlider)({
461
+ let { inputProps: inputProps, thumbProps: thumbProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $kF0Zw$useColorSlider)({
444
462
  ...props,
445
463
  label: label,
446
464
  "aria-label": ariaLabel,
447
465
  trackRef: trackRef,
448
466
  inputRef: inputRef
449
467
  }, state);
450
- let { isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusVisible)();
468
+ let { isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusVisible)();
451
469
  let [isFocused, setIsFocused] = (0, $kF0Zw$useState)(false);
452
- let { focusProps: focusProps } = (0, $kF0Zw$useFocus)({
470
+ let { focusProps: focusProps } = (0, $kF0Zw$useFocus)({
453
471
  isDisabled: isDisabled,
454
472
  onFocusChange: setIsFocused
455
473
  });
@@ -513,7 +531,7 @@ var $9d47b39540b9e48a$exports = {};
513
531
 
514
532
  $parcel$export($9d47b39540b9e48a$exports, "react-spectrum-ColorField-input", () => $9d47b39540b9e48a$export$7d80c6630a750b1, (v) => $9d47b39540b9e48a$export$7d80c6630a750b1 = v);
515
533
  var $9d47b39540b9e48a$export$7d80c6630a750b1;
516
- $9d47b39540b9e48a$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde3a";
534
+ $9d47b39540b9e48a$export$7d80c6630a750b1 = `UccskW_react-spectrum-ColorField-input`;
517
535
 
518
536
 
519
537
 
@@ -523,10 +541,10 @@ $9d47b39540b9e48a$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde
523
541
  function $0077d47e004328f0$var$ColorField(props, ref) {
524
542
  props = (0, $kF0Zw$useProviderProps)(props);
525
543
  let { value: // These disabled props are handled by the state hook
526
- value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
544
+ value, defaultValue: defaultValue, onChange: onChange, ...otherProps } = props;
527
545
  let state = (0, $kF0Zw$useColorFieldState)(props);
528
546
  let inputRef = (0, $kF0Zw$useRef)(null);
529
- let { labelProps: labelProps , inputProps: inputProps } = (0, $kF0Zw$useColorField)(otherProps, state, inputRef);
547
+ let { labelProps: labelProps, inputProps: inputProps } = (0, $kF0Zw$useColorField)(otherProps, state, inputRef);
530
548
  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");
531
549
  return /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$TextFieldBase), {
532
550
  ...otherProps,
package/dist/main.css CHANGED
@@ -1 +1 @@
1
- .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}}.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}}.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-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-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}}[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}
1
+ .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)))}:-webkit-any() .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)))}:is() .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-top:var(--spectrum-global-dimension-size-25);grid-area:WJOmgG_contextualHelp}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp:not(:-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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp:not(:-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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp:not(: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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp:-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)){margin-right:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-contextualHelp.WJOmgG_spectrum-ColorSlider-contextualHelp: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)){margin-right:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-valueLabel{grid-area:WJOmgG_value}.WJOmgG_spectrum-ColorSlider-valueLabel:not(:-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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-valueLabel:not(:-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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-valueLabel:not(: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))){margin-left:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-valueLabel:-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)){margin-right:var(--spectrum-global-dimension-size-50)}.WJOmgG_spectrum-ColorSlider-valueLabel: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)){margin-right: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}