@adobe/react-spectrum 3.46.2 → 3.47.0

package/dist/private/button/Button.cjs

@@ -0,0 +1,193 @@
+var $69fd630bd812ba47$exports = require("../utils/classNames.cjs");
+var $adbda93dea711ffd$exports = require("./intlStrings.cjs");
+var $948c2416aa3a9507$exports = require("../progress/ProgressCircle.cjs");
+var $feede71cddc0c5f3$exports = require("../utils/Slots.cjs");
+require("../button_vars.css");
+var $869138cbe3b599dc$exports = require("../button_vars_css.cjs");
+var $15e3b68ec42125a9$exports = require("../text/Text.cjs");
+var $65aea7b37663976b$exports = require("../utils/useDOMRef.cjs");
+var $dd6348d4a1a51ff9$exports = require("../utils/useHasChild.cjs");
+var $544fc82701fc93e9$exports = require("../provider/Provider.cjs");
+var $b8f90d51c4908137$exports = require("../utils/styleProps.cjs");
+var $d1lFD$reactariauseButton = require("react-aria/useButton");
+var $d1lFD$reactariaFocusRing = require("react-aria/FocusRing");
+var $d1lFD$reactariaprivateutilsplatform = require("react-aria/private/utils/platform");
+var $d1lFD$reactariamergeProps = require("react-aria/mergeProps");
+var $d1lFD$react = require("react");
+var $d1lFD$reactariauseFocus = require("react-aria/useFocus");
+var $d1lFD$reactariauseHover = require("react-aria/useHover");
+var $d1lFD$reactariauseId = require("react-aria/useId");
+var $d1lFD$reactariauseLocalizedStringFormatter = require("react-aria/useLocalizedStringFormatter");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "Button", function () { return $92256f4fe9ec9f59$export$353f5b6fc5456de1; });
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $92256f4fe9ec9f59$var$disablePendingProps(props) {
+    // Don't allow interaction while isPending is true
+    if (props.isPending) {
+        props.onPress = undefined;
+        props.onPressStart = undefined;
+        props.onPressEnd = undefined;
+        props.onPressChange = undefined;
+        props.onPressUp = undefined;
+        props.onKeyDown = undefined;
+        props.onKeyUp = undefined;
+        props.onClick = undefined;
+        props.href = undefined;
+    }
+    return props;
+}
+const $92256f4fe9ec9f59$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).forwardRef(function Button(props, ref) {
+    props = (0, $544fc82701fc93e9$exports.useProviderProps)(props);
+    props = (0, $feede71cddc0c5f3$exports.useSlotProps)(props, 'button');
+    props = $92256f4fe9ec9f59$var$disablePendingProps(props);
+    let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
+    let domRef = (0, $65aea7b37663976b$exports.useFocusableRef)(ref);
+    let { buttonProps: buttonProps, isPressed: isPressed } = (0, $d1lFD$reactariauseButton.useButton)(props, domRef);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $d1lFD$reactariauseHover.useHover)({
+        isDisabled: isDisabled
+    });
+    let [isFocused, onFocusChange] = (0, $d1lFD$react.useState)(false);
+    let { focusProps: focusProps } = (0, $d1lFD$reactariauseFocus.useFocus)({
+        onFocusChange: onFocusChange,
+        isDisabled: isDisabled
+    });
+    let stringFormatter = (0, $d1lFD$reactariauseLocalizedStringFormatter.useLocalizedStringFormatter)((0, ($parcel$interopDefault($adbda93dea711ffd$exports))), '@react-spectrum/button');
+    let { styleProps: styleProps } = (0, $b8f90d51c4908137$exports.useStyleProps)(otherProps);
+    let hasLabel = (0, $dd6348d4a1a51ff9$exports.useHasChild)(`.${(0, ($parcel$interopDefault($869138cbe3b599dc$exports)))['spectrum-Button-label']}`, domRef);
+    let hasIcon = (0, $dd6348d4a1a51ff9$exports.useHasChild)(`.${(0, ($parcel$interopDefault($869138cbe3b599dc$exports)))['spectrum-Icon']}`, domRef);
+    // an aria label will block children and their labels from being read, this is undesirable for pending state
+    let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
+    let [isProgressVisible, setIsProgressVisible] = (0, $d1lFD$react.useState)(false);
+    let backupButtonId = (0, $d1lFD$reactariauseId.useId)();
+    let buttonId = buttonProps.id || backupButtonId;
+    let iconId = (0, $d1lFD$reactariauseId.useId)();
+    let textId = (0, $d1lFD$reactariauseId.useId)();
+    let spinnerId = (0, $d1lFD$reactariauseId.useId)();
+    (0, $d1lFD$react.useEffect)(()=>{
+        let timeout;
+        if (isPending) // Start timer when isPending is set to true.
+        timeout = setTimeout(()=>{
+            setIsProgressVisible(true);
+        }, 1000);
+        else // Exit loading state when isPending is set to false. */
+        setIsProgressVisible(false);
+        return ()=>{
+            // Clean up on unmount or when user removes isPending prop before entering loading state.
+            clearTimeout(timeout);
+        };
+    }, [
+        isPending
+    ]);
+    if (variant === 'cta') variant = 'accent';
+    else if (variant === 'overBackground') {
+        variant = 'primary';
+        staticColor = 'white';
+    }
+    const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+    const isPendingAriaLiveLabelledby = hasAriaLabel ? buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+    let ariaLive = 'polite';
+    if ((0, $d1lFD$reactariaprivateutilsplatform.isAppleDevice)() && (!hasAriaLabel || (0, $d1lFD$reactariaprivateutilsplatform.isFirefox)())) ariaLive = 'off';
+    let isPendingProps = isPending ? {
+        onClick: (e)=>{
+            if (e.currentTarget instanceof HTMLButtonElement) e.preventDefault();
+        }
+    } : {
+        // no-op. 
+        // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
+        onClick: ()=>{}
+    };
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement((0, $d1lFD$reactariaFocusRing.FocusRing), {
+        focusRingClass: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($869138cbe3b599dc$exports))), 'focus-ring'),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement(Element, {
+        ...styleProps,
+        ...(0, $d1lFD$reactariamergeProps.mergeProps)(buttonProps, hoverProps, focusProps, isPendingProps),
+        id: buttonId,
+        ref: domRef,
+        "data-variant": variant,
+        "data-style": style,
+        "data-static-color": staticColor || undefined,
+        "aria-disabled": isPending ? 'true' : undefined,
+        "aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
+        "aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($869138cbe3b599dc$exports))), 'spectrum-Button', {
+            'spectrum-Button--iconOnly': hasIcon && !hasLabel,
+            'is-disabled': isDisabled || isProgressVisible,
+            'is-active': isPressed,
+            'is-hovered': isHovered,
+            'spectrum-Button--pending': isProgressVisible
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement((0, $feede71cddc0c5f3$exports.SlotProvider), {
+        slots: {
+            icon: {
+                id: iconId,
+                size: 'S',
+                UNSAFE_className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($869138cbe3b599dc$exports))), 'spectrum-Icon')
+            },
+            text: {
+                id: textId,
+                UNSAFE_className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($869138cbe3b599dc$exports))), 'spectrum-Button-label')
+            }
+        }
+    }, typeof children === 'string' ? /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement((0, $15e3b68ec42125a9$exports.Text), null, children) : children, isPending && /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement("div", {
+        "aria-hidden": "true",
+        style: {
+            visibility: isProgressVisible ? 'visible' : 'hidden'
+        },
+        className: (0, $69fd630bd812ba47$exports.classNames)((0, ($parcel$interopDefault($869138cbe3b599dc$exports))), 'spectrum-Button-circleLoader')
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement((0, $948c2416aa3a9507$exports.ProgressCircle), {
+        "aria-label": isPendingAriaLiveLabel,
+        isIndeterminate: true,
+        size: "S",
+        staticColor: staticColor
+    })), isPending && /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement((0, ($parcel$interopDefault($d1lFD$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement("div", {
+        "aria-live": isFocused ? ariaLive : 'off'
+    }, isProgressVisible && /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement("div", {
+        role: "img",
+        "aria-labelledby": isPendingAriaLiveLabelledby
+    })), /*#__PURE__*/ (0, ($parcel$interopDefault($d1lFD$react))).createElement("div", {
+        id: spinnerId,
+        role: "img",
+        "aria-label": isPendingAriaLiveLabel
+    })))));
+});
+
+
+//# sourceMappingURL=Button.cjs.map

