@ludo.ninja/components 1.0.6 → 1.0.8

package/dist/components/sidebar/index.jsx

@@ -1,110 +1,313 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
+
 import Link from 'next/link';
+
 import styled, { useTheme } from 'styled-components';
+
 import { Sidebar as SidebarUi } from '@ludo.ninja/ui/build/components/sidebar';
 import { ThemeEnum } from '@ludo.ninja/ui/build/dto/Theme/interface';
 import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import useExtension from '@/hooks/extension/useExtension';
+
 import { useSignOut } from '@/modules/user/auth/useSignOut';
 import { useUserStore } from '@/modules/user/store';
+
 import { useUiStore } from '@/store/ui';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-import { sideBarDataForDev, sideBarDataForProd, } from '@/components/sidebar/data';
+
+import {
+  sideBarDataForDev,
+  sideBarDataForProd,
+} from '@/components/sidebar/data';
 import SidebarInviteCodeLabel from '@/components/sidebar/sidebarInviteCodeLabel';
+
 import UserPic from '@/system/Img/Userpic';
+
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { redirectToLoginWindow } from '@/utils/auth';
 import { isProd } from '@/utils/env';
-import { useWindowDimensions, useWindowDimensionsWithServerInitial, } from '@/utils/screen';
-var MenuItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), function (_a) {
+import {
+  useWindowDimensions,
+  useWindowDimensionsWithServerInitial,
+} from '@/utils/screen';
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+var __assign =
+  (this && this.__assign) ||
+  function () {
+    __assign =
+      Object.assign ||
+      function (t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
+          for (var p in s)
+            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+      };
+    return __assign.apply(this, arguments);
+  };
+
+var MenuItem = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ',
+        ';\n\n  ',
+        ' {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ',
+        ';\n    }\n  }\n\n  ',
+        ' {\n    font-size: ',
+        ';\n    line-height: ',
+        ';\n    gap: ',
+        ';\n    padding: ',
+        ' ',
+        ';\n    text-indent: ',
+        ';\n    border-radius: ',
+        ';\n    img {\n      width: ',
+        ';\n      height: ',
+        ';\n    }\n  }\n',
+      ],
+      [
+        '\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ',
+        ';\n\n  ',
+        ' {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ',
+        ';\n    }\n  }\n\n  ',
+        ' {\n    font-size: ',
+        ';\n    line-height: ',
+        ';\n    gap: ',
+        ';\n    padding: ',
+        ' ',
+        ';\n    text-indent: ',
+        ';\n    border-radius: ',
+        ';\n    img {\n      width: ',
+        ';\n      height: ',
+        ';\n    }\n  }\n',
+      ]
+    )),
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.secondaryText;
-}, mediaQuery.mobile, function (_a) {
+  },
+  mediaQuery.mobile,
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.secondaryBg;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(15), adaptiveValueCalc(22), adaptiveValueCalc(8), adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(20), adaptiveValueCalc(20));
-var BeforeMenuContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"])), function (_a) {
+  },
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(15),
+  adaptiveValueCalc(22),
+  adaptiveValueCalc(8),
+  adaptiveValueCalc(12),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(4),
+  adaptiveValueCalc(20),
+  adaptiveValueCalc(20)
+);
+var BeforeMenuContainer = styled.div(
+  templateObject_2 ||
+    (templateObject_2 = __makeTemplateObject(
+      [
+        '\n  padding: 12px 0;\n  border-bottom: 1px solid ',
+        ';\n\n  ',
+        ' {\n    padding: ',
+        ' 0;\n    border-bottom: ',
+        ' solid\n      ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  padding: 12px 0;\n  border-bottom: 1px solid ',
+        ';\n\n  ',
+        ' {\n    padding: ',
+        ' 0;\n    border-bottom: ',
+        ' solid\n      ',
+        ';\n  }\n',
+      ]
+    )),
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.divider;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(1), function (_a) {
+  },
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(12),
+  adaptiveValueCalc(1),
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.divider;
-});
-var SLink = styled(Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"], ["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"])), function (_a) {
+  }
+);
+var SLink = styled(Link)(
+  templateObject_3 ||
+    (templateObject_3 = __makeTemplateObject(
+      [
+        '\n  &:not(:last-child) svg path {\n    fill: ',
+        ';\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ',
+        ' {\n      width: ',
+        ';\n      height: ',
+        ';\n      svg {\n        transform: ',
+        ';\n      }\n    }\n  }\n',
+      ],
+      [
+        '\n  &:not(:last-child) svg path {\n    fill: ',
+        ';\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ',
+        ' {\n      width: ',
+        ';\n      height: ',
+        ';\n      svg {\n        transform: ',
+        ';\n      }\n    }\n  }\n',
+      ]
+    )),
+  function (_a) {
     var theme = _a.theme;
     return theme.colors.sidebarSvgPathFill;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(20), function (props) {
+  },
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(20),
+  adaptiveValueCalc(20),
+  function (props) {
     return 'transform' in props.scale && props.scale.transform;
-});
+  }
+);
 // Component
 var Sidebar = function () {
-    var _a;
-    var closeSidebar = useUiStore(function (state) { return state.closeSidebar; });
-    var isSidebarOpen = useUiStore(function (state) { return state.isSidebarOpen; });
-    var isAuthorized = useUserStore(function (state) { return state.isSignedIn; });
-    var getUser = useUserStore(function (state) { return state.user; });
-    var signOut = useSignOut();
-    var deviceType = useWindowDimensions().deviceType;
-    var _b = useExtension(), isExtensionInstalled = _b.isExtensionInstalled, openExtensionChromeStorePage = _b.openExtensionChromeStorePage, openExtension = _b.openExtension;
-    var _c = (_a = getUser) !== null && _a !== void 0 ? _a : [''], wallets = _c.wallets, userId = _c.userId;
-    var type = useTheme().type;
-    var isDarkTheme = type === ThemeEnum.dark;
-    // Todo fav-list
-    var sideBarData = isProd()
-        ? sideBarDataForProd({ userId: userId, isAuthorized: isAuthorized })
-        : sideBarDataForDev({ userId: userId, isAuthorized: isAuthorized, isDarkTheme: isDarkTheme });
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<SidebarUi closeSidebar={closeSidebar} isOpen={isSidebarOpen} handle={{
-            login: function () {
-                closeSidebar();
-                redirectToLoginWindow();
-            },
-            logout: signOut,
-        }} isAuthorized={isAuthorized} userWallets={wallets} slots={__assign({ menu: sideBarData.map(function (_a) {
-                var title = _a.title, href = _a.href, icon = _a.icon, isExternalUrl = _a.isExternalUrl;
-                return (<SLink href={href} target={isExternalUrl ? '_blank' : '_self'} onClick={closeSidebar} key={title} passHref={isExternalUrl} scale={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}>
-            <span className="icon-wrapper">{icon}</span>
-            {title}
-          </SLink>);
-            }), userPicture: function (_a) {
-                var children = _a.children, height = _a.height, width = _a.width, isNeedBoxTransform = _a.isNeedBoxTransform;
-                return (<UserPic width={width} height={height} userId={userId} isNeedBoxTransform={isNeedBoxTransform}>
-            {children}
-          </UserPic>);
-            }, inviteCode: <SidebarInviteCodeLabel /> }, (deviceType == 'isDesktop' && isAuthorized
-            ? {
-                beforeMenu: (<BeforeMenuContainer>
-                  {isExtensionInstalled ? (<MenuItem onClick={function () {
-                            closeSidebar();
-                            openExtension();
-                        }}>
-                      <img src="/sidebar/ludoX.svg" alt="Ludo X" width={20} height={20}/>
+  var _a;
+  var closeSidebar = useUiStore(function (state) {
+    return state.closeSidebar;
+  });
+  var isSidebarOpen = useUiStore(function (state) {
+    return state.isSidebarOpen;
+  });
+  var isAuthorized = useUserStore(function (state) {
+    return state.isSignedIn;
+  });
+  var getUser = useUserStore(function (state) {
+    return state.user;
+  });
+  var signOut = useSignOut();
+  var deviceType = useWindowDimensions().deviceType;
+  var _b = useExtension(),
+    isExtensionInstalled = _b.isExtensionInstalled,
+    openExtensionChromeStorePage = _b.openExtensionChromeStorePage,
+    openExtension = _b.openExtension;
+  var _c = (_a = getUser) !== null && _a !== void 0 ? _a : [''],
+    wallets = _c.wallets,
+    userId = _c.userId;
+  var type = useTheme().type;
+  var isDarkTheme = type === ThemeEnum.dark;
+  // Todo fav-list
+  var sideBarData = isProd()
+    ? sideBarDataForProd({ userId: userId, isAuthorized: isAuthorized })
+    : sideBarDataForDev({
+        userId: userId,
+        isAuthorized: isAuthorized,
+        isDarkTheme: isDarkTheme,
+      });
+  var windowDimensions =
+    useWindowDimensionsWithServerInitial().windowDimensions;
+  return (
+    <SidebarUi
+      closeSidebar={closeSidebar}
+      isOpen={isSidebarOpen}
+      handle={{
+        login: function () {
+          closeSidebar();
+          redirectToLoginWindow();
+        },
+        logout: signOut,
+      }}
+      isAuthorized={isAuthorized}
+      userWallets={wallets}
+      slots={__assign(
+        {
+          menu: sideBarData.map(function (_a) {
+            var title = _a.title,
+              href = _a.href,
+              icon = _a.icon,
+              isExternalUrl = _a.isExternalUrl;
+            return (
+              <SLink
+                href={href}
+                target={isExternalUrl ? '_blank' : '_self'}
+                onClick={closeSidebar}
+                key={title}
+                passHref={isExternalUrl}
+                scale={getAdaptiveScale({
+                  windowDimensions: windowDimensions,
+                  currentSize: 1,
+                })}
+              >
+                <span className="icon-wrapper">{icon}</span>
+                {title}
+              </SLink>
+            );
+          }),
+          userPicture: function (_a) {
+            var children = _a.children,
+              height = _a.height,
+              width = _a.width,
+              isNeedBoxTransform = _a.isNeedBoxTransform;
+            return (
+              <UserPic
+                width={width}
+                height={height}
+                userId={userId}
+                isNeedBoxTransform={isNeedBoxTransform}
+              >
+                {children}
+              </UserPic>
+            );
+          },
+          inviteCode: <SidebarInviteCodeLabel />,
+        },
+        deviceType == 'isDesktop' && isAuthorized
+          ? {
+              beforeMenu: (
+                <BeforeMenuContainer>
+                  {isExtensionInstalled ? (
+                    <MenuItem
+                      onClick={function () {
+                        closeSidebar();
+                        openExtension();
+                      }}
+                    >
+                      <img
+                        src="/sidebar/ludoX.svg"
+                        alt="Ludo X"
+                        width={20}
+                        height={20}
+                      />
                       Open Ludo X
-                    </MenuItem>) : (<div style={{ padding: '12px 0' }}>
-                      <MainButton onClick={function () {
-                            closeSidebar();
-                            openExtensionChromeStorePage();
-                        }} text={'Install Ludo X now'} variant={'primaryM'}/>
-                    </div>)}
-                </BeforeMenuContainer>),
+                    </MenuItem>
+                  ) : (
+                    <div style={{ padding: '12px 0' }}>
+                      <MainButton
+                        onClick={function () {
+                          closeSidebar();
+                          openExtensionChromeStorePage();
+                        }}
+                        text={'Install Ludo X now'}
+                        variant={'primaryM'}
+                      />
+                    </div>
+                  )}
+                </BeforeMenuContainer>
+              ),
             }
-            : {}))}/>);
+          : {}
+      )}
+    />
+  );
 };
 // Export
 export default Sidebar;

