@dnanpm/ui-components 0.2.0 → 0.4.0

package/dist/components/Hero/Hero.js

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import styles from "./Hero.module.css.js";
+import { headingClassByLevel } from "./Hero.utils.js";
+import { cn } from "../../utils/cn/cn.js";
+const Hero = ({
+  label,
+  heading,
+  description,
+  headingLevel = "h1",
+  Image,
+  imageProps,
+  LogoImage,
+  logoImageProps,
+  backgroundColor,
+  primaryCta,
+  secondaryCta,
+  className,
+  ref,
+  ...props
+}) => {
+  const headingId = useId();
+  const ResolvedImage = Image ?? (imageProps != null ? "img" : void 0);
+  const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? "img" : void 0);
+  const image = ResolvedImage != null ? /* @__PURE__ */ jsx(ResolvedImage, { ...imageProps }) : void 0;
+  const logoImage = ResolvedLogoImage != null ? /* @__PURE__ */ jsx(ResolvedLogoImage, { ...logoImageProps }) : void 0;
+  const hasActions = primaryCta != null || secondaryCta != null;
+  const backgroundStyle = image == null && backgroundColor != null ? { backgroundColor } : void 0;
+  const HeadingLevel = headingLevel;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...props,
+      className: cn(styles.hero, className),
+      "data-testid": props["data-testid"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.hero__background, style: backgroundStyle, children: [
+          image != null && /* @__PURE__ */ jsx("div", { className: styles.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
+          logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, "aria-hidden": "true", children: logoImage }),
+          /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.hero__content, children: /* @__PURE__ */ jsx("div", { className: cn(styles.hero__card, elevationStyles.elevationExtraHigh), children: /* @__PURE__ */ jsxs("div", { className: styles.hero__main, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.hero__text, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.hero__header, children: [
+              label != null && /* @__PURE__ */ jsx("div", { className: styles.hero__label, children: label }),
+              /* @__PURE__ */ jsx(
+                HeadingLevel,
+                {
+                  id: headingId,
+                  className: cn(
+                    styles.hero__heading,
+                    headingClassByLevel[headingLevel]
+                  ),
+                  children: heading
+                }
+              )
+            ] }),
+            description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
+          ] }),
+          hasActions && /* @__PURE__ */ jsxs("div", { className: styles.hero__actions, children: [
+            primaryCta != null && primaryCta,
+            secondaryCta != null && secondaryCta
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
+};
+export {
+  Hero
+};
+//# sourceMappingURL=Hero.js.map

package/dist/components/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByLevel } from './Hero.utils';\n\nexport const Hero = ({\n    label,\n    heading,\n    description,\n    headingLevel = 'h1',\n    Image,\n    imageProps,\n    LogoImage,\n    logoImageProps,\n    backgroundColor,\n    primaryCta,\n    secondaryCta,\n    className,\n    ref,\n    ...props\n}: HeroProps) => {\n    const headingId = useId();\n\n    const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n    const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n    const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n    const logoImage =\n        ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n\n    const hasActions = primaryCta != null || secondaryCta != null;\n    const backgroundStyle =\n        image == null && backgroundColor != null ? { backgroundColor } : undefined;\n    const HeadingLevel = headingLevel;\n\n    return (\n        <div\n            ref={ref}\n            {...props}\n            className={cn(styles.hero, className)}\n            data-testid={props['data-testid']}\n        >\n            <div className={styles.hero__background} style={backgroundStyle}>\n                {image != null && (\n                    <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n                        {image}\n                    </div>\n                )}\n                {logoImage != null && (\n                    <div className={styles.hero__logoImage} aria-hidden=\"true\">\n                        {logoImage}\n                    </div>\n                )}\n                <div className={styles.hero__overlay} aria-hidden=\"true\" />\n            </div>\n\n            <div className={styles.hero__content}>\n                <div className={cn(styles.hero__card, elevationStyles.elevationExtraHigh)}>\n                    <div className={styles.hero__main}>\n                        <div className={styles.hero__text}>\n                            <div className={styles.hero__header}>\n                                {label != null && <div className={styles.hero__label}>{label}</div>}\n                                <HeadingLevel\n                                    id={headingId}\n                                    className={cn(\n                                        styles.hero__heading,\n                                        headingClassByLevel[headingLevel],\n                                    )}\n                                >\n                                    {heading}\n                                </HeadingLevel>\n                            </div>\n                            {description != null && (\n                                <div className={cn(styles.hero__description, 'dds-prose')}>\n                                    {description}\n                                </div>\n                            )}\n                        </div>\n\n                        {hasActions && (\n                            <div className={styles.hero__actions}>\n                                {primaryCta != null && primaryCta}\n                                {secondaryCta != null && secondaryCta}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAE5E,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,eAAe;AAErB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,eAAa,MAAM,aAAa;AAAA,MAEhC,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,UAEH,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,4BAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,kBAAkB,GACpE,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,cAC7D;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW;AAAA,oBACP,OAAO;AAAA,oBACP,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,cAAc,QAAQ;AAAA,YACtB,gBAAgB,QAAQ;AAAA,UAAA,EAAA,CAC7B;AAAA,QAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,54 @@
+require('./Hero.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const hero = "_hero_905ff_1";
+const hero__background = "_hero__background_905ff_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_905ff_20";
+const hero__logoImage = "_hero__logoImage_905ff_42";
+const hero__overlay = "_hero__overlay_905ff_63";
+const hero__content = "_hero__content_905ff_75";
+const hero__card = "_hero__card_905ff_90";
+const hero__main = "_hero__main_905ff_101";
+const hero__text = "_hero__text_905ff_107";
+const hero__header = "_hero__header_905ff_113";
+const hero__label = "_hero__label_905ff_119";
+const hero__heading = "_hero__heading_905ff_123";
+const hero__description = "_hero__description_905ff_149";
+const hero__actions = "_hero__actions_905ff_164";
+const styles = {
+  hero,
+  hero__background,
+  hero__backgroundImageComponent,
+  hero__logoImage,
+  hero__overlay,
+  hero__content,
+  hero__card,
+  hero__main,
+  hero__text,
+  hero__header,
+  hero__label,
+  hero__heading,
+  "hero__heading--xl": "_hero__heading--xl_905ff_129",
+  "hero__heading--lg": "_hero__heading--lg_905ff_133",
+  "hero__heading--md": "_hero__heading--md_905ff_137",
+  "hero__heading--sm": "_hero__heading--sm_905ff_141",
+  "hero__heading--xs": "_hero__heading--xs_905ff_145",
+  hero__description,
+  hero__actions
+};
+exports.default = styles;
+exports.hero = hero;
+exports.hero__actions = hero__actions;
+exports.hero__background = hero__background;
+exports.hero__backgroundImageComponent = hero__backgroundImageComponent;
+exports.hero__card = hero__card;
+exports.hero__content = hero__content;
+exports.hero__description = hero__description;
+exports.hero__header = hero__header;
+exports.hero__heading = hero__heading;
+exports.hero__label = hero__label;
+exports.hero__logoImage = hero__logoImage;
+exports.hero__main = hero__main;
+exports.hero__overlay = hero__overlay;
+exports.hero__text = hero__text;
+//# sourceMappingURL=Hero.module.css.cjs.map

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

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

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

@@ -0,0 +1,54 @@
+import './Hero.css';
+const hero = "_hero_905ff_1";
+const hero__background = "_hero__background_905ff_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_905ff_20";
+const hero__logoImage = "_hero__logoImage_905ff_42";
+const hero__overlay = "_hero__overlay_905ff_63";
+const hero__content = "_hero__content_905ff_75";
+const hero__card = "_hero__card_905ff_90";
+const hero__main = "_hero__main_905ff_101";
+const hero__text = "_hero__text_905ff_107";
+const hero__header = "_hero__header_905ff_113";
+const hero__label = "_hero__label_905ff_119";
+const hero__heading = "_hero__heading_905ff_123";
+const hero__description = "_hero__description_905ff_149";
+const hero__actions = "_hero__actions_905ff_164";
+const styles = {
+  hero,
+  hero__background,
+  hero__backgroundImageComponent,
+  hero__logoImage,
+  hero__overlay,
+  hero__content,
+  hero__card,
+  hero__main,
+  hero__text,
+  hero__header,
+  hero__label,
+  hero__heading,
+  "hero__heading--xl": "_hero__heading--xl_905ff_129",
+  "hero__heading--lg": "_hero__heading--lg_905ff_133",
+  "hero__heading--md": "_hero__heading--md_905ff_137",
+  "hero__heading--sm": "_hero__heading--sm_905ff_141",
+  "hero__heading--xs": "_hero__heading--xs_905ff_145",
+  hero__description,
+  hero__actions
+};
+export {
+  styles as default,
+  hero,
+  hero__actions,
+  hero__background,
+  hero__backgroundImageComponent,
+  hero__card,
+  hero__content,
+  hero__description,
+  hero__header,
+  hero__heading,
+  hero__label,
+  hero__logoImage,
+  hero__main,
+  hero__overlay,
+  hero__text
+};
+//# sourceMappingURL=Hero.module.css.js.map

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

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

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

@@ -0,0 +1,55 @@
+import { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
+export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
+export type HeroCommonImageProps = Omit<ComponentPropsWithRef<'img'>, 'ref'>;
+export type HeroImageComponent = ElementType<HeroCommonImageProps>;
+export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Optional label element displayed above the heading.
+     */
+    readonly label?: ReactElement;
+    /**
+     * Main hero heading.
+     */
+    readonly heading: string;
+    /**
+     * Supporting descriptive text.
+     */
+    readonly description?: ReactNode;
+    /**
+     * Heading HTML level. Defaults to `h1`.
+     */
+    readonly headingLevel?: HeroHeadingLevel;
+    /**
+     * Decorative image component to use as the Hero background.
+     */
+    readonly Image?: HeroImageComponent;
+    /**
+     * Props for the background image component.
+     */
+    readonly imageProps?: HeroCommonImageProps;
+    /**
+     * Optional decorative logo image component for logo-style Hero variants.
+     */
+    readonly LogoImage?: HeroImageComponent;
+    /**
+     * Props for the logo image component.
+     */
+    readonly logoImageProps?: HeroCommonImageProps;
+    /**
+     * Background color used when no background `Image` is provided.
+     */
+    readonly backgroundColor?: CSSProperties['backgroundColor'];
+    /**
+     * Primary call-to-action element.
+     */
+    readonly primaryCta?: ReactElement;
+    /**
+     * Secondary call-to-action element.
+     */
+    readonly secondaryCta?: ReactElement;
+    /**
+     * Allows passing a `data-testid` string for testing purposes.
+     */
+    readonly 'data-testid'?: string;
+}
+//# sourceMappingURL=Hero.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC;CACnC"}

package/dist/components/Hero/Hero.utils.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Hero_module = require("./Hero.module.css.cjs");
+const headingClassByLevel = {
+  h1: Hero_module.default["hero__heading--xl"],
+  h2: Hero_module.default["hero__heading--lg"],
+  h3: Hero_module.default["hero__heading--md"],
+  h4: Hero_module.default["hero__heading--sm"],
+  h5: Hero_module.default["hero__heading--xs"]
+};
+exports.headingClassByLevel = headingClassByLevel;
+//# sourceMappingURL=Hero.utils.cjs.map

package/dist/components/Hero/Hero.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAClC;;"}

package/dist/components/Hero/Hero.utils.d.ts

@@ -0,0 +1,3 @@
+import { HeroHeadingLevel } from './Hero.types';
+export declare const headingClassByLevel: Record<HeroHeadingLevel, string>;
+//# sourceMappingURL=Hero.utils.d.ts.map

package/dist/components/Hero/Hero.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAMhE,CAAC"}

package/dist/components/Hero/Hero.utils.js

@@ -0,0 +1,12 @@
+import styles from "./Hero.module.css.js";
+const headingClassByLevel = {
+  h1: styles["hero__heading--xl"],
+  h2: styles["hero__heading--lg"],
+  h3: styles["hero__heading--md"],
+  h4: styles["hero__heading--sm"],
+  h5: styles["hero__heading--xs"]
+};
+export {
+  headingClassByLevel
+};
+//# sourceMappingURL=Hero.utils.js.map

package/dist/components/Hero/Hero.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAClC;"}

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

@@ -0,0 +1,3 @@
+export { Hero } from './Hero';
+export type { HeroProps, HeroHeadingLevel, HeroCommonImageProps, HeroImageComponent, } from './Hero.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,cAAc,CAAC"}

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