@ludo.ninja/components 1.7.5 → 1.7.7

package/dist/system/CardsHolderWithSkeleton/CardsHolder/CardsError/{index.jsx → index.js}

@@ -1,7 +1,31 @@
+"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+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 __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) {
@@ -38,18 +62,22 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         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';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var animations_1 = require("@/styles/animations");
+var colors_1 = require("@/styles/colors");
+var vars_1 = require("@/fonts/vars");
+var refresh_svg_1 = __importDefault(require("@/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);
+var StyledCardsError = styled_components_1.default.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"])), animations_1.rotateReverse, colors_1.TextGrayColor, vars_1.poppinsFontVarCss.css);
 // Component
 var CardsError = function (_a) {
     var refetch = _a.refetch;
-    var _b = useState(false), isAnimated = _b[0], setIsAnimated = _b[1];
+    var _b = (0, react_1.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) {
@@ -63,13 +91,10 @@ var CardsError = function (_a) {
             }
         });
     }); };
-    return (<StyledCardsError>
-      <CardRefreshIcon className={'icon'} onClick={handleAnimation}/>
-      {!isAnimated && (<h2 className={'text'}>
-          Whoops! Something went wrong. Let&apos;s try to refresh it!
-        </h2>)}
-    </StyledCardsError>);
+    return (react_1.default.createElement(StyledCardsError, null,
+        react_1.default.createElement(refresh_svg_1.default, { className: 'icon', onClick: handleAnimation }),
+        !isAnimated && (react_1.default.createElement("h2", { className: 'text' }, "Whoops! Something went wrong. Let's try to refresh it!"))));
 };
 // Export
-export default CardsError;
+exports.default = CardsError;
 var templateObject_1;

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

@@ -0,0 +1,26 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var no_found_svg_1 = __importDefault(require("@/public/search/no_found.svg"));
+// Styles
+var StyledNoResults = styled_components_1.default.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"])), typography_1.FH3, colors_1.TextGrayColor);
+// Component
+var CardsNoResults = function (_a) {
+    var noFoundText = _a.noFoundText;
+    return (react_1.default.createElement(StyledNoResults, null,
+        react_1.default.createElement(no_found_svg_1.default, { className: 'icon' }),
+        react_1.default.createElement("p", { className: 'text' }, noFoundText)));
+};
+// Export
+exports.default = CardsNoResults;
+var templateObject_1;

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

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardSkeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var Head_1 = __importDefault(require("@/system/Cards/Styles/Head"));
+// Styles
+var StyledCardSkeleton = styled_components_1.default.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"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(120), (0, _4k_1.adaptiveValueCalc)(30));
+var CardsSkeleton = function (_a) {
+    var cardCount = _a.cardCount;
+    var arr = Array.from(Array(cardCount).keys());
+    return (react_1.default.createElement(react_1.default.Fragment, null, arr.map(function () { return (react_1.default.createElement(exports.CardSkeleton, { key: Math.random() })); })));
+};
+// Component
+var CardSkeleton = function () {
+    return (react_1.default.createElement(StyledCardSkeleton, null,
+        react_1.default.createElement(Head_1.default, null,
+            react_1.default.createElement(react_loading_skeleton_1.default, { height: '100%', width: '100%' })),
+        react_1.default.createElement("div", { className: 'content' },
+            react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '70%' }),
+            react_1.default.createElement("div", { className: 'footer' },
+                react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '120px' }),
+                react_1.default.createElement(react_loading_skeleton_1.default, { height: '18px', width: '30px' })))));
+};
+exports.CardSkeleton = CardSkeleton;
+// Export
+exports.default = CardsSkeleton;
+var templateObject_1;

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

