@ludo.ninja/components 2.3.34 → 2.3.36

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

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

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

@@ -1,138 +0,0 @@
-"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");
-// add imports to global css (next js - _app.tsx)
-// import 'react-calendar/dist/Calendar.css';
-// import 'react-date-picker/dist/DatePicker.css';
-const react_date_picker_1 = __importDefault(require("react-date-picker"));
-const react_hook_form_1 = require("react-hook-form");
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_2 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const vars_1 = require("../../../fonts/vars");
-const calendar_svg_1 = __importDefault(require("../../../public/calendar"));
-const close20_svg_1 = __importDefault(require("../../../public/close20"));
-const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
-// Styles
-const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker_1.default) `
-  font-family: ${vars_1.dmsansFontVarCss.css};
-  ${typography_1.MainText};
-  width: 100%;
-  height: 46px;
-  border-radius: 6px;
-  border: 1px solid
-    ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-  background: ${colors_2.WhiteColor};
-  color: ${colors_2.BlackColor};
-  outline: none;
-  padding: 8px 12px;
-
-  .react-date-picker__wrapper {
-    border: none;
-
-    .react-date-picker__inputGroup {
-      padding: 0;
-    }
-
-    .react-date-picker__inputGroup__input:focus-visible {
-      outline: none;
-    }
-
-    .react-date-picker__button {
-      padding: 4px;
-      border-radius: 50%;
-
-      &:hover {
-        background: ${colors_1.InactiveButtonColor};
-      }
-    }
-
-    .react-date-picker__clear-button {
-      svg path {
-        stroke: ${colors_1.TextDarkGrayColor};
-      }
-    }
-  }
-
-  .react-calendar {
-    padding: 4px;
-    width: 280px;
-    border-radius: 6px;
-    border: 1px solid ${colors_2.BorderColorLight};
-    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);
-    font-family: ${vars_1.dmsansFontVarCss.css};
-
-    button {
-      border-radius: 30px;
-      border: 1px solid white;
-    }
-
-    .react-calendar__tile--hasActive {
-      background: #76baff;
-    }
-
-    .react-calendar__tile--now {
-      ${boxShadow_1.default};
-      background: ${colors_1.ProgressColorMedium};
-
-      &:hover {
-        background: ${colors_1.ProgressColorMedium};
-      }
-    }
-
-    .react-calendar__tile--active,
-    .react-calendar__tile--hasActive {
-      ${boxShadow_1.default};
-      background: ${colors_1.AccentColor};
-      color: ${colors_2.WhiteColor};
-
-      &:hover {
-        background: ${colors_1.AccentColor};
-        color: ${colors_2.WhiteColor};
-      }
-    }
-
-    .react-calendar__year-view .react-calendar__tile,
-    .react-calendar__decade-view .react-calendar__tile,
-    .react-calendar__century-view .react-calendar__tile {
-      padding: 8px 0;
-    }
-  }
-
-  ::placeholder {
-    color: ${colors_2.TextGrayColor};
-    opacity: 1;
-  }
-
-  :-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
-  }
-
-  ::-ms-input-placeholder {
-    color: ${colors_2.TextGrayColor};
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
-    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
-    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
-      ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
-  }
-`;
-const DatePicker = ({ name, control, error }) => {
-    const renderError = () => {
-        if (error.isNeedShowError) {
-            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
-        }
-    };
-    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(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 ? (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) : null, calendarIcon: (0, jsx_runtime_1.jsx)(calendar_svg_1.default, {}), "data-testid": 'date-picker' }), renderError()] })) }));
-};
-exports.default = DatePicker;

package/build/system/Labels/InviteLabel/InviteLabel.test.d.ts

@@ -1 +0,0 @@
-export {};

package/build/system/Labels/InviteLabel/InviteLabel.test.js

