@ludo.ninja/components 2.3.36 → 2.3.37

package/build/components/search/searchCloseMoreButtons/index.js

@@ -5,12 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 // import { useRouter } from 'next/router';
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const scale_1 = require("@/utils/adaptive/scale");
-const screen_1 = require("@/utils/screen");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const close_svg_1 = __importDefault(require("@/public/search/close.svg"));
+const close_svg_1 = __importDefault(require("../../../public/search/close"));
 const StyledSearchCloseMoreButtons = styled_components_1.default.div `
   position: absolute;
   right: ${(props) => props.position.right};

package/build/components/search/searchSimpleInput/index.js

@@ -29,13 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importStar(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const SearchInputContainer_1 = require("@/components/search/SearchInputContainer");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const typography_1 = require("@/styles/typography");
-const scale_1 = require("@/utils/adaptive/scale");
-const screen_1 = require("@/utils/screen");
-const vars_1 = require("@/fonts/vars");
-const search_svg_1 = __importDefault(require("@/public/search/search.svg"));
+const SearchInputContainer_1 = require("../SearchInputContainer");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const typography_1 = require("../../../styles/typography");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
+const vars_1 = require("../../../fonts/vars");
+const search_svg_1 = __importDefault(require("../../../public/search/search"));
 // Styles
 const StyledSearchSimpleInput = styled_components_1.default.div `
   position: relative;

package/build/components/search/searchSuggestions/index.d.ts

@@ -1,4 +1,4 @@
-import { TAsset } from "@/entities/asset/types";
+import { TAsset } from '../../../entities/asset/types';
 import { collectionsSchema as schema } from "@ludo.ninja/api";
 import { ProfileEntity } from "@ludo.ninja/core";
 import React from "react";

package/build/components/search/searchSuggestions/index.js

@@ -4,16 +4,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
-const searchSuggestionsFooter_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsFooter"));
-const searchSuggestionsItem_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsItem"));
-const searchSuggestionsItemSkeleton_1 = require("@/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton");
-const searchSuggestionsNotFound_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsNotFound"));
-const getAssetMiniatureUrl_1 = require("@/entities/asset/getAssetMiniatureUrl");
-const types_1 = require("@/entities/labelCreationType/types");
-const env_1 = require("@/store/env");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const Badge_1 = __importDefault(require("@/system/Badge"));
+const searchSuggestionsCaption_1 = __importDefault(require("./searchSuggestionsCaption"));
+const searchSuggestionsFooter_1 = __importDefault(require("./searchSuggestionsFooter"));
+const searchSuggestionsItem_1 = __importDefault(require("./searchSuggestionsItem"));
+const searchSuggestionsItemSkeleton_1 = require("./searchSuggestionsItem/searchSuggestionsItemSkeleton");
+const searchSuggestionsNotFound_1 = __importDefault(require("./searchSuggestionsNotFound"));
+const getAssetMiniatureUrl_1 = require("../../../entities/asset/getAssetMiniatureUrl");
+const types_1 = require("../../../entities/labelCreationType/types");
+const env_1 = require("../../../store/env");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const Badge_1 = __importDefault(require("../../../system/Badge"));
 const constants_1 = require("@ludo.ninja/core/build/constants");
 const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");

