@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/SegmentedControl.css.map

@@ -1 +1 @@
-{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmK+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAhN7D;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAwCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxCK;EAAA;IAgN6D;;;;IAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  left: 0,\n  width: 'full',\n  height: 'full',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  prevRef?: RefObject<DOMRect | null>,\n  currentSelectedRef?: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  prevRef: RefObject<DOMRect | null>,\n  currentSelectedRef: RefObject<HTMLDivElement | null>,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let prevRef = useRef<DOMRect>(null);\n  let currentSelectedRef = useRef<HTMLDivElement>(null);\n\n  let onChange = (values: Set<Key>) => {\n    if (currentSelectedRef.current) {\n      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();\n    }\n\n    if (onSelectionChange) {\n      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\n    }\n  };\n\n  return (\n    <ToggleButtonGroup\n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]\n      ]}>\n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);\n  let state = useContext(ToggleGroupStateContext);\n  let isSelected = state?.selectedKeys.has(props.id);\n  // do not apply animation if a user has the prefers-reduced-motion setting\n  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, [register, props.id]);\n\n  useLayoutEffect(() => {\n    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {\n      let currentItem = currentSelectedRef?.current.getBoundingClientRect();\n\n      let deltaX = prevRef?.current.left - currentItem?.left;\n\n      currentSelectedRef.current.animate(\n        [\n          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},\n          {transform: 'translateX(0px)', width: `${currentItem.width}px`}\n        ],\n        {\n          duration: 200,\n          easing: 'ease-out'\n        }\n      );\n\n      prevRef.current = null;\n    }\n  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);\n\n  return (\n    <ToggleButton\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isSelected, isPressed, isDisabled}) => (\n        <>\n          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}
+{"mappings":"ACwDyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAQL;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwCL;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuI+C;;;;EAAA;;;;EAGzB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAE4C;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AApL7D;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAwCL;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAxCK;EAAA;IAoL6D;;;;IAAA;;;;;;AA5IlE;EAAA;IAAA","sources":["90909571be522c78","packages/@react-spectrum/s2/src/SegmentedControl.tsx"],"sourcesContent":["@import \"3076f581d900045a\";\n@import \"37c2fdb040131115\";\n@import \"d075b97bae773d34\";\n@import \"6903fca31535b056\";\n@import \"a6b79b4602e6c53c\";\n@import \"c3f3a2eb3541e76f\";\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, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';\nimport {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef, useFocusableRef} from '@react-spectrum/utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {\n  /**\n   * The content to display in the segmented control.\n   */\n  children: ReactNode,\n  /**\n   * Whether the segmented control is disabled.\n   */\n  isDisabled?: boolean,\n  /** Whether the items should divide the container width equally. */\n  isJustified?: boolean,\n  /** The id of the currently selected item (controlled). */\n  selectedKey?: Key | null,\n  /** The id of the initial selected item (uncontrolled). */\n  defaultSelectedKey?: Key,\n  /** Handler that is called when the selection changes. */\n  onSelectionChange?: (id: Key) => void\n}\nexport interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {\n  /**\n   * The content to display in the segmented control item.\n   */\n  children: ReactNode,\n  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */\n  id: Key,\n  /** Whether the item is disabled or not. */\n  isDisabled?: boolean\n}\n\nexport const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst segmentedControl = style({\n  display: 'flex',\n  gap: 4,\n  backgroundColor: 'gray-100',\n  borderRadius: 'default',\n  width: 'fit'\n}, getAllowedOverrides());\n\nconst controlItem = style<ToggleButtonRenderProps & {isJustified?: boolean}>({\n  ...focusRing(),\n  ...control({shape: 'default', icon: true}),\n  justifyContent: 'center',\n  position: 'relative',\n  forcedColorAdjust: 'none',\n  color: {\n    default: baseColor('neutral-subdued'),\n    isSelected: baseColor('neutral'),\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'ButtonText',\n      isDisabled: 'GrayText',\n      isSelected: 'HighlightText'\n    }\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  flexShrink: 0,\n  whiteSpace: 'nowrap',\n  disableTapHighlight: true,\n  userSelect: 'none',\n  backgroundColor: 'transparent',\n  borderStyle: 'none',\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  // The selected item has lower z-index so that the sliding background\n  // animation does not cover other items.\n  zIndex: {\n    default: 1,\n    isSelected: 0\n  }\n}, getAllowedOverrides());\n\nconst slider = style<{isDisabled: boolean}>({\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  top: 0,\n  left: 0,\n  width: 'full',\n  height: 'full',\n  contain: 'strict',\n  transition: {\n    default: '[translate,width]',\n    '@media (prefers-reduced-motion: reduce)': 'none'\n  },\n  transitionDuration: 200,\n  transitionTimingFunction: 'out',\n  position: 'absolute',\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  borderWidth: 2,\n  borderColor: {\n    default: 'gray-900',\n    isDisabled: 'disabled',\n    forcedColors: {\n      default: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  borderRadius: 'lg'\n});\n\ninterface InternalSegmentedControlContextProps {\n  register?: (value: Key, isDisabled?: boolean) => void,\n  isJustified?: boolean\n}\n\ninterface DefaultSelectionTrackProps {\n  defaultValue?: Key | null,\n  value?: Key | null,\n  children: ReactNode,\n  isJustified?: boolean\n}\n\nconst InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});\n\n/**\n * A SegmentedControl is a mutually exclusive group of buttons used for view switching.\n */\nexport const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);\n  let {\n    defaultSelectedKey,\n    selectedKey,\n    onSelectionChange\n  } = props;\n  let domRef = useDOMRef(ref);\n\n  let onChange = (values: Set<Key>) => {\n    if (onSelectionChange) {\n      let firstKey = values.values().next().value;\n      if (firstKey != null) {\n        onSelectionChange(firstKey);\n      }\n    }\n  };\n\n  return (\n    <ToggleButtonGroup\n      {...props}\n      selectedKeys={selectedKey != null ? [selectedKey] : undefined}\n      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}\n      disallowEmptySelection\n      ref={domRef}\n      orientation=\"horizontal\"\n      style={props.UNSAFE_style}\n      onSelectionChange={onChange}\n      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}\n      aria-label={props['aria-label']}>\n      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>\n        {props.children}\n      </DefaultSelectionTracker>\n    </ToggleButtonGroup>\n  );\n});\n\nfunction DefaultSelectionTracker(props: DefaultSelectionTrackProps) {\n  let state = useContext(ToggleGroupStateContext);\n  let isRegistered = useRef(!(props.defaultValue == null && props.value == null));\n\n  // default select the first available item\n  let register = useCallback((value: Key) => {\n    if (state && !isRegistered.current) {\n      isRegistered.current = true;\n      state.toggleKey(value);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Provider\n      values={[\n        [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]\n      ]}>\n      {props.children}\n    </Provider>\n  );\n}\n\n/**\n * A SegmentedControlItem represents an option within a SegmentedControl.\n */\nexport const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {\n  let domRef = useFocusableRef(ref);\n  let divRef = useRef<HTMLDivElement>(null);\n  let {register, isJustified} = useContext(InternalSegmentedControlContext);\n\n  useLayoutEffect(() => {\n    register?.(props.id);\n  }, [register, props.id]);\n\n  return (\n    <ToggleButton\n      {...props}\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >\n      {({isPressed, isDisabled}) => (\n        <>\n          <SelectionIndicator className={slider({isDisabled})} />\n          <Provider\n            values={[\n              [IconContext, {\n                render: centerBaseline({slot: 'icon', styles: style({order: 0, flexShrink: 0})})\n              }],\n              [RACTextContext, {slots: {[DEFAULT_SLOT]: {}}}],\n              [TextContext, {styles: style({order: 1, truncate: true})}]\n            ]}>\n            <div ref={divRef} style={pressScale(divRef)({isPressed})} className={style({display: 'flex', gap: 'text-to-visual', transition: 'default', alignItems: 'center', minWidth: 0})}>\n              {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n            </div>\n          </Provider>\n        </>\n      )\n      }\n    </ToggleButton>\n  );\n});\n"],"names":[],"version":3,"file":"SegmentedControl.css.map"}

