@ludo.ninja/components 1.5.7 → 1.5.9

package/dist/components/search/index.jsx

@@ -0,0 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { AccentColor, BlackColor, BorderColorLight, TextGrayColor, WhiteColor, } from '@/styles/colors';
+import { zIndexSearch } from '@/styles/mixins/z-indexes';
+import { FH6, FH7 } from '@/styles/typography';
+import { SearchInputContainer } from '@/components/search/SearchInputContainer';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import SearchGlassIcon from '@/public/search/search.svg';
+// Styles
+var StyledSearch = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ", ";\n  box-shadow: ", ";\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ", ";\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ", " {\n    //margin: ", " 0 0 0;\n    max-width: ", ";\n    margin: 0 ", " ", ";\n    box-shadow: ", ";\n    width: ", ";\n    height: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n\n    .suggestionBar {\n      top: ", ";\n      padding: 0 ", " ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ", " -\n            ", " - ", " -\n            ", " - ", " -\n            ", "\n        );\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ", ";\n  box-shadow: ", ";\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ", ";\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ", " {\n    //margin: ", " 0 0 0;\n    max-width: ", ";\n    margin: 0 ", " ", ";\n    box-shadow: ", ";\n    width: ", ";\n    height: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n\n    .suggestionBar {\n      top: ", ";\n      padding: 0 ", " ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ", " -\n            ", " - ", " -\n            ", " - ", " -\n            ", "\n        );\n      }\n    }\n  }\n"])), function (props) { return (props.isFocused ? zIndexSearch.toString() : '0'); }, function (props) {
+    return props.isActive ? 'none' : '0 16px 32px -16px rgba(33, 21, 95, 0.12)';
+}, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) {
+    return props.isMobileOpen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        height: unset;\n        width: 100%;\n        margin: 0;\n      "], ["\n        height: unset;\n        width: 100%;\n        margin: 0;\n      "])));
+}, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(30), adaptiveValueCalc(600), adaptiveValueCalc(20), adaptiveValueCalc(50), function (props) {
+    return props.isActive
+        ? 'none'
+        : "0 ".concat(adaptiveValueCalc(16), " ").concat(adaptiveValueCalc(32), " ").concat(adaptiveValueCalc(-16), " rgba(33, 21, 95, 0.12)");
+}, adaptiveValueCalc(600), adaptiveValueCalc(60), adaptiveValueCalc(30), adaptiveValueCalc(30), function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(30);
+}, function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(30);
+}, adaptiveValueCalc(50), adaptiveValueCalc(10), adaptiveValueCalc(10), adaptiveValueCalc(30), adaptiveValueCalc(30), adaptiveValueCalc(124), adaptiveValueCalc(50), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(24), adaptiveValueCalc(44));
+var StyledInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ", ";\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  @media (max-width: 767px) {\n    ", ";\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    height: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ", ";\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  @media (max-width: 767px) {\n    ", ";\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    height: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), dmsansFontVarCss.css, FH7, BlackColor, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, TextGrayColor, FH6, function (props) {
+    return props.isMobileOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      "], ["\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      "])));
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(40), adaptiveValueCalc(52), adaptiveValueCalc(48), function (props) { return (props.isActive ? '0' : adaptiveValueCalc(10)); }, function (props) { return (props.isActive ? '0' : adaptiveValueCalc(10)); }, adaptiveValueCalc(20), adaptiveValueCalc(20), function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(30);
+}, function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(30);
+});
+var StyledSearchIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return (props.isActive ? BorderColorLight : AccentColor); }, mediaQuery.minWidthFourK, adaptiveValueCalc(18), adaptiveValueCalc(18), adaptiveValueCalc(30), adaptiveValueCalc(24), adaptiveValueCalc(24));
+var SearchGlassIconResize = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SearchGlassIcon style={getAdaptiveScale({
+            windowDimensions: windowDimensions,
+            currentSize: 1,
+        })}/>);
+};
+// Components
+var Search = function () { return (<SearchInputContainer isClearOnBlur initializeInputComponent={function (_a) {
+        var searchSuggestion = _a.searchSuggestion, handle = _a.handle, inputRef = _a.inputRef, searchValue = _a.searchValue, isSearchFocused = _a.isSearchFocused, mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder, searchCloseButton = _a.searchCloseButton, isMobileOpen = _a.isMobileOpen;
+        return (<StyledSearch isActive={Boolean(searchValue.length)} isFocused={isSearchFocused} isMobileOpen={isMobileOpen}>
+        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
+          <SearchGlassIconResize />
+        </StyledSearchIcon>
+        <StyledInput isMobileOpen={isMobileOpen} isActive={Boolean(searchValue.length)} tabIndex={0} autoComplete={'off'} onChange={handle.change} ref={inputRef} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
+        {searchCloseButton}
+        {searchSuggestion}
+      </StyledSearch>);
+    }}/>); };
+// Export
+export default Search;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/search/searchCategories/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SearchCategories: () => React.JSX.Element;
+export default SearchCategories;

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

