@maskingtech/designsystem 0.0.1 → 0.0.2

package/dist/mtds.js

@@ -1,30 +1,30 @@
 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() {
+function ce() {
   if (W) return T;
   W = 1;
   var t = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(a, s, c) {
+  function n(a, s, l) {
     var i = null;
-    if (c !== void 0 && (i = "" + c), s.key !== void 0 && (i = "" + s.key), "key" in s) {
-      c = {};
+    if (l !== void 0 && (i = "" + l), s.key !== void 0 && (i = "" + s.key), "key" in s) {
+      l = {};
       for (var f in s)
-        f !== "key" && (c[f] = s[f]);
-    } else c = s;
-    return s = c.ref, {
+        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: c
+      props: l
     };
   }
   return T.Fragment = r, T.jsx = n, T.jsxs = n, T;
 }
 var N = {};
 var U;
-function ce() {
+function le() {
   return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
     function t(e) {
       if (e == null) return null;
@@ -32,11 +32,11 @@ function ce() {
         return e.$$typeof === te ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case R:
+        case g:
           return "Fragment";
         case G:
           return "Profiler";
-        case S:
+        case A:
           return "StrictMode";
         case Z:
           return "Suspense";
@@ -49,21 +49,21 @@ function ce() {
         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:
+          case S:
             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;
+            var c = e.render;
+            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case Q:
-            return o = e.displayName || null, o !== null ? o : t(e.type) || "Memo";
+            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
           case O:
-            o = e._payload, e = e._init;
+            c = e._payload, e = e._init;
             try {
-              return t(e(o));
+              return t(e(c));
             } catch {
             }
         }
@@ -75,27 +75,27 @@ function ce() {
     function n(e) {
       try {
         r(e);
-        var o = !1;
+        var c = !1;
       } catch {
-        o = !0;
+        c = !0;
       }
-      if (o) {
-        o = console;
-        var u = o.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (c) {
+        c = console;
+        var u = c.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return u.call(
-          o,
+          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 === R) return "<>";
+      if (e === g) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === O)
         return "<...>";
       try {
-        var o = t(e);
-        return o ? "<" + o + ">" : "<...>";
+        var c = t(e);
+        return c ? "<" + c + ">" : "<...>";
       } catch {
         return "<...>";
       }
@@ -104,21 +104,21 @@ function ce() {
       var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function l() {
       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;
+        var c = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (c && c.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function f(e, o) {
+    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)",
-          o
+          c
         ));
       }
       u.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -128,16 +128,16 @@ function ce() {
     }
     function x() {
       var e = t(this.type);
-      return L[e] || (L[e] = !0, console.error(
+      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, o, u, d, h, C) {
+    function v(e, c, u, d, h, C) {
       var p = u.ref;
       return e = {
         $$typeof: j,
         type: e,
-        key: o,
+        key: c,
         props: u,
         _owner: d
       }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
@@ -165,8 +165,8 @@ function ce() {
         value: C
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function m(e, o, u, d, h, C) {
-      var p = o.children;
+    function m(e, c, u, d, h, C) {
+      var p = c.children;
       if (p !== void 0)
         if (d)
           if (re(p)) {
@@ -178,12 +178,12 @@ function ce() {
               "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")) {
+      if (I.call(c, "key")) {
         p = t(e);
-        var g = Object.keys(o).filter(function(ne) {
+        var R = Object.keys(c).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(
+        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} />
@@ -192,15 +192,15 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           d,
           p,
-          g,
+          R,
           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) {
+      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 o)
-          Y !== "key" && (u[Y] = o[Y]);
-      } else u = o;
+        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
@@ -219,7 +219,7 @@ React keys must be passed directly to JSX without using spread:
     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() {
+    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 = {
@@ -227,28 +227,28 @@ React keys must be passed directly to JSX without using spread:
         return e();
       }
     };
-    var z, L = {}, D = b.react_stack_bottom_frame.bind(
+    var z, D = {}, L = b.react_stack_bottom_frame.bind(
       b,
-      c
-    )(), F = $(a(c)), M = {};
-    N.Fragment = R, N.jsx = function(e, o, u) {
+      l
+    )(), F = $(a(l)), M = {};
+    N.Fragment = g, N.jsx = function(e, c, u) {
       var d = 1e4 > P.recentlyCreatedOwnerStacks++;
       return m(
         e,
-        o,
+        c,
         u,
         !1,
-        d ? Error("react-stack-top-frame") : D,
+        d ? Error("react-stack-top-frame") : L,
         d ? $(a(e)) : F
       );
-    }, N.jsxs = function(e, o, u) {
+    }, N.jsxs = function(e, c, u) {
       var d = 1e4 > P.recentlyCreatedOwnerStacks++;
       return m(
         e,
-        o,
+        c,
         u,
         !0,
-        d ? Error("react-stack-top-frame") : D,
+        d ? Error("react-stack-top-frame") : L,
         d ? $(a(e)) : F
       );
     };
@@ -256,26 +256,29 @@ React keys must be passed directly to JSX without using spread:
 }
 var q;
 function ie() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? y.exports = le() : y.exports = ce()), y.exports;
+  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 });
 }
-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 = () => {
+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, A = c, R = j.getAttribute("data-key") ?? a, S = t.get(R) ?? s;
-    i(R), x(S), m(!1), n && n(A, R);
+    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__ */ 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)) })
+  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 me({ children: t }) {
-  return /* @__PURE__ */ l.jsx("div", { className: "ds-tabs-tab", children: t });
+function de({ children: t }) {
+  return /* @__PURE__ */ o.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(() => {
+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;
@@ -283,26 +286,26 @@ function de({ separator: t, selectedId: r, children: n, onChange: a }) {
     }), m;
   }, [i]), x = se((m) => {
     const E = i[0]?.props.id;
-    c(m ?? E);
+    l(m ?? E);
   });
   J(() => {
     x(r);
   }, [r, i]);
   const v = (m) => {
-    a !== void 0 && a(m, s), c(m);
+    a !== void 0 && a(m, s), l(m);
   };
-  return /* @__PURE__ */ l.jsxs("div", { className: "tabs", children: [
-    /* @__PURE__ */ l.jsx("div", { className: "nav", children: i.map((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__ */ l.jsx("div", { className: "item " + b, onClick: j, children: m.props.title }, _);
+      return /* @__PURE__ */ o.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] })
+    t !== void 0 ? /* @__PURE__ */ o.jsx("div", { className: "separator", children: t }) : null,
+    /* @__PURE__ */ o.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(
+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(
     "img",
     {
       className: i,
@@ -313,42 +316,42 @@ function pe({ source: t, title: r, alt: n = "Avatar", width: a, height: s, fit:
     }
   );
 }
-function Ee({ type: t = "normal", size: r = "large", padding: n = "large", children: a }) {
+function ve({ 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 });
+  return /* @__PURE__ */ o.jsx("div", { className: s, 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 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 xe({ sizing: t = "fluid", children: r }) {
+function be({ sizing: t = "fluid", children: r }) {
   const n = "cell sizing-" + t;
-  return /* @__PURE__ */ l.jsx("div", { className: n, children: r });
+  return /* @__PURE__ */ o.jsx("div", { className: n, children: r });
 }
-function be({ padding: t = "none", onClick: r, children: n }) {
+function _e({ padding: t = "none", onClick: r, children: n }) {
   const a = "clickarea padding-" + t;
-  return /* @__PURE__ */ l.jsx("div", { className: a, onClick: r, children: n });
+  return /* @__PURE__ */ o.jsx("div", { className: a, onClick: r, 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 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 });
 }
-const je = w(function({ children: r, submitHandler: n }, a) {
-  const s = (c) => {
-    c.preventDefault(), n && n(c.target);
+const ge = w(function({ children: r, submitHandler: n }, a) {
+  const s = (l) => {
+    l.preventDefault(), n && n(l.target);
   };
-  return /* @__PURE__ */ l.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
+  return /* @__PURE__ */ o.jsx("form", { onSubmit: s, className: "form", ref: a, children: r });
 });
 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 });
+  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
 }
-function ge({ type: t }) {
-  return /* @__PURE__ */ l.jsx("span", { className: "icon " + t });
+function Te({ type: t }) {
+  return /* @__PURE__ */ o.jsx("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 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(
     "img",
     {
       className: i,
@@ -359,80 +362,80 @@ function Te({ source: t, title: r, alt: n, width: a, height: s, fit: c = "contai
     }
   );
 }
-function Ne({ label: t, element: r }) {
-  return /* @__PURE__ */ l.jsxs("div", { className: "input", children: [
+function he({ label: t, element: r }) {
+  return /* @__PURE__ */ o.jsxs("div", { className: "input", children: [
     t,
     r
   ] });
 }
-function he({ value: t }) {
-  return /* @__PURE__ */ l.jsx("label", { className: "label", children: t });
+function ye({ value: t }) {
+  return /* @__PURE__ */ o.jsx("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 ke({ url: t, target: r, children: n }) {
+  return /* @__PURE__ */ o.jsx("a", { className: "link", href: t, target: r, children: n });
 }
-function ke({ open: t, sizing: r = "content", 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__ */ l.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ l.jsx("form", { method: "dialog", children: n }) });
+  }, [t]), /* @__PURE__ */ o.jsx("dialog", { ref: a, className: s, children: /* @__PURE__ */ o.jsx("form", { method: "dialog", children: n }) });
 }
-function we({ type: t = "normal", padding: r = "large", children: n }) {
+function Se({ type: t = "normal", padding: r = "large", children: n }) {
   const a = "panel type-" + t + " padding-" + r;
-  return /* @__PURE__ */ l.jsx("div", { className: a, children: n });
+  return /* @__PURE__ */ o.jsx("div", { className: a, children: n });
 }
 function Ae({ size: t = "medium", children: r }) {
   const n = "paragraph size-" + t;
-  return /* @__PURE__ */ l.jsx("p", { className: n, children: r });
+  return /* @__PURE__ */ o.jsx("p", { className: n, children: r });
 }
-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 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 Oe({ direction: t, size: r = "medium" }) {
+function Pe({ direction: t, size: r = "medium" }) {
   const n = "ruler direction-" + t + " size-" + r;
-  return /* @__PURE__ */ l.jsx("div", { className: n });
+  return /* @__PURE__ */ o.jsx("div", { className: n });
 }
-const Pe = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: c }, i) {
+const $e = w(function({ name: r, options: n, value: a, size: s = "medium", onChange: l }, i) {
   const f = "select size-" + s;
-  return /* @__PURE__ */ l.jsx(
+  return /* @__PURE__ */ o.jsx(
     "select",
     {
       className: f,
       name: r,
       defaultValue: a,
-      onChange: c,
+      onChange: l,
       ref: i,
-      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ l.jsx("option", { value: x, children: v }, x))
+      children: Array.from(n).map(([x, v]) => /* @__PURE__ */ o.jsx("option", { value: x, children: v }, x))
     }
   );
 });
-function $e({ active: t = !0 }) {
+function Ce({ active: t = !0 }) {
   const r = "spinner" + (t ? " active" : "");
-  return /* @__PURE__ */ l.jsx("div", { className: r });
+  return /* @__PURE__ */ o.jsx("div", { className: r });
 }
-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 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 });
 }
-const Ye = w(function({ name: r, placeholder: n, value: a, size: s = "medium", rows: c, limit: i, onChange: f }, x) {
+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__ */ l.jsx(
+  return /* @__PURE__ */ o.jsx(
     "textarea",
     {
       className: v,
       name: r,
       placeholder: n,
       defaultValue: a,
-      rows: c,
+      rows: l,
       ref: x,
       maxLength: i,
       onChange: f
     }
   );
-}), Ie = w(function({ name: r, placeholder: n, value: a, limit: s, pattern: c, title: i, size: f = "medium", required: x, onChange: v }, m) {
+}), 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__ */ l.jsx(
+  return /* @__PURE__ */ o.jsx(
     "input",
     {
       className: E,
@@ -441,7 +444,7 @@ const Ye = w(function({ name: r, placeholder: n, value: a, size: s = "medium", r
       placeholder: n,
       defaultValue: a,
       maxLength: s,
-      pattern: c,
+      pattern: l,
       title: i,
       ref: m,
       required: x,
@@ -449,43 +452,44 @@ const Ye = w(function({ name: r, placeholder: n, value: a, size: s = "medium", r
     }
   );
 });
-function ze({ size: t = "large", children: r }) {
+function De({ size: t = "large", children: r }) {
   const n = "title size-" + t;
   switch (t) {
     case "large":
-      return /* @__PURE__ */ l.jsx("h1", { className: n, children: r });
+      return /* @__PURE__ */ o.jsx("h1", { className: n, children: r });
     case "medium":
-      return /* @__PURE__ */ l.jsx("h2", { className: n, children: r });
+      return /* @__PURE__ */ o.jsx("h2", { className: n, children: r });
     case "small":
-      return /* @__PURE__ */ l.jsx("h3", { className: n, children: r });
+      return /* @__PURE__ */ o.jsx("h3", { className: n, children: r });
   }
 }
 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,
+  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,
-  ge as Icon,
-  Te as Image,
-  Ne as Input,
-  he as Label,
-  ye as Link,
-  ke as Modal,
-  we as Panel,
+  Te as Icon,
+  Ne as Image,
+  he as Input,
+  ye as Label,
+  ke as Link,
+  we as Modal,
+  Se 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
+  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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maskingtech/designsystem",
   "private": false,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "build": "vite build",