package/build/components/search/searchSuggestions/searchSuggestionsCaption/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
-const typography_1 = require("@/styles/typography");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
 // Styles
 const StyledSearchSuggestionsCaption = styled_components_1.default.div `
   padding: 12px 0;

package/build/components/search/searchSuggestions/searchSuggestionsFooter/index.js

@@ -6,10 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
-const typography_1 = require("@/styles/typography");
-const vars_1 = require("@/fonts/vars");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const vars_1 = require("../../../../fonts/vars");
 // Styles
 const StyledSearchSuggestionsFooter = styled_components_1.default.div `
   .footer {

package/build/components/search/searchSuggestions/searchSuggestionsItem/index.js

@@ -7,10 +7,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const utils_1 = require("@ludo.ninja/utils");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
-const typography_1 = require("@/styles/typography");
-const ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const ImageInterceptor_1 = require("../../../../system/Img/ImageInterceptor");
 // Styles
 const StyledSearchSuggestionsItem = styled_components_1.default.div `
   user-select: none;

package/build/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton/index.js

@@ -31,9 +31,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_loading_skeleton_1 = __importStar(require("react-loading-skeleton"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
+const searchSuggestionsCaption_1 = __importDefault(require("../../searchSuggestionsCaption"));
+const ScreenWidth_1 = require("../../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../../styles/colors");
 // Styles
 const StyledSearchSuggestionsItemSkeleton = styled_components_1.default.div `
   display: flex;

package/build/components/search/searchSuggestions/searchSuggestionsNotFound/index.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
-const colors_1 = require("@/styles/colors");
-const typography_1 = require("@/styles/typography");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
 // Styles
 const StyledSearchSuggestionsNotFound = styled_components_1.default.div `
   ${typography_1.FH5};

package/build/components/searchFiltersConnector/filters/applyResetBtns/index.d.ts

@@ -0,0 +1,5 @@
+declare const ApplyResetButtons: ({ onReset, onApply, }: {
+    onReset: () => void;
+    onApply: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ApplyResetButtons;

package/build/components/searchFiltersConnector/filters/applyResetBtns/index.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = require("../../../../styles/colors");
+const z_indexes_1 = require("../../../../styles/mixins/z-indexes");
+const MainButton_1 = __importDefault(require("../../../../system/Buttons/MainButton"));
+// Styles
+const StyledApplyResetButtons = styled_components_1.default.div `
+  z-index: ${z_indexes_1.zIndexApplyResetBtns.toString()};
+  display: flex;
+  gap: 24px;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  padding: 20px 24px;
+  height: 80px;
+  background-color: ${colors_1.WhiteColor};
+
+  .reset_btn,
+  .apply_btn {
+    width: 144px;
+    height: 100%;
+    button {
+      height: 100%;
+      width: 100%;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 80px;
+    display: block;
+    height: 60px;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      ${colors_1.WhiteColor} 100%
+    );
+  }
+`;
+// Component
+const ApplyResetButtons = ({ onReset, onApply, }) => {
+    return ((0, jsx_runtime_1.jsxs)(StyledApplyResetButtons, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'reset_btn', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Reset', variant: "outline", onClick: () => onReset() }) }), (0, jsx_runtime_1.jsx)("div", { className: 'apply_btn', children: (0, jsx_runtime_1.jsx)(MainButton_1.default, { text: 'Apply', variant: "primaryL", onClick: () => onApply() }) })] }));
+};
+// Export
+exports.default = ApplyResetButtons;

package/build/components/searchFiltersConnector/filters/galleriesFiltersForm/index.d.ts

@@ -0,0 +1,10 @@
+import { optionType } from '../../../../system/Forms/Selects/DesktopSelect/type';
+declare const GalleryFiltersForm: ({ selectTypeSearchResult, selectBlockchainSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+    handleNeedShowButtons: (value: boolean) => void;
+    handleFiltersCount: (value: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default GalleryFiltersForm;

package/build/components/searchFiltersConnector/filters/galleriesFiltersForm/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropDown_1 = __importDefault(require("../../../../system/DropDown"));
+const RadioInput_1 = __importDefault(require("../../../../system/Forms/RadioInput"));
+// Styles
+const StyledNtfsFiltersForm = styled_components_1.default.div `
+  position: relative;
+`;
+// Component
+const GalleryFiltersForm = ({ selectTypeSearchResult, selectBlockchainSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }) => {
+    const [selectedSearchResult, setSelectedSearchResult] = (0, react_1.useState)(null);
+    const [selectedBlockchainResult, setSelectedBlockchainResult] = (0, react_1.useState)(null);
+    const [selectedBlockchainCategoryResult, setSelectedBlockchainCategoryResult,] = (0, react_1.useState)(null);
+    const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedSearchResult ||
+            selectedBlockchainResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        const arr = [
+            selectedSearchResult,
+            selectedBlockchainResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        const count = arr.filter((value) => value).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    const handleChangeSearchResult = (value) => {
+        setSelectedSearchResult(value);
+    };
+    const handleChangeBlockchainResult = (value) => {
+        setSelectedBlockchainResult(value);
+    };
+    const handleChangeBlockchainCategoryResult = (value) => {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    const handleChangeBlockchainTimeResult = (value) => {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledNtfsFiltersForm, { children: [(0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'BlockChainEntity', fallBackOnClose: handleChangeBlockchainResult, children: selectBlockchainSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedBlockchainResult === select.id }, select.id))) })] }));
+};
+// Export
+exports.default = GalleryFiltersForm;

package/build/components/searchFiltersConnector/filters/index.d.ts

@@ -0,0 +1,11 @@
+import { searchSchema as schema } from '@ludo.ninja/api';
+import { SelectsType } from '../../../system/Filters/type';
+declare const Filters: ({ filterInputHandler, handleResetFilter, selectData, filterInput, handleMobileFilterInput, isMobile, }: {
+    filterInputHandler: (fieldName: keyof schema.ICreationFilterInput & keyof schema.ICollectionFilterInput, fieldValue: string) => Promise<void>;
+    filterInput: schema.ICreationFilterInput | schema.ICollectionFilterInput;
+    handleResetFilter: () => void;
+    selectData: SelectsType[];
+    handleMobileFilterInput: (newFilters: schema.ICreationFilterInput | schema.ICollectionFilterInput) => Promise<void>;
+    isMobile: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export default Filters;

package/build/components/searchFiltersConnector/filters/index.js

@@ -0,0 +1,158 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const applyResetBtns_1 = __importDefault(require("./applyResetBtns"));
+const mobileFilters_1 = __importDefault(require("./mobileFilters"));
+const sidebarFilters_1 = __importDefault(require("../../sidebar/sidebarFilters"));
+const ui_1 = require("../../../store/ui");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const DesktopSelect_1 = __importDefault(require("../../../system/Forms/Selects/DesktopSelect"));
+const MobileSelect_1 = __importDefault(require("../../../system/Forms/Selects/MobileSelect"));
+// Styles
+const StyledFilters = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+
+  .select {
+    margin-right: 8px;
+    margin-top: 8px;
+  }
+
+  .type {
+    width: 154px;
+  }
+
+  .blockchain {
+    width: 163px;
+  }
+
+  .category {
+    width: 156px;
+  }
+
+  .time {
+    width: 125px;
+  }
+
+  .status {
+    width: 135px;
+    margin-right: 24px;
+  }
+
+  .filterButton {
+    width: 100%;
+
+    button {
+      position: relative;
+      width: 100%;
+      border: 1px solid transparent;
+      outline: none;
+      background-color: white;
+      padding: 10px 85px;
+      border-radius: 6px;
+      min-height: 40px;
+      font-size: 1.4em;
+      color: ${colors_1.BlackColor};
+      font-weight: 500;
+      transition: all 0.3s ease-in;
+
+      &:hover {
+        transition: all 0.3s ease-in-out;
+        background: ${colors_1.InactiveButtonColor};
+        color: ${colors_1.AccentColor};
+        border: 1px solid ${colors_1.BorderColorLight};
+      }
+
+      .counter {
+        position: absolute;
+        background-color: ${colors_1.AccentColor};
+        color: white;
+        right: -5px;
+        padding: 8px;
+        font-size: 0.86em;
+        font-weight: 500;
+        border-radius: 50%;
+        top: -10px;
+        width: 16px;
+        height: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .select {
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
+      margin-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    }
+    .type {
+      width: ${(0, _4k_1.adaptiveValueCalc)(154)};
+    }
+    .blockchain {
+      width: ${(0, _4k_1.adaptiveValueCalc)(163)};
+    }
+    .category {
+      width: ${(0, _4k_1.adaptiveValueCalc)(156)};
+    }
+    .time {
+      width: ${(0, _4k_1.adaptiveValueCalc)(125)};
+    }
+    .status {
+      width: ${(0, _4k_1.adaptiveValueCalc)(135)};
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    }
+  }
+`;
+// Component
+const Filters = ({ filterInputHandler, handleResetFilter, selectData, filterInput, handleMobileFilterInput, isMobile, }) => {
+    const [isSideBarOpen, setSidebarOpen] = (0, react_1.useState)(false);
+    const [selectedFiltersCount] = (0, react_1.useState)(0);
+    const { openOverLay, closeOverlay } = (0, ui_1.useUiStore)((state) => ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }));
+    const [mobileFilterInput, setMobileFilterInput] = (0, react_1.useState)(filterInput);
+    (0, react_1.useEffect)(() => {
+        if (JSON.stringify(mobileFilterInput) !== JSON.stringify(filterInput)) {
+            setMobileFilterInput(filterInput);
+        }
+    }, [filterInput]);
+    const handleMobileFilters = (fieldName, fieldValue) => {
+        setMobileFilterInput((prevFilters) => ({
+            ...prevFilters,
+            [fieldName]: fieldValue,
+        }));
+    };
+    const closeFiltersMobile = () => {
+        closeOverlay();
+        setSidebarOpen(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledFilters, { children: [!isMobile &&
+                selectData.map((select) => ((0, jsx_runtime_1.jsx)("div", { className: `select ${select.data.selectName}`, children: (0, jsx_runtime_1.jsx)(DesktopSelect_1.default, { defaultOptionValue: filterInput[select.data.selectName], options: select.data.selectOptions, isLoading: false, onChangeHandler: filterInputHandler, name: select.data.selectName }) }, select.id))), isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'filterButton', children: (0, jsx_runtime_1.jsxs)("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                openOverLay();
+                                setSidebarOpen(true);
+                            }, children: ["Filters", selectedFiltersCount ? ((0, jsx_runtime_1.jsx)("span", { className: 'counter', children: selectedFiltersCount })) : null] }) }), (0, jsx_runtime_1.jsxs)(sidebarFilters_1.default, { isOpen: isSideBarOpen, handleClose: () => {
+                            setMobileFilterInput(filterInput);
+                            closeFiltersMobile();
+                        }, children: [(0, jsx_runtime_1.jsx)(mobileFilters_1.default, { children: selectData.map((select) => ((0, jsx_runtime_1.jsx)(MobileSelect_1.default, { defaultOptionValue: mobileFilterInput[select.data
+                                        .selectName], options: select.data.selectOptions, name: select.data.selectName, onChangeHandler: handleMobileFilters }, select.id))) }), (0, jsx_runtime_1.jsx)(applyResetBtns_1.default, { onReset: () => {
+                                    handleResetFilter();
+                                    closeFiltersMobile();
+                                }, onApply: () => {
+                                    handleMobileFilterInput(mobileFilterInput);
+                                    closeFiltersMobile();
+                                } })] })] }))] }));
+};
+// Export
+exports.default = Filters;

