@dnanpm/ui-components 0.8.0 → 0.10.0

package/dist/components/ContentCard/ContentCard.cjs

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const index = require("../../styles/utils/index.cjs");
+const ContentCard_module = require("./ContentCard.module.css.cjs");
+const isRenderable = require("../../utils/isRenderable/isRenderable.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const logoBackgroundToken = {
+  white: "var(--color-semantic-surface-base)",
+  "sand-soft": "var(--color-semantic-surface-neutral-soft)",
+  "sand-mid": "var(--color-semantic-surface-neutral-mid)",
+  "sand-strong": "var(--color-semantic-surface-neutral-strong)",
+  "pink-soft": "var(--color-semantic-surface-primary-soft)",
+  "pink-mid": "var(--color-semantic-surface-primary-mid)",
+  "pink-strong": "var(--color-semantic-surface-primary-strong)",
+  "plum-soft": "var(--color-semantic-surface-secondary-soft)",
+  "plum-mid": "var(--color-semantic-surface-secondary-mid)",
+  "plum-strong": "var(--color-semantic-surface-secondary-strong)"
+};
+const ContentCard = ({
+  media,
+  mediaKind = "image",
+  mediaBackground,
+  mediaWidth = "1/3",
+  mediaPosition = "start",
+  titlePrefix,
+  title,
+  headingLevel = "h3",
+  body,
+  actions,
+  appearance = "plain",
+  as = "article",
+  className,
+  ref,
+  ...props
+}) => {
+  const titleId = react.useId();
+  const HeadingLevel = headingLevel;
+  const Root = as;
+  const hasMedia = isRenderable.isRenderable(media);
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel || as === "div" ? void 0 : titleId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Root,
+    {
+      ref,
+      ...props,
+      "data-color-scheme": "light",
+      className: cn.cn(
+        ContentCard_module["content-card"],
+        hasMedia && mediaWidth === "1/2" && ContentCard_module["content-card--media-half"],
+        hasMedia && mediaPosition === "end" && ContentCard_module["content-card--media-end"],
+        appearance === "border" && ContentCard_module["content-card--border"],
+        appearance === "elevated" && ContentCard_module["content-card--elevated"],
+        appearance === "elevated" && index.elevationStyles.elevationLow,
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__layout"], children: [
+        hasMedia && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn.cn(
+              ContentCard_module["content-card__media"],
+              mediaKind === "logo" ? ContentCard_module["content-card__media--logo"] : ContentCard_module["content-card__media--image"]
+            ),
+            style: mediaKind === "logo" && mediaBackground != null ? {
+              "--_cc-logo-bg": logoBackgroundToken[mediaBackground]
+            } : void 0,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__media-inner"], children: media })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__content"], children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__content-inner"], children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__body-region"], children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ContentCard_module["content-card__header"], children: [
+              isRenderable.isRenderable(titlePrefix) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__prefix"], children: titlePrefix }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                HeadingLevel,
+                {
+                  id: titleId,
+                  className: ContentCard_module["content-card__title"],
+                  children: title
+                }
+              )
+            ] }),
+            isRenderable.isRenderable(body) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(ContentCard_module["content-card__body"], "dds-prose"), children: body })
+          ] }),
+          isRenderable.isRenderable(actions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: ContentCard_module["content-card__actions"], children: actions })
+        ] }) })
+      ] })
+    }
+  );
+};
+exports.ContentCard = ContentCard;
+//# sourceMappingURL=ContentCard.cjs.map

