@ludo.ninja/components 2.0.0 → 2.0.2

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

@@ -0,0 +1,25 @@
+"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"));
+// Styles
+const StyledMobileFilters = styled_components_1.default.div `
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 32px;
+
+  & > div:last-child {
+    margin-bottom: 30px;
+    border-bottom: unset;
+  }
+`;
+// Component
+const MobileFilters = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(StyledMobileFilters, { children: children });
+};
+// Export
+exports.default = MobileFilters;

package/build/components/searchFiltersConnector/filters/setsFiltersForm/index.d.ts

@@ -0,0 +1,9 @@
+import { optionType } from '@/system/Forms/Selects/DesktopSelect/type';
+declare const SetsFiltersForm: ({ selectTypeSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+    handleNeedShowButtons: (value: boolean) => void;
+    handleFiltersCount: (value: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetsFiltersForm;

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

@@ -0,0 +1,53 @@
+"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"));
+// Styles
+const StyledSetsFiltersForm = styled_components_1.default.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)(() => {
+        if (selectedSearchResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        const arr = [
+            selectedSearchResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        const count = arr.filter((value) => value).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    const handleChangeSearchResult = (value) => {
+        setSelectedSearchResult(value);
+    };
+    const handleChangeBlockchainCategoryResult = (value) => {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    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))) })] }));
+};
+// Export
+exports.default = SetsFiltersForm;

package/build/components/searchFiltersConnector/index.d.ts

@@ -0,0 +1,10 @@
+import { searchSchema as schema } from '@ludo.ninja/api';
+import { DefaultsCollectionsSearchPageProps, DefaultsNftSearchPageProps } from '@/api/server-preferences/queries/fetchSearchResultSelections/queryData';
+export declare const useSearchFiltersConnector: <TFilterInput extends schema.ICollectionFilterInput | schema.ICreationFilterInput = schema.ICreationFilterInput>({ defaults, isDisabledTypeFilters, isMobile, }: {
+    defaults: DefaultsNftSearchPageProps | DefaultsCollectionsSearchPageProps;
+    isDisabledTypeFilters?: boolean | undefined;
+    isMobile: boolean;
+}) => {
+    filterInput: TFilterInput;
+    renderFilters: import("react/jsx-runtime").JSX.Element;
+};

package/build/components/searchFiltersConnector/index.js

