@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/sidebar/index.jsx

@@ -1,313 +1,110 @@
+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 __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) {
+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) {
     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,15 +1,5 @@
 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,51 +1,19 @@
+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>
@@ -53,8 +21,7 @@ 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,116 +1,39 @@
+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();
-      }
-    },
-    [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
+    }); }), 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();
         }
-        link={'/invite-codes'}
-        loading={loadingMyInviteCodes || errorMyInviteCodes}
-      />
-    </StyledSidebarInviteCodeLabel>
-  );
+    }, [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>);
 };
 // Export
 export default SidebarInviteCodeLabel;