@getpara/react-sdk 2.0.0-alpha.3 → 2.0.0-alpha.6

package/dist/{MoonPayEmbed-Q2HP2BFI.js → modal/components/AddFunds/MoonPayEmbed.js}

@@ -1,7 +1,5 @@
 "use client";
-import "./chunk-MMUBH76A.js";
-
-// src/modal/components/AddFunds/MoonPayEmbed.tsx
+import "../../../chunk-MMUBH76A.js";
 import { MoonPayEmbed } from "@getpara/react-common";
 var MoonPayEmbed_default = MoonPayEmbed;
 export {

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 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.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.js

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

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

@@ -0,0 +1,253 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+const defaultPhoneMask = "#################";
+const phoneMasks = {
+  AF: "### ### ####",
+  AX: "## ### ####",
+  AL: "(###) ### ###",
+  DZ: "(###) ### ###",
+  AS: "(###) ###-####",
+  AD: "### ###",
+  AO: "(###) ### ###",
+  AI: "(###) ###-####",
+  AG: "(###) ###-####",
+  AR: "(###) ###-####",
+  AM: "## ### ###",
+  AW: "### ####",
+  AU: "# #### ####",
+  AT: "(###) ### ####",
+  AZ: "(###) ### ## ##",
+  BS: "(###) ###-####",
+  BH: "#### ####",
+  BD: "# ### ###",
+  BB: "(###) ###-####",
+  BY: "(##) ###-##-##",
+  BE: "(###) ### ###",
+  BZ: "###-####",
+  BJ: "##-##-####",
+  BM: "(###) ###-####",
+  BT: "# ### ###",
+  BO: "# ### ####",
+  BA: "## ###-###",
+  BW: "## ### ###",
+  BR: "(##) ####-####",
+  IO: "### ####",
+  BN: "### ####",
+  BG: "(###) ### ###",
+  BF: "## ## ####",
+  BI: "## ## ####",
+  KH: "## ### ###",
+  CM: "#### ####",
+  CA: "(###) ###-####",
+  CV: "(###) ## ##",
+  KY: "(###) ###-####",
+  CF: "## ## ####",
+  TD: "## ## ## ##",
+  CL: "# #### ####",
+  CN: "(###) #### ####",
+  CX: "# ## ## ##",
+  CC: "# ## ## ##",
+  CO: "(###) ### ####",
+  KM: "## ## ## ##",
+  CG: "## ### ####",
+  CK: "## ###",
+  CR: "#### ####",
+  HR: "## #### ###",
+  CU: "# ### ####",
+  CY: "## ### ###",
+  CZ: "### ### ###",
+  CD: "### ### ###",
+  DK: "## ## ## ##",
+  DJ: "## ## ## ##",
+  DM: "(###) ###-####",
+  DO: "(###) ###-####",
+  EC: "## ### ####",
+  EG: "# #### ####",
+  SV: "#### ####",
+  GQ: "## ### ####",
+  ER: "# ### ###",
+  EE: "#### ####",
+  SZ: "#### ####",
+  ET: "## ### ####",
+  FK: "#####",
+  FO: "######",
+  FJ: "### ####",
+  FI: "## ### ####",
+  FR: "## ## ## ## ##",
+  GF: "### ## ## ##",
+  PF: "## ## ##",
+  GA: "# ## ## ##",
+  GM: "### ####",
+  GE: "(###) ## ## ##",
+  DE: "###########",
+  GH: "## ### ####",
+  GI: "### #####",
+  GR: "(###) ### ####",
+  GL: "## ## ##",
+  GD: "(###) ###-####",
+  GP: "### ## ## ##",
+  GU: "(###) ###-####",
+  GT: "# ### ####",
+  GG: "(####) ### ###",
+  GN: "## ### ###",
+  GW: "# #######",
+  GY: "### ####",
+  HT: "## ## ####",
+  VA: "### ####",
+  HN: "####-####",
+  HK: "#### ####",
+  HU: "(##) ### ####",
+  IS: "### ####",
+  IN: "####### ###",
+  ID: "(###) ###-####",
+  IR: "(###) ### ####",
+  IQ: "(###) ### ####",
+  IE: "(###) ### ###",
+  IM: "(####) ### ###",
+  IL: "#-###-####",
+  IT: "(###) #### ###",
+  CI: "## ## ## ##",
+  JM: "(###) ###-####",
+  JP: "(###) ###-####",
+  JE: "(####) ### ###",
+  JO: "# #### ####",
+  KZ: "(###) ###-##-##",
+  KE: "### ######",
+  KI: "## ###",
+  KP: "###-###-####",
+  KR: "(###) ####-####",
+  XK: "## ### ###",
+  KW: "#### ####",
+  KG: "(###) ###-###",
+  LA: "## ## ####",
+  LV: "## ### ###",
+  LB: "## ### ###",
+  LS: "# ### ####",
+  LR: "## ### ###",
+  LY: "##-#######",
+  LI: "(###) ###-####",
+  LT: "(###) ## ###",
+  LU: "### ### ###",
+  MO: "#### ####",
+  MG: "## ## ### ##",
+  MW: "# #### ####",
+  MY: "(###) ###-###",
+  MV: "###-####",
+  ML: "## ## ####",
+  MT: "#### ####",
+  MH: "###-####",
+  MQ: "### ## ## ##",
+  MR: "## ## ####",
+  MU: "### ####",
+  YT: "### ## ## ##",
+  MX: "(###) ###-####",
+  FM: "### ####",
+  MD: "#### ####",
+  MC: "(###) ###-###",
+  MN: "## ## ####",
+  ME: "## ### ###",
+  MS: "(###) ###-####",
+  MA: "#-####-####",
+  MZ: "## ### ####",
+  MM: "# ### ####",
+  NA: "## ### ####",
+  NR: "### ####",
+  NP: "#-######",
+  NL: "## ### ####",
+  NC: "##.##.##",
+  NZ: "## ### ###",
+  NI: "#### ####",
+  NE: "## ## ## ##",
+  NG: "## ### ####",
+  NU: "####",
+  NF: "### ###",
+  MK: "## ### ###",
+  MP: "(###) ###-####",
+  NO: "### ## ###",
+  OM: "#### ####",
+  PK: "(###) #######",
+  PW: "### ####",
+  PS: "## ### ####",
+  PA: "####-####",
+  PG: "(###) ## ###",
+  PY: "## ### ####",
+  PE: "(###) ### ###",
+  PH: "(###) ###-####",
+  PN: "### ####",
+  PL: "### ### ###",
+  PT: "## ### ####",
+  PR: "(###) ###-####",
+  QA: "#### ####",
+  RE: "##### ####",
+  RO: "## ### ####",
+  RU: "(###) ###-##-##",
+  RW: "(###) ### ###",
+  BL: "### ## ## ##",
+  SH: "####",
+  KN: "(###) ###-####",
+  LC: "(###) ###-####",
+  MF: "### ## ## ##",
+  PM: "## ## ##",
+  VC: "(###) ###-####",
+  WS: "####",
+  SM: "(####) ######",
+  ST: "## ####",
+  SA: "# ### ####",
+  SN: "## ### ####",
+  RS: "## ### ####",
+  SC: "# ### ###",
+  SL: "## ######",
+  SG: "#### ####",
+  SX: "(###) ###-####",
+  SK: "(###) ### ###",
+  SI: "## ### ###",
+  SB: "### ####",
+  SO: "# ### ###",
+  ZA: "## ### ####",
+  GS: "####",
+  SS: "# ### ####",
+  ES: "### ### ###",
+  LK: "## ### ####",
+  SD: "## ### ####",
+  SR: "###-####",
+  SJ: "### ## ###",
+  SE: "## ### ####",
+  CH: "## ### ####",
+  SY: "## #### ###",
+  TW: "#### ####",
+  TJ: "## ### ####",
+  TZ: "## ### ####",
+  TH: "# #### ####",
+  TL: "#### ####",
+  TG: "## ## ## ##",
+  TK: "####",
+  TO: "####",
+  TT: "(###) ###-####",
+  TN: "## ### ###",
+  TR: "(###) ### ####",
+  TM: "# ### ###",
+  TC: "(###) ###-####",
+  TV: "####",
+  UG: "## ### ####",
+  UA: "## ### ####",
+  AE: "# ### ####",
+  GB: "#### ### ###",
+  US: "(###) ###-####",
+  UM: "(###) ###-####",
+  UY: "# ### ## ##",
+  UZ: "## ### ####",
+  VU: "## ####",
+  VE: "###-###-####",
+  VN: "## #### ###",
+  VG: "(###) ###-####",
+  VI: "(###) ###-####",
+  WF: "## ####",
+  EH: "###-###-###",
+  YE: "# ### ###",
+  ZM: "## ### ####",
+  ZW: "# #######"
+};
+export {
+  defaultPhoneMask,
+  phoneMasks
+};

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

@@ -1,8 +1,9 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface AuthMainStepProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
 }
