@ludo.ninja/components 1.5.7 → 1.5.9

package/dist/system/Forms/DatePicker/index.jsx

@@ -0,0 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import 'react-calendar/dist/Calendar.css';
+import ReactDatePicker from 'react-date-picker';
+import 'react-date-picker/dist/DatePicker.css';
+import { Controller } from 'react-hook-form';
+import styled from 'styled-components';
+import { AccentColor, InactiveButtonColor, ProgressColorMedium, TextDarkGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import BoxShadow from '@ludo.ninja/ui/build/styles/mixins/boxShadow';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import CalendarIcon from '@/public/calendar.svg';
+import CloseIcon from '@/public/close20.svg';
+import BasicErrorLabel from '../ErrorLabel';
+// Styles
+var StyledReactDatePicker = styled(ReactDatePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, InactiveButtonColor, TextDarkGrayColor, BorderColorLight, dmsansFontVarCss.css, BoxShadow, ProgressColorMedium, ProgressColorMedium, BoxShadow, AccentColor, WhiteColor, AccentColor, WhiteColor, TextGrayColor, TextGrayColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
+var DatePicker = function (_a) {
+    var name = _a.name, control = _a.control, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<Controller name={name} control={control} render={function (_a) {
+            var field = _a.field;
+            return (<>
+          <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 ? <CloseIcon /> : null} calendarIcon={<CalendarIcon />}/>
+          {renderError()}
+        </>);
+        }}/>);
+};
+export default DatePicker;
+var templateObject_1;

package/dist/system/Forms/ErrorLabel/ErrorLabel.test.d.ts

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

package/dist/system/Forms/ErrorLabel/ErrorLabel.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import ErrorLabel from '@/system/Forms/ErrorLabel';
+describe('ErrorLabel Component', function () {
+    test('renders correctly with given children and id', function () {
+        React.act(function () {
+            render(<ErrorLabel id="test-id">Test Label</ErrorLabel>);
+        });
+        var labelElement = screen.getByText('Test Label');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveAttribute('for', 'test-id');
+    });
+    test('renders correctly without id', function () {
+        React.act(function () {
+            render(<ErrorLabel>Test Label Without ID</ErrorLabel>);
+        });
+        var labelElement = screen.getByText('Test Label Without ID');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).not.toHaveAttribute('for');
+    });
+});

package/dist/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/dist/system/Forms/ErrorLabel/index.jsx

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+var StyledLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"], ["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(13));
+var BasicErrorLabel = function (_a) {
+    var children = _a.children, id = _a.id;
+    return <StyledLabel htmlFor={id}>{children}</StyledLabel>;
+};
+export default BasicErrorLabel;
+var templateObject_1;

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

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

