@dnanpm/ui-components 0.4.0 → 0.6.0

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set((rel ?? '').split(/\\s+/).filter(Boolean));\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAU;AAAA,IACZ,OAAO;AAAA,IACP,OAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClC,OAAO,WAAW,IAAI,EAAE;AAAA,IACxB,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACF,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAkB,UAAS;AAAA,IAClD,WACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI,KAAK,OAAO,IAAI,MAAM,KAAK,EAAE,OAAO,OAAO,CAAC;AAElE,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n    variant = 'primary',\n    fullWidth = false,\n    size = 'normal',\n    loading = false,\n    className,\n    children,\n    ref,\n    ...props\n}: ButtonProps) => {\n    const isDisabled = 'disabled' in props && props.disabled;\n    const isAnchor = 'href' in props && props.href != null;\n\n    const classes = cn(\n        styles.button,\n        styles[`button--${variant}`],\n        { [styles['button--full-width']]: fullWidth },\n        styles[`button--${size}`],\n        focusStyles.focusable,\n        { [styles['button--disabled']]: isDisabled },\n        { [styles['button--loading']]: loading },\n        className,\n    );\n\n    const content = (\n        <>\n            <span className={styles.button__content}>{children}</span>\n            {loading && (\n                <Spinner\n                    size={size === 'small' ? 'xs' : 's'}\n                    color=\"inherit\"\n                    aria-hidden=\"true\"\n                    aria-label={undefined}\n                    role=\"presentation\"\n                    className={styles.button__spinner}\n                />\n            )}\n        </>\n    );\n\n    if (isAnchor) {\n        const { href, renderLink, ...anchorProps } = props as Omit<\n            typeof props,\n            'variant' | 'size' | 'loading'\n        > & {\n            href: string;\n            renderLink?: (\n                props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n                    href: string;\n                    children: ReactNode;\n                },\n            ) => ReactNode;\n        };\n\n        const {\n            disabled: _disabled,\n            type: _type,\n            name: _name,\n            ...safeAnchorProps\n        } = anchorProps as typeof anchorProps & {\n            disabled?: boolean;\n            type?: 'button' | 'submit' | 'reset';\n            name?: string;\n        };\n\n        const target = safeAnchorProps.target;\n        const rel = safeAnchorProps.rel;\n        const shouldHardenRel = target === '_blank';\n        const relTokens = new Set(\n            (rel ?? '')\n                .split(/\\s+/)\n                .filter(Boolean)\n                .map((token) => token.toLowerCase()),\n        );\n\n        if (shouldHardenRel) {\n            relTokens.add('noopener');\n            relTokens.add('noreferrer');\n        }\n\n        const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n        const linkProps = {\n            ...safeAnchorProps,\n            ref: ref as Ref<HTMLAnchorElement>,\n            href,\n            rel: hardenedRel,\n            className: classes,\n            'aria-busy': loading || undefined,\n            'aria-disabled': loading || undefined,\n            tabIndex: loading ? -1 : undefined,\n            onClick: loading\n                ? (e: MouseEvent<HTMLAnchorElement>) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                  }\n                : safeAnchorProps.onClick,\n            children: content,\n        };\n\n        if (renderLink) {\n            return <>{renderLink(linkProps)}</>;\n        }\n\n        return <a {...linkProps} />;\n    }\n\n    const {\n        type = 'button',\n        disabled,\n        href: _href,\n        target: _target,\n        rel: _rel,\n        renderLink: _renderLink,\n        ...buttonProps\n    } = props as Omit<typeof props, 'variant' | 'size' | 'loading' | 'href'> & {\n        type?: 'button' | 'submit' | 'reset';\n        disabled?: boolean;\n        href?: string;\n        target?: string;\n        rel?: string;\n        renderLink?: unknown;\n    };\n\n    return (\n        <button\n            ref={ref as Ref<HTMLButtonElement>}\n            type={type}\n            disabled={disabled || loading}\n            className={classes}\n            aria-busy={loading || undefined}\n            {...buttonProps}\n        >\n            {content}\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;AAElD,QAAM,UAAU;AAAA,IACZ,OAAO;AAAA,IACP,OAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClC,OAAO,WAAW,IAAI,EAAE;AAAA,IACxB,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACF,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAkB,UAAS;AAAA,IAClD,WACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EACtB,GAER;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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_1nsz1_1";
-const button__content = "_button__content_1nsz1_177";
-const button__spinner = "_button__spinner_1nsz1_185";
+const button = "_button_tpbgh_1";
+const button__content = "_button__content_tpbgh_177";
+const button__spinner = "_button__spinner_tpbgh_185";
 const styles = {
   button,
-  "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--full-width": "_button--full-width_tpbgh_18",
+  "button--normal": "_button--normal_tpbgh_25",
+  "button--small": "_button--small_tpbgh_32",
+  "button--primary": "_button--primary_tpbgh_41",
+  "button--secondary": "_button--secondary_tpbgh_63",
+  "button--tertiary": "_button--tertiary_tpbgh_88",
+  "button--disabled": "_button--disabled_tpbgh_111",
+  "button--loading": "_button--loading_tpbgh_173",
   button__content,
   button__spinner
 };

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

@@ -1,17 +1,17 @@
 import './Button.css';
-const button = "_button_1nsz1_1";
-const button__content = "_button__content_1nsz1_177";
-const button__spinner = "_button__spinner_1nsz1_185";
+const button = "_button_tpbgh_1";
+const button__content = "_button__content_tpbgh_177";
+const button__spinner = "_button__spinner_tpbgh_185";
 const styles = {
   button,
-  "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--full-width": "_button--full-width_tpbgh_18",
+  "button--normal": "_button--normal_tpbgh_25",
+  "button--small": "_button--small_tpbgh_32",
+  "button--primary": "_button--primary_tpbgh_41",
+  "button--secondary": "_button--secondary_tpbgh_63",
+  "button--tertiary": "_button--tertiary_tpbgh_88",
+  "button--disabled": "_button--disabled_tpbgh_111",
+  "button--loading": "_button--loading_tpbgh_173",
   button__content,
   button__spinner
 };

package/dist/components/Hero/Hero.cjs

@@ -30,45 +30,36 @@ const Hero = ({
   const hasActions = primaryCta != null || secondaryCta != null;
   const backgroundStyle = image == null && backgroundColor != null ? { backgroundColor } : void 0;
   const HeadingLevel = headingLevel;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref,
-      ...props,
-      className: cn.cn(Hero_module.default.hero, className),
-      "data-testid": props["data-testid"],
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__background, style: backgroundStyle, children: [
-          image != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
-          logoImage != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__logoImage, "aria-hidden": "true", children: logoImage }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__overlay, "aria-hidden": "true" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, ...props, className: cn.cn(Hero_module.default.hero, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__background, style: backgroundStyle, children: [
+      image != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
+      logoImage != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__logoImage, "aria-hidden": "true", children: logoImage }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__overlay, "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__content, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Hero_module.default.hero__card, elevation_module.default.elevationHigh), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__main, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__text, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__header, children: [
+          label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__label, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HeadingLevel,
+            {
+              id: headingId,
+              className: cn.cn(
+                Hero_module.default.hero__heading,
+                Hero_utils.headingClassByLevel[headingLevel]
+              ),
+              children: heading
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__content, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Hero_module.default.hero__card, elevation_module.default.elevationExtraHigh), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__main, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__text, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__header, children: [
-              label != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__label, children: label }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                HeadingLevel,
-                {
-                  id: headingId,
-                  className: cn.cn(
-                    Hero_module.default.hero__heading,
-                    Hero_utils.headingClassByLevel[headingLevel]
-                  ),
-                  children: heading
-                }
-              )
-            ] }),
-            description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Hero_module.default.hero__description, "dds-prose"), children: description })
-          ] }),
-          hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__actions, children: [
-            primaryCta != null && primaryCta,
-            secondaryCta != null && secondaryCta
-          ] })
-        ] }) }) })
-      ]
-    }
-  );
+        description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Hero_module.default.hero__description, "dds-prose"), children: description })
+      ] }),
+      hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__actions, children: [
+        primaryCta != null && primaryCta,
+        secondaryCta != null && secondaryCta
+      ] })
+    ] }) }) })
+  ] });
 };
 exports.Hero = Hero;
 //# sourceMappingURL=Hero.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.cjs","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":["useId","jsxs","cn","styles","jsx","elevationStyles","headingClassByLevel"],"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,YAAYA,MAAAA,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,sCAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,sCAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAE5E,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,eAAe;AAErB,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA,GAAGC,oBAAO,MAAM,SAAS;AAAA,MACpC,eAAa,MAAM,aAAa;AAAA,MAEhC,UAAA;AAAA,QAAAF,gCAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,uCACL,OAAA,EAAI,WAAWA,oBAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,UAEH,aAAa,QACVC,+BAAC,OAAA,EAAI,WAAWD,oBAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,yCAEH,OAAA,EAAI,WAAWA,YAAAA,QAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,uCAEC,OAAA,EAAI,WAAWA,oBAAO,eACnB,UAAAC,+BAAC,SAAI,WAAWF,GAAAA,GAAGC,oBAAO,YAAYE,iBAAAA,QAAgB,kBAAkB,GACpE,0CAAC,OAAA,EAAI,WAAWF,oBAAO,YACnB,UAAA;AAAA,UAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,YAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,aAAc,UAAA,OAAM;AAAA,cAC7DC,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAWF,GAAAA;AAAAA,oBACPC,YAAAA,QAAO;AAAA,oBACPG,WAAAA,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZF,+BAAC,OAAA,EAAI,WAAWF,MAAGC,YAAAA,QAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACGF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,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;;"}