@@ -0,0 +1,38 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var CardsGrid_1 = __importDefault(require("@/system/Cards/CardsGrid"));
+var CardsError_1 = __importDefault(require("@/system/CardsHolderWithSkeleton/CardsHolder/CardsError"));
+var CardsNoResults_1 = __importDefault(require("@/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults"));
+// Styles
+var StyledCardsHolder = styled_components_1.default.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)';
+}, ScreenWidth_1.mediaQuery.desktop, ScreenWidth_1.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 (react_1.default.createElement(CardsGrid_1.default, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: isEmptyGallery, isForVirtualize: forVirtualize, tabsSlot: tabsSlot, isProdENV: isProdENV }, component));
+    };
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return null;
+    if (error)
+        return renderCardsWithGrid(react_1.default.createElement(CardsError_1.default, { refetch: refetchQuery }), true);
+    if (!items.length)
+        return renderCardsWithGrid(react_1.default.createElement(CardsNoResults_1.default, { noFoundText: notFoundText }), true, isForVirtualize);
+    return (react_1.default.createElement(StyledCardsHolder, { isOneColumn: isOneColumn, isForVirtualize: isForVirtualize }, renderCardsWithGrid(children, false, isForVirtualize)));
+};
+// Export
+exports.default = CardsHolder;
+var templateObject_1;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var animations_1 = require("@/styles/animations");
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var loader_svg_1 = __importDefault(require("@/public/cardsHolderLoader/loader.svg"));
+// Styles
+var StyledCardsHolderLoader = styled_components_1.default.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"])), animations_1.rotate, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
+// Component
+var CardsHolderLoader = function () {
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (react_1.default.createElement(StyledCardsHolderLoader, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) },
+        react_1.default.createElement(loader_svg_1.default, { className: 'loader' })));
+};
+// Export
+exports.default = CardsHolderLoader;
+var templateObject_1;

package/dist/system/CardsHolderWithSkeleton/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var CardsGrid_1 = __importDefault(require("@/system/Cards/CardsGrid"));
+var CardsHolder_1 = __importDefault(require("@/system/CardsHolderWithSkeleton/CardsHolder"));
+var CardsSkeleton_1 = __importDefault(require("@/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 (react_1.default.createElement(CardsGrid_1.default, { isTwoColumnLayout: isTwoColumnLayout, isNeedShowNetWorth: isNeedShowNetWorth, isEmptyGallery: false, tabsSlot: tabsSlot, isProdENV: isProdENV },
+            react_1.default.createElement(CardsSkeleton_1.default, { cardCount: 40 })));
+    return (react_1.default.createElement(CardsHolder_1.default, { 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));
+};
+// Export
+exports.default = CardsHolderWithSkeleton;

package/dist/system/DropDown/DropDown.test.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var react_2 = require("@testing-library/react");
+require("jest-styled-components");
+var DropDown_1 = __importDefault(require("../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();
+        (0, react_2.render)(react_1.default.createElement("div", { "data-testid": 'test_container' },
+            react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback },
+                react_1.default.createElement("div", null, "Dropdown Content"))));
+        var captionElement = react_2.screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        var contentElement = (_a = react_2.screen
+            .queryByTestId('test_container')) === null || _a === void 0 ? void 0 : _a.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        react_2.fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', function () {
+        var mockFallback = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback },
+            react_1.default.createElement("div", null, "Dropdown Content")));
+        var captionElement = react_2.screen.getByText('Test Dropdown');
+        react_2.fireEvent.click(captionElement);
+        react_2.fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', function () {
+        var mockFallback = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(DropDown_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback, active: true },
+            react_1.default.createElement("div", null, "Dropdown Content")));
+        var openedContentElement = react_2.screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
+});

package/dist/system/DropDown/index.js

