@react-aria/color 3.0.0-beta.23 → 3.0.0-beta.25

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/import.mjs +37 -37
  2. package/dist/main.js +37 -37
  3. package/dist/main.js.map +1 -1
  4. package/dist/module.js +37 -37
  5. package/dist/module.js.map +1 -1
  6. package/package.json +13 -13
package/dist/import.mjs CHANGED
@@ -507,7 +507,7 @@ const $40297c24c53588e6$var$generateHSB_B = (orientation, dir, alphaValue)=>{
507
507
  };
508
508
  return result;
509
509
  };
510
- function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled }) {
510
+ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
511
511
  let returnVal = (0, $7KHxM$useMemo)(()=>{
512
512
  let orientation = [
513
513
  "top",
@@ -519,7 +519,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
519
519
  gradientStyles: {}
520
520
  };
521
521
  let zValue = state.value.getChannelValue(zChannel);
522
- let { minValue: zMin , maxValue: zMax } = state.value.getChannelRange(zChannel);
522
+ let { minValue: zMin, maxValue: zMax } = state.value.getChannelRange(zChannel);
523
523
  let alphaValue = (zValue - zMin) / (zMax - zMin);
524
524
  let isHSL = state.value.getColorSpace() === "hsl";
525
525
  if (!isDisabled) switch(zChannel){
@@ -554,7 +554,7 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
554
554
  background = $40297c24c53588e6$var$generateHSL_L(orientation, dir, zValue);
555
555
  break;
556
556
  }
557
- let { x: x , y: y } = state.getThumbPosition();
557
+ let { x: x, y: y } = state.getThumbPosition();
558
558
  if (direction === "rtl") x = 1 - x;
559
559
  let forcedColorAdjustNoneStyle = {
560
560
  forcedColorAdjust: "none"
@@ -601,10 +601,10 @@ function $40297c24c53588e6$export$dd62420467d245ca({ direction: direction , stat
601
601
 
602
602
 
603
603
  function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
604
- let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel , xName: xName , yName: yName } = props;
604
+ let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, "aria-label": ariaLabel, xName: xName, yName: yName } = props;
605
605
  let stringFormatter = (0, $7KHxM$useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($3493a52097159720$exports))));
606
- let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
607
- let { direction: direction , locale: locale } = (0, $7KHxM$useLocale)();
606
+ let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
607
+ let { direction: direction, locale: locale } = (0, $7KHxM$useLocale)();
608
608
  let [focusedInput, setFocusedInput] = (0, $7KHxM$useState)(null);
609
609
  let focusInput = (0, $7KHxM$useCallback)((inputRef = inputXRef)=>{
610
610
  if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
@@ -619,11 +619,11 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
619
619
  state.setValue(newColor);
620
620
  });
621
621
  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $7KHxM$useState)(false);
622
- let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = state.channels;
622
+ let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
623
623
  let xChannelStep = state.xChannelStep;
624
624
  let yChannelStep = state.yChannelStep;
625
625
  let currentPosition = (0, $7KHxM$useRef)(null);
626
- let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
626
+ let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
627
627
  onKeyDown (e) {
628
628
  // these are the cases that useMove doesn't handle
629
629
  if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
@@ -667,10 +667,10 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
667
667
  currentPosition.current = null;
668
668
  state.setDragging(true);
669
669
  },
670
- onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
671
- let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = state;
670
+ onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
671
+ let { incrementX: incrementX, decrementX: decrementX, incrementY: incrementY, decrementY: decrementY, xChannelPageStep: xChannelPageStep, xChannelStep: xChannelStep, yChannelPageStep: yChannelPageStep, yChannelStep: yChannelStep, getThumbPosition: getThumbPosition, setColorFromPoint: setColorFromPoint } = state;
672
672
  if (currentPosition.current == null) currentPosition.current = getThumbPosition();
673
- let { width: width , height: height } = containerRef.current.getBoundingClientRect();
673
+ let { width: width, height: height } = containerRef.current.getBoundingClientRect();
674
674
  let valueChanged = deltaX !== 0 || deltaY !== 0;
675
675
  if (pointerType === "keyboard") {
676
676
  let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
@@ -696,15 +696,15 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
696
696
  focusInput(input);
697
697
  }
698
698
  };
