@ludo.ninja/components 1.9.2 → 1.9.4

package/dist/components/search/{SearchInputContainer.js → SearchInputContainer.jsx}

@@ -85,9 +85,9 @@ var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 var utils_1 = require("@ludo.ninja/utils");
-var ui_1 = require("@ludo.ninja/components/src/store/ui");
+var ui_1 = require("@ludo.ninja/components/dist/store/ui");
 var useFetchFindAllTopEntitiesByName_1 = require("@/api/server-search/queries/useFetchFindAllTopEntitiesByName");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var searchCloseMoreButtons_1 = __importDefault(require("@/components/search/searchCloseMoreButtons"));
 var searchSuggestions_1 = __importDefault(require("@/components/search/searchSuggestions"));
 var screen_1 = require("@/utils/screen");
@@ -134,107 +134,109 @@ var SearchInputContainer = function (_a) {
     var SearchContainer = isMobileOpen
         ? SMobileSearchContainer
         : react_1.default.Fragment;
-    var searchSuggestion = (react_1.default.createElement(searchSuggestions_1.default, { isLoading: loading || isDebounceLoading, searchTerm: debouncedValue, assets: (topEntities === null || topEntities === void 0 ? void 0 : topEntities.assets) || [], profiles: (topEntities === null || topEntities === void 0 ? void 0 : topEntities.profiles) || [], collections: (topEntities === null || topEntities === void 0 ? void 0 : topEntities.collections) || [] }));
-    return (react_1.default.createElement(Container, null,
-        react_1.default.createElement(SearchContainer, null,
-            isMobileOpen && (react_1.default.createElement(back_svg_1.default, { onClick: function () {
-                    setIsMobileOpen(false);
-                    (0, utils_1.rootRemoveOverflow)();
-                    if (isClearOnBlur) {
-                        setSearchValue('');
-                        clearTopEntitiesState();
+    var searchSuggestion = (<searchSuggestions_1.default isLoading={loading || isDebounceLoading} searchTerm={debouncedValue} assets={(topEntities === null || topEntities === void 0 ? void 0 : topEntities.assets) || []} profiles={(topEntities === null || topEntities === void 0 ? void 0 : topEntities.profiles) || []} collections={(topEntities === null || topEntities === void 0 ? void 0 : topEntities.collections) || []}/>);
+    return (<Container>
+      <SearchContainer>
+        {isMobileOpen && (<back_svg_1.default onClick={function () {
+                setIsMobileOpen(false);
+                (0, utils_1.rootRemoveOverflow)();
+                if (isClearOnBlur) {
+                    setSearchValue('');
+                    clearTopEntitiesState();
+                }
+            }}/>)}
+        {initializeInputComponent({
+            isMobileOpen: isMobileOpen,
+            mobileOrDesktopPlaceHolder: isMobile
+                ? 'Search'
+                : 'Search for NFTs, collections, profiles, ENS and blockchain addresses',
+            isSearchFocused: isSearchFocused,
+            searchValue: searchValue,
+            inputRef: inputSearch,
+            handle: {
+                focus: function () {
+                    if (isMobileOpen) {
+                        return;
                     }
-                } })),
-            initializeInputComponent({
-                isMobileOpen: isMobileOpen,
-                mobileOrDesktopPlaceHolder: isMobile
-                    ? 'Search'
-                    : 'Search for NFTs, collections, profiles, ENS and blockchain addresses',
-                isSearchFocused: isSearchFocused,
-                searchValue: searchValue,
-                inputRef: inputSearch,
-                handle: {
-                    focus: function () {
-                        if (isMobileOpen) {
-                            return;
-                        }
-                        if (isMobile) {
-                            setIsMobileOpen(true);
-                            (0, utils_1.rootAddOverflow)();
-                            return;
-                        }
-                        openOverLay();
-                        setSearchFocused(true);
-                        onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(true);
-                    },
-                    change: function (e) {
-                        setSearchValue(e.target.value);
-                    },
-                    blur: function () {
-                        if (isMobileOpen) {
-                            return;
-                        }
-                        if (isMobile) {
-                            (0, utils_1.rootRemoveOverflow)();
-                            return;
+                    if (isMobile) {
+                        setIsMobileOpen(true);
+                        (0, utils_1.rootAddOverflow)();
+                        return;
+                    }
+                    openOverLay();
+                    setSearchFocused(true);
+                    onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(true);
+                },
+                change: function (e) {
+                    setSearchValue(e.target.value);
+                },
+                blur: function () {
+                    if (isMobileOpen) {
+                        return;
+                    }
+                    if (isMobile) {
+                        (0, utils_1.rootRemoveOverflow)();
+                        return;
+                    }
+                    setTimeout(function () {
+                        var _a;
+                        (_a = inputSearch.current) === null || _a === void 0 ? void 0 : _a.blur();
+                        setSearchFocused(false);
+                        onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(false);
+                        closeOverlay();
+                        if (isClearOnBlur) {
+                            setSearchValue('');
+                            clearTopEntitiesState();
                         }
-                        setTimeout(function () {
-                            var _a;
-                            (_a = inputSearch.current) === null || _a === void 0 ? void 0 : _a.blur();
-                            setSearchFocused(false);
-                            onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(false);
-                            closeOverlay();
-                            if (isClearOnBlur) {
-                                setSearchValue('');
-                                clearTopEntitiesState();
+                    }, 100);
+                },
+                keyPress: function (e) {
+                    return __awaiter(this, void 0, void 0, function () {
+                        var value, newSearchValue;
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0:
+                                    if (!(e.key === enterKey)) return [3 /*break*/, 4];
+                                    value = e.target.value;
+                                    newSearchValue = value.length ? searchValue : '';
+                                    if (!(router.pathname.includes('/search/nfts') ||
+                                        router.pathname.includes('/search/collections') ||
+                                        router.pathname.includes('/search/profiles'))) return [3 /*break*/, 2];
+                                    return [4 /*yield*/, router.replace({
+                                            query: __assign(__assign({}, router.query), { term: newSearchValue }),
+                                        }, undefined, { shallow: true })];
+                                case 1:
+                                    _a.sent();
+                                    setSearchFocused(false);
+                                    onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(false);
+                                    closeOverlay();
+                                    return [3 /*break*/, 4];
+                                case 2: return [4 /*yield*/, router.push({
+                                        pathname: '/search/nfts',
+                                        query: { term: newSearchValue },
+                                    })];
+                                case 3:
+                                    _a.sent();
+                                    // setSearchFocused(false);
+                                    // onFocusHandler?.(false);
+                                    closeOverlay();
+                                    _a.label = 4;
+                                case 4: return [2 /*return*/];
                             }
-                        }, 100);
-                    },
-                    keyPress: function (e) {
-                        return __awaiter(this, void 0, void 0, function () {
-                            var value, newSearchValue;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0:
-                                        if (!(e.key === enterKey)) return [3 /*break*/, 4];
-                                        value = e.target.value;
-                                        newSearchValue = value.length ? searchValue : '';
-                                        if (!(router.pathname.includes('/search/nfts') ||
-                                            router.pathname.includes('/search/collections') ||
-                                            router.pathname.includes('/search/profiles'))) return [3 /*break*/, 2];
-                                        return [4 /*yield*/, router.replace({
-                                                query: __assign(__assign({}, router.query), { term: newSearchValue }),
-                                            }, undefined, { shallow: true })];
-                                    case 1:
-                                        _a.sent();
-                                        setSearchFocused(false);
-                                        onFocusHandler === null || onFocusHandler === void 0 ? void 0 : onFocusHandler(false);
-                                        closeOverlay();
-                                        return [3 /*break*/, 4];
-                                    case 2: return [4 /*yield*/, router.push({
-                                            pathname: '/search/nfts',
-                                            query: { term: newSearchValue },
-                                        })];
-                                    case 3:
-                                        _a.sent();
-                                        // setSearchFocused(false);
-                                        // onFocusHandler?.(false);
-                                        closeOverlay();
-                                        _a.label = 4;
-                                    case 4: return [2 /*return*/];
-                                }
-                            });
                         });
-                    },
+                    });
                 },
-                searchSuggestion: !isMobile && searchValue && (react_1.default.createElement("div", { className: "suggestionBar" }, searchSuggestion)),
-                searchCloseButton: (react_1.default.createElement(searchCloseMoreButtons_1.default, { isNeedToShow: Boolean(searchValue.length), position: {
-                        top: '50%',
-                        right: '0',
-                        transform: 'translate(-50%, -50%)',
-                    }, clearSearchValue: setSearchValue })),
-            })),
-        isMobileOpen && searchValue && (react_1.default.createElement(SSuggestions, null, searchSuggestion))));
+            },
+            searchSuggestion: !isMobile && searchValue && (<div className="suggestionBar">{searchSuggestion}</div>),
+            searchCloseButton: (<searchCloseMoreButtons_1.default isNeedToShow={Boolean(searchValue.length)} position={{
+                    top: '50%',
+                    right: '0',
+                    transform: 'translate(-50%, -50%)',
+                }} clearSearchValue={setSearchValue}/>),
+        })}
+      </SearchContainer>
+      {isMobileOpen && searchValue && (<SSuggestions>{searchSuggestion}</SSuggestions>)}
+    </Container>);
 };
 exports.SearchInputContainer = SearchInputContainer;
 var show = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"], ["\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));

