@ludo.ninja/components 2.3.4 → 2.3.6

package/build/components/headers/header/index.js

@@ -1,36 +0,0 @@
-"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 link_1 = __importDefault(require("next/link"));
-const header_1 = require("@ludo.ninja/ui/build/components/header");
-const headerExperienceLabel_1 = __importDefault(require("../components/headerExperienceLabel"));
-const headerUserPic_1 = __importDefault(require("../components/headerUserPic"));
-const store_1 = require("../../../modules/user/store");
-const ui_1 = require("../../../store/ui");
-const auth_1 = require("../../../utils/auth");
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const env_1 = require("../../../store/env");
-const headerStreak_1 = __importDefault(require("../components/headerStreak"));
-// Component
-const Header = () => {
-    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
-    const getUser = (0, store_1.useUserStore)((state) => state.user);
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    const openSidebar = (0, ui_1.useUiStore)((state) => state.openSidebar);
-    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
-    return ((0, jsx_runtime_1.jsx)(header_1.Header, { isAuthorized: isSignedIn, handle: {
-            login: redirectToLoginWindow,
-            openSidebar,
-        }, slots: {
-            headerExpLabel: ((0, jsx_runtime_1.jsx)(headerExperienceLabel_1.default, { userId: getUser?.userId || "" })),
-            headerDaysStreak: (0, jsx_runtime_1.jsx)(headerStreak_1.default, { tooltipPosition: 'bottom' }),
-            headerUserPick: (0, jsx_runtime_1.jsx)(headerUserPic_1.default, { userId: getUser?.userId || "" }),
-            logoLinkComponent: ({ children }) => (0, jsx_runtime_1.jsx)(link_1.default, { href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE][isProd() ? "profile" : "app"], children: children }),
-        } }));
-};
-// Export
-exports.default = Header;

package/build/components/headers/headerSearch/index.d.ts

@@ -1,5 +0,0 @@
-export type HeaderSearchProps = {
-    showXP?: boolean;
-};
-declare const HeaderSearch: ({ showXP }: HeaderSearchProps) => import("react/jsx-runtime").JSX.Element;
-export default HeaderSearch;

package/build/components/headers/headerSearch/index.js

@@ -1,42 +0,0 @@
-"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 headerExperienceLabel_1 = __importDefault(require("../components/headerExperienceLabel"));
-const headerUserPic_1 = __importDefault(require("../components/headerUserPic"));
-const searchSimpleInput_1 = __importDefault(require("../../search/searchSimpleInput"));
-const store_1 = require("../../../modules/user/store");
-const env_1 = require("../../../store/env");
-const ui_1 = require("../../../store/ui");
-const auth_1 = require("../../../utils/auth");
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const header_1 = require("@ludo.ninja/ui/build/components/header");
-const headerStreak_1 = __importDefault(require("../components/headerStreak"));
-// Component
-const HeaderSearch = ({ showXP = true }) => {
-    const openSidebar = (0, ui_1.useUiStore)((state) => state.openSidebar);
-    const isSignedIn = (0, store_1.useUserStore)((state) => state.isSignedIn);
-    const getUser = (0, store_1.useUserStore)((state) => state.user);
-    const redirectToLoginWindow = (0, auth_1.useRedirectToLoginWindow)();
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    return ((0, jsx_runtime_1.jsx)(header_1.Header, { isAuthorized: isSignedIn, handle: {
-            login: redirectToLoginWindow,
-            openSidebar,
-        }, slots: {
-            ...(showXP ? {
-                headerExpLabel: (0, jsx_runtime_1.jsx)(headerExperienceLabel_1.default, { userId: getUser?.userId || "" }),
-                headerDaysStreak: (0, jsx_runtime_1.jsx)(headerStreak_1.default, { tooltipPosition: 'bottom' })
-            } : {}),
-            headerUserPick: (0, jsx_runtime_1.jsx)(headerUserPic_1.default, { userId: getUser?.userId || "" }),
-            logoLinkComponent: ({ children }) => ((0, jsx_runtime_1.jsx)("a", { href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE][isProd() ? "profile" : "app"], children: children })),
-            searchInput: ({ setInputFocused }) => {
-                // Todo seacrh pages, hide search input from header
-                return isProd() ? undefined : (0, jsx_runtime_1.jsx)(searchSimpleInput_1.default, { onFocusHandler: setInputFocused });
-            },
-        }, isSearchStyles: true, isActivatedTheme: true }));
-};
-// Export
-exports.default = HeaderSearch;

