@react-spectrum/s2 0.6.0 → 0.7.0

package/dist/Button.cjs.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, 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.cjs.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, 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<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<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.cjs.map"}

package/dist/Button.css

@@ -624,8 +624,6 @@
   }
 }
 
-@layer UNSAFE_overrides;
-
 @layer _.b.a {
   @media (forced-colors: active) {
     .da_____M {
@@ -727,8 +725,4 @@
   inherits: false;
   initial-value: #0000;
 }
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
 /*# sourceMappingURL=Button.css.map */

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;;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;;;;;;AAlBP","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;;;;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<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<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

@@ -423,7 +423,7 @@ const $067ea9f64ccd4e8e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $7BBHC$forwa
                                 {
                                     render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                                         slot: 'icon',
-                                        styles: " . __B-3t1x"
+                                        styles: " __B-3t1x"
                                     }),
                                     styles: function anonymous(props) {
                                         let rules = " .";
@@ -514,7 +514,7 @@ const $067ea9f64ccd4e8e$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $7BBHC$forwa
                 [
                     (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                     {
-                        styles: " . E-1gogtue F-1gogtue __B-3t1y",
+                        styles: " E-1gogtue F-1gogtue __B-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 +524,9 @@ const $067ea9f64ccd4e8e$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $7BBHC$forwa
                     {
                         render: (0, $1f4b04be3f24aae3$export$9d7e2342a7e53afa)({
                             slot: 'icon',
-                            styles: " . __B-3t1x"
+                            styles: " __B-3t1x"
                         }),
-                        styles: " . l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
+                        styles: " l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
                     }
                 ]
             ],

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, 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.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, 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<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<Partial<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.mjs.map"}

package/dist/ButtonGroup.cjs

@@ -112,7 +112,7 @@ const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react
     });
     if (props.isHidden) return null;
     let context = {
-        styles: " . _9-3t1x",
+        styles: " _9-3t1x",
         size: size,
         isDisabled: isDisabled
     };

package/dist/ButtonGroup.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACX,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,oCAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,2CAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;QACC,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACX,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,oCAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,wBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,qCAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAsB;IACxC,CAAA,GAAA,qCAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,2CAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gCAAC;QACC,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,uCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,2CAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}

package/dist/ButtonGroup.css

@@ -60,9 +60,5 @@
   }
 }
 
-@layer _.b, UNSAFE_overrides;
-
-.\.:not(#a#b) {
-  all: revert-layer;
-}
+@layer _.b;
 /*# sourceMappingURL=ButtonGroup.css.map */

package/dist/ButtonGroup.css.map

@@ -1 +1 @@
-{"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGK;;;;;AAvGL;;AAuGK","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}
+{"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAuGK;;;;;AAvGL","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}

package/dist/ButtonGroup.mjs

@@ -105,7 +105,7 @@ const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwa
     });
     if (props.isHidden) return null;
     let context = {
-        styles: " . _9-3t1x",
+        styles: " _9-3t1x",
         size: size,
         isDisabled: isDisabled
     };

