@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-adae13c78-241218

package/dist/Button.mjs

@@ -59,12 +59,13 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     }
     if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
-    if (props.staticColor === "black") rules += ' db';
-    else if (props.staticColor === "white") rules += ' dc';
+    rules += ' da_____M';
+    if (props.isStaticColor) rules += ' d_____G';
     else rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
+    if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
+    else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
     if (!$U) rules += ' Uc';
     rules += ' _Zd';
     rules += ' _1-soocicc';
@@ -101,41 +102,26 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     rules += ' _f-1x99dlob';
     rules += ' _fa';
     if (props.fillStyle === "outline") {
-        if (props.isDisabled) rules += ' aa_____B';
-        else rules += ' aa_____x';
+        if (props.isDisabled) rules += ' aa_____O';
+        else rules += ' aa_____K';
     } else if (props.fillStyle === "fill") {
-        if (props.isDisabled) rules += ' aa_____A';
-        else rules += ' aa_____w';
+        if (props.isDisabled) rules += ' aa_____N';
+        else rules += ' aa_____J';
     }
-    if (props.staticColor === "black") {
-        if (props.isDisabled) rules += ' a_____n';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' a_____A';
         else if (props.fillStyle === "outline") {
-            if (props.isPressed) rules += ' a_____s';
-            else if (props.isFocusVisible) rules += ' a_____s';
-            else if (props.isHovered) rules += ' a_____s';
-            else rules += ' a_____r';
+            if (props.isPressed) rules += ' a_____F';
+            else if (props.isFocusVisible) rules += ' a_____F';
+            else if (props.isHovered) rules += ' a_____F';
+            else rules += ' a_____E';
         } else if (props.fillStyle === "fill") {
             if (props.variant === "secondary") {
-                if (props.isPressed) rules += ' a_____s';
-                else if (props.isFocusVisible) rules += ' a_____s';
-                else if (props.isHovered) rules += ' a_____s';
-                else rules += ' a_____r';
-            } else if (props.variant === "primary") rules += ' ac';
-        }
-    } else if (props.staticColor === "white") {
-        if (props.isDisabled) rules += ' a_____a';
-        else if (props.fillStyle === "outline") {
-            if (props.isPressed) rules += ' a_____f';
-            else if (props.isFocusVisible) rules += ' a_____f';
-            else if (props.isHovered) rules += ' a_____f';
-            else rules += ' a_____e';
-        } else if (props.fillStyle === "fill") {
-            if (props.variant === "secondary") {
-                if (props.isPressed) rules += ' a_____f';
-                else if (props.isFocusVisible) rules += ' a_____f';
-                else if (props.isHovered) rules += ' a_____f';
-                else rules += ' a_____e';
-            } else if (props.variant === "primary") rules += ' ab';
+                if (props.isPressed) rules += ' a_____F';
+                else if (props.isFocusVisible) rules += ' a_____F';
+                else if (props.isHovered) rules += ' a_____F';
+                else rules += ' a_____E';
+            } else if (props.variant === "primary") rules += ' a_____R';
         }
     } else if (props.fillStyle === "outline") {
         if (props.isDisabled) rules += ' aj';
@@ -192,34 +178,21 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     rules += ' -_1gogtue_E--1dbqcch';
     rules += ' -oelgqu_A--soocica';
     rules += ' -oelgqu_A--177861o';
-    if (props.isDisabled) rules += ' ca_____B';
-    else if (props.isHovered) rules += ' ca_____z';
-    else rules += ' ca_____v';
-    if (props.staticColor === "black") {
-        if (props.isDisabled) rules += ' c_____m';
-        else if (props.variant === "secondary") {
-            if (props.isPressed) rules += ' c_____n';
-            else if (props.isFocusVisible) rules += ' c_____n';
-            else if (props.isHovered) rules += ' c_____n';
-            else rules += ' c_____m';
-        } else if (props.variant === "primary") {
-            if (props.isPressed) rules += ' c_____s';
-            else if (props.isFocusVisible) rules += ' c_____s';
-            else if (props.isHovered) rules += ' c_____s';
-            else rules += ' c_____r';
-        }
-    } else if (props.staticColor === "white") {
-        if (props.isDisabled) rules += ' c____9';
+    if (props.isDisabled) rules += ' ca_____O';
+    else if (props.isHovered) rules += ' ca_____M';
+    else rules += ' ca_____I';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' c_____z';
         else if (props.variant === "secondary") {
-            if (props.isPressed) rules += ' c_____a';
-            else if (props.isFocusVisible) rules += ' c_____a';
-            else if (props.isHovered) rules += ' c_____a';
-            else rules += ' c____9';
+            if (props.isPressed) rules += ' c_____A';
+            else if (props.isFocusVisible) rules += ' c_____A';
+            else if (props.isHovered) rules += ' c_____A';
+            else rules += ' c_____z';
         } else if (props.variant === "primary") {
-            if (props.isPressed) rules += ' c_____f';
-            else if (props.isFocusVisible) rules += ' c_____f';
-            else if (props.isHovered) rules += ' c_____f';
-            else rules += ' c_____e';
+            if (props.isPressed) rules += ' c_____F';
+            else if (props.isFocusVisible) rules += ' c_____F';
+            else if (props.isHovered) rules += ' c_____F';
+            else rules += ' c_____E';
         }
     } else if (props.isDisabled) rules += ' ci';
     else if (props.variant === "secondary") {
@@ -233,96 +206,76 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
         else if (props.isHovered) rules += ' co';
         else rules += ' cn';
     }
-    if (props.fillStyle === "outline") rules += ' ba_____w';
+    rules += ' b-375toh';
+    rules += ' -rwx0fg_e-b';
+    rules += ' _zb';
+    rules += ' __R-yksgrp';
+    if (props.size === "XL") rules += ' -_375tou_o-j';
+    else if (props.size === "L") rules += ' -_375tou_o-i';
+    else if (props.size === "S") rules += ' -_375tou_o-h';
+    else if (props.size === "XS") rules += ' -_375tou_o-g';
+    else rules += ' -_375tou_o-f';
+    if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
+    else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
+    if (props.fillStyle === "outline") rules += ' -_375tp1_v-c';
+    else if (props.fillStyle === "fill") rules += ' -_375tp1_v-a';
+    if (props.fillStyle === "outline") rules += ' -_375toh_b-a_____J';
     else if (props.fillStyle === "fill") {
-        if (props.isDisabled) rules += ' ba_____B';
-        else if (props.isHovered) rules += ' ba_____z';
-        else rules += ' ba_____x';
+        if (props.isDisabled) rules += ' -_375toh_b-a_____O';
+        else if (props.isHovered) rules += ' -_375toh_b-a_____M';
+        else rules += ' -_375toh_b-a_____K';
     }
-    if (props.staticColor === "black") {
+    if (props.isStaticColor) {
         if (props.fillStyle === "outline") {
-            if (props.isDisabled) rules += ' ba';
-            else if (props.isFocusVisible) rules += ' b_____k';
-            else if (props.isPressed) rules += ' b_____k';
-            else if (props.isHovered) rules += ' b_____k';
-            else rules += ' ba';
+            if (props.isDisabled) rules += ' -_375toh_b-a';
+            else if (props.isFocusVisible) rules += ' -_375toh_b-_____x';
+            else if (props.isPressed) rules += ' -_375toh_b-_____x';
+            else if (props.isHovered) rules += ' -_375toh_b-_____x';
+            else rules += ' -_375toh_b-a';
         } else if (props.fillStyle === "fill") {
-            if (props.isDisabled) rules += ' b_____k';
+            if (props.isDisabled) rules += ' -_375toh_b-_____x';
             else if (props.variant === "secondary") {
-                if (props.isPressed) rules += ' b_____l';
-                else if (props.isFocusVisible) rules += ' b_____l';
-                else if (props.isHovered) rules += ' b_____l';
-                else rules += ' b_____k';
+                if (props.isPressed) rules += ' -_375toh_b-_____y';
+                else if (props.isFocusVisible) rules += ' -_375toh_b-_____y';
+                else if (props.isHovered) rules += ' -_375toh_b-_____y';
+                else rules += ' -_375toh_b-_____x';
             } else if (props.variant === "primary") {
-                if (props.isPressed) rules += ' b_____s';
-                else if (props.isFocusVisible) rules += ' b_____s';
-                else if (props.isHovered) rules += ' b_____s';
-                else rules += ' b_____r';
-            }
-        }
-    } else if (props.staticColor === "white") {
-        if (props.fillStyle === "outline") {
-            if (props.isDisabled) rules += ' ba';
-            else if (props.isFocusVisible) rules += ' b____7';
-            else if (props.isPressed) rules += ' b____7';
-            else if (props.isHovered) rules += ' b____7';
-            else rules += ' ba';
-        } else if (props.fillStyle === "fill") {
-            if (props.isDisabled) rules += ' b____7';
-            else if (props.variant === "secondary") {
-                if (props.isPressed) rules += ' b____8';
-                else if (props.isFocusVisible) rules += ' b____8';
-                else if (props.isHovered) rules += ' b____8';
-                else rules += ' b____7';
-            } else if (props.variant === "primary") {
-                if (props.isPressed) rules += ' b_____f';
-                else if (props.isFocusVisible) rules += ' b_____f';
-                else if (props.isHovered) rules += ' b_____f';
-                else rules += ' b_____e';
+                if (props.isPressed) rules += ' -_375toh_b-_____F';
+                else if (props.isFocusVisible) rules += ' -_375toh_b-_____F';
+                else if (props.isHovered) rules += ' -_375toh_b-_____F';
+                else rules += ' -_375toh_b-_____E';
             }
         }
     } else if (props.fillStyle === "outline") {
-        if (props.isDisabled) rules += ' ba';
-        else if (props.isFocusVisible) rules += ' bg';
-        else if (props.isPressed) rules += ' bg';
-        else if (props.isHovered) rules += ' bg';
-        else rules += ' ba';
+        if (props.isDisabled) rules += ' -_375toh_b-a';
+        else if (props.isFocusVisible) rules += ' -_375toh_b-g';
+        else if (props.isPressed) rules += ' -_375toh_b-g';
+        else if (props.isHovered) rules += ' -_375toh_b-g';
+        else rules += ' -_375toh_b-a';
     } else if (props.fillStyle === "fill") {
-        if (props.isDisabled) rules += ' bg';
+        if (props.isDisabled) rules += ' -_375toh_b-g';
         else if (props.variant === "negative") {
-            if (props.isPressed) rules += ' b_____L';
-            else if (props.isFocusVisible) rules += ' b_____L';
-            else if (props.isHovered) rules += ' b_____L';
-            else rules += ' b_____K';
+            if (props.isPressed) rules += ' -_375toh_b-_____Y';
+            else if (props.isFocusVisible) rules += ' -_375toh_b-_____Y';
+            else if (props.isHovered) rules += ' -_375toh_b-_____Y';
+            else rules += ' -_375toh_b-_____X';
         } else if (props.variant === "accent") {
-            if (props.isPressed) rules += ' b_____F';
-            else if (props.isFocusVisible) rules += ' b_____F';
-            else if (props.isHovered) rules += ' b_____F';
-            else rules += ' b_____E';
+            if (props.isPressed) rules += ' -_375toh_b-_____S';
+            else if (props.isFocusVisible) rules += ' -_375toh_b-_____S';
+            else if (props.isHovered) rules += ' -_375toh_b-_____S';
+            else rules += ' -_375toh_b-_____R';
         } else if (props.variant === "secondary") {
-            if (props.isPressed) rules += ' bh';
-            else if (props.isFocusVisible) rules += ' bh';
-            else if (props.isHovered) rules += ' bh';
-            else rules += ' bg';
+            if (props.isPressed) rules += ' -_375toh_b-h';
+            else if (props.isFocusVisible) rules += ' -_375toh_b-h';
+            else if (props.isHovered) rules += ' -_375toh_b-h';
+            else rules += ' -_375toh_b-g';
         } else if (props.variant === "primary") {
-            if (props.isPressed) rules += ' bo';
-            else if (props.isFocusVisible) rules += ' bo';
-            else if (props.isHovered) rules += ' bo';
-            else rules += ' bn';
+            if (props.isPressed) rules += ' -_375toh_b-o';
+            else if (props.isFocusVisible) rules += ' -_375toh_b-o';
+            else if (props.isHovered) rules += ' -_375toh_b-o';
+            else rules += ' -_375toh_b-n';
         }
     }
-    rules += ' -rwx0fg_e-b';
-    rules += ' _zb';
-    rules += ' __R-yksgrp';
-    if (props.size === "XL") rules += ' -_375tou_o-j';
-    else if (props.size === "L") rules += ' -_375tou_o-i';
-    else if (props.size === "S") rules += ' -_375tou_o-h';
-    else if (props.size === "XS") rules += ' -_375tou_o-g';
-    else rules += ' -_375tou_o-f';
-    if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
-    else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
-    if (props.fillStyle === "outline") rules += ' -_375tp1_v-c';
-    else if (props.fillStyle === "fill") rules += ' -_375tp1_v-a';
     return rules;
 };
 const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwardRef)(function Button(props1, ref) {
@@ -360,7 +313,8 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                 variant: variant,
                 fillStyle: fillStyle,
                 size: size,
-                staticColor: staticColor
+                staticColor: staticColor,
+                isStaticColor: !!staticColor
             }, props1.styles),
         children: /*#__PURE__*/ (0, $7BBHC$jsxs)((0, $7BBHC$Provider), {
             values: [
@@ -468,6 +422,7 @@ const $067ea9f64ccd4e8e$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $7BBHC$forwa
                 fillStyle: props.fillStyle || 'fill',
                 size: props.size || 'M',
                 staticColor: props.staticColor,
+                isStaticColor: !!props.staticColor,
                 isPending: false
             }, props.styles),
         children: /*#__PURE__*/ (0, $7BBHC$jsx)((0, $7BBHC$Provider), {

package/dist/Button.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps>({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    [iconOnly]: 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    [iconOnly]: 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    [iconOnly]: 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    staticColor: {\n      white: {\n        variant: {\n          primary: baseColor('transparent-white-800'),\n          secondary: baseColor('transparent-white-300')\n        },\n        isDisabled: 'transparent-white-300'\n      },\n      black: {\n        variant: {\n          primary: baseColor('transparent-black-800'),\n          secondary: baseColor('transparent-black-300')\n        },\n        isDisabled: 'transparent-black-300'\n      }\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: 'transparent'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-white-800'),\n              secondary: baseColor('transparent-white-100')\n            },\n            isDisabled: 'transparent-white-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-white-100',\n            isPressed: 'transparent-white-100',\n            isFocusVisible: 'transparent-white-100',\n            isDisabled: 'transparent'\n          }\n        }\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-black-800'),\n              secondary: baseColor('transparent-black-100')\n            },\n            isDisabled: 'transparent-black-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-black-100',\n            isPressed: 'transparent-black-100',\n            isFocusVisible: 'transparent-black-100',\n            isDisabled: 'transparent'\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'black',\n              secondary: baseColor('transparent-white-800')\n            }\n          },\n          outline: baseColor('transparent-white-800')\n        },\n        isDisabled: 'transparent-white-400'\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'white',\n              secondary: baseColor('transparent-black-800')\n            }\n          },\n          outline: baseColor('transparent-black-800')\n        },\n        isDisabled: 'transparent-black-400'\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isPending,\n    variant = 'primary',\n    fillStyle = 'fill',\n    size = 'M',\n    staticColor\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n\n    if (isPending) {\n      // Start timer when isPending is set to true.\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      // Exit loading state when isPending is set to false. */\n      setIsProgressVisible(false);\n    }\n    return () => {\n      // Clean up on unmount or when user removes isPending prop before entering loading state.\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        isDisabled: renderProps.isDisabled || isProgressVisible,\n        variant,\n        fillStyle,\n        size,\n        staticColor\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({\n              paddingY: '--labelPadding',\n              order: 1,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({\n              size: fontRelative(20),\n              marginStart: '--iconMargin',\n              flexShrink: 0,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n        {isPending &&\n          <div\n            className={style({\n              position: 'absolute',\n              top: '[50%]',\n              left: '[50%]',\n              transform: 'translate(-50%, -50%)',\n              opacity: {\n                default: 0,\n                isProgressVisible: 1\n              }\n            })({isProgressVisible, isPending})}>\n            <ProgressCircle\n              isIndeterminate\n              aria-label={stringFormatter.format('button.pending')}\n              size=\"S\"\n              staticColor={staticColor}\n              styles={style({\n                size: {\n                  size: {\n                    S: 14,\n                    M: 18,\n                    L: 20,\n                    XL: 24\n                  }\n                }\n              })({size})} />\n          </div>\n        }\n      </Provider>\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor,\n        isPending: false\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({paddingY: '--labelPadding', order: 1}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.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 {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  position: 'relative',\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    [iconOnly]: 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    [iconOnly]: 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    [iconOnly]: 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    isStaticColor: {\n      variant: {\n        primary: baseColor('transparent-overlay-800'),\n        secondary: baseColor('transparent-overlay-300')\n      },\n      isDisabled: 'transparent-overlay-300'\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: 'transparent'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100')\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: 'transparent'\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800')\n          }\n        },\n        outline: baseColor('transparent-overlay-800')\n      },\n      isDisabled: 'transparent-overlay-400'\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isPending,\n    variant = 'primary',\n    fillStyle = 'fill',\n    size = 'M',\n    staticColor\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n\n    if (isPending) {\n      // Start timer when isPending is set to true.\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      // Exit loading state when isPending is set to false. */\n      setIsProgressVisible(false);\n    }\n    return () => {\n      // Clean up on unmount or when user removes isPending prop before entering loading state.\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        isDisabled: renderProps.isDisabled || isProgressVisible,\n        variant,\n        fillStyle,\n        size,\n        staticColor,\n        isStaticColor: !!staticColor\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({\n              paddingY: '--labelPadding',\n              order: 1,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({\n              size: fontRelative(20),\n              marginStart: '--iconMargin',\n              flexShrink: 0,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n        {isPending &&\n          <div\n            className={style({\n              position: 'absolute',\n              top: '[50%]',\n              left: '[50%]',\n              transform: 'translate(-50%, -50%)',\n              opacity: {\n                default: 0,\n                isProgressVisible: 1\n              }\n            })({isProgressVisible, isPending})}>\n            <ProgressCircle\n              isIndeterminate\n              aria-label={stringFormatter.format('button.pending')}\n              size=\"S\"\n              staticColor={staticColor}\n              styles={style({\n                size: {\n                  size: {\n                    S: 14,\n                    M: 18,\n                    L: 20,\n                    XL: 24\n                  }\n                }\n              })({size})} />\n          </div>\n        }\n      </Provider>\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor,\n        isPending: false\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({paddingY: '--labelPadding', order: 1}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.mjs.map"}

package/dist/Card.cjs

@@ -91,9 +91,9 @@ let $230078a1c4ce81d8$var$card = function anonymous(props, overrides) {
     if (props.size === "S") rules += ' _yc';
     else if (props.size === "XS") rules += ' _yc';
     else rules += ' _yd';
-    rules += ' -_1de2x0q_b-a_____w';
+    rules += ' -_1de2x0q_b-a_____J';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______x';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';
@@ -171,7 +171,7 @@ let $230078a1c4ce81d8$var$card = function anonymous(props, overrides) {
     if (props.variant === "quiet") rules += ' _La';
     else if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -256,7 +256,7 @@ let $230078a1c4ce81d8$var$preview = function anonymous(props) {
     if (props.isQuiet) {
         if (props.isFocusVisible) rules += ' _Lb';
     } else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';

package/dist/Card.css

@@ -3,7 +3,7 @@
     flex-direction: column;
   }
 
-  .-_1de2x0q_b-______k {
+  .-_1de2x0q_b-______x {
     --s2-container-bg: var(--lightningcss-light, #fff) var(--lightningcss-dark, #222);
   }
 
@@ -790,7 +790,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .-_1de2x0q_b-a_____w {
+    .-_1de2x0q_b-a_____J {
       --s2-container-bg: ButtonFace;
     }
 
@@ -798,7 +798,7 @@
       box-shadow: 0 0 0 1px buttonborder;
     }
 
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
   }

package/dist/Card.mjs

@@ -78,9 +78,9 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     if (props.size === "S") rules += ' _yc';
     else if (props.size === "XS") rules += ' _yc';
     else rules += ' _yd';
-    rules += ' -_1de2x0q_b-a_____w';
+    rules += ' -_1de2x0q_b-a_____J';
     if (props.variant === "secondary") rules += ' -_1de2x0q_b-e';
-    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______k';
+    else if (props.variant === "primary") rules += ' -_1de2x0q_b-______x';
     if (props.variant === "quiet") rules += ' ba';
     else if (props.variant === "tertiary") rules += ' ba';
     else rules += ' b-1de2x0q';
@@ -158,7 +158,7 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     if (props.variant === "quiet") rules += ' _La';
     else if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -243,7 +243,7 @@ let $68e4e6fe083e22fd$var$preview = function anonymous(props) {
     if (props.isQuiet) {
         if (props.isFocusVisible) rules += ' _Lb';
     } else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';

package/dist/CardView.cjs

@@ -394,7 +394,7 @@ const $1aaf8931044a97bd$var$cardViewStyles = function anonymous(props, overrides
     if (props.isEmpty) {
         if (props.isFocusVisible) rules += ' _Lb';
     } else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3hmpw';

package/dist/CardView.css

@@ -52,7 +52,7 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
   }

package/dist/CardView.mjs

@@ -387,7 +387,7 @@ const $bbcff092fe610ff3$var$cardViewStyles = function anonymous(props, overrides
     if (props.isEmpty) {
         if (props.isFocusVisible) rules += ' _Lb';
     } else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3hmpw';

package/dist/Checkbox.cjs

@@ -82,7 +82,7 @@ const $af04e099a53d3e85$var$wrapper = function anonymous(props, overrides) {
     rules += ' _f-1x99dlob';
     rules += ' _fa';
     if (props.isDisabled) {
-        rules += ' aa_____B';
+        rules += ' aa_____O';
         rules += ' aj';
     } else {
         if (props.isPressed) rules += ' ao';
@@ -103,7 +103,7 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
     let rules = " .";
     if (props.isFocusVisible) rules += ' _Lb';
     else rules += ' _La';
-    rules += ' da_____z';
+    rules += ' da_____M';
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
@@ -135,16 +135,16 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
     rules += ' _zb';
     if (props.isSelected) {
         if (props.isDisabled) {
-            rules += ' ba_____B';
+            rules += ' ba_____O';
             rules += ' bj';
         } else if (props.isInvalid) {
-            rules += ' ba_____C';
+            rules += ' ba_____P';
             if (props.isPressed) rules += ' bP';
             else if (props.isFocusVisible) rules += ' bP';
             else if (props.isHovered) rules += ' bP';
             else rules += ' bO';
         } else {
-            rules += ' ba_____z';
+            rules += ' ba_____M';
             if (props.isEmphasized) {
                 if (props.isPressed) rules += ' bz';
                 else if (props.isFocusVisible) rules += ' bz';
@@ -158,21 +158,21 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
             }
         }
     } else {
-        rules += ' ba_____u';
+        rules += ' ba_____H';
         rules += ' bd';
     }
     if (props.isSelected) rules += ' ca';
     else if (props.isDisabled) {
-        rules += ' ca_____B';
+        rules += ' ca_____O';
         rules += ' cj';
     } else if (props.isInvalid) {
-        rules += ' ca_____C';
+        rules += ' ca_____P';
         if (props.isPressed) rules += ' cQ';
         else if (props.isFocusVisible) rules += ' cP';
         else if (props.isHovered) rules += ' cP';
         else rules += ' cO';
     } else {
-        rules += ' ca_____v';
+        rules += ' ca_____I';
         if (props.isPressed) rules += ' co';
         else if (props.isFocusVisible) rules += ' co';
         else if (props.isHovered) rules += ' co';
@@ -180,7 +180,7 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
     }
     return rules;
 };
-const $af04e099a53d3e85$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a_____Y";
+const $af04e099a53d3e85$export$2c99b98b77550cb4 = " . -rwx0fg_e-B -rwx0fg_e-a______b";
 const $af04e099a53d3e85$var$iconSize = {
     S: 'XS',
     M: 'S',

package/dist/Checkbox.css

@@ -332,43 +332,43 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .aa_____B {
+    .aa_____O {
       color: graytext;
     }
 
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
 
-    .ba_____u {
+    .ba_____H {
       background-color: background;
     }
 
-    .ba_____z {
+    .ba_____M {
       background-color: highlight;
     }
 
-    .ba_____C {
+    .ba_____P {
       background-color: mark;
     }
 
-    .ba_____B {
+    .ba_____O {
       background-color: graytext;
     }
 
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .ca_____C {
+    .ca_____P {
       border-color: mark;
     }
 
-    .ca_____B {
+    .ca_____O {
       border-color: graytext;
     }
 
-    .-rwx0fg_e-a_____Y {
+    .-rwx0fg_e-a______b {
       --iconPrimary: HighlightText;
     }
   }