@tramo-digital/react-ui 0.0.0-alpha

package/dist/esm/ui/compositions/Footer/Footer.js

@@ -0,0 +1,279 @@
+import { jsx as a, jsxs as i } from "react/jsx-runtime";
+import { useState as B } from "react";
+import G from "../../primitives/Frame/Frame.js";
+import R from "../../primitives/Logo/Logo.js";
+import n from "../../primitives/TextBody/TextBody.js";
+import v from "../../primitives/TextEyebrow/TextEyebrow.js";
+import j from "../../primitives/TextHeading/TextHeading.js";
+import h from "../../primitives/Link/Link.js";
+import E from "../../primitives/Button/Button.js";
+import I from "../../primitives/Badge/Badge.js";
+import t from "./Footer.module.css.js";
+const V = ({
+  data: p,
+  events: w,
+  tokens: e,
+  className: z,
+  colorPalette: y,
+  colorSource: T,
+  customColor: L
+}) => {
+  const [c, x] = B("");
+  if (!p) return null;
+  const C = {
+    ...e?.color?.surface && {
+      "--footer-surface": e.color.surface.default
+    },
+    ...e?.color?.border && {
+      "--footer-border": e.color.border.default
+    },
+    ...e?.spacing?.padding && {
+      "--footer-padding": e.spacing.padding.default
+    },
+    ...e?.spacing?.columnGap && {
+      "--footer-column-gap": e.spacing.columnGap.default
+    },
+    ...e?.spacing?.rowGap && {
+      "--footer-row-gap": e.spacing.rowGap.default
+    },
+    ...e?.borderRadius?.container && {
+      "--footer-border-radius": typeof e.borderRadius.container.default == "number" ? `${e.borderRadius.container.default}px` : e.borderRadius.container.default
+    },
+    ...(e?.dimension?.maxWidth || e?.dimension?.contentMaxWidth || e?.sizing?.contentMaxWidth) && {
+      "--footer-content-max-width": (e?.dimension?.maxWidth || e?.dimension?.contentMaxWidth || e?.sizing?.contentMaxWidth).default,
+      "--footer-max-width": (e?.dimension?.maxWidth || e?.dimension?.contentMaxWidth || e?.sizing?.contentMaxWidth).default
+    }
+  }, {
+    brand: s,
+    columns: b = [],
+    socialLinks: u = [],
+    newsletter: r,
+    copyrightText: W,
+    legalLinks: g = [],
+    originText: f
+  } = p, { onNewsletterSubmit: N, onLinkClick: d } = w || {}, S = (l) => {
+    l.preventDefault(), c && N && (N(c), x(""));
+  }, F = [t.tuiFooter, z ?? ""].filter(Boolean).join(" "), D = `© ${(/* @__PURE__ */ new Date()).getFullYear()} tramo.digital. All rights reserved.`;
+  return /* @__PURE__ */ a(
+    G,
+    {
+      "data-tui-composition": "base",
+      data: { as: "footer" },
+      colorPalette: y,
+      colorSource: T,
+      customColor: L,
+      className: F,
+      style: C,
+      children: /* @__PURE__ */ i("div", { className: t.container, children: [
+        (s || r) && /* @__PURE__ */ i("div", { className: t.topSection, children: [
+          s && /* @__PURE__ */ i("div", { className: t.brandColumn, children: [
+            s.logo ? /* @__PURE__ */ a("div", { className: t.logoWrapper, children: /* @__PURE__ */ a(R, { data: s.logo, tokens: e?.elements?.logo }) }) : /* @__PURE__ */ a(
+              n,
+              {
+                data: {
+                  text: "tramo.digital",
+                  size: "sm",
+                  weight: "bold",
+                  as: "span"
+                },
+                className: t.brandFallback
+              }
+            ),
+            s.tagline && /* @__PURE__ */ a(
+              n,
+              {
+                data: {
+                  text: s.tagline,
+                  size: "sm",
+                  weight: "regular"
+                },
+                tokens: e?.elements?.tagline,
+                className: t.tagline
+              }
+            )
+          ] }),
+          r && /* @__PURE__ */ i(
+            "div",
+            {
+              className: t.newsletterColumn,
+              style: e?.elements?.newsletter?.color?.surface?.default ? {
+                backgroundColor: e.elements.newsletter.color.surface.default
+              } : void 0,
+              children: [
+                /* @__PURE__ */ a(
+                  v,
+                  {
+                    data: { text: r.title, size: "md" },
+                    tokens: e?.elements?.columnTitle
+                  }
+                ),
+                r.description && /* @__PURE__ */ a(
+                  n,
+                  {
+                    data: { text: r.description, size: "sm" },
+                    className: t.newsletterDesc
+                  }
+                ),
+                /* @__PURE__ */ i(
+                  "form",
+                  {
+                    className: t.newsletterForm,
+                    onSubmit: S,
+                    children: [
+                      /* @__PURE__ */ a(
+                        "input",
+                        {
+                          type: "email",
+                          placeholder: r.inputPlaceholder || "Enter your email",
+                          value: c,
+                          onChange: (l) => x(l.target.value),
+                          className: t.newsletterInput,
+                          required: !0
+                        }
+                      ),
+                      /* @__PURE__ */ a(
+                        E,
+                        {
+                          data: {
+                            text: r.buttonText || "Subscribe",
+                            variant: "primary",
+                            size: "md"
+                          },
+                          tokens: e?.elements?.newsletter
+                        }
+                      )
+                    ]
+                  }
+                ),
+                r.legalDisclaimer && /* @__PURE__ */ a(
+                  n,
+                  {
+                    data: {
+                      text: r.legalDisclaimer,
+                      size: "sm",
+                      as: "span"
+                    },
+                    className: t.legalDisclaimer
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        (b.length > 0 || u.length > 0) && /* @__PURE__ */ i("div", { className: t.middleSection, children: [
+          /* @__PURE__ */ a("div", { className: t.columnsGrid, children: b.map((l, m) => /* @__PURE__ */ i("div", { className: t.column, children: [
+            /* @__PURE__ */ a(
+              v,
+              {
+                data: {
+                  text: l.title,
+                  size: "sm",
+                  weight: "bold"
+                },
+                tokens: e?.elements?.columnTitle,
+                className: t.columnTitle
+              }
+            ),
+            /* @__PURE__ */ a("ul", { className: t.columnLinks, children: l.links.map((o, M) => /* @__PURE__ */ i("li", { className: t.columnLinkItem, children: [
+              /* @__PURE__ */ a(
+                h,
+                {
+                  data: {
+                    text: o.text,
+                    href: o.href,
+                    size: "sm"
+                  },
+                  events: {
+                    onClick: d ? () => d(o.text, o.href) : void 0
+                  },
+                  tokens: e?.elements?.link,
+                  className: t.columnLink
+                }
+              ),
+              o.badge && /* @__PURE__ */ a(
+                I,
+                {
+                  data: { text: o.badge, status: "information" },
+                  className: t.badge
+                }
+              )
+            ] }, M)) })
+          ] }, m)) }),
+          u.length > 0 && /* @__PURE__ */ i("div", { className: t.socialColumn, children: [
+            /* @__PURE__ */ a(
+              j,
+              {
+                data: {
+                  text: "Follow Us",
+                  size: "xs",
+                  weight: "bold",
+                  as: "h3"
+                },
+                tokens: e?.elements?.columnTitle,
+                className: t.columnTitle
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: t.socialLinks, children: u.map((l, m) => /* @__PURE__ */ a(
+              h,
+              {
+                data: {
+                  text: l.label || l.platform,
+                  href: l.href,
+                  size: "sm",
+                  target: "_blank",
+                  rel: "noopener noreferrer"
+                },
+                className: t.socialLink,
+                "aria-label": l.label || l.platform
+              },
+              m
+            )) })
+          ] })
+        ] }),
+        /* @__PURE__ */ i("div", { className: t.bottomSection, children: [
+          /* @__PURE__ */ a(
+            n,
+            {
+              data: {
+                text: W || D,
+                size: "sm",
+                as: "p"
+              },
+              tokens: e?.elements?.copyright,
+              className: t.copyright
+            }
+          ),
+          (f || g.length > 0) && /* @__PURE__ */ i("div", { className: t.bottomRight, children: [
+            f && /* @__PURE__ */ a(
+              n,
+              {
+                data: {
+                  text: f,
+                  size: "sm",
+                  as: "span"
+                },
+                tokens: e?.elements?.originText,
+                className: t.originText
+              }
+            ),
+            g.length > 0 && /* @__PURE__ */ a("ul", { className: t.legalLinks, children: g.map((l, m) => /* @__PURE__ */ a("li", { className: t.legalItem, children: /* @__PURE__ */ a(
+              h,
+              {
+                data: { text: l.text, href: l.href, size: "sm" },
+                events: {
+                  onClick: d ? () => d(l.text, l.href) : void 0
+                },
+                tokens: e?.elements?.link,
+                className: t.legalLink
+              }
+            ) }, m)) })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  V as default
+};
+//# sourceMappingURL=Footer.js.map

package/dist/esm/ui/compositions/Footer/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sources":["../../../../../src/ui/compositions/Footer/Footer.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { FooterModel } from \"@tramo-digital/types\";\nimport Frame from \"../../primitives/Frame/Frame\";\nimport Logo from \"../../primitives/Logo/Logo\";\nimport TextBody from \"../../primitives/TextBody/TextBody\";\nimport TextEyebrow from \"../../primitives/TextEyebrow/TextEyebrow\";\nimport TextHeading from \"../../primitives/TextHeading/TextHeading\";\nimport Link from \"../../primitives/Link/Link\";\nimport Button from \"../../primitives/Button/Button\";\nimport Badge from \"../../primitives/Badge/Badge\";\nimport styles from \"./Footer.module.css\";\n\nexport interface FooterProps extends FooterModel {\n  children?: React.ReactNode;\n}\n\nconst Footer: React.FC<FooterProps> = ({\n  data,\n  events,\n  tokens,\n  className,\n  colorPalette,\n  colorSource,\n  customColor,\n}) => {\n  const [email, setEmail] = useState(\"\");\n  if (!data) return null;\n  const _fingerprint = \"efd1bf9f69e81f23784bd8895a07424d\";\n\n  const tokenStyles = {\n    ...(tokens?.color?.surface && {\n      \"--footer-surface\": tokens.color.surface.default,\n    }),\n    ...(tokens?.color?.border && {\n      \"--footer-border\": tokens.color.border.default,\n    }),\n    ...(tokens?.spacing?.padding && {\n      \"--footer-padding\": tokens.spacing.padding.default,\n    }),\n    ...(tokens?.spacing?.columnGap && {\n      \"--footer-column-gap\": tokens.spacing.columnGap.default,\n    }),\n    ...(tokens?.spacing?.rowGap && {\n      \"--footer-row-gap\": tokens.spacing.rowGap.default,\n    }),\n    ...(tokens?.borderRadius?.container && {\n      \"--footer-border-radius\":\n        typeof tokens.borderRadius.container.default === \"number\"\n          ? `${tokens.borderRadius.container.default}px`\n          : tokens.borderRadius.container.default,\n    }),\n    ...((tokens?.dimension?.maxWidth ||\n      (tokens?.dimension as any)?.contentMaxWidth ||\n      (tokens as any)?.sizing?.contentMaxWidth) && {\n      \"--footer-content-max-width\": (tokens?.dimension?.maxWidth ||\n        (tokens?.dimension as any)?.contentMaxWidth ||\n        (tokens as any)?.sizing?.contentMaxWidth)!.default,\n      \"--footer-max-width\": (tokens?.dimension?.maxWidth ||\n        (tokens?.dimension as any)?.contentMaxWidth ||\n        (tokens as any)?.sizing?.contentMaxWidth)!.default,\n    }),\n  };\n\n  const {\n    brand,\n    columns = [],\n    socialLinks = [],\n    newsletter,\n    copyrightText,\n    legalLinks = [],\n    originText,\n  } = data;\n  const { onNewsletterSubmit, onLinkClick } = events || {};\n\n  const handleNewsletterSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    if (email && onNewsletterSubmit) {\n      onNewsletterSubmit(email);\n      setEmail(\"\");\n    }\n  };\n\n  const footerClassName = [styles.tuiFooter, className ?? \"\"]\n    .filter(Boolean)\n    .join(\" \");\n\n  const currentYear = new Date().getFullYear();\n  const defaultCopyright = `© ${currentYear} tramo.digital. All rights reserved.`;\n\n  return (\n    <Frame\n      data-tui-composition=\"base\"\n      data={{ as: \"footer\" }}\n      colorPalette={colorPalette}\n      colorSource={colorSource}\n      customColor={customColor}\n      className={footerClassName}\n      style={tokenStyles as React.CSSProperties}\n    >\n      <div className={styles.container}>\n        {/* Top Section: Brand + Newsletter */}\n        {(brand || newsletter) && (\n          <div className={styles.topSection}>\n            {brand && (\n              <div className={styles.brandColumn}>\n                {brand.logo ? (\n                  <div className={styles.logoWrapper}>\n                    <Logo data={brand.logo} tokens={tokens?.elements?.logo} />\n                  </div>\n                ) : (\n                  <TextBody\n                    data={{\n                      text: \"tramo.digital\",\n                      size: \"sm\",\n                      weight: \"bold\",\n                      as: \"span\",\n                    }}\n                    className={styles.brandFallback}\n                  />\n                )}\n                {brand.tagline && (\n                  <TextBody\n                    data={{\n                      text: brand.tagline,\n                      size: \"sm\",\n                      weight: \"regular\",\n                    }}\n                    tokens={tokens?.elements?.tagline}\n                    className={styles.tagline}\n                  />\n                )}\n              </div>\n            )}\n\n            {newsletter && (\n              <div\n                className={styles.newsletterColumn}\n                style={\n                  tokens?.elements?.newsletter?.color?.surface?.default\n                    ? {\n                        backgroundColor:\n                          tokens.elements.newsletter.color.surface.default,\n                      }\n                    : undefined\n                }\n              >\n                <TextEyebrow\n                  data={{ text: newsletter.title, size: \"md\" }}\n                  tokens={tokens?.elements?.columnTitle}\n                />\n                {newsletter.description && (\n                  <TextBody\n                    data={{ text: newsletter.description, size: \"sm\" }}\n                    className={styles.newsletterDesc}\n                  />\n                )}\n                <form\n                  className={styles.newsletterForm}\n                  onSubmit={handleNewsletterSubmit}\n                >\n                  <input\n                    type=\"email\"\n                    placeholder={\n                      newsletter.inputPlaceholder || \"Enter your email\"\n                    }\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                    className={styles.newsletterInput}\n                    required\n                  />\n                  <Button\n                    data={{\n                      text: newsletter.buttonText || \"Subscribe\",\n                      variant: \"primary\",\n                      size: \"md\",\n                    }}\n                    tokens={tokens?.elements?.newsletter}\n                  />\n                </form>\n                {newsletter.legalDisclaimer && (\n                  <TextBody\n                    data={{\n                      text: newsletter.legalDisclaimer,\n                      size: \"sm\",\n                      as: \"span\",\n                    }}\n                    className={styles.legalDisclaimer}\n                  />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Middle Section: Navigation Columns + Socials */}\n        {(columns.length > 0 || socialLinks.length > 0) && (\n          <div className={styles.middleSection}>\n            <div className={styles.columnsGrid}>\n              {columns.map((col, idx) => (\n                <div key={idx} className={styles.column}>\n                  <TextEyebrow\n                    data={{\n                      text: col.title,\n                      size: \"sm\",\n                      weight: \"bold\",\n                    }}\n                    tokens={tokens?.elements?.columnTitle}\n                    className={styles.columnTitle}\n                  />\n                  <ul className={styles.columnLinks}>\n                    {col.links.map((link, lIdx) => (\n                      <li key={lIdx} className={styles.columnLinkItem}>\n                        <Link\n                          data={{\n                            text: link.text,\n                            href: link.href,\n                            size: \"sm\",\n                          }}\n                          events={{\n                            onClick: onLinkClick\n                              ? () => onLinkClick(link.text, link.href)\n                              : undefined,\n                          }}\n                          tokens={tokens?.elements?.link}\n                          className={styles.columnLink}\n                        />\n                        {link.badge && (\n                          <Badge\n                            data={{ text: link.badge, status: \"information\" }}\n                            className={styles.badge}\n                          />\n                        )}\n                      </li>\n                    ))}\n                  </ul>\n                </div>\n              ))}\n            </div>\n\n            {socialLinks.length > 0 && (\n              <div className={styles.socialColumn}>\n                <TextHeading\n                  data={{\n                    text: \"Follow Us\",\n                    size: \"xs\",\n                    weight: \"bold\",\n                    as: \"h3\",\n                  }}\n                  tokens={tokens?.elements?.columnTitle}\n                  className={styles.columnTitle}\n                />\n                <div className={styles.socialLinks}>\n                  {socialLinks.map((social, idx) => (\n                    <Link\n                      key={idx}\n                      data={{\n                        text: social.label || social.platform,\n                        href: social.href,\n                        size: \"sm\",\n                        target: \"_blank\",\n                        rel: \"noopener noreferrer\",\n                      }}\n                      className={styles.socialLink}\n                      aria-label={social.label || social.platform}\n                    />\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n        )}\n\n        {/* Bottom Section: Copyright + Legal Links */}\n        <div className={styles.bottomSection}>\n          <TextBody\n            data={{\n              text: copyrightText || defaultCopyright,\n              size: \"sm\",\n              as: \"p\",\n            }}\n            tokens={tokens?.elements?.copyright}\n            className={styles.copyright}\n          />\n          {(originText || legalLinks.length > 0) && (\n            <div className={styles.bottomRight}>\n              {originText && (\n                <TextBody\n                  data={{\n                    text: originText,\n                    size: \"sm\",\n                    as: \"span\",\n                  }}\n                  tokens={tokens?.elements?.originText}\n                  className={styles.originText}\n                />\n              )}\n              {legalLinks.length > 0 && (\n                <ul className={styles.legalLinks}>\n                  {legalLinks.map((link, idx) => (\n                    <li key={idx} className={styles.legalItem}>\n                      <Link\n                        data={{ text: link.text, href: link.href, size: \"sm\" }}\n                        events={{\n                          onClick: onLinkClick\n                            ? () => onLinkClick(link.text, link.href)\n                            : undefined,\n                        }}\n                        tokens={tokens?.elements?.link}\n                        className={styles.legalLink}\n                      />\n                    </li>\n                  ))}\n                </ul>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </Frame>\n  );\n};\n\nexport default Footer;\n"],"names":["Footer","data","events","tokens","className","colorPalette","colorSource","customColor","email","setEmail","useState","tokenStyles","brand","columns","socialLinks","newsletter","copyrightText","legalLinks","originText","onNewsletterSubmit","onLinkClick","handleNewsletterSubmit","e","footerClassName","styles","defaultCopyright","jsx","Frame","jsxs","Logo","TextBody","TextEyebrow","Button","col","idx","link","lIdx","Link","Badge","TextHeading","social"],"mappings":"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"}

package/dist/esm/ui/compositions/Footer/Footer.module.css.js

@@ -0,0 +1,64 @@
+const n = "ol03RkGW", o = "fVsLj6v-", t = "OCSBMtRt", c = "qPwC1Ty0", e = "Km7lRdLM", l = "WbFOApOf", s = "_8-rKUbYB", i = "PJWY7QAn", a = "NQRps4vg", r = "-bhQnUao", m = "JKSu-Gfv", u = "jd0HJScT", g = "e-u34DlE", d = "bo6gfZBo", k = "_18Q3hoXO", L = "Tn4RrPzO", b = "ENkOm6xo", p = "_1HUL5r9B", S = "sX4dlaGS", w = "qQWktEh0", F = "ROOO-MdN", O = "_2-XKvOdF", C = "oF3ASe14", R = "M2IWCsFI", h = "AQzn5NEe", B = "odKQANco", D = "n5fnDwgx", Q = "BDKYZnvB", T = "eUB5c00p", W = {
+  tuiFooter: n,
+  container: o,
+  topSection: t,
+  brandColumn: c,
+  logoWrapper: e,
+  brandFallback: l,
+  tagline: s,
+  newsletterColumn: i,
+  newsletterDesc: a,
+  newsletterForm: r,
+  newsletterInput: m,
+  legalDisclaimer: u,
+  middleSection: g,
+  columnsGrid: d,
+  column: k,
+  columnTitle: L,
+  columnLinks: b,
+  columnLinkItem: p,
+  columnLink: S,
+  badge: w,
+  socialColumn: F,
+  socialLinks: O,
+  socialLink: C,
+  bottomSection: R,
+  copyright: h,
+  bottomRight: B,
+  originText: D,
+  legalLinks: Q,
+  legalLink: T
+};
+export {
+  w as badge,
+  B as bottomRight,
+  R as bottomSection,
+  c as brandColumn,
+  l as brandFallback,
+  k as column,
+  S as columnLink,
+  p as columnLinkItem,
+  b as columnLinks,
+  L as columnTitle,
+  d as columnsGrid,
+  o as container,
+  h as copyright,
+  W as default,
+  u as legalDisclaimer,
+  T as legalLink,
+  Q as legalLinks,
+  e as logoWrapper,
+  g as middleSection,
+  i as newsletterColumn,
+  a as newsletterDesc,
+  r as newsletterForm,
+  m as newsletterInput,
+  D as originText,
+  F as socialColumn,
+  C as socialLink,
+  O as socialLinks,
+  s as tagline,
+  t as topSection,
+  n as tuiFooter
+};
+//# sourceMappingURL=Footer.module.css.js.map

package/dist/esm/ui/compositions/Footer/Footer.module.css.js.map

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

package/dist/esm/ui/compositions/Header/Header.js

@@ -0,0 +1,277 @@
+import { jsxs as s, jsx as n, Fragment as z } from "react/jsx-runtime";
+import { useState as q } from "react";
+import J from "../../primitives/Frame/Frame.js";
+import K from "../../primitives/Logo/Logo.js";
+import O from "../../primitives/Button/Button.js";
+import v from "../../primitives/Link/Link.js";
+import Q from "../../patterns/StripBanner/StripBanner.js";
+import V from "../../layout/Drawer/Drawer.js";
+import S from "../LinkGroup/LinkGroup.js";
+import e from "./Header.module.css.js";
+const re = ({
+  data: N,
+  events: W,
+  tokens: a,
+  className: B,
+  colorPalette: D,
+  colorSource: k,
+  customColor: G
+}) => {
+  const [I, j] = q(!1);
+  if (!N) return null;
+  const P = {
+    ...a?.color?.surface && {
+      "--header-surface": a.color.surface.default
+    },
+    ...a?.color?.border && {
+      "--header-border": a.color.border.default
+    },
+    ...a?.spacing?.padding && {
+      "--header-padding": a.spacing.padding.default
+    },
+    ...a?.spacing?.gap && {
+      "--header-gap": a.spacing.gap.default
+    },
+    ...a?.sizing?.height && {
+      "--header-height": typeof a.sizing.height.default == "number" ? `${a.sizing.height.default}px` : a.sizing.height.default
+    },
+    ...a?.dimension?.height && {
+      "--header-height": typeof a.dimension.height.default == "number" ? `${a.dimension.height.default}px` : a.dimension.height.default
+    },
+    ...a?.sizing?.contentMaxWidth && {
+      "--header-content-max-width": a.sizing.contentMaxWidth.default
+    },
+    ...(a?.dimension?.maxWidth || a?.dimension?.contentMaxWidth) && {
+      "--header-content-max-width": (a?.dimension?.maxWidth || a?.dimension?.contentMaxWidth).default
+    }
+  }, {
+    logo: b,
+    navLinks: c = [],
+    linkGroups: d = [],
+    buttons: m = [],
+    announcement: x,
+    position: L = "static",
+    mobileDrawerOpen: u,
+    layout: $ = "default",
+    logoPosition: C = "left"
+  } = N, {
+    onLogoClick: F,
+    onNavLinkClick: w,
+    onMobileDrawerToggle: T,
+    onAnnouncementClose: A
+  } = W || {}, o = u !== void 0 ? u : I, p = () => {
+    const i = !o;
+    u === void 0 && j(i), T?.(i);
+  }, H = [
+    e.tuiHeader,
+    L !== "static" ? e[L] : "",
+    B ?? ""
+  ].filter(Boolean).join(" "), R = [
+    e.mainNav,
+    e[`layout-${$}`],
+    e[`logo-${C}`]
+  ].filter(Boolean).join(" "), E = $ === "split" && C === "center", g = (i, l) => l && l.length > 0 ? /* @__PURE__ */ n("div", { className: e.linkGroupsWrapper, children: l.map((t, r) => /* @__PURE__ */ n(
+    S,
+    {
+      data: t.data,
+      events: t.events,
+      tokens: a?.elements?.linkGroup || t.tokens
+    },
+    r
+  )) }) : /* @__PURE__ */ n("ul", { className: e.navLinks, children: i.map((t, r) => /* @__PURE__ */ s(
+    "li",
+    {
+      className: `${e.navItem} ${t.active ? e.active : ""}`,
+      children: [
+        /* @__PURE__ */ n(
+          v,
+          {
+            data: { text: t.text, href: t.href, size: "md" },
+            events: { onClick: () => w?.(t, r) },
+            tokens: a?.elements?.navLink,
+            className: e.navLink
+          }
+        ),
+        t.children && t.children.length > 0 && /* @__PURE__ */ n("ul", { className: e.dropdown, children: t.children.map((h, f) => /* @__PURE__ */ n("li", { className: e.dropdownItem, children: /* @__PURE__ */ n(
+          v,
+          {
+            data: { text: h.text, href: h.href, size: "sm" },
+            className: e.dropdownLink
+          }
+        ) }, f)) })
+      ]
+    },
+    r
+  )) }), U = (i, l) => l && l.length > 0 ? /* @__PURE__ */ n("div", { className: e.mobileLinkGroupsWrapper, children: l.map((t, r) => /* @__PURE__ */ n(
+    S,
+    {
+      data: { ...t.data, stacking: "vertical" },
+      events: t.events,
+      tokens: a?.elements?.linkGroup || t.tokens
+    },
+    r
+  )) }) : /* @__PURE__ */ n("ul", { className: e.mobileNavLinks, children: i.map((t, r) => /* @__PURE__ */ s(
+    "li",
+    {
+      className: `${e.mobileNavItem} ${t.active ? e.active : ""}`,
+      children: [
+        /* @__PURE__ */ n(
+          v,
+          {
+            data: { text: t.text, href: t.href, size: "lg" },
+            events: {
+              onClick: () => {
+                p(), w?.(t, r);
+              }
+            },
+            tokens: a?.elements?.navLink,
+            className: e.mobileNavLink
+          }
+        ),
+        t.children && t.children.length > 0 && /* @__PURE__ */ n("ul", { className: e.mobileSubLinks, children: t.children.map((h, f) => /* @__PURE__ */ n("li", { className: e.mobileSubItem, children: /* @__PURE__ */ n(
+          v,
+          {
+            data: { text: h.text, href: h.href, size: "md" },
+            events: { onClick: p },
+            className: e.mobileSubLink
+          }
+        ) }, f)) })
+      ]
+    },
+    r
+  )) }), M = () => /* @__PURE__ */ n("div", { className: e.logoContainer, onClick: F, children: b ? /* @__PURE__ */ n(K, { data: b, tokens: a?.elements?.logo }) : /* @__PURE__ */ n("span", { className: e.brandFallback, children: "tramo.digital" }) }), y = () => /* @__PURE__ */ s("div", { className: e.utilities, children: [
+    m && m.length > 0 && /* @__PURE__ */ n("div", { className: e.actions, children: m.map((i, l) => /* @__PURE__ */ n(
+      O,
+      {
+        data: i.data,
+        events: i.events,
+        tokens: a?.elements?.button
+      },
+      l
+    )) }),
+    /* @__PURE__ */ s(
+      "button",
+      {
+        type: "button",
+        className: e.hamburger,
+        "aria-label": o ? "Close menu" : "Open menu",
+        "aria-expanded": o,
+        onClick: p,
+        children: [
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: `${e.bar} ${o ? e.barOpenTop : ""}`
+            }
+          ),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: `${e.bar} ${o ? e.barOpenMid : ""}`
+            }
+          ),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: `${e.bar} ${o ? e.barOpenBot : ""}`
+            }
+          )
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ s(
+    J,
+    {
+      "data-tui-composition": "base",
+      data: { as: "header" },
+      colorPalette: D,
+      colorSource: k,
+      customColor: G,
+      className: H,
+      style: P,
+      children: [
+        x && /* @__PURE__ */ n("div", { className: e.announcementWrapper, children: /* @__PURE__ */ n(
+          Q,
+          {
+            data: x,
+            events: { onClose: A },
+            tokens: a?.elements?.announcement
+          }
+        ) }),
+        /* @__PURE__ */ n("div", { className: R, children: E ? /* @__PURE__ */ s(z, { children: [
+          /* @__PURE__ */ n(
+            "nav",
+            {
+              className: `${e.desktopNav} ${e.desktopNavLeft}`,
+              "aria-label": "Primary navigation left",
+              children: g(
+                c.slice(0, Math.ceil(c.length / 2)),
+                d.slice(0, Math.ceil(d.length / 2))
+              )
+            }
+          ),
+          M(),
+          /* @__PURE__ */ s("div", { className: e.splitRightContainer, children: [
+            /* @__PURE__ */ n(
+              "nav",
+              {
+                className: `${e.desktopNav} ${e.desktopNavRight}`,
+                "aria-label": "Primary navigation right",
+                children: g(
+                  c.slice(Math.ceil(c.length / 2)),
+                  d.slice(Math.ceil(d.length / 2))
+                )
+              }
+            ),
+            y()
+          ] })
+        ] }) : /* @__PURE__ */ s(z, { children: [
+          M(),
+          /* @__PURE__ */ n("nav", { className: e.desktopNav, "aria-label": "Primary navigation", children: g(c, d) }),
+          y()
+        ] }) }),
+        /* @__PURE__ */ n(
+          V,
+          {
+            data: {
+              isOpen: o,
+              placement: "right",
+              size: "md",
+              title: "Menu",
+              showCloseButton: !0,
+              closeOnBackdropClick: !0,
+              closeOnEsc: !0,
+              lockScroll: !0
+            },
+            events: { onClose: p },
+            tokens: a?.elements?.drawer,
+            children: /* @__PURE__ */ s(
+              "nav",
+              {
+                className: e.mobileNav,
+                "aria-label": "Mobile primary navigation",
+                children: [
+                  U(c, d),
+                  m && m.length > 0 && /* @__PURE__ */ n("div", { className: e.mobileActions, children: m.map((i, l) => /* @__PURE__ */ n(
+                    O,
+                    {
+                      data: i.data,
+                      events: i.events,
+                      tokens: a?.elements?.button
+                    },
+                    l
+                  )) })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  re as default
+};
+//# sourceMappingURL=Header.js.map