@react-spectrum/s2 3.0.0-nightly-5ae234603-240925 → 3.0.0-nightly-d57bd8d90-240927

package/dist/Button.css

@@ -422,6 +422,38 @@
     opacity: 1;
   }
 
+  .l-9w1ydn {
+    width: .875rem;
+  }
+
+  .l-1ytbuww {
+    width: 1.125rem;
+  }
+
+  .lk {
+    width: 1.25rem;
+  }
+
+  .lm {
+    width: 1.5rem;
+  }
+
+  .k-9w1ydn {
+    height: .875rem;
+  }
+
+  .k-1ytbuww {
+    height: 1.125rem;
+  }
+
+  .kk {
+    height: 1.25rem;
+  }
+
+  .km {
+    height: 1.5rem;
+  }
+
   .E-1gogtue {
     padding-top: var(--labelPadding);
   }
@@ -640,6 +672,38 @@
     .-_375tou_o-by {
       --o: 3.75rem;
     }
+
+    .lb-1n4kawg {
+      width: 1.09375rem;
+    }
+
+    .lb-1nxaedl {
+      width: 1.40625rem;
+    }
+
+    .lbl {
+      width: 1.5625rem;
+    }
+
+    .lbn {
+      width: 1.875rem;
+    }
+
+    .kb-1n4kawg {
+      height: 1.09375rem;
+    }
+
+    .kb-1nxaedl {
+      height: 1.40625rem;
+    }
+
+    .kbl {
+      height: 1.5625rem;
+    }
+
+    .kbn {
+      height: 1.875rem;
+    }
   }
 }
 

package/dist/Button.css.map

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

package/dist/Button.mjs

@@ -44,6 +44,7 @@ function $parcel$interopDefault(a) {
 
 const $067ea9f64ccd4e8e$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $7BBHC$createContext)(null);
 const $067ea9f64ccd4e8e$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $7BBHC$createContext)(null);
+const $067ea9f64ccd4e8e$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const $067ea9f64ccd4e8e$var$button = function anonymous(props, overrides) {
     let rules = " .";
     let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
@@ -403,6 +404,7 @@ function $067ea9f64ccd4e8e$var$Button(props1, ref) {
                         }({
                             isProgressVisible: isProgressVisible
                         }),
+                        // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
                         'data-rsp-slot': 'text'
                     }
                 ],
@@ -451,9 +453,38 @@ function $067ea9f64ccd4e8e$var$Button(props1, ref) {
                         "aria-label": stringFormatter.format('button.pending'),
                         size: "S",
                         staticColor: staticColor,
-                        UNSAFE_style: {
-                            display: 'block'
-                        }
+                        styles: function anonymous(props) {
+                            let rules = " .";
+                            if (props.size === "XL") {
+                                rules += ' lbn';
+                                rules += ' lm';
+                            } else if (props.size === "L") {
+                                rules += ' lbl';
+                                rules += ' lk';
+                            } else if (props.size === "M") {
+                                rules += ' lb-1nxaedl';
+                                rules += ' l-1ytbuww';
+                            } else if (props.size === "S") {
+                                rules += ' lb-1n4kawg';
+                                rules += ' l-9w1ydn';
+                            }
+                            if (props.size === "XL") {
+                                rules += ' kbn';
+                                rules += ' km';
+                            } else if (props.size === "L") {
+                                rules += ' kbl';
+                                rules += ' kk';
+                            } else if (props.size === "M") {
+                                rules += ' kb-1nxaedl';
+                                rules += ' k-1ytbuww';
+                            } else if (props.size === "S") {
+                                rules += ' kb-1n4kawg';
+                                rules += ' k-9w1ydn';
+                            }
+                            return rules;
+                        }({
+                            size: size
+                        })
                     })
                 })
             ]
