@ludo.ninja/components 1.7.5 → 1.7.7

package/dist/system/Modals/ModalSidebar/CreatorModalSidebarPortal.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreatorModalSidebarPortal = void 0;
+var dynamic_1 = __importDefault(require("next/dynamic"));
+var ui_1 = require("@/store/ui");
+// add first load chunk when component needed
+var ModalSidebarPortal = (0, dynamic_1.default)(function () {
+    return Promise.resolve().then(function () { return __importStar(require('./ModalSidebarPortal')); }).then(function (_) { return _.ModalSidebarPortal; });
+});
+// minimize dom tree for optimize virtualization
+var CreatorModalSidebarPortal = function () {
+    var _a = (0, ui_1.useUiStore)(function (state) { return ({
+        isOpenModalSidebarPortal: state.isOpenModalSidebarPortal,
+        closeModalSidebarPortal: state.closeModalSidebarPortal,
+        contentModals: state.contentModals,
+    }); }), isOpenModalSidebarPortal = _a.isOpenModalSidebarPortal, closeModalSidebarPortal = _a.closeModalSidebarPortal, contentModals = _a.contentModals;
+    if (!isOpenModalSidebarPortal) {
+        return null;
+    }
+    return (React.createElement(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals }));
+};
+exports.CreatorModalSidebarPortal = CreatorModalSidebarPortal;

package/dist/system/Modals/ModalSidebar/ModalSidebar.test.js

