@ilo-org/react 0.20.0 → 0.22.0

package/lib/esm/_store/ScoreCard-chunk-CJo1b_d1.js

@@ -0,0 +1,461 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as u, Fragment as S } from "react";
+import { c as v } from "./index-chunk-CY3PQDr4.js";
+import { u as f } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { B as w } from "./Button-chunk-DCZkIGJ6.js";
+import { L as x } from "./Link-chunk-CDEaQUk8.js";
+import { L } from "./LinkList-chunk-CMl5wQuU.js";
+import { P as T } from "./Profile-chunk-C1G_0pBq.js";
+import { List as g } from "./List-entry-Bk7Xh8iL.js";
+import { P } from "./Picture-chunk-DdkL7cpS.js";
+import { S as F } from "./Status-chunk-D4C21wjx.js";
+import { I as D } from "./Icon-chunk-Px0lCAcE.js";
+const G = u(
+  ({
+    className: N,
+    title: r,
+    theme: n = "light",
+    size: s = "standard",
+    color: $,
+    intro: o,
+    source: p,
+    titleLevel: _ = "p"
+  }, i) => {
+    const { prefix: l } = f(), d = `${l}--card`, m = v(`${d}--wrapper`, N), t = v(d, `${d}__type__stat`, {
+      [`${d}__size__${String(s)}`]: s,
+      [`${d}__theme__${n}`]: n,
+      [`${d}__color__${$}`]: $
+    });
+    return /* @__PURE__ */ e("div", { className: m, ref: i, children: /* @__PURE__ */ e("div", { className: t, children: /* @__PURE__ */ e("div", { className: `${d}--wrap`, children: /* @__PURE__ */ h("div", { className: `${d}--content`, children: [
+      /* @__PURE__ */ e(_, { className: `${d}--title`, children: r }),
+      o && /* @__PURE__ */ e("p", { className: `${d}--intro`, children: o }),
+      p && /* @__PURE__ */ e(
+        x,
+        {
+          className: `${d}--source`,
+          url: p.url,
+          label: p.label
+        }
+      )
+    ] }) }) }) });
+  }
+), I = u(
+  ({
+    className: N,
+    title: r,
+    size: n = "standard",
+    alignment: s,
+    intro: $,
+    link: o,
+    linklist: p,
+    image: _,
+    titleLevel: i = "p",
+    eyebrow: l,
+    isVideo: d,
+    theme: m = "light"
+  }, t) => {
+    const { prefix: c } = f(), a = `${c}--card`, C = v(
+      a,
+      N,
+      `${a}__type__multilink`,
+      {
+        [`${a}__align__${s}`]: s,
+        [`${a}__size__${n}`]: n,
+        [`${a}__isvideo`]: d,
+        [`${a}--no-image`]: !_,
+        [`${a}__theme__${m}`]: m
+      }
+    );
+    return /* @__PURE__ */ h("div", { className: C, ref: t, children: [
+      o && /* @__PURE__ */ e("a", { className: `${a}--link`, href: o, title: r, children: /* @__PURE__ */ e("span", { className: `${a}--link--text`, children: r }) }),
+      /* @__PURE__ */ h("div", { className: `${a}--wrap`, children: [
+        _ && /* @__PURE__ */ e("div", { className: `${a}--image--wrapper`, children: /* @__PURE__ */ e("picture", { children: /* @__PURE__ */ e(
+          "img",
+          {
+            src: _,
+            alt: r,
+            className: `${a}--picture`
+          }
+        ) }) }),
+        /* @__PURE__ */ h("div", { className: `${a}--content`, children: [
+          l && /* @__PURE__ */ e("p", { className: `${a}--eyebrow`, children: l }),
+          /* @__PURE__ */ e(i, { className: `${a}--title`, children: r }),
+          _ && /* @__PURE__ */ e("div", { className: `${a}--image--wrapper`, children: /* @__PURE__ */ e("picture", { children: /* @__PURE__ */ e(
+            "img",
+            {
+              src: _,
+              alt: r,
+              className: `${a}--picture`
+            }
+          ) }) }),
+          $ && /* @__PURE__ */ e("p", { className: `${a}--intro`, children: $ }),
+          p && /* @__PURE__ */ e(L, { ...p })
+        ] })
+      ] })
+    ] });
+  }
+), M = u(
+  ({
+    className: N,
+    title: r,
+    theme: n = "light",
+    size: s = "narrow",
+    date: $,
+    profile: o,
+    link: p,
+    titleLevel: _ = "p",
+    eyebrow: i
+  }, l) => {
+    const { prefix: d } = f(), m = `${d}--card`, t = v(`${m}--wrapper`, N), c = v(m, `${m}__type__text`, {
+      [`${m}__size__${String(s)}`]: s,
+      [`${m}__theme__${n}`]: n
+    });
+    return /* @__PURE__ */ e("div", { className: t, ref: l, children: /* @__PURE__ */ h("div", { className: c, children: [
+      /* @__PURE__ */ e("a", { className: `${m}--link`, href: p, title: r, children: /* @__PURE__ */ e("span", { className: `${m}--link--text`, children: r }) }),
+      /* @__PURE__ */ e("div", { className: `${m}--wrap`, children: /* @__PURE__ */ h("div", { className: `${m}--content`, children: [
+        i && /* @__PURE__ */ e("p", { className: `${m}--eyebrow`, children: i }),
+        /* @__PURE__ */ e(_, { className: `${m}--title`, children: r }),
+        $ && /* @__PURE__ */ e("time", { className: `${m}--date`, dateTime: $.unix, children: $.human }),
+        o && /* @__PURE__ */ e(
+          T,
+          {
+            avatar: o.avatar,
+            description: o.description,
+            link: o.link,
+            name: o.name,
+            role: o.role,
+            theme: n
+          }
+        )
+      ] }) })
+    ] }) });
+  }
+), j = u(
+  ({
+    className: N,
+    title: r,
+    theme: n = "light",
+    size: s = "narrow",
+    cornercut: $,
+    intro: o,
+    link: p,
+    cta: _,
+    titleLevel: i = "p",
+    eyebrow: l
+  }, d) => {
+    const { prefix: m } = f(), t = `${m}--card`, c = v(
+      `${t}--wrapper`,
+      N,
+      `${t}--wrapper__type__promo`,
+      `${t}--wrapper__type__promo__size__${s}`
+    ), a = v(t, `${t}__type__promo`, {
+      [`${t}__size__${String(s)}`]: s,
+      [`${t}__theme__${n}`]: n,
+      [`${t}__cornercut`]: $
+    });
+    return /* @__PURE__ */ e("div", { className: c, ref: d, children: /* @__PURE__ */ h("div", { className: a, children: [
+      /* @__PURE__ */ e("a", { className: `${t}--link`, href: p, title: r, children: /* @__PURE__ */ e("span", { className: `${t}--link--text`, children: r }) }),
+      /* @__PURE__ */ e("div", { className: `${t}--wrap`, children: /* @__PURE__ */ h("div", { className: `${t}--content`, children: [
+        l && /* @__PURE__ */ e("p", { className: `${t}--eyebrow`, children: l }),
+        /* @__PURE__ */ e(i, { className: `${t}--title`, children: r }),
+        o && /* @__PURE__ */ e("p", { className: `${t}--intro`, children: o }),
+        (_ == null ? void 0 : _.label) && /* @__PURE__ */ e("div", { className: `${t}--cta`, children: /* @__PURE__ */ e(
+          w,
+          {
+            link: { url: _.url, label: _.label },
+            size: "medium",
+            type: "primary"
+          }
+        ) })
+      ] }) })
+    ] }) });
+  }
+), z = u(
+  ({
+    className: N,
+    title: r,
+    theme: n = "light",
+    size: s = "narrow",
+    date: $,
+    link: o,
+    linklist: p,
+    image: _,
+    titleLevel: i = "p",
+    eyebrow: l,
+    isVideo: d
+  }, m) => {
+    const { prefix: t } = f(), c = `${t}--card`, a = v(
+      c,
+      N,
+      `${c}__type__feature`,
+      {
+        [`${c}__size__${String(s)}`]: s,
+        [`${c}__theme__${n}`]: n,
+        [`${c}__isvideo`]: d,
+        [`${c}__linklist`]: p
+      }
+    );
+    return /* @__PURE__ */ h("div", { className: a, ref: m, children: [
+      o && /* @__PURE__ */ e("a", { className: `${c}--link`, href: o, title: r, children: /* @__PURE__ */ e("span", { className: `${c}--link--text`, children: r }) }),
+      /* @__PURE__ */ h("div", { className: `${c}--wrap`, children: [
+        _ && /* @__PURE__ */ e("div", { className: `${c}--image--wrapper`, children: /* @__PURE__ */ e("picture", { children: /* @__PURE__ */ e(
+          "img",
+          {
+            src: _,
+            alt: r,
+            className: `${c}--picture`
+          }
+        ) }) }),
+        /* @__PURE__ */ h("div", { className: `${c}--content`, children: [
+          l && /* @__PURE__ */ e("p", { className: `${c}--eyebrow`, children: l }),
+          /* @__PURE__ */ e(i, { className: `${c}--title`, children: r }),
+          $ && /* @__PURE__ */ e("time", { className: `${c}--date`, dateTime: $.unix, children: $.human }),
+          p && /* @__PURE__ */ e(
+            L,
+            {
+              headline: p.headline,
+              linkgroup: p.linkgroup,
+              theme: n
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+), B = u(
+  ({
+    className: N,
+    title: r,
+    theme: n = "light",
+    size: s = "narrow",
+    date: $,
+    details: o,
+    link: p,
+    titleLevel: _ = "p",
+    eyebrow: i,
+    intro: l,
+    image: d,
+    isVideo: m = !1
+  }, t) => {
+    const { prefix: c } = f(), a = `${c}--card`, C = v(
+      a,
+      `${a}__type__detail`,
+      N,
+      {
+        [`${a}__size__${String(s)}`]: s,
+        [`${a}__theme__${n}`]: n,
+        [`${a}__isvideo`]: m
+      }
+    );
+    return /* @__PURE__ */ h("div", { className: C, ref: t, children: [
+      p && /* @__PURE__ */ e("a", { className: `${a}--link`, href: p, title: r, children: /* @__PURE__ */ e("span", { className: `${a}--link--text`, children: r }) }),
+      /* @__PURE__ */ h("div", { className: `${a}--wrap`, children: [
+        d && /* @__PURE__ */ e("div", { className: `${a}--image--wrapper`, children: /* @__PURE__ */ e("picture", { children: /* @__PURE__ */ e(
+          "img",
+          {
+            className: `${a}--picture`,
+            src: d,
+            alt: r
+          }
+        ) }) }),
+        /* @__PURE__ */ h("div", { className: `${a}--content`, children: [
+          i && /* @__PURE__ */ e("p", { className: `${a}--eyebrow`, children: i }),
+          r && /* @__PURE__ */ e(_, { className: `${a}--title`, children: r }),
+          l && /* @__PURE__ */ e("p", { className: `${a}--intro`, children: l }),
+          $ && /* @__PURE__ */ e("time", { className: `${a}--date`, dateTime: $.unix, children: $.human }),
+          o && /* @__PURE__ */ e("p", { className: `${a}--date-extra`, children: o })
+        ] })
+      ] })
+    ] });
+  }
+), R = u(
+  ({
+    title: N,
+    theme: r = "light",
+    size: n = "narrow",
+    list: s,
+    titleLevel: $ = "p",
+    className: o
+  }, p) => {
+    const { prefix: _ } = f(), i = `${_}--card`, l = v(
+      i,
+      `${i}__type__factlist`,
+      o,
+      {
+        [`${i}__size__${n}`]: n,
+        [`${i}__theme__${r}`]: r
+      }
+    );
+    return /* @__PURE__ */ e("div", { className: l, ref: p, children: /* @__PURE__ */ e("div", { className: `${i}--wrap`, children: /* @__PURE__ */ h("div", { className: `${i}--content`, children: [
+      N && /* @__PURE__ */ e($, { className: `${_}--card--title`, children: N }),
+      /* @__PURE__ */ e(g, { alignment: "default", ordered: "unordered", theme: r, children: s.map((d) => /* @__PURE__ */ e(g.Item, { children: /* @__PURE__ */ e("p", { children: d }) }, d)) })
+    ] }) }) });
+  }
+), q = u(
+  ({ eyebrow: N, size: r = "narrow", image: n, dataset: s, columns: $ = "one", className: o }, p) => {
+    var t;
+    const { prefix: _ } = f(), i = r === "narrow" ? "one" : $, l = `${_}--card`, d = v(
+      l,
+      `${l}__type__data`,
+      o,
+      {
+        [`${l}__size__${String(r)}`]: r,
+        [`${l}__type__data__columns__${i}`]: i
+      }
+    ), m = v(`${l}--content`, {
+      [`${l}--content__with-image`]: n,
+      [`${l}--content__no-image-with-links`]: !n && (s == null ? void 0 : s.links),
+      [`${l}--content__default`]: !n && !(s != null && s.links)
+    });
+    return /* @__PURE__ */ e("div", { className: d, ref: p, children: /* @__PURE__ */ h("div", { className: `${l}--wrap`, children: [
+      !n && N && /* @__PURE__ */ e("div", { className: `${l}--eyebrow`, children: N }),
+      /* @__PURE__ */ h("div", { className: m, children: [
+        n && /* @__PURE__ */ h("div", { className: `${l}--area--image`, children: [
+          N && /* @__PURE__ */ e("div", { className: `${l}--eyebrow`, children: N }),
+          /* @__PURE__ */ e("div", { className: `${l}--image`, children: /* @__PURE__ */ e("picture", { children: /* @__PURE__ */ e(
+            "img",
+            {
+              className: `${l}--picture`,
+              src: n,
+              alt: N
+            }
+          ) }) })
+        ] }),
+        (t = s == null ? void 0 : s.content) == null ? void 0 : t.items.map((c, a) => /* @__PURE__ */ h("div", { className: `${l}--area--content`, children: [
+          /* @__PURE__ */ e("p", { className: `${l}__type__data--content-label`, children: c.label }),
+          /* @__PURE__ */ e("p", { className: `${l}__type__data--content-copy`, children: c.copy })
+        ] }, a)),
+        (s == null ? void 0 : s.files) && /* @__PURE__ */ e("div", { className: `${l}--area--files`, children: /* @__PURE__ */ h("div", { className: `${l}__type__data--content-files`, children: [
+          /* @__PURE__ */ e("p", { className: `${l}__type__data--content-label`, children: s.files.headline }),
+          s.files.items.map((c, a) => /* @__PURE__ */ e(
+            w,
+            {
+              link: {
+                url: c.url,
+                label: c.label,
+                target: c.target || "_self"
+              },
+              size: "small"
+            },
+            a
+          ))
+        ] }) }),
+        (s == null ? void 0 : s.cta) && /* @__PURE__ */ e("div", { className: `${l}--area--cta`, children: /* @__PURE__ */ h("div", { className: `${l}__type__data--content-cta`, children: [
+          /* @__PURE__ */ e("p", { className: `${l}__type__data--content-label`, children: s.cta.headline }),
+          s.cta.items.map((c) => /* @__PURE__ */ e(
+            w,
+            {
+              type: "secondary",
+              size: "small",
+              link: {
+                url: c.url,
+                label: c.label,
+                target: c.target
+              }
+            },
+            c.label
+          ))
+        ] }) }),
+        (s == null ? void 0 : s.links) && /* @__PURE__ */ e("div", { className: `${l}--area--links`, children: /* @__PURE__ */ h("div", { className: `${l}__type__data--content-links`, children: [
+          /* @__PURE__ */ e("p", { className: `${l}__type__data--content-label`, children: s.links.headline }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: `${l}__type__data--content-links-list`,
+              children: s.links.items.map((c) => /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(
+                x,
+                {
+                  url: c.url,
+                  label: c.label,
+                  className: `${l}__type__data--content-link`
+                }
+              ) }, c.label + c.url))
+            }
+          )
+        ] }) })
+      ] })
+    ] }) });
+  }
+), A = {
+  stat: G,
+  multilink: I,
+  text: M,
+  promo: j,
+  feature: z,
+  detail: B,
+  factlist: R,
+  data: q
+}, ee = u(
+  ({ type: N, group: r, cardCount: n = "one", cta: s, collapsed: $ = !1 }, o) => {
+    const p = A[N], { prefix: _ } = f(), i = `${_}--cardgroup`, l = v(
+      i,
+      `${i}__count__${n}`,
+      {
+        [`${i}__collapsed`]: $
+      }
+    );
+    return /* @__PURE__ */ h("div", { className: l, ref: o, children: [
+      /* @__PURE__ */ e("div", { className: `${i}--inner`, children: r.map((d, m) => /* @__PURE__ */ e(p, { ...d }, m)) }),
+      s && /* @__PURE__ */ e("div", { className: `${i}--button-wrap`, children: /* @__PURE__ */ e(
+        w,
+        {
+          link: {
+            url: s.url,
+            label: s.label
+          },
+          type: "secondary",
+          size: "medium"
+        }
+      ) })
+    ] });
+  }
+), ae = u(
+  ({
+    theme: N = "light",
+    titleLevel: r = "p",
+    size: n = "narrow",
+    link: s,
+    title: $,
+    isVideo: o = !1,
+    image: p,
+    status: _,
+    eyebrow: i,
+    content: l,
+    cta: d
+  }, m) => {
+    var k;
+    const { prefix: t } = f(), c = N === "dark" ? "var(--ilo-color-white)" : "var(--ilo-color-gray-accessible)", a = `${t}--card`, C = v(a, `${a}__type__score`, {
+      [`${a}__theme__${N}`]: N,
+      [`${a}__size__${n}`]: n,
+      [`${a}__isvideo`]: o
+    });
+    return /* @__PURE__ */ h("div", { className: C, ref: m, children: [
+      /* @__PURE__ */ e("a", { className: `${a}--link`, href: s, title: $, children: /* @__PURE__ */ e("span", { className: `${a}--link--text`, children: $ }) }),
+      /* @__PURE__ */ h("div", { className: `${a}--wrap`, children: [
+        p && n !== "simple" && /* @__PURE__ */ e("div", { className: `${a}--image--wrapper`, children: /* @__PURE__ */ e(P, { ...p }) }),
+        /* @__PURE__ */ h("div", { className: `${a}--content`, children: [
+          _ && /* @__PURE__ */ e(F, { content: _.content, statusType: _.statusType }),
+          i && n !== "simple" && /* @__PURE__ */ e("p", { className: `${a}--eyebrow`, children: i }),
+          $ && /* @__PURE__ */ e(r, { className: `${a}--title`, children: $ }),
+          l && /* @__PURE__ */ e("div", { className: `${a}--area--content`, children: (k = l.items) == null ? void 0 : k.map((b, y) => /* @__PURE__ */ h("div", { className: `${a}--content--item`, children: [
+            /* @__PURE__ */ e(D, { name: b.icon, size: 20, color: c }),
+            /* @__PURE__ */ e("span", { children: b.label })
+          ] }, y)) }),
+          d && /* @__PURE__ */ e("div", { className: `${a}--area--cta`, children: d.items.map((b, y) => /* @__PURE__ */ e("div", { className: `${a}--cta`, children: b }, y)) })
+        ] })
+      ] })
+    ] });
+  }
+);
+export {
+  ee as C,
+  B as D,
+  z as F,
+  I as M,
+  j as P,
+  G as S,
+  M as T,
+  R as a,
+  q as b,
+  ae as c
+};

package/lib/esm/_store/{SearchField-chunk-D-S-SV-o.js → SearchField-chunk-D5N-Bw85.js}

@@ -1,9 +1,9 @@
 import { jsxs as h, jsx as s } from "react/jsx-runtime";
 import { forwardRef as v, useState as w } from "react";
-import { c as x } from "./index-chunk-0LeqwHm8.js";
+import { c as x } from "./index-chunk-CY3PQDr4.js";
 import { u as F } from "./useGlobalSettings-chunk-gkijV3S1.js";
-import { I as g } from "./Input-chunk-DT_YEVSQ.js";
-import { I as j } from "./Icon-chunk-BE5t6PqR.js";
+import { I as g } from "./Input-chunk-C_w4yxVo.js";
+import { I as j } from "./Icon-chunk-Px0lCAcE.js";
 const B = v(
   ({ action: f, callback: o, className: b, input: e }, C) => {
     const [c, d] = w(""), { prefix: a } = F(), l = `${a}--searchfield`, S = `${l}--button`, y = `${l}--clear-button ${c.trim() !== "" && "show"}`, $ = `${a}--fieldset`, I = x(b, {

package/lib/esm/_store/SearchField-entry-DlBYQbzK.js

@@ -0,0 +1,4 @@
+import { S as a } from "./SearchField-chunk-D5N-Bw85.js";
+export {
+  a as SearchField
+};

package/lib/esm/_store/{SocialMedia-chunk-BP6TBNEf.js → SocialMedia-chunk-B5Qz7-GU.js}

@@ -1,5 +1,5 @@
 import { jsxs as $, jsx as a } from "react/jsx-runtime";
-import { c as i } from "./index-chunk-0LeqwHm8.js";
+import { c as i } from "./index-chunk-CY3PQDr4.js";
 import { forwardRef as d } from "react";
 import { u as f } from "./useGlobalSettings-chunk-gkijV3S1.js";
 const h = d(

package/lib/esm/_store/{SocialMedia-entry-C60BCp7g.js → SocialMedia-entry-3-Gkbrh7.js}

@@ -1,4 +1,4 @@
-import { S as t } from "./SocialMedia-chunk-BP6TBNEf.js";
+import { S as t } from "./SocialMedia-chunk-B5Qz7-GU.js";
 const o = {
   headline: "Follow us on social media",
   theme: "light",

package/lib/esm/_store/Status-chunk-D4C21wjx.js

@@ -0,0 +1,16 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { c as n } from "./index-chunk-CY3PQDr4.js";
+import { u as f } from "./useGlobalSettings-chunk-gkijV3S1.js";
+const d = c(
+  ({ statusType: s = "active", content: r, elementId: a, className: o }, e) => {
+    const { prefix: t } = f(), m = n(o, {
+      [`${t}--status`]: !0,
+      [`${t}--status__type__${s}`]: s
+    });
+    return /* @__PURE__ */ i("span", { className: m, id: a, ref: e, children: r });
+  }
+);
+export {
+  d as S
+};

package/lib/esm/_store/Status-entry-DsvANE5f.js

@@ -0,0 +1,4 @@
+import { S as o } from "./Status-chunk-D4C21wjx.js";
+export {
+  o as Status
+};