@dnanpm/ui-components 0.6.0 → 0.8.0

package/dist/components/Hero/Hero.js

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import elevationStyles from "../../styles/utils/elevation.module.css.js";
 import styles from "./Hero.module.css.js";
-import { headingClassByLevel } from "./Hero.utils.js";
+import { headingClassByStyle } from "./Hero.utils.js";
 import { cn } from "../../utils/cn/cn.js";
 const Hero = ({
   label,
   heading,
   description,
   headingLevel = "h1",
+  headingStyle = "default",
   Image,
   imageProps,
   LogoImage,
@@ -25,39 +26,52 @@ const Hero = ({
   const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? "img" : void 0);
   const image = ResolvedImage != null ? /* @__PURE__ */ jsx(ResolvedImage, { ...imageProps }) : void 0;
   const logoImage = ResolvedLogoImage != null ? /* @__PURE__ */ jsx(ResolvedLogoImage, { ...logoImageProps }) : void 0;
+  const HeadingLevel = headingLevel;
   const hasActions = primaryCta != null || secondaryCta != null;
   const backgroundStyle = image == null && backgroundColor != null ? { backgroundColor } : void 0;
-  const HeadingLevel = headingLevel;
-  return /* @__PURE__ */ jsxs("div", { ref, ...props, className: cn(styles.hero, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.hero__background, style: backgroundStyle, children: [
-      image != null && /* @__PURE__ */ jsx("div", { className: styles.hero__backgroundImageComponent, "aria-hidden": "true", children: image }),
-      logoImage != null && /* @__PURE__ */ jsx("div", { className: styles.hero__logoImage, "aria-hidden": "true", children: logoImage }),
-      /* @__PURE__ */ jsx("div", { className: styles.hero__overlay, "aria-hidden": "true" })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: styles.hero__content, children: /* @__PURE__ */ jsx("div", { className: cn(styles.hero__card, elevationStyles.elevationHigh), children: /* @__PURE__ */ jsxs("div", { className: styles.hero__main, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.hero__text, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.hero__header, children: [
-          label != null && /* @__PURE__ */ jsx("div", { className: styles.hero__label, children: label }),
-          /* @__PURE__ */ jsx(
-            HeadingLevel,
-            {
-              id: headingId,
-              className: cn(
-                styles.hero__heading,
-                headingClassByLevel[headingLevel]
-              ),
-              children: heading
-            }
-          )
+  const ariaLabelledBy = props["aria-label"] ? void 0 : props["aria-labelledby"] || headingId;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref,
+      ...props,
+      className: cn(styles.hero, className),
+      "aria-label": props["aria-label"],
+      "aria-labelledby": ariaLabelledBy,
+      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" })
         ] }),
-        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
-      ] })
-    ] }) }) })
-  ] });
+        /* @__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 })
+            ] }),
+            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 })
+        ] })
+      ]
+    }
+  );
 };
 export {
   Hero

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByLevel } from './Hero.utils';\n\nexport const Hero = ({\n    label,\n    heading,\n    description,\n    headingLevel = 'h1',\n    Image,\n    imageProps,\n    LogoImage,\n    logoImageProps,\n    backgroundColor,\n    primaryCta,\n    secondaryCta,\n    className,\n    ref,\n    ...props\n}: HeroProps) => {\n    const headingId = useId();\n\n    const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n    const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n    const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n    const logoImage =\n        ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n\n    const hasActions = primaryCta != null || secondaryCta != null;\n    const backgroundStyle =\n        image == null && backgroundColor != null ? { backgroundColor } : undefined;\n    const HeadingLevel = headingLevel;\n\n    return (\n        <div ref={ref} {...props} className={cn(styles.hero, className)}>\n            <div className={styles.hero__background} style={backgroundStyle}>\n                {image != null && (\n                    <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n                        {image}\n                    </div>\n                )}\n                {logoImage != null && (\n                    <div className={styles.hero__logoImage} aria-hidden=\"true\">\n                        {logoImage}\n                    </div>\n                )}\n                <div className={styles.hero__overlay} aria-hidden=\"true\" />\n            </div>\n\n            <div className={styles.hero__content}>\n                <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n                    <div className={styles.hero__main}>\n                        <div className={styles.hero__text}>\n                            <div className={styles.hero__header}>\n                                {label != null && <div className={styles.hero__label}>{label}</div>}\n                                <HeadingLevel\n                                    id={headingId}\n                                    className={cn(\n                                        styles.hero__heading,\n                                        headingClassByLevel[headingLevel],\n                                    )}\n                                >\n                                    {heading}\n                                </HeadingLevel>\n                            </div>\n                            {description != null && (\n                                <div className={cn(styles.hero__description, 'dds-prose')}>\n                                    {description}\n                                </div>\n                            )}\n                        </div>\n\n                        {hasActions && (\n                            <div className={styles.hero__actions}>\n                                {primaryCta != null && primaryCta}\n                                {secondaryCta != null && secondaryCta}\n                            </div>\n                        )}\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAE5E,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,eAAe;AAErB,SACI,qBAAC,OAAA,EAAI,KAAW,GAAG,OAAO,WAAW,GAAG,OAAO,MAAM,SAAS,GAC1D,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,MAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,MAEH,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,0BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,IAAA,GAC7D;AAAA,wBAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,UAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,UAC7D;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,IAAI;AAAA,cACJ,WAAW;AAAA,gBACP,OAAO;AAAA,gBACP,oBAAoB,YAAY;AAAA,cAAA;AAAA,cAGnC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL,GACJ;AAAA,QACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,MAAA,GAER;AAAA,MAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,QAAA,cAAc,QAAQ;AAAA,QACtB,gBAAgB,QAAQ;AAAA,MAAA,EAAA,CAC7B;AAAA,IAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n    label,\n    heading,\n    description,\n    headingLevel = 'h1',\n    headingStyle = 'default',\n    Image,\n    imageProps,\n    LogoImage,\n    logoImageProps,\n    backgroundColor,\n    primaryCta,\n    secondaryCta,\n    className,\n    ref,\n    ...props\n}: HeroProps) => {\n    const headingId = useId();\n\n    const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n    const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n    const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n    const logoImage =\n        ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n    const HeadingLevel = headingLevel;\n\n    const hasActions = primaryCta != null || secondaryCta != null;\n    const backgroundStyle =\n        image == null && backgroundColor != null ? { backgroundColor } : undefined;\n    const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] || headingId;\n\n    return (\n        <section\n            ref={ref}\n            {...props}\n            className={cn(styles.hero, className)}\n            aria-label={props['aria-label']}\n            aria-labelledby={ariaLabelledBy}\n        >\n            <div className={styles.hero__background} style={backgroundStyle}>\n                {image != null && (\n                    <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n                        {image}\n                    </div>\n                )}\n                <div className={styles.hero__overlay} aria-hidden=\"true\" />\n            </div>\n\n            <div className={styles.hero__content}>\n                <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n                    <div className={styles.hero__main}>\n                        <div className={styles.hero__text}>\n                            <div className={styles.hero__header}>\n                                {label != null && <div className={styles.hero__label}>{label}</div>}\n                                <HeadingLevel\n                                    id={headingId}\n                                    className={cn(\n                                        styles.hero__heading,\n                                        headingClassByStyle[headingStyle],\n                                    )}\n                                >\n                                    {heading}\n                                </HeadingLevel>\n                            </div>\n                            {description != null && (\n                                <div className={cn(styles.hero__description, 'dds-prose')}>\n                                    {description}\n                                </div>\n                            )}\n                        </div>\n\n                        {hasActions && (\n                            <div className={styles.hero__actions}>\n                                {primaryCta != null && primaryCta}\n                                {secondaryCta != null && secondaryCta}\n                            </div>\n                        )}\n                    </div>\n                </div>\n                {logoImage != null && (\n                    <div className={styles.hero__logoImage} aria-hidden=\"true\">\n                        {logoImage}\n                    </div>\n                )}\n            </div>\n        </section>\n    );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,QAEA,qBAAC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,gBAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,gBAC7D;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACG,IAAI;AAAA,oBACJ,WAAW;AAAA,sBACP,OAAO;AAAA,sBACP,oBAAoB,YAAY;AAAA,oBAAA;AAAA,oBAGnC,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACL,GACJ;AAAA,cACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,YAAA,GAER;AAAA,YAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,cAAA,cAAc,QAAQ;AAAA,cACtB,gBAAgB,QAAQ;AAAA,YAAA,EAAA,CAC7B;AAAA,UAAA,EAAA,CAER,EAAA,CACJ;AAAA,UACC,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,QAAA,EAAA,CAER;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,20 +1,20 @@
 require('./Hero.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const hero = "_hero_c98qx_1";
-const hero__background = "_hero__background_c98qx_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
-const hero__logoImage = "_hero__logoImage_c98qx_42";
-const hero__overlay = "_hero__overlay_c98qx_63";
-const hero__content = "_hero__content_c98qx_75";
-const hero__card = "_hero__card_c98qx_90";
-const hero__main = "_hero__main_c98qx_101";
-const hero__text = "_hero__text_c98qx_107";
-const hero__header = "_hero__header_c98qx_113";
-const hero__label = "_hero__label_c98qx_119";
-const hero__heading = "_hero__heading_c98qx_123";
-const hero__description = "_hero__description_c98qx_153";
-const hero__actions = "_hero__actions_c98qx_168";
+const hero = "_hero_1xib4_1";
+const hero__background = "_hero__background_1xib4_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
+const hero__logoImage = "_hero__logoImage_1xib4_42";
+const hero__overlay = "_hero__overlay_1xib4_59";
+const hero__content = "_hero__content_1xib4_71";
+const hero__card = "_hero__card_1xib4_86";
+const hero__main = "_hero__main_1xib4_95";
+const hero__text = "_hero__text_1xib4_101";
+const hero__header = "_hero__header_1xib4_107";
+const hero__label = "_hero__label_1xib4_113";
+const hero__heading = "_hero__heading_1xib4_117";
+const hero__description = "_hero__description_1xib4_135";
+const hero__actions = "_hero__actions_1xib4_150";
 const styles = {
   hero,
   hero__background,
@@ -28,12 +28,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--xl": "_hero__heading--xl_c98qx_129",
-  "hero__heading--lg": "_hero__heading--lg_c98qx_133",
-  "hero__heading--md": "_hero__heading--md_c98qx_137",
-  "hero__heading--sm": "_hero__heading--sm_c98qx_141",
-  "hero__heading--xs": "_hero__heading--xs_c98qx_145",
-  "hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
+  "hero__heading--default": "_hero__heading--default_1xib4_123",
+  "hero__heading--large": "_hero__heading--large_1xib4_127",
+  "hero__heading--small": "_hero__heading--small_1xib4_131",
   hero__description,
   hero__actions
 };

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

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

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

@@ -1,18 +1,18 @@
 import './Hero.css';
-const hero = "_hero_c98qx_1";
-const hero__background = "_hero__background_c98qx_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_c98qx_20";
-const hero__logoImage = "_hero__logoImage_c98qx_42";
-const hero__overlay = "_hero__overlay_c98qx_63";
-const hero__content = "_hero__content_c98qx_75";
-const hero__card = "_hero__card_c98qx_90";
-const hero__main = "_hero__main_c98qx_101";
-const hero__text = "_hero__text_c98qx_107";
-const hero__header = "_hero__header_c98qx_113";
-const hero__label = "_hero__label_c98qx_119";
-const hero__heading = "_hero__heading_c98qx_123";
-const hero__description = "_hero__description_c98qx_153";
-const hero__actions = "_hero__actions_c98qx_168";
+const hero = "_hero_1xib4_1";
+const hero__background = "_hero__background_1xib4_11";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
+const hero__logoImage = "_hero__logoImage_1xib4_42";
+const hero__overlay = "_hero__overlay_1xib4_59";
+const hero__content = "_hero__content_1xib4_71";
+const hero__card = "_hero__card_1xib4_86";
+const hero__main = "_hero__main_1xib4_95";
+const hero__text = "_hero__text_1xib4_101";
+const hero__header = "_hero__header_1xib4_107";
+const hero__label = "_hero__label_1xib4_113";
+const hero__heading = "_hero__heading_1xib4_117";
+const hero__description = "_hero__description_1xib4_135";
+const hero__actions = "_hero__actions_1xib4_150";
 const styles = {
   hero,
   hero__background,
@@ -26,12 +26,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--xl": "_hero__heading--xl_c98qx_129",
-  "hero__heading--lg": "_hero__heading--lg_c98qx_133",
-  "hero__heading--md": "_hero__heading--md_c98qx_137",
-  "hero__heading--sm": "_hero__heading--sm_c98qx_141",
-  "hero__heading--xs": "_hero__heading--xs_c98qx_145",
-  "hero__heading--xxs": "_hero__heading--xxs_c98qx_149",
+  "hero__heading--default": "_hero__heading--default_1xib4_123",
+  "hero__heading--large": "_hero__heading--large_1xib4_127",
+  "hero__heading--small": "_hero__heading--small_1xib4_131",
   hero__description,
   hero__actions
 };

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

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

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

@@ -1,8 +1,9 @@
 import { ComponentPropsWithRef, CSSProperties, ElementType, ReactElement, ReactNode } from 'react';
 export type HeroHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeroHeadingStyle = 'default' | 'large' | 'small';
 export type HeroCommonImageProps = Omit<ComponentPropsWithRef<'img'>, 'ref'>;
 export type HeroImageComponent = ElementType<HeroCommonImageProps>;
-export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {
+export interface HeroProps extends Omit<ComponentPropsWithRef<'section'>, 'children'> {
     /**
      * Optional label element displayed above the heading.
      */
