@verma-consulting/design-library 0.1.44 → 0.1.45

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.tsx
 var index_exports = {};
 __export(index_exports, {
+  CountrySelect: () => CountrySelect_default,
   EmptyState: () => EmptyState_default,
   FormDialog: () => FormDialog_default,
   FormDrawer: () => FormDrawer_default,
@@ -48,11 +49,11 @@ __export(index_exports, {
   StatusPill: () => StatusPill_default,
   TabPanel: () => TabPanel_default,
   TablePagination: () => TablePagination_default,
-  ThemeProvider: () => import_styles17.ThemeProvider,
-  createTheme: () => import_styles17.createTheme,
-  makeStyles: () => import_styles18.makeStyles,
-  styled: () => import_styles17.styled,
-  useTheme: () => import_styles17.useTheme
+  ThemeProvider: () => import_styles19.ThemeProvider,
+  createTheme: () => import_styles19.createTheme,
+  makeStyles: () => import_styles20.makeStyles,
+  styled: () => import_styles19.styled,
+  useTheme: () => import_styles19.useTheme
 });
 module.exports = __toCommonJS(index_exports);
 __reExport(index_exports, require("@mui/material"), module.exports);
@@ -267,8 +268,8 @@ var TablePagination = React.forwardRef(function TablePagination2(props, ref) {
 var TablePagination_default = TablePagination;
 
 // src/index.tsx
-var import_styles17 = require("@mui/material/styles");
-var import_styles18 = require("@mui/styles");
+var import_styles19 = require("@mui/material/styles");
+var import_styles20 = require("@mui/styles");
 
 // src/Logo.tsx
 var import_react = require("react");
@@ -393,7 +394,10 @@ var import_icons_material = require("@mui/icons-material");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var BootstrapDialog = (0, import_styles2.styled)(import_material3.Dialog)(({ theme }) => ({
   "& .MuiDialog-paper": {
-    borderRadius: 24
+    borderRadius: 24,
+    [theme.breakpoints.down("md")]: {
+      borderRadius: 0
+    }
   },
   "& .MuiDialogContent-root": {
     padding: theme.spacing(4)
@@ -616,6 +620,17 @@ var import_material5 = require("@mui/material");
 var import_styles6 = require("@mui/material/styles");
 var import_icons_material3 = require("@mui/icons-material");
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var DEFAULT_ACCEPT = "image/jpeg,image/png,image/gif,image/webp,image/avif,image/bmp,image/svg+xml,image/heic,image/heif";
+function isValidImageFile(file) {
+  const type = file.type.trim().toLowerCase();
+  if (type.startsWith("image/")) {
+    return true;
+  }
+  if (!type && /\.(jpe?g|png|gif|webp|avif|bmp|svg|heic|heif)$/i.test(file.name)) {
+    return true;
+  }
+  return false;
+}
 var HiddenInput = (0, import_styles6.styled)("input")({
   position: "absolute",
   width: 1,
@@ -685,7 +700,7 @@ var ImageUploadAvatar = ({
   onChange,
   size = 128,
   variant = "rounded",
-  accept = "image/*",
+  accept = DEFAULT_ACCEPT,
   disabled,
   allowClear = true
 }) => {
@@ -707,7 +722,12 @@ var ImageUploadAvatar = ({
   }, [internalSrc]);
   const handlePick = (e) => {
     var _a2, _b;
-    const selected = (_b = (_a2 = e.target.files) == null ? void 0 : _a2[0]) != null ? _b : null;
+    const raw = (_b = (_a2 = e.target.files) == null ? void 0 : _a2[0]) != null ? _b : null;
+    if (raw && !isValidImageFile(raw)) {
+      if (inputRef.current) inputRef.current.value = "";
+      return;
+    }
+    const selected = raw;
     if (internalSrc == null ? void 0 : internalSrc.startsWith("blob:")) {
       URL.revokeObjectURL(internalSrc);
     }
@@ -1550,11 +1570,11 @@ var FormDrawer = ({
       onClose: () => setOpen(false),
       sx: {
         "& .MuiDrawer-paper": {
-          width: mdMatches ? "100%" : "64%",
+          width: mdMatches ? "100%" : "72%",
           height: "100%",
           display: "flex",
           flexDirection: "column",
-          borderRadius: mdMatches ? "24px 24px 0 0" : "24px 0 0 24px"
+          borderRadius: mdMatches ? 0 : "24px 0 0 24px"
         }
       },
       children: [
@@ -1608,9 +1628,129 @@ var FormDrawer_default = FormDrawer;
 // src/PhoneNumberField.tsx
 var import_react7 = require("react");
 var import_material15 = require("@mui/material");
+var import_Autocomplete = require("@mui/material/Autocomplete");
 var import_styles16 = require("@mui/material/styles");
 var import_common_library3 = require("@verma-consulting/common-library");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var EXT_MAX_LEN = 20;
+var filterCountryOptions = (0, import_Autocomplete.createFilterOptions)({
+  stringify: (option) => `${option.label} ${option.code} ${option.phone}`
+});
+function extractExtensionFromMain(main) {
+  let m = main.trim();
+  let extFromMeta = "";
+  const semi = m.match(/;ext=(\d+)/i);
+  if (semi) {
+    extFromMeta = semi[1];
+    m = m.replace(/;ext=\d+/gi, "");
+  }
+  const extWord = m.match(/\bext\.?\s*(\d+)/i);
+  if (extWord) {
+    extFromMeta = extFromMeta || extWord[1];
+    m = m.replace(/\bext\.?\s*\d+/i, "");
+  }
+  return { main: m, extFromMeta };
+}
+function parsePhoneValue(raw, countries, defaultCountry) {
+  var _a2, _b, _c, _d;
+  const s = String(raw != null ? raw : "").trim();
+  if (!s) return { dial: "", local: "", extension: "" };
+  const defaultDial = (_b = (_a2 = countries.find((c) => c.code === defaultCountry)) == null ? void 0 : _a2.phone) != null ? _b : "1";
+  let ext = "";
+  let mainPart = s;
+  const xSplit = s.split(/\s*[xX]\s*/);
+  if (xSplit.length > 1) {
+    mainPart = (_c = xSplit[0]) != null ? _c : "";
+    ext = xSplit.slice(1).join("").replace(/\D/g, "").slice(0, EXT_MAX_LEN);
+  }
+  const meta = extractExtensionFromMain(mainPart);
+  mainPart = meta.main;
+  if (meta.extFromMeta) {
+    ext = (ext || meta.extFromMeta).replace(/\D/g, "").slice(0, EXT_MAX_LEN);
+  }
+  const digitsOnly = mainPart.replace(/\D/g, "");
+  if (!digitsOnly) return { dial: "", local: "", extension: ext };
+  const sorted = [...countries].sort(
+    (a, b) => b.phone.length - a.phone.length
+  );
+  if (mainPart.trim().startsWith("+")) {
+    const found2 = sorted.find((c) => digitsOnly.startsWith(c.phone));
+    if (found2) {
+      const rest = digitsOnly.slice(found2.phone.length);
+      const local = found2.phone === "1" ? rest.slice(-10) : rest.slice(-10);
+      return {
+        dial: found2.phone,
+        local,
+        extension: ext
+      };
+    }
+  }
+  const foundDefault = countries.find((c) => c.code === defaultCountry);
+  const dial = (_d = foundDefault == null ? void 0 : foundDefault.phone) != null ? _d : defaultDial;
+  if (dial === "1") {
+    if (digitsOnly.length === 11 && digitsOnly.startsWith("1")) {
+      return {
+        dial: "1",
+        local: digitsOnly.slice(1, 11),
+        extension: ext
+      };
+    }
+    if (digitsOnly.length <= 10) {
+      return {
+        dial: "1",
+        local: digitsOnly.slice(-10),
+        extension: ext
+      };
+    }
+    if (digitsOnly.length > 10) {
+      return {
+        dial: "1",
+        local: digitsOnly.slice(-10),
+        extension: ext
+      };
+    }
+  }
+  const found = sorted.find((c) => digitsOnly.startsWith(c.phone));
+  if (found) {
+    const rest = digitsOnly.slice(found.phone.length);
+    return {
+      dial: found.phone,
+      local: rest.slice(-10),
+      extension: ext
+    };
+  }
+  return {
+    dial,
+    local: digitsOnly.slice(-10),
+    extension: ext
+  };
+}
+function buildStoredValue(dial, local, extension) {
+  if (!dial || !local) return "";
+  const core = `+${dial}${local}`;
+  if (extension) return `${core}x${extension}`;
+  return core;
+}
+function formatNanpNational(digits) {
+  const d = digits.replace(/\D/g, "").slice(0, 10);
+  if (!d.length) return "";
+  if (d.length <= 3) return d;
+  if (d.length <= 6) return `${d.slice(0, 3)}-${d.slice(3)}`;
+  return `${d.slice(0, 3)}-${d.slice(3, 6)}-${d.slice(6, 10)}`;
+}
+function formatOtherNational(local) {
+  const d = local.replace(/\D/g, "").slice(0, 15);
+  if (!d.length) return "";
+  return d.replace(/(\d{3,4})(?=\d)/g, "$1 ").trim();
+}
+function formatLineDisplay(dial, localNumber, extension) {
+  if (!localNumber && !extension) return "";
+  const main = dial === "1" ? formatNanpNational(localNumber) : formatOtherNational(localNumber);
+  if (!extension) return main;
+  if (!main) return `x${extension}`;
+  return `${main} x${extension}`;
+}
 var PhoneNumberField = ({
   value = "",
   onChange,
@@ -1621,6 +1761,7 @@ var PhoneNumberField = ({
   autoFocus = false,
   onBlur
 }) => {
+  var _a2, _b;
   const theme = (0, import_material15.useTheme)();
   const smMatches = (0, import_material15.useMediaQuery)(theme.breakpoints.down("sm"));
   const countries = import_common_library3.constants.COUNTRIES || [];
@@ -1635,65 +1776,67 @@ var PhoneNumberField = ({
   };
   const [country, setCountry] = (0, import_react7.useState)(defaultCountry);
   const [localNumber, setLocalNumber] = (0, import_react7.useState)("");
+  const [extension, setExtension] = (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 [bareExtensionX, setBareExtensionX] = (0, import_react7.useState)(false);
   const wrapperRef = (0, import_react7.useRef)(null);
-  const parseE164 = (0, import_react7.useCallback)(
+  const applyParsedFromValue = (0, import_react7.useCallback)(
     (val) => {
-      const cleaned = (val || "").toString().replace(/\D/g, "");
-      if (!cleaned) return { dial: "", local: "" };
-      const sorted = [...countries].sort(
-        (a, b) => b.phone.length - a.phone.length
-      );
-      const found = sorted.find((c) => cleaned.startsWith(c.phone));
-      if (found) {
-        const dial = found.phone;
-        const local = cleaned.slice(dial.length);
-        return { dial, local: local.slice(-10) };
+      setBareExtensionX(false);
+      const parsed = parsePhoneValue(val, countries, defaultCountry);
+      if (parsed.dial) {
+        const found = countries.find((c) => c.phone === parsed.dial);
+        if (found) setCountry(found.code);
       }
-      return { dial: "", local: cleaned.slice(-10) };
+      setLocalNumber(parsed.local);
+      setExtension(parsed.extension);
     },
-    [countries]
+    [countries, defaultCountry]
   );
   (0, import_react7.useEffect)(() => {
     if (isFocused) return;
     if (!value) {
       setLocalNumber("");
+      setExtension("");
+      setBareExtensionX(false);
       return;
     }
-    const { dial, local } = parseE164(String(value));
-    if (dial) {
-      const found = countries.find((c) => c.phone === dial);
-      if (found) setCountry(found.code);
-    }
-    setLocalNumber(local);
-  }, [value, parseE164, countries, isFocused]);
-  const formatLocalNumber = (digits) => {
-    const cleaned = digits.replace(/\D/g, "").slice(0, 10);
-    let formatted = "";
-    if (cleaned.length > 0) formatted += cleaned.slice(0, 3);
-    if (cleaned.length > 3) formatted += "-" + cleaned.slice(3, 6);
-    if (cleaned.length > 6) formatted += "-" + cleaned.slice(6, 10);
-    return formatted;
-  };
+    applyParsedFromValue(String(value));
+  }, [value, isFocused, applyParsedFromValue]);
   const commitValue = (0, import_react7.useCallback)(() => {
-    var _a2;
+    var _a3;
     const sel = countries.find((c) => c.code === country);
-    const dial = (_a2 = sel == null ? void 0 : sel.phone) != null ? _a2 : "";
-    if (dial && localNumber) {
-      onChange(`+${dial}${localNumber}`);
+    const dial = (_a3 = sel == null ? void 0 : sel.phone) != null ? _a3 : "";
+    onChange(buildStoredValue(dial, localNumber, extension));
+  }, [countries, country, localNumber, extension, onChange]);
+  const handleLocalChange = (e) => {
+    var _a3, _b2;
+    const raw = e.target.value;
+    const parts = raw.split(/\s*[xX]\s*/);
+    const mainRaw = (_a3 = parts[0]) != null ? _a3 : "";
+    const extDigits = parts.slice(1).join("").replace(/\D/g, "").slice(0, EXT_MAX_LEN);
+    const sel = countries.find((c) => c.code === country);
+    const dial = (_b2 = sel == null ? void 0 : sel.phone) != null ? _b2 : "1";
+    const maxLocal = dial === "1" ? 10 : 15;
+    let mainDigits = mainRaw.replace(/\D/g, "");
+    if (dial === "1") {
+      if (mainDigits.length === 11 && mainDigits.startsWith("1")) {
+        mainDigits = mainDigits.slice(1);
+      }
+      mainDigits = mainDigits.slice(0, 10);
     } else {
-      onChange("");
+      mainDigits = mainDigits.slice(0, maxLocal);
     }
-  }, [countries, country, localNumber, onChange]);
-  const handleLocalChange = (e) => {
-    const digits = e.target.value.replace(/\D/g, "").slice(0, 10);
-    setLocalNumber(digits);
-  };
-  const handleCountryChange = (e) => {
-    setCountry(e.target.value);
+    setLocalNumber(mainDigits);
+    setExtension(extDigits);
+    setBareExtensionX(
+      /[xX]/.test(raw) && extDigits.length === 0
+    );
   };
+  const dialForDisplay = (_b = (_a2 = countries.find((c) => c.code === country)) == null ? void 0 : _a2.phone) != null ? _b : "";
+  const displayLocal = formatLineDisplay(dialForDisplay, localNumber, extension) + (bareExtensionX ? localNumber ? " x" : "x" : "");
   (0, import_react7.useEffect)(() => {
     const onDocMouseDown = (ev) => {
       if (!wrapperRef.current) return;
@@ -1721,6 +1864,7 @@ var PhoneNumberField = ({
       onBlur == null ? void 0 : onBlur();
     }
   };
+  const selectedCountry = countries.find((c) => c.code === country);
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_material15.Box,
     {
@@ -1737,52 +1881,77 @@ var PhoneNumberField = ({
           sx: { width: "100%" },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-              import_material15.TextField,
+              import_material15.Autocomplete,
               {
-                select: true,
-                value: country,
-                onChange: handleCountryChange,
                 disabled,
+                options: countries,
+                value: selectedCountry != null ? selectedCountry : null,
+                onChange: (_, newValue) => {
+                  if (newValue) setCountry(newValue.code);
+                },
+                getOptionLabel: (option) => `(+${option.phone})`,
+                filterOptions: filterCountryOptions,
+                isOptionEqualToValue: (a, b) => a.code === b.code,
+                disableClearable: true,
                 size,
+                onOpen: () => {
+                  setSelectOpen(true);
+                  setIgnoreNextOutsideClick(true);
+                },
+                onClose: () => setSelectOpen(false),
                 sx: {
-                  width: 140,
+                  width: smMatches ? 64 : 108,
+                  minWidth: smMatches ? 64 : 108,
+                  maxWidth: smMatches ? 64 : 108,
+                  flexShrink: 0,
                   "& .MuiOutlinedInput-root": {
                     borderTopRightRadius: 0,
                     borderBottomRightRadius: 0,
                     ...glassInputSx
-                  }
-                },
-                SelectProps: {
-                  renderValue: (val) => {
-                    const code = typeof val === "string" ? val : defaultCountry.toUpperCase();
-                    const c = countries.find((x) => x.code === code);
-                    return c ? `${c.code} (+${c.phone})` : code;
-                  },
-                  onOpen: () => {
-                    setSelectOpen(true);
-                    setIgnoreNextOutsideClick(true);
                   },
-                  onClose: () => setSelectOpen(false)
+                  "& .MuiInputBase-input": {
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  }
                 },
-                children: countries.map((option) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_material15.MenuItem, { value: option.code, children: [
-                  option.code,
-                  " (+",
-                  option.phone,
-                  ")"
-                ] }, option.code))
+                renderOption: (props, option) => /* @__PURE__ */ (0, import_react8.createElement)(import_material15.Box, { component: "li", ...props, key: option.code }, /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_material15.Box,
+                  {
+                    component: "img",
+                    loading: "lazy",
+                    width: 20,
+                    alt: "",
+                    src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`,
+                    srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`,
+                    sx: { mr: 1, flexShrink: 0 }
+                  }
+                ), option.code, " (+", option.phone, ")"),
+                renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  import_material15.TextField,
+                  {
+                    ...params,
+                    variant: "outlined",
+                    size,
+                    inputProps: {
+                      ...params.inputProps,
+                      autoComplete: "tel-country"
+                    }
+                  }
+                )
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               import_material15.TextField,
               {
                 label,
-                value: localNumber ? formatLocalNumber(localNumber) : "",
+                value: displayLocal,
                 onChange: handleLocalChange,
-                placeholder: "   -   -    ",
+                placeholder: "415-555-0100 x123",
                 inputProps: {
-                  inputMode: "numeric",
-                  pattern: "[0-9]*",
-                  maxLength: 12
+                  inputMode: "text",
+                  autoComplete: "tel-national",
+                  "aria-label": label
                 },
                 disabled,
                 size,
@@ -1804,8 +1973,207 @@ var PhoneNumberField = ({
   );
 };
 var PhoneNumberField_default = PhoneNumberField;
+
+// src/CountrySelect.tsx
+var import_react9 = require("react");
+var import_material16 = require("@mui/material");
+var import_styles17 = require("@mui/material/styles");
+var import_styles18 = require("@mui/styles");
+var import_common_library4 = require("@verma-consulting/common-library");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var useStyles3 = (0, import_styles18.makeStyles)((theme) => ({
+  defaultMode: {
+    margin: "4px",
+    paddingTop: 14,
+    paddingBottom: 14,
+    paddingLeft: 8,
+    paddingRight: 8,
+    cursor: "pointer",
+    borderRadius: 8,
+    border: `1px solid ${(0, import_styles17.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+    backdropFilter: "blur(14px) saturate(150%)",
+    background: theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))",
+    "&:hover": {
+      boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px"
+    }
+  },
+  formLabel: {
+    cursor: "pointer"
+  },
+  formValue: {
+    cursor: "pointer",
+    wordBreak: "break-word",
+    whiteSpace: "pre-wrap"
+  }
+}));
+var COUNTRIES = import_common_library4.constants.COUNTRIES;
+var CountrySelect = ({
+  value,
+  onChange,
+  label = "Country",
+  size = "small",
+  disabled = false,
+  style = {}
+}) => {
+  const theme = (0, import_styles17.useTheme)();
+  const classes = useStyles3();
+  const [editMode, setEditMode] = (0, import_react9.useState)(false);
+  const glassBackground = theme.palette.mode === "dark" ? "linear-gradient(160deg, rgba(31,41,55,0.78), rgba(17,24,39,0.68))" : "linear-gradient(160deg, rgba(255,255,255,0.9), rgba(245,249,255,0.72))";
+  const handleBlur = () => {
+    setTimeout(() => setEditMode(false), 15);
+  };
+  const selectedOption = COUNTRIES.find((country) => country.code === value);
+  if (!editMode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      "div",
+      {
+        onClick: () => !disabled && setEditMode(true),
+        className: classes.defaultMode,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.FormLabel, { className: classes.formLabel, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+            import_material16.Box,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                mt: 0.25
+              },
+              children: [
+                selectedOption ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  import_material16.Box,
+                  {
+                    component: "img",
+                    loading: "lazy",
+                    width: 20,
+                    alt: "",
+                    src: `https://flagcdn.com/w20/${selectedOption.code.toLowerCase()}.png`,
+                    srcSet: `https://flagcdn.com/w40/${selectedOption.code.toLowerCase()}.png 2x`,
+                    sx: { flexShrink: 0 }
+                  }
+                ) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material16.Typography, { className: classes.formValue, component: "span", children: (selectedOption == null ? void 0 : selectedOption.label) || "\u2013" })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_material16.Autocomplete,
+    {
+      disabled,
+      options: COUNTRIES,
+      getOptionLabel: (option) => option.label,
+      autoHighlight: true,
+      openOnFocus: true,
+      disableClearable: true,
+      value: selectedOption != null ? selectedOption : void 0,
+      onChange: (_, newValue) => {
+        if (newValue != null) onChange(newValue);
+      },
+      onBlur: handleBlur,
+      sx: style,
+      size,
+      componentsProps: {
+        paper: {
+          sx: {
+            background: glassBackground,
+            backdropFilter: "blur(12px) saturate(150%)",
+            border: `1px solid ${(0, import_styles17.alpha)("#FFFFFF", theme.palette.mode === "dark" ? 0.16 : 0.55)}`,
+            boxShadow: theme.palette.mode === "dark" ? "rgba(0, 0, 0, 0.34) 0px 10px 26px" : "rgba(15, 23, 42, 0.16) 0px 8px 24px",
+            "& .MuiAutocomplete-option": {
+              "&[aria-selected='true']": {
+                backgroundColor: (0, import_styles17.alpha)(
+                  theme.palette.primary.main,
+                  theme.palette.mode === "dark" ? 0.28 : 0.14
+                )
+              },
+              "&.Mui-focused": {
+                backgroundColor: (0, import_styles17.alpha)(
+                  theme.palette.primary.main,
+                  theme.palette.mode === "dark" ? 0.2 : 0.1
+                )
+              }
+            }
+          }
+        }
+      },
+      renderOption: (props, option) => /* @__PURE__ */ (0, import_react10.createElement)(import_material16.Box, { component: "li", ...props, key: option.code }, /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "img",
+        {
+          loading: "lazy",
+          width: "20",
+          src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`,
+          srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`,
+          alt: "",
+          style: { marginRight: 8, flexShrink: 0 }
+        }
+      ), option.label, " (", option.code, ")"),
+      renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_material16.TextField,
+        {
+          ...params,
+          label,
+          variant: "outlined",
+          size,
+          inputProps: {
+            ...params.inputProps,
+            autoComplete: "new-password"
+          },
+          InputProps: {
+            ...params.InputProps,
+            startAdornment: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+              selectedOption ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                import_material16.Box,
+                {
+                  component: "img",
+                  loading: "lazy",
+                  width: 20,
+                  alt: "",
+                  src: `https://flagcdn.com/w20/${selectedOption.code.toLowerCase()}.png`,
+                  srcSet: `https://flagcdn.com/w40/${selectedOption.code.toLowerCase()}.png 2x`,
+                  sx: { mr: 1, flexShrink: 0, alignSelf: "center" }
+                }
+              ) : null,
+              params.InputProps.startAdornment
+            ] }),
+            sx: {
+              borderRadius: 2,
+              backdropFilter: "blur(10px)",
+              background: glassBackground,
+              color: "text.primary",
+              "&.Mui-focused": {
+                background: glassBackground
+              },
+              "&:hover": {
+                background: glassBackground
+              },
+              "& .MuiInputBase-input": {
+                color: "text.primary",
+                WebkitTextFillColor: "currentColor"
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderColor: (0, import_styles17.alpha)(
+                  "#FFFFFF",
+                  theme.palette.mode === "dark" ? 0.18 : 0.6
+                )
+              }
+            }
+          }
+        }
+      )
+    }
+  );
+};
+var CountrySelect_default = CountrySelect;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CountrySelect,
   EmptyState,
   FormDialog,
   FormDrawer,