@ludo.ninja/components 1.1.6 → 1.1.8

package/dist/components/filters/index.jsx

@@ -1,92 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { useUiStore } from '@/store/ui';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from '@/styles/colors';
-import ApplyResetButtons from '@/components/filters/applyResetBtns';
-import MobileFilters from '@/components/filters/mobileFilters';
-import SidebarFilters from '@/components/sidebar/sidebarFilters';
-import DesktopSelect from '@/system/Forms/Selects/DesktopSelect';
-import MobileSelect from '@/system/Forms/Selects/MobileSelect';
-// Styles
-var StyledFilters = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), BlackColor, InactiveButtonColor, AccentColor, BorderColorLight, AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(154), adaptiveValueCalc(163), adaptiveValueCalc(156), adaptiveValueCalc(125), adaptiveValueCalc(135), adaptiveValueCalc(24));
-// Component
-var Filters = function (_a) {
-    var filterInputHandler = _a.filterInputHandler, handleResetFilter = _a.handleResetFilter, selectData = _a.selectData, filterInput = _a.filterInput, handleMobileFilterInput = _a.handleMobileFilterInput, isMobile = _a.isMobile;
-    var _b = useState(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
-    var selectedFiltersCount = useState(0)[0];
-    var _c = useUiStore(function (state) { return ({
-        openOverLay: state.openOverLay,
-        closeOverlay: state.closeOverlay,
-    }); }), openOverLay = _c.openOverLay, closeOverlay = _c.closeOverlay;
-    var _d = useState(filterInput), mobileFilterInput = _d[0], setMobileFilterInput = _d[1];
-    useEffect(function () {
-        if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
-            setMobileFilterInput(filterInput);
-        }
-    }, [filterInput]);
-    var handleMobileFilters = function (fieldName, fieldValue) {
-        setMobileFilterInput(function (prevFilters) {
-            var _a;
-            return (__assign(__assign({}, prevFilters), (_a = {}, _a[fieldName] = fieldValue, _a)));
-        });
-    };
-    var closeFiltersMobile = function () {
-        closeOverlay();
-        setSidebarOpen(false);
-    };
-    return (<StyledFilters>
-      {!isMobile &&
-            selectData.map(function (select) { return (<div key={select.id} className={"select ".concat(select.data.selectName)}>
-            <DesktopSelect defaultOptionValue={filterInput[select.data.selectName]} options={select.data.selectOptions} isLoading={false} onChangeHandler={filterInputHandler} name={select.data.selectName}/>
-          </div>); })}
-      {isMobile && (<>
-          <div className={'filterButton'}>
-            <button onClick={function (e) {
-                e.stopPropagation();
-                e.preventDefault();
-                openOverLay();
-                setSidebarOpen(true);
-            }}>
-              Filters
-              {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
-            </button>
-          </div>
-          <SidebarFilters isOpen={isSideBarOpen} handleClose={function () {
-                setMobileFilterInput(filterInput);
-                closeFiltersMobile();
-            }}>
-            <MobileFilters>
-              {selectData.map(function (select) { return (<MobileSelect key={select.id} defaultOptionValue={mobileFilterInput[select.data
-                    .selectName]} options={select.data.selectOptions} name={select.data.selectName} onChangeHandler={handleMobileFilters}/>); })}
-            </MobileFilters>
-            <ApplyResetButtons onReset={function () {
-                handleResetFilter();
-                closeFiltersMobile();
-            }} onApply={function () {
-                handleMobileFilterInput(mobileFilterInput);
-                closeFiltersMobile();
-            }}/>
-          </SidebarFilters>
-        </>)}
-    </StyledFilters>);
-};
-// Export
-export default Filters;
-var templateObject_1;

package/dist/components/filters/mobileFilters/index.js

@@ -1,16 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import styled from 'styled-components';
-// Styles
-var StyledMobileFilters = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"], ["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"])));
-// Component
-var MobileFilters = function (_a) {
-    var children = _a.children;
-    return _jsx(StyledMobileFilters, { children: children });
-};
-// Export
-export default MobileFilters;
-var templateObject_1;

package/dist/components/filters/mobileFilters/index.jsx

@@ -1,16 +0,0 @@
-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';
-// Styles
-var StyledMobileFilters = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"], ["\n  position: relative;\n  flex: 1;\n  overflow-y: auto;\n  padding: 0 32px;\n\n  & > div:last-child {\n    margin-bottom: 30px;\n    border-bottom: unset;\n  }\n"])));
-// Component
-var MobileFilters = function (_a) {
-    var children = _a.children;
-    return <StyledMobileFilters>{children}</StyledMobileFilters>;
-};
-// Export
-export default MobileFilters;
-var templateObject_1;

package/dist/components/filters/setsFiltersForm/index.js

@@ -1,52 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import DropDown from '@/system/DropDown';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-// Styles
-var StyledSetsFiltersForm = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-// Component
-var SetsFiltersForm = function (_a) {
-    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
-    var _b = useState(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
-    var _c = useState(null), selectedBlockchainCategoryResult = _c[0], setSelectedBlockchainCategoryResult = _c[1];
-    var _d = useState(null), selectedBlockchainTimeResult = _d[0], setSelectedBlockchainTimeResult = _d[1];
-    useEffect(function () {
-        if (selectedSearchResult ||
-            selectedBlockchainCategoryResult ||
-            selectedBlockchainTimeResult) {
-            handleNeedShowButtons(true);
-        }
-        else {
-            handleNeedShowButtons(false);
-        }
-        var arr = [
-            selectedSearchResult,
-            selectedBlockchainCategoryResult,
-            selectedBlockchainTimeResult,
-        ];
-        var count = arr.filter(function (value) { return value; }).length;
-        handleFiltersCount(count);
-    }, [
-        selectedSearchResult,
-        selectedBlockchainCategoryResult,
-        selectedBlockchainTimeResult,
-    ]);
-    var handleChangeSearchResult = function (value) {
-        setSelectedSearchResult(value);
-    };
-    var handleChangeBlockchainCategoryResult = function (value) {
-        setSelectedBlockchainCategoryResult(value);
-    };
-    var handleChangeBlockchainTimeResult = function (value) {
-        setSelectedBlockchainTimeResult(value);
-    };
-    return (_jsxs(StyledSetsFiltersForm, { children: [_jsx(DropDown, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) }), _jsx(DropDown, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) }), _jsx(DropDown, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map(function (select) { return (_jsx(BasicRadioInput, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id }, select.id)); }) })] }));
-};
-// Export
-export default SetsFiltersForm;
-var templateObject_1;

