@ludo.ninja/components 1.7.5 → 1.7.6

package/dist/components/editProfile/UserPicProfile/index.jsx

@@ -1,254 +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 __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 };
-    }
-};
-import React, { useEffect, useState } from 'react';
-import Dropzone from 'react-dropzone';
-import styled from 'styled-components';
-import { useUserStore } from '@/modules/user/store';
-import { useUiStore } from '@/store/ui';
-import useDeleteUserpic from '@/api/server-medias/mutations/useDeleteUserpic';
-import useUploadUserpic from '@/api/server-medias/mutations/useUploadUserpic';
-import { rotate } from '@/styles/animations';
-import { AccentColor, BorderColorLight, ErrorColor, TextGrayColor, } from '@/styles/colors';
-import NoSsr from '@/components/base/NoSSR';
-import MainButton from '@/system/Buttons/MainButton';
-import { H5 } from '@system';
-import BasicCropper from '../Cropper';
-var StyledUserpic = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"], ["\n  padding-bottom: 1rem;\n\n  .userpic {\n    width: 100%;\n    cursor: pointer;\n    height: 100%;\n    filter: ", ";\n    text-indent: -20000px;\n    border-radius: 50%;\n\n    &_text {\n      color: #c1c8de;\n      font-size: 1.4em;\n      text-align: center;\n    }\n  }\n\n  .noImage {\n    cursor: pointer;\n    display: flex;\n    flex-direction: column;\n    width: 150px;\n    height: 150px;\n    background: #ffffff;\n    border: 1px solid ", ";\n    border-radius: 50%;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n  }\n\n  .loading {\n    position: absolute;\n    left: 35%;\n    top: 33%;\n    display: ", ";\n    width: 50px;\n    height: 50px;\n    border: 6px solid ", ";\n    border-radius: 50%;\n    border-top-color: transparent;\n    animation: ", " 1s ease-in-out infinite;\n  }\n\n  .acceptDecline_buttons {\n    display: flex;\n    gap: 40px;\n    max-width: 250px;\n    margin: 0 auto;\n    justify-content: space-around;\n\n    button {\n      width: 48px;\n      height: 48px;\n      border-radius: 50%;\n      outline: none;\n      border: none;\n      cursor: pointer;\n\n      :active {\n        outline: 1px blue solid;\n      }\n    }\n\n    .accept_btn {\n      background-image: url('/button_skin/accept.svg');\n      background-size: cover;\n    }\n\n    .decline_btn {\n      background-image: url('/button_skin/decline.svg');\n      background-size: cover;\n    }\n  }\n\n  .delete_button {\n    display: flex;\n    justify-content: center;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n    align-items: center;\n  }\n\n  .content-wrapper {\n    position: relative;\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n  }\n"])), function (props) { return (props.isLoading ? 'blur(4px)' : 'none'); }, BorderColorLight, function (props) { return (props.isLoading ? 'inline-block' : 'none'); }, AccentColor, rotate);
-var SWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  align-items: center;\n"])));
-var cropperStyles = {
-    height: 430,
-    width: '100%',
-    maxWidth: 721,
-    margin: '40px 0 20px 0',
-};
-var errorTypes = {
-    imageIsUpOfSize: {
-        isError: true,
-        size: 1024 * 10,
-        currentMessage: '',
-        message: 'Image size size over 10 MB',
-    },
-    imageIsUpOfDimensions: {
-        isError: true,
-        size: 20,
-        currentMessage: '',
-        message: '(Max 1200 px x 1200 px)',
-    },
-};
-var UserPicProfile = function (_a) {
-    var defaultImage = _a.defaultImage;
-    var _b = useState(null), imgFile = _b[0], setImgFile = _b[1];
-    var _c = useState(null), userpic = _c[0], setUserPic = _c[1];
-    var _d = useState(false), isDefaultImage = _d[0], setDefaultImage = _d[1];
-    var _e = useState(false), isImageLoading = _e[0], setImageLoading = _e[1];
-    var _f = useState(null), error = _f[0], setIsError = _f[1];
-    var _g = useUiStore(function (state) { return ({
-        openModal: state.openModal,
-        closeModal: state.closeModal,
-    }); }), openModal = _g.openModal, closeModal = _g.closeModal;
-    var uploadUserpic = useUploadUserpic().uploadUserpic;
-    var updateProfileData = useUserStore(function (state) { return ({
-        updateProfileData: state.updateProfileData,
-    }); }).updateProfileData;
-    useEffect(function () {
-        if (defaultImage && !defaultImage.includes('default_')) {
-            setUserPic(defaultImage);
-            setDefaultImage(true);
-        }
-    }, [defaultImage]);
-    var deleteUserpic = useDeleteUserpic().deleteUserpic;
-    var renderAcceptDeclineButtons = function () {
-        if (imgFile) {
-            return (<div className={'acceptDecline_buttons'}>
-          {renderAcceptButton()}
-          <button className={'decline_btn'} onClick={clearFiles}/>
-        </div>);
-        }
-    };
-    var renderDeleteBtn = function () {
-        if (isDefaultImage && userpic) {
-            return (<div className={'delete_button'}>
-          <MainButton onClick={deleteRequest} variant="secondary" text={'Delete'}/>
-        </div>);
-        }
-    };
-    var renderAcceptButton = function () {
-        if (!error) {
-            return <button className={'accept_btn'} onClick={uploadRequest}/>;
-        }
-    };
-    var hideWithReset = function () {
-        clearFiles();
-        closeModal();
-    };
-    var clearFiles = function () {
-        setImgFile(null);
-        setUserPic(null);
-        setIsError(null);
-        setDefaultImage(false);
-    };
-    var deleteRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, deleteUserpic().then(function (res) {
-                            var data = res.data;
-                            if (data === null || data === void 0 ? void 0 : data.deleteUserpic) {
-                                setImageLoading(false);
-                                setDefaultImage(false);
-                                clearFiles();
-                            }
-                            else {
-                                setImageLoading(true);
-                            }
-                        })];
-                case 1:
-                    _a.sent();
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var uploadRequest = function () { return __awaiter(void 0, void 0, void 0, function () {
-        var result;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    setImageLoading(true);
-                    return [4 /*yield*/, uploadUserpic(imgFile)
-                            .catch(function (reason) {
-                            // console.log('reason', reason);
-                            setIsError({
-                                size: 20,
-                                currentMessage: reason.message,
-                            });
-                        })
-                            .finally(function () {
-                            setImgFile(null);
-                            setImageLoading(false);
-                            setDefaultImage(true);
-                        })];
-                case 1:
-                    result = _a.sent();
-                    if (result === null || result === void 0 ? void 0 : result.data.uploadUserpic) {
-                        updateProfileData({
-                            userpic: result.data.uploadUserpic,
-                        });
-                    }
-                    return [2 /*return*/];
-            }
-        });
-    }); };
-    var reader = new FileReader();
-    var onDropHandler = function (files) {
-        files.map(function (file) {
-            reader.readAsDataURL(file);
-        });
-    };
-    var imageContent = function () {
-        if (userpic) {
-            return (<>
-          <img src={userpic} className="userpic" alt={'userpic'} onError={function () { return setUserPic(null); }}/>
-          <div className={'loading'}/>
-        </>);
-        }
-        return (<div className="noImage">
-        <img style={{ width: '25px', height: '25px', marginBottom: '15px' }} src={'/settings_page/upload.svg'}/>
-        <span style={{ color: TextGrayColor, fontSize: '13px', fontWeight: 400 }}>
-          Upload profile <br /> picture
-        </span>
-      </div>);
-    };
-    var renderUserPicText = function () {
-        if (!error) {
-            // if (imgFile || userpic) return;
-            return (<H5 color={TextGrayColor} style={{ maxWidth: '275px', margin: '0 auto', textAlign: 'center' }}>
-          File types supported:
-          <br />
-          SVG, JPG, PNG, GIF. <br />
-          Up to 1 MB
-          <br />
-          (Max 1200 px x 1200 px)
-        </H5>);
-        }
-        else {
-            return (<p style={{ color: ErrorColor }}>
-          {error.currentMessage}
-          <br />
-          {/*{error.message}*/}
-        </p>);
-        }
-    };
-    return (<StyledUserpic isLoading={isImageLoading}>
-      <div style={{
-            paddingBottom: '2rem',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 12,
-        }}>
-        <Dropzone accept={{ 'image/*': [] }} multiple={false} onDrop={function (files) { return __awaiter(void 0, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                onDropHandler(files);
-                reader.onload = function (event) {
-                    var _a;
-                    openModal(<BasicCropper defaultSrc={(_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.result} cropperStyles={cropperStyles} setFile={setImgFile} hide={closeModal} hideWithReset={hideWithReset} setUserPic={setUserPic} errorTypes={errorTypes} setIsError={setIsError}/>);
-                };
-                return [2 /*return*/];
-            });
-        }); }}>
-          {function (_a) {
-            var getRootProps = _a.getRootProps, getInputProps = _a.getInputProps;
-            return (<SWrapper style={{ pointerEvents: userpic ? 'none' : 'auto' }} {...getRootProps()}>
-              <input {...getInputProps()}/>
-              <NoSsr>
-                <div className="content-wrapper">{imageContent()}</div>
-              </NoSsr>
-            </SWrapper>);
-        }}
-        </Dropzone>
-        {renderAcceptDeclineButtons()}
-        {renderDeleteBtn()}
-        <div className="userpic_text">{renderUserPicText()}</div>
-      </div>
-    </StyledUserpic>);
-};
-export default UserPicProfile;
-var templateObject_1, templateObject_2;

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

