@getpara/react-sdk 1.6.1-dev.0 → 1.7.0

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

@@ -1,283 +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 { useRef, useState } from "react";
-import styled from "styled-components";
-import countryCodes from "./countryCodes.js";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
-import { EMAIL_REGEX, MOBILE_SIZE } from "../../constants/constants.js";
-import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
-import { ModalStep } from "../../utils/steps.js";
-import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
-import { AuthMethod } from "@getpara/web-sdk";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
-const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-function isCcMatch(countryCode, option) {
-  return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
-}
-const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
-  var _a, _b;
-  const inputRef = useRef(null);
-  const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
-  const para = useInternalClient();
-  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
-  const setFlow = useModalStore((state) => state.setFlow);
-  const setStep = useModalStore((state) => state.setStep);
-  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
-  const setLoginURLs = useSetLoginURLs();
-  const [countryCode, setCountryCode] = useState(
-    (authInfo == null ? void 0 : authInfo.authType) === "phone" ? authInfo.auth.countryCode || "+1" : "+1"
-  );
-  const [identifier, setIdentifier] = useState(
-    (() => {
-      if (!authInfo || ["telegram", "farcaster"].includes(authInfo.authType)) {
-        return "";
-      }
-      if (authInfo.authType !== "phone") {
-        return authInfo.identifier;
-      }
-      return authInfo.auth.phone;
-    })()
-  );
-  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 [isLoggingIn, setIsLoggingIn] = useState(false);
-  const [error, setError] = useState("");
-  const [search, setSearch] = useState("");
-  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) => {
-    const newIdentifier = ev.detail.value;
-    let isNewPhone = false, isNewEmail = false;
-    if (!disablePhoneLogin) {
-      const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(newIdentifier, option));
-      if (countryCodeInputMatch) {
-        setCountryCode(countryCodeInputMatch.value);
-        setMatchedCountryCode(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);
-    setCountryCode(matchedCountryCode2.value);
-    setMatchedCountryCode(matchedCountryCode2);
-  };
-  const login = () => __async(void 0, null, function* () {
-    setError("");
-    if (isUnknown) {
-      setError("Please enter a valid email or phone number!");
-      return;
-    }
-    let auth;
-    if (isEmail) {
-      if (!EMAIL_REGEX.test(identifier)) {
-        setError("Please enter a valid email!");
-        return;
-      }
-      yield para.logout();
-      auth = { email: identifier };
-      setAuthInfo(auth);
-      const userExists = yield para.checkIfUserExists({ email: identifier });
-      if (userExists) {
-        const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "email" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        setBiometricLocationHints(biometricLocationHints);
-        return;
-      }
-      yield para.createUser(auth);
-      setFlow("signUp");
-      setStep(ModalStep.VERIFICATIONS);
-      return;
-    }
-    if (isPhone) {
-      yield para.logout();
-      let userExists = false;
-      try {
-        userExists = yield para.checkIfUserExistsByPhone({ phone: identifier, countryCode });
-      } catch (error2) {
-        setError("Please enter a valid phone number!");
-        return;
-      }
-      auth = { phone: identifier, countryCode };
-      setAuthInfo(auth);
-      if (userExists) {
-        const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "phone" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        setBiometricLocationHints(biometricLocationHints);
-        return;
-      }
-      yield para.createUserByPhone(auth);
-      setFlow("signUp");
-      setStep(ModalStep.VERIFICATIONS);
-      return;
-    }
-  });
-  const handleSubmit = () => __async(void 0, null, function* () {
-    setIsLoggingIn(true);
-    yield login();
-    setIsLoggingIn(false);
-  });
-  if (disableEmailLogin && disablePhoneLogin) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      onSubmit: (e) => __async(void 0, null, function* () {
-        e.preventDefault();
-        yield handleSubmit();
-      }),
-      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" && handleSubmit();
-          }),
-          contrastText: true,
-          isPhone,
-          mask: identifierType === "phone" ? (_b = phoneMasks[matchedCountryCode.selectedLabel]) != null ? _b : defaultPhoneMask : void 0,
-          enterkeyhint: "go",
-          noAutoDisable: true,
-          disabled: isLoggingIn,
-          "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,
-                  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: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? /* @__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/countryCodes.js

@@ -1,42 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { getCountries, getCountryCallingCode } from "libphonenumber-js";
-const excludedCountries = [
-  "AC",
-  "CG",
-  "CI",
-  "CV",
-  "GF",
-  "GP",
-  "MF",
-  "NC",
-  "PM",
-  "RE",
-  "SD",
-  "SH",
-  "SJ",
-  "TA",
-  "VA",
-  "WF",
-  "XK",
-  "YT"
-];
-const generateCountryCodes = () => {
-  const countries = getCountries();
-  const countryList = countries.filter((country) => !excludedCountries.includes(country)).map((country) => {
-    const countryCode = getCountryCallingCode(country);
-    const countryName = new Intl.DisplayNames(["en"], { type: "region" }).of(country);
-    return {
-      label: countryName,
-      value: `+${countryCode}`,
-      selectedLabel: country,
-      icon: country
-    };
-  }).sort((a, b) => a.label.localeCompare(b.label));
-  return countryList;
-};
-const countryCodes = generateCountryCodes();
-var countryCodes_default = countryCodes;
-export {
-  countryCodes_default as default
-};

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;
-    if (typeof window !== "undefined") {
-      const newMaxHeight = Math.max(
-        window.innerHeight - ((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) - 20,
-        window.innerHeight * 0.25
-      );
-      setDropdownMaxHeight(newMaxHeight);
-      setDropdownWidth((_b = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _b.getBoundingClientRect().width);
-      setMobileAnchor((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.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

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

@@ -1,37 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import styled from "styled-components";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
-import { AuthMainStepContent } from "./AuthMainStepContent.js";
-import { CenteredText } from "../common.js";
-const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-  const logo = useThemeStore((state) => state.getLogo());
-  const appName = useThemeStore((state) => state.appName);
-  const authLayout = useThemeStore((state) => state.authLayout);
-  const embeddedModal = useThemeStore((state) => state.embeddedModal);
-  const firstLayoutType = 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,
-        oAuthMethods
-      }
-    )
-  ] });
-};
-const Logo = styled.img`
-  height: 100px;
-  max-width: 260px;
-  object-fit: contain;
-  box-sizing: content-box;
-  align-self: center;
-`;
-export {
-  AuthMainStep
-};