@dnanpm/ui-components 0.9.0 → 0.10.0

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

@@ -1,61 +1,61 @@
 require('./Footer.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const footer = "_footer_1lum3_8";
-const footer__inner = "_footer__inner_1lum3_31";
-const footer__top = "_footer__top_1lum3_36";
-const footer__bottom = "_footer__bottom_1lum3_37";
-const footer__container = "_footer__container_1lum3_122";
-const footer__column = "_footer__column_1lum3_156";
-const footer__link = "_footer__link_1lum3_111";
-const footer__action = "_footer__action_1lum3_191";
-const footer__accordion = "_footer__accordion_1lum3_224";
-const footer__divider = "_footer__divider_1lum3_235";
-const footer__meta = "_footer__meta_1lum3_249";
-const footer__language = "_footer__language_1lum3_276";
-const footer__organization = "_footer__organization_1lum3_346";
-const footer__copyright = "_footer__copyright_1lum3_407";
-const footer__apps = "_footer__apps_1lum3_413";
-const footer__badges = "_footer__badges_1lum3_431";
-const footer__badge = "_footer__badge_1lum3_431";
+const footer = "_footer_1iwfy_8";
+const footer__inner = "_footer__inner_1iwfy_31";
+const footer__top = "_footer__top_1iwfy_36";
+const footer__bottom = "_footer__bottom_1iwfy_37";
+const footer__container = "_footer__container_1iwfy_122";
+const footer__column = "_footer__column_1iwfy_156";
+const footer__link = "_footer__link_1iwfy_111";
+const footer__action = "_footer__action_1iwfy_191";
+const footer__accordion = "_footer__accordion_1iwfy_224";
+const footer__divider = "_footer__divider_1iwfy_235";
+const footer__meta = "_footer__meta_1iwfy_249";
+const footer__language = "_footer__language_1iwfy_276";
+const footer__organization = "_footer__organization_1iwfy_346";
+const footer__copyright = "_footer__copyright_1iwfy_407";
+const footer__apps = "_footer__apps_1iwfy_413";
+const footer__badges = "_footer__badges_1iwfy_431";
+const footer__badge = "_footer__badge_1iwfy_431";
 const styles = {
   footer,
   footer__inner,
   footer__top,
   footer__bottom,
-  "footer__top-row": "_footer__top-row_1lum3_61",
-  "footer__top-column": "_footer__top-column_1lum3_76",
-  "footer__top-heading": "_footer__top-heading_1lum3_84",
-  "footer__top-icon": "_footer__top-icon_1lum3_91",
-  "footer__top-title": "_footer__top-title_1lum3_97",
-  "footer__top-links": "_footer__top-links_1lum3_102",
-  "footer__link-list": "_footer__link-list_1lum3_111",
-  "footer__top-link": "_footer__top-link_1lum3_102",
+  "footer__top-row": "_footer__top-row_1iwfy_61",
+  "footer__top-column": "_footer__top-column_1iwfy_76",
+  "footer__top-heading": "_footer__top-heading_1iwfy_84",
+  "footer__top-icon": "_footer__top-icon_1iwfy_91",
+  "footer__top-title": "_footer__top-title_1iwfy_97",
+  "footer__top-links": "_footer__top-links_1iwfy_102",
+  "footer__link-list": "_footer__link-list_1iwfy_111",
+  "footer__top-link": "_footer__top-link_1iwfy_102",
   footer__container,
-  "footer__nav-accordions": "_footer__nav-accordions_1lum3_135",
-  "footer__nav-columns": "_footer__nav-columns_1lum3_139",
+  "footer__nav-accordions": "_footer__nav-accordions_1iwfy_135",
+  "footer__nav-columns": "_footer__nav-columns_1iwfy_139",
   footer__column,
-  "footer__column-heading": "_footer__column-heading_1lum3_164",
+  "footer__column-heading": "_footer__column-heading_1iwfy_164",
   footer__link,
   footer__action,
   footer__accordion,
   footer__divider,
-  "footer__divider--after-nav": "_footer__divider--after-nav_1lum3_242",
+  "footer__divider--after-nav": "_footer__divider--after-nav_1iwfy_242",
   footer__meta,
-  "footer__meta-center": "_footer__meta-center_1lum3_265",
-  "footer__language-list": "_footer__language-list_1lum3_276",
+  "footer__meta-center": "_footer__meta-center_1iwfy_265",
+  "footer__language-list": "_footer__language-list_1iwfy_276",
   footer__language,
-  "footer__language--current": "_footer__language--current_1lum3_303",
-  "footer__social-list": "_footer__social-list_1lum3_315",
-  "footer__social-link": "_footer__social-link_1lum3_323",
-  "footer__social-icon": "_footer__social-icon_1lum3_338",
-  "footer__organization-list": "_footer__organization-list_1lum3_346",
+  "footer__language--current": "_footer__language--current_1iwfy_303",
+  "footer__social-list": "_footer__social-list_1iwfy_315",
+  "footer__social-link": "_footer__social-link_1iwfy_323",
+  "footer__social-icon": "_footer__social-icon_1iwfy_338",
+  "footer__organization-list": "_footer__organization-list_1iwfy_346",
   footer__organization,
-  "footer__organization--current": "_footer__organization--current_1lum3_370",
-  "footer__legal-list": "_footer__legal-list_1lum3_383",
+  "footer__organization--current": "_footer__organization--current_1iwfy_370",
+  "footer__legal-list": "_footer__legal-list_1iwfy_383",
   footer__copyright,
   footer__apps,
-  "footer__apps-title": "_footer__apps-title_1lum3_427",
+  "footer__apps-title": "_footer__apps-title_1iwfy_427",
   footer__badges,
   footer__badge
 };

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

@@ -1,59 +1,59 @@
 import './Footer.css';
-const footer = "_footer_1lum3_8";
-const footer__inner = "_footer__inner_1lum3_31";
-const footer__top = "_footer__top_1lum3_36";
-const footer__bottom = "_footer__bottom_1lum3_37";
-const footer__container = "_footer__container_1lum3_122";
-const footer__column = "_footer__column_1lum3_156";
-const footer__link = "_footer__link_1lum3_111";
-const footer__action = "_footer__action_1lum3_191";
-const footer__accordion = "_footer__accordion_1lum3_224";
-const footer__divider = "_footer__divider_1lum3_235";
-const footer__meta = "_footer__meta_1lum3_249";
-const footer__language = "_footer__language_1lum3_276";
-const footer__organization = "_footer__organization_1lum3_346";
-const footer__copyright = "_footer__copyright_1lum3_407";
-const footer__apps = "_footer__apps_1lum3_413";
-const footer__badges = "_footer__badges_1lum3_431";
-const footer__badge = "_footer__badge_1lum3_431";
+const footer = "_footer_1iwfy_8";
+const footer__inner = "_footer__inner_1iwfy_31";
+const footer__top = "_footer__top_1iwfy_36";
+const footer__bottom = "_footer__bottom_1iwfy_37";
+const footer__container = "_footer__container_1iwfy_122";
+const footer__column = "_footer__column_1iwfy_156";
+const footer__link = "_footer__link_1iwfy_111";
+const footer__action = "_footer__action_1iwfy_191";
+const footer__accordion = "_footer__accordion_1iwfy_224";
+const footer__divider = "_footer__divider_1iwfy_235";
+const footer__meta = "_footer__meta_1iwfy_249";
+const footer__language = "_footer__language_1iwfy_276";
+const footer__organization = "_footer__organization_1iwfy_346";
+const footer__copyright = "_footer__copyright_1iwfy_407";
+const footer__apps = "_footer__apps_1iwfy_413";
+const footer__badges = "_footer__badges_1iwfy_431";
+const footer__badge = "_footer__badge_1iwfy_431";
 const styles = {
   footer,
   footer__inner,
   footer__top,
   footer__bottom,
-  "footer__top-row": "_footer__top-row_1lum3_61",
-  "footer__top-column": "_footer__top-column_1lum3_76",
-  "footer__top-heading": "_footer__top-heading_1lum3_84",
-  "footer__top-icon": "_footer__top-icon_1lum3_91",
-  "footer__top-title": "_footer__top-title_1lum3_97",
-  "footer__top-links": "_footer__top-links_1lum3_102",
-  "footer__link-list": "_footer__link-list_1lum3_111",
-  "footer__top-link": "_footer__top-link_1lum3_102",
+  "footer__top-row": "_footer__top-row_1iwfy_61",
+  "footer__top-column": "_footer__top-column_1iwfy_76",
+  "footer__top-heading": "_footer__top-heading_1iwfy_84",
+  "footer__top-icon": "_footer__top-icon_1iwfy_91",
+  "footer__top-title": "_footer__top-title_1iwfy_97",
+  "footer__top-links": "_footer__top-links_1iwfy_102",
+  "footer__link-list": "_footer__link-list_1iwfy_111",
+  "footer__top-link": "_footer__top-link_1iwfy_102",
   footer__container,
-  "footer__nav-accordions": "_footer__nav-accordions_1lum3_135",
-  "footer__nav-columns": "_footer__nav-columns_1lum3_139",
+  "footer__nav-accordions": "_footer__nav-accordions_1iwfy_135",
+  "footer__nav-columns": "_footer__nav-columns_1iwfy_139",
   footer__column,
-  "footer__column-heading": "_footer__column-heading_1lum3_164",
+  "footer__column-heading": "_footer__column-heading_1iwfy_164",
   footer__link,
   footer__action,
   footer__accordion,
   footer__divider,
-  "footer__divider--after-nav": "_footer__divider--after-nav_1lum3_242",
+  "footer__divider--after-nav": "_footer__divider--after-nav_1iwfy_242",
   footer__meta,
-  "footer__meta-center": "_footer__meta-center_1lum3_265",
-  "footer__language-list": "_footer__language-list_1lum3_276",
+  "footer__meta-center": "_footer__meta-center_1iwfy_265",
+  "footer__language-list": "_footer__language-list_1iwfy_276",
   footer__language,
-  "footer__language--current": "_footer__language--current_1lum3_303",
-  "footer__social-list": "_footer__social-list_1lum3_315",
-  "footer__social-link": "_footer__social-link_1lum3_323",
-  "footer__social-icon": "_footer__social-icon_1lum3_338",
-  "footer__organization-list": "_footer__organization-list_1lum3_346",
+  "footer__language--current": "_footer__language--current_1iwfy_303",
+  "footer__social-list": "_footer__social-list_1iwfy_315",
+  "footer__social-link": "_footer__social-link_1iwfy_323",
+  "footer__social-icon": "_footer__social-icon_1iwfy_338",
+  "footer__organization-list": "_footer__organization-list_1iwfy_346",
   footer__organization,
-  "footer__organization--current": "_footer__organization--current_1lum3_370",
-  "footer__legal-list": "_footer__legal-list_1lum3_383",
+  "footer__organization--current": "_footer__organization--current_1iwfy_370",
+  "footer__legal-list": "_footer__legal-list_1iwfy_383",
   footer__copyright,
   footer__apps,
-  "footer__apps-title": "_footer__apps-title_1lum3_427",
+  "footer__apps-title": "_footer__apps-title_1iwfy_427",
   footer__badges,
   footer__badge
 };

package/dist/components/FunctionButton/FunctionButton.cjs

@@ -1,7 +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 index = require("../../styles/utils/index.cjs");
 const FunctionButton_module = require("./FunctionButton.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const FunctionButton = ({
@@ -22,7 +22,7 @@ const FunctionButton = ({
         FunctionButton_module["function-button"],
         FunctionButton_module[`function-button--${variant}`],
         { [FunctionButton_module["function-button--large"]]: size === "large" },
-        focus_module.default.focusable,
+        index.focusStyles.focusable,
         className
       ),
       ...props,

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

@@ -1 +1 @@
-{"version":3,"file":"FunctionButton.cjs","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":["jsx","cn","styles","focusStyles"],"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,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,sBAAO,iBAAiB;AAAA,QACxBA,sBAAO,oBAAoB,OAAO,EAAE;AAAA,QACpC,EAAE,CAACA,sBAAO,wBAAwB,CAAC,GAAG,SAAS,QAAA;AAAA,QAC/CC,aAAAA,QAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAAH,2BAAAA,IAAC,MAAA,EAAK,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrC;;"}
+{"version":3,"file":"FunctionButton.cjs","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\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":["jsx","cn","styles","focusStyles"],"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,SACIA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,sBAAO,iBAAiB;AAAA,QACxBA,sBAAO,oBAAoB,OAAO,EAAE;AAAA,QACpC,EAAE,CAACA,sBAAO,wBAAwB,CAAC,GAAG,SAAS,QAAA;AAAA,QAC/CC,MAAAA,YAAY;AAAA,QACZ;AAAA,MAAA;AAAA,MAEH,GAAG;AAAA,MAEJ,UAAAH,2BAAAA,IAAC,MAAA,EAAK,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGrC;;"}

package/dist/components/FunctionButton/FunctionButton.css

@@ -121,4 +121,8 @@
         border-color: GrayText;
         color: GrayText;
     }
-} }
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/FunctionButton/FunctionButton.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles } from "../../styles/utils/index.js";
 import styles from "./FunctionButton.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 const FunctionButton = ({

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