@@ -0,0 +1,121 @@
+"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, }) {
+    const defaultCopyWithoutTerm = {
+        time: defaults.time,
+        blockchain: defaults.blockchain,
+        category: defaults.category,
+        status: defaults.status,
+        ...('type' in defaults
+            ? {
+                type: defaults.type,
+            }
+            : {}),
+    };
+    const { searchResultSelections } = (0, fetchSearchResultSelections_1.useFetchSearchResultSelections)();
+    const [filterInput, setFilterInput] = (0, react_1.useState)(defaultCopyWithoutTerm);
+    const router = (0, router_1.useRouter)();
+    (0, react_1.useEffect)(() => {
+        router.replace({
+            query: {
+                ...router.query,
+                ...defaultCopyWithoutTerm,
+            },
+        }, undefined, { shallow: true });
+    }, []);
+    const handleFilterInput = async (fieldName, fieldValue) => {
+        await router.replace({
+            query: { ...router.query, [fieldName]: fieldValue },
+        }, undefined, { shallow: true });
+        setFilterInput((prevFilters) => ({
+            ...prevFilters,
+            [fieldName]: fieldValue,
+        }));
+    };
+    const handleMobileFilterInput = async (newFilters) => {
+        await router.replace({
+            query: { ...router.query, ...newFilters },
+        }, undefined, { shallow: true });
+        setFilterInput((prevFilters) => ({
+            ...prevFilters,
+            ...newFilters,
+        }));
+    };
+    const handleResetFilter = () => {
+        if (searchResultSelections) {
+            const filterInitialStateNft = {
+                ...(isDisabledTypeFilters
+                    ? {}
+                    : { type: searchResultSelections.typeSelections[0]?.id }),
+                time: searchResultSelections.timeSelections[0]?.id,
+                blockchain: searchResultSelections.blockchainSelections[0]?.id,
+                category: searchResultSelections.categorySelections[0]?.id,
+                status: searchResultSelections.statusSelections[0]?.id,
+            };
+            setFilterInput(filterInitialStateNft);
+            router.replace({
+                query: {
+                    ...router.query,
+                    ...filterInitialStateNft,
+                },
+            }, undefined, { shallow: true });
+        }
+    };
+    return {
+        filterInput,
+        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: [
+                    ...(!isDisabledTypeFilters
+                        ? [
+                            {
+                                id: 1,
+                                data: {
+                                    selectName: 'type',
+                                    selectOptions: searchResultSelections.typeSelections,
+                                },
+                            },
+                        ]
+                        : []),
+                    {
+                        id: 2,
+                        data: {
+                            selectName: 'blockchain',
+                            selectOptions: searchResultSelections.blockchainSelections,
+                        },
+                    },
+                    {
+                        id: 3,
+                        data: {
+                            selectName: 'category',
+                            selectOptions: searchResultSelections.categorySelections,
+                        },
+                    },
+                    {
+                        id: 4,
+                        data: {
+                            selectName: 'time',
+                            selectOptions: searchResultSelections.timeSelections,
+                        },
+                    },
+                    {
+                        id: 5,
+                        data: {
+                            selectName: 'status',
+                            selectOptions: searchResultSelections.statusSelections,
+                        },
+                    },
+                ], filterInputHandler: handleFilterInput, handleResetFilter: handleResetFilter, handleMobileFilterInput: handleMobileFilterInput, isMobile: isMobile })) })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})),
+    };
+};
+exports.useSearchFiltersConnector = useSearchFiltersConnector;

package/build/components/sidebar/data.d.ts

@@ -0,0 +1,19 @@
+export declare const sideBarDataForDev: ({ isAuthorized, isDarkTheme, userId, }: {
+    isAuthorized: boolean;
+    isDarkTheme: boolean;
+    userId: string;
+}) => {
+    href: string;
+    title: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    isExternalUrl: boolean;
+}[];
+export declare const sideBarDataForProd: ({ isAuthorized, userId, }: {
+    isAuthorized: boolean;
+    userId: string;
+}) => {
+    href: string;
+    title: string;
+    icon: import("react/jsx-runtime").JSX.Element;
+    isExternalUrl: boolean;
+}[];

package/build/components/sidebar/data.js

@@ -0,0 +1,80 @@
+"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.svg"));
+const aboutLudoDark_svg_1 = __importDefault(require("@/public/sidebar/aboutLudoDark.svg"));
+const api_svg_1 = __importDefault(require("@/public/sidebar/api.svg"));
+const explore_svg_1 = __importDefault(require("@/public/sidebar/explore.svg"));
+const my_invites_svg_1 = __importDefault(require("@/public/sidebar/my-invites.svg"));
+const rewards_svg_1 = __importDefault(require("@/public/sidebar/rewards.svg"));
+const submitNft_svg_1 = __importDefault(require("@/public/sidebar/submitNft.svg"));
+const sideBarDataForDev = ({ isAuthorized, isDarkTheme, userId, }) => {
+    return [
+        {
+            href: '/',
+            title: 'Explore',
+            icon: (0, jsx_runtime_1.jsx)(explore_svg_1.default, {}),
+            isExternalUrl: false,
+        },
+        ...(isAuthorized
+            ? [
+                {
+                    href: `/rewards/${userId}`,
+                    title: 'Rewards',
+                    icon: (0, jsx_runtime_1.jsx)(rewards_svg_1.default, {}),
+                    isExternalUrl: false,
+                },
+                {
+                    href: '/invite-codes',
+                    title: 'My invites',
+                    icon: (0, jsx_runtime_1.jsx)(my_invites_svg_1.default, {}),
+                    isExternalUrl: false,
+                },
+            ]
+            : []),
+        {
+            href: 'https://apidocs.ludo.com/',
+            title: 'API',
+            icon: (0, jsx_runtime_1.jsx)(api_svg_1.default, {}),
+            isExternalUrl: true,
+        },
+        {
+            href: '/',
+            title: 'Submit NFT',
+            icon: (0, jsx_runtime_1.jsx)(submitNft_svg_1.default, {}),
+            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, {}),
+            isExternalUrl: false,
+        },
+    ];
+};
+exports.sideBarDataForDev = sideBarDataForDev;
+const sideBarDataForProd = ({ isAuthorized, userId, }) => {
+    return [
+        ...(isAuthorized
+            ? [
+                {
+                    href: `/rewards/${userId}`,
+                    title: 'Rewards',
+                    icon: (0, jsx_runtime_1.jsx)(rewards_svg_1.default, {}),
+                    isExternalUrl: false,
+                },
+                {
+                    href: '/invite-codes',
+                    title: 'My invites',
+                    icon: (0, jsx_runtime_1.jsx)(my_invites_svg_1.default, {}),
+                    isExternalUrl: false,
+                },
+            ]
+            : []),
+    ];
+};
+exports.sideBarDataForProd = sideBarDataForProd;

