@ludo.ninja/components 1.5.8 → 1.5.9

package/dist/system/Cards/index.js

@@ -0,0 +1,14 @@
+export { default as CardCheckBox } from './CardCheckbox';
+export { default as CardContent } from './CardContent';
+export { default as CardCategory } from './CardContent/CardCategory';
+export { default as CardLikes } from './CardContent/CardLikes';
+export { default as CardShowMore } from './CardContent/CardShowMore';
+export { default as HideLink } from './HideLink';
+export { StyledCardShowMore } from './CardContent/CardShowMore';
+export { default as CardHeadIcons } from './CardHeadIcons';
+export { default as CardRank } from './CardRank';
+export { default as CardsGrid } from './CardsGrid';
+export { default as MultiMediaCard } from './MultiMediaCard';
+export { default as RegularCard } from './RegularCard';
+export * from './CardMedia';
+export * from './Styles';

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsError/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const CardsError: ({ refetch }: {
+    refetch: () => Promise<void>;
+}) => React.JSX.Element;
+export default CardsError;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsError/index.jsx

@@ -0,0 +1,75 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { rotateReverse } from '@/styles/animations';
+import { TextGrayColor } from '@/styles/colors';
+import { poppinsFontVarCss } from '@/fonts/vars';
+import CardRefreshIcon from '@/public/error/refresh.svg';
+// Styles
+var StyledCardsError = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-top: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 24px;\n    cursor: pointer;\n    animation: ", " 2s infinite linear;\n  }\n  .text {\n    max-width: 308px;\n    text-align: center;\n    color: ", ";\n    user-select: none;\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 26px;\n  }\n"], ["\n  padding-top: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 24px;\n    cursor: pointer;\n    animation: ", " 2s infinite linear;\n  }\n  .text {\n    max-width: 308px;\n    text-align: center;\n    color: ", ";\n    user-select: none;\n    font-family: ", ";\n    font-size: 18px;\n    font-weight: 600;\n    line-height: 26px;\n  }\n"])), rotateReverse, TextGrayColor, poppinsFontVarCss.css);
+// Component
+var CardsError = function (_a) {
+    var refetch = _a.refetch;
+    var _b = useState(false), isAnimated = _b[0], setIsAnimated = _b[1];
+    var handleAnimation = function () { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setIsAnimated(true);
+                    return [4 /*yield*/, refetch()];
+                case 1:
+                    _a.sent();
+                    setIsAnimated(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (<StyledCardsError>
+      <CardRefreshIcon className={'icon'} onClick={handleAnimation}/>
+      {!isAnimated && (<h2 className={'text'}>
+          Whoops! Something went wrong. Let&apos;s try to refresh it!
+        </h2>)}
+    </StyledCardsError>);
+};
+// Export
+export default CardsError;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const CardsNoResults: ({ noFoundText }: {
+    noFoundText: string;
+}) => React.JSX.Element;
+export default CardsNoResults;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/index.jsx

@@ -0,0 +1,22 @@
+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 { TextGrayColor } from '@/styles/colors';
+import { FH3 } from '@/styles/typography';
+import NoFoundIcon from '@/public/search/no_found.svg';
+// Styles
+var StyledNoResults = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  padding-top: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 38px;\n  }\n\n  .text {\n    ", ";\n    color: ", ";\n  }\n"], ["\n  user-select: none;\n  padding-top: 60px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n\n  .icon {\n    margin-bottom: 38px;\n  }\n\n  .text {\n    ", ";\n    color: ", ";\n  }\n"])), FH3, TextGrayColor);
+// Component
+var CardsNoResults = function (_a) {
+    var noFoundText = _a.noFoundText;
+    return (<StyledNoResults>
+      <NoFoundIcon className={'icon'}/>
+      <p className={'text'}>{noFoundText}</p>
+    </StyledNoResults>);
+};
+// Export
+export default CardsNoResults;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const CardsSkeleton: ({ cardCount }: {
+    cardCount: number;
+}) => React.JSX.Element;
+export declare const CardSkeleton: () => React.JSX.Element;
+export default CardsSkeleton;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.jsx

@@ -0,0 +1,37 @@
+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 Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import StyledCardHead from '@/system/Cards/Styles/Head';
+// Styles
+var StyledCardSkeleton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .content {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 0 0 0;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  ", " {\n    .content {\n      padding: ", " 0 0 0;\n      gap: ", ";\n\n      .react-loading-skeleton {\n        height: ", " !important;\n      }\n\n      .footer {\n        & > *:first-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n\n        & > *:last-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n      }\n    }\n  }\n"], ["\n  .content {\n    display: flex;\n    flex-direction: column;\n    padding: 12px 0 0 0;\n  }\n\n  .footer {\n    display: flex;\n    justify-content: space-between;\n  }\n\n  ", " {\n    .content {\n      padding: ", " 0 0 0;\n      gap: ", ";\n\n      .react-loading-skeleton {\n        height: ", " !important;\n      }\n\n      .footer {\n        & > *:first-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n\n        & > *:last-child .react-loading-skeleton {\n          width: ", " !important;\n        }\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(18), adaptiveValueCalc(120), adaptiveValueCalc(30));
+var CardsSkeleton = function (_a) {
+    var cardCount = _a.cardCount;
+    var arr = Array.from(Array(cardCount).keys());
+    return (<>
+      {arr.map(function () { return (<CardSkeleton key={Math.random()}/>); })}
+    </>);
+};
+// Component
+export var CardSkeleton = function () {
+    return (<StyledCardSkeleton>
+      <StyledCardHead>
+        <Skeleton height={'100%'} width={'100%'}/>
+      </StyledCardHead>
+      <div className={'content'}>
+        <Skeleton height={'18px'} width={'70%'}/>
+        <div className={'footer'}>
+          <Skeleton height={'18px'} width={'120px'}/>
+          <Skeleton height={'18px'} width={'30px'}/>
+        </div>
+      </div>
+    </StyledCardSkeleton>);
+};
+// Export
+export default CardsSkeleton;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { ApolloError } from '@apollo/client';
+import { IDynamicAssetData, IDynamicCollectionData } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+interface Props {
+    loading: boolean;
+    items: GalleryEntityV2[] | CreationEntity[] | CollectionCreationEntity[];
+    refetchQuery: () => Promise<void>;
+    error: ApolloError | undefined;
+    children: React.ReactNode;
+    notFoundText: string;
+    isOneColumn?: number;
+    isTwoColumnLayout: boolean;
+    isNeedShowNetWorth: boolean;
+    isForVirtualize?: boolean;
+    likesArray?: Array<IDynamicAssetData | IDynamicCollectionData> | [];
+    tabsSlot?: ReactNode;
+    isProdENV: string;
+}
+declare const CardsHolder: React.FC<Props>;
+export default CardsHolder;

package/dist/system/CardsHolderWithSkeleton/CardsHolder/index.jsx

@@ -0,0 +1,37 @@
+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 { mediaQuery } from '@/styles/ScreenWidth';
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsError from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsError';
+import CardsNoResults from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
+// Styles
+var StyledCardsHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"], ["\n  display: grid;\n  grid-template-columns: ", ";\n  gap: 24px;\n  overflow: hidden;\n\n  ", " {\n    gap: 16px;\n  }\n\n  ", " {\n    gap: 12px;\n    grid-template-columns: ", ";\n  }\n"])), function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 4, 1fr)';
+}, mediaQuery.desktop, mediaQuery.tablet, function (props) {
+    return props.isOneColumn || props.isForVirtualize ? '1fr' : 'repeat( 2, 1fr)';
+});
+// Component
+var CardsHolder = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot, isProdENV = _a.isProdENV;
+    var renderCardsWithGrid = function (component, isEmptyGallery, forVirtualize) {
+        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={isEmptyGallery} isForVirtualize={forVirtualize} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+        {component}
+      </CardsGrid>);
+    };
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return null;
+    if (error)
+        return renderCardsWithGrid(<CardsError refetch={refetchQuery}/>, true);
+    if (!items.length)
+        return renderCardsWithGrid(<CardsNoResults noFoundText={notFoundText}/>, true, isForVirtualize);
+    return (<StyledCardsHolder isOneColumn={isOneColumn} isForVirtualize={isForVirtualize}>
+      {renderCardsWithGrid(children, false, isForVirtualize)}
+    </StyledCardsHolder>);
+};
+// Export
+export default CardsHolder;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CardsHolderLoader: () => React.JSX.Element;
+export default CardsHolderLoader;

