@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/search/searchCloseMoreButtons/index.jsx

@@ -1,147 +1,51 @@
+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 from 'react';
-
 import { useRouter } from 'next/router';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
 import SearchCloseIcon from '@/public/search/close.svg';
-
-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);
-  };
-
-var StyledSearchCloseMoreButtons = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  position: absolute;\n  right: ',
-        ';\n  top: ',
-        ';\n  bottom: ',
-        ';\n  left: ',
-        ';\n  transform: ',
-        ';\n  display: flex;\n  height: 40px;\n  ',
-        ' {\n    height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  position: absolute;\n  right: ',
-        ';\n  top: ',
-        ';\n  bottom: ',
-        ';\n  left: ',
-        ';\n  transform: ',
-        ';\n  display: flex;\n  height: 40px;\n  ',
-        ' {\n    height: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.position.right;
-  },
-  function (props) {
-    return props.position.top;
-  },
-  function (props) {
-    return props.position.bottom;
-  },
-  function (props) {
-    return props.position.left;
-  },
-  function (props) {
-    return props.position.transform;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(40)
-);
-var StyledCloseIcon = styled.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',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(6)
-);
+var StyledSearchCloseMoreButtons = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  transform: ", ";\n  display: flex;\n  height: 40px;\n  ", " {\n    height: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  transform: ", ";\n  display: flex;\n  height: 40px;\n  ", " {\n    height: ", ";\n  }\n"])), function (props) { return props.position.right; }, function (props) { return props.position.top; }, function (props) { return props.position.bottom; }, function (props) { return props.position.left; }, function (props) { return props.position.transform; }, mediaQuery.minWidthFourK, adaptiveValueCalc(40));
+var StyledCloseIcon = styled.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"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(6));
 var SearchCloseIconResize = function () {
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  return (
-    <SearchCloseIcon
-      style={getAdaptiveScale({
-        windowDimensions: windowDimensions,
-        currentSize: 1,
-      })}
-    />
-  );
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SearchCloseIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
 };
 // Components
 var SearchCloseMoreButtons = function (_a) {
-  var isNeedToShow = _a.isNeedToShow,
-    position = _a.position,
-    clearSearchValue = _a.clearSearchValue;
-  var router = useRouter();
-  var term = router.query.term;
-  return (
-    <StyledSearchCloseMoreButtons position={position}>
-      {isNeedToShow ? (
-        <StyledCloseIcon
-          onClick={function () {
-            if (term) {
-              router
-                .push({
-                  query: __assign(__assign({}, router.query), { term: [] }),
-                })
-                .then(function () {
-                  return clearSearchValue('');
-                });
-            }
-            clearSearchValue('');
-          }}
-        >
+    var isNeedToShow = _a.isNeedToShow, position = _a.position, clearSearchValue = _a.clearSearchValue;
+    var router = useRouter();
+    var term = router.query.term;
+    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>
-  );
+        </StyledCloseIcon>) : null}
+    </StyledSearchCloseMoreButtons>);
 };
 // Export
 export default SearchCloseMoreButtons;

package/dist/components/search/searchResultCaption/index.jsx

@@ -1,86 +1,28 @@
+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 Skeleton from 'react-loading-skeleton';
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { AccentColor, BlackColor } from '@/styles/colors';
 import { FH3 } from '@/styles/typography';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledSearchResultCaption = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ',
