@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-fee532d6a-241217

package/dist/Button.css

@@ -11,12 +11,8 @@
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .dc {
-    outline-color: #fff;
-  }
-
-  .db {
-    outline-color: #000;
+  .d_____G {
+    outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
   ._Nc {
@@ -27,6 +23,14 @@
     outline-offset: 2px;
   }
 
+  .-_1de2x0q_b-c {
+    --s2-container-bg: white;
+  }
+
+  .-_1de2x0q_b-b {
+    --s2-container-bg: black;
+  }
+
   .Uc {
     position: relative;
   }
@@ -89,6 +93,10 @@
     color: var(--lightningcss-light, #fff) var(--lightningcss-dark, #111);
   }
 
+  .ac {
+    color: #fff;
+  }
+
   .an {
     color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
@@ -101,36 +109,20 @@
     color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
   }
 
-  .ab {
-    color: #000;
+  .a_____R {
+    color: lch(from var(--b, var(--s2-container-bg)) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  .a_____e {
-    color: #ffffffd9;
+  .a_____E {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .a_____f {
-    color: #fffffff0;
+  .a_____F {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .a_____a {
-    color: #ffffff36;
-  }
-
-  .ac {
-    color: #fff;
-  }
-
-  .a_____r {
-    color: #000000d6;
-  }
-
-  .a_____s {
-    color: #000000ed;
-  }
-
-  .a_____n {
-    color: #00000038;
+  .a_____A {
+    color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
   .__Da {
@@ -250,152 +242,128 @@
     border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
   }
 
-  .c_____e {
-    border-color: #ffffffd9;
+  .c_____E {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .c_____f {
-    border-color: #fffffff0;
+  .c_____F {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .c_____a {
-    border-color: #ffffff36;
+  .c_____A {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .c____9 {
-    border-color: #ffffff2b;
+  .c_____z {
+    border-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .17);
   }
 
-  .c_____r {
-    border-color: #000000d6;
+  .b-375toh {
+    background-color: var(--b);
   }
 
-  .c_____s {
-    border-color: #000000ed;
-  }
-
-  .c_____n {
-    border-color: #00000038;
-  }
-
-  .c_____m {
-    border-color: #00000026;
-  }
-
-  .bn {
-    background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
-  }
-
-  .bo {
-    background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
-  }
-
-  .bh {
-    background-color: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
-  }
-
-  .b_____E {
-    background-color: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
-  }
-
-  .b_____F {
-    background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
+  .-rwx0fg_e-b {
+    --iconPrimary: currentColor;
   }
 
-  .b_____K {
-    background-color: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
+  ._zb {
+    forced-color-adjust: none;
   }
 
-  .b_____L {
-    background-color: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
+  .__R-yksgrp {
+    -webkit-tap-highlight-color: #0000;
   }
 
-  .bg {
-    background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
+  .-_375tou_o-f {
+    --o: calc(2rem * var(--s2-scale));
   }
 
-  .b_____e {
-    background-color: #ffffffd9;
+  .-_375tou_o-g {
+    --o: calc(1.25rem * var(--s2-scale));
   }
 
-  .b_____f {
-    background-color: #fffffff0;
+  .-_375tou_o-h {
+    --o: calc(1.5rem * var(--s2-scale));
   }
 
-  .b____8 {
-    background-color: #ffffff24;
+  .-_375tou_o-i {
+    --o: calc(2.5rem * var(--s2-scale));
   }
 
-  .b____7 {
-    background-color: #ffffff1c;
+  .-_375tou_o-j {
+    --o: calc(3rem * var(--s2-scale));
   }
 
-  .b_____r {
-    background-color: #000000d6;
+  .-_375tp0_u-a {
+    --u: 0px;
   }
 
-  .b_____s {
-    background-color: #000000ed;
+  .-_375tp0_u-c {
+    --u: 2px;
   }
 
-  .b_____l {
-    background-color: #0000001f;
+  .-_375tp1_v-a {
+    --v: 0px;
   }
 
-  .b_____k {
-    background-color: #00000017;
+  .-_375tp1_v-c {
+    --v: 2px;
   }
 
-  .ba {
-    background-color: #0000;
+  .-_375toh_b-n {
+    --b: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
   }
 
-  .-rwx0fg_e-b {
-    --iconPrimary: currentColor;
+  .-_375toh_b-o {
+    --b: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
   }
 
-  ._zb {
-    forced-color-adjust: none;
+  .-_375toh_b-h {
+    --b: var(--lightningcss-light, #e1e1e1) var(--lightningcss-dark, #323232);
   }
 
-  .__R-yksgrp {
-    -webkit-tap-highlight-color: #0000;
+  .-_375toh_b-_____R {
+    --b: var(--lightningcss-light, #3b63fb) var(--lightningcss-dark, #4069fd);
   }
 
-  .-_375tou_o-f {
-    --o: calc(2rem * var(--s2-scale));
+  .-_375toh_b-_____S {
+    --b: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
   }
 
-  .-_375tou_o-g {
-    --o: calc(1.25rem * var(--s2-scale));
+  .-_375toh_b-_____X {
+    --b: var(--lightningcss-light, #d73220) var(--lightningcss-dark, #df3422);
   }
 
-  .-_375tou_o-h {
-    --o: calc(1.5rem * var(--s2-scale));
+  .-_375toh_b-_____Y {
+    --b: var(--lightningcss-light, #b72818) var(--lightningcss-dark, #cd2e1d);
   }
 
-  .-_375tou_o-i {
-    --o: calc(2.5rem * var(--s2-scale));
+  .-_375toh_b-g {
+    --b: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  .-_375tou_o-j {
-    --o: calc(3rem * var(--s2-scale));
+  .-_375toh_b-_____E {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .85);
   }
 
-  .-_375tp0_u-a {
-    --u: 0px;
+  .-_375toh_b-_____F {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .94);
   }
 
-  .-_375tp0_u-c {
-    --u: 2px;
+  .-_375toh_b-_____y {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .14);
   }
 
-  .-_375tp1_v-a {
-    --v: 0px;
+  .-_375toh_b-_____x {
+    --b: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .11);
   }
 
-  .-_375tp1_v-c {
-    --v: 2px;
+  .-_375toh_b-a {
+    --b: transparent;
   }
 
   .Ua {
@@ -577,52 +545,52 @@
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .da_____z {
+    .da_____M {
       outline-color: highlight;
     }
 
-    .aa_____w {
+    .aa_____J {
       color: buttonface;
     }
 
-    .aa_____A {
+    .aa_____N {
       color: highlighttext;
     }
 
-    .aa_____x {
+    .aa_____K {
       color: buttontext;
     }
 
-    .aa_____B {
+    .aa_____O {
       color: graytext;
     }
 
-    .ca_____v {
+    .ca_____I {
       border-color: buttonborder;
     }
 
-    .ca_____z {
+    .ca_____M {
       border-color: highlight;
     }
 
-    .ca_____B {
+    .ca_____O {
       border-color: graytext;
     }
 
-    .ba_____x {
-      background-color: buttontext;
+    .-_375toh_b-a_____K {
+      --b: ButtonText;
     }
 
-    .ba_____z {
-      background-color: highlight;
+    .-_375toh_b-a_____M {
+      --b: Highlight;
     }
 
-    .ba_____B {
-      background-color: graytext;
+    .-_375toh_b-a_____O {
+      --b: GrayText;
     }
 
-    .ba_____w {
-      background-color: buttonface;
+    .-_375toh_b-a_____J {
+      --b: ButtonFace;
     }
   }
 }

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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4SQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6CF;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9WL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAiRK","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, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n  /**\n   * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'accent' | 'negative',\n  /**\n   * The background style of the Button.\n   *\n   * @default 'fill'\n   */\n  fillStyle?: 'fill' | 'outline',\n  /**\n   * The size of the Button.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the Button appears over a color background. */\n  staticColor?: 'white' | 'black'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n  /** The content to display in the Button. */\n  children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps>({\n  ...focusRing(),\n  position: 'relative',\n  display: 'flex',\n  alignItems: {\n    default: 'baseline',\n    [iconOnly]: 'center'\n  },\n  justifyContent: 'center',\n  textAlign: 'start',\n  columnGap: 'text-to-visual',\n  font: 'control',\n  fontWeight: 'bold',\n  userSelect: 'none',\n  minHeight: 'control',\n  minWidth: {\n    [iconOnly]: 'control'\n  },\n  borderRadius: 'pill',\n  boxSizing: 'border-box',\n  width: 'fit',\n  textDecoration: 'none', // for link buttons\n  paddingX: {\n    default: 'pill',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  aspectRatio: {\n    [iconOnly]: 'square'\n  },\n  transition: 'default',\n  borderStyle: 'solid',\n  borderWidth: {\n    fillStyle: {\n      fill: 0,\n      outline: 2\n    }\n  },\n  '--labelPadding': {\n    type: 'paddingTop',\n    value: centerPadding()\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  borderColor: {\n    variant: {\n      primary: baseColor('gray-800'),\n      secondary: baseColor('gray-300')\n    },\n    isDisabled: 'disabled',\n    staticColor: {\n      white: {\n        variant: {\n          primary: baseColor('transparent-white-800'),\n          secondary: baseColor('transparent-white-300')\n        },\n        isDisabled: 'transparent-white-300'\n      },\n      black: {\n        variant: {\n          primary: baseColor('transparent-black-800'),\n          secondary: baseColor('transparent-black-300')\n        },\n        isDisabled: 'transparent-black-300'\n      }\n    },\n    forcedColors: {\n      default: 'ButtonBorder',\n      isHovered: 'Highlight',\n      isDisabled: 'GrayText'\n    }\n  },\n  backgroundColor: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'neutral',\n          secondary: baseColor('gray-100'),\n          accent: 'accent',\n          negative: 'negative'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: 'transparent'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-white-800'),\n              secondary: baseColor('transparent-white-100')\n            },\n            isDisabled: 'transparent-white-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-white-100',\n            isPressed: 'transparent-white-100',\n            isFocusVisible: 'transparent-white-100',\n            isDisabled: 'transparent'\n          }\n        }\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: baseColor('transparent-black-800'),\n              secondary: baseColor('transparent-black-100')\n            },\n            isDisabled: 'transparent-black-100'\n          },\n          outline: {\n            default: 'transparent',\n            isHovered: 'transparent-black-100',\n            isPressed: 'transparent-black-100',\n            isFocusVisible: 'transparent-black-100',\n            isDisabled: 'transparent'\n          }\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    staticColor: {\n      white: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'black',\n              secondary: baseColor('transparent-white-800')\n            }\n          },\n          outline: baseColor('transparent-white-800')\n        },\n        isDisabled: 'transparent-white-400'\n      },\n      black: {\n        fillStyle: {\n          fill: {\n            variant: {\n              primary: 'white',\n              secondary: baseColor('transparent-black-800')\n            }\n          },\n          outline: baseColor('transparent-black-800')\n        },\n        isDisabled: 'transparent-black-400'\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonFace',\n          isDisabled: 'HighlightText'\n        },\n        outline: {\n          default: 'ButtonText',\n          isDisabled: 'GrayText'\n        }\n      }\n    }\n  },\n  '--iconPrimary': {\n    type: 'fill',\n    value: 'currentColor'\n  },\n  outlineColor: {\n    default: 'focus-ring',\n    staticColor: {\n      white: 'white',\n      black: 'black'\n    },\n    forcedColors: 'Highlight'\n  },\n  forcedColorAdjust: 'none',\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\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      }, 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        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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgQQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeD;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA8CF;;;;EAAA;;;;EAAA;;;;EAKsC;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnUL;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAqOK","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, 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',\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  },\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        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'transparent',\n        isHovered: 'gray-100',\n        isPressed: 'gray-100',\n        isFocusVisible: 'gray-100',\n        isDisabled: 'transparent'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: baseColor('transparent-overlay-800'),\n            secondary: baseColor('transparent-overlay-100')\n          },\n          isDisabled: 'transparent-overlay-100'\n        },\n        outline: {\n          default: 'transparent',\n          isHovered: 'transparent-overlay-100',\n          isPressed: 'transparent-overlay-100',\n          isFocusVisible: 'transparent-overlay-100',\n          isDisabled: 'transparent'\n        }\n      }\n    },\n    forcedColors: {\n      fillStyle: {\n        fill: {\n          default: 'ButtonText',\n          isHovered: 'Highlight',\n          isDisabled: 'GrayText'\n        },\n        outline: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    fillStyle: {\n      fill: {\n        variant: {\n          primary: 'gray-25',\n          secondary: 'neutral',\n          accent: 'white',\n          negative: 'white'\n        },\n        isDisabled: 'disabled'\n      },\n      outline: {\n        default: 'neutral',\n        isDisabled: 'disabled'\n      }\n    },\n    isStaticColor: {\n      fillStyle: {\n        fill: {\n          variant: {\n            primary: 'auto',\n            secondary: baseColor('transparent-overlay-800')\n          }\n        },\n        outline: baseColor('transparent-overlay-800')\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"}