package/build/components/sidebar/index.d.ts

@@ -0,0 +1,2 @@
+declare const Sidebar: () => import("react/jsx-runtime").JSX.Element;
+export default Sidebar;

package/build/components/sidebar/index.js

@@ -0,0 +1,160 @@
+"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("@/components/sidebar/data");
+const sidebarInviteCodeLabel_1 = __importDefault(require("@/components/sidebar/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 `
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 22px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 4px;
+  text-indent: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  color: ${({ theme }) => theme.colors.secondaryText};
+
+  ${ScreenWidth_1.mediaQuery.mobile} {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  transition: background-color 0.3s ease-in-out;
+
+  @media (hover: hover) {
+    &:hover {
+      transition: background-color 0.3s ease-in;
+      background-color: ${({ theme }) => theme.colors.secondaryBg};
+    }
+  }
+
+  ${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)};
+    img {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+    }
+  }
+`;
+const BeforeMenuContainer = styled_components_1.default.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
+      ${({ theme }) => theme.colors.divider};
+  }
+`;
+const SLink = (0, styled_components_1.default)(link_1.default) `
+  &:not(:last-child) svg path {
+    fill: ${({ theme }) => theme.colors.sidebarSvgPathFill};
+  }
+  .icon-wrapper {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      width: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      svg {
+        transform: ${(props) => 'transform' in props.scale && props.scale.transform};
+      }
+    }
+  }
+`;
+// 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 { wallets, userId } = getUser ?? [''];
+    const { type } = (0, styled_components_1.useTheme)();
+    const isDarkTheme = type === interface_1.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: {
+            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, {}),
+            ...(deviceType == 'isDesktop' && isAuthorized
+                ? {
+                    beforeMenu: ((0, jsx_runtime_1.jsx)(BeforeMenuContainer, { children: isExtensionInstalled ? ((0, jsx_runtime_1.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: () => {
+                                    closeSidebar();
+                                    openExtensionChromeStorePage();
+                                }, text: 'Install Ludo X now', variant: 'primaryM' }) })) })),
+                }
+                : {}),
+        } }));
+};
+// Export
+exports.default = Sidebar;

package/build/components/sidebar/initializer.d.ts

@@ -0,0 +1 @@
+export declare const SidebarInitializer: () => import("react/jsx-runtime").JSX.Element;

package/build/components/sidebar/initializer.js

@@ -0,0 +1,36 @@
+"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), {
+    ssr: false,
+});
+const SidebarInitializer = () => (0, jsx_runtime_1.jsx)(Sidebar, {});
+exports.SidebarInitializer = SidebarInitializer;

