@getpara/react-sdk 2.0.0-alpha.7 → 2.0.0-alpha.71

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

@@ -1,237 +0,0 @@
-"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 styled from "styled-components";
-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 = styled(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 = styled(Container)`
-  gap: 8px;
-`;
-const CurrencySign = styled.div`
-  font-size: 72px;
-  color: var(--cpsl-color-text-primary);
-  position: relative;
-  right: -16px;
-`;
-const PresetButton = styled(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 = styled(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

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

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

@@ -1,7 +0,0 @@
-"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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { CpslText } from "@getpara/react-components";
-import styled from "styled-components";
-const contentMotionProps = {
-  transition: { duration: 0.2 },
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 }
-};
-const NoProviders = styled(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

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

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

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

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

@@ -1,6 +0,0 @@
-interface AuthInputProps {
-    disableEmailLogin?: boolean;
-    disablePhoneLogin?: boolean;
-}
-export declare const AuthInput: ({ disableEmailLogin, disablePhoneLogin }: AuthInputProps) => import("react/jsx-runtime").JSX.Element | null;
-export {};

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

@@ -1,262 +0,0 @@
-"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 styled from "styled-components";
-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 { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import parsePhoneNumberFromString from "libphonenumber-js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { isCcMatch, validateAuth } from "../../utils/authInputHelpers.js";
-const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
-  var _a, _b, _c;
-  const inputRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-  const defaultAuthIdentifier = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
-  });
-  const para = useInternalClient();
-  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
-  const authInfo = para.authInfo;
-  const [storedNationalNumber, storedCountryCode] = useMemo(() => {
-    if ((authInfo == null ? void 0 : authInfo.authType) !== "phone") {
-      return [void 0, void 0];
-    }
-    const parsed = parsePhoneNumberFromString(authInfo.identifier);
-    return [parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
-  }, [authInfo == null ? void 0 : authInfo.authType, authInfo == null ? void 0 : authInfo.identifier]);
-  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("");
-  const [isPending, setIsPending] = useState(isSignUpOrLogInPending);
-  const [search, setSearch] = useState("");
-  const setCountryCodes = (countyCodeInput) => {
-    setCountryCode(countyCodeInput.value);
-    setMatchedCountryCode(countyCodeInput);
-  };
-  useEffect(() => {
-    if (defaultAuthIdentifier && !authInfo) {
-      const number = parsePhoneNumberFromString(defaultAuthIdentifier);
-      if (number) {
-        const countryCode2 = `+${number.countryCallingCode}`;
-        const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(countryCode2, option));
-        if (countryCodeInputMatch) {
-          setCountryCodes(countryCodeInputMatch);
-        }
-      }
-      handleIdentifierInput({
-        detail: { value: number ? number.nationalNumber : defaultAuthIdentifier }
-      });
-    }
-  }, [authInfo]);
-  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;
-    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("");
-    let auth;
-    try {
-      auth = validateAuth(identifier, countryCode, identifierType);
-      signUpOrLogIn(auth);
-    } catch (err) {
-      setError(err.message);
-    }
-  });
-  useEffect(() => {
-    if (isSignUpOrLogInPending) {
-      setIsPending(true);
-    }
-  }, [isSignUpOrLogInPending]);
-  useEffect(() => {
-    setIsPending(false);
-  }, [error]);
-  if (disableEmailLogin && disablePhoneLogin) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        onSubmit();
-      }),
-      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 && /* @__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"
-      )
-    }
-  );
-};
-const IconContainer = styled.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 = styled(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 = styled(CpslSelectItem)`
-  &::part(inner-container) {
-    justify-content: space-between;
-  }
-`;
-const SelectedItem = styled.div`
-  display: flex;
-  gap: 4px;
-  align-items: center;
-`;
-const StyledInput = styled(CpslInput)`
-  --container-background-color: var(--cpsl-color-background-8);
-  --input-background-color: var(--cpsl-color-background-8);
-  --container-padding-end: 8px;
-`;
-export {
-  AuthInput
-};

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

@@ -1,7 +0,0 @@
-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

@@ -1,33 +0,0 @@
-"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
-};