@@ -0,0 +1,55 @@
+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 { TextGrayColor } from '@/styles/colors';
+import { FH3 } from '@/styles/typography';
+var StyledSearchCategories = styled.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"])), FH3, 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 = 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 (<span key={category.id} onClick={function (e) { return handleCategory(e, indx); }}>
+            {category.label}
+          </span>);
+            }
+        });
+    };
+    return (<StyledSearchCategories>
+      <span className={'caption'}>{categoryValue.label}</span>
+      <div className={'arrow_icon'}>
+        <span className={'icon'}/>
+      </div>
+      <div className={'dropdown'}>{renderCategories()}</div>
+    </StyledSearchCategories>);
+};
+// Export
+export default SearchCategories;
+var templateObject_1;

package/dist/components/search/searchCategories/type.d.ts

@@ -0,0 +1,5 @@
+type categoryType = {
+    id: number;
+    label: string;
+};
+export type { categoryType };

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

@@ -0,0 +1 @@
+export {};

package/dist/components/search/searchCloseMoreButtons/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface PositionProps {
+    top?: string;
+    left?: string;
+    right?: string;
+    bottom?: string;
+    transform?: string;
+}
+declare const SearchCloseMoreButtons: ({ isNeedToShow, position, clearSearchValue, }: {
+    isNeedToShow: boolean;
+    position: PositionProps;
+    clearSearchValue: React.Dispatch<React.SetStateAction<string>>;
+}) => React.JSX.Element;
+export default SearchCloseMoreButtons;

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

@@ -0,0 +1,52 @@
+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 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 })}/>);
+};
+// 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('');
+            }}>
+          <SearchCloseIconResize />
+        </StyledCloseIcon>) : null}
+    </StyledSearchCloseMoreButtons>);
+};
+// Export
+export default SearchCloseMoreButtons;
+var templateObject_1, templateObject_2;

package/dist/components/search/searchResultCaption/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const SearchResultCaption: ({ nftCounter, searchQuery, isLoading, }: {
+    nftCounter: number;
+    isLoading: boolean;
+    searchQuery: string | null;
+}) => React.JSX.Element;
+export default SearchResultCaption;

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

@@ -0,0 +1,29 @@
+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';
+// 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));
+// 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'}>
+          <strong>{nftCounter.toLocaleString('ru-RU')}</strong>
+          {searchText}
+        </p>)}
+    </StyledSearchResultCaption>);
+};
+// Export
+export default SearchResultCaption;
+var templateObject_1;

package/dist/components/search/searchSelectsGalleries/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { optionType } from '@/system/Forms/Selects/DesktopSelect/type';
+declare const SearchSelectsGalleries: ({ selectTypeSearchResult, selectBlockchainSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+}) => React.JSX.Element;
+export default SearchSelectsGalleries;

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