@@ -1,44 +0,0 @@
-"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 react_1 = require("@testing-library/react");
-const index_1 = __importDefault(require("./index"));
-describe('InviteLabel Component', () => {
-    test('renders with value and link', () => {
-        const props = {
-            value: 50,
-            link: '/invite/123',
-            loading: false,
-        };
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
-        const inviteText = react_1.screen.getByText('50 invites');
-        expect(inviteText).toBeInTheDocument();
-        const linkElement = react_1.screen.getByRole('link', { name: /50 invites/i });
-        expect(linkElement).toHaveAttribute('href', '/invite/123');
-    });
-    test('renders loading skeleton', () => {
-        const props = {
-            value: 0,
-            link: '/invite/123',
-            loading: true,
-        };
-        (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'test_container', children: (0, jsx_runtime_1.jsx)(index_1.default, { ...props }) }));
-        const skeletonElement = react_1.screen
-            .getByTestId('test_container')
-            .querySelector('.react-loading-skeleton');
-        expect(skeletonElement).toBeInTheDocument();
-    });
-    test('does not render when value is falsy', () => {
-        const props = {
-            value: 0,
-            link: '/invite/123',
-            loading: false,
-        };
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
-        const inviteText = react_1.screen.queryByText('0 invites');
-        expect(inviteText).not.toBeInTheDocument();
-    });
-});

package/build/system/Labels/InviteLabel/index.d.ts

@@ -1,6 +0,0 @@
-declare const InviteLabel: ({ value, link, loading, }: {
-    value: number;
-    link: string;
-    loading: boolean;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default InviteLabel;

package/build/system/Labels/InviteLabel/index.js

@@ -1,44 +0,0 @@
-"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 link_1 = __importDefault(require("next/link"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
-const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
-const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
-const vars_1 = require("../../../fonts/vars");
-// Styles
-const StyledExpTab = (0, styled_components_1.default)(link_1.default) `
-  ${boxShadow_1.default};
-  ${boxTransform_1.default};
-  display: flex;
-  user-select: none;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 5px 16px;
-  max-width: max-content;
-  min-width: 99px;
-  min-height: 32px;
-  border-radius: 24px;
-  background: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.gradient};
-
-  .value {
-    font-family: ${vars_1.poppinsFontVarCss.css};
-    font-size: 1.6em;
-    font-weight: 600;
-    line-height: 1.3;
-    color: ${({ theme }) => theme.colors?.inviteCodesGradientLabel?.color};
-  }
-`;
-//Component
-const InviteLabel = ({ value, link, loading, }) => {
-    if (loading)
-        return (0, jsx_runtime_1.jsx)(SkeletonLabel_1.default, {});
-    if (!value)
-        return null;
-    return ((0, jsx_runtime_1.jsx)(StyledExpTab, { href: link, children: (0, jsx_runtime_1.jsx)("p", { className: `value `, children: `${value} invites` }) }));
-};
-exports.default = InviteLabel;

package/build/system/Modals/Modal/Modal.test.d.ts

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

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

@@ -1,36 +0,0 @@
-"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"));
-jest.mock('@/store/ui');
-describe('Modal Component', () => {
-    afterEach(react_1.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" }),
-            stylesModals: {},
-            isModalOpen: true,
-            closeModal: closeModalMock,
-        });
-        // Render the Modal component
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, {}));
-        // Check if the modal content is in the document
-        const labelElement = react_1.screen.getByText('test open');
-        expect(labelElement).toBeInTheDocument();
-        // Check if the close icon is in the document
-        const closeIcon = react_1.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/build/system/Modals/Modal/index.d.ts

@@ -1,2 +0,0 @@
-declare const Modal: () => import("react/jsx-runtime").JSX.Element | null;
-export default Modal;

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

