@react-spectrum/s2 3.0.0-nightly-e7053dd8f-250108 → 3.0.0-nightly-e4497fdb6-250110

package/dist/Button.css

@@ -1,9 +1,9 @@
 @layer _.a {
-  ._La {
+  ._Ma {
     outline-style: none;
   }
 
-  ._Lb {
+  ._Mb {
     outline-style: solid;
   }
 
@@ -15,11 +15,11 @@
     outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Nc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._M-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
@@ -31,23 +31,23 @@
     --s2-container-bg: black;
   }
 
-  .Uc {
+  .Vc {
     position: relative;
   }
 
-  ._Zd {
+  ._0d {
     display: flex;
   }
 
-  ._1d {
+  ._2d {
     align-items: baseline;
   }
 
-  ._2d {
+  ._3d {
     justify-content: center;
   }
 
-  ._ja {
+  ._ka {
     text-align: start;
   }
 
@@ -55,37 +55,37 @@
     column-gap: .428571em;
   }
 
-  ._ca {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._de {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._da {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._dc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._dg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._di {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._ed {
+  ._fd {
     font-variation-settings: "wght" 700;
     font-synthesis-weight: none;
     font-weight: 700;
   }
 
-  ._fa {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -125,7 +125,7 @@
     color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .__Da {
+  .__Ea {
     -webkit-user-select: none;
     user-select: none;
   }
@@ -134,23 +134,23 @@
     min-height: var(--o);
   }
 
-  ._vg {
+  ._wg {
     border-start-start-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._wg {
+  ._xg {
     border-start-end-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._xg {
+  ._yg {
     border-end-start-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  ._yg {
+  ._zg {
     border-end-end-radius: calc(var(--k, var(--o, 9999px)) / 2);
   }
 
-  .__na {
+  .__oa {
     box-sizing: border-box;
   }
 
@@ -158,7 +158,7 @@
     width: fit-content;
   }
 
-  ._ld {
+  ._md {
     text-decoration: none;
   }
 
@@ -178,18 +178,6 @@
     padding-bottom: 0;
   }
 
-  ._Oa {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
-  }
-
-  ._Q-375x7f {
-    transition-duration: .15s;
-  }
-
-  ._Ra {
-    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
-  }
-
   .wa {
     border-style: solid;
   }
@@ -262,26 +250,6 @@
     border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  ._B-riuwfd {
-    background-image: linear-gradient(96deg, var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #d549eb) 0%, var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe) 66%, var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff) 100%);
-  }
-
-  ._B-2xhv0x {
-    background-image: linear-gradient(96deg, var(--lightningcss-light, #9c28af) var(--lightningcss-dark, #e85bfd) 0%, var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe) 66%, var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe) 100%);
-  }
-
-  ._B-u0nzys {
-    background-image: linear-gradient(96deg, var(--lightningcss-light, #d73220) var(--lightningcss-dark, #fc432e) 0%, var(--lightningcss-light, #d92361) var(--lightningcss-dark, #f37) 33%, var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe) 100%);
-  }
-
-  ._B-1gcd5pl {
-    background-image: linear-gradient(96deg, var(--lightningcss-light, #b72818) var(--lightningcss-dark, #ff6756) 0%, var(--lightningcss-light, #ba1650) var(--lightningcss-dark, #ff6095) 33%, var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe) 100%);
-  }
-
-  ._B-yknrp1 {
-    background-image: none;
-  }
-
   .b-375toh {
     background-color: var(--b);
   }
@@ -290,11 +258,11 @@
     --iconPrimary: currentColor;
   }
 
-  ._zb {
+  ._Ab {
     forced-color-adjust: none;
   }
 
-  .__R-yksgrp {
+  .__S-yksgrp {
     -webkit-tap-highlight-color: #0000;
   }
 
@@ -386,27 +354,122 @@
     --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .11);
   }
 
-  .Ua {
+  .Ya {
+    top: 0;
+  }
+
+  ._aa {
+    bottom: 0;
+  }
+
+  .Wa {
+    inset-inline-start: 0;
+  }
+
+  .Xa {
+    inset-inline-end: 0;
+  }
+
+  .__R-3hmpv {
+    z-index: -1;
+  }
+
+  ._Pa {
+    transition-property: color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
+  }
+
+  ._R-375x7f {
+    transition-duration: .15s;
+  }
+
+  ._Sa {
+    transition-timing-function: cubic-bezier(.45, 0, .4, 1);
+  }
+
+  ._w-17zqamw {
+    border-start-start-radius: inherit;
+  }
+
+  ._x-17zqamw {
+    border-start-end-radius: inherit;
+  }
+
+  ._y-17zqamw {
+    border-end-start-radius: inherit;
+  }
+
+  ._z-17zqamw {
+    border-end-end-radius: inherit;
+  }
+
+  ._C-1bwg29 {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #b539c8) var(--lightningcss-dark, #d549eb);
+    --g1: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe);
+    --g2: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #5681ff);
+    --gp: --g0, --g1, --g2;
+  }
+
+  ._C-zh0yy1 {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #9c28af) var(--lightningcss-dark, #e85bfd);
+    --g1: var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe);
+    --g2: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #6995fe);
+    --gp: --g0, --g1, --g2;
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 66%, var(--g2) 100%);
+  }
+
+  ._C-17z6g7s {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #fc432e);
+    --g1: var(--lightningcss-light, #d92361) var(--lightningcss-dark, #f37);
+    --g2: var(--lightningcss-light, #7155fa) var(--lightningcss-dark, #8077fe);
+    --gp: --g0, --g1, --g2;
+  }
+
+  ._C-x40uwg {
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    --g0: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #ff6756);
+    --g1: var(--lightningcss-light, #ba1650) var(--lightningcss-dark, #ff6095);
+    --g2: var(--lightningcss-light, #6338ee) var(--lightningcss-dark, #8b8dfe);
+    --gp: --g0, --g1, --g2;
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+    background-image: linear-gradient(to bottom right, var(--g0) 0%, var(--g1) 33%, var(--g2) 100%);
+  }
+
+  ._C-qey189 {
+    background-image: none;
+  }
+
+  ._Ba {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    color-scheme: light;
+  }
+
+  .Va {
     position: absolute;
   }
 
-  .X-3760fj {
+  .Y-3760fj {
     top: 50%;
   }
 
-  .Y-3760fj {
+  .Z-3760fj {
     left: 50%;
   }
 
-  .T-1tktoou {
+  .U-1uu3e5e {
     transform: translate(-50%, -50%);
   }
 
-  ._K-3t1x {
+  ._L-3t1x {
     opacity: 0;
   }
 
-  ._K-3t1y {
+  ._L-3t1y {
     opacity: 1;
   }
 
@@ -450,11 +513,11 @@
     padding-bottom: var(--labelPadding);
   }
 
-  .__A-3t1y {
+  .__B-3t1y {
     order: 1;
   }
 
-  .__A-3t1x {
+  .__B-3t1x {
     order: 0;
   }
 
@@ -470,21 +533,21 @@
     margin-inline-start: var(--iconMargin);
   }
 
-  ._8-3t1x {
+  ._9-3t1x {
     flex-shrink: 0;
   }
 }
 
 @layer _.b {
-  ._1-soocicc:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
+  ._2-soocicc:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     align-items: center;
   }
 
-  ._c-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._f-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
+  ._g-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
     line-height: 1.5;
   }
 
@@ -516,7 +579,7 @@
     padding-inline-end: 0;
   }
 
-  ._b-soocicb:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
+  ._c-soocicb:has([slot="icon"]):not(:has([data-rsp-slot="text"])) {
     aspect-ratio: 1;
   }
 
@@ -526,37 +589,37 @@
 }
 
 @layer _.c {
-  ._c-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._c-enzykdd:lang(ja) {
+  ._d-enzykdd:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  ._c-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._c-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._c-1uotwbwg:lang(zh-hant) {
+  ._d-1uotwbwg:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  ._c-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
@@ -597,10 +660,6 @@
       border-color: graytext;
     }
 
-    ._Ba-yknrp1 {
-      background-image: none;
-    }
-
     .-_375toh_b-a_____K {
       --b: ButtonText;
     }
@@ -616,6 +675,10 @@
     .-_375toh_b-a_____J {
       --b: ButtonFace;
     }
+
+    ._Ca-qey189 {
+      background-image: none;
+    }
   }
 }
 
@@ -625,28 +688,46 @@
       column-gap: .470588em;
     }
 
-    ._dbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._dbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._dbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._dbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._dbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }
 }
 
+@property --g0 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --g1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
+@property --g2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+
 .\.:not(#a#b) {
   all: revert-layer;
 }

package/dist/Button.css.map

@@ -1 +1 @@
-{"mappings":"ACmEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4TQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/XL;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;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiSK","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, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  position: 'relative',\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    [iconOnly]: 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    [iconOnly]: 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    [iconOnly]: 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    },\n    variant: {\n      premium: 0,\n      genai: 0\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    isStaticColor: {\n      variant: {\n        primary: baseColor('transparent-overlay-800'),\n        secondary: baseColor('transparent-overlay-300')\n      },\n      isDisabled: 'transparent-overlay-300'\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n        isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n      },\n      genai: {\n        default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n        isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative',\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        variant: {\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: {\n          default: 'transparent',\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          }\n        }\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100'),\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          variant: {\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            }\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white',\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        variant: {\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800'),\n            premium: 'white',\n            genai: 'white'\n          }\n        },\n        outline: {\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          default: baseColor('transparent-overlay-800')\n        }\n      },\n      isDisabled: 'transparent-overlay-400'\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isPending,\n    variant = 'primary',\n    fillStyle = 'fill',\n    size = 'M',\n    staticColor\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n\n    if (isPending) {\n      // Start timer when isPending is set to true.\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      // Exit loading state when isPending is set to false. */\n      setIsProgressVisible(false);\n    }\n    return () => {\n      // Clean up on unmount or when user removes isPending prop before entering loading state.\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        isDisabled: renderProps.isDisabled || isProgressVisible,\n        variant,\n        fillStyle,\n        size,\n        staticColor,\n        isStaticColor: !!staticColor\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({\n              paddingY: '--labelPadding',\n              order: 1,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({\n              size: fontRelative(20),\n              marginStart: '--iconMargin',\n              flexShrink: 0,\n              opacity: {\n                default: 1,\n                isProgressVisible: 0\n              }\n            })({isProgressVisible})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n        {isPending &&\n          <div\n            className={style({\n              position: 'absolute',\n              top: '[50%]',\n              left: '[50%]',\n              transform: 'translate(-50%, -50%)',\n              opacity: {\n                default: 0,\n                isProgressVisible: 1\n              }\n            })({isProgressVisible, isPending})}>\n            <ProgressCircle\n              isIndeterminate\n              aria-label={stringFormatter.format('button.pending')}\n              size=\"S\"\n              staticColor={staticColor}\n              styles={style({\n                size: {\n                  size: {\n                    S: 14,\n                    M: 18,\n                    L: 20,\n                    XL: 24\n                  }\n                }\n              })({size})} />\n          </div>\n        }\n      </Provider>\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor,\n        isPending: false\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({paddingY: '--labelPadding', order: 1}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.css.map"}
+{"mappings":"ACmEe;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwNE;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;;;;;EAAA;;;;;;;;;;EAAA;;;;EAAA;;;;;;;EAmIQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA+CJ;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA/ZL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAwNE;;;;;;AAxNF;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA0OS;;;;;;AAAA;;;;;;AAAA;;;;;;AAlBP","sources":["47c518d02ef77298","packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["@import \"84fda4530d887d61\";\n@import \"58029840d81c849c\";\n@import \"741c49b4968f5e00\";\n@import \"d2d5d6a0faea83be\";\n@import \"7420f4e12e7ef59c\";\n@import \"b849e4ca63c3cc49\";\n@import \"36ff0e1e9ec0e357\";\n@import \"5ed629d4d0b8048c\";\n@import \"341672feb3593eb4\";\n@import \"e68e1721c6627faa\";\n@import \"42efd4ec8049a799\";\n@import \"95ab9abea37ea72d\";\n@import \"8b2fc5f468b9d46d\";\n@import \"52b2e217b498e7a2\";\n@import \"9ea4c114cf8bdeec\";\n@import \"ab8478361150f3f7\";\n@import \"981e6619126f3569\";\n@import \"bcbcf345b1725911\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  position: 'relative',\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    [iconOnly]: 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    [iconOnly]: 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    [iconOnly]: 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    },\n    variant: {\n      premium: 0,\n      genai: 0\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    isStaticColor: {\n      variant: {\n        primary: baseColor('transparent-overlay-800'),\n        secondary: baseColor('transparent-overlay-300')\n      },\n      isDisabled: 'transparent-overlay-300'\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative',\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        variant: {\n          premium: 'gray-100',\n          genai: 'gray-100'\n        },\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: {\n          default: 'transparent',\n          variant: {\n            premium: 'gray-100',\n            genai: 'gray-100'\n          }\n        }\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100'),\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          variant: {\n            premium: 'transparent-overlay-100',\n            genai: 'transparent-overlay-100'\n          },\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: {\n            default: 'transparent',\n            variant: {\n              premium: 'transparent-overlay-100',\n              genai: 'transparent-overlay-100'\n            }\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white',\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        variant: {\n          premium: 'white',\n          genai: 'white'\n        },\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800'),\n            premium: 'white',\n            genai: 'white'\n          }\n        },\n        outline: {\n          variant: {\n            premium: 'white',\n            genai: 'white'\n          },\n          default: baseColor('transparent-overlay-800')\n        }\n      },\n      isDisabled: 'transparent-overlay-400'\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    isStaticColor: 'transparent-overlay-1000',\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Put the gradient background on a separate element from the button to work around a Safari\n// bug where transitions of custom properties cause layout flickering if any properties use rems. 🤣\n// https://bugs.webkit.org/show_bug.cgi?id=285622\nconst gradient = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: -1,\n  transition: 'default',\n  borderRadius: '[inherit]',\n  backgroundImage: {\n    variant: {\n      premium: {\n        default: linearGradient('to bottom right', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n        isHovered: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n      },\n      genai: {\n        default: linearGradient('to bottom right', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n        isHovered: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isPressed: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n        isFocusVisible: linearGradient('to bottom right', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n      }\n    },\n    isDisabled: 'none',\n    forcedColors: 'none'\n  },\n  // Force gradient colors to remain static between light and dark theme.\n  colorScheme: {\n    variant: {\n      premium: 'light',\n      genai: 'light'\n    }\n  }\n});\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n  props = useFormProps(props);\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n  let {\n    isPending,\n    variant = 'primary',\n    fillStyle = 'fill',\n    size = 'M',\n    staticColor\n  } = props;\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  let [isProgressVisible, setIsProgressVisible] = useState(false);\n  useEffect(() => {\n    let timeout: ReturnType<typeof setTimeout>;\n\n    if (isPending) {\n      // Start timer when isPending is set to true.\n      timeout = setTimeout(() => {\n        setIsProgressVisible(true);\n      }, 1000);\n    } else {\n      // Exit loading state when isPending is set to false. */\n      setIsProgressVisible(false);\n    }\n    return () => {\n      // Clean up on unmount or when user removes isPending prop before entering loading state.\n      clearTimeout(timeout);\n    };\n  }, [isPending]);\n\n  return (\n    <RACButton\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        isDisabled: renderProps.isDisabled || isProgressVisible,\n        variant,\n        fillStyle,\n        size,\n        staticColor,\n        isStaticColor: !!staticColor\n      }, props.styles)}>\n      {(renderProps) => (<>\n        {variant === 'genai' || variant === 'premium' \n          ? (\n            <span\n              className={gradient({\n                ...renderProps,\n                // Retain hover styles when an overlay is open.\n                isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n                isDisabled: renderProps.isDisabled || isProgressVisible,\n                variant\n              })} />\n             )\n          : null}\n        <Provider\n          values={[\n            [SkeletonContext, null],\n            [TextContext, {\n              styles: style({\n                paddingY: '--labelPadding',\n                order: 1,\n                opacity: {\n                  default: 1,\n                  isProgressVisible: 0\n                }\n              })({isProgressVisible}),\n              // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n              'data-rsp-slot': 'text'\n            }],\n            [IconContext, {\n              render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n              styles: style({\n                size: fontRelative(20),\n                marginStart: '--iconMargin',\n                flexShrink: 0,\n                opacity: {\n                  default: 1,\n                  isProgressVisible: 0\n                }\n              })({isProgressVisible})\n            }]\n          ]}>\n          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n          {isPending &&\n            <div\n              className={style({\n                position: 'absolute',\n                top: '[50%]',\n                left: '[50%]',\n                transform: 'translate(-50%, -50%)',\n                opacity: {\n                  default: 0,\n                  isProgressVisible: 1\n                }\n              })({isProgressVisible, isPending})}>\n              <ProgressCircle\n                isIndeterminate\n                aria-label={stringFormatter.format('button.pending')}\n                size=\"S\"\n                staticColor={staticColor}\n                styles={style({\n                  size: {\n                    size: {\n                      S: 14,\n                      M: 18,\n                      L: 20,\n                      XL: 24\n                    }\n                  }\n                })({size})} />\n            </div>\n          }\n        </Provider>\n      </>)}\n    </RACButton>\n  );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n  props = useFormProps(props);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n  return (\n    <Link\n      {...props}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + button({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        variant: props.variant || 'primary',\n        fillStyle: props.fillStyle || 'fill',\n        size: props.size || 'M',\n        staticColor: props.staticColor,\n        isStaticColor: !!props.staticColor,\n        isPending: false\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {\n            styles: style({paddingY: '--labelPadding', order: 1}),\n            // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n            'data-rsp-slot': 'text'\n          }],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </Link>\n  );\n});\n"],"names":[],"version":3,"file":"Button.css.map"}