@react-spectrum/s2 3.0.0-nightly-fd7075c5f-250128 → 3.0.0-nightly-e3ed3c7f6-250130

package/dist/Button.css.map

@@ -1 +1 @@
-{"mappings":"ACmEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {baseColor, focusRing, fontRelative, linearGradient, 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' | 'premium' | 'genai',\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    variant: {\n      premium: 0,\n      genai: 0\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          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        variant: {\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: {\n          default: 'transparent',\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          }\n        }\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100'),\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          variant: {\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            }\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          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        variant: {\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800'),\n            premium: 'white',\n            genai: 'white'\n          }\n        },\n        outline: {\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          default: baseColor('transparent-overlay-800')\n        }\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// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: '[inherit]',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n      },\n      genai: {\n        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\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      {(renderProps) => (<>\n        {variant === 'genai' || variant === 'premium' \n          ? (\n            <span\n              className={gradient({\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              })} />\n             )\n          : null}\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      </>)}\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.css.map"}
+{"mappings":"ACmEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\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 {baseColor, focusRing, fontRelative, linearGradient, 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' | 'premium' | 'genai',\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    variant: {\n      premium: 0,\n      genai: 0\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          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        variant: {\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: {\n          default: 'transparent',\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          }\n        }\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100'),\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          variant: {\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            }\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          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        variant: {\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800'),\n            premium: 'white',\n            genai: 'white'\n          }\n        },\n        outline: {\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          default: baseColor('transparent-overlay-800')\n        }\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// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: '[inherit]',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n      },\n      genai: {\n        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\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      {(renderProps) => (<>\n        {variant === 'genai' || variant === 'premium' \n          ? (\n            <span\n              className={gradient({\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              })} />\n             )\n          : null}\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      </>)}\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.css.map"}

package/dist/Button.mjs

@@ -47,60 +47,60 @@ const $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $7BBHC$creat
 const $067ea9f64ccd4e8e$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     let rules = " .";
-    let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
+    let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q)[^\s]+/g) || [];
     rules += matches.join('');
-    let $V = false;
-    let $q = false;
-    let $l = false;
+    let $Y = false;
+    let $p = false;
+    let $k = false;
     for (let p of matches){
-        if (/^\s*V/.test(p)) $V = true;
-        if (/^\s*q/.test(p)) $q = true;
-        if (/^\s*l/.test(p)) $l = true;
+        if (/^\s*Y/.test(p)) $Y = true;
+        if (/^\s*p/.test(p)) $p = true;
+        if (/^\s*k/.test(p)) $k = true;
     }
-    if (props.isFocusVisible) rules += ' _Mb';
-    else rules += ' _Ma';
-    rules += ' da_____M';
-    if (props.isStaticColor) rules += ' d_____G';
-    else rules += ' dx';
-    rules += ' _Oc';
-    rules += ' _N-3t1z';
+    if (props.isFocusVisible) rules += ' _Pb';
+    else rules += ' _Pa';
+    rules += ' ca_____M';
+    if (props.isStaticColor) rules += ' c_____G';
+    else rules += ' cx';
+    rules += ' _Rc';
+    rules += ' _Q-3t1z';
     if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
     else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
-    if (!$V) rules += ' Vc';
-    rules += ' _0d';
-    rules += ' _2-soocicc';
-    rules += ' _2d';
+    if (!$Y) rules += ' Yc';
     rules += ' _3d';
-    rules += ' _ka';
-    rules += ' jbH';
-    rules += ' jG';
-    rules += ' _d-bc1l9oh';
-    rules += ' _d-1uotwbwg';
-    rules += ' _d-eo0c6sf';
-    rules += ' _d-enzzrge';
-    rules += ' _d-enzykdd';
-    rules += ' _d-enzwzjc';
-    rules += ' _d-enzrfpb';
-    rules += ' _da';
+    rules += ' _5-soocicc';
+    rules += ' _5d';
+    rules += ' _6d';
+    rules += ' _na';
+    rules += ' ibH';
+    rules += ' iG';
+    rules += ' _g-bc1l9oh';
+    rules += ' _g-1uotwbwg';
+    rules += ' _g-eo0c6sf';
+    rules += ' _g-enzzrge';
+    rules += ' _g-enzykdd';
+    rules += ' _g-enzwzjc';
+    rules += ' _g-enzrfpb';
+    rules += ' _ga';
     if (props.size === "XL") {
-        rules += ' _ebj';
-        rules += ' _ei';
+        rules += ' _hbj';
+        rules += ' _hi';
     } else if (props.size === "L") {
-        rules += ' _ebh';
-        rules += ' _eg';
+        rules += ' _hbh';
+        rules += ' _hg';
     } else if (props.size === "S") {
-        rules += ' _ebd';
-        rules += ' _ec';
+        rules += ' _hbd';
+        rules += ' _hc';
     } else if (props.size === "XS") {
-        rules += ' _ebb';
-        rules += ' _ea';
+        rules += ' _hbb';
+        rules += ' _ha';
     } else {
-        rules += ' _ebf';
-        rules += ' _ee';
+        rules += ' _hbf';
+        rules += ' _he';
     }