package/dist/system/CardsHolderWithSkeleton/CardsHolderLoader/index.jsx

@@ -0,0 +1,24 @@
+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 { rotate } from '@/styles/animations';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import LoaderIcon from '@/public/cardsHolderLoader/loader.svg';
+// Styles
+var StyledCardsHolderLoader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"], ["\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-top: 24px;\n\n  .loader {\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  ", " {\n    padding-top: ", ";\n  }\n\n  /* &.virtual {\n  position: fixed;\n    bottom: 90px;\n    right: 30px;\n } */\n"])), rotate, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+// Component
+var CardsHolderLoader = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<StyledCardsHolderLoader style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}>
+      <LoaderIcon className={'loader'}/>
+    </StyledCardsHolderLoader>);
+};
+// Export
+export default CardsHolderLoader;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/index.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { ApolloError } from '@apollo/client';
+import { IDynamicAssetData, IDynamicCollectionData } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import CreationEntity from '@/dto/CreationEntity';
+import GalleryEntityV2 from '@/dto/GalleryEntityV2';
+interface Props {
+    loading: boolean;
+    items: CreationEntity[] | GalleryEntityV2[] | CollectionCreationEntity[];
+    scrollKeys: {
+        pageOffsetKey: string;
+        itemsCountKey: string;
+    };
+    nextPageToken: string | null;
+    refetchQuery: () => Promise<void>;
+    loadMore: (pageToken: string) => Promise<void>;
+    error: ApolloError | undefined;
+    children: React.ReactNode;
+    notFoundText: string;
+    isOneColumn?: number;
+    isTwoColumnLayout: boolean;
+    isNeedShowNetWorth: boolean;
+    infinityScrollLoader?: boolean;
+    isForVirtualize?: boolean;
+    likesArray?: Array<IDynamicAssetData | IDynamicCollectionData> | [];
+    tabsSlot?: ReactNode;
+    isProdENV: string;
+}
+declare const CardsHolderWithSkeleton: React.FC<Props>;
+export default CardsHolderWithSkeleton;