package/dist/SegmentedControl.mjs

@@ -5,9 +5,9 @@ import {pressScale as $10ea7662e51a285b$export$56e8cba416805d8d} from "./pressSc
 import {Text as $8e847109a6ab556d$export$5f1af8db9871e1d6, TextContext as $8e847109a6ab556d$export$9afb8bc826b033ea} from "./Content.mjs";
 import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} from "../icons/useSpectrumContextProps.mjs";
 import {jsx as $ae3Tm$jsx, jsxs as $ae3Tm$jsxs, Fragment as $ae3Tm$Fragment} from "react/jsx-runtime";
-import {ToggleButtonGroup as $ae3Tm$ToggleButtonGroup, ToggleGroupStateContext as $ae3Tm$ToggleGroupStateContext, Provider as $ae3Tm$Provider, ToggleButton as $ae3Tm$ToggleButton, TextContext as $ae3Tm$TextContext, DEFAULT_SLOT as $ae3Tm$DEFAULT_SLOT} from "react-aria-components";
-import {createContext as $ae3Tm$createContext, forwardRef as $ae3Tm$forwardRef, useRef as $ae3Tm$useRef, useContext as $ae3Tm$useContext, useCallback as $ae3Tm$useCallback} from "react";
-import {useDOMRef as $ae3Tm$useDOMRef, useFocusableRef as $ae3Tm$useFocusableRef, useMediaQuery as $ae3Tm$useMediaQuery} from "@react-spectrum/utils";
+import {ToggleButtonGroup as $ae3Tm$ToggleButtonGroup, ToggleGroupStateContext as $ae3Tm$ToggleGroupStateContext, Provider as $ae3Tm$Provider, ToggleButton as $ae3Tm$ToggleButton, SelectionIndicator as $ae3Tm$SelectionIndicator, TextContext as $ae3Tm$TextContext, DEFAULT_SLOT as $ae3Tm$DEFAULT_SLOT} from "react-aria-components";
+import {createContext as $ae3Tm$createContext, forwardRef as $ae3Tm$forwardRef, useContext as $ae3Tm$useContext, useRef as $ae3Tm$useRef, useCallback as $ae3Tm$useCallback} from "react";
+import {useDOMRef as $ae3Tm$useDOMRef, useFocusableRef as $ae3Tm$useFocusableRef} from "@react-spectrum/utils";
 import {useLayoutEffect as $ae3Tm$useLayoutEffect} from "@react-aria/utils";
 
 /*
@@ -34,20 +34,20 @@ const $c679c2152e03f8bf$export$c083c44d8a07dd35 = /*#__PURE__*/ (0, $ae3Tm$creat
 const $c679c2152e03f8bf$var$segmentedControl = function anonymous(props, overrides) {
     let rules = " ";
     let width = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "Z") width = true;
         rules += p[0];
     }