package/dist/components/filters/setsFiltersForm/index.jsx

@@ -1,61 +0,0 @@
-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, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import DropDown from '@/system/DropDown';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-// Styles
-var StyledSetsFiltersForm = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-// Component
-var SetsFiltersForm = function (_a) {
-    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult, handleNeedShowButtons = _a.handleNeedShowButtons, handleFiltersCount = _a.handleFiltersCount;
-    var _b = useState(null), selectedSearchResult = _b[0], setSelectedSearchResult = _b[1];
-    var _c = useState(null), selectedBlockchainCategoryResult = _c[0], setSelectedBlockchainCategoryResult = _c[1];
-    var _d = useState(null), selectedBlockchainTimeResult = _d[0], setSelectedBlockchainTimeResult = _d[1];
-    useEffect(function () {
-        if (selectedSearchResult ||
-            selectedBlockchainCategoryResult ||
-            selectedBlockchainTimeResult) {
-            handleNeedShowButtons(true);
-        }
-        else {
-            handleNeedShowButtons(false);
-        }
-        var arr = [
-            selectedSearchResult,
-            selectedBlockchainCategoryResult,
-            selectedBlockchainTimeResult,
-        ];
-        var count = arr.filter(function (value) { return value; }).length;
-        handleFiltersCount(count);
-    }, [
-        selectedSearchResult,
-        selectedBlockchainCategoryResult,
-        selectedBlockchainTimeResult,
-    ]);
-    var handleChangeSearchResult = function (value) {
-        setSelectedSearchResult(value);
-    };
-    var handleChangeBlockchainCategoryResult = function (value) {
-        setSelectedBlockchainCategoryResult(value);
-    };
-    var handleChangeBlockchainTimeResult = function (value) {
-        setSelectedBlockchainTimeResult(value);
-    };
-    return (<StyledSetsFiltersForm>
-      <DropDown caption={'Type'} fallBackOnClose={handleChangeSearchResult}>
-        {selectTypeSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeSearchResult} radioChecked={selectedSearchResult === select.id}/>); })}
-      </DropDown>
-      <DropDown caption={'Category'} fallBackOnClose={handleChangeBlockchainCategoryResult}>
-        {selectBlockchainCategoryResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainCategoryResult} radioChecked={selectedSearchResult === select.id}/>); })}
-      </DropDown>
-      <DropDown caption={'Time'} fallBackOnClose={handleChangeBlockchainTimeResult}>
-        {selectBlockchainTimeResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainTimeResult} radioChecked={selectedSearchResult === select.id}/>); })}
-      </DropDown>
-    </StyledSetsFiltersForm>);
-};
-// Export
-export default SetsFiltersForm;
-var templateObject_1;

