@react-spectrum/s2 0.7.0 → 0.8.0

package/dist/Button.css.map

@@ -1 +1 @@
-{"mappings":"ACmEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<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"}
+{"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' | 'onClick'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children' | 'onClick'>, 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.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<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"}
+{"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' | 'onClick'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children' | 'onClick'>, 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

@@ -4,8 +4,8 @@ var $ac757a4c2bd72aee$exports = require("../icons/useSpectrumContextProps.cjs");
 var $5rFNy$reactjsxruntime = require("react/jsx-runtime");
 var $5rFNy$reactariacomponents = require("react-aria-components");
 var $5rFNy$react = require("react");
-var $5rFNy$reactspectrumutils = require("@react-spectrum/utils");
 var $5rFNy$reactariautils = require("@react-aria/utils");
+var $5rFNy$reactspectrumutils = require("@react-spectrum/utils");
 
 
 function $parcel$export(e, n, v, s) {
@@ -65,7 +65,7 @@ const $e1016b8947dbadb8$var$buttongroup = function anonymous(props, overrides) {
 const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react.forwardRef)(function ButtonGroup(props, ref) {
     [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $e1016b8947dbadb8$export$4c574c91bb0be0e2);
     let domRef = (0, $5rFNy$reactspectrumutils.useDOMRef)(ref);
-    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled } = props;
+    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled, ...otherProps } = props;
     let [hasOverflow, setHasOverflow] = (0, $5rFNy$reactariautils.useValueEffect)(false);
     let checkForOverflow = (0, $5rFNy$react.useCallback)(()=>{
         let computeHasOverflow = ()=>{
@@ -117,6 +117,7 @@ const $e1016b8947dbadb8$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $5rFNy$react
         isDisabled: isDisabled
     };
     return /*#__PURE__*/ (0, $5rFNy$reactjsxruntime.jsx)("div", {
+        ...(0, $5rFNy$reactariautils.filterDOMProps)(otherProps),
         ref: domRef,
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $e1016b8947dbadb8$var$buttongroup({

package/dist/ButtonGroup.cjs.map

@@ -1 +1 @@
-{"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"}
+{"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,EACV,GAAG,YACJ,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;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC9B,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 {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\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 {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    ...otherProps\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      {...filterDOMProps(otherProps)}\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.map

@@ -1 +1 @@
-{"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"}
+{"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwGK;;;;;AAxGL","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 {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\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 {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    ...otherProps\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      {...filterDOMProps(otherProps)}\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

@@ -4,8 +4,8 @@ import {useSpectrumContextProps as $5ce63c423902f47d$export$764f6146fadd77f7} fr
 import {jsx as $bnJX2$jsx} from "react/jsx-runtime";
 import {Provider as $bnJX2$Provider} from "react-aria-components";
 import {createContext as $bnJX2$createContext, forwardRef as $bnJX2$forwardRef, useCallback as $bnJX2$useCallback, useRef as $bnJX2$useRef} from "react";
+import {useValueEffect as $bnJX2$useValueEffect, useLayoutEffect as $bnJX2$useLayoutEffect, filterDOMProps as $bnJX2$filterDOMProps} from "@react-aria/utils";
 import {useDOMRef as $bnJX2$useDOMRef, useResizeObserver as $bnJX2$useResizeObserver} from "@react-spectrum/utils";
-import {useValueEffect as $bnJX2$useValueEffect, useLayoutEffect as $bnJX2$useLayoutEffect} from "@react-aria/utils";
 
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -58,7 +58,7 @@ const $472eaa9a9b344b9a$var$buttongroup = function anonymous(props, overrides) {
 const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwardRef)(function ButtonGroup(props, ref) {
     [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $472eaa9a9b344b9a$export$4c574c91bb0be0e2);
     let domRef = (0, $bnJX2$useDOMRef)(ref);
-    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled } = props;
+    let { size: size = 'M', orientation: orientation = 'horizontal', align: align = 'start', children: children, isDisabled: isDisabled, ...otherProps } = props;
     let [hasOverflow, setHasOverflow] = (0, $bnJX2$useValueEffect)(false);
     let checkForOverflow = (0, $bnJX2$useCallback)(()=>{
         let computeHasOverflow = ()=>{
@@ -110,6 +110,7 @@ const $472eaa9a9b344b9a$export$69b1032f2ecdf404 = /*#__PURE__*/ (0, $bnJX2$forwa
         isDisabled: isDisabled
     };
     return /*#__PURE__*/ (0, $bnJX2$jsx)("div", {
+        ...(0, $bnJX2$filterDOMProps)(otherProps),
         ref: domRef,
         style: props.UNSAFE_style,
         className: (props.UNSAFE_className || '') + $472eaa9a9b344b9a$var$buttongroup({

package/dist/ButtonGroup.mjs.map

@@ -1 +1 @@
-{"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"}
+{"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,EACV,GAAG,YACJ,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;QACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;QAC9B,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 {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';\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 {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    ...otherProps\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      {...filterDOMProps(otherProps)}\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"}

package/dist/Card.cjs

@@ -542,7 +542,7 @@ function $230078a1c4ce81d8$var$CardCheckbox() {
 }
 const $230078a1c4ce81d8$export$115f017852a4bb7c = /*#__PURE__*/ (0, $1B7TP$react.forwardRef)(function CardPreview(props, ref) {
     let { size: size, isQuiet: isQuiet, isHovered: isHovered, isFocusVisible: isFocusVisible, isSelected: isSelected, isPressed: isPressed, isCheckboxSelection: isCheckboxSelection } = (0, $1B7TP$react.useContext)($230078a1c4ce81d8$var$InternalCardContext);
-    let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
     let domRef = (0, $1B7TP$reactspectrumutils.useDOMRef)(ref);
     return /*#__PURE__*/ (0, $1B7TP$reactjsxruntime.jsxs)("div", {
         ...(0, $1B7TP$reactariautils.filterDOMProps)(props),

package/dist/Card.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className, UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className = '', UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}