package/dist/system/Forms/Input/Input.test.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { ProgressColorMinimum } from '@/styles/colors';
+import Input from '@/system/Forms/Input';
+jest.mock('../ErrorLabel', function () { return ({
+    __esModule: true,
+    default: function (_a) {
+        var children = _a.children;
+        return (<div data-testid="error-label">{children}</div>);
+    },
+}); });
+var mockRegister = {
+    name: 'test-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+var mockData = {
+    name: 'test-input',
+    placeHolder: 'Enter text...',
+    labelText: 'Test Input',
+};
+var renderComponent = function (error) {
+    return render(<Input data={mockData} register={mockRegister} error={error}/>);
+};
+describe('Input Component', function () {
+    test('renders input element with correct attributes', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var inputElement = 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', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toHaveStyle("border-color: ".concat(ProgressColorMinimum));
+        expect(screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    test('renders error label when there is an error', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+});

package/dist/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/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
+    status: boolean;
+}>> & string;
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const Input: React.FC<Props>;
+export default Input;

package/dist/system/Forms/Input/index.jsx

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { DisabledGrayColor, DisabledLightGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import BasicErrorLabel from '@/system/Forms/ErrorLabel';
+import { dmsansFontVarCss } from '@/fonts/vars';
+// Styles
+export var StyledInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, DisabledLightGrayColor, DisabledGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
+var Input = function (_a) {
+    var data = _a.data, register = _a.register, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
+      <StyledInput {...register} status={error.isNeedShowError} id={data.name} name={data.name} autoComplete={'off'} placeholder={data.placeHolder}/>
+      {renderError()}
+    </>);
+};
+export default Input;
+var templateObject_1;

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

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

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

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

package/dist/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;

package/dist/system/Forms/Messages/index.js

@@ -0,0 +1,67 @@
+var messages = {
+    galleryName: {
+        maxLength: {
+            value: 30,
+            message: 'The Gallery name is too long 🤟',
+        },
+        required: 'Name is required',
+    },
+    galleryDescription: {
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
+    },
+    username: {
+        minLength: {
+            value: 1,
+            message: 'The username is too small 🤟',
+        },
+        maxLength: {
+            value: 42,
+            message: 'The username is too long 🤟',
+        },
+    },
+    about: {
+        minLength: {
+            value: 2,
+            message: 'The bio is too small 🤟',
+        },
+        maxLength: {
+            value: 400,
+            message: 'Please enter no more than 400 characters',
+        },
+    },
+    userEmail: {
+        pattern: {
+            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+            message: 'Invalid Email address',
+        },
+    },
+    inviteCode: {
+        minLength: {
+            value: 6,
+            message: 'Invite code is too small 🤟',
+        },
+        maxLength: {
+            value: 6,
+            message: 'Please enter no more than 6 characters',
+        },
+        required: 'Invite code is required',
+    },
+    userWeb: {
+        minLength: {
+            value: 2,
+            message: 'The website is too small 🤟',
+        },
+        maxLength: {
+            value: 64,
+            message: 'The website is too long 🤟',
+        },
+        pattern: {
+            value: /(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?\/[a-zA-Z0-9]{2,}|((https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z]{2,}(\.[a-zA-Z]{2,})(\.[a-zA-Z]{2,})?)|(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)?[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}\.[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})?/g,
+            message: 'Invalid Url address',
+        },
+    },
+};
+export default messages;

package/dist/system/Forms/RadioInput/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+declare const BasicRadioInput: ({ radioLabel, radioValue, radioChecked, handleChange, className, withInput, innerTextInputRef, setFocus, }: {
+    radioLabel: string;
+    radioValue: string | number;
+    radioChecked: boolean;
+    handleChange: (value: string) => void;
+    className?: string;
+    withInput?: boolean;
+    innerTextInputRef?: UseFormRegisterReturn;
+    setFocus?: (value: string) => void;
+}) => React.JSX.Element;
+export default BasicRadioInput;

package/dist/system/Forms/RadioInput/index.jsx

@@ -0,0 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { BorderColorLight } from '@ludo.ninja/ui/build/styles/colors';
+import { AccentColor, BlackColor, WhiteColor } from '@/styles/colors';
+import { StyledInput } from '@/system/Forms/Input';
+var StyledLabel = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ", ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ", ";\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ", ";\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n"], ["\n  position: relative;\n  padding: 8px 0 8px 27px;\n  cursor: pointer;\n  font-size: 1.4em;\n  color: ", ";\n  font-weight: 500;\n  user-select: none;\n\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  input[type='radio'] {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border-radius: 50%;\n    transition: background-color 200ms;\n  }\n\n  .checkmark:after {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: ", ";\n    transition: width 200ms, height 200ms;\n  }\n\n  input:checked ~ .checkmark,\n  .checked {\n    background-color: ", ";\n  }\n\n  input:checked ~ .checkmark:after,\n  .checked:after {\n    width: 8px;\n    height: 8px;\n  }\n"])), BlackColor, BorderColorLight, WhiteColor, AccentColor);
+var BasicRadioInput = function (_a) {
+    var radioLabel = _a.radioLabel, radioValue = _a.radioValue, radioChecked = _a.radioChecked, handleChange = _a.handleChange, className = _a.className, withInput = _a.withInput, innerTextInputRef = _a.innerTextInputRef, setFocus = _a.setFocus;
+    var handleChangeRadioInput = function (e) {
+        if (withInput) {
+            setTimeout(function () { return setFocus && innerTextInputRef && setFocus(innerTextInputRef.name); }, 0);
+        }
+        handleChange(e.target.value);
+    };
+    return (<StyledLabel className={className}>
+      {radioLabel}
+      <input type="radio" checked={radioChecked} value={radioValue} id={"".concat(radioValue, "_").concat(radioLabel)} onChange={function (e) { return handleChangeRadioInput(e); }}/>
+      {withInput && (<StyledInput status={false} {...innerTextInputRef} disabled={!radioChecked}/>)}
+      <span className={"checkmark"}></span>
+    </StyledLabel>);
+};
+export default BasicRadioInput;
+var templateObject_1;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+import { ISelectInput } from '@/system/Forms/Selects/MobileSelect';
+interface Props {
+    options: ISelectInput[];
+    defaultOptionValue: string;
+    isLoading?: boolean;
+    onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => Promise<void>;
+    name: string;
+}
+declare const DesktopSelect: React.FC<Props>;
+export default DesktopSelect;

