@ludo.ninja/components 1.1.2 → 1.1.4

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

@@ -1,228 +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 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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 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) {
+}, 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) {
+}, 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) {
+}, 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) {
+}, 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) {
+});
+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)
-);
+        ? 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,
-      })}
-    />
-  );
+    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>
-        );
-      }}
-    />
-  );
+    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;

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

@@ -1,128 +1,51 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __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';
-
-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 { 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 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) {
+}, function (_a) {
     var theme = _a.theme;
     return theme.colors.thirdBg;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(28),
-  adaptiveValueCalc(28),
-  adaptiveValueCalc(44),
-  adaptiveValueCalc(20),
-  adaptiveValueCalc(20)
-);
+}, 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>
+    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} />
-          ) : (
-            <>
+            (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) {
+                {__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()
@@ -133,191 +56,63 @@ var SearchSuggestions = function (_a) {
                                 //   );
                                 //   console.log('asset', asset);
                                 // }
-                                var currentMedia =
-                                  asset === null || asset === void 0
-                                    ? void 0
-                                    : asset.getAssetMedias()[0];
+                                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
-                                  );
+                                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 (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 (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
-                                  );
+                                    // 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}
-                                />
-                              );
+                                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
-                  ),
-                  (
-                    profiles === null || profiles === void 0
-                      ? void 0
-                      : profiles.length
-                  )
+                        },
+                    ]
+                    : []), true), ((collections === null || collections === void 0 ? void 0 : collections.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}
-                              />
-                            );
-                          }),
+                            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>
-                  );
+                    ]
+                    : []), true).map(function (_a) {
+                    var caption = _a.caption, children = _a.children;
+                    return (<SearchSuggestionsCaption caption={caption} key={caption}>
+                    {children}
+                  </SearchSuggestionsCaption>);
                 })}
               </div>
               <SearchSuggestionsFooter />
-            </>
-          ))}
+            </>))}
       </div>
-    </StyledSearchSuggestions>
-  );
+    </StyledSearchSuggestions>);
 };
 // Export
 export default SearchSuggestions;