package/build/components/headers/headerSimple/index.d.ts

@@ -1,2 +0,0 @@
-declare const HeaderSimple: () => import("react/jsx-runtime").JSX.Element;
-export default HeaderSimple;

package/build/components/headers/headerSimple/index.js

@@ -1,78 +0,0 @@
-"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 colors_1 = require("../../../styles/colors");
-const screen_1 = require("../../../utils/screen");
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("@ludo.ninja/utils");
-const env_1 = require("../../../store/env");
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-// Styles
-const StyledHeaderSimple = styled_components_1.default.header `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  z-index: 2;
-  padding: 38px 14px 14px 14px;
-  background: ${colors_1.BackgroundColorLight};
-  transition: transform 0.5s ease, top 0.5s ease;
-  width: 92.67%;
-  margin: 0 auto;
-  top: 24px;
-  left: 42px;
-  right: 42px;
-  position: fixed;
-
-  &.up {
-    top: 0;
-    transition: top 0.4s ease-out;
-
-    @media (max-width: 767px) {
-      top: 0;
-    }
-  }
-
-  &.down {
-    top: -92px;
-    transition: top 0.4s ease-out;
-  }
-
-  .logo {
-    width: 116px;
-    height: 28px;
-    a {
-      height: 100%;
-      display: block;
-    }
-  }
-
-  @media (max-width: 767px) {
-    padding: 20px;
-    margin: 0;
-    width: 100%;
-    left: 0;
-    right: 0;
-
-    .logo {
-      width: 32px;
-      height: 32px;
-    }
-  }
-`;
-// Component
-const HeaderSimple = () => {
-    const { windowWidth } = (0, screen_1.getWindowDimensions)();
-    const renderDesktopLogoOrMobile = () => {
-        const isMobile = windowWidth <= 768;
-        return ((0, jsx_runtime_1.jsx)("img", { width: isMobile ? 31 : 116, height: isMobile ? 32 : 28, src: isMobile ? '/logo/mobile_logo.svg' : '/logo/main_logo.svg', alt: "Ludo - a right place for NFT art" }));
-    };
-    const scrollDirection = (0, utils_1.useScrollDirection)();
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
-    return ((0, jsx_runtime_1.jsx)(StyledHeaderSimple, { className: scrollDirection, children: (0, jsx_runtime_1.jsx)("div", { className: 'logo', children: (0, jsx_runtime_1.jsx)("a", { href: ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE][isProd() ? "profile" : "app"], children: renderDesktopLogoOrMobile() }) }) }));
-};
-// Export
-exports.default = HeaderSimple;

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