package/dist/components/search/{index.js → index.jsx}

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_1 = require("@/styles/colors");
 var z_indexes_1 = require("@/styles/mixins/z-indexes");
 var typography_1 = require("@/styles/typography");
@@ -66,21 +66,23 @@ var StyledInput = styled_components_1.default.input(templateObject_4 || (templat
 var StyledSearchIcon = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return (props.isActive ? colors_1.BorderColorLight : colors_1.AccentColor); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(30), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24));
 var SearchGlassIconResize = function () {
     var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
-    return (react_1.default.createElement(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+    return (<search_svg_1.default style={(0, scale_1.getAdaptiveScale)({
             windowDimensions: windowDimensions,
             currentSize: 1,
-        }) }));
+        })}/>);
 };
 // Components
-var Search = function () { return (react_1.default.createElement(SearchInputContainer_1.SearchInputContainer, { isClearOnBlur: true, initializeInputComponent: function (_a) {
+var Search = function () { return (<SearchInputContainer_1.SearchInputContainer isClearOnBlur initializeInputComponent={function (_a) {
         var searchSuggestion = _a.searchSuggestion, handle = _a.handle, inputRef = _a.inputRef, searchValue = _a.searchValue, isSearchFocused = _a.isSearchFocused, mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder, searchCloseButton = _a.searchCloseButton, isMobileOpen = _a.isMobileOpen;
-        return (react_1.default.createElement(StyledSearch, { isActive: Boolean(searchValue.length), isFocused: isSearchFocused, isMobileOpen: isMobileOpen },
-            react_1.default.createElement(StyledSearchIcon, { isActive: Boolean(searchValue.length) },
-                react_1.default.createElement(SearchGlassIconResize, null)),
-            react_1.default.createElement(StyledInput, { isMobileOpen: isMobileOpen, isActive: Boolean(searchValue.length), tabIndex: 0, autoComplete: 'off', onChange: handle.change, ref: inputRef, onFocus: handle.focus, onBlur: handle.blur, onKeyPress: handle.keyPress, value: searchValue, type: 'text', placeholder: mobileOrDesktopPlaceHolder }),
-            searchCloseButton,
-            searchSuggestion));
-    } })); };
+        return (<StyledSearch isActive={Boolean(searchValue.length)} isFocused={isSearchFocused} isMobileOpen={isMobileOpen}>
+        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
+          <SearchGlassIconResize />
+        </StyledSearchIcon>
+        <StyledInput isMobileOpen={isMobileOpen} isActive={Boolean(searchValue.length)} tabIndex={0} autoComplete={'off'} onChange={handle.change} ref={inputRef} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
+        {searchCloseButton}
+        {searchSuggestion}
+      </StyledSearch>);
+    }}/>); };
 // Export
 exports.default = Search;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/search/searchCategories/{index.js → index.jsx}