@@ -0,0 +1,35 @@
+"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"));
+require("@testing-library/jest-dom");
+var react_2 = require("@testing-library/react");
+var ui_1 = require("@/store/ui");
+var index_1 = __importDefault(require("./index"));
+jest.mock('@/store/ui');
+describe('Modal Component', function () {
+    afterEach(react_2.cleanup);
+    test('open modal', function () {
+        var closeModalMock = jest.fn();
+        // Mock the useUiStore hook
+        ui_1.useUiStore.mockReturnValue({
+            contentModals: react_1.default.createElement("div", null, "test open"),
+            isModalSidebarOpen: true,
+            closeModalSidebar: closeModalMock,
+        });
+        // Render the Modal component
+        (0, react_2.render)(react_1.default.createElement(index_1.default, null));
+        // Check if the modal content is in the document
+        var labelElement = react_2.screen.getByText('test open');
+        expect(labelElement).toBeInTheDocument();
+        // Check if the close icon is in the document
+        var closeIcon = react_2.screen.getByAltText('close');
+        expect(closeIcon).toBeInTheDocument();
+        // Simulate click on the close icon
+        closeIcon.click();
+        // Verify that the closeModal function was called
+        expect(closeModalMock).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/system/Modals/ModalSidebar/ModalSidebarPortal.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 });
+exports.ModalSidebarPortal = void 0;
+var react_1 = __importDefault(require("react"));
+var utils_1 = require("@ludo.ninja/utils");
+var ModalSidebar_1 = require("@/system/Modals/ModalSidebar");
+// import ModalCloseIcon from '@/public/modal/close.svg';
+// minimize dom tree for optimize virtualization
+var ModalSidebarPortal = function (_a) {
+    var component = _a.component, closeModal = _a.closeModal;
+    return (react_1.default.createElement(utils_1.PortalCreator, null,
+        react_1.default.createElement(ModalSidebar_1.StyledModalSidebar, null,
+            react_1.default.createElement("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }),
+            react_1.default.createElement("div", { className: "modalContent" }, component))));
+};
+exports.ModalSidebarPortal = ModalSidebarPortal;

package/dist/system/Modals/ModalSidebar/index.js

@@ -0,0 +1,33 @@
+"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.StyledModalSidebar = void 0;
+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 ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var z_indexes_1 = require("@/styles/mixins/z-indexes");
+// import ModalCloseIcon from '@/public/modal/close.svg';
+exports.StyledModalSidebar = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-height: 300px;\n  //max-width: 536px;\n  z-index: ", ";\n  padding: 24px;\n  background-color: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 8px;\n\n  @media (max-width: 767px) {\n    padding: 32px;\n    border-radius: 0;\n    max-width: none;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transform: none;\n  }\n\n  .modalCloseIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    cursor: pointer;\n  }\n\n  .modalContent {\n    margin-top: 24px;\n  }\n\n  ", " {\n    min-height: ", ";\n    padding: ", ";\n    border-radius: ", ";\n\n    .modalCloseIcon {\n      width: ", ";\n      height: ", ";\n      top: ", ";\n      right: ", ";\n    }\n\n    .modalContent {\n      margin-top: ", ";\n    }\n  }\n"], ["\n  min-height: 300px;\n  //max-width: 536px;\n  z-index: ", ";\n  padding: 24px;\n  background-color: ", ";\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border-radius: 8px;\n\n  @media (max-width: 767px) {\n    padding: 32px;\n    border-radius: 0;\n    max-width: none;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    transform: none;\n  }\n\n  .modalCloseIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    cursor: pointer;\n  }\n\n  .modalContent {\n    margin-top: 24px;\n  }\n\n  ", " {\n    min-height: ", ";\n    padding: ", ";\n    border-radius: ", ";\n\n    .modalCloseIcon {\n      width: ", ";\n      height: ", ";\n      top: ", ";\n      right: ", ";\n    }\n\n    .modalContent {\n      margin-top: ", ";\n    }\n  }\n"])), z_indexes_1.zIndexModal.toString(), colors_1.WhiteColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(300), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(24));
+var ModalSidebar = function () {
+    var _a = (0, ui_1.useUiStore)(function (state) { return ({
+        contentModals: state.contentModals,
+        isModalSidebarOpen: state.isModalSidebarOpen,
+        closeModalSidebar: state.closeModalSidebar,
+    }); }), contentModals = _a.contentModals, isModalSidebarOpen = _a.isModalSidebarOpen, closeModalSidebar = _a.closeModalSidebar;
+    if (!isModalSidebarOpen)
+        return null;
+    return (react_1.default.createElement(exports.StyledModalSidebar, null,
+        react_1.default.createElement("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModalSidebar }),
+        react_1.default.createElement("div", { className: "modalContent" }, contentModals)));
+};
+exports.default = ModalSidebar;
+var templateObject_1;

package/dist/system/Modals/index.js

@@ -1,2 +1,10 @@
-export { default as Modal } from './Modal';
-export { default as ModalSidebar } from './ModalSidebar';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalSidebar = exports.Modal = void 0;
+var Modal_1 = require("./Modal");
+Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return __importDefault(Modal_1).default; } });
+var ModalSidebar_1 = require("./ModalSidebar");
+Object.defineProperty(exports, "ModalSidebar", { enumerable: true, get: function () { return __importDefault(ModalSidebar_1).default; } });

package/dist/system/Overlay/{Overlay.test.jsx → Overlay.test.js}

@@ -1,8 +1,13 @@
-import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useUiStore } from '@/store/ui';
-import Overlay from '../Overlay';
+"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"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+var ui_1 = require("@/store/ui");
+var Overlay_1 = __importDefault(require("../Overlay"));
 // Mocking dependencies
 jest.mock('@/store/ui');
 describe('Overlay Component', function () {
@@ -12,16 +17,15 @@ describe('Overlay Component', function () {
         isOverlayActive: false,
     };
     var renderComponent = function () {
-        return render(<div data-testid={'dialog'}>
-        <Overlay />
-      </div>);
+        return (0, react_2.render)(react_1.default.createElement("div", { "data-testid": 'dialog' },
+            react_1.default.createElement(Overlay_1.default, null)));
     };
     beforeEach(function () {
-        useUiStore.mockReturnValue(mockUseUiStore);
+        ui_1.useUiStore.mockReturnValue(mockUseUiStore);
     });
     test('renders overlay with hidden visibility by default', function () {
         renderComponent();
-        var overlay = screen.getByTestId('dialog').children[0];
+        var overlay = react_2.screen.getByTestId('dialog').children[0];
         expect(overlay).toHaveStyle('visibility: hidden');
         var blurDiv = overlay.querySelector('.blur');
         expect(blurDiv).toHaveStyle('visibility: hidden');
@@ -29,15 +33,15 @@ describe('Overlay Component', function () {
     test('renders overlay with visible visibility when active', function () {
         mockUseUiStore.isOverlayActive = true;
         renderComponent();
-        var overlay = screen.getByTestId('dialog').children[0];
+        var overlay = react_2.screen.getByTestId('dialog').children[0];
         expect(overlay).toHaveStyle('visibility: visible');
         var blurDiv = overlay.querySelector('.blur');
         expect(blurDiv).toHaveStyle('visibility: visible');
     });
     test('calls closeOverlay when clicked', function () {
         renderComponent();
-        var overlay = screen.getByTestId('dialog').children[0];
-        fireEvent.click(overlay);
+        var overlay = react_2.screen.getByTestId('dialog').children[0];
+        react_2.fireEvent.click(overlay);
         expect(mockCloseOverlay).toHaveBeenCalled();
     });
 });

package/dist/system/Overlay/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 ui_1 = require("@/store/ui");
+var colors_1 = require("@/styles/colors");
+var z_indexes_1 = require("@/styles/mixins/z-indexes");
+// Styles
+var StyledOverlay = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  backdrop-filter: blur(10px);\n  height: var(--app-height);\n  width: 100%;\n  cursor: pointer;\n  visibility: ", ";\n\n  .blur {\n    height: 100%;\n    width: 100%;\n    background-color: ", ";\n    opacity: ", ";\n    visibility: ", ";\n    transition: 0.2s all;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: ", ";\n  backdrop-filter: blur(10px);\n  height: var(--app-height);\n  width: 100%;\n  cursor: pointer;\n  visibility: ", ";\n\n  .blur {\n    height: 100%;\n    width: 100%;\n    background-color: ", ";\n    opacity: ", ";\n    visibility: ", ";\n    transition: 0.2s all;\n  }\n"])), z_indexes_1.zIndexOverlay.toString(), function (props) { return (props.isActive ? 'visible' : 'hidden'); }, colors_1.BlackColor, function (props) { return (props.isActive ? 0.6 : 0); }, function (props) { return (props.isActive ? 'visible' : 'hidden'); });
+// Component
+var Overlay = function () {
+    var _a = (0, ui_1.useUiStore)(function (state) { return ({
+        closeOverlay: state.closeOverlay,
+        isOverlayActive: state.isOverlayActive,
+    }); }), closeOverlay = _a.closeOverlay, isOverlayActive = _a.isOverlayActive;
+    return (react_1.default.createElement(StyledOverlay, { isActive: isOverlayActive, onClick: closeOverlay },
+        react_1.default.createElement("div", { className: 'blur' })));
+};
+// Export
+exports.default = Overlay;
+var templateObject_1;

package/dist/system/PageLoader/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var PageLoader_1 = __importDefault(require("@ludo.ninja/ui/build/system/PageLoader"));
+exports.default = PageLoader_1.default;

package/dist/system/Palete/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Palete_1 = __importDefault(require("@ludo.ninja/ui/build/system/Palete"));
+exports.default = Palete_1.default;

package/dist/system/ShareIconResize.js

@@ -0,0 +1,27 @@
+"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.ShareIconResize = void 0;
+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 scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var share_svg_1 = __importDefault(require("@/public/iconButton/share.svg"));
+var SIcon = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(19), (0, _4k_1.adaptiveValueCalc)(20));
+var ShareIconResize = function () {
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (React.createElement(SIcon, null,
+        React.createElement(share_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+                windowDimensions: windowDimensions,
+                currentSize: 1,
+            }) })));
+};
+exports.ShareIconResize = ShareIconResize;
+var templateObject_1;

package/dist/system/Tabs/TabNavLink/TabNavLink.test.js

@@ -0,0 +1,40 @@
+"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"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+require("jest-styled-components");
+var colors_1 = require("@/styles/colors");
+var TabNavLink_1 = __importDefault(require("../TabNavLink"));
+// Mock data
+var tabNavLink = { label: 'Tab 1', value: 'tab1', id: 1 };
+var setActiveTab = jest.fn();
+describe('TabsNavLink Component', function () {
+    test('renders tab link with correct label', function () {
+        (0, react_2.render)(react_1.default.createElement(TabNavLink_1.default, { tabNavLink: tabNavLink, activeNavLink: false }));
+        var tabLink = react_2.screen.getByText('Tab 1');
+        expect(tabLink).toBeInTheDocument();
+        expect(tabLink).toHaveStyleRule('color', colors_1.TextDarkGrayColor);
+        expect(tabLink).toHaveStyleRule('transform', 'scaleX(0)', {
+            modifier: '&:before',
+        });
+    });
+    test('renders tab link with active style', function () {
+        (0, react_2.render)(react_1.default.createElement(TabNavLink_1.default, { tabNavLink: tabNavLink, activeNavLink: true }));
+        var tabLink = react_2.screen.getByText('Tab 1');
+        expect(tabLink).toBeInTheDocument();
+        expect(tabLink).toHaveStyleRule('color', colors_1.BlackColor);
+        expect(tabLink).toHaveStyleRule('transform', 'scaleX(1)', {
+            modifier: '&:before',
+        });
+    });
+    test('calls setActiveTab when clicked', function () {
+        (0, react_2.render)(react_1.default.createElement(TabNavLink_1.default, { tabNavLink: tabNavLink, activeNavLink: false, setActiveTab: setActiveTab }));
+        var tabLink = react_2.screen.getByText('Tab 1');
+        react_2.fireEvent.click(tabLink);
+        expect(setActiveTab).toHaveBeenCalledWith(tabNavLink);
+    });
+});

package/dist/system/Tabs/TabNavLink/index.js

@@ -0,0 +1,27 @@
+"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.StyledTabsNavLink = void 0;
+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 colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var vars_1 = require("@/fonts/vars");
+// Styles
+exports.StyledTabsNavLink = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n\n  ", ";\n  position: relative;\n  color: ", ";\n  text-decoration: none;\n  cursor: pointer;\n  text-align: left;\n  display: inline-block;\n  width: max-content;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 2px;\n    bottom: -2px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: transform 0.3s ease;\n\n    ", " {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n  }\n"], ["\n  font-family: ", ";\n\n  ", ";\n  position: relative;\n  color: ", ";\n  text-decoration: none;\n  cursor: pointer;\n  text-align: left;\n  display: inline-block;\n  width: max-content;\n\n  &:before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 2px;\n    bottom: -2px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: transform 0.3s ease;\n\n    ", " {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n  }\n"])), vars_1.poppinsFontVarCss.css, typography_1.FH5, function (props) { return (props.isActive ? colors_1.BlackColor : colors_1.TextDarkGrayColor); }, function (props) { return (props.isActive ? 'scaleX(1)' : 'scaleX(0)'); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(2), (0, _4k_1.adaptiveValueCalc)(-2), colors_1.BlackColor);
+// Component
+var TabsNavLink = function (_a) {
+    var tabNavLink = _a.tabNavLink, activeNavLink = _a.activeNavLink, setActiveTab = _a.setActiveTab;
+    return (react_1.default.createElement(exports.StyledTabsNavLink, { isActive: activeNavLink, onClick: function () { return (setActiveTab ? setActiveTab(tabNavLink) : null); } }, tabNavLink.label));
+};
+// Export
+exports.default = TabsNavLink;
+var templateObject_1;

package/dist/system/Tabs/TabsNav/TabsNav.test.js

@@ -0,0 +1,43 @@
+"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"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+require("jest-styled-components");
+var colors_1 = require("@/styles/colors");
+var TabsNav_1 = __importDefault(require("../TabsNav"));
+// Mock data
+var tabsData = [
+    { id: 1, label: 'Tab 1' },
+    { id: 2, label: 'Tab 2' },
+];
+var activeTab = { id: 1, label: 'Tab 1' };
+var setActiveTab = jest.fn();
+describe('TabsNav Component', function () {
+    test('renders all tabs correctly', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsNav_1.default, { tabsData: tabsData, activeTab: activeTab }));
+        var tab1 = react_2.screen.getByText('Tab 1');
+        var tab2 = react_2.screen.getByText('Tab 2');
+        expect(tab1).toBeInTheDocument();
+        expect(tab2).toBeInTheDocument();
+    });
+    test('applies active styles to the active tab', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsNav_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        var activeTabElement = react_2.screen.getByText('Tab 1');
+        expect(activeTabElement).toHaveStyleRule('color', colors_1.BlackColor);
+    });
+    test('applies inactive styles to inactive tabs', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsNav_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        var inactiveTabElement = react_2.screen.getByText('Tab 2');
+        expect(inactiveTabElement).toHaveStyleRule('color', colors_1.TextDarkGrayColor);
+    });
+    test('calls setActiveTab when a tab is clicked', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsNav_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        var tab2 = react_2.screen.getByText('Tab 2');
+        react_2.fireEvent.click(tab2);
+        expect(setActiveTab).toHaveBeenCalledWith(tabsData[1]);
+    });
+});

