@blocklet/payment-react 1.14.21 → 1.14.22

package/lib/payment/form/address.js

@@ -8,66 +8,70 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
 var _reactHookForm = require("react-hook-form");
-var _reactInternationalPhone = require("react-international-phone");
 var _input = _interopRequireDefault(require("../../components/input"));
+var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+AddressForm.defaultProps = {
+  sx: {}
+};
 function AddressForm({
   mode,
-  stripe
+  stripe,
+  sx = {}
 }) {
   const {
     t
   } = (0, _context.useLocaleContext)();
   const {
-    control,
-    setValue
+    control
   } = (0, _reactHookForm.useFormContext)();
   if (mode === "required") {
     return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-payment-address cko-payment-form",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            mb: 1,
-            color: "text.primary",
-            fontWeight: 600
-          },
+        sx,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          className: "base-label",
           children: t(`payment.checkout.billing.${mode}`)
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
             direction: "row",
             spacing: 0,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-              name: "billing_address.country",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.CountrySelector, {
-                selectedCountry: field.value,
-                onSelect: ({
-                  iso2
-                }) => setValue(field.name, iso2),
-                buttonStyle: {
-                  width: "64px",
-                  height: "40px",
-                  border: "1px solid #ccc",
-                  marginLeft: -1,
-                  marginTop: -1
-                }
-              })
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
               name: "billing_address.postal_code",
               rules: {
                 required: t("payment.checkout.required")
               },
               errorPosition: "right",
               variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code")
-            })]
+              placeholder: t("payment.checkout.billing.postal_code"),
+              InputProps: {
+                startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                  position: "start",
+                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                    name: "billing_address.country",
+                    control,
+                    render: ({
+                      field
+                    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                      ...field,
+                      sx: {
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                          borderColor: "transparent"
+                        }
+                      }
+                    })
+                  })
+                })
+              }
+            })
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.billing.state")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.state",
             rules: {
@@ -76,6 +80,9 @@ function AddressForm({
             errorPosition: "right",
             variant: "outlined",
             placeholder: t("payment.checkout.billing.state")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.billing.line1")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.line1",
             rules: {
@@ -84,6 +91,9 @@ function AddressForm({
             errorPosition: "right",
             variant: "outlined",
             placeholder: t("payment.checkout.billing.line1")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.billing.city")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "billing_address.city",
             rules: {
@@ -102,39 +112,18 @@ function AddressForm({
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-payment-address cko-payment-form",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            mb: 1,
-            color: "text.primary",
-            fontWeight: 600
-          },
+        sx,
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+          className: "base-label",
           children: t(`payment.checkout.billing.${mode}`)
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
             direction: "row",
             spacing: 0,
-            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-              name: "billing_address.country",
-              control,
-              render: ({
-                field
-              }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.CountrySelector, {
-                selectedCountry: field.value,
-                onSelect: ({
-                  iso2
-                }) => setValue(field.name, iso2),
-                buttonStyle: {
-                  width: "64px",
-                  height: "40px",
-                  border: "1px solid #ccc",
-                  marginLeft: -1,
-                  marginTop: -1
-                }
-              })
-            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+            children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
               name: "billing_address.postal_code",
               rules: {
                 required: t("payment.checkout.required")
@@ -144,8 +133,27 @@ function AddressForm({
               placeholder: t("payment.checkout.billing.postal_code"),
               wrapperStyle: {
                 height: "40px"
+              },
+              InputProps: {
+                startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
+                  position: "start",
+                  children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                    name: "billing_address.country",
+                    control,
+                    render: ({
+                      field
+                    }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
+                      ...field,
+                      sx: {
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                          borderColor: "transparent"
+                        }
+                      }
+                    })
+                  })
+                })
               }
-            })]
+            })
           })
         })]
       })

package/lib/payment/form/currency.js

