@maskingtech/designsystem 0.0.1 → 0.0.3

package/dist/mtds.js

@@ -1,491 +1,316 @@
-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 le() {
-  if (W) return T;
-  W = 1;
-  var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(a, s, c) {
-    var i = null;
-    if (c !== void 0 && (i = "" + c), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      c = {};
-      for (var f in s)
-        f !== "key" && (c[f] = s[f]);
-    } else c = s;
-    return s = c.ref, {
-      $$typeof: t,
-      type: a,
-      key: i,
-      ref: s !== void 0 ? s : null,
-      props: c
-    };
-  }
-  return T.Fragment = r, T.jsx = n, T.jsxs = n, T;
-}
-var N = {};
-var U;
-function ce() {
-  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 R:
-          return "Fragment";
-        case G:
-          return "Profiler";
-        case S:
-          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 A:
-            return "Portal";
-          case X:
-            return e.displayName || "Context";
-          case B:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case K:
-            var o = e.render;
-            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Q:
-            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
-          case O:
-            o = e._payload, e = e._init;
-            try {
-              return t(e(o));
-            } catch {
-            }
-        }
-      return null;
-    }
-    function r(e) {
-      return "" + e;
-    }
-    function n(e) {
-      try {
-        r(e);
-        var o = !1;
-      } catch {
-        o = !0;
-      }
-      if (o) {
-        o = console;
-        var u = o.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return u.call(
-          o,
-          "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 === R) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
-        return "<...>";
-      try {
-        var o = t(e);
-        return o ? "<" + o + ">" : "<...>";
-      } catch {
-        return "<...>";
-      }
-    }
-    function s() {
-      var e = P.A;
-      return e === null ? null : e.getOwner();
-    }
-    function c() {
-      return Error("react-stack-top-frame");
-    }
-    function i(e) {
-      if (I.call(e, "key")) {
-        var o = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (o && o.isReactWarning) return !1;
-      }
-      return e.key !== void 0;
-    }
-    function f(e, o) {
-      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)",
-          o
-        ));
-      }
-      u.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: u,
-        configurable: !0
-      });
-    }
-    function x() {
-      var e = t(this.type);
-      return L[e] || (L[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, o, u, d, h, C) {
-      var p = u.ref;
-      return e = {
-        $$typeof: j,
-        type: e,
-        key: o,
-        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, o, u, d, h, C) {
-      var p = o.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(o, "key")) {
-        p = t(e);
-        var g = Object.keys(o).filter(function(ne) {
-          return ne !== "key";
-        });
-        d = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", M[p + d] || (g = 0 < g.length ? "{" + g.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,
-          g,
-          p
-        ), M[p + d] = !0);
-      }
-      if (p = null, u !== void 0 && (n(u), p = "" + u), i(o) && (n(o.key), p = "" + o.key), "key" in o) {
-        u = {};
-        for (var Y in o)
-          Y !== "key" && (u[Y] = o[Y]);
-      } else u = o;
-      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"), A = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), S = 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, L = {}, D = b.react_stack_bottom_frame.bind(
-      b,
-      c
-    )(), F = $(a(c)), M = {};
-    N.Fragment = R, N.jsx = function(e, o, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        o,
-        u,
-        !1,
-        d ? Error("react-stack-top-frame") : D,
-        d ? $(a(e)) : F
-      );
-    }, N.jsxs = function(e, o, u) {
-      var d = 1e4 > P.recentlyCreatedOwnerStacks++;
-      return m(
-        e,
-        o,
-        u,
-        !0,
-        d ? Error("react-stack-top-frame") : D,
-        d ? $(a(e)) : F
-      );
-    };
-  })()), N;
-}
-var q;
-function ie() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? y.exports = le() : y.exports = ce()), y.exports;
-}
-var l = ie();
-function fe({ options: t, selected: r, onChange: n }) {
-  const a = r ?? [...t.keys()][0], s = t.get(a) ?? "", [c, i] = k(a), [f, x] = k(s), [v, m] = k(!1), E = () => {
-    m(!v);
-  }, _ = (b) => {
-    const j = b.target, A = c, R = j.getAttribute("data-key") ?? a, S = t.get(R) ?? s;
-    i(R), x(S), m(!1), n && n(A, R);
-  };
-  return /* @__PURE__ */ l.jsxs("div", { className: "selection", children: [
-    /* @__PURE__ */ l.jsx("div", { className: v ? "text active" : "text", onClick: E, children: f }),
-    v && /* @__PURE__ */ l.jsx("div", { className: "options", children: Array.from(t).map(([b, j]) => /* @__PURE__ */ l.jsx("div", { className: "option", "data-key": b, onClick: _, children: j }, b)) })
-  ] });
-}
-function me({ children: t }) {
-  return /* @__PURE__ */ l.jsx("div", { className: "ds-tabs-tab", children: t });
-}
-function de({ separator: t, selectedId: r, children: n, onChange: a }) {
-  const [s, c] = 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;
-    c(m ?? E);
-  });
-  J(() => {
-    x(r);
-  }, [r, i]);
-  const v = (m) => {
-    a !== void 0 && a(m, s), c(m);
-  };
-  return /* @__PURE__ */ l.jsxs("div", { className: "tabs", children: [
-    /* @__PURE__ */ l.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__ */ l.jsx("div", { className: "item " + b, onClick: j, children: m.props.title }, _);
-    }) }),
-    t !== void 0 ? /* @__PURE__ */ l.jsx("div", { className: "separator", children: t }) : null,
-    /* @__PURE__ */ l.jsx("div", { className: "content", children: f[s] })
-  ] });
-}
-function pe({ source: t, title: r, alt: n = "Avatar", width: a, height: s, fit: c = "contain" }) {
-  const i = "avatar fit-" + c, f = { width: a, height: s };
-  return /* @__PURE__ */ l.jsx(
+import { jsx as s, jsxs as h, Fragment as k } from "react/jsx-runtime";
+import { forwardRef as g, useRef as z, useEffect as w, useState as b, useMemo as y, useEffectEvent as E } from "react";
+function O({ source: t, title: e, alt: n = "Avatar", width: a, height: c, fit: r = "contain" }) {
+  const o = "avatar fit-" + r;
+  return /* @__PURE__ */ s(
     "img",
     {
-      className: i,
-      title: r,
+      className: o,
+      title: e,
       alt: n,
-      style: f,
+      style: { width: a, height: c },
       src: t
     }
   );
 }
-function Ee({ type: t = "normal", size: r = "large", padding: n = "large", children: a }) {
-  const s = "border type-" + t + " size-" + r + " padding-" + n;
-  return /* @__PURE__ */ l.jsx("div", { className: s, children: a });
+function F({ type: t = "normal", size: e = "large", padding: n = "large", children: a }) {
+  const c = "border type-" + t + " size-" + e + " padding-" + n;
+  return /* @__PURE__ */ s("div", { className: c, children: a });
 }
-function ve({ type: t = "primary", size: r = "medium", text: n, onClick: a }) {
-  const s = "button type-" + t + " size-" + r, c = t === "disabled", i = t === "submit" ? "submit" : "button";
-  return /* @__PURE__ */ l.jsx("input", { type: i, onClick: a, className: s, disabled: c, value: n });
+function j({ type: t = "primary", size: e = "medium", text: n, onClick: a }) {
+  const c = "button type-" + t + " size-" + e;
+  return /* @__PURE__ */ s("input", { type: t === "submit" ? "submit" : "button", onClick: a, className: c, disabled: t === "disabled", value: n });
 }
-function xe({ sizing: t = "fluid", children: r }) {
+function I({ sizing: t = "fluid", children: e }) {
   const n = "cell sizing-" + t;
-  return /* @__PURE__ */ l.jsx("div", { className: n, children: r });
+  return /* @__PURE__ */ s("div", { className: n, children: e });
 }
-function be({ padding: t = "none", onClick: r, children: n }) {
+const P = g(function({ name: e, label: n, defaultChecked: a, checked: c, value: r, required: o, onChange: l }, m) {
+  return /* @__PURE__ */ h("label", { className: "checkbox", children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        type: "checkbox",
+        defaultChecked: a,
+        checked: c,
+        value: r,
+        name: e,
+        ref: m,
+        required: o,
+        onChange: l
+      }
+    ),
+    n
+  ] });
+});
+function G({ padding: t = "none", onClick: e, children: n }) {
   const a = "clickarea padding-" + t;
-  return /* @__PURE__ */ l.jsx("div", { className: a, onClick: r, children: n });
+  return /* @__PURE__ */ s("div", { className: a, onClick: e, children: n });
 }
-function _e({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const c = "column align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ l.jsx("div", { className: c, children: s });
+function q({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
+  const r = "column align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ s("div", { className: r, children: c });
 }
-const je = w(function({ children: r, submitHandler: n }, a) {
-  const s = (c) => {
-    c.preventDefault(), n && n(c.target);
-  };
-  return /* @__PURE__ */ l.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
+const H = g(function({ name: e, defaultValue: n, value: a, title: c, type: r = "datetime", size: o = "medium", required: l, onChange: m }, u) {
+  const i = "datetime size-" + o;
+  return /* @__PURE__ */ s(
+    "input",
+    {
+      className: i,
+      type: r,
+      name: e,
+      defaultValue: n,
+      value: a,
+      title: c,
+      ref: u,
+      required: l,
+      onChange: m
+    }
+  );
+}), J = g(function({ children: e, submitHandler: n }, a) {
+  return /* @__PURE__ */ s("form", { onSubmit: (r) => {
+    r.preventDefault(), n && n(r.target);
+  }, className: "form", ref: a, children: e });
 });
-function Re({ layout: t, gap: r = "medium", children: n }) {
-  const a = "grid layout-" + t + " gap-" + r;
-  return /* @__PURE__ */ l.jsx("div", { className: a, children: n });
+function Q({ layout: t, gap: e = "medium", children: n }) {
+  const a = "grid layout-" + t + " gap-" + e;
+  return /* @__PURE__ */ s("div", { className: a, children: n });
 }
-function ge({ type: t }) {
-  return /* @__PURE__ */ l.jsx("span", { className: "icon " + t });
+function U({ type: t }) {
+  return /* @__PURE__ */ s("span", { className: "icon " + t });
 }
-function Te({ source: t, title: r, alt: n, width: a, height: s, fit: c = "contain" }) {
-  const i = "image fit-" + c, f = { width: a, height: s };
-  return /* @__PURE__ */ l.jsx(
+function V({ source: t, title: e, alt: n, width: a, height: c, fit: r = "contain" }) {
+  const o = "image fit-" + r;
+  return /* @__PURE__ */ s(
     "img",
     {
-      className: i,
-      title: r,
+      className: o,
+      title: e,
       alt: n,
-      style: f,
+      style: { width: a, height: c },
       src: t
     }
   );
 }
-function Ne({ label: t, element: r }) {
-  return /* @__PURE__ */ l.jsxs("div", { className: "input", children: [
+function W({ label: t, element: e }) {
+  return /* @__PURE__ */ h("div", { className: "input", children: [
     t,
-    r
+    e
   ] });
 }
-function he({ value: t }) {
-  return /* @__PURE__ */ l.jsx("label", { className: "label", children: t });
+function X({ value: t }) {
+  return /* @__PURE__ */ s("label", { className: "label", children: t });
 }
-function ye({ url: t, target: r, children: n }) {
-  return /* @__PURE__ */ l.jsx("a", { className: "link", href: t, target: r, children: n });
+function Y({ url: t, target: e, children: n }) {
+  return /* @__PURE__ */ s("a", { className: "link", href: t, target: e, children: n });
 }
-function ke({ open: t, sizing: r = "content", children: n }) {
-  const a = oe(null), s = "modal sizing-" + r;
-  return J(() => {
+function Z({ open: t = !0, sizing: e = "content", children: n }) {
+  const a = z(null), c = "modal sizing-" + e;
+  return w(() => {
     t ? a.current?.showModal() : a.current?.close();
-  }, [t]), /* @__PURE__ */ l.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ l.jsx("form", { method: "dialog", children: n }) });
+  }, [t]), /* @__PURE__ */ s("dialog", { ref: a, className: c, children: n });
 }
-function we({ type: t = "normal", padding: r = "large", children: n }) {
-  const a = "panel type-" + t + " padding-" + r;
-  return /* @__PURE__ */ l.jsx("div", { className: a, children: n });
+function _({ type: t = "normal", padding: e = "large", children: n }) {
+  const a = "panel type-" + t + " padding-" + e;
+  return /* @__PURE__ */ s("div", { className: a, children: n });
 }
-function Ae({ size: t = "medium", children: r }) {
+function tt({ size: t = "medium", children: e }) {
   const n = "paragraph size-" + t;
-  return /* @__PURE__ */ l.jsx("p", { className: n, children: r });
+  return /* @__PURE__ */ s("p", { className: n, children: e });
 }
-function Se({ alignX: t = "left", alignY: r = "top", gap: n = "medium", wrap: a = "nowrap", children: s }) {
-  const c = "row align-x-" + t + " align-y-" + r + " gap-" + n + " wrap-" + a;
-  return /* @__PURE__ */ l.jsx("div", { className: c, children: s });
+function et({ alignX: t = "left", alignY: e = "top", gap: n = "medium", wrap: a = "nowrap", children: c }) {
+  const r = "row align-x-" + t + " align-y-" + e + " gap-" + n + " wrap-" + a;
+  return /* @__PURE__ */ s("div", { className: r, children: c });
 }
-function Oe({ direction: t, size: r = "medium" }) {
-  const n = "ruler direction-" + t + " size-" + r;
-  return /* @__PURE__ */ l.jsx("div", { className: n });
+function nt({ direction: t, size: e = "medium" }) {
+  const n = "ruler direction-" + t + " size-" + e;
+  return /* @__PURE__ */ s("div", { className: n });
 }
-const Pe = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: c }, i) {
-  const f = "select size-" + s;
-  return /* @__PURE__ */ l.jsx(
+const at = g(function({ name: e, options: n, defaultValue: a, value: c, size: r = "medium", onChange: o }, l) {
+  const m = "select size-" + r;
+  return /* @__PURE__ */ s(
     "select",
     {
-      className: f,
-      name: r,
+      className: m,
+      name: e,
       defaultValue: a,
-      onChange: c,
-      ref: i,
-      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ l.jsx("option", { value: x, children: v }, x))
+      value: c,
+      onChange: o,
+      ref: l,
+      children: Array.from(n).map(([u, i]) => /* @__PURE__ */ s("option", { value: u, children: i }, u))
     }
   );
 });
-function $e({ active: t = !0 }) {
-  const r = "spinner" + (t ? " active" : "");
-  return /* @__PURE__ */ l.jsx("div", { className: r });
+function st({ active: t = !0 }) {
+  const e = "spinner" + (t ? " active" : "");
+  return /* @__PURE__ */ s("div", { className: e });
+}
+function A({ children: t }) {
+  return /* @__PURE__ */ s("thead", { children: t });
+}
+function C({ border: t = "medium", children: e }) {
+  const n = "border-" + t;
+  return /* @__PURE__ */ s("tbody", { className: n, children: e });
+}
+function M({ children: t }) {
+  return /* @__PURE__ */ s("tfoot", { children: t });
+}
+function L({ children: t }) {
+  return /* @__PURE__ */ s("tr", { children: t });
 }
-function Ce({ value: t, type: r = "primary", size: n = "medium", weight: a = "normal", wrap: s = "none" }) {
-  const c = "text type-" + r + " size-" + n + " weight-" + a + " wrap-" + s;
-  return /* @__PURE__ */ l.jsx("span", { className: c, children: t });
+function B({ colspan: t, rowspan: e, alignX: n = "left", alignY: a = "center", size: c = "fit", children: r }) {
+  const o = "align-x-" + n + " align-y-" + a + " size-" + c;
+  return /* @__PURE__ */ s("td", { className: o, colSpan: t, rowSpan: e, children: r });
 }
-const Ye = w(function({ name: r, placeholder: n, value: a, size: s = "medium", rows: c, limit: i, onChange: f }, x) {
-  const v = "textarea size-" + s;
-  return /* @__PURE__ */ l.jsx(
+function v({ padding: t = "medium", children: e }) {
+  const n = "table padding-" + t;
+  return /* @__PURE__ */ s("table", { className: n, children: e });
+}
+v.Header = A;
+v.Body = C;
+v.Footer = M;
+v.Row = L;
+v.Cell = B;
+function ct({ value: t, type: e = "primary", size: n = "medium", weight: a = "normal", wrap: c = "none" }) {
+  const r = "text type-" + e + " size-" + n + " weight-" + a + " wrap-" + c;
+  return /* @__PURE__ */ s("span", { className: r, children: t });
+}
+const rt = g(function({ name: e, placeholder: n, defaultValue: a, value: c, size: r = "medium", rows: o, limit: l, onChange: m }, u) {
+  const i = "textarea size-" + r;
+  return /* @__PURE__ */ s(
     "textarea",
     {
-      className: v,
-      name: r,
+      className: i,
+      name: e,
       placeholder: n,
       defaultValue: a,
-      rows: c,
-      ref: x,
-      maxLength: i,
-      onChange: f
+      value: c,
+      rows: o,
+      ref: u,
+      maxLength: l,
+      onChange: m
     }
   );
-}), Ie = w(function({ name: r, placeholder: n, value: a, limit: s, pattern: c, title: i, size: f = "medium", required: x, onChange: v }, m) {
-  const E = "textbox size-" + f;
-  return /* @__PURE__ */ l.jsx(
+}), ot = g(function({ name: e, placeholder: n, defaultValue: a, value: c, limit: r, pattern: o, title: l, type: m = "text", size: u = "medium", required: i, onChange: d }, p) {
+  const f = "textbox size-" + u;
+  return /* @__PURE__ */ s(
     "input",
     {
-      className: E,
-      type: "text",
-      name: r,
+      className: f,
+      type: m,
+      name: e,
       placeholder: n,
       defaultValue: a,
-      maxLength: s,
-      pattern: c,
-      title: i,
-      ref: m,
-      required: x,
-      onChange: v
+      value: c,
+      maxLength: r,
+      pattern: o,
+      title: l,
+      ref: p,
+      required: i,
+      onChange: d
     }
   );
 });
-function ze({ size: t = "large", children: r }) {
+function it({ size: t = "large", children: e }) {
   const n = "title size-" + t;
   switch (t) {
     case "large":
-      return /* @__PURE__ */ l.jsx("h1", { className: n, children: r });
+      return /* @__PURE__ */ s("h1", { className: n, children: e });
     case "medium":
-      return /* @__PURE__ */ l.jsx("h2", { className: n, children: r });
+      return /* @__PURE__ */ s("h2", { className: n, children: e });
     case "small":
-      return /* @__PURE__ */ l.jsx("h3", { className: n, children: r });
+      return /* @__PURE__ */ s("h3", { className: n, children: e });
   }
 }
+function lt({ options: t, selected: e, onChange: n }) {
+  const a = e ?? [...t.keys()][0], c = t.get(a) ?? "", [r, o] = b(a), [l, m] = b(c), [u, i] = b(!1), d = () => {
+    i(!u);
+  }, p = (f) => {
+    const N = f.target, S = r, x = N.getAttribute("data-key") ?? a, T = t.get(x) ?? c;
+    o(x), m(T), i(!1), n && n(S, x);
+  };
+  return /* @__PURE__ */ h("div", { className: "dropdown", children: [
+    /* @__PURE__ */ s("div", { className: u ? "text active" : "text", onClick: d, children: l }),
+    u && /* @__PURE__ */ s("div", { className: "options", children: Array.from(t).map(([f, N]) => /* @__PURE__ */ s("div", { className: "option", "data-key": f, onClick: p, children: N }, f)) })
+  ] });
+}
+function ut({ selectedId: t, children: e }) {
+  const [n, a] = b(t ?? ""), c = y(() => Array.isArray(e) ? e : [e], [e]), r = y(() => {
+    const l = {};
+    return c.forEach((m) => {
+      const u = m.props.id;
+      l[u] = m;
+    }), l;
+  }, [c]), o = E((l) => {
+    a(l ?? "");
+  });
+  return w(() => {
+    o(t);
+  }, [t, c]), r[n] ?? /* @__PURE__ */ s(k, {});
+}
+function K({ children: t }) {
+  return /* @__PURE__ */ s("div", { className: "tab", children: t });
+}
+function R({ separator: t, selectedId: e, children: n, onChange: a }) {
+  const [c, r] = b(e ?? ""), o = y(() => Array.isArray(n) ? n : [n], [n]), l = y(() => {
+    const i = {};
+    return o.forEach((d) => {
+      const p = d.props.id;
+      i[p] = d;
+    }), i;
+  }, [o]), m = E((i) => {
+    const d = o[0]?.props.id;
+    r(i ?? d);
+  });
+  w(() => {
+    m(e);
+  }, [e, o]);
+  const u = (i) => {
+    a !== void 0 && a(i, c), r(i);
+  };
+  return /* @__PURE__ */ h("div", { className: "tabs", children: [
+    /* @__PURE__ */ s("div", { className: "nav", children: o.map((i) => {
+      const d = i.props.id, p = `tab-${d}`, f = d === c ? "active" : "inactive", N = () => u(i.props.id);
+      return /* @__PURE__ */ s("div", { className: "item " + f, onClick: N, children: i.props.title }, p);
+    }) }),
+    t !== void 0 ? /* @__PURE__ */ s("div", { className: "separator", children: t }) : null,
+    /* @__PURE__ */ s("div", { className: "content", children: l[c] })
+  ] });
+}
+R.Tab = K;
+function mt({ children: t }) {
+  return /* @__PURE__ */ s("div", { className: "mtds", children: t });
+}
 export {
-  pe as Avatar,
-  Ee as Border,
-  ve as Button,
-  xe as Cell,
-  be as ClickArea,
-  _e as Column,
-  fe as Dropdown,
-  je as Form,
-  Re as Grid,
-  ge as Icon,
-  Te as Image,
-  Ne as Input,
-  he as Label,
-  ye as Link,
-  ke as Modal,
-  we as Panel,
-  Ae as Paragraph,
-  Se as Row,
-  Oe as Ruler,
-  Pe as Select,
-  $e as Spinner,
-  me as Tab,
-  de as Tabs,
-  Ce as Text,
-  Ye as TextArea,
-  Ie as TextBox,
-  ze as Title
+  O as Avatar,
+  F as Border,
+  j as Button,
+  I as Cell,
+  P as CheckBox,
+  G as ClickArea,
+  q as Column,
+  H as DateTime,
+  mt as DesignSystem,
+  lt as Dropdown,
+  J as Form,
+  Q as Grid,
+  U as Icon,
+  V as Image,
+  W as Input,
+  X as Label,
+  Y as Link,
+  Z as Modal,
+  ut as ModalManager,
+  _ as Panel,
+  tt as Paragraph,
+  et as Row,
+  nt as Ruler,
+  at as Select,
+  st as Spinner,
+  v as Table,
+  R as Tabs,
+  ct as Text,
+  rt as TextArea,
+  ot as TextBox,
+  it as Title
 };