699
- let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
700
- let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
699
+ let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
700
+ let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
701
701
  onFocusWithinChange: (focusWithin)=>{
702
702
  if (!focusWithin) setValueChangedViaKeyboard(false);
703
703
  }
704
704
  });
705
705
  let currentPointer = (0, $7KHxM$useRef)(undefined);
706
706
  let isOnColorArea = (0, $7KHxM$useRef)(false);
707
- let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
707
+ let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
708
708
  onMoveStart () {
709
709
  if (isOnColorArea.current) moveHandler.onMoveStart();
710
710
  },
@@ -747,7 +747,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
747
747
  };
748
748
  let onColorAreaDown = (colorArea, id, clientX, clientY)=>{
749
749
  let rect = colorArea.getBoundingClientRect();
750
- let { width: width , height: height } = rect;
750
+ let { width: width, height: height } = rect;
751
751
  let x = (clientX - rect.x) / width;
752
752
  let y = (clientY - rect.y) / height;
753
753
  if (direction === "rtl") x = 1 - x;
@@ -814,12 +814,12 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
814
814
  }
815
815
  }
816
816
  }, focusWithinProps, keyboardProps, movePropsThumb);
817
- let { focusProps: xInputFocusProps } = (0, $7KHxM$useFocus)({
817
+ let { focusProps: xInputFocusProps } = (0, $7KHxM$useFocus)({
818
818
  onFocus: ()=>{
819
819
  setFocusedInput("x");
820
820
  }
821
821
  });
822
- let { focusProps: yInputFocusProps } = (0, $7KHxM$useFocus)({
822
+ let { focusProps: yInputFocusProps } = (0, $7KHxM$useFocus)({
823
823
  onFocus: ()=>{
824
824
  setFocusedInput("y");
825
825
  }
@@ -860,7 +860,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
860
860
  "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
861
861
  }, isMobile ? colorPickerLabel : undefined);
862
862
  let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
863
- let { visuallyHiddenProps: visuallyHiddenProps } = (0, $7KHxM$useVisuallyHidden)({
863
+ let { visuallyHiddenProps: visuallyHiddenProps } = (0, $7KHxM$useVisuallyHidden)({
864
864
  style: {
865
865
  opacity: "0.0001",
866
866
  width: "100%",
@@ -868,7 +868,7 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
868
868
  pointerEvents: "none"
869
869
  }
870
870
  });
871
- let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = (0, $40297c24c53588e6$export$dd62420467d245ca)({
871
+ let { colorAreaStyleProps: colorAreaStyleProps, gradientStyleProps: gradientStyleProps, thumbStyleProps: thumbStyleProps } = (0, $40297c24c53588e6$export$dd62420467d245ca)({
872
872
  direction: direction,
873
873
  state: state,
874
874
  xChannel: xChannel,
@@ -956,16 +956,16 @@ function $60bd7d6e45dcddfa$export$2f92a7a615a014f6(props, state) {
956
956
 
957
957
 
958
958
  function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
959
- let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel , name: name } = props;
960
- let { locale: locale , direction: direction } = (0, $7KHxM$useLocale)();
959
+ let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
960
+ let { locale: locale, direction: direction } = (0, $7KHxM$useLocale)();
961
961
  // Provide a default aria-label if there is no other label provided.
962
962
  if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
963
963
  // @ts-ignore - ignore unused incompatible props
964
- let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = (0, $7KHxM$useSlider)({
964
+ let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $7KHxM$useSlider)({
965
965
  ...props,
966
966
  "aria-label": ariaLabel
967
967
  }, state, trackRef);
968
- let { inputProps: inputProps , thumbProps: thumbProps } = (0, $7KHxM$useSliderThumb)({
968
+ let { inputProps: inputProps, thumbProps: thumbProps } = (0, $7KHxM$useSliderThumb)({
969
969
  index: 0,
970
970
  orientation: orientation,
971
971
  isDisabled: props.isDisabled,
@@ -1049,8 +1049,8 @@ function $40af666d6c251e36$export$106b7a4e66508f66(props, state) {
1049
1049
 
1050
1050
 
1051
1051
  function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1052
- let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel , name: name } = props;
1053
- let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
1052
+ let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
1053
+ let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $7KHxM$useGlobalListeners)();
1054
1054
  let thumbRadius = (innerRadius + outerRadius) / 2;
1055
1055
  let focusInput = (0, $7KHxM$useCallback)(()=>{
1056
1056
  if (inputRef.current) (0, $7KHxM$focusWithoutScrolling)(inputRef.current);
@@ -1059,7 +1059,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1059
1059
  ]);
1060
1060
  (0, $7KHxM$useFormReset)(inputRef, state.hue, state.setHue);
1061
1061
  let currentPosition = (0, $7KHxM$useRef)(null);
1062
- let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
1062
+ let { keyboardProps: keyboardProps } = (0, $7KHxM$useKeyboard)({
1063
1063
  onKeyDown (e) {
1064
1064
  // these are the cases that useMove doesn't handle
1065
1065
  if (!/^(PageUp|PageDown)$/.test(e.key)) {
@@ -1088,7 +1088,7 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1088
1088
  currentPosition.current = null;
1089
1089
  state.setDragging(true);
1090
1090
  },
1091
- onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
1091
+ onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
1092
1092
  if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
1093
1093
  currentPosition.current.x += deltaX;
1094
1094
  currentPosition.current.y += deltaY;
@@ -1103,10 +1103,10 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1103
1103
  focusInput();
1104
1104
  }
1105
1105
  };
1106
- let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
1106
+ let { moveProps: movePropsThumb } = (0, $7KHxM$useMove)(moveHandler);
1107
1107
  let currentPointer = (0, $7KHxM$useRef)(undefined);
1108
1108
  let isOnTrack = (0, $7KHxM$useRef)(false);
1109
- let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
1109
+ let { moveProps: movePropsContainer } = (0, $7KHxM$useMove)({
1110
1110
  onMoveStart () {
1111
1111
  if (isOnTrack.current) moveHandler.onMoveStart();
1112
1112
  },
@@ -1208,15 +1208,15 @@ function $b4a0a4fdc900495e$export$9064ff4e44b3729a(props, state, inputRef) {
1208
1208
  onThumbDown(e.changedTouches[0].identifier);
1209
1209
  }
1210
1210
  }, keyboardProps, movePropsThumb);
1211
- let { x: x , y: y } = state.getThumbPosition(thumbRadius);
1211
+ let { x: x, y: y } = state.getThumbPosition(thumbRadius);
1212
1212
  // Provide a default aria-label if none is given
1213
- let { locale: locale } = (0, $7KHxM$useLocale)();
1213
+ let { locale: locale } = (0, $7KHxM$useLocale)();
1214
1214
  if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
1215
1215
  let inputLabellingProps = (0, $7KHxM$useLabels)({
1216
1216
  ...props,
1217
1217
  "aria-label": ariaLabel
1218
1218
  });
1219
- let { minValue: minValue , maxValue: maxValue , step: step } = state.value.getChannelRange("hue");
1219
+ let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange("hue");
1220
1220
  let forcedColorAdjustNoneStyle = {
1221
1221
  forcedColorAdjust: "none"
1222
1222
  };
@@ -1298,10 +1298,10 @@ function $b4a0a4fdc900495e$var$circlePath(cx, cy, r) {
1298
1298
 
1299
1299
 
1300
1300
  function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
1301
- let { isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired } = props;
1302
- let { colorValue: colorValue , inputValue: inputValue , commit: commit , increment: increment , decrement: decrement , incrementToMax: incrementToMax , decrementToMin: decrementToMin } = state;
1301
+ let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired } = props;
1302
+ let { colorValue: colorValue, inputValue: inputValue, commit: commit, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin } = state;
1303
1303
  let inputId = (0, $7KHxM$useId)();
1304
- let { spinButtonProps: spinButtonProps } = (0, $7KHxM$useSpinButton)({
1304
+ let { spinButtonProps: spinButtonProps } = (0, $7KHxM$useSpinButton)({
1305
1305
  isDisabled: isDisabled,
1306
1306
  isReadOnly: isReadOnly,
1307
1307
  isRequired: isRequired,
@@ -1315,7 +1315,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
1315
1315
  textValue: colorValue ? colorValue.toString("hex") : undefined
1316
1316
  });
1317
1317
  let [focusWithin, setFocusWithin] = (0, $7KHxM$useState)(false);
1318
- let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
1318
+ let { focusWithinProps: focusWithinProps } = (0, $7KHxM$useFocusWithin)({
1319
1319
  isDisabled: isDisabled,
1320
1320
  onFocusWithinChange: setFocusWithin
1321
1321
  });
@@ -1336,7 +1336,7 @@ function $f6896b05b2ecad12$export$77e32ca575a28fdf(props, state, ref) {
1336
1336
  let onChange = (value)=>{
1337
1337
  if (state.validate(value)) state.setInputValue(value);
1338
1338
  };
1339
- let { labelProps: labelProps , inputProps: inputProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
1339
+ let { labelProps: labelProps, inputProps: inputProps } = (0, $7KHxM$useFormattedTextField)((0, $7KHxM$mergeProps)(props, {
1340
1340
  id: inputId,
1341
1341
  value: inputValue,
1342
1342
  defaultValue: undefined,
package/dist/main.js CHANGED
@@ -515,7 +515,7 @@ const $99936ad0bf67c8c4$var$generateHSB_B = (orientation, dir, alphaValue)=>{
515
515
  };
516
516
  return result;
517
517
  };
518
- function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , state: state , zChannel: zChannel , xChannel: xChannel , isDisabled: isDisabled }) {
518
+ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction, state: state, zChannel: zChannel, xChannel: xChannel, isDisabled: isDisabled }) {
519
519
  let returnVal = (0, $kZqDi$react.useMemo)(()=>{
520
520
  let orientation = [
521
521
  "top",
@@ -527,7 +527,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
527
527
  gradientStyles: {}
528
528
  };
529
529
  let zValue = state.value.getChannelValue(zChannel);
530
- let { minValue: zMin , maxValue: zMax } = state.value.getChannelRange(zChannel);
530
+ let { minValue: zMin, maxValue: zMax } = state.value.getChannelRange(zChannel);
531
531
  let alphaValue = (zValue - zMin) / (zMax - zMin);
532
532
  let isHSL = state.value.getColorSpace() === "hsl";
533
533
  if (!isDisabled) switch(zChannel){
@@ -562,7 +562,7 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
562
562
  background = $99936ad0bf67c8c4$var$generateHSL_L(orientation, dir, zValue);
563
563
  break;
564
564
  }
565
- let { x: x , y: y } = state.getThumbPosition();
565
+ let { x: x, y: y } = state.getThumbPosition();
566
566
  if (direction === "rtl") x = 1 - x;
567
567
  let forcedColorAdjustNoneStyle = {
568
568
  forcedColorAdjust: "none"
@@ -609,10 +609,10 @@ function $99936ad0bf67c8c4$export$dd62420467d245ca({ direction: direction , stat
609
609
 
610
610
 
611
611
  function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
612
- let { isDisabled: isDisabled , inputXRef: inputXRef , inputYRef: inputYRef , containerRef: containerRef , "aria-label": ariaLabel , xName: xName , yName: yName } = props;
612
+ let { isDisabled: isDisabled, inputXRef: inputXRef, inputYRef: inputYRef, containerRef: containerRef, "aria-label": ariaLabel, xName: xName, yName: yName } = props;
613
613
  let stringFormatter = (0, $kZqDi$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($4a33e168940636d5$exports))));
614
- let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
615
- let { direction: direction , locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
614
+ let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
615
+ let { direction: direction, locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
616
616
  let [focusedInput, setFocusedInput] = (0, $kZqDi$react.useState)(null);
617
617
  let focusInput = (0, $kZqDi$react.useCallback)((inputRef = inputXRef)=>{
618
618
  if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
@@ -627,11 +627,11 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
627
627
  state.setValue(newColor);
628
628
  });
629
629
  let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = (0, $kZqDi$react.useState)(false);
630
- let { xChannel: xChannel , yChannel: yChannel , zChannel: zChannel } = state.channels;
630
+ let { xChannel: xChannel, yChannel: yChannel, zChannel: zChannel } = state.channels;
631
631
  let xChannelStep = state.xChannelStep;
632
632
  let yChannelStep = state.yChannelStep;
633
633
  let currentPosition = (0, $kZqDi$react.useRef)(null);
634
- let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
634
+ let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
635
635
  onKeyDown (e) {
636
636
  // these are the cases that useMove doesn't handle
637
637
  if (!/^(PageUp|PageDown|Home|End)$/.test(e.key)) {
@@ -675,10 +675,10 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
675
675
  currentPosition.current = null;
676
676
  state.setDragging(true);
677
677
  },
678
- onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
679
- let { incrementX: incrementX , decrementX: decrementX , incrementY: incrementY , decrementY: decrementY , xChannelPageStep: xChannelPageStep , xChannelStep: xChannelStep , yChannelPageStep: yChannelPageStep , yChannelStep: yChannelStep , getThumbPosition: getThumbPosition , setColorFromPoint: setColorFromPoint } = state;
678
+ onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
679
+ let { incrementX: incrementX, decrementX: decrementX, incrementY: incrementY, decrementY: decrementY, xChannelPageStep: xChannelPageStep, xChannelStep: xChannelStep, yChannelPageStep: yChannelPageStep, yChannelStep: yChannelStep, getThumbPosition: getThumbPosition, setColorFromPoint: setColorFromPoint } = state;
680
680
  if (currentPosition.current == null) currentPosition.current = getThumbPosition();
681
- let { width: width , height: height } = containerRef.current.getBoundingClientRect();
681
+ let { width: width, height: height } = containerRef.current.getBoundingClientRect();
682
682
  let valueChanged = deltaX !== 0 || deltaY !== 0;
683
683
  if (pointerType === "keyboard") {
684
684
  let deltaXValue = shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
@@ -704,15 +704,15 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
704
704
  focusInput(input);
705
705
  }
706
706
  };
707
- let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
708
- let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
707
+ let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
708
+ let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
709
709
  onFocusWithinChange: (focusWithin)=>{
710
710
  if (!focusWithin) setValueChangedViaKeyboard(false);
711
711
  }
712
712
  });
713
713
  let currentPointer = (0, $kZqDi$react.useRef)(undefined);
714
714
  let isOnColorArea = (0, $kZqDi$react.useRef)(false);
715
- let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.useMove)({
715
+ let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.useMove)({
716
716
  onMoveStart () {
717
717
  if (isOnColorArea.current) moveHandler.onMoveStart();
718
718
  },
@@ -755,7 +755,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
755
755
  };
756
756
  let onColorAreaDown = (colorArea, id, clientX, clientY)=>{
757
757
  let rect = colorArea.getBoundingClientRect();
758
- let { width: width , height: height } = rect;
758
+ let { width: width, height: height } = rect;
759
759
  let x = (clientX - rect.x) / width;
760
760
  let y = (clientY - rect.y) / height;
761
761
  if (direction === "rtl") x = 1 - x;
@@ -822,12 +822,12 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
822
822
  }
823
823
  }
824
824
  }, focusWithinProps, keyboardProps, movePropsThumb);
825
- let { focusProps: xInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
825
+ let { focusProps: xInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
826
826
  onFocus: ()=>{
827
827
  setFocusedInput("x");
828
828
  }
829
829
  });
830
- let { focusProps: yInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
830
+ let { focusProps: yInputFocusProps } = (0, $kZqDi$reactariainteractions.useFocus)({
831
831
  onFocus: ()=>{
832
832
  setFocusedInput("y");
833
833
  }
@@ -868,7 +868,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
868
868
  "aria-label": ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined
869
869
  }, isMobile ? colorPickerLabel : undefined);
870
870
  let ariaRoleDescription = stringFormatter.format("twoDimensionalSlider");
871
- let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kZqDi$reactariavisuallyhidden.useVisuallyHidden)({
871
+ let { visuallyHiddenProps: visuallyHiddenProps } = (0, $kZqDi$reactariavisuallyhidden.useVisuallyHidden)({
872
872
  style: {
873
873
  opacity: "0.0001",
874
874
  width: "100%",
@@ -876,7 +876,7 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
876
876
  pointerEvents: "none"
877
877
  }
878
878
  });
879
- let { colorAreaStyleProps: colorAreaStyleProps , gradientStyleProps: gradientStyleProps , thumbStyleProps: thumbStyleProps } = (0, $99936ad0bf67c8c4$export$dd62420467d245ca)({
879
+ let { colorAreaStyleProps: colorAreaStyleProps, gradientStyleProps: gradientStyleProps, thumbStyleProps: thumbStyleProps } = (0, $99936ad0bf67c8c4$export$dd62420467d245ca)({
880
880
  direction: direction,
881
881
  state: state,
882
882
  xChannel: xChannel,
@@ -964,16 +964,16 @@ function $47925bd68062ac17$export$2f92a7a615a014f6(props, state) {
964
964
 
965
965
 
966
966
  function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
967
- let { trackRef: trackRef , inputRef: inputRef , orientation: orientation , channel: channel , "aria-label": ariaLabel , name: name } = props;
968
- let { locale: locale , direction: direction } = (0, $kZqDi$reactariai18n.useLocale)();
967
+ let { trackRef: trackRef, inputRef: inputRef, orientation: orientation, channel: channel, "aria-label": ariaLabel, name: name } = props;
968
+ let { locale: locale, direction: direction } = (0, $kZqDi$reactariai18n.useLocale)();
969
969
  // Provide a default aria-label if there is no other label provided.
970
970
  if (!props.label && !ariaLabel && !props["aria-labelledby"]) ariaLabel = state.value.getChannelName(channel, locale);
971
971
  // @ts-ignore - ignore unused incompatible props
972
- let { groupProps: groupProps , trackProps: trackProps , labelProps: labelProps , outputProps: outputProps } = (0, $kZqDi$reactariaslider.useSlider)({
972
+ let { groupProps: groupProps, trackProps: trackProps, labelProps: labelProps, outputProps: outputProps } = (0, $kZqDi$reactariaslider.useSlider)({
973
973
  ...props,
974
974
  "aria-label": ariaLabel
975
975
  }, state, trackRef);
976
- let { inputProps: inputProps , thumbProps: thumbProps } = (0, $kZqDi$reactariaslider.useSliderThumb)({
976
+ let { inputProps: inputProps, thumbProps: thumbProps } = (0, $kZqDi$reactariaslider.useSliderThumb)({
977
977
  index: 0,
978
978
  orientation: orientation,
979
979
  isDisabled: props.isDisabled,
@@ -1057,8 +1057,8 @@ function $afbb9647440a7f5b$export$106b7a4e66508f66(props, state) {
1057
1057
 
1058
1058
 
1059
1059
  function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1060
- let { isDisabled: isDisabled , innerRadius: innerRadius , outerRadius: outerRadius , "aria-label": ariaLabel , name: name } = props;
1061
- let { addGlobalListener: addGlobalListener , removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
1060
+ let { isDisabled: isDisabled, innerRadius: innerRadius, outerRadius: outerRadius, "aria-label": ariaLabel, name: name } = props;
1061
+ let { addGlobalListener: addGlobalListener, removeGlobalListener: removeGlobalListener } = (0, $kZqDi$reactariautils.useGlobalListeners)();
1062
1062
  let thumbRadius = (innerRadius + outerRadius) / 2;
1063
1063
  let focusInput = (0, $kZqDi$react.useCallback)(()=>{
1064
1064
  if (inputRef.current) (0, $kZqDi$reactariautils.focusWithoutScrolling)(inputRef.current);
@@ -1067,7 +1067,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1067
1067
  ]);
1068
1068
  (0, $kZqDi$reactariautils.useFormReset)(inputRef, state.hue, state.setHue);
1069
1069
  let currentPosition = (0, $kZqDi$react.useRef)(null);
1070
- let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
1070
+ let { keyboardProps: keyboardProps } = (0, $kZqDi$reactariainteractions.useKeyboard)({
1071
1071
  onKeyDown (e) {
1072
1072
  // these are the cases that useMove doesn't handle
1073
1073
  if (!/^(PageUp|PageDown)$/.test(e.key)) {
@@ -1096,7 +1096,7 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1096
1096
  currentPosition.current = null;
1097
1097
  state.setDragging(true);
1098
1098
  },
1099
- onMove ({ deltaX: deltaX , deltaY: deltaY , pointerType: pointerType , shiftKey: shiftKey }) {
1099
+ onMove ({ deltaX: deltaX, deltaY: deltaY, pointerType: pointerType, shiftKey: shiftKey }) {
1100
1100
  if (currentPosition.current == null) currentPosition.current = state.getThumbPosition(thumbRadius);
1101
1101
  currentPosition.current.x += deltaX;
1102
1102
  currentPosition.current.y += deltaY;
@@ -1111,10 +1111,10 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1111
1111
  focusInput();
1112
1112
  }
1113
1113
  };
1114
- let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
1114
+ let { moveProps: movePropsThumb } = (0, $kZqDi$reactariainteractions.useMove)(moveHandler);
1115
1115
  let currentPointer = (0, $kZqDi$react.useRef)(undefined);
1116
1116
  let isOnTrack = (0, $kZqDi$react.useRef)(false);
1117
- let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.useMove)({
1117
+ let { moveProps: movePropsContainer } = (0, $kZqDi$reactariainteractions.useMove)({
1118
1118
  onMoveStart () {
1119
1119
  if (isOnTrack.current) moveHandler.onMoveStart();
1120
1120
  },
@@ -1216,15 +1216,15 @@ function $1d29bf243d4a9a53$export$9064ff4e44b3729a(props, state, inputRef) {
1216
1216
  onThumbDown(e.changedTouches[0].identifier);
1217
1217
  }
1218
1218
  }, keyboardProps, movePropsThumb);
1219
- let { x: x , y: y } = state.getThumbPosition(thumbRadius);
1219
+ let { x: x, y: y } = state.getThumbPosition(thumbRadius);
1220
1220
  // Provide a default aria-label if none is given
1221
- let { locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
1221
+ let { locale: locale } = (0, $kZqDi$reactariai18n.useLocale)();
1222
1222
  if (ariaLabel == null && props["aria-labelledby"] == null) ariaLabel = state.value.getChannelName("hue", locale);
1223
1223
  let inputLabellingProps = (0, $kZqDi$reactariautils.useLabels)({
1224
1224
  ...props,
1225
1225
  "aria-label": ariaLabel
1226
1226
  });
1227
- let { minValue: minValue , maxValue: maxValue , step: step } = state.value.getChannelRange("hue");
1227
+ let { minValue: minValue, maxValue: maxValue, step: step } = state.value.getChannelRange("hue");
1228
1228
  let forcedColorAdjustNoneStyle = {
1229
1229
  forcedColorAdjust: "none"
1230
1230
  };
@@ -1306,10 +1306,10 @@ function $1d29bf243d4a9a53$var$circlePath(cx, cy, r) {
1306
1306
 
1307
1307
 
1308
1308
  function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
1309
- let { isDisabled: isDisabled , isReadOnly: isReadOnly , isRequired: isRequired } = props;
1310
- let { colorValue: colorValue , inputValue: inputValue , commit: commit , increment: increment , decrement: decrement , incrementToMax: incrementToMax , decrementToMin: decrementToMin } = state;
1309
+ let { isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired } = props;
1310
+ let { colorValue: colorValue, inputValue: inputValue, commit: commit, increment: increment, decrement: decrement, incrementToMax: incrementToMax, decrementToMin: decrementToMin } = state;
1311
1311
  let inputId = (0, $kZqDi$reactariautils.useId)();
1312
- let { spinButtonProps: spinButtonProps } = (0, $kZqDi$reactariaspinbutton.useSpinButton)({
1312
+ let { spinButtonProps: spinButtonProps } = (0, $kZqDi$reactariaspinbutton.useSpinButton)({
1313
1313
  isDisabled: isDisabled,
1314
1314
  isReadOnly: isReadOnly,
1315
1315
  isRequired: isRequired,
@@ -1323,7 +1323,7 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
1323
1323
  textValue: colorValue ? colorValue.toString("hex") : undefined
1324
1324
  });
1325
1325
  let [focusWithin, setFocusWithin] = (0, $kZqDi$react.useState)(false);
1326
- let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
1326
+ let { focusWithinProps: focusWithinProps } = (0, $kZqDi$reactariainteractions.useFocusWithin)({
1327
1327
  isDisabled: isDisabled,
1328
1328
  onFocusWithinChange: setFocusWithin
1329
1329
  });
@@ -1344,7 +1344,7 @@ function $58c850037bc7a7ce$export$77e32ca575a28fdf(props, state, ref) {
1344
1344
  let onChange = (value)=>{
1345
1345
  if (state.validate(value)) state.setInputValue(value);
1346
1346
  };
1347
- let { labelProps: labelProps , inputProps: inputProps } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
1347
+ let { labelProps: labelProps, inputProps: inputProps } = (0, $kZqDi$reactariatextfield.useFormattedTextField)((0, $kZqDi$reactariautils.mergeProps)(props, {
1348
1348
  id: inputId,
1349
1349
  value: inputValue,
1350
1350
  defaultValue: undefined,