@maskingtech/designsystem 0.0.2 → 0.0.4

package/dist/mtds.js

@@ -1,495 +1,303 @@
-import ae, { useState as k, useMemo as V, useEffectEvent as se, useEffect as J, forwardRef as w, useRef as oe } from "react";
-var y = { exports: {} }, T = {};
-var W;
-function ce() {
-  if (W) return T;
-  W = 1;
-  var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(a, s, l) {
-    var i = null;
-    if (l !== void 0 && (i = "" + l), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      l = {};
-      for (var f in s)
-        f !== "key" && (l[f] = s[f]);
-    } else l = s;
-    return s = l.ref, {
-      $$typeof: t,
-      type: a,
-      key: i,
-      ref: s !== void 0 ? s : null,
-      props: l
-    };
-  }
-  return T.Fragment = r, T.jsx = n, T.jsxs = n, T;
-}
-var N = {};
-var U;
-function le() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === te ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
-        case g:
-          return "Fragment";
-        case G:
-          return "Profiler";
-        case A:
-          return "StrictMode";
-        case Z:
-          return "Suspense";
-        case H:
-          return "SuspenseList";
-        case ee:
-          return "Activity";
-      }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
-          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
-          case S:
-            return "Portal";
-          case X:
-            return e.displayName || "Context";
-          case B:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case K:
-            var c = e.render;
-            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Q:
-            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
-          case O:
-            c = e._payload, e = e._init;
-            try {
-              return t(e(c));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function r(e) {
-      return "" + e;
-    }
-    function n(e) {
-      try {
-        r(e);
-        var c = !1;
-      } catch {
-        c = !0;
-      }
-      if (c) {
-        c = console;
-        var u = c.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
-          c,
-          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
-        ), r(e);
-      }
-    }
-    function a(e) {
-      if (e === g) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
-        return "<...>";
-      try {
-        var c = t(e);
-        return c ? "<" + c + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function s() {
-      var e = P.A;
-      return e === null ? null : e.getOwner();
-    }
-    function l() {
-      return Error("react-stack-top-frame");
-    }
-    function i(e) {
-      if (I.call(e, "key")) {
-        var c = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (c && c.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function f(e, c) {
-      function u() {
-        z || (z = !0, console.error(
-          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          c
-        ));
-      }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
-        configurable: !0
-      });
-    }
-    function x() {
-      var e = t(this.type);
-      return D[e] || (D[e] = !0, console.error(
-        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), e = this.props.ref, e !== void 0 ? e : null;
-    }
-    function v(e, c, u, d, h, C) {
-      var p = u.ref;
-      return e = {
-        $$typeof: j,
-        type: e,
-        key: c,
-        props: u,
-        _owner: d
-      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
-        enumerable: !1,
-        get: x
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: null
-      }), Object.defineProperty(e, "_debugStack", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: h
-      }), Object.defineProperty(e, "_debugTask", {
-        configurable: !1,
-        enumerable: !1,
-        writable: !0,
-        value: C
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-    }
-    function m(e, c, u, d, h, C) {
-      var p = c.children;
-      if (p !== void 0)
-        if (d)
-          if (re(p)) {
-            for (d = 0; d < p.length; d++)
-              E(p[d]);
-            Object.freeze && Object.freeze(p);
-          } else
-            console.error(
-              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
-            );
-        else E(p);
-      if (I.call(c, "key")) {
-        p = t(e);
-        var R = Object.keys(c).filter(function(ne) {
-          return ne !== "key";
-        });
-        d = 0 < R.length ? "{key: someKey, " + R.join(": ..., ") + ": ...}" : "{key: someKey}", M[p + d] || (R = 0 < R.length ? "{" + R.join(": ..., ") + ": ...}" : "{}", console.error(
-          `A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,
-          d,
-          p,
-          R,
-          p
-        ), M[p + d] = !0);
-      }
-      if (p = null, u !== void 0 && (n(u), p = "" + u), i(c) && (n(c.key), p = "" + c.key), "key" in c) {
-        u = {};
-        for (var Y in c)
-          Y !== "key" && (u[Y] = c[Y]);
-      } else u = c;
-      return p && f(
-        u,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), v(
-        e,
-        p,
-        u,
-        s(),
-        h,
-        C
-      );
-    }
-    function E(e) {
-      _(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-    }
-    function _(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === j;
-    }
-    var b = ae, j = Symbol.for("react.transitional.element"), S = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), G = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), X = Symbol.for("react.context"), K = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), P = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, re = Array.isArray, $ = console.createTask ? console.createTask : function() {
-      return null;
-    };
-    b = {
-      react_stack_bottom_frame: function(e) {
-        return e();
-      }
-    };
-    var z, D = {}, L = b.react_stack_bottom_frame.bind(
-      b,
-      l
-    )(), F = $(a(l)), M = {};
-    N.Fragment = g, N.jsx = function(e, c, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        c,
-        u,
-        !1,
-        d ? Error("react-stack-top-frame") : L,
-        d ? $(a(e)) : F
-      );
-    }, N.jsxs = function(e, c, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        c,
-        u,
-        !0,
-        d ? Error("react-stack-top-frame") : L,
-        d ? $(a(e)) : F
-      );
-    };
-  })()), N;
-}
-var q;
-function ie() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? y.exports = ce() : y.exports = le()), y.exports;
-}
-var o = ie();
-function fe({ children: t }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "mtds", children: t });
-}
-function me({ options: t, selected: r, onChange: n }) {
-  const a = r ?? [...t.keys()][0], s = t.get(a) ?? "", [l, i] = k(a), [f, x] = k(s), [v, m] = k(!1), E = () => {
-    m(!v);
-  }, _ = (b) => {
-    const j = b.target, S = l, g = j.getAttribute("data-key") ?? a, A = t.get(g) ?? s;
-    i(g), x(A), m(!1), n && n(S, g);
-  };
-  return /* @__PURE__ */ o.jsxs("div", { className: "dropdown", children: [
-    /* @__PURE__ */ o.jsx("div", { className: v ? "text active" : "text", onClick: E, children: f }),
-    v && /* @__PURE__ */ o.jsx("div", { className: "options", children: Array.from(t).map(([b, j]) => /* @__PURE__ */ o.jsx("div", { className: "option", "data-key": b, onClick: _, children: j }, b)) })
-  ] });
-}
-function de({ children: t }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "ds-tabs-tab", children: t });
-}
-function pe({ separator: t, selectedId: r, children: n, onChange: a }) {
-  const [s, l] = k(r ?? ""), i = V(() => Array.isArray(n) ? n : [n], [n]), f = V(() => {
-    const m = {};
-    return i.forEach((E) => {
-      const _ = E.props.id;
-      m[_] = E;
-    }), m;
-  }, [i]), x = se((m) => {
-    const E = i[0]?.props.id;
-    l(m ?? E);
-  });
-  J(() => {
-    x(r);
-  }, [r, i]);
-  const v = (m) => {
-    a !== void 0 && a(m, s), l(m);
-  };
-  return /* @__PURE__ */ o.jsxs("div", { className: "tabs", children: [
-    /* @__PURE__ */ o.jsx("div", { className: "nav", children: i.map((m) => {
-      const E = m.props.id, _ = `tab-${E}`, b = E === s ? "active" : "inactive", j = () => v(m.props.id);
-      return /* @__PURE__ */ o.jsx("div", { className: "item " + b, onClick: j, children: m.props.title }, _);
-    }) }),
-    t !== void 0 ? /* @__PURE__ */ o.jsx("div", { className: "separator", children: t }) : null,
-    /* @__PURE__ */ o.jsx("div", { className: "content", children: f[s] })
-  ] });
-}
-function Ee({ source: t, title: r, alt: n = "Avatar", width: a, height: s, fit: l = "contain" }) {
-  const i = "avatar fit-" + l, f = { width: a, height: s };
-  return /* @__PURE__ */ o.jsx(
+import { jsx as a, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as f, useRef as x, useEffect as y, useState as E, useMemo as v, useEffectEvent as w } from "react";
+function $({ source: e, title: t, alt: n = "Avatar", width: r, height: s, fit: c = "contain" }) {
+  const i = "avatar fit-" + c;
+  return /* @__PURE__ */ a(
     "img",
     {
       className: i,
-      title: r,
+      title: t,
       alt: n,
-      style: f,
-      src: t
+      style: { width: r, height: s },
+      src: e
     }
   );
 }
-function ve({ type: t = "normal", size: r = "large", padding: n = "large", children: a }) {
-  const s = "border type-" + t + " size-" + r + " padding-" + n;
-  return /* @__PURE__ */ o.jsx("div", { className: s, children: a });
+function M({ type: e = "normal", size: t = "large", padding: n = "large", children: r }) {
+  const s = "border type-" + e + " size-" + t + " padding-" + n;
+  return /* @__PURE__ */ a("div", { className: s, children: r });
 }
-function xe({ type: t = "primary", size: r = "medium", text: n, onClick: a }) {
-  const s = "button type-" + t + " size-" + r, l = t === "disabled", i = t === "submit" ? "submit" : "button";
-  return /* @__PURE__ */ o.jsx("input", { type: i, onClick: a, className: s, disabled: l, value: n });
+function D({ type: e = "primary", border: t = "small", size: n = "medium", text: r, onClick: s }) {
+  const c = "button type-" + e + " border-" + t + " size-" + n;
+  return /* @__PURE__ */ a("input", { type: e === "submit" ? "submit" : "button", onClick: s, className: c, disabled: e === "disabled", value: r });
 }
-function be({ sizing: t = "fluid", children: r }) {
-  const n = "cell sizing-" + t;
-  return /* @__PURE__ */ o.jsx("div", { className: n, children: r });
+function I({ sizing: e = "fluid", children: t }) {
+  const n = "cell sizing-" + e;
+  return /* @__PURE__ */ a("div", { className: n, children: t });
 }
-function _e({ padding: t = "none", onClick: r, children: n }) {
-  const a = "clickarea padding-" + t;
-  return /* @__PURE__ */ o.jsx("div", { className: a, onClick: r, children: n });
+const j = f(function({ name: t, label: n, defaultChecked: r, checked: s, value: c, required: i, onChange: u }, m) {
+  return /* @__PURE__ */ N("label", { className: "checkbox", children: [
+    /* @__PURE__ */ a(
+      "input",
+      {
+        type: "checkbox",
+        defaultChecked: r,
+        checked: s,
+        value: c,
+        name: t,
+        ref: m,
+        required: i,
+        onChange: u
+      }
+    ),
+    n
+  ] });
+});
+function F({ padding: e = "none", onClick: t, children: n }) {
+  const r = "clickarea padding-" + e;
+  return /* @__PURE__ */ a("div", { className: r, onClick: t, children: n });
 }
-function je({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const l = "column align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ o.jsx("div", { className: l, children: s });
+function P({ alignX: e = "left", alignY: t = "top", gap: n = "medium", wrap: r = "nowrap", children: s }) {
+  const c = "column align-x-" + e + " align-y-" + t + " gap-" + n + " wrap-" + r;
+  return /* @__PURE__ */ a("div", { className: c, children: s });
 }
-const ge = w(function({ children: r, submitHandler: n }, a) {
-  const s = (l) => {
-    l.preventDefault(), n && n(l.target);
-  };
-  return /* @__PURE__ */ o.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
+const G = f(function({ name: t, defaultValue: n, value: r, title: s, type: c = "datetime", border: i = "small", size: u = "medium", required: m, onChange: d }, o) {
+  const l = "datetime border-" + i + " size-" + u;
+  return /* @__PURE__ */ a(
+    "input",
+    {
+      className: l,
+      type: c,
+      name: t,
+      defaultValue: n,
+      value: r,
+      title: s,
+      ref: o,
+      required: m,
+      onChange: d
+    }
+  );
+}), q = f(function({ children: t, submitHandler: n }, r) {
+  return /* @__PURE__ */ a("form", { onSubmit: (c) => {
+    c.preventDefault(), n && n(c.target);
+  }, className: "form", ref: r, children: t });
 });
-function Re({ layout: t, gap: r = "medium", children: n }) {
-  const a = "grid layout-" + t + " gap-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
+function H({ layout: e, gap: t = "medium", children: n }) {
+  const r = "grid layout-" + e + " gap-" + t;
+  return /* @__PURE__ */ a("div", { className: r, children: n });
 }
-function Te({ type: t }) {
-  return /* @__PURE__ */ o.jsx("span", { className: "icon " + t });
+function J({ type: e }) {
+  return /* @__PURE__ */ a("span", { className: "icon " + e });
 }
-function Ne({ source: t, title: r, alt: n, width: a, height: s, fit: l = "contain" }) {
-  const i = "image fit-" + l, f = { width: a, height: s };
-  return /* @__PURE__ */ o.jsx(
+function K({ source: e, title: t, alt: n, width: r, height: s, fit: c = "contain" }) {
+  const i = "image fit-" + c;
+  return /* @__PURE__ */ a(
     "img",
     {
       className: i,
-      title: r,
+      title: t,
       alt: n,
-      style: f,
-      src: t
+      style: { width: r, height: s },
+      src: e
     }
   );
 }
-function he({ label: t, element: r }) {
-  return /* @__PURE__ */ o.jsxs("div", { className: "input", children: [
-    t,
-    r
+function O({ label: e, element: t }) {
+  return /* @__PURE__ */ N("div", { className: "input", children: [
+    e,
+    t
   ] });
 }
-function ye({ value: t }) {
-  return /* @__PURE__ */ o.jsx("label", { className: "label", children: t });
+function Q({ value: e }) {
+  return /* @__PURE__ */ a("label", { className: "label", children: e });
 }
-function ke({ url: t, target: r, children: n }) {
-  return /* @__PURE__ */ o.jsx("a", { className: "link", href: t, target: r, children: n });
+function U({ url: e, target: t, children: n }) {
+  return /* @__PURE__ */ a("a", { className: "link", href: e, target: t, children: n });
 }
-function we({ open: t, sizing: r = "content", children: n }) {
-  const a = oe(null), s = "modal sizing-" + r;
-  return J(() => {
-    t ? a.current?.showModal() : a.current?.close();
-  }, [t]), /* @__PURE__ */ o.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ o.jsx("form", { method: "dialog", children: n }) });
+function V({ open: e = !0, sizing: t = "content", children: n }) {
+  const r = x(null), s = "modal sizing-" + t;
+  return y(() => {
+    e ? r.current?.showModal() : r.current?.close();
+  }, [e]), /* @__PURE__ */ a("dialog", { ref: r, className: s, children: n });
 }
-function Se({ type: t = "normal", padding: r = "large", children: n }) {
-  const a = "panel type-" + t + " padding-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
+function W({ type: e = "normal", padding: t = "large", children: n }) {
+  const r = "panel type-" + e + " padding-" + t;
+  return /* @__PURE__ */ a("div", { className: r, children: n });
 }
-function Ae({ size: t = "medium", children: r }) {
-  const n = "paragraph size-" + t;
-  return /* @__PURE__ */ o.jsx("p", { className: n, children: r });
+function X({ size: e = "medium", children: t }) {
+  const n = "paragraph size-" + e;
+  return /* @__PURE__ */ a("p", { className: n, children: t });
 }
-function Oe({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const l = "row align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ o.jsx("div", { className: l, children: s });
+function Y({ alignX: e = "left", alignY: t = "top", gap: n = "medium", wrap: r = "nowrap", children: s }) {
+  const c = "row align-x-" + e + " align-y-" + t + " gap-" + n + " wrap-" + r;
+  return /* @__PURE__ */ a("div", { className: c, children: s });
 }
-function Pe({ direction: t, size: r = "medium" }) {
-  const n = "ruler direction-" + t + " size-" + r;
-  return /* @__PURE__ */ o.jsx("div", { className: n });
+function Z({ direction: e, size: t = "medium" }) {
+  const n = "ruler direction-" + e + " size-" + t;
+  return /* @__PURE__ */ a("div", { className: n });
 }
-const $e = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: l }, i) {
-  const f = "select size-" + s;
-  return /* @__PURE__ */ o.jsx(
+const _ = f(function({ name: t, options: n, defaultValue: r, value: s, border: c = "small", size: i = "medium", onChange: u }, m) {
+  const d = "select border-" + c + " size-" + i;
+  return /* @__PURE__ */ a(
     "select",
     {
-      className: f,
-      name: r,
-      defaultValue: a,
-      onChange: l,
-      ref: i,
-      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ o.jsx("option", { value: x, children: v }, x))
+      className: d,
+      name: t,
+      defaultValue: r,
+      value: s,
+      onChange: u,
+      ref: m,
+      children: Array.from(n).map(([o, l]) => /* @__PURE__ */ a("option", { value: o, children: l }, o))
     }
   );
 });
-function Ce({ active: t = !0 }) {
-  const r = "spinner" + (t ? " active" : "");
-  return /* @__PURE__ */ o.jsx("div", { className: r });
+function ee({ active: e = !0 }) {
+  const t = "spinner" + (e ? " active" : "");
+  return /* @__PURE__ */ a("div", { className: t });
+}
+function z({ children: e }) {
+  return /* @__PURE__ */ a("thead", { children: e });
+}
+function S({ border: e = "medium", children: t }) {
+  const n = "border-" + e;
+  return /* @__PURE__ */ a("tbody", { className: n, children: t });
 }
-function Ye({ value: t, type: r = "primary", size: n = "medium", weight: a = "normal", wrap: s = "none" }) {
-  const l = "text type-" + r + " size-" + n + " weight-" + a + " wrap-" + s;
-  return /* @__PURE__ */ o.jsx("span", { className: l, children: t });
+function T({ children: e }) {
+  return /* @__PURE__ */ a("tfoot", { children: e });
 }
-const Ie = w(function({ name: r, placeholder: n, value: a, size: s = "medium", rows: l, limit: i, onChange: f }, x) {
-  const v = "textarea size-" + s;
-  return /* @__PURE__ */ o.jsx(
+function k({ children: e }) {
+  return /* @__PURE__ */ a("tr", { children: e });
+}
+function C({ colspan: e, rowspan: t, alignX: n = "left", alignY: r = "center", size: s = "fit", children: c }) {
+  const i = "align-x-" + n + " align-y-" + r + " size-" + s;
+  return /* @__PURE__ */ a("td", { className: i, colSpan: e, rowSpan: t, children: c });
+}
+function b({ padding: e = "medium", children: t }) {
+  const n = "table padding-" + e;
+  return /* @__PURE__ */ a("table", { className: n, children: t });
+}
+b.Header = z;
+b.Body = S;
+b.Footer = T;
+b.Row = k;
+b.Cell = C;
+function te({ value: e, type: t = "primary", size: n = "medium", weight: r = "normal", wrap: s = "none" }) {
+  const c = "text type-" + t + " size-" + n + " weight-" + r + " wrap-" + s;
+  return /* @__PURE__ */ a("span", { className: c, children: e });
+}
+const ne = f(function({ name: t, placeholder: n, defaultValue: r, value: s, border: c = "small", size: i = "medium", rows: u, limit: m, onChange: d }, o) {
+  const l = "textarea border-" + c + " size-" + i;
+  return /* @__PURE__ */ a(
     "textarea",
     {
-      className: v,
-      name: r,
+      className: l,
+      name: t,
       placeholder: n,
-      defaultValue: a,
-      rows: l,
-      ref: x,
-      maxLength: i,
-      onChange: f
+      defaultValue: r,
+      value: s,
+      rows: u,
+      ref: o,
+      maxLength: m,
+      onChange: d
     }
   );
-}), ze = w(function({ name: r, placeholder: n, value: a, limit: s, pattern: l, title: i, size: f = "medium", required: x, onChange: v }, m) {
-  const E = "textbox size-" + f;
-  return /* @__PURE__ */ o.jsx(
+}), ae = f(function({ name: t, placeholder: n, defaultValue: r, value: s, limit: c, pattern: i, title: u, type: m = "text", border: d = "small", size: o = "medium", required: l, onChange: p }, h) {
+  const g = "textbox border-" + d + " size-" + o;
+  return /* @__PURE__ */ a(
     "input",
     {
-      className: E,
-      type: "text",
-      name: r,
+      className: g,
+      type: m,
+      name: t,
       placeholder: n,
-      defaultValue: a,
-      maxLength: s,
-      pattern: l,
-      title: i,
-      ref: m,
-      required: x,
-      onChange: v
+      defaultValue: r,
+      value: s,
+      maxLength: c,
+      pattern: i,
+      title: u,
+      ref: h,
+      required: l,
+      onChange: p
     }
   );
 });
-function De({ size: t = "large", children: r }) {
-  const n = "title size-" + t;
-  switch (t) {
+function re({ size: e = "large", children: t }) {
+  const n = "title size-" + e;
+  switch (e) {
     case "large":
-      return /* @__PURE__ */ o.jsx("h1", { className: n, children: r });
+      return /* @__PURE__ */ a("h1", { className: n, children: t });
     case "medium":
-      return /* @__PURE__ */ o.jsx("h2", { className: n, children: r });
+      return /* @__PURE__ */ a("h2", { className: n, children: t });
     case "small":
-      return /* @__PURE__ */ o.jsx("h3", { className: n, children: r });
+      return /* @__PURE__ */ a("h3", { className: n, children: t });
   }
 }
+function A({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "tab", children: e });
+}
+function L({ separator: e, selectedId: t, children: n, onChange: r }) {
+  const [s, c] = E(t ?? ""), i = v(() => Array.isArray(n) ? n : [n], [n]), u = v(() => {
+    const o = {};
+    return i.forEach((l) => {
+      const p = l.props.id;
+      o[p] = l;
+    }), o;
+  }, [i]), m = w((o) => {
+    const l = i[0]?.props.id;
+    c(o ?? l);
+  });
+  y(() => {
+    m(t);
+  }, [t, i]);
+  const d = (o) => {
+    r !== void 0 && r(o, s), c(o);
+  };
+  return /* @__PURE__ */ N("div", { className: "tabs", children: [
+    /* @__PURE__ */ a("div", { className: "nav", children: i.map((o) => {
+      const l = o.props.id, p = `tab-${l}`, h = l === s ? "active" : "inactive", g = () => d(o.props.id);
+      return /* @__PURE__ */ a("div", { className: "item " + h, onClick: g, children: o.props.title }, p);
+    }) }),
+    e !== void 0 ? /* @__PURE__ */ a("div", { className: "separator", children: e }) : null,
+    /* @__PURE__ */ a("div", { className: "content", children: u[s] })
+  ] });
+}
+L.Tab = A;
+function se({ children: e }) {
+  return /* @__PURE__ */ a("main", { className: "layout-centered", children: /* @__PURE__ */ a("div", { className: "content", children: e }) });
+}
+function ce({ header: e, footer: t, sidebar: n, children: r }) {
+  return /* @__PURE__ */ N("div", { className: "layout-sidebar", children: [
+    /* @__PURE__ */ a("header", { children: e }),
+    /* @__PURE__ */ N("div", { className: "content", children: [
+      /* @__PURE__ */ a("div", { className: "left", children: /* @__PURE__ */ a("aside", { children: n }) }),
+      /* @__PURE__ */ a("div", { className: "right", children: /* @__PURE__ */ a("main", { children: r }) })
+    ] }),
+    /* @__PURE__ */ a("footer", { children: t })
+  ] });
+}
+function ie({ children: e }) {
+  return /* @__PURE__ */ a("div", { className: "mtds", children: e });
+}
 export {
-  Ee as Avatar,
-  ve as Border,
-  xe as Button,
-  be as Cell,
-  _e as ClickArea,
-  je as Column,
-  fe as DesignSystem,
-  me as Dropdown,
-  ge as Form,
-  Re as Grid,
-  Te as Icon,
-  Ne as Image,
-  he as Input,
-  ye as Label,
-  ke as Link,
-  we as Modal,
-  Se as Panel,
-  Ae as Paragraph,
-  Oe as Row,
-  Pe as Ruler,
-  $e as Select,
-  Ce as Spinner,
-  de as Tab,
-  pe as Tabs,
-  Ye as Text,
-  Ie as TextArea,
-  ze as TextBox,
-  De as Title
+  $ as Avatar,
+  M as Border,
+  D as Button,
+  I as Cell,
+  se as CenteredLayout,
+  j as CheckBox,
+  F as ClickArea,
+  P as Column,
+  G as DateTime,
+  ie as DesignSystem,
+  q as Form,
+  H as Grid,
+  J as Icon,
+  K as Image,
+  O as Input,
+  Q as Label,
+  U as Link,
+  V as Modal,
+  W as Panel,
+  X as Paragraph,
+  Y as Row,
+  Z as Ruler,
+  _ as Select,
+  ce as SidebarLayout,
+  ee as Spinner,
+  b as Table,
+  L as Tabs,
+  te as Text,
+  ne as TextArea,
+  ae as TextBox,
+  re as Title
 };