@dnanpm/ui-components 0.7.0 → 0.9.0

package/dist/components/ButtonCard/ButtonCard.css

@@ -0,0 +1,166 @@
+@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);
+    --_button-card-text-gap: var(--spacing-space-4);
+    --_button-card-line-clamp: 2;
+    --_button-card-media-box: 56px;
+    --_button-card-media-icon: 40px;
+    --_button-card-indicator: 24px;
+    --_button-card-title-font: var(--typography-label-lg-bold);
+    --_button-card-subtitle-font: var(--typography-label-md);
+
+    display: flex;
+    align-items: center;
+    gap: var(--_button-card-gap);
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--_button-card-padding);
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    color: var(--color-semantic-foreground-default);
+    background-color: var(--color-semantic-surface-base);
+    border-color: var(--color-semantic-border-neutral-soft);
+    border-radius: var(--radius-semantic-md);
+    cursor: pointer;
+    appearance: none;
+}
+
+._button-card_14hpp_1:where(:hover, :focus-visible) {
+    border-color: var(--color-semantic-border-neutral-mid);
+}
+
+/* === Size variants (base holds the medium/default values) === */
+
+._button-card--large_14hpp_37 {
+    --_button-card-title-font: var(--typography-heading-xs);
+    --_button-card-subtitle-font: var(--typography-label-lg);
+}
+
+._button-card--small_14hpp_42 {
+    flex-direction: column;
+    align-items: stretch;
+    --_button-card-padding: var(--spacing-space-8);
+    --_button-card-gap: var(--spacing-space-4);
+    --_button-card-content-gap: var(--spacing-space-8);
+    --_button-card-text-gap: 0;
+    --_button-card-line-clamp: 1;
+    --_button-card-media-box: 40px;
+    --_button-card-media-icon: 24px;
+    --_button-card-indicator: 16px;
+    --_button-card-title-font: var(--typography-label-md);
+    --_button-card-subtitle-font: var(--typography-label-sm);
+}
+
+/* === Media === */
+
+._button-card__media_14hpp_59 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-self: center;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+
+._button-card--small_14hpp_42 ._button-card__media_14hpp_59 {
+    align-self: flex-start;
+}
+
+._button-card__media--icon_14hpp_72 {
+    width: var(--_button-card-media-box);
+    height: var(--_button-card-media-box);
+    background-color: var(--color-semantic-surface-neutral-mid);
+    border-radius: var(--radius-semantic-md);
+}
+
+._button-card__media--icon_14hpp_72 svg {
+    display: block;
+    width: var(--_button-card-media-icon);
+    height: var(--_button-card-media-icon);
+}
+
+._button-card__media--image_14hpp_85 {
+    position: relative;
+    width: var(--_button-card-media-box);
+    height: var(--_button-card-media-box);
+}
+
+._button-card__media--image_14hpp_85 :where(img, picture, video, svg, canvas) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* === Text === */
+
+._button-card__content_14hpp_100 {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    align-items: center;
+    gap: var(--_button-card-content-gap);
+}
+
+._button-card__text_14hpp_108 {
+    display: flex;
+    flex: 1 1 0;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--_button-card-text-gap);
+}
+
+._button-card__title_14hpp_117,
+._button-card__subtitle_14hpp_118 {
+    display: -webkit-box;
+    margin: 0;
+    overflow: hidden;
+    overflow-wrap: anywhere;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--_button-card-line-clamp);
+    line-clamp: var(--_button-card-line-clamp);
+}
+
+._button-card__title_14hpp_117 {
+    color: var(--color-semantic-foreground-default);
+    font: var(--_button-card-title-font);
+}
+
+._button-card__subtitle_14hpp_118 {
+    color: var(--color-semantic-foreground-muted);
+    font: var(--_button-card-subtitle-font);
+}
+
+/* === Indicator === */
+
+._button-card__indicator_14hpp_140 {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-semantic-foreground-primary-strong);
+}
+
+._button-card__indicator_14hpp_140 svg {
+    display: block;
+    width: var(--_button-card-indicator);
+    height: var(--_button-card-indicator);
+}
+
+/* === Visually hidden === */
+
+._button-card__sr-only_14hpp_156 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    white-space: nowrap;
+    border: 0;
+    clip: rect(0, 0, 0, 0);
+} }

package/dist/components/ButtonCard/ButtonCard.d.ts