@@ -1 +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;"}
+{"version":3,"file":"FunctionButton.js","sources":["../../../src/components/FunctionButton/FunctionButton.tsx"],"sourcesContent":["import { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\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/Hero/Hero.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const Hero_module = require("./Hero.module.css.cjs");
 const Hero_utils = require("./Hero.utils.cjs");
 const cn = require("../../utils/cn/cn.cjs");
@@ -17,8 +17,7 @@ const Hero = ({
   LogoImage,
   logoImageProps,
   backgroundColor,
-  primaryCta,
-  secondaryCta,
+  actions,
   className,
   ref,
   ...props
@@ -29,7 +28,7 @@ const Hero = ({
   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 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__ */ jsxRuntime.jsxs(
@@ -46,29 +45,33 @@ const Hero = ({
           /* @__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.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
-                }
-              )
-            ] }),
-            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.jsx("div", { className: Hero_module.default.hero__content, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn.cn(Hero_module.default.hero__card, index.elevationStyles.elevationHigh),
+            "data-color-scheme": "light",
+            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.jsx("div", { className: Hero_module.default.hero__actions, children: actions })
+            ] })
+          }
+        ) })
       ]
     }
   );

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                {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;;"}
+{"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';\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":["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,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,WAAW,QAAQ,OAAO,YAAY;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,QAEAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,eACnB,UAAAC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWF,GAAAA,GAAGC,YAAAA,QAAO,YAAYE,MAAAA,gBAAgB,aAAa;AAAA,YAC9D,qBAAkB;AAAA,YAElB,UAAAJ,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,cAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,gBAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,cAClB,UAAA;AAAA,kBAAA,SAAS,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,aAAc,UAAA,OAAM;AAAA,kBAC7DC,2BAAAA;AAAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,IAAI;AAAA,sBACJ,WAAWF,GAAAA;AAAAA,wBACPC,YAAAA,QAAO;AAAA,wBACPG,WAAAA,oBAAoB,YAAY;AAAA,sBAAA;AAAA,sBAGnC,UAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACL,GACJ;AAAA,gBACC,eAAe,QACZF,+BAAC,OAAA,EAAI,WAAWF,MAAGC,YAAAA,QAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,cAAA,GAER;AAAA,cAEC,cAAcC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,eAAgB,UAAA,QAAA,CAAQ;AAAA,YAAA,EAAA,CAClE;AAAA,UAAA;AAAA,QAAA,EACJ,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}