@@ -0,0 +1,63 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var arrow_down_svg_1 = __importDefault(require("@/public/dropDown/arrow_down.svg"));
+// Styles
+var StyledDropDown = styled_components_1.default.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"])), colors_1.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 = (0, react_1.useState)(false), isActive = _b[0], setActive = _b[1];
+    (0, react_1.useEffect)(function () {
+        if (active) {
+            setActive(true);
+        }
+    }, []);
+    return (react_1.default.createElement(StyledDropDown, { isActive: isActive },
+        react_1.default.createElement("div", { className: 'dropDownTab', onClick: function () {
+                setActive(!isActive);
+                if (!isActive)
+                    fallBackOnClose(null);
+            } },
+            react_1.default.createElement("span", { className: 'dropDownTabCaption' }, caption),
+            react_1.default.createElement(arrow_down_svg_1.default, { className: 'dropDownTabIcon' })),
+        react_1.default.createElement("div", { className: 'dropDownContent' },
+            react_1.default.createElement("div", { className: 'gridDown' }, children))));
+};
+// Export
+exports.default = DropDown;
+var templateObject_1;

package/dist/system/Filters/helpers.js

@@ -1,4 +1,8 @@
-export var findDefaultFilterValue = function (queryValue, selectionsArr, defaultSelectionValue) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findDefaultFilterValue = void 0;
+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;
 };
+exports.findDefaultFilterValue = findDefaultFilterValue;

package/dist/system/Filters/index.js

@@ -1,2 +1,18 @@
-export * from './type';
-export * from './helpers';
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./type"), exports);
+__exportStar(require("./helpers"), exports);

package/dist/system/Filters/type.js

@@ -1,8 +1,11 @@
-export var SelectNamesTypes;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectNamesTypes = void 0;
+var SelectNamesTypes;
 (function (SelectNamesTypes) {
     SelectNamesTypes["type"] = "type";
     SelectNamesTypes["blockchain"] = "blockchain";
     SelectNamesTypes["category"] = "category";
     SelectNamesTypes["status"] = "status";
     SelectNamesTypes["time"] = "time";
-})(SelectNamesTypes || (SelectNamesTypes = {}));
+})(SelectNamesTypes || (exports.SelectNamesTypes = SelectNamesTypes = {}));

package/dist/system/Forms/Checkbox/{Checkbox.test.jsx → Checkbox.test.js}

@@ -1,12 +1,28 @@
-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';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+var Checkbox_1 = __importDefault(require("@/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>);
+        return (react_1.default.createElement("div", { "data-testid": "error-label" }, children));
     },
 }); });
 var mockRegister = {
@@ -22,7 +38,7 @@ var mockInnerTextInputRef = {
     ref: jest.fn(),
 };
 var renderComponent = function (props) {
-    return render(<CheckboxInput {...props}/>);
+    return (0, react_2.render)(react_1.default.createElement(Checkbox_1.default, __assign({}, props)));
 };
 describe('CheckboxInput Component', function () {
     test('renders correctly with provided props', function () {
@@ -31,8 +47,8 @@ describe('CheckboxInput Component', function () {
             data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
             register: mockRegister,
         });
-        var checkboxElement = screen.getByRole('checkbox');
-        var labelElement = screen.getByText('Test Label');
+        var checkboxElement = react_2.screen.getByRole('checkbox');
+        var labelElement = react_2.screen.getByText('Test Label');
         expect(checkboxElement).toBeInTheDocument();
         expect(labelElement).toBeInTheDocument();
     });
@@ -44,10 +60,10 @@ describe('CheckboxInput Component', function () {
             withInput: true,
             innerTextInputRef: mockInnerTextInputRef,
         });
-        var checkboxElement = screen.getByRole('checkbox');
-        var textInputElement = screen.getByRole('textbox');
+        var checkboxElement = react_2.screen.getByRole('checkbox');
+        var textInputElement = react_2.screen.getByRole('textbox');
         expect(textInputElement).toBeDisabled();
-        fireEvent.click(checkboxElement);
+        react_2.fireEvent.click(checkboxElement);
         expect(textInputElement).not.toBeDisabled();
     });
     test('displays error message when there is an error', function () {
@@ -57,7 +73,7 @@ describe('CheckboxInput Component', function () {
             register: mockRegister,
             error: { isNeedShowError: true, message: 'Error message' },
         });
-        var errorLabel = screen.getByTestId('error-label');
+        var errorLabel = react_2.screen.getByTestId('error-label');
         expect(errorLabel).toBeInTheDocument();
         expect(errorLabel).toHaveTextContent('Error message');
     });
@@ -68,7 +84,7 @@ describe('CheckboxInput Component', function () {
             register: mockRegister,
             error: { isNeedShowError: false, message: '' },
         });
-        var errorLabel = screen.queryByTestId('error-label');
+        var errorLabel = react_2.screen.queryByTestId('error-label');
         expect(errorLabel).toBeNull();
     });
 });

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