package/dist/private/button/Button.cjs.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\n\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\n// @ts-ignore\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'> extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n  variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant,\n  /** The background style of the button. */\n  style?: 'fill' | 'outline',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black',\n  /**\n   * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n   */\n  isPending?: boolean,\n  /**\n   * Whether the button should be displayed with a quiet style.\n   * @deprecated\n   */\n  isQuiet?: boolean\n}\n\nfunction disablePendingProps(props) {\n  // Don't allow interaction while isPending is true\n  if (props.isPending) {\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n    props.onClick = undefined;\n    props.href = undefined;\n  }\n  return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useSlotProps(props, 'button');\n  props = disablePendingProps(props);\n  let {\n    elementType: Element = 'button',\n    children,\n    variant,\n    style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n    staticColor,\n    isDisabled,\n    isPending,\n    autoFocus,\n    ...otherProps\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let {buttonProps, isPressed} = useButton(props, domRef);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let [isFocused, onFocusChange] = useState(false);\n  let {focusProps} = useFocus({onFocusChange, isDisabled});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n  let {styleProps} = useStyleProps(otherProps);\n  let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n  let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n  // an aria label will block children and their labels from being read, this is undesirable for pending state\n  let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  let backupButtonId = useId();\n  let buttonId = buttonProps.id || backupButtonId;\n  let iconId = useId();\n  let textId = useId();\n  let spinnerId = useId();\n\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  if (variant === 'cta') {\n    variant = 'accent';\n  } else if (variant === 'overBackground') {\n    variant = 'primary';\n    staticColor = 'white';\n  }\n\n  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n    ariaLive = 'off';\n  }\n\n  let isPendingProps = isPending ? {\n    onClick: (e) => {\n      if (e.currentTarget instanceof HTMLButtonElement) {\n        e.preventDefault();\n      }\n    }\n  } : {\n    // no-op. \n    // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n    onClick: () => {}\n  };\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n      <Element\n        {...styleProps}\n        {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n        id={buttonId}\n        ref={domRef}\n        data-variant={variant}\n        data-style={style}\n        data-static-color={staticColor || undefined}\n        aria-disabled={isPending ? 'true' : undefined}\n        aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n        className={\n          classNames(\n            styles,\n            'spectrum-Button',\n            {\n              'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n              'is-disabled': isDisabled || isProgressVisible,\n              'is-active': isPressed,\n              'is-hovered': isHovered,\n              'spectrum-Button--pending': isProgressVisible\n            },\n            styleProps.className\n          )\n        }>\n        <SlotProvider\n          slots={{\n            icon: {\n              id: iconId,\n              size: 'S',\n              UNSAFE_className: classNames(styles, 'spectrum-Icon')\n            },\n            text: {\n              id: textId,\n              UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n            }\n          }}>\n          {typeof children === 'string'\n            ? <Text>{children}</Text>\n            : children}\n          {isPending && (\n            <div\n              aria-hidden=\"true\"\n              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n              className={classNames(styles, 'spectrum-Button-circleLoader')}>\n              <ProgressCircle\n                aria-label={isPendingAriaLiveLabel}\n                isIndeterminate\n                size=\"S\"\n                staticColor={staticColor} />\n            </div>\n          )}\n          {isPending &&\n            <>\n              <div aria-live={isFocused ? ariaLive : 'off'}>\n                {isProgressVisible &&\n                  <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n                }\n              </div>\n              {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n              Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n              https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n              The aria-live may cause extra announcements in other browsers. */}\n              <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n            </>\n          }\n        </SlotProvider>\n      </Element>\n    </FocusRing>\n  );\n}) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Button.cjs.map"}