@@ -0,0 +1,58 @@
+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 ApplyResetButtons from '@/components/filters/applyResetBtns';
+import GalleryFiltersForm from '@/components/filters/galleriesFiltersForm';
+// import BasicSelect from 'system/Forms/Selects/DesktopSelect';
+import SidebarFilters from '@/components/sidebar/sidebarFilters';
+// 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);
+// 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 ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
+    return (<StyledSearchSelectsNfts>
+      {/*<div className={'select selectType'}>*/}
+      {/*  <BasicSelect options={selectTypeSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectBlockchain'}>*/}
+      {/*  <BasicSelect options={selectBlockchainSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectCategory'}>*/}
+      {/*  <BasicSelect options={selectBlockchainCategoryResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectTime'}>*/}
+      {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
+      {/*</div>*/}
+      <div className={'filterButton'}>
+        <button onClick={function () {
+            openOverLay();
+            setSidebarOpen(true);
+        }}>
+          Filters
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
+        </button>
+      </div>
+      <SidebarFilters 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>);
+};
+// Export
+export default SearchSelectsGalleries;
+var templateObject_1;

package/dist/components/search/searchSelectsSets/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { optionType } from '@/system/Forms/Selects/DesktopSelect/type';
+declare const SearchSelectsSets: ({ selectTypeSearchResult, selectBlockchainCategoryResult, selectBlockchainTimeResult, }: {
+    selectTypeSearchResult: optionType[];
+    selectBlockchainCategoryResult: optionType[];
+    selectBlockchainTimeResult: optionType[];
+}) => React.JSX.Element;
+export default SearchSelectsSets;

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

@@ -0,0 +1,54 @@
+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 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 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 ({
+        openOverLay: state.openOverLay,
+        closeOverlay: state.closeOverlay,
+    }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
+    return (<StyledSearchSelectsNfts>
+      {/*<div className={'select selectType'}>*/}
+      {/*  <BasicSelect options={selectTypeSearchResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectCategory'}>*/}
+      {/*  <BasicSelect options={selectBlockchainCategoryResult} />*/}
+      {/*</div>*/}
+      {/*<div className={'select selectTime'}>*/}
+      {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
+      {/*</div>*/}
+      <div className={'filterButton'}>
+        <button onClick={function () {
+            openOverLay();
+            setSidebarOpen(true);
+        }}>
+          Filters
+          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
+        </button>
+      </div>
+      <SidebarFilters 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>);
+};
+// Export
+export default SearchSelectsSets;
+var templateObject_1;

package/dist/components/search/searchSimpleInput/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const SearchSimpleInput: ({ onFocusHandler, }: {
+    onFocusHandler: (arg: boolean) => void;
+}) => React.JSX.Element;
+export default SearchSimpleInput;

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

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { FH6 } from '@/styles/typography';
+import { SearchInputContainer } from '@/components/search/SearchInputContainer';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import SearchGlassIcon from '@/public/search/search.svg';
+// Styles
+var StyledSearchSimpleInput = styled.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"])), mediaQuery.mobile, function (props) {
+    return props.isMobileOpen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "])));
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(40));
+var StyledInput = styled.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'); }, dmsansFontVarCss.css, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.placeholderText;
+}, mediaQuery.mobile, FH6, mediaQuery.minWidthFourK, adaptiveValueCalc(40), adaptiveValueCalc(14), adaptiveValueCalc(48), adaptiveValueCalc(48), adaptiveValueCalc(24), adaptiveValueCalc(24), function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(24);
+}, function (props) {
+    return props.isActive ? 'none' : adaptiveValueCalc(24);
+});
+var StyledSearchIcon = styled.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;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(16));
+var SearchGlassIconResize = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SearchGlassIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
+};
+// Components
+var SearchSimpleInput = function (_a) {
+    var onFocusHandler = _a.onFocusHandler;
+    return (<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 (<StyledSearchSimpleInput isMobileOpen={isMobileOpen}>
+        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
+          <SearchGlassIconResize />
+        </StyledSearchIcon>
+        <StyledInput isActive={Boolean(searchValue.length) && isSearchFocused} autoComplete={'off'} onChange={handle.change} ref={inputRef} tabIndex={1} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
+        {searchCloseButton}
+        {isSearchFocused && searchSuggestion}
+      </StyledSearchSimpleInput>);
+        }}/>);
+};
+// Export
+export default SearchSimpleInput;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { collectionsSchema as schema } from '@ludo.ninja/api';
+import { ProfileEntity } from '@ludo.ninja/core';
+import AssetEntity from '@/dto/AssetEntity';
+interface Props {
+    assets: AssetEntity[];
+    profiles: ProfileEntity[];
+    collections: schema.ICollection[];
+    searchTerm: string;
+    isLoading: boolean;
+    isMobile?: boolean;
+}
+declare const SearchSuggestions: React.FC<Props>;
+export default SearchSuggestions;

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

