@dnanpm/ui-components 0.2.0 → 0.4.0

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

@@ -6,8 +6,11 @@ const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
+const Hero = require("./components/Hero/Hero.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;
@@ -15,8 +18,11 @@ exports.AccordionItem = AccordionItem.AccordionItem;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
 exports.ColorScheme = ColorScheme.ColorScheme;
+exports.Hero = Hero.Hero;
 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

@@ -3,16 +3,20 @@ export { AccordionItem } from './components/AccordionItem';
 export { Breadcrumb } from './components/Breadcrumb';
 export { Button } from './components/Button';
 export { ColorScheme } from './components/ColorScheme';
+export { Hero } from './components/Hero';
 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';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
 export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './components/Button';
 export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
+export type { HeroProps, HeroHeadingLevel, HeroCommonImageProps, HeroImageComponent, } from './components/Hero';
 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,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,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,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,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

@@ -4,8 +4,11 @@ import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button } from "./components/Button/Button.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
+import { Hero } from "./components/Hero/Hero.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 {
@@ -14,8 +17,11 @@ export {
   Breadcrumb,
   Button,
   ColorScheme,
+  Hero,
   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/elevation.module.css.cjs

@@ -2,9 +2,12 @@ require('./elevation.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const elevationLow = "_elevationLow_4gnft_6";
+const elevationExtraHigh = "_elevationExtraHigh_4gnft_16";
 const elevationStyles = {
-  elevationLow
+  elevationLow,
+  elevationExtraHigh
 };
 exports.default = elevationStyles;
+exports.elevationExtraHigh = elevationExtraHigh;
 exports.elevationLow = elevationLow;
 //# sourceMappingURL=elevation.module.css.cjs.map

package/dist/styles/utils/elevation.module.css.cjs.map

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

package/dist/styles/utils/elevation.module.css.js

@@ -1,10 +1,13 @@
 import './elevation.css';
 const elevationLow = "_elevationLow_4gnft_6";
+const elevationExtraHigh = "_elevationExtraHigh_4gnft_16";
 const elevationStyles = {
-  elevationLow
+  elevationLow,
+  elevationExtraHigh
 };
 export {
   elevationStyles as default,
+  elevationExtraHigh,
   elevationLow
 };
 //# sourceMappingURL=elevation.module.css.js.map

package/dist/styles/utils/elevation.module.css.js.map

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

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.4.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",