@ludo.ninja/components 2.0.9 → 2.0.11

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

@@ -1,40 +1,11 @@
-"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;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const dynamic_1 = __importDefault(require("next/dynamic"));
-const ui_1 = require("../../../store/ui");
+import { jsx as _jsx } from "react/jsx-runtime";
+import dynamic from 'next/dynamic';
+import { useUiStore } from "../../../store/ui";
 // add first load chunk when component needed
-const ModalSidebarPortal = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./ModalSidebarPortal'))).then((_) => _.ModalSidebarPortal));
+const ModalSidebarPortal = dynamic(() => import('./ModalSidebarPortal').then((_) => _.ModalSidebarPortal));
 // minimize dom tree for optimize virtualization
-const CreatorModalSidebarPortal = () => {
-    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals } = (0, ui_1.useUiStore)((state) => ({
+export const CreatorModalSidebarPortal = () => {
+    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals } = useUiStore((state) => ({
         isOpenModalSidebarPortal: state.isOpenModalSidebarPortal,
         closeModalSidebarPortal: state.closeModalSidebarPortal,
         contentModals: state.contentModals,
@@ -42,6 +13,5 @@ const CreatorModalSidebarPortal = () => {
     if (!isOpenModalSidebarPortal) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals }));
+    return (_jsx(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals }));
 };
-exports.CreatorModalSidebarPortal = CreatorModalSidebarPortal;

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

@@ -1,31 +1,26 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom");
-const react_1 = require("@testing-library/react");
-const ui_1 = require("../../../store/ui");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { cleanup, render, screen } from '@testing-library/react';
+import { useUiStore } from "../../../store/ui";
+import ModalSidebar from './index';
 jest.mock('@/store/ui');
 describe('Modal Component', () => {
-    afterEach(react_1.cleanup);
+    afterEach(cleanup);
     test('open modal', () => {
         const closeModalMock = jest.fn();
         // Mock the useUiStore hook
-        ui_1.useUiStore.mockReturnValue({
-            contentModals: (0, jsx_runtime_1.jsx)("div", { children: "test open" }),
+        useUiStore.mockReturnValue({
+            contentModals: _jsx("div", { children: "test open" }),
             isModalSidebarOpen: true,
             closeModalSidebar: closeModalMock,
         });
         // Render the Modal component
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, {}));
+        render(_jsx(ModalSidebar, {}));
         // Check if the modal content is in the document
-        const labelElement = react_1.screen.getByText('test open');
+        const labelElement = screen.getByText('test open');
         expect(labelElement).toBeInTheDocument();
         // Check if the close icon is in the document
-        const closeIcon = react_1.screen.getByAltText('close');
+        const closeIcon = screen.getByAltText('close');
         expect(closeIcon).toBeInTheDocument();
         // Simulate click on the close icon
         closeIcon.click();

package/build/system/Modals/ModalSidebar/ModalSidebarPortal.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalSidebarPortal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("@ludo.ninja/utils");
-const index_1 = require("./index");
-// import ModalCloseIcon from '@/public/modal/close.svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PortalCreator } from '@ludo.ninja/utils';
+import { StyledModalSidebar } from "./index";
+// import ModalCloseIcon from "../../../public/modal/close";
 // minimize dom tree for optimize virtualization
-const ModalSidebarPortal = ({ component, closeModal, }) => ((0, jsx_runtime_1.jsx)(utils_1.PortalCreator, { children: (0, jsx_runtime_1.jsxs)(index_1.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: component })] }) }));
-exports.ModalSidebarPortal = ModalSidebarPortal;
+export const ModalSidebarPortal = ({ component, closeModal, }) => (_jsx(PortalCreator, { children: _jsxs(StyledModalSidebar, { children: [_jsx("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModal }), _jsx("div", { className: "modalContent", children: component })] }) }));

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

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledModalSidebar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ui_1 = require("../../../store/ui");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const z_indexes_1 = require("../../../styles/mixins/z-indexes");
-// import ModalCloseIcon from '@/public/modal/close.svg';
-exports.StyledModalSidebar = styled_components_1.default.div `
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { useUiStore } from "../../../store/ui";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { WhiteColor } from "../../../styles/colors";
+import { zIndexModal } from "../../../styles/mixins/z-indexes";
+// import ModalCloseIcon from "../../../public/modal/close";
+export const StyledModalSidebar = styled.div `
   min-height: 300px;
   //max-width: 536px;
-  z-index: ${z_indexes_1.zIndexModal.toString()};
+  z-index: ${zIndexModal.toString()};
   padding: 24px;
-  background-color: ${colors_1.WhiteColor};
+  background-color: ${WhiteColor};
   position: fixed;
   left: 50%;
   top: 50%;
@@ -48,31 +42,31 @@ exports.StyledModalSidebar = styled_components_1.default.div `
     margin-top: 24px;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    min-height: ${(0, _4k_1.adaptiveValueCalc)(300)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(24)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(8)};
+  ${mediaQuery.minWidthFourK} {
+    min-height: ${adaptiveValueCalc(300)};
+    padding: ${adaptiveValueCalc(24)};
+    border-radius: ${adaptiveValueCalc(8)};
 
     .modalCloseIcon {
-      width: ${(0, _4k_1.adaptiveValueCalc)(24)};
-      height: ${(0, _4k_1.adaptiveValueCalc)(24)};
-      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
-      right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      width: ${adaptiveValueCalc(24)};
+      height: ${adaptiveValueCalc(24)};
+      top: ${adaptiveValueCalc(16)};
+      right: ${adaptiveValueCalc(16)};
     }
 
     .modalContent {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
+      margin-top: ${adaptiveValueCalc(24)};
     }
   }
 `;
 const ModalSidebar = () => {
-    const { contentModals, isModalSidebarOpen, closeModalSidebar } = (0, ui_1.useUiStore)((state) => ({
+    const { contentModals, isModalSidebarOpen, closeModalSidebar } = useUiStore((state) => ({
         contentModals: state.contentModals,
         isModalSidebarOpen: state.isModalSidebarOpen,
         closeModalSidebar: state.closeModalSidebar,
     }));
     if (!isModalSidebarOpen)
         return null;
-    return ((0, jsx_runtime_1.jsxs)(exports.StyledModalSidebar, { children: [(0, jsx_runtime_1.jsx)("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
+    return (_jsxs(StyledModalSidebar, { children: [_jsx("img", { src: "/modal/close.svg", alt: "close", width: 24, height: 24, className: 'modalCloseIcon', onClick: closeModalSidebar }), _jsx("div", { className: "modalContent", children: contentModals })] }));
 };
-exports.default = ModalSidebar;
+export default ModalSidebar;

package/build/system/Overlay/Overlay.test.js

@@ -1,13 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom/extend-expect");
-const react_1 = require("@testing-library/react");
-const ui_1 = require("../../store/ui");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { useUiStore } from "../../store/ui";
+import Overlay from './index';
 // Mocking dependencies
 jest.mock('@/store/ui');
 describe('Overlay Component', () => {
@@ -16,13 +11,13 @@ describe('Overlay Component', () => {
         closeOverlay: mockCloseOverlay,
         isOverlayActive: false,
     };
-    const renderComponent = () => (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'dialog', children: (0, jsx_runtime_1.jsx)(index_1.default, {}) }));
+    const renderComponent = () => render(_jsx("div", { "data-testid": 'dialog', children: _jsx(Overlay, {}) }));
     beforeEach(() => {
-        ui_1.useUiStore.mockReturnValue(mockUseUiStore);
+        useUiStore.mockReturnValue(mockUseUiStore);
     });
     test('renders overlay with hidden visibility by default', () => {
         renderComponent();
-        const overlay = react_1.screen.getByTestId('dialog').children[0];
+        const overlay = screen.getByTestId('dialog').children[0];
         expect(overlay).toHaveStyle('visibility: hidden');
         const blurDiv = overlay.querySelector('.blur');
         expect(blurDiv).toHaveStyle('visibility: hidden');
@@ -30,15 +25,15 @@ describe('Overlay Component', () => {
     test('renders overlay with visible visibility when active', () => {
         mockUseUiStore.isOverlayActive = true;
         renderComponent();
-        const overlay = react_1.screen.getByTestId('dialog').children[0];
+        const overlay = screen.getByTestId('dialog').children[0];
         expect(overlay).toHaveStyle('visibility: visible');
         const blurDiv = overlay.querySelector('.blur');
         expect(blurDiv).toHaveStyle('visibility: visible');
     });
     test('calls closeOverlay when clicked', () => {
         renderComponent();
-        const overlay = react_1.screen.getByTestId('dialog').children[0];
-        react_1.fireEvent.click(overlay);
+        const overlay = screen.getByTestId('dialog').children[0];
+        fireEvent.click(overlay);
         expect(mockCloseOverlay).toHaveBeenCalled();
     });
 });

package/build/system/Overlay/index.js

@@ -1,19 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const ui_1 = require("../../store/ui");
-const colors_1 = require("../../styles/colors");
-const z_indexes_1 = require("../../styles/mixins/z-indexes");
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useUiStore } from "../../store/ui";
+import { BlackColor } from "../../styles/colors";
+import { zIndexOverlay } from "../../styles/mixins/z-indexes";
 // Styles
-const StyledOverlay = styled_components_1.default.div `
+const StyledOverlay = styled.div `
   position: fixed;
   top: 0;
   left: 0;
-  z-index: ${z_indexes_1.zIndexOverlay.toString()};
+  z-index: ${zIndexOverlay.toString()};
   backdrop-filter: blur(10px);
   height: var(--app-height);
   width: 100%;
@@ -23,7 +18,7 @@ const StyledOverlay = styled_components_1.default.div `
   .blur {
     height: 100%;
     width: 100%;
-    background-color: ${colors_1.BlackColor};
+    background-color: ${BlackColor};
     opacity: ${(props) => (props.isActive ? 0.6 : 0)};
     visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
     transition: 0.2s all;
@@ -31,11 +26,11 @@ const StyledOverlay = styled_components_1.default.div `
 `;
 // Component
 const Overlay = () => {
-    const { closeOverlay, isOverlayActive } = (0, ui_1.useUiStore)((state) => ({
+    const { closeOverlay, isOverlayActive } = useUiStore((state) => ({
         closeOverlay: state.closeOverlay,
         isOverlayActive: state.isOverlayActive,
     }));
-    return ((0, jsx_runtime_1.jsx)(StyledOverlay, { isActive: isOverlayActive, onClick: closeOverlay, children: (0, jsx_runtime_1.jsx)("div", { className: 'blur' }) }));
+    return (_jsx(StyledOverlay, { isActive: isOverlayActive, onClick: closeOverlay, children: _jsx("div", { className: 'blur' }) }));
 };
 // Export
-exports.default = Overlay;
+export default Overlay;

package/build/system/PageLoader/index.js

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

package/build/system/Palete/index.js

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

package/build/system/ShareIconResize.js

@@ -1,31 +1,24 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ShareIconResize = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ScreenWidth_1 = require("../styles/ScreenWidth");
-const scale_1 = require("../utils/adaptive/scale");
-const screen_1 = require("../utils/screen");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const share_svg_1 = __importDefault(require("../public/iconButton/share"));
-const SIcon = styled_components_1.default.div `
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mediaQuery } from "../styles/ScreenWidth";
+import { getAdaptiveScale } from "../utils/adaptive/scale";
+import { useWindowDimensionsWithServerInitial } from "../utils/screen";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import ShareIcon from "../public/iconButton/share";
+const SIcon = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    width: ${(0, _4k_1.adaptiveValueCalc)(19)};
-    height: ${(0, _4k_1.adaptiveValueCalc)(20)};
+  ${mediaQuery.minWidthFourK} {
+    width: ${adaptiveValueCalc(19)};
+    height: ${adaptiveValueCalc(20)};
   }
 `;
-const ShareIconResize = () => {
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    return ((0, jsx_runtime_1.jsx)(SIcon, { children: (0, jsx_runtime_1.jsx)(share_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+export const ShareIconResize = () => {
+    const { windowDimensions } = useWindowDimensionsWithServerInitial();
+    return (_jsx(SIcon, { children: _jsx(ShareIcon, { style: getAdaptiveScale({
                 windowDimensions,
                 currentSize: 1,
             }) }) }));
 };
-exports.ShareIconResize = ShareIconResize;

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

@@ -1,40 +1,35 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom/extend-expect");
-const react_1 = require("@testing-library/react");
-require("jest-styled-components");
-const colors_1 = require("../../../styles/colors");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import { BlackColor, TextDarkGrayColor } from "../../../styles/colors";
+import TabsNavLink from './index';
 // Mock data
 const tabNavLink = { label: 'Tab 1', value: 'tab1', id: 1 };
 const setActiveTab = jest.fn();
 describe('TabsNavLink Component', () => {
     test('renders tab link with correct label', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: false }));
-        const tabLink = react_1.screen.getByText('Tab 1');
+        render(_jsx(TabsNavLink, { tabNavLink: tabNavLink, activeNavLink: false }));
+        const tabLink = screen.getByText('Tab 1');
         expect(tabLink).toBeInTheDocument();
-        expect(tabLink).toHaveStyleRule('color', colors_1.TextDarkGrayColor);
+        expect(tabLink).toHaveStyleRule('color', TextDarkGrayColor);
         expect(tabLink).toHaveStyleRule('transform', 'scaleX(0)', {
             modifier: '&:before',
         });
     });
     test('renders tab link with active style', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: true }));
-        const tabLink = react_1.screen.getByText('Tab 1');
+        render(_jsx(TabsNavLink, { tabNavLink: tabNavLink, activeNavLink: true }));
+        const tabLink = screen.getByText('Tab 1');
         expect(tabLink).toBeInTheDocument();
-        expect(tabLink).toHaveStyleRule('color', colors_1.BlackColor);
+        expect(tabLink).toHaveStyleRule('color', BlackColor);
         expect(tabLink).toHaveStyleRule('transform', 'scaleX(1)', {
             modifier: '&:before',
         });
     });
     test('calls setActiveTab when clicked', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabNavLink: tabNavLink, activeNavLink: false, setActiveTab: setActiveTab }));
-        const tabLink = react_1.screen.getByText('Tab 1');
-        react_1.fireEvent.click(tabLink);
+        render(_jsx(TabsNavLink, { tabNavLink: tabNavLink, activeNavLink: false, setActiveTab: setActiveTab }));
+        const tabLink = screen.getByText('Tab 1');
+        fireEvent.click(tabLink);
         expect(setActiveTab).toHaveBeenCalledWith(tabNavLink);
     });
 });

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

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTabsNavLink = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const vars_1 = require("../../../fonts/vars");
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { BlackColor, TextDarkGrayColor } from "../../../styles/colors";
+import { FH5 } from "../../../styles/typography";
+import { poppinsFontVarCss } from "../../../fonts/vars";
 // Styles
-exports.StyledTabsNavLink = styled_components_1.default.div `
-  font-family: ${vars_1.poppinsFontVarCss.css};
+export const StyledTabsNavLink = styled.div `
+  font-family: ${poppinsFontVarCss.css};
 
-  ${typography_1.FH5};
+  ${FH5};
   position: relative;
-  color: ${(props) => (props.isActive ? colors_1.BlackColor : colors_1.TextDarkGrayColor)};
+  color: ${(props) => (props.isActive ? BlackColor : TextDarkGrayColor)};
   text-decoration: none;
   cursor: pointer;
   text-align: left;
@@ -36,14 +30,14 @@ exports.StyledTabsNavLink = styled_components_1.default.div `
     transform: ${(props) => (props.isActive ? 'scaleX(1)' : 'scaleX(0)')};
     transition: transform 0.3s ease;
 
-    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-      height: ${(0, _4k_1.adaptiveValueCalc)(2)};
-      bottom: ${(0, _4k_1.adaptiveValueCalc)(-2)};
+    ${mediaQuery.minWidthFourK} {
+      height: ${adaptiveValueCalc(2)};
+      bottom: ${adaptiveValueCalc(-2)};
     }
   }
 
   :hover {
-    color: ${colors_1.BlackColor};
+    color: ${BlackColor};
   }
 
   :hover::before {
@@ -52,7 +46,7 @@ exports.StyledTabsNavLink = styled_components_1.default.div `
 `;
 // Component
 const TabsNavLink = ({ tabNavLink, activeNavLink, setActiveTab, }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.StyledTabsNavLink, { isActive: activeNavLink, onClick: () => (setActiveTab ? setActiveTab(tabNavLink) : null), children: tabNavLink.label }));
+    return (_jsx(StyledTabsNavLink, { isActive: activeNavLink, onClick: () => (setActiveTab ? setActiveTab(tabNavLink) : null), children: tabNavLink.label }));
 };
 // Export
-exports.default = TabsNavLink;
+export default TabsNavLink;

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

@@ -1,14 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-require("@testing-library/jest-dom/extend-expect");
-const react_1 = require("@testing-library/react");
-require("jest-styled-components");
-const colors_1 = require("../../../styles/colors");
-const index_1 = __importDefault(require("./index"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom/extend-expect';
+import { fireEvent, render, screen } from '@testing-library/react';
+import 'jest-styled-components';
+import { BlackColor, TextDarkGrayColor } from "../../../styles/colors";
+import TabsNav from './index';
 // Mock data
 const tabsData = [
     { id: 1, label: 'Tab 1' },
@@ -18,26 +13,26 @@ const activeTab = { id: 1, label: 'Tab 1' };
 const setActiveTab = jest.fn();
 describe('TabsNav Component', () => {
     test('renders all tabs correctly', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabsData: tabsData, activeTab: activeTab }));
-        const tab1 = react_1.screen.getByText('Tab 1');
-        const tab2 = react_1.screen.getByText('Tab 2');
+        render(_jsx(TabsNav, { tabsData: tabsData, activeTab: activeTab }));
+        const tab1 = screen.getByText('Tab 1');
+        const tab2 = screen.getByText('Tab 2');
         expect(tab1).toBeInTheDocument();
         expect(tab2).toBeInTheDocument();
     });
     test('applies active styles to the active tab', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
-        const activeTabElement = react_1.screen.getByText('Tab 1');
-        expect(activeTabElement).toHaveStyleRule('color', colors_1.BlackColor);
+        render(_jsx(TabsNav, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        const activeTabElement = screen.getByText('Tab 1');
+        expect(activeTabElement).toHaveStyleRule('color', BlackColor);
     });
     test('applies inactive styles to inactive tabs', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
-        const inactiveTabElement = react_1.screen.getByText('Tab 2');
-        expect(inactiveTabElement).toHaveStyleRule('color', colors_1.TextDarkGrayColor);
+        render(_jsx(TabsNav, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        const inactiveTabElement = screen.getByText('Tab 2');
+        expect(inactiveTabElement).toHaveStyleRule('color', TextDarkGrayColor);
     });
     test('calls setActiveTab when a tab is clicked', () => {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
-        const tab2 = react_1.screen.getByText('Tab 2');
-        react_1.fireEvent.click(tab2);
+        render(_jsx(TabsNav, { tabsData: tabsData, activeTab: activeTab, setActiveTab: setActiveTab }));
+        const tab2 = screen.getByText('Tab 2');
+        fireEvent.click(tab2);
         expect(setActiveTab).toHaveBeenCalledWith(tabsData[1]);
     });
 });

package/build/system/Tabs/TabsNav/index.js

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledTabsNav = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const TabNavLink_1 = __importDefault(require("../TabNavLink"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import TabsNavLink from "../TabNavLink";
 // Styles
-exports.StyledTabsNav = styled_components_1.default.div `
+export const StyledTabsNav = styled.div `
   position: relative;
   display: flex;
 
@@ -22,10 +16,10 @@ exports.StyledTabsNav = styled_components_1.default.div `
 const TabsNav = ({ tabsData, activeTab, setActiveTab }) => {
     const renderSortItems = () => {
         return tabsData.map((data) => {
-            return ((0, jsx_runtime_1.jsx)(TabNavLink_1.default, { activeNavLink: activeTab?.id === data.id, tabNavLink: data, setActiveTab: setActiveTab }, data.id));
+            return (_jsx(TabsNavLink, { activeNavLink: activeTab?.id === data.id, tabNavLink: data, setActiveTab: setActiveTab }, data.id));
         });
     };
-    return (0, jsx_runtime_1.jsx)(exports.StyledTabsNav, { children: renderSortItems() });
+    return _jsx(StyledTabsNav, { children: renderSortItems() });
 };
 // Export
-exports.default = TabsNav;
+export default TabsNav;

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

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