package/build/components/searchFiltersConnector/filters/mobileFilters/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const MobileFilters: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export default MobileFilters;

package/build/components/searchFiltersConnector/filters/mobileFilters/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledMobileFilters = styled_components_1.default.div `
+  position: relative;
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 32px;
+
+  & > div:last-child {
+    margin-bottom: 30px;
+    border-bottom: unset;
+  }
+`;
+// Component
+const MobileFilters = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)(StyledMobileFilters, { children: children });
+};
+// Export
+exports.default = MobileFilters;

package/build/components/searchFiltersConnector/filters/setsFiltersForm/index.d.ts

@@ -0,0 +1,9 @@
+import { optionType } from '../../../../system/Forms/Selects/DesktopSelect/type';
+declare const SetsFiltersForm: ({ selectTypeSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+    handleNeedShowButtons: (value: boolean) => void;
+    handleFiltersCount: (value: number) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SetsFiltersForm;

package/build/components/searchFiltersConnector/filters/setsFiltersForm/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const DropDown_1 = __importDefault(require("../../../../system/DropDown"));
+const RadioInput_1 = __importDefault(require("../../../../system/Forms/RadioInput"));
+// Styles
+const StyledSetsFiltersForm = styled_components_1.default.div `
+  position: relative;
+`;
+// Component
+const SetsFiltersForm = ({ selectTypeSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, handleNeedShowButtons, handleFiltersCount, }) => {
+    const [selectedSearchResult, setSelectedSearchResult] = (0, react_1.useState)(null);
+    const [selectedBlockchainCategoryResult, setSelectedBlockchainCategoryResult,] = (0, react_1.useState)(null);
+    const [selectedBlockchainTimeResult, setSelectedBlockchainTimeResult] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (selectedSearchResult ||
+            selectedBlockchainCategoryResult ||
+            selectedBlockchainTimeResult) {
+            handleNeedShowButtons(true);
+        }
+        else {
+            handleNeedShowButtons(false);
+        }
+        const arr = [
+            selectedSearchResult,
+            selectedBlockchainCategoryResult,
+            selectedBlockchainTimeResult,
+        ];
+        const count = arr.filter((value) => value).length;
+        handleFiltersCount(count);
+    }, [
+        selectedSearchResult,
+        selectedBlockchainCategoryResult,
+        selectedBlockchainTimeResult,
+    ]);
+    const handleChangeSearchResult = (value) => {
+        setSelectedSearchResult(value);
+    };
+    const handleChangeBlockchainCategoryResult = (value) => {
+        setSelectedBlockchainCategoryResult(value);
+    };
+    const handleChangeBlockchainTimeResult = (value) => {
+        setSelectedBlockchainTimeResult(value);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledSetsFiltersForm, { children: [(0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Type', fallBackOnClose: handleChangeSearchResult, children: selectTypeSearchResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeSearchResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Category', fallBackOnClose: handleChangeBlockchainCategoryResult, children: selectBlockchainCategoryResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainCategoryResult, radioChecked: selectedSearchResult === select.id }, select.id))) }), (0, jsx_runtime_1.jsx)(DropDown_1.default, { caption: 'Time', fallBackOnClose: handleChangeBlockchainTimeResult, children: selectBlockchainTimeResult.map((select) => ((0, jsx_runtime_1.jsx)(RadioInput_1.default, { radioLabel: select.label, radioValue: select.id, handleChange: handleChangeBlockchainTimeResult, radioChecked: selectedSearchResult === select.id }, select.id))) })] }));
+};
+// Export
+exports.default = SetsFiltersForm;

package/build/components/searchFiltersConnector/index.d.ts

@@ -0,0 +1,10 @@
+import { DefaultsCollectionsSearchPageProps, DefaultsNftSearchPageProps } from '../../api/server-preferences/queries/fetchSearchResultSelections/queryData';
+import { searchSchema as schema } from "@ludo.ninja/api";
+export declare const useSearchFiltersConnector: <TFilterInput extends schema.ICreationFilterInput | schema.ICollectionFilterInput = schema.ICreationFilterInput>({ defaults, isDisabledTypeFilters, isMobile, }: {
+    defaults: DefaultsNftSearchPageProps | DefaultsCollectionsSearchPageProps;
+    isDisabledTypeFilters?: boolean;
+    isMobile: boolean;
+}) => {
+    filterInput: TFilterInput;
+    renderFilters: import("react/jsx-runtime").JSX.Element;
+};