@ilo-org/react 0.17.7 → 0.18.0

package/lib/esm/_store/Icon-entry-d1Lq52eV.js

@@ -0,0 +1,4 @@
+import { I } from "./Icon-chunk-x0E_KQyQ.js";
+export {
+  I as Icon
+};

package/lib/esm/_store/Image-chunk-C4zF97rw.js

@@ -0,0 +1,35 @@
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
+import { c as o } from "./index-chunk-0LeqwHm8.js";
+import { u } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { C } from "./Credit-chunk-BjaAFul8.js";
+const $ = ({ alt: p, caption: c, className: l, credit: m, url: s }) => {
+  const { prefix: g } = u(), r = `${g}--image`, n = o(l, {
+    [r]: !0
+  }), d = o("", {
+    [`${r}--img`]: !0
+  }), f = o("", {
+    [`${r}--caption`]: !0
+  });
+  return /* @__PURE__ */ i("figure", { className: n, children: [
+    /* @__PURE__ */ i("div", { className: `${n}--wrapper`, children: [
+      /* @__PURE__ */ i("picture", { className: d, children: [
+        s && s.sort(
+          (e, t) => parseFloat(e.breakpoint) - parseFloat(t.breakpoint)
+        ).slice(1).reverse().map((e, t) => /* @__PURE__ */ a(
+          "source",
+          {
+            srcSet: e.src,
+            media: `(min-width: ${e.breakpoint}px)`
+          },
+          t
+        )),
+        s && /* @__PURE__ */ a("img", { src: s[0].src, alt: p })
+      ] }),
+      m && /* @__PURE__ */ a(C, { credit: m })
+    ] }),
+    c && /* @__PURE__ */ a("figcaption", { className: f, children: c })
+  ] });
+}, k = $;
+export {
+  k as I
+};

package/lib/esm/_store/Image-entry-DaqK9C99.js

@@ -0,0 +1,4 @@
+import { I as m } from "./Image-chunk-C4zF97rw.js";
+export {
+  m as Image
+};

package/lib/esm/_store/Input-chunk-p-3N8OO4.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { c as F } from "./index-chunk-0LeqwHm8.js";
+import { u as I } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { F as $ } from "./Fieldset-chunk-PK4HqNv_.js";
+import { F as b } from "./FormElement-chunk-DqR8rtCB.js";
+const j = x(
+  ({
+    callback: o,
+    disabled: a = !1,
+    error: e,
+    helper: m,
+    id: n,
+    label: i,
+    name: s,
+    placeholder: p,
+    required: r,
+    tooltip: l,
+    value: f,
+    type: c = "text"
+  }, u) => {
+    const { prefix: h } = I(), d = `${h}--input`, C = F("", {
+      [d]: !0,
+      error: e
+    });
+    return /* @__PURE__ */ t($, { children: /* @__PURE__ */ t(
+      b,
+      {
+        elemid: s,
+        label: i,
+        helper: m,
+        error: e,
+        required: r,
+        tooltip: l,
+        children: /* @__PURE__ */ t(
+          "input",
+          {
+            id: n || s,
+            name: s,
+            onChange: (g) => {
+              o && o(g);
+            },
+            disabled: a,
+            placeholder: p,
+            required: r,
+            type: c,
+            value: f,
+            className: C,
+            ref: u
+          }
+        )
+      }
+    ) });
+  }
+), y = j;
+export {
+  y as I
+};

package/lib/esm/_store/Input-entry-DG2Mv1K2.js

@@ -0,0 +1,4 @@
+import { I as r } from "./Input-chunk-p-3N8OO4.js";
+export {
+  r as Input
+};

package/lib/esm/_store/Link-chunk-zt732cUC.js

@@ -0,0 +1,36 @@
+import { jsxs as p, jsx as u } from "react/jsx-runtime";
+import { c as m } from "./index-chunk-0LeqwHm8.js";
+import { u as d } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const k = ({
+  children: i,
+  className: s,
+  label: n,
+  target: e,
+  theme: r = "light",
+  url: t,
+  style: l,
+  ...a
+}) => {
+  const { prefix: c } = d(), o = typeof s < "u" && s.includes("button") ? "" : `${c}--link`, f = m(s, {
+    [o]: !0,
+    [`${o}--${r}`]: r
+  });
+  return /* @__PURE__ */ p(
+    "a",
+    {
+      className: f,
+      href: t,
+      target: e,
+      rel: e ? "noopener noreferrer" : "",
+      style: l,
+      ...a,
+      children: [
+        n && /* @__PURE__ */ u("span", { className: "link__label", children: n }),
+        i
+      ]
+    }
+  );
+}, h = k;
+export {
+  h as L
+};