-    rules += ' _fd';
-    rules += ' _g-1x99dlob';
-    rules += ' _ga';
+    rules += ' _id';
+    rules += ' _j-1x99dlob';
+    rules += ' _ja';
     if (props.fillStyle === "outline") {
         if (props.isDisabled) rules += ' aa_____O';
         else rules += ' aa_____K';
@@ -152,91 +152,175 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
             else rules += ' an';
         } else if (props.variant === "primary") rules += ' ad';
     }
-    rules += ' __Ea';
-    rules += ' o-375tou';
-    if (!$q) {
-        if (props.size === "XL") rules += ' q-soocicj';
-        else if (props.size === "L") rules += ' q-soocici';
-        else if (props.size === "S") rules += ' q-soocich';
-        else if (props.size === "XS") rules += ' q-soocicg';
-        else rules += ' q-soocicf';
+    rules += ' __Ha';
+    rules += ' n-375tot';
+    if (!$p) {
+        if (props.size === "XL") rules += ' p-soocicj';
+        else if (props.size === "L") rules += ' p-soocici';
+        else if (props.size === "S") rules += ' p-soocich';
+        else if (props.size === "XS") rules += ' p-soocicg';
+        else rules += ' p-soocicf';
     }
-    rules += ' _wg';
-    rules += ' _xg';
-    rules += ' _yg';
     rules += ' _zg';
-    rules += ' __oa';
-    if (!$l) rules += ' le';
-    rules += ' _md';
-    rules += ' C-soocica';
-    rules += ' CJ';
-    rules += ' D-soocica';
-    rules += ' DJ';
-    rules += ' Ea';
-    rules += ' Fa';
-    rules += ' _c-soocicb';
-    rules += ' _Pa';
-    rules += ' _R-375x7f';
+    rules += ' _Ag';
+    rules += ' _Bg';
+    rules += ' _Cg';
+    rules += ' __ra';
+    if (!$k) rules += ' ke';
+    rules += ' _pd';
+    rules += ' F-soocica';
+    rules += ' FJ';
+    rules += ' G-soocica';
+    rules += ' GJ';
+    rules += ' Ha';
+    rules += ' Ia';
+    rules += ' _f-soocicb';
     rules += ' _Sa';
-    rules += ' wa';
+    rules += ' _U-375x7f';
+    rules += ' _Va';
+    rules += ' za';
+    rules += ' t-375toz';
     rules += ' u-375tp0';
-    rules += ' v-375tp1';
+    if (props.variant === "genai") rules += ' ra';
+    else if (props.variant === "premium") rules += ' ra';
+    else if (props.fillStyle === "outline") rules += ' rc';
+    else if (props.fillStyle === "fill") rules += ' ra';
     if (props.variant === "genai") rules += ' sa';
     else if (props.variant === "premium") rules += ' sa';
     else if (props.fillStyle === "outline") rules += ' sc';
     else if (props.fillStyle === "fill") rules += ' sa';
-    if (props.variant === "genai") rules += ' ta';
-    else if (props.variant === "premium") rules += ' ta';
-    else if (props.fillStyle === "outline") rules += ' tc';
-    else if (props.fillStyle === "fill") rules += ' ta';
-    rules += ' -_1gogtue_E--1dbqcch';
-    rules += ' -oelgqu_A--soocica';
-    rules += ' -oelgqu_A--177861o';
-    if (props.isDisabled) rules += ' ca_____O';
-    else if (props.isHovered) rules += ' ca_____M';
-    else rules += ' ca_____I';
+    rules += ' -_1gogtue_H--1dbqcch';
+    rules += ' -oelgqu_D--soocica';
+    rules += ' -oelgqu_D--177861o';
+    if (props.isDisabled) rules += ' xa_____O';
+    else if (props.isHovered) rules += ' xa_____M';
+    else rules += ' xa_____I';
     if (props.isStaticColor) {
-        if (props.isDisabled) rules += ' c_____z';
+        if (props.isDisabled) rules += ' x_____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_____z';
+            if (props.isPressed) rules += ' x_____A';
+            else if (props.isFocusVisible) rules += ' x_____A';
+            else if (props.isHovered) rules += ' x_____A';
+            else rules += ' x_____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 += ' x_____F';
+            else if (props.isFocusVisible) rules += ' x_____F';
+            else if (props.isHovered) rules += ' x_____F';
+            else rules += ' x_____E';
         }
-    } else if (props.isDisabled) rules += ' ci';
+    } else if (props.isDisabled) rules += ' xi';
     else if (props.variant === "secondary") {
-        if (props.isPressed) rules += ' cj';
-        else if (props.isFocusVisible) rules += ' cj';
-        else if (props.isHovered) rules += ' cj';
-        else rules += ' ci';
+        if (props.isPressed) rules += ' xj';
+        else if (props.isFocusVisible) rules += ' xj';
+        else if (props.isHovered) rules += ' xj';
+        else rules += ' xi';
     } else if (props.variant === "primary") {
-        if (props.isPressed) rules += ' co';
-        else if (props.isFocusVisible) rules += ' co';
-        else if (props.isHovered) rules += ' co';
-        else rules += ' cn';
+        if (props.isPressed) rules += ' xo';
+        else if (props.isFocusVisible) rules += ' xo';
+        else if (props.isHovered) rules += ' xo';
+        else rules += ' xn';
+    }
+    if (props.isDisabled) rules += ' ya_____O';
+    else if (props.isHovered) rules += ' ya_____M';
+    else rules += ' ya_____I';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' y_____z';
+        else if (props.variant === "secondary") {
+            if (props.isPressed) rules += ' y_____A';
+            else if (props.isFocusVisible) rules += ' y_____A';
+            else if (props.isHovered) rules += ' y_____A';
+            else rules += ' y_____z';
+        } else if (props.variant === "primary") {
+            if (props.isPressed) rules += ' y_____F';
+            else if (props.isFocusVisible) rules += ' y_____F';
+            else if (props.isHovered) rules += ' y_____F';
+            else rules += ' y_____E';
+        }
+    } else if (props.isDisabled) rules += ' yi';
+    else if (props.variant === "secondary") {
+        if (props.isPressed) rules += ' yj';
+        else if (props.isFocusVisible) rules += ' yj';
+        else if (props.isHovered) rules += ' yj';
+        else rules += ' yi';
+    } else if (props.variant === "primary") {
+        if (props.isPressed) rules += ' yo';
+        else if (props.isFocusVisible) rules += ' yo';
+        else if (props.isHovered) rules += ' yo';
+        else rules += ' yn';
+    }
+    if (props.isDisabled) rules += ' va_____O';
+    else if (props.isHovered) rules += ' va_____M';
+    else rules += ' va_____I';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' v_____z';
+        else if (props.variant === "secondary") {
+            if (props.isPressed) rules += ' v_____A';
+            else if (props.isFocusVisible) rules += ' v_____A';
+            else if (props.isHovered) rules += ' v_____A';
+            else rules += ' v_____z';
+        } else if (props.variant === "primary") {
+            if (props.isPressed) rules += ' v_____F';
+            else if (props.isFocusVisible) rules += ' v_____F';
+            else if (props.isHovered) rules += ' v_____F';
+            else rules += ' v_____E';
+        }
+    } else if (props.isDisabled) rules += ' vi';
+    else if (props.variant === "secondary") {
+        if (props.isPressed) rules += ' vj';
+        else if (props.isFocusVisible) rules += ' vj';
+        else if (props.isHovered) rules += ' vj';
+        else rules += ' vi';
+    } else if (props.variant === "primary") {
+        if (props.isPressed) rules += ' vo';
+        else if (props.isFocusVisible) rules += ' vo';
+        else if (props.isHovered) rules += ' vo';
+        else rules += ' vn';
+    }
+    if (props.isDisabled) rules += ' wa_____O';
+    else if (props.isHovered) rules += ' wa_____M';
+    else rules += ' wa_____I';
+    if (props.isStaticColor) {
+        if (props.isDisabled) rules += ' w_____z';
+        else if (props.variant === "secondary") {
+            if (props.isPressed) rules += ' w_____A';
+            else if (props.isFocusVisible) rules += ' w_____A';
+            else if (props.isHovered) rules += ' w_____A';
+            else rules += ' w_____z';
+        } else if (props.variant === "primary") {
+            if (props.isPressed) rules += ' w_____F';
+            else if (props.isFocusVisible) rules += ' w_____F';
+            else if (props.isHovered) rules += ' w_____F';
+            else rules += ' w_____E';
+        }
+    } else if (props.isDisabled) rules += ' wi';
+    else if (props.variant === "secondary") {
+        if (props.isPressed) rules += ' wj';
+        else if (props.isFocusVisible) rules += ' wj';
+        else if (props.isHovered) rules += ' wj';
+        else rules += ' wi';
+    } else if (props.variant === "primary") {
+        if (props.isPressed) rules += ' wo';
+        else if (props.isFocusVisible) rules += ' wo';
+        else if (props.isHovered) rules += ' wo';
+        else rules += ' wn';
     }
     rules += ' b-375toh';
