@dnanpm/ui-components 0.8.0 → 0.9.0

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

@@ -0,0 +1,99 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type ContentCardHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type ContentCardMediaKind = 'image' | 'logo';
+export type ContentCardMediaWidth = '1/3' | '1/2';
+export type ContentCardMediaPosition = 'start' | 'end';
+export type ContentCardAppearance = 'plain' | 'border' | 'elevated';
+/**
+ * Approved logo-area background colours. Maps to DNA surface tokens; CMS names in
+ * parentheses: `white` (White), `sand-*` (Sand / SandE01 / SandE02),
+ * `pink-*` (Pink / PinkE01 / PinkE02), `plum-*` (Plum / PlumE01 / PlumE02).
+ */
+export type ContentCardLogoBackground = 'white' | 'sand-soft' | 'sand-mid' | 'sand-strong' | 'pink-soft' | 'pink-mid' | 'pink-strong' | 'plum-soft' | 'plum-mid' | 'plum-strong';
+type ContentCardBaseProps = {
+    /**
+     * Optional media slot (image or logo). The client renders the element and owns
+     * `alt`, loading, and optimisation (for example `next/image`). Mark decorative
+     * images with an empty `alt`.
+     */
+    readonly media?: ReactNode;
+    /**
+     * How the media area is rendered. `logo` centres the media in a 4:3 box over a
+     * filled background; `image` fills the area. Ignored when `media` is omitted.
+     * @default 'image'
+     */
+    readonly mediaKind?: ContentCardMediaKind;
+    /**
+     * Logo-area background colour, limited to approved DNA surface tokens. Only used
+     * with `mediaKind="logo"`; defaults to `sand-mid` when omitted.
+     */
+    readonly mediaBackground?: ContentCardLogoBackground;
+    /**
+     * Media width in the horizontal layout (1/3 or 1/2 of the card). Ignored in the
+     * vertical layout, where media is always full width.
+     * @default '1/3'
+     */
+    readonly mediaWidth?: ContentCardMediaWidth;
+    /**
+     * Media side in the horizontal layout (logical, RTL-safe). In the vertical
+     * layout media is always placed above the content.
+     * @default 'start'
+     */
+    readonly mediaPosition?: ContentCardMediaPosition;
+    /**
+     * Optional slot above the title for a single small element (for example a
+     * `Label`; intended uses: Label, Timestamp, Pretitle).
+     */
+    readonly titlePrefix?: ReactNode;
+    /** Card title. Required. */
+    readonly title: ReactNode;
+    /**
+     * HTML heading level for the title. The consumer owns the document outline.
+     * @default 'h3'
+     */
+    readonly headingLevel?: ContentCardHeadingLevel;
+    /**
+     * Optional body content. Wrap rich text so it can adopt `dds-prose` styling;
+     * pass React nodes rather than HTML strings.
+     */
+    readonly body?: ReactNode;
+    /**
+     * Optional actions (0..n `Button`/`IconButton` elements). Laid out in a row that
+     * wraps to a column when there is not enough width.
+     */
+    readonly actions?: ReactNode;
+    /**
+     * Card surface treatment.
+     * @default 'plain'
+     */
+    readonly appearance?: ContentCardAppearance;
+};
+export interface ContentCardArticleProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'article'>, 'title' | 'children'> {
+    /**
+     * Root element (and role) to render. Use `li` for cards inside a `ul`/`ol`
+     * collection, `section` for a standalone page region (becomes a landmark, use
+     * sparingly), or `div` when a surrounding element already provides the
+     * semantics. The title is still linked as the accessible name via
+     * `aria-labelledby` (when not rendering as a generic div).
+     * @default 'article'
+     */
+    readonly as?: 'article';
+}
+export interface ContentCardLiProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'li'>, 'title' | 'children'> {
+    readonly as: 'li';
+}
+export interface ContentCardSectionProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'section'>, 'title' | 'children'> {
+    readonly as: 'section';
+}
+export interface ContentCardDivProps extends ContentCardBaseProps, Omit<ComponentPropsWithRef<'div'>, 'title' | 'children'> {
+    readonly as: 'div';
+}
+/**
+ * Props for the Content card. The `as` prop selects the root element and narrows
+ * the element-specific HTML attributes accordingly.
+ */
+export type ContentCardProps = ContentCardArticleProps | ContentCardLiProps | ContentCardSectionProps | ContentCardDivProps;
+/** Allowed root elements, derived from the props union. */
+export type ContentCardElement = NonNullable<ContentCardProps['as']>;
+export {};
+//# sourceMappingURL=ContentCard.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpE;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,CAAC;AAEpB,KAAK,oBAAoB,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,mBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtF,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACtB,uBAAuB,GACvB,kBAAkB,GAClB,uBAAuB,GACvB,mBAAmB,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { ContentCard } from './ContentCard';
+export type { ContentCardAppearance, ContentCardArticleProps, ContentCardDivProps, ContentCardElement, ContentCardHeadingLevel, ContentCardLiProps, ContentCardLogoBackground, ContentCardMediaKind, ContentCardMediaPosition, ContentCardMediaWidth, ContentCardProps, ContentCardSectionProps, } from './ContentCard.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACR,qBAAqB,EACrB,uBAAuB,EACvB,mBAAmB,EACnB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,EAClB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,qBAAqB,EACrB,gBAAgB,EAChB,uBAAuB,GAC1B,MAAM,qBAAqB,CAAC"}