@@ -10,15 +11,19 @@ export interface HeroProps extends Omit<ComponentPropsWithRef<'div'>, 'children'
     /**
      * Main hero heading.
      */
-    readonly heading: string;
+    readonly heading: ReactNode;
     /**
      * Supporting descriptive text.
      */
     readonly description?: ReactNode;
     /**
-     * Heading HTML level. Defaults to `h1`.
+     * Heading HTML level (h1, h2, h3, h4, h5, h6). Defaults to h1.
      */
     readonly headingLevel?: HeroHeadingLevel;
+    /**
+     * Heading text style (default, large or small). Default value is 'default'.
+     */
+    readonly headingStyle?: HeroHeadingStyle;
     /**
      * Decorative image component to use as the Hero background.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;CACxC"}
+{"version":3,"file":"Hero.types.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,YAAY,EACZ,SAAS,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACvE,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;AAC7D,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,CAAC;AAC7E,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,oBAAoB,CAAC,CAAC;AAEnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IACjF;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,gBAAgB,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC;IACpC;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,oBAAoB,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,oBAAoB,CAAC;IAC/C;;OAEG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC5D;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC;IACnC;;OAEG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,YAAY,CAAC;CACxC"}

package/dist/components/Hero/Hero.utils.cjs

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Hero_module = require("./Hero.module.css.cjs");
-const headingClassByLevel = {
-  h1: Hero_module.default["hero__heading--xl"],
-  h2: Hero_module.default["hero__heading--lg"],
-  h3: Hero_module.default["hero__heading--md"],
-  h4: Hero_module.default["hero__heading--sm"],
-  h5: Hero_module.default["hero__heading--xs"],
-  h6: Hero_module.default["hero__heading--xxs"]
+const headingClassByStyle = {
+  default: Hero_module.default["hero__heading--default"],
+  large: Hero_module.default["hero__heading--large"],
+  small: Hero_module.default["hero__heading--small"]
 };
-exports.headingClassByLevel = headingClassByLevel;
+exports.headingClassByStyle = headingClassByStyle;
 //# sourceMappingURL=Hero.utils.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n    h6: styles['hero__heading--xxs'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,mBAAmB;AAAA,EAC9B,IAAIA,YAAAA,QAAO,oBAAoB;AACnC;;"}
+{"version":3,"file":"Hero.utils.cjs","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingStyle } from './Hero.types';\n\nexport const headingClassByStyle: Record<HeroHeadingStyle, string> = {\n    default: styles['hero__heading--default'],\n    large: styles['hero__heading--large'],\n    small: styles['hero__heading--small'],\n};\n"],"names":["styles"],"mappings":";;;AAGO,MAAM,sBAAwD;AAAA,EACjE,SAASA,YAAAA,QAAO,wBAAwB;AAAA,EACxC,OAAOA,YAAAA,QAAO,sBAAsB;AAAA,EACpC,OAAOA,YAAAA,QAAO,sBAAsB;AACxC;;"}

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

@@ -1,3 +1,3 @@
-import { HeroHeadingLevel } from './Hero.types';
-export declare const headingClassByLevel: Record<HeroHeadingLevel, string>;
+import { HeroHeadingStyle } from './Hero.types';
+export declare const headingClassByStyle: Record<HeroHeadingStyle, string>;
 //# sourceMappingURL=Hero.utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOhE,CAAC"}
+{"version":3,"file":"Hero.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Hero/Hero.utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAIhE,CAAC"}

package/dist/components/Hero/Hero.utils.js

@@ -1,13 +1,10 @@
 import styles from "./Hero.module.css.js";
-const headingClassByLevel = {
-  h1: styles["hero__heading--xl"],
-  h2: styles["hero__heading--lg"],
-  h3: styles["hero__heading--md"],
-  h4: styles["hero__heading--sm"],
-  h5: styles["hero__heading--xs"],
-  h6: styles["hero__heading--xxs"]
+const headingClassByStyle = {
+  default: styles["hero__heading--default"],
+  large: styles["hero__heading--large"],
+  small: styles["hero__heading--small"]
 };
 export {
-  headingClassByLevel
+  headingClassByStyle
 };
 //# sourceMappingURL=Hero.utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingLevel } from './Hero.types';\n\nexport const headingClassByLevel: Record<HeroHeadingLevel, string> = {\n    h1: styles['hero__heading--xl'],\n    h2: styles['hero__heading--lg'],\n    h3: styles['hero__heading--md'],\n    h4: styles['hero__heading--sm'],\n    h5: styles['hero__heading--xs'],\n    h6: styles['hero__heading--xxs'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,mBAAmB;AAAA,EAC9B,IAAI,OAAO,oBAAoB;AACnC;"}
+{"version":3,"file":"Hero.utils.js","sources":["../../../src/components/Hero/Hero.utils.ts"],"sourcesContent":["import styles from './Hero.module.css';\nimport type { HeroHeadingStyle } from './Hero.types';\n\nexport const headingClassByStyle: Record<HeroHeadingStyle, string> = {\n    default: styles['hero__heading--default'],\n    large: styles['hero__heading--large'],\n    small: styles['hero__heading--small'],\n};\n"],"names":[],"mappings":";AAGO,MAAM,sBAAwD;AAAA,EACjE,SAAS,OAAO,wBAAwB;AAAA,EACxC,OAAO,OAAO,sBAAsB;AAAA,EACpC,OAAO,OAAO,sBAAsB;AACxC;"}

package/dist/components/IconButton/IconButton.css

@@ -1,4 +1,4 @@
-@layer dds-components {._icon-button_1iv9h_1 {
+@layer dds-components {._icon-button_mhilb_1 {
     --_button-icon-size: 24px;
 
     display: inline-flex;
@@ -8,7 +8,6 @@
     max-width: 100%;
     min-width: 0;
     border: none;
-    border-radius: var(--radius-semantic-sm);
     padding: 0;
     background: transparent;
     font: var(--typography-label-lg-bold);
@@ -20,17 +19,17 @@
         text-decoration-color 0.2s ease-in-out;
 }
 
-._icon-button--normal_1iv9h_23 {
+._icon-button--normal_mhilb_22 {
     font: var(--typography-label-lg-bold);
     --_button-icon-size: 24px;
 }
 
-._icon-button--small_1iv9h_28 {
+._icon-button--small_mhilb_27 {
     font: var(--typography-label-md-bold);
     --_button-icon-size: 20px;
 }
 
-._icon-button__label_1iv9h_33 {
+._icon-button__label_mhilb_32 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -42,7 +41,7 @@
     line-height: var(--typography-line-height-md);
 }
 
-._icon-button__label--wrap_1iv9h_45 {
+._icon-button__label--wrap_mhilb_44 {
     overflow: visible;
     text-overflow: clip;
     white-space: normal;
@@ -50,7 +49,7 @@
     text-align: left;
 }
 
-._icon-button__icon_1iv9h_53 {
+._icon-button__icon_mhilb_52 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -66,26 +65,26 @@
 }
 
 /* Shared interaction states */
