@sproutsocial/seeds-react-card 1.1.53 → 1.1.55

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card.tsx","../../src/styles.tsx","../../src/utils.ts","../../src/subComponents.tsx","../../src/CardTypes.ts","../../src/index.ts"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { StyledCard } from \"./styles\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\nimport { SubComponentContext, onKeyDown } from \"./utils\";\nimport { SelectedIcon } from \"./subComponents\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/card/\n *\n * Cards with role='presentation' are non-interactive for accessibility compliance.\n * Use role='button' for interactive Cards.\n *\n * Avoid nesting interactive content inside a Card with role='button'.\n *\n * Interactive content: \"a\", \"audio\", \"button\", \"embed\", \"iframe\", \"img\", \"input\", \"label\", \"select\", \"textarea\", \"video\"\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n *\n * @example\n * // Interactive Card\n * <Card role=\"button\" onClick={_onClick}>\n *   <Text>Click this card</Text>\n * </Card>\n *\n * @example\n * // Presentation Card with interactive children\n * <Card role=\"presentation\">\n *   <Text>This card is not interactive</Text>\n *   <Link href=\"/details\">But this link is</Link>\n * </Card>\n */\n\nconst Card = ({\n  children,\n  disabled = false,\n  elevation = \"low\",\n  href,\n  onClick,\n  role = \"presentation\",\n  selected,\n  ...rest\n}: TypeCardProps) => {\n  const [hasSubComponent, setHasSubComponent] = useState<boolean>(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const isRoleLink = role === \"link\";\n  const isRolePresentation = role === \"presentation\";\n  const checkedConditions = role === \"checkbox\" ? selected : undefined;\n\n  const cardContext: TypeCardContext = {\n    setHasSubComponent: setHasSubComponent,\n    href: href,\n    linkRef: linkRef,\n  };\n\n  const handleClickConditions: React.MouseEventHandler = (e) =>\n    isRoleLink ? linkRef.current?.click() : onClick?.(e);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) =>\n    onKeyDown({ e, href, onClick, ref: containerRef, role });\n\n  const shouldBeInteractive = !isRolePresentation && !disabled;\n\n  return (\n    <StyledCard\n      tabIndex={isRoleLink || isRolePresentation || disabled ? -1 : 0}\n      role={isRoleLink ? undefined : role}\n      onClick={shouldBeInteractive ? handleClickConditions : undefined}\n      onKeyDown={shouldBeInteractive ? handleKeyDown : undefined}\n      $elevation={elevation}\n      ref={containerRef}\n      $selected={selected}\n      aria-checked={checkedConditions}\n      $disabled={disabled}\n      aria-disabled={disabled && disabled}\n      $compositionalComponents={hasSubComponent}\n      $isRoleLink={isRoleLink}\n      {...rest}\n    >\n      <SelectedIcon $selected={selected} />\n      <SubComponentContext.Provider value={cardContext}>\n        {children}\n      </SubComponentContext.Provider>\n    </StyledCard>\n  );\n};\n\nexport default Card;\n","import styled from \"styled-components\";\nimport {\n  border,\n  color,\n  flexbox,\n  grid,\n  layout,\n  position,\n  space,\n  typography,\n} from \"styled-system\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n  TypeStyledCard,\n  TypeCardArea,\n  TypeStyledSelectedIcon,\n  TypeCardLink,\n} from \"./CardTypes\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\n// TODO: Would be really cool to cherry pick specific props from style functions. For example,\n// removing the css prop 'color' from the color function or importing just the specific\n// props the component needs. It appears to be possible with some and not others.\n// https://github.com/styled-system/styled-system/issues/1569\n\nexport const StyledCardContent = styled.div<TypeCardArea>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => theme.space[400]};\n  box-sizing: border-box;\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const StyledCardHeader = styled(StyledCardContent)`\n  flex-direction: row;\n  border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid\n  ${theme.colors.container.border.base}`};\n  border-top-left-radius: ${({ theme }) => theme.radii.inner};\n  border-top-right-radius: ${({ theme }) => theme.radii.inner};\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const StyledCardFooter = styled(StyledCardContent)`\n  flex-direction: row;\n  border-top: ${({ theme }) => `${theme.borderWidths[500]} solid\n  ${theme.colors.container.border.base}`};\n  border-bottom-left-radius: ${({ theme }) => theme.radii.inner};\n  border-bottom-right-radius: ${({ theme }) => theme.radii.inner};\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const SelectedIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: -8px;\n  right: -8px;\n`;\n\nexport const StyledSelectedIcon = styled(Icon)<TypeStyledSelectedIcon>`\n  border-radius: 50%;\n  background: ${({ theme }) => theme.colors.container.background.base};\n  opacity: 0;\n  transition: opacity ${({ theme }) => theme.duration.medium};\n\n  ${({ $selected }) =>\n    $selected &&\n    `\n    opacity: 1;\n  `}\n`;\n\nexport const StyledCardLink = styled.a<TypeCardLink>`\n  font-family: ${(p) => p.theme.fontFamily};\n  font-weight: ${(p) => p.theme.fontWeights.bold};\n  color: ${(p) => p.theme.colors.text.headline};\n  ${(p) => p.theme.typography[400]};\n\n  ${color}\n  ${typography}\n`;\n\nexport const StyledCard = styled.div<TypeStyledCard>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  margin: 0;\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  padding: ${({ theme, $compositionalComponents }) =>\n    $compositionalComponents ? 0 : theme.space[400]};\n  border-radius: ${({ theme }) => theme.radii.outer};\n  transition: box-shadow ${({ theme }) => theme.duration.medium},\n    border ${({ theme }) => theme.duration.medium};\n\n  &[role=\"button\"],\n  &[role=\"checkbox\"] {\n    cursor: pointer;\n\n    &:hover {\n      box-shadow: ${({ theme, $elevation = \"low\" }) =>\n        theme.shadows[$elevation]};\n    }\n  }\n\n  ${({ $isRoleLink, theme, $elevation = \"low\" }) =>\n    $isRoleLink &&\n    `\n\t\tcursor: pointer;\n\n    &:hover {\n      box-shadow: ${theme.shadows[$elevation]};\n    }\n\t`}\n\n  &:focus-within {\n    ${({ $isRoleLink }) => ($isRoleLink ? focusRing : null)}\n    ${StyledCardLink}:focus {\n      border: none;\n      box-shadow: none;\n      outline: none;\n    }\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ $disabled }) =>\n    $disabled &&\n    `\n    ${disabled}\n  `}\n\n  ${({ $selected, theme }) =>\n    $selected &&\n    `\n    border: ${theme.borderWidths[500]} solid ${theme.colors.container.border.selected};  \n  `}\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${position}\n  ${space}\n`;\n\nexport const StyledCardAffordance = styled(Icon)`\n  ${StyledCard}:hover & {\n    transform: translateX(${(p) => p.theme.space[200]});\n  }\n  transition: ${(p) => p.theme.duration.medium};\n`;\n","import { createContext, useContext, useEffect } from \"react\";\nimport { assertIsElement } from \"@sproutsocial/seeds-react-utilities\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\n\nexport const SubComponentContext = createContext<TypeCardContext>({\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setHasSubComponent: () => {},\n  href: \"\",\n  linkRef: null,\n});\n\nexport function useChildContext() {\n  const { setHasSubComponent } = useContext(SubComponentContext);\n  useEffect(() => {\n    setHasSubComponent && setHasSubComponent(true);\n  }, [setHasSubComponent]);\n}\n\ninterface navigateToParams extends Pick<TypeCardProps, \"href\"> {\n  e: React.MouseEvent | React.KeyboardEvent;\n  ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const navigateTo = ({ e, href, ref }: navigateToParams) => {\n  const { target } = e;\n\n  // asserts that target is an element so `contains` accepts it\n  assertIsElement(target);\n\n  if (ref.current?.contains(target)) {\n    if (\n      target.getAttribute(\"onclick\") !== null ||\n      target.getAttribute(\"href\") !== null\n    ) {\n      e.stopPropagation();\n      return;\n    }\n  }\n\n  window.open(href, \"_blank\")?.focus();\n};\n\ninterface onKeyDownParams\n  extends Pick<TypeCardProps, \"href\" | \"onClick\" | \"role\"> {\n  e: React.KeyboardEvent;\n  ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const onKeyDown = ({ e, href, onClick, ref, role }: onKeyDownParams) => {\n  if (e?.key === \"Enter\") {\n    if (role === \"link\") {\n      return navigateTo({ e, href, ref });\n    }\n\n    if (role === \"presentation\") {\n      return;\n    }\n\n    return onClick?.(e);\n  }\n};\n","import React, { useContext } from \"react\";\nimport { useChildContext, SubComponentContext } from \"./utils\";\nimport type {\n  TypeCardLink,\n  TypeSharedCardSystemProps,\n  TypeStyledSelectedIcon,\n} from \"./CardTypes\";\nimport {\n  StyledCardContent,\n  StyledCardHeader,\n  StyledCardFooter,\n  StyledSelectedIcon,\n  SelectedIconWrapper,\n  StyledCardAffordance,\n  StyledCardLink,\n} from \"./styles\";\n\ninterface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {\n  children?: React.ReactNode;\n}\n\nexport const CardContent = ({\n  children,\n  ...rest\n}: TypeSharedSubComponentProps) => {\n  // TODO: It could be cool to possibly adjust the context to include an array of names of child components.\n  // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.\n  useChildContext();\n  return <StyledCardContent {...rest}>{children}</StyledCardContent>;\n};\n\nexport const CardHeader = ({\n  children,\n  ...rest\n}: TypeSharedSubComponentProps) => {\n  useChildContext();\n  return <StyledCardHeader {...rest}>{children}</StyledCardHeader>;\n};\n\nexport const CardFooter = ({\n  children,\n  ...rest\n}: TypeSharedSubComponentProps) => {\n  useChildContext();\n  return <StyledCardFooter {...rest}>{children}</StyledCardFooter>;\n};\n\ninterface TypeSelectedIconProps {\n  $selected?: TypeStyledSelectedIcon[\"$selected\"];\n}\n\nexport const SelectedIcon = ({ $selected }: TypeSelectedIconProps) => {\n  return (\n    <SelectedIconWrapper>\n      <StyledSelectedIcon\n        aria-hidden\n        color=\"icon.base\"\n        name=\"circle-check-solid\"\n        $selected={$selected}\n      />\n    </SelectedIconWrapper>\n  );\n};\n\nexport const CardAffordance = ({ ...rest }) => {\n  return (\n    <StyledCardAffordance\n      {...rest}\n      size=\"mini\"\n      name=\"arrow-right-solid\"\n      // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223\n      aria-hidden\n    />\n  );\n};\n\nexport const CardLink = ({\n  affordance,\n  children,\n  external = false,\n  color,\n  ...rest\n}: React.PropsWithChildren<TypeCardLink>) => {\n  const { href, linkRef } = useContext(SubComponentContext);\n\n  // Because we are hijacking Card click event to directly click this link, we need to stop propagation to avoid a double click event.\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.stopPropagation();\n  };\n\n  return (\n    <StyledCardLink\n      {...rest}\n      target={external ? \"_blank\" : undefined}\n      rel={external ? \"noreferrer\" : undefined}\n      href={href}\n      onClick={handleClick}\n      ref={linkRef}\n      // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      color={color}\n    >\n      <>\n        {children}\n        {affordance ? <CardAffordance ml={300} /> : null}\n      </>\n    </StyledCardLink>\n  );\n};\n","import type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\nimport * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeBorderSystemProps,\n  TypeColorSystemProps,\n  TypeFlexboxSystemProps,\n  TypeGridSystemProps,\n  TypeLayoutSystemProps,\n  TypePositionSystemProps,\n  TypeSpaceSystemProps,\n  TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSharedCardSystemProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeStyledComponentsCommonProps,\n    TypeBorderSystemProps,\n    TypeColorSystemProps,\n    TypeFlexboxSystemProps,\n    TypeGridSystemProps,\n    TypeLayoutSystemProps,\n    TypePositionSystemProps,\n    TypeSpaceSystemProps {}\n\n// consumer facing props that affect the styles of the component. We need to define these first so the user doesn't see our transient naming conventions.\nexport interface TypeCardStyleProps {\n  elevation?: \"low\" | \"medium\" | \"high\";\n  disabled?: boolean;\n  compositionalComponents?: boolean;\n  selected?: boolean;\n  isRoleLink?: boolean;\n}\n\n// Since we only want to manage the style props in one place(above), we'll use this generic to prepend the properties of TypeCardStyleProps with $.\nexport type TypeStyleTransientProps<T> = {\n  [K in Extract<keyof T, string> as `$${K}`]: T[K];\n};\n\nexport type TypeCardStyleTransientProps =\n  TypeStyleTransientProps<TypeCardStyleProps>;\n\nexport interface TypeStyledCard\n  extends TypeSharedCardSystemProps,\n    TypeCardStyleTransientProps {}\n\nexport interface TypeCardStyles\n  extends TypeSharedCardSystemProps,\n    Omit<TypeCardStyleProps, \"compositionalComponents\"> {}\n\ntype TypeOnClick = (event: React.MouseEvent | React.KeyboardEvent) => void;\n\ntype TypeGenericCard = {\n  /** role is used for to set accessibility properties,\n   *  to determine styling and interaction behavior,\n   *  and to determine which props should be allowed.*/\n  role: \"link\" | \"button\" | \"checkbox\" | \"presentation\";\n  /** When role is link, use href to determine the link destination.\n   *  Required for role=\"link\", disallowed for all other roles */\n  href?: string;\n  /** Required for role=\"button\" and role=\"checkbox\",\n   *  discouraged for role=\"presentation\", and disallowed for role=\"link\" */\n  onClick?: TypeOnClick;\n  /** Indicates whether the card is selected.\n   *  Required for role=\"checkbox\", disallowed for all other roles */\n  selected?: boolean;\n};\n\nexport type TypeLinkCardProps = {\n  role: \"link\";\n  href: string;\n  onClick?: never;\n  selected?: never;\n};\n\nexport type TypeButtonCardProps = {\n  role: \"button\";\n  href?: never;\n  onClick: TypeOnClick;\n  selected?: never;\n};\n\nexport type TypeCheckboxCardProps = {\n  role: \"checkbox\";\n  href?: never;\n  onClick: TypeOnClick;\n  selected: boolean;\n};\n\nexport type TypePresentationCardProps = {\n  role: \"presentation\";\n  href?: never;\n  /**\n   * **Not supported for accessibility:**\n   * `role='presentation'` removes the element from the accessibility tree.\n   * Presentation Cards do not support `onClick` handlers or keyboard interactions.\n   * Use `role='button'` for interactive Cards instead.\n   */\n  onClick?: never;\n  selected?: never;\n};\n\nexport type TypeCardConditions =\n  | TypeLinkCardProps\n  | TypeButtonCardProps\n  | TypeCheckboxCardProps\n  | TypePresentationCardProps;\n\nexport type TypeCardProps = React.PropsWithChildren<TypeCardStyles> &\n  TypeGenericCard &\n  TypeCardConditions;\n\nexport interface TypeCardArea extends TypeSharedCardSystemProps {\n  $divider?: \"top\" | \"bottom\";\n}\n\nexport interface TypeStyledSelectedIcon extends TypeIconProps {\n  $selected?: TypeCardStyleTransientProps[\"$selected\"];\n}\n\nexport interface TypeCardContext {\n  setHasSubComponent?: React.Dispatch<React.SetStateAction<boolean>>;\n  href?: string;\n  linkRef: React.RefObject<HTMLAnchorElement> | null;\n}\n\nexport interface TypeCardLink\n  extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n    TypeColorSystemProps,\n    TypeTypographySystemProps {\n  affordance?: boolean;\n  external?: boolean;\n}\n","import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n"],"mappings":";AAAA,SAAgB,QAAQ,gBAAgB;;;ACAxC,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,WAAW,gBAAgB;AAOpC,OAAO,UAAU;AAOV,IAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,aAG3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAGxC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA;AAGF,IAAM,mBAAmB,OAAO,iBAAiB;AAAA;AAAA,mBAErC,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,aAAa,GAAG,CAAC;AAAA,IACxD,MAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA,4BACZ,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA,6BAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,IAEzD,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA;AAGF,IAAM,mBAAmB,OAAO,iBAAiB;AAAA;AAAA,gBAExC,CAAC,EAAE,MAAM,MAAM,GAAG,MAAM,aAAa,GAAG,CAAC;AAAA,IACrD,MAAM,OAAO,UAAU,OAAO,IAAI,EAAE;AAAA,+BACT,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA,gCAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAAA,IAE5D,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,KAAK;AAAA;AAGF,IAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,IAAM,qBAAqB,OAAO,IAAI;AAAA;AAAA,gBAE7B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA;AAAA,wBAE7C,CAAC,EAAE,MAAM,MAAM,MAAM,SAAS,MAAM;AAAA;AAAA,IAExD,CAAC,EAAE,UAAU,MACb,aACA;AAAA;AAAA,GAED;AAAA;AAGI,IAAM,iBAAiB,OAAO;AAAA,iBACpB,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,iBACzB,CAAC,MAAM,EAAE,MAAM,YAAY,IAAI;AAAA,WACrC,CAAC,MAAM,EAAE,MAAM,OAAO,KAAK,QAAQ;AAAA,IAC1C,CAAC,MAAM,EAAE,MAAM,WAAW,GAAG,CAAC;AAAA;AAAA,IAE9B,KAAK;AAAA,IACL,UAAU;AAAA;AAGP,IAAM,aAAa,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMjB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,YACzD,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,aAC1C,CAAC,EAAE,OAAO,yBAAyB,MAC5C,2BAA2B,IAAI,MAAM,MAAM,GAAG,CAAC;AAAA,mBAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA,2BACxB,CAAC,EAAE,MAAM,MAAM,MAAM,SAAS,MAAM;AAAA,aAClD,CAAC,EAAE,MAAM,MAAM,MAAM,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAO7B,CAAC,EAAE,OAAO,aAAa,MAAM,MACzC,MAAM,QAAQ,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,IAI7B,CAAC,EAAE,aAAa,OAAO,aAAa,MAAM,MAC1C,eACA;AAAA;AAAA;AAAA;AAAA,oBAIgB,MAAM,QAAQ,UAAU,CAAC;AAAA;AAAA,EAE3C;AAAA;AAAA;AAAA,MAGI,CAAC,EAAE,YAAY,MAAO,cAAc,YAAY,IAAK;AAAA,MACrD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQd,SAAS;AAAA;AAAA;AAAA,IAGX,CAAC,EAAE,UAAU,MACb,aACA;AAAA,MACE,QAAQ;AAAA,GACX;AAAA;AAAA,IAEC,CAAC,EAAE,WAAW,MAAM,MACpB,aACA;AAAA,cACU,MAAM,aAAa,GAAG,CAAC,UAAU,MAAM,OAAO,UAAU,OAAO,QAAQ;AAAA,GAClF;AAAA;AAAA,IAEC,MAAM;AAAA,IACN,KAAK;AAAA,IACL,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA;AAGF,IAAM,uBAAuB,OAAO,IAAI;AAAA,IAC3C,UAAU;AAAA,4BACc,CAAC,MAAM,EAAE,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,gBAErC,CAAC,MAAM,EAAE,MAAM,SAAS,MAAM;AAAA;;;AC9K9C,SAAS,eAAe,YAAY,iBAAiB;AACrD,SAAS,uBAAuB;AAGzB,IAAM,sBAAsB,cAA+B;AAAA;AAAA,EAEhE,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,MAAM;AAAA,EACN,SAAS;AACX,CAAC;AAEM,SAAS,kBAAkB;AAChC,QAAM,EAAE,mBAAmB,IAAI,WAAW,mBAAmB;AAC7D,YAAU,MAAM;AACd,0BAAsB,mBAAmB,IAAI;AAAA,EAC/C,GAAG,CAAC,kBAAkB,CAAC;AACzB;AAOO,IAAM,aAAa,CAAC,EAAE,GAAG,MAAM,IAAI,MAAwB;AAChE,QAAM,EAAE,OAAO,IAAI;AAGnB,kBAAgB,MAAM;AAEtB,MAAI,IAAI,SAAS,SAAS,MAAM,GAAG;AACjC,QACE,OAAO,aAAa,SAAS,MAAM,QACnC,OAAO,aAAa,MAAM,MAAM,MAChC;AACA,QAAE,gBAAgB;AAClB;AAAA,IACF;AAAA,EACF;AAEA,SAAO,KAAK,MAAM,QAAQ,GAAG,MAAM;AACrC;AAQO,IAAM,YAAY,CAAC,EAAE,GAAG,MAAM,SAAS,KAAK,KAAK,MAAuB;AAC7E,MAAI,GAAG,QAAQ,SAAS;AACtB,QAAI,SAAS,QAAQ;AACnB,aAAO,WAAW,EAAE,GAAG,MAAM,IAAI,CAAC;AAAA,IACpC;AAEA,QAAI,SAAS,gBAAgB;AAC3B;AAAA,IACF;AAEA,WAAO,UAAU,CAAC;AAAA,EACpB;AACF;;;AC5DA,SAAgB,cAAAA,mBAAkB;AA4BzB,SA2EH,UA3EG,KA2EH,YA3EG;AAPF,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,MAAmC;AAGjC,kBAAgB;AAChB,SAAO,oBAAC,qBAAmB,GAAG,MAAO,UAAS;AAChD;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,GAAG;AACL,MAAmC;AACjC,kBAAgB;AAChB,SAAO,oBAAC,oBAAkB,GAAG,MAAO,UAAS;AAC/C;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,GAAG;AACL,MAAmC;AACjC,kBAAgB;AAChB,SAAO,oBAAC,oBAAkB,GAAG,MAAO,UAAS;AAC/C;AAMO,IAAM,eAAe,CAAC,EAAE,UAAU,MAA6B;AACpE,SACE,oBAAC,uBACC;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAM;AAAA,MACN,MAAK;AAAA,MACL;AAAA;AAAA,EACF,GACF;AAEJ;AAEO,IAAM,iBAAiB,CAAC,EAAE,GAAG,KAAK,MAAM;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MAEL,eAAW;AAAA;AAAA,EACb;AAEJ;AAEO,IAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAAC;AAAA,EACA,GAAG;AACL,MAA6C;AAC3C,QAAM,EAAE,MAAM,QAAQ,IAAIC,YAAW,mBAAmB;AAGxD,QAAM,cAAc,CAAC,MAA2C;AAC9D,MAAE,gBAAgB;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,QAAQ,WAAW,WAAW;AAAA,MAC9B,KAAK,WAAW,eAAe;AAAA,MAC/B;AAAA,MACA,SAAS;AAAA,MACT,KAAK;AAAA,MAIL,OAAOD;AAAA,MAEP,2CACG;AAAA;AAAA,QACA,aAAa,oBAAC,kBAAe,IAAI,KAAK,IAAK;AAAA,SAC9C;AAAA;AAAA,EACF;AAEJ;;;AH9CI,SAeE,OAAAE,MAfF,QAAAC,aAAA;AAhCJ,IAAM,OAAO,CAAC;AAAA,EACZ;AAAA,EACA,UAAAC,YAAW;AAAA,EACX,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAkB,KAAK;AACrE,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,UAAU,OAA0B,IAAI;AAC9C,QAAM,aAAa,SAAS;AAC5B,QAAM,qBAAqB,SAAS;AACpC,QAAM,oBAAoB,SAAS,aAAa,WAAW;AAE3D,QAAM,cAA+B;AAAA,IACnC;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,wBAAiD,CAAC,MACtD,aAAa,QAAQ,SAAS,MAAM,IAAI,UAAU,CAAC;AAErD,QAAM,gBAA4D,CAAC,MACjE,UAAU,EAAE,GAAG,MAAM,SAAS,KAAK,cAAc,KAAK,CAAC;AAEzD,QAAM,sBAAsB,CAAC,sBAAsB,CAACA;AAEpD,SACE,gBAAAD;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,cAAc,sBAAsBC,YAAW,KAAK;AAAA,MAC9D,MAAM,aAAa,SAAY;AAAA,MAC/B,SAAS,sBAAsB,wBAAwB;AAAA,MACvD,WAAW,sBAAsB,gBAAgB;AAAA,MACjD,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,WAAW;AAAA,MACX,gBAAc;AAAA,MACd,WAAWA;AAAA,MACX,iBAAeA,aAAYA;AAAA,MAC3B,0BAA0B;AAAA,MAC1B,aAAa;AAAA,MACZ,GAAG;AAAA,MAEJ;AAAA,wBAAAF,KAAC,gBAAa,WAAW,UAAU;AAAA,QACnC,gBAAAA,KAAC,oBAAoB,UAApB,EAA6B,OAAO,aAClC,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;;;AIrFf,OAAuB;;;ACCvB,IAAO,gBAAQ;","names":["useContext","color","useContext","jsx","jsxs","disabled"]}
+{"version":3,"sources":["../../src/Card.tsx","../../src/CardHybrid.tsx","../../src/CardStyled.tsx","../../src/styles.tsx","../../src/useCardBehavior.ts","../../src/utils.ts","../../src/subComponents.tsx","../../src/CardTailwind.tsx","../../src/CardTypes.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport type { TypeCardProps } from \"./CardTypes\";\nimport CardHybrid from \"./CardHybrid\";\n\n/**\n * @link https://seeds.sproutsocial.com/components/card/\n *\n * Card automatically routes between the Tailwind implementation (preferred)\n * and the styled-components implementation (for consumers using system props,\n * BORDER-mixin props, or a styled() extension).\n *\n * Cards with role='presentation' are non-interactive for accessibility compliance.\n * Use role='button' for interactive Cards.\n *\n * Avoid nesting interactive content inside a Card with role='button'.\n *\n * Interactive content: \"a\", \"audio\", \"button\", \"embed\", \"iframe\", \"img\", \"input\", \"label\", \"select\", \"textarea\", \"video\"\n * @see https://html.spec.whatwg.org/multipage/dom.html#interactive-content\n *\n * @example\n * // Interactive Card\n * <Card role=\"button\" onClick={_onClick}>\n *   <Text>Click this card</Text>\n * </Card>\n *\n * @example\n * // Presentation Card with interactive children\n * <Card role=\"presentation\">\n *   <Text>This card is not interactive</Text>\n *   <Link href=\"/details\">But this link is</Link>\n * </Card>\n */\nconst Card = React.forwardRef<HTMLDivElement, TypeCardProps>((props, ref) => (\n  <CardHybrid {...props} ref={ref} />\n));\n\nCard.displayName = \"Card\";\n\nexport default Card;\n","/**\n * Hybrid Card Component\n * Automatically chooses between Tailwind and styled-components based on props.\n *\n * Routes to the styled-components path when a styled-system prop is present\n * (hasStyledProps), a BORDER-mixin prop is present (hasBorderProps), or the\n * component was extended with styled() (isStyledExtension). Otherwise renders\n * the Tailwind path (preferred - no runtime CSS-in-JS).\n */\n\nimport React from \"react\";\nimport {\n  hasStyledProps,\n  hasBorderProps,\n  isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nimport type { TypeCardProps } from \"./CardTypes\";\nimport CardStyled from \"./CardStyled\"; // Styled-components version\nimport { CardTailwind } from \"./CardTailwind\"; // Tailwind version\n\nconst CardHybrid = React.forwardRef<HTMLDivElement, TypeCardProps>(\n  (props, ref) => {\n    if (\n      hasStyledProps(props) ||\n      hasBorderProps(props) ||\n      isStyledExtension(props)\n    ) {\n      return <CardStyled {...props} ref={ref} />;\n    }\n\n    // Use Tailwind version (preferred - better performance)\n    return <CardTailwind {...props} ref={ref} />;\n  }\n);\n\nCardHybrid.displayName = \"Card\";\nexport default CardHybrid;\n","import React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport { StyledCard } from \"./styles\";\nimport type { TypeCardProps } from \"./CardTypes\";\nimport { useCardBehavior } from \"./useCardBehavior\";\nimport { SelectedIcon } from \"./subComponents\";\n\n/**\n * Styled-components implementation of Card. Used by CardHybrid whenever a\n * consumer passes a styled-system prop, a BORDER-mixin prop, or a styled()\n * extension. Behaviour is shared with CardTailwind via useCardBehavior.\n */\nconst CardStyled = React.forwardRef<HTMLDivElement, TypeCardProps>(\n  (\n    {\n      children,\n      disabled = false,\n      elevation = \"low\",\n      href,\n      onClick,\n      role = \"presentation\",\n      selected,\n      ...rest\n    }: TypeCardProps,\n    ref\n  ) => {\n    const {\n      containerRef,\n      cardContext,\n      hasSubComponent,\n      isRoleLink,\n      SubComponentContext,\n      containerProps,\n    } = useCardBehavior({ disabled, href, onClick, role, selected });\n\n    return (\n      <StyledCard\n        {...containerProps}\n        $elevation={elevation}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore legacy ref type mismatch between the RefObject and callback ref\n        ref={mergeRefs(containerRef, ref)}\n        $selected={selected}\n        $disabled={disabled}\n        $compositionalComponents={hasSubComponent}\n        $isRoleLink={isRoleLink}\n        {...rest}\n      >\n        <SelectedIcon $selected={selected} />\n        <SubComponentContext.Provider value={cardContext}>\n          {children}\n        </SubComponentContext.Provider>\n      </StyledCard>\n    );\n  }\n);\n\nCardStyled.displayName = \"Card\";\nexport default CardStyled;\n","import styled from \"styled-components\";\nimport {\n  border,\n  color,\n  flexbox,\n  grid,\n  layout,\n  position,\n  space,\n  typography,\n} from \"styled-system\";\nimport { focusRing, disabled } from \"@sproutsocial/seeds-react-mixins\";\nimport type {\n  TypeStyledCard,\n  TypeCardArea,\n  TypeStyledSelectedIcon,\n  TypeCardLink,\n} from \"./CardTypes\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n\n// TODO: Would be really cool to cherry pick specific props from style functions. For example,\n// removing the css prop 'color' from the color function or importing just the specific\n// props the component needs. It appears to be possible with some and not others.\n// https://github.com/styled-system/styled-system/issues/1569\n\nexport const StyledCardContent = styled.div<TypeCardArea>`\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => theme.space[400]};\n  box-sizing: border-box;\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const StyledCardHeader = styled(StyledCardContent)`\n  flex-direction: row;\n  border-bottom: ${({ theme }) => `${theme.borderWidths[500]} solid\n  ${theme.colors.container.border.base}`};\n  border-top-left-radius: ${({ theme }) => theme.radii.inner};\n  border-top-right-radius: ${({ theme }) => theme.radii.inner};\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const StyledCardFooter = styled(StyledCardContent)`\n  flex-direction: row;\n  border-top: ${({ theme }) => `${theme.borderWidths[500]} solid\n  ${theme.colors.container.border.base}`};\n  border-bottom-left-radius: ${({ theme }) => theme.radii.inner};\n  border-bottom-right-radius: ${({ theme }) => theme.radii.inner};\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${space}\n`;\n\nexport const SelectedIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: -8px;\n  right: -8px;\n`;\n\nexport const StyledSelectedIcon = styled(Icon)<TypeStyledSelectedIcon>`\n  border-radius: 50%;\n  background: ${({ theme }) => theme.colors.container.background.base};\n  opacity: 0;\n  transition: opacity ${({ theme }) => theme.duration.medium};\n\n  ${({ $selected }) =>\n    $selected &&\n    `\n    opacity: 1;\n  `}\n`;\n\nexport const StyledCardLink = styled.a<TypeCardLink>`\n  font-family: ${(p) => p.theme.fontFamily};\n  font-weight: ${(p) => p.theme.fontWeights.bold};\n  color: ${(p) => p.theme.colors.text.headline};\n  ${(p) => p.theme.typography[400]};\n\n  ${color}\n  ${typography}\n`;\n\nexport const StyledCard = styled.div<TypeStyledCard>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  margin: 0;\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  padding: ${({ theme, $compositionalComponents }) =>\n    $compositionalComponents ? 0 : theme.space[400]};\n  border-radius: ${({ theme }) => theme.radii.outer};\n  transition: box-shadow ${({ theme }) => theme.duration.medium},\n    border ${({ theme }) => theme.duration.medium};\n\n  &[role=\"button\"],\n  &[role=\"checkbox\"] {\n    cursor: pointer;\n\n    &:hover {\n      box-shadow: ${({ theme, $elevation = \"low\" }) =>\n        theme.shadows[$elevation]};\n    }\n  }\n\n  ${({ $isRoleLink, theme, $elevation = \"low\" }) =>\n    $isRoleLink &&\n    `\n\t\tcursor: pointer;\n\n    &:hover {\n      box-shadow: ${theme.shadows[$elevation]};\n    }\n\t`}\n\n  &:focus-within {\n    ${({ $isRoleLink }) => ($isRoleLink ? focusRing : null)}\n    ${StyledCardLink}:focus {\n      border: none;\n      box-shadow: none;\n      outline: none;\n    }\n  }\n\n  &:focus {\n    ${focusRing}\n  }\n\n  ${({ $disabled }) =>\n    $disabled &&\n    `\n    ${disabled}\n  `}\n\n  ${({ $selected, theme }) =>\n    $selected &&\n    `\n    border: ${theme.borderWidths[500]} solid ${theme.colors.container.border.selected};  \n  `}\n\n  ${border}\n  ${color}\n  ${flexbox}\n  ${grid}\n  ${layout}\n  ${position}\n  ${space}\n`;\n\nexport const StyledCardAffordance = styled(Icon)`\n  ${StyledCard}:hover & {\n    transform: translateX(${(p) => p.theme.space[200]});\n  }\n  transition: ${(p) => p.theme.duration.medium};\n`;\n","import React, { useRef, useState } from \"react\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\n// Import from ./utils exactly as Card.tsx did. This hook deliberately lives in\n// its own file (NOT utils.ts) so the test's `jest.mock(\"../utils\")` automock\n// does not neutralize it — only onKeyDown/SubComponentContext stay mocked.\nimport { SubComponentContext, onKeyDown } from \"./utils\";\n\ntype TypeUseCardBehaviorParams = Pick<\n  TypeCardProps,\n  \"disabled\" | \"href\" | \"onClick\" | \"role\" | \"selected\"\n>;\n\n/**\n * Shared interactive logic for Card, consumed by both CardStyled and\n * CardTailwind so the two rendering paths cannot drift. Owns the\n * hasSubComponent state, the container/link refs, the SubComponentContext\n * value, and the computed container props (tabIndex, role, handlers, aria-*).\n */\nexport function useCardBehavior({\n  disabled = false,\n  href,\n  onClick,\n  role = \"presentation\",\n  selected,\n}: TypeUseCardBehaviorParams) {\n  const [hasSubComponent, setHasSubComponent] = useState<boolean>(false);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const isRoleLink = role === \"link\";\n  const isRolePresentation = role === \"presentation\";\n  const checkedConditions = role === \"checkbox\" ? selected : undefined;\n\n  const cardContext: TypeCardContext = {\n    setHasSubComponent: setHasSubComponent,\n    href: href,\n    linkRef: linkRef,\n  };\n\n  const handleClickConditions: React.MouseEventHandler = (e) =>\n    isRoleLink ? linkRef.current?.click() : onClick?.(e);\n\n  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) =>\n    onKeyDown({ e, href, onClick, ref: containerRef, role });\n\n  const shouldBeInteractive = !isRolePresentation && !disabled;\n\n  const containerProps = {\n    tabIndex: isRoleLink || isRolePresentation || disabled ? -1 : 0,\n    role: isRoleLink ? undefined : role,\n    onClick: shouldBeInteractive ? handleClickConditions : undefined,\n    onKeyDown: shouldBeInteractive ? handleKeyDown : undefined,\n    \"aria-checked\": checkedConditions,\n    \"aria-disabled\": disabled && disabled,\n  };\n\n  return {\n    containerRef,\n    linkRef,\n    cardContext,\n    hasSubComponent,\n    isRoleLink,\n    SubComponentContext,\n    containerProps,\n  };\n}\n","import { createContext, useContext, useEffect } from \"react\";\nimport { assertIsElement } from \"@sproutsocial/seeds-react-utilities\";\nimport type { TypeCardProps, TypeCardContext } from \"./CardTypes\";\n\nexport const SubComponentContext = createContext<TypeCardContext>({\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  setHasSubComponent: () => {},\n  href: \"\",\n  linkRef: null,\n});\n\nexport function useChildContext() {\n  const { setHasSubComponent } = useContext(SubComponentContext);\n  useEffect(() => {\n    setHasSubComponent && setHasSubComponent(true);\n  }, [setHasSubComponent]);\n}\n\ninterface navigateToParams extends Pick<TypeCardProps, \"href\"> {\n  e: React.MouseEvent | React.KeyboardEvent;\n  ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const navigateTo = ({ e, href, ref }: navigateToParams) => {\n  const { target } = e;\n\n  // asserts that target is an element so `contains` accepts it\n  assertIsElement(target);\n\n  if (ref.current?.contains(target)) {\n    if (\n      target.getAttribute(\"onclick\") !== null ||\n      target.getAttribute(\"href\") !== null\n    ) {\n      e.stopPropagation();\n      return;\n    }\n  }\n\n  window.open(href, \"_blank\")?.focus();\n};\n\ninterface onKeyDownParams\n  extends Pick<TypeCardProps, \"href\" | \"onClick\" | \"role\"> {\n  e: React.KeyboardEvent;\n  ref: React.RefObject<HTMLDivElement>;\n}\n\nexport const onKeyDown = ({ e, href, onClick, ref, role }: onKeyDownParams) => {\n  if (e?.key === \"Enter\") {\n    if (role === \"link\") {\n      return navigateTo({ e, href, ref });\n    }\n\n    if (role === \"presentation\") {\n      return;\n    }\n\n    return onClick?.(e);\n  }\n};\n","import React, { useContext } from \"react\";\nimport {\n  hasStyledProps,\n  hasBorderProps,\n  isStyledExtension,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { useChildContext, SubComponentContext } from \"./utils\";\nimport type {\n  TypeCardLink,\n  TypeSharedCardSystemProps,\n  TypeStyledSelectedIcon,\n} from \"./CardTypes\";\nimport {\n  StyledCardContent,\n  StyledCardHeader,\n  StyledCardFooter,\n  StyledCardAffordance,\n  StyledCardLink,\n} from \"./styles\";\n\ninterface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {\n  children?: React.ReactNode;\n}\n\n// Utility for merging class names. Mirrored inline from Avatar —\n// @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\n// Route to the styled-components path when a styled-system prop, a BORDER-mixin\n// prop, or a styled() extension is present; otherwise render the Tailwind path.\nfunction needsStyled(props: Record<string, any>): boolean {\n  return (\n    hasStyledProps(props) || hasBorderProps(props) || isStyledExtension(props)\n  );\n}\n\nexport const CardContent = (props: TypeSharedSubComponentProps) => {\n  // TODO: It could be cool to possibly adjust the context to include an array of names of child components.\n  // Then, if CardHeader or CardFooter aren't used with CardContent throw an error.\n  useChildContext();\n  const { children, className, ...rest } = props;\n\n  if (needsStyled(props)) {\n    return (\n      <StyledCardContent {...rest} className={className}>\n        {children}\n      </StyledCardContent>\n    );\n  }\n\n  return (\n    <div\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      className={cn(\"seeds-card-content\", className)}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const CardHeader = (props: TypeSharedSubComponentProps) => {\n  useChildContext();\n  const { children, className, ...rest } = props;\n\n  if (needsStyled(props)) {\n    return (\n      <StyledCardHeader {...rest} className={className}>\n        {children}\n      </StyledCardHeader>\n    );\n  }\n\n  return (\n    <div\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      className={cn(\"seeds-card-header\", className)}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport const CardFooter = (props: TypeSharedSubComponentProps) => {\n  useChildContext();\n  const { children, className, ...rest } = props;\n\n  if (needsStyled(props)) {\n    return (\n      <StyledCardFooter {...rest} className={className}>\n        {children}\n      </StyledCardFooter>\n    );\n  }\n\n  return (\n    <div\n      {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n      className={cn(\"seeds-card-footer\", className)}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface TypeSelectedIconProps {\n  $selected?: TypeStyledSelectedIcon[\"$selected\"];\n}\n\n// Internal, never receives consumer system props — rendered directly on the\n// Tailwind path. The overlay positioning, background, and opacity transition\n// live in card.css (.seeds-card-selected-icon-wrapper / .seeds-card-selected-icon).\nexport const SelectedIcon = ({ $selected }: TypeSelectedIconProps) => {\n  return (\n    <div className=\"seeds-card-selected-icon-wrapper\">\n      <Icon\n        aria-hidden\n        color=\"icon.base\"\n        name=\"circle-check-solid\"\n        className={cn(\"seeds-card-selected-icon\", {\n          \"seeds-card-selected-icon-visible\": !!$selected,\n        })}\n      />\n    </div>\n  );\n};\n\nexport const CardAffordance = ({ className, ...rest }: Record<string, any>) => {\n  if (needsStyled(rest) || isStyledExtension({ className })) {\n    return (\n      <StyledCardAffordance\n        {...rest}\n        className={className}\n        size=\"mini\"\n        name=\"arrow-right-solid\"\n        // TODO: probably need to make this available to the top level for external links https://sprout.atlassian.net/browse/DS-2223\n        aria-hidden\n      />\n    );\n  }\n\n  return (\n    <Icon\n      {...rest}\n      className={cn(\"seeds-card-affordance\", className)}\n      size=\"mini\"\n      name=\"arrow-right-solid\"\n      aria-hidden\n    />\n  );\n};\n\nexport const CardLink = ({\n  affordance,\n  children,\n  external = false,\n  color,\n  className,\n  ...rest\n}: React.PropsWithChildren<TypeCardLink>) => {\n  const { href, linkRef } = useContext(SubComponentContext);\n\n  // Because we are hijacking Card click event to directly click this link, we need to stop propagation to avoid a double click event.\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    e.stopPropagation();\n  };\n\n  const sharedProps = {\n    target: external ? \"_blank\" : undefined,\n    rel: external ? \"noreferrer\" : undefined,\n    href,\n    onClick: handleClick,\n  };\n\n  // color/typography are styled-system props → route those to the styled path.\n  if (\n    color !== undefined ||\n    hasStyledProps(rest) ||\n    hasBorderProps(rest) ||\n    isStyledExtension({ ...rest, className })\n  ) {\n    return (\n      <StyledCardLink\n        {...rest}\n        {...sharedProps}\n        ref={linkRef}\n        className={className}\n        // TODO: fix this type since `color` should be valid here. TS can't resolve the correct type.\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        color={color}\n      >\n        <>\n          {children}\n          {affordance ? <CardAffordance ml={300} /> : null}\n        </>\n      </StyledCardLink>\n    );\n  }\n\n  return (\n    <a\n      {...(rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n      {...sharedProps}\n      ref={linkRef}\n      className={cn(\"seeds-card-link\", className)}\n    >\n      <>\n        {children}\n        {affordance ? <CardAffordance className=\"ml-300\" /> : null}\n      </>\n    </a>\n  );\n};\n","/**\n * Tailwind CSS implementation of Card component.\n * Uses Seeds card CSS classes from card.css.\n */\n\nimport React from \"react\";\nimport { mergeRefs } from \"@sproutsocial/seeds-react-utilities\";\nimport type { TypeCardProps } from \"./CardTypes\";\nimport { useCardBehavior } from \"./useCardBehavior\";\nimport { SelectedIcon } from \"./subComponents\";\n\n// Utility for merging class names properly. Mirrored inline from Avatar —\n// @sproutsocial/seeds-react-utilities does NOT export a `cn` helper.\nfunction cn(\n  ...inputs: (string | undefined | null | false | Record<string, boolean>)[]\n): string {\n  const classes: string[] = [];\n\n  for (const input of inputs) {\n    if (!input) continue;\n\n    if (typeof input === \"string\") {\n      classes.push(input);\n    } else if (typeof input === \"object\") {\n      for (const [key, value] of Object.entries(input)) {\n        if (value) {\n          classes.push(key);\n        }\n      }\n    }\n  }\n\n  return classes.join(\" \");\n}\n\nexport const CardTailwind = React.forwardRef<HTMLDivElement, TypeCardProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      elevation = \"low\",\n      href,\n      onClick,\n      role = \"presentation\",\n      selected,\n      ...rest\n    }: TypeCardProps,\n    ref\n  ) => {\n    const {\n      containerRef,\n      cardContext,\n      hasSubComponent,\n      isRoleLink,\n      SubComponentContext,\n      containerProps,\n    } = useCardBehavior({ disabled, href, onClick, role, selected });\n\n    const classes = cn(\n      \"seeds-card\",\n      {\n        \"seeds-card-interactive\":\n          isRoleLink || role === \"button\" || role === \"checkbox\",\n        \"seeds-card-link-role\": isRoleLink,\n      },\n      {\n        \"seeds-card-selected\": !!selected,\n        \"seeds-card-disabled\": disabled,\n        \"seeds-card-compositional\": hasSubComponent,\n      },\n      className\n    );\n\n    return (\n      <div\n        {...containerProps}\n        {...(rest as React.HTMLAttributes<HTMLDivElement>)}\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore legacy ref type mismatch between the RefObject and callback ref\n        ref={mergeRefs(containerRef, ref)}\n        className={classes}\n        // Per-elevation hover shadow is pushed through a CSS custom property\n        // consumed by card.css. Placed after {...rest} so it can't be clobbered.\n        style={\n          {\n            \"--seeds-card-hover-shadow\": `var(--shadow-${elevation})`,\n          } as React.CSSProperties\n        }\n      >\n        <SelectedIcon $selected={selected} />\n        <SubComponentContext.Provider value={cardContext}>\n          {children}\n        </SubComponentContext.Provider>\n      </div>\n    );\n  }\n);\n\nCardTailwind.displayName = \"CardTailwind\";\n","import type { TypeIconProps } from \"@sproutsocial/seeds-react-icon\";\nimport * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type {\n  TypeBorderSystemProps,\n  TypeColorSystemProps,\n  TypeFlexboxSystemProps,\n  TypeGridSystemProps,\n  TypeLayoutSystemProps,\n  TypePositionSystemProps,\n  TypeSpaceSystemProps,\n  TypeTypographySystemProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeSharedCardSystemProps\n  extends Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\">,\n    TypeStyledComponentsCommonProps,\n    TypeBorderSystemProps,\n    TypeColorSystemProps,\n    TypeFlexboxSystemProps,\n    TypeGridSystemProps,\n    TypeLayoutSystemProps,\n    TypePositionSystemProps,\n    TypeSpaceSystemProps {}\n\n// consumer facing props that affect the styles of the component. We need to define these first so the user doesn't see our transient naming conventions.\nexport interface TypeCardStyleProps {\n  elevation?: \"low\" | \"medium\" | \"high\";\n  disabled?: boolean;\n  compositionalComponents?: boolean;\n  selected?: boolean;\n  isRoleLink?: boolean;\n}\n\n// Since we only want to manage the style props in one place(above), we'll use this generic to prepend the properties of TypeCardStyleProps with $.\nexport type TypeStyleTransientProps<T> = {\n  [K in Extract<keyof T, string> as `$${K}`]: T[K];\n};\n\nexport type TypeCardStyleTransientProps =\n  TypeStyleTransientProps<TypeCardStyleProps>;\n\nexport interface TypeStyledCard\n  extends TypeSharedCardSystemProps,\n    TypeCardStyleTransientProps {}\n\nexport interface TypeCardStyles\n  extends TypeSharedCardSystemProps,\n    Omit<TypeCardStyleProps, \"compositionalComponents\"> {}\n\ntype TypeOnClick = (event: React.MouseEvent | React.KeyboardEvent) => void;\n\ntype TypeGenericCard = {\n  /** role is used for to set accessibility properties,\n   *  to determine styling and interaction behavior,\n   *  and to determine which props should be allowed.*/\n  role: \"link\" | \"button\" | \"checkbox\" | \"presentation\";\n  /** When role is link, use href to determine the link destination.\n   *  Required for role=\"link\", disallowed for all other roles */\n  href?: string;\n  /** Required for role=\"button\" and role=\"checkbox\",\n   *  discouraged for role=\"presentation\", and disallowed for role=\"link\" */\n  onClick?: TypeOnClick;\n  /** Indicates whether the card is selected.\n   *  Required for role=\"checkbox\", disallowed for all other roles */\n  selected?: boolean;\n};\n\nexport type TypeLinkCardProps = {\n  role: \"link\";\n  href: string;\n  onClick?: never;\n  selected?: never;\n};\n\nexport type TypeButtonCardProps = {\n  role: \"button\";\n  href?: never;\n  onClick: TypeOnClick;\n  selected?: never;\n};\n\nexport type TypeCheckboxCardProps = {\n  role: \"checkbox\";\n  href?: never;\n  onClick: TypeOnClick;\n  selected: boolean;\n};\n\nexport type TypePresentationCardProps = {\n  role: \"presentation\";\n  href?: never;\n  /**\n   * **Not supported for accessibility:**\n   * `role='presentation'` removes the element from the accessibility tree.\n   * Presentation Cards do not support `onClick` handlers or keyboard interactions.\n   * Use `role='button'` for interactive Cards instead.\n   */\n  onClick?: never;\n  selected?: never;\n};\n\nexport type TypeCardConditions =\n  | TypeLinkCardProps\n  | TypeButtonCardProps\n  | TypeCheckboxCardProps\n  | TypePresentationCardProps;\n\nexport type TypeCardProps = React.PropsWithChildren<TypeCardStyles> &\n  TypeGenericCard &\n  TypeCardConditions;\n\nexport interface TypeCardArea extends TypeSharedCardSystemProps {\n  $divider?: \"top\" | \"bottom\";\n}\n\nexport interface TypeStyledSelectedIcon extends TypeIconProps {\n  $selected?: TypeCardStyleTransientProps[\"$selected\"];\n}\n\nexport interface TypeCardContext {\n  setHasSubComponent?: React.Dispatch<React.SetStateAction<boolean>>;\n  href?: string;\n  linkRef: React.RefObject<HTMLAnchorElement> | null;\n}\n\nexport interface TypeCardLink\n  extends Omit<React.ComponentPropsWithoutRef<\"a\">, \"color\">,\n    TypeColorSystemProps,\n    TypeTypographySystemProps {\n  affordance?: boolean;\n  external?: boolean;\n}\n","import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n"],"mappings":"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","names":["React","React","hasStyledProps","hasBorderProps","isStyledExtension","React","disabled","useContext","Icon","Icon","color","useContext","jsx","jsxs","React","disabled","SubComponentContext","React","mergeRefs","jsx","jsxs","cn","React","disabled","SubComponentContext","mergeRefs","jsx","React","hasStyledProps","hasBorderProps","isStyledExtension","jsx","React"]}