package/dist/system/Tabs/TabsNav/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 });
+exports.StyledTabsNav = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var TabNavLink_1 = __importDefault(require("@/system/Tabs/TabNavLink"));
+// Styles
+exports.StyledTabsNav = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n\n  @media (max-width: 767px) {\n    width: 310px;\n    overflow: hidden;\n    margin: 0 auto;\n  }\n"], ["\n  position: relative;\n  display: flex;\n\n  @media (max-width: 767px) {\n    width: 310px;\n    overflow: hidden;\n    margin: 0 auto;\n  }\n"])));
+// Component
+var TabsNav = function (_a) {
+    var tabsData = _a.tabsData, activeTab = _a.activeTab, setActiveTab = _a.setActiveTab;
+    var renderSortItems = function () {
+        return tabsData.map(function (data) {
+            return (react_1.default.createElement(TabNavLink_1.default, { key: data.id, activeNavLink: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.id) === data.id, tabNavLink: data, setActiveTab: setActiveTab }));
+        });
+    };
+    return react_1.default.createElement(exports.StyledTabsNav, null, renderSortItems());
+};
+// Export
+exports.default = TabsNav;
+var templateObject_1;

package/dist/system/Tabs/TabsNav/type.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/system/Tabs/TabsPanel/TabsPanel.test.js

