mui-tel-input 1.0.1 → 1.0.2

package/dist/mui-tel-input.es.js

@@ -265,9 +265,9 @@ const Styled$1 = {
     return {
       display: "inline-block",
       backgroundSize: "cover",
-      "--CountryFlagIcon-height": "0.8em",
-      height: "var(--CountryFlagIcon-height)",
-      width: "calc(var(--CountryFlagIcon-height)*3/2)"
+      "--mui-tel-input-flag-height": "0.8em",
+      height: "var(--mui-tel-input-flag-height)",
+      width: "calc(var(--mui-tel-input-flag-height)*3/2)"
     };
   }),
   Span: styled("span")(() => {
@@ -290,6 +290,7 @@ const Flag = (props) => {
   const svgFlag = isoCode && isoCode in FLAGS_SVG ? `"${FLAGS_SVG[isoCode]}"` : unknownFlag;
   return /* @__PURE__ */ jsx(Styled$1.Flag, {
     "data-testid": isoCode,
+    className: "MuiTelInput-Flag",
     style: {
       backgroundImage: `url(${svgFlag})`
     },
@@ -309,6 +310,7 @@ const FlagButton = (props) => {
   if (disableDropdown) {
     return /* @__PURE__ */ jsx(IconButton, {
       tabIndex: -1,
+      className: "MuiTelInput-IconButton",
       role: "",
       disableRipple: true,
       sx: {
@@ -323,6 +325,7 @@ const FlagButton = (props) => {
   return /* @__PURE__ */ jsx(IconButton, {
     ...iconButtonProps,
     "aria-label": "Select country",
+    className: "MuiTelInput-Flag",
     "aria-haspopup": "listbox",
     "aria-controls": isFlagsMenuOpened ? "select-country" : void 0,
     "aria-expanded": isFlagsMenuOpened ? "true" : "false",
@@ -10422,15 +10425,19 @@ const FlagMenuItem = (props) => {
     onClick: handleClick,
     role: "option",
     "data-testid": `option-${isoCode}`,
+    className: "MuiTelInput-MenuItem",
     children: [/* @__PURE__ */ jsx(Styled.ListItemIcon, {
+      className: "MuiTelInput-ListItemIcon-country-code",
       children: /* @__PURE__ */ jsx(Flag, {
         isoCode
       })
     }), /* @__PURE__ */ jsx(Styled.ListItemText, {
+      className: "MuiTelInput-ListItemText-country",
       children: countryName
     }), /* @__PURE__ */ jsxs(Typography, {
       variant: "body2",
       color: "text.secondary",
+      className: "MuiTelInput-Typography-calling-code",
       children: ["+", COUNTRIES[isoCode][0]]
     })]
   });
@@ -10818,6 +10825,7 @@ const FlagsMenu = (props) => {
     anchorEl,
     open: Boolean(anchorEl),
     id: "select-country",
+    className: "MuiTelInput-Menu",
     MenuListProps: {
       role: "listbox",
       "aria-activedescendant": isoCode ? `country-${isoCode}` : "",
@@ -16331,6 +16339,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
     continents,
     preferredCountries,
     MenuProps,
+    className,
     ...restTextFieldProps
   } = props;
   const textFieldRef = React.useRef(null);
@@ -16420,6 +16429,7 @@ const MuiTelInput = React.forwardRef((props, propRef) => {
       ref: handleRef,
       onDoubleClick: handleDoubleClick,
       inputRef: handleRefInput,
+      className: `MuiTelInput-TextField ${className || ""}`,
       onChange: onInputChange,
       inputProps: {
         onCopy: handleCopy,