@ilo-org/react 0.17.7 → 0.18.0

package/lib/esm/_store/Callout-chunk-BYTLkWbG.js

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { c as b } from "./index-chunk-0LeqwHm8.js";
+import { useState as x, useEffect as C } from "react";
+import { u as j } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { B as k } from "./Button-chunk-Crzq2FAv.js";
+const B = ({
+  className: d,
+  copy: $,
+  cta: e,
+  isCollapsible: m,
+  isOpen: t = !0,
+  toggleOpenLabel: c = "Less",
+  toggleClosedLabel: n = "More",
+  headline: _,
+  type: r
+}) => {
+  const { prefix: p } = j(), s = `${p}--callout`, [o, u] = x(t);
+  let i = o ? c : n;
+  C(() => {
+    u(t), i = o ? c : n;
+  }, [t]);
+  const h = b(d, {
+    [s]: !0,
+    [`${s}__${r}`]: r,
+    [`${s}--open`]: o,
+    [`${s}--collapse`]: m
+  }), f = `icon icon__${r}`, N = {
+    callback: void 0,
+    className: `${s}--cta`,
+    children: !1,
+    label: e == null ? void 0 : e.label,
+    size: "small",
+    type: "tertiary",
+    url: e == null ? void 0 : e.url
+  }, v = (g) => {
+    g.preventDefault(), i = o ? c : n, u(!o);
+  };
+  return /* @__PURE__ */ a("div", { className: h, children: [
+    /* @__PURE__ */ l("div", { className: `${s}__sidebar`, children: /* @__PURE__ */ l("span", { className: f }) }),
+    /* @__PURE__ */ a("div", { className: `${s}__content`, children: [
+      /* @__PURE__ */ a("div", { className: `${s}__header`, children: [
+        /* @__PURE__ */ l("h5", { className: `${s}__title`, children: _ }),
+        m && /* @__PURE__ */ a(
+          "button",
+          {
+            className: `${s}--toggle`,
+            onClick: v,
+            type: "button",
+            children: [
+              i,
+              /* @__PURE__ */ l("span", { className: `${s}--toggle--icon` })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ l("p", { className: `${s}__description`, children: $ }),
+      e && /* @__PURE__ */ l(k, { ...N })
+    ] })
+  ] });
+}, E = B;
+export {
+  E as C
+};

package/lib/esm/_store/Callout-entry-C-llb6Kt.js

@@ -0,0 +1,31 @@
+import { C as i } from "./Callout-chunk-BYTLkWbG.js";
+const l = {
+  copy: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  isCollapsible: !1,
+  headline: "Info Callout",
+  type: "info"
+}, e = {
+  ...l,
+  type: "success",
+  headline: "Success Callout"
+}, o = {
+  ...l,
+  type: "warning",
+  headline: "Warning Callout"
+}, s = {
+  ...l,
+  cta: {
+    label: "Optional CTA",
+    url: "http://www.google.com"
+  },
+  isCollapsible: !0,
+  isOpen: !1,
+  headline: "Error Callout (Collapsible)",
+  toggleOpenLabel: "Open",
+  toggleClosedLabel: "Closed",
+  type: "error"
+}, t = { baseArgs: l, success: e, warning: o, error: s }, a = t;
+export {
+  i as Callout,
+  a as calloutArgs
+};

package/lib/esm/_store/CardGroup-chunk-BTx2ukOX.js

@@ -0,0 +1,354 @@
+import { jsx as a, jsxs as o, Fragment as C } from "react/jsx-runtime";
+import { c as p } from "./index-chunk-0LeqwHm8.js";
+import { u as h } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { B as w } from "./Button-chunk-Crzq2FAv.js";
+import { L as u } from "./Link-chunk-zt732cUC.js";
+import { L as v } from "./LinkList-chunk-CIZvyv8v.js";
+import { P as x } from "./Profile-chunk-Bsn46OaP.js";
+import { L as y, a as k } from "./ListItem-chunk-CKnxZe3Y.js";
+const L = ({
+  eyebrow: $,
+  size: n = "narrow",
+  image: i,
+  dataset: c,
+  columns: m = "one"
+}) => {
+  const { prefix: d } = h(), e = `${d}--card`, r = p(e, `${e}__type__data`, {
+    [`${e}__size__${n}`]: n,
+    [`${e}__type__data__columns__${m}`]: m
+  });
+  return /* @__PURE__ */ a("div", { className: r, children: /* @__PURE__ */ o("div", { className: `${e}--wrap`, children: [
+    $ && /* @__PURE__ */ a("p", { className: `${e}--eyebrow`, children: $ }),
+    /* @__PURE__ */ o("div", { className: `${e}--content`, children: [
+      i && /* @__PURE__ */ a("div", { className: `${e}--image--wrapper`, children: /* @__PURE__ */ a("picture", { children: /* @__PURE__ */ a(
+        "img",
+        {
+          className: `${e}--picture`,
+          src: i,
+          alt: $
+        }
+      ) }) }),
+      c && c.content && c.content.items && c.content.items.map((t) => /* @__PURE__ */ o("div", { className: `${e}--area--content`, children: [
+        /* @__PURE__ */ a("p", { className: `${e}__type__data--content-label`, children: t.label }),
+        /* @__PURE__ */ a("p", { className: `${e}__type__data--content-copy`, children: t.copy })
+      ] })),
+      c && c.files && /* @__PURE__ */ o("div", { className: `${e}--data--content-files`, children: [
+        /* @__PURE__ */ a("p", { className: `${e}__type__data--content-label`, children: c.files.headline }),
+        c.files.items && c.files.items.map((t) => /* @__PURE__ */ a(
+          "a",
+          {
+            className: `${e}--data--file ${d}--button ${d}--button--primary ${d}--button--small`,
+            href: t.url,
+            download: !0,
+            children: /* @__PURE__ */ a("span", { className: "button__label", children: t.label })
+          }
+        ))
+      ] }),
+      c && c.cta && /* @__PURE__ */ a("div", { className: `${e}--area--cta`, children: /* @__PURE__ */ o("div", { className: `${e}--data--content-cta`, children: [
+        /* @__PURE__ */ a("p", { className: `${e}__type__data--content-label`, children: c.cta.headline }),
+        c.cta.items && c.cta.items.map((t) => /* @__PURE__ */ a(
+          "a",
+          {
+            className: `${e}--cta ${d}--button ${d}--button--medium ${d}--button--secondary`,
+            href: t.url,
+            children: /* @__PURE__ */ a("span", { className: "link__label", children: t.label })
+          }
+        ))
+      ] }) }),
+      c && c.links && /* @__PURE__ */ o("div", { className: `${e}--data--content-links`, children: [
+        /* @__PURE__ */ a("p", { className: `${e}__type__data--content-label`, children: c.links.headline }),
+        c.links.items && c.links.items.map((t) => /* @__PURE__ */ o(C, { children: [
+          /* @__PURE__ */ a(u, { url: t.url, children: t.label }),
+          /* @__PURE__ */ a("span", { children: "  " })
+        ] }))
+      ] })
+    ] })
+  ] }) });
+}, g = ({
+  eyebrow: $,
+  title: n,
+  size: i = "narrow",
+  intro: c,
+  date: m,
+  eventdetails: d,
+  link: e,
+  image: r,
+  titleLevel: t
+}) => {
+  const { prefix: _ } = h(), l = `${_}--card`, s = p(l, `${l}__type__detail`, {
+    [`${l}__action`]: e,
+    [`${l}__size__${i}`]: i
+  });
+  return /* @__PURE__ */ o("div", { className: s, children: [
+    e && /* @__PURE__ */ a("a", { className: `${l}--link`, href: e, title: n, children: /* @__PURE__ */ a("span", { className: `${l}--link--text`, children: n }) }),
+    /* @__PURE__ */ o("div", { className: `${l}--wrap`, children: [
+      r && /* @__PURE__ */ a("div", { className: `${l}--image--wrapper`, children: /* @__PURE__ */ a("picture", { children: /* @__PURE__ */ a(
+        "img",
+        {
+          className: `${l}--picture`,
+          src: r,
+          alt: n
+        }
+      ) }) }),
+      /* @__PURE__ */ o("div", { className: `${l}--content`, children: [
+        $ && /* @__PURE__ */ a("p", { className: `${l}--eyebrow`, children: $ }),
+        n && t ? /* @__PURE__ */ a(t, { className: `${l}--title`, children: n }) : /* @__PURE__ */ a("p", { className: `${l}--title`, children: n }),
+        c && /* @__PURE__ */ a("p", { className: `${l}--intro`, children: c }),
+        m && /* @__PURE__ */ a("time", { className: `${l}--date`, dateTime: m.unix, children: m.human }),
+        d && /* @__PURE__ */ a("p", { className: `${l}--date-extra`, children: d })
+      ] })
+    ] })
+  ] });
+}, G = ({
+  title: $,
+  theme: n,
+  size: i = "narrow",
+  list: c,
+  titleLevel: m
+}) => {
+  const { prefix: d } = h(), e = `${d}--card`, r = p(e, `${e}__type__factlist`, {
+    [`${e}__size__${i}`]: i,
+    [`${e}__theme__${n}`]: n
+  });
+  return /* @__PURE__ */ a("div", { className: r, children: /* @__PURE__ */ a("div", { className: `${e}--wrap`, children: /* @__PURE__ */ o("div", { className: `${e}--content`, children: [
+    $ && m ? /* @__PURE__ */ a(m, { className: `${e}--title`, children: $ }) : /* @__PURE__ */ a("p", { className: `${e}--title`, children: $ }),
+    c && /* @__PURE__ */ a(y, { alignment: "default", ordered: "unordered", children: c.map((t, _) => /* @__PURE__ */ a(k, { id: `list${_}`, children: /* @__PURE__ */ a("p", { children: t }) })) })
+  ] }) }) });
+}, F = ({
+  isvideo: $,
+  eyebrow: n,
+  title: i,
+  theme: c,
+  size: m = "narrow",
+  date: d,
+  link: e,
+  linklist: r,
+  image: t,
+  titleLevel: _
+}) => {
+  const { prefix: l } = h(), s = `${l}--card`, N = p(s, `${s}__type__feature`, {
+    [`${s}__action`]: e,
+    [`${s}__size__${m}`]: m,
+    [`${s}__isvideo`]: $,
+    [`${s}__linklist`]: r,
+    [`${s}__theme__${c}`]: c
+  });
+  return /* @__PURE__ */ o("div", { className: N, children: [
+    e && /* @__PURE__ */ a("a", { className: `${s}--link`, href: e, title: i, children: /* @__PURE__ */ a("span", { className: `${s}--link--text`, children: i }) }),
+    /* @__PURE__ */ o("div", { className: `${s}--wrap`, children: [
+      t && /* @__PURE__ */ a("div", { className: `${s}--image--wrapper`, children: /* @__PURE__ */ a("picture", { children: /* @__PURE__ */ a(
+        "img",
+        {
+          className: `${s}--picture`,
+          src: t,
+          alt: i
+        }
+      ) }) }),
+      /* @__PURE__ */ o("div", { className: `${s}--content`, children: [
+        n && /* @__PURE__ */ a("p", { className: `${s}--eyebrow`, children: n }),
+        i && _ ? /* @__PURE__ */ a(_, { className: `${s}--title`, children: i }) : /* @__PURE__ */ a("p", { className: `${s}--title`, children: i }),
+        d && /* @__PURE__ */ a("time", { className: `${s}--date`, dateTime: d.unix, children: d.human }),
+        r && /* @__PURE__ */ a(
+          v,
+          {
+            headline: r.headline,
+            linkgroup: r.linkgroup
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, P = ({
+  isvideo: $,
+  eyebrow: n,
+  title: i,
+  size: c = "standard",
+  alignment: m,
+  intro: d,
+  link: e,
+  linklist: r,
+  image: t,
+  titleLevel: _
+}) => {
+  const { prefix: l } = h(), s = `${l}--card`, N = p(s, `${s}__type__multilink`, {
+    [`${s}__align__${m}`]: m,
+    [`${s}__action`]: e,
+    [`${s}__size__${c}`]: c,
+    [`${s}__isvideo`]: $,
+    [`${s}__linklist`]: r,
+    [`${s}__no-image`]: !t
+  });
+  return /* @__PURE__ */ o("div", { className: N, children: [
+    e && /* @__PURE__ */ a("a", { className: `${s}--link`, href: e, title: i, children: /* @__PURE__ */ a("span", { className: `${s}--link--text`, children: i }) }),
+    /* @__PURE__ */ o("div", { className: `${s}--wrap`, children: [
+      t && /* @__PURE__ */ a("div", { className: `${s}--image--wrapper`, children: /* @__PURE__ */ a("picture", { children: /* @__PURE__ */ a(
+        "img",
+        {
+          className: `${s}--picture`,
+          src: t,
+          alt: i
+        }
+      ) }) }),
+      /* @__PURE__ */ o("div", { className: `${s}--content`, children: [
+        n && /* @__PURE__ */ a("p", { className: `${s}--eyebrow`, children: n }),
+        i && _ ? /* @__PURE__ */ a(_, { className: `${s}--title`, children: i }) : /* @__PURE__ */ a("p", { className: `${s}--title`, children: i }),
+        t && /* @__PURE__ */ a("div", { className: `${s}--image--wrapper`, children: /* @__PURE__ */ a("picture", { children: /* @__PURE__ */ a(
+          "img",
+          {
+            className: `${s}--picture`,
+            src: t,
+            alt: i
+          }
+        ) }) }),
+        d && /* @__PURE__ */ a("p", { className: `${s}--intro`, children: d }),
+        r && /* @__PURE__ */ a(
+          v,
+          {
+            headline: r.headline,
+            linkgroup: r.linkgroup
+          }
+        )
+      ] })
+    ] })
+  ] });
+}, j = ({
+  eyebrow: $,
+  title: n,
+  theme: i,
+  size: c = "narrow",
+  cornercut: m,
+  intro: d,
+  link: e,
+  cta: r,
+  titleLevel: t
+}) => {
+  const { prefix: _ } = h(), l = `${_}--card`, s = p(
+    `${l}--wrapper`,
+    `${l}--wrapper__type__promo ${l}--wrapper__type__promo__size__${c}`
+  ), N = p(l, `${l}__type__promo`, {
+    [`${l}__cornercut`]: m,
+    [`${l}__action`]: e,
+    [`${l}__size__${c}`]: c,
+    [`${l}__theme__${i}`]: i
+  });
+  return /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ o("div", { className: N, children: [
+    e && /* @__PURE__ */ a("a", { className: `${l}--link`, href: e, title: n, children: /* @__PURE__ */ a("span", { className: `${l}--link--text`, children: n }) }),
+    /* @__PURE__ */ a("div", { className: `${l}--wrap`, children: /* @__PURE__ */ o("div", { className: `${l}--content`, children: [
+      $ && /* @__PURE__ */ a("p", { className: `${l}--eyebrow`, children: $ }),
+      n && t ? /* @__PURE__ */ a(t, { className: `${l}--title`, children: n }) : /* @__PURE__ */ a("p", { className: `${l}--title`, children: n }),
+      d && /* @__PURE__ */ a("p", { className: `${l}--intro`, children: d }),
+      r && r.label && /* @__PURE__ */ a(
+        "a",
+        {
+          className: `${l}--cta ${_}--button ${_}--button--medium ${_}--button--primary`,
+          href: r.url,
+          children: /* @__PURE__ */ a("span", { className: "link__label", children: r.label })
+        }
+      )
+    ] }) })
+  ] }) });
+}, B = ({
+  title: $,
+  color: n,
+  size: i = "standard",
+  intro: c,
+  source: m,
+  titleLevel: d
+}) => {
+  const { prefix: e } = h(), r = `${e}--card`, t = p(r, `${r}__type__stat`, {
+    [`${r}__color__${n}`]: n,
+    [`${r}__size__${i}`]: i
+  });
+  return /* @__PURE__ */ a("div", { className: t, children: /* @__PURE__ */ a("div", { className: `${r}--wrap`, children: /* @__PURE__ */ o("div", { className: `${r}--content`, children: [
+    $ && d ? /* @__PURE__ */ a(d, { className: `${r}--title`, children: $ }) : /* @__PURE__ */ a("p", { className: `${r}--title`, children: $ }),
+    c && /* @__PURE__ */ a("p", { className: `${r}--intro`, children: c }),
+    m && /* @__PURE__ */ a(u, { url: m.url, children: m.label })
+  ] }) }) });
+}, D = ({
+  eyebrow: $,
+  title: n,
+  theme: i,
+  size: c,
+  date: m,
+  profile: d,
+  link: e,
+  titleLevel: r
+}) => {
+  const { prefix: t } = h(), _ = `${t}--card`, l = p(`${_}--wrapper`), s = p(_, `${_}__type__text`, {
+    [`${_}__action`]: e,
+    [`${_}__size__${c}`]: c,
+    [`${_}__theme__${i}`]: i
+  });
+  return /* @__PURE__ */ a("div", { className: l, children: /* @__PURE__ */ o("div", { className: s, children: [
+    e && /* @__PURE__ */ a("a", { className: `${_}--link`, href: e, title: n, children: /* @__PURE__ */ a("span", { className: `${_}--link--text`, children: n }) }),
+    /* @__PURE__ */ a("div", { className: `${_}--wrap`, children: /* @__PURE__ */ o("div", { className: `${_}--content`, children: [
+      $ && /* @__PURE__ */ a("p", { className: `${_}--eyebrow`, children: $ }),
+      n && r ? /* @__PURE__ */ a(r, { className: `${_}--title`, children: n }) : /* @__PURE__ */ a("p", { className: `${_}--title`, children: n }),
+      m && /* @__PURE__ */ a("time", { className: `${_}--date`, dateTime: m.unix, children: m.human }),
+      d && d.avatar && /* @__PURE__ */ a(
+        x,
+        {
+          avatar: d.avatar,
+          description: d.description,
+          link: d.link,
+          name: d.name,
+          role: d.role,
+          className: `${t}--profile__theme__${i}`
+        }
+      )
+    ] }) })
+  ] }) });
+}, M = {
+  stat: B,
+  multilink: P,
+  text: D,
+  promo: j,
+  feature: F,
+  detail: g,
+  factlist: G,
+  data: L
+}, S = ({
+  cards: $,
+  titleLevel: n = "p",
+  cardCount: i,
+  cta: c,
+  type: m,
+  alignment: d,
+  size: e,
+  theme: r,
+  collapsed: t = !1
+}) => {
+  const _ = M[m], { prefix: l } = h(), s = `${l}--cardgroup`, N = p(
+    s,
+    `${s}__count__${i}`,
+    {
+      [`${s}__collapsed`]: t
+    }
+  );
+  return /* @__PURE__ */ o("div", { className: N, children: [
+    /* @__PURE__ */ a("div", { className: `${s}--inner`, children: $ && $.map((b, f) => /* @__PURE__ */ a(
+      _,
+      {
+        ...b,
+        size: e,
+        theme: r,
+        alignment: d,
+        titleLevel: n
+      },
+      f
+    )) }),
+    c && /* @__PURE__ */ a("div", { className: `${s}--button-wrap`, children: /* @__PURE__ */ a(
+      w,
+      {
+        kind: "button",
+        type: "secondary",
+        size: "medium",
+        label: c.label,
+        url: c.url
+      }
+    ) })
+  ] });
+}, Q = S;
+export {
+  Q as C
+};

package/lib/esm/_store/Checkbox-chunk-DJDgykAw.js

@@ -0,0 +1,71 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as u, useEffect as F } from "react";
+import { c as v } from "./index-chunk-0LeqwHm8.js";
+import { u as L } from "./useGlobalSettings-chunk-gkijV3S1.js";
+import { u as S } from "./Fieldset-chunk-PK4HqNv_.js";
+import { u as $, F as B } from "./FormControl-chunk-D_3t65GG.js";
+import { u as N } from "./usePrevious-chunk-BtJVllKj.js";
+const P = u((o, n) => {
+  const {
+    onChange: r,
+    onBlur: l,
+    disabled: c = !1,
+    error: e,
+    id: s,
+    name: a,
+    required: t,
+    defaultChecked: b = !1,
+    checked: C,
+    value: h
+  } = o, { prefix: x } = L(), { setHasError: m } = S(), k = $(), { ariaDescribedBy: p } = k, d = `${x}--checkbox`, y = `${d}__error`, g = v(d, {
+    [y]: e
+  }), f = N(e);
+  return F(() => {
+    e !== f && m(!!e);
+  }, [e, f, m]), /* @__PURE__ */ i(
+    "input",
+    {
+      ref: n,
+      id: s || a,
+      name: a,
+      onChange: (E) => {
+        r && r(E);
+      },
+      onBlur: l,
+      disabled: c,
+      required: t,
+      type: "checkbox",
+      className: g,
+      defaultChecked: b,
+      "aria-describedby": p,
+      checked: C,
+      value: h
+    }
+  );
+}), _ = u(
+  (o, n) => {
+    const r = o.id ? o.id : o.name, {
+      style: l,
+      inputStyle: c,
+      className: e,
+      labelPlacement: s = "end",
+      labelSize: a = "small",
+      ...t
+    } = o;
+    return /* @__PURE__ */ i(
+      B,
+      {
+        fieldId: r,
+        style: l,
+        className: e,
+        labelPlacement: s,
+        labelSize: a,
+        ...t,
+        children: /* @__PURE__ */ i(P, { ref: n, style: c, ...t })
+      }
+    );
+  }
+), R = _;
+export {
+  R as L
+};

package/lib/esm/_store/Checkbox-entry-CfjxZKrK.js

@@ -0,0 +1,28 @@
+import { L as n } from "./Checkbox-chunk-DJDgykAw.js";
+const o = 3, c = {
+  label: "Checkbox",
+  className: "checkbox",
+  name: "checkbox"
+}, a = Array(o).map((s, e) => ({
+  ...c,
+  id: `checkbox-${e}`
+})), h = {
+  ...c,
+  defaultChecked: !0
+}, r = {
+  ...c,
+  error: !0
+}, k = Array(o).map((s, e) => ({
+  ...r,
+  id: `checkbox-${e}`
+})), t = {
+  basic: c,
+  basicCheckBoxes: a,
+  errorCheckBoxes: k,
+  checked: h,
+  error: r
+}, x = t;
+export {
+  n as Checkbox,
+  x as CheckboxArgs
+};