package/dist/system/CardsHolderWithSkeleton/index.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import CardsGrid from '@/system/Cards/CardsGrid';
+import CardsHolder from '@/system/CardsHolderWithSkeleton/CardsHolder';
+import CardSkeletonWrapper from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
+// Component
+var CardsHolderWithSkeleton = function (_a) {
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot, isProdENV = _a.isProdENV;
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={false} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+        <CardSkeletonWrapper cardCount={40}/>
+      </CardsGrid>);
+    return (<CardsHolder items={items} refetchQuery={refetchQuery} error={error} loading={loading} notFoundText={notFoundText} isOneColumn={isOneColumn} isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isForVirtualize={isForVirtualize} likesArray={likesArray} tabsSlot={tabsSlot} isProdENV={isProdENV}>
+      {children}
+    </CardsHolder>);
+};
+// Export
+export default CardsHolderWithSkeleton;

package/dist/system/DropDown/DropDown.test.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/dist/system/DropDown/DropDown.test.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import DropDown from '../DropDown';
+jest.mock('@/public/dropDown/arrow_down.svg', function () { return 'div'; });
+describe('DropDown Component', function () {
+    test('renders with caption and closed by default', function () {
+        var _a;
+        var mockFallback = jest.fn();
+        render(<div data-testid={'test_container'}>
+        <DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
+          <div>Dropdown Content</div>
+        </DropDown>
+      </div>);
+        var captionElement = screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        var contentElement = (_a = screen
+            .queryByTestId('test_container')) === null || _a === void 0 ? void 0 : _a.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
+        <div>Dropdown Content</div>
+      </DropDown>);
+        var captionElement = screen.getByText('Test Dropdown');
+        fireEvent.click(captionElement);
+        fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback} active>
+        <div>Dropdown Content</div>
+      </DropDown>);
+        var openedContentElement = screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
+});

