@ludo.ninja/components 2.0.10 → 2.0.11

package/build/components/searchFiltersConnector/filters/index.js

@@ -1,22 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const applyResetBtns_1 = __importDefault(require("./applyResetBtns"));
-const mobileFilters_1 = __importDefault(require("./mobileFilters"));
-const sidebarFilters_1 = __importDefault(require("../../sidebar/sidebarFilters"));
-const ui_1 = require("../../../store/ui");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
-const MobileSelect_1 = __importDefault(require("../../../system/Forms/Selects/MobileSelect"));
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import ApplyResetButtons from "./applyResetBtns";
+import MobileFilters from "./mobileFilters";
+import SidebarFilters from "../../sidebar/sidebarFilters";
+import { useUiStore } from "../../../store/ui";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from "../../../styles/colors";
+import DesktopSelect from "../../../system/Forms/Selects/DesktopSelect";
+import MobileSelect from "../../../system/Forms/Selects/MobileSelect";
 // Styles
-const StyledFilters = styled_components_1.default.div `
+const StyledFilters = styled.div `
   display: flex;
   flex-wrap: wrap;
 
@@ -59,20 +54,20 @@ const StyledFilters = styled_components_1.default.div `
       border-radius: 6px;
       min-height: 40px;
       font-size: 1.4em;
-      color: ${colors_1.BlackColor};
+      color: ${BlackColor};
       font-weight: 500;
       transition: all 0.3s ease-in;
 
       &:hover {
         transition: all 0.3s ease-in-out;
-        background: ${colors_1.InactiveButtonColor};
-        color: ${colors_1.AccentColor};
-        border: 1px solid ${colors_1.BorderColorLight};
+        background: ${InactiveButtonColor};
+        color: ${AccentColor};
+        border: 1px solid ${BorderColorLight};
       }
 
       .counter {
         position: absolute;
-        background-color: ${colors_1.AccentColor};
+        background-color: ${AccentColor};
         color: white;
         right: -5px;
         padding: 8px;
@@ -89,39 +84,39 @@ const StyledFilters = styled_components_1.default.div `
     }
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+  ${mediaQuery.minWidthFourK} {
     .select {
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      margin-right: ${adaptiveValueCalc(8)};
+      margin-top: ${adaptiveValueCalc(8)};
     }
     .type {
-      width: ${(0, _4k_1.adaptiveValueCalc)(154)};
+      width: ${adaptiveValueCalc(154)};
     }
     .blockchain {
-      width: ${(0, _4k_1.adaptiveValueCalc)(163)};
+      width: ${adaptiveValueCalc(163)};
     }
     .category {
-      width: ${(0, _4k_1.adaptiveValueCalc)(156)};
+      width: ${adaptiveValueCalc(156)};
     }
     .time {
-      width: ${(0, _4k_1.adaptiveValueCalc)(125)};
+      width: ${adaptiveValueCalc(125)};
     }
     .status {
-      width: ${(0, _4k_1.adaptiveValueCalc)(135)};
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      width: ${adaptiveValueCalc(135)};
+      margin-right: ${adaptiveValueCalc(24)};
     }
   }
 `;
 // Component
 const Filters = ({ filterInputHandler, handleResetFilter, selectData, filterInput, handleMobileFilterInput, isMobile, }) => {
-    const [isSideBarOpen, setSidebarOpen] = (0, react_1.useState)(false);
-    const [selectedFiltersCount] = (0, react_1.useState)(0);
-    const { openOverLay, closeOverlay } = (0, ui_1.useUiStore)((state) => ({
+    const [isSideBarOpen, setSidebarOpen] = useState(false);
+    const [selectedFiltersCount] = useState(0);
+    const { openOverLay, closeOverlay } = useUiStore((state) => ({
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
     }));
-    const [mobileFilterInput, setMobileFilterInput] = (0, react_1.useState)(filterInput);
-    (0, react_1.useEffect)(() => {
+    const [mobileFilterInput, setMobileFilterInput] = useState(filterInput);
+    useEffect(() => {
         if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
             setMobileFilterInput(filterInput);
         }
@@ -136,17 +131,17 @@ const Filters = ({ filterInputHandler, handleResetFilter, selectData, filterInpu
         closeOverlay();
         setSidebarOpen(false);
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledFilters, { children: [!isMobile &&
-                selectData.map((select) => ((0, jsx_runtime_1.jsx)("div", { className: `select ${select.data.selectName}`, children: (0, jsx_runtime_1.jsx)(DesktopSelect_1.default, { defaultOptionValue: filterInput[select.data.selectName], options: select.data.selectOptions, isLoading: false, onChangeHandler: filterInputHandler, name: select.data.selectName }) }, select.id))), isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'filterButton', children: (0, jsx_runtime_1.jsxs)("button", { onClick: (e) => {
+    return (_jsxs(StyledFilters, { children: [!isMobile &&
+                selectData.map((select) => (_jsx("div", { className: `select ${select.data.selectName}`, children: _jsx(DesktopSelect, { defaultOptionValue: filterInput[select.data.selectName], options: select.data.selectOptions, isLoading: false, onChangeHandler: filterInputHandler, name: select.data.selectName }) }, select.id))), isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { className: 'filterButton', children: _jsxs("button", { onClick: (e) => {
                                 e.stopPropagation();
                                 e.preventDefault();
                                 openOverLay();
                                 setSidebarOpen(true);
-                            }, children: ["Filters", selectedFiltersCount ? ((0, jsx_runtime_1.jsx)("span", { className: 'counter', children: selectedFiltersCount })) : null] }) }), (0, jsx_runtime_1.jsxs)(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: () => {
+                            }, children: ["Filters", selectedFiltersCount ? (_jsx("span", { className: 'counter', children: selectedFiltersCount })) : null] }) }), _jsxs(SidebarFilters, { isOpen: isSideBarOpen, handleClose: () => {
                             setMobileFilterInput(filterInput);
                             closeFiltersMobile();
-                        }, children: [(0, jsx_runtime_1.jsx)(mobileFilters_1.default, { children: selectData.map((select) => ((0, jsx_runtime_1.jsx)(MobileSelect_1.default, { defaultOptionValue: mobileFilterInput[select.data
-                                        .selectName], options: select.data.selectOptions, name: select.data.selectName, onChangeHandler: handleMobileFilters }, select.id))) }), (0, jsx_runtime_1.jsx)(applyResetBtns_1.default, { onReset: () => {
+                        }, children: [_jsx(MobileFilters, { children: selectData.map((select) => (_jsx(MobileSelect, { defaultOptionValue: mobileFilterInput[select.data
+                                        .selectName], options: select.data.selectOptions, name: select.data.selectName, onChangeHandler: handleMobileFilters }, select.id))) }), _jsx(ApplyResetButtons, { onReset: () => {
                                     handleResetFilter();
                                     closeFiltersMobile();
                                 }, onApply: () => {
@@ -155,4 +150,4 @@ const Filters = ({ filterInputHandler, handleResetFilter, selectData, filterInpu
                                 } })] })] }))] }));
 };
 // Export
-exports.default = Filters;
+export default Filters;

package/build/components/searchFiltersConnector/filters/mobileFilters/index.js

@@ -1,12 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
 // Styles
-const StyledMobileFilters = styled_components_1.default.div `
+const StyledMobileFilters = styled.div `
   position: relative;
   flex: 1;
   overflow-y: auto;
@@ -19,7 +14,7 @@ const StyledMobileFilters = styled_components_1.default.div `
 `;
 // Component
 const MobileFilters = ({ children }) => {
-    return (0, jsx_runtime_1.jsx)(StyledMobileFilters, { children: children });
+    return _jsx(StyledMobileFilters, { children: children });
 };
 // Export
-exports.default = MobileFilters;
+export default MobileFilters;

package/build/components/searchFiltersConnector/filters/setsFiltersForm/index.js

@@ -1,23 +1,18 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const styled_components_1 = __importDefault(require("styled-components"));
-const DropDown_1 = __importDefault(require("../../../../system/DropDown"));
-const RadioInput_1 = __importDefault(require("../../../../system/Forms/RadioInput"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import DropDown from "../../../../system/DropDown";
+import BasicRadioInput from "../../../../system/Forms/RadioInput";
 // Styles
-const StyledSetsFiltersForm = styled_components_1.default.div `
+const StyledSetsFiltersForm = styled.div `
   position: relative;
 `;
 // Component
 const SetsFiltersForm = ({ selectTypeSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }) => {
-    const [selectedSearchResult, setSelectedSearchResult] = (0, react_1.useState)(null);
-    const [selectedBlockchainCategoryResult, setSelectedBlockchainCategoryResult,] = (0, react_1.useState)(null);
-    const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
+    const [selectedSearchResult, setSelectedSearchResult] = useState(null);
+    const [selectedBlockchainCategoryResult, setSelectedBlockchainCategoryResult,] = useState(null);
+    const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] = useState(null);
+    useEffect(() => {
         if (selectedSearchResult ||
             selectedBlockchainCategoryResult ||
             selectedBlockchainTimeResult) {
@@ -47,7 +42,7 @@ const SetsFiltersForm = ({ selectTypeSearchResult, selectBlockchainCategoryResul
     const handleChangeBlockchainTimeResult = (value) => {
         setSelectedBlockchainTimeResult(value);
     };
-    return ((0, jsx_runtime_1.jsxs)(StyledSetsFiltersForm, { children: [(0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id }, select.id))) })] }));
+    return (_jsxs(StyledSetsFiltersForm, { children: [_jsx(DropDown, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map((select) => (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), _jsx(DropDown, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map((select) => (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), _jsx(DropDown, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map((select) => (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id }, select.id))) })] }));
 };
 // Export