-    rules += ' sd11';
-    rules += ' Ub11';
-    rules += ' qb11';
-    rules += ' gH11';
-    rules += ' ob11';
-    rules += ' nb11';
-    rules += ' kb11';
-    rules += ' jb11';
-    if (!width) rules += ' ZJ11';
+    rules += ' sd12';
+    rules += ' Ub12';
+    rules += ' qb12';
+    rules += ' gH12';
+    rules += ' ob12';
+    rules += ' nb12';
+    rules += ' kb12';
+    rules += ' jb12';
+    if (!width) rules += ' ZJ12';
     return rules;
 };
 const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
@@ -58,7 +58,7 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
     let flexBasis = false;
     let flexShrink = false;
     let zIndex = false;
-    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|Z|N|L)[^\s]+/g);
+    let matches = (overrides || '').matchAll(/(?:^|\s)(J|G|I|H|_u|_v|_s|__A|_d|_J|z|y|B|A|_P|_9|W|_l|_A|_z|_6|Z|N|L)[^\s]+/g);
     for (let p of matches){
         if (p[1] === "N") minWidth = true;
         if (p[1] === "_P") position = true;
@@ -68,215 +68,221 @@ const $c679c2152e03f8bf$var$controlItem = function anonymous(props, overrides) {
         if (p[1] === "_9") zIndex = true;
         rules += p[0];
     }
-    if (props.isFocusVisible) rules += ' _Lf11';
-    else rules += ' _Le11';
-    rules += ' Oh11';
-    rules += ' _Mc11';
-    rules += ' _Kd11';
+    if (props.isFocusVisible) rules += ' _Lf12';
+    else rules += ' _Le12';
+    rules += ' Oh12';
+    rules += ' _Mc12';
+    rules += ' _Kd12';
     if (props.size === "XL") {
-        rules += ' uk11';
-        rules += ' uch11';
-        rules += ' udi11';
-        rules += ' uea11';
-        rules += ' ugb11';
-        rules += ' uhd11';
-        rules += ' uje11';
-        rules += ' u2NhKxcl11';
-        rules += ' uic11';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "L") {
-        rules += ' uk11';
-        rules += ' uch11';
-        rules += ' udi11';
-        rules += ' uea11';
-        rules += ' ugb11';
-        rules += ' uhd11';
-        rules += ' uje11';
-        rules += ' u2NhKxcl11';
-        rules += ' uic11';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "S") {
-        rules += ' uk11';
-        rules += ' uch11';
-        rules += ' udi11';
-        rules += ' uea11';
-        rules += ' ugb11';
-        rules += ' uhd11';
-        rules += ' uje11';
-        rules += ' u2NhKxcl11';
-        rules += ' uic11';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else if (props.size === "XS") {
-        rules += ' uk11';
-        rules += ' uch11';
-        rules += ' udi11';
-        rules += ' uea11';
-        rules += ' ugb11';
-        rules += ' uhd11';
-        rules += ' uje11';
-        rules += ' u2NhKxcl11';
-        rules += ' uic11';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     } else {
-        rules += ' uk11';
-        rules += ' uch11';
-        rules += ' udi11';
-        rules += ' uea11';
-        rules += ' ugb11';
-        rules += ' uhd11';
-        rules += ' uje11';
-        rules += ' u2NhKxcl11';
-        rules += ' uic11';
+        rules += ' uk12';
+        rules += ' uch12';
+        rules += ' udi12';
+        rules += ' uea12';
+        rules += ' ugb12';
+        rules += ' uhd12';
+        rules += ' uje12';
+        rules += ' u2NhKxcl12';
+        rules += ' uic12';
     }
     if (props.size === "XL") {
-        rules += ' -_6BNtrc-e11';
-        rules += ' vx11';
+        rules += ' -_6BNtrc-e12';
+        rules += ' vx12';
     } else if (props.size === "L") {
-        rules += ' -_6BNtrc-d11';
-        rules += ' vx11';
+        rules += ' -_6BNtrc-d12';
+        rules += ' vx12';
     } else if (props.size === "S") {
-        rules += ' -_6BNtrc-b11';
-        rules += ' vx11';
+        rules += ' -_6BNtrc-b12';
+        rules += ' vx12';
     } else if (props.size === "XS") {
-        rules += ' -_6BNtrc-a11';
-        rules += ' vx11';
+        rules += ' -_6BNtrc-a12';
+        rules += ' vx12';
     } else {
-        rules += ' -_6BNtrc-c11';
-        rules += ' vx11';
+        rules += ' -_6BNtrc-c12';
+        rules += ' vx12';
     }
     if (props.size === "XL") {
-        rules += ' wb11';
-        rules += ' xb11';
-        rules += ' _xa11';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "L") {
-        rules += ' wb11';
-        rules += ' xb11';
-        rules += ' _xa11';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "S") {
-        rules += ' wb11';
-        rules += ' xb11';
-        rules += ' _xa11';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else if (props.size === "XS") {
-        rules += ' wb11';
-        rules += ' xb11';
-        rules += ' _xa11';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     } else {
-        rules += ' wb11';
-        rules += ' xb11';
-        rules += ' _xa11';
+        rules += ' wb12';
+        rules += ' xb12';
+        rules += ' _xa12';
     }
     if (props.size === "XL") {
-        rules += ' _Fd11';
-        rules += ' _FezxGHba11';
-        rules += ' _FnuYUweb11';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "L") {
-        rules += ' _Fd11';
-        rules += ' _FezxGHba11';
-        rules += ' _FnuYUweb11';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "S") {
-        rules += ' _Fd11';
-        rules += ' _FezxGHba11';
-        rules += ' _FnuYUweb11';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else if (props.size === "XS") {
-        rules += ' _Fd11';
-        rules += ' _FezxGHba11';
-        rules += ' _FnuYUweb11';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     } else {
-        rules += ' _Fd11';
-        rules += ' _FezxGHba11';
-        rules += ' _FnuYUweb11';
+        rules += ' _Fd12';
+        rules += ' _FezxGHba12';
+        rules += ' _FnuYUweb12';
     }
-    if (props.isDisabled) rules += ' pp11';
+    if (props.isDisabled) rules += ' pp12';
     else if (props.isSelected) {
-        if (props.isPressed) rules += ' po11';
-        else if (props.isFocusVisible) rules += ' po11';
-        else if (props.isHovered) rules += ' po11';
-        else rules += ' pt11';
+        if (props.isPressed) rules += ' po12';
+        else if (props.isFocusVisible) rules += ' po12';
+        else if (props.isHovered) rules += ' po12';
+        else rules += ' pt12';
     } else {
-        if (props.isPressed) rules += ' pt11';
-        else if (props.isFocusVisible) rules += ' pt11';
-        else if (props.isHovered) rules += ' pt11';
-        else rules += ' pv11';
+        if (props.isPressed) rules += ' pt12';
+        else if (props.isFocusVisible) rules += ' pt12';
+        else if (props.isHovered) rules += ' pt12';
+        else rules += ' pv12';
     }
-    if (props.isSelected) rules += ' ple11';
-    else if (props.isDisabled) rules += ' plc11';
-    else rules += ' plb11';
-    rules += ' sd11';
-    rules += ' eb11';
-    rules += ' _oa11';
-    rules += ' Sv11';
-    rules += ' SgLWx3bd11';
-    rules += ' Rv11';
-    rules += ' RgLWx3bd11';
+    if (props.isSelected) rules += ' ple12';
+    else if (props.isDisabled) rules += ' plc12';
+    else rules += ' plb12';
+    rules += ' sd12';
+    rules += ' eb12';
+    rules += ' _oa12';
+    rules += ' Sv12';
+    rules += ' SgLWx3bd12';
+    rules += ' Rv12';
+    rules += ' RgLWx3bd12';
     if (props.size === "XL") {
-        if (!minWidth) rules += ' Nl11';
+        if (!minWidth) rules += ' Nl12';
     } else if (props.size === "L") {
-        if (!minWidth) rules += ' Nj11';
+        if (!minWidth) rules += ' Nj12';
     } else if (props.size === "S") {
-        if (!minWidth) rules += ' Nf11';
+        if (!minWidth) rules += ' Nf12';
     } else if (props.size === "XS") {
-        if (!minWidth) rules += ' Ne11';
-    } else if (!minWidth) rules += ' Nk11';
-    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec11';
-    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn11';
-    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b11';
-    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd11';
-    else rules += ' -SFnbic-_Jb11';
-    rules += ' -Bu7z1c-ob11';
-    rules += ' oj11';
-    rules += ' nj11';
-    rules += ' kj11';
-    rules += ' jj11';
-    rules += ' qc11';
-    rules += ' qsd11';
-    rules += ' -Qg41Lb-IAxCW0c11';
-    rules += ' -Qg41Lb-gLWx3bIy11';
-    rules += ' FRuFGYc11';
-    rules += ' _Ca11';
-    if (!position) rules += ' _Pc11';
-    rules += ' _yb11';
+        if (!minWidth) rules += ' Ne12';
+    } else if (!minWidth) rules += ' Nk12';
+    if (props.size === "XL") rules += ' -SFnbic-_JaP8ec12';
+    else if (props.size === "L") rules += ' -SFnbic-_J0K2hn12';
+    else if (props.size === "S") rules += ' -SFnbic-_JJOW22b12';
+    else if (props.size === "XS") rules += ' -SFnbic-_JICefdd12';
+    else rules += ' -SFnbic-_Jb12';
+    rules += ' -Bu7z1c-ob12';
+    rules += ' oj12';
+    rules += ' nj12';
+    rules += ' kj12';
+    rules += ' jj12';
+    rules += ' qc12';
+    rules += ' qsd12';
+    rules += ' -Qg41Lb-IAxCW0c12';
+    rules += ' -Qg41Lb-gLWx3bIy12';
+    rules += ' FRuFGYc12';
+    rules += ' _Ca12';
+    if (!position) rules += ' _Pc12';
+    rules += ' _yb12';
     if (props.isJustified) {
-        if (!flexGrow) rules += ' _ub11';
+        if (!flexGrow) rules += ' _ub12';
     }
     if (props.isJustified) {
-        if (!flexBasis) rules += ' _sb11';
+        if (!flexBasis) rules += ' _sb12';
     }
-    if (!flexShrink) rules += ' _va11';
-    rules += ' _7c11';
-    rules += ' __ca11';
-    rules += ' _4c11';
-    rules += ' g911';
-    rules += ' _je11';
-    rules += ' -_8sjo0b-t5ZbAob11';
+    if (!flexShrink) rules += ' _va12';
+    rules += ' _7c12';
+    rules += ' __ca12';
+    rules += ' _4c12';
+    rules += ' g912';
+    rules += ' _je12';
+    rules += ' -_8sjo0b-t5ZbAob12';
     if (props.isSelected) {
-        if (!zIndex) rules += ' _9b11';
-    } else if (!zIndex) rules += ' _9c11';
-    if (props.size === "XL") rules += ' -F_-Fz11';
-    else if (props.size === "L") rules += ' -F_-Fv11';
-    else if (props.size === "S") rules += ' -F_-Fp11';
-    else if (props.size === "XS") rules += ' -F_-Fn11';
-    else rules += ' -F_-Fx11';
+        if (!zIndex) rules += ' _9b12';
+    } else if (!zIndex) rules += ' _9c12';
+    if (props.size === "XL") rules += ' -F_-Fz12';
+    else if (props.size === "L") rules += ' -F_-Fv12';
+    else if (props.size === "S") rules += ' -F_-Fp12';
+    else if (props.size === "XS") rules += ' -F_-Fn12';
+    else rules += ' -F_-Fx12';
     return rules;
 };
 const $c679c2152e03f8bf$var$slider = function anonymous(props) {
     let rules = " ";
-    rules += ' gX11';
-    if (props.isDisabled) rules += ' gld11';
-    else rules += ' gle11';
-    rules += ' _Er11';
-    rules += ' Za11';
-    rules += ' Fb11';
-    rules += ' _Pa11';
-    rules += ' _oa11';
-    rules += ' _jf11';
-    rules += ' _kc11';
-    rules += ' hc11';
-    rules += ' mc11';
-    rules += ' lc11';
-    if (props.isDisabled) rules += ' iq11';
-    else rules += ' in11';
-    if (props.isDisabled) rules += ' ilc11';
-    else rules += ' ild11';
-    rules += ' oc11';
-    rules += ' nc11';
-    rules += ' kc11';
-    rules += ' jc11';
+    rules += ' gX12';
+    if (props.isDisabled) rules += ' gld12';
+    else rules += ' gle12';
+    rules += ' Wr12';
+    rules += ' _Er12';
+    rules += ' Za12';
+    rules += ' Fb12';
+    rules += ' _qg12';
+    rules += ' Yx6BKnd12';
+    rules += ' Ydklsgce12';
+    rules += ' Xc12';
+    rules += ' _2a12';
+    rules += ' _Pa12';
+    rules += ' _oa12';
+    rules += ' _jf12';
+    rules += ' _kc12';
+    rules += ' hc12';
+    rules += ' mc12';
+    rules += ' lc12';
+    if (props.isDisabled) rules += ' iq12';
+    else rules += ' in12';
+    if (props.isDisabled) rules += ' ilc12';
+    else rules += ' ild12';
+    rules += ' oc12';
+    rules += ' nc12';
+    rules += ' kc12';
+    rules += ' jc12';
     return rules;
 };
 const $c679c2152e03f8bf$var$InternalSegmentedControlContext = /*#__PURE__*/ (0, $ae3Tm$createContext)({});
@@ -284,10 +290,7 @@ const $c679c2152e03f8bf$export$668709c620d0b8e2 = /*#__PURE__*/ (0, $ae3Tm$forwa
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $c679c2152e03f8bf$export$c083c44d8a07dd35);
     let { defaultSelectedKey: defaultSelectedKey, selectedKey: selectedKey, onSelectionChange: onSelectionChange } = props;
     let domRef = (0, $ae3Tm$useDOMRef)(ref);
-    let prevRef = (0, $ae3Tm$useRef)(null);
-    let currentSelectedRef = (0, $ae3Tm$useRef)(null);
     let onChange = (values)=>{
-        if (currentSelectedRef.current) prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
         if (onSelectionChange) {
             let firstKey = values.values().next().value;
             if (firstKey != null) onSelectionChange(firstKey);
@@ -311,8 +314,6 @@ const $c679c2152e03f8bf$export$668709c620d0b8e2 = /*#__PURE__*/ (0, $ae3Tm$forwa
         children: /*#__PURE__*/ (0, $ae3Tm$jsx)($c679c2152e03f8bf$var$DefaultSelectionTracker, {
             defaultValue: defaultSelectedKey,
             value: selectedKey,
-            prevRef: prevRef,
-            currentSelectedRef: currentSelectedRef,
             isJustified: props.isJustified,
             children: props.children
         })
@@ -335,8 +336,6 @@ function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
                 $c679c2152e03f8bf$var$InternalSegmentedControlContext,
                 {
                     register: register,
-                    prevRef: props.prevRef,
-                    currentSelectedRef: props.currentSelectedRef,
                     isJustified: props.isJustified
                 }
             ]
@@ -347,42 +346,13 @@ function $c679c2152e03f8bf$var$DefaultSelectionTracker(props) {
 const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwardRef)(function SegmentedControlItem(props, ref) {
     let domRef = (0, $ae3Tm$useFocusableRef)(ref);
     let divRef = (0, $ae3Tm$useRef)(null);
-    let { register: register, prevRef: prevRef, currentSelectedRef: currentSelectedRef, isJustified: isJustified } = (0, $ae3Tm$useContext)($c679c2152e03f8bf$var$InternalSegmentedControlContext);
-    let state = (0, $ae3Tm$useContext)((0, $ae3Tm$ToggleGroupStateContext));
-    let isSelected = state?.selectedKeys.has(props.id);
-    // do not apply animation if a user has the prefers-reduced-motion setting
-    let reduceMotion = (0, $ae3Tm$useMediaQuery)('(prefers-reduced-motion: reduce)');
+    let { register: register, isJustified: isJustified } = (0, $ae3Tm$useContext)($c679c2152e03f8bf$var$InternalSegmentedControlContext);
     (0, $ae3Tm$useLayoutEffect)(()=>{
         register?.(props.id);
     }, [
         register,
         props.id
     ]);
-    (0, $ae3Tm$useLayoutEffect)(()=>{
-        if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
-            let currentItem = currentSelectedRef?.current.getBoundingClientRect();
-            let deltaX = prevRef?.current.left - currentItem?.left;
-            currentSelectedRef.current.animate([
-                {
-                    transform: `translateX(${deltaX}px)`,
-                    width: `${prevRef?.current.width}px`
-                },
-                {
-                    transform: 'translateX(0px)',
-                    width: `${currentItem.width}px`
-                }
-            ], {
-                duration: 200,
-                easing: 'ease-out'
-            });
-            prevRef.current = null;
-        }
-    }, [
-        isSelected,
-        reduceMotion,
-        prevRef,
-        currentSelectedRef
-    ]);
     return /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$ToggleButton), {
         ...props,
         ref: domRef,
@@ -391,13 +361,12 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                 ...renderProps,
                 isJustified: isJustified
             }, props.styles),
-        children: ({ isSelected: isSelected, isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $ae3Tm$jsxs)((0, $ae3Tm$Fragment), {
+        children: ({ isPressed: isPressed, isDisabled: isDisabled })=>/*#__PURE__*/ (0, $ae3Tm$jsxs)((0, $ae3Tm$Fragment), {
                 children: [
-                    isSelected && /*#__PURE__*/ (0, $ae3Tm$jsx)("div", {
+                    /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$SelectionIndicator), {
                         className: $c679c2152e03f8bf$var$slider({
                             isDisabled: isDisabled
-                        }),
-                        ref: currentSelectedRef
+                        })
                     }),
                     /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $ae3Tm$Provider), {
                         values: [
@@ -406,7 +375,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                                 {
                                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                         slot: 'icon',
-                                        styles: " _Ja11 _va11"
+                                        styles: " _Ja12 _va12"
                                     })
                                 }
                             ],
@@ -421,7 +390,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                             [
                                 (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                                 {
-                                    styles: " _Jb11 _Nc11 Pc11 _Yb11 _7c11"
+                                    styles: " _Jb12 _Nc12 Pc12 _Yb12 _7c12"
                                 }
                             ]
                         ],
@@ -430,7 +399,7 @@ const $c679c2152e03f8bf$export$4fc12f2742e8cf3f = /*#__PURE__*/ (0, $ae3Tm$forwa
                             style: (0, $10ea7662e51a285b$export$56e8cba416805d8d)(divRef)({
                                 isPressed: isPressed
                             }),
-                            className: " sd11 Uc11 Usd11 qc11 qsd11 Yd11 Xb11 _2b11 eb11 Na11",
+                            className: " sd12 Uc12 Usd12 qc12 qsd12 Yd12 Xb12 _2b12 eb12 Na12",
                             children: typeof props.children === 'string' ? /*#__PURE__*/ (0, $ae3Tm$jsx)((0, $8e847109a6ab556d$export$5f1af8db9871e1d6), {
                                 children: props.children
                             }) : props.children