package/dist/system/DropDown/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const DropDown: ({ caption, children, fallBackOnClose, active, }: {
+    caption: string;
+    children: React.ReactNode;
+    fallBackOnClose: (value: null | string) => void;
+    active?: boolean;
+}) => React.JSX.Element;
+export default DropDown;

package/dist/system/DropDown/index.jsx

@@ -0,0 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { InactiveButtonColor } from '@/styles/colors';
+import ArrowDownIcon from '@/public/dropDown/arrow_down.svg';
+// Styles
+var StyledDropDown = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"])), InactiveButtonColor, function (props) {
+    return props.isActive ? 'rotate(180deg)' : 'rotate(0deg)';
+}, function (props) { return (props.isActive ? '1fr' : '0fr'); });
+// Component
+var DropDown = function (_a) {
+    var caption = _a.caption, children = _a.children, fallBackOnClose = _a.fallBackOnClose, active = _a.active;
+    var _b = useState(false), isActive = _b[0], setActive = _b[1];
+    useEffect(function () {
+        if (active) {
+            setActive(true);
+        }
+    }, []);
+    return (<StyledDropDown isActive={isActive}>
+      <div className={'dropDownTab'} onClick={function () {
+            setActive(!isActive);
+            if (!isActive)
+                fallBackOnClose(null);
+        }}>
+        <span className={'dropDownTabCaption'}>{caption}</span>
+        <ArrowDownIcon className={'dropDownTabIcon'}/>
+      </div>
+      <div className={'dropDownContent'}>
+        <div className={'gridDown'}>{children}</div>
+      </div>
+    </StyledDropDown>);
+};
+// Export
+export default DropDown;
+var templateObject_1;

package/dist/system/Filters/helpers.d.ts

@@ -0,0 +1,7 @@
+import { preferencesSchema } from '@ludo.ninja/api';
+import { Maybe } from "graphql/jsutils/Maybe";
+type Selection = Maybe<Pick<preferencesSchema.ISelection, 'label'> & {
+    id: string;
+}>;
+export declare const findDefaultFilterValue: (queryValue: string | string[] | undefined, selectionsArr?: Selection[], defaultSelectionValue?: string) => string;
+export {};

package/dist/system/Filters/helpers.js

@@ -0,0 +1,4 @@
+export var findDefaultFilterValue = function (queryValue, selectionsArr, defaultSelectionValue) {
+    var findedValue = selectionsArr && selectionsArr.find(function (value) { return queryValue === (value === null || value === void 0 ? void 0 : value.id); });
+    return (findedValue === null || findedValue === void 0 ? void 0 : findedValue.id) || defaultSelectionValue;
+};

package/dist/system/Filters/index.js

@@ -0,0 +1,2 @@
+export * from './type';
+export * from './helpers';

package/dist/system/Filters/type.d.ts

@@ -0,0 +1,16 @@
+import { ISelectInput } from '@/system/Forms/Selects/MobileSelect';
+export declare enum SelectNamesTypes {
+    type = "type",
+    blockchain = "blockchain",
+    category = "category",
+    status = "status",
+    time = "time"
+}
+export type SelectNamesWithOptions = {
+    selectName: SelectNamesTypes;
+    selectOptions: ISelectInput[];
+};
+export type SelectsType = {
+    id: number;
+    data: SelectNamesWithOptions;
+};

package/dist/system/Filters/type.js

