@react-spectrum/s2 0.3.2-nightly.5042 → 0.4.1

package/dist/Slider.cjs

@@ -1,9 +1,9 @@
 require("./Slider.css");
 var $a0b996a550bb0891$exports = require("./Field.cjs");
 var $bfa4962d90c8af48$exports = require("./Form.cjs");
-var $308b180f49d82d28$exports = require("./runtime.cjs");
+var $308b180f49d82d28$exports = require("../icons/runtime.cjs");
 var $2061c83559b50a66$exports = require("./pressScale.cjs");
-var $ac757a4c2bd72aee$exports = require("./useSpectrumContextProps.cjs");
+var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
 var $5DeaH$reactjsxruntime = require("react/jsx-runtime");
 var $5DeaH$reactariacomponents = require("react-aria-components");
 var $5DeaH$reactariautils = require("@react-aria/utils");
@@ -86,11 +86,11 @@ const $e937566cb5c6349c$var$slider = function anonymous(props, overrides) {
         else rules += ' am';
     }
     if (props.labelPosition === "side") rules += ' _1c';
-    if (props.isInForm) rules += ' jd';
-    else if (props.size === "XL") rules += ' jg';
-    else if (props.size === "L") rules += ' jf';
-    else if (props.size === "M") rules += ' je';
-    else if (props.size === "S") rules += ' je';
+    if (props.isInForm) rules += ' je';
+    else if (props.size === "XL") rules += ' jh';
+    else if (props.size === "L") rules += ' jg';
+    else if (props.size === "M") rules += ' jf';
+    else if (props.size === "S") rules += ' jf';
     return rules;
 };
 const $e937566cb5c6349c$var$labelContainer = function anonymous(props) {
@@ -100,7 +100,7 @@ const $e937566cb5c6349c$var$labelContainer = function anonymous(props) {
     rules += ' __b-4e9m05';
     rules += ' __c-4e9m05';
     rules += ' __d-4e9m05';
-    rules += ' l2';
+    rules += ' l4';
     if (props.labelPosition === "top") rules += ' __j-qdp51y';
     if (props.labelPosition === "top") rules += ' __h-u2tns7';
     if (props.labelPosition === "side") {
@@ -132,79 +132,47 @@ let $e937566cb5c6349c$export$6b2a7d5132615086 = function anonymous(props) {
     rules += ' __b-4ka10a';
     rules += ' __c-4ka10a';
     rules += ' __d-4ka10a';
-    if (props.size === "XL") {
-        rules += ' qbw';
-        rules += ' qv';
-    } else if (props.size === "L") {
-        rules += ' qbs';
-        rules += ' qp';
-    } else if (props.size === "S") {
-        rules += ' qbl';
-        rules += ' qk';
-    } else if (props.size === "XS") {
-        rules += ' qbj';
-        rules += ' qi';
-    } else {
-        rules += ' qbp';
-        rules += ' qo';
-    }
-    if (props.isQuiet) rules += ' __ma';
-    else rules += ' __m-1s8glxue';
-    if (props.size === "XL") {
-        rules += ' -usygro_l-bT';
-        rules += ' -usygro_l-O';
-    } else if (props.size === "L") {
-        rules += ' -usygro_l-bS';
-        rules += ' -usygro_l-R';
-    } else if (props.size === "S") {
-        rules += ' -usygro_l-bO';
-        rules += ' -usygro_l-N';
-    } else {
-        rules += ' -usygro_l-bQ';
-        rules += ' -usygro_l-P';
-    }
-    rules += ' m-rwozxi';
     rules += ' Uc';
-    rules += ' l2';
+    rules += ' l4';
     if (props.size === "XL") {
-        rules += ' kbw';
-        rules += ' kv';
+        rules += ' kby';
+        rules += ' kx';
     } else if (props.size === "L") {
-        rules += ' kbs';
-        rules += ' kp';
+        rules += ' kbu';
+        rules += ' kr';
     } else if (props.size === "M") {
-        rules += ' kbp';
-        rules += ' ko';
+        rules += ' kbr';
+        rules += ' kq';
     } else if (props.size === "S") {
-        rules += ' kbl';
-        rules += ' kk';
+        rules += ' kbn';
+        rules += ' km';
     }
     return rules;
 };
 let $e937566cb5c6349c$export$7814bee2738c4c3 = function anonymous(props) {
     let rules = " .";
     if (props.size === "XL") {
-        rules += ' lbl';
-        rules += ' lk';
+        rules += ' lbn';
+        rules += ' lm';
     } else if (props.size === "L") {
         rules += ' lb-1u8pit0';
         rules += ' l-16cidj';
     } else if (props.size === "M") {
-        rules += ' lbj';
-        rules += ' li';
+        rules += ' lbl';
+        rules += ' lk';
     } else if (props.size === "S") {
         rules += ' lb-1nxaedl';
         rules += ' l-1ytbuww';
     }
     if (props.size === "XL") {
-        rules += ' kbl';
-        rules += ' kk';
+        rules += ' kbn';
+        rules += ' km';
     } else if (props.size === "L") {
         rules += ' kb-1u8pit0';
         rules += ' k-16cidj';
     } else if (props.size === "M") {
-        rules += ' kbj';
-        rules += ' ki';
+        rules += ' kbl';
+        rules += ' kk';
     } else if (props.size === "S") {
         rules += ' kb-1nxaedl';
         rules += ' k-1ytbuww';
@@ -221,25 +189,25 @@ let $e937566cb5c6349c$export$f120a3c6038107a5 = function anonymous(props) {
             rules += ' lb-1qh0xw';
             rules += ' l-30pu91';
         } else if (props.size === "L") {
-            rules += ' lbl';
-            rules += ' lk';
+            rules += ' lbn';
+            rules += ' lm';
         } else if (props.size === "M") {
             rules += ' lb-1u8pit0';
             rules += ' l-16cidj';
         } else if (props.size === "S") {
-            rules += ' lbj';
-            rules += ' li';
+            rules += ' lbl';
+            rules += ' lk';
         }
     } else if (props.thumbStyle === "default") {
         if (props.size === "XL") {
-            rules += ' lbl';
-            rules += ' lk';
+            rules += ' lbn';
+            rules += ' lm';
         } else if (props.size === "L") {
             rules += ' lb-1u8pit0';
             rules += ' l-16cidj';
         } else if (props.size === "M") {
-            rules += ' lbj';
-            rules += ' li';
+            rules += ' lbl';
+            rules += ' lk';
         } else if (props.size === "S") {
             rules += ' lb-1nxaedl';
             rules += ' l-1ytbuww';
@@ -250,25 +218,25 @@ let $e937566cb5c6349c$export$f120a3c6038107a5 = function anonymous(props) {
             rules += ' kb-1qh0xw';
             rules += ' k-30pu91';
         } else if (props.size === "L") {
-            rules += ' kbl';
-            rules += ' kk';
+            rules += ' kbn';
+            rules += ' km';
         } else if (props.size === "M") {
             rules += ' kb-1u8pit0';
             rules += ' k-16cidj';
         } else if (props.size === "S") {
-            rules += ' kbj';
-            rules += ' ki';
+            rules += ' kbl';
+            rules += ' kk';
         }
     } else if (props.thumbStyle === "default") {
         if (props.size === "XL") {
-            rules += ' kbl';
-            rules += ' kk';
+            rules += ' kbn';
+            rules += ' km';
         } else if (props.size === "L") {
             rules += ' kb-1u8pit0';
             rules += ' k-16cidj';
         } else if (props.size === "M") {
-            rules += ' kbj';
-            rules += ' ki';
+            rules += ' kbl';
+            rules += ' kk';
         } else if (props.size === "S") {
             rules += ' kb-1nxaedl';
             rules += ' k-1ytbuww';
@@ -295,14 +263,14 @@ let $e937566cb5c6349c$export$becc9140d0e846f8 = function anonymous(props) {
         rules += ' l-6njx2e';
     } else if (props.thumbStyle === "default") {
         if (props.size === "XL") {
-            rules += ' lbl';
-            rules += ' lk';
+            rules += ' lbn';
+            rules += ' lm';
         } else if (props.size === "L") {
             rules += ' lb-1u8pit0';
             rules += ' l-16cidj';
         } else if (props.size === "M") {
-            rules += ' lbj';
-            rules += ' li';
+            rules += ' lbl';
+            rules += ' lk';
         } else if (props.size === "S") {
             rules += ' lb-1nxaedl';
             rules += ' l-1ytbuww';
@@ -313,25 +281,25 @@ let $e937566cb5c6349c$export$becc9140d0e846f8 = function anonymous(props) {
             rules += ' kb-1qh0xw';
             rules += ' k-30pu91';
         } else if (props.size === "L") {
-            rules += ' kbl';
-            rules += ' kk';
+            rules += ' kbn';
+            rules += ' km';
         } else if (props.size === "M") {
             rules += ' kb-1u8pit0';
             rules += ' k-16cidj';
         } else if (props.size === "S") {
-            rules += ' kbj';
-            rules += ' ki';
+            rules += ' kbl';
+            rules += ' kk';
         }
     } else if (props.thumbStyle === "default") {
         if (props.size === "XL") {
-            rules += ' kbl';
-            rules += ' kk';
+            rules += ' kbn';
+            rules += ' km';
         } else if (props.size === "L") {
             rules += ' kb-1u8pit0';
             rules += ' k-16cidj';
         } else if (props.size === "M") {
-            rules += ' kbj';
-            rules += ' ki';
+            rules += ' kbl';
+            rules += ' kk';
         } else if (props.size === "S") {
             rules += ' kb-1nxaedl';
             rules += ' k-1ytbuww';
@@ -372,11 +340,11 @@ const $e937566cb5c6349c$var$trackStyling = {
 let $e937566cb5c6349c$export$1e1dc99b6e2204f1 = function anonymous(props) {
     let rules = " .";
     if (props.trackStyle === "thick") {
-        rules += ' kbi';
-        rules += ' kh';
+        rules += ' kbk';
+        rules += ' kj';
     } else if (props.trackStyle === "thin") {
-        rules += ' kbc';
-        rules += ' kb';
+        rules += ' kbe';
+        rules += ' kd';
     }
     rules += ' X-3760fj';
     if (props.trackStyle === "thick") rules += ' _vb';
@@ -391,7 +359,7 @@ let $e937566cb5c6349c$export$1e1dc99b6e2204f1 = function anonymous(props) {
     if (props.isDisabled) rules += ' bg';
     else rules += ' bi';
     rules += ' Q-yj8axo';
-    rules += ' l2';
+    rules += ' l4';
     rules += ' __na';
     rules += ' wa';
     rules += ' u-yj94cw';
@@ -406,11 +374,11 @@ let $e937566cb5c6349c$export$1e1dc99b6e2204f1 = function anonymous(props) {
 let $e937566cb5c6349c$export$847ceef3bc944d02 = function anonymous(props) {
     let rules = " .";
     if (props.trackStyle === "thick") {
-        rules += ' kbi';
-        rules += ' kh';
+        rules += ' kbk';
+        rules += ' kj';
     } else if (props.trackStyle === "thin") {
-        rules += ' kbc';
-        rules += ' kb';
+        rules += ' kbe';
+        rules += ' kd';
     }
     rules += ' X-3760fj';
     if (props.trackStyle === "thick") rules += ' _vb';
@@ -484,23 +452,23 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
                 rules += ' _f-1x99dlob';
                 rules += ' _fa';
                 if (props.size === "XL") {
-                    rules += ' -aqrvqh_k-bw';
-                    rules += ' -aqrvqh_k-v';
+                    rules += ' -aqrvqh_k-by';
+                    rules += ' -aqrvqh_k-x';
                 } else if (props.size === "L") {
-                    rules += ' -aqrvqh_k-bs';
-                    rules += ' -aqrvqh_k-p';
+                    rules += ' -aqrvqh_k-bu';
+                    rules += ' -aqrvqh_k-r';
                 } else if (props.size === "S") {
+                    rules += ' -aqrvqh_k-bn';
+                    rules += ' -aqrvqh_k-m';
+                } else if (props.size === "XS") {
                     rules += ' -aqrvqh_k-bl';
                     rules += ' -aqrvqh_k-k';
-                } else if (props.size === "XS") {
-                    rules += ' -aqrvqh_k-bj';
-                    rules += ' -aqrvqh_k-i';
                 } else {
-                    rules += ' -aqrvqh_k-bp';
-                    rules += ' -aqrvqh_k-o';
+                    rules += ' -aqrvqh_k-br';
+                    rules += ' -aqrvqh_k-q';
                 }
                 rules += ' -_1inj1bc_i--prjw07';
-                rules += ' jd';
+                rules += ' je';
                 rules += ' __R-yksgrp';
                 return rules;
             }({
@@ -574,14 +542,46 @@ function $e937566cb5c6349c$export$9418495bb635ebde(props1) {
                             rules += ' __b-4cfph1';
                             rules += ' __c-4cfph1';
                             rules += ' __d-4cfph1';
+                            if (props.size === "XL") {
+                                rules += ' qby';
+                                rules += ' qx';
+                            } else if (props.size === "L") {
+                                rules += ' qbu';
+                                rules += ' qr';
+                            } else if (props.size === "S") {
+                                rules += ' qbn';
+                                rules += ' qm';
+                            } else if (props.size === "XS") {
+                                rules += ' qbl';
+                                rules += ' qk';
+                            } else {
+                                rules += ' qbr';
+                                rules += ' qq';
+                            }
+                            if (props.isQuiet) rules += ' __ma';
+                            else rules += ' __m-1s8glxue';
+                            if (props.size === "XL") {
+                                rules += ' -usygro_l-bV';
+                                rules += ' -usygro_l-Q';
+                            } else if (props.size === "L") {
+                                rules += ' -usygro_l-bU';
+                                rules += ' -usygro_l-T';
+                            } else if (props.size === "S") {
+                                rules += ' -usygro_l-bQ';
+                                rules += ' -usygro_l-P';
+                            } else {
+                                rules += ' -usygro_l-bS';
+                                rules += ' -usygro_l-R';
+                            }
+                            rules += ' m-rwozxi';
                             rules += ' _Ze';
                             rules += ' _1c';
-                            if (props.size === "XL") rules += ' ig';
-                            else if (props.size === "L") rules += ' if';
-                            else rules += ' ie';
-                            if (props.size === "XL") rules += ' jg';
-                            else if (props.size === "L") rules += ' jf';
-                            else rules += ' je';
+                            if (props.size === "XL") rules += ' ih';
+                            else if (props.size === "L") rules += ' ig';
+                            else rules += ' if';
+                            if (props.size === "XL") rules += ' jh';
+                            else if (props.size === "L") rules += ' jg';
+                            else rules += ' jf';
                             return rules;
                         }({
                             size: size
@@ -616,7 +616,7 @@ function $e937566cb5c6349c$var$Slider(props, ref) {
                 isInForm: !!formContext
             }),
             children: ({ state: state, isDisabled: isDisabled })=>{
-                fillOffset = fillOffset !== undefined ? (0, $5DeaH$reactariautils.clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;
+                fillOffset = fillOffset !== undefined ? (0, $5DeaH$reactariautils.clamp)(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);
                 let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);
                 let isRightOfOffset = fillWidth > 0;
                 let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);

package/dist/Slider.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Slider as AriaSlider,\n  SliderProps as AriaSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderThumb,\n  SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {size, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n  children?: ReactNode,\n  /**\n   * The size of the Slider.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Slider should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean,\n  /**\n   * The style of the Slider's track.\n   *\n   * @default 'thin'\n   */\n  trackStyle?: 'thin' | 'thick', // TODO: add ramp\n  /**\n   * The style of the Slider's thumb.\n   *\n   * @default 'default'\n   */\n  thumbStyle?: 'default' | 'precise'\n  // TODO\n  // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n  /**\n   * The offset from which to start the fill.\n   */\n  fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n  font: 'control',\n  alignItems: {\n    labelPosition: {\n      side: 'center'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled'\n  },\n  columnGap: {\n    size: {\n      S: 16,\n      M: 16,\n      L: 20,\n      XL: 24\n    },\n    isInForm: 12\n  }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n  display: {\n    labelPosition: {\n      top: 'grid'\n    }\n  },\n  gridArea: 'label',\n  width: 'full',\n  gridTemplateAreas: {\n    labelPosition: {\n      top: ['label output']\n    }\n  },\n  gridTemplateColumns: {\n    labelPosition: {\n      top: [\n        '1fr auto'\n      ]\n    }\n  },\n  textAlign: {\n    labelPosition: {\n      side: {\n        labelAlign: {\n          start: 'start',\n          end: 'end'\n        }\n      }\n    }\n  },\n  '--field-gap': {\n    type: 'paddingBottom',\n    value: 0\n  }\n});\n\nconst output = style({\n  gridArea: 'output',\n  textAlign: {\n    labelPosition: {\n      top: {\n        direction: {\n          ltr: 'end',\n          rtl: 'start'\n        }\n      },\n      side: {\n        direction: {\n          ltr: 'start',\n          rtl: 'end'\n        },\n        isInForm: 'end'\n      }\n    }\n  }\n});\n\nexport let track = style({\n  ...fieldInput(),\n  gridArea: 'track',\n  position: 'relative',\n  width: 'full',\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  }\n});\n\nexport let thumbContainer = style({\n  size: {\n    size: {\n      S: size(18),\n      M: 20,\n      L: size(22),\n      XL: 24\n    }\n  },\n  display: 'inline-block',\n  position: 'absolute',\n  top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n  size: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: size(22),\n          L: 24,\n          XL: size(26)\n        }\n      }\n    }\n  }\n});\n\nexport let thumb = style({\n  ...focusRing(),\n  display: 'inline-block',\n  boxSizing: 'border-box',\n  position: 'absolute',\n  top: '[50%]',\n  left: '[50%]',\n  transform: 'translateY(-50%) translateX(-50%)',\n  width: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: size(6)\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: size(22),\n          L: 24,\n          XL: size(26)\n        }\n      }\n    }\n  },\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  borderWidth: '[2px]',\n  borderColor: {\n    default: 'gray-800',\n    isHovered: 'gray-900',\n    isDragging: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n  height: {\n    trackStyle: {\n      thin: 4,\n      thick: 16\n    }\n  },\n  top: '[50%]',\n  borderRadius: {\n    trackStyle: {\n      thin: 'lg',\n      thick: 'sm'\n    }\n  }\n} as const;\n\nexport let upperTrack = style({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-300',\n    isDisabled: 'disabled'\n  },\n  translateY: '[-50%]',\n  width: 'full',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nexport let filledTrack = style({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-700',\n    isEmphasized: 'accent-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    size = 'M',\n    minValue = 0,\n    maxValue = 100,\n    formatOptions\n  } = props;\n  let formatter = useNumberFormatter(formatOptions);\n  let {direction} = useLocale();\n\n  return (\n    <AriaSlider\n      {...props}\n      ref={props.sliderRef}\n      className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n      {({state}) => {\n        let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n        switch (state.values.length) {\n          case 1:\n            break;\n          case 2:\n            // This should really use the NumberFormat#formatRange proposal...\n            // https://github.com/tc39/ecma402/issues/393\n            // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n            maxLabelLength = 3 + 2 * Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n            );\n            break;\n          default:\n            throw new Error('Only sliders with 1 or 2 handles are supported!');\n        }\n\n        let outputValue = (\n          <SliderOutput\n            style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n            className={output({direction, labelPosition, isInForm: !!formContext})}>\n            {({state}) =>\n              state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n          </SliderOutput>\n        );\n\n        return (\n          <>\n            <div className={labelContainer({labelPosition, labelAlign})}>\n              <FieldLabel\n                isDisabled={props.isDisabled}\n                size={props.size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                contextualHelp={props.contextualHelp}>\n                {label}\n              </FieldLabel>\n              {labelPosition === 'top' && outputValue}\n            </div>\n            <div className={style({gridArea: 'input', display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n              {props.children}\n              {labelPosition === 'side' && outputValue}\n            </div>\n          </>\n        );\n      }}\n    </AriaSlider>\n  );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    labelPosition = 'top',\n    size = 'M',\n    fillOffset,\n    isEmphasized,\n    trackStyle = 'thin',\n    thumbStyle = 'default'\n  } = props;\n  let thumbRef = useRef(null);\n  let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n  let domRef = useFocusableRef(ref, inputRef);\n  let {direction} = useLocale();\n  let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n  return (\n    <SliderBase\n      {...props}\n      sliderRef={domRef}>\n      <SliderTrack\n        className={track({size, labelPosition, isInForm: !!formContext})}>\n        {({state, isDisabled}) => {\n\n          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : 0;\n\n          let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n          let isRightOfOffset = fillWidth > 0;\n          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n          return (\n            <>\n              <div className={upperTrack({isDisabled, trackStyle})} />\n              <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n              <SliderThumb  className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n                {(renderProps) => (\n                  <div className={thumbHitArea({size})}>\n                    <div\n                      className={thumb({\n                        ...renderProps,\n                        size,\n                        thumbStyle\n                      })} />\n                  </div>\n                )}\n              </SliderThumb>\n            </>\n          );\n        }}\n      </SliderTrack>\n    </SliderBase>\n  );\n}\n\nlet _Slider = /*#__PURE__*/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;AA0DM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAgE;AAEzG,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBN,MAAM;;;;;;;;;;;;;;;;;AAoCN,MAAM;;;;;;;;;;;;;;;;AAqBC,IAAI;;;;;;;;;;;;;;;;;;;;;;;AAcJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDX,MAAM,qCAAe;IACnB,QAAQ;QACN,YAAY;YACV,MAAM;YACN,OAAO;QACT;IACF;IACA,KAAK;IACL,cAAc;QACZ,YAAY;YACV,MAAM;YACN,OAAO;QACT;IACF;AACF;AAEO,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBJ,SAAS,0CAAwC,MAAyE;IAC/H,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,SAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SACF,KAAK,iBACL,gBAAgB,mBAChB,aAAa,eACb,OAAO,eACP,WAAW,aACX,WAAW,oBACX,aAAa,EACd,GAAG;IACJ,IAAI,YAAY,CAAA,GAAA,uCAAiB,EAAE;IACnC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAE1B,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,MAAK;QACT,KAAK,OAAM,SAAS;QACpB,WAAW,CAAA,cAAe,AAAC,CAAA,OAAM,gBAAgB,IAAI,EAAC,IAAK,CAAA,GAAA,qCAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAe;+BAAC;gBAAe,UAAU,CAAC,CAAC;YAAW,IAAI,6BAAO;gBAAC,GAAG,WAAW;+BAAE;sBAAe;gBAAM,UAAU,CAAC,CAAC;YAAW,GAAG,OAAM,MAAM;kBACnN,CAAC,SAAC,KAAK,EAAC;YACP,IAAI,iBAAiB,KAAK,GAAG,CAAC;mBAAI,UAAU,MAAM,CAAC;aAAU,CAAC,MAAM,EAAE;mBAAI,UAAU,MAAM,CAAC;aAAU,CAAC,MAAM;YAC5G,OAAQ,MAAM,MAAM,CAAC,MAAM;gBACzB,KAAK;oBACH;gBACF,KAAK;oBACH,kEAAkE;oBAClE,6CAA6C;oBAC7C,iFAAiF;oBACjF,iHAAiH;oBACjH,iBAAiB,IAAI,IAAI,KAAK,GAAG,CAC/B,gBACA;2BAAI,UAAU,MAAM,CAAC;qBAAU,CAAC,MAAM,EAAE;2BAAI,UAAU,MAAM,CAAC;qBAAU,CAAC,MAAM;oBAEhF;gBACF;oBACE,MAAM,IAAI,MAAM;YACpB;YAEA,IAAI,4BACF,gCAAC,CAAA,GAAA,uCAAW;gBACV,OAAO;oBAAC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;oBAAE,UAAU,CAAC,EAAE,eAAe,EAAE,CAAC;oBAAE,oBAAoB;gBAAc;gBACzG,WAAW,6BAAO;+BAAC;mCAAW;oBAAe,UAAU,CAAC,CAAC;gBAAW;0BACnE,CAAC,SAAC,KAAK,EAAC,GACP,MAAM,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,IAAM,MAAM,kBAAkB,CAAC,IAAI,IAAI,CAAC;;YAInE,qBACE;;kCACE,iCAAC;wBAAI,WAAW,qCAAe;2CAAC;wCAAe;wBAAU;;0CACvD,gCAAC,CAAA,GAAA,oCAAS;gCACR,YAAY,OAAM,UAAU;gCAC5B,MAAM,OAAM,IAAI;gCAChB,eAAe;gCACf,YAAY;gCACZ,gBAAgB,OAAM,cAAc;0CACnC;;4BAEF,kBAAkB,SAAS;;;kCAE9B,iCAAC;wBAAI,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BAAkH;kCAAC;wBAAI;;4BACpI,OAAM,QAAQ;4BACd,kBAAkB,UAAU;;;;;QAIrC;;AAGN;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAiC;IACnE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACvC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,iBACF,gBAAgB,aAChB,OAAO,iBACP,UAAU,gBACV,YAAY,cACZ,aAAa,oBACb,aAAa,WACd,GAAG;IACJ,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE,OAAO,2FAA2F;IACxH,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,aAAC,SAAS,EAAC,GAAG,CAAA,GAAA,8BAAQ;IAC1B,IAAI,eAAe,cAAc,QAAQ,UAAU;IAEnD,qBACE,gCAAC;QACE,GAAG,KAAK;QACT,WAAW;kBACX,cAAA,gCAAC,CAAA,GAAA,sCAAU;YACT,WAAW,0CAAM;sBAAC;+BAAM;gBAAe,UAAU,CAAC,CAAC;YAAW;sBAC7D,CAAC,SAAC,KAAK,cAAE,UAAU,EAAC;gBAEnB,aAAa,eAAe,YAAY,CAAA,GAAA,2BAAI,EAAE,YAAY,MAAM,gBAAgB,CAAC,IAAI,MAAM,gBAAgB,CAAC,MAAM,MAAM,gBAAgB,CAAC;gBAEzI,IAAI,YAAY,MAAM,eAAe,CAAC,KAAK,MAAM,eAAe,CAAC;gBACjE,IAAI,kBAAkB,YAAY;gBAClC,IAAI,SAAS,kBAAkB,MAAM,eAAe,CAAC,cAAc,MAAM,eAAe,CAAC;gBAEzF,qBACE;;sCACE,gCAAC;4BAAI,WAAW,0CAAW;4CAAC;4CAAY;4BAAU;;sCAClD,gCAAC;4BAAI,OAAO;gCAAC,OAAO,CAAC,EAAE,KAAK,GAAG,CAAC,aAAa,IAAI,CAAC,CAAC;gCAAE,CAAC,aAAa,EAAE,CAAC,EAAE,SAAS,IAAI,CAAC,CAAC;4BAAA;4BAAG,WAAW,0CAAY;4CAAC;8CAAY;4CAAc;4BAAU;;sCACtJ,gCAAC,CAAA,GAAA,sCAAU;4BAAG,WAAW;4BAAgB,OAAO;4BAAG,MAAM,MAAM,IAAI;4BAAE,KAAK;4BAAU,OAAO,CAAC,cAAgB,CAAA,GAAA,oCAAS,EAAE,UAAU;oCAAC,WAAW;gCAAuB,GAAG;oCAAC,GAAG,WAAW;oCAAE,WAAW,YAAY,UAAU;gCAAA;sCACtN,CAAC,4BACA,gCAAC;oCAAI,WAAW,0CAAa;8CAAC;oCAAI;8CAChC,cAAA,gCAAC;wCACC,WAAW,0CAAM;4CACf,GAAG,WAAW;kDACd;wDACA;wCACF;;;;;;YAMd;;;AAIR;AAEA,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Slider as AriaSlider,\n  SliderProps as AriaSliderProps,\n  ContextValue,\n  SliderOutput,\n  SliderThumb,\n  SliderTrack\n} from 'react-aria-components';\nimport {clamp} from '@react-aria/utils';\nimport {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';\nimport {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FieldLabel} from './Field';\nimport {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';\nimport {focusRing, size, style} from '../style' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useLocale, useNumberFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {\n  children?: ReactNode,\n  /**\n   * The size of the Slider.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Slider should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean,\n  /**\n   * The style of the Slider's track.\n   *\n   * @default 'thin'\n   */\n  trackStyle?: 'thin' | 'thick', // TODO: add ramp\n  /**\n   * The style of the Slider's thumb.\n   *\n   * @default 'default'\n   */\n  thumbStyle?: 'default' | 'precise'\n  // TODO\n  // isEditable?: boolean,\n}\n\nexport interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>, InputDOMProps {\n  /**\n   * The offset from which to start the fill.\n   */\n  fillOffset?: number\n}\n\nexport const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);\n\nconst slider = style({\n  font: 'control',\n  alignItems: {\n    labelPosition: {\n      side: 'center'\n    }\n  },\n  color: {\n    default: 'neutral-subdued',\n    isDisabled: 'disabled'\n  },\n  columnGap: {\n    size: {\n      S: 16,\n      M: 16,\n      L: 20,\n      XL: 24\n    },\n    isInForm: 12\n  }\n}, getAllowedOverrides());\n\nconst labelContainer = style({\n  display: {\n    labelPosition: {\n      top: 'grid'\n    }\n  },\n  gridArea: 'label',\n  width: 'full',\n  gridTemplateAreas: {\n    labelPosition: {\n      top: ['label output']\n    }\n  },\n  gridTemplateColumns: {\n    labelPosition: {\n      top: [\n        '1fr auto'\n      ]\n    }\n  },\n  textAlign: {\n    labelPosition: {\n      side: {\n        labelAlign: {\n          start: 'start',\n          end: 'end'\n        }\n      }\n    }\n  },\n  '--field-gap': {\n    type: 'paddingBottom',\n    value: 0\n  }\n});\n\nconst output = style({\n  gridArea: 'output',\n  textAlign: {\n    labelPosition: {\n      top: {\n        direction: {\n          ltr: 'end',\n          rtl: 'start'\n        }\n      },\n      side: {\n        direction: {\n          ltr: 'start',\n          rtl: 'end'\n        },\n        isInForm: 'end'\n      }\n    }\n  }\n});\n\nexport let track = style({\n  gridArea: 'track',\n  position: 'relative',\n  width: 'full',\n  height: {\n    size: {\n      S: 24,\n      M: 32,\n      L: 40,\n      XL: 48\n    }\n  }\n});\n\nexport let thumbContainer = style({\n  size: {\n    size: {\n      S: size(18),\n      M: 20,\n      L: size(22),\n      XL: 24\n    }\n  },\n  display: 'inline-block',\n  position: 'absolute',\n  top: '[50%]'\n});\n\n// if precision thumb should have a smaller hit area, then remove this\nexport let thumbHitArea = style({\n  size: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: size(22),\n          L: 24,\n          XL: size(26)\n        }\n      }\n    }\n  }\n});\n\nexport let thumb = style({\n  ...focusRing(),\n  display: 'inline-block',\n  boxSizing: 'border-box',\n  position: 'absolute',\n  top: '[50%]',\n  left: '[50%]',\n  transform: 'translateY(-50%) translateX(-50%)',\n  width: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: size(6)\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: size(18),\n          M: 20,\n          L: size(22),\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: size(22),\n          L: 24,\n          XL: size(26)\n        }\n      }\n    }\n  },\n  borderRadius: 'full',\n  borderStyle: 'solid',\n  borderWidth: '[2px]',\n  borderColor: {\n    default: 'gray-800',\n    isHovered: 'gray-900',\n    isDragging: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: 'gray-25'\n});\n\nconst trackStyling = {\n  height: {\n    trackStyle: {\n      thin: 4,\n      thick: 16\n    }\n  },\n  top: '[50%]',\n  borderRadius: {\n    trackStyle: {\n      thin: 'lg',\n      thick: 'sm'\n    }\n  }\n} as const;\n\nexport let upperTrack = style({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-300',\n    isDisabled: 'disabled'\n  },\n  translateY: '[-50%]',\n  width: 'full',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  }\n});\n\nexport let filledTrack = style({\n  ...trackStyling,\n  position: 'absolute',\n  backgroundColor: {\n    default: 'gray-700',\n    isEmphasized: 'accent-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: '[.5px]',\n  borderColor: {\n    default: 'transparent',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText'\n    }\n  },\n  translateY: '[-50%]'\n});\n\nexport function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    label,\n    labelPosition = 'top',\n    labelAlign = 'start',\n    size = 'M',\n    minValue = 0,\n    maxValue = 100,\n    formatOptions\n  } = props;\n  let formatter = useNumberFormatter(formatOptions);\n  let {direction} = useLocale();\n\n  return (\n    <AriaSlider\n      {...props}\n      ref={props.sliderRef}\n      className={renderProps => (props.UNSAFE_className || '') + mergeStyles(style(field())({labelPosition, isInForm: !!formContext}), slider({...renderProps, labelPosition, size, isInForm: !!formContext}, props.styles))}>\n      {({state}) => {\n        let maxLabelLength = Math.max([...formatter.format(minValue)].length, [...formatter.format(maxValue)].length);\n        switch (state.values.length) {\n          case 1:\n            break;\n          case 2:\n            // This should really use the NumberFormat#formatRange proposal...\n            // https://github.com/tc39/ecma402/issues/393\n            // https://github.com/tc39/proposal-intl-numberformat-v3#formatrange-ecma-402-393\n            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/formatRange\n            maxLabelLength = 3 + 2 * Math.max(\n              maxLabelLength,\n              [...formatter.format(minValue)].length, [...formatter.format(maxValue)].length\n            );\n            break;\n          default:\n            throw new Error('Only sliders with 1 or 2 handles are supported!');\n        }\n\n        let outputValue = (\n          <SliderOutput\n            style={{width: `${maxLabelLength}ch`, minWidth: `${maxLabelLength}ch`, fontVariantNumeric: 'tabular-nums'}}\n            className={output({direction, labelPosition, isInForm: !!formContext})}>\n            {({state}) =>\n              state.values.map((_, i) => state.getThumbValueLabel(i)).join(' – ')}\n          </SliderOutput>\n        );\n\n        return (\n          <>\n            <div className={labelContainer({labelPosition, labelAlign})}>\n              <FieldLabel\n                isDisabled={props.isDisabled}\n                size={props.size}\n                labelPosition={labelPosition}\n                labelAlign={labelAlign}\n                contextualHelp={props.contextualHelp}>\n                {label}\n              </FieldLabel>\n              {labelPosition === 'top' && outputValue}\n            </div>\n            <div className={style({...fieldInput(), display: 'inline-flex', alignItems: 'center', gap: {default: 16, size: {L: 20, XL: 24}}})({size})}>\n              {props.children}\n              {labelPosition === 'side' && outputValue}\n            </div>\n          </>\n        );\n      }}\n    </AriaSlider>\n  );\n}\n\nfunction Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SliderContext);\n  let formContext = useContext(FormContext);\n  props = useFormProps(props);\n  let {\n    labelPosition = 'top',\n    size = 'M',\n    fillOffset,\n    isEmphasized,\n    trackStyle = 'thin',\n    thumbStyle = 'default'\n  } = props;\n  let thumbRef = useRef(null);\n  let inputRef = useRef(null); // TODO: need to pass inputRef to SliderThumb when we release the next version of RAC 1.3.0\n  let domRef = useFocusableRef(ref, inputRef);\n  let {direction} = useLocale();\n  let cssDirection = direction === 'rtl' ? 'right' : 'left';\n\n  return (\n    <SliderBase\n      {...props}\n      sliderRef={domRef}>\n      <SliderTrack\n        className={track({size, labelPosition, isInForm: !!formContext})}>\n        {({state, isDisabled}) => {\n\n          fillOffset = fillOffset !== undefined ? clamp(fillOffset, state.getThumbMinValue(0), state.getThumbMaxValue(0)) : state.getThumbMinValue(0);\n\n          let fillWidth = state.getThumbPercent(0) - state.getValuePercent(fillOffset);\n          let isRightOfOffset = fillWidth > 0;\n          let offset = isRightOfOffset ? state.getValuePercent(fillOffset) : state.getThumbPercent(0);\n\n          return (\n            <>\n              <div className={upperTrack({isDisabled, trackStyle})} />\n              <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />\n              <SliderThumb  className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>\n                {(renderProps) => (\n                  <div className={thumbHitArea({size})}>\n                    <div\n                      className={thumb({\n                        ...renderProps,\n                        size,\n                        thumbStyle\n                      })} />\n                  </div>\n                )}\n              </SliderThumb>\n            </>\n          );\n        }}\n      </SliderTrack>\n    </SliderBase>\n  );\n}\n\nlet _Slider = /*#__PURE__*/ forwardRef(Slider);\nexport {_Slider as Slider};\n"],"names":[],"version":3,"file":"Slider.cjs.map"}