package/dist/components/sidebar/initializer.jsx

@@ -1,5 +1,15 @@
 import dynamic from 'next/dynamic';
-var Sidebar = dynamic(function () { return import('../sidebar').then(function (res) { return res.default; }); }, {
+
+var Sidebar = dynamic(
+  function () {
+    return import('../sidebar').then(function (res) {
+      return res.default;
+    });
+  },
+  {
     ssr: false,
-});
-export var SidebarInitializer = function () { return <Sidebar />; };
+  }
+);
+export var SidebarInitializer = function () {
+  return <Sidebar />;
+};

package/dist/components/sidebar/sidebarFilters/index.jsx

@@ -1,19 +1,51 @@
-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 { FH3 } from '@/styles/typography';
+
 import CloseIcon from '@/public/close20.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 StyledSidebarFilters = styled.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ", ";\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ", ";\n      margin: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ", ";\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ", ";\n      margin: 0;\n    }\n  }\n"])), function (props) {
+var StyledSidebarFilters = styled.aside(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ',
+        ';\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ',
+        ';\n      margin: 0;\n    }\n  }\n',
+      ],
+      [
+        '\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ',
+        ';\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ',
+        ';\n      margin: 0;\n    }\n  }\n',
+      ]
+    )),
+  function (props) {
     return props.isOpen ? 'translateX(0%)' : 'translateX(calc(100% + 16px))';
-}, FH3);
+  },
+  FH3
+);
 // Component
 var SidebarFilters = function (_a) {
-    var isOpen = _a.isOpen, handleClose = _a.handleClose, children = _a.children;
-    return (<StyledSidebarFilters isOpen={isOpen} /*onMouseLeave={() => closeSidebar()}*/>
+  var isOpen = _a.isOpen,
+    handleClose = _a.handleClose,
+    children = _a.children;
+  return (
+    <StyledSidebarFilters
+      isOpen={isOpen} /*onMouseLeave={() => closeSidebar()}*/
+    >
       <div className={'closeIcon'} onClick={handleClose}>
         <CloseIcon />
       </div>
@@ -21,7 +53,8 @@ var SidebarFilters = function (_a) {
         <h3 className={'caption'}>Filters</h3>
       </div>
       {children}
-    </StyledSidebarFilters>);
+    </StyledSidebarFilters>
+  );
 };
 // Export
 export default SidebarFilters;

package/dist/components/sidebar/sidebarInviteCodeLabel/index.jsx

@@ -1,39 +1,116 @@
-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, { useEffect } from 'react';
+
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { useUserStore } from '@/modules/user/store';
+
 import { useUiStore } from '@/store/ui';
+
 import { useGetMyInviteCodes } from '@/api/server-identities/queries/useGetMyInviteCodes';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
+
 import ExperienceLabel from '@/system/Labels/ExperienceLabel';
 import InviteLabel from '@/system/Labels/InviteLabel';
+
+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 StyledSidebarInviteCodeLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  gap: 16px;\n  margin-top: 16px;\n\n  ", " {\n    gap: ", ";\n    margin-top: ", ";\n  }\n"], ["\n  display: flex;\n  gap: 16px;\n  margin-top: 16px;\n\n  ", " {\n    gap: ", ";\n    margin-top: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16));
+var StyledSidebarInviteCodeLabel = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  display: flex;\n  gap: 16px;\n  margin-top: 16px;\n\n  ',
+        ' {\n    gap: ',
+        ';\n    margin-top: ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  display: flex;\n  gap: 16px;\n  margin-top: 16px;\n\n  ',
+        ' {\n    gap: ',
+        ';\n    margin-top: ',
+        ';\n  }\n',
+      ]
+    )),
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(16),
+  adaptiveValueCalc(16)
+);
 // Component
 var SidebarInviteCodeLabel = function () {
-    var _a = useGetMyInviteCodes(), myInviteCodes = _a.myInviteCodes, loadMyInviteCodes = _a.loadMyInviteCodes, errorMyInviteCodes = _a.errorMyInviteCodes, loadingMyInviteCodes = _a.loadingMyInviteCodes;
-    var isSidebarOpen = useUiStore(function (state) { return state.isSidebarOpen; });
-    var _b = useUserStore(function (state) { return ({
+  var _a = useGetMyInviteCodes(),
+    myInviteCodes = _a.myInviteCodes,
+    loadMyInviteCodes = _a.loadMyInviteCodes,
+    errorMyInviteCodes = _a.errorMyInviteCodes,
+    loadingMyInviteCodes = _a.loadingMyInviteCodes;
+  var isSidebarOpen = useUiStore(function (state) {
+    return state.isSidebarOpen;
+  });
+  var _b = useUserStore(function (state) {
+      return {
         getUser: state.user,
         userExp: state.userExp,
         isLoadingExp: state.isLoadingExp,
         errorExp: state.errorExp,
         isLoadingProfileData: state.isLoadingProfileData,
-    }); }), getUser = _b.getUser, userExp = _b.userExp, isLoadingExp = _b.isLoadingExp, errorExp = _b.errorExp, isLoadingProfileData = _b.isLoadingProfileData;
-    useEffect(function () {
-        if (isSidebarOpen && !isLoadingProfileData && !(myInviteCodes === null || myInviteCodes === void 0 ? void 0 : myInviteCodes.length)) {
-            loadMyInviteCodes();
+      };
+    }),
+    getUser = _b.getUser,
+    userExp = _b.userExp,
+    isLoadingExp = _b.isLoadingExp,
+    errorExp = _b.errorExp,
+    isLoadingProfileData = _b.isLoadingProfileData;
+  useEffect(
+    function () {
+      if (
+        isSidebarOpen &&
+        !isLoadingProfileData &&
+        !(myInviteCodes === null || myInviteCodes === void 0
+          ? void 0
+          : myInviteCodes.length)
+      ) {
+        loadMyInviteCodes();
+      }
+    },
+    [isSidebarOpen, isLoadingProfileData]
+  );
+  var unUsedInviteCodes =
+    myInviteCodes === null || myInviteCodes === void 0
+      ? void 0
+      : myInviteCodes.filter(function (code) {
+          return !code.isUsed;
+        });
+  return (
+    <StyledSidebarInviteCodeLabel>
+      <ExperienceLabel
+        value={userExp.xps}
+        link={'/rewards/'.concat(
+          getUser === null || getUser === void 0 ? void 0 : getUser.userId
+        )}
+        loading={isLoadingExp || !!errorExp}
+      />
+      <InviteLabel
+        value={
+          unUsedInviteCodes === null || unUsedInviteCodes === void 0
+            ? void 0
+            : unUsedInviteCodes.length
         }
-    }, [isSidebarOpen, isLoadingProfileData]);
-    var unUsedInviteCodes = myInviteCodes === null || myInviteCodes === void 0 ? void 0 : myInviteCodes.filter(function (code) { return !code.isUsed; });
-    return (<StyledSidebarInviteCodeLabel>
-      <ExperienceLabel value={userExp.xps} link={"/rewards/".concat(getUser === null || getUser === void 0 ? void 0 : getUser.userId)} loading={isLoadingExp || !!errorExp}/>
-      <InviteLabel value={unUsedInviteCodes === null || unUsedInviteCodes === void 0 ? void 0 : unUsedInviteCodes.length} link={'/invite-codes'} loading={loadingMyInviteCodes || errorMyInviteCodes}/>
-    </StyledSidebarInviteCodeLabel>);
+        link={'/invite-codes'}
+        loading={loadingMyInviteCodes || errorMyInviteCodes}
+      />
+    </StyledSidebarInviteCodeLabel>
+  );
 };
 // Export
 export default SidebarInviteCodeLabel;