@react-spectrum/s2 1.4.0 → 1.5.1

package/dist/private/Button.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  ButtonRenderProps,\n  Button as RACButton,\n  ButtonProps as RACButtonProps\n} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};\n// @ts-ignore\nimport {Link, LinkProps} from 'react-aria-components/Link';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai';\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline';\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto';\n}\n\nexport interface ButtonProps\n  extends\n    Omit<\n      RACButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport interface LinkButtonProps\n  extends\n    Omit<\n      LinkProps,\n      'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...control({shape: 'pill', wrap: true, icon: true}),\n    position: 'relative',\n    justifyContent: 'center',\n    textAlign: 'start',\n    fontWeight: 'bold',\n    userSelect: 'none',\n    width: 'fit',\n    textDecoration: 'none', // for link buttons\n    transition: 'default',\n    borderStyle: 'solid',\n    borderWidth: {\n      fillStyle: {\n        fill: 0,\n        outline: 2\n      },\n      variant: {\n        premium: 0,\n        genai: 0\n      }\n    },\n    borderColor: {\n      variant: {\n        primary: baseColor('gray-800'),\n        secondary: baseColor('gray-300')\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        variant: {\n          primary: baseColor('transparent-overlay-800'),\n          secondary: baseColor('transparent-overlay-300')\n        },\n        isDisabled: 'transparent-overlay-300'\n      },\n      forcedColors: {\n        default: 'ButtonBorder',\n        isHovered: 'Highlight',\n        isDisabled: 'GrayText'\n      }\n    },\n    backgroundColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('neutral'),\n            secondary: baseColor('gray-100'),\n            accent: {\n              default: lightDark('accent-900', 'accent-700'),\n              isHovered: lightDark('accent-1000', 'accent-600'),\n              isPressed: lightDark('accent-1000', 'accent-600'),\n              isFocusVisible: lightDark('accent-1000', 'accent-600')\n            },\n            negative: {\n              default: lightDark('negative-900', 'negative-700'),\n              isHovered: lightDark('negative-1000', 'negative-600'),\n              isPressed: lightDark('negative-1000', 'negative-600'),\n              isFocusVisible: lightDark('negative-1000', 'negative-600')\n            },\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          default: 'transparent',\n          isHovered: 'gray-100',\n          isPressed: 'gray-100',\n          isFocusVisible: 'gray-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'gray-100',\n              genai: 'gray-100'\n            }\n          }\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-overlay-800'),\n              secondary: baseColor('transparent-overlay-100'),\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            isDisabled: 'transparent-overlay-100'\n          },\n          outline: {\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            default: 'transparent',\n            isHovered: 'transparent-overlay-100',\n            isPressed: 'transparent-overlay-100',\n            isFocusVisible: 'transparent-overlay-100',\n            isDisabled: {\n              default: 'transparent',\n              variant: {\n                premium: 'transparent-overlay-100',\n                genai: 'transparent-overlay-100'\n              }\n            }\n          }\n        }\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonText',\n            isHovered: 'Highlight',\n            isDisabled: 'GrayText'\n          },\n          outline: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'gray-25',\n            secondary: baseColor('neutral'),\n            accent: 'white',\n            negative: 'white',\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          default: baseColor('neutral'),\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'auto',\n              secondary: 'white',\n              premium: 'white',\n              genai: 'white'\n            }\n          },\n          outline: {\n            variant: {\n              premium: 'white',\n              genai: 'white'\n            },\n            default: 'white'\n          }\n        },\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonFace',\n            isDisabled: 'HighlightText'\n          },\n          outline: {\n            default: 'ButtonText',\n            isDisabled: 'GrayText'\n          }\n        }\n      }\n    },\n    '--iconPrimary': {\n      type: 'fill',\n      value: 'currentColor'\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'Highlight'\n    },\n    forcedColorAdjust: 'none',\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: 'inherit',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient(\n          'to bottom right',\n          ['fuchsia-900', 0],\n          ['indigo-900', 66],\n          ['blue-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        )\n      },\n      genai: {\n        default: linearGradient(\n          'to bottom right',\n          ['red-900', 0],\n          ['magenta-900', 33],\n          ['indigo-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        )\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\n\nexport function usePendingState(isPending: boolean) {\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    if (isPending) {\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      setIsProgressVisible(false);\n    }\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n  return {isProgressVisible};\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, variant = 'primary', fillStyle = 'fill', size = 'M', staticColor} = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let {isProgressVisible} = usePendingState(isPending);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                isDisabled: renderProps.isDisabled || isProgressVisible,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    paddingY: '--labelPadding',\n                    order: 1,\n                    visibility: {\n                      isProgressVisible: 'hidden'\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              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\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                  visibility: {\n                    default: 'hidden',\n                    isProgressVisible: 'visible'\n                  }\n                })({isProgressVisible, isPending})}>\n                <ProgressCircle\n                  isIndeterminate\n                  aria-label={stringFormatter.format('button.pending')}\n                  size=\"S\"\n                  staticColor={staticColor}\n                  styles={style({\n                    size: {\n                      size: {\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n        </>\n      )}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for\n * allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  props: LinkButtonProps,\n  ref: FocusableRef<HTMLAnchorElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let {fillStyle = 'fill', size = 'M', variant = 'primary', staticColor, styles, children} = props;\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor,\n            isPending: false\n          },\n          styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\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              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ]\n            ]}>\n            {typeof children === 'string' ? <Text>{children}</Text> : children}\n          </Provider>\n        </>\n      )}\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {\n  ButtonRenderProps,\n  Button as RACButton,\n  ButtonProps as RACButtonProps\n} from 'react-aria-components/Button';\nimport {centerBaseline} from './CenterBaseline';\nimport {ContextValue, Provider} from 'react-aria-components/slots';\nimport {\n  control,\n  getAllowedOverrides,\n  staticColor,\n  StyleProps\n} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport intlMessages from '../intl/*.json';\nimport {linearGradient} from '../style/spectrum-theme' with {type: 'macro'};\nimport {Link, LinkProps} from 'react-aria-components/Link';\nimport {OverlayTriggerStateContext} from 'react-aria-components/Dialog';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from './useDOMRef';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai';\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline';\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL';\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto';\n}\n\nexport interface ButtonProps\n  extends\n    Omit<\n      RACButtonProps,\n      | 'className'\n      | 'style'\n      | 'render'\n      | 'children'\n      | 'onHover'\n      | 'onHoverStart'\n      | 'onHoverEnd'\n      | 'onHoverChange'\n      | 'onClick'\n      | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport interface LinkButtonProps\n  extends\n    Omit<\n      LinkProps,\n      'className' | 'style' | 'render' | 'children' | 'onClick' | keyof GlobalDOMAttributes\n    >,\n    StyleProps,\n    ButtonStyleProps {\n  /** The content to display in the Button. */\n  children: ReactNode;\n}\n\nexport const ButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext =\n  createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>(\n  {\n    ...focusRing(),\n    ...staticColor(),\n    ...control({shape: 'pill', wrap: true, icon: true}),\n    position: 'relative',\n    justifyContent: 'center',\n    textAlign: 'start',\n    fontWeight: 'bold',\n    userSelect: 'none',\n    width: 'fit',\n    textDecoration: 'none', // for link buttons\n    transition: 'default',\n    borderStyle: 'solid',\n    borderWidth: {\n      fillStyle: {\n        fill: 0,\n        outline: 2\n      },\n      variant: {\n        premium: 0,\n        genai: 0\n      }\n    },\n    borderColor: {\n      variant: {\n        primary: baseColor('gray-800'),\n        secondary: baseColor('gray-300')\n      },\n      isDisabled: 'disabled',\n      isStaticColor: {\n        variant: {\n          primary: baseColor('transparent-overlay-800'),\n          secondary: baseColor('transparent-overlay-300')\n        },\n        isDisabled: 'transparent-overlay-300'\n      },\n      forcedColors: {\n        default: 'ButtonBorder',\n        isHovered: 'Highlight',\n        isDisabled: 'GrayText'\n      }\n    },\n    backgroundColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('neutral'),\n            secondary: baseColor('gray-100'),\n            accent: {\n              default: lightDark('accent-900', 'accent-700'),\n              isHovered: lightDark('accent-1000', 'accent-600'),\n              isPressed: lightDark('accent-1000', 'accent-600'),\n              isFocusVisible: lightDark('accent-1000', 'accent-600')\n            },\n            negative: {\n              default: lightDark('negative-900', 'negative-700'),\n              isHovered: lightDark('negative-1000', 'negative-600'),\n              isPressed: lightDark('negative-1000', 'negative-600'),\n              isFocusVisible: lightDark('negative-1000', 'negative-600')\n            },\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          },\n          default: 'transparent',\n          isHovered: 'gray-100',\n          isPressed: 'gray-100',\n          isFocusVisible: 'gray-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'gray-100',\n              genai: 'gray-100'\n            }\n          }\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-overlay-800'),\n              secondary: baseColor('transparent-overlay-100'),\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            isDisabled: 'transparent-overlay-100'\n          },\n          outline: {\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            },\n            default: 'transparent',\n            isHovered: 'transparent-overlay-100',\n            isPressed: 'transparent-overlay-100',\n            isFocusVisible: 'transparent-overlay-100',\n            isDisabled: {\n              default: 'transparent',\n              variant: {\n                premium: 'transparent-overlay-100',\n                genai: 'transparent-overlay-100'\n              }\n            }\n          }\n        }\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonText',\n            isHovered: 'Highlight',\n            isDisabled: 'GrayText'\n          },\n          outline: 'ButtonFace'\n        }\n      }\n    },\n    color: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'gray-25',\n            secondary: baseColor('neutral'),\n            accent: 'white',\n            negative: 'white',\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        },\n        outline: {\n          default: baseColor('neutral'),\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          isDisabled: 'disabled'\n        }\n      },\n      isStaticColor: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'auto',\n              secondary: {\n                default: 'transparent-overlay-1000',\n                isHovered: 'transparent-overlay-1000',\n                isFocusVisible: 'transparent-overlay-1000',\n                isPressed: 'transparent-overlay-1000'\n              },\n              premium: 'white',\n              genai: 'white'\n            }\n          },\n          outline: {\n            variant: {\n              premium: 'white',\n              genai: 'white'\n            },\n            default: {\n              default: 'transparent-overlay-1000',\n              isHovered: 'transparent-overlay-1000',\n              isFocusVisible: 'transparent-overlay-1000',\n              isPressed: 'transparent-overlay-1000'\n            }\n          }\n        },\n        isDisabled: 'transparent-overlay-400'\n      },\n      forcedColors: {\n        fillStyle: {\n          fill: {\n            default: 'ButtonFace',\n            isDisabled: 'HighlightText'\n          },\n          outline: {\n            default: 'ButtonText',\n            isDisabled: 'GrayText'\n          }\n        }\n      }\n    },\n    '--iconPrimary': {\n      type: 'fill',\n      value: 'currentColor'\n    },\n    outlineColor: {\n      default: 'focus-ring',\n      isStaticColor: 'transparent-overlay-1000',\n      forcedColors: 'Highlight'\n    },\n    forcedColorAdjust: 'none',\n    disableTapHighlight: true\n  },\n  getAllowedOverrides()\n);\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: 'inherit',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient(\n          'to bottom right',\n          ['fuchsia-900', 0],\n          ['indigo-900', 66],\n          ['blue-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['fuchsia-1000', 0],\n          ['indigo-1000', 66],\n          ['blue-1000', 100]\n        )\n      },\n      genai: {\n        default: linearGradient(\n          'to bottom right',\n          ['red-900', 0],\n          ['magenta-900', 33],\n          ['indigo-900', 100]\n        ),\n        isHovered: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isPressed: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        ),\n        isFocusVisible: linearGradient(\n          'to bottom right',\n          ['red-1000', 0],\n          ['magenta-1000', 33],\n          ['indigo-1000', 100]\n        )\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\n\nexport function usePendingState(isPending: boolean) {\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n    if (isPending) {\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      setIsProgressVisible(false);\n    }\n    return () => {\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n  return {isProgressVisible};\n}\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: FocusableRef<HTMLButtonElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {isPending = false, variant = 'primary', fillStyle = 'fill', size = 'M', staticColor} = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let {isProgressVisible} = usePendingState(isPending);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            isDisabled: renderProps.isDisabled || isProgressVisible,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor\n          },\n          props.styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                isDisabled: renderProps.isDisabled || isProgressVisible,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\n                  styles: style({\n                    paddingY: '--labelPadding',\n                    order: 1,\n                    visibility: {\n                      isProgressVisible: 'hidden'\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              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0,\n                    visibility: {\n                      isProgressVisible: 'hidden'\n                    }\n                  })({isProgressVisible})\n                }\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                  visibility: {\n                    default: 'hidden',\n                    isProgressVisible: 'visible'\n                  }\n                })({isProgressVisible, isPending})}>\n                <ProgressCircle\n                  isIndeterminate\n                  aria-label={stringFormatter.format('button.pending')}\n                  size=\"S\"\n                  staticColor={staticColor}\n                  styles={style({\n                    size: {\n                      size: {\n                        S: 14,\n                        M: 18,\n                        L: 20,\n                        XL: 24\n                      }\n                    }\n                  })({size})}\n                />\n              </div>\n            )}\n          </Provider>\n        </>\n      )}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for\n * allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(\n  props: LinkButtonProps,\n  ref: FocusableRef<HTMLAnchorElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let {fillStyle = 'fill', size = 'M', variant = 'primary', staticColor, styles, children} = props;\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps =>\n        (props.UNSAFE_className || '') +\n        button(\n          {\n            ...renderProps,\n            // Retain hover styles when an overlay is open.\n            isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n            variant,\n            fillStyle,\n            size,\n            staticColor,\n            isStaticColor: !!staticColor,\n            isPending: false\n          },\n          styles\n        )\n      }>\n      {renderProps => (\n        <>\n          {variant === 'genai' || variant === 'premium' ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                variant\n              })}\n            />\n          ) : null}\n          <Provider\n            values={[\n              [SkeletonContext, null],\n              [\n                TextContext,\n                {\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              ],\n              [\n                IconContext,\n                {\n                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n                  styles: style({\n                    size: fontRelative(20),\n                    marginStart: '--iconMargin',\n                    flexShrink: 0\n                  })\n                }\n              ]\n            ]}>\n            {typeof children === 'string' ? <Text>{children}</Text> : children}\n          </Provider>\n        </>\n      )}\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}