@react-spectrum/color 3.0.0-nightly.3598 → 3.0.0-nightly.3600

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.
Files changed (6) hide show
  1. package/dist/main.css +1 -1
  2. package/dist/main.js +190 -129
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.mjs +190 -129
  5. package/dist/module.mjs.map +1 -1
  6. package/package.json +21 -21
package/dist/module.mjs CHANGED
@@ -17,8 +17,39 @@ function $parcel$interopDefault(a) {
17
17
  function $parcel$export(e, n, v, s) {
18
18
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
19
19
  }
20
-
21
-
20
+ /*
21
+ * Copyright 2020 Adobe. All rights reserved.
22
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
23
+ * you may not use this file except in compliance with the License. You may obtain a copy
24
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
25
+ *
26
+ * Unless required by applicable law or agreed to in writing, software distributed under
27
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
28
+ * OF ANY KIND, either express or implied. See the License for the specific language
29
+ * governing permissions and limitations under the License.
30
+ */ /// <reference types="css-module-types" />
31
+ /*
32
+ * Copyright 2021 Adobe. All rights reserved.
33
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
34
+ * you may not use this file except in compliance with the License. You may obtain a copy
35
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
36
+ *
37
+ * Unless required by applicable law or agreed to in writing, software distributed under
38
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
39
+ * OF ANY KIND, either express or implied. See the License for the specific language
40
+ * governing permissions and limitations under the License.
41
+ */
42
+ /*
43
+ * Copyright 2020 Adobe. All rights reserved.
44
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
45
+ * you may not use this file except in compliance with the License. You may obtain a copy
46
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
47
+ *
48
+ * Unless required by applicable law or agreed to in writing, software distributed under
49
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
50
+ * OF ANY KIND, either express or implied. See the License for the specific language
51
+ * governing permissions and limitations under the License.
52
+ */
22
53
 
23
54
  var $9d103974e3e19727$exports = {};
24
55
 
@@ -60,62 +91,62 @@ $f3cdcbdb4b87f010$export$f9a2a02e0b271024 = "spectrum-ColorLoupe-inner-checker_c
60
91
 
61
92
 
62
93
  function $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc(props) {
63
- let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = '' , ...otherProps } = props;
64
- let patternId = $kF0Zw$useId();
65
- let valueCSS = value.toString('css');
66
- return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
67
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports)), 'spectrum-ColorHandle', {
68
- 'is-focused': isFocused,
69
- 'is-disabled': isDisabled
70
- }) + ' ' + className,
94
+ let { value: value , isDisabled: isDisabled , isDragging: isDragging , isFocused: isFocused , children: children , className: className = "" , ...otherProps } = props;
95
+ let patternId = (0, $kF0Zw$useId)();
96
+ let valueCSS = value.toString("css");
97
+ return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
98
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports))), "spectrum-ColorHandle", {
99
+ "is-focused": isFocused,
100
+ "is-disabled": isDisabled
101
+ }) + " " + className,
71
102
  ...otherProps
72
- }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
73
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports)), 'spectrum-ColorHandle-color'),
103
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
104
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d103974e3e19727$exports))), "spectrum-ColorHandle-color"),
74
105
  style: {
75
106
  backgroundColor: valueCSS
76
107
  }
77
- }), /*#__PURE__*/ $kF0Zw$react.createElement("svg", {
78
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe', {
79
- 'is-open': isDragging
108
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("svg", {
109
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe", {
110
+ "is-open": isDragging
80
111
  }),
81
112
  "aria-hidden": "true"
82
- }, /*#__PURE__*/ $kF0Zw$react.createElement("pattern", {
113
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("pattern", {
83
114
  id: patternId,
84
115
  x: "0",
85
116
  y: "0",
86
117
  width: "16",
87
118
  height: "16",
88
119
  patternUnits: "userSpaceOnUse"
89
- }, /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
90
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-background'),
120
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
121
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-background"),
91
122
  x: "0",
92
123
  y: "0",
93
124
  width: "16",
94
125
  height: "16"
95
- }), /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
96
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-checker'),
126
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
127
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-checker"),
97
128
  x: "0",
98
129
  y: "0",
99
130
  width: "8",
100
131
  height: "8"
101
- }), /*#__PURE__*/ $kF0Zw$react.createElement("rect", {
102
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner-checker'),
132
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("rect", {
133
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner-checker"),
103
134
  x: "8",
104
135
  y: "8",
105
136
  width: "8",
106
137
  height: "8"
107
- })), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
108
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner'),
138
+ })), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
139
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner"),
109
140
  d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