-exports.default = SetsFiltersForm;
+export default SetsFiltersForm;

package/build/components/searchFiltersConnector/index.js

@@ -1,15 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchFiltersConnector = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const router_1 = require("next/router");
-const fetchSearchResultSelections_1 = require("../../api/server-preferences/queries/fetchSearchResultSelections");
-const filters_1 = __importDefault(require("./filters"));
-const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, isMobile, }) {
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { useFetchSearchResultSelections } from "../../api/server-preferences/queries/fetchSearchResultSelections";
+import Filters from './filters';
+export const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, isMobile, }) {
     const defaultCopyWithoutTerm = {
         time: defaults.time,
         blockchain: defaults.blockchain,
@@ -21,10 +15,10 @@ const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, i
             }
             : {}),
     };
-    const { searchResultSelections } = (0, fetchSearchResultSelections_1.useFetchSearchResultSelections)();
-    const [filterInput, setFilterInput] = (0, react_1.useState)(defaultCopyWithoutTerm);
-    const router = (0, router_1.useRouter)();
-    (0, react_1.useEffect)(() => {
+    const { searchResultSelections } = useFetchSearchResultSelections();
+    const [filterInput, setFilterInput] = useState(defaultCopyWithoutTerm);
+    const router = useRouter();
+    useEffect(() => {
         router.replace({
             query: {
                 ...router.query,
@@ -75,7 +69,7 @@ const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, i
         renderFilters: !!(filterInput.time ||
             filterInput.status ||
             filterInput.category ||
-            filterInput.blockchain) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: searchResultSelections && ((0, jsx_runtime_1.jsx)(filters_1.default, { filterInput: filterInput, selectData: [
+            filterInput.blockchain) ? (_jsx(_Fragment, { children: searchResultSelections && (_jsx(Filters, { filterInput: filterInput, selectData: [
                     ...(!isDisabledTypeFilters
                         ? [
                             {
@@ -115,7 +109,6 @@ const useSearchFiltersConnector = function ({ defaults, isDisabledTypeFilters, i
                             selectOptions: searchResultSelections.statusSelections,
                         },
                     },
-                ], filterInputHandler: handleFilterInput, handleResetFilter: handleResetFilter, handleMobileFilterInput: handleMobileFilterInput, isMobile: isMobile })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})),
+                ], filterInputHandler: handleFilterInput, handleResetFilter: handleResetFilter, handleMobileFilterInput: handleMobileFilterInput, isMobile: isMobile })) })) : (_jsx(_Fragment, {})),
     };
 };
-exports.useSearchFiltersConnector = useSearchFiltersConnector;

package/build/components/sidebar/data.js

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.sideBarDataForProd = exports.sideBarDataForDev = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const aboutLudo_svg_1 = __importDefault(require("../../public/sidebar/aboutLudo"));
-const aboutLudoDark_svg_1 = __importDefault(require("../../public/sidebar/aboutLudoDark"));
-const api_svg_1 = __importDefault(require("../../public/sidebar/api"));
-const explore_svg_1 = __importDefault(require("../../public/sidebar/explore"));
-const my_invites_svg_1 = __importDefault(require("../../public/sidebar/my-invites"));
-const rewards_svg_1 = __importDefault(require("../../public/sidebar/rewards"));
-const submitNft_svg_1 = __importDefault(require("../../public/sidebar/submitNft"));
-const sideBarDataForDev = ({ isAuthorized, isDarkTheme, userId, }) => {
+import { jsx as _jsx } from "react/jsx-runtime";
+import AboutLudoIcon from "../../public/sidebar/aboutLudo";
+import AboutLudoDarkIcon from "../../public/sidebar/aboutLudoDark";
+import ApiIcon from "../../public/sidebar/api";
+import ExploreIcon from "../../public/sidebar/explore";
+import MyInvitesIcon from "../../public/sidebar/my-invites";
+import RewardsIcon from "../../public/sidebar/rewards";
+import SubmitNftIcon from "../../public/sidebar/submitNft";
+export const sideBarDataForDev = ({ isAuthorized, isDarkTheme, userId, }) => {
     return [
         {
             href: '/',
             title: 'Explore',
-            icon: (0, jsx_runtime_1.jsx)(explore_svg_1.default, {}),
+            icon: _jsx(ExploreIcon, {}),
             isExternalUrl: false,
         },
         ...(isAuthorized
@@ -25,13 +19,13 @@ const sideBarDataForDev = ({ isAuthorized, isDarkTheme, userId, }) => {
                 {
                     href: `/rewards/${userId}`,
                     title: 'Rewards',
-                    icon: (0, jsx_runtime_1.jsx)(rewards_svg_1.default, {}),
+                    icon: _jsx(RewardsIcon, {}),
                     isExternalUrl: false,
                 },
                 {
                     href: '/invite-codes',
                     title: 'My invites',
-                    icon: (0, jsx_runtime_1.jsx)(my_invites_svg_1.default, {}),
+                    icon: _jsx(MyInvitesIcon, {}),
                     isExternalUrl: false,
                 },
             ]
@@ -39,42 +33,40 @@ const sideBarDataForDev = ({ isAuthorized, isDarkTheme, userId, }) => {
         {
             href: 'https://apidocs.ludo.com/',
             title: 'API',
-            icon: (0, jsx_runtime_1.jsx)(api_svg_1.default, {}),
+            icon: _jsx(ApiIcon, {}),
             isExternalUrl: true,
         },
         {
             href: '/',
             title: 'Submit NFT',
-            icon: (0, jsx_runtime_1.jsx)(submitNft_svg_1.default, {}),
+            icon: _jsx(SubmitNftIcon, {}),
             isExternalUrl: false,
         },
         {
             href: '/',
             title: 'About Ludo',
-            icon: isDarkTheme ? (0, jsx_runtime_1.jsx)(aboutLudoDark_svg_1.default, {}) : (0, jsx_runtime_1.jsx)(aboutLudo_svg_1.default, {}),
+            icon: isDarkTheme ? _jsx(AboutLudoDarkIcon, {}) : _jsx(AboutLudoIcon, {}),
             isExternalUrl: false,
         },
     ];
 };
-exports.sideBarDataForDev = sideBarDataForDev;
-const sideBarDataForProd = ({ isAuthorized, userId, }) => {
+export const sideBarDataForProd = ({ isAuthorized, userId, }) => {
     return [
         ...(isAuthorized
             ? [
                 {
                     href: `/rewards/${userId}`,
                     title: 'Rewards',
-                    icon: (0, jsx_runtime_1.jsx)(rewards_svg_1.default, {}),
+                    icon: _jsx(RewardsIcon, {}),
                     isExternalUrl: false,
                 },
                 {
                     href: '/invite-codes',
                     title: 'My invites',
-                    icon: (0, jsx_runtime_1.jsx)(my_invites_svg_1.default, {}),
+                    icon: _jsx(MyInvitesIcon, {}),
                     isExternalUrl: false,
                 },
             ]
             : []),
     ];
 };
-exports.sideBarDataForProd = sideBarDataForProd;

package/build/components/sidebar/index.js

@@ -1,51 +1,23 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importStar(require("styled-components"));
-const sidebar_1 = require("@ludo.ninja/ui/build/components/sidebar");
-const interface_1 = require("@ludo.ninja/ui/build/dto/Theme/interface");
-const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const data_1 = require("./data");
-const sidebarInviteCodeLabel_1 = __importDefault(require("./sidebarInviteCodeLabel"));
-const useSignOut_1 = require("../../modules/user/auth/useSignOut");
-const store_1 = require("../../modules/user/store");
-const env_1 = require("../../store/env");
-const ui_1 = require("../../store/ui");
-const ScreenWidth_1 = require("../../styles/ScreenWidth");
-const Userpic_1 = __importDefault(require("../../system/Img/Userpic"));
-const scale_1 = require("../../utils/adaptive/scale");
-const auth_1 = require("../../utils/auth");
-const screen_1 = require("../../utils/screen");
-const useExtension_1 = __importDefault(require("../../hooks/extension/useExtension"));
-const MenuItem = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { sideBarDataForDev, sideBarDataForProd, } from "./data";
+import SidebarInviteCodeLabel from "./sidebarInviteCodeLabel";
+import { useSignOut } from "../../modules/user/auth/useSignOut";
+import { useUserStore } from "../../modules/user/store";
+import { useEnvStore } from "../../store/env";
+import { useUiStore } from "../../store/ui";
+import { mediaQuery } from "../../styles/ScreenWidth";
+import UserPic from "../../system/Img/Userpic";
+import { getAdaptiveScale } from "../../utils/adaptive/scale";
+import { useRedirectToLoginWindow } from "../../utils/auth";
+import { useWindowDimensions, useWindowDimensionsWithServerInitial, } from "../../utils/screen";
+import useExtension from "../../hooks/extension/useExtension";
+const MenuItem = styled.div `
   font-size: 15px;
   font-weight: 500;
   line-height: 22px;
@@ -58,7 +30,7 @@ const MenuItem = styled_components_1.default.div `
   cursor: pointer;
   color: ${({ theme }) => theme.colors.secondaryText};
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
+  ${mediaQuery.mobile} {
     font-size: 14px;
     line-height: 20px;
   }
@@ -72,30 +44,30 @@ const MenuItem = styled_components_1.default.div `
     }
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
-    line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
-    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(4)};
-    text-indent: ${(0, _4k_1.adaptiveValueCalc)(4)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+  ${mediaQuery.minWidthFourK} {
+    font-size: ${adaptiveValueCalc(15)};
+    line-height: ${adaptiveValueCalc(22)};
+    gap: ${adaptiveValueCalc(8)};
+    padding: ${adaptiveValueCalc(12)} ${adaptiveValueCalc(4)};
+    text-indent: ${adaptiveValueCalc(4)};
+    border-radius: ${adaptiveValueCalc(4)};
     img {
-      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      width: ${adaptiveValueCalc(20)};
+      height: ${adaptiveValueCalc(20)};
     }
   }
 `;
-const BeforeMenuContainer = styled_components_1.default.div `
+const BeforeMenuContainer = styled.div `
   padding: 12px 0;
   border-bottom: 1px solid ${({ theme }) => theme.colors.divider};
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0;
-    border-bottom: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(12)} 0;
+    border-bottom: ${adaptiveValueCalc(1)} solid
       ${({ theme }) => theme.colors.divider};
   }
 `;
-const SLink = (0, styled_components_1.default)(link_1.default) `
+const SLink = styled(Link) `
   &:not(:last-child) svg path {
     fill: ${({ theme }) => theme.colors.sidebarSvgPathFill};
   }
@@ -105,9 +77,9 @@ const SLink = (0, styled_components_1.default)(link_1.default) `
     display: flex;
     align-items: center;
     justify-content: center;
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    ${mediaQuery.minWidthFourK} {
+      width: ${adaptiveValueCalc(20)};
+      height: ${adaptiveValueCalc(20)};
       svg {
         transform: ${(props) => 'transform' in props.scale && props.scale.transform};
       }
@@ -116,39 +88,39 @@ const SLink = (0, styled_components_1.default)(link_1.default) `
 `;
 // Component
 const Sidebar = () => {
-    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    const closeSidebar = (0, ui_1.useUiStore)((state) => state.closeSidebar);
-    const isSidebarOpen = (0, ui_1.useUiStore)((state) => state.isSidebarOpen);
-    const isAuthorized = (0, store_1.useUserStore)((state) => state.isSignedIn);
-    const getUser = (0, store_1.useUserStore)((state) => state.user);
-    const signOut = (0, useSignOut_1.useSignOut)();
-    const { deviceType } = (0, screen_1.useWindowDimensions)();
-    const { isExtensionInstalled, openExtensionChromeStorePage, openExtension } = (0, useExtension_1.default)();
+    const redirectToLoginWindow = useRedirectToLoginWindow();
+    const isProd = useEnvStore((state) => state.isProd);
+    const closeSidebar = useUiStore((state) => state.closeSidebar);
+    const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
+    const isAuthorized = useUserStore((state) => state.isSignedIn);
+    const getUser = useUserStore((state) => state.user);
+    const signOut = useSignOut();
+    const { deviceType } = useWindowDimensions();
+    const { isExtensionInstalled, openExtensionChromeStorePage, openExtension } = useExtension();
     const { wallets, userId } = getUser ?? [''];
-    const { type } = (0, styled_components_1.useTheme)();
-    const isDarkTheme = type === interface_1.ThemeEnum.dark;
+    const { type } = useTheme();
+    const isDarkTheme = type === ThemeEnum.dark;
     // Todo fav-list
     const sideBarData = isProd()
-        ? (0, data_1.sideBarDataForProd)({ userId, isAuthorized })
-        : (0, data_1.sideBarDataForDev)({ userId, isAuthorized, isDarkTheme });
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    return ((0, jsx_runtime_1.jsx)(sidebar_1.Sidebar, { closeSidebar: closeSidebar, isOpen: isSidebarOpen, handle: {
+        ? sideBarDataForProd({ userId, isAuthorized })
+        : sideBarDataForDev({ userId, isAuthorized, isDarkTheme });
+    const { windowDimensions } = useWindowDimensionsWithServerInitial();
+    return (_jsx(SidebarUi, { closeSidebar: closeSidebar, isOpen: isSidebarOpen, handle: {
             login: () => {
                 closeSidebar();
                 redirectToLoginWindow();
             },
             logout: signOut,
         }, isAuthorized: isAuthorized, userWallets: wallets, slots: {
-            menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => ((0, jsx_runtime_1.jsxs)(SLink, { href: href, target: isExternalUrl ? '_blank' : '_self', onClick: closeSidebar, passHref: isExternalUrl, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), children: [(0, jsx_runtime_1.jsx)("span", { className: "icon-wrapper", children: icon }), title] }, title))),
-            userPicture: ({ children, height, width, isNeedBoxTransform }) => ((0, jsx_runtime_1.jsx)(Userpic_1.default, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
-            inviteCode: (0, jsx_runtime_1.jsx)(sidebarInviteCodeLabel_1.default, {}),
+            menu: sideBarData.map(({ title, href, icon, isExternalUrl }) => (_jsxs(SLink, { href: href, target: isExternalUrl ? '_blank' : '_self', onClick: closeSidebar, passHref: isExternalUrl, scale: getAdaptiveScale({ windowDimensions, currentSize: 1 }), children: [_jsx("span", { className: "icon-wrapper", children: icon }), title] }, title))),
+            userPicture: ({ children, height, width, isNeedBoxTransform }) => (_jsx(UserPic, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform, children: children })),
+            inviteCode: _jsx(SidebarInviteCodeLabel, {}),
             ...(deviceType == 'isDesktop' && isAuthorized
                 ? {
-                    beforeMenu: ((0, jsx_runtime_1.jsx)(BeforeMenuContainer, { children: isExtensionInstalled ? ((0, jsx_runtime_1.jsxs)(MenuItem, { onClick: () => {
+                    beforeMenu: (_jsx(BeforeMenuContainer, { children: isExtensionInstalled ? (_jsxs(MenuItem, { onClick: () => {
                                 closeSidebar();
                                 openExtension();
-                            }, children: [(0, jsx_runtime_1.jsx)("img", { src: "/sidebar/ludoX.svg", alt: "Ludo X", width: 20, height: 20 }), "Open Ludo X"] })) : ((0, jsx_runtime_1.jsx)("div", { style: { padding: '12px 0' }, children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { onClick: () => {
+                            }, children: [_jsx("img", { src: "/sidebar/ludoX.svg", alt: "Ludo X", width: 20, height: 20 }), "Open Ludo X"] })) : (_jsx("div", { style: { padding: '12px 0' }, children: _jsx(MainButton, { onClick: () => {
                                     closeSidebar();
                                     openExtensionChromeStorePage();
                                 }, text: 'Install Ludo X now', variant: 'primaryM' }) })) })),
@@ -157,4 +129,4 @@ const Sidebar = () => {
         } }));
 };
 // Export
-exports.default = Sidebar;
+export default Sidebar;

package/build/components/sidebar/initializer.js

@@ -1,36 +1,6 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarInitializer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dynamic_1 = __importDefault(require("next/dynamic"));
-const Sidebar = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./index'))).then((res) => res.default), {
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+const Sidebar = dynamic(() => import('./index').then((res) => res.default), {
     ssr: false,
 });
-const SidebarInitializer = () => (0, jsx_runtime_1.jsx)(Sidebar, {});
-exports.SidebarInitializer = SidebarInitializer;
+export const SidebarInitializer = () => _jsx(Sidebar, {});