@@ -0,0 +1,3 @@
+import { ButtonCardProps } from './ButtonCard.types';
+export declare const ButtonCard: ({ title, subtitle, size, icon, image, isExternal, externalLinkAriaLabel, className, ref, ...props }: ButtonCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ButtonCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCard.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAuB,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE/E,eAAO,MAAM,UAAU,GAAI,qGAWxB,eAAe,4CAgIjB,CAAC"}

package/dist/components/ButtonCard/ButtonCard.js

@@ -0,0 +1,105 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { Open, ChevronRight } from "@dnanpm/icons";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import styles from "./ButtonCard.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const ButtonCard = ({
+  title,
+  subtitle,
+  size = "medium",
+  icon,
+  image,
+  isExternal = false,
+  externalLinkAriaLabel = "avautuu uuteen välilehteen",
+  className,
+  ref,
+  ...props
+}) => {
+  const isAnchor = "href" in props && props.href != null;
+  const classes = cn(
+    styles["button-card"],
+    styles[`button-card--${size}`],
+    focusStyles.focusable,
+    elevationStyles.elevationLow,
+    className
+  );
+  const IconComponent = icon;
+  const media = IconComponent != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(styles["button-card__media"], styles["button-card__media--icon"]),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(IconComponent, { "aria-hidden": "true" })
+    }
+  ) : image ? /* @__PURE__ */ jsx("span", { className: cn(styles["button-card__media"], styles["button-card__media--image"]), children: image }) : null;
+  const explicitTarget = isAnchor ? props.target?.toLowerCase() : void 0;
+  const opensInNewTab = isExternal || explicitTarget === "_blank";
+  const Indicator = opensInNewTab ? Open : ChevronRight;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    media,
+    /* @__PURE__ */ jsxs("span", { className: styles["button-card__content"], children: [
+      /* @__PURE__ */ jsxs("span", { className: styles["button-card__text"], children: [
+        /* @__PURE__ */ jsx("span", { className: styles["button-card__title"], children: title }),
+        subtitle != null && /* @__PURE__ */ jsx("span", { className: styles["button-card__subtitle"], children: subtitle })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: styles["button-card__indicator"], "aria-hidden": "true", children: /* @__PURE__ */ jsx(Indicator, { "aria-hidden": "true" }) })
+    ] }),
+    opensInNewTab && externalLinkAriaLabel && /* @__PURE__ */ jsx("span", { className: styles["button-card__sr-only"], children: ` (${externalLinkAriaLabel})` })
+  ] });
+  if (isAnchor) {
+    const {
+      href,
+      renderLink,
+      target: targetProp,
+      rel,
+      disabled: _disabled,
+      ...safeAnchorProps
+    } = props;
+    const target = isExternal ? "_blank" : targetProp;
+    const shouldHardenRel = target?.toLowerCase() === "_blank";
+    const relTokens = new Set(
+      (rel ?? "").split(/\s+/).filter(Boolean).map((token) => token.toLowerCase())
+    );
+    if (shouldHardenRel) {
+      relTokens.add("noopener");
+      relTokens.add("noreferrer");
+    }
+    const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(" ") : void 0;
+    const linkProps = {
+      ...safeAnchorProps,
+      ref,
+      href,
+      target,
+      rel: hardenedRel,
+      className: classes,
+      children: content
+    };
+    if (renderLink) {
+      return /* @__PURE__ */ jsx(Fragment, { children: renderLink(linkProps) });
+    }
+    return /* @__PURE__ */ jsx("a", { ...linkProps });
+  }
+  const {
+    type = "button",
+    href: _href,
+    target: _target,
+    rel: _rel,
+    renderLink: _renderLink,
+    ...buttonProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: classes,
+      ...buttonProps,
+      children: content
+    }
+  );
+};
+export {
+  ButtonCard
+};
+//# sourceMappingURL=ButtonCard.js.map