@@ -0,0 +1,8 @@
+export var SelectNamesTypes;
+(function (SelectNamesTypes) {
+    SelectNamesTypes["type"] = "type";
+    SelectNamesTypes["blockchain"] = "blockchain";
+    SelectNamesTypes["category"] = "category";
+    SelectNamesTypes["status"] = "status";
+    SelectNamesTypes["time"] = "time";
+})(SelectNamesTypes || (SelectNamesTypes = {}));

package/dist/system/Forms/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/system/Forms/Checkbox/Checkbox.test.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import CheckboxInput from '@/system/Forms/Checkbox';
+jest.mock('../ErrorLabel', function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var children = _a.children;
+        return (<div data-testid="error-label">{children}</div>);
+    },
+}); });
+var mockRegister = {
+    name: 'test-checkbox',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var mockInnerTextInputRef = {
+    name: 'inner-text-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var renderComponent = function (props) {
+    return render(<CheckboxInput {...props}/>);
+};
+describe('CheckboxInput Component', function () {
+    test('renders correctly with provided props', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var labelElement = screen.getByText('Test Label');
+        expect(checkboxElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
+    });
+    test('toggles text input field based on checkbox', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            withInput: true,
+            innerTextInputRef: mockInnerTextInputRef,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var textInputElement = screen.getByRole('textbox');
+        expect(textInputElement).toBeDisabled();
+        fireEvent.click(checkboxElement);
+        expect(textInputElement).not.toBeDisabled();
+    });
+    test('displays error message when there is an error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: true, message: 'Error message' },
+        });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+    test('does not display error message when there is no error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: false, message: '' },
+        });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+});

package/dist/system/Forms/Checkbox/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+export type inputType = {
+    labelText?: string;
+    name: string;
+    placeHolder?: string;
+};
+interface Props {
+    label: string;
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error?: {
+        isNeedShowError: boolean;
+        message: string;
+    };
+    className?: string;
+    value?: string | number;
+    withInput?: boolean;
+    innerTextInputRef?: UseFormRegisterReturn;
+}
+declare const CheckboxInput: React.FC<Props>;
+export default CheckboxInput;

package/dist/system/Forms/Checkbox/index.jsx

@@ -0,0 +1,35 @@
+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, { useState } from 'react';
+import styled from 'styled-components';
+import { AccentColor, BorderColorLight, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import BasicErrorLabel from '@/system/Forms/ErrorLabel';
+import { StyledInput } from '@/system/Forms/Input';
+var BasicCheckbox = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"])), TextGrayColor, AccentColor, WhiteColor, BorderColorLight);
+var CheckboxInput = function (_a) {
+    var data = _a.data, label = _a.label, register = _a.register, error = _a.error, className = _a.className, value = _a.value, withInput = _a.withInput, innerTextInputRef = _a.innerTextInputRef;
+    var _b = useState(true), textInputDisabled = _b[0], setTextInputDisables = _b[1];
+    var renderError = function () {
+        if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
+            return <BasicErrorLabel>{error === null || error === void 0 ? void 0 : error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
+      <>
+        <BasicCheckbox className={className} status={error === null || error === void 0 ? void 0 : error.isNeedShowError}>
+          <input {...register} onChange={function (e) {
+            setTextInputDisables(!e.target.checked);
+            register.onChange(e);
+        }} className="input" type="checkbox" name={data.name} value={value}/>
+          <p className="checkmark"/>
+          {label}
+          {withInput && (<StyledInput status={false} {...innerTextInputRef} disabled={textInputDisabled}/>)}
+        </BasicCheckbox>
+      </>
+      {renderError()}
+    </>);
+};
+export default CheckboxInput;
+var templateObject_1;

package/dist/system/Forms/DatePicker/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import 'react-calendar/dist/Calendar.css';
+import 'react-date-picker/dist/DatePicker.css';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { Control } from 'react-hook-form/dist/types/form';
+interface Props {
+    name: string;
+    register: UseFormRegisterReturn;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+    control: Control;
+}
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;