@getpara/react-sdk-lite 2.0.0-alpha.33

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -0,0 +1,237 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useAddFunds } from "./AddFundsContext.js";
+import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
+import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
+import { getAssetCode, getNetworkName } from "../../constants/constants.js";
+import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { safeStyled } from "@getpara/react-common";
+import { contentMotionProps, NoProviders } from "./common.js";
+import { AnimatePresence, motion, useIsPresent } from "framer-motion";
+import { AddFundsAsset } from "./AddFundsAsset.js";
+function NetworkPill({
+  network,
+  gap = "4px",
+  slot,
+  start,
+  fix = false
+}) {
+  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
+    start,
+    /* @__PURE__ */ jsx(NetworkIcon, { network, size: "24px" }),
+    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getNetworkName(network) })
+  ] }));
+}
+function AssetPill({ asset, gap = "4px", slot, fix }) {
+  if (!asset) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
+    /* @__PURE__ */ jsx(AssetIcon, { asset, size: "24px" }),
+    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getAssetCode(asset) })
+  ] }));
+}
+const NetworkLabel = /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", style: { margin: "0 8px" }, children: "Network" });
+function AddFundsSettings() {
+  const isPresent = useIsPresent();
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const {
+    assets,
+    networks,
+    asset,
+    setAsset,
+    network,
+    setNetwork,
+    fiatQuantity,
+    setFiatQuantity,
+    onRampConfig,
+    activeWallet,
+    isProviderAllowed,
+    tab
+  } = useAddFunds();
+  const [value, setValue] = useState(parseFloat(fiatQuantity || "25.00").toFixed(2));
+  const narrowedNetworks = useMemo(() => {
+    return !asset ? networks : getOnRampNetworks(onRampConfig.assetInfo, {
+      walletType: activeWallet == null ? void 0 : activeWallet.type,
+      allowed: onRampConfig.allowedAssets ? Object.entries(onRampConfig.allowedAssets).filter(([_, value2]) => value2 === true || value2.includes(asset)).map(([key]) => key) : void 0,
+      assets: [asset],
+      providers: onRampConfig.providers,
+      action: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL
+    });
+  }, [networks, network, asset, activeWallet == null ? void 0 : activeWallet.type, onRampConfig.providers, tab]);
+  const content = useMemo(() => {
+    if (!!asset && Object.values(isProviderAllowed).every((v) => !v) || assets.length === 0) {
+      return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
+        "No providers are available for this ",
+        hideWallets ? "account" : "wallet"
+      ] }) }), "noProviders");
+    }
+    return !!asset ? /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: assets.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CpslRow, { children: [
+        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: assets.length > 1 ? /* @__PURE__ */ jsxs(
+          HeaderSelect,
+          {
+            selectedValue: asset,
+            onCpslSelectValueChange: (e) => {
+              setAsset(e.detail);
+            },
+            showFormattedSelectedItem: true,
+            placeholder: "Choose asset...",
+            anchorElId: "inputContainer",
+            $width: 160,
+            autoWidth: true,
+            selectedItemVariant: "bodyXS",
+            children: [
+              asset && /* @__PURE__ */ jsx(AssetPill, { asset, slot: "selected-item" }),
+              assets.map((a) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: a, children: /* @__PURE__ */ jsx(AssetPill, { gap: "8px", asset: a }) }, a))
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(AssetPill, { asset, fix: true }) }),
+        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: narrowedNetworks.length > 1 ? /* @__PURE__ */ jsxs(
+          HeaderSelect,
+          {
+            selectedValue: network,
+            onCpslSelectValueChange: (e) => {
+              setNetwork(e.detail);
+            },
+            showFormattedSelectedItem: true,
+            placeholder: "Choose network...",
+            $width: 160,
+            autoWidth: true,
+            selectedItemVariant: "bodyXS",
+            children: [
+              network && /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, slot: "selected-item" }),
+              narrowedNetworks.map((n) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: n, children: /* @__PURE__ */ jsx(NetworkPill, { gap: "8px", network: n }) }, n))
+            ]
+          }
+        ) : network ? /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, fix: true }) : null })
+      ] }),
+      /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "16px", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: value || "",
+            fitContent: true,
+            autoselect: true,
+            onKeyDown: (e) => {
+              if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift"].includes(e.key)) {
+                e.preventDefault();
+              }
+            },
+            onChange: (e) => {
+              var _a;
+              const numericValue = (((_a = e.currentTarget) == null ? void 0 : _a.value) || "").replace(/[^0-9.]/g, "");
+              if (numericValue !== "") {
+                const formattedValue = parseFloat(numericValue).toFixed(2);
+                setValue(formattedValue);
+              } else {
+                setValue(null);
+              }
+            },
+            onBlur: (e) => {
+              const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
+              if (numericValue === "") {
+                setValue(null);
+              } else {
+                setValue(parseFloat(numericValue).toFixed(2));
+              }
+            },
+            placeholder: "0",
+            children: /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: "$" })
+          },
+          value || ""
+        ),
+        /* @__PURE__ */ jsx(CpslRow, { style: { width: "100%" }, children: ["25", "50", "100"].map((quantity) => {
+          return /* @__PURE__ */ jsxs(PresetButton, { fullWidth: true, variant: "secondary", onClick: () => setValue(`${quantity}.00`), children: [
+            "$",
+            quantity
+          ] }, quantity);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          disabled: value === "",
+          onClick: () => {
+            setFiatQuantity(value != null ? value : void 0);
+            setOnRampStep(OnRampStep.PROVIDER);
+          },
+          children: [
+            "Continue",
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
+          ]
+        }
+      )
+    ] }) }), "quantity") : /* @__PURE__ */ jsx(AssetContainer, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsx(AddFundsAsset, {}) }), "asset");
+  }, [asset, network, assets, narrowedNetworks, isProviderAllowed, isPresent, value]);
+  useEffect(() => {
+    if (!network || !narrowedNetworks.includes(network)) {
+      setNetwork(narrowedNetworks[0]);
+    }
+  }, [narrowedNetworks, network, tab]);
+  useEffect(() => {
+    if (!!asset && !assets.includes(asset)) {
+      setAsset(assets[0]);
+    }
+  }, [assets, asset, tab]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: content });
+}
+const Container = safeStyled(motion.div)`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  position: relative;
+  height: 320px;
+  ${({ isPresent }) => isPresent ? "transform: none !important;" : ""};
+
+  & > * {
+    width: 100%;
+  }
+`;
+const AssetContainer = safeStyled(Container)`
+  gap: 8px;
+`;
+const CurrencySign = safeStyled.div`
+  font-size: 72px;
+  color: var(--cpsl-color-text-primary);
+  position: relative;
+  right: -16px;
+`;
+const PresetButton = safeStyled(CpslButton)`
+  --button-color: var(--cpsl-color-text-contrast);
+  --button-font-size: 24px;
+  --button-secondary-background-color: var(--cpsl-color-background-8);
+  --button-secondary-border-color: var(--cpsl-color-background-8);
+  --button-secondary-hover-color: var(--cpsl-color-text-contrast);
+  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
+  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
+  flex: 1;
+`;
+const Input = safeStyled(CpslInput)`
+  --container-background-color: transparent;
+  --container-height: 90px;
+  --container-border-width: 0;
+  --input-background-color: transparent;
+  --input-font-size: 72px;
+  --input-text-align: center;
+  --input-width: 100%;
+`;
+export {
+  AddFundsSettings
+};