package/dist/components/Drawer/Drawer.css

@@ -1,4 +1,4 @@
-@layer dds-components {._drawer_zzxde_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._drawer_zzxde_1 {
     --_drawer-transition-duration-open: 400ms;
     --_drawer-transition-duration-close: 200ms;
     position: fixed;
@@ -215,5 +215,4 @@
     @starting-style {
         transform: translateX(0);
     }
-}
-}
+} }

package/dist/components/Footer/Footer.css

@@ -1,4 +1,8 @@
-@layer dds-components {/**
+@layer dds-base, dds-components;
+
+@layer dds-components { @layer fallback, components; }
+
+@layer dds-components.components{/**
  * The root carries data-color-scheme="dark" because the light-scheme focus
  * ring puts focus-strong on the outer edge, which only reaches 2.42:1 against
  * the plum surface and fails SC 1.4.11. The dark scope swaps the ring order
@@ -469,5 +473,4 @@
     ._footer__organization--current_1lum3_370 {
         outline: 2px solid Highlight;
     }
-}
-}
+} }

package/dist/components/FunctionButton/FunctionButton.css

@@ -1,4 +1,4 @@
-@layer dds-components {._function-button_kp4nc_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._function-button_kp4nc_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -121,5 +121,4 @@
         border-color: GrayText;
         color: GrayText;
     }
-}
-}
+} }

package/dist/components/Hero/Hero.cjs

@@ -43,34 +43,32 @@ const Hero = ({
       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 }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__overlay, "aria-hidden": "true" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__overlay, "aria-hidden": "true" }),
+          logoImage != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__logoImageWrap, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__logoImage, children: logoImage }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("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.headingClassByStyle[headingStyle]
-                    ),
-                    children: heading
-                  }
-                )
-              ] }),
-              description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Hero_module.default.hero__description, "dds-prose"), children: description })
+        /* @__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.headingClassByStyle[headingStyle]
+                  ),
+                  children: heading
+                }
+              )
             ] }),
-            hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Hero_module.default.hero__actions, children: [
-              primaryCta != null && primaryCta,
-              secondaryCta != null && secondaryCta
-            ] })
-          ] }) }),
-          logoImage != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Hero_module.default.hero__logoImage, "aria-hidden": "true", children: logoImage })
-        ] })
+            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
+          ] })
+        ] }) }) })
       ]
     }
   );

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 { 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":["useId","jsxs","cn","styles","jsx","elevationStyles","headingClassByStyle"],"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,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;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,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA,GAAGC,oBAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,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,yCAEH,OAAA,EAAI,WAAWA,YAAAA,QAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,QAEAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,eACnB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWF,GAAAA,GAAGC,YAAAA,QAAO,YAAYE,yBAAgB,aAAa,GAC/D,UAAAJ,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,YAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,cAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,cAClB,UAAA;AAAA,gBAAA,SAAS,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,aAAc,UAAA,OAAM;AAAA,gBAC7DC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,IAAI;AAAA,oBACJ,WAAWF,GAAAA;AAAAA,sBACPC,YAAAA,QAAO;AAAA,sBACPG,WAAAA,oBAAoB,YAAY;AAAA,oBAAA;AAAA,oBAGnC,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACL,GACJ;AAAA,cACC,eAAe,QACZF,+BAAC,OAAA,EAAI,WAAWF,MAAGC,YAAAA,QAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,YAAA,GAER;AAAA,YAEC,cACGF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,eAClB,UAAA;AAAA,cAAA,cAAc,QAAQ;AAAA,cACtB,gBAAgB,QAAQ;AAAA,YAAA,EAAA,CAC7B;AAAA,UAAA,EAAA,CAER,EAAA,CACJ;AAAA,UACC,aAAa,QACVC,+BAAC,OAAA,EAAI,WAAWD,oBAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,QAAA,EAAA,CAER;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 { 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                {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 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            </div>\n        </section>\n    );\n};\n"],"names":["useId","jsxs","cn","styles","jsx","elevationStyles","headingClassByStyle"],"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,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;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,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA,GAAGC,oBAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,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,yCAEH,OAAA,EAAI,WAAWA,YAAAA,QAAO,eAAe,eAAY,QAAO;AAAA,UACxD,aAAa,QACVC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,qBAAqB,eAAY,QACpD,yCAAC,OAAA,EAAI,WAAWA,YAAAA,QAAO,iBAAkB,qBAAU,EAAA,CACvD;AAAA,QAAA,GAER;AAAA,uCAEC,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,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;;"}

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_1itry_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_1itry_16 {
     position: absolute;
     inset-inline: 0;
     top: 0;
@@ -17,21 +22,21 @@
     overflow: clip;
 }
 
-._hero__backgroundImageComponent_1xib4_20 {
+._hero__backgroundImageComponent_1itry_25 {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_1xib4_20 > * {
+._hero__backgroundImageComponent_1itry_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_1itry_25 img,
+._hero__backgroundImageComponent_1itry_25 picture,
+._hero__backgroundImageComponent_1itry_25 video,
+._hero__backgroundImageComponent_1itry_25 canvas,
+._hero__backgroundImageComponent_1itry_25 svg {
     display: block;
     width: 100%;
     height: 100%;
@@ -39,24 +44,35 @@
     object-position: right center;
 }
 
-._hero__logoImage_1xib4_42 {
+._hero__logoImageWrap_1itry_47 {
+    position: absolute;
+    inset: 0;
+    max-width: 1280px;
+    margin-inline: auto;
+}
+
+._hero__logoImage_1itry_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_1itry_47 > * {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
 }
 
-._hero__overlay_1xib4_59 {
+._hero__overlay_1itry_75 {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
@@ -68,7 +84,7 @@
     );
 }
 
-._hero__content_1xib4_71 {
+._hero__content_1itry_87 {
     position: relative;
     z-index: 1;
     display: flex;
@@ -80,74 +96,74 @@
     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_1itry_102 {
     min-width: 0;
-    width: 100%;
+    width: calc(var(--_hero-card-fraction) * 100%);
     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_1itry_111 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-40);
 }
 
-._hero__text_1xib4_101 {
+._hero__text_1itry_117 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-20);
 }
 
-._hero__header_1xib4_107 {
+._hero__header_1itry_123 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
 }
 
-._hero__label_1xib4_113 {
+._hero__label_1itry_129 {
     align-self: flex-start;
 }
 
-._hero__heading_1xib4_117 {
+._hero__heading_1itry_133 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     text-wrap: balance;
 }
 
-._hero__heading--default_1xib4_123 {
+._hero__heading--default_1itry_139 {
     font: var(--typography-heading-lg);
 }
 
-._hero__heading--large_1xib4_127 {
+._hero__heading--large_1itry_143 {
     font: var(--typography-heading-xl);
 }
 
-._hero__heading--small_1xib4_131 {
+._hero__heading--small_1itry_147 {
     font: var(--typography-heading-md);
 }
 
-._hero__description_1xib4_135 {
+._hero__description_1itry_151 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     font: var(--typography-body-md);
     text-wrap: pretty;
 }
 
-._hero__description_1xib4_135 p {
+._hero__description_1itry_151 p {
     margin: 0;
 }
 
-._hero__description_1xib4_135 p + p {
+._hero__description_1itry_151 p + p {
     margin-top: var(--spacing-space-12);
 }
 
-._hero__actions_1xib4_150 {
+._hero__actions_1itry_166 {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
@@ -156,83 +172,74 @@
 }
 
 @container hero (min-width: 768px) {
-    ._hero__background_1xib4_11 {
-        height: 460px;
+    ._hero__content_1itry_87,
+    ._hero__background_1itry_16 {
+        --_hero-content-pad-start: var(--spacing-space-40);
+        --_hero-content-pad-end: var(--spacing-space-40);
+        --_hero-card-fraction: 0.5;
+    }
+
+    ._hero__background_1itry_16 {
+        height: auto;
+        bottom: var(--spacing-space-40);
     }
 
-    ._hero__content_1xib4_71 {
+    ._hero__content_1itry_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_1itry_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_1itry_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_1itry_87,
+    ._hero__background_1itry_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_1itry_87 {
         min-height: 440px;
-        padding-left: var(--spacing-space-80);
-        padding-right: var(--spacing-space-40);
     }
 
-    ._hero__card_1xib4_86 {
-        width: 60%;
+    ._hero__card_1itry_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_1itry_75 {
         display: none;
     }
 
-    ._hero__background_1xib4_11 {
+    ._hero__background_1itry_16 {
         background-color: Canvas;
     }
 
-    ._hero__card_1xib4_86 {
+    ._hero__card_1itry_102 {
         border: var(--borderwidth-semantic-xs) solid CanvasText;
         box-shadow: none;
     }
 
-    ._hero__logoImage_1xib4_42 {
+    ._hero__logoImageWrap_1itry_47 {
         display: none;
     }
-}
-}
+} }

package/dist/components/Hero/Hero.js

@@ -41,34 +41,32 @@ 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
-                  }
-                )
-              ] }),
-              description != null && /* @__PURE__ */ jsx("div", { className: cn(styles.hero__description, "dds-prose"), children: description })
+        /* @__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,
+                    headingClassByStyle[headingStyle]
+                  ),
+                  children: heading
+                }
+              )
             ] }),
-            hasActions && /* @__PURE__ */ jsxs("div", { className: styles.hero__actions, children: [
-              primaryCta != null && primaryCta,
-              secondaryCta != null && secondaryCta
-            ] })
-          ] }) }),
-          logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, "aria-hidden": "true", children: logoImage })
-        ] })
+            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
+          ] })
+        ] }) }) })
       ]
     }
   );