@dnanpm/ui-components 0.8.0 → 0.9.0

package/dist/components/Accordion/Accordion.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * Accordion Component Styles
  *
  * Layout wrapper that spaces AccordionItem children evenly.
@@ -15,5 +19,4 @@
 
 ._accordion--panel_18qm2_16 {
     gap: 0;
-}
-}
+} }

package/dist/components/AccordionItem/AccordionItem.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * AccordionItem Component Styles
  *
  * Uses native <details> element for expand/collapse behavior.
@@ -124,5 +128,4 @@
         /* calc-size() function allows transition to height: auto; */
         block-size: calc-size(auto, size);
     }
-}
-}
+} }

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * Breadcrumb Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).
@@ -68,5 +72,4 @@
     ._breadcrumb__item_1c8nk_26:not(:nth-last-child(-n + 2)) {
         display: none;
     }
-}
-}
+} }

package/dist/components/Button/Button.css

@@ -1,4 +1,4 @@
-@layer dds-components {._button_1utks_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button_1utks_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -186,5 +186,4 @@
 
 ._button__spinner_1utks_187 {
     flex: 0 0 auto;
-}
-}
+} }

package/dist/components/ButtonCard/ButtonCard.css

@@ -1,4 +1,4 @@
-@layer dds-components {._button-card_14hpp_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button-card_14hpp_1 {
     --_button-card-padding: var(--spacing-space-16);
     --_button-card-gap: var(--spacing-space-16);
     --_button-card-content-gap: var(--spacing-space-16);
@@ -163,5 +163,4 @@
     white-space: nowrap;
     border: 0;
     clip: rect(0, 0, 0, 0);
-}
-}
+} }

package/dist/components/ContentCard/ContentCard.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const ContentCard_module = require("./ContentCard.module.css.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 isRenderable = (node) => node != null && typeof node !== "boolean";
+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(media);
+  const ariaLabel = props["aria-label"];
+  const ariaLabelledBy = props["aria-labelledby"] ?? (ariaLabel || as === "div" ? void 0 : titleId);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Root,
+    {
+      ref,
+      ...props,
+      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" && elevation_module.default.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(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(body) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(ContentCard_module["content-card__body"], "dds-prose"), children: body })
+          ] }),
+          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 elevationStyles from '../../styles/utils/elevation.module.css';\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\n// A boolean ReactNode (e.g. from `condition && <X />`) renders nothing, so treat it as absent.\nconst isRenderable = (node: ReactNode): boolean => node != null && typeof node !== 'boolean';\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            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","jsx","cn","styles","elevationStyles","jsxs"],"mappings":"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"}

package/dist/components/ContentCard/ContentCard.css

