@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/profile/rank/index.jsx

@@ -1,84 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { getRankColor } from '@ludo.ninja/utils';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  InactiveButtonColor,
-  TextGrayColor,
-} from '@/styles/colors';
-
+import { BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
 import { Box, Flex, H2, H6 } from '@system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var RangeContainer = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  width: 100%;\n  background: ',
-        ';\n  height: 20px;\n  border-radius: 4px;\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: block;\n  width: 100%;\n  background: ',
-        ';\n  height: 20px;\n  border-radius: 4px;\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  InactiveButtonColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(20),
-  adaptiveValueCalc(4)
-);
-var RangeValue = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  display: block;\n  background: ',
-        ';\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ',
-        ' {\n    border-top-left-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: block;\n  background: ',
-        ';\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ',
-        ' {\n    border-top-left-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.rankValue && getRankColor(props.rankValue);
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(2),
-  adaptiveValueCalc(2)
-);
+var RangeContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  background: ", ";\n  height: 20px;\n  border-radius: 4px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  display: block;\n  width: 100%;\n  background: ", ";\n  height: 20px;\n  border-radius: 4px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(4));
+var RangeValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ", " {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 100%;\n  border-radius: 2px 0 0 2px;\n  ", " {\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, mediaQuery.minWidthFourK, adaptiveValueCalc(2), adaptiveValueCalc(2));
 // Components
 export var ProfileRank = function (_a) {
-  var rank = _a.rank;
-  return (
-    <Box>
+    var rank = _a.rank;
+    return (<Box>
       <H6 color={TextGrayColor} mb={4}>
         LUDO RANK
       </H6>
@@ -88,14 +25,10 @@ export var ProfileRank = function (_a) {
             {rank ? rank : 'unknown'}
           </H2>
           <RangeContainer>
-            <RangeValue
-              rankValue={rank}
-              style={{ width: ''.concat(rank, '%') }}
-            />
+            <RangeValue rankValue={rank} style={{ width: "".concat(rank, "%") }}/>
           </RangeContainer>
         </Flex>
       </Flex>
-    </Box>
-  );
+    </Box>);
 };
 var templateObject_1, templateObject_2;

package/dist/components/profile/stats/index.jsx

@@ -1,58 +1,22 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import { ProfileRank } from '@/components/profile/rank';
-
 import Palete from '@/system/Palete';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledProfileStats = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ',
-        ' {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ',
-        ' {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ',
-        ' {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ',
-        ' {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthTablet,
-  mediaQuery.minWidthDesktop,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(244)
-);
+var StyledProfileStats = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ", " {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: 12px;\n\n  ", " {\n    width: 156px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: 244px;\n    margin-top: 0;\n  }\n\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.minWidthTablet, mediaQuery.minWidthDesktop, mediaQuery.minWidthFourK, adaptiveValueCalc(244));
 // Components
 export var ProfileStats = function (_a) {
-  var rank = _a.rank;
-  return (
-    <StyledProfileStats>
+    var rank = _a.rank;
+    return (<StyledProfileStats>
       <Palete>
         <div className="profileStatsBlock">
-          <ProfileRank rank={rank} />
+          <ProfileRank rank={rank}/>
         </div>
       </Palete>
       {/*{isSignedIn() && profileId !== getUser()?.userId && (*/}
@@ -60,7 +24,6 @@ export var ProfileStats = function (_a) {
       {/*    <ProfileNetWorth />*/}
       {/*  </div>*/}
       {/*)}*/}
-    </StyledProfileStats>
-  );
+    </StyledProfileStats>);
 };
 var templateObject_1;

package/dist/components/profile/wallets/index.jsx

@@ -1,182 +1,74 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import Image from 'next/image';
-
 import process from 'process';
 import styled from 'styled-components';
-
 import { BlockChainEntity } from '@ludo.ninja/core';
 import { AccentColor, BlackColor } from '@ludo.ninja/ui/build/styles/colors';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
 import { shortenedText } from '@ludo.ninja/utils';
-
 import { useUserStore } from '@/modules/user/store';
-
 import { useUiStore } from '@/store/ui';
-
 import useFetchUserWallets from '@/api/server-identities/queries/useFetchUserWallets';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import MyWallets from '@/components/myWallets';
-
 import Palete from '@/system/Palete';
-
 import { Flex, H5 } from '@system';
 import { SmallText } from '@system';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { getStaticENVDomain } from '@/utils/env';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
 import PlusIcon from '@/public/wallets/plus.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledProfileWallets = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ',
-        ';\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ',
-        ';\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ',
-        ' {\n    .wallets {\n      margin-top: ',
-        ';\n\n      .wallet_item {\n        margin-bottom: ',
-        ';\n        font-size: ',
-        ';\n\n        .icon {\n          margin-right: ',
-        ';\n          width: ',
-        ';\n          height: ',
-        ';\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ',
-        ';\n        width: ',
-        ';\n        height: ',
-        ';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ',
-        ';\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ',
-        ';\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ',
-        ' {\n    .wallets {\n      margin-top: ',
-        ';\n\n      .wallet_item {\n        margin-bottom: ',
-        ';\n        font-size: ',
-        ';\n\n        .icon {\n          margin-right: ',
-        ';\n          width: ',
-        ';\n          height: ',
-        ';\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ',
-        ';\n        width: ',
-        ';\n        height: ',
-        ';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(12),
-  adaptiveValueCalc(12),
-  adaptiveValueCalc(13),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16)
-);
+var StyledProfileWallets = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ", ";\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ", ";\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    .wallets {\n      margin-top: ", ";\n\n      .wallet_item {\n        margin-bottom: ", ";\n        font-size: ", ";\n\n        .icon {\n          margin-right: ", ";\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"], ["\n  .manageBtn {\n    cursor: pointer;\n  }\n\n  .wallets {\n    margin-top: 12px;\n\n    .wallet_item {\n      font-family: ", ";\n      margin-bottom: 12px;\n      font-size: 13px;\n      color: ", ";\n\n      .icon {\n        margin-right: 8px;\n        border-radius: 50%;\n      }\n    }\n  }\n\n  .add_wallets {\n    display: flex;\n    cursor: pointer;\n\n    .icon {\n      margin-right: 8px;\n    }\n  }\n\n  ", " {\n    .wallets {\n      margin-top: ", ";\n\n      .wallet_item {\n        margin-bottom: ", ";\n        font-size: ", ";\n\n        .icon {\n          margin-right: ", ";\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n\n    .add_wallets {\n      .icon {\n        margin-right: ", ";\n        width: ", ";\n        height: ", ";\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"])), dmsansFontVarCss.css, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(13), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(16));
 // Component
 export var ProfileWallets = function () {
-  var isSignedIn = useUserStore(function (state) {
-    return state.isSignedIn;
-  });
-  var getUser = useUserStore(function (state) {
-    return state.user;
-  });
-  var openModalSidebarPortal = useUiStore(function (state) {
-    return state.openModalSidebarPortal;
-  });
-  var userWallets = useFetchUserWallets({
-    userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId,
-  }).userWallets;
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  var renderUserWallets = function () {
-    return userWallets === null || userWallets === void 0
-      ? void 0
-      : userWallets.map(function (userWallet) {
-          var blockChain = new BlockChainEntity(userWallet.blockchain);
-          return (
-            <div key={userWallet.address} className={'wallet_item'}>
-              <Image
-                src={blockChain.getBlockChainIconRegular({
-                  domain: getStaticENVDomain(),
-                })}
-                className={'icon'}
-                width={16}
-                height={16}
-                alt={blockChain.getBlockChainIconRegular({
-                  domain: getStaticENVDomain(),
-                })}
-              />
-              {shortenedText(
-                userWallet === null || userWallet === void 0
-                  ? void 0
-                  : userWallet.address
-              )}
-            </div>
-          );
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var getUser = useUserStore(function (state) { return state.user; });
+    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
+    var userWallets = useFetchUserWallets({
+        userId: getUser === null || getUser === void 0 ? void 0 : getUser.userId,
+    }).userWallets;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    var renderUserWallets = function () {
+        return userWallets === null || userWallets === void 0 ? void 0 : userWallets.map(function (userWallet) {
+            var blockChain = new BlockChainEntity(userWallet.blockchain);
+            return (<div key={userWallet.address} className={"wallet_item"}>
+          <Image src={blockChain.getBlockChainIconRegular({
+                    domain: getStaticENVDomain(),
+                })} className={'icon'} width={16} height={16} alt={blockChain.getBlockChainIconRegular({
+                    domain: getStaticENVDomain(),
+                })}/>
+          {shortenedText(userWallet === null || userWallet === void 0 ? void 0 : userWallet.address)}
+        </div>);
         });
-  };
-  if (!isSignedIn) return null;
-  var user = new URLSearchParams(getUser).toString();
-  return (
-    <StyledProfileWallets>
+    };
+    if (!isSignedIn)
+        return null;
+    var user = new URLSearchParams(getUser).toString();
+    return (<StyledProfileWallets>
       <Palete>
         <Flex justifyContent="space-between" alignItems="center">
           <H5 color={BlackColor}>Wallets</H5>
-          <div
-            className={'manageBtn'}
-            onClick={function () {
-              return openModalSidebarPortal(<MyWallets />);
-            }}
-          >
+          <div className={'manageBtn'} onClick={function () { return openModalSidebarPortal(<MyWallets />); }}>
             <SmallText color={AccentColor}>Manage</SmallText>
           </div>
         </Flex>
         <div className={'wallets'}>{renderUserWallets()}</div>
-        <div
-          className={'add_wallets'}
-          onClick={function () {
-            window.open(
-              ''
-                .concat(process.env.NEXT_PUBLIC_AUTH_HOST, '/add_wallets/?')
-                .concat(user, '&fallback_url=')
-                .concat(window.location.href.replace(/\s/g, '')),
-              '_self'
-            );
-          }}
-        >
+        <div className={'add_wallets'} onClick={function () {
+            window.open("".concat(process.env.NEXT_PUBLIC_AUTH_HOST, "/add_wallets/?").concat(user, "&fallback_url=").concat(window.location.href.replace(/\s/g, '')), '_self');
+        }}>
           <div className={'icon'}>
-            <PlusIcon
-              style={getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-              })}
-            />
+            <PlusIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>
           </div>
 
           <SmallText color={AccentColor}>Add new</SmallText>
         </div>
       </Palete>
-    </StyledProfileWallets>
-  );
+    </StyledProfileWallets>);
 };
 var templateObject_1;

package/dist/components/profile/wrapper/index.jsx

@@ -1,21 +1,14 @@
 import React from 'react';
-
-import {
-  // profileJSONLD,
-  ProfileInfo,
-  ProfilePageHead,
-} from '@/components/profile';
-
+import { 
+// profileJSONLD,
+ProfileInfo, ProfilePageHead, } from '@/components/profile';
 // Components
 export var ProfileWrapper = function (_a) {
-  var profile = _a.profile,
-    url = _a.url,
-    children = _a.children;
-  return (
-    <>
-      <ProfilePageHead userUrl={url} profile={profile} />
+    var profile = _a.profile, url = _a.url, children = _a.children;
+    return (<>
+      <ProfilePageHead userUrl={url} profile={profile}/>
 
-      <ProfileInfo profile={profile} />
+      <ProfileInfo profile={profile}/>
 
       {children}
 
@@ -23,6 +16,5 @@ export var ProfileWrapper = function (_a) {
       {/*  type="application/ld+json"*/}
       {/*  dangerouslySetInnerHTML={profileJSONLD(profile as schema.IProfile, '')}*/}
       {/*/>*/}
-    </>
-  );
+    </>);
 };

package/dist/components/registrationPage/index.jsx

@@ -1,4 +1,3 @@
 import RegistrationSelectBox from '@/components/registrationPage/registrationSelectBox';
 import RegistrationSelection from '@/components/registrationPage/registrationSelection';
-
 export { RegistrationSelection, RegistrationSelectBox };

package/dist/components/registrationPage/registrationSelectBox/index.jsx

@@ -1,101 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import { BlackColor, WhiteColor } from '@/styles/colors';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledRegistrationSelectBox = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(',
-        ');\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ',
-        ';\n  box-shadow: ',
-        ';\n  background-color: ',
-        ';\n\n  &:hover {\n    background: url(',
-        '), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ',
-        ';\n      opacity: ',
-        ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ",
-        ';\n    opacity: ',
-        ';\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ',
-        ';\n    color: ',
-        ';\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ',
-        ';\n    text-align: center;\n  }\n',
-      ],
-      [
-        '\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(',
-        ');\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ',
-        ';\n  box-shadow: ',
-        ';\n  background-color: ',
-        ';\n\n  &:hover {\n    background: url(',
-        '), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ',
-        ';\n      opacity: ',
-        ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ",
-        ';\n    opacity: ',
-        ';\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ',
-        ';\n    color: ',
-        ';\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ',
-        ';\n    text-align: center;\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.image;
-  },
-  function (props) {
-    return props.isSelected ? 'blur(2px)' : '';
-  },
-  function (props) {
+var StyledRegistrationSelectBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background: url(", "), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ", ";\n      opacity: ", ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    opacity: ", ";\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ", ";\n    color: ", ";\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ", ";\n    text-align: center;\n  }\n"], ["\n  min-height: 100px;\n  border-radius: 6px;\n  position: relative;\n  padding: 22px 26px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-image: url(", ");\n  background-repeat: no-repeat;\n  background-size: cover;\n  cursor: pointer;\n  backdrop-filter: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n\n  &:hover {\n    background: url(", "), lightgray 50%;\n    background-repeat: no-repeat;\n    background-size: cover;\n    backdrop-filter: blur(2px);\n    box-shadow: 0 13px 16px -10px rgba(33, 21, 95, 0.5);\n\n    &:before {\n      background: ", ";\n      opacity: ", ";\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    left: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    height: 100%;\n    background: ", ";\n    opacity: ", ";\n  }\n\n  .text {\n    position: absolute;\n    user-select: none;\n    text-shadow: 1px 1px 1px ", ";\n    color: ", ";\n    text-align: center;\n  }\n\n  .text2 {\n    position: absolute;\n    user-select: none;\n    color: ", ";\n    text-align: center;\n  }\n"])), function (props) { return props.image; }, function (props) { return (props.isSelected ? 'blur(2px)' : ''); }, function (props) {
     return props.isSelected ? '0 13px 16px -10px rgba(33, 21, 95, 0.5)' : '';
-  },
-  function (props) {
-    return props.isSelected ? 'lightgray 50%' : '';
-  },
-  function (props) {
-    return props.image;
-  },
-  function (props) {
-    return props.isSelected ? '' : '#6048ff';
-  },
-  function (props) {
-    return props.isSelected ? '' : 0.4;
-  },
-  function (props) {
+}, function (props) { return (props.isSelected ? 'lightgray 50%' : ''); }, function (props) { return props.image; }, function (props) { return (props.isSelected ? '' : '#6048ff'); }, function (props) { return (props.isSelected ? '' : 0.4); }, function (props) {
     return props.isSelected ? '#6048ff' : 'rgba(18, 24, 58, 0.4)';
-  },
-  function (props) {
-    return props.isSelected ? 0.8 : 0.5;
-  },
-  BlackColor,
-  WhiteColor,
-  WhiteColor
-);
+}, function (props) { return (props.isSelected ? 0.8 : 0.5); }, BlackColor, WhiteColor, WhiteColor);
 var RegistrationSelectBox = function (_a) {
-  var name = _a.name,
-    image = _a.image,
-    selected = _a.selected,
-    onClick = _a.onClick;
-  return (
-    <StyledRegistrationSelectBox
-      isSelected={selected}
-      image={image}
-      onClick={function () {
-        return onClick(name);
-      }}
-    >
+    var name = _a.name, image = _a.image, selected = _a.selected, onClick = _a.onClick;
+    return (<StyledRegistrationSelectBox isSelected={selected} image={image} onClick={function () { return onClick(name); }}>
       <h2 className={'text'}>{name}</h2>
-    </StyledRegistrationSelectBox>
-  );
+    </StyledRegistrationSelectBox>);
 };
 export default RegistrationSelectBox;
 var templateObject_1;