@ludo.ninja/components 1.7.4 → 1.7.6

package/dist/components/search/searchCategories/index.js

@@ -0,0 +1,79 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var StyledSearchCategories = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ", ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ", ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ", ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ", ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n"])), typography_1.FH3, colors_1.TextGrayColor);
+var data = [
+    {
+        id: Math.random(),
+        label: 'Creations',
+    },
+    {
+        id: Math.random(),
+        label: 'Users',
+    },
+    {
+        id: Math.random(),
+        label: 'Galleries',
+    },
+    {
+        id: Math.random(),
+        label: 'Campaigns',
+    },
+];
+// Components
+var SearchCategories = function () {
+    var _a = (0, react_1.useState)(data[0]), categoryValue = _a[0], setCategoryValue = _a[1];
+    // Handlers
+    var handleCategory = function (e, indx) {
+        setCategoryValue(data[indx]);
+    };
+    // Renders
+    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 (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())));
+};
+// Export
+exports.default = SearchCategories;
+var templateObject_1;

package/dist/components/search/searchCategories/type.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,54 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 ScreenWidth_1 = require("@/styles/ScreenWidth");
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var close_svg_1 = __importDefault(require("@/public/search/close.svg"));
+var StyledSearchCloseMoreButtons = styled_components_1.default.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; }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40));
+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"])), ScreenWidth_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 }) }));
+};
+// 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));
+};
+// Export
+exports.default = SearchCloseMoreButtons;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+// Styles
+var StyledSearchResultCaption = styled_components_1.default.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"])), typography_1.FH3, colors_1.BlackColor, colors_1.AccentColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(27), (0, _4k_1.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 (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))));
+};
+// Export
+exports.default = SearchResultCaption;
+var templateObject_1;

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