package/dist/index.d.mts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
 import * as React from 'react';
 import React__default from 'react';
 import { TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface TypeSharedCardSystemProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps {
 }
@@ -88,6 +88,10 @@ interface TypeCardLink extends Omit<React.ComponentPropsWithoutRef<"a">, "color"
 /**
  * @link https://seeds.sproutsocial.com/components/card/
  *
+ * Card automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props,
+ * BORDER-mixin props, or a styled() extension).
+ *
  * Cards with role='presentation' are non-interactive for accessibility compliance.
  * Use role='button' for interactive Cards.
  *
@@ -109,14 +113,42 @@ interface TypeCardLink extends Omit<React.ComponentPropsWithoutRef<"a">, "color"
  *   <Link href="/details">But this link is</Link>
  * </Card>
  */
-declare const Card: ({ children, disabled, elevation, href, onClick, role, selected, ...rest }: TypeCardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: React__default.ForwardRefExoticComponent<(Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeLinkCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeButtonCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeCheckboxCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypePresentationCardProps, "ref">) & React__default.RefAttributes<HTMLDivElement>>;
 
 interface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {
     children?: React__default.ReactNode;
 }
-declare const CardContent: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardHeader: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardFooter: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardLink: ({ affordance, children, external, color, ...rest }: React__default.PropsWithChildren<TypeCardLink>) => react_jsx_runtime.JSX.Element;
+declare const CardContent: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardHeader: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardFooter: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardLink: ({ affordance, children, external, color, className, ...rest }: React__default.PropsWithChildren<TypeCardLink>) => react_jsx_runtime.JSX.Element;
 
 export { Card, CardContent, CardFooter, CardHeader, CardLink, type TypeButtonCardProps, type TypeCardArea, type TypeCardConditions, type TypeCardContext, type TypeCardLink, type TypeCardProps, type TypeCardStyleProps, type TypeCardStyleTransientProps, type TypeCardStyles, type TypeCheckboxCardProps, type TypeLinkCardProps, type TypePresentationCardProps, type TypeSharedCardSystemProps, type TypeStyleTransientProps, type TypeStyledCard, type TypeStyledSelectedIcon, Card as default };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TypeIconProps } from '@sproutsocial/seeds-react-icon';
 import * as React from 'react';
 import React__default from 'react';
 import { TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface TypeSharedCardSystemProps extends Omit<React.ComponentPropsWithoutRef<"div">, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps {
 }
@@ -88,6 +88,10 @@ interface TypeCardLink extends Omit<React.ComponentPropsWithoutRef<"a">, "color"
 /**
  * @link https://seeds.sproutsocial.com/components/card/
  *
+ * Card automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props,
+ * BORDER-mixin props, or a styled() extension).
+ *
  * Cards with role='presentation' are non-interactive for accessibility compliance.
  * Use role='button' for interactive Cards.
  *
@@ -109,14 +113,42 @@ interface TypeCardLink extends Omit<React.ComponentPropsWithoutRef<"a">, "color"
  *   <Link href="/details">But this link is</Link>
  * </Card>
  */
-declare const Card: ({ children, disabled, elevation, href, onClick, role, selected, ...rest }: TypeCardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: React__default.ForwardRefExoticComponent<(Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeLinkCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeButtonCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypeCheckboxCardProps, "ref"> | Omit<TypeCardStyles & {
+    children?: React__default.ReactNode | undefined;
+} & {
+    role: "link" | "button" | "checkbox" | "presentation";
+    href?: string;
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    selected?: boolean;
+} & TypePresentationCardProps, "ref">) & React__default.RefAttributes<HTMLDivElement>>;
 
 interface TypeSharedSubComponentProps extends TypeSharedCardSystemProps {
     children?: React__default.ReactNode;
 }
-declare const CardContent: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardHeader: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardFooter: ({ children, ...rest }: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
-declare const CardLink: ({ affordance, children, external, color, ...rest }: React__default.PropsWithChildren<TypeCardLink>) => react_jsx_runtime.JSX.Element;
+declare const CardContent: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardHeader: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardFooter: (props: TypeSharedSubComponentProps) => react_jsx_runtime.JSX.Element;
+declare const CardLink: ({ affordance, children, external, color, className, ...rest }: React__default.PropsWithChildren<TypeCardLink>) => react_jsx_runtime.JSX.Element;
 
 export { Card, CardContent, CardFooter, CardHeader, CardLink, type TypeButtonCardProps, type TypeCardArea, type TypeCardConditions, type TypeCardContext, type TypeCardLink, type TypeCardProps, type TypeCardStyleProps, type TypeCardStyleTransientProps, type TypeCardStyles, type TypeCheckboxCardProps, type TypeLinkCardProps, type TypePresentationCardProps, type TypeSharedCardSystemProps, type TypeStyleTransientProps, type TypeStyledCard, type TypeStyledSelectedIcon, Card as default };