@ludo.ninja/components 2.3.6 → 2.3.8

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

@@ -0,0 +1,76 @@
+"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 index_1 = __importDefault(require("./index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+const mockRegister = {
+    name: 'test-checkbox',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockInnerTextInputRef = {
+    name: 'inner-text-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const renderComponent = (props) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+};
+describe('CheckboxInput Component', () => {
+    test('renders correctly with provided props', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+        });
+        const checkboxElement = react_1.screen.getByRole('checkbox');
+        const labelElement = react_1.screen.getByText('Test Label');
+        expect(checkboxElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
+    });
+    test('toggles text input field based on checkbox', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            withInput: true,
+            innerTextInputRef: mockInnerTextInputRef,
+        });
+        const checkboxElement = react_1.screen.getByRole('checkbox');
+        const textInputElement = react_1.screen.getByRole('textbox');
+        expect(textInputElement).toBeDisabled();
+        react_1.fireEvent.click(checkboxElement);
+        expect(textInputElement).not.toBeDisabled();
+    });
+    test('displays error message when there is an error', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: true, message: 'Error message' },
+        });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+    test('does not display error message when there is no error', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: false, message: '' },
+        });
+        const errorLabel = react_1.screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+});

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { UseFormRegisterReturn } from "react-hook-form";
+export type inputType = {
+    labelText?: string;
+    name: string;
+    placeHolder?: string;
+};
+interface Props {
+    label: string;
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error?: {
+        isNeedShowError: boolean;
+        message: string;
+    };
+    className?: string;
+    value?: string | number;
+    withInput?: boolean;
+    innerTextInputRef?: UseFormRegisterReturn;
+    disabled?: boolean;
+    checked?: boolean;
+}
+declare const CheckboxInput: React.FC<Props>;
+export default CheckboxInput;

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

@@ -0,0 +1,65 @@
+"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 colors_1 = require("../../../styles/colors");
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+const Input_1 = require("../Input");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const BasicCheckbox = styled_components_1.default.label `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 25px;
+  padding-bottom: 2px;
+  margin: 14px 0;
+  font-size: 15px;
+  font-weight: 400;
+  color: ${colors_1.TextGrayColor};
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  .input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkmark {
+      background-color: ${colors_1.AccentColor};
+      background-image: url("${constants_1.staticLink}/public/forms/checkbox/checkboxArrow.svg");
+      background-position: center;
+      background-repeat: no-repeat;
+      border-color: transparent;
+    }
+  }
+
+  .checkmark {
+    position: absolute;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: ${colors_1.WhiteColor};
+    border: 2px solid ${colors_1.BorderColorLight};
+    border-radius: 6px;
+  }
+`;
+const CheckboxInput = ({ data, label, register, error, className, value, withInput, innerTextInputRef, disabled, checked, }) => {
+    const [textInputDisabled, setTextInputDisabled] = (0, react_1.useState)(!checked);
+    const renderError = () => {
+        if (error?.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error?.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(BasicCheckbox, { className: className, status: error?.isNeedShowError, children: [(0, jsx_runtime_1.jsx)("input", { ...register, onChange: (e) => {
+                            setTextInputDisabled(!e.target.checked);
+                            register.onChange(e);
+                        }, className: "input", type: "checkbox", name: data.name, value: value, disabled: disabled, checked: checked }), (0, jsx_runtime_1.jsx)("p", { className: "checkmark" }), label, withInput && (0, jsx_runtime_1.jsx)(Input_1.StyledInput, { status: false, ...innerTextInputRef, disabled: textInputDisabled })] }), renderError()] }));
+};
+exports.default = CheckboxInput;

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.d.ts

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

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

@@ -0,0 +1,28 @@
+"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 = __importDefault(require("react"));
+require("@testing-library/jest-dom");
+const react_2 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+describe('ErrorLabel Component', () => {
+    test('renders correctly with given children and id', () => {
+        react_1.default.act(() => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { id: "test-id", children: "Test Label" }));
+        });
+        const labelElement = react_2.screen.getByText('Test Label');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveAttribute('for', 'test-id');
+    });
+    test('renders correctly without id', () => {
+        react_1.default.act(() => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { children: "Test Label Without ID" }));
+        });
+        const labelElement = react_2.screen.getByText('Test Label Without ID');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).not.toHaveAttribute('for');
+    });
+});

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+    id?: string;
+}
+declare const BasicErrorLabel: React.FC<Props>;
+export default BasicErrorLabel;

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

@@ -0,0 +1,25 @@
+"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 _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const StyledLabel = styled_components_1.default.div `
+  user-select: none;
+  padding-top: 8px;
+  color: #f4205f;
+  font-size: 13px;
+  font-weight: 400;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+  }
+`;
+const BasicErrorLabel = ({ children, id }) => {
+    return (0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: id, children: children });
+};
+exports.default = BasicErrorLabel;

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

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

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

@@ -0,0 +1,54 @@
+"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 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 })),
+}));
+const mockRegister = {
+    name: 'test-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockData = {
+    name: 'test-input',
+    placeHolder: 'Enter text...',
+    labelText: 'Test Input',
+};
+const renderComponent = (error) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { data: mockData, register: mockRegister, error: error }));
+};
+describe('Input Component', () => {
+    test('renders input element with correct attributes', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.name).toBe('test-input');
+        expect(inputElement.id).toBe('test-input');
+    });
+    test('applies error styles when there is an error', () => {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        const inputElement = react_1.screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toHaveStyle(`border-color: ${colors_1.ProgressColorMinimum}`);
+        expect(react_1.screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', () => {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        const errorLabel = react_1.screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    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/Input/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { inputType } from './type';
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
+    status: boolean;
+}, never>;
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const Input: React.FC<Props>;
+export default Input;

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

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledInput = void 0;
+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("../ErrorLabel"));
+const vars_1 = require("../../../fonts/vars");
+// Styles
+exports.StyledInput = styled_components_1.default.input `
+  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: 12px;
+
+  ::placeholder {
+    color: ${colors_2.TextGrayColor};
+    opacity: 1;
+  }
+
+  :-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  ::-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  :disabled {
+    background: ${colors_1.DisabledLightGrayColor};
+    color: ${colors_1.DisabledGrayColor};
+  }
+
+  // :focus {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+  // :hover {
+  //   transition: border-color 0.3s ease-in-out;
+  //   border: 2px solid ${(props) => (props.status ? '#F4205F' : '#C1C8DE')};
+  // }
+  ${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 Input = ({ data, register, error }) => {
+    const renderError = () => {
+        if (error.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.StyledInput, { ...register, status: error.isNeedShowError, id: data.name, name: data.name, autoComplete: 'off', placeholder: data.placeHolder }), renderError()] }));
+};
+exports.default = Input;

package/build/system/Forms/Input/type.d.ts

@@ -0,0 +1,5 @@
+export type inputType = {
+    labelText: string;
+    name: string;
+    placeHolder?: string;
+};

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

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

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

@@ -0,0 +1,67 @@
+declare const messages: {
+    galleryName: {
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        required: string;
+    };
+    galleryDescription: {
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    username: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    about: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+    };
+    userEmail: {
+        pattern: {
+            value: RegExp;
+            message: string;
+        };
+    };
+    inviteCode: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        required: string;
+    };
+    userWeb: {
+        minLength: {
+            value: number;
+            message: string;
+        };
+        maxLength: {
+            value: number;
+            message: string;
+        };
+        pattern: {
+            value: RegExp;
+            message: string;
+        };
+    };
+};
+export default messages;