@@ -0,0 +1,70 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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("@/store/ui");
+var colors_1 = require("@/styles/colors");
+var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
+var galleriesFiltersForm_1 = __importDefault(require("@/components/filters/galleriesFiltersForm"));
+// import BasicSelect from 'system/Forms/Selects/DesktopSelect';
+var sidebarFilters_1 = __importDefault(require("@/components/sidebar/sidebarFilters"));
+// Styles
+var StyledSearchSelectsNfts = styled_components_1.default.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"])), colors_1.BlackColor, colors_1.InactiveButtonColor, colors_1.AccentColor, colors_1.BorderColorLight, colors_1.AccentColor);
+// Component
+var SearchSelectsGalleries = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainSearchResult = _a.selectBlockchainSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
+    var _b = (0, react_1.useState)(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var _c = (0, react_1.useState)(false), isNeedShowButtons = _c[0], setNeedShowButtons = _c[1];
+    var _d = (0, react_1.useState)(0), selectedFiltersCount = _d[0], setSelectedFiltersCount = _d[1];
+    var _e = (0, ui_1.useUiStore)(function (state) { return ({
+        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)));
+};
+// Export
+exports.default = SearchSelectsGalleries;
+var templateObject_1;

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

@@ -0,0 +1,69 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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("@/store/ui");
+var colors_1 = require("@/styles/colors");
+var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
+var setsFiltersForm_1 = __importDefault(require("@/components/filters/setsFiltersForm"));
+// import BasicSelect from 'system/Forms/Selects/DesktopSelect';
+var sidebarFilters_1 = __importDefault(require("@/components/sidebar/sidebarFilters"));
+var StyledSearchSelectsNfts = styled_components_1.default.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"])), colors_1.BlackColor, colors_1.InactiveButtonColor, colors_1.AccentColor, colors_1.BorderColorLight, colors_1.AccentColor);
+// Component
+var SearchSelectsSets = function (_a) {
+    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
+    var _b = (0, react_1.useState)(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
+    var _c = (0, react_1.useState)(false), isNeedShowButtons = _c[0], setNeedShowButtons = _c[1];
+    var _d = (0, react_1.useState)(0), selectedFiltersCount = _d[0], setSelectedFiltersCount = _d[1];
+    var _e = (0, ui_1.useUiStore)(function (state) { return ({
+        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)));
+};
+// Export
+exports.default = SearchSelectsSets;
+var templateObject_1;

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

@@ -0,0 +1,85 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 ScreenWidth_1 = require("@/styles/ScreenWidth");
+var typography_1 = require("@/styles/typography");
+var SearchInputContainer_1 = require("@/components/search/SearchInputContainer");
+var scale_1 = require("@/utils/adaptive/scale");
+var screen_1 = require("@/utils/screen");
+var vars_1 = require("@/fonts/vars");
+var search_svg_1 = __importDefault(require("@/public/search/search.svg"));
+// Styles
+var StyledSearchSimpleInput = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 40%;\n\n  .suggestionBar {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n  }\n\n  ", " {\n    width: 188px;\n    ", "\n  }\n\n  ", " {\n    .suggestionBar {\n      top: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 40%;\n\n  .suggestionBar {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n  }\n\n  ", " {\n    width: 188px;\n    ", "\n  }\n\n  ", " {\n    .suggestionBar {\n      top: ", ";\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.mobile, function (props) {
+    return props.isMobileOpen && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "])));
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40));
+var StyledInput = styled_components_1.default.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 40px;\n  outline: none;\n  border: none;\n  font-weight: 400;\n  font-size: 1.4em;\n  color: ", ";\n  background-color: ", ";\n  padding-left: 48px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  border-top-right-radius: 24px;\n  border-top-left-radius: 24px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  font-family: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n    padding-left: 32px;\n    height: 36px;\n  }\n\n  ", " {\n    height: ", ";\n    font-size: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: 40px;\n  outline: none;\n  border: none;\n  font-weight: 400;\n  font-size: 1.4em;\n  color: ", ";\n  background-color: ", ";\n  padding-left: 48px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  border-top-right-radius: 24px;\n  border-top-left-radius: 24px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  font-family: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n    padding-left: 32px;\n    height: 36px;\n  }\n\n  ", " {\n    height: ", ";\n    font-size: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.primaryText;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.thirdBg;
+}, function (props) { return (props.isActive ? 'none' : '24px'); }, function (props) { return (props.isActive ? 'none' : '24px'); }, vars_1.dmsansFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.placeholderText;
+}, ScreenWidth_1.mediaQuery.mobile, typography_1.FH6, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(14), (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(48), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(24), function (props) {
+    return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24);
+}, function (props) {
+    return props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24);
+});
+var StyledSearchIcon = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 768px) {\n    left: 8px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 768px) {\n    left: 8px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n  }\n"])), function (props) {
+    return props.isActive
+        ? props.theme.colors.borderColor
+        : props.theme.colors.accent;
+}, ScreenWidth_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 }) }));
+};
+// Components
+var SearchSimpleInput = function (_a) {
+    var onFocusHandler = _a.onFocusHandler;
+    return (react_1.default.createElement(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));
+        } }));
+};
+// Export
+exports.default = SearchSimpleInput;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,117 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
+var searchSuggestionsFooter_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsFooter"));
+var searchSuggestionsItem_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsItem"));
+var searchSuggestionsItemSkeleton_1 = require("@/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton");
+var searchSuggestionsNotFound_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsNotFound"));
+var _3d_1 = require("@/utils/3d");
+var env_1 = require("@/utils/env");
+var Urls_1 = require("@/dto/common/Media/Urls");
+// Styles
+var StyledSearchSuggestions = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background-color: ", ";\n\n  border-bottom-left-radius: 28px;\n  border-bottom-right-radius: 28px;\n\n  .content {\n    position: relative;\n    height: 100%;\n    padding: 0 44px;\n    display: flex;\n    background-color: ", ";\n\n    flex-direction: column;\n    border-bottom-right-radius: 20px;\n    border-bottom-left-radius: 20px;\n\n    @media (max-width: 767px) {\n      background-color: unset;\n      padding: 16px 0;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .scroller {\n      max-height: calc(var(--app-height) - 40px - 24px - 10px - 24px - 44px);\n      padding-left: 20px;\n      padding-right: 20px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin-left: -20px;\n      margin-right: -20px;\n      width: calc(100% + 40px);\n    }\n  }\n\n  ", " {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    .content {\n      padding: 0 ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  background-color: ", ";\n\n  border-bottom-left-radius: 28px;\n  border-bottom-right-radius: 28px;\n\n  .content {\n    position: relative;\n    height: 100%;\n    padding: 0 44px;\n    display: flex;\n    background-color: ", ";\n\n    flex-direction: column;\n    border-bottom-right-radius: 20px;\n    border-bottom-left-radius: 20px;\n\n    @media (max-width: 767px) {\n      background-color: unset;\n      padding: 16px 0;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .scroller {\n      max-height: calc(var(--app-height) - 40px - 24px - 10px - 24px - 44px);\n      padding-left: 20px;\n      padding-right: 20px;\n      overflow-y: auto;\n      overflow-x: hidden;\n      margin-left: -20px;\n      margin-right: -20px;\n      width: calc(100% + 40px);\n    }\n  }\n\n  ", " {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    .content {\n      padding: 0 ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.sidebarBg;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.thirdBg;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20));
+// Components
+var SearchSuggestions = function (_a) {
+    var searchTerm = _a.searchTerm, assets = _a.assets, profiles = _a.profiles, collections = _a.collections, isLoading = _a.isLoading;
+    var isNotFound = !(assets === null || assets === void 0 ? void 0 : assets.length) && !(profiles === null || profiles === void 0 ? void 0 : profiles.length) && !(collections === null || collections === void 0 ? void 0 : collections.length);
+    return (react_1.default.createElement(StyledSearchSuggestions, null,
+        react_1.default.createElement("div", { className: 'content' },
+            isLoading && react_1.default.createElement(searchSuggestionsItemSkeleton_1.SearchSuggestionsItemsSkeleton, null),
+            !isLoading &&
+                (isNotFound ? (react_1.default.createElement(searchSuggestionsNotFound_1.default, { notFoundText: searchTerm })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "scroller" }, __spreadArray(__spreadArray(__spreadArray([], ((assets === null || assets === void 0 ? void 0 : assets.length)
+                        ? [
+                            {
+                                caption: 'NFTs',
+                                children: assets.map(function (asset) {
+                                    // if (
+                                    //   asset?.getName()?.toLowerCase() ===
+                                    //   'Concerto Para Piano e Pandemia May 5, 2021 at 3pm GMT +1'.toLowerCase()
+                                    // ) {
+                                    //   console.log(
+                                    //     'asset?.getAssetMedias()',
+                                    //     asset?.getAssetMedias()
+                                    //   );
+                                    //   console.log('asset', asset);
+                                    // }
+                                    var currentMedia = asset === null || asset === void 0 ? void 0 : asset.getAssetMedias()[0];
+                                    // console.log('currentMedia', currentMedia);
+                                    var miniatureUrl = '';
+                                    var mimeType = currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.mimeType;
+                                    if (mimeType === null || mimeType === void 0 ? void 0 : mimeType.includes('video')) {
+                                        miniatureUrl = (0, Urls_1.isExternalMediaVideo)((currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.previewUrl) || null);
+                                    }
+                                    if (mimeType === null || mimeType === void 0 ? void 0 : mimeType.includes('audio')) {
+                                        miniatureUrl = (0, Urls_1.isExternalMediaAudio)((currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.previewUrl) || null);
+                                    }
+                                    if ((0, _3d_1.isObject3D)({
+                                        media: currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.url,
+                                        mimeType: currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.mimeType,
+                                    })) {
+                                        // todo: add for 3d preview
+                                        // miniatureUrl = isExternalMediaAudio(
+                                        //   currentMedia?.previewUrl || null
+                                        // );
+                                        miniatureUrl = '/noContent/noContentObject.svg';
+                                    }
+                                    if (!miniatureUrl) {
+                                        // image and screenshots
+                                        miniatureUrl = (0, Urls_1.getAssetImage)(currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.url, '/noContent/noContent.svg', Urls_1.mediaSizes.small);
+                                    }
+                                    return (react_1.default.createElement(searchSuggestionsItem_1.default, { key: "".concat(asset === null || asset === void 0 ? void 0 : asset.getAssetId(), ".").concat(Math.random()), name: asset === null || asset === void 0 ? void 0 : asset.getName(), link: asset.getAssetLink(), imgUrl: miniatureUrl, searchTerm: searchTerm }));
+                                }),
+                            },
+                        ]
+                        : []), true), ((collections === null || collections === void 0 ? void 0 : collections.length)
+                        ? [
+                            {
+                                caption: 'Collections',
+                                children: collections.map(function (collection) { return (react_1.default.createElement(searchSuggestionsItem_1.default, { key: "".concat(collection === null || collection === void 0 ? void 0 : collection.collectionId, ".").concat(Math.random()), name: collection === null || collection === void 0 ? void 0 : collection.collectionTitle, link: "/collection/".concat(collection === null || collection === void 0 ? void 0 : collection.collectionId), imgUrl: '/noContent/noContent.svg', searchTerm: searchTerm })); }),
+                            },
+                        ]
+                        : []), true), ((profiles === null || profiles === void 0 ? void 0 : profiles.length)
+                        ? [
+                            {
+                                caption: 'Profiles',
+                                children: profiles.map(function (profile) { return (react_1.default.createElement(searchSuggestionsItem_1.default, { key: profile.getUserId(), borderRadius: true, name: profile.getName() || '', link: "/profile/".concat(profile.getUserId(), "/nfts"), imgUrl: profile.getUserPic({
+                                        mediaDomain: (0, env_1.getMediaENVDomain)(),
+                                    }), additionalHTML: Boolean(profile.getFollowings()) && (react_1.default.createElement("span", { className: 'additional' },
+                                        profile.getFollowings(),
+                                        " followers")), searchTerm: searchTerm })); }),
+                            },
+                        ]
+                        : []), true).map(function (_a) {
+                        var caption = _a.caption, children = _a.children;
+                        return (react_1.default.createElement(searchSuggestionsCaption_1.default, { caption: caption, key: caption }, children));
+                    })),
+                    react_1.default.createElement(searchSuggestionsFooter_1.default, null)))))));
+};
+// Export
+exports.default = SearchSuggestions;
+var templateObject_1;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+// Styles
+var StyledSearchSuggestionsCaption = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"])), colors_1.BorderColorLight, typography_1.FH5, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(22));
+// Components
+var SearchSuggestionsCaption = function (_a) {
+    var caption = _a.caption, children = _a.children;
+    return (react_1.default.createElement(StyledSearchSuggestionsCaption, null,
+        react_1.default.createElement("span", { className: 'caption' }, caption),
+        children));
+};
+// Export
+exports.default = SearchSuggestionsCaption;
+var templateObject_1;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var vars_1 = require("@/fonts/vars");
+// Styles
+var StyledSearchSuggestionsFooter = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), vars_1.dmsansFontVarCss.css, typography_1.TextSmall, colors_1.BorderColorLight, colors_1.TextGrayColor, colors_1.BlackColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(12));
+// Components
+var SearchSuggestionsFooter = function () {
+    return (react_1.default.createElement(StyledSearchSuggestionsFooter, null,
+        react_1.default.createElement("div", { className: " footer" },
+            react_1.default.createElement("p", { className: 'text' },
+                "Press ",
+                react_1.default.createElement("strong", null, "Enter"),
+                " to search all results"))));
+};
+// Export
+exports.default = SearchSuggestionsFooter;
+var templateObject_1;