@stihl-design-system/components/chunks/Header.CvcGSuhX.js

Welcome to the STIHL Design System react component library.

"use client";
import { jsx as y, jsxs as ge, Fragment as Ee } from "react/jsx-runtime";
import { d as P } from "./index.cKLI89Eg.js";
import { c as D } from "./index.DQOqod3i.js";
import { useState as T, useEffect as L, useContext as ie, createContext as Fe, useRef as I } from "react";
import { g as Y, c as O, p as pe } from "./helpers.CexwVao7.js";
import { u as Ne } from "./useIsomorphicLayoutEffect.CnJ9AMFS.js";
import { DSLogo as Re } from "../logo.D6BTxbxv.js";
import { Logo100Years as Ce } from "../logo100years.C0IojOp9.js";
import '../assets/Header.CSPbSqR5.css';const ue = (i) => {
  const e = P.c(7);
  let t;
  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (t = {
    width: 0,
    height: 0
  }, e[0] = t) : t = e[0];
  const [o, n] = T(t);
  let a, l;
  e[1] !== i ? (a = () => {
    const r = i.current;
    r && n({
      width: r.offsetWidth,
      height: r.offsetHeight
    });
  }, l = [i], e[1] = i, e[2] = a, e[3] = l) : (a = e[2], l = e[3]), Ne(a, l);
  let s, c;
  return e[4] !== i ? (s = () => {
    const r = i.current;
    if (!r)
      return;
    const h = new ResizeObserver((m) => {
      const A = m[0];
      if (!A)
        return;
      const f = {
        width: A.contentRect.width,
        height: A.contentRect.height
      };
      n((p) => p.width === f.width && p.height === f.height ? p : f);
    });
    return h.observe(r), () => h.disconnect();
  }, c = [i], e[4] = i, e[5] = s, e[6] = c) : (s = e[5], c = e[6]), L(s, c), o;
}, Ve = (i) => {
  const e = P.c(3), t = i, [o, n] = T("down");
  let a, l;
  return e[0] !== t ? (a = () => {
    let s = window.scrollY;
    const c = () => {
      const r = window.scrollY, h = r > s ? "down" : "up";
      Math.abs(r - s) > t && (n(h), s = r);
    };
    return window.addEventListener("scroll", c, {
      passive: !0
    }), () => window.removeEventListener("scroll", c);
  }, l = [t], e[0] = t, e[1] = a, e[2] = l) : (a = e[1], l = e[2]), L(a, l), o;
}, bt = ["full", "main"], Me = ({
  hasBrandArea: i,
  hasPrimaryArea: e,
  hasSecondaryArea: t
}) => {
  if (i)
    throw new Error(Y("DSHeader", "A <DSTopBar.BrandArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
  if (e)
    throw new Error(Y("DSHeader", "A <DSTopBar.PrimaryArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
  if (t)
    throw new Error(Y("DSHeader", "A <DSTopBar.SecondaryArea> component was detected as a direct child of DSHeader. Please move it into the DSTopBar component."));
}, ke = "ds-top-bar_root_1dle4_1", $e = "ds-top-bar_root--sticky_1dle4_49", We = "ds-top-bar_root--fixed_1dle4_53", ze = "ds-top-bar_content_1dle4_62", Ie = "ds-top-bar_content--variant-full_1dle4_81", Ye = "ds-top-bar_content--has-primary-area-and-secondary-area_1dle4_85", Le = "ds-top-bar_primary_1dle4_90", qe = "ds-top-bar_content--has-brand-add-on-with-primary-area-and-secondary-area_1dle4_105", Ue = "ds-top-bar_brand_1dle4_110", je = "ds-top-bar_content--has-primary-area_1dle4_85", Ge = "ds-top-bar_content--has-primary-area--with-brand-add-on_1dle4_149", Je = "ds-top-bar_brand-add-on_1dle4_213", Ke = "ds-top-bar_brand-add-on--double_1dle4_234", Qe = "ds-top-bar_sub-title_1dle4_248", Xe = "ds-top-bar_secondary_1dle4_273", Ze = "ds-top-bar_logo_1dle4_282", et = "ds-top-bar_logo--reduced_1dle4_292", _ = {
  root: ke,
  rootSticky: $e,
  rootFixed: We,
  content: ze,
  contentVariantFull: Ie,
  contentHasPrimaryAreaAndSecondaryArea: Ye,
  primary: Le,
  contentHasBrandAddOnWithPrimaryAreaAndSecondaryArea: qe,
  brand: Ue,
  contentHasPrimaryArea: je,
  contentHasPrimaryAreaWithBrandAddOn: Ge,
  brandAddOn: Je,
  brandAddOnDouble: Ke,
  subTitle: Qe,
  secondary: Xe,
  logo: Ze,
  logoReduced: et
}, tt = ({
  hasBrandArea: i,
  hasPrimaryArea: e,
  hasSecondaryArea: t
}) => {
  if (!i)
    throw new Error(Y("DSTopBar", "A <DSTopBar.BrandArea> component is required. Please include it as a child of DSTopBar."));
  if (!e && t)
    throw new Error(Y("DSTopBar", "A <DSTopBar.PrimaryArea> is required when using <DSTopBar.SecondaryArea>. Please include <DSTopBar.PrimaryArea> as a child of DSTopBar, or move the content from <DSTopBar.SecondaryArea> into <DSTopBar.PrimaryArea>."));
}, Se = (i) => i == null || typeof i == "object" && !Array.isArray(i) && i !== null && Object.keys(i).length === 0, St = ["100years"], $ = (i) => {
  const e = P.c(28);
  let t, o, n, a;
  e[0] !== i ? ({
    children: t,
    className: o,
    rootClassName: a,
    ...n
  } = i, e[0] = i, e[1] = t, e[2] = o, e[3] = n, e[4] = a) : (t = e[1], o = e[2], n = e[3], a = e[4]);
  const {
    variant: l,
    isHeaderSticky: s,
    isMobile: c,
    topBarAreaRef: r,
    isStickyMainNavigationVisible: h,
    hasBrandAddOn: m
  } = ie(q);
  let A, f;
  if (e[5] !== t || e[6] !== o || e[7] !== m || e[8] !== s || e[9] !== c || e[10] !== h || e[11] !== a || e[12] !== l) {
    const w = O(t, _e), g = O(t, ye), d = O(t, ve);
    process.env.NODE_ENV !== "production" && tt({
      hasBrandArea: w,
      hasPrimaryArea: g,
      hasSecondaryArea: d
    });
    let N;
    e[15] !== s || e[16] !== c || e[17] !== h || e[18] !== a ? (N = D(_.root, a, s ? {
      [_.rootSticky]: !c && h,
      [_.rootFixed]: !c && !h
    } : {}), e[15] = s, e[16] = c, e[17] = h, e[18] = a, e[19] = N) : N = e[19], A = N, f = D(_.content, o, {
      [_.contentHasPrimaryArea]: g && !m && !d,
      [_.contentHasPrimaryAreaWithBrandAddOn]: g && m && !d,
      [_.contentHasBrandAddOnWithPrimaryAreaAndSecondaryArea]: m && g && d,
      [_.contentHasPrimaryAreaAndSecondaryArea]: g && d && !m,
      [_.contentVariantFull]: l === "full"
    }), e[5] = t, e[6] = o, e[7] = m, e[8] = s, e[9] = c, e[10] = h, e[11] = a, e[12] = l, e[13] = A, e[14] = f;
  } else
    A = e[13], f = e[14];
  const p = f;
  let u;
  e[20] !== t || e[21] !== p || e[22] !== n ? (u = /* @__PURE__ */ y("section", { className: p, ...n, children: t }), e[20] = t, e[21] = p, e[22] = n, e[23] = u) : u = e[23];
  let v;
  return e[24] !== A || e[25] !== u || e[26] !== r ? (v = /* @__PURE__ */ y("div", { className: A, ref: r, children: u }), e[24] = A, e[25] = u, e[26] = r, e[27] = v) : v = e[27], v;
}, _e = (i) => {
  const e = P.c(22), {
    children: t,
    className: o
  } = i, {
    logoProps: n,
    brandAddOnProps: a,
    setHasBrandAddOn: l
  } = ie(q), {
    aria: s,
    logo: c,
    href: r,
    target: h
  } = n || {}, m = c === void 0 ? "main" : c, A = r === void 0 ? "/" : r, f = h === void 0 ? "_self" : h;
  let p;
  e[0] !== a || e[1] !== t || e[2] !== l ? (p = () => {
    t || !Se(a) ? l?.(!0) : l?.(!1);
  }, e[0] = a, e[1] = t, e[2] = l, e[3] = p) : p = e[3];
  let u;
  e[4] !== a || e[5] !== t ? (u = [t, a], e[4] = a, e[5] = t, e[6] = u) : u = e[6], L(p, u);
  const v = D(_.logo, {
    [_.logoReduced]: m.includes("reduced")
  });
  let w;
  e[7] !== o ? (w = D(_.brand, o), e[7] = o, e[8] = w) : w = e[8];
  let g;
  e[9] !== s || e[10] !== A || e[11] !== m || e[12] !== v || e[13] !== f ? (g = /* @__PURE__ */ y(Re, { className: v, aria: s, logo: m, href: A, target: f }), e[9] = s, e[10] = A, e[11] = m, e[12] = v, e[13] = f, e[14] = g) : g = e[14];
  let d;
  e[15] !== a ? (d = Se(a) ? void 0 : /* @__PURE__ */ y(Be, { ...a }), e[15] = a, e[16] = d) : d = e[16];
  let N;
  return e[17] !== t || e[18] !== w || e[19] !== g || e[20] !== d ? (N = /* @__PURE__ */ ge("div", { className: w, children: [
    g,
    d,
    t
  ] }), e[17] = t, e[18] = w, e[19] = g, e[20] = d, e[21] = N) : N = e[21], N;
};
_e.displayName = "DSTopBar.BrandArea";
const Be = (i) => {
  const e = P.c(15), {
    children: t,
    className: o,
    subTitle: n,
    variant: a
  } = i;
  let l;
  e[0] !== o || e[1] !== n ? (l = D(_.brandAddOn, o, {
    [_.brandAddOnDouble]: n
  }), e[0] = o, e[1] = n, e[2] = l) : l = e[2];
  const s = l;
  if (n) {
    let r;
    e[3] !== t ? (r = /* @__PURE__ */ y("span", { children: t }), e[3] = t, e[4] = r) : r = e[4];
    let h;
    e[5] !== n ? (h = n && /* @__PURE__ */ y("span", { className: _.subTitle, children: n }), e[5] = n, e[6] = h) : h = e[6];
    let m;
    return e[7] !== s || e[8] !== r || e[9] !== h ? (m = /* @__PURE__ */ ge("div", { className: s, children: [
      r,
      h
    ] }), e[7] = s, e[8] = r, e[9] = h, e[10] = m) : m = e[10], m;
  }
  if (a === "100years") {
    let r;
    return e[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (r = /* @__PURE__ */ y(Ce, {}), e[11] = r) : r = e[11], r;
  }
  let c;
  return e[12] !== s || e[13] !== t ? (c = /* @__PURE__ */ y("div", { className: s, children: t }), e[12] = s, e[13] = t, e[14] = c) : c = e[14], c;
};
Be.displayName = "DSTopBar.BrandAddOn";
const ye = (i) => {
  const e = P.c(5), {
    children: t,
    className: o
  } = i;
  let n;
  e[0] !== o ? (n = D(_.primary, o), e[0] = o, e[1] = n) : n = e[1];
  let a;
  return e[2] !== t || e[3] !== n ? (a = /* @__PURE__ */ y("div", { className: n, children: t }), e[2] = t, e[3] = n, e[4] = a) : a = e[4], a;
};
ye.displayName = "DSTopBar.PrimaryArea";
const ve = (i) => {
  const e = P.c(5), {
    children: t,
    className: o
  } = i;
  let n;
  e[0] !== o ? (n = D(_.secondary, o), e[0] = o, e[1] = n) : n = e[1];
  let a;
  return e[2] !== t || e[3] !== n ? (a = /* @__PURE__ */ y("div", { className: n, children: t }), e[2] = t, e[3] = n, e[4] = a) : a = e[4], a;
};
ve.displayName = "DSTopBar.SecondaryArea";
$.BrandArea = _e;
$.PrimaryArea = ye;
$.SecondaryArea = ve;
const at = "ds-header_root_c5fh4_1", rt = "ds-header_root--sticky_c5fh4_4", nt = "ds-header_root--hidden_c5fh4_9", ot = "ds-header_root--fixed_c5fh4_20", it = "ds-header_main-navigation-area_c5fh4_37", st = "ds-header_main-navigation-area--fixed_c5fh4_90", dt = "ds-header_main-navigation-area--fixed--visible_c5fh4_105", lt = "ds-header_main-navigation-content_c5fh4_111", ct = "ds-header_main-navigation-content--variant-full_c5fh4_115", ht = "ds-header_header-placeholder_c5fh4_120", mt = "ds-header_header-placeholder--with-banner_c5fh4_123", S = {
  root: at,
  rootSticky: rt,
  rootHidden: nt,
  rootFixed: ot,
  mainNavigationArea: it,
  mainNavigationAreaFixed: st,
  mainNavigationAreaFixedVisible: dt,
  mainNavigationContent: lt,
  mainNavigationContentVariantFull: ct,
  headerPlaceholder: ht,
  headerPlaceholderWithBanner: mt
}, q = Fe({
  variant: "main"
}), se = (i) => {
  const e = P.c(61);
  let t, o, n, a, l, s, c;
  e[0] !== i ? ({
    children: o,
    brandAddOnProps: t,
    className: n,
    isHeaderSticky: s,
    variant: c,
    logoProps: a,
    ...l
  } = i, e[0] = i, e[1] = t, e[2] = o, e[3] = n, e[4] = a, e[5] = l, e[6] = s, e[7] = c) : (t = e[1], o = e[2], n = e[3], a = e[4], l = e[5], s = e[6], c = e[7]);
  const r = s === void 0 ? !1 : s, h = c === void 0 ? "main" : c, [m, A] = T(!1);
  let f;
  e[8] !== o ? (f = O(o, se.BannerArea, !0), e[8] = o, e[9] = f) : f = e[9];
  const p = f, u = O(o, $.BrandArea), v = O(o, $.PrimaryArea), w = O(o, $.SecondaryArea);
  process.env.NODE_ENV !== "production" && Me({
    hasBrandArea: u,
    hasPrimaryArea: v,
    hasSecondaryArea: w
  });
  const g = Ve(2), [d, N] = T(!1), W = I(null), U = I(null), de = I(null), le = I(null), [ce, De] = T(!1), [E, Pe] = T(!1), [H, be] = T(!0), [he, xe] = T(!1), me = I(d), j = ue(W), G = ue(de), J = ue(U), fe = G.height + j.height + J.height;
  let K, Q;
  e[10] !== r ? (K = () => {
    if (r) {
      const b = () => {
        N((x) => (me.current = x, window.innerWidth < 1024));
      };
      return b(), window.addEventListener("resize", b), () => window.removeEventListener("resize", b);
    }
  }, Q = [r], e[10] = r, e[11] = K, e[12] = Q) : (K = e[11], Q = e[12]), L(K, Q);
  let X;
  e[13] !== j.height || e[14] !== J.height || e[15] !== G.height ? (X = () => {
    const b = document.documentElement, x = j.height || 0, ne = G.height || 0;
    let B;
    if (!le.current)
      B = x + ne;
    else {
      const k = J.height || 0;
      !k || k === x ? B = parseInt(b.style.getPropertyValue("--ds-header-height").replace("rem", "")) * 16 || 0 : B = k;
    }
    b.style.setProperty("--ds-banner-height", `${pe(x)}rem`), b.style.setProperty("--ds-header-height", `${pe(B)}rem`), b.style.setProperty("--ds-top-bar-height", `${pe(ne)}rem`);
  }, e[13] = j.height, e[14] = J.height, e[15] = G.height, e[16] = X) : X = e[16];
  let Z;
  e[17] !== fe ? (Z = [fe], e[17] = fe, e[18] = Z) : Z = e[18], Ne(X, Z);
  let ee;
  e[19] !== r || e[20] !== d || e[21] !== H || e[22] !== g ? (ee = () => {
    if (r) {
      const b = () => {
        const B = U.current, k = !!B && window.scrollY <= B.offsetHeight;
        De(k);
        const z = le.current, oe = de.current;
        if (!d && me.current && !H) {
          be(k && !!B && window.scrollY <= B.offsetHeight);
          return;
        }
        const Te = !!oe && !!z && z.getBoundingClientRect().bottom > oe.getBoundingClientRect().bottom, Oe = !z && !!oe && !!W.current && (window.scrollY >= W.current.offsetHeight || 0) || !z && !W.current && !!oe && window.scrollY >= 1;
        be(z ? Te && !!B && window.scrollY <= B.offsetHeight : !Oe);
      };
      window.addEventListener("scroll", b, {
        passive: !0
      }), b();
      const x = U.current, ne = !!x && x.getBoundingClientRect().bottom > 0;
      return d && Pe(g === "up" && !ne), d || xe(g === "up" && !H), () => {
        window.removeEventListener("scroll", b);
      };
    }
  }, e[19] = r, e[20] = d, e[21] = H, e[22] = g, e[23] = ee) : ee = e[23];
  let te;
  e[24] !== r || e[25] !== d || e[26] !== g ? (te = [r, d, me, g], e[24] = r, e[25] = d, e[26] = g, e[27] = te) : te = e[27], L(ee, te);
  let ae;
  e[28] !== n || e[29] !== E || e[30] !== r || e[31] !== ce || e[32] !== d ? (ae = D(S.root, n, r ? {
    [S.rootSticky]: d,
    [S.rootHidden]: d && !ce,
    [S.rootFixed]: d && E
  } : {}), e[28] = n, e[29] = E, e[30] = r, e[31] = ce, e[32] = d, e[33] = ae) : ae = e[33];
  const Ae = ae;
  let F;
  e[34] !== t || e[35] !== m || e[36] !== he || e[37] !== r || e[38] !== d || e[39] !== H || e[40] !== a || e[41] !== h ? (F = {
    variant: h,
    bannerAreaRef: W,
    brandAddOnProps: t,
    hasBrandAddOn: m,
    setHasBrandAddOn: A,
    isFixedMainNavigation: he,
    isHeaderSticky: r,
    isMobile: d,
    isStickyMainNavigationVisible: H,
    mainNavigationAreaRef: le,
    topBarAreaRef: de,
    logoProps: a
  }, e[34] = t, e[35] = m, e[36] = he, e[37] = r, e[38] = d, e[39] = H, e[40] = a, e[41] = h, e[42] = F) : F = e[42];
  let R;
  e[43] !== o || e[44] !== F ? (R = /* @__PURE__ */ y(q.Provider, { value: F, children: o }), e[43] = o, e[44] = F, e[45] = R) : R = e[45];
  let C;
  e[46] !== l || e[47] !== Ae || e[48] !== R ? (C = /* @__PURE__ */ y("header", { className: Ae, ...l, ref: U, children: R }), e[46] = l, e[47] = Ae, e[48] = R, e[49] = C) : C = e[49];
  let V;
  e[50] !== E || e[51] !== d ? (V = d && E && /* @__PURE__ */ y("div", { className: S.headerPlaceholder }), e[50] = E, e[51] = d, e[52] = V) : V = e[52];
  let M;
  e[53] !== p || e[54] !== d || e[55] !== H ? (M = !d && !H && /* @__PURE__ */ y("div", { className: p ? S.headerPlaceholderWithBanner : S.headerPlaceholder }), e[53] = p, e[54] = d, e[55] = H, e[56] = M) : M = e[56];
  let re;
  return e[57] !== C || e[58] !== V || e[59] !== M ? (re = /* @__PURE__ */ ge(Ee, { children: [
    C,
    V,
    M
  ] }), e[57] = C, e[58] = V, e[59] = M, e[60] = re) : re = e[60], re;
}, we = (i) => {
  const e = P.c(4), {
    children: t,
    className: o
  } = i, {
    bannerAreaRef: n
  } = ie(q);
  let a;
  return e[0] !== n || e[1] !== t || e[2] !== o ? (a = /* @__PURE__ */ y("div", { ref: n, className: o, children: t }), e[0] = n, e[1] = t, e[2] = o, e[3] = a) : a = e[3], a;
};
we.displayName = "DSHeader.BannerArea";
const He = (i) => {
  const e = P.c(15), {
    children: t,
    className: o
  } = i, {
    variant: n,
    isFixedMainNavigation: a,
    isHeaderSticky: l,
    isMobile: s,
    isStickyMainNavigationVisible: c,
    mainNavigationAreaRef: r
  } = ie(q);
  let h;
  e[0] !== o || e[1] !== a || e[2] !== l || e[3] !== s || e[4] !== c ? (h = D(S.mainNavigationArea, o, l ? {
    [S.mainNavigationAreaFixed]: !s && !c,
    [S.mainNavigationAreaFixedVisible]: !s && a
  } : {}), e[0] = o, e[1] = a, e[2] = l, e[3] = s, e[4] = c, e[5] = h) : h = e[5];
  const m = h, A = n === "full";
  let f;
  e[6] !== A ? (f = D(S.mainNavigationContent, {
    [S.mainNavigationContentVariantFull]: A
  }), e[6] = A, e[7] = f) : f = e[7];
  const p = f;
  let u;
  e[8] !== t || e[9] !== p ? (u = /* @__PURE__ */ y("div", { className: p, children: t }), e[8] = t, e[9] = p, e[10] = u) : u = e[10];
  let v;
  return e[11] !== r || e[12] !== m || e[13] !== u ? (v = /* @__PURE__ */ y("div", { className: m, ref: r, children: u }), e[11] = r, e[12] = m, e[13] = u, e[14] = v) : v = e[14], v;
};
He.displayName = "DSHeader.MainNavigationArea";
se.BannerArea = we;
se.MainNavigationArea = He;
se.displayName = "DSHeader";
export {
  St as B,
  se as D,
  bt as H,
  q as a,
  $ as b,
  tt as c,
  Se as i,
  Me as v
};