-        ';\n    color: ',
-        ';\n\n    strong {\n      margin-right: 8px;\n      color: ',
-        ';\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ',
-        ' {\n    margin: ',
-        ' 0 ',
-        ' 0;\n\n    .caption {\n      strong {\n        margin-right: ',
-        ';\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ',
-        ';\n      max-width: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ',
-        ';\n    color: ',
-        ';\n\n    strong {\n      margin-right: 8px;\n      color: ',
-        ';\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ',
-        ' {\n    margin: ',
-        ' 0 ',
-        ' 0;\n\n    .caption {\n      strong {\n        margin-right: ',
-        ';\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ',
-        ';\n      max-width: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  FH3,
-  BlackColor,
-  AccentColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(27),
-  adaptiveValueCalc(250)
-);
+var StyledSearchResultCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ", ";\n    color: ", ";\n\n    strong {\n      margin-right: 8px;\n      color: ", ";\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ", " {\n    margin: ", " 0 ", " 0;\n\n    .caption {\n      strong {\n        margin-right: ", ";\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ", ";\n      max-width: ", ";\n    }\n  }\n"], ["\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ", ";\n    color: ", ";\n\n    strong {\n      margin-right: 8px;\n      color: ", ";\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ", " {\n    margin: ", " 0 ", " 0;\n\n    .caption {\n      strong {\n        margin-right: ", ";\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ", ";\n      max-width: ", ";\n    }\n  }\n"])), FH3, BlackColor, AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(27), adaptiveValueCalc(250));
 // Component
 var SearchResultCaption = function (_a) {
-  var _b = _a.nftCounter,
-    nftCounter = _b === void 0 ? 0 : _b,
-    searchQuery = _a.searchQuery,
-    isLoading = _a.isLoading;
-  var searchText =
-    searchQuery && searchQuery.length
-      ? 'search results for "'.concat(searchQuery, '"')
-      : 'search results';
-  return (
-    <StyledSearchResultCaption>
-      {isLoading ? (
-        <Skeleton className="skeleton-caption-search" />
-      ) : (
-        <p className={'caption'}>
+    var _b = _a.nftCounter, nftCounter = _b === void 0 ? 0 : _b, searchQuery = _a.searchQuery, isLoading = _a.isLoading;
+    var searchText = searchQuery && searchQuery.length
+        ? "search results for \"".concat(searchQuery, "\"")
+        : 'search results';
+    return (<StyledSearchResultCaption>
+      {isLoading ? (<Skeleton className="skeleton-caption-search"/>) : (<p className={'caption'}>
           <strong>{nftCounter.toLocaleString('ru-RU')}</strong>
           {searchText}
-        </p>
-      )}
-    </StyledSearchResultCaption>
-  );
+        </p>)}
+    </StyledSearchResultCaption>);
 };
 // Export
 export default SearchResultCaption;

package/dist/components/search/searchSelectsGalleries/index.jsx

@@ -1,84 +1,28 @@
+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 styled from 'styled-components';
-
 import { useUiStore } from '@/store/ui';
-
-import {
-  AccentColor,
-  BlackColor,
-  BorderColorLight,
-  InactiveButtonColor,
-} from '@/styles/colors';
-
+import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from '@/styles/colors';
 import ApplyResetButtons from '@/components/filters/applyResetBtns';
 import GalleryFiltersForm from '@/components/filters/galleriesFiltersForm';
 // import BasicSelect from 'system/Forms/Selects/DesktopSelect';
 import SidebarFilters from '@/components/sidebar/sidebarFilters';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledSearchSelectsNfts = 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    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectBlockchain {\n    width: 163px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n  }\n\n  .selectStatus {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectBlockchain {\n    width: 163px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n  }\n\n  .selectStatus {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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',
-      ]
-    )),
-  BlackColor,
-  InactiveButtonColor,
-  AccentColor,
-  BorderColorLight,
-  AccentColor
-);
+var StyledSearchSelectsNfts = 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    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectBlockchain {\n    width: 163px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n  }\n\n  .selectStatus {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectBlockchain {\n    width: 163px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n  }\n\n  .selectStatus {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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"])), BlackColor, InactiveButtonColor, AccentColor, BorderColorLight, AccentColor);
 // Component
 var SearchSelectsGalleries = function (_a) {
-  var selectTypeSearchResult = _a.selectTypeSearchResult,
-    selectBlockchainSearchResult = _a.selectBlockchainSearchResult,
-    selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult,
-    selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
-  var _b = useState(false),
-    isSideBarOpen = _b[0],
-    setSidebarOpen = _b[1];
-  var _c = useState(false),
-    isNeedShowButtons = _c[0],
-    setNeedShowButtons = _c[1];
-  var _d = useState(0),
-    selectedFiltersCount = _d[0],
-    setSelectedFiltersCount = _d[1];
-  var _e = useUiStore(function (state) {
-      return {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainSearchResult = _a.selectBlockchainSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
+    var _b = useState(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var _c = useState(false), isNeedShowButtons = _c[0], setNeedShowButtons = _c[1];
+    var _d = useState(0), selectedFiltersCount = _d[0], setSelectedFiltersCount = _d[1];
+    var _e = useUiStore(function (state) { return ({
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
-      };
-    }),
-    openOverLay = _e.openOverLay,
-    closeOverlay = _e.closeOverlay;
-  return (
-    <StyledSearchSelectsNfts>
+    }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
+    return (<StyledSearchSelectsNfts>
       {/*<div className={'select selectType'}>*/}
       {/*  <BasicSelect options={selectTypeSearchResult} />*/}
       {/*</div>*/}
@@ -92,46 +36,22 @@ var SearchSelectsGalleries = function (_a) {
       {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
       {/*</div>*/}
       <div className={'filterButton'}>
-        <button
-          onClick={function () {
+        <button onClick={function () {
             openOverLay();
             setSidebarOpen(true);
-          }}
-        >
+        }}>
           Filters
-          {selectedFiltersCount ? (
-            <span className={'counter'}>{selectedFiltersCount}</span>
-          ) : null}
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
         </button>
       </div>
-      <SidebarFilters
-        isOpen={isSideBarOpen}
-        handleClose={function () {
-          closeOverlay();
-          setSidebarOpen(false);
-        }}
-      >
-        <GalleryFiltersForm
-          handleFiltersCount={setSelectedFiltersCount}
-          handleNeedShowButtons={setNeedShowButtons}
-          selectTypeSearchResult={selectTypeSearchResult}
-          selectBlockchainSearchResult={selectBlockchainSearchResult}
-          selectBlockchainCategoryResult={selectBlockchainCategoryResult}
-          selectBlockchainTimeResult={selectBlockchainTimeResult}
-        />
-        {isNeedShowButtons ? (
-          <ApplyResetButtons
-            onReset={function () {
-              return null;
-            }}
-            onApply={function () {
-              return null;
-            }}
-          />
-        ) : null}
+      <SidebarFilters isOpen={isSideBarOpen} handleClose={function () {
+            closeOverlay();
+            setSidebarOpen(false);
+        }}>
+        <GalleryFiltersForm handleFiltersCount={setSelectedFiltersCount} handleNeedShowButtons={setNeedShowButtons} selectTypeSearchResult={selectTypeSearchResult} selectBlockchainSearchResult={selectBlockchainSearchResult} selectBlockchainCategoryResult={selectBlockchainCategoryResult} selectBlockchainTimeResult={selectBlockchainTimeResult}/>
+        {isNeedShowButtons ? (<ApplyResetButtons onReset={function () { return null; }} onApply={function () { return null; }}/>) : null}
       </SidebarFilters>
-    </StyledSearchSelectsNfts>
-  );
+    </StyledSearchSelectsNfts>);
 };
 // Export
 export default SearchSelectsGalleries;

package/dist/components/search/searchSelectsSets/index.jsx

@@ -1,82 +1,27 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState } from 'react';
-
 import styled from 'styled-components';
-
 import { useUiStore } from '@/store/ui';
-
-import {
-  AccentColor,
-  BlackColor,
-  BorderColorLight,
-  InactiveButtonColor,
-} from '@/styles/colors';
-
+import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from '@/styles/colors';
 import ApplyResetButtons from '@/components/filters/applyResetBtns';
 import SetsFiltersForm from '@/components/filters/setsFiltersForm';
 // import BasicSelect from 'system/Forms/Selects/DesktopSelect';
 import SidebarFilters from '@/components/sidebar/sidebarFilters';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledSearchSelectsNfts = 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    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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',
-      ]
-    )),
-  BlackColor,
-  InactiveButtonColor,
-  AccentColor,
-  BorderColorLight,
-  AccentColor
-);
+var StyledSearchSelectsNfts = 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    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\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"])), BlackColor, InactiveButtonColor, AccentColor, BorderColorLight, AccentColor);
 // Component
 var SearchSelectsSets = function (_a) {
-  var selectTypeSearchResult = _a.selectTypeSearchResult,
-    selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult,
-    selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
-  var _b = useState(false),
-    isSideBarOpen = _b[0],
-    setSidebarOpen = _b[1];
-  var _c = useState(false),
-    isNeedShowButtons = _c[0],
-    setNeedShowButtons = _c[1];
-  var _d = useState(0),
-    selectedFiltersCount = _d[0],
-    setSelectedFiltersCount = _d[1];
-  var _e = useUiStore(function (state) {
-      return {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
+    var _b = useState(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var _c = useState(false), isNeedShowButtons = _c[0], setNeedShowButtons = _c[1];
+    var _d = useState(0), selectedFiltersCount = _d[0], setSelectedFiltersCount = _d[1];
+    var _e = useUiStore(function (state) { return ({
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
-      };
-    }),
-    openOverLay = _e.openOverLay,
-    closeOverlay = _e.closeOverlay;
-  return (
-    <StyledSearchSelectsNfts>
+    }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
+    return (<StyledSearchSelectsNfts>
       {/*<div className={'select selectType'}>*/}
       {/*  <BasicSelect options={selectTypeSearchResult} />*/}
       {/*</div>*/}
@@ -87,45 +32,22 @@ var SearchSelectsSets = function (_a) {
       {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
       {/*</div>*/}
       <div className={'filterButton'}>
-        <button
-          onClick={function () {
+        <button onClick={function () {
             openOverLay();
             setSidebarOpen(true);
-          }}
-        >
+        }}>
           Filters
-          {selectedFiltersCount ? (
-            <span className={'counter'}>{selectedFiltersCount}</span>
-          ) : null}
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
         </button>
       </div>
-      <SidebarFilters
-        isOpen={isSideBarOpen}
-        handleClose={function () {
-          closeOverlay();
-          setSidebarOpen(false);
-        }}
-      >
-        <SetsFiltersForm
-          handleFiltersCount={setSelectedFiltersCount}
-          handleNeedShowButtons={setNeedShowButtons}
-          selectTypeSearchResult={selectTypeSearchResult}
-          selectBlockchainCategoryResult={selectBlockchainCategoryResult}
-          selectBlockchainTimeResult={selectBlockchainTimeResult}
-        />
-        {isNeedShowButtons ? (
-          <ApplyResetButtons
-            onApply={function () {
-              return null;
-            }}
-            onReset={function () {
-              return null;
-            }}
-          />
-        ) : null}
+      <SidebarFilters isOpen={isSideBarOpen} handleClose={function () {
+            closeOverlay();
+            setSidebarOpen(false);
+        }}>
+        <SetsFiltersForm handleFiltersCount={setSelectedFiltersCount} handleNeedShowButtons={setNeedShowButtons} selectTypeSearchResult={selectTypeSearchResult} selectBlockchainCategoryResult={selectBlockchainCategoryResult} selectBlockchainTimeResult={selectBlockchainTimeResult}/>
+        {isNeedShowButtons ? (<ApplyResetButtons onApply={function () { return null; }} onReset={function () { return null; }}/>) : null}
       </SidebarFilters>
-    </StyledSearchSelectsNfts>
-  );
+    </StyledSearchSelectsNfts>);
 };
 // Export
 export default SearchSelectsSets;