@ludo.ninja/components 2.3.36 → 2.3.38

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

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

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

@@ -0,0 +1,39 @@
+"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 react_hook_form_1 = require("react-hook-form");
+const index_1 = __importDefault(require("./index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+jest.mock('@/public/calendar.svg', () => 'div');
+jest.mock('@/public/close20.svg', () => 'div');
+const mockRegister = {
+    name: 'test-datepicker',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const renderComponent = (error) => {
+    const { result } = (0, react_1.renderHook)(() => (0, react_hook_form_1.useForm)());
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { register: mockRegister, error: error, control: result.current.control, name: mockRegister.name }));
+};
+describe('DatePicker Component', () => {
+    test('renders DatePicker with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: '' });
+        const datepickerElement = react_1.screen.getByTestId('date-picker');
+        expect(datepickerElement).toBeInTheDocument();
+    });
+    test('renders error label when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,138 @@
+"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/Forms/ErrorLabel/ErrorLabel.test.js

@@ -7,7 +7,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 require("@testing-library/jest-dom");
 const react_2 = require("@testing-library/react");
-const index_1 = __importDefault(require("@/system/Forms/ErrorLabel/index"));
+const index_1 = __importDefault(require("./index"));
 describe('ErrorLabel Component', () => {
     test('renders correctly with given children and id', () => {
         react_1.default.act(() => {

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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 ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const StyledLabel = styled_components_1.default.div `
   user-select: none;
   padding-top: 8px;

package/build/system/Forms/Input/Input.test.js

@@ -6,8 +6,8 @@ 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 colors_1 = require("@/styles/colors");
-const index_1 = __importDefault(require("@/system/Forms/Input/index"));
+const colors_1 = require("../../../styles/colors");
+const index_1 = __importDefault(require("./index"));
 jest.mock('../ErrorLabel', () => ({
     __esModule: true,
     default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),

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

@@ -8,11 +8,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 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 ErrorLabel_1 = __importDefault(require("@/system/Forms/ErrorLabel"));
-const vars_1 = require("@/fonts/vars");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_2 = require("../../../styles/colors");
+const typography_1 = require("../../../styles/typography");
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+const vars_1 = require("../../../fonts/vars");
 // Styles
 exports.StyledInput = styled_components_1.default.input `
   font-family: ${vars_1.dmsansFontVarCss.css};

package/build/system/Forms/RadioInput/RadioInput.test.js

@@ -6,7 +6,7 @@ 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 index_1 = __importDefault(require("@/system/Forms/RadioInput/index"));
+const index_1 = __importDefault(require("./index"));
 const mockData = {
     value: 'test-radio-input',
     label: 'Test RadioInput',

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const colors_2 = require("@/styles/colors");
-const Input_1 = require("@/system/Forms/Input");
+const colors_2 = require("../../../styles/colors");
+const Input_1 = require("../Input");
 const StyledLabel = styled_components_1.default.label `
   position: relative;
   padding: 8px 0 8px 27px;

package/build/system/Forms/Selects/DesktopSelect/index.d.ts

@@ -1,4 +1,4 @@
-import { ISelectInput } from "@/system/Forms/Selects/MobileSelect";
+import { ISelectInput } from '../MobileSelect';
 import { ICollectionFilterInput, ICreationFilterInput } from "@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema";
 import React from "react";
 interface Props {

package/build/system/Forms/Selects/DesktopSelect/index.js

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const vars_1 = require("@/fonts/vars");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
-const typography_1 = require("@/styles/typography");
-const scale_1 = require("@/utils/adaptive/scale");
-const screen_1 = require("@/utils/screen");
+const vars_1 = require("../../../../fonts/vars");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const scale_1 = require("../../../../utils/adaptive/scale");
+const screen_1 = require("../../../../utils/screen");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const react_1 = require("react");
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));

package/build/system/Forms/Selects/MobileSelect/index.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const router_1 = require("next/router");
-const DropDown_1 = __importDefault(require("@/system/DropDown"));
-const RadioInput_1 = __importDefault(require("@/system/Forms/RadioInput"));
+const DropDown_1 = __importDefault(require("../../../DropDown"));
+const RadioInput_1 = __importDefault(require("../../RadioInput"));
 // Component
 const MobileSelect = ({ options, onChangeHandler, name, defaultOptionValue, }) => {
     const [selectedOption, setSelectedOption] = (0, react_1.useState)(options[0]);

package/build/system/Forms/TextArea/TextArea.test.js

@@ -6,8 +6,8 @@ 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 colors_1 = require("@/styles/colors");
-const index_1 = __importDefault(require("@/system/Forms/TextArea/index"));
+const colors_1 = require("../../../styles/colors");
+const index_1 = __importDefault(require("./index"));
 jest.mock('../ErrorLabel', () => ({
     __esModule: true,
     default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),

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

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 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");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const typography_1 = require("../../../styles/typography");
+const vars_1 = require("../../../fonts/vars");
 const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
 // Styles
 const StyledTextArea = styled_components_1.default.textarea `

package/build/system/Img/Profilepic/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfilePic = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const image_1 = __importDefault(require("next/image"));
-const check4k_1 = require("@/utils/adaptive/check4k");
-const screen_1 = require("@/utils/screen");
+const check4k_1 = require("../../../utils/adaptive/check4k");
+const screen_1 = require("../../../utils/screen");
 const styled_components_1 = __importDefault(require("styled-components"));
-const ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+const ImageInterceptor_1 = require("../ImageInterceptor");
 const StyledProfilePic = (0, styled_components_1.default)(image_1.default) `
   border-radius: 50%;
 `;

package/build/system/Img/Userpic/UserPic.test.js

@@ -7,10 +7,10 @@ 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 store_1 = require("@/modules/user/store");
-const index_1 = __importDefault(require("@/system/Img/Userpic/index"));
-const useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
-const env_1 = require("@/store/env");
+const store_1 = require("../../../modules/user/store");
+const index_1 = __importDefault(require("./index"));
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const env_1 = require("../../../store/env");
 jest.mock('@/modules/user/store');
 jest.mock('@/api/server-medias/queries/useFetchUserPic');
 jest.mock('@/utils/env', () => ({

package/build/system/Img/Userpic/UserPicSpa.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
-const store_1 = require("@/modules/user/store");
-const env_1 = require("@/store/env");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
-const ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const store_1 = require("../../../modules/user/store");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
 const constants_1 = require("@ludo.ninja/core/build/constants");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");

package/build/system/Img/Userpic/index.js

@@ -4,12 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const useFetchUserPic_1 = __importDefault(require("@/api/server-medias/queries/useFetchUserPic"));
-const store_1 = require("@/modules/user/store");
-const env_1 = require("@/store/env");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
-const ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+const useFetchUserPic_1 = __importDefault(require("../../../api/server-medias/queries/useFetchUserPic"));
+const store_1 = require("../../../modules/user/store");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const ImageInterceptor_1 = require("../ImageInterceptor");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const image_1 = __importDefault(require("next/image"));

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

@@ -1,3 +1,3 @@
-export * from '@/system/Img/ExternalImage';
-export * from '@/system/Img/Userpic';
-export * from '@/system/Img/Profilepic';
+export * from './ExternalImage';
+export * from './Userpic';
+export * from './Profilepic';

package/build/system/Img/index.js

@@ -14,6 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("@/system/Img/ExternalImage"), exports);
-__exportStar(require("@/system/Img/Userpic"), exports);
-__exportStar(require("@/system/Img/Profilepic"), exports);
+__exportStar(require("./ExternalImage"), exports);
+__exportStar(require("./Userpic"), exports);
+__exportStar(require("./Profilepic"), exports);

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

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const vars_1 = require("@/fonts/vars");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
-const boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
-const SkeletonLabel_1 = __importDefault(require("@/system/Labels/SkeletonLabel"));
+const vars_1 = require("../../../fonts/vars");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const boxShadow_1 = __importDefault(require("../../../styles/mixins/boxShadow"));
+const boxTransform_1 = __importDefault(require("../../../styles/mixins/boxTransform"));
+const SkeletonLabel_1 = __importDefault(require("../SkeletonLabel"));
 const constants_1 = require("@ludo.ninja/core/build/constants");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const image_1 = __importDefault(require("next/image"));

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

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

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

@@ -0,0 +1,44 @@
+"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,44 @@
+"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

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

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

@@ -0,0 +1,36 @@
+"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

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