-._icon-button_1iv9h_1:hover,
-._icon-button_1iv9h_1:focus-visible {
-    ._icon-button__label_1iv9h_33 {
+._icon-button_mhilb_1:hover,
+._icon-button_mhilb_1:focus-visible {
+    ._icon-button__label_mhilb_32 {
         text-decoration-color: currentColor;
     }
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-primary-hover);
     }
 }
 
-._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
+._icon-button_mhilb_1:active ._icon-button__icon_mhilb_52 {
     color: var(--color-semantic-interactive-primary-active);
 }
 
 /* Optional link coloring */
-._icon-button--link-coloring_1iv9h_85 {
+._icon-button--link-coloring_mhilb_84 {
     color: var(--color-semantic-foreground-link);
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-foreground-link);
     }
 
@@ -93,7 +92,7 @@
     &:focus-visible {
         color: var(--color-semantic-foreground-link-hover);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-foreground-link-hover);
         }
     }
@@ -101,49 +100,49 @@
     &:active {
         color: var(--color-semantic-interactive-primary-active);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-interactive-primary-active);
         }
     }
 }
 
 /* Disabled/loading states */
-._icon-button--disabled_1iv9h_111,
-._icon-button--loading_1iv9h_112 {
+._icon-button--disabled_mhilb_110,
+._icon-button--loading_mhilb_111 {
     pointer-events: none;
 }
 
-._icon-button--disabled_1iv9h_111 {
+._icon-button--disabled_mhilb_110 {
     color: var(--color-semantic-foreground-muted);
 
-    ._icon-button__icon_1iv9h_53 {
+    ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-primary-disabled);
     }
 }
 
 /* Dark scheme overrides */
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._icon-button_1iv9h_1 {
+    ._icon-button_mhilb_1 {
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._icon-button_1iv9h_1 ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1 ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-default);
     }
 
-    ._icon-button_1iv9h_1:hover ._icon-button__icon_1iv9h_53,
-    ._icon-button_1iv9h_1:focus-visible ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1:hover ._icon-button__icon_mhilb_52,
+    ._icon-button_mhilb_1:focus-visible ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-hover);
     }
 
