@react-spectrum/s2 3.0.0-nightly-e228ed814-250129 → 3.0.0-nightly-016590a4a-250131

package/dist/Slider.css.map

@@ -1 +1 @@
-{"mappings":"ACsEe;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BO;;;;EAuBP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEK;;;;EAAA;;;;EAqBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EA4CoD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CjD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtTb;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA4Q8D;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAzI1D;EAAA;IAAA;;;;IA6FM;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAsFG;EAAA;IAAA","sources":["ac662f3d1cc9df76","packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["@import \"08b0e2dddac244ec\";\n@import \"a216064bff7feb94\";\n@import \"0e026599f927ff3c\";\n@import \"1cb0b30bc0f5a958\";\n@import \"edc162e184e119d3\";\n@import \"b86a124969f6f615\";\n@import \"9b5953d83288c51e\";\n@import \"d1e50ca165bdf4c3\";\n@import \"da42e21b823e7a9c\";\n@import \"6f133df38f9a43ae\";\n@import \"5a00966d61027041\";\n","/*\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, 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: 18,\n      M: 20,\n      L: 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: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 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: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: 6\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 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\nexport const Slider = /*#__PURE__*/ forwardRef(function 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"],"names":[],"version":3,"file":"Slider.css.map"}
+{"mappings":"ACsEe;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsBQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCR;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAqBI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BO;;;;EAuBP;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwEK;;;;EAAA;;;;EAqBC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EA4CoD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA0CjD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtTb;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IA4Q8D;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAzI1D;EAAA;IAAA;;;;IA6FM;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAsFG;EAAA;IAAA","sources":["ac662f3d1cc9df76","packages/@react-spectrum/s2/src/Slider.tsx"],"sourcesContent":["@import \"08b0e2dddac244ec\";\n@import \"a216064bff7feb94\";\n@import \"0e026599f927ff3c\";\n@import \"1cb0b30bc0f5a958\";\n@import \"edc162e184e119d3\";\n@import \"b86a124969f6f615\";\n@import \"9b5953d83288c51e\";\n@import \"d1e50ca165bdf4c3\";\n@import \"da42e21b823e7a9c\";\n@import \"6f133df38f9a43ae\";\n@import \"5a00966d61027041\";\n","/*\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, 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: 18,\n      M: 20,\n      L: 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: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 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: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: 6\n    }\n  },\n  height: {\n    thumbStyle: {\n      default: {\n        size: {\n          S: 18,\n          M: 20,\n          L: 22,\n          XL: 24\n        }\n      },\n      precise: {\n        size: {\n          S: 20,\n          M: 22,\n          L: 24,\n          XL: 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\nexport const Slider = /*#__PURE__*/ forwardRef(function 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"],"names":[],"version":3,"file":"Slider.css.map"}

package/dist/Slider.mjs

@@ -35,35 +35,35 @@ import {useNumberFormatter as $c5w2x$useNumberFormatter, useLocale as $c5w2x$use
 const $8128d8480e67c400$export$e99164f0030f3bff = /*#__PURE__*/ (0, $c5w2x$createContext)(null);
 const $8128d8480e67c400$var$slider = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
     rules += matches.join('');
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' _hbj';
+        rules += ' _hi';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' _hbh';
+        rules += ' _hg';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' _hbd';
+        rules += ' _hc';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' _hbb';
+        rules += ' _ha';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' _hbf';
+        rules += ' _he';
     }
-    rules += ' _fb';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
+    rules += ' _ib';
+    rules += ' _j-1x99dlob';
+    rules += ' _ja';
     if (props.isDisabled) rules += ' aj';
     else {
         if (props.isPressed) rules += ' an';
@@ -71,89 +71,78 @@ const $8128d8480e67c400$var$slider = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' an';
         else rules += ' am';
     }