@@ -1,8 +0,0 @@
-import React, { CSSProperties } from 'react';
-declare const LinkTabs: ({ isUnderlined, children, style, className }: {
-    children: React.ReactNode;
-    isUnderlined: boolean;
-    style?: CSSProperties;
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default LinkTabs;

package/build/components/linkTabs/index.js

@@ -1,51 +0,0 @@
-"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 ScreenWidth_1 = require("../../styles/ScreenWidth");
-const colors_1 = require("../../styles/colors");
-// Styles
-const StyledLinkTabs = styled_components_1.default.div `
-  margin-bottom: 24px;
-  position: relative;
-
-  &::after {
-    display: ${(props) => (props.isUnderlined ? 'block' : 'none')};
-    position: absolute;
-    content: '';
-    border-bottom: 1px solid ${colors_1.BorderColorLight};
-    width: 100%;
-    bottom: -4px;
-    left: 0;
-    right: 0;
-  }
-
-  a {
-    margin-left: 32px;
-
-    :first-child {
-      margin: 0;
-    }
-  }
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    margin-bottom: ${(0, _4k_1.adaptiveValueCalc)(24)};
-
-    &::after {
-      bottom: ${(0, _4k_1.adaptiveValueCalc)(-4)};
-      border-bottom-width: ${(0, _4k_1.adaptiveValueCalc)(1)};
-    }
-    a {
-      margin-left: ${(0, _4k_1.adaptiveValueCalc)(32)};
-    }
-  }
-`;
-// Component
-const LinkTabs = ({ isUnderlined, children, style, className }) => {
-    return ((0, jsx_runtime_1.jsx)(StyledLinkTabs, { className: className, isUnderlined: isUnderlined, style: style, children: children }));
-};
-// Export
-exports.default = LinkTabs;

package/build/components/linkTabs/linkTab/index.d.ts

@@ -1,9 +0,0 @@
-interface LinkTabsProps {
-    link: string;
-    isActive: boolean;
-    countItems: number | null;
-    text: string;
-    className?: string;
-}
-declare const LinkTabs: ({ link, isActive, countItems, text, className }: LinkTabsProps) => import("react/jsx-runtime").JSX.Element;
-export default LinkTabs;

package/build/components/linkTabs/linkTab/index.js

@@ -1,74 +0,0 @@
-"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 link_1 = __importDefault(require("next/link"));
-const ScreenWidth_1 = require("../../../styles/ScreenWidth");
-const colors_1 = require("../../../styles/colors");
-const typography_1 = require("../../../styles/typography");
-const screen_1 = require("../../../utils/screen");
-const styled_components_1 = __importDefault(require("styled-components"));
-const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-// Styles
-const StyledLinkTab = styled_components_1.default.span `
-  position: relative;
-  color: ${(props) => (props.isActive ? colors_1.BlackColor : colors_1.TextDarkGrayColor)};
-  cursor: pointer;
-  ${(props) => (props.isMobile ? typography_1.FH3 : typography_1.FH2)};
-  user-select: none;
-  line-height: 1.4em;
-  text-decoration: none;
-
-  .count {
-    margin-right: 8px;
-    font-weight: 600;
-    color: ${(props) => (props.isActive ? colors_1.AccentColor : colors_1.TextDarkGrayColor)};
-  }
-
-  :before {
-    content: '';
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background-color: #000;
-    transform: ${(props) => (props.isActive ? 'scaleX(1)' : 'scaleX(0)')};
-    transition: all 0.2s ease;
-  }
-
-  :hover {
-    color: ${colors_1.BlackColor};
-
-    .count {
-      color: ${(props) => (props.isActive ? colors_1.AccentColor : colors_1.BlackColor)};
-    }
-  }
-
-  :hover::before {
-    transform: scaleX(1);
-    transition: transform 0.2s ease-in-out;
-  }
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    line-height: ${(0, _4k_1.adaptiveValueCalc)(22)};
-
-    .count {
-      margin-right: ${(0, _4k_1.adaptiveValueCalc)(8)};
-    }
-
-    :before {
-      height: ${(0, _4k_1.adaptiveValueCalc)(3)};
-      bottom: ${(0, _4k_1.adaptiveValueCalc)(-4)};
-    }
-  }
-`;
-const LinkTabs = ({ link, isActive, countItems, text, className }) => {
-    const { deviceType } = (0, screen_1.useWindowDimensions)();
-    return ((0, jsx_runtime_1.jsx)(link_1.default, { className: className, href: link, children: (0, jsx_runtime_1.jsxs)(StyledLinkTab, { isActive: isActive, isMobile: deviceType === 'isMobile', children: [countItems !== null && ((0, jsx_runtime_1.jsx)("strong", { className: 'count', children: countItems })), text] }) }));
-};
-// Export
-exports.default = LinkTabs;

package/build/components/profile/profileSkeleton/index.d.ts

@@ -1,4 +0,0 @@
-export declare const ProfileSkeletonWrapper: ({ profilesCount, }: {
-    profilesCount: number;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const ProfileSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/build/components/profile/profileSkeleton/index.js

@@ -1,75 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProfileSkeleton = exports.ProfileSkeletonWrapper = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const colors_1 = require("../../../styles/colors");
-// Styles
-const StyledProfileSkeleton = styled_components_1.default.div `
-  background-color: ${colors_1.WhiteColor};
-  border-radius: 6px;
-
-  .cardLink {
-    padding: 16px;
-    display: flex;
-    height: 100%;
-
-    @media (max-width: 1199px) {
-      padding: 12px;
-      align-items: center;
-    }
-
-    .cardLinkIcon {
-      margin-right: 12px;
-      border-radius: 50%;
-      width: 72px;
-      height: 72px;
-
-      @media (max-width: 1199px) {
-        width: 42px;
-        height: 42px;
-      }
-    }
-    .cardLinkContent {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      width: 100%;
-
-      .content {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-
-        .caption {
-          margin: 0;
-        }
-        .text {
-          margin-top: 7px;
-        }
-      }
-
-      @media (max-width: 1199px) {
-        flex-direction: row;
-        align-items: center;
-        .content {
-          justify-content: center;
-        }
-      }
-    }
-  }
-`;
-const ProfileSkeletonWrapper = ({ profilesCount, }) => {
-    const arr = Array.from(Array(profilesCount).keys());
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: arr.map(() => ((0, jsx_runtime_1.jsx)(exports.ProfileSkeleton, {}, Math.random()))) }));
-};
-exports.ProfileSkeletonWrapper = ProfileSkeletonWrapper;
-// Component
-const ProfileSkeleton = () => {
-    return ((0, jsx_runtime_1.jsx)(StyledProfileSkeleton, { children: (0, jsx_runtime_1.jsxs)("div", { className: `cardLink`, children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'cardLinkIcon' }), (0, jsx_runtime_1.jsxs)("div", { className: 'cardLinkContent', children: [(0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'caption', width: '100%', height: '18px' }), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'text', width: '80px', height: '16px' })] }), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { className: 'text', width: '60px', height: '25px', style: { borderRadius: '25px', marginTop: '7px' } })] })] }) }));
-};
-exports.ProfileSkeleton = ProfileSkeleton;