@@ -0,0 +1,119 @@
+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));
+};
+import React from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import SearchSuggestionsCaption from '@/components/search/searchSuggestions/searchSuggestionsCaption';
+import SearchSuggestionsFooter from '@/components/search/searchSuggestions/searchSuggestionsFooter';
+import SearchSuggestionsItem from '@/components/search/searchSuggestions/searchSuggestionsItem';
+import { SearchSuggestionsItemsSkeleton } from '@/components/search/searchSuggestions/searchSuggestionsItem/searchSuggestionsItemSkeleton';
+import SearchSuggestionsNotFound from '@/components/search/searchSuggestions/searchSuggestionsNotFound';
+import { isObject3D } from '@/utils/3d';
+import { getMediaENVDomain } from '@/utils/env';
+import { getAssetImage, isExternalMediaAudio, isExternalMediaVideo, mediaSizes, } from '@/dto/common/Media/Urls';
+// Styles
+var StyledSearchSuggestions = styled.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;
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(28), adaptiveValueCalc(28), adaptiveValueCalc(44), adaptiveValueCalc(20), 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 (<StyledSearchSuggestions>
+      <div className={'content'}>
+        {isLoading && <SearchSuggestionsItemsSkeleton />}
+        {!isLoading &&
+            (isNotFound ? (<SearchSuggestionsNotFound notFoundText={searchTerm}/>) : (<>
+              <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 = isExternalMediaVideo((currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.previewUrl) || null);
+                                }
+                                if (mimeType === null || mimeType === void 0 ? void 0 : mimeType.includes('audio')) {
+                                    miniatureUrl = isExternalMediaAudio((currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.previewUrl) || null);
+                                }
+                                if (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 = getAssetImage(currentMedia === null || currentMedia === void 0 ? void 0 : currentMedia.url, '/noContent/noContent.svg', mediaSizes.small);
+                                }
+                                return (<SearchSuggestionsItem 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 (<SearchSuggestionsItem 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 (<SearchSuggestionsItem key={profile.getUserId()} borderRadius name={profile.getName() || ''} link={"/profile/".concat(profile.getUserId(), "/nfts")} imgUrl={profile.getUserPic({
+                                    mediaDomain: getMediaENVDomain(),
+                                })} additionalHTML={Boolean(profile.getFollowings()) && (<span className={'additional'}>
+                                    {profile.getFollowings()} followers
+                                  </span>)} searchTerm={searchTerm}/>); }),
+                        },
+                    ]
+                    : []), true).map(function (_a) {
+                    var caption = _a.caption, children = _a.children;
+                    return (<SearchSuggestionsCaption caption={caption} key={caption}>
+                    {children}
+                  </SearchSuggestionsCaption>);
+                })}
+              </div>
+              <SearchSuggestionsFooter />
+            </>))}
+      </div>
+    </StyledSearchSuggestions>);
+};
+// Export
+export default SearchSuggestions;
+var templateObject_1;