@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/components/FunctionButton/FunctionButton.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./FunctionButton.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const FunctionButton = ({
+  icon: Icon,
+  variant = "default",
+  size = "default",
+  className,
+  type = "button",
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      className: cn(
+        styles["function-button"],
+        styles[`function-button--${variant}`],
+        { [styles["function-button--large"]]: size === "large" },
+        focusStyles.focusable,
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+    }
+  );
+};
+export {
+  FunctionButton
+};
+//# sourceMappingURL=FunctionButton.js.map

package/dist/components/FunctionButton/FunctionButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.js","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './FunctionButton.module.css';\nimport type { FunctionButtonProps } from './FunctionButton.types';\n\nexport const FunctionButton = ({\n    icon: Icon,\n    variant = 'default',\n    size = 'default',\n    className,\n    type = 'button',\n    ref,\n    ...props\n}: FunctionButtonProps) => {\n    return (\n        <button\n            ref={ref}\n            type={type}\n            className={cn(\n                styles['function-button'],\n                styles[`function-button--${variant}`],\n                { [styles['function-button--large']]: size === 'large' },\n                focusStyles.focusable,\n                className,\n            )}\n            {...props}\n        >\n            <Icon aria-hidden=\"true\" />\n        </button>\n    );\n};\n"],"names":[],"mappings":";;;;AAKO,MAAM,iBAAiB,CAAC;AAAA,EAC3B,MAAM;AAAA,EACN,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACP,MAA2B;AACvB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACP,OAAO,iBAAiB;AAAA,QACxB,OAAO,oBAAoB,OAAO,EAAE;AAAA,QACpC,EAAE,CAAC,OAAO,wBAAwB,CAAC,GAAG,SAAS,QAAA;AAAA,QAC/C,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAA,oBAAC,MAAA,EAAK,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrC;"}

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

@@ -0,0 +1,11 @@
+require('./FunctionButton.css');
+"use strict";
+const styles = {
+  "function-button": "_function-button_kp4nc_1",
+  "function-button--large": "_function-button--large_kp4nc_25",
+  "function-button--default": "_function-button--default_kp4nc_35",
+  "function-button--circle": "_function-button--circle_kp4nc_49",
+  "function-button--ghost": "_function-button--ghost_kp4nc_65"
+};
+module.exports = styles;
+//# sourceMappingURL=FunctionButton.module.css.cjs.map

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

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

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

@@ -0,0 +1,12 @@
+import './FunctionButton.css';
+const styles = {
+  "function-button": "_function-button_kp4nc_1",
+  "function-button--large": "_function-button--large_kp4nc_25",
+  "function-button--default": "_function-button--default_kp4nc_35",
+  "function-button--circle": "_function-button--circle_kp4nc_49",
+  "function-button--ghost": "_function-button--ghost_kp4nc_65"
+};
+export {
+  styles as default
+};
+//# sourceMappingURL=FunctionButton.module.css.js.map

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

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

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

@@ -0,0 +1,21 @@
+import { ComponentPropsWithRef, ComponentType, SVGProps } from 'react';
+export type FunctionButtonVariant = 'default' | 'circle' | 'ghost';
+export type FunctionButtonSize = 'default' | 'large';
+export type FunctionButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type FunctionButtonAccessibleName = {
+    readonly 'aria-label': string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+};
+export type FunctionButtonProps = Omit<ComponentPropsWithRef<'button'>, 'aria-label' | 'aria-labelledby' | 'children'> & FunctionButtonAccessibleName & {
+    /** Icon component rendered as decorative content. */
+    readonly icon: FunctionButtonIcon;
+    /** Visual button style. @default 'default' */
+    readonly variant?: FunctionButtonVariant;
+    /** Control size. @default 'default' */
+    readonly size?: FunctionButtonSize;
+};
+export {};
+//# sourceMappingURL=FunctionButton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FunctionButton.types.d.ts","sourceRoot":"","sources":["../../../src/components/FunctionButton/FunctionButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5E,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AACnE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAExE,KAAK,4BAA4B,GAC3B;IACI,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,CAAC;AAER,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAClC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,YAAY,GAAG,iBAAiB,GAAG,UAAU,CAChD,GACG,4BAA4B,GAAG;IAC3B,qDAAqD;IACrD,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC;IAClC,8CAA8C;IAC9C,QAAQ,CAAC,OAAO,CAAC,EAAE,qBAAqB,CAAC;IACzC,uCAAuC;IACvC,QAAQ,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC;CACtC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { FunctionButton } from './FunctionButton';
+export type { FunctionButtonIcon, FunctionButtonProps, FunctionButtonSize, FunctionButtonVariant, } from './FunctionButton.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FunctionButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACR,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,GACxB,MAAM,wBAAwB,CAAC"}