package/dist/components/forms/form/index.js

@@ -1,98 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { Spinner } from 'react-bootstrap';
-import { Controller, useForm } from 'react-hook-form';
-import styled from 'styled-components';
-import { TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
-import { MainText } from '@ludo.ninja/ui/build/system/Text';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import MainButton from '@/system/Buttons/MainButton';
-import { BasicTextArea, CheckboxInput, Input } from '@/system/Forms';
-import DatePicker from '@/system/Forms/DatePicker';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-import { Flex, H1, H5 } from '@system';
-var Title = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
-var Description = styled(MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), TextGrayColor);
-var Wrapper = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), mediaQuery.tablet);
-var FormWrapper = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet);
-var InputTitle = styled(H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var RadioInput = styled(BasicRadioInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), TextGrayColor);
-var StyledInputGroup = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));
-var Form = function (_a) {
-    var props = __rest(_a, []);
-    var inputs = props.inputs, onSubmit = props.onSubmit, submitLoading = props.submitLoading, formDescription = props.formDescription, formTitle = props.formTitle, initialValues = props.initialValues;
-    var _b = useForm({
-        mode: 'all',
-        defaultValues: initialValues,
-    }), register = _b.register, _c = _b.formState, errors = _c.errors, isDirty = _c.isDirty, isValid = _c.isValid, handleSubmit = _b.handleSubmit, reset = _b.reset, control = _b.control, setFocus = _b.setFocus, formState = _b.formState;
-    useEffect(function () {
-        reset();
-    }, [inputs, reset]);
-    useEffect(function () {
-        if (formState.isSubmitSuccessful) {
-            reset();
-        }
-    }, [formState, reset]);
-    var getInput = function (inputProps) {
-        var _a, _b;
-        var dataProp = {
-            labelText: inputProps.label || '',
-            name: inputProps.name,
-            placeHolder: inputProps.placeholder || '',
-        };
-        var inputErrors = errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
-        var errorProp = {
-            isNeedShowError: Boolean(inputErrors),
-            message: inputErrors ? inputErrors.message : '',
-        };
-        var registerProp = register(inputProps.name, inputProps.validations);
-        switch (inputProps.type) {
-            case 'textArea':
-                return (_jsx(BasicTextArea, { register: registerProp, error: errorProp, data: dataProp, isNeedBiggerArea: false }));
-            case 'checkbox':
-                return (_jsx(_Fragment, { children: (_a = inputProps.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
-                        var isCheckboxWithInput = option.value === 'other';
-                        var registerTextInput = isCheckboxWithInput
-                            ? register("".concat(inputProps.name, "-other-checkbox"))
-                            : undefined;
-                        return (_jsx(CheckboxInput, { register: registerProp, error: errorProp, data: dataProp, label: option.desc, value: option.value, withInput: isCheckboxWithInput, innerTextInputRef: registerTextInput }, option.value));
-                    }) }));
-            case 'radio':
-                return (_jsx(_Fragment, { children: (_b = inputProps.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
-                        var isRadioWithInput = option.value === 'other';
-                        var registerTextInput = isRadioWithInput
-                            ? register("".concat(inputProps.name, "-other-radio"))
-                            : undefined;
-                        return (_jsx(Controller, { name: inputProps.name, control: control, render: function (_a) {
-                                var field = _a.field;
-                                return (_jsx(RadioInput, { radioLabel: option.desc, radioValue: option.value, handleChange: field.onChange, radioChecked: field.value === option.value, withInput: isRadioWithInput, innerTextInputRef: registerTextInput, setFocus: setFocus }, option.value));
-                            } }, option.desc));
-                    }) }));
-            case 'date':
-                return (_jsx(DatePicker, { register: registerProp, error: errorProp, control: control, name: inputProps.name }));
-            default:
-                return (_jsx(Input, { register: registerProp, error: errorProp, data: dataProp }));
-        }
-    };
-    return (_jsx(Wrapper, { children: _jsxs(FormWrapper, { onSubmit: handleSubmit(onSubmit), children: [_jsx(Title, { children: formTitle }), _jsx(Description, { children: formDescription }), inputs.map(function (input) {
-                    var _a;
-                    return (_jsxs(StyledInputGroup, { children: [_jsxs(InputTitle, { children: [((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : '', input.label] }), getInput(input)] }, input.name));
-                }), _jsxs(Flex, { justifyContent: "space-between", style: { marginTop: 44 }, children: [_jsx(MainButton, { onClick: function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }, disabled: !isDirty || !isValid, variant: "primaryM", text: submitLoading ? _jsx(Spinner, { variant: "light" }) : 'Submit', type: 'submit' }), _jsx(MainButton, { onClick: function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }, disabled: !isDirty, variant: "secondary", text: submitLoading ? _jsx(Spinner, { variant: "light" }) : 'Clear Form', type: 'reset' })] })] }) }));
-};
-export default Form;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/forms/form/index.jsx