@@ -0,0 +1,249 @@
+@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_1pa46_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;
+    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_1pa46_25 {
+    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_1pa46_30 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 100%;
+}
+
+/* ─── Media ─── */
+
+._content-card__media_1pa46_39 {
+    position: relative;
+    width: 100%;
+}
+
+._content-card__media--image_1pa46_44 {
+    aspect-ratio: 21 / 9;
+}
+
+._content-card__media--logo_1pa46_48 {
+    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_1pa46_54 {
+    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_1pa46_48 ._content-card__media-inner_1pa46_54 {
+    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_1pa46_85 {
+    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_1pa46_95 {
+    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_1pa46_104 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-20);
+}
+
+._content-card__header_1pa46_110 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-space-4);
+}
+
+._content-card__prefix_1pa46_116 {
+    align-self: flex-start;
+}
+
+._content-card__title_1pa46_120 {
+    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_1pa46_104 {
+    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_1pa46_104 p {
+    margin: 0;
+}
+
+._content-card__body_1pa46_104 p + p {
+    margin-top: var(--spacing-space-12);
+}
+
+._content-card__actions_1pa46_150 {
+    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_1pa46_95 {
+        padding: var(--spacing-space-24) var(--spacing-space-40) var(--spacing-space-40);
+    }
+
+    ._content-card__title_1pa46_120 {
+        font: var(--typography-heading-md);
+    }
+}
+
+@container content-card-content (min-width: 36rem) {
+    ._content-card__content-inner_1pa46_95 {
+        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_1pa46_30 {
+        flex-direction: row;
+    }
+
+    ._content-card--media-end_1pa46_186 ._content-card__layout_1pa46_30 {
+        flex-direction: row-reverse;
+    }
+
+    ._content-card__media_1pa46_39 {
+        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_1pa46_197 ._content-card__media_1pa46_39 {
+        flex-basis: 50%;
+    }
+
+    /* Content is vertically centered against the media in the horizontal layout. */
+    ._content-card__content_1pa46_85 {
+        align-self: center;
+    }
+
+    ._content-card__actions_1pa46_150 {
+        margin-top: 0;
+    }
+
+    /* Minimum media height follows a 4:3 shape of its own width. */
+    ._content-card__media--image_1pa46_44::before {
+        content: '';
+        display: block;
+        padding-top: 75%;
+    }
+
+    /* Horizontal paddings override the vertical ones, still stepping by content width. */
+    ._content-card__content-inner_1pa46_95 {
+        padding: var(--spacing-space-32) var(--spacing-space-20);
+    }
+
+    @container content-card-content (min-width: 24rem) {
+        ._content-card__content-inner_1pa46_95 {
+            padding: var(--spacing-space-40);
+        }
+    }
+
+    @container content-card-content (min-width: 36rem) {
+        ._content-card__content-inner_1pa46_95 {
+            padding: var(--spacing-space-48) var(--spacing-space-64);
+        }
+    }
+}
+
+/* ─── Forced colors ─── */
+
+@media (forced-colors: active) {
+    ._content-card_1pa46_10 {
+        border: var(--borderwidth-semantic-xs) solid CanvasText;
+    }
+
+    ._content-card--elevated_1pa46_242 {
+        box-shadow: none;
+    }
+} }

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":"AAKA,OAAO,KAAK,EAA6B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAkBvF,eAAO,MAAM,WAAW,GAAI,6JAgBzB,gBAAgB,4CA+ElB,CAAC"}

package/dist/components/ContentCard/ContentCard.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import styles from "./ContentCard.module.css.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 isRenderable = (node) => node != null && typeof node !== "boolean";
+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,
+      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 elevationStyles from '../../styles/utils/elevation.module.css';\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\n// A boolean ReactNode (e.g. from `condition && <X />`) renders nothing, so treat it as absent.\nconst isRenderable = (node: ReactNode): boolean => node != null && typeof node !== 'boolean';\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            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":";;;;;AAOA,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;AAGA,MAAM,eAAe,CAAC,SAA6B,QAAQ,QAAQ,OAAO,SAAS;AAE5E,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,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_1pa46_10",
+  "content-card--border": "_content-card--border_1pa46_25",
+  "content-card__layout": "_content-card__layout_1pa46_30",
+  "content-card__media": "_content-card__media_1pa46_39",
+  "content-card__media--image": "_content-card__media--image_1pa46_44",
+  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
+  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
+  "content-card__content": "_content-card__content_1pa46_85",
+  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
+  "content-card__body-region": "_content-card__body-region_1pa46_104",
+  "content-card__header": "_content-card__header_1pa46_110",
+  "content-card__prefix": "_content-card__prefix_1pa46_116",
+  "content-card__title": "_content-card__title_1pa46_120",
+  "content-card__body": "_content-card__body_1pa46_104",
+  "content-card__actions": "_content-card__actions_1pa46_150",
+  "content-card--media-end": "_content-card--media-end_1pa46_186",
+  "content-card--media-half": "_content-card--media-half_1pa46_197",
+  "content-card--elevated": "_content-card--elevated_1pa46_242"
+};
+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_1pa46_10",
+  "content-card--border": "_content-card--border_1pa46_25",
+  "content-card__layout": "_content-card__layout_1pa46_30",
+  "content-card__media": "_content-card__media_1pa46_39",
+  "content-card__media--image": "_content-card__media--image_1pa46_44",
+  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
+  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
+  "content-card__content": "_content-card__content_1pa46_85",
+  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
+  "content-card__body-region": "_content-card__body-region_1pa46_104",
+  "content-card__header": "_content-card__header_1pa46_110",
+  "content-card__prefix": "_content-card__prefix_1pa46_116",
+  "content-card__title": "_content-card__title_1pa46_120",
+  "content-card__body": "_content-card__body_1pa46_104",
+  "content-card__actions": "_content-card__actions_1pa46_150",
+  "content-card--media-end": "_content-card--media-end_1pa46_186",
+  "content-card--media-half": "_content-card--media-half_1pa46_197",
+  "content-card--elevated": "_content-card--elevated_1pa46_242"
+};
+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":";;;;;;;;;;;;;;;;;;;;"}