package/build/components/search/SearchInputContainer.d.ts

@@ -1,26 +0,0 @@
-import React, { KeyboardEvent, MutableRefObject, ReactNode } from "react";
-interface IUseSearch {
-    onFocusHandler?: (arg: boolean) => void;
-    isClearOnBlur?: boolean;
-    initializeInputComponent: ({ searchSuggestion, handle, inputRef, searchValue, isSearchFocused, mobileOrDesktopPlaceHolder, isMobileOpen, searchCloseButton, }: {
-        searchSuggestion: ReactNode | false;
-        handle: {
-            focus: (e: React.FocusEvent<HTMLInputElement>) => void;
-            change: (e: {
-                target: {
-                    value: string;
-                };
-            }) => void;
-            blur: () => void;
-            keyPress: (e: KeyboardEvent<HTMLInputElement>) => void;
-        };
-        inputRef: MutableRefObject<HTMLInputElement | null>;
-        searchValue: string;
-        mobileOrDesktopPlaceHolder: string;
-        isSearchFocused: boolean;
-        isMobileOpen: boolean;
-        searchCloseButton: ReactNode;
-    }) => ReactNode;
-}
-export declare const SearchInputContainer: ({ onFocusHandler, isClearOnBlur, initializeInputComponent, }: IUseSearch) => import("react/jsx-runtime").JSX.Element;
-export {};

package/build/components/search/SearchInputContainer.js