110
141
  fill: `url(#${patternId})`
111
- }), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
112
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-inner'),
142
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
143
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-inner"),
113
144
  d: "M25 1a24 24 0 0124 24c0 16.255-24 40-24 40S1 41.255 1 25A24 24 0 0125 1z",
114
145
  fill: valueCSS
115
- }), /*#__PURE__*/ $kF0Zw$react.createElement("path", {
116
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports)), 'spectrum-ColorLoupe-outer'),
146
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("path", {
147
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f3cdcbdb4b87f010$exports))), "spectrum-ColorLoupe-outer"),
117
148
  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"
118
- })), children));
149
+ })), children);
119
150
  }
120
151
 
121
152
 
@@ -154,25 +185,25 @@ $7d12200010f0192e$export$afe4c366ed4e659c = "spectrum-ColorHandle-color_35e2c0";
154
185
 
155
186
 
156
187
  function $40046aa1a7ccb226$var$ColorArea(props, ref) {
157
- props = $kF0Zw$useProviderProps(props);
188
+ props = (0, $kF0Zw$useProviderProps)(props);
158
189
  let { isDisabled: isDisabled } = props;
159
- let size = props.size && $kF0Zw$dimensionValue(props.size);
160
- let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
161
- let inputXRef = $kF0Zw$useRef(null);
162
- let inputYRef = $kF0Zw$useRef(null);
163
- let containerRef = $kF0Zw$useFocusableRef(ref, inputXRef);
164
- let state = $kF0Zw$useColorAreaState(props);
165
- let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = $kF0Zw$useColorArea({
190
+ let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
191
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
192
+ let inputXRef = (0, $kF0Zw$useRef)(null);
193
+ let inputYRef = (0, $kF0Zw$useRef)(null);
194
+ let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputXRef);
195
+ let state = (0, $kF0Zw$useColorAreaState)(props);
196
+ let { colorAreaProps: colorAreaProps , gradientProps: gradientProps , xInputProps: xInputProps , yInputProps: yInputProps , thumbProps: thumbProps } = (0, $kF0Zw$useColorArea)({
166
197
  ...props,
167
198
  inputXRef: inputXRef,
168
199
  inputYRef: inputYRef,
169
200
  containerRef: containerRef
170
201
  }, state);
171
- let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $kF0Zw$useFocusRing();
172
- return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
202
+ let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
203
+ return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
173
204
  ...colorAreaProps,
174
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea', {
175
- 'is-disabled': isDisabled
205
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea", {
206
+ "is-disabled": isDisabled
176
207
  }, styleProps.className),
177
208
  ref: containerRef,
178
209
  style: {
@@ -182,34 +213,44 @@ function $40046aa1a7ccb226$var$ColorArea(props, ref) {
182
213
  width: size,
183
214
  height: size
184
215
  }
185
- }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
216
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
186
217
  ...gradientProps,
187
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-gradient')
188
- }), /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
218
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-gradient")
219
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
189
220
  value: state.getDisplayColor(),
190
221
  isFocused: isFocusVisible,
191
222
  isDisabled: isDisabled,
192
223
  isDragging: state.isDragging,
193
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-handle'),
224
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-handle"),
194
225
  ...thumbProps
195
- }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
226
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
196
227
  role: "presentation"
197
- }, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
198
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-slider'),
199
- ...$kF0Zw$mergeProps(xInputProps, focusProps),
228
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
229
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-slider"),
230
+ ...(0, $kF0Zw$mergeProps)(xInputProps, focusProps),
200
231
  ref: inputXRef
201
- }), /*#__PURE__*/ $kF0Zw$react.createElement("input", {
202
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports)), 'spectrum-ColorArea-slider'),
203
- ...$kF0Zw$mergeProps(yInputProps, focusProps),
232
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
233
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($7d12200010f0192e$exports))), "spectrum-ColorArea-slider"),
234
+ ...(0, $kF0Zw$mergeProps)(yInputProps, focusProps),
204
235
  ref: inputYRef