package/dist/modal/components/AddFunds/MoonPayEmbed.d.ts

@@ -0,0 +1,2 @@
+import { MoonPayEmbed } from '@getpara/react-common';
+export default MoonPayEmbed;

package/dist/modal/components/AddFunds/MoonPayEmbed.js

@@ -0,0 +1,7 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { MoonPayEmbed } from "@getpara/react-common";
+var MoonPayEmbed_default = MoonPayEmbed;
+export {
+  MoonPayEmbed_default as default
+};

package/dist/modal/components/AddFunds/common.d.ts

@@ -0,0 +1,19 @@
+export declare const contentMotionProps: {
+    transition: {
+        duration: number;
+    };
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const NoProviders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
+}, {
+    isHidden?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/modal/components/AddFunds/common.js

@@ -0,0 +1,24 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { CpslText } from "@getpara/react-components";
+import { safeStyled } from "@getpara/react-common";
+const contentMotionProps = {
+  transition: { duration: 0.2 },
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+const NoProviders = safeStyled(CpslText)`
+  width: 100%;
+  text-align: center;
+  visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: visibility 0.2s;
+`;
+export {
+  NoProviders,
+  contentMotionProps
+};

package/dist/modal/components/AddFunds/index.d.ts

@@ -0,0 +1,3 @@
+export * from './AddFunds.js';
+export * from './AddFundsAwaiting.js';
+export * from './AddFundsDone.js';

package/dist/modal/components/AddFunds/index.js

@@ -0,0 +1,4 @@
+"use client";
+export * from "./AddFunds.js";
+export * from "./AddFundsAwaiting.js";
+export * from "./AddFundsDone.js";

package/dist/modal/components/AuthInput/AuthInput.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { Auth } from '@getpara/user-management-client';
+type ChildProps = {
+    isPending: boolean;
+    isSubmitting: boolean;
+    onSubmit: () => void;
+};
+type AuthInputProps = {
+    defaultAuth?: Auth<'email' | 'phone'>;
+    onSubmit: (_: Auth<'email' | 'phone'>) => void;
+    isSubmitting: boolean;
+    disableEmailLogin?: boolean;
+    disablePhoneLogin?: boolean;
+    disableSubmitButton?: boolean;
+    children?: (_: ChildProps) => ReactNode;
+    error?: string | null;
+    sticky?: boolean;
+};
+export declare const AuthInput: ({ defaultAuth, disableEmailLogin, disablePhoneLogin, onSubmit: _onSubmit, isSubmitting, disableSubmitButton, children: Children, error: propsError, sticky, }: AuthInputProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/modal/components/AuthInput/AuthInput.js

@@ -0,0 +1,277 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  CpslButton,
+  CpslIcon,
+  CpslInput,
+  CpslSelect,
+  CpslSelectItem,
+  CpslSpinner,
+  CpslText
+} from "@getpara/react-components";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { safeStyled } from "@getpara/react-common";
+import countryCodes from "../../utils/countryCodes.js";
+import { MOBILE_SIZE } from "../../constants/constants.js";
+import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
+import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
+import { extractAuthInfo } from "@getpara/user-management-client";
+import parsePhoneNumberFromString from "libphonenumber-js";
+import { isCcMatch, validateInput } from "../../utils/authInputHelpers.js";
+const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
+const AuthInput = ({
+  defaultAuth,
+  disableEmailLogin,
+  disablePhoneLogin,
+  onSubmit: _onSubmit,
+  isSubmitting,
+  disableSubmitButton,
+  children: Children,
+  error: propsError,
+  sticky = false
+}) => {
+  var _a, _b, _c;
+  const inputRef = useRef(null);
+  const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
+  const [authInfo, storedNationalNumber, storedCountryCode] = useMemo(() => {
+    if (!defaultAuth) {
+      return [void 0, void 0, void 0];
+    }
+    const authInfo2 = extractAuthInfo(defaultAuth);
+    if (!authInfo2 || (authInfo2 == null ? void 0 : authInfo2.authType) !== "phone") {
+      return [authInfo2, void 0, void 0];
+    }
+    const parsed = parsePhoneNumberFromString(authInfo2.identifier);
+    return [authInfo2, parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
+  }, [defaultAuth]);
+  const [countryCode, setCountryCode] = useState(storedCountryCode != null ? storedCountryCode : "+1");
+  const [identifier, setIdentifier] = useState(
+    (() => {
+      if (!(authInfo == null ? void 0 : authInfo.authType) || ["telegram", "farcaster", "externalWallet"].includes(authInfo == null ? void 0 : authInfo.authType)) {
+        return "";
+      }
+      if (authInfo.authType !== "phone") {
+        return authInfo.identifier;
+      }
+      return storedNationalNumber != null ? storedNationalNumber : "";
+    })()
+  );
+  const [identifierType, setIdentifierType] = useState(
+    authInfo && (authInfo.authType === "email" || authInfo.authType === "phone") ? authInfo.authType : void 0
+  );
+  const [matchedCountryCode, setMatchedCountryCode] = useState(
+    (_a = countryCodes.find((option) => isCcMatch(countryCode, option))) != null ? _a : DEFAULT_COUNTRY
+  );
+  const [error, setError] = useState(propsError || void 0);
+  const [isPending, setIsPending] = useState(isSubmitting || false);
+  const [search, setSearch] = useState("");
+  const setCountryCodes = (countyCodeInput) => {
+    setCountryCode(countyCodeInput.value);
+    setMatchedCountryCode(countyCodeInput);
+  };
+  const isEmail = identifierType === "email";
+  const isPhone = identifierType === "phone";
+  const isUnknown = !identifierType;
+  const filteredCountryCodes = search ? countryCodes.filter(
+    (cc) => cc.selectedLabel.toLowerCase().includes(search.toLowerCase()) || cc.label.toLowerCase().includes(search.toLowerCase()) || cc.value.toLowerCase().includes(search.toLowerCase())
+  ) : countryCodes;
+  const handleSearchInput = (ev) => {
+    setSearch(ev.detail);
+  };
+  const handleIdentifierInput = (ev) => {
+    var _a2;
+    if (!sticky) {
+      setError(void 0);
+    }
+    const newIdentifier = (_a2 = ev.detail.value) != null ? _a2 : "";
+    let isNewPhone = false, isNewEmail = false;
+    if (!disablePhoneLogin) {
+      const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(newIdentifier, option));
+      if (countryCodeInputMatch) {
+        setCountryCodes(countryCodeInputMatch);
+        setIdentifierType("phone");
+        setIdentifier("");
+        return;
+      }
+      isNewPhone = !isEmail && isPhone ? /\d+$/.test(newIdentifier) : /\d\d\d+$/.test(newIdentifier);
+    }
+    if (!disableEmailLogin) {
+      isNewEmail = /\D.*$/.test(newIdentifier);
+    }
+    setIdentifierType(isNewEmail ? "email" : isNewPhone ? "phone" : void 0);
+    setIdentifier(newIdentifier);
+  };
+  const handleCountryCodeInput = (ev) => {
+    const matchedCountryCode2 = countryCodes.find((code) => code.selectedLabel === ev.detail);
+    if (matchedCountryCode2) {
+      setCountryCodes(matchedCountryCode2);
+    }
+  };
+  const onSubmit = () => __async(void 0, null, function* () {
+    setError(void 0);
+    try {
+      const auth = validateInput(identifier, countryCode, identifierType);
+      _onSubmit(auth);
+    } catch (err) {
+      setError(err.message);
+    }
+  });
+  useEffect(() => {
+    setIsPending(isSubmitting);
+  }, [isSubmitting]);
+  useEffect(() => {
+    if (propsError === null || propsError === void 0 && !sticky) {
+      setError(void 0);
+    }
+    if (propsError) {
+      setError(propsError);
+      setIsPending(false);
+    }
+  }, [propsError, sticky]);
+  useEffect(() => {
+    if (!sticky || isSubmitting) {
+      setIsPending(isSubmitting);
+    }
+  }, [error]);
+  if (disableEmailLogin && disablePhoneLogin) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => __async(void 0, null, function* () {
+        e.preventDefault();
+        onSubmit();
+      }),
+      style: { width: "100%" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          StyledInput,
+          {
+            ref: inputRef,
+            id: "authInput",
+            placeholder: isEmail || disablePhoneLogin ? "Enter email" : isPhone || disableEmailLogin ? "Enter phone" : "Enter email or phone",
+            onCpslInput: handleIdentifierInput,
+            value: identifier,
+            errorText: error,
+            autofocus: true,
+            inputMode: "email",
+            onKeyDown: (e) => __async(void 0, null, function* () {
+              return e.key === "Enter" && onSubmit();
+            }),
+            contrastText: true,
+            isPhone,
+            mask: identifierType === "phone" ? (_c = phoneMasks[(_b = matchedCountryCode.selectedLabel) != null ? _b : ""]) != null ? _c : defaultPhoneMask : void 0,
+            enterkeyhint: "go",
+            noAutoDisable: true,
+            disabled: isPending,
+            "data-testid": "auth-input",
+            children: [
+              /* @__PURE__ */ jsxs(IconContainer, { slot: "start", children: [
+                !disableEmailLogin && (isUnknown || isEmail) && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "email", icon: "mail" }),
+                !disablePhoneLogin && isUnknown && /* @__PURE__ */ jsx(CpslIcon, { "aria-label": "phone", icon: "phone" }),
+                isPhone && /* @__PURE__ */ jsxs(
+                  CountryCodeSelect,
+                  {
+                    selectedValue: matchedCountryCode.selectedLabel,
+                    onCpslSelectValueChange: handleCountryCodeInput,
+                    showFormattedSelectedItem: true,
+                    autoWidth: true,
+                    dropdownMaxHeight,
+                    anchorElId: "authInput",
+                    $width: dropdownWidth != null ? dropdownWidth : 0,
+                    showSearch: true,
+                    searchPlaceholder: "Search Countries",
+                    onCpslSearchChange: handleSearchInput,
+                    "data-testid": "country-code-select",
+                    children: [
+                      matchedCountryCode && /* @__PURE__ */ jsxs(SelectedItem, { slot: "selected-item", children: [
+                        /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.selectedLabel }),
+                        /* @__PURE__ */ jsx(CpslText, { children: matchedCountryCode.value })
+                      ] }),
+                      filteredCountryCodes.map((cc) => /* @__PURE__ */ jsxs(StyledSelectItem, { slot: "items", value: cc.selectedLabel, children: [
+                        /* @__PURE__ */ jsx(CpslText, { children: cc.label }),
+                        /* @__PURE__ */ jsx(CpslText, { children: cc.value })
+                      ] }, cc.selectedLabel))
+                    ]
+                  }
+                )
+              ] }),
+              identifier && !disableSubmitButton && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
+            ]
+          },
+          "email"
+        ),
+        Children && /* @__PURE__ */ jsx(ChildContainer, { children: /* @__PURE__ */ jsx(Children, { onSubmit, isPending, isSubmitting: isPending }) })
+      ]
+    }
+  );
+};
+const IconContainer = safeStyled.div`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-right: 12px;
+  border-right: 1px solid var(--cpsl-color-background-16);
+
+  & cpsl-icon {
+    --icon-color: var(--cpsl-color-contrast);
+  }
+`;
+const CountryCodeSelect = safeStyled(CpslSelect)`
+  --container-height: 100%;
+  --container-padding-start: 0px;
+  --container-padding-end: 0px;
+  --container-border-width: 0px;
+  --container-gap: 4px;
+  --container-background-color: transparent;
+  --container-box-shadow: none;
+
+  &::part(dropdown) {
+    width: ${({ $width }) => `${$width - 2}px`};
+  }
+
+  &::part(popover) {
+    @media (max-width: ${MOBILE_SIZE}px) {
+      top: unset !important;
+      bottom: 16px;
+    }
+
+    cpsl-auth-modal.force-mobile-media & {
+      top: unset !important;
+      bottom: 16px;
+    }
+  }
+`;
+const StyledSelectItem = safeStyled(CpslSelectItem)`
+  &::part(inner-container) {
+    justify-content: space-between;
+  }
+`;
+const SelectedItem = safeStyled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const StyledInput = safeStyled(CpslInput)`
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: var(--cpsl-color-background-8);
+  --container-padding-end: 8px;
+  width: 100%;
+`;
+const ChildContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 24px;
+  width: 100%;
+`;
+export {
+  AuthInput
+};

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
+    dropdownMaxHeight: number | undefined;
+    dropdownWidth: number | undefined;
+    mobileAnchor: number | undefined;
+    resize: () => void;
+};

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -0,0 +1,33 @@
+"use client";
+import "../../../../chunk-MMUBH76A.js";
+import { useEffect, useState } from "react";
+const useDropdownPosition = (inputRef) => {
+  const [dropdownMaxHeight, setDropdownMaxHeight] = useState();
+  const [dropdownWidth, setDropdownWidth] = useState();
+  const [mobileAnchor, setMobileAnchor] = useState();
+  const resize = () => {
+    var _a, _b, _c, _d;
+    if (typeof window !== "undefined") {
+      const newMaxHeight = Math.max(
+        window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
+        window.innerHeight * 0.25
+      );
+      setDropdownMaxHeight(newMaxHeight);
+      setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
+      setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
+    }
+  };
+  if (inputRef.current && !dropdownMaxHeight) {
+    resize();
+  }
+  useEffect(() => {
+    typeof window !== "undefined" && window.addEventListener("resize", resize);
+    return () => {
+      typeof window !== "undefined" && window.removeEventListener("resize", resize);
+    };
+  }, []);
+  return { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize };
+};
+export {
+  useDropdownPosition
+};