@dnanpm/ui-components 0.2.0 → 0.3.0

package/dist/components/Accordion/Accordion.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Accordion Component Styles
  *
  * Layout wrapper that spaces AccordionItem children evenly.

package/dist/components/AccordionItem/AccordionItem.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * AccordionItem Component Styles
  *
  * Uses native <details> element for expand/collapse behavior.

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Breadcrumb Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).

package/dist/components/Button/Button.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {._button_188fd_1 {
+@layer dds-components {._button_1nsz1_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -15,21 +15,21 @@
         border-color 0.2s ease-in-out;
 }
 
-._button--full-width_188fd_18 {
+._button--full-width_1nsz1_18 {
     width: 100%;
     min-width: 0;
 }
 
 /* ─── Sizes ─── */
 
-._button--normal_188fd_25 {
+._button--normal_1nsz1_25 {
     font: var(--typography-label-lg-bold);
     height: 40px;
     min-width: 128px;
     padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
 }
 
-._button--small_188fd_32 {
+._button--small_1nsz1_32 {
     font: var(--typography-label-md-bold);
     height: 32px;
     min-width: 100px;
@@ -38,85 +38,91 @@
 
 /* ─── Primary variant ─── */
 
-._button--primary_188fd_41 {
+._button--primary_1nsz1_41 {
     background-color: var(--color-semantic-interactive-primary-default);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:hover {
+._button--primary_1nsz1_41:hover {
     background-color: var(--color-semantic-interactive-primary-hover);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:active {
+._button--primary_1nsz1_41:active {
     background-color: var(--color-semantic-interactive-primary-active);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:focus-visible {
+._button--primary_1nsz1_41:focus-visible {
     background-color: var(--color-semantic-interactive-primary-focus);
+    color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Secondary variant ─── */
 
-._button--secondary_188fd_60 {
+._button--secondary_1nsz1_63 {
     background-color: transparent;
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--secondary_188fd_60:hover {
+._button--secondary_1nsz1_63:hover {
     background-color: var(--color-semantic-interactive-secondary-hover);
     border-color: var(--color-semantic-interactive-secondary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_188fd_60:active {
+._button--secondary_1nsz1_63:active {
     background-color: var(--color-semantic-interactive-secondary-active);
     border-color: var(--color-semantic-interactive-secondary-active);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_188fd_60:focus-visible {
+._button--secondary_1nsz1_63:focus-visible {
     background-color: var(--color-semantic-interactive-secondary-focus);
     color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Tertiary variant ─── */
 
-._button--tertiary_188fd_85 {
+._button--tertiary_1nsz1_88 {
     background-color: var(--color-semantic-interactive-neutral-default);
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:hover {
+._button--tertiary_1nsz1_88:hover {
     background-color: var(--color-semantic-interactive-neutral-hover);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:active {
+._button--tertiary_1nsz1_88:active {
     background-color: var(--color-semantic-interactive-neutral-active);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:focus-visible {
+._button--tertiary_1nsz1_88:focus-visible {
     background-color: var(--color-semantic-interactive-neutral-focus);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
 /* ─── Disabled state ─── */
 
-._button--disabled_188fd_105 {
+._button--disabled_1nsz1_111 {
     pointer-events: none;
 }
 
-._button--primary_188fd_41._button--disabled_188fd_105 {
+._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
     background-color: var(--color-semantic-interactive-primary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--secondary_188fd_60._button--disabled_188fd_105 {
+._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
     border-color: var(--color-semantic-interactive-secondary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--tertiary_188fd_85._button--disabled_188fd_105 {
+._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
     background-color: var(--color-semantic-interactive-neutral-disabled);
     color: var(--color-semantic-foreground-muted);
 }
@@ -125,38 +131,38 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._button--primary_188fd_41._button--disabled_188fd_105 {
+    ._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--secondary_188fd_60 {
+    ._button--secondary_1nsz1_63 {
         border-color: var(--color-semantic-interactive-inverse-default);
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._button--secondary_188fd_60:hover {
+    ._button--secondary_1nsz1_63:hover {
         background-color: var(--color-semantic-interactive-inverse-hover);
         border-color: var(--color-semantic-interactive-inverse-hover);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60:active {
+    ._button--secondary_1nsz1_63:active {
         background-color: var(--color-semantic-interactive-inverse-active);
         border-color: var(--color-semantic-interactive-inverse-active);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60:focus-visible {
+    ._button--secondary_1nsz1_63:focus-visible {
         background-color: var(--color-semantic-interactive-inverse-focus);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60._button--disabled_188fd_105 {
+    ._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
         border-color: var(--color-semantic-interactive-inverse-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--tertiary_188fd_85._button--disabled_188fd_105 {
+    ._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
         border-color: var(--color-semantic-interactive-neutral-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
@@ -164,11 +170,11 @@
 
 /* ─── Loading state ─── */
 
-._button--loading_188fd_167 {
+._button--loading_1nsz1_173 {
     pointer-events: none;
 }
 
-._button__content_188fd_171 {
+._button__content_1nsz1_177 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -176,7 +182,7 @@
     white-space: nowrap;
 }
 
-._button__spinner_188fd_179 {
+._button__spinner_1nsz1_185 {
     flex: 0 0 auto;
 }
 }

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

@@ -1,19 +1,19 @@
 require('./Button.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_188fd_1";
-const button__content = "_button__content_188fd_171";
-const button__spinner = "_button__spinner_188fd_179";
+const button = "_button_1nsz1_1";
+const button__content = "_button__content_1nsz1_177";
+const button__spinner = "_button__spinner_1nsz1_185";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_188fd_18",
-  "button--normal": "_button--normal_188fd_25",
-  "button--small": "_button--small_188fd_32",
-  "button--primary": "_button--primary_188fd_41",
-  "button--secondary": "_button--secondary_188fd_60",
-  "button--tertiary": "_button--tertiary_188fd_85",
-  "button--disabled": "_button--disabled_188fd_105",
-  "button--loading": "_button--loading_188fd_167",
+  "button--full-width": "_button--full-width_1nsz1_18",
+  "button--normal": "_button--normal_1nsz1_25",
+  "button--small": "_button--small_1nsz1_32",
+  "button--primary": "_button--primary_1nsz1_41",
+  "button--secondary": "_button--secondary_1nsz1_63",
+  "button--tertiary": "_button--tertiary_1nsz1_88",
+  "button--disabled": "_button--disabled_1nsz1_111",
+  "button--loading": "_button--loading_1nsz1_173",
   button__content,
   button__spinner
 };

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

@@ -1,17 +1,17 @@
 import './Button.css';
-const button = "_button_188fd_1";
-const button__content = "_button__content_188fd_171";
-const button__spinner = "_button__spinner_188fd_179";
+const button = "_button_1nsz1_1";
+const button__content = "_button__content_1nsz1_177";
+const button__spinner = "_button__spinner_1nsz1_185";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_188fd_18",
-  "button--normal": "_button--normal_188fd_25",
-  "button--small": "_button--small_188fd_32",
-  "button--primary": "_button--primary_188fd_41",
-  "button--secondary": "_button--secondary_188fd_60",
-  "button--tertiary": "_button--tertiary_188fd_85",
-  "button--disabled": "_button--disabled_188fd_105",
-  "button--loading": "_button--loading_188fd_167",
+  "button--full-width": "_button--full-width_1nsz1_18",
+  "button--normal": "_button--normal_1nsz1_25",
+  "button--small": "_button--small_1nsz1_32",
+  "button--primary": "_button--primary_1nsz1_41",
+  "button--secondary": "_button--secondary_1nsz1_63",
+  "button--tertiary": "_button--tertiary_1nsz1_88",
+  "button--disabled": "_button--disabled_1nsz1_111",
+  "button--loading": "_button--loading_1nsz1_173",
   button__content,
   button__spinner
 };

package/dist/components/Label/Label.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {._label_1bsev_1 {
+@layer dds-components {._label_1bsev_1 {
     display: inline-block;
     max-width: 100%;
     padding: var(--spacing-ui-xxs) var(--spacing-ui-lg);

package/dist/components/Notification/Notification.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Notification Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).

package/dist/components/Pictograph/Pictograph.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const Pictograph_module = require("./Pictograph.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Pictograph = ({
+  iconSize = "small",
+  alignment = "center",
+  mode = "horizontal",
+  columns = 3,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn(
+        Pictograph_module.default.pictograph,
+        Pictograph_module.default[`pictograph--${mode}`],
+        alignment === "center" && Pictograph_module.default["pictograph--centered"],
+        Pictograph_module.default[`pictograph--icon-${iconSize}`],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn.cn(Pictograph_module.default.pictograph__list, Pictograph_module.default[`pictograph__list--${columns}`]), children })
+    }
+  );
+};
+exports.Pictograph = Pictograph;
+//# sourceMappingURL=Pictograph.cjs.map

package/dist/components/Pictograph/Pictograph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.cjs","sources":["../../../src/components/Pictograph/Pictograph.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Pictograph.module.css';\nimport type { PictographProps } from './Pictograph.types';\n\nexport const Pictograph = ({\n    iconSize = 'small',\n    alignment = 'center',\n    mode = 'horizontal',\n    columns = 3,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographProps) => {\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                styles.pictograph,\n                styles[`pictograph--${mode}`],\n                alignment === 'center' && styles['pictograph--centered'],\n                styles[`pictograph--icon-${iconSize}`],\n                className,\n            )}\n            {...props}\n        >\n            <ul className={cn(styles.pictograph__list, styles[`pictograph__list--${columns}`])}>\n                {children}\n            </ul>\n        </div>\n    );\n};\n"],"names":["jsx","cn","styles"],"mappings":";;;;;AAIO,MAAM,aAAa,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,kBAAAA,QAAO;AAAA,QACPA,kBAAAA,QAAO,eAAe,IAAI,EAAE;AAAA,QAC5B,cAAc,YAAYA,kBAAAA,QAAO,sBAAsB;AAAA,QACvDA,kBAAAA,QAAO,oBAAoB,QAAQ,EAAE;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAAF,2BAAAA,IAAC,MAAA,EAAG,WAAWC,GAAAA,GAAGC,kBAAAA,QAAO,kBAAkBA,kBAAAA,QAAO,qBAAqB,OAAO,EAAE,CAAC,GAC5E,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Pictograph/Pictograph.css

@@ -0,0 +1,190 @@
+@layer dds-components {/**
+ * Pictograph Component Styles
+ *
+ * Grid-based layout for pictograph items with responsive columns,
+ * alignment variants, and dark color scheme support.
+ *
+ * Uses container queries for responsive behavior and CSS custom properties
+ * to communicate layout settings to child items.
+ *
+ * Container breakpoints (matching reference):
+ *   440px  — large mobile
+ *   688px  — tablet
+ *   944px  — desktop
+ */
+
+._pictograph_11vg9_16 {
+    --pictograph-icon-size: 40px;
+    --pictograph-direction: row;
+    --pictograph-align: flex-start;
+    --pictograph-text-align: left;
+    --pictograph-item-gap: 20px;
+    --pictograph-text-color: inherit;
+    --pictograph-icon-color: var(--color-semantic-foreground-primary-strong);
+
+    margin: 0;
+    container-name: pictograph;
+    container-type: inline-size;
+}
+
+/* ─── Mode: vertical (icon above text) ─── */
+
+._pictograph--vertical_11vg9_32 {
+    --pictograph-direction: column;
+    --pictograph-item-gap: 10px;
+}
+
+/* ─── List layout ─── */
+
+._pictograph__list_11vg9_39 {
+    display: grid;
+    gap: 30px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* ─── Column variants (container queries) ─── */
+
+@container pictograph (min-width: 440px) {
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph__list--2_11vg9_56,
+    ._pictograph__list--3_11vg9_57,
+    ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@container pictograph (min-width: 944px) {
+    ._pictograph__list--3_11vg9_57 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+/* ─── Mode: horizontal (icon beside text) ─── */
+
+._pictograph--horizontal_11vg9_83 {
+    --pictograph-direction: row;
+    --pictograph-item-gap: 20px;
+}
+
+._pictograph--horizontal_11vg9_83 ._pictograph__list_11vg9_39 {
+    gap: 20px 30px;
+}
+
+/* Horizontal mode: column overrides */
+._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
+._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+    grid-template-columns: 1fr;
+}
+
+@container pictograph (min-width: 440px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58,
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@container pictograph (min-width: 944px) {
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(4, 1fr);
+    }
+
+    ._pictograph--horizontal_11vg9_83 ._pictograph__list--5_11vg9_50 {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
+/* ─── Alignment: centered ─── */
+
+._pictograph--centered_11vg9_123 {
+    --pictograph-align: center;
+}
+
+._pictograph--vertical_11vg9_32._pictograph--centered_11vg9_123 {
+    --pictograph-text-align: center;
+}
+
+/* ─── Icon size: small ─── */
+
+._pictograph--icon-small_11vg9_133 {
+    --pictograph-icon-size: 40px;
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--icon-small_11vg9_133 {
+        --pictograph-icon-size: 52px;
+    }
+}
+
+/* ─── Icon size: large ─── */
+
+._pictograph--icon-large_11vg9_145 {
+    --pictograph-icon-size: 52px;
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--icon-large_11vg9_145 {
+        --pictograph-icon-size: 72px;
+    }
+}
+
+/* ─── Vertical + short text: items are compact, allow more columns earlier ─── */
+/* Note: :has(li > div:last-child > p:only-child) depends on PictographItem DOM structure:
+   <li> → <span>(icon) + <div>(text). If PictographItem markup changes, update these selectors. */
+
+@container pictograph (min-width: 440px) {
+    ._pictograph--vertical_11vg9_32:has(li > div:last-child > p:only-child) ._pictograph__list--4_11vg9_58 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+/* ─── Horizontal + long text: stack items vertically at small sizes ─── */
+
+@container pictograph (max-width: 439px) {
+    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
+        --pictograph-direction: column;
+        --pictograph-align: flex-start;
+        --pictograph-item-gap: 10px;
+    }
+}
+
+@container pictograph (min-width: 688px) {
+    ._pictograph--horizontal_11vg9_83:not(:has(li > div:last-child > p:only-child)) ._pictograph__list_11vg9_39 {
+        gap: 30px;
+    }
+}
+
+/* ─── Dark color scheme ─── */
+/* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
+
+@scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
+    ._pictograph_11vg9_16 {
+        --pictograph-text-color: var(--color-semantic-foreground-inverse);
+        --pictograph-icon-color: var(--color-semantic-foreground-inverse);
+    }
+}
+}

package/dist/components/Pictograph/Pictograph.d.ts

@@ -0,0 +1,3 @@
+import { PictographProps } from './Pictograph.types';
+export declare const Pictograph: ({ iconSize, alignment, mode, columns, children, className, ref, ...props }: PictographProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Pictograph.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/Pictograph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1D,eAAO,MAAM,UAAU,GAAI,4EASxB,eAAe,4CAkBjB,CAAC"}

package/dist/components/Pictograph/Pictograph.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import styles from "./Pictograph.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Pictograph = ({
+  iconSize = "small",
+  alignment = "center",
+  mode = "horizontal",
+  columns = 3,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        styles.pictograph,
+        styles[`pictograph--${mode}`],
+        alignment === "center" && styles["pictograph--centered"],
+        styles[`pictograph--icon-${iconSize}`],
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("ul", { className: cn(styles.pictograph__list, styles[`pictograph__list--${columns}`]), children })
+    }
+  );
+};
+export {
+  Pictograph
+};
+//# sourceMappingURL=Pictograph.js.map

package/dist/components/Pictograph/Pictograph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.js","sources":["../../../src/components/Pictograph/Pictograph.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './Pictograph.module.css';\nimport type { PictographProps } from './Pictograph.types';\n\nexport const Pictograph = ({\n    iconSize = 'small',\n    alignment = 'center',\n    mode = 'horizontal',\n    columns = 3,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographProps) => {\n    return (\n        <div\n            ref={ref}\n            className={cn(\n                styles.pictograph,\n                styles[`pictograph--${mode}`],\n                alignment === 'center' && styles['pictograph--centered'],\n                styles[`pictograph--icon-${iconSize}`],\n                className,\n            )}\n            {...props}\n        >\n            <ul className={cn(styles.pictograph__list, styles[`pictograph__list--${columns}`])}>\n                {children}\n            </ul>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,aAAa,CAAC;AAAA,EACvB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP,OAAO;AAAA,QACP,OAAO,eAAe,IAAI,EAAE;AAAA,QAC5B,cAAc,YAAY,OAAO,sBAAsB;AAAA,QACvD,OAAO,oBAAoB,QAAQ,EAAE;AAAA,QACrC;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAA,oBAAC,MAAA,EAAG,WAAW,GAAG,OAAO,kBAAkB,OAAO,qBAAqB,OAAO,EAAE,CAAC,GAC5E,SAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,22 @@
+require('./Pictograph.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const pictograph = "_pictograph_11vg9_16";
+const pictograph__list = "_pictograph__list_11vg9_39";
+const styles = {
+  pictograph,
+  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  pictograph__list,
+  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
+  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
+  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
+  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
+  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
+  "pictograph--centered": "_pictograph--centered_11vg9_123",
+  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
+  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+};
+exports.default = styles;
+exports.pictograph = pictograph;
+exports.pictograph__list = pictograph__list;
+//# sourceMappingURL=Pictograph.module.css.cjs.map

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

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

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

@@ -0,0 +1,22 @@
+import './Pictograph.css';
+const pictograph = "_pictograph_11vg9_16";
+const pictograph__list = "_pictograph__list_11vg9_39";
+const styles = {
+  pictograph,
+  "pictograph--vertical": "_pictograph--vertical_11vg9_32",
+  pictograph__list,
+  "pictograph__list--5": "_pictograph__list--5_11vg9_50",
+  "pictograph__list--2": "_pictograph__list--2_11vg9_56",
+  "pictograph__list--3": "_pictograph__list--3_11vg9_57",
+  "pictograph__list--4": "_pictograph__list--4_11vg9_58",
+  "pictograph--horizontal": "_pictograph--horizontal_11vg9_83",
+  "pictograph--centered": "_pictograph--centered_11vg9_123",
+  "pictograph--icon-small": "_pictograph--icon-small_11vg9_133",
+  "pictograph--icon-large": "_pictograph--icon-large_11vg9_145"
+};
+export {
+  styles as default,
+  pictograph,
+  pictograph__list
+};
+//# sourceMappingURL=Pictograph.module.css.js.map

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

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

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

@@ -0,0 +1,46 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface PictographProps extends ComponentPropsWithRef<'div'> {
+    /**
+     * Size of the icon area in each item.
+     * - `small`: 40px (52px on tablet and above)
+     * - `large`: 52px (72px on tablet and above)
+     * @default 'small'
+     */
+    readonly iconSize?: 'small' | 'large';
+    /**
+     * Alignment of icon and text within items.
+     * - In horizontal mode: controls vertical alignment between icon and text
+     *   (`start` = tops aligned, `center` = vertically centered). Text is always left-aligned.
+     * - In vertical mode: controls horizontal alignment of icon and text
+     *   (`start` = left-aligned, `center` = centered with centered text).
+     * @default 'center'
+     */
+    readonly alignment?: 'start' | 'center';
+    /**
+     * Layout direction of icon relative to text within each item.
+     * - `horizontal`: icon and text side by side
+     * - `vertical`: icon above text
+     * @default 'horizontal'
+     */
+    readonly mode?: 'horizontal' | 'vertical';
+    /**
+     * Number of columns in the grid layout (1–5) in desktop view. Columns are automatically adjusted based on available layout width.
+     * @default 3
+     */
+    readonly columns?: 1 | 2 | 3 | 4 | 5;
+    /**
+     * PictographItem elements to render.
+     */
+    readonly children: ReactNode;
+}
+export interface PictographItemProps extends ComponentPropsWithRef<'li'> {
+    /**
+     * SVG icon element. Rendered as decorative with aria-hidden="true".
+     */
+    readonly icon: ReactNode;
+    /**
+     * Text content for the pictograph item.
+     */
+    readonly children: ReactNode;
+}
+//# sourceMappingURL=Pictograph.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pictograph.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/Pictograph.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IACjE;;;;;OAKG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACtC;;;;;;;OAOG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxC;;;;;OAKG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,CAAC,IAAI,CAAC;IACpE;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC"}

package/dist/components/Pictograph/PictographItem.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const PictographItem_module = require("./PictographItem.module.css.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const PictographItem = ({
+  icon,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { ref, className: cn.cn(PictographItem_module["pictograph-item"], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: PictographItem_module["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: PictographItem_module["pictograph-item__text"], children })
+  ] });
+};
+exports.PictographItem = PictographItem;
+//# sourceMappingURL=PictographItem.cjs.map

package/dist/components/Pictograph/PictographItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.cjs","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":["jsxs","cn","styles","jsx"],"mappings":";;;;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACIA,2BAAAA,KAAC,MAAA,EAAG,KAAU,WAAWC,GAAAA,GAAGC,sBAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAAC,2BAAAA,IAAC,UAAK,WAAWD,sBAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,mCACC,OAAA,EAAI,WAAWA,sBAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;;"}

package/dist/components/Pictograph/PictographItem.css

@@ -0,0 +1,63 @@
+@layer dds-components {/**
+ * PictographItem Component Styles
+ *
+ * Individual pictograph item containing an icon and text area.
+ * Reads CSS custom properties from the parent Pictograph component
+ * for direction, alignment, icon sizing, and gap.
+ */
+
+._pictograph-item_1udd7_9 {
+    display: flex;
+    flex-direction: var(--pictograph-direction);
+    align-items: var(--pictograph-align);
+    gap: var(--pictograph-item-gap);
+    margin: 0;
+}
+
+._pictograph-item__icon_1udd7_17 {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pictograph-icon-color);
+    width: var(--pictograph-icon-size);
+    height: var(--pictograph-icon-size);
+}
+
+._pictograph-item__icon_1udd7_17 svg {
+    fill: currentColor;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+}
+
+._pictograph-item__text_1udd7_35 {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    text-align: var(--pictograph-text-align);
+    text-wrap: balance;
+    color: var(--pictograph-text-color);
+}
+
+._pictograph-item__text_1udd7_35 > *:not(dialog) {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+/* Single paragraph gets larger font */
+._pictograph-item__text_1udd7_35 > p:only-child {
+    font: var(--typography-body-lg);
+    margin-bottom: 0;
+}
+
+/* Headings inside text area */
+._pictograph-item__text_1udd7_35 h1,
+._pictograph-item__text_1udd7_35 h2,
+._pictograph-item__text_1udd7_35 h3,
+._pictograph-item__text_1udd7_35 h4,
+._pictograph-item__text_1udd7_35 h5 {
+    font: var(--typography-heading-xs);
+}
+}

package/dist/components/Pictograph/PictographItem.d.ts

@@ -0,0 +1,3 @@
+import { PictographItemProps } from './Pictograph.types';
+export declare const PictographItem: ({ icon, children, className, ref, ...props }: PictographItemProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=PictographItem.d.ts.map

package/dist/components/Pictograph/PictographItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,cAAc,GAAI,8CAM5B,mBAAmB,4CASrB,CAAC"}

package/dist/components/Pictograph/PictographItem.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import styles from "./PictographItem.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const PictographItem = ({
+  icon,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs("li", { ref, className: cn(styles["pictograph-item"], className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: styles["pictograph-item__icon"], "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("div", { className: styles["pictograph-item__text"], children })
+  ] });
+};
+export {
+  PictographItem
+};
+//# sourceMappingURL=PictographItem.js.map

package/dist/components/Pictograph/PictographItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PictographItem.js","sources":["../../../src/components/Pictograph/PictographItem.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport styles from './PictographItem.module.css';\nimport type { PictographItemProps } from './Pictograph.types';\n\nexport const PictographItem = ({\n    icon,\n    children,\n    className,\n    ref,\n    ...props\n}: PictographItemProps) => {\n    return (\n        <li ref={ref} className={cn(styles['pictograph-item'], className)} {...props}>\n            <span className={styles['pictograph-item__icon']} aria-hidden=\"true\">\n                {icon}\n            </span>\n            <div className={styles['pictograph-item__text']}>{children}</div>\n        </li>\n    );\n};\n"],"names":[],"mappings":";;;AAIO,MAAM,iBAAiB,CAAC;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACI,qBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,OAAO,iBAAiB,GAAG,SAAS,GAAI,GAAG,OACnE,UAAA;AAAA,IAAA,oBAAC,UAAK,WAAW,OAAO,uBAAuB,GAAG,eAAY,QACzD,UAAA,MACL;AAAA,wBACC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAAI,SAAA,CAAS;AAAA,EAAA,GAC/D;AAER;"}

package/dist/components/Pictograph/PictographItem.module.css.cjs

@@ -0,0 +1,9 @@
+require('./PictographItem.css');
+"use strict";
+const styles = {
+  "pictograph-item": "_pictograph-item_1udd7_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
+  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+};
+module.exports = styles;
+//# sourceMappingURL=PictographItem.module.css.cjs.map

package/dist/components/Pictograph/PictographItem.module.css.cjs.map

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

package/dist/components/Pictograph/PictographItem.module.css.js

@@ -0,0 +1,10 @@
+import './PictographItem.css';
+const styles = {
+  "pictograph-item": "_pictograph-item_1udd7_9",
+  "pictograph-item__icon": "_pictograph-item__icon_1udd7_17",
+  "pictograph-item__text": "_pictograph-item__text_1udd7_35"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=PictographItem.module.css.js.map

package/dist/components/Pictograph/PictographItem.module.css.js.map

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

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

@@ -0,0 +1,4 @@
+export { Pictograph } from './Pictograph';
+export { PictographItem } from './PictographItem';
+export type { PictographItemProps, PictographProps } from './Pictograph.types';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Spinner/Spinner.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/* ─────────────────────────────────────────────────────────────
+@layer dds-components {/* ─────────────────────────────────────────────────────────────
    Spinner — base
    ───────────────────────────────────────────────────────────── */
 

package/dist/index.cjs

@@ -8,6 +8,8 @@ const Button = require("./components/Button/Button.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
 const Label = require("./components/Label/Label.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
+const Pictograph = require("./components/Pictograph/Pictograph.cjs");
+const PictographItem = require("./components/Pictograph/PictographItem.cjs");
 const Spinner = require("./components/Spinner/Spinner.cjs");
 const cn = require("./utils/cn/cn.cjs");
 exports.Accordion = Accordion.Accordion;
@@ -17,6 +19,8 @@ exports.Button = Button.Button;
 exports.ColorScheme = ColorScheme.ColorScheme;
 exports.Label = Label.Label;
 exports.Notification = Notification.Notification;
+exports.Pictograph = Pictograph.Pictograph;
+exports.PictographItem = PictographItem.PictographItem;
 exports.Spinner = Spinner.Spinner;
 exports.cn = cn.cn;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { Button } from './components/Button';
 export { ColorScheme } from './components/ColorScheme';
 export { Notification } from './components/Notification';
 export { Label } from './components/Label';
+export { Pictograph, PictographItem } from './components/Pictograph';
 export { Spinner } from './components/Spinner';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
@@ -13,6 +14,7 @@ export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './
 export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
 export type { NotificationProps, NotificationVariant } from './components/Notification';
 export type { LabelProps, LabelVariant } from './components/Label';
+export type { PictographItemProps, PictographProps } from './components/Pictograph';
 export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEpF,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -6,6 +6,8 @@ import { Button } from "./components/Button/Button.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
 import { Label } from "./components/Label/Label.js";
 import { Notification } from "./components/Notification/Notification.js";
+import { Pictograph } from "./components/Pictograph/Pictograph.js";
+import { PictographItem } from "./components/Pictograph/PictographItem.js";
 import { Spinner } from "./components/Spinner/Spinner.js";
 import { cn } from "./utils/cn/cn.js";
 export {
@@ -16,6 +18,8 @@ export {
   ColorScheme,
   Label,
   Notification,
+  Pictograph,
+  PictographItem,
   Spinner,
   cn
 };

package/dist/index.js.map

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

package/dist/styles/utils/elevation.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/* 
+@layer dds-components {/* 
  * TODO: Replace local variables (_elevation-semantic-low, high and extra-high) 
  * with official design tokens once elevation tokens are added to the design token set
  */

package/dist/styles/utils/focus.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {._focusable_ikczm_1 {
+@layer dds-components {._focusable_ikczm_1 {
     /* Marker class for shared focus treatment */
 }
 

package/dist/styles/utils/text-decoration.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {._underlineLink_1nw3t_1 {
+@layer dds-components {._underlineLink_1nw3t_1 {
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-skip-ink: auto;

package/dist/styles.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {
+@layer dds-base {
 
 /**
  * Do not edit directly, this file was auto-generated.
@@ -33,6 +33,7 @@
   --color-semantic-surface-secondary-strong: #551c3e;
   --color-semantic-surface-secondary-mid: #69214c;
   --color-semantic-surface-secondary-soft: #792a59;
+  --color-semantic-surface-base-inverse: #121212;
   --color-semantic-border-neutral-mid: #d4d2ce;
   --color-semantic-border-neutral-soft: #e7e5e3;
   --color-semantic-border-neutral-base: #efeeed;
@@ -84,6 +85,11 @@
   --color-semantic-interactive-inverse-focus: #ffffff;
   --color-semantic-interactive-inverse-active: rgba(255, 255, 255, 0.9);
   --color-semantic-interactive-inverse-disabled: rgba(255, 255, 255, 0.3);
+  --color-semantic-interactive-auxiliary-default: #ffdbad;
+  --color-semantic-interactive-auxiliary-hover: #ffb557;
+  --color-semantic-interactive-auxiliary-focus: #ffb557;
+  --color-semantic-interactive-auxiliary-active: #ffdbad;
+  --color-semantic-interactive-auxiliary-disabled: rgba(255, 219, 173, 0.3);
   --spacing-ui-md: 16px;
   --spacing-ui-lg: 20px;
   --spacing-ui-sm: 12px;
@@ -113,13 +119,13 @@
   --borderwidth-semantic-xl: 5px;
   --borderwidth-semantic-xxl: 6px;
   --borderwidth-semantic-sm: 2px;
-  --typography-font-size-heading-xxxl: 64px;
   --typography-font-size-heading-xxl: 48px;
-  --typography-font-size-heading-xl: 36px;
-  --typography-font-size-heading-lg: 28px;
-  --typography-font-size-heading-md: 24px;
-  --typography-font-size-heading-sm: 20px;
-  --typography-font-size-heading-xs: 18px;
+  --typography-font-size-heading-xl: 40px;
+  --typography-font-size-heading-lg: 34px;
+  --typography-font-size-heading-md: 28px;
+  --typography-font-size-heading-sm: 24px;
+  --typography-font-size-heading-xs: 20px;
+  --typography-font-size-heading-xxs: 18px;
   --typography-font-size-text-lg: 20px;
   --typography-font-size-text-md: 16px;
   --typography-font-size-text-sm: 14px;
@@ -141,7 +147,7 @@
 }
 }
 
-@layer dna-design-system {
+@layer dds-base {
 
 *,
 *::before,
@@ -173,7 +179,7 @@ video {
 }
 }
 
-@layer dna-design-system {
+@layer dds-base {
 
 /* ==========================================================================
    Typography shorthand variables
@@ -190,7 +196,8 @@ video {
    ========================================================================== */
 
 :root {
-    /* TODO (DDS-14): Remove these two overrides once the design-tokens font-family tokens include fallbacks. */
+    /* Font-family with fallbacks — Figma tokens only contain the primary font name,
+       so we override here to add the full fallback stack for CSS. */
     --typography-font-family-heading: 'DNA Heading', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     --typography-font-family-text: 'DNA Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
@@ -218,12 +225,18 @@ video {
         var(--typography-font-family-text);
 
     /* Body */
-    --typography-body-lg: var(--typography-font-weight-medium)
+    --typography-body-lg: var(--typography-font-weight-regular)
+        clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
+    --typography-body-lg-medium: var(--typography-font-weight-medium)
         clamp(1.125rem, 1.083rem + 0.208cqw, 1.25rem)/var(--typography-line-height-lg)
         var(--typography-font-family-text);
     --typography-body-md: var(--typography-font-weight-regular)
         var(--typography-font-size-text-md)/var(--typography-line-height-lg)
         var(--typography-font-family-text);
+    --typography-body-md-medium: var(--typography-font-weight-medium)
+        var(--typography-font-size-text-md)/var(--typography-line-height-lg)
+        var(--typography-font-family-text);
     --typography-body-md-bold: var(--typography-font-weight-bold)
         var(--typography-font-size-text-md)/var(--typography-line-height-lg)
         var(--typography-font-family-text);
@@ -321,16 +334,19 @@ small {
 /*
  * Design decision (ADR-003): base links are color-driven, not underlined.
  * Long-form content uses .dds-prose which adds underline + external link icon.
+ *
+ * :where() gives these base styles zero specificity so component classes
+ * (e.g. Button rendered as <a>) always win without needing !important.
  */
-a {
+:where(a) {
     color: var(--color-semantic-foreground-link);
     text-decoration: none;
     cursor: pointer;
     transition: color 0.2s ease-in-out;
-    &:hover {
-        color: var(--color-semantic-foreground-link-hover);
-        text-decoration: none;
-    }
+}
+:where(a:hover) {
+    color: var(--color-semantic-foreground-link-hover);
+    text-decoration: none;
 }
 
 ul {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.2.0",
+    "version": "0.3.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",