@react-spectrum/s2 3.0.0-nightly-a626c2596-240926 → 3.0.0-nightly-d57bd8d90-240927

package/dist/Switch.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAkE;AAE3G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAmC;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Switch.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  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAAkE;AAE3G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAmC;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,qBACE,gCAAC,CAAA,GAAA,iCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gCAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,oCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Switch.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  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.cjs.map"}

package/dist/Switch.css.map

@@ -1 +1 @@
-{"mappings":"ACiDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7DC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AApBE;EAAA;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["dcb0a1e1b828d584","packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["@import \"b4e99f1579042857\";\n@import \"8f3fcc7ad85a1ee6\";\n@import \"a22e7952bd491c56\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.css.map"}
+{"mappings":"ACiDgB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCC;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7DC;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AApBE;EAAA;IAAA;;;;IAoBF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","sources":["dcb0a1e1b828d584","packages/@react-spectrum/s2/src/Switch.tsx"],"sourcesContent":["@import \"b4e99f1579042857\";\n@import \"8f3fcc7ad85a1ee6\";\n@import \"a22e7952bd491c56\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.css.map"}

package/dist/Switch.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAAkE;AAE3G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAmC;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,qBACE,gBAAC,CAAA,GAAA,aAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gBAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Switch.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  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {FormContext, useFormProps} from './Form';\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.mjs.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AAqCM,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAAkE;AAE3G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCN,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAeN,4FAA4F;AAC5F,MAAM,uCAAiB,CAAC,cAAC,UAAU,EAAoB,GAAM,CAAA;QAC3D,wHAAwH;QACxH,0GAA0G;QAC1G,8GAA8G;QAC9G,sHAAsH;QACtH,uHAAuH;QACvH,mDAAmD;QACnD,EAAE;QACF,qDAAqD;QACrD,EAAE;QACF,uFAAuF;QACvF,EAAE;QACF,6DAA6D;QAC7D,8DAA8D;QAC9D,EAAE;QACF,+FAA+F;QAC/F,EAAE;QACF,4CAA4C;QAC5C,mDAAmD;QACnD,WAAW,aAEP,wHACA;IACN,CAAA;AAEA,SAAS,6BAAO,KAAkB,EAAE,GAAmC;IACrE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YAAC,QAAQ,oBAAE,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IACtD,IAAI,WAAW,CAAA,GAAA,aAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE,KAAK;IAClC,IAAI,YAAY,CAAA,GAAA,aAAK,EAAE;IACvB,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAU;IACtC,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,qBACE,gBAAC,CAAA,GAAA,aAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO;QACP,WAAW,CAAA,cAAe,mBAAmB,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACrH,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAa;kCACZ,cAAA,gBAAC;4BACC,WAAW,4BAAM;gCACf,GAAG,WAAW;gCACd,MAAM,MAAM,IAAI,IAAI;gCACpB,cAAc,MAAM,YAAY;4BAClC;sCACA,cAAA,gBAAC;gCACC,KAAK;gCACL,OAAO,CAAA,GAAA,yCAAS,EAAE,WAAW,sCAAgB;gCAC7C,WAAW,6BAAO;;;;oBAGvB;;;;AAKX;AAEA;;;CAGC,GACD,IAAI,4CAAU,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Switch.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  Switch as AriaSwitch,\n  SwitchProps as AriaSwitchProps,\n  ContextValue,\n  SwitchRenderProps\n} from 'react-aria-components';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface SwitchStyleProps {\n  /**\n   * The size of the Switch.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /**\n   * Whether the Switch should be displayed with an emphasized style.\n   */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends SwitchRenderProps, SwitchStyleProps {}\n\nexport interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {\n  children?: ReactNode\n}\n\nexport const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nconst track = style<RenderProps>({\n  ...focusRing(),\n  borderRadius: 'full',\n  '--trackWidth': {\n    type: 'width',\n    value: fontRelative(26)\n  },\n  '--trackHeight': {\n    type: 'height',\n    value: 'control-sm'\n  },\n  width: '--trackWidth',\n  height: '--trackHeight',\n  boxSizing: 'border-box',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  },\n  backgroundColor: {\n    default: 'gray-25',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  }\n});\n\nconst handle = style<RenderProps>({\n  height: 'full',\n  aspectRatio: 'square',\n  borderRadius: 'full',\n  backgroundColor: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'gray-25'\n  },\n  transition: 'default'\n});\n\n// Use an inline style to calculate the transform so we can combine it with the press scale.\nconst transformStyle = ({isSelected}: SwitchRenderProps) => ({\n  // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.\n  // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,\n  // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the\n  // distance from the Z=0 plane to the viewer. Since we want to scale the handle by a fixed amount and we cannot divide\n  // by a value with units, we can set the Z translation to a fixed amount and change the perspective in order to achieve\n  // the desired effect. Given the following formula:\n  //\n  //   scale = perspective / (perspective - translateZ)\n  //\n  // and desired scale factors (accounting for the 2px border on each side of the track):\n  //\n  //   defaultScale = (trackHeight - 8px) / (trackHeight - 4px)\n  //   selectedScale = (trackHeight - 6px) / (trackHeight - 4px)\n  //\n  // we can solve for the perspective needed in each case where translateZ is hard coded to -4px:\n  //\n  //    defaultPerspective = trackHeight - 8px\n  //    selectedPerspective = 2 * (trackHeight - 6px)\n  transform: isSelected\n    // The selected state also translates the X position to the end of the track (minus the borders).\n    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'\n    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'\n});\n\nfunction Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);\n  let {children, UNSAFE_className = '', UNSAFE_style} = props;\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let handleRef = useRef(null);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  return (\n    <AriaSwitch\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={UNSAFE_style}\n      className={renderProps => UNSAFE_className + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => (\n        <>\n          <CenterBaseline>\n            <div\n              className={track({\n                ...renderProps,\n                size: props.size || 'M',\n                isEmphasized: props.isEmphasized\n              })}>\n              <div\n                ref={handleRef}\n                style={pressScale(handleRef, transformStyle)(renderProps)}\n                className={handle(renderProps)} />\n            </div>\n          </CenterBaseline>\n          {children}\n        </>\n      )}\n    </AriaSwitch>\n  );\n}\n\n/**\n * Switches allow users to turn an individual option on or off.\n * They are usually used to activate or deactivate a specific setting.\n */\nlet _Switch = /*#__PURE__*/ forwardRef(Switch);\nexport {_Switch as Switch};\n"],"names":[],"version":3,"file":"Switch.mjs.map"}

