@react-spectrum/s2 3.0.0-nightly-4b8b33a02-250211 → 3.0.0-nightly-260eb700f-250213

package/dist/ActionButton.css

@@ -1,25 +1,25 @@
 @layer _.a {
-  ._Pa {
+  ._Ma {
     outline-style: none;
   }
 
-  ._Pb {
+  ._Mb {
     outline-style: solid;
   }
 
-  .cx {
+  .dx {
     outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
   }
 
-  .c_____G {
+  .d_____G {
     outline-color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / 1);
   }
 
-  ._Rc {
+  ._Oc {
     outline-width: 2px;
   }
 
-  ._Q-3t1z {
+  ._N-3t1z {
     outline-offset: 2px;
   }
 
@@ -31,65 +31,65 @@
     --s2-container-bg: black;
   }
 
-  ._3d {
+  ._0d {
     display: flex;
   }
 
-  ._5c {
+  ._2c {
     align-items: center;
   }
 
-  ._6d {
+  ._3d {
     justify-content: center;
   }
 
-  .iG {
+  .jG {
     column-gap: .428571em;
   }
 
-  .__c-3t1y {
+  ._9-3t1y {
     flex-shrink: 1;
   }
 
-  .__d-3t1y {
+  .__a-3t1y {
     flex-grow: 1;
   }
 
-  .ga {
+  .ha {
     flex-basis: 0;
   }
 
-  ._ga {
+  ._da {
     font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._he {
+  ._ee {
     font-size: .875rem;
   }
 
-  ._ha {
+  ._ea {
     font-size: .6875rem;
   }
 
-  ._hc {
+  ._ec {
     font-size: .75rem;
   }
 
-  ._hg {
+  ._eg {
     font-size: 1rem;
   }
 
-  ._hi {
+  ._ei {
     font-size: 1.125rem;
   }
 
-  ._ic {
+  ._fc {
     font-variation-settings: "wght" 500;
     font-synthesis-weight: none;
     font-weight: 500;
   }
 
-  ._ja {
+  ._ga {
     line-height: 1.3;
   }
 
@@ -129,48 +129,48 @@
     color: lch(from var(--s2-container-bg) calc((49.44 - l) * infinity) 0 0 / .21);
   }
 
-  .__Ha {
+  .__Ea {
     -webkit-user-select: none;
     user-select: none;
   }
 
-  .j-375top {
-    height: var(--j);
+  .k-375toq {
+    height: var(--k);
   }
 
-  .pf {
+  .qf {
     min-width: calc(2rem * var(--s2-scale));
   }
 
-  .pg {
+  .qg {
     min-width: calc(1.25rem * var(--s2-scale));
   }
 
-  .ph {
+  .qh {
     min-width: calc(1.5rem * var(--s2-scale));
   }
 
-  .pi {
+  .qi {
     min-width: calc(2.5rem * var(--s2-scale));
   }
 
-  .pj {
+  .qj {
     min-width: calc(3rem * var(--s2-scale));
   }
 
-  ._Sa {
+  ._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;
   }
 
-  ._U-375x7f {
+  ._R-375x7f {
     transition-duration: .15s;
   }
 
-  ._Va {
+  ._Sa {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._Db {
+  ._Ab {
     forced-color-adjust: none;
   }
 
@@ -178,71 +178,71 @@
     background-color: var(--b);
   }
 
-  .-rwx0fg_d-b {
+  .-rwx0fg_e-b {
     --iconPrimary: currentColor;
   }
 
-  .zf {
+  .wf {
     border-style: none;
   }
 
-  .FI {
-    padding-inline-start: calc(var(--j, var(--n)) * 3 / 8);
+  .CI {
+    padding-inline-start: calc(var(--k, var(--o)) * 3 / 8);
   }
 
-  .GI {
-    padding-inline-end: calc(var(--j, var(--n)) * 3 / 8);
+  .DI {
+    padding-inline-end: calc(var(--k, var(--o)) * 3 / 8);
   }
 
-  .Ha {
+  .Ea {
     padding-top: 0;
   }
 
-  .Ia {
+  .Fa {
     padding-bottom: 0;
   }
 
-  ._zh {
+  ._wh {
     border-start-start-radius: .571429em;
   }
 
-  ._za {
+  ._wa {
     border-start-start-radius: 0;
   }
 
-  ._Ah {
+  ._xh {
     border-start-end-radius: .571429em;
   }
 
-  ._Aa {
+  ._xa {
     border-start-end-radius: 0;
   }
 
-  ._Bh {
+  ._yh {
     border-end-start-radius: .571429em;
   }
 
-  ._Ba {
+  ._ya {
     border-end-start-radius: 0;
   }
 
-  ._Ch {
+  ._zh {
     border-end-end-radius: .571429em;
   }
 
-  ._Ca {
+  ._za {
     border-end-end-radius: 0;
   }
 
-  .-oelgqu_D--177861o {
+  .-oelgqu_A--177861o {
     --iconMargin: -.142857em;
   }
 
-  .__U-3t1z {
+  .__R-3t1z {
     z-index: 2;
   }
 
-  .__V-yksgrp {
+  .__S-yksgrp {
     -webkit-tap-highlight-color: #0000;
   }
 
@@ -290,152 +290,152 @@
     --b: transparent;
   }
 
-  .-_375top_j-f {
-    --j: calc(2rem * var(--s2-scale));
+  .-_375toq_k-f {
+    --k: calc(2rem * var(--s2-scale));
   }
 
-  .-_375top_j-g {
-    --j: calc(1.25rem * var(--s2-scale));
+  .-_375toq_k-g {
+    --k: calc(1.25rem * var(--s2-scale));
   }
 
-  .-_375top_j-h {
-    --j: calc(1.5rem * var(--s2-scale));
+  .-_375toq_k-h {
+    --k: calc(1.5rem * var(--s2-scale));
   }
 
-  .-_375top_j-i {
-    --j: calc(2.5rem * var(--s2-scale));
+  .-_375toq_k-i {
+    --k: calc(2.5rem * var(--s2-scale));
   }
 
-  .-_375top_j-j {
-    --j: calc(3rem * var(--s2-scale));
+  .-_375toq_k-j {
+    --k: calc(3rem * var(--s2-scale));
   }
 
-  .H-1gogtue {
+  .E-1gogtue {
     padding-top: var(--labelPadding);
   }
 
-  .I-1gogtue {
+  .F-1gogtue {
     padding-bottom: var(--labelPadding);
   }
 
-  .__E-3t1y {
+  .__B-3t1y {
     order: 1;
   }
 
-  .__zb {
+  .__wb {
     overflow-x: hidden;
   }
 
-  .__Ab {
+  .__xb {
     overflow-y: hidden;
   }
 
-  ._qa {
+  ._na {
     text-overflow: ellipsis;
   }
 
-  ._tb {
+  ._qb {
     white-space: nowrap;
   }
 
-  .k-1sthc3k {
+  .l-1sthc3k {
     width: 1.42857em;
   }
 
-  .j-1sthc3k {
+  .k-1sthc3k {
     height: 1.42857em;
   }
 
-  .B-oelgqu {
+  .y-oelgqu {
     margin-inline-start: var(--iconMargin);
   }
 
-  .__c-3t1x {
+  ._9-3t1x {
     flex-shrink: 0;
   }
 
-  .__E-3t1x {
+  .__B-3t1x {
     order: 0;
   }
 }
 
 @layer _.b {
-  ._g-enzrfpb:lang(ar) {
+  ._d-enzrfpb:lang(ar) {
     font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._j-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;
   }
 
-  .F-1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+  .C-1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
     padding-inline-start: 0;
   }
 
-  .G-1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+  .D-1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
     padding-inline-end: 0;
   }
 
-  ._z-13alit4h:first-child {
+  ._w-13alit4h:first-child {
     border-start-start-radius: .571429em;
   }
 
-  ._A-uamghwh:last-child, ._A-13alit4h:first-child {
+  ._x-uamghwh:last-child, ._x-13alit4h:first-child {
     border-start-end-radius: .571429em;
   }
 
-  ._B-13alit4h:first-child, ._B-uamghwh:last-child {
+  ._y-13alit4h:first-child, ._y-uamghwh:last-child {
     border-end-start-radius: .571429em;
   }
 
-  ._C-uamghwh:last-child {
+  ._z-uamghwh:last-child {
     border-end-end-radius: .571429em;
   }
 
-  .-oelgqu_D--1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
+  .-oelgqu_A--1imc51ya:has([slot="icon"], [slot="avatar"]):not(:has([data-rsp-slot="text"])) {
     --iconMargin: 0rem;
   }
 }
 
 @layer _.c {
-  ._g-enzwzjc:lang(he) {
+  ._d-enzwzjc:lang(he) {
     font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  ._g-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 {
-  ._g-enzzrge:lang(ko) {
+  ._d-enzzrge:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  ._g-eo0c6sf:lang(zh) {
+  ._d-eo0c6sf:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  ._g-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 {
-  ._g-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;
   }
 }
 
 @layer _.b.a {
   @media (forced-colors: active) {
-    .ca_____M {
+    .da_____M {
       outline-color: highlight;
     }
 
@@ -463,27 +463,27 @@
 
 @layer _.b.b {
   @media not ((hover: hover) and (pointer: fine)) {
-    .ibH {
+    .jbH {
       column-gap: .470588em;
     }
 
-    ._hbf {
+    ._ebf {
       font-size: 1.0625rem;
     }
 
-    ._hbb {
+    ._ebb {
       font-size: .8125rem;
     }
 
-    ._hbd {
+    ._ebd {
       font-size: .9375rem;
     }
 
-    ._hbh {
+    ._ebh {
       font-size: 1.1875rem;
     }
 
-    ._hbj {
+    ._ebj {
       font-size: 1.375rem;
     }
   }

package/dist/ActionButton.css.map

@@ -1 +1 @@
-{"mappings":"AC6DyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsNQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;;AA7NK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n  staticColor?: 'black' | 'white' | 'auto',\n  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n  isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n  /** Whether the ActionButton should be selected (controlled). */\n  isSelected?: boolean,\n  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n  isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n  density?: 'regular' | 'compact',\n  orientation?: 'horizontal' | 'vertical',\n  isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {\n  /** The content to display in the ActionButton. */\n  children?: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  columnGap: 'text-to-visual',\n  flexShrink: {\n    default: 1,\n    isInGroup: 0\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  font: 'control',\n  fontWeight: 'medium',\n  userSelect: 'none',\n  height: 'control',\n  minWidth: 'control',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: {\n      ...baseColor('gray-100'),\n      default: {\n        default: 'gray-100',\n        isQuiet: 'transparent'\n      }\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: 'accent',\n      isDisabled: {\n        default: 'gray-100',\n        isQuiet: 'transparent'\n      }\n    },\n    isStaticColor: {\n      ...baseColor('transparent-overlay-100'),\n      default: {\n        default: 'transparent-overlay-100',\n        isQuiet: 'transparent'\n      },\n      isSelected: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: {\n          default: 'transparent-overlay-100',\n          isQuiet: 'transparent'\n        }\n      }\n    },\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: {\n        default: 'Highlight',\n        isDisabled: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    isStaticColor: {\n      default: baseColor('transparent-overlay-800'),\n      isSelected: 'auto',\n      isDisabled: 'transparent-overlay-400'\n    },\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: {\n        default: 'GrayText'\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  borderStyle: 'none',\n  paddingX: {\n    default: 'edge-to-text',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  borderTopStartRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        ':first-child': 'control'\n      }\n    }\n  },\n  borderTopEndRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        orientation: {\n          horizontal: {\n            ':last-child': 'control'\n          },\n          vertical: {\n            ':first-child': 'control'\n          }\n        }\n      }\n    }\n  },\n  borderBottomStartRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        orientation: {\n          horizontal: {\n            ':first-child': 'control'\n          },\n          vertical: {\n            ':last-child': 'control'\n          }\n        }\n      }\n    }\n  },\n  borderBottomEndRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        ':last-child': 'control'\n      }\n    }\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  zIndex: {\n    isFocusVisible: 2\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let ctx = useSlottedContext(ActionButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n\n  return (\n    <RACButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        staticColor,\n        isStaticColor: !!staticColor,\n        size,\n        isQuiet,\n        density,\n        isJustified,\n        orientation,\n        isInGroup\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }],\n          [AvatarContext, {\n            size: avatarSize[size],\n            styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACButton>\n  );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}
+{"mappings":"AC6DyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsNQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;;AA7NK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["2931924df01dc677","packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["@import \"3cf237010a171787\";\n@import \"c38bef69f8745925\";\n@import \"3059048d79d64c86\";\n@import \"9bc41819d7d08688\";\n@import \"013b65d3da939c1f\";\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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n  /**\n   * The size of the ActionButton.\n   *\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n  staticColor?: 'black' | 'white' | 'auto',\n  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n  isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n  /** Whether the ActionButton should be selected (controlled). */\n  isSelected?: boolean,\n  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n  isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n  density?: 'regular' | 'compact',\n  orientation?: 'horizontal' | 'vertical',\n  isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {\n  /** The content to display in the ActionButton. */\n  children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n  ...focusRing(),\n  ...staticColor(),\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  columnGap: 'text-to-visual',\n  flexShrink: {\n    default: 1,\n    isInGroup: 0\n  },\n  flexGrow: {\n    isJustified: 1\n  },\n  flexBasis: {\n    isJustified: 0\n  },\n  font: 'control',\n  fontWeight: 'medium',\n  userSelect: 'none',\n  height: 'control',\n  minWidth: 'control',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: {\n      ...baseColor('gray-100'),\n      default: {\n        default: 'gray-100',\n        isQuiet: 'transparent'\n      }\n    },\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: 'accent',\n      isDisabled: {\n        default: 'gray-100',\n        isQuiet: 'transparent'\n      }\n    },\n    isStaticColor: {\n      ...baseColor('transparent-overlay-100'),\n      default: {\n        default: 'transparent-overlay-100',\n        isQuiet: 'transparent'\n      },\n      isSelected: {\n        default: baseColor('transparent-overlay-800'),\n        isDisabled: {\n          default: 'transparent-overlay-100',\n          isQuiet: 'transparent'\n        }\n      }\n    },\n    forcedColors: {\n      default: 'ButtonFace',\n      isSelected: {\n        default: 'Highlight',\n        isDisabled: 'ButtonFace'\n      }\n    }\n  },\n  color: {\n    default: 'neutral',\n    isSelected: {\n      default: 'gray-25',\n      isEmphasized: 'white'\n    },\n    isDisabled: 'disabled',\n    isStaticColor: {\n      default: baseColor('transparent-overlay-800'),\n      isSelected: 'auto',\n      isDisabled: 'transparent-overlay-400'\n    },\n    forcedColors: {\n      default: 'ButtonText',\n      isSelected: 'HighlightText',\n      isDisabled: {\n        default: 'GrayText'\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  borderStyle: 'none',\n  paddingX: {\n    default: 'edge-to-text',\n    [iconOnly]: 0\n  },\n  paddingY: 0,\n  borderTopStartRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        ':first-child': 'control'\n      }\n    }\n  },\n  borderTopEndRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        orientation: {\n          horizontal: {\n            ':last-child': 'control'\n          },\n          vertical: {\n            ':first-child': 'control'\n          }\n        }\n      }\n    }\n  },\n  borderBottomStartRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        orientation: {\n          horizontal: {\n            ':first-child': 'control'\n          },\n          vertical: {\n            ':last-child': 'control'\n          }\n        }\n      }\n    }\n  },\n  borderBottomEndRadius: {\n    default: 'control',\n    density: {\n      compact: {\n        default: 'none',\n        ':last-child': 'control'\n      }\n    }\n  },\n  '--iconMargin': {\n    type: 'marginTop',\n    value: {\n      default: fontRelative(-2),\n      [iconOnly]: 0\n    }\n  },\n  zIndex: {\n    isFocusVisible: 2\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n  XS: 14,\n  S: 16,\n  M: 20,\n  L: 22,\n  X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n  props = useFormProps(props as any);\n  let domRef = useFocusableRef(ref);\n  let overlayTriggerState = useContext(OverlayTriggerStateContext);\n  let ctx = useSlottedContext(ActionButtonGroupContext);\n  let isInGroup = !!ctx;\n  let {\n    density = 'regular',\n    isJustified,\n    orientation = 'horizontal',\n    staticColor = props.staticColor,\n    isQuiet = props.isQuiet,\n    size = props.size || 'M',\n    isDisabled = props.isDisabled\n  } = ctx || {};\n\n  return (\n    <RACButton\n      {...props}\n      isDisabled={isDisabled}\n      ref={domRef}\n      style={pressScale(domRef, props.UNSAFE_style)}\n      className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n        ...renderProps,\n        // Retain hover styles when an overlay is open.\n        isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n        staticColor,\n        isStaticColor: !!staticColor,\n        size,\n        isQuiet,\n        density,\n        isJustified,\n        orientation,\n        isInGroup\n      }, props.styles)}>\n      <Provider\n        values={[\n          [SkeletonContext, null],\n          [TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],\n          [IconContext, {\n            render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n            styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n          }],\n          [AvatarContext, {\n            size: avatarSize[size],\n            styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n          }]\n        ]}>\n        {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n      </Provider>\n    </RACButton>\n  );\n});\n"],"names":[],"version":3,"file":"ActionButton.css.map"}