package/dist/components/ContentCard/ContentCard.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.cjs","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport { elevationStyles } from '../../styles/utils';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n    white: 'var(--color-semantic-surface-base)',\n    'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n    'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n    'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n    'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n    'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n    'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n    'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n    'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n    'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\nexport const ContentCard = ({\n    media,\n    mediaKind = 'image',\n    mediaBackground,\n    mediaWidth = '1/3',\n    mediaPosition = 'start',\n    titlePrefix,\n    title,\n    headingLevel = 'h3',\n    body,\n    actions,\n    appearance = 'plain',\n    as = 'article',\n    className,\n    ref,\n    ...props\n}: ContentCardProps) => {\n    const titleId = useId();\n    const HeadingLevel = headingLevel;\n    // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n    const Root = as as ElementType;\n    const hasMedia = isRenderable(media);\n    const ariaLabel = props['aria-label'];\n    // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n    // bare div or when an aria-label is provided.\n    const ariaLabelledBy =\n        props['aria-labelledby'] ?? (ariaLabel || as === 'div' ? undefined : titleId);\n\n    return (\n        <Root\n            ref={ref}\n            {...props}\n            data-color-scheme=\"light\"\n            className={cn(\n                styles['content-card'],\n                hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n                hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n                appearance === 'border' && styles['content-card--border'],\n                appearance === 'elevated' && styles['content-card--elevated'],\n                appearance === 'elevated' && elevationStyles.elevationLow,\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            <div className={styles['content-card__layout']}>\n                {hasMedia && (\n                    <div\n                        className={cn(\n                            styles['content-card__media'],\n                            mediaKind === 'logo'\n                                ? styles['content-card__media--logo']\n                                : styles['content-card__media--image'],\n                        )}\n                        style={\n                            mediaKind === 'logo' && mediaBackground != null\n                                ? ({\n                                      '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n                                  } as CSSProperties)\n                                : undefined\n                        }\n                    >\n                        <div className={styles['content-card__media-inner']}>{media}</div>\n                    </div>\n                )}\n\n                <div className={styles['content-card__content']}>\n                    <div className={styles['content-card__content-inner']}>\n                        <div className={styles['content-card__body-region']}>\n                            <div className={styles['content-card__header']}>\n                                {isRenderable(titlePrefix) && (\n                                    <div className={styles['content-card__prefix']}>\n                                        {titlePrefix}\n                                    </div>\n                                )}\n                                <HeadingLevel\n                                    id={titleId}\n                                    className={styles['content-card__title']}\n                                >\n                                    {title}\n                                </HeadingLevel>\n                            </div>\n                            {isRenderable(body) && (\n                                <div className={cn(styles['content-card__body'], 'dds-prose')}>\n                                    {body}\n                                </div>\n                            )}\n                        </div>\n                        {isRenderable(actions) && (\n                            <div className={styles['content-card__actions']}>{actions}</div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </Root>\n    );\n};\n"],"names":["useId","isRenderable","jsx","cn","styles","elevationStyles","jsxs"],"mappings":"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"}

package/dist/components/ContentCard/ContentCard.css