@@ -64,15 +64,19 @@ var SearchCategories = function () {
     var renderCategories = function () {
         return data.map(function (category, indx) {
             if (category.id !== categoryValue.id) {
-                return (react_1.default.createElement("span", { key: category.id, onClick: function (e) { return handleCategory(e, indx); } }, category.label));
+                return (<span key={category.id} onClick={function (e) { return handleCategory(e, indx); }}>
+            {category.label}
+          </span>);
             }
         });
     };
-    return (react_1.default.createElement(StyledSearchCategories, null,
-        react_1.default.createElement("span", { className: 'caption' }, categoryValue.label),
-        react_1.default.createElement("div", { className: 'arrow_icon' },
-            react_1.default.createElement("span", { className: 'icon' })),
-        react_1.default.createElement("div", { className: 'dropdown' }, renderCategories())));
+    return (<StyledSearchCategories>
+      <span className={'caption'}>{categoryValue.label}</span>
+      <div className={'arrow_icon'}>
+        <span className={'icon'}/>
+      </div>
+      <div className={'dropdown'}>{renderCategories()}</div>
+    </StyledSearchCategories>);
 };
 // Export
 exports.default = SearchCategories;

package/dist/components/search/searchCloseMoreButtons/{index.js → index.jsx}

@@ -22,7 +22,7 @@ var react_1 = __importDefault(require("react"));
 var router_1 = require("next/router");
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var scale_1 = require("@/utils/adaptive/scale");
 var screen_1 = require("@/utils/screen");
 var close_svg_1 = __importDefault(require("@/public/search/close.svg"));