package/build/components/sidebar/sidebarFilters/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const SidebarFilters: ({ isOpen, handleClose, children, }: {
+    isOpen: boolean;
+    handleClose: () => void;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SidebarFilters;

package/build/components/sidebar/sidebarFilters/index.js

@@ -0,0 +1,51 @@
+"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"));
+const typography_1 = require("@/styles/typography");
+const close20_svg_1 = __importDefault(require("@/public/close20.svg"));
+// Styles
+const StyledSidebarFilters = styled_components_1.default.aside `
+  box-sizing: border-box;
+  background-color: white;
+  position: fixed;
+  z-index: 1000000;
+  transform: ${(props) => props.isOpen ? 'translateX(0%)' : 'translateX(calc(100% + 16px))'};
+  transition: transform 0.2s;
+  will-change: transform;
+  width: 100%;
+  height: var(--app-height);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0;
+  display: flex;
+  flex-direction: column;
+
+  .closeIcon {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    display: flex;
+    justify-content: flex-end;
+    cursor: pointer;
+  }
+
+  .header {
+    padding: 32px 32px 6px 32px;
+
+    .caption {
+      ${typography_1.FH3};
+      margin: 0;
+    }
+  }
+`;
+// Component
+const SidebarFilters = ({ isOpen, handleClose, children, }) => {
+    return ((0, jsx_runtime_1.jsxs)(StyledSidebarFilters, { isOpen: isOpen, children: [(0, jsx_runtime_1.jsx)("div", { className: 'closeIcon', onClick: handleClose, children: (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "header", children: (0, jsx_runtime_1.jsx)("h3", { className: 'caption', children: "Filters" }) }), children] }));
+};
+// Export
+exports.default = SidebarFilters;

package/build/components/sidebar/sidebarInviteCodeLabel/index.d.ts

@@ -0,0 +1,2 @@
+declare const SidebarInviteCodeLabel: () => import("react/jsx-runtime").JSX.Element;
+export default SidebarInviteCodeLabel;

package/build/components/sidebar/sidebarInviteCodeLabel/index.js

@@ -0,0 +1,38 @@
+"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"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const store_1 = require("@/modules/user/store");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const ExperienceLabel_1 = __importDefault(require("@/system/Labels/ExperienceLabel"));
+const InviteLabel_1 = __importDefault(require("@/system/Labels/InviteLabel"));
+// Styles
+const StyledSidebarInviteCodeLabel = styled_components_1.default.div `
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    gap: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    margin-top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  }
+`;
+// Component
+const SidebarInviteCodeLabel = () => {
+    const { getUser, userExp, isLoadingExp, errorExp, isLoadingProfileData, inviteCodes, } = (0, store_1.useUserStore)((state) => ({
+        getUser: state.user,
+        userExp: state.userExp,
+        isLoadingExp: state.isLoadingExp,
+        errorExp: state.errorExp,
+        isLoadingProfileData: state.isLoadingProfileData,
+        inviteCodes: state.inviteCodes,
+    }));
+    const unUsedInviteCodes = inviteCodes?.filter((code) => !code.isUsed);
+    return ((0, jsx_runtime_1.jsxs)(StyledSidebarInviteCodeLabel, { children: [(0, jsx_runtime_1.jsx)(ExperienceLabel_1.default, { value: userExp.xps, link: `/rewards/${getUser?.userId}`, loading: isLoadingExp || !!errorExp }), !!unUsedInviteCodes && ((0, jsx_runtime_1.jsx)(InviteLabel_1.default, { value: unUsedInviteCodes.length, link: '/invite-codes', loading: isLoadingProfileData }))] }));
+};
+// Export
+exports.default = SidebarInviteCodeLabel;

package/build/components/toTopBtn/index.d.ts

@@ -0,0 +1,5 @@
+declare const ToTopBtn: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const ToTopBtnWithCustomHandler: ({ handleClickFunction, }: {
+    handleClickFunction: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ToTopBtn;