@@ -0,0 +1,37 @@
+"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"));
+require("@testing-library/jest-dom/extend-expect");
+var react_2 = require("@testing-library/react");
+require("jest-styled-components");
+var TabsPanel_1 = __importDefault(require("../TabsPanel"));
+describe('TabPanel Component', function () {
+    test('renders children when isActive is true', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsPanel_1.default, { isActive: true },
+            react_1.default.createElement("div", null, "Content")));
+        var content = react_2.screen.getByText('Content');
+        expect(content).toBeInTheDocument();
+    });
+    test('does not render children when isActive is false', function () {
+        (0, react_2.render)(react_1.default.createElement(TabsPanel_1.default, { isActive: false },
+            react_1.default.createElement("div", null, "Content")));
+        var content = react_2.screen.queryByText('Content');
+        expect(content).not.toBeInTheDocument();
+    });
+    test('applies correct styles based on isActive prop', function () {
+        var _a;
+        var rerender = (0, react_2.render)(react_1.default.createElement(TabsPanel_1.default, { isActive: true },
+            react_1.default.createElement("div", null, "Content"))).rerender;
+        var activePanel = react_2.screen.getByText('Content').parentElement;
+        expect(activePanel).toHaveStyleRule('display', 'block');
+        rerender(react_1.default.createElement(TabsPanel_1.default, { isActive: false },
+            react_1.default.createElement("div", null, "Content")));
+        var inactivePanel = (_a = react_2.screen.queryByText('Content')) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (inactivePanel) {
+            expect(inactivePanel).toHaveStyleRule('display', 'none');
+        }
+    });
+});

