@verma-consulting/design-library 0.1.28 → 0.1.30

package/dist/index.d.mts

@@ -102,10 +102,18 @@ type ImageUploadAvatarProps = {
 };
 declare const ImageUploadAvatar: React__default.FC<ImageUploadAvatarProps>;
 
-declare const FormSnackBar: ({ snackBar, setSnackBar }: {
-    snackBar?: {} | undefined;
-    setSnackBar?: (() => null) | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type SnackbarType = "success" | "error" | "warning" | "info" | "";
+interface FormSnackBarState {
+    open?: boolean;
+    message?: string;
+    type?: SnackbarType;
+}
+interface FormSnackBarProps {
+    snackBar?: FormSnackBarState;
+    setSnackBar?: (state: FormSnackBarState) => void;
+    autoHideDuration?: number;
+}
+declare const FormSnackBar: React__default.FC<FormSnackBarProps>;
 
 interface LoaderProps {
     size?: number;

package/dist/index.d.ts

@@ -102,10 +102,18 @@ type ImageUploadAvatarProps = {
 };
 declare const ImageUploadAvatar: React__default.FC<ImageUploadAvatarProps>;
 
-declare const FormSnackBar: ({ snackBar, setSnackBar }: {
-    snackBar?: {} | undefined;
-    setSnackBar?: (() => null) | undefined;
-}) => react_jsx_runtime.JSX.Element;
+type SnackbarType = "success" | "error" | "warning" | "info" | "";
+interface FormSnackBarState {
+    open?: boolean;
+    message?: string;
+    type?: SnackbarType;
+}
+interface FormSnackBarProps {
+    snackBar?: FormSnackBarState;
+    setSnackBar?: (state: FormSnackBarState) => void;
+    autoHideDuration?: number;
+}
+declare const FormSnackBar: React__default.FC<FormSnackBarProps>;
 
 interface LoaderProps {
     size?: number;

package/dist/index.js

@@ -49,11 +49,11 @@ __export(index_exports, {
   StatusPill: () => StatusPill_default,
   TabPanel: () => TabPanel_default,
   TablePagination: () => TablePagination_default,
-  ThemeProvider: () => import_styles10.ThemeProvider,
-  createTheme: () => import_styles10.createTheme,
-  makeStyles: () => import_styles11.makeStyles,
-  styled: () => import_styles10.styled,
-  useTheme: () => import_styles10.useTheme
+  ThemeProvider: () => import_styles11.ThemeProvider,
+  createTheme: () => import_styles11.createTheme,
+  makeStyles: () => import_styles12.makeStyles,
+  styled: () => import_styles11.styled,
+  useTheme: () => import_styles11.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@mui/material"), module.exports);
@@ -328,7 +328,7 @@ var rootSx = {
   }
 };
 var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
-  var _a, _b;
+  var _a2, _b;
   const {
     sx,
     slotProps,
@@ -342,7 +342,7 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
     displayedRangeLabel,
     ...other
   } = props;
-  const labelRowsPerPageResolved = (_a = labelRowsPerPageProp != null ? labelRowsPerPageProp : rowsPerPageLabel) != null ? _a : DEFAULT_ROWS_PER_PAGE_LABEL;
+  const labelRowsPerPageResolved = (_a2 = labelRowsPerPageProp != null ? labelRowsPerPageProp : rowsPerPageLabel) != null ? _a2 : DEFAULT_ROWS_PER_PAGE_LABEL;
   const labelDisplayedRowsResolved = (_b = labelDisplayedRowsProp != null ? labelDisplayedRowsProp : displayedRangeLabel) != null ? _b : defaultDisplayedRangeLabel;
   const slotSelect = slotProps == null ? void 0 : slotProps.select;
   const { sx: slotSelectSx, ...slotSelectRest } = slotSelect != null ? slotSelect : {};
@@ -398,8 +398,8 @@ var TablePagination = React2.forwardRef(function TablePagination2(props, ref) {
 var TablePagination_default = TablePagination;
 
 // src/index.tsx
-var import_styles10 = require("@mui/material/styles");
-var import_styles11 = require("@mui/styles");
+var import_styles11 = require("@mui/material/styles");
+var import_styles12 = require("@mui/styles");
 
 // src/Logo.tsx
 var import_react2 = require("react");
@@ -414,12 +414,12 @@ var Logo = (0, import_react2.memo)(
     handleClick = () => null,
     companyComponent = null
   }) => {
-    var _a;
+    var _a2;
     const theme = (0, import_material3.useTheme)();
     const mdMatches = (0, import_material3.useMediaQuery)(theme.breakpoints.down("md"));
     const maxWidth = mdMatches ? 160 : 320;
     const companyName = (organization == null ? void 0 : organization.name) || "\u2013";
-    const logoUrl = (_a = organization == null ? void 0 : organization.logo) == null ? void 0 : _a.url;
+    const logoUrl = (_a2 = organization == null ? void 0 : organization.logo) == null ? void 0 : _a2.url;
     if (centered) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         import_material3.Grid,
@@ -721,8 +721,8 @@ var ImageUploadAvatar = ({
     };
   }, [internalSrc]);
   const handlePick = (e) => {
-    var _a, _b;
-    const selected = (_b = (_a = e.target.files) == null ? void 0 : _a[0]) != null ? _b : null;
+    var _a2, _b;
+    const selected = (_b = (_a2 = e.target.files) == null ? void 0 : _a2[0]) != null ? _b : null;
     if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
       URL.revokeObjectURL(internalSrc);
     }
@@ -737,8 +737,8 @@ var ImageUploadAvatar = ({
     onChange == null ? void 0 : onChange(selected, preview);
   };
   const triggerPick = () => {
-    var _a;
-    if (!disabled) (_a = inputRef.current) == null ? void 0 : _a.click();
+    var _a2;
+    if (!disabled) (_a2 = inputRef.current) == null ? void 0 : _a2.click();
   };
   const handleClear = (e) => {
     e.stopPropagation();
@@ -769,44 +769,147 @@ var ImageUploadAvatar = ({
 var ImageUploadAvatar_default = ImageUploadAvatar;
 
 // src/FormSnackBar.tsx
+var import_react4 = require("react");
 var import_material7 = require("@mui/material");
+var import_styles6 = require("@mui/material/styles");
+var import_Close = __toESM(require("@mui/icons-material/Close"));
+var import_common_library2 = require("@verma-consulting/common-library");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var FormSnackBar = ({ snackBar = {}, setSnackBar = () => null }) => {
-  const getAlertStyles = () => {
-    if ((snackBar == null ? void 0 : snackBar.type) === "success") {
-      return { backgroundColor: "#65C466", color: "white" };
-    }
-    return {};
+var _a;
+var SNACKBAR_TYPES = (_a = import_common_library2.constants) == null ? void 0 : _a.SNACKBAR_TYPES;
+var DULL_SNACKBAR_COLORS = {
+  success: "#6B8E6B",
+  warning: "#C97B4B",
+  // dull orange soda
+  info: "#4A5E8A",
+  error: "#9B4444"
+};
+function isSnackbarType(val) {
+  if (typeof val !== "string") return false;
+  if (!SNACKBAR_TYPES) {
+    return ["success", "error", "warning", "info"].includes(
+      val
+    );
+  }
+  const values = Object.values(SNACKBAR_TYPES);
+  return values.includes(val);
+}
+var FormSnackBar = ({
+  snackBar = {},
+  setSnackBar = () => null,
+  autoHideDuration = 3500
+}) => {
+  var _a2, _b;
+  const theme = (0, import_styles6.useTheme)();
+  const [queue, setQueue] = (0, import_react4.useState)([]);
+  const idRef = (0, import_react4.useRef)(0);
+  const prevOpenRef = (0, import_react4.useRef)(!!(snackBar == null ? void 0 : snackBar.open));
+  const prevSignatureRef = (0, import_react4.useRef)("");
+  const timersRef = (0, import_react4.useRef)(
+    {}
+  );
+  const type = (_a2 = snackBar.type) != null ? _a2 : "";
+  const message = (_b = snackBar.message) != null ? _b : "";
+  const severity = isSnackbarType(type) ? type : "info";
+  const enqueueFromProp = () => {
+    if (!(snackBar == null ? void 0 : snackBar.open)) return;
+    if (!message) return;
+    const signature = `${type}::${message}`;
+    const openRose = !prevOpenRef.current && !!(snackBar == null ? void 0 : snackBar.open);
+    const signatureChanged = signature !== prevSignatureRef.current;
+    if (!openRose && !signatureChanged) return;
+    prevSignatureRef.current = signature;
+    const id = String(++idRef.current);
+    setQueue((q) => [...q, { id, type, message }]);
+    timersRef.current[id] = setTimeout(() => {
+      setQueue((q) => q.filter((item) => item.id !== id));
+      delete timersRef.current[id];
+    }, autoHideDuration);
+    setSnackBar({ open: false, message: "", type: "" });
+  };
+  (0, import_react4.useEffect)(() => {
+    const nextOpen = !!(snackBar == null ? void 0 : snackBar.open);
+    enqueueFromProp();
+    prevOpenRef.current = nextOpen;
+  }, [snackBar == null ? void 0 : snackBar.open, snackBar == null ? void 0 : snackBar.message, snackBar == null ? void 0 : snackBar.type]);
+  const handleDismiss = (id) => {
+    const t = timersRef.current[id];
+    if (t) clearTimeout(t);
+    delete timersRef.current[id];
+    setQueue((q) => q.filter((item) => item.id !== id));
+  };
+  (0, import_react4.useEffect)(() => {
+    return () => {
+      Object.values(timersRef.current).forEach((t) => clearTimeout(t));
+      timersRef.current = {};
+    };
+  }, []);
+  const typeStyles = (severity2) => {
+    const baseHex = severity2 === "success" ? DULL_SNACKBAR_COLORS.success : severity2 === "error" ? DULL_SNACKBAR_COLORS.error : severity2 === "warning" ? DULL_SNACKBAR_COLORS.warning : DULL_SNACKBAR_COLORS.info;
+    return {
+      bg: theme.palette.mode === "dark" ? (0, import_styles6.alpha)(baseHex, 0.26) : (0, import_styles6.alpha)(baseHex, 0.14),
+      text: theme.palette.mode === "dark" ? "rgba(255,255,255,0.92)" : baseHex,
+      icon: baseHex
+    };
   };
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_material7.Snackbar,
+    "div",
     {
-      sx: { width: "100%" },
-      autoHideDuration: 1e3,
-      anchorOrigin: { vertical: "top", horizontal: "center" },
-      open: (snackBar == null ? void 0 : snackBar.open) || false,
-      onClose: () => setSnackBar({
-        open: false,
-        message: "",
-        type: ""
-      }),
-      TransitionComponent: import_material7.Slide,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_material7.Alert,
-        {
-          sx: {
-            width: "100%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            textAlign: "center",
-            ...getAlertStyles()
-          },
-          variant: "filled",
-          severity: snackBar == null ? void 0 : snackBar.type,
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material7.AlertTitle, { sx: { m: 0, p: 0 }, children: snackBar == null ? void 0 : snackBar.message })
-        }
-      )
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      style: {
+        position: "fixed",
+        top: 12,
+        right: 12,
+        zIndex: 1400,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        width: "min(420px, calc(100vw - 24px))",
+        pointerEvents: "none"
+      },
+      children: queue.map((item) => {
+        const localSeverity = isSnackbarType(item.type) ? item.type : "info";
+        const colors = typeStyles(localSeverity);
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_material7.Grow, { in: true, timeout: 280, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_material7.Alert,
+          {
+            variant: "filled",
+            severity: localSeverity,
+            sx: {
+              width: "100%",
+              pointerEvents: "auto",
+              borderRadius: 3,
+              px: { xs: 1.25, sm: 1.5 },
+              py: 0.875,
+              alignItems: "center",
+              boxShadow: 2,
+              backgroundColor: colors.bg,
+              color: colors.text,
+              "& .MuiAlert-icon": {
+                color: colors.icon
+              },
+              "& .MuiAlert-message": {
+                m: 0,
+                p: 0,
+                fontWeight: 600,
+                letterSpacing: "-0.01em"
+              }
+            },
+            action: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              import_material7.IconButton,
+              {
+                "aria-label": "close",
+                color: "inherit",
+                size: "small",
+                onClick: () => handleDismiss(item.id),
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_Close.default, { fontSize: "small" })
+              }
+            ),
+            children: item.message
+          }
+        ) }, item.id);
+      })
     }
   );
 };
@@ -814,9 +917,9 @@ var FormSnackBar_default = FormSnackBar;
 
 // src/Loader.tsx
 var import_material8 = require("@mui/material");
-var import_styles6 = require("@mui/styles");
+var import_styles7 = require("@mui/styles");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var useStyles2 = (0, import_styles6.makeStyles)({
+var useStyles2 = (0, import_styles7.makeStyles)({
   "@keyframes pulse": {
     "0%": { transform: "scale(1)", opacity: 0.9 },
     "50%": { transform: "scale(1.05)", opacity: 1 },
@@ -857,9 +960,9 @@ var SkeletonBar = ({
   height = 24,
   sx = {}
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a2, _b, _c, _d, _e, _f, _g, _h;
   const theme = (0, import_material9.useTheme)();
-  const base = theme.palette.mode === "dark" ? (_b = (_a = theme.palette.grey) == null ? void 0 : _a[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
+  const base = theme.palette.mode === "dark" ? (_b = (_a2 = theme.palette.grey) == null ? void 0 : _a2[700]) != null ? _b : "#424242" : (_d = (_c = theme.palette.grey) == null ? void 0 : _c[200]) != null ? _d : "#e0e0e0";
   const highlight = theme.palette.mode === "dark" ? (_f = (_e = theme.palette.grey) == null ? void 0 : _e[600]) != null ? _f : "#616161" : (_h = (_g = theme.palette.grey) == null ? void 0 : _g[100]) != null ? _h : "#f5f5f5";
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_material9.Box,
@@ -882,7 +985,7 @@ var SkeletonBar = ({
 var SkeletonBar_default = SkeletonBar;
 
 // src/EmptyState.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_material10 = require("@mui/material");
 var import_icons_material5 = require("@mui/icons-material");
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -891,7 +994,7 @@ var EmptyState = ({ label, m = 8, icon }) => {
   const text = label != null ? label : "No data created yet";
   const iconColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.42)" : "rgba(0,0,0,0.42)";
   const labelColor = theme.palette.mode === "dark" ? "rgba(255,255,255,0.50)" : "rgba(0,0,0,0.38)";
-  const iconEl = icon != null && import_react4.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const iconEl = icon != null && import_react5.default.isValidElement(icon) ? icon : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_icons_material5.DatasetOutlined,
     {
       sx: {
@@ -941,9 +1044,9 @@ var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
 var import_material11 = require("@mui/material");
-var import_styles7 = require("@mui/styles");
+var import_styles8 = require("@mui/styles");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var useStyles3 = (0, import_styles7.makeStyles)((theme) => ({
+var useStyles3 = (0, import_styles8.makeStyles)((theme) => ({
   button: {
     padding: "4px 8px 4px 8px",
     color: "black",
@@ -1008,10 +1111,10 @@ var Pill = ({
 var Pill_default = Pill;
 
 // src/IOSSwitch.tsx
-var import_styles8 = require("@mui/material/styles");
+var import_styles9 = require("@mui/material/styles");
 var import_Switch = __toESM(require("@mui/material/Switch"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var IOSSwitch = (0, import_styles8.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
+var IOSSwitch = (0, import_styles9.styled)((props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Switch.default, { focusVisibleClassName: ".Mui-focusVisible", disableRipple: true, ...props }))(({ theme }) => ({
   width: 46,
   height: 30,
   padding: 0,
@@ -1060,13 +1163,13 @@ var IOSSwitch_default = IOSSwitch;
 
 // src/StatusPill.tsx
 var import_material12 = require("@mui/material");
-var import_common_library2 = require("@verma-consulting/common-library");
+var import_common_library3 = require("@verma-consulting/common-library");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var statusColorMap = {
-  [import_common_library2.userStatus.Pending]: "warning",
-  [import_common_library2.userStatus.Active]: "success",
-  [import_common_library2.userStatus.Inactive]: "error",
-  [import_common_library2.userStatus.Invited]: "info"
+  [import_common_library3.userStatus.Pending]: "warning",
+  [import_common_library3.userStatus.Active]: "success",
+  [import_common_library3.userStatus.Inactive]: "error",
+  [import_common_library3.userStatus.Invited]: "info"
 };
 var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
   import_material12.Chip,
@@ -1080,12 +1183,12 @@ var StatusPill = ({ status }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
 var StatusPill_default = StatusPill;
 
 // src/FormPopover.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_material13 = require("@mui/material");
 var import_icons_material6 = require("@mui/icons-material");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var FormPopover = ({ row, children, title }) => {
-  const [anchorEl, setAnchorEl] = (0, import_react5.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -1130,12 +1233,12 @@ var FormPopover = ({ row, children, title }) => {
 var FormPopover_default = FormPopover;
 
 // src/SearchableSelect.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_material14 = require("@mui/material");
 var import_icons_material7 = require("@mui/icons-material");
-var import_styles9 = require("@mui/styles");
+var import_styles10 = require("@mui/styles");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var useStyles4 = (0, import_styles9.makeStyles)(() => ({
+var useStyles4 = (0, import_styles10.makeStyles)(() => ({
   defaultMode: {
     padding: "14px 8px",
     cursor: "pointer",
@@ -1153,7 +1256,7 @@ var useStyles4 = (0, import_styles9.makeStyles)(() => ({
     whiteSpace: "pre-wrap"
   }
 }));
-var SearchableSelect = import_react6.default.memo(
+var SearchableSelect = import_react7.default.memo(
   ({
     name,
     label,
@@ -1168,11 +1271,11 @@ var SearchableSelect = import_react6.default.memo(
     multiple = false
   }) => {
     const classes = useStyles4();
-    const wrapperRef = (0, import_react6.useRef)(null);
-    const inputRef = (0, import_react6.useRef)(null);
-    const [editMode, setEditMode] = (0, import_react6.useState)(defaultEditMode);
-    const [open, setOpen] = (0, import_react6.useState)(defaultEditMode);
-    (0, import_react6.useEffect)(() => {
+    const wrapperRef = (0, import_react7.useRef)(null);
+    const inputRef = (0, import_react7.useRef)(null);
+    const [editMode, setEditMode] = (0, import_react7.useState)(defaultEditMode);
+    const [open, setOpen] = (0, import_react7.useState)(defaultEditMode);
+    (0, import_react7.useEffect)(() => {
       function handleClickOutside(event) {
         if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
           setEditMode(false);
@@ -1186,7 +1289,7 @@ var SearchableSelect = import_react6.default.memo(
         document.removeEventListener("mousedown", handleClickOutside);
       };
     }, [editMode]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (editMode && open && inputRef.current) {
         inputRef.current.focus();
       }
@@ -1201,23 +1304,23 @@ var SearchableSelect = import_react6.default.memo(
       setEditMode(false);
       setOpen(false);
     };
-    const selected = (0, import_react6.useMemo)(() => {
-      var _a;
+    const selected = (0, import_react7.useMemo)(() => {
+      var _a2;
       if (multiple) {
         if (!value.trim()) return [];
         const selectedValues = value.split(", ").map((v) => v.trim());
         return options.filter((opt) => selectedValues.includes(opt.value));
       } else {
-        return (_a = options.find((opt) => opt.value === value)) != null ? _a : null;
+        return (_a2 = options.find((opt) => opt.value === value)) != null ? _a2 : null;
       }
     }, [value, options, multiple]);
-    const displayValue = (0, import_react6.useMemo)(() => {
-      var _a;
+    const displayValue = (0, import_react7.useMemo)(() => {
+      var _a2;
       if (multiple) {
         if (!Array.isArray(selected)) return "";
         return selected.map((opt) => opt.label).join(", ");
       } else {
-        return (_a = selected == null ? void 0 : selected.label) != null ? _a : "";
+        return (_a2 = selected == null ? void 0 : selected.label) != null ? _a2 : "";
       }
     }, [selected, multiple]);
     const isValueEmpty = !value.trim();
@@ -1232,7 +1335,7 @@ var SearchableSelect = import_react6.default.memo(
         onOpen: () => setOpen(true),
         onClose: () => setOpen(false),
         onChange: (_, newValue) => {
-          var _a;
+          var _a2;
           if (multiple) {
             if (Array.isArray(newValue)) {
               let vals = newValue == null ? void 0 : newValue.map((opt) => opt == null ? void 0 : opt.value);
@@ -1243,7 +1346,7 @@ var SearchableSelect = import_react6.default.memo(
             }
             setOpen(true);
           } else {
-            onChange((_a = newValue == null ? void 0 : newValue.value) != null ? _a : "");
+            onChange((_a2 = newValue == null ? void 0 : newValue.value) != null ? _a2 : "");
             setOpen(false);
           }
         },
@@ -1371,9 +1474,9 @@ var FormDrawer = ({
 var FormDrawer_default = FormDrawer;
 
 // src/PhoneNumberField.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_material16 = require("@mui/material");
-var import_common_library3 = require("@verma-consulting/common-library");
+var import_common_library4 = require("@verma-consulting/common-library");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var PhoneNumberField = ({
   value = "",
@@ -1387,14 +1490,14 @@ var PhoneNumberField = ({
 }) => {
   const theme = (0, import_material16.useTheme)();
   const smMatches = (0, import_material16.useMediaQuery)(theme.breakpoints.down("sm"));
-  const countries = import_common_library3.constants.COUNTRIES || [];
-  const [country, setCountry] = (0, import_react7.useState)(defaultCountry);
-  const [localNumber, setLocalNumber] = (0, import_react7.useState)("");
-  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
-  const [selectOpen, setSelectOpen] = (0, import_react7.useState)(false);
-  const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react7.useState)(false);
-  const wrapperRef = (0, import_react7.useRef)(null);
-  const parseE164 = (0, import_react7.useCallback)(
+  const countries = import_common_library4.constants.COUNTRIES || [];
+  const [country, setCountry] = (0, import_react8.useState)(defaultCountry);
+  const [localNumber, setLocalNumber] = (0, import_react8.useState)("");
+  const [isFocused, setIsFocused] = (0, import_react8.useState)(false);
+  const [selectOpen, setSelectOpen] = (0, import_react8.useState)(false);
+  const [ignoreNextOutsideClick, setIgnoreNextOutsideClick] = (0, import_react8.useState)(false);
+  const wrapperRef = (0, import_react8.useRef)(null);
+  const parseE164 = (0, import_react8.useCallback)(
     (val) => {
       const cleaned = (val || "").toString().replace(/\D/g, "");
       if (!cleaned) return { dial: "", local: "" };
@@ -1411,7 +1514,7 @@ var PhoneNumberField = ({
     },
     [countries]
   );
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isFocused) return;
     if (!value) {
       setLocalNumber("");
@@ -1432,10 +1535,10 @@ var PhoneNumberField = ({
     if (cleaned.length > 6) formatted += "-" + cleaned.slice(6, 10);
     return formatted;
   };
-  const commitValue = (0, import_react7.useCallback)(() => {
-    var _a;
+  const commitValue = (0, import_react8.useCallback)(() => {
+    var _a2;
     const sel = countries.find((c) => c.code === country);
-    const dial = (_a = sel == null ? void 0 : sel.phone) != null ? _a : "";
+    const dial = (_a2 = sel == null ? void 0 : sel.phone) != null ? _a2 : "";
     if (dial && localNumber) {
       onChange(`+${dial}${localNumber}`);
     } else {
@@ -1449,7 +1552,7 @@ var PhoneNumberField = ({
   const handleCountryChange = (e) => {
     setCountry(e.target.value);
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     const onDocMouseDown = (ev) => {
       if (!wrapperRef.current) return;
       if (wrapperRef.current.contains(ev.target)) return;