package/lib/esm/_store/Link-entry-BY4hUubQ.js

@@ -0,0 +1,4 @@
+import { L } from "./Link-chunk-zt732cUC.js";
+export {
+  L as Link
+};

package/lib/esm/_store/LinkList-chunk-CIZvyv8v.js

@@ -0,0 +1,38 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import { c as h } from "./index-chunk-0LeqwHm8.js";
+import { u as p } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const u = ({
+  className: m,
+  headline: n,
+  linkgroup: r,
+  theme: e
+}) => {
+  const { prefix: t } = p(), s = `${t}--link-list`, d = h(m, {
+    [s]: !0,
+    [`${s + "--" + (e && e === "dark" ? e : "light")}`]: !0
+  });
+  return /* @__PURE__ */ c("div", { className: d, children: [
+    n && /* @__PURE__ */ l("h3", { className: `${s}--headline`, children: n }),
+    /* @__PURE__ */ l("ul", { className: `${s}--linkgroups`, children: r && r.map((i, $) => /* @__PURE__ */ c(
+      "li",
+      {
+        className: `${s}--linkgroups-item`,
+        children: [
+          i.headline && /* @__PURE__ */ l("h4", { className: `${s}--links--headline`, children: i.headline }),
+          /* @__PURE__ */ l("ul", { className: `${s}--links`, children: i.links && i.links.map((a, o) => /* @__PURE__ */ l(
+            "li",
+            {
+              className: `${s}--links--item${a.indented ? " indented" : ""}`,
+              children: /* @__PURE__ */ l("a", { href: a.url, className: `${s}--link`, children: /* @__PURE__ */ l("span", { className: `${s}--label`, children: a.label }) })
+            },
+            `${s}--links--item-${o}`
+          )) })
+        ]
+      },
+      `${s}--linkgroups-item-${$}`
+    )) })
+  ] });
+}, f = u;
+export {
+  f as L
+};

package/lib/esm/_store/LinkList-entry-ChpzxNTf.js

@@ -0,0 +1,4 @@
+import { L as o } from "./LinkList-chunk-CIZvyv8v.js";
+export {
+  o as LinkList
+};

package/lib/esm/_store/List-entry-C68jMDRE.js

@@ -0,0 +1,5 @@
+import { L as a, a as L } from "./ListItem-chunk-CKnxZe3Y.js";
+export {
+  a as List,
+  L as ListItem
+};

package/lib/esm/_store/ListItem-chunk-CKnxZe3Y.js

@@ -0,0 +1,26 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { c } from "./index-chunk-0LeqwHm8.js";
+import { u as r } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const p = ({
+  children: t,
+  className: n,
+  alignment: e = "default",
+  ordered: s = "unstyled",
+  title: l
+}) => {
+  const { prefix: i } = r(), a = `${i}--list`, m = `${a}__unstyled`, u = `${a}__horizontal`, C = `${a}--title`, $ = c(n, a, {
+    [m]: s === "unstyled",
+    [u]: e === "horizontal"
+  });
+  return /* @__PURE__ */ f("div", { className: $, children: [
+    l && /* @__PURE__ */ o("h2", { className: C, children: l }),
+    s && s === "ordered" ? /* @__PURE__ */ o("ol", { children: t }) : /* @__PURE__ */ o("ul", { children: t })
+  ] });
+}, y = p, d = ({ children: t, className: n, ...e }) => {
+  const { prefix: s } = r(), l = `${s}--list--item`, i = c(n, l);
+  return /* @__PURE__ */ o("li", { className: i, ...e, children: t });
+}, _ = d;
+export {
+  y as L,
+  _ as a
+};

package/lib/esm/_store/Loading-chunk-BIJLAqk6.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { c } from "./index-chunk-0LeqwHm8.js";
+import { u as t } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const d = ({ className: i, message: r, size: s, status: o }) => {
+  const { prefix: l } = t(), a = `${l}--loading`, n = c(i, {
+    [a]: !0,
+    [`${a}--${s}`]: s,
+    [`${a}--${o}`]: o
+  });
+  return /* @__PURE__ */ e("div", { className: n, role: "alert", "aria-live": "assertive", children: o && r && o !== "idle" && /* @__PURE__ */ e("p", { className: `${a}--copy`, children: r }) });
+}, f = d;
+export {
+  f as L
+};

package/lib/esm/_store/Loading-entry-84g0sHXB.js

@@ -0,0 +1,4 @@
+import { L as r } from "./Loading-chunk-BIJLAqk6.js";
+export {
+  r as Loading
+};