@@ -30,24 +30,27 @@ var StyledSearchCloseMoreButtons = styled_components_1.default.div(templateObjec
 var StyledCloseIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  z-index: 1;\n  padding: 8px 6px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    padding: ", " ", ";\n  }\n"], ["\n  cursor: pointer;\n  z-index: 1;\n  padding: 8px 6px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    padding: ", " ", ";\n  }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6));
 var SearchCloseIconResize = function () {
     var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
-    return (react_1.default.createElement(close_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
+    return (<close_svg_1.default style={(0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
 };
 // Components
 var SearchCloseMoreButtons = function (_a) {
     var isNeedToShow = _a.isNeedToShow, position = _a.position, clearSearchValue = _a.clearSearchValue;
     var router = (0, router_1.useRouter)();
     var term = router.query.term;
-    return (react_1.default.createElement(StyledSearchCloseMoreButtons, { position: position }, isNeedToShow ? (react_1.default.createElement(StyledCloseIcon, { onClick: function () {
-            if (term) {
-                router
-                    .push({
-                    query: __assign(__assign({}, router.query), { term: [] }),
-                })
-                    .then(function () { return clearSearchValue(''); });
-            }
-            clearSearchValue('');
-        } },
-        react_1.default.createElement(SearchCloseIconResize, null))) : null));
+    return (<StyledSearchCloseMoreButtons position={position}>
+      {isNeedToShow ? (<StyledCloseIcon onClick={function () {
+                if (term) {
+                    router
+                        .push({
+                        query: __assign(__assign({}, router.query), { term: [] }),
+                    })
+                        .then(function () { return clearSearchValue(''); });
+                }
+                clearSearchValue('');
+            }}>
+          <SearchCloseIconResize />
+        </StyledCloseIcon>) : null}
+    </StyledSearchCloseMoreButtons>);
 };
 // Export
 exports.default = SearchCloseMoreButtons;

package/dist/components/search/searchResultCaption/{index.js → index.jsx}

@@ -11,7 +11,7 @@ var react_1 = __importDefault(require("react"));
 var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var colors_1 = require("@/styles/colors");
 var typography_1 = require("@/styles/typography");
 // Styles
@@ -22,9 +22,12 @@ var SearchResultCaption = function (_a) {
     var searchText = searchQuery && searchQuery.length
         ? "search results for \"".concat(searchQuery, "\"")
         : 'search results';
-    return (react_1.default.createElement(StyledSearchResultCaption, null, isLoading ? (react_1.default.createElement(react_loading_skeleton_1.default, { className: "skeleton-caption-search" })) : (react_1.default.createElement("p", { className: 'caption' },
-        react_1.default.createElement("strong", null, nftCounter.toLocaleString('ru-RU')),
-        searchText))));
+    return (<StyledSearchResultCaption>
+      {isLoading ? (<react_loading_skeleton_1.default className="skeleton-caption-search"/>) : (<p className={'caption'}>
+          <strong>{nftCounter.toLocaleString('ru-RU')}</strong>
+          {searchText}
+        </p>)}
+    </StyledSearchResultCaption>);
 };
 // Export
 exports.default = SearchResultCaption;

package/dist/components/search/searchSelectsGalleries/{index.js → index.jsx}

@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var ui_1 = require("@ludo.ninja/components/src/store/ui");
+var ui_1 = require("@ludo.ninja/components/dist/store/ui");
 var colors_1 = require("@/styles/colors");
 var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
 var galleriesFiltersForm_1 = __importDefault(require("@/components/filters/galleriesFiltersForm"));
@@ -50,20 +50,36 @@ var SearchSelectsGalleries = function (_a) {
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
     }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
-    return (react_1.default.createElement(StyledSearchSelectsNfts, null,
-        react_1.default.createElement("div", { className: 'filterButton' },
-            react_1.default.createElement("button", { onClick: function () {
-                    openOverLay();
-                    setSidebarOpen(true);
-                } },
-                "Filters",
-                selectedFiltersCount ? (react_1.default.createElement("span", { className: 'counter' }, selectedFiltersCount)) : null)),
-        react_1.default.createElement(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: function () {
-                closeOverlay();
-                setSidebarOpen(false);
-            } },
-            react_1.default.createElement(galleriesFiltersForm_1.default, { handleFiltersCount: setSelectedFiltersCount, handleNeedShowButtons: setNeedShowButtons, selectTypeSearchResult: selectTypeSearchResult, selectBlockchainSearchResult: selectBlockchainSearchResult, selectBlockchainCategoryResult: selectBlockchainCategoryResult, selectBlockchainTimeResult: selectBlockchainTimeResult }),
-            isNeedShowButtons ? (react_1.default.createElement(applyResetBtns_1.default, { onReset: function () { return null; }, onApply: function () { return null; } })) : null)));
+    return (<StyledSearchSelectsNfts>
+      {/*<div className={'select selectType'}>*/}
+      {/*  <BasicSelect options={selectTypeSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectBlockchain'}>*/}
+      {/*  <BasicSelect options={selectBlockchainSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectCategory'}>*/}
+      {/*  <BasicSelect options={selectBlockchainCategoryResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectTime'}>*/}
+      {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
+      {/*</div>*/}
+      <div className={'filterButton'}>
+        <button onClick={function () {
+            openOverLay();
+            setSidebarOpen(true);
+        }}>
+          Filters
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
+        </button>
+      </div>
+      <sidebarFilters_1.default isOpen={isSideBarOpen} handleClose={function () {
+            closeOverlay();
+            setSidebarOpen(false);
+        }}>
+        <galleriesFiltersForm_1.default handleFiltersCount={setSelectedFiltersCount} handleNeedShowButtons={setNeedShowButtons} selectTypeSearchResult={selectTypeSearchResult} selectBlockchainSearchResult={selectBlockchainSearchResult} selectBlockchainCategoryResult={selectBlockchainCategoryResult} selectBlockchainTimeResult={selectBlockchainTimeResult}/>
+        {isNeedShowButtons ? (<applyResetBtns_1.default onReset={function () { return null; }} onApply={function () { return null; }}/>) : null}
+      </sidebarFilters_1.default>
+    </StyledSearchSelectsNfts>);
 };
 // Export
 exports.default = SearchSelectsGalleries;

package/dist/components/search/searchSelectsSets/{index.js → index.jsx}

@@ -32,7 +32,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var ui_1 = require("@ludo.ninja/components/src/store/ui");
+var ui_1 = require("@ludo.ninja/components/dist/store/ui");
 var colors_1 = require("@/styles/colors");
 var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
 var setsFiltersForm_1 = __importDefault(require("@/components/filters/setsFiltersForm"));
@@ -49,20 +49,33 @@ var SearchSelectsSets = function (_a) {
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
     }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
-    return (react_1.default.createElement(StyledSearchSelectsNfts, null,
-        react_1.default.createElement("div", { className: 'filterButton' },
-            react_1.default.createElement("button", { onClick: function () {
-                    openOverLay();
-                    setSidebarOpen(true);
-                } },
-                "Filters",
-                selectedFiltersCount ? (react_1.default.createElement("span", { className: 'counter' }, selectedFiltersCount)) : null)),
-        react_1.default.createElement(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: function () {
-                closeOverlay();
-                setSidebarOpen(false);
-            } },
-            react_1.default.createElement(setsFiltersForm_1.default, { handleFiltersCount: setSelectedFiltersCount, handleNeedShowButtons: setNeedShowButtons, selectTypeSearchResult: selectTypeSearchResult, selectBlockchainCategoryResult: selectBlockchainCategoryResult, selectBlockchainTimeResult: selectBlockchainTimeResult }),
-            isNeedShowButtons ? (react_1.default.createElement(applyResetBtns_1.default, { onApply: function () { return null; }, onReset: function () { return null; } })) : null)));
+    return (<StyledSearchSelectsNfts>
+      {/*<div className={'select selectType'}>*/}
+      {/*  <BasicSelect options={selectTypeSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectCategory'}>*/}
+      {/*  <BasicSelect options={selectBlockchainCategoryResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectTime'}>*/}
+      {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
+      {/*</div>*/}
+      <div className={'filterButton'}>
+        <button onClick={function () {
+            openOverLay();
+            setSidebarOpen(true);
+        }}>
+          Filters
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
+        </button>
+      </div>
+      <sidebarFilters_1.default isOpen={isSideBarOpen} handleClose={function () {
+            closeOverlay();
+            setSidebarOpen(false);
+        }}>
+        <setsFiltersForm_1.default handleFiltersCount={setSelectedFiltersCount} handleNeedShowButtons={setNeedShowButtons} selectTypeSearchResult={selectTypeSearchResult} selectBlockchainCategoryResult={selectBlockchainCategoryResult} selectBlockchainTimeResult={selectBlockchainTimeResult}/>
+        {isNeedShowButtons ? (<applyResetBtns_1.default onApply={function () { return null; }} onReset={function () { return null; }}/>) : null}
+      </sidebarFilters_1.default>
+    </StyledSearchSelectsNfts>);
 };
 // Export
 exports.default = SearchSelectsSets;

package/dist/components/search/searchSimpleInput/{index.js → index.jsx}

@@ -33,7 +33,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var styles_1 = require("@ludo.ninja/components/src/styles");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var typography_1 = require("@/styles/typography");
 var SearchInputContainer_1 = require("@/components/search/SearchInputContainer");
 var scale_1 = require("@/utils/adaptive/scale");
@@ -65,20 +65,22 @@ var StyledSearchIcon = styled_components_1.default.div(templateObject_4 || (temp
 }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(16));
 var SearchGlassIconResize = function () {
     var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
-    return (react_1.default.createElement(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) }));
+    return (<search_svg_1.default style={(0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
 };
 // Components
 var SearchSimpleInput = function (_a) {
     var onFocusHandler = _a.onFocusHandler;
-    return (react_1.default.createElement(SearchInputContainer_1.SearchInputContainer, { onFocusHandler: onFocusHandler, initializeInputComponent: function (_a) {
+    return (<SearchInputContainer_1.SearchInputContainer onFocusHandler={onFocusHandler} initializeInputComponent={function (_a) {
             var searchValue = _a.searchValue, handle = _a.handle, inputRef = _a.inputRef, isSearchFocused = _a.isSearchFocused, mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder, searchSuggestion = _a.searchSuggestion, isMobileOpen = _a.isMobileOpen, searchCloseButton = _a.searchCloseButton;
-            return (react_1.default.createElement(StyledSearchSimpleInput, { isMobileOpen: isMobileOpen },
-                react_1.default.createElement(StyledSearchIcon, { isActive: Boolean(searchValue.length) },
-                    react_1.default.createElement(SearchGlassIconResize, null)),
-                react_1.default.createElement(StyledInput, { isActive: Boolean(searchValue.length) && isSearchFocused, autoComplete: 'off', onChange: handle.change, ref: inputRef, tabIndex: 1, onFocus: handle.focus, onBlur: handle.blur, onKeyPress: handle.keyPress, value: searchValue, type: 'text', placeholder: mobileOrDesktopPlaceHolder }),
-                searchCloseButton,
-                isSearchFocused && searchSuggestion));
-        } }));
+            return (<StyledSearchSimpleInput isMobileOpen={isMobileOpen}>
+        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
+          <SearchGlassIconResize />
+        </StyledSearchIcon>
+        <StyledInput isActive={Boolean(searchValue.length) && isSearchFocused} autoComplete={'off'} onChange={handle.change} ref={inputRef} tabIndex={1} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
+        {searchCloseButton}
+        {isSearchFocused && searchSuggestion}
+      </StyledSearchSimpleInput>);
+        }}/>);
 };
 // Export
 exports.default = SearchSimpleInput;