@@ -1,26 +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';
-import { WhiteColor } from '@/styles/colors';
-import { zIndexApplyResetBtns } from '@/styles/mixins/z-indexes';
-import MainButton from '@/system/Buttons/MainButton';
-// Styles
-var StyledApplyResetButtons = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"], ["\n  z-index: ", ";\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  padding: 20px 24px;\n  height: 80px;\n  background-color: ", ";\n\n  .reset_btn,\n  .apply_btn {\n    width: 144px;\n    height: 100%;\n    button {\n      height: 100%;\n      width: 100%;\n      padding-top: 0;\n      padding-bottom: 0;\n    }\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 80px;\n    display: block;\n    height: 60px;\n    background: linear-gradient(\n      180deg,\n      rgba(255, 255, 255, 0) 0%,\n      ", " 100%\n    );\n  }\n"])), zIndexApplyResetBtns.toString(), WhiteColor, WhiteColor);
-// Component
-var ApplyResetButtons = function (_a) {
-    var onReset = _a.onReset, onApply = _a.onApply;
-    return (<StyledApplyResetButtons>
-      <div className={'reset_btn'}>
-        <MainButton text={'Reset'} variant="outline" onClick={function () { return onReset(); }}/>
-      </div>
-      <div className={'apply_btn'}>
-        <MainButton text={'Apply'} variant="primaryL" onClick={function () { return onApply(); }}/>
-      </div>
-    </StyledApplyResetButtons>);
-};
-// Export
-export default ApplyResetButtons;
-var templateObject_1;

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

