@ludo.ninja/components 1.7.5 → 1.7.6

package/dist/modules/gallery/ui/itemsPreview/index.jsx

@@ -1,180 +0,0 @@
-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, { useMemo } from 'react';
-import Skeleton from 'react-loading-skeleton';
-import { Virtuoso } from 'react-virtuoso';
-import styled from 'styled-components';
-import { ScreenWidth } from '@ludo.ninja/ui/build/styles/ScreenWidth';
-import { adaptiveValueCalc, getAdaptiveValue, } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor } from '@/styles/colors';
-import { FH3 } from '@/styles/typography';
-import CardImage from '@/system/Cards/CardMedia/CardImage';
-import CardsHolderLoader from '@/system/CardsHolderWithSkeleton/CardsHolderLoader';
-import { getAdaptiveValueWithCheck4k } from '@/utils/adaptive/check4k';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
-// import DeleteIcon from '@/public/gallery/delete.svg';
-// Styles
-var StyledItemsPreview = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 40px;\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ", ";\n      color: ", ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    max-height: 302px;\n    min-width: 168px;\n    overflow-x: auto;\n  }\n\n  .content-item {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    cursor: pointer;\n    transition: transform 0.2s;\n    transform: scale(1);\n    will-change: transform;\n\n    > img,\n    video {\n      border-radius: 6px;\n    }\n\n    .content-item-gallery-pic {\n      border-radius: 6px;\n      width: 100%;\n      height: 100%;\n    }\n\n    .content-item-gallery-deleteIcon {\n      position: absolute;\n      right: 4px;\n      bottom: 4px;\n      transition: transform 0.2s;\n      transform: scale(1);\n\n      :hover {\n        transform: scale(1.15);\n        transition: transform 0.2s;\n      }\n    }\n\n    &:hover {\n      .content-item-gallery-deleteIcon {\n        transform: scale(1.15);\n        transition: transform 0.2s;\n      }\n    }\n  }\n\n  @media (max-width: 767px) {\n    margin-right: 0;\n    margin-bottom: 32px;\n\n    .content-item {\n      width: 68px;\n      height: 68px;\n    }\n\n    .content {\n      height: 144px;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n    }\n  }\n\n  ", " {\n    margin-right: ", ";\n\n    .head {\n      margin-bottom: ", ";\n    }\n\n    .content {\n      gap: ", ";\n      max-height: ", ";\n      min-width: ", ";\n    }\n\n    .content-item {\n      width: ", ";\n      height: ", ";\n\n      > img,\n      video {\n        border-radius: ", ";\n      }\n\n      .content-item-gallery-pic {\n        border-radius: ", ";\n      }\n\n      .content-item-gallery-deleteIcon {\n        right: ", ";\n        bottom: ", ";\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  margin-right: 40px;\n\n  .head {\n    margin-bottom: 20px;\n\n    .tittle {\n      ", ";\n      color: ", ";\n      margin: 0;\n    }\n  }\n\n  .content {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 8px;\n    max-height: 302px;\n    min-width: 168px;\n    overflow-x: auto;\n  }\n\n  .content-item {\n    position: relative;\n    width: 80px;\n    height: 80px;\n    cursor: pointer;\n    transition: transform 0.2s;\n    transform: scale(1);\n    will-change: transform;\n\n    > img,\n    video {\n      border-radius: 6px;\n    }\n\n    .content-item-gallery-pic {\n      border-radius: 6px;\n      width: 100%;\n      height: 100%;\n    }\n\n    .content-item-gallery-deleteIcon {\n      position: absolute;\n      right: 4px;\n      bottom: 4px;\n      transition: transform 0.2s;\n      transform: scale(1);\n\n      :hover {\n        transform: scale(1.15);\n        transition: transform 0.2s;\n      }\n    }\n\n    &:hover {\n      .content-item-gallery-deleteIcon {\n        transform: scale(1.15);\n        transition: transform 0.2s;\n      }\n    }\n  }\n\n  @media (max-width: 767px) {\n    margin-right: 0;\n    margin-bottom: 32px;\n\n    .content-item {\n      width: 68px;\n      height: 68px;\n    }\n\n    .content {\n      height: 144px;\n      grid-template-columns: 1fr 1fr 1fr 1fr;\n    }\n  }\n\n  ", " {\n    margin-right: ", ";\n\n    .head {\n      margin-bottom: ", ";\n    }\n\n    .content {\n      gap: ", ";\n      max-height: ", ";\n      min-width: ", ";\n    }\n\n    .content-item {\n      width: ", ";\n      height: ", ";\n\n      > img,\n      video {\n        border-radius: ", ";\n      }\n\n      .content-item-gallery-pic {\n        border-radius: ", ";\n      }\n\n      .content-item-gallery-deleteIcon {\n        right: ", ";\n        bottom: ", ";\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), FH3, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(40), adaptiveValueCalc(20), adaptiveValueCalc(8), adaptiveValueCalc(302), adaptiveValueCalc(168), adaptiveValueCalc(80), adaptiveValueCalc(80), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(4), adaptiveValueCalc(4), adaptiveValueCalc(24), adaptiveValueCalc(24));
-var SCardsRow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n"], ["\n  display: flex;\n  justify-content: space-between;\n"])));
-// Component
-export var useVirtuosoData = function (_a) {
-    var creations = _a.creations, isMobile = _a.isMobile;
-    var virtuosoData = useMemo(function () {
-        var columnCount = isMobile ? 4 : 2;
-        var creationPacks = [];
-        var indexPack = 0;
-        creations.forEach(function (creation) {
-            if (!creationPacks[indexPack]) {
-                creationPacks[indexPack] = [];
-            }
-            creationPacks[indexPack].push(creation);
-            if (creationPacks[indexPack].length >= columnCount) {
-                indexPack++;
-            }
-        });
-        return { creationPacks: creationPacks, creations: creations };
-    }, [isMobile, creations]);
-    var placeholderData = useMemo(function () {
-        var columnCount = isMobile ? 4 : 2;
-        var creationPacks = [[]];
-        var indexPack = 0;
-        Array.from({
-            length: 12,
-        }).forEach(function (_, index) {
-            if (!creationPacks[indexPack]) {
-                creationPacks[indexPack] = [];
-            }
-            creationPacks[indexPack].push(index);
-            if (creationPacks[indexPack].length >= columnCount) {
-                indexPack++;
-            }
-        });
-        return creationPacks;
-    }, [isMobile]);
-    return {
-        virtuosoData: virtuosoData,
-        placeholderData: placeholderData,
-    };
-};
-var ItemsPreview = function (_a) {
-    var creations = _a.creations, deleteMethod = _a.deleteMethod, title = _a.title, loadMore = _a.loadMore, isLoading = _a.isLoading, isNextLoading = _a.isNextLoading, allCount = _a.allCount;
-    var _b = useWindowDimensionsWithServerInitial(), isMobile = _b.isMobile, windowDimensions = _b.windowDimensions;
-    var _c = useVirtuosoData({
-        creations: creations,
-        isMobile: isMobile,
-    }), virtuosoData = _c.virtuosoData, placeholderData = _c.placeholderData;
-    var virtuosoBody = (function () {
-        var getGapCards = function () {
-            if (windowDimensions &&
-                windowDimensions.windowWidth >= ScreenWidth.FOUR_K_MIN) {
-                return getAdaptiveValue({
-                    currentSize: 8,
-                    windowWidth: windowDimensions.windowWidth,
-                });
-            }
-            return 8;
-        };
-        if (isLoading) {
-            return {
-                totalCount: placeholderData.length,
-                itemContent: function (index) {
-                    return (<SCardsRow style={{
-                            paddingBottom: (function () {
-                                if (index === virtuosoData.creationPacks.length - 1) {
-                                    return 0;
-                                }
-                                return getGapCards();
-                            })(),
-                            gap: getGapCards(),
-                        }}>
-              {placeholderData[index].map(function (_, ind) { return (<Skeleton height={isMobile
-                                ? 68
-                                : getAdaptiveValueWithCheck4k({
-                                    currentSize: 80,
-                                    windowDimensions: windowDimensions,
-                                })} width={isMobile
-                                ? 68
-                                : getAdaptiveValueWithCheck4k({
-                                    currentSize: 80,
-                                    windowDimensions: windowDimensions,
-                                })} key={ind}/>); })}
-            </SCardsRow>);
-                },
-            };
-        }
-        // if (error) {
-        //   return {
-        //     totalCount: 1,
-        //     itemContent: () => {
-        //       return <CardsError refetch={refetchQuery}/>;
-        //     },
-        //   };
-        // }
-        return {
-            totalCount: virtuosoData.creationPacks.length,
-            itemContent: function (index) {
-                var data = virtuosoData.creationPacks[index];
-                return (<SCardsRow style={{
-                        paddingBottom: (function () {
-                            if (index === virtuosoData.creationPacks.length - 1) {
-                                return 0;
-                            }
-                            return getGapCards();
-                        })(),
-                    }}>
-            {data.map(function (creation) {
-                        var _a, _b;
-                        return (<div className="content-item" key={creation.getCreationId()}>
-                {creation instanceof CollectionCreationEntity ? (<CardImage alt={"".concat(creation.getName(), " ").concat(creation.getAddress() || '')} imgSrc={(_b = (_a = creation.getOriginalUrls()) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : ''} errorImg={'/noContent/noContent.svg'}/>) : (creation.detectMediaType().displaySingleMedia())}
-                <img src="/gallery/delete.svg" alt="delete" width={24} height={24} className={'content-item-gallery-deleteIcon'} onClick={function () {
-                                return deleteMethod(creation instanceof CollectionCreationEntity
-                                    ? "".concat(creation.getItemType() +
-                                        '.' +
-                                        creation.getCreationId())
-                                    : creation.getCreationId());
-                            }}/>
-              </div>);
-                    })}
-          </SCardsRow>);
-            },
-        };
-    })();
-    return (<StyledItemsPreview>
-      <div className={'head'}>
-        <h3 className={'tittle'}>{"".concat(title, " (").concat(allCount || (creations === null || creations === void 0 ? void 0 : creations.length), ")")}</h3>
-      </div>
-      <Virtuoso style={{
-            height: isMobile
-                ? 144
-                : (function () {
-                    if (windowDimensions &&
-                        windowDimensions.windowWidth >= ScreenWidth.FOUR_K_MIN) {
-                        return getAdaptiveValue({
-                            currentSize: 302,
-                            windowWidth: windowDimensions.windowWidth,
-                        });
-                    }
-                    return 302;
-                })(),
-            minWidth: (function () {
-                if (windowDimensions &&
-                    windowDimensions.windowWidth >= ScreenWidth.FOUR_K_MIN) {
-                    return getAdaptiveValue({
-                        currentSize: 168,
-                        windowWidth: windowDimensions.windowWidth,
-                    });
-                }
-                return 168;
-            })(),
-        }} totalCount={virtuosoBody.totalCount} endReached={loadMore} overscan={200} itemContent={virtuosoBody.itemContent} components={{
-            Footer: function () { return (isNextLoading ? <CardsHolderLoader /> : null); },
-        }}/>
-    </StyledItemsPreview>);
-};
-// Export
-export default ItemsPreview;
-var templateObject_1, templateObject_2;

package/dist/modules/notifications/CreatorNotifications.jsx

@@ -1,14 +0,0 @@
-import dynamic from 'next/dynamic';
-import { useIsOpenNotifications } from '@ludo.ninja/ui/build/modules/notifications/useIsOpenNotifications';
-import { useUiStore } from '@/store/ui';
-var Notifications = dynamic(function () {
-    return import('@ludo.ninja/ui/build/modules/notifications').then(function (_) { return _.Notifications; });
-});
-export var CreatorNotifications = function () {
-    var notifications = useUiStore(function (state) { return state.notifications; });
-    var removeNotification = useUiStore(function (state) { return state.removeNotification; });
-    var isOpen = useIsOpenNotifications({ notifications: notifications });
-    return (<>
-      {isOpen && (<Notifications notifications={notifications} removeNotification={removeNotification}/>)}
-    </>);
-};

package/dist/modules/notifications/index.jsx

@@ -1,3 +0,0 @@
-import { createNotificationVariants } from '@ludo.ninja/ui/build/modules/notifications/variants';
-export var createXpNotification = createNotificationVariants.newXp;
-export var createInviteNotification = createNotificationVariants.inviteCode;

package/dist/modules/virtuoso/VirtuosoPageBuilder.jsx

@@ -1,127 +0,0 @@
-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, { useRef } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import styled from 'styled-components';
-import { adaptiveValueCalc, getAdaptiveValue, } from '@ludo.ninja/ui/build/utils/4k';
-import { useVirtuosoInitialScroll } from '@/modules/sessionScroll/useVirtuosoInitialScroll';
-import { VirtuosoToTopBtn, useVirtuosoToTopBtnInitialize, } from '@/modules/virtuoso/VirtuosoToTopBtn';
-import { useSubscribeVirtuosoScrollToHeader } from '@/modules/virtuoso/useSubscribeVirtuosoScrollToHeader';
-import { useVirtuosoData } from '@/modules/virtuoso/useVirtuosoData';
-import { ScreenWidth, mediaQuery } from '@/styles/ScreenWidth';
-import { ProfileSkeleton } from '@/components/profile/profileSkeleton';
-import CardsError from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsError';
-import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
-import { CardSkeleton } from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-import CardsHolderLoader from '@/system/CardsHolderWithSkeleton/CardsHolderLoader';
-var SCardsRow = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 1080px;\n  margin: 0 auto;\n\n  ", " {\n    width: 704px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n  ", " {\n    width: ", ";\n  }\n"], ["\n  display: flex;\n  width: 1080px;\n  margin: 0 auto;\n\n  ", " {\n    width: 704px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.maxWidthTablet, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(1080));
-export var VirtuosoPageBuilder = function (_a) {
-    var activeTab = _a.activeTab, isMobile = _a.isMobile, creations = _a.creations, windowDimensions = _a.windowDimensions, isLoading = _a.isLoading, error = _a.error, refetchQuery = _a.refetchQuery, loadMore = _a.loadMore, renderCreation = _a.renderCreation, notFoundText = _a.notFoundText, isNextLoading = _a.isNextLoading, headerSlot = _a.headerSlot, isProfileCards = _a.isProfileCards;
-    var onScroll = useSubscribeVirtuosoScrollToHeader().onScroll;
-    var virtuoso = useRef(null);
-    var virtuosoToTopBtnInitialize = useVirtuosoToTopBtnInitialize();
-    var _b = useVirtuosoData({
-        activeTab: activeTab,
-        isMobile: isMobile,
-        creations: creations,
-        isProfileCards: !!windowDimensions &&
-            windowDimensions.windowWidth < 1200 &&
-            isProfileCards,
-    }), virtuosoData = _b.virtuosoData, placeholderData = _b.placeholderData;
-    var _c = useVirtuosoInitialScroll({
-        virtuoso: virtuoso,
-        virtuosoData: virtuosoData,
-        activeTab: activeTab,
-    }), updateScroll = _c.updateScroll, setScrollTop = _c.setScrollTop;
-    var virtuosoBody = (function () {
-        var getGapCards = function () {
-            var width = windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth;
-            if (width && width < 768)
-                return 12;
-            if (width && width < 1200)
-                return 16;
-            if (width && width >= ScreenWidth.FOUR_K_MIN) {
-                return getAdaptiveValue({
-                    windowWidth: width,
-                    currentSize: 24,
-                });
-            }
-            return 24;
-        };
-        if (isLoading) {
-            return {
-                totalCount: placeholderData.length,
-                itemContent: function (index) {
-                    return (<SCardsRow style={{
-                            paddingBottom: (function () {
-                                if (index === virtuosoData.creationPacks.length - 1) {
-                                    var width = windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth;
-                                    if (width && width < 768)
-                                        return 20;
-                                    if (width && width < 1200)
-                                        return 32;
-                                }
-                                return getGapCards();
-                            })(),
-                            gap: getGapCards(),
-                        }}>
-              {placeholderData[index].map(function (_, ind) {
-                            return isProfileCards ? (<ProfileSkeleton key={ind}/>) : (<CardSkeleton key={ind}/>);
-                        })}
-            </SCardsRow>);
-                },
-            };
-        }
-        if (error) {
-            return {
-                totalCount: 1,
-                itemContent: function () {
-                    return <CardsError refetch={refetchQuery}/>;
-                },
-            };
-        }
-        if (notFoundText && virtuosoData.creations.length === 0) {
-            return {
-                totalCount: 1,
-                itemContent: function () {
-                    return <CardsNoResults noFoundText={notFoundText}/>;
-                },
-            };
-        }
-        return {
-            totalCount: virtuosoData.creationPacks.length,
-            itemContent: function (index) {
-                var data = virtuosoData.creationPacks[index];
-                return (<SCardsRow style={{
-                        paddingBottom: (function () {
-                            if (index === virtuosoData.creationPacks.length - 1) {
-                                var width = windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth;
-                                if (width && width < 768)
-                                    return 20;
-                                if (width && width < 1200)
-                                    return 32;
-                            }
-                            return getGapCards();
-                        })(),
-                        gap: getGapCards(),
-                    }} onClick={function () { return updateScroll(index); }}>
-            {data.map(renderCreation)}
-          </SCardsRow>);
-            },
-        };
-    })();
-    return (<>
-      <Virtuoso ref={virtuoso} style={{ height: 'var(--app-height)' }} onScroll={function (e) {
-            setScrollTop(e.currentTarget.scrollTop);
-            onScroll(e.currentTarget.scrollTop);
-            virtuosoToTopBtnInitialize.onScroll(e.currentTarget.scrollTop);
-        }} totalCount={virtuosoBody.totalCount} endReached={loadMore} overscan={200} itemContent={virtuosoBody.itemContent} components={{
-            Header: function () { return headerSlot; },
-            Footer: function () { return (isNextLoading ? <CardsHolderLoader /> : null); },
-        }}/>
-      {virtuosoToTopBtnInitialize.isShowBtn && (<VirtuosoToTopBtn virtuoso={virtuoso}/>)}
-    </>);
-};
-var templateObject_1;

package/dist/pages/index.jsx

@@ -1,12 +0,0 @@
-import Head from 'next/head';
-export default function Home() {
-    return (<>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app"/>
-        <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <link rel="icon" href="/favicon.ico"/>
-      </Head>
-      <div>Hello</div>
-    </>);
-}

package/dist/styles/animations/index.jsx

@@ -1,8 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { keyframes } from 'styled-components';
-export var rotateReverse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n"], ["\n  from {\n    transform: rotate(360deg);\n  }\n  to {\n    transform: rotate(0deg);\n  }\n"])));
-export var rotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"], ["\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var templateObject_1, templateObject_2;

package/dist/styles/globalStyles.jsx

@@ -1,21 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { createGlobalStyle } from 'styled-components';
-import { GlobalFontsFallback } from '@/fonts/FontsInitializeLayout';
-var GlobalStyle = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ", ";\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ", "\n"], ["\n  :root {\n    --app-height: 100vh;\n  }\n\n  html {\n    font-size: 0.625rem;\n    min-height: var(--app-height);\n    -webkit-font-smoothing: antialiased;\n    scroll-behavior: smooth;\n  }\n\n  body {\n    font-family: 'Poppins', sans-serif;\n    letter-spacing: -0.015em;\n    padding: 0;\n    background: ", ";\n    border: 0;\n    margin: 0;\n    min-height: var(--app-height);\n    position: relative;\n\n    &.dark-theme {\n      .react-loading-skeleton {\n        --base-color: #3A3D4C !important;\n        --highlight-color: #292C39 !important;\n      }\n    }\n  }\n\n  p {\n    padding: 0;\n    margin: 0;\n  }\n\n  a {\n    text-decoration: none;\n  }\n\n  .modal-dialog {\n    max-width: 100%;\n    width: fit-content;\n  }\n\n  .modal-dg {\n    display: flex;\n    align-content: center;\n    justify-content: center;\n  }\n\n  .modal-content {\n    border-radius: 2.2rem !important;\n    overflow: hidden;\n    outline: none;\n    border: 0;\n  }\n\n  ::selection {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  ::-webkit-scrollbar {\n    height: 2px;\n    width: 4px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n  }\n\n  ", "\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.bg;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.naturalWhite;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.accent;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.scrollBar;
-}, GlobalFontsFallback);
-export default GlobalStyle;
-var templateObject_1;

package/dist/styles/mixins/boxShadow.jsx

@@ -1,8 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { css } from 'styled-components';
-var BoxShadow = function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n"], ["\n  transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  box-shadow: none;\n\n  &:hover {\n    box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.15);\n    transition: box-shadow 0.25s ease-in-out 0s, transform 0.25s ease 0s;\n  }\n"]))); };
-export default BoxShadow;
-var templateObject_1;

package/dist/styles/mixins/boxTransform.jsx

@@ -1,8 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { css } from 'styled-components';
-var BoxTransform = function () { return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n"], ["\n  transition: 0.2s transform ease-in-out;\n\n  &:hover {\n    transition: 0.2s transform ease-in;\n    transform: translate(0px, -4px);\n  }\n"]))); };
-export default BoxTransform;
-var templateObject_1;

package/dist/styles/mixins/z-indexes.jsx

@@ -1,10 +0,0 @@
-export var zIndexSearch = 996;
-export var zIndexModal = 996;
-export var zIndexOverlay = 995;
-export var zIndexToTopBtn = 993;
-export var zIndexSidebar = 996;
-export var zIndexHeaderSearchFocused = 996;
-export var zIndexAlert = 999;
-export var zIndexHeaderSearch = 994;
-export var zIndexPageLoader = 996;
-export var zIndexApplyResetBtns = 996;

package/dist/styles/typography/index.jsx

@@ -1 +0,0 @@
-export { FH1, FH2, FH3, FH4, FH5, FH6, FH7, TextSmall, } from '@ludo.ninja/ui/build/styles/typography';

package/dist/system/ActiveLink/index.jsx

@@ -1,34 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { Children } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import { pathToRegexp } from 'path-to-regexp';
-var ActiveLink = function (_a) {
-    var children = _a.children, activeClassName = _a.activeClassName, props = __rest(_a, ["children", "activeClassName"]);
-    var asPath = useRouter().asPath;
-    var child = Children.only(children);
-    var childClassName = child.props.className || '';
-    var isActive = pathToRegexp(props.href || props.as, [], {
-        sensitive: true,
-    }).test(asPath);
-    var className = props.href || asPath === props.as
-        ? "".concat(childClassName, " ").concat(isActive ? activeClassName : '').trim()
-        : childClassName;
-    return (<Link {...props}>
-      {React.cloneElement(child, {
-            className: className || null,
-        })}
-    </Link>);
-};
-// Export
-export default ActiveLink;

package/dist/system/Alert/index.jsx

@@ -1,15 +0,0 @@
-import AlertUi from '@ludo.ninja/ui/build/system/Alert';
-import { useUiStore } from '@/store/ui';
-// Component
-var Alert = function () {
-    var _a = useUiStore(function (state) { return ({
-        closeAlert: state.closeAlert,
-        updateData: state.alertType,
-        isAlertOpen: state.isAlertOpen,
-    }); }), closeAlert = _a.closeAlert, updateData = _a.updateData, isAlertOpen = _a.isAlertOpen;
-    if (!(isAlertOpen && updateData))
-        return null;
-    return <AlertUi closeAlert={closeAlert} updateData={updateData}/>;
-};
-// Export
-export default Alert;

package/dist/system/BasicOverlay/index.jsx

@@ -1,15 +0,0 @@
-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';
-// Styles
-var StyledBasicOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"], ["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"])));
-// Component
-var BasicOverlay = function () {
-    return <StyledBasicOverlay data-testid="basic-overlay"/>;
-};
-// Export
-export default BasicOverlay;
-var templateObject_1;

package/dist/system/Buttons/IconButton/index.jsx

@@ -1,2 +0,0 @@
-import IconButton from '@ludo.ninja/ui/build/system/Buttons/IconButton';
-export default IconButton;

package/dist/system/Buttons/IconWithButton/index.jsx

@@ -1,2 +0,0 @@
-import IconWithButton from '@ludo.ninja/ui/build/system/Buttons/IconWithButton';
-export default IconWithButton;

package/dist/system/Buttons/MainButton/index.jsx

@@ -1,2 +0,0 @@
-import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
-export default MainButton;

package/dist/system/Buttons/SecondaryButton/index.jsx

@@ -1,2 +0,0 @@
-import SecondaryButton from '@ludo.ninja/ui/build/system/Buttons/SecondaryButton';
-export default SecondaryButton;

package/dist/system/Cards/CardCheckbox/index.jsx

@@ -1,25 +0,0 @@
-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, { useId } from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { WhiteColor } from '@/styles/colors';
-// Styles
-var StyledCardCheckBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"])), WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(2), adaptiveValueCalc(32), adaptiveValueCalc(32));
-// Component
-var CardCheckBox = function (_a) {
-    var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
-    var id = useId();
-    return (<StyledCardCheckBox>
-      <label htmlFor={id} className="cardCheckboxLabel">
-        <input className="cardCheckboxInput" type="checkbox" name={'checkbox'} id={id} onChange={onChange} checked={isActiveCheckbox}/>
-        <span className="cardCustomCheckbox"/>
-      </label>
-    </StyledCardCheckBox>);
-};
-// Export
-export default CardCheckBox;
-var templateObject_1;

package/dist/system/Cards/CardContent/CardCategory/index.jsx

@@ -1,25 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { FH6 } from '@/styles/typography';
-// Styles
-var StyledCardCategory = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"])), FH6, function (props) { return props.background; }, function (props) { return props.color; }, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(1), adaptiveValueCalc(5), adaptiveValueCalc(2));
-// Component
-var CardCategory = function (_a) {
-    var label = _a.label;
-    if (!label)
-        return null;
-    return (<StyledCardCategory background={label.backgroundColor} color={label.color}>
-      <div className={'category'}>
-        <span className={'label'}>{label.text}</span>
-      </div>
-    </StyledCardCategory>);
-};
-// Export
-export default CardCategory;
-var templateObject_1;

package/dist/system/Cards/CardContent/CardLikes/index.jsx

@@ -1,31 +0,0 @@
-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 StyledLikes from '@/system/Cards/Styles/Likes';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import HeartIcon from '@/public/showCaseIcons/heart.svg';
-// Styles
-var StyledCardLikes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"])));
-// Component
-var CardLikes = function (_a) {
-    var likes = _a.likes, isLiked = _a.isLiked;
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<StyledCardLikes>
-      {Boolean(likes) && (<StyledLikes isLiked={isLiked}>
-          <div className={'icon'}>
-            <HeartIcon style={getAdaptiveScale({
-                windowDimensions: windowDimensions,
-                currentSize: 1,
-            })}/>
-          </div>
-          <span className={'counter'}>{likes}</span>
-        </StyledLikes>)}
-    </StyledCardLikes>);
-};
-// Export
-export default CardLikes;
-var templateObject_1;