package/dist/Table.cjs

@@ -372,8 +372,7 @@ const $93ff1e08f8313b57$var$cellFocus = {
         touch: "[0.46875rem]"
     }
 };
-function $93ff1e08f8313b57$var$CellFocusRing(props1) {
-    let { isFocusVisible: isFocusVisible } = props1;
+function $93ff1e08f8313b57$var$CellFocusRing() {
     return /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)("div", {
         role: "presentation",
         className: function anonymous(props) {
@@ -399,7 +398,7 @@ function $93ff1e08f8313b57$var$CellFocusRing(props1) {
             rules += ' Wa';
             return rules;
         }({
-            isFocusVisible: isFocusVisible
+            isFocusVisible: true
         })
     });
 }
@@ -449,7 +448,8 @@ const $93ff1e08f8313b57$var$columnStyles = function anonymous(props) {
     rules += ' _Zd';
     rules += ' ca_____v';
     rules += ' ci';
-    rules += ' ua';
+    if (props.isQuiet) rules += ' ub';
+    else rules += ' ua';
     rules += ' vb';
     rules += ' sa';
     if (props.isColumnResizable) rules += ' tb';
@@ -460,6 +460,7 @@ const $93ff1e08f8313b57$var$columnStyles = function anonymous(props) {
 };
 function $93ff1e08f8313b57$export$816b5d811295e6bc(props) {
     let { isHeaderRowHovered: isHeaderRowHovered } = (0, $4Eob6$react.useContext)($93ff1e08f8313b57$var$InternalTableHeaderContext);
+    let { isQuiet: isQuiet } = (0, $4Eob6$react.useContext)($93ff1e08f8313b57$var$InternalTableContext);
     let { allowsResizing: allowsResizing, children: children, align: align = 'start' } = props;
     let isColumnResizable = allowsResizing;
     return /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)((0, $4Eob6$reactariacomponents.Column), {
@@ -470,13 +471,12 @@ function $93ff1e08f8313b57$export$816b5d811295e6bc(props) {
         className: (renderProps)=>$93ff1e08f8313b57$var$columnStyles({
                 ...renderProps,
                 isColumnResizable: isColumnResizable,
-                align: align
+                align: align,
+                isQuiet: isQuiet
             }),
         children: ({ allowsSorting: allowsSorting, sortDirection: sortDirection, isFocusVisible: isFocusVisible, sort: sort, startResize: startResize, isHovered: isHovered })=>/*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsxs)((0, $4Eob6$reactjsxruntime.Fragment), {
                 children: [
-                    /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {
-                        isFocusVisible: isFocusVisible
-                    }),
+                    isFocusVisible && /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {}),
                     isColumnResizable ? /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$ResizableColumnContents, {
                         allowsSorting: allowsSorting,
                         sortDirection: sortDirection,
@@ -765,13 +765,35 @@ function $93ff1e08f8313b57$var$ResizerIndicator({ isFocusVisible: isFocusVisible
 }
 const $93ff1e08f8313b57$var$tableHeader = " . k4 l4 bf A-yj899n";
 const $93ff1e08f8313b57$var$selectAllCheckbox = " . yf";
-const $93ff1e08f8313b57$var$selectAllCheckboxColumn = " . Ea Fa Ca Da k-1xrzxd1 _La Uc _0b ci ca_____v sa ta ua vb wa bf";
+const $93ff1e08f8313b57$var$selectAllCheckboxColumn = function anonymous(props) {
+    let rules = " .";
+    rules += ' Ea';
+    rules += ' Fa';
+    rules += ' Ca';
+    rules += ' Da';
+    rules += ' k4';
+    rules += ' __na';
+    rules += ' _La';
+    rules += ' Uc';
+    rules += ' _0b';
+    rules += ' ca_____v';
+    rules += ' ci';
+    rules += ' sa';
+    rules += ' ta';
+    if (props.isQuiet) rules += ' ub';
+    else rules += ' ua';
+    rules += ' vb';
+    rules += ' wa';
+    rules += ' bf';
+    return rules;
+};
 let $93ff1e08f8313b57$var$InternalTableHeaderContext = /*#__PURE__*/ (0, $4Eob6$react.createContext)({
     isHeaderRowHovered: false
 });
 function $93ff1e08f8313b57$export$f850895b287ef28e({ columns: columns, children: children }) {
     let scale = (0, $ee7b4c497f520c08$exports.useScale)();
     let { selectionBehavior: selectionBehavior, selectionMode: selectionMode } = (0, $4Eob6$reactariacomponents.useTableOptions)();
+    let { isQuiet: isQuiet } = (0, $4Eob6$react.useContext)($93ff1e08f8313b57$var$InternalTableContext);
     let [isHeaderRowHovered, setHeaderRowHovered] = (0, $4Eob6$react.useState)(false);
     return /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$InternalTableHeaderContext.Provider, {
         value: {
@@ -787,14 +809,14 @@ function $93ff1e08f8313b57$export$f850895b287ef28e({ columns: columns, children:
                     isSticky: true,
                     width: scale === 'medium' ? 40 : 52,
                     minWidth: scale === 'medium' ? 40 : 52,
-                    className: $93ff1e08f8313b57$var$selectAllCheckboxColumn,
+                    className: $93ff1e08f8313b57$var$selectAllCheckboxColumn({
+                        isQuiet: isQuiet
+                    }),
                     children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsxs)((0, $4Eob6$reactjsxruntime.Fragment), {
                             children: [
                                 selectionMode === 'single' && /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsxs)((0, $4Eob6$reactjsxruntime.Fragment), {
                                     children: [
-                                        /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {
-                                            isFocusVisible: isFocusVisible
-                                        }),
+                                        isFocusVisible && /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {}),
                                         /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$VisuallyHiddenSelectAllLabel, {})
                                     ]
                                 }),
@@ -894,7 +916,7 @@ const $93ff1e08f8313b57$var$cell = function anonymous(props) {
 const $93ff1e08f8313b57$var$stickyCell = {
     backgroundColor: 'gray-25'
 };
-const $93ff1e08f8313b57$var$checkboxCellStyle = " . ca va ua sa ta wa Uc an aa_____x _La Cf Df bd _0b k-1xrzxd1";
+const $93ff1e08f8313b57$var$checkboxCellStyle = " . ca va ua sa ta wa Uc an aa_____x _La Cf Df b-19jpv4m _0b k-1xrzxd1";
 const $93ff1e08f8313b57$var$cellContent = function anonymous(props) {
     let rules = " .";
     rules += ' __vb';
@@ -923,15 +945,6 @@ const $93ff1e08f8313b57$var$cellContent = function anonymous(props) {
     else rules += ' yK';
     if (props.isSticky) rules += ' za';
     else rules += ' zK';
-    return rules;
-};
-const $93ff1e08f8313b57$var$cellBackground = function anonymous(props) {
-    let rules = " .";
-    rules += ' Ua';
-    rules += ' Xa';
-    rules += ' Za';
-    rules += ' _aa';
-    rules += ' Ya';
     if (props.isSticky) rules += ' b-19jpv4m';
     else rules += ' ba';
     return rules;
@@ -953,15 +966,7 @@ function $93ff1e08f8313b57$export$f6f0c3fe4ec306ea(props) {
         ...otherProps,
         children: ({ isFocusVisible: isFocusVisible })=>/*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsxs)((0, $4Eob6$reactjsxruntime.Fragment), {
                 children: [
-                    /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)("div", {
-                        role: "presentation",
-                        className: $93ff1e08f8313b57$var$cellBackground({
-                            isSticky: isSticky
-                        })
-                    }),
-                    /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {
-                        isFocusVisible: isFocusVisible
-                    }),
+                    isFocusVisible && /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)($93ff1e08f8313b57$var$CellFocusRing, {}),
                     /*#__PURE__*/ (0, $4Eob6$reactjsxruntime.jsx)("span", {
                         className: $93ff1e08f8313b57$var$cellContent({
                             ...tableVisualOptions,
@@ -974,28 +979,22 @@ function $93ff1e08f8313b57$export$f6f0c3fe4ec306ea(props) {
             })
     });
 }
+// Use color-mix instead of transparency so sticky cells work correctly.
+const $93ff1e08f8313b57$var$selectedBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 10%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 10%))]";
+const $93ff1e08f8313b57$var$selectedActiveBackground = "[light-dark(color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) 15%), color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) 15%))]";
 const $93ff1e08f8313b57$var$rowBackgroundColor = {
-    default: 'gray-25',
-    isFocusVisibleWithin: 'gray-900/7',
-    isHovered: 'gray-900/7',
-    isPressed: 'gray-900/10',
-    isSelected: {
-        default: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 10%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 10%))]",
-        isFocusVisibleWithin: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]",
-        isHovered: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]",
-        isPressed: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]"
+    default: {
+        default: 'gray-25',
+        isQuiet: 'transparent'
     },
-    isQuiet: {
-        default: 'transparent',
-        isFocusVisibleWithin: 'gray-900/7',
-        isHovered: 'gray-900/7',
-        isPressed: 'gray-900/10',
-        isSelected: {
-            default: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 10%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 10%))]",
-            isFocusVisibleWithin: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]",
-            isHovered: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]",
-            isPressed: "[light-dark(rgb(from light-dark(rgb(59, 99, 251), rgb(86, 129, 255)) r g b / 15%), rgb(from light-dark(rgb(93, 137, 255), rgb(52, 91, 248)) r g b / 15%))]"
-        }
+    isFocusVisibleWithin: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+    isHovered: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 7%)]",
+    isPressed: "[color-mix(in srgb, light-dark(rgb(255, 255, 255), rgb(17, 17, 17)), light-dark(rgb(19, 19, 19), rgb(242, 242, 242)) 10%)]",
+    isSelected: {
+        default: $93ff1e08f8313b57$var$selectedBackground,
+        isFocusVisibleWithin: $93ff1e08f8313b57$var$selectedActiveBackground,
+        isHovered: $93ff1e08f8313b57$var$selectedActiveBackground,
+        isPressed: $93ff1e08f8313b57$var$selectedActiveBackground // table-selected-row-background-color, opacity /15
     },
     forcedColors: {
         default: 'Background'
@@ -1006,45 +1005,17 @@ const $93ff1e08f8313b57$var$row = function anonymous(props) {
     rules += ' k4';
     rules += ' Uc';
     rules += ' __na';
-    rules += ' ba_____u';
-    if (props.isQuiet) {
-        if (props.isSelected) {
-            if (props.isPressed) rules += ' b-f92o7v';
-            else if (props.isHovered) rules += ' b-f92o7v';
-            else if (props.isFocusVisibleWithin) rules += ' b-f92o7v';
-            else rules += ' b-54erqp';
-        } else if (props.isPressed) rules += ' bo10';
-        else if (props.isHovered) rules += ' bo7';
-        else if (props.isFocusVisibleWithin) rules += ' bo7';
-        else rules += ' ba';
-    } else if (props.isSelected) {
-        if (props.isPressed) rules += ' b-f92o7v';
-        else if (props.isHovered) rules += ' b-f92o7v';
-        else if (props.isFocusVisibleWithin) rules += ' b-f92o7v';
-        else rules += ' b-54erqp';
-    } else if (props.isPressed) rules += ' bo10';
-    else if (props.isHovered) rules += ' bo7';
-    else if (props.isFocusVisibleWithin) rules += ' bo7';
-    else rules += ' bd';
+    rules += ' b-19jpv4m';
     rules += ' -_19jpv4m_b-a_____u';
-    if (props.isQuiet) {
-        if (props.isSelected) {
-            if (props.isPressed) rules += ' -_19jpv4m_b--f92o7v';
-            else if (props.isHovered) rules += ' -_19jpv4m_b--f92o7v';
-            else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b--f92o7v';
-            else rules += ' -_19jpv4m_b--54erqp';
-        } else if (props.isPressed) rules += ' -_19jpv4m_b-o10';
-        else if (props.isHovered) rules += ' -_19jpv4m_b-o7';
-        else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b-o7';
-        else rules += ' -_19jpv4m_b-a';
-    } else if (props.isSelected) {
-        if (props.isPressed) rules += ' -_19jpv4m_b--f92o7v';
-        else if (props.isHovered) rules += ' -_19jpv4m_b--f92o7v';
-        else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b--f92o7v';
-        else rules += ' -_19jpv4m_b--54erqp';
-    } else if (props.isPressed) rules += ' -_19jpv4m_b-o10';
-    else if (props.isHovered) rules += ' -_19jpv4m_b-o7';
-    else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b-o7';
+    if (props.isSelected) {
+        if (props.isPressed) rules += ' -_19jpv4m_b--1hocwbr';
+        else if (props.isHovered) rules += ' -_19jpv4m_b--1hocwbr';
+        else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b--1hocwbr';
+        else rules += ' -_19jpv4m_b--sogeql';
+    } else if (props.isPressed) rules += ' -_19jpv4m_b--17nxj1';
+    else if (props.isHovered) rules += ' -_19jpv4m_b--26tcdv';
+    else if (props.isFocusVisibleWithin) rules += ' -_19jpv4m_b--26tcdv';
+    else if (props.isQuiet) rules += ' -_19jpv4m_b-a';
     else rules += ' -_19jpv4m_b-d';
     rules += ' -oorfdf_d-a_____z';
     rules += ' -oorfdf_d-x';