@react-spectrum/s2 3.0.0-nightly-c81a23ccd-250409 → 3.0.0-nightly-9723225d6-250412

package/dist/ActionButton.cjs

@@ -307,6 +307,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
                 [
                     (0, $cd7301fb33ba8690$exports.NotificationBadgeContext),
                     {
+                        staticColor: staticColor,
                         size: props.size === 'XS' ? undefined : props.size,
                         isDisabled: props.isDisabled,
                         styles: " Va Y-1v78fj9 W-8959nl A-1q7bl7b y-1q7bl7b"

package/dist/ActionButton.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            staticColor: staticColor,\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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.cjs.map"}

package/dist/ActionButton.css.map

@@ -1 +1 @@
-{"mappings":"AC+DyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiPQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAKA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA7PK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;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@import \"972afc4b5ba1159d\";\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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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":"AC+DyB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiPQ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAGb;;;;EAAA;;;;EAIA;;;;EAAA;;;;EAAA;;;;EAMA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AA9PK;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;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@import \"972afc4b5ba1159d\";\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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            staticColor: staticColor,\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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"}

package/dist/ActionButton.mjs

@@ -299,6 +299,7 @@ const $da878a05ab4a403e$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $hl1Zj$forwa
                 [
                     (0, $bfb270fb056fefc5$export$9ab75c96ebaa396c),
                     {
+                        staticColor: staticColor,
                         size: props.size === 'XS' ? undefined : props.size,
                         isDisabled: props.isDisabled,
                         styles: " Va Y-1v78fj9 W-8959nl A-1q7bl7b y-1q7bl7b"

package/dist/ActionButton.mjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAuB;oBAAG;wBACzB,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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.mjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Lb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {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 {NotificationBadgeContext} from './NotificationBadge';\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' | 'onClick'>, 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]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\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  '--badgeTop': {\n    type: 'top',\n    value: {\n      default: '[calc(self(height)/2 - var(--iconWidth)/2)]',\n      [textOnly]: 0\n    }\n  },\n  '--buttonPaddingX': {\n    type: 'paddingStart',\n    value: {\n      default: 'edge-to-text',\n      [iconOnly]: 0\n    }\n  },\n  '--iconWidth': {\n    type: 'width',\n    value: fontRelative(20)\n  },\n  '--badgePosition': {\n    type: 'width',\n    value: {\n      default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',\n      [iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',\n      [textOnly]: 'full'\n    }\n  }\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\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          [NotificationBadgeContext, {\n            staticColor: staticColor,\n            size: props.size === 'XS' ? undefined : props.size,\n            isDisabled: props.isDisabled,\n            styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})\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.mjs.map"}

package/dist/Card.cjs

@@ -542,7 +542,7 @@ function $230078a1c4ce81d8$var$CardCheckbox() {
 }
 const $230078a1c4ce81d8$export$115f017852a4bb7c = /*#__PURE__*/ (0, $1B7TP$react.forwardRef)(function CardPreview(props, ref) {
     let { size: size, isQuiet: isQuiet, isHovered: isHovered, isFocusVisible: isFocusVisible, isSelected: isSelected, isPressed: isPressed, isCheckboxSelection: isCheckboxSelection } = (0, $1B7TP$react.useContext)($230078a1c4ce81d8$var$InternalCardContext);
-    let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
     let domRef = (0, $1B7TP$reactspectrumutils.useDOMRef)(ref);
     return /*#__PURE__*/ (0, $1B7TP$reactjsxruntime.jsxs)("div", {
         ...(0, $1B7TP$reactariautils.filterDOMProps)(props),

package/dist/Card.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className, UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;AAiDD,MAAM,qCAAe;IACnB,SAAS;IACT,MAAM;QACJ,IAAI;QACJ,GAAG;IACL;AACF;AAEA,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsIJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BJ,MAAM;AAQN,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeJ,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeJ,IAAI;;;;;;;;;;;;;;;;;;;;;;AAyCJ,IAAI;AAOJ,IAAI;AASG,MAAM,yDAA0B,CAAA,GAAA,0BAAY,EAA+B;AAC3E,MAAM,yDAAc,CAAA,GAAA,0BAAY,EAAiE;AAYxG,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAA4B;IAClE,SAAS;IACT,MAAM;IACN,YAAY;IACZ,WAAW;IACX,gBAAgB;IAChB,WAAW;IACX,qBAAqB;AACvB;AAEA,MAAM,yCAAmB;IACvB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEO,MAAM,0DAAO,CAAA,GAAA,uBAAS,EAAE,SAAS,KAAK,KAAgB,EAAE,GAA2B;IACxF,CAAC,MAAM,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IAC9C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,WAAC,UAAU,iBAAW,OAAO,cAAK,UAAU,6BAAW,mBAAmB,kBAAI,YAAY,UAAE,MAAM,MAAE,EAAE,EAAE,GAAG,YAAW,GAAG;IAC7H,IAAI,UAAU,YAAY;IAC1B,IAAI,aAAa,CAAA,GAAA,uCAAY;IAC7B,IAAI,yBACF,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,sCAAW;gBAAG;oBAAC,KAAK;oBAAI,QAAQ;gBAAK;aAAE;YACxC;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,OAAO;wBACL,CAAC,CAAA,GAAA,uCAAW,EAAE,EAAE,CAAC;wBACjB,OAAO;4BAAC,QAAQ,4BAAM;sCAAC;4BAAI;wBAAE;wBAC7B,aAAa;4BAAC,QAAQ,kCAAY;sCAAC;4BAAI;wBAAE;oBAC3C;gBACF;aAAE;YACF;gBAAC,CAAA,GAAA,wCAAa;gBAAG;oBAAC,QAAQ,8BAAQ;8BAAC;oBAAI;gBAAE;aAAE;YAC3C;gBAAC,CAAA,GAAA,wCAAa;gBAAG;oBAAC,MAAM;gBAAG;aAAE;YAC7B;gBAAC,CAAA,GAAA,uCAAY;gBAAG;oBAAC,QAAQ;gBAAM;aAAE;YACjC;gBAAC,CAAA,GAAA,2CAAgB;gBAAG;oBAClB,SAAS;oBACT,MAAM,sCAAgB,CAAC,KAAK;oBAC5B,YAAY;oBACZ,aAAa;oBACb,aAAa;oBACb,QAAQ;gBACV;aAAE;YACF;gBAAC,CAAA,GAAA,yCAAc;gBAAG;aAAW;SAC9B;kBACD,cAAA,gCAAC,CAAA,GAAA,0CAAe;sBACb,OAAO,MAAM,QAAQ,KAAK,aAAa,MAAM,QAAQ,CAAC;sBAAC;YAAI,KAAK,MAAM,QAAQ;;;IAKrF,IAAI,cAAc,CAAA,GAAA,uBAAS,EAAE;IAC7B,IAAI,gBAAgB,SAAS,YAC3B,qBACE,gCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;QAC9B,IAAI,MAAM,OAAO,OAAO,MAAM;QAC9B,iCAAiC;QACjC,OAAO,CAAA,GAAA,gCAAS,EAAE;QAClB,KAAK;QACL,WAAW,mBAAmB,2BAAK;kBAAC;qBAAM;qBAAS;YAAS,YAAY,gBAAgB;QAAK,GAAG;QAChG,OAAO;kBACP,cAAA,gCAAC,0CAAoB,QAAQ;YAAC,OAAO;sBAAC;yBAAM;gBAAS,qBAAqB;gBAAO,WAAW;gBAAO,gBAAgB;gBAAO,YAAY;gBAAO,WAAW;YAAK;sBAC1J;;;IAMT,IAAI,QAAQ,CAAA,GAAA,oCAAS,EAAE,QAAQ;IAC/B,qBACE,gCAAC;QACE,GAAG,KAAK;QACT,KAAK;QACL,WAAW,CAAA,cAAe,mBAAmB,2BAAK;gBAAC,GAAG,WAAW;gBAAE,YAAY;gBAAM,QAAQ,CAAC,CAAC,MAAM,IAAI;sBAAE;yBAAM;yBAAS;YAAO,GAAG;QACpI,OAAO,CAAA,cACL,uDAAuD;YACvD,YAAY,UAAU,eAAe,MAAM;kBAE5C,CAAC,iBAAC,aAAa,qBAAE,iBAAiB,aAAE,SAAS,kBAAE,cAAc,cAAE,UAAU,aAAE,SAAS,EAAC,iBACpF,iCAAC,0CAAoB,QAAQ;gBAAC,OAAO;0BAAC;6BAAM;oBAAS,qBAAqB,kBAAkB,UAAU,sBAAsB;+BAAU;oCAAW;gCAAgB;+BAAY;gBAAS;;oBAEnL,CAAC,yBAAW,gCAAC;oBACb,CAAC,WAAW,kBAAkB,UAAU,sBAAsB,0BAC7D,gCAAC;kCAGH,gCAAC;wBAAI,SAAS;kCACX;;;;;AAMb;AAEA,SAAS;IACP,IAAI,QAAC,IAAI,cAAE,UAAU,WAAE,OAAO,uBAAE,mBAAmB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IAClE,qBACE,gCAAC;QACC,WAAW,yCAAmB;kBAC5B;wBACA;YACA,+DAA+D;YAC/D,wDAAwD;YACxD,eAAe,WAAW,CAAC;QAC7B;;AAEN;AAEA,SAAS;IACP,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxB,qBACE,gCAAC;QACC,SAAS;kBAUT,cAAA,gCAAC,CAAA,GAAA,kCAAO;YACN,MAAK;YACL,mBAAmB;YACnB,MAAM,SAAS,OAAO,MAAM;;;AAGpC;AAMO,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,IAAI,QAAC,IAAI,WAAE,OAAO,aAAE,SAAS,kBAAE,cAAc,cAAE,UAAU,aAAE,SAAS,uBAAE,mBAAmB,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxG,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,EAAC,GAAG;IAC5C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,qBACE,iCAAC;QACE,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM;QACzB,MAAK;QACL,KAAK;QACL,WAAW,mBAAmB,8BAAQ;kBAAC;qBAAM;uBAAS;4BAAW;wBAAgB;QAAU;QAC3F,OAAO,UAAU,CAAA,GAAA,oCAAS,EAAE,QAAQ;uBAAC;QAAS,KAAK;;YAClD,yBAAW,gCAAC;YACZ,WAAW,qCAAuB,gCAAC;0BACpC,gCAAC;gBAAI,SAAS;0BACX,MAAM,QAAQ;;;;AAIvB;AAEA,MAAM;;;;;;;;;;;;AAYN,MAAM;AAcC,MAAM,0DAAwB,CAAA,GAAA,uBAAS,EAAE,SAAS,sBAAsB,KAAuB,EAAE,GAA2B;IACjI,IAAI,QAAC,IAAI,EAAC,GAAG,CAAA,GAAA,uBAAS,EAAE;IACxB,qBACE,gCAAC;QAAa,GAAG,KAAK;QAAE,KAAK;kBAC3B,cAAA,gCAAC;YAAI,WAAW,iCAAW;sBAAC;YAAI;sBAC9B,cAAA,gCAAC,CAAA,GAAA,sCAAW,EAAE,QAAQ;gBAAC,OAAO;oBAAC,QAAQ;gBAAe;0BACnD,MAAM,QAAQ;;;;AAKzB;AAIO,MAAM,0DAAY,CAAA,GAAA,uBAAS,EAAE,SAAS,UAAU,KAAqB,EAAE,GAA2B;IACvG,qBACE,gCAAC;QAAM,GAAG,KAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAA,yBAClC,gCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,sCAAW;wBAAG;4BACb,KAAK;4BACL,MAAM;wBAOR;qBAAE;oBACF;wBAAC,CAAA,GAAA,6CAAkB;wBAAG;4BACpB,QAAO,IAAI;gCACT,qBACE,gCAAC,CAAA,GAAA,yCAAc;8CACb,cAAA,gCAAC;wCACC,SAAS;kDAOR;;;4BAIT;4BACA,MAAM;wBAMR;qBAAE;iBACH;0BACA;;;AAKX;AAEA,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAOO,MAAM,0DAAW,CAAA,GAAA,uBAAS,EAAE,SAAS,SAAS,KAAgB,EAAE,GAA2B;IAChG,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,qBACE,gCAAC;QAAM,GAAG,KAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAA,yBAClC,gCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,sCAAW;wBAAG;4BACb,KAAK;4BACL,MAAM;wBAOR;qBAAE;oBACF;wBAAC,CAAA,GAAA,uCAAY;wBAAG;4BACd,MAAM,gCAAU,CAAC,KAAK;4BACtB,cAAc;gCACZ,UAAU,gCAAU,CAAC,KAAK,GAAG;4BAC/B;4BACA,MAAM;4BAON,kBAAkB;wBACpB;qBAAE;iBACH;0BACA;;;AAKX;AAEA,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAOO,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,MAAuB,EAAE,GAA2B;IAC7G,IAAI,QAAC,OAAO,KAAI,GAAG;IACnB,qBACE,gCAAC;QAAM,GAAG,MAAK;QAAE,KAAK;QAAK,SAAQ;kBAChC,CAAA,GAAA,6CAAiB,EAAE,OAAM,QAAQ,EAAE,CAAA,yBAClC,gCAAC,CAAA,GAAA,mCAAO;gBACN,QAAQ;oBACN;wBAAC,CAAA,GAAA,sCAAW;wBAAG;4BACb,OAAO;gCACL,SAAS;oCACP,KAAK;oCACL,MAAM;gCAOR;gCACA,WAAW;oCACT,KAAK;oCACL,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sCAiCL;8CAAC;oCAAI;gCACV;4BACF;wBACF;qBAAE;oBACF;wBAAC,CAAA,GAAA,uCAAY;wBAAG;4BACd,QAAQ,CAAA,GAAA,qCAAU,EAAE;wBAGtB;qBAAE;oBACF;wBAAC,CAAA,GAAA,uCAAY;wBAAG;4BAAC,MAAM,gCAAU,CAAC,KAAK;wBAAA;qBAAE;oBACzC;wBAAC,CAAA,GAAA,2CAAgB;wBAAG;4BAAC,MAAM,gCAAU,CAAC,KAAK;wBAAA;qBAAE;iBAC9C;0BACA;;;AAKX","sources":["packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className = '', UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.cjs.map"}

package/dist/Card.css.map

@@ -1 +1 @@
-{"mappings":"ACmEW;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsIc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BA;;;;EAQF;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgHa;;;;EA2BT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDG;;;;EAaW;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCA;;;;EAsDI;;;;EAAA;;;;EAUA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCgB;;;;;AA3pB/B;EA+JG;;;;EAoCF;;;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAiPU;;;;EAAA;;;;EAgHF;;;;EAmDI;;;;;AArnBf;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmMC;EAAA;IAAA;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA","sources":["27dbcfc551a48112","packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["@import \"9676e19758d368a4\";\n@import \"9cc465424d704be7\";\n@import \"b4efa57acde91f85\";\n@import \"f57f71196abb1d28\";\n@import \"44a5ae9af0c054ae\";\n@import \"48ed75c27807afc0\";\n@import \"28998c3ec0251ce6\";\n@import \"ea2c50216b0a0718\";\n@import \"30bca749b2da4e64\";\n@import \"5bf63158ce80a5e0\";\n@import \"28b6c8bfee7405e7\";\n@import \"7a5f81e38f8d58eb\";\n@import \"7c08b7bb8a077bd7\";\n@import \"8f467e26d8d8379d\";\n@import \"ba6b63e77ed10969\";\n@import \"869e3fec8de34346\";\n@import \"01cf628ec62a9765\";\n@import \"2d338271f1c4eae3\";\n@import \"b32a7b92a27cc986\";\n@import \"be5fbd81d74e2675\";\n@import \"90d2029319751f7e\";\n@import \"fe0cf0648767137f\";\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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className, UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.css.map"}
+{"mappings":"ACmEW;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsIc;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyBX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA4BA;;;;EAQF;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAyCG;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgHa;;;;EA2BT;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmCK;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAOH;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAiDG;;;;EAaW;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAYX;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAqCA;;;;EAsDI;;;;EAAA;;;;EAUA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAsCgB;;;;;AA3pB/B;EA+JG;;;;EAoCF;;;;;;EAAA;;;;EAeM;;;;EAAA;;;;EAeJ;;;;EAAA;;;;;EAAA;;;;EAAA;;;;EAiPU;;;;EAAA;;;;EAgHF;;;;EAmDI;;;;;AArnBf;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmMC;EAAA;IAAA;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA","sources":["27dbcfc551a48112","packages/@react-spectrum/s2/src/Card.tsx"],"sourcesContent":["@import \"9676e19758d368a4\";\n@import \"9cc465424d704be7\";\n@import \"b4efa57acde91f85\";\n@import \"f57f71196abb1d28\";\n@import \"44a5ae9af0c054ae\";\n@import \"48ed75c27807afc0\";\n@import \"28998c3ec0251ce6\";\n@import \"ea2c50216b0a0718\";\n@import \"30bca749b2da4e64\";\n@import \"5bf63158ce80a5e0\";\n@import \"28b6c8bfee7405e7\";\n@import \"7a5f81e38f8d58eb\";\n@import \"7c08b7bb8a077bd7\";\n@import \"8f467e26d8d8379d\";\n@import \"ba6b63e77ed10969\";\n@import \"869e3fec8de34346\";\n@import \"01cf628ec62a9765\";\n@import \"2d338271f1c4eae3\";\n@import \"b32a7b92a27cc986\";\n@import \"be5fbd81d74e2675\";\n@import \"90d2029319751f7e\";\n@import \"fe0cf0648767137f\";\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 {ActionMenuContext} from './ActionMenu';\nimport {AvatarContext} from './Avatar';\nimport {ButtonContext, LinkButtonContext} from './Button';\nimport {Checkbox} from './Checkbox';\nimport {colorToken} from '../style/tokens' with {type: 'macro'};\nimport {composeRenderProps, ContextValue, DEFAULT_SLOT, type GridListItem, GridListItemProps, Provider} from 'react-aria-components';\nimport {ContentContext, FooterContext, TextContext} from './Content';\nimport {createContext, CSSProperties, forwardRef, ReactNode, useContext} from 'react';\nimport {DividerContext} from './Divider';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps, inertValue} from '@react-aria/utils';\nimport {focusRing, lightDark, space, style} from '../style' with {type: 'macro'};\nimport {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustrationContext} from './Icon';\nimport {ImageContext} from './Image';\nimport {ImageCoordinator} from './ImageCoordinator';\nimport {mergeStyles} from '../style/runtime';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext, SkeletonWrapper, useIsSkeleton} from './Skeleton';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CardRenderProps {\n  /** The size of the Card. */\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL'\n}\n\nexport interface CardProps extends Omit<GridListItemProps, 'className' | 'style' | 'children' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {\n  /** The children of the Card. */\n  children: ReactNode | ((renderProps: CardRenderProps) => ReactNode),\n  /**\n   * The size of the Card.\n   * @default 'M'\n   */\n  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  /**\n   * The amount of internal padding within the Card.\n   * @default 'regular'\n   */\n  density?: 'compact' | 'regular' | 'spacious',\n  /**\n   * The visual style of the Card.\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet'\n}\n\nconst borderRadius = {\n  default: 'lg',\n  size: {\n    XS: 'default',\n    S: 'default'\n  }\n} as const;\n\nlet card = style({\n  display: 'flex',\n  flexDirection: 'column',\n  position: 'relative',\n  borderRadius,\n  '--s2-container-bg': {\n    type: 'backgroundColor',\n    value: {\n      variant: {\n        primary: 'elevated',\n        secondary: 'layer-1'\n      },\n      forcedColors: 'ButtonFace'\n    }\n  },\n  backgroundColor: {\n    default: '--s2-container-bg',\n    variant: {\n      tertiary: 'transparent',\n      quiet: 'transparent'\n    }\n  },\n  boxShadow: {\n    default: 'emphasized',\n    isHovered: 'elevated',\n    isFocusVisible: 'elevated',\n    isSelected: 'elevated',\n    forcedColors: '[0 0 0 1px ButtonBorder]',\n    variant: {\n      tertiary: {\n        // Render border with box-shadow to avoid affecting layout.\n        default: `[0 0 0 1px ${colorToken('gray-100')}]`,\n        isHovered: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isFocusVisible: `[0 0 0 1px ${colorToken('gray-200')}]`,\n        isSelected: 'none',\n        forcedColors: '[0 0 0 1px ButtonBorder]'\n      },\n      quiet: 'none'\n    }\n  },\n  forcedColorAdjust: 'none',\n  transition: 'default',\n  fontFamily: 'sans',\n  overflow: {\n    default: 'clip',\n    variant: {\n      quiet: 'visible'\n    }\n  },\n  contain: 'layout',\n  disableTapHighlight: true,\n  userSelect: {\n    isCardView: 'none'\n  },\n  cursor: {\n    isLink: 'pointer'\n  },\n  width: {\n    size: {\n      XS: 112,\n      S: 192,\n      M: 240,\n      L: 320,\n      XL: 400\n    },\n    isCardView: 'full'\n  },\n  height: 'full',\n  '--card-spacing': {\n    type: 'paddingTop',\n    value: {\n      density: {\n        compact: {\n          size: {\n            XS: 6,\n            S: 8,\n            M: 12,\n            L: 16,\n            XL: 20\n          }\n        },\n        regular: {\n          size: {\n            XS: 8,\n            S: 12,\n            M: 16,\n            L: 20,\n            XL: 24\n          }\n        },\n        spacious: {\n          size: {\n            XS: 12,\n            S: 16,\n            M: 20,\n            L: 24,\n            XL: 28\n          }\n        }\n      }\n    }\n  },\n  '--card-padding-y': {\n    type: 'paddingTop',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  '--card-padding-x': {\n    type: 'paddingStart',\n    value: {\n      default: '--card-spacing',\n      variant: {\n        quiet: 0\n      }\n    }\n  },\n  paddingY: '--card-padding-y',\n  paddingX: '--card-padding-x',\n  boxSizing: 'border-box',\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isFocusVisible: 'solid',\n    // Focus ring moves to preview when quiet.\n    variant: {\n      quiet: 'none'\n    }\n  }\n}, getAllowedOverrides());\n\nlet selectionIndicator = style({\n  position: 'absolute',\n  inset: 0,\n  zIndex: 2,\n  borderRadius,\n  pointerEvents: 'none',\n  borderWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'gray-1000',\n  transition: 'default',\n  opacity: {\n    default: 0,\n    isSelected: 1\n  },\n  // Quiet cards with no checkbox have an extra inner stroke\n  // to distinguish the selection indicator from the preview.\n  outlineColor: lightDark('transparent-white-600', 'transparent-black-600'),\n  outlineOffset: -4,\n  outlineStyle: {\n    default: 'none',\n    isStrokeInner: 'solid'\n  },\n  outlineWidth: 2\n});\n\nlet preview = style({\n  position: 'relative',\n  transition: 'default',\n  overflow: 'clip',\n  marginX: '[calc(var(--card-padding-x) * -1)]',\n  marginTop: '[calc(var(--card-padding-y) * -1)]',\n  marginBottom: {\n    ':last-child': '[calc(var(--card-padding-y) * -1)]'\n  },\n  borderRadius: {\n    isQuiet: borderRadius\n  },\n  boxShadow: {\n    isQuiet: {\n      isHovered: 'elevated',\n      isFocusVisible: 'elevated',\n      isSelected: 'elevated'\n    }\n  },\n  ...focusRing(),\n  outlineStyle: {\n    default: 'none',\n    isQuiet: {\n      isFocusVisible: 'solid'\n    }\n  }\n});\n\nconst image = style({\n  width: 'full',\n  aspectRatio: '[3/2]',\n  objectFit: 'cover',\n  userSelect: 'none',\n  pointerEvents: 'none'\n});\n\nlet title = style({\n  font: 'title',\n  fontSize: {\n    size: {\n      XS: 'title-xs',\n      S: 'title-xs',\n      M: 'title-sm',\n      L: 'title',\n      XL: 'title-lg'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'title'\n});\n\nlet description = style({\n  font: 'body',\n  fontSize: {\n    size: {\n      XS: 'body-2xs',\n      S: 'body-2xs',\n      M: 'body-xs',\n      L: 'body-sm',\n      XL: 'body'\n    }\n  },\n  lineClamp: 3,\n  gridArea: 'description'\n});\n\nlet content = style({\n  display: 'grid',\n  // By default, all elements are displayed in a stack.\n  // If an action menu is present, place it next to the title.\n  gridTemplateColumns: {\n    default: ['1fr'],\n    ':has([data-slot=menu])': ['minmax(0, 1fr)', 'auto']\n  },\n  gridTemplateAreas: {\n    default: [\n      'title',\n      'description'\n    ],\n    ':has([data-slot=menu])': [\n      'title menu',\n      'description description'\n    ]\n  },\n  columnGap: 4,\n  flexGrow: 1,\n  alignItems: 'baseline',\n  alignContent: 'space-between',\n  rowGap: {\n    size: {\n      XS: 4,\n      S: 4,\n      M: space(6),\n      L: space(6),\n      XL: 8\n    }\n  },\n  paddingTop: {\n    default: '--card-spacing',\n    ':first-child': 0\n  },\n  paddingBottom: {\n    default: '[calc(var(--card-spacing) * 1.5 / 2)]',\n    ':last-child': 0\n  }\n});\n\nlet actionMenu = style({\n  gridArea: 'menu',\n  // Don't cause the row to expand, preserve gap between title and description text.\n  // Would use -100% here but it doesn't work in Firefox.\n  marginY: '[calc(-1 * self(height))]'\n});\n\nlet footer = style({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'end',\n  justifyContent: 'space-between',\n  gap: 8,\n  paddingTop: '[calc(var(--card-spacing) * 1.5 / 2)]'\n});\n\nexport const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');\nexport const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);\n\ninterface InternalCardContextValue {\n  isQuiet: boolean,\n  size: 'XS' | 'S' | 'M' | 'L' | 'XL',\n  isSelected: boolean,\n  isHovered: boolean,\n  isFocusVisible: boolean,\n  isPressed: boolean,\n  isCheckboxSelection: boolean\n}\n\nconst InternalCardContext = createContext<InternalCardContextValue>({\n  isQuiet: false,\n  size: 'M',\n  isSelected: false,\n  isHovered: false,\n  isFocusVisible: false,\n  isPressed: false,\n  isCheckboxSelection: true\n});\n\nconst actionButtonSize = {\n  XS: 'XS',\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nexport const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  [props] = useSpectrumContextProps(props, ref, CardContext);\n  let domRef = useDOMRef(ref);\n  let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;\n  let isQuiet = variant === 'quiet';\n  let isSkeleton = useIsSkeleton();\n  let children = (\n    <Provider\n      values={[\n        [ImageContext, {alt: '', styles: image}],\n        [TextContext, {\n          slots: {\n            [DEFAULT_SLOT]: {},\n            title: {styles: title({size})},\n            description: {styles: description({size})}\n          }\n        }],\n        [ContentContext, {styles: content({size})}],\n        [DividerContext, {size: 'S'}],\n        [FooterContext, {styles: footer}],\n        [ActionMenuContext, {\n          isQuiet: true,\n          size: actionButtonSize[size],\n          isDisabled: isSkeleton,\n          // @ts-ignore\n          'data-slot': 'menu',\n          styles: actionMenu\n        }],\n        [SkeletonContext, isSkeleton]\n      ]}>\n      <ImageCoordinator>\n        {typeof props.children === 'function' ? props.children({size}) : props.children}\n      </ImageCoordinator>\n    </Provider>\n  );\n\n  let ElementType = useContext(InternalCardViewContext);\n  if (ElementType === 'div' || isSkeleton) {\n    return (\n      <div\n        {...filterDOMProps(otherProps)}\n        id={id != null ? String(id) : undefined}\n        // @ts-ignore - React < 19 compat\n        inert={inertValue(isSkeleton)}\n        ref={domRef}\n        className={UNSAFE_className + card({size, density, variant, isCardView: ElementType !== 'div'}, styles)}\n        style={UNSAFE_style}>\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: false, isHovered: false, isFocusVisible: false, isSelected: false, isPressed: false}}>\n          {children}\n        </InternalCardContext.Provider>\n      </div>\n    );\n  }\n\n  let press = pressScale(domRef, UNSAFE_style);\n  return (\n    <ElementType\n      {...props}\n      ref={domRef}\n      className={renderProps => UNSAFE_className + card({...renderProps, isCardView: true, isLink: !!props.href, size, density, variant}, styles)}\n      style={renderProps =>\n        // Only the preview in quiet cards scales down on press\n        variant === 'quiet' ? UNSAFE_style : press(renderProps)\n      }>\n      {({selectionMode, selectionBehavior, isHovered, isFocusVisible, isSelected, isPressed}) => (\n        <InternalCardContext.Provider value={{size, isQuiet, isCheckboxSelection: selectionMode !== 'none' && selectionBehavior === 'toggle', isHovered, isFocusVisible, isSelected, isPressed}}>\n          {/* Selection indicator and checkbox move inside the preview for quiet cards */}\n          {!isQuiet && <SelectionIndicator />}\n          {!isQuiet && selectionMode !== 'none' && selectionBehavior === 'toggle' &&\n            <CardCheckbox />\n          }\n          {/* this makes the :first-child selector work even with the checkbox */}\n          <div className={style({display: 'contents'})}>\n            {children}\n          </div>\n        </InternalCardContext.Provider>\n      )}\n    </ElementType>\n  );\n});\n\nfunction SelectionIndicator() {\n  let {size, isSelected, isQuiet, isCheckboxSelection} = useContext(InternalCardContext);\n  return (\n    <div\n      className={selectionIndicator({\n        size,\n        isSelected,\n        // Add an inner stroke only for quiet cards with no checkbox to\n        // help distinguish the selected state from the preview.\n        isStrokeInner: isQuiet && !isCheckboxSelection\n      })} />\n  );\n}\n\nfunction CardCheckbox() {\n  let {size} = useContext(InternalCardContext);\n  return (\n    <div\n      className={style({\n        position: 'absolute',\n        top: '--card-spacing',\n        insetStart: '--card-spacing',\n        zIndex: 2,\n        padding: 4,\n        backgroundColor: lightDark('transparent-white-600', 'transparent-black-600'),\n        borderRadius: 'default',\n        boxShadow: 'emphasized'\n      })}>\n      <Checkbox\n        slot=\"selection\"\n        excludeFromTabOrder\n        size={size === 'XS' ? 'S' : size} />\n    </div>\n  );\n}\n\nexport interface CardPreviewProps extends UnsafeStyles, DOMProps {\n  children: ReactNode\n}\n\nexport const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);\n  let {UNSAFE_className = '', UNSAFE_style} = props;\n  let domRef = useDOMRef(ref);\n  return (\n    <div\n      {...filterDOMProps(props)}\n      slot=\"preview\"\n      ref={domRef}\n      className={UNSAFE_className + preview({size, isQuiet, isHovered, isFocusVisible, isSelected})}\n      style={isQuiet ? pressScale(domRef)({isPressed}) : UNSAFE_style}>\n      {isQuiet && <SelectionIndicator />}\n      {isQuiet && isCheckboxSelection && <CardCheckbox />}\n      <div className={style({borderRadius: '[inherit]', overflow: 'clip'})}>\n        {props.children}\n      </div>\n    </div>\n  );\n});\n\nconst collection = style({\n  display: 'grid',\n  gridTemplateColumns: 'repeat(3, 1fr)',\n  gap: {\n    default: 4,\n    size: {\n      XS: 2,\n      S: 2\n    }\n  }\n});\n\nconst collectionImage = style({\n  width: 'full',\n  aspectRatio: {\n    default: 'square',\n    ':nth-last-child(4):first-child': '[3/2]'\n  },\n  gridColumnEnd: {\n    ':nth-last-child(4):first-child': 'span 3'\n  },\n  objectFit: 'cover',\n  pointerEvents: 'none',\n  userSelect: 'none'\n});\n\nexport const CollectionCardPreview = forwardRef(function CollectionCardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {\n  let {size} = useContext(InternalCardContext)!;\n  return (\n    <CardPreview {...props} ref={ref}>\n      <div className={collection({size})}>\n        <ImageContext.Provider value={{styles: collectionImage}}>\n          {props.children}\n        </ImageContext.Provider>\n      </div>\n    </CardPreview>\n  );\n});\n\nexport interface AssetCardProps extends Omit<CardProps, 'density'> {}\n\nexport const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {\n  return (\n    <Card {...props} ref={ref} density=\"regular\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: 'square',\n                objectFit: 'contain',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [IllustrationContext, {\n              render(icon) {\n                return (\n                  <SkeletonWrapper>\n                    <div\n                      className={style({\n                        display: 'flex',\n                        alignItems: 'center',\n                        justifyContent: 'center',\n                        backgroundColor: 'gray-100',\n                        aspectRatio: 'square'\n                      })}>\n                      {icon}\n                    </div>\n                  </SkeletonWrapper>\n                );\n              },\n              styles: style({\n                height: 'auto',\n                maxSize: 160,\n                // TODO: this is made up.\n                width: '[50%]'\n              })\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst avatarSize = {\n  XS: 24,\n  S: 48,\n  M: 64,\n  L: 64,\n  XL: 80\n} as const;\n\nexport interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and avatar.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              alt: '',\n              styles: style({\n                width: 'full',\n                aspectRatio: '[3/1]',\n                objectFit: 'cover',\n                pointerEvents: 'none',\n                userSelect: 'none'\n              })\n            }],\n            [AvatarContext, {\n              size: avatarSize[size],\n              UNSAFE_style: {\n                '--size': avatarSize[size] + 'px'\n              } as CSSProperties,\n              styles: style({\n                position: 'relative',\n                marginTop: {\n                  default: 0,\n                  ':is([slot=preview] + &)': '[calc(var(--size) / -2)]'\n                }\n              }),\n              isOverBackground: true\n            }]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n\nconst buttonSize = {\n  XS: 'S',\n  S: 'S',\n  M: 'M',\n  L: 'L',\n  XL: 'XL'\n} as const;\n\nexport interface ProductCardProps extends Omit<CardProps, 'density' | 'variant'> {\n  // Quiet is not supported due to lack of indent between preview and thumbnail.\n  variant?: 'primary' | 'secondary' | 'tertiary'\n}\n\nexport const ProductCard = forwardRef(function ProductCard(props: ProductCardProps, ref: DOMRef<HTMLDivElement>) {\n  let {size = 'M'} = props;\n  return (\n    <Card {...props} ref={ref} density=\"spacious\">\n      {composeRenderProps(props.children, children => (\n        <Provider\n          values={[\n            [ImageContext, {\n              slots: {\n                preview: {\n                  alt: '',\n                  styles: style({\n                    width: 'full',\n                    aspectRatio: '[5/1]',\n                    objectFit: 'cover',\n                    pointerEvents: 'none',\n                    userSelect: 'none'\n                  })\n                },\n                thumbnail: {\n                  alt: '',\n                  styles: style({\n                    position: 'relative',\n                    pointerEvents: 'none',\n                    userSelect: 'none',\n                    size: {\n                      size: {\n                        XS: 24,\n                        S: 36,\n                        M: 40,\n                        L: 44,\n                        XL: 56\n                      }\n                    },\n                    borderRadius: {\n                      default: 'default',\n                      size: {\n                        XS: 'sm',\n                        S: 'sm'\n                      }\n                    },\n                    objectFit: 'cover',\n                    marginTop: {\n                      default: 0,\n                      ':is([slot=preview] + &)': '[calc(self(height) / -2)]'\n                    },\n                    outlineStyle: 'solid',\n                    outlineWidth: {\n                      default: 2,\n                      size: {\n                        XS: 1\n                      }\n                    },\n                    outlineColor: '--s2-container-bg'\n                  })({size})\n                }\n              }\n            }],\n            [FooterContext, {\n              styles: mergeStyles(footer, style({\n                justifyContent: 'end'\n              }))\n            }],\n            [ButtonContext, {size: buttonSize[size]}],\n            [LinkButtonContext, {size: buttonSize[size]}]\n          ]}>\n          {children}\n        </Provider>\n      ))}\n    </Card>\n  );\n});\n"],"names":[],"version":3,"file":"Card.css.map"}

package/dist/Card.mjs

@@ -529,7 +529,7 @@ function $68e4e6fe083e22fd$var$CardCheckbox() {
 }
 const $68e4e6fe083e22fd$export$115f017852a4bb7c = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function CardPreview(props, ref) {
     let { size: size, isQuiet: isQuiet, isHovered: isHovered, isFocusVisible: isFocusVisible, isSelected: isSelected, isPressed: isPressed, isCheckboxSelection: isCheckboxSelection } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
-    let { UNSAFE_className: UNSAFE_className, UNSAFE_style: UNSAFE_style } = props;
+    let { UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style } = props;
     let domRef = (0, $jzFZE$useDOMRef)(ref);
     return /*#__PURE__*/ (0, $jzFZE$jsxs)("div", {
         ...(0, $jzFZE$filterDOMProps)(props),