@@ -0,0 +1,254 @@
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/*
+ * Content Card
+ *
+ * Container-driven layout: horizontal when the card is >= 40rem wide, vertical below.
+ * Title size responds to the CONTENT AREA width (its own container). Content padding
+ * responds to both the content-area width and the layout mode. Body size and inner
+ * gaps stay constant across sizes.
+ */
+
+._content-card_15yr0_10 {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+    /* Reset the base list-item margin when the root renders as <li>. */
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    background-color: var(--color-semantic-surface-base);
+    border-radius: var(--radius-semantic-md);
+    /* Clips media corners to the card radius; the card's own box-shadow is not clipped. */
+    overflow: clip;
+    container-name: content-card;
+    container-type: inline-size;
+}
+
+._content-card--border_15yr0_26 {
+    border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
+}
+
+/* Layout wrapper: a descendant of the container so its direction can respond to card width. */
+._content-card__layout_15yr0_31 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* ─── Media ─── */
+
+._content-card__media_15yr0_40 {
+    position: relative;
+    width: 100%;
+}
+
+._content-card__media--image_15yr0_45 {
+    aspect-ratio: 21 / 9;
+}
+
+._content-card__media--logo_15yr0_49 {
+    aspect-ratio: 21 / 9;
+    background-color: var(--_cc-logo-bg, var(--color-semantic-surface-neutral-mid));
+}
+
+/* Absolute inner fills the media box so content can't stretch the aspect ratio. */
+._content-card__media-inner_15yr0_55 {
+    position: absolute;
+    inset: 0;
+
+    /* Descendant selector also reaches an <img> nested inside a <picture>. */
+    & :where(img, picture, video, svg, canvas) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+
+/* Logo sits in a centered 4:3 box and is contained within it. */
+._content-card__media--logo_15yr0_49 ._content-card__media-inner_15yr0_55 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-space-24);
+
+    & :where(img, picture, video, svg, canvas) {
+        width: auto;
+        height: 100%;
+        max-width: 100%;
+        aspect-ratio: 4 / 3;
+        object-fit: contain;
+    }
+}
+
+/* ─── Content ─── */
+
+._content-card__content_15yr0_86 {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    container-name: content-card-content;
+    container-type: inline-size;
+}
+
+/* Padded stack: a descendant of the content container so padding can respond to content width. */
+._content-card__content-inner_15yr0_96 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-space-24);
+    /* Vertical layout, small content width. */
+    padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-32);
+}
+
+._content-card__body-region_15yr0_105 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-20);
+}
+
+._content-card__header_15yr0_111 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-4);
+}
+
+._content-card__prefix_15yr0_117 {
+    align-self: flex-start;
+}
+
+._content-card__title_15yr0_121 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-heading-sm);
+    text-wrap: balance;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    /* Only hyphenate words of >= 12 chars (min 6 before / 3 after the break). */
+    hyphenate-limit-chars: 12 6 3;
+}
+
+._content-card__body_15yr0_105 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    text-wrap: pretty;
+    overflow-wrap: break-word;
+    hyphens: auto;
+    /* Only hyphenate words of >= 12 chars (min 6 before / 3 after the break). */
+    hyphenate-limit-chars: 12 6 3;
+}
+
+._content-card__body_15yr0_105 p {
+    margin: 0;
+}
+
+._content-card__body_15yr0_105 p + p {
+    margin-top: var(--spacing-space-12);
+}
+
+._content-card__actions_15yr0_151 {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--spacing-space-8);
+    /* Vertical mode only: keeps actions at the bottom when the card is taller than its content
+       (e.g. equal-height grid). Reset in the horizontal layout below. */
+    margin-top: auto;
+}
+
+/* ─── Content-area size steps (vertical paddings; based on content width) ─── */
+
+@container content-card-content (min-width: 24rem) {
+    ._content-card__content-inner_15yr0_96 {
+        padding: var(--spacing-space-24) var(--spacing-space-40) var(--spacing-space-40);
+    }
+
+    ._content-card__title_15yr0_121 {
+        font: var(--typography-heading-md);
+    }
+}
+
+@container content-card-content (min-width: 36rem) {
+    ._content-card__content-inner_15yr0_96 {
+        padding: var(--spacing-space-32) var(--spacing-space-64) var(--spacing-space-48);
+    }
+}
+
+/* ─── Horizontal layout (card wide enough) ─── */
+
+@container content-card (min-width: 40rem) {
+    ._content-card__layout_15yr0_31 {
+        flex-direction: row;
+    }
+
+    ._content-card--media-end_15yr0_187 ._content-card__layout_15yr0_31 {
+        flex-direction: row-reverse;
+    }
+
+    ._content-card__media_15yr0_40 {
+        align-self: stretch;
+        /* Non-shrinking basis so mediaWidth is honoured even next to long content. */
+        flex: 0 0 33.3333%;
+        aspect-ratio: auto;
+    }
+
+    ._content-card--media-half_15yr0_198 ._content-card__media_15yr0_40 {
+        flex-basis: 50%;
+    }
+
+    /* Content is vertically centered against the media in the horizontal layout. */
+    ._content-card__content_15yr0_86 {
+        align-self: center;
+    }
+
+    ._content-card__actions_15yr0_151 {
+        margin-top: 0;
+    }
+
+    /* Minimum media height follows a 4:3 shape of its own width. */
+    ._content-card__media--image_15yr0_45::before {
+        content: '';
+        display: block;
+        padding-top: 75%;
+    }
+
+    /* Horizontal paddings override the vertical ones, still stepping by content width. */
+    ._content-card__content-inner_15yr0_96 {
+        padding: var(--spacing-space-32) var(--spacing-space-20);
+    }
+
+    @container content-card-content (min-width: 24rem) {
+        ._content-card__content-inner_15yr0_96 {
+            padding: var(--spacing-space-40);
+        }
+    }
+
+    @container content-card-content (min-width: 36rem) {
+        ._content-card__content-inner_15yr0_96 {
+            padding: var(--spacing-space-48) var(--spacing-space-64);
+        }
+    }
+}
+
+/* ─── Forced colors ─── */
+
+@media (forced-colors: active) {
+    ._content-card_15yr0_10 {
+        border: var(--borderwidth-semantic-xs) solid CanvasText;
+    }
+
+    ._content-card--elevated_15yr0_243 {
+        box-shadow: none;
+    }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/ContentCard/ContentCard.d.ts

@@ -0,0 +1,3 @@
+import { ContentCardProps } from './ContentCard.types';
+export declare const ContentCard: ({ media, mediaKind, mediaBackground, mediaWidth, mediaPosition, titlePrefix, title, headingLevel, body, actions, appearance, as, className, ref, ...props }: ContentCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentCard.d.ts.map

package/dist/components/ContentCard/ContentCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAA6B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAevF,eAAO,MAAM,WAAW,GAAI,6JAgBzB,gBAAgB,4CAgFlB,CAAC"}

package/dist/components/ContentCard/ContentCard.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { elevationStyles } from "../../styles/utils/index.js";
+import styles from "./ContentCard.module.css.js";
+import { isRenderable } from "../../utils/isRenderable/isRenderable.js";
+import { cn } from "../../utils/cn/cn.js";
+const logoBackgroundToken = {
+  white: "var(--color-semantic-surface-base)",
+  "sand-soft": "var(--color-semantic-surface-neutral-soft)",
+  "sand-mid": "var(--color-semantic-surface-neutral-mid)",
+  "sand-strong": "var(--color-semantic-surface-neutral-strong)",
+  "pink-soft": "var(--color-semantic-surface-primary-soft)",
+  "pink-mid": "var(--color-semantic-surface-primary-mid)",
+  "pink-strong": "var(--color-semantic-surface-primary-strong)",
+  "plum-soft": "var(--color-semantic-surface-secondary-soft)",
+  "plum-mid": "var(--color-semantic-surface-secondary-mid)",
+  "plum-strong": "var(--color-semantic-surface-secondary-strong)"
+};
+const ContentCard = ({
+  media,
+  mediaKind = "image",
+  mediaBackground,
+  mediaWidth = "1/3",
+  mediaPosition = "start",
+  titlePrefix,
+  title,
+  headingLevel = "h3",
+  body,
+  actions,
+  appearance = "plain",
+  as = "article",
+  className,
+  ref,
+  ...props
+}) => {
+  const titleId = useId();
+  const HeadingLevel = headingLevel;
+  const Root = as;
+  const hasMedia = isRenderable(media);
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel || as === "div" ? void 0 : titleId);
+  return /* @__PURE__ */ jsx(
+    Root,
+    {
+      ref,
+      ...props,
+      "data-color-scheme": "light",
+      className: cn(
+        styles["content-card"],
+        hasMedia && mediaWidth === "1/2" && styles["content-card--media-half"],
+        hasMedia && mediaPosition === "end" && styles["content-card--media-end"],
+        appearance === "border" && styles["content-card--border"],
+        appearance === "elevated" && styles["content-card--elevated"],
+        appearance === "elevated" && elevationStyles.elevationLow,
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: /* @__PURE__ */ jsxs("div", { className: styles["content-card__layout"], children: [
+        hasMedia && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              styles["content-card__media"],
+              mediaKind === "logo" ? styles["content-card__media--logo"] : styles["content-card__media--image"]
+            ),
+            style: mediaKind === "logo" && mediaBackground != null ? {
+              "--_cc-logo-bg": logoBackgroundToken[mediaBackground]
+            } : void 0,
+            children: /* @__PURE__ */ jsx("div", { className: styles["content-card__media-inner"], children: media })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: styles["content-card__content"], children: /* @__PURE__ */ jsxs("div", { className: styles["content-card__content-inner"], children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["content-card__body-region"], children: [
+            /* @__PURE__ */ jsxs("div", { className: styles["content-card__header"], children: [
+              isRenderable(titlePrefix) && /* @__PURE__ */ jsx("div", { className: styles["content-card__prefix"], children: titlePrefix }),
+              /* @__PURE__ */ jsx(
+                HeadingLevel,
+                {
+                  id: titleId,
+                  className: styles["content-card__title"],
+                  children: title
+                }
+              )
+            ] }),
+            isRenderable(body) && /* @__PURE__ */ jsx("div", { className: cn(styles["content-card__body"], "dds-prose"), children: body })
+          ] }),
+          isRenderable(actions) && /* @__PURE__ */ jsx("div", { className: styles["content-card__actions"], children: actions })
+        ] }) })
+      ] })
+    }
+  );
+};
+export {
+  ContentCard
+};
+//# sourceMappingURL=ContentCard.js.map