+{"version":3,"file":"Hero.cjs","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 ref={ref} {...props} className={cn(styles.hero, className)}>\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.elevationHigh)}>\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":["useId","jsxs","cn","styles","jsx","elevationStyles","headingClassByLevel"],"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,YAAYA,MAAAA,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,sCAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,sCAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAE5E,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,eAAe;AAErB,SACIC,gCAAC,OAAA,EAAI,KAAW,GAAG,OAAO,WAAWC,GAAAA,GAAGC,YAAAA,QAAO,MAAM,SAAS,GAC1D,UAAA;AAAA,IAAAF,gCAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,MAAA,SAAS,uCACL,OAAA,EAAI,WAAWA,oBAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,MAEH,aAAa,QACVC,+BAAC,OAAA,EAAI,WAAWD,oBAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,qCAEH,OAAA,EAAI,WAAWA,YAAAA,QAAO,eAAe,eAAY,OAAA,CAAO;AAAA,IAAA,GAC7D;AAAA,mCAEC,OAAA,EAAI,WAAWA,oBAAO,eACnB,UAAAC,+BAAC,SAAI,WAAWF,GAAAA,GAAGC,oBAAO,YAAYE,iBAAAA,QAAgB,aAAa,GAC/D,0CAAC,OAAA,EAAI,WAAWF,oBAAO,YACnB,UAAA;AAAA,MAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,QAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,cAClB,UAAA;AAAA,UAAA,SAAS,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,aAAc,UAAA,OAAM;AAAA,UAC7DC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,IAAI;AAAA,cACJ,WAAWF,GAAAA;AAAAA,gBACPC,YAAAA,QAAO;AAAA,gBACPG,WAAAA,oBAAoB,YAAY;AAAA,cAAA;AAAA,cAGnC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL,GACJ;AAAA,QACC,eAAe,QACZF,+BAAC,OAAA,EAAI,WAAWF,MAAGC,YAAAA,QAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,MAAA,GAER;AAAA,MAEC,cACGF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,eAClB,UAAA;AAAA,QAAA,cAAc,QAAQ;AAAA,QACtB,gBAAgB,QAAQ;AAAA,MAAA,EAAA,CAC7B;AAAA,IAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;;"}