@@ -481,7 +512,8 @@ function $067ea9f64ccd4e8e$var$LinkButton(props, ref) {
                 variant: props.variant || 'primary',
                 fillStyle: props.fillStyle || 'fill',
                 size: props.size || 'M',
-                staticColor: props.staticColor
+                staticColor: props.staticColor,
+                isPending: false
             }, props.styles),
         children: /*#__PURE__*/ (0, $7BBHC$jsx)((0, $7BBHC$Provider), {
             values: [
@@ -492,7 +524,9 @@ function $067ea9f64ccd4e8e$var$LinkButton(props, ref) {
                 [
                     (0, $8e847109a6ab556d$export$9afb8bc826b033ea),
                     {
-                        styles: " . E-1gogtue F-1gogtue __A-3t1y"
+                        styles: " . E-1gogtue F-1gogtue __A-3t1y",
+                        // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
+                        'data-rsp-slot': 'text'
                     }
                 ],
                 [

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

package/dist/ButtonGroup.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE","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/spectrum-theme' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\n"],"names":[],"version":3,"file":"ButtonGroup.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\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;;;;EAoGK;;;;;AApGL;;AAoGK","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/spectrum-theme' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}
+{"mappings":"AC6DoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoGK;;;;;AApGL;;AAoGK","sources":["46da5d9d2ee61a4a","packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["@import \"8be38106edd06864\";\n@import \"d77a01524490dd5a\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\n"],"names":[],"version":3,"file":"ButtonGroup.css.map"}

package/dist/ButtonGroup.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE","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/spectrum-theme' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAiDM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAAsE,CAAC;AAErH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,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;AAEA;;CAEC,GACD,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/ButtonGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {\n  useDOMRef,\n  useResizeObserver\n} from '@react-spectrum/utils';\nimport {useLayoutEffect, useValueEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonGroupStyleProps {\n  /**\n   * The axis the ButtonGroup should align with. Setting this to 'vertical' will prevent\n   * any switching behaviors between 'vertical' and 'horizontal'.\n   *\n   * @default 'horizontal'\n   */\n  orientation?: 'horizontal' | 'vertical',\n  /**\n   * The alignment of the Buttons within the ButtonGroup.\n   *\n   * @default 'start'\n   */\n  align?: 'start' | 'end' | 'center',\n  /**\n   * The size of the Buttons within the ButtonGroup.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface ButtonGroupProps extends ButtonGroupStyleProps, SlotProps, StyleProps, DOMProps {\n  /** The Buttons contained within the ButtonGroup. */\n  children: ReactNode,\n  /** Whether the Buttons in the ButtonGroup are all disabled. */\n  isDisabled?: boolean\n}\n\ninterface ButtonGroupContextValue extends Partial<ButtonGroupProps> {\n  /** Whether the ButtonGroup shouldn't be rendered. */\n  isHidden?: boolean\n}\n\nexport const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});\n\nconst buttongroup = style<ButtonGroupStyleProps>({\n  display: 'inline-flex',\n  position: 'relative',\n  gap: {\n    size: {\n      S: 8,\n      M: 12,\n      L: 12,\n      XL: 12\n    }\n  },\n  flexDirection: {\n    default: 'row',\n    orientation: {\n      vertical: 'column'\n    }\n  },\n  alignItems: {\n    default: 'center',\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  },\n  justifyContent: {\n    orientation: {\n      vertical: {\n        default: 'start',\n        align: {\n          end: 'end',\n          center: 'center'\n        }\n      }\n    }\n  }\n}, getAllowedOverrides());\n\nfunction 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\n/**\n * ButtonGroup handles overflow for a grouping of buttons whose actions are related to each other.\n */\nconst _ButtonGroup = forwardRef(ButtonGroup);\nexport {_ButtonGroup as ButtonGroup};\n"],"names":[],"version":3,"file":"ButtonGroup.mjs.map"}

package/dist/Card.cjs

@@ -476,7 +476,7 @@ const $230078a1c4ce81d8$export$60332b2344f7fe41 = /*#__PURE__*/ (0, $1B7TP$react
     let ElementType = (0, $1B7TP$react.useContext)($230078a1c4ce81d8$export$64992ac69f286e5c);
     if (ElementType === 'div' || isSkeleton) return /*#__PURE__*/ (0, $1B7TP$reactjsxruntime.jsx)("div", {
         ...(0, $1B7TP$reactariautils.filterDOMProps)(otherProps),
-        id: String(id),
+        id: id != null ? String(id) : undefined,
         // @ts-ignore - React < 19 compat
         inert: isSkeleton ? 'true' : undefined,
         ref: domRef,
@@ -541,7 +541,7 @@ function $230078a1c4ce81d8$var$SelectionIndicator() {
         className: $230078a1c4ce81d8$var$selectionIndicator({
             size: size,
             isSelected: isSelected,
-            // Add an inner stroke only for quiet cards with no checkbox to 
+            // Add an inner stroke only for quiet cards with no checkbox to
             // help distinguish the selected state from the preview.
             isStrokeInner: isQuiet && !isCheckboxSelection
         })