package/dist/system/Tabs/TabsPanel/index.js

@@ -0,0 +1,21 @@
+"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"));
+// Styles
+var StyledTabPanel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n"], ["\n  display: ", ";\n"])), function (props) { return (props.isActive ? 'block' : 'none'); });
+// Component
+var TabPanel = function (_a) {
+    var isActive = _a.isActive, children = _a.children;
+    return (react_1.default.createElement(StyledTabPanel, { isActive: isActive }, isActive && children));
+};
+// Export
+exports.default = TabPanel;
+var templateObject_1;

package/dist/system/Tabs/index.js

@@ -1,4 +1,27 @@
-export { default as TabsNavLink } from './TabNavLink';
-export { default as TabsNav } from './TabsNav';
-export { default as TabPanel } from './TabsPanel';
-export * from './TabsNav/type';
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabPanel = exports.TabsNav = exports.TabsNavLink = void 0;
+var TabNavLink_1 = require("./TabNavLink");
+Object.defineProperty(exports, "TabsNavLink", { enumerable: true, get: function () { return __importDefault(TabNavLink_1).default; } });
+var TabsNav_1 = require("./TabsNav");
+Object.defineProperty(exports, "TabsNav", { enumerable: true, get: function () { return __importDefault(TabsNav_1).default; } });
+var TabsPanel_1 = require("./TabsPanel");
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return __importDefault(TabsPanel_1).default; } });
+__exportStar(require("./TabsNav/type"), exports);

package/dist/system/index.js