@@ -0,0 +1,71 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var ErrorLabel_1 = __importDefault(require("@/system/Forms/ErrorLabel"));
+var Input_1 = require("@/system/Forms/Input");
+var BasicCheckbox = styled_components_1.default.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"])), colors_1.TextGrayColor, colors_1.AccentColor, colors_1.WhiteColor, colors_1.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 = (0, react_1.useState)(true), textInputDisabled = _b[0], setTextInputDisables = _b[1];
+    var renderError = function () {
+        if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
+            return react_1.default.createElement(ErrorLabel_1.default, null, error === null || error === void 0 ? void 0 : error.message);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(BasicCheckbox, { className: className, status: error === null || error === void 0 ? void 0 : error.isNeedShowError },
+                react_1.default.createElement("input", __assign({}, register, { onChange: function (e) {
+                        setTextInputDisables(!e.target.checked);
+                        register.onChange(e);
+                    }, className: "input", type: "checkbox", name: data.name, value: value })),
+                react_1.default.createElement("p", { className: "checkmark" }),
+                label,
+                withInput && (react_1.default.createElement(Input_1.StyledInput, __assign({ status: false }, innerTextInputRef, { disabled: textInputDisabled }))))),
+        renderError()));
+};
+exports.default = CheckboxInput;
+var templateObject_1;

package/dist/system/Forms/DatePicker/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+require("react-calendar/dist/Calendar.css");
+var react_date_picker_1 = __importDefault(require("react-date-picker"));
+require("react-date-picker/dist/DatePicker.css");
+var react_hook_form_1 = require("react-hook-form");
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+var boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_2 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var vars_1 = require("@/fonts/vars");
+var calendar_svg_1 = __importDefault(require("@/public/calendar.svg"));
+var close20_svg_1 = __importDefault(require("@/public/close20.svg"));
+var ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+// Styles
+var StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), vars_1.dmsansFontVarCss.css, typography_1.MainText, function (props) { return (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight); }, colors_2.WhiteColor, colors_2.BlackColor, colors_1.InactiveButtonColor, colors_1.TextDarkGrayColor, colors_2.BorderColorLight, vars_1.dmsansFontVarCss.css, boxShadow_1.default, colors_1.ProgressColorMedium, colors_1.ProgressColorMedium, boxShadow_1.default, colors_1.AccentColor, colors_2.WhiteColor, colors_1.AccentColor, colors_2.WhiteColor, colors_2.TextGrayColor, colors_2.TextGrayColor, colors_2.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(46), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(1), function (props) { return (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight); }, (0, _4k_1.adaptiveValueCalc)(12));
+var DatePicker = function (_a) {
+    var name = _a.name, control = _a.control, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return react_1.default.createElement(ErrorLabel_1.default, null, error.message);
+        }
+    };
+    return (react_1.default.createElement(react_hook_form_1.Controller, { name: name, control: control, render: function (_a) {
+            var field = _a.field;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? react_1.default.createElement(close20_svg_1.default, null) : null, calendarIcon: react_1.default.createElement(calendar_svg_1.default, null) }),
+                renderError()));
+        } }));
+};
+exports.default = DatePicker;
+var templateObject_1;