@@ -1,82 +0,0 @@
-"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 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");
-const constants_1 = require("@ludo.ninja/core/build/constants");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const styled_components_1 = __importDefault(require("styled-components"));
-const StyledModal = styled_components_1.default.div `
-  min-height: 250px;
-  min-width: 300px;
-  width: auto;
-  z-index: ${z_indexes_1.zIndexModal.toString()};
-  padding: 16px;
-  background-color: ${colors_1.WhiteColor};
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 8px;
-
-  @media (max-width: 767px) {
-    //top: 20%;
-    //left: 0;
-    //right: 0;
-    //transform: none;
-    //margin: auto;
-    max-width: 320px;
-    max-height: calc(var(--app-height) - 20px);
-    overflow: hidden;
-    .modalContent {
-      max-height: calc(var(--app-height) - 20px - 16px - 16px - 24px);
-      overflow-y: auto;
-    }
-  }
-
-  .modalCloseIcon {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    cursor: pointer;
-  }
-
-  .modalContent {
-    margin-top: 24px;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    min-height: ${(0, _4k_1.adaptiveValueCalc)(250)};
-    min-width: ${(0, _4k_1.adaptiveValueCalc)(300)};
-    padding: ${(0, _4k_1.adaptiveValueCalc)(16)};
-    border-radius: ${(0, _4k_1.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)};
-    }
-
-    .modalContent {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
-    }
-  }
-`;
-const Modal = () => {
-    const { contentModals, isModalOpen, closeModal, stylesModals } = (0, ui_1.useUiStore)((state) => ({
-        contentModals: state.contentModals,
-        stylesModals: state.stylesModals,
-        isModalOpen: state.isModalOpen,
-        closeModal: state.closeModal,
-    }));
-    if (!isModalOpen)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(StyledModal, { style: stylesModals ? stylesModals : undefined, children: [(0, jsx_runtime_1.jsx)("img", { src: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModal }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
-};
-exports.default = Modal;

package/build/system/Modals/ModalSidebar/CreatorModalSidebarPortal.d.ts

@@ -1 +0,0 @@
-export declare const CreatorModalSidebarPortal: () => import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,47 +0,0 @@
-"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");
-// add first load chunk when component needed
-const ModalSidebarPortal = (0, dynamic_1.default)(() => Promise.resolve().then(() => __importStar(require('./ModalSidebarPortal'))).then((_) => _.ModalSidebarPortal));
-// minimize dom tree for optimize virtualization
-const CreatorModalSidebarPortal = () => {
-    const { isOpenModalSidebarPortal, closeModalSidebarPortal, contentModals } = (0, ui_1.useUiStore)((state) => ({
-        isOpenModalSidebarPortal: state.isOpenModalSidebarPortal,
-        closeModalSidebarPortal: state.closeModalSidebarPortal,
-        contentModals: state.contentModals,
-    }));
-    if (!isOpenModalSidebarPortal) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(ModalSidebarPortal, { closeModal: closeModalSidebarPortal, component: contentModals }));
-};
-exports.CreatorModalSidebarPortal = CreatorModalSidebarPortal;

package/build/system/Modals/ModalSidebar/ModalSidebar.test.d.ts

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

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

@@ -1,35 +0,0 @@
-"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"));
-jest.mock('@/store/ui');
-describe('Modal Component', () => {
-    afterEach(react_1.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" }),
-            isModalSidebarOpen: true,
-            closeModalSidebar: closeModalMock,
-        });
-        // Render the Modal component
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, {}));
-        // Check if the modal content is in the document
-        const labelElement = react_1.screen.getByText('test open');
-        expect(labelElement).toBeInTheDocument();
-        // Check if the close icon is in the document
-        const closeIcon = react_1.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/build/system/Modals/ModalSidebar/ModalSidebarPortal.d.ts