@@ -1,118 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 } from 'react';
-import { Spinner } from 'react-bootstrap';
-import { Controller, useForm } from 'react-hook-form';
-import styled from 'styled-components';
-import { TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
-import { MainText } from '@ludo.ninja/ui/build/system/Text';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import MainButton from '@/system/Buttons/MainButton';
-import { BasicTextArea, CheckboxInput, Input } from '@/system/Forms';
-import DatePicker from '@/system/Forms/DatePicker';
-import BasicRadioInput from '@/system/Forms/RadioInput';
-import { Flex, H1, H5 } from '@system';
-var Title = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
-var Description = styled(MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), TextGrayColor);
-var Wrapper = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), mediaQuery.tablet);
-var FormWrapper = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet);
-var InputTitle = styled(H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
-var RadioInput = styled(BasicRadioInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), TextGrayColor);
-var StyledInputGroup = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));
-var Form = function (_a) {
-    var props = __rest(_a, []);
-    var inputs = props.inputs, onSubmit = props.onSubmit, submitLoading = props.submitLoading, formDescription = props.formDescription, formTitle = props.formTitle, initialValues = props.initialValues;
-    var _b = useForm({
-        mode: 'all',
-        defaultValues: initialValues,
-    }), register = _b.register, _c = _b.formState, errors = _c.errors, isDirty = _c.isDirty, isValid = _c.isValid, handleSubmit = _b.handleSubmit, reset = _b.reset, control = _b.control, setFocus = _b.setFocus, formState = _b.formState;
-    useEffect(function () {
-        reset();
-    }, [inputs, reset]);
-    useEffect(function () {
-        if (formState.isSubmitSuccessful) {
-            reset();
-        }
-    }, [formState, reset]);
-    var getInput = function (inputProps) {
-        var _a, _b;
-        var dataProp = {
-            labelText: inputProps.label || '',
-            name: inputProps.name,
-            placeHolder: inputProps.placeholder || '',
-        };
-        var inputErrors = errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
-        var errorProp = {
-            isNeedShowError: Boolean(inputErrors),
-            message: inputErrors ? inputErrors.message : '',
-        };
-        var registerProp = register(inputProps.name, inputProps.validations);
-        switch (inputProps.type) {
-            case 'textArea':
-                return (<BasicTextArea register={registerProp} error={errorProp} data={dataProp} isNeedBiggerArea={false}/>);
-            case 'checkbox':
-                return (<>
-            {(_a = inputProps.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
-                        var isCheckboxWithInput = option.value === 'other';
-                        var registerTextInput = isCheckboxWithInput
-                            ? register("".concat(inputProps.name, "-other-checkbox"))
-                            : undefined;
-                        return (<CheckboxInput key={option.value} register={registerProp} error={errorProp} data={dataProp} label={option.desc} value={option.value} withInput={isCheckboxWithInput} innerTextInputRef={registerTextInput}/>);
-                    })}
-          </>);
-            case 'radio':
-                return (<>
-            {(_b = inputProps.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
-                        var isRadioWithInput = option.value === 'other';
-                        var registerTextInput = isRadioWithInput
-                            ? register("".concat(inputProps.name, "-other-radio"))
-                            : undefined;
-                        return (<Controller key={option.desc} name={inputProps.name} control={control} render={function (_a) {
-                                var field = _a.field;
-                                return (<RadioInput key={option.value} radioLabel={option.desc} radioValue={option.value} handleChange={field.onChange} radioChecked={field.value === option.value} withInput={isRadioWithInput} innerTextInputRef={registerTextInput} setFocus={setFocus}/>);
-                            }}/>);
-                    })}
-          </>);
-            case 'date':
-                return (<DatePicker register={registerProp} error={errorProp} control={control} name={inputProps.name}/>);
-            default:
-                return (<Input register={registerProp} error={errorProp} data={dataProp}/>);
-        }
-    };
-    return (<Wrapper>
-      <FormWrapper onSubmit={handleSubmit(onSubmit)}>
-        <Title>{formTitle}</Title>
-        <Description>{formDescription}</Description>
-        {inputs.map(function (input) {
-            var _a;
-            return (<StyledInputGroup key={input.name}>
-            <InputTitle>
-              {((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : ''}
-              {input.label}
-            </InputTitle>
-            {getInput(input)}
-          </StyledInputGroup>);
-        })}
-
-        <Flex justifyContent="space-between" style={{ marginTop: 44 }}>
-          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty || !isValid} variant="primaryM" text={submitLoading ? <Spinner variant="light"/> : 'Submit'} type={'submit'}/>
-          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty} variant="secondary" text={submitLoading ? <Spinner variant="light"/> : 'Clear Form'} type={'reset'}/>
-        </Flex>
-      </FormWrapper>
-    </Wrapper>);
-};
-export default Form;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/forms/formsNavigation/index.js

