@dnanpm/ui-components 0.8.0 → 0.10.0

package/dist/components/Hero/Hero.css

@@ -1,4 +1,4 @@
-@layer dds-components {._hero_1xib4_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._hero_fgniv_1 {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -6,9 +6,14 @@
     padding-top: var(--spacing-space-40);
     container-name: hero;
     container-type: inline-size;
+
+    /* Shared content-column geometry; the logo derives its position from these. */
+    --_hero-content-pad-start: var(--spacing-space-20);
+    --_hero-content-pad-end: var(--spacing-space-20);
+    --_hero-card-fraction: 1;
 }
 
-._hero__background_1xib4_11 {
+._hero__background_fgniv_16 {
     position: absolute;
     inset-inline: 0;
     top: 0;
@@ -17,21 +22,21 @@
     overflow: clip;
 }
 
-._hero__backgroundImageComponent_1xib4_20 {
+._hero__backgroundImageComponent_fgniv_25 {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_1xib4_20 > * {
+._hero__backgroundImageComponent_fgniv_25 > * {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_1xib4_20 img,
-._hero__backgroundImageComponent_1xib4_20 picture,
-._hero__backgroundImageComponent_1xib4_20 video,
-._hero__backgroundImageComponent_1xib4_20 canvas,
-._hero__backgroundImageComponent_1xib4_20 svg {
+._hero__backgroundImageComponent_fgniv_25 img,
+._hero__backgroundImageComponent_fgniv_25 picture,
+._hero__backgroundImageComponent_fgniv_25 video,
+._hero__backgroundImageComponent_fgniv_25 canvas,
+._hero__backgroundImageComponent_fgniv_25 svg {
     display: block;
     width: 100%;
     height: 100%;
@@ -39,24 +44,35 @@
     object-position: right center;
 }
 
-._hero__logoImage_1xib4_42 {
+._hero__logoImageWrap_fgniv_47 {
+    position: absolute;
+    inset: 0;
+    max-width: var(--layout-semantic-container-wide);
+    margin-inline: auto;
+}
+
+._hero__logoImage_fgniv_47 {
     position: absolute;
+    /* Insets bound the available area; padding provides the safety margins to those edges. */
     top: 0;
-    left: 0;
     right: 0;
+    bottom: var(--spacing-space-40);
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 200px;
-    padding-inline: var(--spacing-space-20);
+    max-width: 500px;
+    margin-inline: auto;
+    padding: var(--spacing-space-32) var(--spacing-space-40) var(--spacing-space-20);
 }
 
-._hero__logoImage_1xib4_42 > * {
-    height: auto;
-    max-height: 80%;
+._hero__logoImage_fgniv_47 > * {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
-._hero__overlay_1xib4_59 {
+._hero__overlay_fgniv_75 {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
@@ -68,86 +84,87 @@
     );
 }
 
-._hero__content_1xib4_71 {
+._hero__content_fgniv_87 {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     justify-content: flex-start;
-    max-width: 1280px;
+    max-width: var(--layout-semantic-container-wide);
     gap: 0;
     width: 100%;
     margin-inline: auto;
     padding-top: 200px;
-    padding-inline: var(--spacing-space-20);
+    padding-inline: var(--_hero-content-pad-start) var(--_hero-content-pad-end);
 }
 
-._hero__card_1xib4_86 {
+._hero__card_fgniv_102 {
     min-width: 0;
-    width: 100%;
+    width: calc(var(--_hero-card-fraction) * 100%);
+    color: var(--color-semantic-foreground-default);
     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-space-20);
 }
 
-._hero__main_1xib4_95 {
+._hero__main_fgniv_112 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-40);
 }
 
-._hero__text_1xib4_101 {
+._hero__text_fgniv_118 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-20);
 }
 
-._hero__header_1xib4_107 {
+._hero__header_fgniv_124 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
 }
 
-._hero__label_1xib4_113 {
+._hero__label_fgniv_130 {
     align-self: flex-start;
 }
 
-._hero__heading_1xib4_117 {
+._hero__heading_fgniv_134 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     text-wrap: balance;
 }
 
-._hero__heading--default_1xib4_123 {
+._hero__heading--default_fgniv_140 {
     font: var(--typography-heading-lg);
 }
 
-._hero__heading--large_1xib4_127 {
+._hero__heading--large_fgniv_144 {
     font: var(--typography-heading-xl);
 }
 
-._hero__heading--small_1xib4_131 {
+._hero__heading--small_fgniv_148 {
     font: var(--typography-heading-md);
 }
 
-._hero__description_1xib4_135 {
+._hero__description_fgniv_152 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     font: var(--typography-body-md);
     text-wrap: pretty;
 }
 
-._hero__description_1xib4_135 p {
+._hero__description_fgniv_152 p {
     margin: 0;
 }
 
-._hero__description_1xib4_135 p + p {
+._hero__description_fgniv_152 p + p {
     margin-top: var(--spacing-space-12);
 }
 
-._hero__actions_1xib4_150 {
+._hero__actions_fgniv_167 {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -156,83 +173,78 @@
 }
 
 @container hero (min-width: 768px) {
-    ._hero__background_1xib4_11 {
-        height: 460px;
+    ._hero__content_fgniv_87,
+    ._hero__background_fgniv_16 {
+        --_hero-content-pad-start: var(--spacing-space-40);
+        --_hero-content-pad-end: var(--spacing-space-40);
+        --_hero-card-fraction: 0.5;
+    }
+
+    ._hero__background_fgniv_16 {
+        height: auto;
+        bottom: var(--spacing-space-40);
     }
 
-    ._hero__content_1xib4_71 {
+    ._hero__content_fgniv_87 {
         flex-direction: row;
         align-items: flex-end;
         min-height: 460px;
         gap: var(--spacing-space-40);
         padding-top: 0;
-        padding-inline: var(--spacing-space-40);
     }
 
-    ._hero__card_1xib4_86 {
-        width: 50%;
+    ._hero__card_fgniv_102 {
         max-width: 650px;
     }
 
-    ._hero__logoImage_1xib4_42 {
-        position: static;
-        flex: 1 1 auto;
-        min-width: 0;
-        height: auto;
-        max-height: 460px;
-        align-items: center;
-        align-self: stretch;
-        margin-top: calc(-1 * var(--spacing-space-40));
-        padding-inline: 0;
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    ._hero__logoImage_1xib4_42 > * {
-        width: auto;
-        max-width: 90%;
-        max-height: 100%;
+    ._hero__logoImage_fgniv_47 {
+        bottom: 0;
+        padding: var(--spacing-space-40);
+        /* Inner edge sits at the card's right edge: pad-start + card-fraction of the content box. */
+        left: calc(
+            var(--_hero-content-pad-start) + var(--_hero-card-fraction) *
+                (100% - var(--_hero-content-pad-start) - var(--_hero-content-pad-end))
+        );
     }
 }
 
 @container hero (min-width: 1024px) {
-    ._hero__background_1xib4_11 {
-        height: 440px;
+    ._hero__content_fgniv_87,
+    ._hero__background_fgniv_16 {
+        --_hero-content-pad-start: var(--spacing-space-80);
+        --_hero-content-pad-end: var(--spacing-space-40);
+        --_hero-card-fraction: 0.6;
     }
 
-    ._hero__content_1xib4_71 {
+    ._hero__content_fgniv_87 {
         min-height: 440px;
-        padding-left: var(--spacing-space-80);
-        padding-right: var(--spacing-space-40);
     }
 
-    ._hero__card_1xib4_86 {
-        width: 60%;
+    ._hero__card_fgniv_102 {
         max-width: initial;
         padding: var(--spacing-space-40);
     }
-
-    ._hero__logoImage_1xib4_42 {
-        max-height: 440px;
-    }
 }
 
 @media (forced-colors: active) {
-    ._hero__overlay_1xib4_59 {
+    ._hero__overlay_fgniv_75 {
         display: none;
     }
 
-    ._hero__background_1xib4_11 {
+    ._hero__background_fgniv_16 {
         background-color: Canvas;
     }
 
-    ._hero__card_1xib4_86 {
+    ._hero__card_fgniv_102 {
         border: var(--borderwidth-semantic-xs) solid CanvasText;
         box-shadow: none;
     }
 
-    ._hero__logoImage_1xib4_42 {
+    ._hero__logoImageWrap_fgniv_47 {
         display: none;
     }
 }
-}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

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

@@ -1,3 +1,3 @@
 import { HeroProps } from './Hero.types';
-export declare const Hero: ({ label, heading, description, headingLevel, headingStyle, Image, imageProps, LogoImage, logoImageProps, backgroundColor, primaryCta, secondaryCta, className, ref, ...props }: HeroProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Hero: ({ label, heading, description, headingLevel, headingStyle, Image, imageProps, LogoImage, logoImageProps, backgroundColor, actions, className, ref, ...props }: HeroProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Hero.d.ts.map

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,gLAgBlB,SAAS,4CAuEX,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,+JAelB,SAAS,4CAqEX,CAAC"}

package/dist/components/Hero/Hero.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import { elevationStyles } from "../../styles/utils/index.js";
 import styles from "./Hero.module.css.js";
 import { headingClassByStyle } from "./Hero.utils.js";
 import { cn } from "../../utils/cn/cn.js";
@@ -15,8 +15,7 @@ const Hero = ({
   LogoImage,
   logoImageProps,
   backgroundColor,
-  primaryCta,
-  secondaryCta,
+  actions,
   className,
   ref,
   ...props
@@ -27,7 +26,7 @@ const Hero = ({
   const image = ResolvedImage != null ? /* @__PURE__ */ jsx(ResolvedImage, { ...imageProps }) : void 0;
   const logoImage = ResolvedLogoImage != null ? /* @__PURE__ */ jsx(ResolvedLogoImage, { ...logoImageProps }) : void 0;
   const HeadingLevel = headingLevel;
-  const hasActions = primaryCta != null || secondaryCta != null;
+  const hasActions = actions != null && typeof actions !== "boolean";
   const backgroundStyle = image == null && backgroundColor != null ? { backgroundColor } : void 0;
   const ariaLabelledBy = props["aria-label"] ? void 0 : props["aria-labelledby"] || headingId;
   return /* @__PURE__ */ jsxs(
@@ -41,34 +40,36 @@ const Hero = ({
       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 }),
-          /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" })
+          /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" }),
+          logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImageWrap, "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, children: logoImage }) })
         ] }),
-        /* @__PURE__ */ jsxs("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,
-                      headingClassByStyle[headingStyle]
-                    ),
-                    children: heading
-                  }
-                )
+        /* @__PURE__ */ jsx("div", { className: styles.hero__content, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(styles.hero__card, elevationStyles.elevationHigh),
+            "data-color-scheme": "light",
+            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,
+                        headingClassByStyle[headingStyle]
+                      ),
+                      children: heading
+                    }
+                  )
+                ] }),
+                description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
               ] }),
-              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
+              hasActions && /* @__PURE__ */ jsx("div", { className: styles.hero__actions, children: actions })
             ] })
-          ] }) }),
-          logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, "aria-hidden": "true", children: logoImage })
-        ] })
+          }
+        ) })
       ]
     }
   );

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 { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n    label,\n    heading,\n    description,\n    headingLevel = 'h1',\n    headingStyle = 'default',\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    const HeadingLevel = headingLevel;\n\n    const hasActions = primaryCta != null || secondaryCta != null;\n    const backgroundStyle =\n        image == null && backgroundColor != null ? { backgroundColor } : undefined;\n    const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n    return (\n        <section\n            ref={ref}\n            {...props}\n            className={cn(styles.hero, className)}\n            aria-label={props['aria-label']}\n            aria-labelledby={ariaLabelledBy}\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                <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                                        headingClassByStyle[headingStyle],\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                {logoImage != null && (\n                    <div className={styles.hero__logoImage} aria-hidden=\"true\">\n                        {logoImage}\n                    </div>\n                )}\n            </div>\n        </section>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,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;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,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,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,QAEA,qBAAC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,gBAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,gBAC7D;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,IAAI;AAAA,oBACJ,WAAW;AAAA,sBACP,OAAO;AAAA,sBACP,oBAAoB,YAAY;AAAA,oBAAA;AAAA,oBAGnC,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACL,GACJ;AAAA,cACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,YAAA,GAER;AAAA,YAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,cAAA,cAAc,QAAQ;AAAA,cACtB,gBAAgB,QAAQ;AAAA,YAAA,EAAA,CAC7B;AAAA,UAAA,EAAA,CAER,EAAA,CACJ;AAAA,UACC,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,QAAA,EAAA,CAER;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';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n    label,\n    heading,\n    description,\n    headingLevel = 'h1',\n    headingStyle = 'default',\n    Image,\n    imageProps,\n    LogoImage,\n    logoImageProps,\n    backgroundColor,\n    actions,\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    const HeadingLevel = headingLevel;\n\n    const hasActions = actions != null && typeof actions !== 'boolean';\n    const backgroundStyle =\n        image == null && backgroundColor != null ? { backgroundColor } : undefined;\n    const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n    return (\n        <section\n            ref={ref}\n            {...props}\n            className={cn(styles.hero, className)}\n            aria-label={props['aria-label']}\n            aria-labelledby={ariaLabelledBy}\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                <div className={styles.hero__overlay} aria-hidden=\"true\" />\n                {logoImage != null && (\n                    <div className={styles.hero__logoImageWrap} aria-hidden=\"true\">\n                        <div className={styles.hero__logoImage}>{logoImage}</div>\n                    </div>\n                )}\n            </div>\n\n            <div className={styles.hero__content}>\n                <div\n                    className={cn(styles.hero__card, elevationStyles.elevationHigh)}\n                    data-color-scheme=\"light\"\n                >\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                                        headingClassByStyle[headingStyle],\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 && <div className={styles.hero__actions}>{actions}</div>}\n                    </div>\n                </div>\n            </div>\n        </section>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;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;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,WAAW,QAAQ,OAAO,YAAY;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,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,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,QAAO;AAAA,UACxD,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,qBAAqB,eAAY,QACpD,8BAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,qBAAU,EAAA,CACvD;AAAA,QAAA,GAER;AAAA,QAEA,oBAAC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa;AAAA,YAC9D,qBAAkB;AAAA,YAElB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,gBAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,kBAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,kBAC7D;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,IAAI;AAAA,sBACJ,WAAW;AAAA,wBACP,OAAO;AAAA,wBACP,oBAAoB,YAAY;AAAA,sBAAA;AAAA,sBAGnC,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACL,GACJ;AAAA,gBACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,cAAA,GAER;AAAA,cAEC,cAAc,oBAAC,OAAA,EAAI,WAAW,OAAO,eAAgB,UAAA,QAAA,CAAQ;AAAA,YAAA,EAAA,CAClE;AAAA,UAAA;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,24 +1,26 @@
 require('./Hero.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const hero = "_hero_1xib4_1";
-const hero__background = "_hero__background_1xib4_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
-const hero__logoImage = "_hero__logoImage_1xib4_42";
-const hero__overlay = "_hero__overlay_1xib4_59";
-const hero__content = "_hero__content_1xib4_71";
-const hero__card = "_hero__card_1xib4_86";
-const hero__main = "_hero__main_1xib4_95";
-const hero__text = "_hero__text_1xib4_101";
-const hero__header = "_hero__header_1xib4_107";
-const hero__label = "_hero__label_1xib4_113";
-const hero__heading = "_hero__heading_1xib4_117";
-const hero__description = "_hero__description_1xib4_135";
-const hero__actions = "_hero__actions_1xib4_150";
+const hero = "_hero_fgniv_1";
+const hero__background = "_hero__background_fgniv_16";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_fgniv_25";
+const hero__logoImageWrap = "_hero__logoImageWrap_fgniv_47";
+const hero__logoImage = "_hero__logoImage_fgniv_47";
+const hero__overlay = "_hero__overlay_fgniv_75";
+const hero__content = "_hero__content_fgniv_87";
+const hero__card = "_hero__card_fgniv_102";
+const hero__main = "_hero__main_fgniv_112";
+const hero__text = "_hero__text_fgniv_118";
+const hero__header = "_hero__header_fgniv_124";
+const hero__label = "_hero__label_fgniv_130";
+const hero__heading = "_hero__heading_fgniv_134";
+const hero__description = "_hero__description_fgniv_152";
+const hero__actions = "_hero__actions_fgniv_167";
 const styles = {
   hero,
   hero__background,
   hero__backgroundImageComponent,
+  hero__logoImageWrap,
   hero__logoImage,
   hero__overlay,
   hero__content,
@@ -28,9 +30,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--default": "_hero__heading--default_1xib4_123",
-  "hero__heading--large": "_hero__heading--large_1xib4_127",
-  "hero__heading--small": "_hero__heading--small_1xib4_131",
+  "hero__heading--default": "_hero__heading--default_fgniv_140",
+  "hero__heading--large": "_hero__heading--large_fgniv_144",
+  "hero__heading--small": "_hero__heading--small_fgniv_148",
   hero__description,
   hero__actions
 };
@@ -46,6 +48,7 @@ exports.hero__header = hero__header;
 exports.hero__heading = hero__heading;
 exports.hero__label = hero__label;
 exports.hero__logoImage = hero__logoImage;
+exports.hero__logoImageWrap = hero__logoImageWrap;
 exports.hero__main = hero__main;
 exports.hero__overlay = hero__overlay;
 exports.hero__text = hero__text;

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

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

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

@@ -1,22 +1,24 @@
 import './Hero.css';
-const hero = "_hero_1xib4_1";
-const hero__background = "_hero__background_1xib4_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
-const hero__logoImage = "_hero__logoImage_1xib4_42";
-const hero__overlay = "_hero__overlay_1xib4_59";
-const hero__content = "_hero__content_1xib4_71";
-const hero__card = "_hero__card_1xib4_86";
-const hero__main = "_hero__main_1xib4_95";
-const hero__text = "_hero__text_1xib4_101";
-const hero__header = "_hero__header_1xib4_107";
-const hero__label = "_hero__label_1xib4_113";
-const hero__heading = "_hero__heading_1xib4_117";
-const hero__description = "_hero__description_1xib4_135";
-const hero__actions = "_hero__actions_1xib4_150";
+const hero = "_hero_fgniv_1";
+const hero__background = "_hero__background_fgniv_16";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_fgniv_25";
+const hero__logoImageWrap = "_hero__logoImageWrap_fgniv_47";
+const hero__logoImage = "_hero__logoImage_fgniv_47";
+const hero__overlay = "_hero__overlay_fgniv_75";
+const hero__content = "_hero__content_fgniv_87";
+const hero__card = "_hero__card_fgniv_102";
+const hero__main = "_hero__main_fgniv_112";
+const hero__text = "_hero__text_fgniv_118";
+const hero__header = "_hero__header_fgniv_124";
+const hero__label = "_hero__label_fgniv_130";
+const hero__heading = "_hero__heading_fgniv_134";
+const hero__description = "_hero__description_fgniv_152";
+const hero__actions = "_hero__actions_fgniv_167";
 const styles = {
   hero,
   hero__background,
   hero__backgroundImageComponent,
+  hero__logoImageWrap,
   hero__logoImage,
   hero__overlay,
   hero__content,
@@ -26,9 +28,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--default": "_hero__heading--default_1xib4_123",
-  "hero__heading--large": "_hero__heading--large_1xib4_127",
-  "hero__heading--small": "_hero__heading--small_1xib4_131",
+  "hero__heading--default": "_hero__heading--default_fgniv_140",
+  "hero__heading--large": "_hero__heading--large_fgniv_144",
+  "hero__heading--small": "_hero__heading--small_fgniv_148",
   hero__description,
   hero__actions
 };
@@ -45,6 +47,7 @@ export {
   hero__heading,
   hero__label,
   hero__logoImage,
+  hero__logoImageWrap,
   hero__main,
   hero__overlay,
   hero__text

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

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

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

@@ -45,12 +45,8 @@ export interface HeroProps extends Omit<ComponentPropsWithRef<'section'>, 'child
      */
     readonly backgroundColor?: CSSProperties['backgroundColor'];
     /**
-     * Primary call-to-action element.
+     * Optional actions. Pass one or more Button, IconButton, or other accessible controls.
      */
-    readonly primaryCta?: ReactElement;
-    /**
-     * Secondary call-to-action element.
-     */
-    readonly secondaryCta?: ReactElement;
+    readonly actions?: ReactNode;
 }
 //# sourceMappingURL=Hero.types.d.ts.map

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

@@ -1 +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,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAC7D,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,SAAS,CAAC,EAAE,UAAU,CAAC;IACjF;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;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;CACxC"}
+{"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,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAC7D,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,SAAS,CAAC,EAAE,UAAU,CAAC;IACjF;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;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,OAAO,CAAC,EAAE,SAAS,CAAC;CAChC"}

package/dist/components/IconButton/IconButton.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
-const textDecoration_module = require("../../styles/utils/text-decoration.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const IconButton_module = require("./IconButton.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const Spinner = require("../Spinner/Spinner.cjs");
@@ -23,7 +22,7 @@ const IconButton = ({
   const classes = cn.cn(
     IconButton_module["icon-button"],
     IconButton_module[`icon-button--${size}`],
-    focus_module.default.focusable,
+    index.focusStyles.focusable,
     { [IconButton_module["icon-button--disabled"]]: isDisabled },
     { [IconButton_module["icon-button--loading"]]: loading },
     { [IconButton_module["icon-button--link-coloring"]]: linkColoring },
@@ -44,7 +43,7 @@ const IconButton = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        className: cn.cn(IconButton_module["icon-button__label"], textDecoration_module.default.underlineLink, {
+        className: cn.cn(IconButton_module["icon-button__label"], index.textDecorationStyles.underlineLink, {
           [IconButton_module["icon-button__label--wrap"]]: labelBehavior === "wrap"
         }),
         children