@@ -16,8 +16,9 @@ function CurrencySelector({
     count: currencies.length,
     style: {
       display: currencies.length > 1 ? "grid" : "block",
-      gridTemplateColumns: "50% 50%",
-      width: "100%"
+      width: "100%",
+      gap: 12,
+      gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
     },
     children: currencies.map((x, i) => {
       const selected = i === value;
@@ -28,30 +29,41 @@ function CurrencySelector({
         children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "row",
           alignItems: "center",
+          sx: {
+            position: "relative"
+          },
           children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Avatar, {
             src: x.logo,
             alt: x.name,
             sx: {
-              width: 30,
-              height: 30,
-              marginRight: "10px"
+              width: 40,
+              height: 40,
+              marginRight: "12px"
             }
           }), /* @__PURE__ */(0, _jsxRuntime.jsxs)("div", {
             children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               variant: "h5",
               component: "div",
               sx: {
-                fontSize: "18px"
+                fontSize: "16px",
+                color: "text.primary",
+                fontWeight: "500"
               },
               children: x.symbol
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
               sx: {
                 fontSize: 14
               },
-              color: "text.secondary",
+              color: "text.lighter",
               gutterBottom: true,
               children: x.method.name
             })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Radio, {
+            checked: selected,
+            sx: {
+              position: "absolute",
+              right: 0
+            }
           })]
         })
       }, x.id);