package/dist/ButtonGroup.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACX,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;QACC,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+E,CAAC;AAE9H,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,QACF,OAAO,kBACP,cAAc,qBACd,QAAQ,mBACR,QAAQ,cACR,UAAU,EACX,GAAG;IAEJ,IAAI,CAAC,aAAa,eAAe,GAAG,CAAA,GAAA,qBAAa,EAAE;IAEnD,IAAI,mBAAmB,CAAA,GAAA,kBAAU,EAAE;QACjC,IAAI,qBAAqB;YACvB,IAAI,OAAO,OAAO,IAAI,gBAAgB,cAAc;gBAClD,IAAI,sBAAsB,MAAM,IAAI,CAAC,OAAO,OAAO,CAAC,QAAQ;gBAC5D,IAAI,OAAO,OAAO,OAAO,CAAC,WAAW,GAAG,GAAG,qCAAqC;gBAChF,0EAA0E;gBAC1E,0EAA0E;gBAC1E,IAAI,oBAAoB,IAAI,CAAC,CAAA,QAAS,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,MAAM,WAAW,GAAG,OACnG,OAAO;gBAET,OAAO;YACT;QACF;QACA,IAAI,gBAAgB,cAClB,eAAe;YACb,uCAAuC;YACvC,MAAM;YAEN,4CAA4C;YAC5C,MAAM;QACR;IAEJ,uDAAuD;IACvD,GAAG;QAAC;QAAQ;QAAa;QAAgB;KAAS;IAElD,mDAAmD;IACnD,8HAA8H;IAC9H,CAAA,GAAA,sBAAc,EAAE;QACd;IACF,GAAG;QAAC;KAAiB;IAErB,wKAAwK;IACxK,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,OAAO,OAAO,EAChB,OAAO,OAAO,GAAG,OAAO,OAAO,CAAC,aAAa;IAEjD,uDAAuD;IACvD,GAAG;QAAC,OAAO,OAAO;KAAC;IACnB,CAAA,GAAA,wBAAgB,EAAE;QAAC,KAAK;QAAQ,UAAU;IAAgB;IAE1D,IAAI,AAAC,MAAkC,QAAQ,EAC7C,OAAO;IAGT,IAAI,UAAU;QAAC,MAAM;cAA0B;oBAAM;IAAU;IAC/D,qBACE,gBAAC;QACC,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,kCAAY;mBACtD;YACA,aAAa,gBAAgB,cAAc,cAAc,aAAa;kBACtE;QACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAY;oBAAG;iBAAQ;gBACxB;oBAAC,CAAA,GAAA,yCAAgB;oBAAG;iBAAQ;aAC7B;sBACA;;;AAIT","sources":["packages/@react-spectrum/s2/src/ButtonGroup.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 {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nexport const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonGroupContext);\n  let domRef = useDOMRef(ref);\n  let {\n    size = 'M',\n    orientation = 'horizontal',\n    align = 'start',\n    children,\n    isDisabled\n  } = props;\n\n  let [hasOverflow, setHasOverflow] = useValueEffect(false);\n\n  let checkForOverflow = useCallback(() => {\n    let computeHasOverflow = () => {\n      if (domRef.current && orientation === 'horizontal') {\n        let buttonGroupChildren = Array.from(domRef.current.children) as HTMLElement[];\n        let maxX = domRef.current.offsetWidth + 1; // + 1 to account for rounding errors\n        // If any buttons have negative X positions (align=\"end\") or extend beyond\n        // the width of the button group (align=\"start\"), then switch to vertical.\n        if (buttonGroupChildren.some(child => child.offsetLeft < 0 || child.offsetLeft + child.offsetWidth > maxX)) {\n          return true;\n        }\n        return false;\n      }\n    };\n    if (orientation === 'horizontal') {\n      setHasOverflow(function* () {\n        // Force to horizontal for measurement.\n        yield false;\n\n        // Measure, and update if there is overflow.\n        yield computeHasOverflow();\n      });\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef, orientation, setHasOverflow, children]);\n\n  // There are two main reasons we need to remeasure:\n  // 1. Internal changes: Check for initial overflow or when orientation/scale/children change (from checkForOverflow dep array)\n  useLayoutEffect(() => {\n    checkForOverflow();\n  }, [checkForOverflow]);\n\n  // 2. External changes: buttongroup won't change size due to any parents changing size, so listen to its container for size changes to figure out if we should remeasure\n  let parent = useRef<HTMLElement | null>(null);\n  useLayoutEffect(() => {\n    if (domRef.current) {\n      parent.current = domRef.current.parentElement as HTMLElement;\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [domRef.current]);\n  useResizeObserver({ref: parent, onResize: checkForOverflow});\n\n  if ((props as ButtonGroupContextValue).isHidden) {\n    return null;\n  }\n\n  let context = {styles: style({flexShrink: 0}), size, isDisabled};\n  return (\n    <div\n      ref={domRef}\n      style={props.UNSAFE_style}\n      className={(props.UNSAFE_className || '') + buttongroup({\n        align,\n        orientation: orientation === 'vertical' || hasOverflow ? 'vertical' : 'horizontal',\n        size\n      }, props.styles)}>\n      <Provider\n        values={[\n          [ButtonContext, context],\n          [LinkButtonContext, context]\n        ]}>\n        {children}\n      </Provider>\n    </div>\n  );\n});\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}