package/dist/components/ButtonCard/ButtonCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCard.js","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { ChevronRight, Open } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './ButtonCard.module.css';\nimport type { ButtonCardLinkProps, ButtonCardProps } from './ButtonCard.types';\n\nexport const ButtonCard = ({\n    title,\n    subtitle,\n    size = 'medium',\n    icon,\n    image,\n    isExternal = false,\n    externalLinkAriaLabel = 'avautuu uuteen välilehteen',\n    className,\n    ref,\n    ...props\n}: ButtonCardProps) => {\n    const isAnchor = 'href' in props && (props as { href?: string }).href != null;\n\n    const classes = cn(\n        styles['button-card'],\n        styles[`button-card--${size}`],\n        focusStyles.focusable,\n        elevationStyles.elevationLow,\n        className,\n    );\n\n    const IconComponent = icon;\n\n    const media =\n        IconComponent != null ? (\n            <span\n                className={cn(styles['button-card__media'], styles['button-card__media--icon'])}\n                aria-hidden=\"true\"\n            >\n                <IconComponent aria-hidden=\"true\" />\n            </span>\n        ) : image ? (\n            <span className={cn(styles['button-card__media'], styles['button-card__media--image'])}>\n                {image}\n            </span>\n        ) : null;\n\n    const explicitTarget = isAnchor\n        ? (props as { target?: string }).target?.toLowerCase()\n        : undefined;\n    // The link opens a new tab when isExternal is set or the target is _blank.\n    const opensInNewTab = isExternal || explicitTarget === '_blank';\n    const Indicator = opensInNewTab ? Open : ChevronRight;\n\n    const content = (\n        <>\n            {media}\n            <span className={styles['button-card__content']}>\n                <span className={styles['button-card__text']}>\n                    <span className={styles['button-card__title']}>{title}</span>\n                    {subtitle != null && (\n                        <span className={styles['button-card__subtitle']}>{subtitle}</span>\n                    )}\n                </span>\n                <span className={styles['button-card__indicator']} aria-hidden=\"true\">\n                    <Indicator aria-hidden=\"true\" />\n                </span>\n            </span>\n            {opensInNewTab && externalLinkAriaLabel && (\n                <span className={styles['button-card__sr-only']}>\n                    {` (${externalLinkAriaLabel})`}\n                </span>\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const {\n            href,\n            renderLink,\n            target: targetProp,\n            rel,\n            disabled: _disabled,\n            ...safeAnchorProps\n        } = props as unknown as ComponentPropsWithRef<'a'> & {\n            href: string;\n            renderLink?: (props: ButtonCardLinkProps) => ReactNode;\n            disabled?: boolean;\n        };\n\n        // isExternal is authoritative and forces a new tab; an explicit _blank is preserved.\n        const target = isExternal ? '_blank' : targetProp;\n        const shouldHardenRel = target?.toLowerCase() === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            target,\n            rel: hardenedRel,\n            className: classes,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as unknown as ComponentPropsWithRef<'button'> & {\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            className={classes}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+require('./ButtonCard.css');
+"use strict";
+const styles = {
+  "button-card": "_button-card_14hpp_1",
+  "button-card--large": "_button-card--large_14hpp_37",
+  "button-card--small": "_button-card--small_14hpp_42",
+  "button-card__media": "_button-card__media_14hpp_59",
+  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
+  "button-card__media--image": "_button-card__media--image_14hpp_85",
+  "button-card__content": "_button-card__content_14hpp_100",
+  "button-card__text": "_button-card__text_14hpp_108",
+  "button-card__title": "_button-card__title_14hpp_117",
+  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
+  "button-card__indicator": "_button-card__indicator_14hpp_140",
+  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+};
+module.exports = styles;
+//# sourceMappingURL=ButtonCard.module.css.cjs.map

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

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

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

@@ -0,0 +1,19 @@
+import './ButtonCard.css';
+const styles = {
+  "button-card": "_button-card_14hpp_1",
+  "button-card--large": "_button-card--large_14hpp_37",
+  "button-card--small": "_button-card--small_14hpp_42",
+  "button-card__media": "_button-card__media_14hpp_59",
+  "button-card__media--icon": "_button-card__media--icon_14hpp_72",
+  "button-card__media--image": "_button-card__media--image_14hpp_85",
+  "button-card__content": "_button-card__content_14hpp_100",
+  "button-card__text": "_button-card__text_14hpp_108",
+  "button-card__title": "_button-card__title_14hpp_117",
+  "button-card__subtitle": "_button-card__subtitle_14hpp_118",
+  "button-card__indicator": "_button-card__indicator_14hpp_140",
+  "button-card__sr-only": "_button-card__sr-only_14hpp_156"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=ButtonCard.module.css.js.map

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

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

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

@@ -0,0 +1,103 @@
+import { ComponentPropsWithRef, ComponentType, ReactNode, SVGProps } from 'react';
+/**
+ * Size variant of the Button card.
+ *
+ * - `large`  — Large text title (Heading XS).
+ * - `medium` — Default title (Label LG Bold).
+ * - `small`  — Compact vertical layout (Label MD title).
+ */
+export type ButtonCardSize = 'large' | 'medium' | 'small';
+/** SVG icon component, for example `ChevronRight` from `@dnanpm/icons`. */
+export type ButtonCardIcon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface ButtonCardLinkProps extends ComponentPropsWithRef<'a'> {
+    readonly href: string;
+    readonly children: ReactNode;
+}
+interface ButtonCardBaseProps {
+    /**
+     * Primary title. Keep it short; the card clamps it as a layout fallback
+     * (two lines, or one line in the small size) and is not designed for long
+     * titles.
+     */
+    readonly title: ReactNode;
+    /**
+     * Optional subtitle. Keep it short; the card clamps it as a layout fallback
+     * (two lines, or one line in the small size) and is not designed for long
+     * subtitles.
+     */
+    readonly subtitle?: ReactNode;
+    /**
+     * Size variant controlling layout and typography.
+     * @default 'medium'
+     */
+    readonly size?: ButtonCardSize;
+    /**
+     * Marks the action as opening in a new tab/window: shows the external-link
+     * indicator icon and appends the hidden `externalLinkAriaLabel` hint. In link
+     * mode (`href`) it is authoritative and forces `target="_blank"` with a
+     * hardened `rel`, overriding any explicit `target`; in button mode the
+     * consumer opens the new window (for example `window.open`).
+     * @default false
+     */
+    readonly isExternal?: boolean;
+    /**
+     * Visually hidden hint appended to the accessible name when `isExternal` is
+     * true. Defaults to Finnish per the design system aria-label policy.
+     * @default 'avautuu uuteen välilehteen'
+     */
+    readonly externalLinkAriaLabel?: string;
+}
+/**
+ * Media is optional and mutually exclusive: provide either `icon` or `image`,
+ * never both. Omitting both renders the card without a media area.
+ */
+type ButtonCardMediaProps = {
+    /** Decorative SVG icon rendered in a neutral media box. */
+    readonly icon?: ButtonCardIcon;
+    readonly image?: never;
+} | {
+    readonly icon?: never;
+    /**
+     * Image slot rendered inside the DS-sized, clipped media box. The
+     * client owns the rendering, so an optimized image component (for
+     * example `next/image` or an app's own `OptimizedImage`) can be dropped
+     * in. The box is `position: relative`, so `next/image` `fill` works.
+     * Mark decorative images with an empty `alt`.
+     */
+    readonly image?: ReactNode;
+};
+export type ButtonCardAsButton = ButtonCardBaseProps & ButtonCardMediaProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonCardBaseProps | 'children' | 'disabled'> & {
+    /** When omitted, the card renders as a `<button>`. */
+    readonly href?: never;
+    readonly target?: never;
+    readonly rel?: never;
+    readonly renderLink?: never;
+    /** ButtonCard has no disabled state by design; render it conditionally instead. */
+    readonly disabled?: never;
+};
+export type ButtonCardAsAnchor = ButtonCardBaseProps & ButtonCardMediaProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonCardBaseProps | 'children'> & {
+    /** When provided, the card renders as an `<a>`. */
+    readonly href: string;
+    readonly disabled?: never;
+    readonly type?: never;
+    readonly name?: never;
+    /**
+     * Custom render function for the link element. Use this to integrate with
+     * client-side routing libraries like Next.js or React Router.
+     *
+     * @example
+     * // Next.js
+     * import Link from 'next/link';
+     * <ButtonCard href="/page" title="Open" renderLink={(props) => <Link {...props} />} />
+     */
+    readonly renderLink?: (props: ButtonCardLinkProps) => ReactNode;
+};
+/**
+ * Props for the Button card component.
+ *
+ * When `href` is provided the component renders as an `<a>` element;
+ * otherwise it renders as a `<button>`.
+ */
+export type ButtonCardProps = ButtonCardAsButton | ButtonCardAsAnchor;
+export {};
+//# sourceMappingURL=ButtonCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/ButtonCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvF;;;;;;GAMG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,2EAA2E;AAC3E,MAAM,MAAM,cAAc,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEpE,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IACnE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,mBAAmB;IACzB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAC3C;AAED;;;GAGG;AACH,KAAK,oBAAoB,GACnB;IACI,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,CAAC,EAAE,cAAc,CAAC;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CAC1B,GACD;IACI,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;OAMG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC9B,CAAC;AAER,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,GAAG,UAAU,CAAC,GAAG;IACzF,sDAAsD;IACtD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;IAC5B,mFAAmF;IACnF,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;CAC7B,CAAC;AAEN,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAChD,oBAAoB,GACpB,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,mBAAmB,GAAG,UAAU,CAAC,GAAG;IACvE,mDAAmD;IACnD,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;;;OAQG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,SAAS,CAAC;CACnE,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,eAAe,GAAG,kBAAkB,GAAG,kBAAkB,CAAC"}

package/dist/components/ButtonCard/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonCard } from './ButtonCard';
+export type { ButtonCardIcon, ButtonCardLinkProps, ButtonCardProps, ButtonCardSize, } from './ButtonCard.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ButtonCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACR,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,oBAAoB,CAAC"}

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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"}