@@ -1,5 +0,0 @@
-import { ReactNode } from "react";
-export declare const ModalSidebarPortal: ({ component, closeModal }: {
-    component: ReactNode;
-    closeModal: () => void;
-}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalSidebarPortal = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const index_1 = require("./index");
-const constants_1 = require("@ludo.ninja/core/build/constants");
-const utils_1 = require("@ludo.ninja/utils");
-// 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: `${constants_1.staticLink}/public/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;

package/build/system/Modals/ModalSidebar/index.d.ts

@@ -1,3 +0,0 @@
-export declare const StyledModalSidebar: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-declare const ModalSidebar: () => import("react/jsx-runtime").JSX.Element | null;
-export default ModalSidebar;

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

@@ -1,78 +0,0 @@
-"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 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");
-const constants_1 = require("@ludo.ninja/core/build/constants");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const styled_components_1 = __importDefault(require("styled-components"));
-exports.StyledModalSidebar = styled_components_1.default.div `
-  min-height: 300px;
-  //max-width: 536px;
-  z-index: ${z_indexes_1.zIndexModal.toString()};
-  padding: 24px;
-  background-color: ${colors_1.WhiteColor};
-  position: fixed;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 8px;
-
-  @media (max-width: 767px) {
-    padding: 32px;
-    border-radius: 0;
-    max-width: none;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    transform: none;
-  }
-
-  .modalCloseIcon {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    cursor: pointer;
-  }
-
-  .modalContent {
-    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)};
-
-    .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)};
-    }
-
-    .modalContent {
-      margin-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
-    }
-  }
-`;
-const ModalSidebar = () => {
-    const { contentModals, isModalSidebarOpen, closeModalSidebar } = (0, ui_1.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: `${constants_1.staticLink}/public/modal/close.svg`, alt: "close", width: 24, height: 24, className: "modalCloseIcon", onClick: closeModalSidebar }), (0, jsx_runtime_1.jsx)("div", { className: "modalContent", children: contentModals })] }));
-};
-exports.default = ModalSidebar;

package/build/system/Overlay/Overlay.test.d.ts

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

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

@@ -1,44 +0,0 @@
-"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"));
-// Mocking dependencies
-jest.mock('@/store/ui');
-describe('Overlay Component', () => {
-    const mockCloseOverlay = jest.fn();
-    const mockUseUiStore = {
-        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, {}) }));
-    beforeEach(() => {
-        ui_1.useUiStore.mockReturnValue(mockUseUiStore);
-    });
-    test('renders overlay with hidden visibility by default', () => {
-        renderComponent();
-        const overlay = react_1.screen.getByTestId('dialog').children[0];
-        expect(overlay).toHaveStyle('visibility: hidden');
-        const blurDiv = overlay.querySelector('.blur');
-        expect(blurDiv).toHaveStyle('visibility: hidden');
-    });
-    test('renders overlay with visible visibility when active', () => {
-        mockUseUiStore.isOverlayActive = true;
-        renderComponent();
-        const overlay = react_1.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);
-        expect(mockCloseOverlay).toHaveBeenCalled();
-    });
-});

package/build/system/Overlay/index.d.ts

@@ -1,2 +0,0 @@
-declare const Overlay: () => import("react/jsx-runtime").JSX.Element;
-export default Overlay;

package/build/system/Overlay/index.js

@@ -1,41 +0,0 @@
-"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");
-// Styles
-const StyledOverlay = styled_components_1.default.div `
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: ${z_indexes_1.zIndexOverlay.toString()};
-  backdrop-filter: blur(10px);
-  height: var(--app-height);
-  width: 100%;
-  cursor: pointer;
-  visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
-
-  .blur {
-    height: 100%;
-    width: 100%;
-    background-color: ${colors_1.BlackColor};
-    opacity: ${(props) => (props.isActive ? 0.6 : 0)};
-    visibility: ${(props) => (props.isActive ? 'visible' : 'hidden')};
-    transition: 0.2s all;
-  }
-`;
-// Component
-const Overlay = () => {
-    const { closeOverlay, isOverlayActive } = (0, ui_1.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' }) }));
-};
-// Export
-exports.default = Overlay;