@dnanpm/ui-components 0.2.0 → 0.4.0

package/dist/components/Accordion/Accordion.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Accordion Component Styles
  *
  * Layout wrapper that spaces AccordionItem children evenly.

package/dist/components/AccordionItem/AccordionItem.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * AccordionItem Component Styles
  *
  * Uses native <details> element for expand/collapse behavior.

package/dist/components/Breadcrumb/Breadcrumb.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {/**
+@layer dds-components {/**
  * Breadcrumb Component Styles
  *
  * Design tokens are consumed via CSS custom properties (variables).

package/dist/components/Button/Button.css

@@ -1,4 +1,4 @@
-@layer dna-design-system {._button_188fd_1 {
+@layer dds-components {._button_1nsz1_1 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -15,21 +15,21 @@
         border-color 0.2s ease-in-out;
 }
 
-._button--full-width_188fd_18 {
+._button--full-width_1nsz1_18 {
     width: 100%;
     min-width: 0;
 }
 
 /* ─── Sizes ─── */
 
-._button--normal_188fd_25 {
+._button--normal_1nsz1_25 {
     font: var(--typography-label-lg-bold);
     height: 40px;
     min-width: 128px;
     padding: var(--spacing-ui-xs) var(--spacing-ui-lg);
 }
 
-._button--small_188fd_32 {
+._button--small_1nsz1_32 {
     font: var(--typography-label-md-bold);
     height: 32px;
     min-width: 100px;
@@ -38,85 +38,91 @@
 
 /* ─── Primary variant ─── */
 
-._button--primary_188fd_41 {
+._button--primary_1nsz1_41 {
     background-color: var(--color-semantic-interactive-primary-default);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:hover {
+._button--primary_1nsz1_41:hover {
     background-color: var(--color-semantic-interactive-primary-hover);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:active {
+._button--primary_1nsz1_41:active {
     background-color: var(--color-semantic-interactive-primary-active);
+    color: var(--color-semantic-foreground-inverse);
 }
 
-._button--primary_188fd_41:focus-visible {
+._button--primary_1nsz1_41:focus-visible {
     background-color: var(--color-semantic-interactive-primary-focus);
+    color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Secondary variant ─── */
 
-._button--secondary_188fd_60 {
+._button--secondary_1nsz1_63 {
     background-color: transparent;
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--secondary_188fd_60:hover {
+._button--secondary_1nsz1_63:hover {
     background-color: var(--color-semantic-interactive-secondary-hover);
     border-color: var(--color-semantic-interactive-secondary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_188fd_60:active {
+._button--secondary_1nsz1_63:active {
     background-color: var(--color-semantic-interactive-secondary-active);
     border-color: var(--color-semantic-interactive-secondary-active);
     color: var(--color-semantic-foreground-inverse);
 }
 
-._button--secondary_188fd_60:focus-visible {
+._button--secondary_1nsz1_63:focus-visible {
     background-color: var(--color-semantic-interactive-secondary-focus);
     color: var(--color-semantic-foreground-inverse);
 }
 
 /* ─── Tertiary variant ─── */
 
-._button--tertiary_188fd_85 {
+._button--tertiary_1nsz1_88 {
     background-color: var(--color-semantic-interactive-neutral-default);
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:hover {
+._button--tertiary_1nsz1_88:hover {
     background-color: var(--color-semantic-interactive-neutral-hover);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:active {
+._button--tertiary_1nsz1_88:active {
     background-color: var(--color-semantic-interactive-neutral-active);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
-._button--tertiary_188fd_85:focus-visible {
+._button--tertiary_1nsz1_88:focus-visible {
     background-color: var(--color-semantic-interactive-neutral-focus);
+    color: var(--color-semantic-foreground-secondary-strong);
 }
 
 /* ─── Disabled state ─── */
 
-._button--disabled_188fd_105 {
+._button--disabled_1nsz1_111 {
     pointer-events: none;
 }
 
-._button--primary_188fd_41._button--disabled_188fd_105 {
+._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
     background-color: var(--color-semantic-interactive-primary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--secondary_188fd_60._button--disabled_188fd_105 {
+._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
     border-color: var(--color-semantic-interactive-secondary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
 
-._button--tertiary_188fd_85._button--disabled_188fd_105 {
+._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
     background-color: var(--color-semantic-interactive-neutral-disabled);
     color: var(--color-semantic-foreground-muted);
 }
@@ -125,38 +131,38 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._button--primary_188fd_41._button--disabled_188fd_105 {
+    ._button--primary_1nsz1_41._button--disabled_1nsz1_111 {
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--secondary_188fd_60 {
+    ._button--secondary_1nsz1_63 {
         border-color: var(--color-semantic-interactive-inverse-default);
         color: var(--color-semantic-foreground-inverse);
     }
 
-    ._button--secondary_188fd_60:hover {
+    ._button--secondary_1nsz1_63:hover {
         background-color: var(--color-semantic-interactive-inverse-hover);
         border-color: var(--color-semantic-interactive-inverse-hover);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60:active {
+    ._button--secondary_1nsz1_63:active {
         background-color: var(--color-semantic-interactive-inverse-active);
         border-color: var(--color-semantic-interactive-inverse-active);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60:focus-visible {
+    ._button--secondary_1nsz1_63:focus-visible {
         background-color: var(--color-semantic-interactive-inverse-focus);
         color: var(--color-semantic-foreground-secondary-strong);
     }
 
-    ._button--secondary_188fd_60._button--disabled_188fd_105 {
+    ._button--secondary_1nsz1_63._button--disabled_1nsz1_111 {
         border-color: var(--color-semantic-interactive-inverse-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
 
-    ._button--tertiary_188fd_85._button--disabled_188fd_105 {
+    ._button--tertiary_1nsz1_88._button--disabled_1nsz1_111 {
         border-color: var(--color-semantic-interactive-neutral-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
@@ -164,11 +170,11 @@
 
 /* ─── Loading state ─── */
 
-._button--loading_188fd_167 {
+._button--loading_1nsz1_173 {
     pointer-events: none;
 }
 
-._button__content_188fd_171 {
+._button__content_1nsz1_177 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -176,7 +182,7 @@
     white-space: nowrap;
 }
 
-._button__spinner_188fd_179 {
+._button__spinner_1nsz1_185 {
     flex: 0 0 auto;
 }
 }

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

@@ -1,19 +1,19 @@
 require('./Button.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_188fd_1";
-const button__content = "_button__content_188fd_171";
-const button__spinner = "_button__spinner_188fd_179";
+const button = "_button_1nsz1_1";
+const button__content = "_button__content_1nsz1_177";
+const button__spinner = "_button__spinner_1nsz1_185";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_188fd_18",
-  "button--normal": "_button--normal_188fd_25",
-  "button--small": "_button--small_188fd_32",
-  "button--primary": "_button--primary_188fd_41",
-  "button--secondary": "_button--secondary_188fd_60",
-  "button--tertiary": "_button--tertiary_188fd_85",
-  "button--disabled": "_button--disabled_188fd_105",
-  "button--loading": "_button--loading_188fd_167",
+  "button--full-width": "_button--full-width_1nsz1_18",
+  "button--normal": "_button--normal_1nsz1_25",
+  "button--small": "_button--small_1nsz1_32",
+  "button--primary": "_button--primary_1nsz1_41",
+  "button--secondary": "_button--secondary_1nsz1_63",
+  "button--tertiary": "_button--tertiary_1nsz1_88",
+  "button--disabled": "_button--disabled_1nsz1_111",
+  "button--loading": "_button--loading_1nsz1_173",
   button__content,
   button__spinner
 };

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

@@ -1,17 +1,17 @@
 import './Button.css';
-const button = "_button_188fd_1";
-const button__content = "_button__content_188fd_171";
-const button__spinner = "_button__spinner_188fd_179";
+const button = "_button_1nsz1_1";
+const button__content = "_button__content_1nsz1_177";
+const button__spinner = "_button__spinner_1nsz1_185";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_188fd_18",
-  "button--normal": "_button--normal_188fd_25",
-  "button--small": "_button--small_188fd_32",
-  "button--primary": "_button--primary_188fd_41",
-  "button--secondary": "_button--secondary_188fd_60",
-  "button--tertiary": "_button--tertiary_188fd_85",
-  "button--disabled": "_button--disabled_188fd_105",
-  "button--loading": "_button--loading_188fd_167",
+  "button--full-width": "_button--full-width_1nsz1_18",
+  "button--normal": "_button--normal_1nsz1_25",
+  "button--small": "_button--small_1nsz1_32",
+  "button--primary": "_button--primary_1nsz1_41",
+  "button--secondary": "_button--secondary_1nsz1_63",
+  "button--tertiary": "_button--tertiary_1nsz1_88",
+  "button--disabled": "_button--disabled_1nsz1_111",
+  "button--loading": "_button--loading_1nsz1_173",
   button__content,
   button__spinner
 };

package/dist/components/Hero/Hero.cjs

@@ -0,0 +1,74 @@
+"use strict";
+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 Hero_module = require("./Hero.module.css.cjs");
+const Hero_utils = require("./Hero.utils.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Hero = ({
+  label,
+  heading,
+  description,
+  headingLevel = "h1",
+  Image,
+  imageProps,
+  LogoImage,
+  logoImageProps,
+  backgroundColor,
+  primaryCta,
+  secondaryCta,
+  className,
+  ref,
+  ...props
+}) => {
+  const headingId = react.useId();
+  const ResolvedImage = Image ?? (imageProps != null ? "img" : void 0);
+  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 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),
+      "data-testid": props["data-testid"],
+      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.elevationExtraHigh), 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
+                }
+              )
+            ] }),
+            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
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
+};
+exports.Hero = Hero;
+//# sourceMappingURL=Hero.cjs.map

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

@@ -0,0 +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\n            ref={ref}\n            {...props}\n            className={cn(styles.hero, className)}\n            data-testid={props['data-testid']}\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                {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.elevationExtraHigh)}>\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,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA,GAAGC,oBAAO,MAAM,SAAS;AAAA,MACpC,eAAa,MAAM,aAAa;AAAA,MAEhC,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,UAEH,aAAa,QACVC,+BAAC,OAAA,EAAI,WAAWD,oBAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,yCAEH,OAAA,EAAI,WAAWA,YAAAA,QAAO,eAAe,eAAY,OAAA,CAAO;AAAA,QAAA,GAC7D;AAAA,uCAEC,OAAA,EAAI,WAAWA,oBAAO,eACnB,UAAAC,+BAAC,SAAI,WAAWF,GAAAA,GAAGC,oBAAO,YAAYE,iBAAAA,QAAgB,kBAAkB,GACpE,0CAAC,OAAA,EAAI,WAAWF,oBAAO,YACnB,UAAA;AAAA,UAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,YACnB,UAAA;AAAA,YAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,YAAAA,QAAO,aAAc,UAAA,OAAM;AAAA,cAC7DC,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAWF,GAAAA;AAAAA,oBACPC,YAAAA,QAAO;AAAA,oBACPG,WAAAA,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZF,+BAAC,OAAA,EAAI,WAAWF,MAAGC,YAAAA,QAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACGF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,YAAAA,QAAO,eAClB,UAAA;AAAA,YAAA,cAAc,QAAQ;AAAA,YACtB,gBAAgB,QAAQ;AAAA,UAAA,EAAA,CAC7B;AAAA,QAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

package/dist/components/Hero/Hero.css

@@ -0,0 +1,245 @@
+@layer dds-components {._hero_905ff_1 {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding-top: var(--spacing-ui-xxxl);
+    container-name: hero;
+    container-type: inline-size;
+}
+
+._hero__background_905ff_11 {
+    position: absolute;
+    inset-inline: 0;
+    top: 0;
+    height: 440px;
+    background-color: var(--color-semantic-surface-primary-soft);
+    overflow: clip;
+}
+
+._hero__backgroundImageComponent_905ff_20 {
+    width: 100%;
+    height: 100%;
+}
+
+._hero__backgroundImageComponent_905ff_20 > * {
+    width: 100%;
+    height: 100%;
+}
+
+._hero__backgroundImageComponent_905ff_20 img,
+._hero__backgroundImageComponent_905ff_20 picture,
+._hero__backgroundImageComponent_905ff_20 video,
+._hero__backgroundImageComponent_905ff_20 canvas,
+._hero__backgroundImageComponent_905ff_20 svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: right center;
+}
+
+._hero__logoImage_905ff_42 {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    width: min(100%, 1280px);
+    height: 100%;
+    margin-inline: auto;
+    padding-left: var(--spacing-layout-lg);
+    padding-right: var(--spacing-ui-xxxl);
+    padding-bottom: var(--spacing-ui-lg);
+}
+
+._hero__logoImage_905ff_42 > * {
+    width: min(430px, 43vw);
+    max-width: 100%;
+    height: auto;
+}
+
+._hero__overlay_905ff_63 {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 158px;
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--color-semantic-foreground-secondary-strong) 0%, transparent) 0%,
+        color-mix(in srgb, var(--color-semantic-foreground-secondary-strong) 30%, transparent) 100%
+    );
+}
+
+._hero__content_905ff_75 {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    min-height: 440px;
+    align-items: flex-end;
+    justify-content: flex-start;
+    max-width: 1280px;
+    gap: var(--spacing-ui-xxxl);
+    width: 100%;
+    margin-inline: auto;
+    padding-left: var(--spacing-layout-lg);
+    padding-right: var(--spacing-ui-xxxl);
+}
+
+._hero__card_905ff_90 {
+    flex: 0 0 650px;
+    width: 650px;
+    min-width: 0;
+    max-width: 650px;
+    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-ui-xxxl);
+}
+
+._hero__main_905ff_101 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-ui-xxxl);
+}
+
+._hero__text_905ff_107 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-ui-lg);
+}
+
+._hero__header_905ff_113 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-ui-xs);
+}
+
+._hero__label_905ff_119 {
+    align-self: flex-start;
+}
+
+._hero__heading_905ff_123 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    text-wrap: balance;
+}
+
+._hero__heading--xl_905ff_129 {
+    font: var(--typography-heading-xl);
+}
+
+._hero__heading--lg_905ff_133 {
+    font: var(--typography-heading-lg);
+}
+
+._hero__heading--md_905ff_137 {
+    font: var(--typography-heading-md);
+}
+
+._hero__heading--sm_905ff_141 {
+    font: var(--typography-heading-sm);
+}
+
+._hero__heading--xs_905ff_145 {
+    font: var(--typography-heading-xs);
+}
+
+._hero__description_905ff_149 {
+    margin: 0;
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-lg);
+    text-wrap: pretty;
+}
+
+._hero__description_905ff_149 p {
+    margin: 0;
+}
+
+._hero__description_905ff_149 p + p {
+    margin-top: var(--spacing-ui-sm);
+}
+
+._hero__actions_905ff_164 {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--spacing-ui-md);
+    flex-wrap: nowrap;
+}
+
+@container hero (max-width: 991px) {
+    ._hero__background_905ff_11 {
+        height: 460px;
+    }
+
+    ._hero__content_905ff_75 {
+        min-height: 460px;
+        padding-inline: var(--spacing-ui-xxxl);
+    }
+
+    ._hero__card_905ff_90 {
+        flex-basis: 335px;
+        max-width: 335px;
+        padding: var(--spacing-ui-lg);
+    }
+
+    ._hero__logoImage_905ff_42 {
+        padding-left: var(--spacing-ui-xxxl);
+    }
+
+    ._hero__logoImage_905ff_42 > * {
+        width: min(360px, 48vw);
+    }
+
+    ._hero__actions_905ff_164 {
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+}
+
+@container hero (max-width: 767px) {
+    ._hero__background_905ff_11 {
+        height: 280px;
+    }
+
+    ._hero__content_905ff_75 {
+        min-height: auto;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0;
+        padding-top: 200px;
+        padding-inline: var(--spacing-ui-lg);
+    }
+
+    ._hero__card_905ff_90 {
+        flex-basis: auto;
+        width: 100%;
+        max-width: none;
+    }
+
+    ._hero__logoImage_905ff_42 {
+        display: none;
+    }
+}
+
+@media (forced-colors: active) {
+    ._hero__overlay_905ff_63 {
+        display: none;
+    }
+
+    ._hero__background_905ff_11 {
+        background-color: Canvas;
+    }
+
+    ._hero__card_905ff_90 {
+        border: var(--borderwidth-semantic-xs) solid CanvasText;
+        box-shadow: none;
+    }
+
+    ._hero__logoImage_905ff_42 {
+        display: none;
+    }
+}
+}

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

@@ -0,0 +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;
+//# sourceMappingURL=Hero.d.ts.map

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

@@ -0,0 +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,4CAqEX,CAAC"}