package/dist/system/Forms/Selects/DesktopSelect/index.jsx

@@ -0,0 +1,115 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import Select, { components, } from 'react-select';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor, WhiteColor } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import ArrowDownIcon from '@/public/selects/arrow_down.svg';
+var SelectElement = styled(Select)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"], ["\n  font-family: ", ";\n\n  .react-select__value-container {\n    padding: 0 0 0 20px;\n  }\n\n  .react-select__control {\n    border: none;\n    background-color: white;\n    border-radius: 6px;\n    box-shadow: none;\n    min-height: ", ";\n    cursor: pointer;\n\n    &:hover,\n    &:focus,\n    &:active {\n      box-shadow: none;\n      border-color: transparent;\n    }\n  }\n\n  .react-select__indicator {\n    padding: 0;\n  }\n\n  .react-select__indicators {\n    padding-right: 12px;\n  }\n\n  .react-select__menu {\n    ", ";\n    color: ", ";\n    margin: 4px 0;\n    background: ", ";\n    box-shadow: 0 8px 16px -16px rgba(33, 21, 95, 0.1);\n    border-radius: 6px;\n    z-index: 9999;\n  }\n\n  .react-select__single-value {\n    ", ";\n    margin: 0;\n    color: ", ";\n  }\n\n  .react-select__menu-list {\n    padding: 8px 0;\n  }\n\n  .react-select__option {\n    padding: 8.5px 20px;\n    font-weight: 400;\n  }\n\n  .react-select__option--is-selected {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n  }\n\n  .react-select__option--is-focused {\n    background-color: transparent;\n    color: ", ";\n    font-weight: 500;\n    transition: font-weight 0.3s ease-in-out;\n    cursor: pointer;\n  }\n\n  ", " {\n    .react-select__value-container {\n      padding: 0 0 0 ", ";\n    }\n\n    .react-select__control {\n      border-radius: ", ";\n      min-height: ", ";\n    }\n\n    .react-select__indicator {\n      transform: ", ";\n    }\n\n    .react-select__indicators {\n      padding-right: ", ";\n    }\n\n    .react-select__menu {\n      margin: ", " 0;\n      box-shadow: 0 ", " ", "\n        ", " rgba(33, 21, 95, 0.1);\n      border-radius: ", ";\n    }\n\n    .react-select__menu-list {\n      padding: ", " 0;\n      max-height: ", ";\n    }\n\n    .react-select__option {\n      padding: ", " ", ";\n    }\n  }\n"])), dmsansFontVarCss.css, function (props) { return "".concat(props.minHeight, "px"); }, MainText, TextGrayColor, WhiteColor, MainText, BlackColor, BlackColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(20), adaptiveValueCalc(6), function (props) { return adaptiveValueCalc(props.minHeight); }, function (props) {
+    return 'transform' in props.scale && props.scale.transform;
+}, adaptiveValueCalc(12), adaptiveValueCalc(4), adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(-16), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(300), adaptiveValueCalc(8.5), adaptiveValueCalc(20));
+var minHeight = 40;
+var DropdownIndicator = function (props) {
+    return (<components.DropdownIndicator {...props}>
+      <ArrowDownIcon style={{
+            transition: 'transform 200ms',
+            transform: props.selectProps.menuIsOpen
+                ? 'rotate(180deg)'
+                : 'rotate(0)',
+        }}/>
+    </components.DropdownIndicator>);
+};
+var DesktopSelect = function (_a) {
+    var options = _a.options, isLoading = _a.isLoading, onChangeHandler = _a.onChangeHandler, defaultOptionValue = _a.defaultOptionValue, name = _a.name, props = __rest(_a, ["options", "isLoading", "onChangeHandler", "defaultOptionValue", "name"]);
+    var _b = useState(options.find(function (option) {
+        return defaultOptionValue === option.id;
+    }) || options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
+    useEffect(function () {
+        var findOption = options.find(function (option) {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    var handleChangeOption = function (option) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, onChangeHandler(name, option.id)];
+                case 1:
+                    _a.sent();
+                    setSelectedOption(option);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var getOptionLabel = function (option) {
+        return option.label;
+    };
+    var getOptionValue = function (option) {
+        return option.id;
+    };
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    if (isLoading)
+        return <Skeleton height={"".concat(minHeight, "px")} width="154px"/>;
+    return (<SelectElement id={String(Math.random())} minHeight={minHeight} scale={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })} classNamePrefix="react-select" name={name} getOptionLabel={function (option) { return getOptionLabel(option); }} getOptionValue={function (option) { return getOptionValue(option); }} options={options} value={selectedOption} defaultValue={selectedOption} onChange={function (option) { return handleChangeOption(option); }} isSearchable={false} components={{
+            DropdownIndicator: DropdownIndicator,
+            IndicatorSeparator: function () { return null; },
+        }} {...props}/>);
+};
+export default DesktopSelect;
+var templateObject_1;

package/dist/system/Forms/Selects/DesktopSelect/type.d.ts

@@ -0,0 +1,5 @@
+export type optionType = {
+    id: number;
+    value: string;
+    label: string;
+};

package/dist/system/Forms/Selects/DesktopSelect/type.js

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

package/dist/system/Forms/Selects/MobileSelect/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ICollectionFilterInput, ICreationFilterInput } from '@ludo.ninja/api/build/graphql_tools/__generated__/searchHost/schema';
+export interface ISelectInput {
+    id: string;
+    label: string;
+}
+interface Props {
+    options: ISelectInput[];
+    defaultOptionValue: string;
+    onChangeHandler: (fieldName: keyof ICreationFilterInput & keyof ICollectionFilterInput, fieldValue: string) => void;
+    name: string;
+}
+declare const MobileSelect: React.FC<Props>;
+export default MobileSelect;

package/dist/system/Forms/Selects/MobileSelect/index.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import DropDown from '@/system/DropDown';
+import BasicRadioInput from '@/system/Forms/RadioInput';
+// Component
+var MobileSelect = function (_a) {
+    var options = _a.options, onChangeHandler = _a.onChangeHandler, name = _a.name, defaultOptionValue = _a.defaultOptionValue;
+    var _b = useState(options[0]), selectedOption = _b[0], setSelectedOption = _b[1];
+    var router = useRouter();
+    useEffect(function () {
+        var findOption = options.find(function (option) {
+            return defaultOptionValue === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+    }, [defaultOptionValue]);
+    var handleChangeOption = function (value) {
+        var _a;
+        var findOption = options.find(function (option) {
+            return value === option.id;
+        });
+        setSelectedOption(findOption || options[0]);
+        onChangeHandler(name, (findOption === null || findOption === void 0 ? void 0 : findOption.id) || ((_a = options[0]) === null || _a === void 0 ? void 0 : _a.id));
+    };
+    return (<DropDown caption={name} fallBackOnClose={function () { return null; }} active={Boolean(router.query[name])}>
+      {options.map(function (select) { return (<BasicRadioInput key={"".concat(select.id, "_").concat(select.label)} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeOption} radioChecked={selectedOption.id === select.id}/>); })}
+    </DropDown>);
+};
+// Export
+export default MobileSelect;

package/dist/system/Forms/TextArea/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { inputType } from '../Input/type';
+interface Props {
+    data: inputType;
+    register: UseFormRegisterReturn;
+    isNeedBiggerArea: boolean;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+}
+declare const BasicTextArea: React.FC<Props>;
+export default BasicTextArea;

package/dist/system/Forms/TextArea/index.jsx

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { MainText } from '@/styles/typography';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import BasicErrorLabel from '../ErrorLabel';
+// Styles
+var StyledTextArea = styled.textarea(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  min-height: 92px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  resize: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n\n  ", " {\n    min-height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(92), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
+// const maxCountLength = 400;
+var BasicTextArea = function (_a) {
+    var data = _a.data, register = _a.register, isNeedBiggerArea = _a.isNeedBiggerArea, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
+      <StyledTextArea {...register} rows={isNeedBiggerArea ? 8 : 4} status={error.isNeedShowError} id={data.name} name={data.name} autoComplete={'off'} placeholder={data.placeHolder}/>
+      {renderError()}
+    </>);
+};
+export default BasicTextArea;
+var templateObject_1;