mainstack-design-system 0.3.2 → 0.3.3

package/build/mainstack-design-system.js

@@ -47484,10 +47484,7 @@ const Cf = {
         outline: b ? "3px solid" : `${d ? "3px solid" : "1px solid"}`,
         outlineOffset: b ? "-3px" : `${d ? "-3px" : "-1px"}`,
         _hover: {
-          bg: b ? "none" : oe.gray50,
-          outline: "3px solid",
-          outlineColor: d ? oe.red500 : oe.black300,
-          outlineOffset: "-3px"
+          bg: b ? "none" : oe.gray50
         },
         outlineColor: b ? `${d ? oe.red500 : oe.black300}` : `${d ? oe.red500 : oe.gray50}`,
         borderRadius: "16px",
@@ -47511,7 +47508,13 @@ const Cf = {
                   a && /* @__PURE__ */ f(v1, { mt: "4px", children: a })
                 ] }),
                 /* @__PURE__ */ Q(n1, { alignItems: "center", ml: "auto", children: [
-                  l === "has-toggle" ? /* @__PURE__ */ f(X1e, { onChange: p, isChecked: g }) : l === "has-delete" ? /* @__PURE__ */ f(
+                  l === "has-toggle" ? /* @__PURE__ */ f(
+                    X1e,
+                    {
+                      onChange: p,
+                      isChecked: g
+                    }
+                  ) : l === "has-delete" ? /* @__PURE__ */ f(
                     ry,
                     {
                       fontSize: "16px",
@@ -47596,6 +47599,7 @@ const Cf = {
     borderRadius: "100%",
     width: Co[e.size].size,
     height: Co[e.size].size,
+    objectFit: "cover",
     fallback: (e == null ? void 0 : e.fallback) === "store" ? /* @__PURE__ */ f(
       Z4,
       {
@@ -47728,7 +47732,7 @@ const Cf = {
           an,
           {
             color: oe.black300,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "16px",
             fontWeight: 600,
             lineHeight: "20px",
@@ -47741,7 +47745,7 @@ const Cf = {
           an,
           {
             color: oe.gray400,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "14px",
             fontWeight: 500,
             lineHeight: "16px",
@@ -47808,11 +47812,11 @@ const Cf = {
         gap: "10px",
         width: "full",
         children: [
-          /* @__PURE__ */ f(
+          n && /* @__PURE__ */ f(
             an,
             {
               color: e ? oe.black300 : oe.gray400,
-              fontFamily: "Degular",
+              fontFamily: (i == null ? void 0 : i.fontFamily) ?? "Degular",
               fontSize: "16px",
               fontWeight: 600,
               lineHeight: "16px",
@@ -48158,7 +48162,7 @@ const Cf = {
           an,
           {
             color: oe.black300,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "16px",
             fontWeight: 600,
             lineHeight: "20px",
@@ -48171,7 +48175,7 @@ const Cf = {
           an,
           {
             color: oe.gray400,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "14px",
             fontWeight: 500,
             lineHeight: "16px",
@@ -48249,7 +48253,7 @@ const Cf = {
           an,
           {
             color: oe.black300,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "16px",
             fontWeight: 600,
             lineHeight: "20px",
@@ -48262,7 +48266,7 @@ const Cf = {
           an,
           {
             color: oe.gray400,
-            fontFamily: "Degular",
+            fontFamily: (e == null ? void 0 : e.fontFamily) ?? "Degular",
             fontSize: "14px",
             fontWeight: 500,
             lineHeight: "16px",
@@ -51597,7 +51601,7 @@ const Ub = {
     // ...styles,
     display: "flex",
     height: "auto",
-    fontFamily: "Degular",
+    fontFamily: "inherit",
     fontWeight: 500,
     fontSize: "1rem",
     lineHeight: "24px",
@@ -51642,7 +51646,7 @@ const Ub = {
     padding: "6px 12px 6px 20px"
   }),
   multiValueLabel: (e) => ({
-    fontFamily: "Degular",
+    fontFamily: "inherit",
     fontWeight: 500,
     fontSize: "0.875rem",
     letterSpacing: "-0.0125rem",
@@ -51717,21 +51721,22 @@ const Ub = {
   CustomOption: y,
   CustomMultiValue: b,
   disabled: x,
-  noOptionsMessage: _
+  noOptionsMessage: _,
+  fontFamily: T
 }) => {
-  const T = {}, k = y, M = b;
-  k && (T.Option = k), M && (T.MultiValue = M);
-  const L = Lt(
+  const k = {}, M = y, L = b;
+  M && (k.Option = M), L && (k.MultiValue = L);
+  const I = Lt(
     null
   );
-  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: "Degular", fontWeight: 500, children: [
+  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: T ?? "Degular", fontWeight: 500, children: [
     e && /* @__PURE__ */ f(
       dc,
       {
         fontSize: "1rem",
         lineHeight: "1.25rem",
         fontWeight: 600,
-        fontFamily: "Degular",
+        fontFamily: T ?? "Degular",
         letterSpacing: "-0.004rem",
         mb: "12px",
         htmlFor: n,
@@ -51746,19 +51751,19 @@ const Ub = {
         isClearable: v,
         defaultInputValue: m,
         value: c,
-        onChange: (I) => {
-          var E;
-          d && (d(I), (E = L == null ? void 0 : L.current) == null || E.blur());
+        onChange: (E) => {
+          var O;
+          d && (d(E), (O = I == null ? void 0 : I.current) == null || O.blur());
         },
-        ref: L,
-        onBlur: (I) => l && l(I),
+        ref: I,
+        onBlur: (E) => l && l(E),
         components: {
           ClearIndicator: xI,
           DropdownIndicator: jb,
           IndicatorSeparator: kI,
           MultiValueRemove: SI,
           // IndicatorsContainer,
-          ...T
+          ...k
         },
         id: n,
         options: p,
@@ -51787,32 +51792,33 @@ const Ub = {
   CustomOption: y,
   CustomMultiValue: b,
   disabled: x,
-  noOptionsMessage: _
+  noOptionsMessage: _,
+  fontFamily: T
 }) => {
-  const [T, k] = Et(p), M = {};
+  const [k, M] = Et(p), L = {};
   if (v) {
-    const O = y, P = b;
-    O && (M.Option = O), P && (M.MultiValue = P);
+    const P = y, H = b;
+    P && (L.Option = P), H && (L.MultiValue = H);
   }
-  const L = (O) => {
-    const P = {
-      label: O,
-      value: O.toLowerCase().replace(/\W/g, "")
+  const I = (P) => {
+    const H = {
+      label: P,
+      value: P.toLowerCase().replace(/\W/g, "")
     };
-    k((H) => [...H, P]), d && d(v ? [...c, P] : P);
-  }, I = (O) => {
-    O.keyCode === 188 && (O.preventDefault(), L(O.target.value));
-  }, E = Lt(
+    M((N) => [...N, H]), d && d(v ? [...c, H] : H);
+  }, E = (P) => {
+    P.keyCode === 188 && (P.preventDefault(), I(P.target.value));
+  }, O = Lt(
     null
   );
-  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: "Degular", fontWeight: 500, children: [
+  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: T ?? "Degular", fontWeight: 500, children: [
     e && /* @__PURE__ */ f(
       dc,
       {
         fontSize: "1rem",
         lineHeight: "1.25rem",
         fontWeight: 600,
-        fontFamily: "Degular",
+        fontFamily: T ?? "Degular",
         letterSpacing: "-0.004rem",
         mb: "12px",
         htmlFor: n,
@@ -51825,14 +51831,14 @@ const Ub = {
       {
         isMulti: v,
         isClearable: !0,
-        onChange: (O) => {
-          var P, H;
-          d && (v ? (d(O), (P = E == null ? void 0 : E.current) == null || P.blur()) : (d(O), (H = E == null ? void 0 : E.current) == null || H.blur()));
-        },
-        ref: E,
-        onBlur: (O) => l && l(O),
-        onKeyDown: I,
-        onCreateOption: L,
+        onChange: (P) => {
+          var H, N;
+          d && (v ? (d(P), (H = O == null ? void 0 : O.current) == null || H.blur()) : (d(P), (N = O == null ? void 0 : O.current) == null || N.blur()));
+        },
+        ref: O,
+        onBlur: (P) => l && l(P),
+        onKeyDown: E,
+        onCreateOption: I,
         options: p,
         value: c,
         id: n,
@@ -51847,12 +51853,21 @@ const Ub = {
           DropdownIndicator: jb,
           IndicatorSeparator: kI,
           MultiValueRemove: SI,
-          ...M
+          ...L
         },
         noOptionsMessage: () => _ ?? "No options"
       }
     ),
-    v && /* @__PURE__ */ f(Ya, { size: "xxs", color: oe.gray400, mt: "8px", children: "Comma seperated" })
+    v && /* @__PURE__ */ f(
+      Ya,
+      {
+        size: "xxs",
+        color: oe.gray400,
+        mt: "8px",
+        fontFamily: T ?? "Degular",
+        children: "Comma seperated"
+      }
+    )
   ] });
 };
 var oie = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
@@ -53698,23 +53713,24 @@ const die = (kL = lg == null ? void 0 : lg.sort((e, n) => e.name.localeCompare(n
   label: a = "Country",
   valueType: i = "full",
   placeholder: l = "Select your country",
-  options: d = die
+  options: d = die,
+  fontFamily: c
 }) => {
-  var p, v;
-  const c = (g, y) => {
-    const b = d == null ? void 0 : d.filter(
-      (x) => x.label.toLowerCase().includes(g.toLowerCase())
+  var v, g;
+  const m = (y, b) => {
+    const x = d == null ? void 0 : d.filter(
+      (_) => _.label.toLowerCase().includes(y.toLowerCase())
     );
-    y(b);
-  }, m = Lt(null);
-  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: "Degular", fontWeight: 500, children: [
+    b(x);
+  }, p = Lt(null);
+  return /* @__PURE__ */ Q(v1, { w: "full", fontFamily: c ?? "Degular", fontWeight: 500, children: [
     a && /* @__PURE__ */ f(
       dc,
       {
         fontSize: "1rem",
         lineHeight: "1.25rem",
         fontWeight: 600,
-        fontFamily: "Degular",
+        fontFamily: c ?? "Degular",
         letterSpacing: "-0.004rem",
         mb: "12px",
         htmlFor: "country",
@@ -53729,7 +53745,7 @@ const die = (kL = lg == null ? void 0 : lg.sort((e, n) => e.name.localeCompare(n
           IndicatorSeparator: () => null
           // Option: CustomOption,
         },
-        loadOptions: c,
+        loadOptions: m,
         cacheOptions: !0,
         defaultOptions: d,
         id: "country",
@@ -53737,15 +53753,15 @@ const die = (kL = lg == null ? void 0 : lg.sort((e, n) => e.name.localeCompare(n
         styles: Ub,
         formatOptionLabel: cie,
         name: "country",
-        onChange: (g) => {
-          var y;
-          n && (n(i === "code" ? g : g == null ? void 0 : g.value), (y = m == null ? void 0 : m.current) == null || y.blur());
+        onChange: (y) => {
+          var b;
+          n && (n(i === "code" ? y : y == null ? void 0 : y.value), (b = p == null ? void 0 : p.current) == null || b.blur());
         },
-        ref: m,
+        ref: p,
         value: e ? {
           value: e,
-          abr: (p = d == null ? void 0 : d.find((g) => (g == null ? void 0 : g.value) === e)) == null ? void 0 : p.abr,
-          flag: (v = d == null ? void 0 : d.find((g) => (g == null ? void 0 : g.value) === e)) == null ? void 0 : v.flag
+          abr: (v = d == null ? void 0 : d.find((y) => (y == null ? void 0 : y.value) === e)) == null ? void 0 : v.abr,
+          flag: (g = d == null ? void 0 : d.find((y) => (y == null ? void 0 : y.value) === e)) == null ? void 0 : g.flag
         } : null
       }
     )
@@ -55099,9 +55115,10 @@ const $9e = ({
   placeholder: i,
   label: l,
   id: d,
-  subtext: c
+  subtext: c,
+  fontFamily: m
 }) => {
-  const m = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  const p = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
 	<mask id="mask0_1047_15277" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
 	<rect width="20" height="20" fill="#C4C4C4"/>
 	</mask>
@@ -55111,39 +55128,57 @@ const $9e = ({
 	</svg>`;
   return d1(() => {
     if (window) {
-      const p = document.querySelector(".phone_container_class .arrow");
-      p && (p.innerHTML = m);
+      const v = document.querySelector(".phone_container_class .arrow");
+      v && (v.innerHTML = p);
     }
-  }, []), /* @__PURE__ */ Q(v1, { w: "full", fontFamily: "Degular", fontWeight: 500, className: "ms-ds", children: [
-    l && /* @__PURE__ */ f(
-      dc,
-      {
-        fontSize: "1rem",
-        lineHeight: "1.25rem",
-        fontWeight: 600,
-        fontFamily: "Degular",
-        letterSpacing: "-0.004rem",
-        mb: "12px",
-        htmlFor: d ?? "",
-        children: l
-      }
-    ),
-    /* @__PURE__ */ f(
-      hie,
-      {
-        enableSearch: a,
-        countryCodeEditable: !1,
-        value: e,
-        onChange: n,
-        containerClass: "phone-input-container phone_container_class",
-        placeholder: i,
-        inputClass: "phone_input",
-        buttonClass: "phone_country_button",
-        dropdownClass: "phone_country_dropdown"
-      }
-    ),
-    c && /* @__PURE__ */ f(Ya, { size: "xxs", color: oe.gray400, mt: "8px", children: c })
-  ] });
+  }, []), /* @__PURE__ */ Q(
+    v1,
+    {
+      w: "full",
+      fontFamily: m ?? "Degular",
+      fontWeight: 500,
+      className: "ms-ds",
+      children: [
+        l && /* @__PURE__ */ f(
+          dc,
+          {
+            fontSize: "1rem",
+            lineHeight: "1.25rem",
+            fontWeight: 600,
+            fontFamily: m ?? "Degular",
+            letterSpacing: "-0.004rem",
+            mb: "12px",
+            htmlFor: d ?? "",
+            children: l
+          }
+        ),
+        /* @__PURE__ */ f(
+          hie,
+          {
+            enableSearch: a,
+            countryCodeEditable: !1,
+            value: e,
+            onChange: n,
+            containerClass: "phone-input-container phone_container_class",
+            placeholder: i,
+            inputClass: "phone_input",
+            buttonClass: "phone_country_button",
+            dropdownClass: "phone_country_dropdown"
+          }
+        ),
+        c && /* @__PURE__ */ f(
+          Ya,
+          {
+            size: "xxs",
+            color: oe.gray400,
+            mt: "8px",
+            fontFamily: m ?? "Degular",
+            children: c
+          }
+        )
+      ]
+    }
+  );
 }, G9e = ({
   label: e,
   name: n,
@@ -55160,14 +55195,15 @@ const $9e = ({
   type: b,
   width: x,
   disabled: _,
-  ...T
+  fontFamily: T,
+  ...k
 }) => {
-  const [k, M] = Et(!1);
+  const [M, L] = Et(!1);
   return /* @__PURE__ */ Q(v1, { w: x || "full", children: [
     /* @__PURE__ */ f(
       an,
       {
-        fontFamily: "Degular",
+        fontFamily: T ?? "Degular",
         fontSize: "16px",
         lineHeight: "20px",
         letterSpacing: "-0.064px",
@@ -55179,7 +55215,7 @@ const $9e = ({
       }
     ),
     /* @__PURE__ */ Q(wh, { children: [
-      b === "password" && /* @__PURE__ */ f(V9, { py: "24px", children: /* @__PURE__ */ f(v1, { onClick: () => M((L) => !L), children: k ? /* @__PURE__ */ f(
+      b === "password" && /* @__PURE__ */ f(V9, { py: "24px", children: /* @__PURE__ */ f(v1, { onClick: () => L((I) => !I), children: M ? /* @__PURE__ */ f(
         ane,
         {
           style: {
@@ -55208,7 +55244,7 @@ const $9e = ({
           bg: oe.white100,
           borderRadius: "12px",
           border: "none",
-          fontFamily: "Degular",
+          fontFamily: T ?? "Degular",
           fontSize: "16px",
           lineHeight: "24px",
           letterSpacing: "-0.2px",
@@ -55230,28 +55266,45 @@ const $9e = ({
           },
           py: "24px",
           px: "16px",
-          type: b === "password" && !k ? "password" : b === "password" && k ? "text" : b,
+          type: b === "password" && !M ? "password" : b === "password" && M ? "text" : b,
           _placeholder: { color: `${oe.gray200}` },
           width: "100%",
           disabled: _,
           _disabled: {
             color: `${oe.gray200}`
           },
-          ...T
+          ...k
         }
       )
     ] }),
     /* @__PURE__ */ f(v1, { mt: "8px", children: v && g ? /* @__PURE__ */ Q(n1, { alignItems: "center", gap: "6px", children: [
       /* @__PURE__ */ f(Hb, { color: oe.green600 }),
-      /* @__PURE__ */ f(Ya, { color: oe.green600, size: "xxs", children: g })
+      /* @__PURE__ */ f(
+        Ya,
+        {
+          color: oe.green600,
+          size: "xxs",
+          fontFamily: T ?? "Degular",
+          children: g
+        }
+      )
     ] }) : m && p ? /* @__PURE__ */ Q(n1, { alignItems: "center", gap: "6px", children: [
       /* @__PURE__ */ f(Bf, { color: oe.red500 }),
-      /* @__PURE__ */ f(Ya, { color: oe.red500, size: "xxs", children: p })
+      /* @__PURE__ */ f(
+        Ya,
+        {
+          color: oe.red500,
+          size: "xxs",
+          fontFamily: T ?? "Degular",
+          children: p
+        }
+      )
     ] }) : y ? /* @__PURE__ */ f(
       Ya,
       {
         color: _ ? oe.gray200 : oe.gray400,
         size: "xxs",
+        fontFamily: T ?? "Degular",
         children: y
       }
     ) : null })
@@ -63620,7 +63673,8 @@ const Xue = ({
   defaultValue: l,
   placeholder: d,
   onClear: c,
-  ...m
+  fontFamily: m,
+  ...p
 }) => /* @__PURE__ */ Q(wh, { alignItems: "center", children: [
   /* @__PURE__ */ f(kh, { px: "16px", transform: "translateY(-50%)", top: "50%", children: /* @__PURE__ */ f(rne, { color: oe.gray200 }) }),
   a && /* @__PURE__ */ f(
@@ -63645,7 +63699,7 @@ const Xue = ({
       bg: oe.gray50,
       borderRadius: "100px",
       border: "none",
-      fontFamily: "Degular",
+      fontFamily: m ?? "Degular",
       fontSize: "16px",
       lineHeight: "24px",
       letterSpacing: "-0.2px",
@@ -63662,7 +63716,7 @@ const Xue = ({
       type: "text",
       _placeholder: { color: `${oe.gray200}` },
       width: "100%",
-      ...m
+      ...p
     }
   )
 ] }), Y9e = ({
@@ -63678,18 +63732,19 @@ const Xue = ({
   textLimit: v,
   height: g,
   width: y,
-  ...b
+  fontFamily: b,
+  ...x
 }) => {
-  const [x, _] = Et(0), [T, k] = Et(!1), M = (L) => {
-    var E;
-    const I = (E = L == null ? void 0 : L.target) == null ? void 0 : E.value;
-    _(I.length), I.length > (v || 200) ? k(!0) : k(!1);
+  const [_, T] = Et(0), [k, M] = Et(!1), L = (I) => {
+    var O;
+    const E = (O = I == null ? void 0 : I.target) == null ? void 0 : O.value;
+    T(E.length), E.length > (v || 200) ? M(!0) : M(!1);
   };
   return /* @__PURE__ */ Q(v1, { w: y || "full", position: "relative", children: [
     /* @__PURE__ */ f(
       an,
       {
-        fontFamily: "Degular",
+        fontFamily: b ?? "Degular",
         fontSize: "16px",
         lineHeight: "20px",
         letterSpacing: "-0.064px",
@@ -63707,11 +63762,19 @@ const Xue = ({
         top: "38px",
         position: "absolute",
         zIndex: 10,
-        children: /* @__PURE__ */ Q(Ya, { color: oe.gray200, size: "xxs", children: [
-          x,
-          "/",
-          v || 200
-        ] })
+        children: /* @__PURE__ */ Q(
+          Ya,
+          {
+            color: oe.gray200,
+            size: "xxs",
+            fontFamily: b ?? "Degular",
+            children: [
+              _,
+              "/",
+              v || 200
+            ]
+          }
+        )
       }
     ),
     /* @__PURE__ */ f(
@@ -63721,53 +63784,69 @@ const Xue = ({
         id: a,
         value: i,
         defaultValue: d,
-        onChange: (L) => {
-          M(L), l && l(L);
+        onChange: (I) => {
+          L(I), l && l(I);
         },
         placeholder: c || "Type something...",
         bg: oe.white100,
         borderRadius: "12px",
         border: "none",
-        fontFamily: "Degular",
+        fontFamily: b ?? "Degular",
         fontSize: "16px",
         lineHeight: "24px",
         letterSpacing: "-0.2px",
         fontWeight: 500,
-        outlineOffset: m || T ? "-2px" : "-1px",
-        outline: m || T ? "2px solid" : "1px solid",
+        outlineOffset: m || k ? "-2px" : "-1px",
+        outline: m || k ? "2px solid" : "1px solid",
         _placeholder: { color: `${oe.gray200}` },
-        outlineColor: m || T ? oe.red500 : oe.gray50,
+        outlineColor: m || k ? oe.red500 : oe.gray50,
         _focus: {
-          outline: `3px solid ${m || T ? oe.red500 : oe.black300}`,
+          outline: `3px solid ${m || k ? oe.red500 : oe.black300}`,
           outlineOffset: "-3px",
           background: `${oe.white100}`
         },
         _focusVisible: {
-          outline: `3px solid ${m || T ? oe.red500 : oe.black300}`,
+          outline: `3px solid ${m || k ? oe.red500 : oe.black300}`,
           outlineOffset: "-3px",
           background: `${oe.white100}`
         },
         _hover: {
           background: `${oe.gray50}`
         },
-        h: g || "120px",
+        h: g ?? "120px",
         w: "100%",
         px: "16px",
         pt: "30px",
         resize: "none",
-        ...b
+        ...x
       }
     ),
     /* @__PURE__ */ f(v1, { mt: "8px", children: m && p ? /* @__PURE__ */ Q(n1, { alignItems: "center", gap: "6px", children: [
       /* @__PURE__ */ f(Bf, { color: oe.red500 }),
-      /* @__PURE__ */ f(Ya, { color: oe.red500, size: "xxs", children: p })
-    ] }) : T ? /* @__PURE__ */ Q(n1, { alignItems: "center", gap: "6px", children: [
+      /* @__PURE__ */ f(
+        Ya,
+        {
+          color: oe.red500,
+          size: "xxs",
+          fontFamily: b ?? "Degular",
+          children: p
+        }
+      )
+    ] }) : k ? /* @__PURE__ */ Q(n1, { alignItems: "center", gap: "6px", children: [
       /* @__PURE__ */ f(Bf, { color: oe.red500 }),
-      /* @__PURE__ */ Q(Ya, { color: oe.red500, size: "xxs", children: [
-        "Text cannot be more than ",
-        v || 200,
-        " characters long."
-      ] })
+      /* @__PURE__ */ Q(
+        Ya,
+        {
+          color: oe.red500,
+          size: "xxs",
+          fontFamily: b ?? "Degular",
+          children: [
+            "Text cannot be more than ",
+            v || 200,
+            " characters long."
+          ]
+        }
+      )
     ] }) : null })
   ] });
 }, q9e = ({

package/build/src/components/InputFields/Input.d.ts

@@ -16,6 +16,7 @@ export interface IInput extends InputProps {
     hint?: string;
     width?: string;
     disabled?: boolean;
+    fontFamily?: string;
 }
-declare const Input: ({ label, name, id, value, onChange, defaultValue, placeholder, error, errorMessage, success, successMessage, hint, type, width, disabled, ...props }: IInput) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ label, name, id, value, onChange, defaultValue, placeholder, error, errorMessage, success, successMessage, hint, type, width, disabled, fontFamily, ...props }: IInput) => import("react/jsx-runtime").JSX.Element;
 export default Input;

package/build/src/components/InputFields/SearchInput.d.ts

@@ -13,6 +13,7 @@ export interface ISearchInput extends InputProps {
     successMessage?: string;
     hint?: string;
     onClear?: any;
+    fontFamily?: string;
 }
-declare const SearchInput: ({ name, id, value, onChange, defaultValue, placeholder, onClear, ...props }: ISearchInput) => import("react/jsx-runtime").JSX.Element;
+declare const SearchInput: ({ name, id, value, onChange, defaultValue, placeholder, onClear, fontFamily, ...props }: ISearchInput) => import("react/jsx-runtime").JSX.Element;
 export default SearchInput;

package/build/src/components/InputFields/SelectInput/CountrySelect.d.ts

@@ -7,6 +7,7 @@ export interface ICountrySelectProps {
     onChange?: (e: any) => void;
     onBlur?: (e: any) => void;
     value?: any;
+    fontFamily?: string;
 }
-declare const CountrySelect: ({ value, onChange, label, valueType, placeholder, options, }: ICountrySelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const CountrySelect: ({ value, onChange, label, valueType, placeholder, options, fontFamily, }: ICountrySelectProps) => import("react/jsx-runtime").JSX.Element;
 export default CountrySelect;

package/build/src/components/InputFields/SelectInput/PhoneNumberInput.d.ts

@@ -8,6 +8,7 @@ export interface IPhoneNumberInputProps {
     label?: string;
     id?: string;
     subtext?: string | JSX.Element;
+    fontFamily?: string;
 }
-declare const PhoneNumberInput: ({ value, onChange, enableSearch, placeholder, label, id, subtext, }: IPhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+declare const PhoneNumberInput: ({ value, onChange, enableSearch, placeholder, label, id, subtext, fontFamily, }: IPhoneNumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default PhoneNumberInput;

package/build/src/components/InputFields/SelectInput/SelectInput.d.ts

@@ -22,7 +22,8 @@ export interface ISelectInputProps {
     CustomMultiValue?: React.ComponentType<MultiValueProps<any, boolean, GroupBase<any>>>;
     disabled?: boolean;
     noOptionsMessage?: string;
+    fontFamily?: string;
 }
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export declare const SelectInput: ({ label, id, name, placeholder, onBlur, onChange, value, defaultValue, options, isMulti, hideSelectedOptions, CustomOption, CustomMultiValue, disabled, noOptionsMessage, }: ISelectInputProps) => import("react/jsx-runtime").JSX.Element;
-export declare const CreatableSelectInput: ({ label, id, name, placeholder, onBlur, onChange, value, defaultValue, options, isMulti, hideSelectedOptions, CustomOption, CustomMultiValue, disabled, noOptionsMessage, }: ISelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ label, id, name, placeholder, onBlur, onChange, value, defaultValue, options, isMulti, hideSelectedOptions, CustomOption, CustomMultiValue, disabled, noOptionsMessage, fontFamily, }: ISelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CreatableSelectInput: ({ label, id, name, placeholder, onBlur, onChange, value, defaultValue, options, isMulti, hideSelectedOptions, CustomOption, CustomMultiValue, disabled, noOptionsMessage, fontFamily, }: ISelectInputProps) => import("react/jsx-runtime").JSX.Element;

package/build/src/components/InputFields/TextArea.d.ts

@@ -14,6 +14,7 @@ interface ITextArea extends TextareaProps {
     textLimit?: number;
     height?: string;
     width?: string;
+    fontFamily?: string;
 }
-declare const TextArea: ({ label, name, id, value, onChange, defaultValue, placeholder, error, errorMessage, textLimit, height, width, ...props }: ITextArea) => import("react/jsx-runtime").JSX.Element;
+declare const TextArea: ({ label, name, id, value, onChange, defaultValue, placeholder, error, errorMessage, textLimit, height, width, fontFamily, ...props }: ITextArea) => import("react/jsx-runtime").JSX.Element;
 export default TextArea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "type": "module",
   "main": "build/mainstack-design-system.js",
   "types": "build/src/index.d.ts",