-    ._icon-button_1iv9h_1:active ._icon-button__icon_1iv9h_53 {
+    ._icon-button_mhilb_1:active ._icon-button__icon_mhilb_52 {
         color: var(--color-semantic-interactive-inverse-active);
     }
 
-    ._icon-button--link-coloring_1iv9h_85 {
+    ._icon-button--link-coloring_mhilb_84 {
         color: var(--color-semantic-foreground-inverse);
 
-        ._icon-button__icon_1iv9h_53 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-foreground-inverse);
         }
 
@@ -151,7 +150,7 @@
         &:focus-visible {
             color: var(--color-semantic-foreground-inverse);
 
-            ._icon-button__icon_1iv9h_53 {
+            ._icon-button__icon_mhilb_52 {
                 color: var(--color-semantic-foreground-inverse);
             }
         }
@@ -159,21 +158,21 @@
         &:active {
             color: var(--color-semantic-foreground-inverse);
 
-            ._icon-button__icon_1iv9h_53 {
+            ._icon-button__icon_mhilb_52 {
                 color: var(--color-semantic-foreground-inverse);
             }
         }
     }
 
-    ._icon-button--disabled_1iv9h_111 {
-        ._icon-button__icon_1iv9h_53 {
+    ._icon-button--disabled_mhilb_110 {
+        ._icon-button__icon_mhilb_52 {
             color: var(--color-semantic-interactive-inverse-disabled);
         }
     }
 }
 
 @media (forced-colors: active) {
-    ._icon-button--small_1iv9h_28:focus-visible {
+    ._icon-button--small_mhilb_27:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }

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

@@ -1,15 +1,15 @@
 require('./IconButton.css');
 "use strict";
 const styles = {
-  "icon-button": "_icon-button_1iv9h_1",
-  "icon-button--normal": "_icon-button--normal_1iv9h_23",
-  "icon-button--small": "_icon-button--small_1iv9h_28",
-  "icon-button__label": "_icon-button__label_1iv9h_33",
-  "icon-button__label--wrap": "_icon-button__label--wrap_1iv9h_45",
-  "icon-button__icon": "_icon-button__icon_1iv9h_53",
-  "icon-button--link-coloring": "_icon-button--link-coloring_1iv9h_85",
-  "icon-button--disabled": "_icon-button--disabled_1iv9h_111",
-  "icon-button--loading": "_icon-button--loading_1iv9h_112"
+  "icon-button": "_icon-button_mhilb_1",
+  "icon-button--normal": "_icon-button--normal_mhilb_22",
+  "icon-button--small": "_icon-button--small_mhilb_27",
+  "icon-button__label": "_icon-button__label_mhilb_32",
+  "icon-button__label--wrap": "_icon-button__label--wrap_mhilb_44",
+  "icon-button__icon": "_icon-button__icon_mhilb_52",
+  "icon-button--link-coloring": "_icon-button--link-coloring_mhilb_84",
+  "icon-button--disabled": "_icon-button--disabled_mhilb_110",
+  "icon-button--loading": "_icon-button--loading_mhilb_111"
 };
 module.exports = styles;
 //# sourceMappingURL=IconButton.module.css.cjs.map

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

@@ -1,14 +1,14 @@
 import './IconButton.css';
 const styles = {
-  "icon-button": "_icon-button_1iv9h_1",
-  "icon-button--normal": "_icon-button--normal_1iv9h_23",
-  "icon-button--small": "_icon-button--small_1iv9h_28",
-  "icon-button__label": "_icon-button__label_1iv9h_33",
-  "icon-button__label--wrap": "_icon-button__label--wrap_1iv9h_45",
-  "icon-button__icon": "_icon-button__icon_1iv9h_53",
-  "icon-button--link-coloring": "_icon-button--link-coloring_1iv9h_85",
-  "icon-button--disabled": "_icon-button--disabled_1iv9h_111",
-  "icon-button--loading": "_icon-button--loading_1iv9h_112"
+  "icon-button": "_icon-button_mhilb_1",
+  "icon-button--normal": "_icon-button--normal_mhilb_22",
+  "icon-button--small": "_icon-button--small_mhilb_27",
+  "icon-button__label": "_icon-button__label_mhilb_32",
+  "icon-button__label--wrap": "_icon-button__label--wrap_mhilb_44",
+  "icon-button__icon": "_icon-button__icon_mhilb_52",
+  "icon-button--link-coloring": "_icon-button--link-coloring_mhilb_84",
+  "icon-button--disabled": "_icon-button--disabled_mhilb_110",
+  "icon-button--loading": "_icon-button--loading_mhilb_111"
 };
 export {
   styles as default