@tempots/beatui 0.0.2

package/dist/index.es.js

@@ -0,0 +1,2227 @@
+var Ye = Object.defineProperty;
+var Te = (t) => {
+  throw TypeError(t);
+};
+var Je = (t, r, e) => r in t ? Ye(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
+var w = (t, r, e) => Je(t, typeof r != "symbol" ? r + "" : r, e), Ke = (t, r, e) => r.has(t) || Te("Cannot " + e);
+var S = (t, r, e) => (Ke(t, r, "read from private field"), e ? e.call(t) : r.get(t)), U = (t, r, e) => r.has(t) ? Te("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e);
+import { makeProviderMark as Qe, localStorageProp as Ze, computedOf as $, Use as C, attr as a, html as p, on as m, aria as J, style as d, Value as A, Empty as x, Ensure as We, WithElement as q, OnDispose as K, Fragment as R, input as H, emitValue as v, emitValueAsDate as en, ForEach as pe, OneOfType as nn, emitValueAsNullableDate as tn, emitValueAsNullableDateTime as rn, emitValueAsNumber as oe, prop as P, When as ee, computed as Oe, emitChecked as sn, dataAttr as ae, render as ln, WithBrowserCtx as on } from "@tempots/dom";
+import { Use as Yt } from "@tempots/dom";
+import { useAppearence as an, WhenInViewport as un, Resource as Fe, ElementRect as de, AutoSelect as cn, WindowSize as pn } from "@tempots/ui";
+class dn {
+  button({ variant: r, size: e, color: n, roundedness: s }) {
+    const l = [
+      "bc-button",
+      `bu-text-${e}`,
+      `bc-control--padding-${e}`,
+      `bc-control--rounded-${s}`
+    ];
+    switch (r) {
+      case "filled":
+        l.push(`bu-bg--${n}`), l.push(`hover:bu-bg--${n}`);
+        break;
+      case "light":
+        l.push(`bu-bg--light-${n}`), l.push(`hover:bu-bg--light-${n}`);
+        break;
+      case "outline":
+        l.push(`bu-border--${n}`), l.push(`hover:bu-bg--light-${n}`);
+        break;
+      case "default":
+        l.push("bu-bg--light-neutral"), l.push(`bu-text--${n}`), l.push("hover:bu-bg--light-base");
+        break;
+      case "text":
+        l.push("bu-bg--inherit"), l.push(`bu-text--${n}`), l.push("hover:bu-underline");
+        break;
+    }
+    return l.join(" ");
+  }
+  overlay({ effect: r, mode: e }) {
+    return `bc-overlay bc-overlay--effect-${r} bc-overlay--mode-${e}`;
+  }
+  icon({ size: r, color: e }) {
+    const n = ["bc-icon", `bc-icon--${r}`];
+    return e && n.push(`bu-fg--${e}`), n.join(" ");
+  }
+  panel({ side: r, color: e, shadow: n }) {
+    return `bc-panel ${(Array.isArray(r) ? r : [r]).map((l) => `bc-panel--side-${l}`).join(" ")} bu-bg--lighter-${e} bc-panel--shadow-${n}`;
+  }
+  label(r) {
+    return `bc-label bc-label--${r.type}`;
+  }
+  inputContainer({ disabled: r, hasError: e }) {
+    const n = ["bc-input-container"];
+    return r ? n.push("bc-input-container--disabled") : n.push("bc-input-container--default"), e && n.push("bc-input-container--error"), n.join(" ");
+  }
+  controlInputWrapper(r) {
+    return ["bc-control-input-wrapper"].join(" ");
+  }
+  controlInputWrapperLabelText({
+    hasError: r,
+    disabled: e
+  }) {
+    const n = ["bc-control-input-wrapper__label-text"];
+    return r ? n.push("bc-control-input-wrapper__label-text--error") : e ? n.push("bc-control-input-wrapper__label-text--disabled") : n.push("bc-control-input-wrapper__label-text--default"), n.join(" ");
+  }
+  tag({ disabled: r, color: e = "base" }) {
+    const n = ["bc-tag"];
+    return r ? n.push("bc-tag--disabled") : n.push(`bc-tag--${e}`), n.join(" ");
+  }
+  checkboxInput(r) {
+    return "bc-checkbox-input";
+  }
+  editableText(r) {
+    return "bc-editable-text";
+  }
+  numberInput(r) {
+    return "bc-number-input";
+  }
+  card({
+    variant: r = "default",
+    size: e = "md",
+    roundedness: n = "lg"
+  }) {
+    const s = ["bc-card"];
+    return r !== "default" && s.push(`bc-card--${r}`), e !== "md" && s.push(`bc-card--padding-${e}`), n !== "lg" && s.push(`bc-card--rounded-${n}`), s.join(" ");
+  }
+  center({ gap: r = "lg" }) {
+    const e = ["bc-center"];
+    return r !== "lg" && e.push(`bc-center--gap-${r}`), e.join(" ");
+  }
+  sink({
+    variant: r = "default",
+    size: e = "md",
+    roundedness: n = "lg"
+  }) {
+    const s = ["bc-sink"];
+    return r !== "default" && s.push(`bc-sink--${r}`), e !== "md" && s.push(`bc-sink--padding-${e}`), n !== "lg" && s.push(`bc-sink--rounded-${n}`), s.join(" ");
+  }
+  segmentedControl({ size: r = "sm" }) {
+    const e = ["bc-segmented-control"];
+    return r !== "sm" && e.push(`bc-segmented-control--size-${r}`), e.join(" ");
+  }
+}
+const _ = {
+  mark: Qe("Theme"),
+  // Create function returns the value and cleanup
+  create: (t) => {
+    const r = new dn(), e = an(), n = Ze({
+      key: "beatui-appearance-preference",
+      defaultValue: "system"
+    }), s = () => {
+      e.dispose(), n.dispose();
+    }, l = $(
+      e,
+      n
+    )((c, i) => i === "system" ? c : i);
+    return {
+      value: {
+        theme: r,
+        appearance: l,
+        appearancePreference: n,
+        setAppearancePreference: (c) => {
+          n.set(c);
+        }
+      },
+      dispose: s
+    };
+  }
+}, ot = () => C(
+  _,
+  ({ appearance: t }) => a.class(t.map((r) => `b-${r}`))
+);
+function je({
+  type: t = "button",
+  disabled: r,
+  variant: e = "filled",
+  size: n = "md",
+  color: s = "base",
+  roundedness: l = "sm",
+  onClick: o = () => {
+  }
+}, ...c) {
+  return C(_, (i) => p.button(
+    a.type(t),
+    a.disabled(r),
+    a.class(
+      $(
+        i,
+        e ?? "primary",
+        n ?? "md",
+        s,
+        l
+      )(
+        ({ theme: u }, h, g, b, y) => u.button({
+          variant: h,
+          size: g,
+          color: b,
+          roundedness: y
+        })
+      )
+    ),
+    m.click(o),
+    ...c
+  ));
+}
+const mn = "bui-icons";
+function hn() {
+  return new Promise((t, r) => {
+    const e = indexedDB.open(mn, 1);
+    e.onupgradeneeded = function(n) {
+      const s = n.target.result;
+      s.objectStoreNames.contains("icons") || s.createObjectStore("icons");
+    }, e.onsuccess = function() {
+      t(e.result);
+    }, e.onerror = function() {
+      r(e.error);
+    };
+  });
+}
+const Pe = hn();
+function gn(t, r) {
+  return new Promise(async (e, n) => {
+    const l = (await Pe).transaction("icons", "readwrite");
+    l.objectStore("icons").put(r, t), l.oncomplete = e, l.onerror = n;
+  });
+}
+function fn(t) {
+  return new Promise(async (r, e) => {
+    const o = (await Pe).transaction("icons", "readonly").objectStore("icons").get(t);
+    o.onsuccess = function() {
+      r(o.result);
+    }, o.onerror = e;
+  });
+}
+async function bn(t) {
+  const r = `https://api.iconify.design/${t}.svg`;
+  return fetch(r).then((e) => {
+    if (e.status === 200)
+      return e.text();
+    throw new Error(`Failed to load icon: ${t}`);
+  });
+}
+async function xn(t) {
+  const r = t.replace(":", "/"), e = await fn(r);
+  if (e)
+    return e;
+  const n = await bn(r);
+  return await gn(r, n), n;
+}
+function Q({ icon: t, size: r = "md", color: e, title: n }, ...s) {
+  return C(_, ({ theme: l }) => p.span(
+    a.class(
+      $(
+        l,
+        r,
+        e
+      )((o, c, i) => o.icon({ size: c, color: i }))
+    ),
+    J.label(n),
+    un(
+      { once: !0 },
+      () => Fe({
+        request: t,
+        load: ({ request: o }) => xn(o),
+        mapError: String
+      })({
+        success: (o) => p.span(
+          d.width("100%"),
+          d.height("100%"),
+          a.innerHTML(o)
+        ),
+        loading: () => p.span(a.class("animate-spin"), "↻"),
+        failure: (o) => p.span(a.title(o), a.class("text-red-500"), "🚫")
+      })
+    ),
+    ...s
+  ));
+}
+const yn = ({
+  disabled: t,
+  value: r,
+  color: e = "base",
+  onClose: n
+}) => {
+  const s = A.map(t ?? !1, (o) => o), l = A.map(e ?? "base", (o) => o);
+  return C(_, (o) => p.span(
+    a.class(
+      $(
+        o,
+        s,
+        l
+      )(
+        ({ theme: c }, i, u) => c.tag({
+          disabled: i,
+          color: u
+        })
+      )
+    ),
+    p.span(a.class("bc-tag__text"), r),
+    n != null ? p.button(
+      a.disabled(t),
+      a.class("bc-tag__close"),
+      p.span("×"),
+      m.click(() => n == null ? void 0 : n(A.get(r)))
+    ) : x
+  ));
+}, at = (...t) => C(
+  _,
+  ({ theme: r }) => p.span(a.class(r.label({ type: "emphasis" })), ...t)
+), vn = (...t) => C(
+  _,
+  ({ theme: r }) => p.span(a.class(r.label({ type: "default" })), ...t)
+), wn = (...t) => C(
+  _,
+  ({ theme: r }) => p.span(a.class(r.label({ type: "muted" })), ...t)
+), ut = (...t) => C(
+  _,
+  ({ theme: r }) => p.span(a.class(r.label({ type: "error" })), ...t)
+), $n = p.span(
+  a.class("bc-control-input-wrapper__required"),
+  " *"
+), k = ({
+  required: t,
+  label: r,
+  context: e,
+  description: n,
+  content: s,
+  controller: l
+}) => C(_, (o) => p.div(
+  a.class(
+    $(
+      o,
+      l.hasError,
+      l.disabled
+    )(
+      ({ theme: c }, i, u) => c.controlInputWrapper({
+        hasError: i,
+        disabled: u
+      })
+    )
+  ),
+  r != null || e != null ? p.div(
+    a.class("bc-control-input-wrapper__header"),
+    p.label(
+      a.class("bc-control-input-wrapper__label"),
+      a.for(l.name),
+      p.span(
+        a.class(
+          $(
+            o,
+            l.hasError,
+            l.disabled
+          )(
+            ({ theme: c }, i, u) => c.controlInputWrapperLabelText({
+              hasError: i,
+              disabled: u
+            })
+          )
+        ),
+        r
+      ),
+      r != null && t ? $n : x
+    ),
+    e != null ? vn(e) : x
+  ) : x,
+  p.div(a.class("bc-control-input-wrapper__content"), s),
+  n != null ? p.div(
+    a.class("bc-control-input-wrapper__description"),
+    n
+  ) : x,
+  We(
+    l.error,
+    (c) => p.div(a.class("bc-control-input-wrapper__error"), c)
+  )
+)), O = ({
+  child: t,
+  disabled: r,
+  input: e,
+  before: n,
+  after: s,
+  hasError: l,
+  focusableSelector: o = "input, select, textarea",
+  growInput: c = !0
+}) => {
+  const i = A.map(r ?? !1, (u) => u);
+  return C(_, (u) => p.div(
+    t,
+    q((h) => {
+      const g = () => {
+        const b = h.querySelector(o);
+        b == null || b.focus();
+      };
+      return h.addEventListener("click", g), K(() => h.removeEventListener("click", g));
+    }),
+    a.class(
+      $(
+        u,
+        i,
+        l ?? !1
+      )(
+        ({ theme: h }, g, b) => h.inputContainer({
+          disabled: g,
+          hasError: b
+        })
+      )
+    ),
+    n != null ? p.span(a.class("bc-input-container__before"), n) : null,
+    p.div(
+      a.class("bc-input-container__input"),
+      a.class(
+        A.map(
+          c,
+          (h) => h ? "bc-input-container__input--grow" : ""
+        )
+      ),
+      e
+    ),
+    s != null ? p.span(a.class("bc-input-container__after"), s) : null
+  ));
+}, j = ({
+  autocomplete: t,
+  autofocus: r,
+  class: e,
+  disabled: n,
+  name: s,
+  placeholder: l,
+  id: o
+}) => R(
+  a.autocomplete(t),
+  a.autofocus(r),
+  a.class(e),
+  a.disabled(n),
+  a.name(s ?? o),
+  a.placeholder(l),
+  a.id(o)
+), T = (t) => ({
+  id: t.name,
+  disabled: t.disabled,
+  value: t.value,
+  hasError: t.hasError
+}), me = (t, r) => ({
+  ...T(t),
+  value: t.value.map(r)
+}), He = (t) => {
+  const { value: r, onBlur: e, onChange: n } = t;
+  return O({
+    ...t,
+    input: H.date(
+      j(t),
+      a.valueAsDate(r),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(en(n)) : x
+    )
+  });
+}, Sn = (t) => {
+  const { value: r, onBlur: e, onChange: n, onInput: s } = t;
+  return O({
+    ...t,
+    input: H.text(
+      j(t),
+      a.value(r),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(v(n)) : x,
+      s != null ? m.input(v(s)) : x
+    )
+  });
+}, E = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (t, r) => () => {
+    r == null || r();
+  }
+), D = (t, r) => (e) => {
+  t.change(e), r == null || r(e);
+}, he = (t, r, e) => (n) => {
+  const s = r(n);
+  t.change(s), e == null || e(s);
+}, ct = (t, r, e) => (n) => {
+  r(n) ? (t.change(null), e == null || e(null)) : (t.change(n), e == null || e(n));
+}, it = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Sn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, pt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: He({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Cn = (t) => {
+  const r = t.getFullYear(), e = (t.getMonth() + 1).toString().padStart(2, "0"), n = t.getDate().toString().padStart(2, "0"), s = t.getHours().toString().padStart(2, "0"), l = t.getMinutes().toString().padStart(2, "0");
+  return `${r}-${e}-${n}T${s}:${l}`;
+}, _n = (t) => {
+  const { value: r, onBlur: e, onChange: n } = t;
+  return O({
+    ...t,
+    input: H["datetime-local"](
+      j(t),
+      a.value(A.map(r, Cn)),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(v((s) => n(new Date(s)))) : x
+    )
+  });
+}, dt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: _n({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Bn = (t) => {
+  const r = {
+    name: "email",
+    autocomplete: "email",
+    placeholder: "you@company.com",
+    ...t
+  }, { value: e, onBlur: n, onChange: s, onInput: l } = r;
+  return O({
+    ...t,
+    input: H.email(
+      j(r),
+      a.value(e),
+      a.class("bc-input"),
+      n != null ? m.blur(v(n)) : x,
+      s != null ? m.change(v(s)) : x,
+      l != null ? m.input(v(l)) : x
+    )
+  });
+}, mt = (t) => {
+  const { onChange: r, onBlur: e, ...n } = t;
+  return k({
+    label: "Email",
+    ...n,
+    content: Bn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, r),
+      onBlur: E(n.controller, e)
+    })
+  });
+}, ht = {
+  filling: { type: "filling" },
+  submitting: { type: "submitting" },
+  error: (t) => ({ type: "error", error: t }),
+  success: { type: "success" }
+}, ge = "$$tts-exp-", In = (t, r) => q((e) => {
+  const n = `${ge}${t}`;
+  return K(A.on(r, (s) => Reflect.set(e, n, s)));
+}), gt = (t, r) => {
+  const e = `${ge}${t}`;
+  return (n) => {
+    r(Reflect.get(n.target, e));
+  };
+}, kn = (t, r) => {
+  const e = `${ge}${t}`;
+  return (n) => {
+    const s = n.target, l = s.selectedIndex, o = s.options[l];
+    r(Reflect.get(o, e));
+  };
+}, ue = {
+  value: (t, r, e) => ({
+    type: "value",
+    value: t,
+    label: r,
+    disabled: e
+  }),
+  group: (t, r, e) => ({
+    type: "group",
+    group: t,
+    options: r,
+    disabled: e
+  }),
+  break: { type: "break" },
+  getOptionValues: (t) => t.flatMap(
+    (r) => r.type === "group" ? ue.getOptionValues(r.options) : r.type === "break" ? [] : [r.value]
+  ),
+  contains: (t, r, e = (n, s) => n === s) => ue.getOptionValues(t).some((n) => e(n, r))
+}, Ve = (t, r, e) => We(
+  t,
+  (n) => nn(n, {
+    value: (s) => {
+      const l = $(
+        s,
+        e
+      )((o, c) => r(o.value, c));
+      return p.option(
+        K(l.dispose),
+        a.selected(l),
+        In("value", s.$.value),
+        s.$.label
+      );
+    },
+    group: (s) => p.optgroup(
+      a.label(s.$.group),
+      pe(
+        s.$.options,
+        (l) => Ve(
+          l,
+          r,
+          e
+        )
+      )
+    ),
+    break: () => p.hr()
+  })
+), Me = (t) => {
+  const {
+    value: r,
+    onBlur: e,
+    onChange: n,
+    options: s,
+    unselectedLabel: l = "Select one ...",
+    equality: o = (i, u) => i === u
+  } = t;
+  let c;
+  return O({
+    ...t,
+    child: m.click(() => {
+      c == null || c.focus(), typeof (c == null ? void 0 : c.showPicker) == "function" && c.showPicker();
+    }),
+    input: p.select(
+      q((i) => {
+        c = i;
+        const u = new MutationObserver((h) => {
+          const { removedNodes: g } = h[0];
+          g.length > 0 && (c.selectedIndex = 0);
+        });
+        return u.observe(i, { childList: !0 }), K(() => u.disconnect());
+      }),
+      j(t),
+      a.class("focus:outline-none bg-transparent"),
+      a.class("w-full"),
+      p.option(a.hidden("hidden"), l),
+      pe(s, (i) => Ve(i, o, r)),
+      e != null ? m.blur(e) : x,
+      n != null ? m.change(kn("value", (i) => n(i))) : x
+    )
+  });
+}, En = (t) => Fe({
+  request: t.request,
+  load: t.load,
+  mapError: String
+})({
+  success: (r) => {
+    const e = r.map(
+      (n) => n.map((s) => typeof s == "object" && "id" in s && "label" in s ? ue.value(s.id, s.label) : s)
+    );
+    return Me({
+      ...t,
+      options: e,
+      unselectedLabel: t.unselectedLabel,
+      equality: t.equality
+    });
+  },
+  loading: () => p.span(a.class("animate-spin"), J.label("Loading..."), "↻")
+}), ft = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: En({
+      ...t,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, bt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Me({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Le = (t) => {
+  const { value: r, onBlur: e, onChange: n } = t;
+  return O({
+    ...t,
+    input: H.date(
+      j(t),
+      a.valueAsDate(r),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(tn(n)) : x
+    )
+  });
+}, xt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Le({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, An = (t) => {
+  const r = t.getFullYear(), e = t.getMonth() + 1, n = t.getDate(), s = t.getHours(), l = t.getMinutes(), o = t.getSeconds();
+  return `${r}-${e.toString().padStart(2, "0")}-${n.toString().padStart(2, "0")}T${s.toString().padStart(2, "0")}:${l.toString().padStart(2, "0")}:${o.toString().padStart(2, "0")}`;
+}, qe = (t) => {
+  const { value: r, onBlur: e, onChange: n } = t, s = A.map(r, (l) => l != null ? An(l) : null);
+  return O({
+    ...t,
+    input: H["datetime-local"](
+      j(t),
+      a.value(A.map(s, (l) => l ?? null)),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(rn(n)) : x
+    )
+  });
+}, yt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: qe({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, vt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Le({
+      ...n,
+      ...me(
+        n.controller,
+        (s) => s != null && s !== "" ? new Date(s) : null
+      ),
+      onChange: he(
+        n.controller,
+        (s) => s != null ? s.toISOString().split("T")[0] : null,
+        e
+      ),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Tn = (t) => new Date(t), On = (t) => t.toISOString(), wt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: qe({
+      ...n,
+      ...me(
+        n.controller,
+        (s) => s != null && s !== "" ? Tn(s) : null
+      ),
+      onChange: he(
+        n.controller,
+        (s) => s != null ? On(s) : null,
+        e
+      ),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, ne = (t) => typeof t == "string" && t.trim() === "" ? null : t, Re = (t) => t ?? "", jn = (t) => {
+  const { value: r, onBlur: e, onChange: n, onInput: s, ...l } = t;
+  return O({
+    ...l,
+    input: H.text(
+      j(l),
+      a.value(A.map(r, Re)),
+      a.class("bc-input"),
+      e != null ? m.blur(e) : x,
+      n != null ? m.change(v((o) => n(ne(o)))) : x,
+      s != null ? m.input(v((o) => s(ne(o)))) : x
+    )
+  });
+}, Dn = (t) => {
+  const { value: r, onBlur: e, onChange: n, onInput: s, rows: l } = t;
+  return O({
+    ...t,
+    input: p.textarea(
+      j(t),
+      a.rows(l ?? 10),
+      a.value(A.map(r, Re)),
+      a.class("bc-input"),
+      e != null ? m.blur(e) : x,
+      n != null ? m.change(v((o) => n(ne(o)))) : x,
+      s != null ? m.input(v((o) => s(ne(o)))) : x
+    )
+  });
+}, $t = (t) => {
+  const { onBlur: r, onChange: e, rows: n, ...s } = t;
+  return k({
+    ...s,
+    content: Dn({
+      ...s,
+      ...T(s.controller),
+      rows: n,
+      onChange: D(s.controller, e),
+      onBlur: E(s.controller, r)
+    })
+  });
+}, St = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: jn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Nn = (t) => {
+  const { value: r, step: e, min: n, max: s, onBlur: l, onChange: o, onInput: c, disabled: i } = t;
+  return C(_, (u) => O({
+    ...t,
+    input: H.number(
+      j(t),
+      a.valueAsNumber(r),
+      a.step(e),
+      a.min(n),
+      a.max(s),
+      a.class("bc-input"),
+      a.class(
+        $(
+          u,
+          i ?? !1
+        )(
+          ({ theme: h }, g) => h.numberInput({
+            disabled: g
+          })
+        )
+      ),
+      l != null ? m.blur(v(l)) : x,
+      o != null ? m.change(oe(o)) : x,
+      c != null ? m.input(oe(c)) : x
+    )
+  }));
+}, Ct = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Nn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Wn = (t) => {
+  const {
+    value: r,
+    onBlur: e,
+    onChange: n,
+    onInput: s,
+    before: l,
+    after: o,
+    hasError: c,
+    disabled: i,
+    autocomplete: u,
+    placeholder: h,
+    ...g
+  } = t, b = {
+    name: "password",
+    ...g
+  }, y = P(!0), B = $(
+    y,
+    u
+  )((V, z) => V ? z ?? "current-password" : "off"), W = $(
+    y,
+    h
+  )((V, z) => V ? "•••••••••••••••" : z ?? "secret password");
+  return O({
+    before: l,
+    disabled: i,
+    hasError: c,
+    input: p.input(
+      j({
+        ...b,
+        autocomplete: B,
+        placeholder: W
+      }),
+      ee(
+        y,
+        () => R(a.type("password")),
+        () => R(a.type("text"))
+      ),
+      a.class("bc-input"),
+      a.value(r),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(v(n)) : x,
+      s != null ? m.input(v(s)) : x
+    ),
+    after: o ?? p.button(
+      a.class("bc-input-container__password-toggle"),
+      J.label("Toggle password visibility"),
+      m.click(() => y.update((V) => !V)),
+      ee(
+        y,
+        () => Q({ icon: "line-md--eye" }),
+        () => Q({ icon: "line-md--eye-off" })
+      )
+    )
+  });
+}, _t = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    label: "Password",
+    ...n,
+    content: Wn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+};
+function Fn(t, r) {
+  return t.length === r.length && t.every((e, n) => e === r[n]);
+}
+function Bt({
+  segments: t,
+  activeSegment: r = null,
+  onSegmentChange: e,
+  size: n = "sm"
+}) {
+  const s = A.toSignal(r ?? null).deriveProp(), l = P(
+    t.map(() => 0),
+    Fn
+  );
+  return C(_, (o) => p.div(
+    a.class(
+      $(
+        o,
+        n
+      )(
+        ({ theme: c }, i) => c.segmentedControl({
+          size: i
+        })
+      )
+    ),
+    p.div(
+      a.class("bc-segmented-control__container"),
+      // sliding tab block
+      p.div(
+        a.class("bc-segmented-control__indicator"),
+        d.display(
+          s.map((c) => c == null ? "none" : "block")
+        ),
+        d.width(
+          Oe(() => `${l.value[s.value ?? 0]}px`, [s, l])
+        ),
+        d.left(
+          Oe(() => `${l.value.slice(0, s.value ?? 0).reduce((i, u) => i + u, 0)}px`, [s, l])
+        )
+      ),
+      // clickable buttons
+      t.map(({ label: c, onSelect: i }, u) => p.button(
+        // { href: href ?? '' },
+        m.click((h) => {
+          h.preventDefault(), s.set(u), e == null || e(u), i == null || i();
+        }),
+        a.class("bc-segmented-control__segment"),
+        a.class(
+          s.map((h) => h == null || h === u ? "bc-segmented-control__segment--active" : "bc-segmented-control__segment--inactive")
+        ),
+        de((h) => (h.on(({ width: g }) => {
+          l.update((b) => {
+            const y = [...b];
+            return y[u] = g, y;
+          });
+        }), c))
+      ))
+    )
+  ));
+}
+const It = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: He({
+      ...n,
+      ...me(
+        n.controller,
+        (s) => new Date(s)
+      ),
+      onChange: he(
+        n.controller,
+        (s) => s.toISOString(),
+        e
+      ),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Pn = (t) => {
+  const { value: r, onChange: e, onBlur: n } = t, s = P(""), l = (c) => {
+    e == null || e(A.get(r).filter((i) => i !== c));
+  }, o = () => {
+    const c = s.value.trim(), i = A.get(r);
+    c === "" || i.includes(c) || (s.set(""), e == null || e([...i, c]));
+  };
+  return O({
+    ...t,
+    input: R(
+      a.class("bc-input-container__tags"),
+      pe(r, (c) => yn({ value: c, onClose: () => l(c.value) })),
+      H.text(
+        j(t),
+        a.value(s),
+        a.class("bc-input bc-input-container__tags-input"),
+        m.input(v(s.set)),
+        e != null ? m.change(o) : x,
+        n != null ? m.blur(n) : x
+      )
+    )
+  });
+}, kt = (t) => {
+  const { onBlur: r, onChange: e, ...n } = t;
+  return k({
+    ...n,
+    content: Pn({
+      ...n,
+      ...T(n.controller),
+      onChange: D(n.controller, e),
+      onBlur: E(n.controller, r)
+    })
+  });
+}, Hn = (t) => {
+  const { value: r, onBlur: e, onChange: n, onInput: s, rows: l } = t;
+  return O({
+    ...t,
+    input: p.textarea(
+      j(t),
+      a.rows(l ?? 10),
+      a.value(r),
+      a.class("bc-input"),
+      e != null ? m.blur(v(e)) : x,
+      n != null ? m.change(v(n)) : x,
+      s != null ? m.input(v(s)) : x
+    )
+  });
+}, Et = (t) => {
+  const { onBlur: r, onChange: e, rows: n, ...s } = t;
+  return k({
+    ...s,
+    content: Hn({
+      ...s,
+      ...T(s.controller),
+      rows: n,
+      value: s.controller.value,
+      onChange: D(s.controller, e),
+      onBlur: E(s.controller, r)
+    })
+  });
+};
+function ze(t) {
+  return function(e) {
+    var s;
+    if (e.type === "Valid") return e;
+    const n = (s = e.dependencies) == null ? void 0 : s[t];
+    return n != null ? { type: "Invalid", ...n } : { type: "Valid" };
+  };
+}
+function At(t) {
+  return t.split(".").map((e) => {
+    const n = e.match(/^\[(\d+)\]$/);
+    return n ? Number(n[1]) : e;
+  });
+}
+function Vn(t) {
+  return typeof t == "number" ? `[${t}]` : `.${t}`;
+}
+function Mn(t) {
+  if (t.length === 0) return "";
+  const [r, ...e] = t;
+  return [
+    typeof r == "number" ? `[${r}]` : r,
+    ...e.map(Vn)
+  ].join("");
+}
+var G;
+class te {
+  constructor(r, e, n, s, l) {
+    w(this, "path");
+    w(this, "change");
+    w(this, "value");
+    w(this, "status");
+    w(this, "error");
+    w(this, "hasError");
+    w(this, "dependencyErrors");
+    U(this, G, {
+      disabled: P(!1)
+    });
+    w(this, "parent");
+    w(this, "disabled");
+    w(this, "disable", () => {
+      S(this, G).disabled.set(!0);
+    });
+    w(this, "enable", () => {
+      S(this, G).disabled.set(!1);
+    });
+    this.path = r, this.change = e, this.value = n, this.status = s, this.error = s.map((o) => o.type === "Invalid" ? o.error : void 0), this.hasError = s.map((o) => o.type === "Invalid"), this.dependencyErrors = s.map(
+      (o) => o.type === "Invalid" ? o.dependencies : void 0
+    ), this.parent = l, this.disabled = $(
+      S(this, G).disabled,
+      l.disabled
+    )((o, c) => o || c);
+  }
+  get name() {
+    return Mn(this.path);
+  }
+  dispose() {
+    S(this, G).disabled.dispose();
+  }
+}
+G = new WeakMap();
+var M, X;
+const be = class be extends te {
+  constructor(e, n, s, l, o) {
+    super(
+      e,
+      n,
+      s.map((c) => c ?? []),
+      l,
+      o
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    U(this, M, new Array());
+    U(this, X, (e, n) => {
+      if (S(this, M)[e])
+        return S(this, M)[e];
+      const s = async (o) => {
+        const c = this.value.value.slice();
+        c[e] = o, this.change(c);
+      }, l = n(
+        [...this.path, e],
+        s,
+        this.value.map((o) => o[e]),
+        this.status.map(ze(e)),
+        { disabled: this.disabled }
+      );
+      return S(this, M)[e] = l, l;
+    });
+    w(this, "length", this.value.map((e) => e.length));
+    w(this, "item", (e) => S(this, X).call(this, e, (n, s, l, o, c) => new te(n, s, l, o, c)));
+    w(this, "list", (e) => S(this, X).call(this, e, (n, s, l, o, c) => new be(n, s, l, o, c)));
+    w(this, "group", (e) => S(this, X).call(this, e, (n, s, l, o, c) => new re(n, s, l, o, c)));
+    w(this, "push", (...e) => {
+      this.change([...this.value.value, ...e]);
+    });
+    w(this, "pop", () => {
+      this.splice(this.value.value.length - 1, 1);
+    });
+    w(this, "shift", () => {
+      this.splice(0, 1);
+    });
+    w(this, "unshift", (...e) => {
+      this.change([...e, ...this.value.value]);
+    });
+    w(this, "removeAt", (e) => {
+      this.splice(e, 1);
+    });
+    w(this, "splice", (e, n) => {
+      const s = S(this, M).splice(e, n);
+      for (const o of s)
+        o.dispose();
+      const l = this.value.value.slice();
+      l.splice(e, n), this.change(l);
+    });
+  }
+  dispose() {
+    super.dispose();
+    for (const e of S(this, M))
+      e.dispose();
+    S(this, M).length = 0;
+  }
+};
+M = new WeakMap(), X = new WeakMap();
+let ce = be;
+var L, Y;
+const xe = class xe extends te {
+  constructor(e, n, s, l, o) {
+    super(
+      e,
+      n,
+      s.map((c) => c ?? {}),
+      l,
+      o
+    );
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    U(this, L, /* @__PURE__ */ new Map());
+    U(this, Y, (e, n) => {
+      if (S(this, L).has(e))
+        return S(this, L).get(e);
+      const s = async (o) => {
+        this.change({
+          ...this.value.value,
+          [e]: o
+        });
+      }, l = n(
+        [...this.path, e],
+        s,
+        this.value.map((o) => o[e]),
+        this.status.map(ze(e)),
+        { disabled: this.disabled }
+      );
+      return S(this, L).set(
+        e,
+        l
+      ), l;
+    });
+    w(this, "field", (e) => S(this, Y).call(this, e, (n, s, l, o, c) => new te(n, s, l, o, c)));
+    w(this, "list", (e) => S(this, Y).call(this, e, (n, s, l, o, c) => new ce(n, s, l, o, c)));
+    w(this, "group", (e) => S(this, Y).call(this, e, (n, s, l, o, c) => new xe(n, s, l, o, c)));
+  }
+  dispose() {
+    super.dispose();
+    for (const e of S(this, L).values())
+      e.dispose();
+    S(this, L).clear();
+  }
+};
+L = new WeakMap(), Y = new WeakMap();
+let re = xe;
+class Ln extends re {
+  dispose() {
+    super.dispose(), this.parent.disabled.dispose(), this.value.dispose(), this.status.dispose();
+  }
+}
+const Tt = (t) => {
+  const { value: r, onBlur: e, onChange: n, placeholder: s, disabled: l } = t;
+  return C(_, (o) => O({
+    growInput: !1,
+    ...t,
+    input: p.span(
+      a.class(
+        $(
+          o,
+          l ?? !1
+        )(
+          ({ theme: c }, i) => c.checkboxInput({
+            disabled: i
+          })
+        )
+      ),
+      H.checkbox(
+        j(t),
+        a.checked(r),
+        a.class("bc-checkbox-input__checkbox"),
+        e != null ? m.blur(v(e)) : x,
+        n != null ? m.change(sn(n)) : x
+      ),
+      s != null ? p.span(
+        a.class("bc-checkbox-input__label"),
+        wn(s)
+      ) : x
+    )
+  }));
+}, Ot = ({
+  startEditing: t,
+  value: r,
+  onChange: e,
+  placeholder: n
+}) => {
+  const s = A.deriveProp(t ?? !1), l = P(!1);
+  return C(_, (o) => p.div(
+    a.class(
+      $(
+        o,
+        s
+      )(
+        ({ theme: c }, i) => c.editableText({
+          isEditing: i
+        })
+      )
+    ),
+    ee(
+      s,
+      () => p.input(
+        a.placeholder(n),
+        a.value(r),
+        a.class("bc-editable-text__input"),
+        cn(),
+        m.keydown((c) => {
+          c.key === "Enter" ? s.set(!1) : c.key === "Escape" && (l.set(!0), s.set(!1));
+        }),
+        m.blur(
+          v((c) => {
+            if (s.set(!1), l.value) {
+              l.set(!1);
+              return;
+            }
+            e(c);
+          })
+        )
+      ),
+      () => p.span(
+        m.click(() => s.set(!0)),
+        a.class("bc-editable-text__display"),
+        ee(
+          A.map(r, (c) => c != null && c.trim() !== ""),
+          () => p.span(a.class("bc-editable-text__text"), r),
+          () => p.span(
+            a.class("bc-editable-text__placeholder"),
+            n
+          )
+        ),
+        p.button(
+          a.class("bc-editable-text__edit-button"),
+          J.label("Edit"),
+          m.click(() => s.set(!0)),
+          Q({ icon: "line-md/pencil" })
+        )
+      )
+    )
+  ));
+};
+function qn(t) {
+  function r(e) {
+    return typeof e == "number" ? e : e.toString();
+  }
+  return t.map(
+    (e) => typeof e == "object" && e.key != null ? r(e.key) : r(e)
+  );
+}
+function Rn(t) {
+  const r = t.filter((s) => s.path == null || s.path.length === 0).map((s) => s.message), e = t.filter((s) => s.path != null && s.path.length > 0).reduce((s, l) => {
+    const o = qn(l.path), c = o.pop();
+    let i = s;
+    for (const u of o)
+      i.dependencies == null && (i.dependencies = {}), i.dependencies[u] == null && (i.dependencies[u] = {}), i = i.dependencies[u];
+    return i.dependencies == null && (i.dependencies = {}), i.dependencies[c] = { error: l.message }, s;
+  }, {}), n = r.join(`
+`);
+  return {
+    ...e,
+    error: n != "" ? n : void 0
+  };
+}
+function Ge(t) {
+  return R(a.disabled(t.disabled), a.name(t.name));
+}
+function jt(t, {
+  triggerOn: r = "change"
+} = {}) {
+  return R(
+    Ge(t),
+    a.value(t.value),
+    (r === "input" ? m.input : m.change)(v(t.change))
+  );
+}
+function Dt(t, {
+  triggerOn: r = "change"
+} = {}) {
+  return R(
+    Ge(t),
+    a.valueAsNumber(t.value),
+    (r === "input" ? m.input : m.change)(
+      oe(t.change)
+    )
+  );
+}
+function Nt({
+  defaultValue: t = {},
+  schema: r
+}) {
+  const e = P(t), n = P({ type: "Valid" }), s = P(!1), l = async (c) => {
+    e.set(c);
+    const i = await r["~standard"].validate(c);
+    i.issues != null ? n.set({
+      type: "Invalid",
+      ...Rn(i.issues)
+    }) : n.set({ type: "Valid" });
+  };
+  return new Ln([], l, e, n, {
+    disabled: s
+  });
+}
+const zn = ["!=", "<=", ">=", "<", ">", "="];
+function Gn(t) {
+  for (const r of zn)
+    if (typeof t == "string" && t.startsWith(r))
+      return [r, t.slice(r.length)];
+  return ["=", t];
+}
+function Un(t, r, e) {
+  const [n, s] = Gn(r), l = t.findIndex((i) => i[1] === s);
+  if (l === -1)
+    throw new Error(`Breakpoint ${String(s)} not found`);
+  const o = t[l][0], c = l < t.length - 1 ? t[l + 1][0] : 1 / 0;
+  switch (n) {
+    case "=":
+      return e >= o && e < c;
+    case "!=":
+      return !(e >= o && e < c);
+    case "<=":
+      return e <= o;
+    case ">=":
+      return e >= o;
+    case "<":
+      return e < o;
+    case ">":
+      return e > o;
+    default:
+      return !1;
+  }
+}
+function Wt(t, r) {
+  const e = t.findIndex((n) => n[0] > r) - 1;
+  return e >= 0 ? t[e][1] : (t.length > 0 && r >= t[0][0], t[0][1]);
+}
+function Ue(t, { breakpoints: r, mode: e = "viewport" }) {
+  const s = [...Object.entries(r).map(
+    ([o, c]) => [c, o]
+  )].sort((o, c) => o[0] - c[0]), l = (o) => {
+    const c = o.map(({ width: u }) => {
+      const h = s.findIndex((g) => g[0] > u) - 1;
+      return h >= 0 ? { width: u, breakpoint: s[h][1] } : s.length > 0 && u >= s[0][0] ? { width: u, breakpoint: s[0][1] } : { width: u, breakpoint: s[0][1] };
+    });
+    return t({
+      value: c,
+      breakpoints: r,
+      asList: s,
+      is: (u, h) => Un(s, u, h)
+    });
+  };
+  return e === "element" ? de(l) : pn(l);
+}
+let se = NaN;
+function Xn(t, r) {
+  return t ? (isNaN(se) && (se = parseFloat(getComputedStyle(document.documentElement).fontSize)), parseFloat(t) * se) : r;
+}
+function I(t, r, e) {
+  return Xn(t.getPropertyValue(r), e);
+}
+function Yn(t) {
+  return q((r) => {
+    const e = getComputedStyle(r), n = {
+      zero: 0,
+      xs: I(e, "--breakpoint-xs", 640),
+      sm: I(e, "--breakpoint-sm", 768),
+      md: I(e, "--breakpoint-md", 1024),
+      lg: I(e, "--breakpoint-lg", 1280),
+      xl: I(e, "--breakpoint-xl", 1536)
+    };
+    return Ue(t, { breakpoints: n });
+  });
+}
+function Ft(t) {
+  return q((r) => {
+    const e = getComputedStyle(r), n = {
+      zero: 0,
+      "3xs": I(e, "--container-3xs", 256),
+      "2xs": I(e, "--container-2xs", 288),
+      xs: I(e, "--container-xs", 320),
+      sm: I(e, "--container-sm", 384),
+      md: I(e, "--container-md", 448),
+      lg: I(e, "--container-lg", 512),
+      xl: I(e, "--container-xl", 640),
+      "2xl": I(e, "--container-2xl", 768),
+      "3xl": I(e, "--container-3xl", 1024),
+      "4xl": I(e, "--container-4xl", 1280),
+      "5xl": I(e, "--container-5xl", 1536),
+      "6xl": I(e, "--container-6xl", 2048)
+    };
+    return Ue(t, {
+      breakpoints: n,
+      mode: "element"
+    });
+  });
+}
+const fe = (t, r) => {
+  const e = setTimeout(t, r);
+  return () => clearTimeout(e);
+};
+function Jn({
+  initialStatus: t = "closed",
+  openedAfter: r,
+  closedAfter: e
+}) {
+  const n = P(t), s = () => {
+    n.set("start-opening");
+  }, l = () => {
+    n.set("closing");
+  }, o = () => {
+    n.value === "open" || n.value === "opening" ? l() : s();
+  }, c = (b) => {
+    b ? s() : l();
+  }, i = (b) => n.on((y) => {
+    y === "closed" && b();
+  });
+  let u = () => {
+  };
+  n.on((b) => {
+    u(), b === "start-opening" && (u = fe(() => n.set("opening"), 0)), b === "opening" && (u = r(() => n.set("open"))), b === "closing" && (u = e(() => n.set("closed")));
+  }), n.onDispose(() => u());
+  const h = n.map((b) => b !== "closed"), g = n.map((b) => b === "open" || b === "opening");
+  return {
+    status: n,
+    open: s,
+    close: l,
+    toggle: o,
+    setOpen: c,
+    isOpen: h,
+    displayOpen: g,
+    dispose: () => n.dispose(),
+    onClosed: i
+  };
+}
+function De(t, r) {
+  function e() {
+    if (t.getAnimations().length === 0) {
+      r();
+      return;
+    }
+    t.addEventListener("transitionend", e, { once: !0 });
+  }
+  const n = fe(e, 10);
+  return () => {
+    n(), t.removeEventListener("transitionend", e);
+  };
+}
+function ie({
+  initialStatus: t = "closed",
+  element: r
+} = {}) {
+  let e = r;
+  return {
+    setElement: (n) => {
+      e = n;
+    },
+    ...Jn({
+      initialStatus: t,
+      openedAfter: (n) => e == null ? (n(), () => {
+      }) : De(e, n),
+      closedAfter: (n) => e == null ? (n(), () => {
+      }) : De(e, n)
+    })
+  };
+}
+const F = {
+  banner: {
+    zero: 32,
+    xs: 32,
+    sm: 32,
+    md: 32,
+    lg: 32,
+    xl: 32
+  },
+  header: {
+    zero: 60,
+    xs: 60,
+    sm: 60,
+    md: 60,
+    lg: 60,
+    xl: 60
+  },
+  mainHeader: {
+    zero: 48,
+    xs: 48,
+    sm: 48,
+    md: 48,
+    lg: 48,
+    xl: 48
+  },
+  mainFooter: {
+    zero: 48,
+    xs: 48,
+    sm: 48,
+    md: 48,
+    lg: 48,
+    xl: 48
+  },
+  footer: {
+    zero: 48,
+    xs: 48,
+    sm: 48,
+    md: 48,
+    lg: 48,
+    xl: 48
+  },
+  menu: {
+    zero: 300,
+    xs: 300,
+    sm: 300,
+    md: 300,
+    lg: 300,
+    xl: 300
+  },
+  aside: {
+    zero: 280,
+    xs: 280,
+    sm: 280,
+    md: 280,
+    lg: 280,
+    xl: 280
+  }
+};
+function Ne(t, r) {
+  if (typeof t == "number")
+    return {
+      zero: t,
+      xs: t,
+      sm: t,
+      md: t,
+      lg: t,
+      xl: t
+    };
+  const e = {
+    zero: t.zero ?? r.zero,
+    xs: t.xs ?? r.xs,
+    sm: t.sm ?? r.sm,
+    md: t.md ?? r.md,
+    lg: t.lg ?? r.lg,
+    xl: t.xl ?? r.xl
+  };
+  return e.xs < e.zero && (e.xs = e.zero), e.sm < e.xs && (e.sm = e.xs), e.md < e.sm && (e.md = e.sm), e.lg < e.md && (e.lg = e.md), e.xl < e.lg && (e.xl = e.lg), e;
+}
+function le(t) {
+  t = t.filter((r) => r.some((e) => e != null && !e.startsWith("?")));
+  for (let r = 0; r < t[0].length; r++)
+    t.every((e) => e[r] == null || e[r].startsWith("?")) && (t = t.map((e) => e.filter((n, s) => s !== r)), r--);
+  return t = t.map((r) => r.map((e) => e != null && e.startsWith("?") ? e.slice(1) : e)), t;
+}
+function Kn({
+  smallBreakpoint: t,
+  mediumBreakpoint: r,
+  vertical: e,
+  horizontal: n,
+  is: s
+}) {
+  function l(i) {
+    var y;
+    let u = [
+      [null],
+      [null],
+      [null],
+      [null],
+      [null],
+      [null]
+    ];
+    const h = [];
+    h.push("1fr");
+    const g = [];
+    return n.banner && (g.push(n.banner[i] + "px"), u[0][1] = "banner"), (n.header || e.menu || e.aside) && (g.push(
+      (((y = n.header) == null ? void 0 : y[i]) ?? F.header[i]) + "px"
+    ), u[1][1] = "header"), n.mainHeader && (g.push(n.mainHeader[i] + "px"), u[2][1] = "mainHeader"), g.push("1fr"), u[3][1] = "main", n.mainFooter && (g.push(n.mainFooter[i] + "px"), u[4][1] = "mainFooter"), n.footer && (g.push(n.footer[i] + "px"), u[5][1] = "footer"), u = le(u), {
+      columns: h.join(" "),
+      rows: g.join(" "),
+      areas: u.map((B) => `"${B.join(" ")}"`).join(`
+`),
+      displayMenu: !1,
+      displayAside: !1,
+      menuWidth: F.menu[i] + "px",
+      asideWidth: F.aside[i] + "px"
+    };
+  }
+  function o(i) {
+    var y;
+    let u = [
+      [null, null],
+      [null, null],
+      [null, null],
+      [null, null],
+      [null, null],
+      [null, null]
+    ];
+    const h = [];
+    e.menu && (h.push(e.menu[i] + "px"), u[2][0] = "?menu", u[3][0] = "menu", u[4][0] = "?menu"), h.push("1fr");
+    const g = [];
+    return n.banner && (g.push(n.banner[i] + "px"), u[0][0] = "?banner", u[0][1] = "banner"), (n.header || e.aside) && (g.push(
+      (((y = n.header) == null ? void 0 : y[i]) ?? F.header[i]) + "px"
+    ), u[1][0] = "?header", u[1][1] = "header"), n.mainHeader && (g.push(n.mainHeader[i] + "px"), u[2][1] = "mainHeader"), g.push("1fr"), u[3][1] = "main", n.mainFooter && (g.push(n.mainFooter[i] + "px"), u[4][1] = "mainFooter"), n.footer && (g.push(n.footer[i] + "px"), u[5][0] = "?footer", u[5][1] = "footer"), u = le(u), {
+      columns: h.join(" "),
+      rows: g.join(" "),
+      areas: u.map((B) => `"${B.join(" ")}"`).join(`
+`),
+      displayMenu: !0,
+      displayAside: !1,
+      menuWidth: F.menu[i] + "px",
+      asideWidth: F.aside[i] + "px"
+    };
+  }
+  function c(i) {
+    let u = [
+      [null, null, null],
+      [null, null, null],
+      [null, null, null],
+      [null, null, null],
+      [null, null, null],
+      [null, null, null]
+    ];
+    const h = [];
+    e.menu && (h.push(e.menu[i] + "px"), u[2][0] = "?menu", u[3][0] = "menu", u[4][0] = "?menu"), h.push("1fr"), e.aside && (h.push(e.aside[i] + "px"), u[2][2] = "?aside", u[3][2] = "aside", u[4][2] = "?aside");
+    const g = [];
+    return n.banner && (g.push(n.banner[i] + "px"), u[0][0] = "?banner", u[0][1] = "banner", u[0][2] = "?banner"), n.header && (g.push(n.header[i] + "px"), u[1][0] = "?header", u[1][1] = "header", u[1][2] = "?header"), n.mainHeader && (g.push(n.mainHeader[i] + "px"), u[2][1] = "mainHeader"), g.push("1fr"), u[3][1] = "main", n.mainFooter && (g.push(n.mainFooter[i] + "px"), u[4][1] = "mainFooter"), n.footer && (g.push(n.footer[i] + "px"), u[5][0] = "?footer", u[5][1] = "footer", u[5][2] = "?footer"), u = le(u), {
+      columns: h.join(" "),
+      rows: g.join(" "),
+      areas: u.map((y) => `"${y.join(" ")}"`).join(`
+`),
+      displayMenu: !0,
+      displayAside: !0,
+      menuWidth: F.menu[i] + "px",
+      asideWidth: F.aside[i] + "px"
+    };
+  }
+  return ({
+    width: i,
+    breakpoint: u
+  }) => s(`<=${t}`, i) ? l(u) : s(`<=${r}`, i) ? o(u) : c(u);
+}
+const Qn = ["menu", "aside"], Zn = [
+  "banner",
+  "header",
+  "mainHeader",
+  "mainFooter",
+  "footer"
+];
+function et(t, { displayMenu: r }, e) {
+  return t ? r ? "block" : e ? "float" : "none" : "none";
+}
+function nt(t, { displayAside: r }, e) {
+  return t ? r ? "block" : e ? "float" : "none" : "none";
+}
+function Pt({
+  smallBreakpoint: t = "sm",
+  mediumBreakpoint: r = "md",
+  ...e
+}) {
+  return C(_, ({ theme: n }) => {
+    const s = Object.fromEntries(
+      Qn.filter((o) => e[o]).map(
+        (o) => [
+          o,
+          Ne(e[o].width ?? {}, F[o])
+        ]
+      )
+    ), l = Object.fromEntries(
+      Zn.filter((o) => e[o]).map(
+        (o) => [
+          o,
+          Ne(
+            e[o].height ?? {},
+            F[o]
+          )
+        ]
+      )
+    );
+    return Yn(({ value: o, is: c }) => {
+      var ye, ve, we, $e, Se, Ce, _e, Be, Ie, ke;
+      const i = Kn({
+        smallBreakpoint: t,
+        mediumBreakpoint: r,
+        vertical: s,
+        horizontal: l,
+        is: c
+      }), u = o.map(i), h = $(
+        l.header != null,
+        s.menu != null,
+        s.aside != null
+      )((f, N, Z) => f || N || Z), g = $(
+        s.aside != null,
+        u
+      )((f, { displayAside: N }) => f && !N), b = $(
+        s.menu != null,
+        u
+      )((f, { displayMenu: N }) => f && !N), y = ie(), B = ie(), W = P(0), V = $(
+        s.menu != null,
+        u,
+        y.isOpen
+      )(et), z = $(
+        s.aside != null,
+        u,
+        B.isOpen
+      )(nt);
+      return p.div(
+        K(() => {
+          W.dispose(), y.dispose(), B.dispose();
+        }),
+        // attr.class(
+        //   theme.panel({ side: 'none', color: 'base', shadow: 'none' })
+        // ),
+        d.height("100%"),
+        d.display("grid"),
+        d.gridTemplateColumns(u.$.columns),
+        d.gridTemplateRows(u.$.rows),
+        d.gridTemplateAreas(u.$.areas),
+        d.gridColumnGap("0"),
+        d.gridRowGap("0"),
+        e.banner ? p.header(
+          a.class(
+            n.panel({
+              side: "none",
+              color: e.banner.color ?? "white",
+              shadow: e.banner.shadow ?? "none"
+            })
+          ),
+          d.height("100%"),
+          d.gridArea("banner"),
+          e.banner.content
+        ) : null,
+        p.header(
+          a.class(
+            n.panel({
+              side: "bottom",
+              color: ((ye = e.header) == null ? void 0 : ye.color) ?? "white",
+              shadow: ((ve = e.header) == null ? void 0 : ve.shadow) ?? "none"
+            })
+          ),
+          a.class("bu-z-10"),
+          d.display(
+            h.map((f) => f ? "block" : "none")
+          ),
+          d.gridArea("header"),
+          de((f) => (f.$.bottom.feedProp(W), null)),
+          p.div(
+            d.display("flex"),
+            d.height("100%"),
+            p.div(
+              d.display(
+                b.map((f) => f ? "flex" : "none")
+              ),
+              d.alignItems("center"),
+              d.justifyContent("center"),
+              d.height("100%"),
+              d.width("60px"),
+              je(
+                {
+                  onClick: () => y.toggle(),
+                  variant: "light",
+                  color: "base"
+                },
+                J.label("Open menu"),
+                Q({
+                  icon: y.isOpen.map(
+                    (f) => f ? "line-md/menu-to-close-alt-transition" : "line-md/close-to-menu-alt-transition"
+                  )
+                })
+              )
+            ),
+            p.div(
+              d.height("100%"),
+              d.flexGrow("1"),
+              (we = e.header) == null ? void 0 : we.content
+            ),
+            p.div(
+              d.alignItems("center"),
+              d.justifyContent("center"),
+              d.height("100%"),
+              d.width("60px"),
+              d.display(
+                g.map((f) => f ? "flex" : "none")
+              ),
+              je(
+                {
+                  onClick: () => B.toggle(),
+                  roundedness: "full",
+                  variant: "light",
+                  color: "base"
+                },
+                J.label("Open aside"),
+                Q(
+                  { icon: "line-md/chevron-left" },
+                  a.class("bu-transition-transform"),
+                  a.class(
+                    B.isOpen.map(
+                      (f) => f ? "bu-rotate-180" : ""
+                    )
+                  )
+                )
+              )
+            )
+          )
+        ),
+        e.menu ? p.nav(
+          q((f) => {
+            y.setElement(f);
+          }),
+          a.class(
+            V.map(
+              (f) => {
+                var N, Z, Ee, Ae;
+                return f === "float" ? n.panel({
+                  side: "right",
+                  color: ((N = e.menu) == null ? void 0 : N.color) ?? "white",
+                  shadow: ((Z = e.menu) == null ? void 0 : Z.shadow) ?? "md"
+                }) : n.panel({
+                  side: "right",
+                  color: ((Ee = e.menu) == null ? void 0 : Ee.color) ?? "white",
+                  shadow: ((Ae = e.menu) == null ? void 0 : Ae.shadow) ?? "none"
+                });
+              }
+            )
+          ),
+          d.height("100%"),
+          d.gridArea("menu"),
+          d.display(
+            V.map(
+              (f) => f === "none" ? "none" : "block"
+            )
+          ),
+          d.position(
+            V.map(
+              (f) => f === "float" ? "fixed" : "initial"
+            )
+          ),
+          d.top(W.map((f) => `${f}px`)),
+          d.transition("left 0.3s ease-in-out"),
+          d.left(
+            $(
+              y.displayOpen,
+              u.$.menuWidth
+            )((f, N) => f ? "0" : `-${N}`)
+          ),
+          d.width(u.$.menuWidth),
+          d.bottom(W.map((f) => `${f}px`)),
+          ae.status(y.status.map(String)),
+          ($e = e.menu) == null ? void 0 : $e.content
+        ) : null,
+        e.mainHeader ? p.header(
+          d.height("100%"),
+          d.gridArea("mainHeader"),
+          a.class(
+            n.panel({
+              side: "none",
+              color: ((Se = e.mainHeader) == null ? void 0 : Se.color) ?? "white",
+              shadow: ((Ce = e.mainHeader) == null ? void 0 : Ce.shadow) ?? "none"
+            })
+          ),
+          e.mainHeader.content
+        ) : null,
+        p.main(
+          d.height("100%"),
+          d.overflow("hidden"),
+          d.gridArea("main"),
+          a.class(
+            n.panel({
+              side: "none",
+              color: ((_e = e.main) == null ? void 0 : _e.color) ?? "white",
+              shadow: ((Be = e.main) == null ? void 0 : Be.shadow) ?? "none"
+            })
+          ),
+          e.main.content
+        ),
+        e.mainFooter ? p.footer(
+          d.height("100%"),
+          d.gridArea("mainFooter"),
+          a.class(
+            n.panel({
+              side: "none",
+              color: ((Ie = e.mainFooter) == null ? void 0 : Ie.color) ?? "white",
+              shadow: ((ke = e.mainFooter) == null ? void 0 : ke.shadow) ?? "none"
+            })
+          ),
+          e.mainFooter.content
+        ) : null,
+        e.aside ? p.aside(
+          q((f) => {
+            B.setElement(f);
+          }),
+          a.class(
+            z.map(
+              (f) => f === "float" ? n.panel({
+                side: "left",
+                color: "white",
+                shadow: "md"
+              }) : n.panel({
+                side: "left",
+                color: "white",
+                shadow: "none"
+              })
+            )
+          ),
+          d.height("100%"),
+          d.gridArea("aside"),
+          d.display(
+            z.map(
+              (f) => f === "none" ? "none" : "block"
+            )
+          ),
+          d.position(
+            z.map(
+              (f) => f === "float" ? "fixed" : "initial"
+            )
+          ),
+          d.top(W.map((f) => `${f}px`)),
+          d.transition("right 0.3s ease-in-out"),
+          d.right(
+            $(
+              B.displayOpen,
+              u.$.asideWidth
+            )((f, N) => f ? "0" : `-${N}`)
+          ),
+          d.width(u.$.menuWidth),
+          d.bottom(W.map((f) => `${f}px`)),
+          e.aside.content
+        ) : null,
+        e.footer ? p.footer(
+          a.class(
+            n.panel({
+              side: "top",
+              color: "white",
+              shadow: "none"
+            })
+          ),
+          d.height("100%"),
+          d.gridArea("footer"),
+          e.footer.content
+        ) : null
+      );
+    });
+  });
+}
+function Ht({ variant: t = "default", size: r = "md", roundedness: e = "lg" } = {}, ...n) {
+  return C(_, (s) => p.div(
+    a.class(
+      $(
+        s,
+        t,
+        r,
+        e
+      )(
+        ({ theme: l }, o, c, i) => l.card({
+          variant: o,
+          size: c,
+          roundedness: i
+        })
+      )
+    ),
+    ...n
+  ));
+}
+function Vt(...t) {
+  return p.div(
+    a.class("bc-center-h"),
+    p.div(a.class("bc-center__content"), ...t)
+  );
+}
+function Mt({ gap: t = "lg" } = {}, ...r) {
+  return C(_, (e) => p.div(
+    a.class(
+      $(
+        e,
+        t
+      )(
+        ({ theme: n }, s) => n.center({
+          gap: s
+        })
+      )
+    ),
+    ...r
+  ));
+}
+function Lt(...t) {
+  return p.div(a.class("bc-group"), ...t);
+}
+function qt({ variant: t = "default", size: r = "md", roundedness: e = "lg" } = {}, ...n) {
+  return C(_, (s) => p.div(
+    a.class(
+      $(
+        s,
+        t,
+        r,
+        e
+      )(
+        ({ theme: l }, o, c, i) => l.sink({
+          variant: o,
+          size: c,
+          roundedness: i
+        })
+      )
+    ),
+    ...n
+  ));
+}
+function Rt(...t) {
+  return p.div(a.class("bc-stack"), ...t);
+}
+function tt(t) {
+  return ({ effect: r, ...e }, n) => {
+    const s = [], l = () => s.forEach((u) => u()), o = ie();
+    o.onClosed(l);
+    const i = ln((() => {
+      var h, g;
+      const u = /* @__PURE__ */ new Set();
+      for (const b of t.element.querySelectorAll(
+        ":scope > :not([data-overlay])"
+      ))
+        b.hasAttribute("inert") ? u.add(b) : b.setAttribute("inert", "");
+      if (s.push(() => {
+        for (const b of t.element.querySelectorAll(
+          ":scope > :not([data-overlay])"
+        ))
+          u.has(b) || b.removeAttribute("inert");
+        u.clear();
+      }), (g = (h = document.activeElement) == null ? void 0 : h.blur) == null || g.call(h), e.mode === "capturing") {
+        const b = (B) => {
+          var W;
+          B.key === "Escape" && ((W = e.onEscape) == null || W.call(e), o.close());
+        };
+        document.addEventListener("keydown", b), s.push(
+          () => document.removeEventListener("keydown", b)
+        );
+        const y = () => {
+          var B;
+          (B = e.onClickOutside) == null || B.call(e), o.close();
+        };
+        t.element.addEventListener("mousedown", y), s.push(
+          () => t.element.removeEventListener("mousedown", y)
+        );
+      }
+      return p.div(
+        q((b) => o.setElement(b)),
+        ae.status(o.status.map(String)),
+        // style.backgroundColor(
+        //   status.displayOpen.map((v): string => (v ? '' : 'rgba(0, 0, 0, 0)'))
+        // ),
+        ae.overlay("true"),
+        C(
+          _,
+          ({ theme: b }) => a.class(
+            b.overlay({
+              effect: r ?? "visible",
+              mode: e.mode ?? "capturing"
+            })
+          )
+        ),
+        n(o.close)
+      );
+    })(), t.element, {
+      disposeWithParent: !0,
+      clear: !1,
+      providers: t.providers
+    });
+    return s.push(i), fe(() => o.open(), 0), l;
+  };
+}
+function Xe(t, r, e) {
+  return on((n) => {
+    const s = t(n), l = tt(s);
+    let o = () => {
+    };
+    const c = (i) => {
+      o(), o = l(r, i);
+    };
+    return R(K(o), e(c));
+  });
+}
+function zt(t, r) {
+  return Xe((e) => e, t, r);
+}
+function Gt(t, r) {
+  return Xe(
+    (e) => e.makePortal("body"),
+    t,
+    r
+  );
+}
+export {
+  Pt as AppShell,
+  je as Button,
+  Ht as Card,
+  Mt as Center,
+  Vt as CenterH,
+  Tt as CheckboxInput,
+  j as CommonInputAttributes,
+  k as ControlInputWrapper,
+  pt as DateControl,
+  He as DateInput,
+  dt as DateTimeControl,
+  _n as DateTimeInput,
+  Ot as EditableText,
+  mt as EmailControl,
+  Bn as EmailInput,
+  at as EmphasisLabel,
+  ut as ErrorLabel,
+  In as Expando,
+  Ln as FormController,
+  ht as FormStatus,
+  Lt as Group,
+  re as GroupController,
+  Q as Icon,
+  O as InputContainer,
+  vn as Label,
+  En as LazyNativeSelect,
+  ft as LazyNativeSelectControl,
+  ce as ListController,
+  wn as MutedLabel,
+  Me as NativeSelect,
+  bt as NativeSelectControl,
+  xt as NullableDateControl,
+  Le as NullableDateInput,
+  yt as NullableDateTimeControl,
+  qe as NullableDateTimeInput,
+  vt as NullableStringDateControl,
+  wt as NullableStringDateTimeControl,
+  Dn as NullableTextArea,
+  $t as NullableTextAreaControl,
+  St as NullableTextControl,
+  jn as NullableTextInput,
+  Ct as NumberControl,
+  Nn as NumberInput,
+  Gt as OverlayBody,
+  zt as OverlayElement,
+  _t as PasswordControl,
+  Wn as PasswordInput,
+  $n as RequiredSymbol,
+  Bt as SegmentedControl,
+  ue as SelectOption,
+  qt as Sink,
+  Rt as Stack,
+  It as StringDateControl,
+  yn as Tag,
+  kt as TagsControl,
+  Pn as TagsInput,
+  Hn as TextArea,
+  Et as TextAreaControl,
+  it as TextControl,
+  Sn as TextInput,
+  _ as Theme,
+  ot as ThemeAppeareance,
+  Yt as Use,
+  te as ValueController,
+  Ue as WithBreakpoint,
+  Yn as WithTWBreakpoint,
+  Ft as WithTWElementBreakpoint,
+  Un as compareBreakpoint,
+  Ge as connectCommonAttributes,
+  Dt as connectNumberInput,
+  jt as connectStringInput,
+  Rn as convertStandardSchemaIssues,
+  qn as convertStandardSchemaPathToPath,
+  gt as emitExpando,
+  kn as emitOptionExpando,
+  ne as emptyToNull,
+  Wt as findBreakpoint,
+  T as inputOptionsFromController,
+  me as inputOptionsFromMappedController,
+  ze as makeMapValidationResult,
+  he as makeMappedOnChangeHandler,
+  ct as makeNullableOnChangeHandler,
+  E as makeOnBlurHandler,
+  D as makeOnChangeHandler,
+  tt as makeOverlay,
+  Re as nullToEmpty,
+  At as parsePath,
+  Mn as pathToString,
+  Nt as useForm,
+  Vn as wrapSegment
+};