-    rules += ' -rwx0fg_e-b';
-    rules += ' _Ab';
-    rules += ' __S-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';
+    rules += ' -rwx0fg_d-b';
+    rules += ' _Db';
+    rules += ' __V-yksgrp';
+    if (props.size === "XL") rules += ' -_375tot_n-j';
+    else if (props.size === "L") rules += ' -_375tot_n-i';
+    else if (props.size === "S") rules += ' -_375tot_n-h';
+    else if (props.size === "XS") rules += ' -_375tot_n-g';
+    else rules += ' -_375tot_n-f';
+    if (props.variant === "genai") rules += ' -_375toz_t-a';
+    else if (props.variant === "premium") rules += ' -_375toz_t-a';
+    else if (props.fillStyle === "outline") rules += ' -_375toz_t-c';
+    else if (props.fillStyle === "fill") rules += ' -_375toz_t-a';
     if (props.variant === "genai") rules += ' -_375tp0_u-a';
     else if (props.variant === "premium") rules += ' -_375tp0_u-a';
     else if (props.fillStyle === "outline") rules += ' -_375tp0_u-c';
     else if (props.fillStyle === "fill") rules += ' -_375tp0_u-a';
-    if (props.variant === "genai") rules += ' -_375tp1_v-a';
-    else if (props.variant === "premium") rules += ' -_375tp1_v-a';
-    else 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 += ' -_375toh_b-a_____O';
@@ -315,34 +399,34 @@ const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
 // https://bugs.webkit.org/show_bug.cgi?id=285622
 const $067ea9f64ccd4e8e$var$gradient = function anonymous(props) {
     let rules = " .";
-    rules += ' Va';
     rules += ' Ya';
+    rules += ' _ba';
+    rules += ' _da';
+    rules += ' Za';
     rules += ' _aa';
-    rules += ' Wa';
-    rules += ' Xa';
-    rules += ' __R-3hmpv';
-    rules += ' _Pa';
-    rules += ' _R-375x7f';
+    rules += ' __U-3hmpv';
     rules += ' _Sa';
-    rules += ' _w-17zqamw';
-    rules += ' _x-17zqamw';
-    rules += ' _y-17zqamw';
+    rules += ' _U-375x7f';
+    rules += ' _Va';
     rules += ' _z-17zqamw';
-    rules += ' _Ca-qey189';
-    if (props.isDisabled) rules += ' _C-qey189';
+    rules += ' _A-17zqamw';
+    rules += ' _B-17zqamw';
+    rules += ' _C-17zqamw';
+    rules += ' _Fa-qey189';
+    if (props.isDisabled) rules += ' _F-qey189';
     else if (props.variant === "genai") {
-        if (props.isFocusVisible) rules += ' _C-x40uwg';
-        else if (props.isPressed) rules += ' _C-x40uwg';
-        else if (props.isHovered) rules += ' _C-x40uwg';
-        else rules += ' _C-17z6g7s';
+        if (props.isFocusVisible) rules += ' _F-x40uwg';
+        else if (props.isPressed) rules += ' _F-x40uwg';
+        else if (props.isHovered) rules += ' _F-x40uwg';
+        else rules += ' _F-17z6g7s';
     } else if (props.variant === "premium") {
-        if (props.isFocusVisible) rules += ' _C-zh0yy1';
-        else if (props.isPressed) rules += ' _C-zh0yy1';
-        else if (props.isHovered) rules += ' _C-zh0yy1';
-        else rules += ' _C-1bwg29';
+        if (props.isFocusVisible) rules += ' _F-zh0yy1';
+        else if (props.isPressed) rules += ' _F-zh0yy1';
+        else if (props.isHovered) rules += ' _F-zh0yy1';
+        else rules += ' _F-1bwg29';
     }
-    if (props.variant === "genai") rules += ' _Ba';
-    else if (props.variant === "premium") rules += ' _Ba';
+    if (props.variant === "genai") rules += ' _Ea';
+    else if (props.variant === "premium") rules += ' _Ea';
     return rules;
 };
 const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwardRef)(function Button(props1, ref) {
@@ -405,11 +489,11 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                                 {
                                     styles: function anonymous(props) {
                                         let rules = " .";
-                                        rules += ' E-1gogtue';
-                                        rules += ' F-1gogtue';
-                                        rules += ' __B-3t1y';
-                                        if (props.isProgressVisible) rules += ' _L-3t1x';
-                                        else rules += ' _L-3t1y';
+                                        rules += ' H-1gogtue';
+                                        rules += ' I-1gogtue';
+                                        rules += ' __E-3t1y';
+                                        if (props.isProgressVisible) rules += ' _O-3t1x';
+                                        else rules += ' _O-3t1y';
                                         return rules;
                                     }({
                                         isProgressVisible: isProgressVisible
@@ -423,16 +507,16 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                                 {
                                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                         slot: 'icon',
-                                        styles: " __B-3t1x"
+                                        styles: " __E-3t1x"
                                     }),
                                     styles: function anonymous(props) {
                                         let rules = " .";
-                                        rules += ' l-1sthc3k';
                                         rules += ' k-1sthc3k';
-                                        rules += ' y-oelgqu';
-                                        rules += ' _9-3t1x';
-                                        if (props.isProgressVisible) rules += ' _L-3t1x';
-                                        else rules += ' _L-3t1y';
+                                        rules += ' j-1sthc3k';
+                                        rules += ' B-oelgqu';
+                                        rules += ' __c-3t1x';
+                                        if (props.isProgressVisible) rules += ' _O-3t1x';
+                                        else rules += ' _O-3t1y';
                                         return rules;
                                     }({
                                         isProgressVisible: isProgressVisible
@@ -447,12 +531,12 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                             isPending && /*#__PURE__*/ (0, $7BBHC$jsx)("div", {
                                 className: function anonymous(props) {
                                     let rules = " .";
-                                    rules += ' Va';
-                                    rules += ' Y-3760fj';
-                                    rules += ' Z-3760fj';
-                                    rules += ' U-1uu3e5e';
-                                    if (props.isProgressVisible) rules += ' _L-3t1y';
-                                    else rules += ' _L-3t1x';
+                                    rules += ' Ya';
+                                    rules += ' _b-3760fj';
+                                    rules += ' _c-3760fj';
+                                    rules += ' X-1uu3e5e';
+                                    if (props.isProgressVisible) rules += ' _O-3t1y';
+                                    else rules += ' _O-3t1x';
                                     return rules;
                                 }({
                                     isProgressVisible: isProgressVisible,
@@ -465,14 +549,14 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                                     staticColor: staticColor,
                                     styles: function anonymous(props) {
                                         let rules = " .";
-                                        if (props.size === "XL") rules += ' lM';
-                                        else if (props.size === "L") rules += ' lI';
-                                        else if (props.size === "M") rules += ' lG';
-                                        else if (props.size === "S") rules += ' lC';
                                         if (props.size === "XL") rules += ' kM';
                                         else if (props.size === "L") rules += ' kI';
                                         else if (props.size === "M") rules += ' kG';
                                         else if (props.size === "S") rules += ' kC';
+                                        if (props.size === "XL") rules += ' jM';
+                                        else if (props.size === "L") rules += ' jI';
+                                        else if (props.size === "M") rules += ' jG';
+                                        else if (props.size === "S") rules += ' jC';
                                         return rules;
                                     }({
                                         size: size
@@ -514,7 +598,7 @@ const $067ea9f64ccd4e8e$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $7BBHC$forwa
                 [
                     (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                     {
-                        styles: " E-1gogtue F-1gogtue __B-3t1y",
+                        styles: " H-1gogtue I-1gogtue __E-3t1y",
                         // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
                         'data-rsp-slot': 'text'
                     }
@@ -524,9 +608,9 @@ const $067ea9f64ccd4e8e$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $7BBHC$forwa
                     {
                         render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                             slot: 'icon',
-                            styles: " __B-3t1x"
+                            styles: " __E-3t1x"
                         }),
-                        styles: " l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
+                        styles: " k-1sthc3k j-1sthc3k B-oelgqu __c-3t1x"
                     }
                 ]
             ],