@fabio.caffarello/react-design-system 1.0.0 → 1.2.1

package/dist/index.js

@@ -1,5 +1,5 @@
 import te from "react";
-var x = { exports: {} }, _ = {};
+var _ = { exports: {} }, p = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,28 +10,28 @@ var x = { exports: {} }, _ = {};
  * LICENSE file in the root directory of this source tree.
  */
 var F;
-function ne() {
-  if (F) return _;
+function ae() {
+  if (F) return p;
   F = 1;
-  var n = Symbol.for("react.transitional.element"), a = Symbol.for("react.fragment");
-  function s(o, c, f) {
-    var m = null;
-    if (f !== void 0 && (m = "" + f), c.key !== void 0 && (m = "" + c.key), "key" in c) {
-      f = {};
-      for (var d in c)
-        d !== "key" && (f[d] = c[d]);
-    } else f = c;
-    return c = f.ref, {
-      $$typeof: n,
-      type: o,
-      key: m,
-      ref: c !== void 0 ? c : null,
-      props: f
+  var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
+  function a(n, s, i) {
+    var b = null;
+    if (i !== void 0 && (b = "" + i), s.key !== void 0 && (b = "" + s.key), "key" in s) {
+      i = {};
+      for (var f in s)
+        f !== "key" && (i[f] = s[f]);
+    } else i = s;
+    return s = i.ref, {
+      $$typeof: t,
+      type: n,
+      key: b,
+      ref: s !== void 0 ? s : null,
+      props: i
     };
   }
-  return _.Fragment = a, _.jsx = s, _.jsxs = s, _;
+  return p.Fragment = o, p.jsx = a, p.jsxs = a, p;
 }
-var E = {};
+var x = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,19 +42,19 @@ var E = {};
  * LICENSE file in the root directory of this source tree.
  */
 var D;
-function ae() {
+function ne() {
   return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
-    function n(e) {
+    function t(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === K ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case R:
+        case E:
           return "Fragment";
-        case V:
+        case q:
           return "Profiler";
-        case J:
+        case U:
           return "StrictMode";
         case X:
           return "Suspense";
@@ -67,100 +67,100 @@ function ae() {
         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 q:
+          case B:
             return "Portal";
-          case G:
+          case V:
             return e.displayName || "Context";
-          case z:
+          case J:
             return (e._context.displayName || "Context") + ".Consumer";
-          case B:
+          case G:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case Z:
-            return r = e.displayName || null, r !== null ? r : n(e.type) || "Memo";
-          case g:
+            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
+          case R:
             r = e._payload, e = e._init;
             try {
-              return n(e(r));
+              return t(e(r));
             } catch {
             }
         }
       return null;
     }
-    function a(e) {
+    function o(e) {
       return "" + e;
     }
-    function s(e) {
+    function a(e) {
       try {
-        a(e);
+        o(e);
         var r = !1;
       } catch {
         r = !0;
       }
       if (r) {
         r = console;
-        var t = r.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return t.call(
+        var l = r.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return l.call(
           r,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          l
-        ), a(e);
+          c
+        ), o(e);
       }
     }
-    function o(e) {
-      if (e === R) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
+    function n(e) {
+      if (e === E) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === R)
         return "<...>";
       try {
-        var r = n(e);
+        var r = t(e);
         return r ? "<" + r + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function c() {
-      var e = T.A;
+    function s() {
+      var e = j.A;
       return e === null ? null : e.getOwner();
     }
-    function f() {
+    function i() {
       return Error("react-stack-top-frame");
     }
-    function m(e) {
+    function b(e) {
       if (A.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function d(e, r) {
-      function t() {
+    function f(e, r) {
+      function l() {
         P || (P = !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)",
           r
         ));
       }
-      t.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: t,
+      l.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: l,
         configurable: !0
       });
     }
-    function b() {
-      var e = n(this.type);
+    function m() {
+      var e = t(this.type);
       return C[e] || (C[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 U(e, r, t, l, h, j) {
-      var u = t.ref;
+    function M(e, r, l, c, h, T) {
+      var d = l.ref;
       return e = {
-        $$typeof: N,
+        $$typeof: O,
         type: e,
         key: r,
-        props: t,
-        _owner: l
-      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        props: l,
+        _owner: c
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: b
+        get: m
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -180,64 +180,64 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: T
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function y(e, r, t, l, h, j) {
-      var u = r.children;
-      if (u !== void 0)
-        if (l)
-          if (ee(u)) {
-            for (l = 0; l < u.length; l++)
-              S(u[l]);
-            Object.freeze && Object.freeze(u);
+    function w(e, r, l, c, h, T) {
+      var d = r.children;
+      if (d !== void 0)
+        if (c)
+          if (ee(d)) {
+            for (c = 0; c < d.length; c++)
+              N(d[c]);
+            Object.freeze && Object.freeze(d);
           } 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 S(u);
+        else N(d);
       if (A.call(r, "key")) {
-        u = n(e);
-        var p = Object.keys(r).filter(function(re) {
+        d = t(e);
+        var g = Object.keys(r).filter(function(re) {
           return re !== "key";
         });
-        l = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", $[u + l] || (p = 0 < p.length ? "{" + p.join(": ..., ") + ": ...}" : "{}", console.error(
+        c = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", I[d + c] || (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} />`,
-          l,
-          u,
-          p,
-          u
-        ), $[u + l] = !0);
+          c,
+          d,
+          g,
+          d
+        ), I[d + c] = !0);
       }
-      if (u = null, t !== void 0 && (s(t), u = "" + t), m(r) && (s(r.key), u = "" + r.key), "key" in r) {
-        t = {};
-        for (var w in r)
-          w !== "key" && (t[w] = r[w]);
-      } else t = r;
-      return u && d(
-        t,
+      if (d = null, l !== void 0 && (a(l), d = "" + l), b(r) && (a(r.key), d = "" + r.key), "key" in r) {
+        l = {};
+        for (var k in r)
+          k !== "key" && (l[k] = r[k]);
+      } else l = r;
+      return d && f(
+        l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), U(
+      ), M(
         e,
-        u,
-        t,
-        c(),
+        d,
+        l,
+        s(),
         h,
-        j
+        T
       );
     }
-    function S(e) {
-      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function N(e) {
+      S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function O(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === N;
+    function S(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
     }
-    var v = te, N = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), z = Symbol.for("react.consumer"), G = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), g = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), T = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, ee = Array.isArray, k = console.createTask ? console.createTask : function() {
+    var v = te, O = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), V = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), j = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, ee = Array.isArray, y = console.createTask ? console.createTask : function() {
       return null;
     };
     v = {
@@ -247,93 +247,93 @@ React keys must be passed directly to JSX without using spread:
     };
     var P, C = {}, Y = v.react_stack_bottom_frame.bind(
       v,
-      f
-    )(), I = k(o(f)), $ = {};
-    E.Fragment = R, E.jsx = function(e, r, t) {
-      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return y(
+      i
+    )(), $ = y(n(i)), I = {};
+    x.Fragment = E, x.jsx = function(e, r, l) {
+      var c = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return w(
         e,
         r,
-        t,
+        l,
         !1,
-        l ? Error("react-stack-top-frame") : Y,
-        l ? k(o(e)) : I
+        c ? Error("react-stack-top-frame") : Y,
+        c ? y(n(e)) : $
       );
-    }, E.jsxs = function(e, r, t) {
-      var l = 1e4 > T.recentlyCreatedOwnerStacks++;
-      return y(
+    }, x.jsxs = function(e, r, l) {
+      var c = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return w(
         e,
         r,
-        t,
+        l,
         !0,
-        l ? Error("react-stack-top-frame") : Y,
-        l ? k(o(e)) : I
+        c ? Error("react-stack-top-frame") : Y,
+        c ? y(n(e)) : $
       );
     };
-  })()), E;
+  })()), x;
 }
 var L;
 function oe() {
-  return L || (L = 1, process.env.NODE_ENV === "production" ? x.exports = ne() : x.exports = ae()), x.exports;
+  return L || (L = 1, process.env.NODE_ENV === "production" ? _.exports = ae() : _.exports = ne()), _.exports;
 }
-var i = oe();
-function ce({ variant: n = "info", className: a, ...s }) {
-  const o = [a || ""];
-  switch (n) {
+var u = oe();
+function ce({ variant: t = "info", className: o, ...a }) {
+  const n = [o || ""];
+  switch (t) {
     case "warning": {
-      o.push("bg-yellow-100 text-yellow-800 border-yellow-500");
+      n.push("bg-yellow-100 text-yellow-800 border-yellow-500");
       break;
     }
     case "error": {
-      o.push("bg-red-100 text-red-800 border-red-500");
+      n.push("bg-red-100 text-red-800 border-red-500");
       break;
     }
     default:
     case "info": {
-      o.push("bg-blue-100 text-blue-800 border-blue-500");
+      n.push("bg-blue-100 text-blue-800 border-blue-500");
       break;
     }
   }
-  return /* @__PURE__ */ i.jsx(
+  return /* @__PURE__ */ u.jsx(
     "div",
     {
       role: "alert",
-      className: `border px-4 py-2 rounded-lg ${o.join(" ")}`,
-      ...s
+      className: `border px-4 py-2 rounded-lg ${n.join(" ")}`,
+      ...a
     }
   );
 }
 function se({
-  variant: n,
-  bold: a,
-  italic: s,
-  className: o,
-  as: c,
-  color: f,
-  ...m
+  variant: t,
+  bold: o,
+  italic: a,
+  className: n,
+  as: s,
+  color: i,
+  ...b
 }) {
-  const d = [o];
-  let b;
-  if (c)
-    b = c;
+  const f = [n];
+  let m;
+  if (s)
+    m = s;
   else
-    switch (n) {
+    switch (t) {
       case "heading":
-        b = "h2";
+        m = "h2";
         break;
       case "list":
-        b = "li";
+        m = "li";
         break;
       case "paragraph":
       default:
-        b = "p";
+        m = "p";
         break;
     }
-  return a && d.push("font-bold"), s && d.push("italic"), f && d.push(`text-${f}`), /* @__PURE__ */ i.jsx(b, { className: d.join(" "), ...m });
+  return o && f.push("font-bold"), a && f.push("italic"), i && f.push(`text-${i}`), /* @__PURE__ */ u.jsx(m, { className: f.join(" "), ...b });
 }
-function le({ className: n, ...a }) {
-  const s = [
-    n,
+function le({ className: t, ...o }) {
+  const a = [
+    t,
     "px-large",
     "border",
     "border-1",
@@ -343,68 +343,218 @@ function le({ className: n, ...a }) {
     "h-form-element",
     "text-base"
   ];
-  return /* @__PURE__ */ i.jsx("input", { className: s.join(" "), ...a });
+  return /* @__PURE__ */ u.jsx("input", { className: a.join(" "), ...o });
 }
 function W({
-  className: n,
-  variant: a = "regular",
-  ...s
+  className: t,
+  variant: o = "regular",
+  ...a
 }) {
-  const o = [
-    n,
+  const n = [
+    t,
     "rounded",
     "h-form-element",
     "lh-form-element",
     "px-large",
     "text-base"
   ];
-  switch (a) {
+  switch (o) {
     case "error":
-      o.push("bg-red-light", "text-red-dark", "font-bold");
+      n.push("bg-red-light", "text-red-dark", "font-bold");
       break;
     case "secondary":
-      o.push("bg-transparent", "text-grey-minor", "px-0");
+      n.push("bg-transparent", "text-grey-minor", "px-0");
       break;
     case "regular":
     default:
-      o.push("bg-blue-light", "text-blue-dark", "font-bold");
+      n.push("bg-blue-light", "text-blue-dark", "font-bold");
       break;
   }
-  return /* @__PURE__ */ i.jsx("button", { className: o.join(" "), ...s });
+  return /* @__PURE__ */ u.jsx("button", { className: n.join(" "), ...a });
 }
-function ue({ className: n, ...a }) {
-  const s = [n, "p-large", "bg-bg", "rounded", "shadow-card"];
-  return /* @__PURE__ */ i.jsx("div", { className: s.join(" "), ...a });
+function ie({ className: t, ...o }) {
+  const a = [t, "p-large", "bg-bg", "rounded", "shadow-card"];
+  return /* @__PURE__ */ u.jsx("div", { className: a.join(" "), ...o });
 }
-function M({ label: n, ...a }) {
-  return a.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ i.jsxs("div", { className: "mb-medium grid gap-small", children: [
-    /* @__PURE__ */ i.jsx(se, { as: "label", htmlFor: a.id, className: "cursor-pointer", children: n }),
-    /* @__PURE__ */ i.jsx(le, { ...a })
-  ] });
+function de({
+  variant: t = "neutral",
+  className: o = "",
+  children: a,
+  ...n
+}) {
+  const s = [
+    "inline-flex",
+    "items-center",
+    "px-2",
+    "py-1",
+    "rounded",
+    "text-xs",
+    "font-medium",
+    "border"
+  ], i = {
+    success: "bg-green-100 text-green-800 border-green-500",
+    warning: "bg-yellow-100 text-yellow-800 border-yellow-500",
+    error: "bg-red-100 text-red-800 border-red-500",
+    info: "bg-blue-100 text-blue-800 border-blue-500",
+    neutral: "bg-gray-100 text-gray-800 border-gray-500"
+  }, b = [
+    ...s,
+    i[t],
+    o
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u.jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": typeof a == "string" ? a : void 0,
+      className: b,
+      ...n,
+      children: a
+    }
+  );
 }
 function fe({
-  onForgotPasswordClick: n,
-  className: a,
+  options: t,
+  placeholder: o,
+  error: a = !1,
+  className: n = "",
   ...s
 }) {
-  return /* @__PURE__ */ i.jsx(ue, { className: a, children: /* @__PURE__ */ i.jsxs(
-    "form",
+  const i = [
+    "block",
+    "w-full",
+    "rounded",
+    "h-form-element",
+    "px-large",
+    "border",
+    "text-base",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2"
+  ], b = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", f = [
+    ...i,
+    b,
+    n
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u.jsxs(
+    "select",
     {
+      className: f,
+      "aria-invalid": a,
+      "aria-describedby": a ? `${s.id}-error` : void 0,
       ...s,
-      onSubmit: (o) => {
-        o.preventDefault(), s.onSubmit && s.onSubmit(o);
+      children: [
+        o && /* @__PURE__ */ u.jsx("option", { value: "", disabled: !0, children: o }),
+        t.map((m) => /* @__PURE__ */ u.jsx(
+          "option",
+          {
+            value: m.value,
+            disabled: m.disabled,
+            children: m.label
+          },
+          m.value
+        ))
+      ]
+    }
+  );
+}
+function be({
+  error: t = !1,
+  resize: o = "vertical",
+  className: a = "",
+  ...n
+}) {
+  const s = [
+    "block",
+    "w-full",
+    "rounded",
+    "px-large",
+    "py-medium",
+    "border",
+    "text-base",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2"
+  ], i = {
+    none: "resize-none",
+    both: "resize",
+    horizontal: "resize-x",
+    vertical: "resize-y"
+  }, b = t ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", f = [
+    ...s,
+    i[o],
+    b,
+    a
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u.jsx(
+    "textarea",
+    {
+      className: f,
+      "aria-invalid": t,
+      "aria-describedby": t && n.id ? `${n.id}-error` : void 0,
+      ...n
+    }
+  );
+}
+function z({ label: t, ...o }) {
+  return o.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ u.jsxs("div", { className: "mb-medium grid gap-small", children: [
+    /* @__PURE__ */ u.jsx(se, { as: "label", htmlFor: o.id, className: "cursor-pointer", children: t }),
+    /* @__PURE__ */ u.jsx(le, { ...o })
+  ] });
+}
+function me({
+  variant: t = "default",
+  padding: o = "medium",
+  className: a = "",
+  children: n,
+  ...s
+}) {
+  const i = [
+    "bg-white",
+    "rounded-lg",
+    "border",
+    "border-gray-200",
+    "shadow-sm"
+  ], b = {
+    default: "",
+    hover: "hover:shadow-md transition-shadow cursor-pointer",
+    selected: "border-indigo-500 shadow-md"
+  }, f = {
+    none: "",
+    small: "p-2",
+    medium: "p-4",
+    large: "p-6"
+  }, m = [
+    ...i,
+    b[t],
+    f[o],
+    a
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u.jsx("div", { className: m, ...s, children: n });
+}
+function ge({
+  onForgotPasswordClick: t,
+  className: o,
+  ...a
+}) {
+  return /* @__PURE__ */ u.jsx(ie, { className: o, children: /* @__PURE__ */ u.jsxs(
+    "form",
+    {
+      ...a,
+      onSubmit: (n) => {
+        n.preventDefault(), a.onSubmit && a.onSubmit(n);
       },
       children: [
-        /* @__PURE__ */ i.jsx(
-          M,
+        /* @__PURE__ */ u.jsx(
+          z,
           {
             id: "login-email",
             label: "Your email",
             placeholder: "myname@email.com"
           }
         ),
-        /* @__PURE__ */ i.jsx(
-          M,
+        /* @__PURE__ */ u.jsx(
+          z,
           {
             id: "login-password",
             label: "Your password",
@@ -412,28 +562,32 @@ function fe({
             type: "password"
           }
         ),
-        /* @__PURE__ */ i.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ i.jsx(
+        /* @__PURE__ */ u.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ u.jsx(
             W,
             {
               variant: "secondary",
               type: "button",
-              onClick: n,
+              onClick: t,
               children: "Forgot password?"
             }
           ),
-          /* @__PURE__ */ i.jsx(W, { variant: "regular", type: "submit", children: "Sign in" })
+          /* @__PURE__ */ u.jsx(W, { variant: "regular", type: "submit", children: "Sign in" })
         ] })
       ]
     }
   ) });
 }
 export {
-  ue as BoxWrapper,
+  de as Badge,
+  ie as BoxWrapper,
   W as Button,
+  me as Card,
   ce as Info,
   le as Input,
-  M as InputWithLabel,
-  fe as LoginBox,
-  se as Text
+  z as InputWithLabel,
+  ge as LoginBox,
+  fe as Select,
+  se as Text,
+  be as Textarea
 };