@ilo-org/react 0.0.0-canary-080cbbe49-20250324173340

package/lib/esm/_store/SubsiteNav-chunk-SOH4RAJ1.js

@@ -0,0 +1,558 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { memo as z, useRef as L, useCallback as S, useEffect as y, useId as G, useState as x, forwardRef as O, useImperativeHandle as B } from "react";
+import { u as v } from "./useGlobalSettings-chunk-Bu2lRvQa.js";
+import { createPortal as A } from "react-dom";
+import { c as b } from "./index-chunk-CY3PQDr4.js";
+import { L as D } from "./LanguageToggle-chunk-BOqs0wmF.js";
+import { u as H } from "./useBreakpoint-chunk-c1_IoC-6.js";
+const q = ({
+  isOpen: s,
+  className: r,
+  navRef: c,
+  children: n
+}) => {
+  const { prefix: a } = v(), m = L(null), _ = `${a}--nav-dropdown`, t = S(() => {
+    if (!(m != null && m.current) || !(c != null && c.current))
+      return;
+    const o = c.current.getBoundingClientRect();
+    m.current.style.top = `${o.bottom}px`, m.current.style.width = `${o.width}px`;
+  }, [c]);
+  return y(() => (t(), window.addEventListener("resize", t), () => {
+    window.removeEventListener("resize", t);
+  }), [c]), typeof document > "u" ? null : A(
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: m,
+        className: b({
+          [_]: !0,
+          [`${_}--open`]: s,
+          className: r
+        }),
+        children: /* @__PURE__ */ e("div", { className: `${_}__container`, children: n })
+      }
+    ),
+    document.body
+  );
+}, P = z(q), f = (s) => {
+  const { label: r, component: c, ...n } = s;
+  return c ? /* @__PURE__ */ e(c, { ...n, children: r }) : /* @__PURE__ */ e("a", { ...n, children: r });
+}, T = ({ menu: s }) => {
+  const { prefix: r } = v(), c = `${r}--nav-menu-grid`, n = [];
+  for (let a = 0; a < s.length; a += 5)
+    n.push(s.slice(a, a + 5));
+  return /* @__PURE__ */ e("div", { className: c, children: n.map((a, m) => /* @__PURE__ */ e("div", { className: `${c}__column`, children: a.map((_) => {
+    var t;
+    return /* @__PURE__ */ e(
+      f,
+      {
+        className: `${c}__item`,
+        href: _.href,
+        label: _.label
+      },
+      (t = _.label) == null ? void 0 : t.toString()
+    );
+  }) }, m)) });
+}, I = ({
+  menu: s
+}) => {
+  const { prefix: r } = v(), c = `${r}--nav-mobile-menu`;
+  return /* @__PURE__ */ e("ul", { className: `${c}`, children: s.map((n, a) => {
+    const m = typeof n.isActive == "function" ? n.isActive() : n.isActive;
+    return /* @__PURE__ */ i("li", { className: `${c}__item`, children: [
+      /* @__PURE__ */ e(
+        f,
+        {
+          label: n.label,
+          href: n.href,
+          className: `${c}__link`
+        }
+      ),
+      m && /* @__PURE__ */ e("span", { className: `${c}__marked` })
+    ] }, a);
+  }) });
+}, M = ({
+  isOpen: s,
+  onClose: r,
+  header: c,
+  widgets: n,
+  children: a,
+  className: m
+}) => {
+  const { prefix: _ } = v(), t = G(), o = `${_}--nav-mobile-drawer`;
+  return typeof document > "u" ? null : A(
+    /* @__PURE__ */ i(
+      "div",
+      {
+        id: `${o}__${t}`,
+        className: b(o, m, {
+          [`${o}--open`]: s
+        }),
+        children: [
+          /* @__PURE__ */ i("div", { className: `${o}__header`, children: [
+            /* @__PURE__ */ e("div", { className: `${o}__header-main`, children: c }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: `${o}__header-close`,
+                onClick: r,
+                "aria-label": "Close navigation",
+                children: /* @__PURE__ */ e("span", { className: `${o}__header-close__icon` })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i("div", { className: `${o}__container`, children: [
+            /* @__PURE__ */ e("div", { className: `${o}__widgets`, children: n }),
+            a
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}, F = ({
+  options: s,
+  selected: r
+}) => {
+  const c = (s == null ? void 0 : s.map((a) => ({
+    label: a.label,
+    href: a.url
+  }))) || [], n = [{ label: r, href: "#", isActive: !0 }, ...c];
+  return /* @__PURE__ */ e(I, { menu: n });
+}, E = ({
+  isOpen: s,
+  navigationProps: {
+    branding: r,
+    menu: { items: c, labels: n },
+    widgets: a
+  },
+  onClose: m
+}) => {
+  var k, g, C;
+  const { prefix: _ } = v(), [t, o] = x(!1), [$, h] = x(!1), d = S(() => {
+    o(!1), h(!1);
+  }, []), u = `${_}--nav-mobile`, p = t || $, N = c.slice(0, 5), l = c.slice(5);
+  return /* @__PURE__ */ i(
+    M,
+    {
+      isOpen: s,
+      onClose: m,
+      header: /* @__PURE__ */ i("div", { className: `${u}__branding`, children: [
+        /* @__PURE__ */ e("div", { className: `${u}__logo`, children: r.logo.drawer || r.logo.main }),
+        /* @__PURE__ */ e("h3", { className: `${u}__name`, children: r.name })
+      ] }),
+      widgets: /* @__PURE__ */ i("div", { className: `${u}__widgets`, children: [
+        (a == null ? void 0 : a.search) && /* @__PURE__ */ i(
+          "a",
+          {
+            className: `${u}__widgets-search`,
+            href: a.search.url,
+            "aria-label": "Search",
+            children: [
+              /* @__PURE__ */ e("span", { className: `${u}__widgets-search__label`, children: a.search.label }),
+              /* @__PURE__ */ e("span", { className: `${u}__widgets-search__icon` })
+            ]
+          }
+        ),
+        (a == null ? void 0 : a.link) && /* @__PURE__ */ e(
+          f,
+          {
+            className: `${u}__widgets-link`,
+            href: a.link.href,
+            "aria-label": a.link.label,
+            label: a.link.label
+          }
+        ),
+        (a == null ? void 0 : a.language) && /* @__PURE__ */ i(
+          "button",
+          {
+            className: `${u}__widgets-language`,
+            onClick: () => h(!0),
+            "aria-expanded": $,
+            "aria-controls": "language-list",
+            "aria-label": "Select language",
+            children: [
+              /* @__PURE__ */ i("span", { className: `${u}__widgets-language__label`, children: [
+                a.language.label,
+                ": ",
+                a.language.language
+              ] }),
+              /* @__PURE__ */ e("span", { className: `${u}__widgets-language__icon` })
+            ]
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ e(I, { menu: N }),
+        !!l.length && /* @__PURE__ */ i(
+          "button",
+          {
+            className: `${u}__more`,
+            onClick: () => o(!0),
+            "aria-expanded": t,
+            "aria-controls": "more-items",
+            "aria-label": "More items",
+            children: [
+              n.more,
+              /* @__PURE__ */ e("span", { className: `${u}__more__icon` })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          M,
+          {
+            className: `${u}__nested`,
+            header: /* @__PURE__ */ i(
+              "button",
+              {
+                className: `${u}__nested__header`,
+                onClick: d,
+                "aria-label": "Back to menu",
+                children: [
+                  /* @__PURE__ */ e("span", { className: `${u}__nested__header__icon` }),
+                  n.backToMenu
+                ]
+              }
+            ),
+            widgets: /* @__PURE__ */ e("span", { className: `${u}__nested__title`, children: t ? n.more : (k = a == null ? void 0 : a.language) == null ? void 0 : k.label }),
+            isOpen: p,
+            onClose: d,
+            "aria-modal": "true",
+            children: t ? /* @__PURE__ */ e(I, { menu: l, id: "more-items" }) : /* @__PURE__ */ e(
+              F,
+              {
+                selected: ((g = a == null ? void 0 : a.language) == null ? void 0 : g.language) || "",
+                options: (C = a == null ? void 0 : a.language) == null ? void 0 : C.options,
+                id: "language-list"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+function X({ menu: s, split: r }) {
+  const { breakpoint: c } = H(), [n, a] = x(!1), [m, _] = x(!1), [t, o] = x(!1), $ = L(null), h = ["xl", "xxl"].includes(c || "md"), d = h ? r.desktop : r.mobile, u = s.slice(0, d), p = s.slice(d);
+  return y(() => {
+    o(!0);
+  }, []), {
+    menu: { facade: u, more: p },
+    more: [n, a],
+    mobile: [m, _],
+    isDesktop: h,
+    isClient: t,
+    ref: $
+  };
+}
+const j = ({ className: s, menu: r, more: c }) => {
+  const { prefix: n } = v(), a = `${n}--nav-menu`;
+  return /* @__PURE__ */ i("div", { className: b(a, s), children: [
+    /* @__PURE__ */ e("ul", { className: `${a}__list`, children: r.map(({ isActive: m, ..._ }) => {
+      var o;
+      const t = typeof m == "function" ? m() : m;
+      return /* @__PURE__ */ e("li", { className: `${a}__item`, children: /* @__PURE__ */ e(
+        f,
+        {
+          ..._,
+          className: b({
+            [`${a}__link`]: !0,
+            [`${a}__link--active`]: t,
+            [_.className || ""]: _.className
+          })
+        }
+      ) }, (o = _.label) == null ? void 0 : o.toString());
+    }) }),
+    c && /* @__PURE__ */ i(
+      "button",
+      {
+        onClick: c.onClick,
+        className: b({
+          [`${a}__more`]: !0,
+          [`${a}__more--open`]: c.isOpen
+        }),
+        "aria-expanded": c.isOpen,
+        "aria-haspopup": "menu",
+        children: [
+          c.label,
+          /* @__PURE__ */ e("span", { className: `${a}__more-icon` })
+        ]
+      }
+    )
+  ] });
+}, J = O(
+  ({
+    props: {
+      branding: s,
+      menu: { items: r, labels: c },
+      widgets: n
+    }
+  }, a) => {
+    const { prefix: m } = v(), {
+      menu: { facade: _, more: t },
+      more: [o, $],
+      mobile: [h, d],
+      isDesktop: u,
+      ref: p,
+      isClient: N
+    } = X({ menu: r, split: { desktop: 4, mobile: 2 } });
+    B(a, () => p.current);
+    const l = `${m}--subsite-nav-compact`;
+    return /* @__PURE__ */ i("header", { ref: p, className: l, children: [
+      /* @__PURE__ */ i("div", { className: `${l}__container`, children: [
+        /* @__PURE__ */ i("nav", { className: `${l}__nav`, children: [
+          /* @__PURE__ */ i(
+            "div",
+            {
+              className: `${l}__branding`,
+              onClick: s == null ? void 0 : s.onClick,
+              role: "button",
+              "aria-label": "Branding",
+              tabIndex: 0,
+              children: [
+                /* @__PURE__ */ e("div", { className: `${l}__branding-logo`, children: s.logo.main }),
+                /* @__PURE__ */ e("h3", { className: `${l}__branding-name`, children: s.name })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            j,
+            {
+              className: `${l}__menu`,
+              menu: _,
+              more: t.length ? {
+                label: c.more,
+                onClick: () => $(!o),
+                isOpen: o
+              } : void 0
+            }
+          )
+        ] }),
+        n && /* @__PURE__ */ i("div", { className: `${l}__widget-bar`, children: [
+          /* @__PURE__ */ e("span", { className: `${l}__widget-bar-corner` }),
+          /* @__PURE__ */ i("div", { className: `${l}__widget-bar-content`, children: [
+            n.link && /* @__PURE__ */ e(
+              f,
+              {
+                className: `${l}__widget-bar-link`,
+                href: n.link.href,
+                label: n.link.label
+              }
+            ),
+            n.language && N && /* @__PURE__ */ e("div", { className: `${l}__widget-bar-language`, children: /* @__PURE__ */ e(
+              D,
+              {
+                theme: "dark",
+                ...n.language,
+                hideIcon: !u
+              }
+            ) }),
+            n.search && /* @__PURE__ */ e(
+              f,
+              {
+                href: n.search.url,
+                className: `${l}__widget-bar-search`,
+                label: "",
+                "aria-label": n.search.label
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          "button",
+          {
+            className: `${l}__burger`,
+            "aria-label": "Toggle navigation",
+            "aria-expanded": h,
+            onClick: () => d(!h),
+            children: /* @__PURE__ */ e("span", { className: `${l}__burger-icon` })
+          }
+        )
+      ] }),
+      t && N && /* @__PURE__ */ e(P, { isOpen: o, navRef: p, children: /* @__PURE__ */ e(T, { menu: t }) }),
+      N && /* @__PURE__ */ e(
+        E,
+        {
+          isOpen: h,
+          onClose: () => {
+            d(!1);
+          },
+          navigationProps: {
+            widgets: n,
+            branding: s,
+            menu: {
+              items: r,
+              labels: c
+            }
+          }
+        }
+      )
+    ] });
+  }
+), K = O(
+  ({
+    props: {
+      branding: s,
+      menu: { items: r, labels: c },
+      widgets: n
+    }
+  }, a) => {
+    var k, g, C;
+    const { prefix: m } = v(), {
+      menu: { facade: _, more: t },
+      more: [o, $],
+      mobile: [h, d],
+      isDesktop: u,
+      ref: p,
+      isClient: N
+    } = X({ menu: r, split: { desktop: 6, mobile: 5 } });
+    B(a, () => p.current);
+    const l = `${m}--subsite-nav-complex`;
+    return /* @__PURE__ */ i("header", { ref: p, className: l, children: [
+      /* @__PURE__ */ e("div", { className: b(`${l}-bg--light`), children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: b(
+            `${l}__widgets`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ e("span", { className: `${l}__widgets-bar-corner` }),
+            /* @__PURE__ */ i("span", { className: `${l}__widgets-bar`, children: [
+              (n == null ? void 0 : n.link) && /* @__PURE__ */ e(
+                f,
+                {
+                  href: n.link.href,
+                  label: n.link.label,
+                  className: `${l}__widgets-bar__link`
+                }
+              ),
+              (n == null ? void 0 : n.language) && N && /* @__PURE__ */ e(
+                D,
+                {
+                  className: `${l}__widgets-bar__language`,
+                  ...n.language,
+                  hideIcon: !u
+                }
+              )
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: b(`${l}-bg--light`), children: /* @__PURE__ */ i(
+        "div",
+        {
+          className: b(
+            `${l}__branding`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ i("div", { className: `${l}__branding-main`, children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `${l}__branding-main__logo`,
+                  onClick: s == null ? void 0 : s.onClick,
+                  role: "button",
+                  "aria-label": "Branding",
+                  tabIndex: 0,
+                  children: s.logo.main
+                }
+              ),
+              /* @__PURE__ */ e("h3", { className: `${l}__branding-main__name`, children: s.name })
+            ] }),
+            /* @__PURE__ */ i("div", { className: `${l}__branding-tag`, children: [
+              /* @__PURE__ */ e("h4", { className: `${l}__branding-tag__main`, children: (k = s.tag) == null ? void 0 : k.main }),
+              ((g = s.tag) == null ? void 0 : g.sub) && /* @__PURE__ */ e("span", { className: `${l}__branding-tag__sub`, children: (C = s.tag) == null ? void 0 : C.sub })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e("div", { className: b(`${l}-bg--dark`), children: /* @__PURE__ */ i(
+        "nav",
+        {
+          className: b(
+            `${l}__nav`,
+            `${l}__container`
+          ),
+          children: [
+            /* @__PURE__ */ i("div", { className: `${l}__nav-mobile`, children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `${l}__nav-mobile__logo`,
+                  onClick: s == null ? void 0 : s.onClick,
+                  role: "button",
+                  "aria-label": "Branding",
+                  tabIndex: 0,
+                  children: s.logo.mobile
+                }
+              ),
+              /* @__PURE__ */ e("h3", { className: `${l}__nav-mobile__name`, children: s.name })
+            ] }),
+            _ && /* @__PURE__ */ e(
+              j,
+              {
+                className: `${l}__nav-menu`,
+                menu: _,
+                more: t.length ? {
+                  label: c.more,
+                  onClick: () => $(!o),
+                  isOpen: o
+                } : void 0
+              }
+            ),
+            (n == null ? void 0 : n.search) && /* @__PURE__ */ e(
+              "a",
+              {
+                className: `${l}__nav-search`,
+                href: n.search.url,
+                "aria-label": n.search.label,
+                children: /* @__PURE__ */ e("span", { className: `${l}__nav-search__icon` })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                className: `${l}__nav-burger`,
+                "aria-label": "Toggle navigation",
+                "aria-expanded": h,
+                onClick: () => d(!h),
+                children: /* @__PURE__ */ e("span", { className: `${l}__nav-burger__icon` })
+              }
+            )
+          ]
+        }
+      ) }),
+      t && N && /* @__PURE__ */ e(P, { isOpen: o, navRef: p, children: /* @__PURE__ */ e(T, { menu: t }) }),
+      N && /* @__PURE__ */ e(
+        E,
+        {
+          isOpen: h,
+          onClose: () => {
+            d(!1);
+          },
+          navigationProps: {
+            widgets: n,
+            branding: s,
+            menu: {
+              items: r,
+              labels: c
+            }
+          }
+        }
+      )
+    ] });
+  }
+), Q = {
+  complex: K,
+  compact: J
+}, ee = O(
+  ({ type: s = "compact", props: r }, c) => {
+    const n = Q[s];
+    return /* @__PURE__ */ e(n, { ref: c, props: r });
+  }
+);
+export {
+  ee as S
+};

package/lib/esm/_store/TableOfContents-chunk-DZGMY0rb.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c } from "./index-chunk-CY3PQDr4.js";
+import { u as i } from "./useGlobalSettings-chunk-Bu2lRvQa.js";
+const m = ({ className: t, items: a }) => {
+  const { prefix: n } = i(), s = `${n}--table-of-contents`, r = c(t, {
+    [s]: !0
+  });
+  return /* @__PURE__ */ e("nav", { className: r, children: /* @__PURE__ */ e("ul", { className: `${s}--list`, children: a && a.map((l, o) => /* @__PURE__ */ e("li", { className: `${s}--list--item`, children: /* @__PURE__ */ e("a", { className: `${s}--link`, href: l.href, children: l.label }) }, o)) }) });
+}, p = m;
+export {
+  p as T
+};

package/lib/esm/_store/TableOfContents-entry-BDcD4Aj2.js

@@ -0,0 +1,4 @@
+import { T as t } from "./TableOfContents-chunk-DZGMY0rb.js";
+export {
+  t as TableOfContents
+};

package/lib/esm/_store/Tabs-chunk-CJEM1dIG.js

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { u as h } from "./useGlobalSettings-chunk-Bu2lRvQa.js";
+import { c as p } from "./index-chunk-CY3PQDr4.js";
+import { I as d } from "./Icon-chunk-DIxw5wWq.js";
+const f = ({ items: c }) => {
+  const [l, n] = $(0), i = (s, e) => {
+    n(s), e.preventDefault();
+  }, { prefix: r } = h(), a = `${r}--tabs`, m = p(a);
+  return /* @__PURE__ */ o("div", { className: `${m} tabs--js`, children: [
+    /* @__PURE__ */ t("ul", { className: `${a}--selection`, role: "tablist", children: c.map((s, e) => /* @__PURE__ */ t(
+      "li",
+      {
+        role: "tab",
+        className: `${a}--selection--item ${l === e ? "active" : ""}`,
+        onClick: (b) => i(e, b),
+        children: /* @__PURE__ */ o(
+          "a",
+          {
+            href: `#tab--${e}`,
+            className: `${a}--selection--button${s.icon ? " icon" : ""}`,
+            role: "tab",
+            "aria-controls": `tab--${e}`,
+            "aria-selected": e === l,
+            title: s.label,
+            children: [
+              /* @__PURE__ */ t("span", { className: `${a}--selection--label`, children: s.label }),
+              s.icon && /* @__PURE__ */ t(d, { name: s.icon.name, hidden: s.icon.hidden })
+            ]
+          }
+        )
+      },
+      `#tab--${e}`
+    )) }),
+    /* @__PURE__ */ t("div", { className: `${a}--content`, children: c[l].content })
+  ] });
+}, j = f;
+export {
+  j as T
+};

package/lib/esm/_store/Tabs-entry-O7PXntWG.js

@@ -0,0 +1,4 @@
+import { T as r } from "./Tabs-chunk-CJEM1dIG.js";
+export {
+  r as Tabs
+};

package/lib/esm/_store/Tag-chunk-BfT6mRr3.js

@@ -0,0 +1,68 @@
+import { jsx as n, Fragment as x, jsxs as g } from "react/jsx-runtime";
+import { createContext as T, useContext as I } from "react";
+import { c as S } from "./index-chunk-CY3PQDr4.js";
+import { u as _ } from "./useGlobalSettings-chunk-Bu2lRvQa.js";
+import { I as w } from "./Icon-chunk-DIxw5wWq.js";
+function E(e) {
+  let t = [...e.itemStatuses];
+  return t.indexOf(e.id) > -1 ? t = t.filter((s) => s !== e.id) : e.allowMultipleExpanded ? t.push(e.id) : t = [e.id], t;
+}
+const M = T({}), j = ({
+  className: e,
+  children: t,
+  id: s,
+  url: h,
+  type: a,
+  callback: m,
+  ...i
+}) => {
+  const { prefix: u } = _(), { activeItems: d, setActiveItems: C, allowMultipleActive: b } = I(M), l = d.indexOf(s) > -1, c = `${u}--tag`, f = `${u}--tag-set__item`, v = a, r = S(e, {
+    [c]: !0,
+    [`${c}--active`]: l,
+    [`${c}--${a}`]: a,
+    "icon icon__position--right": !0
+  });
+  let p = l;
+  const $ = (o) => {
+    C(
+      E({
+        id: s,
+        itemStatuses: d,
+        allowMultipleExpanded: b
+      })
+    ), p = !1, m && m(o);
+  };
+  return /* @__PURE__ */ n(x, { children: v === "button" ? /* @__PURE__ */ n(x, { children: (() => {
+    let o;
+    return p && (o = /* @__PURE__ */ n("li", { className: f, children: /* @__PURE__ */ g(
+      "button",
+      {
+        type: "button",
+        className: r,
+        onClick: (N) => $(N),
+        id: s,
+        ...i,
+        children: [
+          t,
+          /* @__PURE__ */ n(w, { name: "close", hidden: !0 })
+        ]
+      }
+    ) })), o;
+  })() }) : /* @__PURE__ */ g("li", { className: f, children: [
+    a === "anchor" && /* @__PURE__ */ n(
+      "a",
+      {
+        className: r,
+        href: l ? h : "",
+        id: s,
+        ...i,
+        children: t
+      }
+    ),
+    a === "display" && /* @__PURE__ */ n("span", { className: r, id: s, ...i, children: t })
+  ] }) });
+}, q = j;
+export {
+  q as T,
+  M as a
+};