@@ -1,21 +1,49 @@
-export * from '@ludo.ninja/ui/build/system/Box';
-export * from '@ludo.ninja/ui/build/system/Flex';
-export * from '@ludo.ninja/ui/build/system/Grid';
-export * from '@ludo.ninja/ui/build/system/Text';
-export * from './Img';
-export * from './theme';
-export * from './Tabs';
-export * from './Buttons';
-export * from './Cards';
-export * from './Forms';
-export * from './Modals';
-export * from './Palete';
-export * from './Filters';
-export { default as CardsHolder } from './CardsHolderWithSkeleton/CardsHolder';
-export { default as Palete } from './Palete';
-export { default as CardsError } from './CardsHolderWithSkeleton/CardsHolder/CardsError';
-export { default as CardsNoResults } from './CardsHolderWithSkeleton/CardsHolder/CardsNoResults';
-export { default as CardsSkeleton } from './CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-export { CardSkeleton } from './CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-export { default as CardsHolderLoader } from './CardsHolderWithSkeleton/CardsHolderLoader';
-export { default as CardsHolderWithSkeleton } from './CardsHolderWithSkeleton';
+"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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardsHolderWithSkeleton = exports.CardsHolderLoader = exports.CardSkeleton = exports.CardsSkeleton = exports.CardsNoResults = exports.CardsError = exports.Palete = exports.CardsHolder = void 0;
+__exportStar(require("@ludo.ninja/ui/build/system/Box"), exports);
+__exportStar(require("@ludo.ninja/ui/build/system/Flex"), exports);
+__exportStar(require("@ludo.ninja/ui/build/system/Grid"), exports);
+__exportStar(require("@ludo.ninja/ui/build/system/Text"), exports);
+__exportStar(require("./Img"), exports);
+__exportStar(require("./theme"), exports);
+__exportStar(require("./Tabs"), exports);
+__exportStar(require("./Buttons"), exports);
+__exportStar(require("./Cards"), exports);
+__exportStar(require("./Forms"), exports);
+__exportStar(require("./Modals"), exports);
+__exportStar(require("./Palete"), exports);
+__exportStar(require("./Filters"), exports);
+var CardsHolder_1 = require("./CardsHolderWithSkeleton/CardsHolder");
+Object.defineProperty(exports, "CardsHolder", { enumerable: true, get: function () { return __importDefault(CardsHolder_1).default; } });
+var Palete_1 = require("./Palete");
+Object.defineProperty(exports, "Palete", { enumerable: true, get: function () { return __importDefault(Palete_1).default; } });
+var CardsError_1 = require("./CardsHolderWithSkeleton/CardsHolder/CardsError");
+Object.defineProperty(exports, "CardsError", { enumerable: true, get: function () { return __importDefault(CardsError_1).default; } });
+var CardsNoResults_1 = require("./CardsHolderWithSkeleton/CardsHolder/CardsNoResults");
+Object.defineProperty(exports, "CardsNoResults", { enumerable: true, get: function () { return __importDefault(CardsNoResults_1).default; } });
+var CardsSkeleton_1 = require("./CardsHolderWithSkeleton/CardsHolder/CardsSkeleton");
+Object.defineProperty(exports, "CardsSkeleton", { enumerable: true, get: function () { return __importDefault(CardsSkeleton_1).default; } });
+var CardsSkeleton_2 = require("./CardsHolderWithSkeleton/CardsHolder/CardsSkeleton");
+Object.defineProperty(exports, "CardSkeleton", { enumerable: true, get: function () { return CardsSkeleton_2.CardSkeleton; } });
+var CardsHolderLoader_1 = require("./CardsHolderWithSkeleton/CardsHolderLoader");
+Object.defineProperty(exports, "CardsHolderLoader", { enumerable: true, get: function () { return __importDefault(CardsHolderLoader_1).default; } });
+var CardsHolderWithSkeleton_1 = require("./CardsHolderWithSkeleton");
+Object.defineProperty(exports, "CardsHolderWithSkeleton", { enumerable: true, get: function () { return __importDefault(CardsHolderWithSkeleton_1).default; } });

package/dist/system/theme.js

@@ -1 +1,7 @@
-export { mainTheme, lightTheme, darkTheme, } from '@ludo.ninja/ui/build/system/theme';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darkTheme = exports.lightTheme = exports.mainTheme = void 0;
+var theme_1 = require("@ludo.ninja/ui/build/system/theme");
+Object.defineProperty(exports, "mainTheme", { enumerable: true, get: function () { return theme_1.mainTheme; } });
+Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });
+Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });