@react-spectrum/s2 3.0.0-nightly-93c26d8bd-241028 → 3.0.0-nightly-07431f4b1-241030

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;;;;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;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAmMC;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAeJ;;;;IA+SQ;;;;IAAA;;;;IAqGI;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AA/eD","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} from '@react-aria/utils';\nimport {focusRing, lightDark, size, 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: size(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: size(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: size(6),\n      L: size(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={isSkeleton ? 'true' : undefined}\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;;;;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;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmMC;EAAA;IAAA;;;;IAeM;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAAA","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} from '@react-aria/utils';\nimport {focusRing, lightDark, size, 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: size(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: size(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: size(6),\n      L: size(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={isSkeleton ? 'true' : undefined}\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

@@ -119,25 +119,14 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
     if (props.isCardView) rules += ' __Da';
     if (props.isLink) rules += ' __Hc';
     if (!$l) {
-        if (props.isCardView) rules += ' l4';
-        else if (props.size === "XL") {
-            rules += ' lb-1eymhk2';
-            rules += ' l-38dtqo';
-        } else if (props.size === "L") {
-            rules += ' lb0';
-            rules += ' lX';
-        } else if (props.size === "M") {
-            rules += ' lbV';
-            rules += ' lQ';
-        } else if (props.size === "S") {
-            rules += ' lbQ';
-            rules += ' lP';
-        } else if (props.size === "XS") {
-            rules += ' lbH';
-            rules += ' lG';
-        }
+        if (props.isCardView) rules += ' lG';
+        else if (props.size === "XL") rules += ' l-yr8gfg';
+        else if (props.size === "L") rules += ' lD';
+        else if (props.size === "M") rules += ' lA';
+        else if (props.size === "S") rules += ' lx';
+        else if (props.size === "XS") rules += ' ls';
     }
-    rules += ' k4';
+    rules += ' kG';
     if (props.density === "spacious") {
         if (props.size === "XL") rules += ' -nxovgr_E-i';
         else if (props.size === "L") rules += ' -nxovgr_E-h';
@@ -155,10 +144,7 @@ let $68e4e6fe083e22fd$var$card = function anonymous(props, overrides) {
         else if (props.size === "L") rules += ' -nxovgr_E-f';
         else if (props.size === "M") rules += ' -nxovgr_E-e';
         else if (props.size === "S") rules += ' -nxovgr_E-d';
-        else if (props.size === "XS") {
-            rules += ' -nxovgr_E-b-1aa9md1';
-            rules += ' -nxovgr_E--6njx2e';
-        }
+        else if (props.size === "XS") rules += ' -nxovgr_E--ve8p9e';
     }
     if (props.variant === "quiet") rules += ' -_1bqkh6r_E-a';
     else rules += ' -_1bqkh6r_E--nxovgr';
@@ -263,7 +249,7 @@ let $68e4e6fe083e22fd$var$preview = function anonymous(props) {
     rules += ' _M-3t1z';
     return rules;
 };
-const $68e4e6fe083e22fd$var$image = " . l4 _b-375yqh __Nb __Da __Ba";
+const $68e4e6fe083e22fd$var$image = " . lG _b-375yqh __Nb __Da __Ba";
 let $68e4e6fe083e22fd$var$title = function anonymous(props) {
     let rules = " .";
     rules += ' _c-bc1l9oh';
@@ -351,13 +337,9 @@ let $68e4e6fe083e22fd$var$content = function anonymous(props) {
     rules += ' _1d';
     rules += ' _0e';
     if (props.size === "XL") rules += ' id';
-    else if (props.size === "L") {
-        rules += ' ib-1aa9md1';
-        rules += ' i-6njx2e';
-    } else if (props.size === "M") {
-        rules += ' ib-1aa9md1';
-        rules += ' i-6njx2e';
-    } else if (props.size === "S") rules += ' ic';
+    else if (props.size === "L") rules += ' i-ve8p9e';
+    else if (props.size === "M") rules += ' i-ve8p9e';
+    else if (props.size === "S") rules += ' ic';
     else if (props.size === "XS") rules += ' ic';
     rules += ' E-13alit4a';
     rules += ' E-nxovgr';
@@ -585,7 +567,7 @@ const $68e4e6fe083e22fd$var$collection = function anonymous(props) {
     else rules += ' jc';
     return rules;
 };
-const $68e4e6fe083e22fd$var$collectionImage = " . l4 _bb _b-7ptyxf-375yqh __b-7ptyxf-7u9dhm __Nb __Ba __Da";
+const $68e4e6fe083e22fd$var$collectionImage = " . lG _bb _b-7ptyxf-375yqh __b-7ptyxf-7u9dhm __Nb __Ba __Da";
 const $68e4e6fe083e22fd$export$c368ea3e577b1b86 = /*#__PURE__*/ (0, $jzFZE$forwardRef)(function CollectionCardPreview(props, ref) {
     let { size: size } = (0, $jzFZE$useContext)($68e4e6fe083e22fd$var$InternalCardContext);
     return /*#__PURE__*/ (0, $jzFZE$jsx)($68e4e6fe083e22fd$export$115f017852a4bb7c, {
@@ -615,7 +597,7 @@ const $68e4e6fe083e22fd$export$eff93e4e59ccc3b8 = /*#__PURE__*/ (0, $jzFZE$forwa
                         (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
                         {
                             alt: '',
-                            styles: " . l4 _bb __Na __Ba __Da"
+                            styles: " . lG _bb __Na __Ba __Da"
                         }
                     ],
                     [
@@ -629,7 +611,7 @@ const $68e4e6fe083e22fd$export$eff93e4e59ccc3b8 = /*#__PURE__*/ (0, $jzFZE$forwa
                                     })
                                 });
                             },
-                            styles: " . k3 rJ rbM pJ pbM l-3760fj"
+                            styles: " . kF rv pv l-3760fj"
                         }
                     ]
                 ],
@@ -656,7 +638,7 @@ const $68e4e6fe083e22fd$export$78e8870b5d8ae469 = /*#__PURE__*/ (0, $jzFZE$forwa
                         (0, $dbd6f0b2503b938c$export$8151eb379fcf2442),
                         {
                             alt: '',
-                            styles: " . l4 _b-375yqg __Nb __Ba __Da"
+                            styles: " . lG _b-375yqg __Nb __Ba __Da"
                         }
                     ],
                     [
@@ -696,7 +678,7 @@ const $68e4e6fe083e22fd$export$e6cbe35324ccf844 = /*#__PURE__*/ (0, $jzFZE$forwa
                             slots: {
                                 preview: {
                                     alt: '',
-                                    styles: " . l4 _b-3760ey __Nb __Ba __Da"
+                                    styles: " . lG _b-3760ey __Nb __Ba __Da"
                                 },
                                 thumbnail: {
                                     alt: '',
@@ -705,22 +687,11 @@ const $68e4e6fe083e22fd$export$e6cbe35324ccf844 = /*#__PURE__*/ (0, $jzFZE$forwa
                                         rules += ' Uc';
                                         rules += ' __Ba';
                                         rules += ' __Da';
-                                        if (props.size === "XL") {
-                                            rules += ' lbA';
-                                            rules += ' lz';
-                                        } else if (props.size === "L") {
-                                            rules += ' lbw';
-                                            rules += ' lv';
-                                        } else if (props.size === "M") {
-                                            rules += ' lbu';
-                                            rules += ' lr';
-                                        } else if (props.size === "S") {
-                                            rules += ' lbt';
-                                            rules += ' ls';
-                                        } else if (props.size === "XS") {
-                                            rules += ' lbn';
-                                            rules += ' lm';
-                                        }
+                                        if (props.size === "XL") rules += ' lo';
+                                        else if (props.size === "L") rules += ' lm';
+                                        else if (props.size === "M") rules += ' ll';
+                                        else if (props.size === "S") rules += ' lk';
+                                        else if (props.size === "XS") rules += ' lh';
                                         rules += ' k-375toq';
                                         if (props.size === "S") rules += ' _vb';
                                         else if (props.size === "XS") rules += ' _vb';
@@ -741,22 +712,11 @@ const $68e4e6fe083e22fd$export$e6cbe35324ccf844 = /*#__PURE__*/ (0, $jzFZE$forwa
                                         if (props.size === "XS") rules += ' _Nb';
                                         else rules += ' _Nc';
                                         rules += ' d-1de2x0q';
-                                        if (props.size === "XL") {
-                                            rules += ' -_375toq_k-bA';
-                                            rules += ' -_375toq_k-z';
-                                        } else if (props.size === "L") {
-                                            rules += ' -_375toq_k-bw';
-                                            rules += ' -_375toq_k-v';
-                                        } else if (props.size === "M") {
-                                            rules += ' -_375toq_k-bu';
-                                            rules += ' -_375toq_k-r';
-                                        } else if (props.size === "S") {
-                                            rules += ' -_375toq_k-bt';
-                                            rules += ' -_375toq_k-s';
-                                        } else if (props.size === "XS") {
-                                            rules += ' -_375toq_k-bn';
-                                            rules += ' -_375toq_k-m';
-                                        }
+                                        if (props.size === "XL") rules += ' -_375toq_k-o';
+                                        else if (props.size === "L") rules += ' -_375toq_k-m';
+                                        else if (props.size === "M") rules += ' -_375toq_k-l';
+                                        else if (props.size === "S") rules += ' -_375toq_k-k';
+                                        else if (props.size === "XS") rules += ' -_375toq_k-h';
                                         return rules;
                                     }({
                                         size: size

package/dist/Card.mjs.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} from '@react-aria/utils';\nimport {focusRing, lightDark, size, 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: size(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: size(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: size(6),\n      L: size(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={isSkeleton ? 'true' : undefined}\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.mjs.map"}
+{"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} from '@react-aria/utils';\nimport {focusRing, lightDark, size, 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: size(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: size(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: size(6),\n      L: size(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={isSkeleton ? 'true' : undefined}\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.mjs.map"}

package/dist/Checkbox.cjs

@@ -53,7 +53,7 @@ const $af04e099a53d3e85$var$wrapper = function anonymous(props, overrides) {
     rules += ' _Zd';
     rules += ' jF';
     rules += ' _1d';
-    if (!$l) rules += ' l7';
+    if (!$l) rules += ' lJ';
     rules += ' _c-bc1l9oh';
     rules += ' _c-1uotwbwg';
     rules += ' _c-eo0c6sf';
@@ -107,32 +107,14 @@ const $af04e099a53d3e85$export$827f4ee28efc37 = function anonymous(props) {
     rules += ' dx';
     rules += ' _Nc';
     rules += ' _M-3t1z';
-    if (props.size === "XL") {
-        rules += ' lbl';
-        rules += ' lk';
-    } else if (props.size === "L") {
-        rules += ' lb_b';
-        rules += ' l_a';
-    } else if (props.size === "S") {
-        rules += ' lb9';
-        rules += ' l8';
-    } else {
-        rules += ' lbk';
-        rules += ' lj';
-    }
-    if (props.size === "XL") {
-        rules += ' kbl';
-        rules += ' kk';
-    } else if (props.size === "L") {
-        rules += ' kb_b';
-        rules += ' k_a';
-    } else if (props.size === "S") {
-        rules += ' kb9';
-        rules += ' k8';
-    } else {
-        rules += ' kbk';
-        rules += ' kj';
-    }
+    if (props.size === "XL") rules += ' lg';
+    else if (props.size === "L") rules += ' lL';
+    else if (props.size === "S") rules += ' lK';
+    else rules += ' lf';
+    if (props.size === "XL") rules += ' kg';
+    else if (props.size === "L") rules += ' kL';
+    else if (props.size === "S") rules += ' kK';
+    else rules += ' kf';
     rules += ' _vi';
     rules += ' _wi';
     rules += ' _xi';

package/dist/Checkbox.cjs.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiCM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAoE;AAE/G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CN,MAAM;AAUb,MAAM,iCAAW;IACf,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEA,SAAS,+BAAS,YAAC,QAAQ,EAAE,GAAG,OAAqB,EAAE,GAAmC;IACxF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAE;IACpB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,oBAAoB,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,oDAAwB;IAC7D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,2CAAiB,MAAM,IAAI;IAEvD,qBACE,gCAAC,CAAA,GAAA,mCAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACnI,CAAA;YACC,IAAI,yBACF,iCAAC;gBACC,KAAK;gBACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;gBAC1B,WAAW,wCAAI;oBACb,GAAG,WAAW;oBACd,YAAY,YAAY,UAAU,IAAI,YAAY,eAAe;oBACjE,MAAM,MAAM,IAAI,IAAI;oBACpB,cAAc,oBAAoB,KAAK,eAAe,MAAM,YAAY;gBAC1E;;oBACC,YAAY,eAAe,kBAC1B,gCAAC,CAAA,GAAA,iCAAO;wBAAE,MAAM,8BAAQ,CAAC,MAAM,IAAI,IAAI,IAAI;wBAAE,WAAW;;oBAEzD,YAAY,UAAU,IAAI,CAAC,YAAY,eAAe,kBACrD,gCAAC,CAAA,GAAA,iCAAY;wBAAE,MAAM,8BAAQ,CAAC,MAAM,IAAI,IAAI,IAAI;wBAAE,WAAW;;;;YAKnE,4DAA4D;YAC5D,uEAAuE;YACvE,IAAI,CAAC,UACH,OAAO;YAGT,qBACE;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACX;;oBAEF;;;QAGP;;AAGN;AAEA;;;CAGC,GACD,IAAI,0DAAY,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Checkbox.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 {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport DashIcon from '../ui-icons/Dash';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CheckboxStyleProps {\n  /**\n   * The size of the Checkbox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether the Checkbox should be displayed with an emphasized style. */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}\n\nexport interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {\n  /** The label for the element. */\n  children?: ReactNode\n}\n\nexport const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const box = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  borderRadius: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Background',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isInvalid: {\n        default: baseColor('negative-900'),\n        forcedColors: 'Mark'\n      },\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  },\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  }\n});\n\nexport const iconStyles = style({\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'gray-25',\n      forcedColors: 'HighlightText'\n    }\n  }\n});\n\nconst iconSize = {\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nfunction Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);\n  let boxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  let isInCheckboxGroup = !!useContext(CheckboxGroupStateContext);\n  let ctx = useSlottedContext(CheckboxContext, props.slot);\n\n  return (\n    <AriaCheckbox\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => {\n        let checkbox = (\n          <div\n            ref={boxRef}\n            style={pressScale(boxRef)(renderProps)}\n            className={box({\n              ...renderProps,\n              isSelected: renderProps.isSelected || renderProps.isIndeterminate,\n              size: props.size || 'M',\n              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized\n            })}>\n            {renderProps.isIndeterminate &&\n              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n            {renderProps.isSelected && !renderProps.isIndeterminate &&\n              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n          </div>\n        );\n\n        // Only render checkbox without center baseline if no label.\n        // This avoids expanding the checkbox height to the font's line height.\n        if (!children) {\n          return checkbox;\n        }\n\n        return (\n          <>\n            <CenterBaseline>\n              {checkbox}\n            </CenterBaseline>\n            {children}\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\n"],"names":[],"version":3,"file":"Checkbox.cjs.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AAiCM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAoE;AAE/G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CN,MAAM;AAUb,MAAM,iCAAW;IACf,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;AACN;AAEA,SAAS,+BAAS,YAAC,QAAQ,EAAE,GAAG,OAAqB,EAAE,GAAmC;IACxF,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mBAAK,EAAE;IACpB,IAAI,WAAW,CAAA,GAAA,mBAAK,EAA2B;IAC/C,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE,KAAK;IAClC,IAAI,WAAW,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qCAAU;IACtC,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,oBAAoB,CAAC,CAAC,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,oDAAwB;IAC7D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,2CAAiB,MAAM,IAAI;IAEvD,qBACE,gCAAC,CAAA,GAAA,mCAAW;QACT,GAAG,KAAK;QACT,KAAK;QACL,UAAU;QACV,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,8BAAQ;gBAAC,GAAG,WAAW;0BAAE;gBAAU,MAAM,MAAM,IAAI,IAAI;YAAG,GAAG,MAAM,MAAM;kBACnI,CAAA;YACC,IAAI,yBACF,iCAAC;gBACC,KAAK;gBACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ;gBAC1B,WAAW,wCAAI;oBACb,GAAG,WAAW;oBACd,YAAY,YAAY,UAAU,IAAI,YAAY,eAAe;oBACjE,MAAM,MAAM,IAAI,IAAI;oBACpB,cAAc,oBAAoB,KAAK,eAAe,MAAM,YAAY;gBAC1E;;oBACC,YAAY,eAAe,kBAC1B,gCAAC,CAAA,GAAA,iCAAO;wBAAE,MAAM,8BAAQ,CAAC,MAAM,IAAI,IAAI,IAAI;wBAAE,WAAW;;oBAEzD,YAAY,UAAU,IAAI,CAAC,YAAY,eAAe,kBACrD,gCAAC,CAAA,GAAA,iCAAY;wBAAE,MAAM,8BAAQ,CAAC,MAAM,IAAI,IAAI,IAAI;wBAAE,WAAW;;;;YAKnE,4DAA4D;YAC5D,uEAAuE;YACvE,IAAI,CAAC,UACH,OAAO;YAGT,qBACE;;kCACE,gCAAC,CAAA,GAAA,wCAAa;kCACX;;oBAEF;;;QAGP;;AAGN;AAEA;;;CAGC,GACD,IAAI,0DAAY,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Checkbox.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 {Checkbox as AriaCheckbox, CheckboxProps as AriaCheckboxProps, CheckboxGroupStateContext, CheckboxRenderProps, ContextValue, useSlottedContext} from 'react-aria-components';\nimport {baseColor, focusRing, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline} from './CenterBaseline';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport DashIcon from '../ui-icons/Dash';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {FormContext, useFormProps} from './Form';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {pressScale} from './pressScale';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface CheckboxStyleProps {\n  /**\n   * The size of the Checkbox.\n   *\n   * @default 'M'\n   */\n  size?: 'S' | 'M' | 'L' | 'XL',\n  /** Whether the Checkbox should be displayed with an emphasized style. */\n  isEmphasized?: boolean\n}\n\ninterface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}\n\nexport interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {\n  /** The label for the element. */\n  children?: ReactNode\n}\n\nexport const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);\n\nconst wrapper = style({\n  display: 'flex',\n  columnGap: 'text-to-control',\n  alignItems: 'baseline',\n  width: 'fit',\n  font: 'control',\n  transition: 'colors',\n  color: {\n    default: 'neutral',\n    isDisabled: {\n      default: 'disabled',\n      forcedColors: 'GrayText'\n    }\n  },\n  gridColumnStart: {\n    isInForm: 'field'\n  },\n  disableTapHighlight: true\n}, getAllowedOverrides());\n\nexport const box = style<RenderProps>({\n  ...focusRing(),\n  size: 'control-sm',\n  borderRadius: 'control-sm',\n  flexShrink: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  borderWidth: 2,\n  boxSizing: 'border-box',\n  borderStyle: 'solid',\n  transition: 'default',\n  forcedColorAdjust: 'none',\n  backgroundColor: {\n    default: 'gray-25',\n    forcedColors: 'Background',\n    isSelected: {\n      default: 'neutral',\n      isEmphasized: baseColor('accent-900'),\n      forcedColors: 'Highlight',\n      isInvalid: {\n        default: baseColor('negative-900'),\n        forcedColors: 'Mark'\n      },\n      isDisabled: {\n        default: 'gray-400',\n        forcedColors: 'GrayText'\n      }\n    }\n  },\n  borderColor: {\n    default: baseColor('gray-800'),\n    forcedColors: 'ButtonBorder',\n    isInvalid: {\n      default: 'negative',\n      forcedColors: 'Mark'\n    },\n    isDisabled: {\n      default: 'gray-400',\n      forcedColors: 'GrayText'\n    },\n    isSelected: 'transparent'\n  }\n});\n\nexport const iconStyles = style({\n  '--iconPrimary': {\n    type: 'fill',\n    value: {\n      default: 'gray-25',\n      forcedColors: 'HighlightText'\n    }\n  }\n});\n\nconst iconSize = {\n  S: 'XS',\n  M: 'S',\n  L: 'M',\n  XL: 'L'\n} as const;\n\nfunction Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);\n  let boxRef = useRef(null);\n  let inputRef = useRef<HTMLInputElement | null>(null);\n  let domRef = useFocusableRef(ref, inputRef);\n  let isInForm = !!useContext(FormContext);\n  props = useFormProps(props);\n  let isInCheckboxGroup = !!useContext(CheckboxGroupStateContext);\n  let ctx = useSlottedContext(CheckboxContext, props.slot);\n\n  return (\n    <AriaCheckbox\n      {...props}\n      ref={domRef}\n      inputRef={inputRef}\n      style={props.UNSAFE_style}\n      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>\n      {renderProps => {\n        let checkbox = (\n          <div\n            ref={boxRef}\n            style={pressScale(boxRef)(renderProps)}\n            className={box({\n              ...renderProps,\n              isSelected: renderProps.isSelected || renderProps.isIndeterminate,\n              size: props.size || 'M',\n              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized\n            })}>\n            {renderProps.isIndeterminate &&\n              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n            {renderProps.isSelected && !renderProps.isIndeterminate &&\n              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />\n            }\n          </div>\n        );\n\n        // Only render checkbox without center baseline if no label.\n        // This avoids expanding the checkbox height to the font's line height.\n        if (!children) {\n          return checkbox;\n        }\n\n        return (\n          <>\n            <CenterBaseline>\n              {checkbox}\n            </CenterBaseline>\n            {children}\n          </>\n        );\n      }}\n    </AriaCheckbox>\n  );\n}\n\n/**\n * Checkboxes allow users to select multiple items from a list of individual items,\n * or to mark one individual item as selected.\n */\nlet _Checkbox = forwardRef(Checkbox);\nexport {_Checkbox as Checkbox};\n"],"names":[],"version":3,"file":"Checkbox.cjs.map"}