@@ -61,32 +73,27 @@ function CurrencySelector({
 const Root = (0, _system.styled)("section")`
   .cko-payment-card {
     position: relative;
-    border: 1px solid ${props => props.theme.palette.primary.main};
+    border: 1px solid var(--stroke-border-interactive, #0086ff);
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: 12px solid ${props => props.theme.palette.primary.main};
-    border-top-color: transparent;
-    border-left-color: transparent;
-  }
+  // .cko-payment-card::before {
+  //   content: '';
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   border: 12px solid ${props => props.theme.palette.primary.main};
+  //   border-top-color: transparent;
+  //   border-left-color: transparent;
+  // }
 
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd),
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: ${props => props.count > 1 ? 8 : 0}px;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
   .cko-payment-card::after {

package/lib/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, mode, action, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }

package/lib/payment/form/index.js

@@ -7,7 +7,6 @@ module.exports = PaymentForm;
 var _jsxRuntime = require("react/jsx-runtime");
 require("react-international-phone/style.css");
 var _context = require("@arcblock/ux/lib/Locale/context");
-var _Theme = require("@arcblock/ux/lib/Theme");
 var _Toast = _interopRequireDefault(require("@arcblock/ux/lib/Toast"));
 var _lab = require("@mui/lab");
 var _material = require("@mui/material");
@@ -25,7 +24,6 @@ var _payment = require("../../contexts/payment");
 var _subscription = require("../../hooks/subscription");
 var _api = _interopRequireDefault(require("../../libs/api"));
 var _util = require("../../libs/util");
-var _addon = _interopRequireDefault(require("./addon"));
 var _address = _interopRequireDefault(require("./address"));
 var _currency = _interopRequireDefault(require("./currency"));
 var _phone = _interopRequireDefault(require("./phone"));
@@ -62,16 +60,16 @@ function PaymentForm({
   customer,
   onPaid,
   onError,
-  mode,
+  // mode,
   action
 }) {
-  const theme = (0, _Theme.useTheme)();
   const {
     t
   } = (0, _context.useLocaleContext)();
   const {
     session,
-    connect
+    connect,
+    payable
   } = (0, _payment.usePaymentContext)();
   const subscription = (0, _subscription.useSubscription)("events");
   const {
@@ -148,15 +146,6 @@ function PaymentForm({
     control,
     name: "payment_method"
   });
-  const domSize = (0, _ahooks.useSize)(document.body);
-  const isColumnLayout = (0, _ahooks.useCreation)(() => {
-    if (domSize) {
-      if (domSize?.width <= theme.breakpoints.values.md) {
-        return true;
-      }
-    }
-    return false;
-  }, [domSize, theme]);
   const afterUserLoggedIn = (0, _ahooks.useMemoizedFn)(() => {
     if (hasDidWallet(session.user)) {
       handleSubmit(onFormSubmit, onFormError)();
@@ -370,37 +359,77 @@ function PaymentForm({
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
         className: "cko-payment-contact",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          title: t("payment.checkout.paymentDetails"),
+          sx: {
+            color: "text.primary",
+            fontSize: {
+              xs: "18px",
+              md: "24px"
+            },
+            fontWeight: "700",
+            lineHeight: "32px",
+            mb: 2.5
+          },
+          children: t("payment.checkout.paymentDetails")
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
+          in: true,
+          children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "column",
+            alignItems: "flex-start",
+            className: "cko-payment-methods",
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
+              direction: "row",
+              sx: {
+                width: "100%"
+              },
+              children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
+                name: "payment_currency",
+                control,
+                render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
+                  value: paymentCurrencyIndex,
+                  currencies,
+                  onChange: setPaymentCurrencyIndex
+                })
+              })
+            }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
+              clientSecret: state.stripeContext.client_secret,
+              intentType: state.stripeContext.intent_type,
+              publicKey: method.settings.stripe?.publishable_key,
+              customer: state.customer,
+              mode: checkoutSession.mode,
+              onConfirm: onStripeConfirm,
+              onCancel: onStripeCancel
+            })]
+          })
+        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
           direction: "row",
           sx: {
             mb: 1
           },
           alignItems: "center",
-          justifyContent: "space-between",
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-            sx: {
-              color: "text.secondary",
-              fontWeight: 600
-            },
-            children: t("payment.checkout.contact")
-          }), isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */(0, _jsxRuntime.jsx)(_addon.default, {})]
+          justifyContent: "space-between"
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
           direction: "column",
           className: "cko-payment-form",
           spacing: 0,
-          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
+          sx: {
+            flex: 1,
+            overflow: "auto"
+          },
+          children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.customer.name")
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_name",
             variant: "outlined",
             errorPosition: "right",
             rules: {
               required: t("payment.checkout.required")
-            },
-            InputProps: {
-              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-                position: "start",
-                children: t("payment.checkout.customer.name")
-              })
             }
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+            className: "base-label",
+            children: t("payment.checkout.customer.email")
           }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_input.default, {
             name: "customer_email",
             variant: "outlined",
@@ -408,71 +437,42 @@ function PaymentForm({
             rules: {
               required: t("payment.checkout.required"),
               validate: x => (0, _isEmail.default)(x) ? true : t("payment.checkout.invalid")
-            },
-            InputProps: {
-              startAdornment: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.InputAdornment, {
-                position: "start",
-                children: t("payment.checkout.customer.email")
-              })
             }
-          }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
-            name: "customer_phone",
-            variant: "outlined",
-            errorPosition: "right",
-            placeholder: "Phone number",
-            rules: {
-              required: t("payment.checkout.required"),
-              validate: x => {
-                try {
-                  const parsed = phoneUtil.parseAndKeepRawInput(x);
-                  return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                } catch {
-                  return t("payment.checkout.invalid");
+          }), checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.FormLabel, {
+              className: "base-label",
+              children: t("payment.checkout.customer.phone")
+            }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_phone.default, {
+              name: "customer_phone",
+              variant: "outlined",
+              errorPosition: "right",
+              placeholder: "Phone number",
+              rules: {
+                required: t("payment.checkout.required"),
+                validate: x => {
+                  try {
+                    const parsed = phoneUtil.parseAndKeepRawInput(x);
+                    return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
+                  } catch {
+                    return t("payment.checkout.invalid");
+                  }
                 }
               }
+            })]
+          }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
+            mode: checkoutSession.billing_address_collection,
+            stripe: method?.type === "stripe",
+            sx: {
+              marginTop: "0 !important"
             }
           })]
         })]
       })
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_address.default, {
-      mode: checkoutSession.billing_address_collection,
-      stripe: method?.type === "stripe"
-    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
-      in: true,
-      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
-        direction: "column",
-        alignItems: "flex-start",
-        className: "cko-payment-methods",
-        children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-          sx: {
-            color: "text.secondary",
-            fontWeight: 600
-          },
-          children: t("payment.checkout.method")
-        }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Stack, {
-          direction: "row",
-          sx: {
-            width: "100%"
-          },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactHookForm.Controller, {
-            name: "payment_currency",
-            control,
-            render: () => /* @__PURE__ */(0, _jsxRuntime.jsx)(_currency.default, {
-              value: paymentCurrencyIndex,
-              currencies,
-              onChange: setPaymentCurrencyIndex
-            })
-          })
-        }), state.stripePaying && state.stripeContext && /* @__PURE__ */(0, _jsxRuntime.jsx)(_stripe.default, {
-          clientSecret: state.stripeContext.client_secret,
-          intentType: state.stripeContext.intent_type,
-          publicKey: method.settings.stripe?.publishable_key,
-          customer: state.customer,
-          mode: checkoutSession.mode,
-          onConfirm: onStripeConfirm,
-          onCancel: onStripeCancel
-        })]
-      })
+    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Divider, {
+      sx: {
+        mt: 2.5,
+        mb: 2.5
+      }
     }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Fade, {
       in: true,
       children: /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -484,16 +484,15 @@ function PaymentForm({
           className: "cko-submit-button",
           onClick: onAction,
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus,
+          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }), ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           sx: {
-            mt: 1,
-            color: "text.secondary",
+            mt: 2.5,
+            color: "text.lighter",
             fontSize: "0.9rem",
-            lineHeight: "1.1rem",
-            textAlign: "center"
+            lineHeight: "1.1rem"
           },
           children: t("payment.checkout.confirm", {
             payee

package/lib/payment/form/phone.js

@@ -12,6 +12,7 @@ var _reactHookForm = require("react-hook-form");
 var _reactInternationalPhone = require("react-international-phone");
 var _input = _interopRequireDefault(require("../../components/input"));
 var _util = require("../../libs/util");
+var _countrySelect = _interopRequireDefault(require("../../components/country-select"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function PhoneInput({
   ...props
@@ -35,6 +36,7 @@ function PhoneInput({
     countries: _reactInternationalPhone.defaultCountries,
     onChange: data => {
       setValue(props.name, data.phone);
+      setValue(countryFieldName, data.country);
     }
   });
   const userCountry = (0, _reactHookForm.useWatch)({
@@ -46,9 +48,9 @@ function PhoneInput({
       setCountry(userCountry);
     }
   }, [userCountry]);
-  const onCountryChange = e => {
-    setCountry(e.target.value);
-    setValue(countryFieldName, e.target.value);
+  const onCountryChange = v => {
+    setCountry(v);
+    setValue(countryFieldName, v);
   };
   return (
     // @ts-ignore
@@ -65,65 +67,15 @@ function PhoneInput({
             marginRight: "2px",
             marginLeft: "-8px"
           },
-          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Select, {
-            MenuProps: {
-              style: {
-                height: "300px",
-                width: "360px",
-                top: "10px",
-                left: "-34px"
-              },
-              transformOrigin: {
-                vertical: "top",
-                horizontal: "left"
-              }
-            },
-            sx: {
-              width: "max-content",
-              // Remove default outline (display only on focus)
-              fieldset: {
-                display: "none"
-              },
-              '&.Mui-focused:has(div[aria-expanded="false"])': {
-                fieldset: {
-                  display: "block"
-                }
-              },
-              // Update default spacing
-              ".MuiSelect-select": {
-                padding: "8px",
-                paddingRight: "24px !important"
-              },
-              svg: {
-                right: 0
-              }
-            },
+          children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
             value: country,
             onChange: onCountryChange,
-            renderValue: code => /* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-              iso2: code,
-              style: {
-                display: "flex"
+            name: countryFieldName,
+            sx: {
+              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                borderColor: "transparent"
               }
-            }),
-            children: _reactInternationalPhone.defaultCountries.map(c => {
-              const parsed = (0, _reactInternationalPhone.parseCountry)(c);
-              return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.MenuItem, {
-                value: parsed.iso2,
-                children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_reactInternationalPhone.FlagEmoji, {
-                  iso2: parsed.iso2,
-                  style: {
-                    marginRight: "8px"
-                  }
-                }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
-                  marginRight: "8px",
-                  children: parsed.name
-                }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Typography, {
-                  color: "gray",
-                  children: ["+", parsed.dialCode]
-                })]
-              }, parsed.iso2);
-            })
+            }
           })
         })
       },