package/dist/private/button/Button.js

@@ -0,0 +1,190 @@
+import {classNames as $512ba93e663f149c$export$ce4ab0c55987d1ff} from "../utils/classNames.js";
+import $jeK3W$intlStringsjs from "./intlStrings.js";
+import {ProgressCircle as $277696409c391eff$export$c79b9d6b4cc92af7} from "../progress/ProgressCircle.js";
+import {SlotProvider as $68f4bc2c1abc5618$export$8107b24b91795686, useSlotProps as $68f4bc2c1abc5618$export$1e5c9e6e4e15efe3} from "../utils/Slots.js";
+import "../button_vars.css";
+import $jeK3W$button_vars_cssmjs from "../button_vars_css.mjs";
+import {Text as $42dd7396e689e4e6$export$5f1af8db9871e1d6} from "../text/Text.js";
+import {useFocusableRef as $c234463e9ef56637$export$96a734597687c040} from "../utils/useDOMRef.js";
+import {useHasChild as $584638b763a93bff$export$e52e2242b6d0f1d4} from "../utils/useHasChild.js";
+import {useProviderProps as $089943c7a219141c$export$521c373ccc32c300} from "../provider/Provider.js";
+import {useStyleProps as $120fbea2d95e11ed$export$b8e6fb9d2dff3f41} from "../utils/styleProps.js";
+import {useButton as $jeK3W$useButton} from "react-aria/useButton";
+import {FocusRing as $jeK3W$FocusRing} from "react-aria/FocusRing";
+import {isAppleDevice as $jeK3W$isAppleDevice, isFirefox as $jeK3W$isFirefox} from "react-aria/private/utils/platform";
+import {mergeProps as $jeK3W$mergeProps} from "react-aria/mergeProps";
+import $jeK3W$react, {useState as $jeK3W$useState, useEffect as $jeK3W$useEffect} from "react";
+import {useFocus as $jeK3W$useFocus} from "react-aria/useFocus";
+import {useHover as $jeK3W$useHover} from "react-aria/useHover";
+import {useId as $jeK3W$useId} from "react-aria/useId";
+import {useLocalizedStringFormatter as $jeK3W$useLocalizedStringFormatter} from "react-aria/useLocalizedStringFormatter";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $88f996b7df3752a1$var$disablePendingProps(props) {
+    // Don't allow interaction while isPending is true
+    if (props.isPending) {
+        props.onPress = undefined;
+        props.onPressStart = undefined;
+        props.onPressEnd = undefined;
+        props.onPressChange = undefined;
+        props.onPressUp = undefined;
+        props.onKeyDown = undefined;
+        props.onKeyUp = undefined;
+        props.onClick = undefined;
+        props.href = undefined;
+    }
+    return props;
+}
+const $88f996b7df3752a1$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $jeK3W$react).forwardRef(function Button(props, ref) {
+    var _buttonProps_arialabelledby;
+    props = (0, $089943c7a219141c$export$521c373ccc32c300)(props);
+    props = (0, $68f4bc2c1abc5618$export$1e5c9e6e4e15efe3)(props, 'button');
+    props = $88f996b7df3752a1$var$disablePendingProps(props);
+    let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
+    let domRef = (0, $c234463e9ef56637$export$96a734597687c040)(ref);
+    let { buttonProps: buttonProps, isPressed: isPressed } = (0, $jeK3W$useButton)(props, domRef);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $jeK3W$useHover)({
+        isDisabled: isDisabled
+    });
+    let [isFocused, onFocusChange] = (0, $jeK3W$useState)(false);
+    let { focusProps: focusProps } = (0, $jeK3W$useFocus)({
+        onFocusChange: onFocusChange,
+        isDisabled: isDisabled
+    });
+    let stringFormatter = (0, $jeK3W$useLocalizedStringFormatter)((0, ($parcel$interopDefault($jeK3W$intlStringsjs))), '@react-spectrum/button');
+    let { styleProps: styleProps } = (0, $120fbea2d95e11ed$export$b8e6fb9d2dff3f41)(otherProps);
+    let hasLabel = (0, $584638b763a93bff$export$e52e2242b6d0f1d4)(`.${(0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs)))['spectrum-Button-label']}`, domRef);
+    let hasIcon = (0, $584638b763a93bff$export$e52e2242b6d0f1d4)(`.${(0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs)))['spectrum-Icon']}`, domRef);
+    // an aria label will block children and their labels from being read, this is undesirable for pending state
+    let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
+    let [isProgressVisible, setIsProgressVisible] = (0, $jeK3W$useState)(false);
+    let backupButtonId = (0, $jeK3W$useId)();
+    let buttonId = buttonProps.id || backupButtonId;
+    let iconId = (0, $jeK3W$useId)();
+    let textId = (0, $jeK3W$useId)();
+    let spinnerId = (0, $jeK3W$useId)();
+    (0, $jeK3W$useEffect)(()=>{
+        let timeout;
+        if (isPending) // Start timer when isPending is set to true.
+        timeout = setTimeout(()=>{
+            setIsProgressVisible(true);
+        }, 1000);
+        else // Exit loading state when isPending is set to false. */
+        setIsProgressVisible(false);
+        return ()=>{
+            // Clean up on unmount or when user removes isPending prop before entering loading state.
+            clearTimeout(timeout);
+        };
+    }, [
+        isPending
+    ]);
+    if (variant === 'cta') variant = 'accent';
+    else if (variant === 'overBackground') {
+        variant = 'primary';
+        staticColor = 'white';
+    }
+    const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+    var _buttonProps_arialabelledby_replace;
+    const isPendingAriaLiveLabelledby = hasAriaLabel ? (_buttonProps_arialabelledby_replace = (_buttonProps_arialabelledby = buttonProps['aria-labelledby']) === null || _buttonProps_arialabelledby === void 0 ? void 0 : _buttonProps_arialabelledby.replace(buttonId, spinnerId)) !== null && _buttonProps_arialabelledby_replace !== void 0 ? _buttonProps_arialabelledby_replace : spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+    let ariaLive = 'polite';
+    if ((0, $jeK3W$isAppleDevice)() && (!hasAriaLabel || (0, $jeK3W$isFirefox)())) ariaLive = 'off';
+    let isPendingProps = isPending ? {
+        onClick: (e)=>{
+            if (e.currentTarget instanceof HTMLButtonElement) e.preventDefault();
+        }
+    } : {
+        // no-op. 
+        // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
+        onClick: ()=>{}
+    };
+    return /*#__PURE__*/ (0, $jeK3W$react).createElement((0, $jeK3W$FocusRing), {
+        focusRingClass: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs))), 'focus-ring'),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, $jeK3W$react).createElement(Element, {
+        ...styleProps,
+        ...(0, $jeK3W$mergeProps)(buttonProps, hoverProps, focusProps, isPendingProps),
+        id: buttonId,
+        ref: domRef,
+        "data-variant": variant,
+        "data-style": style,
+        "data-static-color": staticColor || undefined,
+        "aria-disabled": isPending ? 'true' : undefined,
+        "aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
+        "aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs))), 'spectrum-Button', {
+            'spectrum-Button--iconOnly': hasIcon && !hasLabel,
+            'is-disabled': isDisabled || isProgressVisible,
+            'is-active': isPressed,
+            'is-hovered': isHovered,
+            'spectrum-Button--pending': isProgressVisible
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, $jeK3W$react).createElement((0, $68f4bc2c1abc5618$export$8107b24b91795686), {
+        slots: {
+            icon: {
+                id: iconId,
+                size: 'S',
+                UNSAFE_className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs))), 'spectrum-Icon')
+            },
+            text: {
+                id: textId,
+                UNSAFE_className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs))), 'spectrum-Button-label')
+            }
+        }
+    }, typeof children === 'string' ? /*#__PURE__*/ (0, $jeK3W$react).createElement((0, $42dd7396e689e4e6$export$5f1af8db9871e1d6), null, children) : children, isPending && /*#__PURE__*/ (0, $jeK3W$react).createElement("div", {
+        "aria-hidden": "true",
+        style: {
+            visibility: isProgressVisible ? 'visible' : 'hidden'
+        },
+        className: (0, $512ba93e663f149c$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($jeK3W$button_vars_cssmjs))), 'spectrum-Button-circleLoader')
+    }, /*#__PURE__*/ (0, $jeK3W$react).createElement((0, $277696409c391eff$export$c79b9d6b4cc92af7), {
+        "aria-label": isPendingAriaLiveLabel,
+        isIndeterminate: true,
+        size: "S",
+        staticColor: staticColor
+    })), isPending && /*#__PURE__*/ (0, $jeK3W$react).createElement((0, $jeK3W$react).Fragment, null, /*#__PURE__*/ (0, $jeK3W$react).createElement("div", {
+        "aria-live": isFocused ? ariaLive : 'off'
+    }, isProgressVisible && /*#__PURE__*/ (0, $jeK3W$react).createElement("div", {
+        role: "img",
+        "aria-labelledby": isPendingAriaLiveLabelledby
+    })), /*#__PURE__*/ (0, $jeK3W$react).createElement("div", {
+        id: spinnerId,
+        role: "img",
+        "aria-label": isPendingAriaLiveLabel
+    })))));
+});
+
+
+export {$88f996b7df3752a1$export$353f5b6fc5456de1 as Button};
+//# sourceMappingURL=Button.js.map