@@ -1,42 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
-import { FormsNavigationTabs } from '@/components/forms/types';
-import { Flex } from '@system';
-import BackIcon from '@/public/settings_page/back.svg';
-import MenuIcon from '@/public/settings_page/burger_menu.svg';
-var NAVIGATION_TABS = [
-    { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
-    { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
-    {
-        slug: FormsNavigationTabs.registrationRequest,
-        label: 'Registration Invite Request',
-    },
-    { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
-    { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
-    { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
-    {
-        slug: FormsNavigationTabs.investor,
-        label: 'Investor Relations Inquiry Form',
-    },
-];
-var StyledFlex = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), mediaQuery.tablet);
-var Wrapper = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), mediaQuery.tablet, BackgroundColorLight);
-var List = styled.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), mediaQuery.tablet, TextGrayColor, InactiveButtonColor, mediaQuery.tablet, InactiveButtonColor, BlackColor, mediaQuery.tablet);
-var FormsNavigation = function () {
-    var _a;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var router = useRouter();
-    var activeTab = (_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.formId;
-    return (_jsxs(_Fragment, { children: [_jsx(StyledFlex, { isOpen: isOpen, children: isOpen ? (_jsx(BackIcon, { onClick: function () { return setIsOpen(false); } })) : (_jsx(MenuIcon, { onClick: function () { return setIsOpen(true); } })) }), _jsx(Wrapper, { className: "mobile_menu ".concat(isOpen ? 'show' : 'hide'), children: _jsx(List, { children: NAVIGATION_TABS.map(function (tab) { return (_jsx("li", { onClick: function () { return setIsOpen(false); }, className: "".concat(activeTab === tab.slug ? 'activeTab' : '', " "), children: _jsx(Link, { href: "/forms/".concat(tab.slug), className: 'link', children: _jsx("span", { children: tab.label }) }) }, tab.slug)); }) }) })] }));
-};
-export default FormsNavigation;
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/forms/formsNavigation/index.jsx

@@ -1,54 +0,0 @@
-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, { useState } from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import styled from 'styled-components';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BackgroundColorLight, BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
-import { FormsNavigationTabs } from '@/components/forms/types';
-import { Flex } from '@system';
-import BackIcon from '@/public/settings_page/back.svg';
-import MenuIcon from '@/public/settings_page/burger_menu.svg';
-var NAVIGATION_TABS = [
-    { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
-    { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
-    {
-        slug: FormsNavigationTabs.registrationRequest,
-        label: 'Registration Invite Request',
-    },
-    { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
-    { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
-    { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
-    {
-        slug: FormsNavigationTabs.investor,
-        label: 'Investor Relations Inquiry Form',
-    },
-];
-var StyledFlex = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), mediaQuery.tablet);
-var Wrapper = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), mediaQuery.tablet, BackgroundColorLight);
-var List = styled.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), mediaQuery.tablet, TextGrayColor, InactiveButtonColor, mediaQuery.tablet, InactiveButtonColor, BlackColor, mediaQuery.tablet);
-var FormsNavigation = function () {
-    var _a;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    var router = useRouter();
-    var activeTab = (_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.formId;
-    return (<>
-      <StyledFlex isOpen={isOpen}>
-        {isOpen ? (<BackIcon onClick={function () { return setIsOpen(false); }}/>) : (<MenuIcon onClick={function () { return setIsOpen(true); }}/>)}
-      </StyledFlex>
-      <Wrapper className={"mobile_menu ".concat(isOpen ? 'show' : 'hide')}>
-        <List>
-          {NAVIGATION_TABS.map(function (tab) { return (<li onClick={function () { return setIsOpen(false); }} key={tab.slug} className={"".concat(activeTab === tab.slug ? 'activeTab' : '', " ")}>
-              <Link href={"/forms/".concat(tab.slug)} className={'link'}>
-                <span>{tab.label}</span>
-              </Link>
-            </li>); })}
-        </List>
-      </Wrapper>
-    </>);
-};
-export default FormsNavigation;
-var templateObject_1, templateObject_2, templateObject_3;