@react-spectrum/s2 3.0.0-nightly-4b8b33a02-250211 → 3.0.0-nightly-260eb700f-250213

package/dist/Slider.mjs.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, 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.mjs.map"}
+{"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, 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<Partial<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.mjs.map"}

package/dist/StatusLight.cjs

@@ -36,44 +36,44 @@ $parcel$export(module.exports, "StatusLight", () => $dad358896b5630fa$export$5f8
 const $dad358896b5630fa$export$d8f8c0b091d8cb9b = /*#__PURE__*/ (0, $lz5dj$react.createContext)(null);
 const $dad358896b5630fa$var$wrapper = function anonymous(props, overrides) {
     let rules = " .";
-    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) || [];
+    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) || [];
     rules += matches.join('');
-    let $k = false;
-    for (let p of matches)if (/^\s*k/.test(p)) $k = true;
-    rules += ' _3d';
-    rules += ' hbH';
-    rules += ' hG';
+    let $l = false;
+    for (let p of matches)if (/^\s*l/.test(p)) $l = true;
+    rules += ' _0d';
     rules += ' ibH';
     rules += ' iG';
-    rules += ' _5d';
-    if (!$k) rules += ' ke';
-    rules += ' _g-bc1l9oh';
-    rules += ' _g-1uotwbwg';
-    rules += ' _g-eo0c6sf';
-    rules += ' _g-enzzrge';
-    rules += ' _g-enzykdd';
-    rules += ' _g-enzwzjc';
-    rules += ' _g-enzrfpb';
-    rules += ' _ga';
+    rules += ' jbH';
+    rules += ' jG';
+    rules += ' _2d';
+    if (!$l) rules += ' le';
+    rules += ' _d-bc1l9oh';
+    rules += ' _d-1uotwbwg';
+    rules += ' _d-eo0c6sf';
+    rules += ' _d-enzzrge';
+    rules += ' _d-enzykdd';
+    rules += ' _d-enzwzjc';
+    rules += ' _d-enzrfpb';
+    rules += ' _da';
     if (props.size === "XL") {
-        rules += ' _hbj';
-        rules += ' _hi';
+        rules += ' _ebj';
+        rules += ' _ei';
     } else if (props.size === "L") {
-        rules += ' _hbh';
-        rules += ' _hg';
+        rules += ' _ebh';
+        rules += ' _eg';
     } else if (props.size === "S") {
-        rules += ' _hbd';
-        rules += ' _hc';
+        rules += ' _ebd';
+        rules += ' _ec';
     } else if (props.size === "XS") {
-        rules += ' _hbb';
-        rules += ' _ha';
+        rules += ' _ebb';
+        rules += ' _ea';
     } else {
-        rules += ' _hbf';
-        rules += ' _he';
+        rules += ' _ebf';
+        rules += ' _ee';
     }
-    rules += ' _ib';
-    rules += ' _j-1x99dlob';
-    rules += ' _ja';
+    rules += ' _fb';
+    rules += ' _g-1x99dlob';
+    rules += ' _ga';
     if (props.variant === "neutral") rules += ' al';
     else {
         if (props.isPressed) rules += ' ao';
@@ -81,41 +81,41 @@ const $dad358896b5630fa$var$wrapper = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' ao';
         else rules += ' an';
     }