package/dist/private/button/Button.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@adobe/react-spectrum/src/button/Button.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 {AriaButtonProps, useButton} from 'react-aria/useButton';\n\nimport {classNames} from '../utils/classNames';\nimport {FocusableRef, StyleProps} from '@react-types/shared';\nimport {FocusRing} from 'react-aria/FocusRing';\nimport intlMessages from '../../intl/button/*.json';\nimport {isAppleDevice, isFirefox} from 'react-aria/private/utils/platform';\nimport {mergeProps} from 'react-aria/mergeProps';\nimport {ProgressCircle} from '../progress/ProgressCircle';\n// @ts-ignore\nimport React, {ElementType, ReactElement, useEffect, useState} from 'react';\nimport {SlotProvider, useSlotProps} from '../utils/Slots';\nimport styles from '@adobe/spectrum-css-temp/components/button/vars.css';\nimport {Text} from '../text/Text';\nimport {useFocus} from 'react-aria/useFocus';\nimport {useFocusableRef} from '../utils/useDOMRef';\nimport {useHasChild} from '../utils/useHasChild';\nimport {useHover} from 'react-aria/useHover';\nimport {useId} from 'react-aria/useId';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useProviderProps} from '../provider/Provider';\nimport {useStyleProps} from '../utils/styleProps';\n\n/** @deprecated */\ntype LegacyButtonVariant = 'cta' | 'overBackground';\nexport interface SpectrumButtonProps<T extends ElementType = 'button'> extends Omit<AriaButtonProps<T>, 'onClick'>, StyleProps {\n  /** The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button. */\n  variant: 'accent' | 'primary' | 'secondary' | 'negative' | LegacyButtonVariant,\n  /** The background style of the button. */\n  style?: 'fill' | 'outline',\n  /** The static color style to apply. Useful when the button appears over a color background. */\n  staticColor?: 'white' | 'black',\n  /**\n   * Whether to disable events immediately and display a loading spinner after a 1 second delay.\n   */\n  isPending?: boolean,\n  /**\n   * Whether the button should be displayed with a quiet style.\n   * @deprecated\n   */\n  isQuiet?: boolean\n}\n\nfunction disablePendingProps(props) {\n  // Don't allow interaction while isPending is true\n  if (props.isPending) {\n    props.onPress = undefined;\n    props.onPressStart = undefined;\n    props.onPressEnd = undefined;\n    props.onPressChange = undefined;\n    props.onPressUp = undefined;\n    props.onKeyDown = undefined;\n    props.onKeyUp = undefined;\n    props.onClick = undefined;\n    props.href = undefined;\n  }\n  return props;\n}\n\n/**\n * Buttons allow users to perform an action or to navigate to another page.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = React.forwardRef(function Button<T extends ElementType = 'button'>(props: SpectrumButtonProps<T>, ref: FocusableRef<HTMLElement>) {\n  props = useProviderProps(props);\n  props = useSlotProps(props, 'button');\n  props = disablePendingProps(props);\n  let {\n    elementType: Element = 'button',\n    children,\n    variant,\n    style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline',\n    staticColor,\n    isDisabled,\n    isPending,\n    autoFocus,\n    ...otherProps\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let {buttonProps, isPressed} = useButton(props, domRef);\n  let {hoverProps, isHovered} = useHover({isDisabled});\n  let [isFocused, onFocusChange] = useState(false);\n  let {focusProps} = useFocus({onFocusChange, isDisabled});\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/button');\n  let {styleProps} = useStyleProps(otherProps);\n  let hasLabel = useHasChild(`.${styles['spectrum-Button-label']}`, domRef);\n  let hasIcon = useHasChild(`.${styles['spectrum-Icon']}`, domRef);\n  // an aria label will block children and their labels from being read, this is undesirable for pending state\n  let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  let backupButtonId = useId();\n  let buttonId = buttonProps.id || backupButtonId;\n  let iconId = useId();\n  let textId = useId();\n  let spinnerId = useId();\n\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  if (variant === 'cta') {\n    variant = 'accent';\n  } else if (variant === 'overBackground') {\n    variant = 'primary';\n    staticColor = 'white';\n  }\n\n  const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();\n  const isPendingAriaLiveLabelledby = hasAriaLabel ? (buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId) : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();\n\n  let ariaLive: 'off' | 'polite' | 'assertive' = 'polite';\n  if (isAppleDevice() && (!hasAriaLabel || isFirefox())) {\n    ariaLive = 'off';\n  }\n\n  let isPendingProps = isPending ? {\n    onClick: (e) => {\n      if (e.currentTarget instanceof HTMLButtonElement) {\n        e.preventDefault();\n      }\n    }\n  } : {\n    // no-op. \n    // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.\n    onClick: () => {}\n  };\n\n  return (\n    <FocusRing focusRingClass={classNames(styles, 'focus-ring')} autoFocus={autoFocus}>\n      <Element\n        {...styleProps}\n        {...mergeProps(buttonProps, hoverProps, focusProps, isPendingProps)}\n        id={buttonId}\n        ref={domRef}\n        data-variant={variant}\n        data-style={style}\n        data-static-color={staticColor || undefined}\n        aria-disabled={isPending ? 'true' : undefined}\n        aria-label={isPending ? isPendingAriaLiveLabel : buttonProps['aria-label']}\n        aria-labelledby={isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby']}\n        className={\n          classNames(\n            styles,\n            'spectrum-Button',\n            {\n              'spectrum-Button--iconOnly': hasIcon && !hasLabel,\n              'is-disabled': isDisabled || isProgressVisible,\n              'is-active': isPressed,\n              'is-hovered': isHovered,\n              'spectrum-Button--pending': isProgressVisible\n            },\n            styleProps.className\n          )\n        }>\n        <SlotProvider\n          slots={{\n            icon: {\n              id: iconId,\n              size: 'S',\n              UNSAFE_className: classNames(styles, 'spectrum-Icon')\n            },\n            text: {\n              id: textId,\n              UNSAFE_className: classNames(styles, 'spectrum-Button-label')\n            }\n          }}>\n          {typeof children === 'string'\n            ? <Text>{children}</Text>\n            : children}\n          {isPending && (\n            <div\n              aria-hidden=\"true\"\n              style={{visibility: isProgressVisible ? 'visible' : 'hidden'}}\n              className={classNames(styles, 'spectrum-Button-circleLoader')}>\n              <ProgressCircle\n                aria-label={isPendingAriaLiveLabel}\n                isIndeterminate\n                size=\"S\"\n                staticColor={staticColor} />\n            </div>\n          )}\n          {isPending &&\n            <>\n              <div aria-live={isFocused ? ariaLive : 'off'}>\n                {isProgressVisible &&\n                  <div role=\"img\" aria-labelledby={isPendingAriaLiveLabelledby} />\n                }\n              </div>\n              {/* Adding the element here with the same labels as the button itself causes aria-live to pick up the change in Safari.\n              Safari with VO unfortunately doesn't announce changes to *all* of its labels specifically for button\n              https://a11ysupport.io/tests/tech__html__button-name-change#assertion-aria-aria-label_attribute-convey_name_change-html-button_element-vo_macos-safari\n              The aria-live may cause extra announcements in other browsers. */}\n              <div id={spinnerId} role=\"img\" aria-label={isPendingAriaLiveLabel} />\n            </>\n          }\n        </SlotProvider>\n      </Element>\n    </FocusRing>\n  );\n}) as <T extends ElementType = 'button'>(props: SpectrumButtonProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n"],"names":[],"version":3,"file":"Button.js.map"}