package/dist/components/Hero/Hero.css

@@ -1,14 +1,14 @@
-@layer dds-components {._hero_905ff_1 {
+@layer dds-components {._hero_c98qx_1 {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding-top: var(--spacing-ui-xxxl);
+    padding-top: var(--spacing-space-40);
     container-name: hero;
     container-type: inline-size;
 }
 
-._hero__background_905ff_11 {
+._hero__background_c98qx_11 {
     position: absolute;
     inset-inline: 0;
     top: 0;
@@ -17,21 +17,21 @@
     overflow: clip;
 }
 
-._hero__backgroundImageComponent_905ff_20 {
+._hero__backgroundImageComponent_c98qx_20 {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_905ff_20 > * {
+._hero__backgroundImageComponent_c98qx_20 > * {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_905ff_20 img,
-._hero__backgroundImageComponent_905ff_20 picture,
-._hero__backgroundImageComponent_905ff_20 video,
-._hero__backgroundImageComponent_905ff_20 canvas,
-._hero__backgroundImageComponent_905ff_20 svg {
+._hero__backgroundImageComponent_c98qx_20 img,
+._hero__backgroundImageComponent_c98qx_20 picture,
+._hero__backgroundImageComponent_c98qx_20 video,
+._hero__backgroundImageComponent_c98qx_20 canvas,
+._hero__backgroundImageComponent_c98qx_20 svg {
     display: block;
     width: 100%;
     height: 100%;
@@ -39,7 +39,7 @@
     object-position: right center;
 }
 
-._hero__logoImage_905ff_42 {
+._hero__logoImage_c98qx_42 {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
@@ -49,18 +49,18 @@
     width: min(100%, 1280px);
     height: 100%;
     margin-inline: auto;
-    padding-left: var(--spacing-layout-lg);
-    padding-right: var(--spacing-ui-xxxl);
-    padding-bottom: var(--spacing-ui-lg);
+    padding-left: var(--spacing-space-80);
+    padding-right: var(--spacing-space-40);
+    padding-bottom: var(--spacing-space-20);
 }
 
-._hero__logoImage_905ff_42 > * {
+._hero__logoImage_c98qx_42 > * {
     width: min(430px, 43vw);
     max-width: 100%;
     height: auto;
 }
 
-._hero__overlay_905ff_63 {
+._hero__overlay_c98qx_63 {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
@@ -72,7 +72,7 @@
     );
 }
 
-._hero__content_905ff_75 {
+._hero__content_c98qx_75 {
     position: relative;
     z-index: 1;
     display: flex;
@@ -80,14 +80,14 @@
     align-items: flex-end;
     justify-content: flex-start;
     max-width: 1280px;
-    gap: var(--spacing-ui-xxxl);
+    gap: var(--spacing-space-40);
     width: 100%;
     margin-inline: auto;
-    padding-left: var(--spacing-layout-lg);
-    padding-right: var(--spacing-ui-xxxl);
+    padding-left: var(--spacing-space-80);
+    padding-right: var(--spacing-space-40);
 }
 
-._hero__card_905ff_90 {
+._hero__card_c98qx_90 {
     flex: 0 0 650px;
     width: 650px;
     min-width: 0;
@@ -95,150 +95,154 @@
     background-color: var(--color-semantic-surface-base);
     border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
     border-radius: var(--radius-semantic-md);
-    padding: var(--spacing-ui-xxxl);
+    padding: var(--spacing-space-40);
 }
 
-._hero__main_905ff_101 {
+._hero__main_c98qx_101 {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-ui-xxxl);
+    gap: var(--spacing-space-40);
 }
 
-._hero__text_905ff_107 {
+._hero__text_c98qx_107 {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-ui-lg);
+    gap: var(--spacing-space-20);
 }
 
-._hero__header_905ff_113 {
+._hero__header_c98qx_113 {
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-ui-xs);
+    gap: var(--spacing-space-8);
 }
 
-._hero__label_905ff_119 {
+._hero__label_c98qx_119 {
     align-self: flex-start;
 }
 
-._hero__heading_905ff_123 {
+._hero__heading_c98qx_123 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     text-wrap: balance;
 }
 
-._hero__heading--xl_905ff_129 {
+._hero__heading--xl_c98qx_129 {
     font: var(--typography-heading-xl);
 }
 
-._hero__heading--lg_905ff_133 {
+._hero__heading--lg_c98qx_133 {
     font: var(--typography-heading-lg);
 }
 
-._hero__heading--md_905ff_137 {
+._hero__heading--md_c98qx_137 {
     font: var(--typography-heading-md);
 }
 
-._hero__heading--sm_905ff_141 {
+._hero__heading--sm_c98qx_141 {
     font: var(--typography-heading-sm);
 }
 
-._hero__heading--xs_905ff_145 {
+._hero__heading--xs_c98qx_145 {
     font: var(--typography-heading-xs);
 }
 
-._hero__description_905ff_149 {
+._hero__heading--xxs_c98qx_149 {
+    font: var(--typography-heading-xxs);
+}
+
+._hero__description_c98qx_153 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     font: var(--typography-body-lg);
     text-wrap: pretty;
 }
 
-._hero__description_905ff_149 p {
+._hero__description_c98qx_153 p {
     margin: 0;
 }
 
-._hero__description_905ff_149 p + p {
-    margin-top: var(--spacing-ui-sm);
+._hero__description_c98qx_153 p + p {
+    margin-top: var(--spacing-space-12);
 }
 
-._hero__actions_905ff_164 {
+._hero__actions_c98qx_168 {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
-    gap: var(--spacing-ui-md);
+    gap: var(--spacing-space-16);
     flex-wrap: nowrap;
 }
 
-@container hero (max-width: 991px) {
-    ._hero__background_905ff_11 {
+@container hero (max-width: 1023px) {
+    ._hero__background_c98qx_11 {
         height: 460px;
     }
 
-    ._hero__content_905ff_75 {
+    ._hero__content_c98qx_75 {
         min-height: 460px;
-        padding-inline: var(--spacing-ui-xxxl);
+        padding-inline: var(--spacing-space-40);
     }
 
-    ._hero__card_905ff_90 {
+    ._hero__card_c98qx_90 {
         flex-basis: 335px;
         max-width: 335px;
-        padding: var(--spacing-ui-lg);
+        padding: var(--spacing-space-20);
     }
 
-    ._hero__logoImage_905ff_42 {
-        padding-left: var(--spacing-ui-xxxl);
+    ._hero__logoImage_c98qx_42 {
+        padding-left: var(--spacing-space-40);
     }
 
-    ._hero__logoImage_905ff_42 > * {
+    ._hero__logoImage_c98qx_42 > * {
         width: min(360px, 48vw);
     }
 
-    ._hero__actions_905ff_164 {
+    ._hero__actions_c98qx_168 {
         flex-direction: column;
         flex-wrap: nowrap;
     }
 }
 
 @container hero (max-width: 767px) {
-    ._hero__background_905ff_11 {
+    ._hero__background_c98qx_11 {
         height: 280px;
     }
 
-    ._hero__content_905ff_75 {
+    ._hero__content_c98qx_75 {
         min-height: auto;
         flex-direction: column;
         align-items: stretch;
         gap: 0;
         padding-top: 200px;
-        padding-inline: var(--spacing-ui-lg);
+        padding-inline: var(--spacing-space-20);
     }
 
-    ._hero__card_905ff_90 {
+    ._hero__card_c98qx_90 {
         flex-basis: auto;
         width: 100%;
         max-width: none;
     }
 
-    ._hero__logoImage_905ff_42 {
+    ._hero__logoImage_c98qx_42 {
         display: none;
     }
 }
 
 @media (forced-colors: active) {
-    ._hero__overlay_905ff_63 {
+    ._hero__overlay_c98qx_63 {
         display: none;
     }
 
-    ._hero__background_905ff_11 {
+    ._hero__background_c98qx_11 {
         background-color: Canvas;
     }
 
-    ._hero__card_905ff_90 {
+    ._hero__card_c98qx_90 {
         border: var(--borderwidth-semantic-xs) solid CanvasText;
         box-shadow: none;
     }
 
-    ._hero__logoImage_905ff_42 {
+    ._hero__logoImage_c98qx_42 {
         display: none;
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,IAAI,GAAI,kKAelB,SAAS,4CAqEX,CAAC"}
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,eAAO,MAAM,IAAI,GAAI,kKAelB,SAAS,4CAgEX,CAAC"}

package/dist/components/Hero/Hero.js

@@ -28,45 +28,36 @@ const Hero = ({
   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" })
+  return /* @__PURE__ */ jsxs("div", { ref, ...props, className: cn(styles.hero, className), 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.elevationHigh), 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
+            }
+          )
         ] }),
-        /* @__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
-          ] })
-        ] }) }) })
-      ]
-    }
-  );
+        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

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

@@ -1 +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;"}
+{"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 ref={ref} {...props} className={cn(styles.hero, className)}>\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.elevationHigh)}>\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,qBAAC,OAAA,EAAI,KAAW,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,SAAS,GAC1D,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,MAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,MAEH,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,0BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,IAAA,GAC7D;AAAA,wBAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,UAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,UAC7D;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,IAAI;AAAA,cACJ,WAAW;AAAA,gBACP,OAAO;AAAA,gBACP,oBAAoB,YAAY;AAAA,cAAA;AAAA,cAGnC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL,GACJ;AAAA,QACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,MAAA,GAER;AAAA,MAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,QAAA,cAAc,QAAQ;AAAA,QACtB,gBAAgB,QAAQ;AAAA,MAAA,EAAA,CAC7B;AAAA,IAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}