package/dist/components/Hero/Hero.cjs

@@ -11,6 +11,7 @@ const Hero = ({
   heading,
   description,
   headingLevel = "h1",
+  headingStyle = "default",
   Image,
   imageProps,
   LogoImage,
@@ -27,39 +28,52 @@ const Hero = ({
   const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? "img" : void 0);
   const image = ResolvedImage != null ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedImage, { ...imageProps }) : void 0;
   const logoImage = ResolvedLogoImage != null ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedLogoImage, { ...logoImageProps }) : void 0;
+  const HeadingLevel = headingLevel;
   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), 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
-            }
-          )
+  const ariaLabelledBy = props["aria-label"] ? void 0 : props["aria-labelledby"] || headingId;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      ref,
+      ...props,
+      className: cn.cn(Hero_module.default.hero, className),
+      "aria-label": props["aria-label"],
+      "aria-labelledby": ariaLabelledBy,
+      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" })
         ] }),
-        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
-      ] })
-    ] }) }) })
-  ] });
+        /* @__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 })
+            ] }),
+            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 })
+        ] })
+      ]
+    }
+  );
 };
 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 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;;"}
+{"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;;"}

package/dist/components/Hero/Hero.css

@@ -1,4 +1,4 @@
-@layer dds-components {._hero_c98qx_1 {
+@layer dds-components {._hero_1xib4_1 {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -8,30 +8,30 @@
     container-type: inline-size;
 }
 
-._hero__background_c98qx_11 {
+._hero__background_1xib4_11 {
     position: absolute;
     inset-inline: 0;
     top: 0;
-    height: 440px;
+    height: 280px;
     background-color: var(--color-semantic-surface-primary-soft);
     overflow: clip;
 }
 
-._hero__backgroundImageComponent_c98qx_20 {
+._hero__backgroundImageComponent_1xib4_20 {
     width: 100%;
     height: 100%;
 }
 
-._hero__backgroundImageComponent_c98qx_20 > * {
+._hero__backgroundImageComponent_1xib4_20 > * {
     width: 100%;
     height: 100%;
 }
 
-._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 {
+._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 {
     display: block;
     width: 100%;
     height: 100%;
@@ -39,28 +39,24 @@
     object-position: right center;
 }
 
-._hero__logoImage_c98qx_42 {
+._hero__logoImage_1xib4_42 {
     position: absolute;
-    inset-inline: 0;
-    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0;
     display: flex;
-    align-items: flex-end;
-    justify-content: flex-end;
-    width: min(100%, 1280px);
-    height: 100%;
-    margin-inline: auto;
-    padding-left: var(--spacing-space-80);
-    padding-right: var(--spacing-space-40);
-    padding-bottom: var(--spacing-space-20);
+    align-items: center;
+    justify-content: center;
+    height: 200px;
+    padding-inline: var(--spacing-space-20);
 }
 
-._hero__logoImage_c98qx_42 > * {
-    width: min(430px, 43vw);
-    max-width: 100%;
+._hero__logoImage_1xib4_42 > * {
     height: auto;
+    max-height: 80%;
 }
 
-._hero__overlay_c98qx_63 {
+._hero__overlay_1xib4_59 {
     position: absolute;
     inset-inline: 0;
     bottom: 0;
@@ -72,177 +68,170 @@
     );
 }
 
-._hero__content_c98qx_75 {
+._hero__content_1xib4_71 {
     position: relative;
     z-index: 1;
     display: flex;
-    min-height: 440px;
-    align-items: flex-end;
+    flex-direction: column;
+    align-items: stretch;
     justify-content: flex-start;
     max-width: 1280px;
-    gap: var(--spacing-space-40);
+    gap: 0;
     width: 100%;
     margin-inline: auto;
-    padding-left: var(--spacing-space-80);
-    padding-right: var(--spacing-space-40);
+    padding-top: 200px;
+    padding-inline: var(--spacing-space-20);
 }
 
-._hero__card_c98qx_90 {
-    flex: 0 0 650px;
-    width: 650px;
+._hero__card_1xib4_86 {
     min-width: 0;
-    max-width: 650px;
+    width: 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-40);
+    padding: var(--spacing-space-20);
 }
 
-._hero__main_c98qx_101 {
+._hero__main_1xib4_95 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-40);
 }
 
-._hero__text_c98qx_107 {
+._hero__text_1xib4_101 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-20);
 }
 
-._hero__header_c98qx_113 {
+._hero__header_1xib4_107 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-8);
 }
 
-._hero__label_c98qx_119 {
+._hero__label_1xib4_113 {
     align-self: flex-start;
 }
 
-._hero__heading_c98qx_123 {
+._hero__heading_1xib4_117 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     text-wrap: balance;
 }
 
-._hero__heading--xl_c98qx_129 {
-    font: var(--typography-heading-xl);
-}
-
-._hero__heading--lg_c98qx_133 {
+._hero__heading--default_1xib4_123 {
     font: var(--typography-heading-lg);
 }
 
-._hero__heading--md_c98qx_137 {
-    font: var(--typography-heading-md);
-}
-
-._hero__heading--sm_c98qx_141 {
-    font: var(--typography-heading-sm);
-}
-
-._hero__heading--xs_c98qx_145 {
-    font: var(--typography-heading-xs);
+._hero__heading--large_1xib4_127 {
+    font: var(--typography-heading-xl);
 }
 
-._hero__heading--xxs_c98qx_149 {
-    font: var(--typography-heading-xxs);
+._hero__heading--small_1xib4_131 {
+    font: var(--typography-heading-md);
 }
 
-._hero__description_c98qx_153 {
+._hero__description_1xib4_135 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
-    font: var(--typography-body-lg);
+    font: var(--typography-body-md);
     text-wrap: pretty;
 }
 
-._hero__description_c98qx_153 p {
+._hero__description_1xib4_135 p {
     margin: 0;
 }
 
-._hero__description_c98qx_153 p + p {
+._hero__description_1xib4_135 p + p {
     margin-top: var(--spacing-space-12);
 }
 
-._hero__actions_c98qx_168 {
+._hero__actions_1xib4_150 {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: var(--spacing-space-16);
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
 }
 
-@container hero (max-width: 1023px) {
-    ._hero__background_c98qx_11 {
+@container hero (min-width: 768px) {
+    ._hero__background_1xib4_11 {
         height: 460px;
     }
 
-    ._hero__content_c98qx_75 {
+    ._hero__content_1xib4_71 {
+        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_c98qx_90 {
-        flex-basis: 335px;
-        max-width: 335px;
-        padding: var(--spacing-space-20);
+    ._hero__card_1xib4_86 {
+        width: 50%;
+        max-width: 650px;
     }
 
-    ._hero__logoImage_c98qx_42 {
-        padding-left: var(--spacing-space-40);
+    ._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_c98qx_42 > * {
-        width: min(360px, 48vw);
-    }
-
-    ._hero__actions_c98qx_168 {
-        flex-direction: column;
-        flex-wrap: nowrap;
+    ._hero__logoImage_1xib4_42 > * {
+        width: auto;
+        max-width: 90%;
+        max-height: 100%;
     }
 }
 
-@container hero (max-width: 767px) {
-    ._hero__background_c98qx_11 {
-        height: 280px;
+@container hero (min-width: 1024px) {
+    ._hero__background_1xib4_11 {
+        height: 440px;
     }
 
-    ._hero__content_c98qx_75 {
-        min-height: auto;
-        flex-direction: column;
-        align-items: stretch;
-        gap: 0;
-        padding-top: 200px;
-        padding-inline: var(--spacing-space-20);
+    ._hero__content_1xib4_71 {
+        min-height: 440px;
+        padding-left: var(--spacing-space-80);
+        padding-right: var(--spacing-space-40);
     }
 
-    ._hero__card_c98qx_90 {
-        flex-basis: auto;
-        width: 100%;
-        max-width: none;
+    ._hero__card_1xib4_86 {
+        width: 60%;
+        max-width: initial;
+        padding: var(--spacing-space-40);
     }
 
-    ._hero__logoImage_c98qx_42 {
-        display: none;
+    ._hero__logoImage_1xib4_42 {
+        max-height: 440px;
     }
 }
 
 @media (forced-colors: active) {
-    ._hero__overlay_c98qx_63 {
+    ._hero__overlay_1xib4_59 {
         display: none;
     }
 
-    ._hero__background_c98qx_11 {
+    ._hero__background_1xib4_11 {
         background-color: Canvas;
     }
 
-    ._hero__card_c98qx_90 {
+    ._hero__card_1xib4_86 {
         border: var(--borderwidth-semantic-xs) solid CanvasText;
         box-shadow: none;
     }
 
-    ._hero__logoImage_c98qx_42 {
+    ._hero__logoImage_1xib4_42 {
         display: none;
     }
 }

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

@@ -1,3 +1,3 @@
 import { HeroProps } from './Hero.types';
-export declare const Hero: ({ label, heading, description, headingLevel, 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, primaryCta, secondaryCta, 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,kKAelB,SAAS,4CAgEX,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,gLAgBlB,SAAS,4CAuEX,CAAC"}