package/lib/esm/_store/LocalNav-chunk-BTJAs9kb.js

@@ -0,0 +1,207 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useState as $ } from "react";
+import { u as L } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { C as O } from "./ContextMenu-chunk-CkdC2iPF.js";
+import { c as M } from "./index-chunk-0LeqwHm8.js";
+import { L as g } from "./Logo-chunk-CsxA3mRV.js";
+const T = {
+  "ilo-blue": {
+    value: "rgba(30, 45, 190, 1)"
+  },
+  "ilo-red": {
+    value: "rgba(250, 60, 75, 1)"
+  },
+  "ilo-dark-blue": {
+    value: "rgba(35, 0, 80, 1)"
+  },
+  "ilo-yellow": {
+    value: "rgba(255, 205, 45, 1)"
+  },
+  "ilo-green": {
+    value: "rgba(140, 225, 100, 1)"
+  },
+  "ilo-purple": {
+    value: "rgba(150, 10, 85, 1)"
+  },
+  "ilo-purple-light": {
+    value: "rgba(116, 96, 145, 1)"
+  },
+  "ilo-turquoise": {
+    value: "rgba(5, 210, 210, 1)"
+  },
+  "ilo-dark-red": {
+    value: "rgba(200, 48, 60, 1)"
+  },
+  "ilo-light-blue": {
+    value: "rgba(235, 245, 253, 1)"
+  },
+  "ilo-grey-light-alternate": {
+    value: "rgba(246, 247, 248, 1)"
+  },
+  "ilo-grey-light": {
+    value: "rgba(237, 240, 242, 1)"
+  },
+  "ilo-grey-ui": {
+    value: "rgba(184, 196, 204, 1)"
+  },
+  "ilo-grey-accessible": {
+    value: "rgba(109, 109, 109, 1)"
+  },
+  "ilo-black": {
+    value: "rgba(45, 45, 45, 1)"
+  },
+  "ilo-white": {
+    value: "rgba(255, 255, 255, 1)"
+  },
+  "ilo-ramp-blue": {
+    value: "rgba(190, 220, 250, 1)"
+  },
+  "ilo-ramp-red": {
+    value: "rgba(254, 216, 219, 1)"
+  },
+  "ilo-ramp-green": {
+    value: "rgba(232, 249, 224, 1)"
+  },
+  "ilo-ramp-yellow": {
+    value: "rgba(255, 245, 200, 1)"
+  }
+}, N = 280, z = ({
+  background: d,
+  logo: a,
+  primarynav: s,
+  mainlink: t,
+  menucloselabel: p,
+  languagelabel: b,
+  languagecontextmenu: n
+}) => {
+  const { prefix: l } = L(), [h, k] = $(!1), [m, f] = $(!1), i = `${l}--header`, w = M(i, `${i}--local`, {
+    [`${l}--mobile--open`]: h,
+    [`${l}--select--open`]: m
+  }), C = d || T["ilo-dark-blue"].value, u = () => {
+    k(!h);
+  }, v = () => {
+    f(!m);
+  };
+  return /* @__PURE__ */ e("header", { className: w, children: /* @__PURE__ */ c(
+    "div",
+    {
+      className: `${i}--utility-bar ${i}--utility-bar--local`,
+      style: { background: C },
+      children: [
+        /* @__PURE__ */ c("nav", { className: `${l}--nav--local`, children: [
+          /* @__PURE__ */ e("div", { className: `${l}--nav--local--logo-wrapper`, children: /* @__PURE__ */ e(
+            g,
+            {
+              url: a.url,
+              src: a.src,
+              alt: a.alt,
+              className: `${l}--nav--local--logo`,
+              subbrand: a.subbrand,
+              theme: a.theme,
+              size: a.size || N
+            }
+          ) }),
+          /* @__PURE__ */ e("ul", { className: `${l}--nav--local--set`, children: (s == null ? void 0 : s.items) && s.items.map((r, o) => /* @__PURE__ */ e("li", { className: `${l}--nav--local--item`, children: /* @__PURE__ */ e("a", { href: r.url, className: `${l}--nav--local--link`, children: /* @__PURE__ */ e("span", { children: r.label }) }) }, o)) })
+        ] }),
+        /* @__PURE__ */ e("div", { className: `${l}--language-switcher`, children: /* @__PURE__ */ c("div", { className: `${l}--language-switcher--wrap`, children: [
+          t && /* @__PURE__ */ e("span", { className: `${l}--language-switcher--link--wrap`, children: /* @__PURE__ */ e(
+            "a",
+            {
+              href: t.url,
+              className: `${l}--language-switcher--link`,
+              children: t.label
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            "button",
+            {
+              className: `${l}--language-switcher--button`,
+              type: "button",
+              children: b
+            }
+          ),
+          /* @__PURE__ */ e(O, { links: n == null ? void 0 : n.links })
+        ] }) }),
+        /* @__PURE__ */ e("button", { className: `${i}--menu`, onClick: u, children: "Menu" }),
+        /* @__PURE__ */ e("div", { className: `${i}--navigation`, children: /* @__PURE__ */ c("div", { className: `${i}--inner`, children: [
+          /* @__PURE__ */ c("div", { className: `${l}--mobile--nav`, children: [
+            /* @__PURE__ */ c("div", { className: `${l}--mobile--nav--logo`, children: [
+              /* @__PURE__ */ e(
+                g,
+                {
+                  url: a.url,
+                  src: a.src,
+                  alt: a.alt,
+                  className: `${l}--nav--local--logo`,
+                  subbrand: a.subbrand,
+                  theme: a.theme,
+                  size: a.size || N
+                }
+              ),
+              /* @__PURE__ */ e(
+                "button",
+                {
+                  className: `${i}--menu--close`,
+                  onClick: u,
+                  children: p
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e("div", { className: `${l}--mobile--nav--language--switcher`, children: /* @__PURE__ */ e(
+              "button",
+              {
+                className: `${l}--mobile--nav--language--switcher--button`,
+                onClick: v,
+                type: "button",
+                children: b
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: `${l}--mobile--nav--language--select`, children: /* @__PURE__ */ c("div", { className: `${i}--inner`, children: [
+              /* @__PURE__ */ c("div", { className: `${l}--mobile--subnav--menu`, children: [
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    className: `${l}--mobile--subnav--back`,
+                    onClick: v,
+                    type: "button"
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "button",
+                  {
+                    className: `${i}--menu--close`,
+                    onClick: u,
+                    children: "Close"
+                  }
+                ),
+                /* @__PURE__ */ e("h6", { className: `${l}--mobile--subnav--label`, children: b })
+              ] }),
+              /* @__PURE__ */ e("ul", { className: `${l}--nav--set`, children: (n == null ? void 0 : n.links) && n.links.map((r, o) => /* @__PURE__ */ e("li", { className: `${l}--nav--items`, children: /* @__PURE__ */ e(
+                "a",
+                {
+                  href: r.url,
+                  className: `${l}--nav--link ${l}--nav--language`,
+                  children: r.label
+                }
+              ) }, o)) })
+            ] }) })
+          ] }),
+          /* @__PURE__ */ c(
+            "nav",
+            {
+              className: `${l}--nav`,
+              "aria-labelledby": "primary-navigation",
+              children: [
+                /* @__PURE__ */ e("h2", { className: `${l}--nav--label`, id: "primary-navigation", children: s == null ? void 0 : s.navlabel }),
+                /* @__PURE__ */ e("ul", { className: `${l}--nav--set`, children: (s == null ? void 0 : s.items) && s.items.map((r, o) => /* @__PURE__ */ e("li", { className: `${l}--nav--items`, children: /* @__PURE__ */ e("a", { href: r.url, className: `${l}--nav--link`, children: r.label }) }, o)) })
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  ) });
+}, A = z;
+export {
+  A as L
+};

package/lib/esm/_store/LocalNav-entry-CYlCB-lD.js

@@ -0,0 +1,4 @@
+import { L as r } from "./LocalNav-chunk-BTJAs9kb.js";
+export {
+  r as LocalNav
+};

package/lib/esm/_store/Logo-chunk-CsxA3mRV.js

@@ -0,0 +1,121 @@
+import { jsx as u, jsxs as H } from "react/jsx-runtime";
+import { useRef as m, useState as S, useEffect as J, useLayoutEffect as L } from "react";
+import { u as K } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { c as v } from "./index-chunk-0LeqwHm8.js";
+const M = ({
+  clientHeight: e,
+  clientWidth: s,
+  scrollHeight: n,
+  scrollWidth: i
+}) => n > e || i > s, P = (e, { maxSize: s = 600, startingHeight: n = 9, step: i = 0.5 }) => {
+  let t = n, r = !1;
+  for (; !r && t < s; )
+    e.style.fontSize = `${t}px`, e.style.lineHeight = `${t}px`, r = M(e), r || (t = t + i);
+  return e.style.fontSize = "", e.style.lineHeight = "", t - i;
+}, w = ({
+  baseClass: e,
+  className: s,
+  subbrand: n,
+  alt: i,
+  src: t,
+  style: r,
+  size: f = "fluid",
+  theme: l = "light",
+  ...x
+}) => {
+  const a = m(null), h = m(null), z = m(null), c = m(null), [g, N] = S(!1), [I, B] = S(0), [y, b] = S(0), [E, W] = S(!n), R = m(
+    new ResizeObserver((o) => {
+      const { height: p } = o[0].contentRect;
+      c.current || (c.current = p), B(p);
+    })
+  );
+  J(() => {
+    n && g && y && W(!0);
+  }, [g, y, n]), L(() => {
+    if (g && h.current && a.current) {
+      const o = a.current;
+      return R.current.observe(o), () => R.current.unobserve(o);
+    }
+  }, [g]), L(() => {
+    F();
+  }, [g, c.current]), L(() => {
+    F();
+  }, [n]);
+  function F() {
+    if (h.current && z.current && c.current) {
+      const p = P(h.current, {
+        maxSize: c.current
+      }) / c.current;
+      b(p);
+    }
+  }
+  function j() {
+    N(!0);
+  }
+  const d = !!n, k = f === "fluid", C = !k && typeof f == "number", $ = `${e}--sub-brand`, O = `${e}--size--fluid`, V = `${e}--visibility--hidden`, G = v(
+    e,
+    s,
+    `${e}--theme--${l}`,
+    {
+      [V]: !E,
+      [O]: k,
+      [$]: d
+    }
+  ), T = `${e}--image`, q = `${$}--image`, A = () => {
+    const o = {};
+    return d && (o["--logo-image-height"] = `${I}px`, o["--logo-font-size"] = `${y * I}px`), C && (o.width = `${f}px`), { userStyles: r, ...o };
+  }, D = () => typeof t == "string" ? t : t[l];
+  return /* @__PURE__ */ H("figure", { className: G, style: A(), children: [
+    /* @__PURE__ */ u(
+      "img",
+      {
+        ref: a,
+        alt: i,
+        src: D(),
+        className: v({
+          [q]: d,
+          [T]: !d
+        }),
+        onLoad: j,
+        ...x
+      }
+    ),
+    d && /* @__PURE__ */ H("div", { ref: h, className: `${$}--lock-up`, children: [
+      /* @__PURE__ */ u("span", { className: `${$}--lock-up--separator` }),
+      /* @__PURE__ */ u("span", { ref: z, children: n })
+    ] })
+  ] });
+}, Q = ({
+  className: e,
+  url: s,
+  target: n,
+  style: i,
+  size: t,
+  ...r
+}) => {
+  const { prefix: f } = K(), l = `${f}--logo`, x = `${l}--link`, a = `${l}--size--fluid`;
+  return s ? /* @__PURE__ */ u(
+    "a",
+    {
+      href: s,
+      target: n,
+      className: v(x, e, {
+        [a]: t === "fluid"
+      }),
+      style: i,
+      children: /* @__PURE__ */ u(w, { ...r, baseClass: l, size: t })
+    }
+  ) : /* @__PURE__ */ u(
+    w,
+    {
+      baseClass: l,
+      className: e,
+      style: i,
+      size: t,
+      ...r
+    }
+  );
+}, _ = Q;
+export {
+  _ as L
+};

package/lib/esm/_store/Logo-entry-3NNSpfQ9.js

@@ -0,0 +1,4 @@
+import { L } from "./Logo-chunk-CsxA3mRV.js";
+export {
+  L as Logo
+};

package/lib/esm/_store/LogoGrid-entry-BEUN3M_d.js

@@ -0,0 +1,24 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c as l } from "./index-chunk-0LeqwHm8.js";
+import { u as m } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const c = ({ url: e, label: r, src: t }) => {
+  const { prefix: o } = m(), a = `${o}--logo-grid--item`, n = `${o}--logo-grid--link`, i = l(a, {
+    [n]: !!e
+  });
+  return e ? /* @__PURE__ */ s(
+    "a",
+    {
+      className: i,
+      href: e,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children: /* @__PURE__ */ s("img", { alt: r, src: t })
+    }
+  ) : /* @__PURE__ */ s("div", { className: i, children: /* @__PURE__ */ s("img", { alt: r, src: t }) });
+}, g = ({ logos: e, theme: r = "light" }) => {
+  const { prefix: t } = m(), o = `${t}--logo-grid`, a = `${o}__theme__${r}`, n = l(o, a);
+  return /* @__PURE__ */ s("div", { className: n, children: /* @__PURE__ */ s("div", { className: `${o}--logos`, children: e.map((i) => /* @__PURE__ */ s(c, { ...i })) }) });
+}, p = g;
+export {
+  p as LogoGrid
+};