205
- })))));
236
+ }))));
206
237
  }
207
238
  /**
208
239
  * ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
209
- */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ $kF0Zw$react.forwardRef($40046aa1a7ccb226$var$ColorArea);
210
-
240
+ */ let $40046aa1a7ccb226$export$b2103f68a961418e = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($40046aa1a7ccb226$var$ColorArea);
211
241
 
212
242
 
243
+ /*
244
+ * Copyright 2020 Adobe. All rights reserved.
245
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
246
+ * you may not use this file except in compliance with the License. You may obtain a copy
247
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
248
+ *
249
+ * Unless required by applicable law or agreed to in writing, software distributed under
250
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
251
+ * OF ANY KIND, either express or implied. See the License for the specific language
252
+ * governing permissions and limitations under the License.
253
+ */
213
254
 
214
255
 
215
256
  var $f60625fffea2b12e$exports = {};
@@ -247,18 +288,18 @@ $f60625fffea2b12e$export$ada9fbffdaa4f10 = "spectrum-ColorWheel-segment_31462a";
247
288
 
248
289
  const $3aac1c27203f04b5$var$WHEEL_THICKNESS = 24;
249
290
  function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
250
- props = $kF0Zw$useProviderProps(props);
291
+ props = (0, $kF0Zw$useProviderProps)(props);
251
292
  let { isDisabled: isDisabled } = props;
252
- let size = props.size && $kF0Zw$dimensionValue(props.size);
253
- let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
254
- let inputRef = $kF0Zw$useRef(null);
255
- let containerRef = $kF0Zw$useFocusableRef(ref, inputRef);
256
- let [wheelRadius, setWheelRadius] = $kF0Zw$useState(0);
257
- let [wheelThickness, setWheelThickness] = $kF0Zw$useState($3aac1c27203f04b5$var$WHEEL_THICKNESS);
258
- let resizeHandler = $kF0Zw$useCallback(()=>{
293
+ let size = props.size && (0, $kF0Zw$dimensionValue)(props.size);
294
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
295
+ let inputRef = (0, $kF0Zw$useRef)(null);
296
+ let containerRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
297
+ let [wheelRadius, setWheelRadius] = (0, $kF0Zw$useState)(0);
298
+ let [wheelThickness, setWheelThickness] = (0, $kF0Zw$useState)($3aac1c27203f04b5$var$WHEEL_THICKNESS);
299
+ let resizeHandler = (0, $kF0Zw$useCallback)(()=>{
259
300
  if (containerRef.current) {
260
301
  setWheelRadius(containerRef.current.offsetWidth / 2);
261
- let thickness = window.getComputedStyle(containerRef.current).getPropertyValue('--spectrum-colorwheel-track-thickness');
302
+ let thickness = window.getComputedStyle(containerRef.current).getPropertyValue("--spectrum-colorwheel-track-thickness");
262
303
  if (thickness) setWheelThickness(parseInt(thickness, 10));
263
304
  }
264
305
  }, [
@@ -266,59 +307,69 @@ function $3aac1c27203f04b5$var$ColorWheel(props, ref) {
266
307
  setWheelRadius,
267
308
  setWheelThickness
268
309
  ]);
269
- $kF0Zw$useEffect(()=>{
310
+ (0, $kF0Zw$useEffect)(()=>{
270
311
  // the size observer's fallback to the window resize event doesn't fire on mount
271
312
  if (wheelRadius === 0) resizeHandler();
272
313
  }, [
273
314
  wheelRadius,
274
315
  resizeHandler
275
316
  ]);
276
- $kF0Zw$useResizeObserver({
317
+ (0, $kF0Zw$useResizeObserver)({
277
318
  ref: containerRef,
278
319
  onResize: resizeHandler
279
320
  });
280
- let state = $kF0Zw$useColorWheelState(props);
281
- let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = $kF0Zw$useColorWheel({
321
+ let state = (0, $kF0Zw$useColorWheelState)(props);
322
+ let { trackProps: trackProps , inputProps: inputProps , thumbProps: thumbProps } = (0, $kF0Zw$useColorWheel)({
282
323
  ...props,
283
324
  innerRadius: wheelRadius - wheelThickness,
284
325
  outerRadius: wheelRadius
285
326
  }, state, inputRef);
286
- let { focusProps: focusProps , isFocusVisible: isFocusVisible } = $kF0Zw$useFocusRing();
287
- return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
288
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel', {
289
- 'is-disabled': isDisabled
327
+ let { focusProps: focusProps , isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusRing)();
328
+ return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
329
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel", {
330
+ "is-disabled": isDisabled
290
331
  }, styleProps.className),
291
332
  ref: containerRef,
292
333
  style: {
293
334
  ...styleProps.style,
294
335
  // Workaround around https://github.com/adobe/spectrum-css/issues/1032
295
336
  // @ts-ignore
296
- 'width': size,
297
- 'height': size
337
+ "width": size,
338
+ "height": size
298
339
  }
299
- }, /*#__PURE__*/ $kF0Zw$react.createElement("div", {
340
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
300
341
  ...trackProps,
301
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-gradient')
302
- }), /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
342
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-gradient")
343
+ }), /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
303
344
  value: state.getDisplayColor(),
304
345
  isFocused: isFocusVisible,
305
346
  isDisabled: isDisabled,
306
347
  isDragging: state.isDragging,
307
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-handle'),
348
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-handle"),
308
349
  ...thumbProps
309
- }, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
350
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
310
351
  ...focusProps,
311
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports)), 'spectrum-ColorWheel-slider'),
352
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($f60625fffea2b12e$exports))), "spectrum-ColorWheel-slider"),
312
353
  ...inputProps,
