@ludo.ninja/components 2.0.10 → 2.0.12

package/build/components/search/SearchInputContainer.js

@@ -1,94 +1,65 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchInputContainer = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const router_1 = require("next/router");
-const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
-const styled_components_1 = __importStar(require("styled-components"));
-const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const utils_1 = require("@ludo.ninja/utils");
-const useFetchFindAllTopEntitiesByName_1 = require("../../api/server-search/queries/useFetchFindAllTopEntitiesByName");
-const searchCloseMoreButtons_1 = __importDefault(require("./searchCloseMoreButtons"));
-const searchSuggestions_1 = __importDefault(require("./searchSuggestions"));
-const env_1 = require("../../store/env");
-const ui_1 = require("../../store/ui");
-const ScreenWidth_1 = require("../../styles/ScreenWidth");
-const screen_1 = require("../../utils/screen");
-const seacrhTabs_1 = require("../../utils/seacrhTabs");
-const back_svg_1 = __importDefault(require("../../public/search/back"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useRef, useState, } from 'react';
+import { useRouter } from 'next/router';
+import _debounce from 'lodash.debounce';
+import styled, { keyframes } from 'styled-components';
+import { WhiteColor } from '@ludo.ninja/ui/build/styles/colors';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { rootAddOverflow, rootRemoveOverflow } from '@ludo.ninja/utils';
+import { useFetchFindAllTopEntitiesByName } from "../../api/server-search/queries/useFetchFindAllTopEntitiesByName";
+import SearchCloseMoreButtons from "./searchCloseMoreButtons";
+import SearchSuggestions from "./searchSuggestions";
+import { useEnvStore } from "../../store/env";
+import { useUiStore } from "../../store/ui";
+import { mediaQuery } from "../../styles/ScreenWidth";
+import { useWindowDimensionsWithServerInitial } from "../../utils/screen";
+import { searchTabs } from "../../utils/seacrhTabs";
+import BackIcon from "../../public/search/back";
 const enterKey = 'Enter';
-const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputComponent, }) => {
-    const NEXT_PUBLIC_ENV_SEARCH_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_SEARCH_DOMAIN);
-    const inputSearch = (0, react_1.useRef)(null);
-    const [searchValue, setSearchValue] = (0, react_1.useState)('');
+export const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputComponent, }) => {
+    const NEXT_PUBLIC_ENV_SEARCH_DOMAIN = useEnvStore((state) => state.NEXT_PUBLIC_ENV_SEARCH_DOMAIN);
+    const inputSearch = useRef(null);
+    const [searchValue, setSearchValue] = useState('');
     //fix cache apollo with debounce
-    const [debouncedValue, setDebouncedValue] = (0, react_1.useState)('');
-    const [isDebounceLoading, setIsDebounceLoading] = (0, react_1.useState)(false);
-    const [isSearchFocused, setSearchFocused] = (0, react_1.useState)(false);
-    const { openOverLay, closeOverlay } = (0, ui_1.useUiStore)((state) => ({
+    const [debouncedValue, setDebouncedValue] = useState('');
+    const [isDebounceLoading, setIsDebounceLoading] = useState(false);
+    const [isSearchFocused, setSearchFocused] = useState(false);
+    const { openOverLay, closeOverlay } = useUiStore((state) => ({
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
     }));
-    const { isMobile } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    const { load, topEntities, loading, clearTopEntitiesState } = (0, useFetchFindAllTopEntitiesByName_1.useFetchFindAllTopEntitiesByName)();
-    const router = (0, router_1.useRouter)();
-    (0, react_1.useEffect)(() => {
+    const { isMobile } = useWindowDimensionsWithServerInitial();
+    const { load, topEntities, loading, clearTopEntitiesState } = useFetchFindAllTopEntitiesByName();
+    const router = useRouter();
+    useEffect(() => {
         const term = router.query?.term;
         if (term) {
             setSearchValue(term);
         }
     }, []);
-    const updateDebouncedValue = (0, react_1.useCallback)((0, lodash_debounce_1.default)(setDebouncedValue, 200), []);
-    (0, react_1.useEffect)(() => {
+    const updateDebouncedValue = useCallback(_debounce(setDebouncedValue, 200), []);
+    useEffect(() => {
         if (searchValue.length) {
             setIsDebounceLoading(true);
         }
         updateDebouncedValue(searchValue);
     }, [searchValue]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (debouncedValue.length) {
             load({ name: debouncedValue, pageSize: 4 }).then(() => {
                 setIsDebounceLoading(false);
             });
         }
     }, [debouncedValue]);
-    const [isMobileOpen, setIsMobileOpen] = (0, react_1.useState)(false);
-    const Container = isMobileOpen ? SMobileContainer : react_1.default.Fragment;
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+    const Container = isMobileOpen ? SMobileContainer : React.Fragment;
     const SearchContainer = isMobileOpen
         ? SMobileSearchContainer
-        : react_1.default.Fragment;
-    const searchSuggestion = ((0, jsx_runtime_1.jsx)(searchSuggestions_1.default, { isLoading: loading || isDebounceLoading, searchTerm: debouncedValue, assets: topEntities?.assets || [], profiles: topEntities?.profiles || [], collections: topEntities?.collections || [] }));
-    return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsxs)(SearchContainer, { children: [isMobileOpen && ((0, jsx_runtime_1.jsx)(back_svg_1.default, { onClick: () => {
+        : React.Fragment;
+    const searchSuggestion = (_jsx(SearchSuggestions, { isLoading: loading || isDebounceLoading, searchTerm: debouncedValue, assets: topEntities?.assets || [], profiles: topEntities?.profiles || [], collections: topEntities?.collections || [] }));
+    return (_jsxs(Container, { children: [_jsxs(SearchContainer, { children: [isMobileOpen && (_jsx(BackIcon, { onClick: () => {
                             setIsMobileOpen(false);
-                            (0, utils_1.rootRemoveOverflow)();
+                            rootRemoveOverflow();
                             if (isClearOnBlur) {
                                 setSearchValue('');
                                 clearTopEntitiesState();
@@ -108,7 +79,7 @@ const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputCo
                                 }
                                 if (isMobile) {
                                     setIsMobileOpen(true);
-                                    (0, utils_1.rootAddOverflow)();
+                                    rootAddOverflow();
                                     return;
                                 }
                                 openOverLay();
@@ -123,7 +94,7 @@ const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputCo
                                     return;
                                 }
                                 if (isMobile) {
-                                    (0, utils_1.rootRemoveOverflow)();
+                                    rootRemoveOverflow();
                                     return;
                                 }
                                 setTimeout(() => {
@@ -142,7 +113,7 @@ const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputCo
                                     const { value } = e.target;
                                     const newSearchValue = value.length ? searchValue : '';
                                     if (NEXT_PUBLIC_ENV_SEARCH_DOMAIN?.includes('search.') &&
-                                        seacrhTabs_1.searchTabs.find((el) => router.pathname.includes(el.link))) {
+                                        searchTabs.find((el) => router.pathname.includes(el.link))) {
                                         await router.replace({
                                             query: { ...router.query, term: newSearchValue },
                                         }, undefined, { shallow: true });
@@ -151,7 +122,7 @@ const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputCo
                                         closeOverlay();
                                     }
                                     else {
-                                        window.open(`${NEXT_PUBLIC_ENV_SEARCH_DOMAIN}/${seacrhTabs_1.searchTabs[0].link}${newSearchValue ? `?term=${newSearchValue}` : ''}`, '_self');
+                                        window.open(`${NEXT_PUBLIC_ENV_SEARCH_DOMAIN}/${searchTabs[0].link}${newSearchValue ? `?term=${newSearchValue}` : ''}`, '_self');
                                         // await router.push({
                                         //   pathname: searchTabs[0].link,
                                         //   query: { term: newSearchValue },
@@ -163,16 +134,15 @@ const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputCo
                                 }
                             },
                         },
-                        searchSuggestion: !isMobile && searchValue && ((0, jsx_runtime_1.jsx)("div", { className: "suggestionBar", children: searchSuggestion })),
-                        searchCloseButton: ((0, jsx_runtime_1.jsx)(searchCloseMoreButtons_1.default, { isNeedToShow: Boolean(searchValue.length), position: {
+                        searchSuggestion: !isMobile && searchValue && (_jsx("div", { className: "suggestionBar", children: searchSuggestion })),
+                        searchCloseButton: (_jsx(SearchCloseMoreButtons, { isNeedToShow: Boolean(searchValue.length), position: {
                                 top: '50%',
                                 right: '0',
                                 transform: 'translate(-50%, -50%)',
                             }, clearSearchValue: setSearchValue })),
-                    })] }), isMobileOpen && searchValue && ((0, jsx_runtime_1.jsx)(SSuggestions, { children: searchSuggestion }))] }));
+                    })] }), isMobileOpen && searchValue && (_jsx(SSuggestions, { children: searchSuggestion }))] }));
 };
-exports.SearchInputContainer = SearchInputContainer;
-const show = (0, styled_components_1.keyframes) `
+const show = keyframes `
   0% {
     opacity: 0;
   }
@@ -180,31 +150,31 @@ const show = (0, styled_components_1.keyframes) `
     opacity: 1;
   }
 `;
-const SMobileContainer = styled_components_1.default.div `
+const SMobileContainer = styled.div `
   position: fixed;
   z-index: 100000;
   top: 0;
   left: 0;
   width: 100vw;
   height: var(--app-height);
-  background-color: ${colors_1.WhiteColor};
+  background-color: ${WhiteColor};
   padding: 17px 20px 0;
   animation: ${show} 300ms forwards;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    padding: ${(0, _4k_1.adaptiveValueCalc)(17)} ${(0, _4k_1.adaptiveValueCalc)(20)} 0;
+  ${mediaQuery.minWidthFourK} {
+    padding: ${adaptiveValueCalc(17)} ${adaptiveValueCalc(20)} 0;
   }
 `;
-const SMobileSearchContainer = styled_components_1.default.div `
+const SMobileSearchContainer = styled.div `
   display: flex;
   align-items: center;
   gap: 2px;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    gap: ${(0, _4k_1.adaptiveValueCalc)(2)};
+  ${mediaQuery.minWidthFourK} {
+    gap: ${adaptiveValueCalc(2)};
   }
 `;
-const SSuggestions = styled_components_1.default.div `
+const SSuggestions = styled.div `
   display: flex;
   overflow-y: auto;
   overflow-x: hidden;
@@ -215,12 +185,12 @@ const SSuggestions = styled_components_1.default.div `
   padding-right: 5px;
   width: calc(100% + 10px);
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: calc(100% - ${(0, _4k_1.adaptiveValueCalc)(36)} - ${(0, _4k_1.adaptiveValueCalc)(17)});
-    margin-left: ${(0, _4k_1.adaptiveValueCalc)(-5)};
-    margin-right: ${(0, _4k_1.adaptiveValueCalc)(-5)};
-    padding-left: ${(0, _4k_1.adaptiveValueCalc)(5)};
-    padding-right: ${(0, _4k_1.adaptiveValueCalc)(5)};
-    width: calc(100% + ${(0, _4k_1.adaptiveValueCalc)(10)});
+  ${mediaQuery.minWidthFourK} {
+    height: calc(100% - ${adaptiveValueCalc(36)} - ${adaptiveValueCalc(17)});
+    margin-left: ${adaptiveValueCalc(-5)};
+    margin-right: ${adaptiveValueCalc(-5)};
+    padding-left: ${adaptiveValueCalc(5)};
+    padding-right: ${adaptiveValueCalc(5)};
+    width: calc(100% + ${adaptiveValueCalc(10)});
   }
 `;

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

@@ -1,17 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const router_1 = require("next/router");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const scale_1 = require("../../../utils/adaptive/scale");
-const screen_1 = require("../../../utils/screen");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const close_svg_1 = __importDefault(require("../../../public/search/close"));
-const StyledSearchCloseMoreButtons = styled_components_1.default.div `
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { getAdaptiveScale } from "../../../utils/adaptive/scale";
+import { useWindowDimensionsWithServerInitial } from "../../../utils/screen";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import SearchCloseIcon from "../../../public/search/close";
+const StyledSearchCloseMoreButtons = styled.div `
   position: absolute;
   right: ${(props) => props.position.right};
   top: ${(props) => props.position.top};
@@ -20,30 +15,30 @@ const StyledSearchCloseMoreButtons = styled_components_1.default.div `
   transform: ${(props) => props.position.transform};
   display: flex;
   height: 40px;
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(40)};
   }
 `;
-const StyledCloseIcon = styled_components_1.default.div `
+const StyledCloseIcon = styled.div `
   cursor: pointer;
   z-index: 1;
   padding: 8px 6px;
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+  ${mediaQuery.minWidthFourK} {
     display: flex;
     align-items: center;
-    padding: ${(0, _4k_1.adaptiveValueCalc)(8)} ${(0, _4k_1.adaptiveValueCalc)(6)};
+    padding: ${adaptiveValueCalc(8)} ${adaptiveValueCalc(6)};
   }
 `;
 const SearchCloseIconResize = () => {
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    return ((0, jsx_runtime_1.jsx)(close_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }));
+    const { windowDimensions } = useWindowDimensionsWithServerInitial();
+    return (_jsx(SearchCloseIcon, { style: getAdaptiveScale({ windowDimensions, currentSize: 1 }) }));
 };
 // Components
 const SearchCloseMoreButtons = ({ isNeedToShow, position, clearSearchValue, }) => {
-    const router = (0, router_1.useRouter)();
+    const router = useRouter();
     const { term } = router.query;
-    return ((0, jsx_runtime_1.jsx)(StyledSearchCloseMoreButtons, { position: position, children: isNeedToShow ? ((0, jsx_runtime_1.jsx)(StyledCloseIcon, { onClick: () => {
+    return (_jsx(StyledSearchCloseMoreButtons, { position: position, children: isNeedToShow ? (_jsx(StyledCloseIcon, { onClick: () => {
                 if (term) {
                     router
                         .push({
@@ -52,7 +47,7 @@ const SearchCloseMoreButtons = ({ isNeedToShow, position, clearSearchValue, }) =
                         .then(() => clearSearchValue(''));
                 }
                 clearSearchValue('');
-            }, children: (0, jsx_runtime_1.jsx)(SearchCloseIconResize, {}) })) : null }));
+            }, children: _jsx(SearchCloseIconResize, {}) })) : null }));
 };
 // Export
-exports.default = SearchCloseMoreButtons;
+export default SearchCloseMoreButtons;

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

@@ -1,43 +1,15 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importStar(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const SearchInputContainer_1 = require("../SearchInputContainer");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const typography_1 = require("../../../styles/typography");
-const scale_1 = require("../../../utils/adaptive/scale");
-const screen_1 = require("../../../utils/screen");
-const vars_1 = require("../../../fonts/vars");
-const search_svg_1 = __importDefault(require("../../../public/search/search"));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { SearchInputContainer } from "../SearchInputContainer";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { FH6 } from "../../../styles/typography";
+import { getAdaptiveScale } from "../../../utils/adaptive/scale";
+import { useWindowDimensionsWithServerInitial } from "../../../utils/screen";
+import { dmsansFontVarCss } from "../../../fonts/vars";
+import SearchGlassIcon from "../../../public/search/search";
 // Styles
-const StyledSearchSimpleInput = styled_components_1.default.div `
+const StyledSearchSimpleInput = styled.div `
   position: relative;
   width: 40%;
 
@@ -48,21 +20,21 @@ const StyledSearchSimpleInput = styled_components_1.default.div `
     right: 0;
   }
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
+  ${mediaQuery.mobile} {
     width: 188px;
     ${(props) => props.isMobileOpen &&
-    (0, styled_components_1.css) `
+    css `
         width: 100%;
       `}
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+  ${mediaQuery.minWidthFourK} {
     .suggestionBar {
-      top: ${(0, _4k_1.adaptiveValueCalc)(40)};
+      top: ${adaptiveValueCalc(40)};
     }
   }
 `;
-const StyledInput = styled_components_1.default.input `
+const StyledInput = styled.input `
   position: relative;
   width: 100%;
   height: 40px;
@@ -79,30 +51,30 @@ const StyledInput = styled_components_1.default.input `
   border-top-left-radius: 24px;
   border-bottom-right-radius: ${(props) => (props.isActive ? 'none' : '24px')};
   border-bottom-left-radius: ${(props) => (props.isActive ? 'none' : '24px')};
-  font-family: ${vars_1.dmsansFontVarCss.css};
+  font-family: ${dmsansFontVarCss.css};
 
   ::placeholder {
     color: ${({ theme }) => theme.colors.placeholderText};
   }
 
-  ${ScreenWidth_1.mediaQuery.mobile} {
-    ${typography_1.FH6};
+  ${mediaQuery.mobile} {
+    ${FH6};
     padding-left: 32px;
     height: 36px;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    height: ${(0, _4k_1.adaptiveValueCalc)(40)};
-    font-size: ${(0, _4k_1.adaptiveValueCalc)(14)};
-    padding-left: ${(0, _4k_1.adaptiveValueCalc)(48)};
-    padding-right: ${(0, _4k_1.adaptiveValueCalc)(48)};
-    border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
-    border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
-    border-bottom-right-radius: ${(props) => props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24)};
-    border-bottom-left-radius: ${(props) => props.isActive ? 'none' : (0, _4k_1.adaptiveValueCalc)(24)};
+  ${mediaQuery.minWidthFourK} {
+    height: ${adaptiveValueCalc(40)};
+    font-size: ${adaptiveValueCalc(14)};
+    padding-left: ${adaptiveValueCalc(48)};
+    padding-right: ${adaptiveValueCalc(48)};
+    border-top-right-radius: ${adaptiveValueCalc(24)};
+    border-top-left-radius: ${adaptiveValueCalc(24)};
+    border-bottom-right-radius: ${(props) => props.isActive ? 'none' : adaptiveValueCalc(24)};
+    border-bottom-left-radius: ${(props) => props.isActive ? 'none' : adaptiveValueCalc(24)};
   }
 `;
-const StyledSearchIcon = styled_components_1.default.div `
+const StyledSearchIcon = styled.div `
   position: absolute;
   top: 8px;
   bottom: 8px;
@@ -123,17 +95,17 @@ const StyledSearchIcon = styled_components_1.default.div `
     left: 8px;
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    top: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    bottom: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    left: ${(0, _4k_1.adaptiveValueCalc)(16)};
+  ${mediaQuery.minWidthFourK} {
+    top: ${adaptiveValueCalc(8)};
+    bottom: ${adaptiveValueCalc(8)};
+    left: ${adaptiveValueCalc(16)};
   }
 `;
 const SearchGlassIconResize = () => {
-    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    return ((0, jsx_runtime_1.jsx)(search_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }));
+    const { windowDimensions } = useWindowDimensionsWithServerInitial();
+    return (_jsx(SearchGlassIcon, { style: getAdaptiveScale({ windowDimensions, currentSize: 1 }) }));
 };
 // Components
-const SearchSimpleInput = ({ onFocusHandler, }) => ((0, jsx_runtime_1.jsx)(SearchInputContainer_1.SearchInputContainer, { onFocusHandler: onFocusHandler, initializeInputComponent: ({ searchValue, handle, inputRef, isSearchFocused, mobileOrDesktopPlaceHolder, searchSuggestion, isMobileOpen, searchCloseButton, }) => ((0, jsx_runtime_1.jsxs)(StyledSearchSimpleInput, { isMobileOpen: isMobileOpen, children: [(0, jsx_runtime_1.jsx)(StyledSearchIcon, { isActive: Boolean(searchValue.length), children: (0, jsx_runtime_1.jsx)(SearchGlassIconResize, {}) }), (0, jsx_runtime_1.jsx)(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] })) }));
+const SearchSimpleInput = ({ onFocusHandler, }) => (_jsx(SearchInputContainer, { onFocusHandler: onFocusHandler, initializeInputComponent: ({ searchValue, handle, inputRef, isSearchFocused, mobileOrDesktopPlaceHolder, searchSuggestion, isMobileOpen, searchCloseButton, }) => (_jsxs(StyledSearchSimpleInput, { isMobileOpen: isMobileOpen, children: [_jsx(StyledSearchIcon, { isActive: Boolean(searchValue.length), children: _jsx(SearchGlassIconResize, {}) }), _jsx(StyledInput, { isActive: Boolean(searchValue.length) && isSearchFocused, autoComplete: 'off', onChange: handle.change, ref: inputRef, tabIndex: 1, onFocus: handle.focus, onBlur: handle.blur, onKeyPress: handle.keyPress, value: searchValue, type: 'text', placeholder: mobileOrDesktopPlaceHolder }), searchCloseButton, isSearchFocused && searchSuggestion] })) }));
 // Export
-exports.default = SearchSimpleInput;
+export default SearchSimpleInput;

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

@@ -1,22 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-const searchSuggestionsCaption_1 = __importDefault(require("./searchSuggestionsCaption"));
-const searchSuggestionsFooter_1 = __importDefault(require("./searchSuggestionsFooter"));
-const searchSuggestionsItem_1 = __importDefault(require("./searchSuggestionsItem"));
-const searchSuggestionsItemSkeleton_1 = require("./searchSuggestionsItem/searchSuggestionsItemSkeleton");
-const searchSuggestionsNotFound_1 = __importDefault(require("./searchSuggestionsNotFound"));
-const Urls_1 = require("../../../dto/common/Media/Urls");
-const env_1 = require("../../../store/env");
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const _3d_1 = require("../../../utils/3d");
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import SearchSuggestionsCaption from "./searchSuggestionsCaption";
+import SearchSuggestionsFooter from "./searchSuggestionsFooter";
+import SearchSuggestionsItem from "./searchSuggestionsItem";
+import { SearchSuggestionsItemsSkeleton } from "./searchSuggestionsItem/searchSuggestionsItemSkeleton";
+import SearchSuggestionsNotFound from "./searchSuggestionsNotFound";
+import { getAssetImage, isExternalMediaAudio, isExternalMediaVideo, mediaSizes, } from "../../../dto/common/Media/Urls";
+import { useEnvStore } from "../../../store/env";
+import { mediaQuery } from "../../../styles/ScreenWidth";
+import { isObject3D } from "../../../utils/3d";
 // Styles
-const StyledSearchSuggestions = styled_components_1.default.div `
+const StyledSearchSuggestions = styled.div `
   position: relative;
   z-index: 1;
   width: 100%;
@@ -55,28 +50,28 @@ const StyledSearchSuggestions = styled_components_1.default.div `
     }
   }
 
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
-    border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(28)};
+  ${mediaQuery.minWidthFourK} {
+    border-bottom-left-radius: ${adaptiveValueCalc(28)};
+    border-bottom-right-radius: ${adaptiveValueCalc(28)};
 
     .content {
-      padding: 0 ${(0, _4k_1.adaptiveValueCalc)(44)};
-      border-bottom-right-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
-      border-bottom-left-radius: ${(0, _4k_1.adaptiveValueCalc)(20)};
+      padding: 0 ${adaptiveValueCalc(44)};
+      border-bottom-right-radius: ${adaptiveValueCalc(20)};
+      border-bottom-left-radius: ${adaptiveValueCalc(20)};
     }
   }
 `;
 // Components
 const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoading, }) => {
     const isNotFound = !assets?.length && !profiles?.length && !collections?.length;
-    const { getMediaENVDomain, getVideoENVDomain, getAudioENVDomain, NEXT_PUBLIC_STATIC_DOMAIN, } = (0, env_1.useEnvStore)((state) => ({
+    const { getMediaENVDomain, getVideoENVDomain, getAudioENVDomain, NEXT_PUBLIC_STATIC_DOMAIN, } = useEnvStore((state) => ({
         getMediaENVDomain: state.getMediaDomain,
         getVideoENVDomain: state.getVideoDomain,
         getAudioENVDomain: state.getAudioDomain,
         NEXT_PUBLIC_STATIC_DOMAIN: state.NEXT_PUBLIC_STATIC_DOMAIN,
     }));
-    return ((0, jsx_runtime_1.jsx)(StyledSearchSuggestions, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [isLoading && (0, jsx_runtime_1.jsx)(searchSuggestionsItemSkeleton_1.SearchSuggestionsItemsSkeleton, {}), !isLoading &&
-                    (isNotFound ? ((0, jsx_runtime_1.jsx)(searchSuggestionsNotFound_1.default, { notFoundText: searchTerm })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "scroller", children: [
+    return (_jsx(StyledSearchSuggestions, { children: _jsxs("div", { className: 'content', children: [isLoading && _jsx(SearchSuggestionsItemsSkeleton, {}), !isLoading &&
+                    (isNotFound ? (_jsx(SearchSuggestionsNotFound, { notFoundText: searchTerm })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "scroller", children: [
                                     ...(assets?.length
                                         ? [
                                             {
@@ -97,12 +92,12 @@ const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoadin
                                                     let miniatureUrl = '';
                                                     const mimeType = currentMedia?.mimeType;
                                                     if (mimeType?.includes('video')) {
-                                                        miniatureUrl = (0, Urls_1.isExternalMediaVideo)(currentMedia?.previewUrl || null, getVideoENVDomain);
+                                                        miniatureUrl = isExternalMediaVideo(currentMedia?.previewUrl || null, getVideoENVDomain);
                                                     }
                                                     if (mimeType?.includes('audio')) {
-                                                        miniatureUrl = (0, Urls_1.isExternalMediaAudio)(currentMedia?.previewUrl || null, getAudioENVDomain);
+                                                        miniatureUrl = isExternalMediaAudio(currentMedia?.previewUrl || null, getAudioENVDomain);
                                                     }
-                                                    if ((0, _3d_1.isObject3D)({
+                                                    if (isObject3D({
                                                         media: currentMedia?.url,
                                                         mimeType: currentMedia?.mimeType,
                                                     })) {
@@ -114,9 +109,9 @@ const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoadin
                                                     }
                                                     if (!miniatureUrl) {
                                                         // image and screenshots
-                                                        miniatureUrl = (0, Urls_1.getAssetImage)(currentMedia?.url, '/noContent/noContent.svg', Urls_1.mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN);
+                                                        miniatureUrl = getAssetImage(currentMedia?.url, '/noContent/noContent.svg', mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN);
                                                     }
-                                                    return ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: asset?.getName(), link: asset.getAssetLink(), imgUrl: miniatureUrl, searchTerm: searchTerm }, `${asset?.getAssetId()}.${Math.random()}`));
+                                                    return (_jsx(SearchSuggestionsItem, { name: asset?.getName(), link: asset.getAssetLink(), imgUrl: miniatureUrl, searchTerm: searchTerm }, `${asset?.getAssetId()}.${Math.random()}`));
                                                 }),
                                             },
                                         ]
@@ -125,7 +120,7 @@ const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoadin
                                         ? [
                                             {
                                                 caption: 'Collections',
-                                                children: collections.map((collection) => ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { name: collection?.collectionTitle, link: `/collection/${collection?.collectionId}`, imgUrl: '/noContent/noContent.svg', searchTerm: searchTerm }, `${collection?.collectionId}.${Math.random()}`))),
+                                                children: collections.map((collection) => (_jsx(SearchSuggestionsItem, { name: collection?.collectionTitle, link: `/collection/${collection?.collectionId}`, imgUrl: '/noContent/noContent.svg', searchTerm: searchTerm }, `${collection?.collectionId}.${Math.random()}`))),
                                             },
                                         ]
                                         : []),
@@ -133,13 +128,13 @@ const SearchSuggestions = ({ searchTerm, assets, profiles, collections, isLoadin
                                         ? [
                                             {
                                                 caption: 'Profiles',
-                                                children: profiles.map((profile) => ((0, jsx_runtime_1.jsx)(searchSuggestionsItem_1.default, { borderRadius: true, name: profile.getName() || '', link: `/profile/${profile.getUserId()}/nfts`, imgUrl: profile.getUserPic({
+                                                children: profiles.map((profile) => (_jsx(SearchSuggestionsItem, { borderRadius: true, name: profile.getName() || '', link: `/profile/${profile.getUserId()}/nfts`, imgUrl: profile.getUserPic({
                                                         mediaDomain: getMediaENVDomain(),
-                                                    }), additionalHTML: Boolean(profile.getFollowings()) && ((0, jsx_runtime_1.jsxs)("span", { className: 'additional', children: [profile.getFollowings(), " followers"] })), searchTerm: searchTerm }, profile.getUserId()))),
+                                                    }), additionalHTML: Boolean(profile.getFollowings()) && (_jsxs("span", { className: 'additional', children: [profile.getFollowings(), " followers"] })), searchTerm: searchTerm }, profile.getUserId()))),
                                             },
                                         ]
                                         : []),
-                                ].map(({ caption, children }) => ((0, jsx_runtime_1.jsx)(searchSuggestionsCaption_1.default, { caption: caption, children: children }, caption))) }), (0, jsx_runtime_1.jsx)(searchSuggestionsFooter_1.default, {})] })))] }) }));
+                                ].map(({ caption, children }) => (_jsx(SearchSuggestionsCaption, { caption: caption, children: children }, caption))) }), _jsx(SearchSuggestionsFooter, {})] })))] }) }));
 };
 // Export
-exports.default = SearchSuggestions;
+export default SearchSuggestions;