@@ -1,71 +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 StyledNtfsFiltersForm = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-// Component
-var GalleryFiltersForm = function (_a) {
-    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainSearchResult = _a.selectBlockchainSearchResult, 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), selectedBlockchainResult = _c[0], setSelectedBlockchainResult = _c[1];
-    var _d = useState(null), selectedBlockchainCategoryResult = _d[0], setSelectedBlockchainCategoryResult = _d[1];
-    var _e = useState(null), selectedBlockchainTimeResult = _e[0], setSelectedBlockchainTimeResult = _e[1];
-    useEffect(function () {
-        if (selectedSearchResult ||
-            selectedBlockchainResult ||
-            selectedBlockchainCategoryResult ||
-            selectedBlockchainTimeResult) {
-            handleNeedShowButtons(true);
-        }
-        else {
-            handleNeedShowButtons(false);
-        }
-        var arr = [
-            selectedSearchResult,
-            selectedBlockchainResult,
-            selectedBlockchainCategoryResult,
-            selectedBlockchainTimeResult,
-        ];
-        var count = arr.filter(function (value) { return value; }).length;
-        handleFiltersCount(count);
-    }, [
-        selectedSearchResult,
-        selectedBlockchainResult,
-        selectedBlockchainCategoryResult,
-        selectedBlockchainTimeResult,
-    ]);
-    var handleChangeSearchResult = function (value) {
-        setSelectedSearchResult(value);
-    };
-    var handleChangeBlockchainResult = function (value) {
-        setSelectedBlockchainResult(value);
-    };
-    var handleChangeBlockchainCategoryResult = function (value) {
-        setSelectedBlockchainCategoryResult(value);
-    };
-    var handleChangeBlockchainTimeResult = function (value) {
-        setSelectedBlockchainTimeResult(value);
-    };
-    return (<StyledNtfsFiltersForm>
-      <DropDown caption={'Type'} fallBackOnClose={handleChangeSearchResult}>
-        {selectTypeSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeSearchResult} radioChecked={selectedBlockchainResult === select.id}/>); })}
-      </DropDown>
-      <DropDown caption={'BlockChainEntity'} fallBackOnClose={handleChangeBlockchainResult}>
-        {selectBlockchainSearchResult.map(function (select) { return (<BasicRadioInput key={select.id} radioLabel={select.label} radioValue={select.id} handleChange={handleChangeBlockchainResult} radioChecked={selectedBlockchainResult === 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={selectedBlockchainResult === 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={selectedBlockchainResult === select.id}/>); })}
-      </DropDown>
-    </StyledNtfsFiltersForm>);
-};
-// Export
-export default GalleryFiltersForm;
-var templateObject_1;

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.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.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;