313
354
  ref: inputRef
314
- }))));
355
+ })));
315
356
  }
316
357
  /**
317
358
  * ColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
318
- */ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ $kF0Zw$react.forwardRef($3aac1c27203f04b5$var$ColorWheel);
319
-
359
+ */ let $3aac1c27203f04b5$export$f80663f808113381 = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($3aac1c27203f04b5$var$ColorWheel);
320
360
 
321
361
 
362
+ /*
363
+ * Copyright 2020 Adobe. All rights reserved.
364
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
365
+ * you may not use this file except in compliance with the License. You may obtain a copy
366
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
367
+ *
368
+ * Unless required by applicable law or agreed to in writing, software distributed under
369
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
370
+ * OF ANY KIND, either express or implied. See the License for the specific language
371
+ * governing permissions and limitations under the License.
372
+ */
322
373
 
323
374
 
324
375
 
@@ -365,88 +416,98 @@ $670e80c7e5915fb5$export$c2fbec5a538c1f81 = "spectrum-ColorSlider-valueLabel_a5b
365
416
 
366
417
 
367
418
  function $3870e4ce67ed7ee1$var$ColorSlider(props, ref) {
368
- props = $kF0Zw$useProviderProps(props);
369
- let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , 'aria-label': ariaLabel } = props;
370
- let vertical = orientation === 'vertical';
371
- let { styleProps: styleProps } = $kF0Zw$useStyleProps(props);
372
- let { locale: locale } = $kF0Zw$useLocale();
373
- let inputRef = $kF0Zw$useRef(null);
374
- let trackRef = $kF0Zw$useRef(null);
375
- let domRef = $kF0Zw$useFocusableRef(ref, inputRef);
376
- let state = $kF0Zw$useColorSliderState({
419
+ props = (0, $kF0Zw$useProviderProps)(props);
420
+ let { isDisabled: isDisabled , channel: channel , orientation: orientation , label: label , showValueLabel: showValueLabel , "aria-label": ariaLabel } = props;
421
+ let vertical = orientation === "vertical";
422
+ let { styleProps: styleProps } = (0, $kF0Zw$useStyleProps)(props);
423
+ let { locale: locale } = (0, $kF0Zw$useLocale)();
424
+ let inputRef = (0, $kF0Zw$useRef)(null);
425
+ let trackRef = (0, $kF0Zw$useRef)(null);
426
+ let domRef = (0, $kF0Zw$useFocusableRef)(ref, inputRef);
427
+ let state = (0, $kF0Zw$useColorSliderState)({
377
428
  ...props,
378
429
  locale: locale
379
430
  });
380
431
  // If vertical and a label is provided, use it as an aria-label instead.
381
432
  if (vertical && label) {
382
- ariaLabel = ariaLabel || (typeof label === 'string' ? label : undefined);
433
+ ariaLabel = ariaLabel || (typeof label === "string" ? label : undefined);
383
434
  label = null;
384
435
  }
385
436
  // If no external label, aria-label or aria-labelledby is provided,
386
437
  // default to displaying the localized channel value.
387
438
  // Specifically check if label is undefined. If label is `null` then display no visible label.
388
439
  // A default aria-label is provided by useColorSlider in that case.
389
- if (label === undefined && !ariaLabel && !props['aria-labelledby'] && !vertical) label = state.value.getChannelName(channel, locale);
440
+ if (label === undefined && !ariaLabel && !props["aria-labelledby"] && !vertical) label = state.value.getChannelName(channel, locale);
390
441
  // Show the value label by default if there is a visible label
391
442
  if (showValueLabel == null) showValueLabel = !!label;
392
- let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = $kF0Zw$useColorSlider({
443
+ let { inputProps: inputProps , thumbProps: thumbProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = (0, $kF0Zw$useColorSlider)({
393
444
  ...props,
394
445
  label: label,
395
- 'aria-label': ariaLabel,
446
+ "aria-label": ariaLabel,
396
447
  trackRef: trackRef,
397
448
  inputRef: inputRef
398
449
  }, state);
399
- let { isFocusVisible: isFocusVisible } = $kF0Zw$useFocusVisible();
400
- let [isFocused, setIsFocused] = $kF0Zw$useState(false);
401
- let { focusProps: focusProps } = $kF0Zw$useFocus({
450
+ let { isFocusVisible: isFocusVisible } = (0, $kF0Zw$useFocusVisible)();
451
+ let [isFocused, setIsFocused] = (0, $kF0Zw$useState)(false);
452
+ let { focusProps: focusProps } = (0, $kF0Zw$useFocus)({
402
453
  isDisabled: isDisabled,
403
454
  onFocusChange: setIsFocused
404
455
  });
405
- return(/*#__PURE__*/ $kF0Zw$react.createElement("div", {
456
+ return /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
406
457
  ref: domRef,
407
458
  ...styleProps,
408
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), {
409
- 'spectrum-ColorSlider-container--horizontal': !vertical,
410
- 'spectrum-ColorSlider-container--vertical': vertical
459
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), {
460
+ "spectrum-ColorSlider-container--horizontal": !vertical,
461
+ "spectrum-ColorSlider-container--vertical": vertical
411
462
  })
412
- }, label && /*#__PURE__*/ $kF0Zw$react.createElement("div", {
413
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-labelContainer')
414
- }, /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, labelProps, label), props.contextualHelp && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$SlotProvider, {
463
+ }, label && /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
464
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-labelContainer")
465
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$Label), labelProps, label), props.contextualHelp && /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$SlotProvider), {
415
466
  slots: {
416
467
  actionButton: {
417
- UNSAFE_className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-contextualHelp')
468
+ UNSAFE_className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-contextualHelp")
418
469
  }
419
470
  }
420
- }, props.contextualHelp), showValueLabel && /*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$Label, {
471
+ }, props.contextualHelp), showValueLabel && /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$Label), {
421
472
  elementType: "span",
422
- UNSAFE_className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-valueLabel')
423
- }, /*#__PURE__*/ $kF0Zw$react.createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ $kF0Zw$react.createElement("div", {
473
+ UNSAFE_className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-valueLabel")
474
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("output", outputProps, state.value.formatChannelValue(channel, locale)))), /*#__PURE__*/ (0, $kF0Zw$react).createElement("div", {
424
475
  ...trackProps,
425
476
  ref: trackRef,
426
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider', {
427
- 'is-disabled': isDisabled,
428
- 'spectrum-ColorSlider--vertical': vertical
477
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider", {
478
+ "is-disabled": isDisabled,
479
+ "spectrum-ColorSlider--vertical": vertical
429
480
  })
430
- }, /*#__PURE__*/ $kF0Zw$react.createElement($3a90e89d07d7bbd5$export$a3cc47cee1c1ccc, {
481
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $3a90e89d07d7bbd5$export$a3cc47cee1c1ccc), {
431
482
  value: state.getDisplayColor(),
432
483
  isFocused: isFocused && isFocusVisible,
433
484
  isDisabled: isDisabled,
434
485
  isDragging: state.isThumbDragging(0),
435
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-handle'),
486
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-handle"),
436
487
  ...thumbProps
437
- }, /*#__PURE__*/ $kF0Zw$react.createElement("input", {
488
+ }, /*#__PURE__*/ (0, $kF0Zw$react).createElement("input", {
438
489
  ...inputProps,
439
490
  ...focusProps,
440
491
  ref: inputRef,
441
- className: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports)), 'spectrum-ColorSlider-slider')
442
- })))));
492
+ className: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($670e80c7e5915fb5$exports))), "spectrum-ColorSlider-slider")
493
+ }))));
443
494
  }