package/dist/components/ContentCard/ContentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.js","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport { elevationStyles } from '../../styles/utils';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n    white: 'var(--color-semantic-surface-base)',\n    'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n    'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n    'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n    'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n    'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n    'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n    'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n    'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n    'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\nexport const ContentCard = ({\n    media,\n    mediaKind = 'image',\n    mediaBackground,\n    mediaWidth = '1/3',\n    mediaPosition = 'start',\n    titlePrefix,\n    title,\n    headingLevel = 'h3',\n    body,\n    actions,\n    appearance = 'plain',\n    as = 'article',\n    className,\n    ref,\n    ...props\n}: ContentCardProps) => {\n    const titleId = useId();\n    const HeadingLevel = headingLevel;\n    // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n    const Root = as as ElementType;\n    const hasMedia = isRenderable(media);\n    const ariaLabel = props['aria-label'];\n    // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n    // bare div or when an aria-label is provided.\n    const ariaLabelledBy =\n        props['aria-labelledby'] ?? (ariaLabel || as === 'div' ? undefined : titleId);\n\n    return (\n        <Root\n            ref={ref}\n            {...props}\n            data-color-scheme=\"light\"\n            className={cn(\n                styles['content-card'],\n                hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n                hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n                appearance === 'border' && styles['content-card--border'],\n                appearance === 'elevated' && styles['content-card--elevated'],\n                appearance === 'elevated' && elevationStyles.elevationLow,\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            <div className={styles['content-card__layout']}>\n                {hasMedia && (\n                    <div\n                        className={cn(\n                            styles['content-card__media'],\n                            mediaKind === 'logo'\n                                ? styles['content-card__media--logo']\n                                : styles['content-card__media--image'],\n                        )}\n                        style={\n                            mediaKind === 'logo' && mediaBackground != null\n                                ? ({\n                                      '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n                                  } as CSSProperties)\n                                : undefined\n                        }\n                    >\n                        <div className={styles['content-card__media-inner']}>{media}</div>\n                    </div>\n                )}\n\n                <div className={styles['content-card__content']}>\n                    <div className={styles['content-card__content-inner']}>\n                        <div className={styles['content-card__body-region']}>\n                            <div className={styles['content-card__header']}>\n                                {isRenderable(titlePrefix) && (\n                                    <div className={styles['content-card__prefix']}>\n                                        {titlePrefix}\n                                    </div>\n                                )}\n                                <HeadingLevel\n                                    id={titleId}\n                                    className={styles['content-card__title']}\n                                >\n                                    {title}\n                                </HeadingLevel>\n                            </div>\n                            {isRenderable(body) && (\n                                <div className={cn(styles['content-card__body'], 'dds-prose')}>\n                                    {body}\n                                </div>\n                            )}\n                        </div>\n                        {isRenderable(actions) && (\n                            <div className={styles['content-card__actions']}>{actions}</div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </Root>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;AAEO,MAAM,cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAU,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,WAAW,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB,WAAW;AAAA,QACP,OAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAAS,OAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAAS,OAAO,yBAAyB;AAAA,QACvE,eAAe,YAAY,OAAO,sBAAsB;AAAA,QACxD,eAAe,cAAc,OAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAc,gBAAgB;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP,OAAO,qBAAqB;AAAA,cAC5B,cAAc,SACR,OAAO,2BAA2B,IAClC,OAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,8BAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpE,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAC1C,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,6BAA6B,GAChD,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,cAAA,aAAa,WAAW,KACrB,oBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW,OAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,aAAa,IAAI,KACd,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,UACC,aAAa,OAAO,KACjB,oBAAC,SAAI,WAAW,OAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/ContentCard/ContentCard.module.css.cjs

@@ -0,0 +1,24 @@
+require('./ContentCard.css');
+"use strict";
+const styles = {
+  "content-card": "_content-card_15yr0_10",
+  "content-card--border": "_content-card--border_15yr0_26",
+  "content-card__layout": "_content-card__layout_15yr0_31",
+  "content-card__media": "_content-card__media_15yr0_40",
+  "content-card__media--image": "_content-card__media--image_15yr0_45",
+  "content-card__media--logo": "_content-card__media--logo_15yr0_49",
+  "content-card__media-inner": "_content-card__media-inner_15yr0_55",
+  "content-card__content": "_content-card__content_15yr0_86",
+  "content-card__content-inner": "_content-card__content-inner_15yr0_96",
+  "content-card__body-region": "_content-card__body-region_15yr0_105",
+  "content-card__header": "_content-card__header_15yr0_111",
+  "content-card__prefix": "_content-card__prefix_15yr0_117",
+  "content-card__title": "_content-card__title_15yr0_121",
+  "content-card__body": "_content-card__body_15yr0_105",
+  "content-card__actions": "_content-card__actions_15yr0_151",
+  "content-card--media-end": "_content-card--media-end_15yr0_187",
+  "content-card--media-half": "_content-card--media-half_15yr0_198",
+  "content-card--elevated": "_content-card--elevated_15yr0_243"
+};
+module.exports = styles;
+//# sourceMappingURL=ContentCard.module.css.cjs.map

package/dist/components/ContentCard/ContentCard.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ContentCard/ContentCard.module.css.js

@@ -0,0 +1,25 @@
+import './ContentCard.css';
+const styles = {
+  "content-card": "_content-card_15yr0_10",
+  "content-card--border": "_content-card--border_15yr0_26",
+  "content-card__layout": "_content-card__layout_15yr0_31",
+  "content-card__media": "_content-card__media_15yr0_40",
+  "content-card__media--image": "_content-card__media--image_15yr0_45",
+  "content-card__media--logo": "_content-card__media--logo_15yr0_49",
+  "content-card__media-inner": "_content-card__media-inner_15yr0_55",
+  "content-card__content": "_content-card__content_15yr0_86",
+  "content-card__content-inner": "_content-card__content-inner_15yr0_96",
+  "content-card__body-region": "_content-card__body-region_15yr0_105",
+  "content-card__header": "_content-card__header_15yr0_111",
+  "content-card__prefix": "_content-card__prefix_15yr0_117",
+  "content-card__title": "_content-card__title_15yr0_121",
+  "content-card__body": "_content-card__body_15yr0_105",
+  "content-card__actions": "_content-card__actions_15yr0_151",
+  "content-card--media-end": "_content-card--media-end_15yr0_187",
+  "content-card--media-half": "_content-card--media-half_15yr0_198",
+  "content-card--elevated": "_content-card--elevated_15yr0_243"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ContentCard.module.css.js.map

package/dist/components/ContentCard/ContentCard.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/components/ContentCard/ContentCard.types.d.ts

@@ -0,0 +1,100 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type ContentCardHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type ContentCardMediaKind = 'image' | 'logo';
+export type ContentCardMediaWidth = '1/3' | '1/2';
+export type ContentCardMediaPosition = 'start' | 'end';
+export type ContentCardAppearance = 'plain' | 'border' | 'elevated';
+/**
+ * Approved logo-area background colours. Maps to DNA surface tokens; CMS names in
+ * parentheses: `white` (White), `sand-*` (Sand / SandE01 / SandE02),
+ * `pink-*` (Pink / PinkE01 / PinkE02), `plum-*` (Plum / PlumE01 / PlumE02).
+ */
+export type ContentCardLogoBackground = 'white' | 'sand-soft' | 'sand-mid' | 'sand-strong' | 'pink-soft' | 'pink-mid' | 'pink-strong' | 'plum-soft' | 'plum-mid' | 'plum-strong';
+type ContentCardBaseProps = {
+    /**
+     * Optional media slot (image or logo). The client renders the element and owns
+     * `alt`, loading, and optimisation (for example `next/image`). Mark decorative
+     * images with an empty `alt`.
+     */
+    readonly media?: ReactNode;
+    /**
+     * How the media area is rendered. `logo` centres the media in a 4:3 box over a
+     * filled background; `image` fills the area. Ignored when `media` is omitted.
+     * @default 'image'
+     */
+    readonly mediaKind?: ContentCardMediaKind;
+    /**
+     * Logo-area background colour, limited to approved DNA surface tokens. Only used
+     * with `mediaKind="logo"`; defaults to `sand-mid` when omitted.
+     */
+    readonly mediaBackground?: ContentCardLogoBackground;
+    /**
+     * Media width in the horizontal layout (1/3 or 1/2 of the card). Ignored in the
+     * vertical layout, where media is always full width.
+     * @default '1/3'
+     */
+    readonly mediaWidth?: ContentCardMediaWidth;
+    /**
+     * Media side in the horizontal layout (logical, RTL-safe). In the vertical
+     * layout media is always placed above the content.
+     * @default 'start'
+     */
+    readonly mediaPosition?: ContentCardMediaPosition;
+    /**
+     * Optional slot above the title for a single small element (for example a
+     * `Label`; intended uses: Label, Timestamp, Pretitle).
+     */
+    readonly titlePrefix?: ReactNode;
+    /** Card title. Required. */
+    readonly title: ReactNode;
+    /**
+     * HTML heading level for the title. The consumer owns the document outline.
+     * @default 'h3'
+     */
+    readonly headingLevel?: ContentCardHeadingLevel;
+    /**
+     * Optional body content. Wrap rich text so it can adopt `dds-prose` styling;
+     * pass React nodes rather than HTML strings.
+     */
+    readonly body?: ReactNode;
+    /**
+     * Optional actions (0..n `Button`/`IconButton` elements). Laid out in a row that
+     * wraps to a column when there is not enough width.
+     */
+    readonly actions?: ReactNode;
+    /**
+     * Card surface treatment. The card always establishes a light colour scheme
+     * for its light surface, regardless of the parent scheme.
+     * @default 'plain'
+     */
+    readonly appearance?: ContentCardAppearance;
+};
+export interface ContentCardArticleProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'article'>, 'title' | 'children'> {
+    /**
+     * Root element (and role) to render. Use `li` for cards inside a `ul`/`ol`
+     * collection, `section` for a standalone page region (becomes a landmark, use
+     * sparingly), or `div` when a surrounding element already provides the
+     * semantics. The title is still linked as the accessible name via
+     * `aria-labelledby` (when not rendering as a generic div).
+     * @default 'article'
+     */
+    readonly as?: 'article';
+}
+export interface ContentCardLiProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'li'>, 'title' | 'children'> {
+    readonly as: 'li';
+}
+export interface ContentCardSectionProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'section'>, 'title' | 'children'> {
+    readonly as: 'section';
+}
+export interface ContentCardDivProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'div'>, 'title' | 'children'> {
+    readonly as: 'div';
+}
+/**
+ * Props for the Content card. The `as` prop selects the root element and narrows
+ * the element-specific HTML attributes accordingly.
+ */
+export type ContentCardProps = ContentCardArticleProps | ContentCardLiProps | ContentCardSectionProps | ContentCardDivProps;
+/** Allowed root elements, derived from the props union. */
+export type ContentCardElement = NonNullable<ContentCardProps['as']>;
+export {};
+//# sourceMappingURL=ContentCard.types.d.ts.map

package/dist/components/ContentCard/ContentCard.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpE;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,CAAC;AAEpB,KAAK,oBAAoB,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,mBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtF,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACtB,uBAAuB,GACvB,kBAAkB,GAClB,uBAAuB,GACvB,mBAAmB,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC"}