@fangzsx/component-library 0.0.35 → 0.0.37

package/dist/Close-pjIlDyCW.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "./createSvgIcon-C0YrvByi.js";
+const c = r(/* @__PURE__ */ o("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close");
+export {
+  c as C
+};

package/dist/KeyboardArrowDown-D4mY-2qw.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { c as r } from "./createSvgIcon-C0YrvByi.js";
+const c = r(/* @__PURE__ */ o("path", {
+  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
+}), "KeyboardArrowDown");
+export {
+  c as K
+};

package/dist/components/Dialog/index.js

@@ -1,33 +1,31 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { c as x } from "../../createSvgIcon-C0YrvByi.js";
+import { jsx as i, jsxs as n } from "react/jsx-runtime";
+import { C as x } from "../../Close-pjIlDyCW.js";
 import { Slide as d, Dialog as u, DialogTitle as g, IconButton as h, DialogContent as D, DialogActions as C } from "@mui/material";
-import { forwardRef as S } from "react";
-const j = x(/* @__PURE__ */ t("path", {
-  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-}), "Close"), y = S(function(i, e) {
-  return /* @__PURE__ */ t(d, { direction: "up", ref: e, ...i });
+import { forwardRef as j } from "react";
+const y = j(function(t, o) {
+  return /* @__PURE__ */ i(d, { direction: "up", ref: o, ...t });
 });
-function v({
-  open: o,
-  onClose: i,
-  title: e,
+function w({
+  open: e,
+  onClose: t,
+  title: o,
   children: l,
   actions: r,
   maxWidth: s = "sm",
   fullWidth: a = !0,
   showCloseButton: p = !0,
-  dividers: c = !0,
-  fullScreen: m = !1,
+  dividers: m = !0,
+  fullScreen: c = !1,
   slideTransition: f = !1
 }) {
   return /* @__PURE__ */ n(
     u,
     {
-      open: o,
-      onClose: i,
+      open: e,
+      onClose: t,
       maxWidth: s,
       fullWidth: a,
-      fullScreen: m,
+      fullScreen: c,
       scroll: "paper",
       slots: f ? { transition: y } : void 0,
       sx: {
@@ -49,23 +47,23 @@ function v({
           fontSize: "19px",
           pr: 1
         }, children: [
-          e,
-          p && /* @__PURE__ */ t(
+          o,
+          p && /* @__PURE__ */ i(
             h,
             {
-              onClick: i,
+              onClick: t,
               size: "small",
               sx: { ml: 2 },
-              children: /* @__PURE__ */ t(j, {})
+              children: /* @__PURE__ */ i(x, {})
             }
           )
         ] }),
-        /* @__PURE__ */ t(D, { dividers: c, children: l }),
-        r && /* @__PURE__ */ t(C, { sx: { px: 3, py: 2 }, children: r })
+        /* @__PURE__ */ i(D, { dividers: m, children: l }),
+        r && /* @__PURE__ */ i(C, { sx: { px: 3, py: 2 }, children: r })
       ]
     }
   );
 }
 export {
-  v as ScrollableDialog
+  w as ScrollableDialog
 };

package/dist/components/DropdownOptions/index.js

@@ -1,23 +1,24 @@
-import { jsx as i, jsxs as E } from "react/jsx-runtime";
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
 import * as T from "react";
-import { useState as V, useCallback as q } from "react";
-import { a as A, F as _ } from "../../FormHelperText-B-xlmRr4.js";
-import { L as N, a as J, S as K } from "../../Select-BSsJnv6h.js";
-import { a as $, g as Q, P as o } from "../../generateUtilityClasses-BCID9NF1.js";
-import { u as X, s as Y, c as F, a as Z, r as ee, m as oe } from "../../DefaultPropsProvider-DVX_ssOt.js";
-import { u as te } from "../../useTimeout-UzNJH-cm.js";
-import { u as re } from "../../useForkRef-9kN4DArm.js";
-import { B as se } from "../../ButtonBase-CSQZHD_g.js";
-const H = $("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), P = $("MuiListItemIcon", ["root", "alignItemsFlexStart"]), D = $("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
-function ae(e) {
-  return Q("MuiMenuItem", e);
+import { useState as V, useCallback as W } from "react";
+import { K as q } from "../../KeyboardArrowDown-D4mY-2qw.js";
+import { a as K, F as _ } from "../../FormHelperText-B-xlmRr4.js";
+import { L as N, a as J, S as Q } from "../../Select-BSsJnv6h.js";
+import { a as w, g as X, P as o } from "../../generateUtilityClasses-BCID9NF1.js";
+import { u as Y, s as Z, c as F, a as ee, r as oe, m as te } from "../../DefaultPropsProvider-DVX_ssOt.js";
+import { u as re } from "../../useTimeout-UzNJH-cm.js";
+import { u as se } from "../../useForkRef-9kN4DArm.js";
+import { B as ae } from "../../ButtonBase-CSQZHD_g.js";
+const D = w("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]), H = w("MuiListItemIcon", ["root", "alignItemsFlexStart"]), P = w("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
+function ne(e) {
+  return X("MuiMenuItem", e);
 }
-const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), ne = (e, t) => {
+const y = w("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divider", "gutters", "selected"]), ie = (e, t) => {
   const {
     ownerState: a
   } = e;
   return [t.root, a.dense && t.dense, a.divider && t.divider, !a.disableGutters && t.gutters];
-}, ie = (e) => {
+}, le = (e) => {
   const {
     disabled: t,
     dense: a,
@@ -25,19 +26,19 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
     disableGutters: l,
     selected: u,
     classes: d
-  } = e, n = Z({
+  } = e, i = ee({
     root: ["root", a && "dense", t && "disabled", !l && "gutters", s && "divider", u && "selected"]
-  }, ae, d);
+  }, ne, d);
   return {
     ...d,
-    ...n
+    ...i
   };
-}, le = Y(se, {
-  shouldForwardProp: (e) => ee(e) || e === "classes",
+}, de = Z(ae, {
+  shouldForwardProp: (e) => oe(e) || e === "classes",
   name: "MuiMenuItem",
   slot: "Root",
-  overridesResolver: ne
-})(oe(({
+  overridesResolver: ie
+})(te(({
   theme: e
 }) => ({
   ...e.typography.body1,
@@ -78,21 +79,21 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
   [`&.${y.disabled}`]: {
     opacity: (e.vars || e).palette.action.disabledOpacity
   },
-  [`& + .${H.root}`]: {
+  [`& + .${D.root}`]: {
     marginTop: e.spacing(1),
     marginBottom: e.spacing(1)
   },
-  [`& + .${H.inset}`]: {
+  [`& + .${D.inset}`]: {
     marginLeft: 52
   },
-  [`& .${D.root}`]: {
+  [`& .${P.root}`]: {
     marginTop: 0,
     marginBottom: 0
   },
-  [`& .${D.inset}`]: {
+  [`& .${P.inset}`]: {
     paddingLeft: 36
   },
-  [`& .${P.root}`]: {
+  [`& .${H.root}`]: {
     minWidth: 36
   },
   variants: [{
@@ -130,13 +131,13 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
       paddingTop: 4,
       paddingBottom: 4,
       ...e.typography.body2,
-      [`& .${P.root} svg`]: {
+      [`& .${H.root} svg`]: {
         fontSize: "1.25rem"
       }
     }
   }]
 }))), L = /* @__PURE__ */ T.forwardRef(function(t, a) {
-  const s = X({
+  const s = Y({
     props: t,
     name: "MuiMenuItem"
   }), {
@@ -144,7 +145,7 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
     component: u = "li",
     dense: d = !1,
     divider: p = !1,
-    disableGutters: n = !1,
+    disableGutters: i = !1,
     focusVisibleClassName: m,
     role: b = "menuitem",
     tabIndex: C,
@@ -152,21 +153,21 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
     ...h
   } = s, f = T.useContext(N), M = T.useMemo(() => ({
     dense: d || f.dense || !1,
-    disableGutters: n
-  }), [f.dense, d, n]), g = T.useRef(null);
-  te(() => {
+    disableGutters: i
+  }), [f.dense, d, i]), g = T.useRef(null);
+  re(() => {
     l && (g.current ? g.current.focus() : process.env.NODE_ENV !== "production" && console.error("MUI: Unable to set focus to a MenuItem whose component has not been rendered."));
   }, [l]);
-  const k = {
+  const $ = {
     ...s,
     dense: M.dense,
     divider: p,
-    disableGutters: n
-  }, v = ie(s), O = re(g, a);
+    disableGutters: i
+  }, v = le(s), O = se(g, a);
   let x;
-  return s.disabled || (x = C !== void 0 ? C : -1), /* @__PURE__ */ i(N.Provider, {
+  return s.disabled || (x = C !== void 0 ? C : -1), /* @__PURE__ */ n(N.Provider, {
     value: M,
-    children: /* @__PURE__ */ i(le, {
+    children: /* @__PURE__ */ n(de, {
       ref: O,
       role: b,
       tabIndex: x,
@@ -174,7 +175,7 @@ const y = $("MuiMenuItem", ["root", "focusVisible", "dense", "disabled", "divide
       focusVisibleClassName: F(v.focusVisible, m),
       className: F(v.root, I),
       ...h,
-      ownerState: k,
+      ownerState: $,
       classes: v
     })
   });
@@ -254,7 +255,7 @@ process.env.NODE_ENV !== "production" && (L.propTypes = {
    */
   tabIndex: o.number
 });
-function xe(e) {
+function Ce(e) {
   const {
     className: t,
     sx: a,
@@ -263,7 +264,7 @@ function xe(e) {
     value: u = "",
     onChange: d,
     required: p = !1,
-    disabled: n = !1,
+    disabled: i = !1,
     forceError: m = !1,
     errorMessage: b = "This field is required",
     helperText: C,
@@ -272,36 +273,36 @@ function xe(e) {
     customValidation: f,
     size: M,
     variant: g = "outlined",
-    fullWidth: k = !0,
+    fullWidth: $ = !0,
     ...v
-  } = e, [O, x] = V(!1), [R, w] = V(!1), [j, S] = V(""), B = q(
+  } = e, [O, x] = V(!1), [R, k] = V(!1), [j, S] = V(""), B = W(
     (r) => {
       if (p && !r) {
-        w(!0), S(b);
+        k(!0), S(b);
         return;
       }
       if (f) {
         const c = f(r);
         if (c) {
-          w(!0), S(c);
+          k(!0), S(c);
           return;
         }
       }
-      w(!1), S("");
+      k(!1), S("");
     },
     [p, b, f]
   ), U = m || O && R, G = m ? b : O && R ? j : C || " ", z = (r) => {
     const c = r.target.value;
     x(!0), B(c), d?.(c);
-  }, W = () => {
+  }, A = () => {
     x(!0), B(u);
   };
   return /* @__PURE__ */ E(
-    A,
+    K,
     {
-      fullWidth: k,
+      fullWidth: $,
       error: U,
-      disabled: n,
+      disabled: i,
       required: p,
       size: M,
       variant: g,
@@ -326,19 +327,27 @@ function xe(e) {
         ...h?.sx
       },
       children: [
-        s && /* @__PURE__ */ i(J, { shrink: !0, children: s }),
+        s && /* @__PURE__ */ n(J, { shrink: !0, children: s }),
         /* @__PURE__ */ E(
-          K,
+          Q,
           {
             className: t,
             value: u,
             label: s || void 0,
             onChange: z,
-            onBlur: W,
-            disabled: n,
+            onBlur: A,
+            disabled: i,
             notched: !!s,
             displayEmpty: !0,
-            renderValue: (r) => r ? l.find((c) => c.value === r)?.label ?? r : /* @__PURE__ */ i("em", { style: { color: "#9e9e9e" }, children: I }),
+            IconComponent: (r) => /* @__PURE__ */ n(
+              q,
+              {
+                ...r,
+                fontSize: "small",
+                sx: { color: "action.active" }
+              }
+            ),
+            renderValue: (r) => r ? l.find((c) => c.value === r)?.label ?? r : /* @__PURE__ */ n("em", { style: { color: "#9e9e9e" }, children: I }),
             ...v,
             sx: {
               ...m && {
@@ -355,16 +364,16 @@ function xe(e) {
               ...a
             },
             children: [
-              /* @__PURE__ */ i(L, { value: "", disabled: !0, children: /* @__PURE__ */ i("em", { children: I }) }),
-              l.map((r) => /* @__PURE__ */ i(L, { value: r.value, children: r.label }, r.value))
+              /* @__PURE__ */ n(L, { value: "", disabled: !0, children: /* @__PURE__ */ n("em", { children: I }) }),
+              l.map((r) => /* @__PURE__ */ n(L, { value: r.value, children: r.label }, r.value))
             ]
           }
         ),
-        /* @__PURE__ */ i(_, { children: G })
+        /* @__PURE__ */ n(_, { children: G })
       ]
     }
   );
 }
 export {
-  xe as DropdownOptions
+  Ce as DropdownOptions
 };

package/dist/components/ImageUpload/index.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+interface ImageUploadProps {
+    label?: string;
+    required?: boolean;
+    maxSizeMB?: number;
+    acceptedFormats?: string[];
+    error?: string;
+    forceError?: boolean;
+    helperText?: string;
+    disabled?: boolean;
+    onChange?: (file: File | null, error: string) => void;
+}
+declare const ImageUpload: React.FC<ImageUploadProps>;
+export default ImageUpload;

package/dist/components/ImageUpload/index.js

@@ -0,0 +1,218 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { C as H } from "../../Close-pjIlDyCW.js";
+import { c as M } from "../../createSvgIcon-C0YrvByi.js";
+import { FormControl as P, FormLabel as T, Box as i, Stack as U, Typography as l, IconButton as V, FormHelperText as E } from "@mui/material";
+import { useState as g, useRef as q, useCallback as G } from "react";
+const J = M(/* @__PURE__ */ e("path", {
+  d: "M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86-3 3.87L9 13.14 6 17h12z"
+}), "ImageOutlined"), K = (n) => {
+  const a = n.lastIndexOf(".");
+  return a <= 0 ? { baseName: n, extension: "" } : {
+    baseName: n.slice(0, a),
+    extension: n.slice(a)
+  };
+}, rr = ({
+  label: n = "Logo",
+  required: a = !0,
+  maxSizeMB: d = 2,
+  acceptedFormats: s = ["png", "jpg", "jpeg"],
+  error: x = "",
+  forceError: y = !1,
+  helperText: b,
+  disabled: o = !1,
+  onChange: c
+}) => {
+  const [v, h] = g(!1), [p, k] = g(null), [O, D] = g(""), m = q(null), w = d * 1024 * 1024, R = s.map((r) => `.${r}`).join(","), C = s.map(
+    (r) => `image/${r === "jpg" ? "jpeg" : r}`
+  ), j = G(
+    (r) => {
+      if (!r) return;
+      if (!C.some((f) => r.type === f)) {
+        c?.(null, `Only ${s.join(", ")} files are supported`);
+        return;
+      }
+      if (r.size > w) {
+        c?.(null, `File size must be less than ${d}MB`);
+        return;
+      }
+      const I = new FileReader();
+      I.onload = (f) => {
+        k(f.target?.result), D(r.name), c?.(r, "");
+      }, I.readAsDataURL(r);
+    },
+    [C, w, d, s, c]
+  ), S = (r) => {
+    r.preventDefault(), !o && (h(!1), j(r.dataTransfer.files?.[0] ?? null));
+  }, F = (r) => {
+    r.preventDefault(), o || h(!0);
+  }, L = () => h(!1), W = () => {
+    o || m.current?.click();
+  }, z = (r) => {
+    j(r.target.files?.[0] ?? null);
+  }, N = (r) => {
+    r.stopPropagation(), k(null), D(""), c?.(null, ""), m.current && (m.current.value = "");
+  }, u = !!x || y && !p, B = x || (y && !p ? `${n} can't be empty` : ""), { baseName: $, extension: A } = K(O);
+  return /* @__PURE__ */ t(P, { fullWidth: !0, error: u, disabled: o, children: [
+    n && /* @__PURE__ */ e(
+      T,
+      {
+        required: a,
+        sx: {
+          mb: 0.75,
+          fontSize: 14,
+          fontWeight: 500,
+          color: "text.primary",
+          "& .MuiFormLabel-asterisk": { color: "error.main" },
+          "&.Mui-focused": { color: "text.primary" },
+          "&.Mui-error": { color: "text.primary" }
+        },
+        children: n
+      }
+    ),
+    /* @__PURE__ */ t(
+      i,
+      {
+        onClick: W,
+        onDrop: S,
+        onDragOver: F,
+        onDragLeave: L,
+        sx: {
+          border: 2,
+          borderStyle: "dashed",
+          borderColor: u ? "error.main" : v ? "primary.main" : "grey.300",
+          borderRadius: 2,
+          p: p ? 1.5 : 4,
+          textAlign: "center",
+          cursor: o ? "default" : "pointer",
+          bgcolor: o ? "action.disabledBackground" : v ? "primary.50" : "grey.50",
+          transition: "all 0.2s ease",
+          opacity: o ? 0.6 : 1,
+          "&:hover": o ? {} : {
+            borderColor: u ? "error.main" : "primary.main",
+            bgcolor: "primary.50"
+          }
+        },
+        children: [
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: m,
+              type: "file",
+              accept: R,
+              onChange: z,
+              hidden: !0,
+              disabled: o
+            }
+          ),
+          p ? /* @__PURE__ */ t(U, { direction: "row", alignItems: "center", spacing: 2, children: [
+            /* @__PURE__ */ e(
+              i,
+              {
+                component: "img",
+                src: p,
+                alt: "Preview",
+                sx: {
+                  width: 80,
+                  height: 80,
+                  objectFit: "contain",
+                  borderRadius: 1.5,
+                  border: 1,
+                  borderColor: "grey.200"
+                }
+              }
+            ),
+            /* @__PURE__ */ t(i, { sx: { flex: 1, minWidth: 0, textAlign: "left" }, children: [
+              /* @__PURE__ */ t(
+                l,
+                {
+                  variant: "body2",
+                  fontWeight: 500,
+                  sx: {
+                    display: "flex",
+                    minWidth: 0
+                  },
+                  children: [
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        component: "span",
+                        sx: {
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                          minWidth: 0
+                        },
+                        children: $
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      i,
+                      {
+                        component: "span",
+                        sx: {
+                          flexShrink: 0
+                        },
+                        children: A
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(l, { variant: "caption", color: "text.secondary", children: "Click to replace" })
+            ] }),
+            /* @__PURE__ */ e(
+              V,
+              {
+                onClick: N,
+                size: "small",
+                color: "error",
+                sx: {
+                  border: 1,
+                  borderColor: "grey.200",
+                  borderRadius: 1.5,
+                  "&:hover": { bgcolor: "error.50", borderColor: "error.200" }
+                },
+                children: /* @__PURE__ */ e(H, { fontSize: "small" })
+              }
+            )
+          ] }) : /* @__PURE__ */ t(i, { children: [
+            /* @__PURE__ */ e(
+              J,
+              {
+                sx: { fontSize: 40, color: "primary.main", mb: 1.5 }
+              }
+            ),
+            /* @__PURE__ */ t(l, { variant: "body2", color: "text.secondary", gutterBottom: !0, children: [
+              "Drop image here or",
+              " ",
+              /* @__PURE__ */ e(
+                l,
+                {
+                  component: "span",
+                  variant: "body2",
+                  color: "primary",
+                  fontWeight: 600,
+                  sx: { textDecoration: "underline" },
+                  children: "click to browse"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "File size should be less than ",
+              d,
+              "MB"
+            ] }),
+            /* @__PURE__ */ t(l, { variant: "caption", color: "text.disabled", display: "block", children: [
+              "Supports ",
+              s.join(", ")
+            ] })
+          ] })
+        ]
+      }
+    ),
+    (u || b) && /* @__PURE__ */ e(E, { sx: { mt: 0.75, mx: 0 }, children: B || b })
+  ] });
+};
+export {
+  rr as default
+};

package/dist/components/PhoneAndCountryDropdown/index.js

@@ -1,17 +1,16 @@
-import { jsx as e, jsxs as t, Fragment as _ } from "react/jsx-runtime";
-import { c as B } from "../../createSvgIcon-C0YrvByi.js";
+import { jsx as e, jsxs as t, Fragment as Y } from "react/jsx-runtime";
+import { K as k } from "../../KeyboardArrowDown-D4mY-2qw.js";
+import { c as _ } from "../../createSvgIcon-C0YrvByi.js";
 import { Box as a, Typography as u, TextField as G, Popper as J, ClickAwayListener as Q, Paper as V, InputBase as X, InputAdornment as Z, List as $, ListItemButton as ee, ListItemIcon as oe, ListItemText as re } from "@mui/material";
-import { useState as v, useRef as q, useEffect as ne, useMemo as te } from "react";
-const R = B(/* @__PURE__ */ e("path", {
-  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
-}), "KeyboardArrowDown"), ie = B(/* @__PURE__ */ e("path", {
+import { useState as v, useRef as B, useEffect as ne, useMemo as te } from "react";
+const ie = _(/* @__PURE__ */ e("path", {
   d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
 }), "Search"), se = {
   iso: "PH",
   country: "Philippines",
   code: "63",
   countryCode: "PH"
-}, k = (n) => n.replace(/-/g, "");
+}, A = (n) => n.replace(/-/g, "");
 function ce(n) {
   return n.toUpperCase().split("").map((c) => String.fromCodePoint(127397 + c.charCodeAt(0))).join("");
 }
@@ -38,19 +37,19 @@ function E({
   searchValue: r,
   onSearchChange: w,
   onSelect: x,
-  onClose: y,
-  showcode: m,
+  onClose: m,
+  showcode: y,
   searchPlaceholder: i = "Search country or code",
   renderFlag: d
 }) {
-  const p = q(null);
+  const p = B(null);
   ne(() => {
     c && setTimeout(() => p.current?.focus(), 50);
   }, [c]);
   const f = te(() => {
-    const o = r.toLowerCase(), C = k(o);
+    const o = r.toLowerCase(), C = A(o);
     return h.filter(
-      (s) => s.country.toLowerCase().includes(o) || s.code.includes(o) || k(s.code).includes(C) || s.iso.toLowerCase().includes(o)
+      (s) => s.country.toLowerCase().includes(o) || s.code.includes(o) || A(s.code).includes(C) || s.iso.toLowerCase().includes(o)
     );
   }, [h, r]);
   return !c || !n ? null : /* @__PURE__ */ e(
@@ -68,7 +67,7 @@ function E({
         { name: "offset", options: { offset: [0, 4] } },
         { name: "preventOverflow", options: { boundary: "viewport" } }
       ],
-      children: /* @__PURE__ */ e(Q, { onClickAway: y, children: /* @__PURE__ */ t(V, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
+      children: /* @__PURE__ */ e(Q, { onClickAway: m, children: /* @__PURE__ */ t(V, { elevation: 4, sx: { borderRadius: 1.5, overflow: "hidden" }, children: [
         /* @__PURE__ */ e(a, { sx: { px: 1.5, py: 1, borderBottom: "1px solid", borderColor: "divider" }, children: /* @__PURE__ */ e(
           X,
           {
@@ -106,7 +105,7 @@ function E({
                         primaryTypographyProps: { fontSize: 14 }
                       }
                     ),
-                    m && /* @__PURE__ */ t(u, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
+                    y && /* @__PURE__ */ t(u, { variant: "body2", color: "text.secondary", sx: { ml: 1, whiteSpace: "nowrap" }, children: [
                       "+",
                       o.code
                     ] })
@@ -121,19 +120,19 @@ function E({
     }
   );
 }
-function pe(n) {
+function fe(n) {
   const {
     mode: c,
     options: h,
     value: r = se,
     onChange: w,
     searchPlaceholder: x,
-    error: y = !1,
-    helperText: m,
+    error: m = !1,
+    helperText: y,
     disabled: i = !1,
     renderFlag: d = le,
     forceError: p = !1
-  } = n, [f, o] = v(!1), [C, s] = v(""), [D, F] = v(!1), [M, S] = v(!1), b = q(null), g = M || p, P = (l) => {
+  } = n, [f, o] = v(!1), [C, s] = v(""), [q, F] = v(!1), [O, S] = v(!1), b = B(null), g = O || p, P = (l) => {
     w({
       iso: l.iso,
       country: l.country,
@@ -146,11 +145,11 @@ function pe(n) {
   if (c === "phone") {
     const {
       phoneNumber: l,
-      onPhoneChange: O,
-      phoneError: W,
-      phoneHelperText: j,
-      forcePhoneError: N = !1
-    } = n, L = D || N || p, K = W || L && !l.trim(), A = j || (L && !l.trim() ? "Phone number is required" : void 0), U = y || g && !r.iso, H = m || (g && !r.iso ? "Country is required" : void 0);
+      onPhoneChange: W,
+      phoneError: j,
+      phoneHelperText: D,
+      forcePhoneError: M = !1
+    } = n, H = q || M || p, N = j || H && !l.trim(), L = D || (H && !l.trim() ? "Phone number is required" : void 0), K = m || g && !r.iso, R = y || (g && !r.iso ? "Country is required" : void 0);
     return /* @__PURE__ */ t(a, { sx: { position: "relative" }, children: [
       /* @__PURE__ */ t(a, { sx: { display: "flex" }, children: [
         /* @__PURE__ */ t(
@@ -167,7 +166,7 @@ function pe(n) {
               px: 1.5,
               height: 40,
               border: "1px solid",
-              borderColor: U ? "error.main" : "rgba(0,0,0,0.23)",
+              borderColor: K ? "error.main" : "rgba(0,0,0,0.23)",
               borderRight: "none",
               borderRadius: "4px 0 0 4px",
               cursor: i ? "default" : "pointer",
@@ -179,7 +178,7 @@ function pe(n) {
               outline: "none"
             },
             children: [
-              r.iso && /* @__PURE__ */ t(_, { children: [
+              r.iso && /* @__PURE__ */ t(Y, { children: [
                 d(r.iso),
                 /* @__PURE__ */ t(u, { variant: "body2", sx: { whiteSpace: "nowrap" }, children: [
                   "+",
@@ -187,7 +186,7 @@ function pe(n) {
                 ] })
               ] }),
               /* @__PURE__ */ e(
-                R,
+                k,
                 {
                   fontSize: "small",
                   sx: { ml: "auto", color: "action.active" }
@@ -203,10 +202,10 @@ function pe(n) {
             size: "small",
             type: "tel",
             value: l,
-            onChange: (Y) => O(Y.target.value),
+            onChange: (U) => W(U.target.value),
             onBlur: () => F(!0),
             disabled: i,
-            error: K,
+            error: N,
             sx: {
               "& .MuiOutlinedInput-root": {
                 borderRadius: "0 4px 4px 0"
@@ -215,13 +214,13 @@ function pe(n) {
           }
         )
       ] }),
-      (H || A) && /* @__PURE__ */ e(
+      (R || L) && /* @__PURE__ */ e(
         u,
         {
           variant: "caption",
           color: "error",
           sx: { display: "block", mt: 0.5, ml: 0 },
-          children: H || A
+          children: R || L
         }
       ),
       /* @__PURE__ */ e(
@@ -241,7 +240,7 @@ function pe(n) {
       )
     ] });
   }
-  const T = y || g && !r.iso, z = m || (g && !r.iso ? "Country is required" : void 0);
+  const T = m || g && !r.iso, z = y || (g && !r.iso ? "Country is required" : void 0);
   return /* @__PURE__ */ t(a, { sx: { position: "relative" }, children: [
     /* @__PURE__ */ t(
       a,
@@ -274,7 +273,7 @@ function pe(n) {
               children: r.country ?? "Select country"
             }
           ),
-          /* @__PURE__ */ e(R, { fontSize: "small", sx: { color: "action.active" } })
+          /* @__PURE__ */ e(k, { fontSize: "small", sx: { color: "action.active" } })
         ]
       }
     ),
@@ -298,5 +297,5 @@ function pe(n) {
 }
 export {
   se as PH_DEFAULT,
-  pe as PhoneAndCountryDropdown
+  fe as PhoneAndCountryDropdown
 };

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fangzsx/component-library",
   "author": "Jay Gilbert Garzon",
   "private": false,
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",