444
495
  /**
445
496
  * ColorSliders allow users to adjust an individual channel of a color value.
446
- */ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ $kF0Zw$react.forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
447
-
497
+ */ let $3870e4ce67ed7ee1$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($3870e4ce67ed7ee1$var$ColorSlider);
448
498
 
449
499
 
500
+ /*
501
+ * Copyright 2020 Adobe. All rights reserved.
502
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
503
+ * you may not use this file except in compliance with the License. You may obtain a copy
504
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
505
+ *
506
+ * Unless required by applicable law or agreed to in writing, software distributed under
507
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
508
+ * OF ANY KIND, either express or implied. See the License for the specific language
509
+ * governing permissions and limitations under the License.
510
+ */
450
511
 
451
512
  var $9d47b39540b9e48a$exports = {};
452
513
 
@@ -460,25 +521,25 @@ $9d47b39540b9e48a$export$7d80c6630a750b1 = "react-spectrum-ColorField-input_7bde
460
521
 
461
522
 
462
523
  function $0077d47e004328f0$var$ColorField(props, ref) {
463
- props = $kF0Zw$useProviderProps(props);
524
+ props = (0, $kF0Zw$useProviderProps)(props);
464
525
  let { value: // These disabled props are handled by the state hook
465
526
  value , defaultValue: defaultValue , onChange: onChange , ...otherProps } = props;
466
- let state = $kF0Zw$useColorFieldState(props);
467
- let inputRef = $kF0Zw$useRef(null);
468
- let { labelProps: labelProps , inputProps: inputProps } = $kF0Zw$useColorField(otherProps, state, inputRef);
469
- 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');
470
- return(/*#__PURE__*/ $kF0Zw$react.createElement($kF0Zw$TextFieldBase, {
527
+ let state = (0, $kF0Zw$useColorFieldState)(props);
528
+ let inputRef = (0, $kF0Zw$useRef)(null);
529
+ let { labelProps: labelProps , inputProps: inputProps } = (0, $kF0Zw$useColorField)(otherProps, state, inputRef);
530
+ 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
+ return /*#__PURE__*/ (0, $kF0Zw$react).createElement((0, $kF0Zw$TextFieldBase), {
471
532
  ...otherProps,
472
533
  ref: ref,
473
534
  inputRef: inputRef,
474
535
  labelProps: labelProps,
475
536
  inputProps: inputProps,
476
- inputClassName: $kF0Zw$classNames((/*@__PURE__*/$parcel$interopDefault($9d47b39540b9e48a$exports)), 'react-spectrum-ColorField-input')
477
- }));
537
+ inputClassName: (0, $kF0Zw$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($9d47b39540b9e48a$exports))), "react-spectrum-ColorField-input")
538
+ });
478
539
  }
479
540
  /**
480
541
  * ColorFields allow users to enter a color in #rrggbb hexadecimal format.
481
- */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ $kF0Zw$react.forwardRef($0077d47e004328f0$var$ColorField);
542
+ */ const $0077d47e004328f0$export$b865d4358897bb17 = /*#__PURE__*/ (0, $kF0Zw$react).forwardRef($0077d47e004328f0$var$ColorField);
482
543
 
483
544
 
484
545