-    if (props.labelPosition === "side") rules += ' _2c';
-    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';
+    if (props.labelPosition === "side") rules += ' _5c';
+    if (props.isInForm) rules += ' ie';
+    else if (props.size === "XL") rules += ' ih';
+    else if (props.size === "L") rules += ' ig';
+    else if (props.size === "M") rules += ' if';
+    else if (props.size === "S") rules += ' if';
     return rules;
 };
 const $8128d8480e67c400$var$labelContainer = function anonymous(props) {
     let rules = " .";
-    if (props.labelPosition === "top") rules += ' _0f';
-    rules += ' __b-hr3t0p';
-    rules += ' __c-hr3t0p';
-    rules += ' __d-hr3t0p';
+    if (props.labelPosition === "top") rules += ' _3f';
     rules += ' __e-hr3t0p';
-    rules += ' lb';
-    if (props.labelPosition === "top") rules += ' __k-1h4qke2';
-    if (props.labelPosition === "top") rules += ' __i-1j10eqz';
+    rules += ' __f-hr3t0p';
+    rules += ' __g-hr3t0p';
+    rules += ' __h-hr3t0p';
+    rules += ' kb';
+    if (props.labelPosition === "top") rules += ' __n-1h4qke2';
+    if (props.labelPosition === "top") rules += ' __l-1j10eqz';
     if (props.labelPosition === "side") {
-        if (props.labelAlign === "end") rules += ' _kc';
-        else if (props.labelAlign === "start") rules += ' _ka';
+        if (props.labelAlign === "end") rules += ' _nc';
+        else if (props.labelAlign === "start") rules += ' _na';
     }
-    rules += ' -_1inj1bc_F-a';
+    rules += ' -_1inj1bc_I-a';
     return rules;
 };
 const $8128d8480e67c400$var$output = function anonymous(props) {
     let rules = " .";
-    rules += ' __b-ny5g4a';
-    rules += ' __c-ny5g4a';
-    rules += ' __d-ny5g4a';
     rules += ' __e-ny5g4a';
+    rules += ' __f-ny5g4a';
+    rules += ' __g-ny5g4a';
+    rules += ' __h-ny5g4a';
     if (props.labelPosition === "side") {
-        if (props.isInForm) rules += ' _kc';
-        else if (props.direction === "rtl") rules += ' _kc';
-        else if (props.direction === "ltr") rules += ' _ka';
+        if (props.isInForm) rules += ' _nc';
+        else if (props.direction === "rtl") rules += ' _nc';
+        else if (props.direction === "ltr") rules += ' _na';
     } else if (props.labelPosition === "top") {
-        if (props.direction === "rtl") rules += ' _ka';
-        else if (props.direction === "ltr") rules += ' _kc';
+        if (props.direction === "rtl") rules += ' _na';
+        else if (props.direction === "ltr") rules += ' _nc';
     }
     return rules;
 };
 let $8128d8480e67c400$export$6b2a7d5132615086 = function anonymous(props) {
     let rules = " .";
-    rules += ' __b-n9hk5a';
-    rules += ' __c-n9hk5a';
-    rules += ' __d-n9hk5a';
     rules += ' __e-n9hk5a';
-    rules += ' Vc';
-    rules += ' lb';
-    if (props.size === "XL") rules += ' k_a';
-    else if (props.size === "L") rules += ' k2';
-    else if (props.size === "M") rules += ' kU';
-    else if (props.size === "S") rules += ' kM';
+    rules += ' __f-n9hk5a';
+    rules += ' __g-n9hk5a';
+    rules += ' __h-n9hk5a';
+    rules += ' Yc';
+    rules += ' kb';
+    if (props.size === "XL") rules += ' j_a';
+    else if (props.size === "L") rules += ' j2';
+    else if (props.size === "M") rules += ' jU';
+    else if (props.size === "S") rules += ' jM';
     return rules;
 };
 let $8128d8480e67c400$export$7814bee2738c4c3 = function anonymous(props) {
     let rules = " .";
-    if (props.size === "XL") rules += ' lM';
-    else if (props.size === "L") rules += ' lK';
-    else if (props.size === "M") rules += ' lI';
-    else if (props.size === "S") rules += ' lG';
     if (props.size === "XL") rules += ' kM';
     else if (props.size === "L") rules += ' kK';
     else if (props.size === "M") rules += ' kI';
     else if (props.size === "S") rules += ' kG';
-    rules += ' _0b';
-    rules += ' Va';
-    rules += ' Y-3760fj';
+    if (props.size === "XL") rules += ' jM';
+    else if (props.size === "L") rules += ' jK';
+    else if (props.size === "M") rules += ' jI';
+    else if (props.size === "S") rules += ' jG';
+    rules += ' _3b';
+    rules += ' Ya';
+    rules += ' _b-3760fj';
     return rules;
 };
 let $8128d8480e67c400$export$f120a3c6038107a5 = function anonymous(props) {
     let rules = " .";
-    if (props.thumbStyle === "precise") {
-        if (props.size === "XL") rules += ' lO';
-        else if (props.size === "L") rules += ' lM';
-        else if (props.size === "M") rules += ' lK';
-        else if (props.size === "S") rules += ' lI';
-    } else if (props.thumbStyle === "default") {
-        if (props.size === "XL") rules += ' lM';
-        else if (props.size === "L") rules += ' lK';
-        else if (props.size === "M") rules += ' lI';
-        else if (props.size === "S") rules += ' lG';
-    }
     if (props.thumbStyle === "precise") {
         if (props.size === "XL") rules += ' kO';
         else if (props.size === "L") rules += ' kM';
@@ -165,54 +154,80 @@ let $8128d8480e67c400$export$f120a3c6038107a5 = function anonymous(props) {
         else if (props.size === "M") rules += ' kI';
         else if (props.size === "S") rules += ' kG';
     }
+    if (props.thumbStyle === "precise") {
+        if (props.size === "XL") rules += ' jO';
+        else if (props.size === "L") rules += ' jM';
+        else if (props.size === "M") rules += ' jK';
+        else if (props.size === "S") rules += ' jI';
+    } else if (props.thumbStyle === "default") {
+        if (props.size === "XL") rules += ' jM';
+        else if (props.size === "L") rules += ' jK';
+        else if (props.size === "M") rules += ' jI';
+        else if (props.size === "S") rules += ' jG';
+    }
     return rules;
 };
 let $8128d8480e67c400$export$becc9140d0e846f8 = function anonymous(props) {
     let rules = " .";
-    if (props.isFocusVisible) rules += ' _Mb';
-    else rules += ' _Ma';
-    rules += ' da_____M';
-    rules += ' dx';
-    rules += ' _Oc';
-    rules += ' _N-3t1z';
-    rules += ' _0b';
-    rules += ' __oa';
-    rules += ' Va';
-    rules += ' Y-3760fj';
-    rules += ' Z-3760fj';
-    rules += ' U-mn5ko6';
-    if (props.thumbStyle === "precise") rules += ' lu';
+    if (props.isFocusVisible) rules += ' _Pb';
+    else rules += ' _Pa';
+    rules += ' ca_____M';
+    rules += ' cx';
+    rules += ' _Rc';
+    rules += ' _Q-3t1z';
+    rules += ' _3b';
+    rules += ' __ra';
+    rules += ' Ya';
+    rules += ' _b-3760fj';
+    rules += ' _c-3760fj';
+    rules += ' X-mn5ko6';
+    if (props.thumbStyle === "precise") rules += ' ku';
     else if (props.thumbStyle === "default") {
-        if (props.size === "XL") rules += ' lM';
-        else if (props.size === "L") rules += ' lK';
-        else if (props.size === "M") rules += ' lI';
-        else if (props.size === "S") rules += ' lG';
-    }
-    if (props.thumbStyle === "precise") {
-        if (props.size === "XL") rules += ' kO';
-        else if (props.size === "L") rules += ' kM';
-        else if (props.size === "M") rules += ' kK';
-        else if (props.size === "S") rules += ' kI';
-    } else if (props.thumbStyle === "default") {
         if (props.size === "XL") rules += ' kM';
         else if (props.size === "L") rules += ' kK';
         else if (props.size === "M") rules += ' kI';
         else if (props.size === "S") rules += ' kG';
     }
-    rules += ' _wf';
-    rules += ' _xf';
-    rules += ' _yf';
+    if (props.thumbStyle === "precise") {
+        if (props.size === "XL") rules += ' jO';
+        else if (props.size === "L") rules += ' jM';
+        else if (props.size === "M") rules += ' jK';
+        else if (props.size === "S") rules += ' jI';
+    } else if (props.thumbStyle === "default") {
+        if (props.size === "XL") rules += ' jM';
+        else if (props.size === "L") rules += ' jK';
+        else if (props.size === "M") rules += ' jI';
+        else if (props.size === "S") rules += ' jG';
+    }
     rules += ' _zf';
-    rules += ' wa';
+    rules += ' _Af';
+    rules += ' _Bf';
+    rules += ' _Cf';
+    rules += ' za';
+    rules += ' t-375zlr';
     rules += ' u-375zlr';
-    rules += ' v-375zlr';
+    rules += ' r-375zlr';
     rules += ' s-375zlr';
-    rules += ' t-375zlr';
-    if (props.isDisabled) rules += ' ca_____O';
-    if (props.isDisabled) rules += ' ci';
-    else if (props.isDragging) rules += ' co';
-    else if (props.isHovered) rules += ' co';
-    else rules += ' cn';
+    if (props.isDisabled) rules += ' xa_____O';
+    if (props.isDisabled) rules += ' xi';
+    else if (props.isDragging) rules += ' xo';
+    else if (props.isHovered) rules += ' xo';
+    else rules += ' xn';
+    if (props.isDisabled) rules += ' ya_____O';
+    if (props.isDisabled) rules += ' yi';
+    else if (props.isDragging) rules += ' yo';
+    else if (props.isHovered) rules += ' yo';
+    else rules += ' yn';
+    if (props.isDisabled) rules += ' va_____O';
+    if (props.isDisabled) rules += ' vi';
+    else if (props.isDragging) rules += ' vo';
+    else if (props.isHovered) rules += ' vo';
+    else rules += ' vn';
+    if (props.isDisabled) rules += ' wa_____O';
+    if (props.isDisabled) rules += ' wi';
+    else if (props.isDragging) rules += ' wo';
+    else if (props.isHovered) rules += ' wo';
+    else rules += ' wn';
     rules += ' bd';
     return rules;
 };
@@ -233,62 +248,80 @@ const $8128d8480e67c400$var$trackStyling = {
 };
 let $8128d8480e67c400$export$1e1dc99b6e2204f1 = function anonymous(props) {
     let rules = " .";
-    if (props.trackStyle === "thick") rules += ' kE';
-    else if (props.trackStyle === "thin") rules += ' ks';
-    rules += ' Y-3760fj';
-    if (props.trackStyle === "thick") rules += ' _wb';
-    else if (props.trackStyle === "thin") rules += ' _wd';
-    if (props.trackStyle === "thick") rules += ' _xb';
-    else if (props.trackStyle === "thin") rules += ' _xd';
-    if (props.trackStyle === "thick") rules += ' _yb';
-    else if (props.trackStyle === "thin") rules += ' _yd';
+    if (props.trackStyle === "thick") rules += ' jE';
+    else if (props.trackStyle === "thin") rules += ' js';
+    rules += ' _b-3760fj';
     if (props.trackStyle === "thick") rules += ' _zb';
     else if (props.trackStyle === "thin") rules += ' _zd';
-    rules += ' Va';
+    if (props.trackStyle === "thick") rules += ' _Ab';
+    else if (props.trackStyle === "thin") rules += ' _Ad';
+    if (props.trackStyle === "thick") rules += ' _Bb';
+    else if (props.trackStyle === "thin") rules += ' _Bd';
+    if (props.trackStyle === "thick") rules += ' _Cb';
+    else if (props.trackStyle === "thin") rules += ' _Cd';
+    rules += ' Ya';
     if (props.isDisabled) rules += ' bg';
     else rules += ' bi';
-    rules += ' Q-yj8axo';
-    rules += ' lb';
-    rules += ' __oa';
-    rules += ' wa';
+    rules += ' T-yj8axo';
+    rules += ' kb';
+    rules += ' __ra';
+    rules += ' za';
+    rules += ' t-yj94cw';
     rules += ' u-yj94cw';
-    rules += ' v-yj94cw';
+    rules += ' r-yj94cw';
     rules += ' s-yj94cw';
-    rules += ' t-yj94cw';
-    if (props.isDisabled) rules += ' ca_____O';
-    else rules += ' ca_____K';
-    rules += ' ca';
+    if (props.isDisabled) rules += ' xa_____O';
+    else rules += ' xa_____K';
+    rules += ' xa';
+    if (props.isDisabled) rules += ' ya_____O';
+    else rules += ' ya_____K';
+    rules += ' ya';
+    if (props.isDisabled) rules += ' va_____O';
+    else rules += ' va_____K';
+    rules += ' va';
+    if (props.isDisabled) rules += ' wa_____O';
+    else rules += ' wa_____K';
+    rules += ' wa';
     return rules;
 };
 let $8128d8480e67c400$export$847ceef3bc944d02 = function anonymous(props) {
     let rules = " .";
-    if (props.trackStyle === "thick") rules += ' kE';
-    else if (props.trackStyle === "thin") rules += ' ks';
-    rules += ' Y-3760fj';
-    if (props.trackStyle === "thick") rules += ' _wb';
-    else if (props.trackStyle === "thin") rules += ' _wd';
-    if (props.trackStyle === "thick") rules += ' _xb';
-    else if (props.trackStyle === "thin") rules += ' _xd';
-    if (props.trackStyle === "thick") rules += ' _yb';
-    else if (props.trackStyle === "thin") rules += ' _yd';
+    if (props.trackStyle === "thick") rules += ' jE';
+    else if (props.trackStyle === "thin") rules += ' js';
+    rules += ' _b-3760fj';
     if (props.trackStyle === "thick") rules += ' _zb';
     else if (props.trackStyle === "thin") rules += ' _zd';
-    rules += ' Va';
+    if (props.trackStyle === "thick") rules += ' _Ab';
+    else if (props.trackStyle === "thin") rules += ' _Ad';
+    if (props.trackStyle === "thick") rules += ' _Bb';
+    else if (props.trackStyle === "thin") rules += ' _Bd';
+    if (props.trackStyle === "thick") rules += ' _Cb';
+    else if (props.trackStyle === "thin") rules += ' _Cd';
+    rules += ' Ya';
     if (props.isDisabled) rules += ' ba_____O';
     else rules += ' ba_____M';
     if (props.isDisabled) rules += ' bg';
     else if (props.isEmphasized) rules += ' by';
     else rules += ' bm';
-    rules += ' __oa';
-    rules += ' wa';
+    rules += ' __ra';
+    rules += ' za';
+    rules += ' t-yj94cw';
     rules += ' u-yj94cw';
-    rules += ' v-yj94cw';
+    rules += ' r-yj94cw';
     rules += ' s-yj94cw';
-    rules += ' t-yj94cw';
-    if (props.isDisabled) rules += ' ca_____O';
-    else rules += ' ca_____K';
-    rules += ' ca';
-    rules += ' Q-yj8axo';
+    if (props.isDisabled) rules += ' xa_____O';
+    else rules += ' xa_____K';
+    rules += ' xa';
+    if (props.isDisabled) rules += ' ya_____O';
+    else rules += ' ya_____K';
+    rules += ' ya';
+    if (props.isDisabled) rules += ' va_____O';
+    else rules += ' va_____K';
+    rules += ' va';
+    if (props.isDisabled) rules += ' wa_____O';
+    else rules += ' wa_____K';
+    rules += ' wa';
+    rules += ' T-yj8axo';
     return rules;
 };
 function $8128d8480e67c400$export$9418495bb635ebde(props1) {
@@ -302,47 +335,47 @@ function $8128d8480e67c400$export$9418495bb635ebde(props1) {
         ref: props1.sliderRef,
         className: (renderProps)=>(props1.UNSAFE_className || '') + (0, $feb886035e0d4633$export$e618dc39ac9ad607)(function anonymous(props) {
                 let rules = " .";
-                rules += ' _0f';
-                if (props.isInForm) rules += ' __b-3t1y';
+                rules += ' _3f';
+                if (props.isInForm) rules += ' __e-3t1y';
                 if (props.isInForm) {
-                    if (props.labelPosition === "side") rules += ' __c-yqnebx';
+                    if (props.labelPosition === "side") rules += ' __f-yqnebx';
                 }
-                if (props.isInForm) rules += ' __i-1a97rzt';
+                if (props.isInForm) rules += ' __l-1a97rzt';
                 else {
-                    if (props.labelPosition === "side") rules += ' __i-ar5vcf';
-                    else if (props.labelPosition === "top") rules += ' __i-2wzs0i';
+                    if (props.labelPosition === "side") rules += ' __l-ar5vcf';
+                    else if (props.labelPosition === "top") rules += ' __l-2wzs0i';
                 }
-                if (props.labelPosition === "side") rules += ' __j-ar5vcf';
-                else if (props.labelPosition === "top") rules += ' __j-1a6w430';
-                if (props.labelPosition === "side") rules += ' __k-18h2yqz';
-                else if (props.labelPosition === "top") rules += ' __k-1srn173';
+                if (props.labelPosition === "side") rules += ' __m-ar5vcf';
+                else if (props.labelPosition === "top") rules += ' __m-1a6w430';
+                if (props.labelPosition === "side") rules += ' __n-18h2yqz';
+                else if (props.labelPosition === "top") rules += ' __n-1srn173';
                 if (props.size === "XL") {
-                    rules += ' _ebj';
-                    rules += ' _ei';
+                    rules += ' _hbj';
+                    rules += ' _hi';
                 } else if (props.size === "L") {
-                    rules += ' _ebh';
-                    rules += ' _eg';
+                    rules += ' _hbh';
+                    rules += ' _hg';
                 } else if (props.size === "S") {
-                    rules += ' _ebd';
-                    rules += ' _ec';
+                    rules += ' _hbd';
+                    rules += ' _hc';
                 } else if (props.size === "XS") {
-                    rules += ' _ebb';
-                    rules += ' _ea';
+                    rules += ' _hbb';
+                    rules += ' _ha';
                 } else {
-                    rules += ' _ebf';
-                    rules += ' _ee';
+                    rules += ' _hbf';
+                    rules += ' _he';
                 }
-                rules += ' _2d';
-                rules += ' _g-1x99dlob';
-                rules += ' _ga';
-                if (props.size === "XL") rules += ' -aqrvqh_k-j';
-                else if (props.size === "L") rules += ' -aqrvqh_k-i';
-                else if (props.size === "S") rules += ' -aqrvqh_k-h';
-                else if (props.size === "XS") rules += ' -aqrvqh_k-g';
-                else rules += ' -aqrvqh_k-f';
-                rules += ' -_1inj1bc_i--prjw07';
-                rules += ' je';
-                rules += ' __S-yksgrp';
+                rules += ' _5d';
+                rules += ' _j-1x99dlob';
+                rules += ' _ja';
+                if (props.size === "XL") rules += ' -aqrvqh_j-j';
+                else if (props.size === "L") rules += ' -aqrvqh_j-i';
+                else if (props.size === "S") rules += ' -aqrvqh_j-h';
+                else if (props.size === "XS") rules += ' -aqrvqh_j-g';
+                else rules += ' -aqrvqh_j-f';
+                rules += ' -_1inj1bc_h--prjw07';
+                rules += ' ie';
+                rules += ' __V-yksgrp';
                 return rules;
             }({
                 labelPosition: labelPosition,
@@ -411,30 +444,30 @@ function $8128d8480e67c400$export$9418495bb635ebde(props1) {
                     /*#__PURE__*/ (0, $c5w2x$jsxs)("div", {
                         className: function anonymous(props) {
                             let rules = " .";
-                            rules += ' __b-g2ozi1';
-                            rules += ' __c-g2ozi1';
-                            rules += ' __d-g2ozi1';
                             rules += ' __e-g2ozi1';
-                            if (props.size === "XL") rules += ' qj';
-                            else if (props.size === "L") rules += ' qi';
-                            else if (props.size === "S") rules += ' qh';
-                            else if (props.size === "XS") rules += ' qg';
-                            else rules += ' qf';
-                            if (props.isQuiet) rules += ' __na';
-                            else rules += ' __n-1s8glxue';
-                            if (props.size === "XL") rules += ' -usygro_l-____g';
-                            else if (props.size === "L") rules += ' -usygro_l-___0';
-                            else if (props.size === "S") rules += ' -usygro_l-___u';
-                            else rules += ' -usygro_l-___K';
-                            rules += ' m-rwozxi';
-                            rules += ' _0e';
-                            rules += ' _2c';
+                            rules += ' __f-g2ozi1';
+                            rules += ' __g-g2ozi1';
+                            rules += ' __h-g2ozi1';
+                            if (props.size === "XL") rules += ' pj';
+                            else if (props.size === "L") rules += ' pi';
+                            else if (props.size === "S") rules += ' ph';
+                            else if (props.size === "XS") rules += ' pg';
+                            else rules += ' pf';
+                            if (props.isQuiet) rules += ' __qa';
+                            else rules += ' __q-1s8glxue';
+                            if (props.size === "XL") rules += ' -usygro_k-____g';
+                            else if (props.size === "L") rules += ' -usygro_k-___0';
+                            else if (props.size === "S") rules += ' -usygro_k-___u';
+                            else rules += ' -usygro_k-___K';
+                            rules += ' l-rwozxi';
+                            rules += ' _3e';
+                            rules += ' _5c';
+                            if (props.size === "XL") rules += ' hh';
+                            else if (props.size === "L") rules += ' hg';
+                            else rules += ' hf';
                             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