@sproutsocial/seeds-react-card 1.1.53 → 1.1.55

package/dist/index.js

@@ -40,7 +40,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Card.tsx
-var import_react3 = require("react");
+var import_react7 = __toESM(require("react"));
+
+// src/CardHybrid.tsx
+var import_react6 = __toESM(require("react"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+
+// src/CardStyled.tsx
+var import_react4 = __toESM(require("react"));
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 
 // src/styles.tsx
 var import_styled_components = __toESM(require("styled-components"));
@@ -182,6 +190,9 @@ var StyledCardAffordance = (0, import_styled_components.default)(import_seeds_re
   transition: ${(p) => p.theme.duration.medium};
 `;
 
+// src/useCardBehavior.ts
+var import_react2 = require("react");
+
 // src/utils.ts
 var import_react = require("react");
 var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
@@ -221,46 +232,147 @@ var onKeyDown = ({ e, href, onClick, ref, role }) => {
   }
 };
 
+// src/useCardBehavior.ts
+function useCardBehavior({
+  disabled: disabled2 = false,
+  href,
+  onClick,
+  role = "presentation",
+  selected
+}) {
+  const [hasSubComponent, setHasSubComponent] = (0, import_react2.useState)(false);
+  const containerRef = (0, import_react2.useRef)(null);
+  const linkRef = (0, import_react2.useRef)(null);
+  const isRoleLink = role === "link";
+  const isRolePresentation = role === "presentation";
+  const checkedConditions = role === "checkbox" ? selected : void 0;
+  const cardContext = {
+    setHasSubComponent,
+    href,
+    linkRef
+  };
+  const handleClickConditions = (e) => isRoleLink ? linkRef.current?.click() : onClick?.(e);
+  const handleKeyDown = (e) => onKeyDown({ e, href, onClick, ref: containerRef, role });
+  const shouldBeInteractive = !isRolePresentation && !disabled2;
+  const containerProps = {
+    tabIndex: isRoleLink || isRolePresentation || disabled2 ? -1 : 0,
+    role: isRoleLink ? void 0 : role,
+    onClick: shouldBeInteractive ? handleClickConditions : void 0,
+    onKeyDown: shouldBeInteractive ? handleKeyDown : void 0,
+    "aria-checked": checkedConditions,
+    "aria-disabled": disabled2 && disabled2
+  };
+  return {
+    containerRef,
+    linkRef,
+    cardContext,
+    hasSubComponent,
+    isRoleLink,
+    SubComponentContext,
+    containerProps
+  };
+}
+
 // src/subComponents.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var CardContent = ({
-  children,
-  ...rest
-}) => {
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+function needsStyled(props) {
+  return (0, import_seeds_react_system_props.hasStyledProps)(props) || (0, import_seeds_react_system_props.hasBorderProps)(props) || (0, import_seeds_react_system_props.isStyledExtension)(props);
+}
+var CardContent = (props) => {
   useChildContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardContent, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardContent, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-content", className),
+      children
+    }
+  );
 };
-var CardHeader = ({
-  children,
-  ...rest
-}) => {
+var CardHeader = (props) => {
   useChildContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardHeader, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardHeader, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-header", className),
+      children
+    }
+  );
 };
-var CardFooter = ({
-  children,
-  ...rest
-}) => {
+var CardFooter = (props) => {
   useChildContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardFooter, { ...rest, children });
+  const { children, className, ...rest } = props;
+  if (needsStyled(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCardFooter, { ...rest, className, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ...rest,
+      className: cn("seeds-card-footer", className),
+      children
+    }
+  );
 };
 var SelectedIcon = ({ $selected }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectedIconWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledSelectedIcon,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "seeds-card-selected-icon-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_icon2.default,
     {
       "aria-hidden": true,
       color: "icon.base",
       name: "circle-check-solid",
-      $selected
+      className: cn("seeds-card-selected-icon", {
+        "seeds-card-selected-icon-visible": !!$selected
+      })
     }
   ) });
 };
-var CardAffordance = ({ ...rest }) => {
+var CardAffordance = ({ className, ...rest }) => {
+  if (needsStyled(rest) || (0, import_seeds_react_system_props.isStyledExtension)({ className })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledCardAffordance,
+      {
+        ...rest,
+        className,
+        size: "mini",
+        name: "arrow-right-solid",
+        "aria-hidden": true
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledCardAffordance,
+    import_seeds_react_icon2.default,
     {
       ...rest,
+      className: cn("seeds-card-affordance", className),
       size: "mini",
       name: "arrow-right-solid",
       "aria-hidden": true
@@ -272,83 +384,187 @@ var CardLink = ({
   children,
   external = false,
   color: color2,
+  className,
   ...rest
 }) => {
-  const { href, linkRef } = (0, import_react2.useContext)(SubComponentContext);
+  const { href, linkRef } = (0, import_react3.useContext)(SubComponentContext);
   const handleClick = (e) => {
     e.stopPropagation();
   };
+  const sharedProps = {
+    target: external ? "_blank" : void 0,
+    rel: external ? "noreferrer" : void 0,
+    href,
+    onClick: handleClick
+  };
+  if (color2 !== void 0 || (0, import_seeds_react_system_props.hasStyledProps)(rest) || (0, import_seeds_react_system_props.hasBorderProps)(rest) || (0, import_seeds_react_system_props.isStyledExtension)({ ...rest, className })) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyledCardLink,
+      {
+        ...rest,
+        ...sharedProps,
+        ref: linkRef,
+        className,
+        color: color2,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          children,
+          affordance ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardAffordance, { ml: 300 }) : null
+        ] })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    StyledCardLink,
+    "a",
     {
       ...rest,
-      target: external ? "_blank" : void 0,
-      rel: external ? "noreferrer" : void 0,
-      href,
-      onClick: handleClick,
+      ...sharedProps,
       ref: linkRef,
-      color: color2,
+      className: cn("seeds-card-link", className),
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
         children,
-        affordance ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardAffordance, { ml: 300 }) : null
+        affordance ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardAffordance, { className: "ml-300" }) : null
       ] })
     }
   );
 };
 
-// src/Card.tsx
+// src/CardStyled.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Card = ({
-  children,
-  disabled: disabled2 = false,
-  elevation = "low",
-  href,
-  onClick,
-  role = "presentation",
-  selected,
-  ...rest
-}) => {
-  const [hasSubComponent, setHasSubComponent] = (0, import_react3.useState)(false);
-  const containerRef = (0, import_react3.useRef)(null);
-  const linkRef = (0, import_react3.useRef)(null);
-  const isRoleLink = role === "link";
-  const isRolePresentation = role === "presentation";
-  const checkedConditions = role === "checkbox" ? selected : void 0;
-  const cardContext = {
-    setHasSubComponent,
+var CardStyled = import_react4.default.forwardRef(
+  ({
+    children,
+    disabled: disabled2 = false,
+    elevation = "low",
     href,
-    linkRef
-  };
-  const handleClickConditions = (e) => isRoleLink ? linkRef.current?.click() : onClick?.(e);
-  const handleKeyDown = (e) => onKeyDown({ e, href, onClick, ref: containerRef, role });
-  const shouldBeInteractive = !isRolePresentation && !disabled2;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    StyledCard,
-    {
-      tabIndex: isRoleLink || isRolePresentation || disabled2 ? -1 : 0,
-      role: isRoleLink ? void 0 : role,
-      onClick: shouldBeInteractive ? handleClickConditions : void 0,
-      onKeyDown: shouldBeInteractive ? handleKeyDown : void 0,
-      $elevation: elevation,
-      ref: containerRef,
-      $selected: selected,
-      "aria-checked": checkedConditions,
-      $disabled: disabled2,
-      "aria-disabled": disabled2 && disabled2,
-      $compositionalComponents: hasSubComponent,
-      $isRoleLink: isRoleLink,
-      ...rest,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectedIcon, { $selected: selected }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SubComponentContext.Provider, { value: cardContext, children })
-      ]
+    onClick,
+    role = "presentation",
+    selected,
+    ...rest
+  }, ref) => {
+    const {
+      containerRef,
+      cardContext,
+      hasSubComponent,
+      isRoleLink,
+      SubComponentContext: SubComponentContext2,
+      containerProps
+    } = useCardBehavior({ disabled: disabled2, href, onClick, role, selected });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      StyledCard,
+      {
+        ...containerProps,
+        $elevation: elevation,
+        ref: (0, import_seeds_react_utilities2.mergeRefs)(containerRef, ref),
+        $selected: selected,
+        $disabled: disabled2,
+        $compositionalComponents: hasSubComponent,
+        $isRoleLink: isRoleLink,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SelectedIcon, { $selected: selected }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SubComponentContext2.Provider, { value: cardContext, children })
+        ]
+      }
+    );
+  }
+);
+CardStyled.displayName = "Card";
+var CardStyled_default = CardStyled;
+
+// src/CardTailwind.tsx
+var import_react5 = __toESM(require("react"));
+var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function cn2(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
     }
-  );
-};
+  }
+  return classes.join(" ");
+}
+var CardTailwind = import_react5.default.forwardRef(
+  ({
+    children,
+    className,
+    disabled: disabled2 = false,
+    elevation = "low",
+    href,
+    onClick,
+    role = "presentation",
+    selected,
+    ...rest
+  }, ref) => {
+    const {
+      containerRef,
+      cardContext,
+      hasSubComponent,
+      isRoleLink,
+      SubComponentContext: SubComponentContext2,
+      containerProps
+    } = useCardBehavior({ disabled: disabled2, href, onClick, role, selected });
+    const classes = cn2(
+      "seeds-card",
+      {
+        "seeds-card-interactive": isRoleLink || role === "button" || role === "checkbox",
+        "seeds-card-link-role": isRoleLink
+      },
+      {
+        "seeds-card-selected": !!selected,
+        "seeds-card-disabled": disabled2,
+        "seeds-card-compositional": hasSubComponent
+      },
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ...containerProps,
+        ...rest,
+        ref: (0, import_seeds_react_utilities3.mergeRefs)(containerRef, ref),
+        className: classes,
+        style: {
+          "--seeds-card-hover-shadow": `var(--shadow-${elevation})`
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectedIcon, { $selected: selected }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SubComponentContext2.Provider, { value: cardContext, children })
+        ]
+      }
+    );
+  }
+);
+CardTailwind.displayName = "CardTailwind";
+
+// src/CardHybrid.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var CardHybrid = import_react6.default.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props2.hasStyledProps)(props) || (0, import_seeds_react_system_props2.hasBorderProps)(props) || (0, import_seeds_react_system_props2.isStyledExtension)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardStyled_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CardTailwind, { ...props, ref });
+  }
+);
+CardHybrid.displayName = "Card";
+var CardHybrid_default = CardHybrid;
+
+// src/Card.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Card = import_react7.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CardHybrid_default, { ...props, ref }));
+Card.displayName = "Card";
 var Card_default = Card;
 
 // src/CardTypes.ts
-var React3 = require("react");
+var React7 = require("react");
 
 // src/index.ts
 var index_default = Card_default;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Card.tsx","../src/styles.tsx","../src/utils.ts","../src/subComponents.tsx","../src/CardTypes.ts"],"sourcesContent":["import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n","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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,gBAAwC;;;ACAxC,+BAAmB;AACnB,2BASO;AACP,gCAAoC;AAOpC,8BAAiB;AAOV,IAAM,oBAAoB,yBAAAC,QAAO;AAAA;AAAA;AAAA,aAG3B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA,IAGxC,2BAAM;AAAA,IACN,0BAAK;AAAA,IACL,4BAAO;AAAA,IACP,yBAAI;AAAA,IACJ,2BAAM;AAAA,IACN,0BAAK;AAAA;AAGF,IAAM,uBAAmB,yBAAAA,SAAO,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,2BAAM;AAAA,IACN,0BAAK;AAAA,IACL,4BAAO;AAAA,IACP,yBAAI;AAAA,IACJ,2BAAM;AAAA,IACN,0BAAK;AAAA;AAGF,IAAM,uBAAmB,yBAAAA,SAAO,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,2BAAM;AAAA,IACN,0BAAK;AAAA,IACL,4BAAO;AAAA,IACP,yBAAI;AAAA,IACJ,2BAAM;AAAA,IACN,0BAAK;AAAA;AAGF,IAAM,sBAAsB,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnC,IAAM,yBAAqB,yBAAAA,SAAO,wBAAAC,OAAI;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,yBAAAD,QAAO;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,0BAAK;AAAA,IACL,+BAAU;AAAA;AAGP,IAAM,aAAa,yBAAAA,QAAO;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,sCAAY,IAAK;AAAA,MACrD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAQd,mCAAS;AAAA;AAAA;AAAA,IAGX,CAAC,EAAE,UAAU,MACb,aACA;AAAA,MACE,kCAAQ;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,2BAAM;AAAA,IACN,0BAAK;AAAA,IACL,4BAAO;AAAA,IACP,yBAAI;AAAA,IACJ,2BAAM;AAAA,IACN,6BAAQ;AAAA,IACR,0BAAK;AAAA;AAGF,IAAM,2BAAuB,yBAAAA,SAAO,wBAAAC,OAAI;AAAA,IAC3C,UAAU;AAAA,4BACc,CAAC,MAAM,EAAE,MAAM,MAAM,GAAG,CAAC;AAAA;AAAA,gBAErC,CAAC,MAAM,EAAE,MAAM,SAAS,MAAM;AAAA;;;AC9K9C,mBAAqD;AACrD,mCAAgC;AAGzB,IAAM,0BAAsB,4BAA+B;AAAA;AAAA,EAEhE,oBAAoB,MAAM;AAAA,EAAC;AAAA,EAC3B,MAAM;AAAA,EACN,SAAS;AACX,CAAC;AAEM,SAAS,kBAAkB;AAChC,QAAM,EAAE,mBAAmB,QAAI,yBAAW,mBAAmB;AAC7D,8BAAU,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,oDAAgB,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,IAAAC,gBAAkC;AA4BzB;AAPF,IAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,MAAmC;AAGjC,kBAAgB;AAChB,SAAO,4CAAC,qBAAmB,GAAG,MAAO,UAAS;AAChD;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,GAAG;AACL,MAAmC;AACjC,kBAAgB;AAChB,SAAO,4CAAC,oBAAkB,GAAG,MAAO,UAAS;AAC/C;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,GAAG;AACL,MAAmC;AACjC,kBAAgB;AAChB,SAAO,4CAAC,oBAAkB,GAAG,MAAO,UAAS;AAC/C;AAMO,IAAM,eAAe,CAAC,EAAE,UAAU,MAA6B;AACpE,SACE,4CAAC,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,QAAI,0BAAW,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,OAAOA;AAAA,MAEP,sFACG;AAAA;AAAA,QACA,aAAa,4CAAC,kBAAe,IAAI,KAAK,IAAK;AAAA,SAC9C;AAAA;AAAA,EACF;AAEJ;;;AH9CI,IAAAC,sBAAA;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,QAAI,wBAAkB,KAAK;AACrE,QAAM,mBAAe,sBAAuB,IAAI;AAChD,QAAM,cAAU,sBAA0B,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;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,cAAc,sBAAsBA,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,qDAAC,gBAAa,WAAW,UAAU;AAAA,QACnC,6CAAC,oBAAoB,UAApB,EAA6B,OAAO,aAClC,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,eAAQ;;;AIrFf,IAAAC,SAAuB;;;ALCvB,IAAO,gBAAQ;","names":["import_react","styled","Icon","import_react","color","import_jsx_runtime","disabled","React"]}
+{"version":3,"sources":["../src/index.ts","../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"],"sourcesContent":["import Card from \"./Card\";\n\nexport default Card;\nexport { Card };\nexport { CardHeader, CardContent, CardFooter, CardLink } from \"./subComponents\";\nexport * from \"./CardTypes\";\n","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"],"mappings":"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","names":["import_react","import_react","import_seeds_react_system_props","import_react","import_seeds_react_utilities","styled","Icon","import_react","disabled","import_react","import_seeds_react_icon","Icon","color","import_jsx_runtime","React","disabled","SubComponentContext","import_react","import_seeds_react_utilities","import_jsx_runtime","cn","React","disabled","SubComponentContext","import_jsx_runtime","React","import_jsx_runtime","React","React"]}

package/package.json

@@ -1,15 +1,26 @@
 {
   "name": "@sproutsocial/seeds-react-card",
-  "version": "1.1.53",
+  "version": "1.1.55",
   "description": "Seeds React Card",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/card.css": "./dist/card.css"
+  },
   "scripts": {
-    "build": "tsup --dts",
-    "build:debug": "tsup --dts --metafile",
+    "build": "tsup --dts && cp src/card.css dist/card.css",
+    "build:debug": "tsup --dts --metafile && cp src/card.css dist/card.css",
     "dev": "tsup --watch --dts",
     "clean": "rm -rf .turbo dist",
     "clean:modules": "rm -rf node_modules",
@@ -18,10 +29,11 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^4.5.1",
     "@sproutsocial/seeds-react-system-props": "^3.2.1",
-    "@sproutsocial/seeds-react-mixins": "^4.3.15",
+    "@sproutsocial/seeds-react-mixins": "^4.3.16",
     "@sproutsocial/seeds-react-utilities": "^4.0.1",
-    "@sproutsocial/seeds-react-icon": "^2.5.1",
+    "@sproutsocial/seeds-react-icon": "^2.5.2",
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
@@ -34,14 +46,13 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-banner": "^1.1.35",
-    "@sproutsocial/seeds-react-badge": "^2.0.45",
-    "@sproutsocial/seeds-react-box": "^1.1.31",
-    "@sproutsocial/seeds-react-link": "^1.1.23",
-    "@sproutsocial/seeds-react-partner-logo": "^1.7.23",
+    "@sproutsocial/seeds-react-banner": "^1.1.36",
+    "@sproutsocial/seeds-react-badge": "^2.0.46",
+    "@sproutsocial/seeds-react-box": "^1.1.32",
+    "@sproutsocial/seeds-react-link": "^1.1.24",
+    "@sproutsocial/seeds-react-partner-logo": "^1.7.24",
     "@sproutsocial/seeds-react-spot-illustration": "^1.2.5",
-    "@sproutsocial/seeds-react-text": "^1.5.5",
-    "@sproutsocial/seeds-react-theme": "^4.5.0"
+    "@sproutsocial/seeds-react-text": "^1.5.5"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/