-    rules += ' __V-yksgrp';
+    rules += ' __S-yksgrp';
     return rules;
 };
 const $dad358896b5630fa$var$light = function anonymous(props) {
     let rules = " .";
+    if (props.size === "XL") rules += ' lC';
+    else if (props.size === "L") rules += ' lA';
+    else if (props.size === "M") rules += ' ly';
+    else if (props.size === "S") rules += ' lw';
     if (props.size === "XL") rules += ' kC';
     else if (props.size === "L") rules += ' kA';
     else if (props.size === "M") rules += ' ky';
     else if (props.size === "S") rules += ' kw';
-    if (props.size === "XL") rules += ' jC';
-    else if (props.size === "L") rules += ' jA';
-    else if (props.size === "M") rules += ' jy';
-    else if (props.size === "S") rules += ' jw';
-    if (props.isSkeleton) rules += ' dF';
-    else if (props.variant === "silver") rules += ' dx';
-    else if (props.variant === "brown") rules += ' dw';
-    else if (props.variant === "cinnamon") rules += ' dv';
-    else if (props.variant === "turquoise") rules += ' du';
-    else if (props.variant === "pink") rules += ' dt';
-    else if (props.variant === "yellow") rules += ' dj';
-    else if (props.variant === "seafoam") rules += ' dn';
-    else if (props.variant === "indigo") rules += ' dp';
-    else if (props.variant === "magenta") rules += ' ds';
-    else if (props.variant === "purple") rules += ' dq';
-    else if (props.variant === "fuchsia") rules += ' dr';
-    else if (props.variant === "cyan") rules += ' do';
-    else if (props.variant === "chartreuse") rules += ' dk';
-    else if (props.variant === "celery") rules += ' dl';
-    else if (props.variant === "negative") rules += ' de';
-    else if (props.variant === "notice") rules += ' dg';
-    else if (props.variant === "positive") rules += ' df';
-    else if (props.variant === "neutral") rules += ' dd';
-    else if (props.variant === "informative") rules += ' dc';
-    rules += ' __zd';
-    rules += ' __Ad';
+    if (props.isSkeleton) rules += ' eF';
+    else if (props.variant === "silver") rules += ' ex';
+    else if (props.variant === "brown") rules += ' ew';
+    else if (props.variant === "cinnamon") rules += ' ev';
+    else if (props.variant === "turquoise") rules += ' eu';
+    else if (props.variant === "pink") rules += ' et';
+    else if (props.variant === "yellow") rules += ' ej';
+    else if (props.variant === "seafoam") rules += ' en';
+    else if (props.variant === "indigo") rules += ' ep';
+    else if (props.variant === "magenta") rules += ' es';
+    else if (props.variant === "purple") rules += ' eq';
+    else if (props.variant === "fuchsia") rules += ' er';
+    else if (props.variant === "cyan") rules += ' eo';
+    else if (props.variant === "chartreuse") rules += ' ek';
+    else if (props.variant === "celery") rules += ' el';
+    else if (props.variant === "negative") rules += ' ee';
+    else if (props.variant === "notice") rules += ' eg';
+    else if (props.variant === "positive") rules += ' ef';
+    else if (props.variant === "neutral") rules += ' ed';
+    else if (props.variant === "informative") rules += ' ec';
+    rules += ' __wd';
+    rules += ' __xd';
     return rules;
 };
 const $dad358896b5630fa$export$5f84c37a31c6e41c = /*#__PURE__*/ (0, $lz5dj$react.forwardRef)(function StatusLight(props, ref) {

package/dist/StatusLight.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   */\n  variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<StatusLightProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label']) {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAyCM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAwE;AAEtH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCC,MAAM,4CAAc,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC3H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,QAAE,OAAO,cAAK,OAAO,QAAE,IAAI,oBAAE,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAC,GAAG;IACzF,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,uCAAY;IAE7B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,EACnC,QAAQ,IAAI,CAAC;IAGf,IAAI,CAAC,QAAS,CAAA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,kBAAkB,AAAD,GAC1D,QAAQ,IAAI,CAAC;IAGf,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,OAAO;YAAC,WAAW,CAAC,CAAC;QAAI,EAAE;QAC9C,KAAK;QACL,MAAM;QACN,OAAO;QACP,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;QAAO,GAAG;;0BACvD,gCAAC,CAAA,GAAA,wCAAa;0BACZ,cAAA,gCAAC;oBAAI,WAAW,4BAAM;8BAAC;iCAAM;oCAAS;oBAAU;oBAAI,eAAY;8BAC9D,cAAA,gCAAC;wBAAO,GAAE;wBAAM,IAAG;wBAAM,IAAG;;;;0BAGhC,gCAAC,CAAA,GAAA,8BAAG;0BAAG;;;;AAGb","sources":["packages/@react-spectrum/s2/src/StatusLight.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   */\n  variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label']) {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.cjs.map"}

package/dist/StatusLight.css

@@ -1,55 +1,55 @@
 @layer _.a {
-  ._3d {
+  ._0d {
     display: flex;
   }
 
-  .hG {
+  .iG {
     row-gap: .428571em;
   }
 
-  .iG {
+  .jG {
     column-gap: .428571em;
   }
 
-  ._5d {
+  ._2d {
     align-items: baseline;
   }
 
-  .ke {
+  .le {
     width: fit-content;
   }
 
-  ._ga {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._he {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._ha {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._hc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._hg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._hi {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._ib {
+  ._fb {
     font-variation-settings: "wght" 400;
     font-synthesis-weight: none;
     font-weight: 400;
   }
 
-  ._ja {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -65,204 +65,204 @@
     color: var(--lightningcss-light, #717171) var(--lightningcss-dark, #8a8a8a);
   }
 
-  .__V-yksgrp {
+  .__S-yksgrp {
     -webkit-tap-highlight-color: #0000;
   }
 
-  .kw {
+  .lw {
     width: calc(.5rem * var(--s2-scale));
   }
 
-  .ky {
+  .ly {
     width: calc(.625rem * var(--s2-scale));
   }
 
-  .kA {
+  .lA {
     width: calc(.75rem * var(--s2-scale));
   }
 
-  .kC {
+  .lC {
     width: calc(.875rem * var(--s2-scale));
   }
 
-  .jw {
+  .kw {
     height: calc(.5rem * var(--s2-scale));
   }
 
-  .jy {
+  .ky {
     height: calc(.625rem * var(--s2-scale));
   }
 
-  .jA {
+  .kA {
     height: calc(.75rem * var(--s2-scale));
   }
 
-  .jC {
+  .kC {
     height: calc(.875rem * var(--s2-scale));
   }
 
-  .dc {
+  .ec {
     fill: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #5681ff);
   }
 
-  .dd {
+  .ed {
     fill: var(--lightningcss-light, #8f8f8f) var(--lightningcss-dark, #8a8a8a);
   }
 
-  .df {
+  .ef {
     fill: var(--lightningcss-light, #079355) var(--lightningcss-dark, #099d59);
   }
 
-  .dg {
+  .eg {
     fill: var(--lightningcss-light, #d45b00) var(--lightningcss-dark, #e06400);
   }
 
-  .de {
+  .ee {
     fill: var(--lightningcss-light, #f03823) var(--lightningcss-dark, #fc432e);
   }
 
-  .dl {
+  .el {
     fill: var(--lightningcss-light, #52a119) var(--lightningcss-dark, #428612);
   }
 
-  .dk {
+  .ek {
     fill: var(--lightningcss-light, #8fac00) var(--lightningcss-dark, #7a9300);
   }
 
-  .do {
+  .eo {
     fill: var(--lightningcss-light, #30a7fe) var(--lightningcss-dark, #188edc);
   }
 
-  .dr {
+  .er {
     fill: var(--lightningcss-light, #c844dc) var(--lightningcss-dark, #d549eb);
   }
 
-  .dq {
+  .eq {
     fill: var(--lightningcss-light, #a65ce7) var(--lightningcss-dark, #ad69e9);
   }
 
-  .ds {
+  .es {
     fill: var(--lightningcss-light, #f02d6e) var(--lightningcss-dark, #f37);
   }
 
-  .dp {
+  .ep {
     fill: var(--lightningcss-light, #7a6afd) var(--lightningcss-dark, #8077fe);
   }
 
-  .dn {
+  .en {
     fill: var(--lightningcss-light, #0ba286) var(--lightningcss-dark, #088670);
   }
 
-  .dj {
+  .ej {
     fill: var(--lightningcss-light, #d29500) var(--lightningcss-dark, #da9f00);
   }
 
-  .dt {
+  .et {
     fill: var(--lightningcss-light, #e434a3) var(--lightningcss-dark, #ec43af);
   }
 
-  .du {
+  .eu {
     fill: var(--lightningcss-light, #0a8d99) var(--lightningcss-dark, #0b97a4);
   }
 
-  .dv {
+  .ev {
     fill: var(--lightningcss-light, #b86d46) var(--lightningcss-dark, #c07750);
   }
 
-  .dw {
+  .ew {
     fill: var(--lightningcss-light, #9a7b4d) var(--lightningcss-dark, #a38454);
   }
 
-  .dx {
+  .ex {
     fill: var(--lightningcss-light, gray) var(--lightningcss-dark, #898989);
   }
 
-  .dF {
+  .eF {
     fill: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .__zd {
+  .__wd {
     overflow-x: visible;
   }
 
-  .__Ad {
+  .__xd {
     overflow-y: visible;
   }
 }
 
 @layer _.b {
-  ._g-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._j-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  ._g-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._g-enzykdd:lang(ja) {
+  ._d-enzykdd:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  ._g-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._g-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._g-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  ._g-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    .hbH {
+    .ibH {
       row-gap: .470588em;
     }
 
-    .ibH {
+    .jbH {
       column-gap: .470588em;
     }
 
-    ._hbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._hbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._hbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._hbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._hbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }

package/dist/StatusLight.css.map

@@ -1 +1 @@
-{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;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;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   */\n  variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children?: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<StatusLightProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label']) {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}
+{"mappings":"ACqDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;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;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["dcb557d93c6b9336","packages/@react-spectrum/s2/src/StatusLight.tsx"],"sourcesContent":["@import \"f9aed9e8e46292d1\";\n@import \"946093cc8d031f9b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {CenterBaseline} from './CenterBaseline';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {Text} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useIsSkeleton} from './Skeleton';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface StatusLightStyleProps {\n  /**\n   * The variant changes the color of the status light.\n   * When status lights have a semantic meaning, they should use the variant for semantic colors.\n   */\n  variant: 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'celery' | 'chartreuse' | 'cyan' | 'fuchsia' | 'purple' | 'magenta' | 'indigo' | 'seafoam' | 'yellow' | 'pink' | 'turquoise' | 'cinnamon' | 'brown' | 'silver',\n  /**\n   * The size of the StatusLight.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display as the label.\n   */\n  children: ReactNode,\n  /**\n   * An accessibility role for the status light. Should be set when the status\n   * can change at runtime, and no more than one status light will update simultaneously.\n   * For cases where multiple statuses can change at the same time, use a Toast instead.\n   */\n  role?: 'status'\n}\n\nexport const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst wrapper = style<StatusLightStyleProps>({\n  display: 'flex',\n  gap: 'text-to-visual',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  color: {\n    default: 'neutral',\n    variant: {\n      neutral: 'gray-600'\n    }\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst light = style<StatusLightStyleProps & {isSkeleton: boolean}>({\n  size: {\n    size: {\n      S: 8,\n      M: 10,\n      L: 12,\n      XL: 14\n    }\n  },\n  fill: {\n    variant: {\n      informative: 'informative',\n      neutral: 'neutral',\n      positive: 'positive',\n      notice: 'notice',\n      negative: 'negative',\n      celery: 'celery',\n      chartreuse: 'chartreuse',\n      cyan: 'cyan',\n      fuchsia: 'fuchsia',\n      purple: 'purple',\n      magenta: 'magenta',\n      indigo: 'indigo',\n      seafoam: 'seafoam',\n      yellow: 'yellow',\n      pink: 'pink',\n      turquoise: 'turquoise',\n      cinnamon: 'cinnamon',\n      brown: 'brown',\n      silver: 'silver'\n    },\n    isSkeleton: 'gray-200'\n  },\n  overflow: 'visible' // prevents the light from getting clipped on iOS\n});\n\n/**\n * Status lights are used to color code categories and labels commonly found in data visualization.\n * When status lights have a semantic meaning, they should use semantic variant colors.\n */\nexport const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);\n  let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let domRef = useDOMRef(ref);\n  let isSkeleton = useIsSkeleton();\n\n  if (!children && !props['aria-label']) {\n    console.warn('If no children are provided, an aria-label must be specified');\n  }\n\n  if (!role && (props['aria-label'] || props['aria-labelledby'])) {\n    console.warn('A labelled StatusLight must have a role.');\n  }\n\n  return (\n    <div\n      {...filterDOMProps(props, {labelable: !!role})}\n      ref={domRef}\n      role={role}\n      style={UNSAFE_style}\n      className={UNSAFE_className + wrapper({size, variant}, styles)}>\n      <CenterBaseline>\n        <svg className={light({size, variant, isSkeleton})} aria-hidden=\"true\">\n          <circle r=\"50%\" cx=\"50%\" cy=\"50%\" />\n        </svg>\n      </CenterBaseline>\n      <Text>{children}</Text>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"StatusLight.css.map"}