package/dist/private/button/Button.mjs

@@ -0,0 +1,188 @@
+import {classNames as $6e6392558d48dfec$export$ce4ab0c55987d1ff} from "../utils/classNames.mjs";
+import $9zSjX$intlStringsmjs from "./intlStrings.mjs";
+import {ProgressCircle as $1cfe37e7feefa23d$export$c79b9d6b4cc92af7} from "../progress/ProgressCircle.mjs";
+import {SlotProvider as $62024859ff9f1f8a$export$8107b24b91795686, useSlotProps as $62024859ff9f1f8a$export$1e5c9e6e4e15efe3} from "../utils/Slots.mjs";
+import "../button_vars.css";
+import $9zSjX$button_vars_cssmjs from "../button_vars_css.mjs";
+import {Text as $f8cc90fea9436c19$export$5f1af8db9871e1d6} from "../text/Text.mjs";
+import {useFocusableRef as $3c2c983d5210446c$export$96a734597687c040} from "../utils/useDOMRef.mjs";
+import {useHasChild as $f57c7d8d50bdc255$export$e52e2242b6d0f1d4} from "../utils/useHasChild.mjs";
+import {useProviderProps as $71dfb0e0358a12de$export$521c373ccc32c300} from "../provider/Provider.mjs";
+import {useStyleProps as $63d03c54ca5e4b88$export$b8e6fb9d2dff3f41} from "../utils/styleProps.mjs";
+import {useButton as $9zSjX$useButton} from "react-aria/useButton";
+import {FocusRing as $9zSjX$FocusRing} from "react-aria/FocusRing";
+import {isAppleDevice as $9zSjX$isAppleDevice, isFirefox as $9zSjX$isFirefox} from "react-aria/private/utils/platform";
+import {mergeProps as $9zSjX$mergeProps} from "react-aria/mergeProps";
+import $9zSjX$react, {useState as $9zSjX$useState, useEffect as $9zSjX$useEffect} from "react";
+import {useFocus as $9zSjX$useFocus} from "react-aria/useFocus";
+import {useHover as $9zSjX$useHover} from "react-aria/useHover";
+import {useId as $9zSjX$useId} from "react-aria/useId";
+import {useLocalizedStringFormatter as $9zSjX$useLocalizedStringFormatter} from "react-aria/useLocalizedStringFormatter";
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $36a99e6d76bd9d26$var$disablePendingProps(props) {
+    // Don't allow interaction while isPending is true
+    if (props.isPending) {
+        props.onPress = undefined;
+        props.onPressStart = undefined;
+        props.onPressEnd = undefined;
+        props.onPressChange = undefined;
+        props.onPressUp = undefined;
+        props.onKeyDown = undefined;
+        props.onKeyUp = undefined;
+        props.onClick = undefined;
+        props.href = undefined;
+    }
+    return props;
+}
+const $36a99e6d76bd9d26$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $9zSjX$react).forwardRef(function Button(props, ref) {
+    props = (0, $71dfb0e0358a12de$export$521c373ccc32c300)(props);
+    props = (0, $62024859ff9f1f8a$export$1e5c9e6e4e15efe3)(props, 'button');
+    props = $36a99e6d76bd9d26$var$disablePendingProps(props);
+    let { elementType: Element = 'button', children: children, variant: variant, style: style = variant === 'accent' || variant === 'cta' ? 'fill' : 'outline', staticColor: staticColor, isDisabled: isDisabled, isPending: isPending, autoFocus: autoFocus, ...otherProps } = props;
+    let domRef = (0, $3c2c983d5210446c$export$96a734597687c040)(ref);
+    let { buttonProps: buttonProps, isPressed: isPressed } = (0, $9zSjX$useButton)(props, domRef);
+    let { hoverProps: hoverProps, isHovered: isHovered } = (0, $9zSjX$useHover)({
+        isDisabled: isDisabled
+    });
+    let [isFocused, onFocusChange] = (0, $9zSjX$useState)(false);
+    let { focusProps: focusProps } = (0, $9zSjX$useFocus)({
+        onFocusChange: onFocusChange,
+        isDisabled: isDisabled
+    });
+    let stringFormatter = (0, $9zSjX$useLocalizedStringFormatter)((0, ($parcel$interopDefault($9zSjX$intlStringsmjs))), '@react-spectrum/button');
+    let { styleProps: styleProps } = (0, $63d03c54ca5e4b88$export$b8e6fb9d2dff3f41)(otherProps);
+    let hasLabel = (0, $f57c7d8d50bdc255$export$e52e2242b6d0f1d4)(`.${(0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs)))['spectrum-Button-label']}`, domRef);
+    let hasIcon = (0, $f57c7d8d50bdc255$export$e52e2242b6d0f1d4)(`.${(0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs)))['spectrum-Icon']}`, domRef);
+    // an aria label will block children and their labels from being read, this is undesirable for pending state
+    let hasAriaLabel = !!buttonProps['aria-label'] || !!buttonProps['aria-labelledby'];
+    let [isProgressVisible, setIsProgressVisible] = (0, $9zSjX$useState)(false);
+    let backupButtonId = (0, $9zSjX$useId)();
+    let buttonId = buttonProps.id || backupButtonId;
+    let iconId = (0, $9zSjX$useId)();
+    let textId = (0, $9zSjX$useId)();
+    let spinnerId = (0, $9zSjX$useId)();
+    (0, $9zSjX$useEffect)(()=>{
+        let timeout;
+        if (isPending) // Start timer when isPending is set to true.
+        timeout = setTimeout(()=>{
+            setIsProgressVisible(true);
+        }, 1000);
+        else // Exit loading state when isPending is set to false. */
+        setIsProgressVisible(false);
+        return ()=>{
+            // Clean up on unmount or when user removes isPending prop before entering loading state.
+            clearTimeout(timeout);
+        };
+    }, [
+        isPending
+    ]);
+    if (variant === 'cta') variant = 'accent';
+    else if (variant === 'overBackground') {
+        variant = 'primary';
+        staticColor = 'white';
+    }
+    const isPendingAriaLiveLabel = `${hasAriaLabel ? buttonProps['aria-label'] : ''} ${stringFormatter.format('pending')}`.trim();
+    const isPendingAriaLiveLabelledby = hasAriaLabel ? buttonProps['aria-labelledby']?.replace(buttonId, spinnerId) ?? spinnerId : `${hasIcon ? iconId : ''} ${hasLabel ? textId : ''} ${spinnerId}`.trim();
+    let ariaLive = 'polite';
+    if ((0, $9zSjX$isAppleDevice)() && (!hasAriaLabel || (0, $9zSjX$isFirefox)())) ariaLive = 'off';
+    let isPendingProps = isPending ? {
+        onClick: (e)=>{
+            if (e.currentTarget instanceof HTMLButtonElement) e.preventDefault();
+        }
+    } : {
+        // no-op. 
+        // Not sure why, but TypeScript wouldn't allow to have an empty object `{}`.
+        onClick: ()=>{}
+    };
+    return /*#__PURE__*/ (0, $9zSjX$react).createElement((0, $9zSjX$FocusRing), {
+        focusRingClass: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs))), 'focus-ring'),
+        autoFocus: autoFocus
+    }, /*#__PURE__*/ (0, $9zSjX$react).createElement(Element, {
+        ...styleProps,
+        ...(0, $9zSjX$mergeProps)(buttonProps, hoverProps, focusProps, isPendingProps),
+        id: buttonId,
+        ref: domRef,
+        "data-variant": variant,
+        "data-style": style,
+        "data-static-color": staticColor || undefined,
+        "aria-disabled": isPending ? 'true' : undefined,
+        "aria-label": isPending ? isPendingAriaLiveLabel : buttonProps['aria-label'],
+        "aria-labelledby": isPending ? isPendingAriaLiveLabelledby : buttonProps['aria-labelledby'],
+        className: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs))), 'spectrum-Button', {
+            'spectrum-Button--iconOnly': hasIcon && !hasLabel,
+            'is-disabled': isDisabled || isProgressVisible,
+            'is-active': isPressed,
+            'is-hovered': isHovered,
+            'spectrum-Button--pending': isProgressVisible
+        }, styleProps.className)
+    }, /*#__PURE__*/ (0, $9zSjX$react).createElement((0, $62024859ff9f1f8a$export$8107b24b91795686), {
+        slots: {
+            icon: {
+                id: iconId,
+                size: 'S',
+                UNSAFE_className: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs))), 'spectrum-Icon')
+            },
+            text: {
+                id: textId,
+                UNSAFE_className: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs))), 'spectrum-Button-label')
+            }
+        }
+    }, typeof children === 'string' ? /*#__PURE__*/ (0, $9zSjX$react).createElement((0, $f8cc90fea9436c19$export$5f1af8db9871e1d6), null, children) : children, isPending && /*#__PURE__*/ (0, $9zSjX$react).createElement("div", {
+        "aria-hidden": "true",
+        style: {
+            visibility: isProgressVisible ? 'visible' : 'hidden'
+        },
+        className: (0, $6e6392558d48dfec$export$ce4ab0c55987d1ff)((0, ($parcel$interopDefault($9zSjX$button_vars_cssmjs))), 'spectrum-Button-circleLoader')
+    }, /*#__PURE__*/ (0, $9zSjX$react).createElement((0, $1cfe37e7feefa23d$export$c79b9d6b4cc92af7), {
+        "aria-label": isPendingAriaLiveLabel,
+        isIndeterminate: true,
+        size: "S",
+        staticColor: staticColor
+    })), isPending && /*#__PURE__*/ (0, $9zSjX$react).createElement((0, $9zSjX$react).Fragment, null, /*#__PURE__*/ (0, $9zSjX$react).createElement("div", {
+        "aria-live": isFocused ? ariaLive : 'off'
+    }, isProgressVisible && /*#__PURE__*/ (0, $9zSjX$react).createElement("div", {
+        role: "img",
+        "aria-labelledby": isPendingAriaLiveLabelledby
+    })), /*#__PURE__*/ (0, $9zSjX$react).createElement("div", {
+        id: spinnerId,
+        role: "img",
+        "aria-label": isPendingAriaLiveLabel
+    })))));
+});
+
+
+export {$36a99e6d76bd9d26$export$353f5b6fc5456de1 as Button};
+//# sourceMappingURL=Button.mjs.map