-export declare const AuthMainStep: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthMainStep: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthMainStepProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -0,0 +1,50 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { AuthMainStepContent } from "./AuthMainStepContent.js";
+import { CenteredText } from "../common.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+const AuthMainStep = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
+  const authLayout = useModalStore((state) => state.authLayout);
+  const embeddedModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
+  });
+  const logo = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.logo;
+  });
+  const appName = useStore((state) => state.appName);
+  const firstLayoutType = authLayout == null ? void 0 : authLayout[0].split(":")[0];
+  const heading = firstLayoutType === "AUTH" ? "Sign Up or Login" : "Connect Wallet";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    logo && /* @__PURE__ */ jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ""}logo` }),
+    !embeddedModal && /* @__PURE__ */ jsx(CenteredText, { variant: logo ? "bodyM" : "headingS", weight: "semiBold", children: heading }),
+    /* @__PURE__ */ jsx(
+      AuthMainStepContent,
+      {
+        disableEmailLogin,
+        disablePhoneLogin,
+        isGuestModeEnabled,
+        oAuthMethods
+      }
+    )
+  ] });
+};
+const Logo = styled.img`
+  height: 100px;
+  max-width: 260px;
+  object-fit: contain;
+  box-sizing: content-box;
+  align-self: center;
+`;
+export {
+  AuthMainStep
+};

package/dist/modal/components/AuthMainStep/AuthMainStepContent.d.ts

@@ -1,8 +1,9 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface AuthMainStepContentProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
 }
-export declare const AuthMainStepContent: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthMainStepContent: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthMainStepContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};