@@ -1,237 +0,0 @@
-"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"));
-// import { useRouter } from "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"));
-const ludoDomains_1 = require("@ludo.ninja/core/build/ludoDomains");
-const enterKey = "Enter";
-const SearchInputContainer = ({ onFocusHandler, isClearOnBlur, initializeInputComponent, }) => {
-    const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
-    const inputSearch = (0, react_1.useRef)(null);
-    const [searchValue, setSearchValue] = (0, react_1.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) => ({
-        openOverLay: state.openOverLay,
-        closeOverlay: state.closeOverlay,
-    }));
-    const { isMobile } = (0, screen_1.useWindowDimensionsWithServerInitial)();
-    const { load, topEntities, loading, clearTopEntitiesState } = (0, useFetchFindAllTopEntitiesByName_1.useFetchFindAllTopEntitiesByName)();
-    // const router = useRouter();
-    (0, react_1.useEffect)(() => {
-        // const term = router.query?.term;
-        const term = new URLSearchParams(window.location.search).get("term");
-        if (term) {
-            setSearchValue(term);
-        }
-    }, []);
-    const updateDebouncedValue = (0, react_1.useCallback)((0, lodash_debounce_1.default)(setDebouncedValue, 200), []);
-    (0, react_1.useEffect)(() => {
-        if (searchValue.length) {
-            setIsDebounceLoading(true);
-        }
-        updateDebouncedValue(searchValue);
-    }, [searchValue]);
-    (0, react_1.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 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: () => {
-                            setIsMobileOpen(false);
-                            (0, utils_1.rootRemoveOverflow)();
-                            if (isClearOnBlur) {
-                                setSearchValue("");
-                                clearTopEntitiesState();
-                            }
-                        } })), initializeInputComponent({
-                        isMobileOpen,
-                        mobileOrDesktopPlaceHolder: isMobile
-                            ? "Search"
-                            : "Search for NFTs, collections, profiles, ENS and blockchain addresses",
-                        isSearchFocused,
-                        searchValue,
-                        inputRef: inputSearch,
-                        handle: {
-                            focus() {
-                                if (isMobileOpen) {
-                                    return;
-                                }
-                                if (isMobile) {
-                                    setIsMobileOpen(true);
-                                    (0, utils_1.rootAddOverflow)();
-                                    return;
-                                }
-                                openOverLay();
-                                setSearchFocused(true);
-                                onFocusHandler?.(true);
-                            },
-                            change(e) {
-                                setSearchValue(e.target.value);
-                            },
-                            blur() {
-                                if (isMobileOpen) {
-                                    return;
-                                }
-                                if (isMobile) {
-                                    (0, utils_1.rootRemoveOverflow)();
-                                    return;
-                                }
-                                setTimeout(() => {
-                                    inputSearch.current?.blur();
-                                    setSearchFocused(false);
-                                    onFocusHandler?.(false);
-                                    closeOverlay();
-                                    if (isClearOnBlur) {
-                                        setSearchValue("");
-                                        clearTopEntitiesState();
-                                    }
-                                }, 100);
-                            },
-                            async keyPress(e) {
-                                if (e.key === enterKey) {
-                                    const { value } = e.target;
-                                    const newSearchValue = value.length ? searchValue : "";
-                                    const searchDomain = ludoDomains_1.ludoDomains[NEXT_PUBLIC_ENV_VALUE]["search"];
-                                    const currentPath = window.location.pathname;
-                                    if (searchDomain === window.origin &&
-                                        seacrhTabs_1.searchTabs.find((el) => currentPath.includes(el.link))) {
-                                        // await router.replace(
-                                        //   {
-                                        //     query: { ...router.query, term: newSearchValue },
-                                        //   },
-                                        //   undefined,
-                                        //   { shallow: true },
-                                        // );
-                                        const newUrl = new URL(window.location.href);
-                                        newUrl.searchParams.set("term", newSearchValue);
-                                        window.history.replaceState({}, "", newUrl.toString());
-                                        setSearchFocused(false);
-                                        onFocusHandler?.(false);
-                                        closeOverlay();
-                                    }
-                                    else {
-                                        window.open(`${searchDomain}/${seacrhTabs_1.searchTabs[0].link}${newSearchValue ? `?term=${newSearchValue}` : ""}`, "_self");
-                                        // await router.push({
-                                        //   pathname: searchTabs[0].link,
-                                        //   query: { term: newSearchValue },
-                                        // });
-                                        // setSearchFocused(false);
-                                        // onFocusHandler?.(false);
-                                        closeOverlay();
-                                    }
-                                }
-                            },
-                        },
-                        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: {
-                                top: "50%",
-                                right: "0",
-                                transform: "translate(-50%, -50%)",
-                            }, clearSearchValue: setSearchValue })),
-                    })] }), isMobileOpen && searchValue && ((0, jsx_runtime_1.jsx)(SSuggestions, { children: searchSuggestion }))] }));
-};
-exports.SearchInputContainer = SearchInputContainer;
-const show = (0, styled_components_1.keyframes) `
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const SMobileContainer = styled_components_1.default.div `
-  position: fixed;
-  z-index: 100000;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: var(--app-height);
-  background-color: ${colors_1.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;
-  }
-`;
-const SMobileSearchContainer = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  gap: 2px;
-
-  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
-    gap: ${(0, _4k_1.adaptiveValueCalc)(2)};
-  }
-`;
-const SSuggestions = styled_components_1.default.div `
-  display: flex;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: calc(100% - 36px - 17px);
-  margin-left: -5px;
-  margin-right: -5px;
-  padding-left: 5px;
-  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)});
-  }
-`;