@ludo.ninja/components 1.1.5 → 1.1.7

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

@@ -1,54 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useUiStore } from '@/store/ui';
-import { AccentColor, BlackColor, BorderColorLight, InactiveButtonColor, } from '@/styles/colors';
-import ApplyResetButtons from '@/components/filters/applyResetBtns';
-import SetsFiltersForm from '@/components/filters/setsFiltersForm';
-// import BasicSelect from 'system/Forms/Selects/DesktopSelect';
-import SidebarFilters from '@/components/sidebar/sidebarFilters';
-var StyledSearchSelectsNfts = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n\n    @media (max-width: 600px) {\n      display: none;\n    }\n  }\n\n  .selectType {\n    width: 154px;\n  }\n\n  .selectCategory {\n    width: 156px;\n  }\n\n  .selectTime {\n    width: 125px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    @media (min-width: 600px) {\n      display: none;\n    }\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n"])), BlackColor, InactiveButtonColor, AccentColor, BorderColorLight, AccentColor);
-// Component
-var SearchSelectsSets = function (_a) {
-    var selectTypeSearchResult = _a.selectTypeSearchResult, selectBlockchainCategoryResult = _a.selectBlockchainCategoryResult, selectBlockchainTimeResult = _a.selectBlockchainTimeResult;
-    var _b = useState(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
-    var _c = useState(false), isNeedShowButtons = _c[0], setNeedShowButtons = _c[1];
-    var _d = useState(0), selectedFiltersCount = _d[0], setSelectedFiltersCount = _d[1];
-    var _e = useUiStore(function (state) { return ({
-        openOverLay: state.openOverLay,
-        closeOverlay: state.closeOverlay,
-    }); }), openOverLay = _e.openOverLay, closeOverlay = _e.closeOverlay;
-    return (<StyledSearchSelectsNfts>
-      {/*<div className={'select selectType'}>*/}
-      {/*  <BasicSelect options={selectTypeSearchResult} />*/}
-      {/*</div>*/}
-      {/*<div className={'select selectCategory'}>*/}
-      {/*  <BasicSelect options={selectBlockchainCategoryResult} />*/}
-      {/*</div>*/}
-      {/*<div className={'select selectTime'}>*/}
-      {/*  <BasicSelect options={selectBlockchainTimeResult} />*/}
-      {/*</div>*/}
-      <div className={'filterButton'}>
-        <button onClick={function () {
-            openOverLay();
-            setSidebarOpen(true);
-        }}>
-          Filters
-          {selectedFiltersCount ? (<span className={'counter'}>{selectedFiltersCount}</span>) : null}
-        </button>
-      </div>
-      <SidebarFilters isOpen={isSideBarOpen} handleClose={function () {
-            closeOverlay();
-            setSidebarOpen(false);
-        }}>
-        <SetsFiltersForm handleFiltersCount={setSelectedFiltersCount} handleNeedShowButtons={setNeedShowButtons} selectTypeSearchResult={selectTypeSearchResult} selectBlockchainCategoryResult={selectBlockchainCategoryResult} selectBlockchainTimeResult={selectBlockchainTimeResult}/>
-        {isNeedShowButtons ? (<ApplyResetButtons onApply={function () { return null; }} onReset={function () { return null; }}/>) : null}
-      </SidebarFilters>
-    </StyledSearchSelectsNfts>);
-};
-// Export
-export default SearchSelectsSets;
-var templateObject_1;

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

@@ -1,59 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { FH6 } from '@/styles/typography';
-import { SearchInputContainer } from '@/components/search/SearchInputContainer';
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { dmsansFontVarCss } from '@/fonts/vars';
-import SearchGlassIcon from '@/public/search/search.svg';
-// Styles
-var StyledSearchSimpleInput = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  width: 40%;\n\n  .suggestionBar {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n  }\n\n  ", " {\n    width: 188px;\n    ", "\n  }\n\n  ", " {\n    .suggestionBar {\n      top: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  width: 40%;\n\n  .suggestionBar {\n    position: absolute;\n    top: 40px;\n    left: 0;\n    right: 0;\n  }\n\n  ", " {\n    width: 188px;\n    ", "\n  }\n\n  ", " {\n    .suggestionBar {\n      top: ", ";\n    }\n  }\n"])), mediaQuery.mobile, function (props) {
-    return props.isMobileOpen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        width: 100%;\n      "], ["\n        width: 100%;\n      "])));
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(40));
-var StyledInput = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: 40px;\n  outline: none;\n  border: none;\n  font-weight: 400;\n  font-size: 1.4em;\n  color: ", ";\n  background-color: ", ";\n  padding-left: 48px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  border-top-right-radius: 24px;\n  border-top-left-radius: 24px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  font-family: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n    padding-left: 32px;\n    height: 36px;\n  }\n\n  ", " {\n    height: ", ";\n    font-size: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: 40px;\n  outline: none;\n  border: none;\n  font-weight: 400;\n  font-size: 1.4em;\n  color: ", ";\n  background-color: ", ";\n  padding-left: 48px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  border-top-right-radius: 24px;\n  border-top-left-radius: 24px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n  font-family: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    ", ";\n    padding-left: 32px;\n    height: 36px;\n  }\n\n  ", " {\n    height: ", ";\n    font-size: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.primaryText;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.thirdBg;
-}, function (props) { return (props.isActive ? 'none' : '24px'); }, function (props) { return (props.isActive ? 'none' : '24px'); }, dmsansFontVarCss.css, function (_a) {
-    var theme = _a.theme;
-    return theme.colors.placeholderText;
-}, mediaQuery.mobile, FH6, mediaQuery.minWidthFourK, adaptiveValueCalc(40), adaptiveValueCalc(14), adaptiveValueCalc(48), adaptiveValueCalc(48), adaptiveValueCalc(24), adaptiveValueCalc(24), function (props) {
-    return props.isActive ? 'none' : adaptiveValueCalc(24);
-}, function (props) {
-    return props.isActive ? 'none' : adaptiveValueCalc(24);
-});
-var StyledSearchIcon = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 768px) {\n    left: 8px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 8px;\n  bottom: 8px;\n  left: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 768px) {\n    left: 8px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n  }\n"])), function (props) {
-    return props.isActive
-        ? props.theme.colors.borderColor
-        : props.theme.colors.accent;
-}, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(16));
-var SearchGlassIconResize = function () {
-    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
-    return (<SearchGlassIcon style={getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 })}/>);
-};
-// Components
-var SearchSimpleInput = function (_a) {
-    var onFocusHandler = _a.onFocusHandler;
-    return (<SearchInputContainer onFocusHandler={onFocusHandler} initializeInputComponent={function (_a) {
-            var searchValue = _a.searchValue, handle = _a.handle, inputRef = _a.inputRef, isSearchFocused = _a.isSearchFocused, mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder, searchSuggestion = _a.searchSuggestion, isMobileOpen = _a.isMobileOpen, searchCloseButton = _a.searchCloseButton;
-            return (<StyledSearchSimpleInput isMobileOpen={isMobileOpen}>
-        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
-          <SearchGlassIconResize />
-        </StyledSearchIcon>
-        <StyledInput isActive={Boolean(searchValue.length) && isSearchFocused} autoComplete={'off'} onChange={handle.change} ref={inputRef} tabIndex={1} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
-        {searchCloseButton}
-        {isSearchFocused && searchSuggestion}
-      </StyledSearchSimpleInput>);
-        }}/>);
-};
-// Export
-export default SearchSimpleInput;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

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

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

@@ -1,23 +0,0 @@
-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 from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BorderColorLight, TextGrayColor } from '@/styles/colors';
-import { FH5 } from '@/styles/typography';
-// Styles
-var StyledSearchSuggestionsCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-top: 1px solid ", ";\n  line-height: 22px;\n\n  .caption {\n    ", ";\n    color: ", ";\n    user-select: none;\n  }\n\n  :last-child {\n    border-bottom: none;\n  }\n\n  ", " {\n    &:first-child {\n      border-top: unset;\n    }\n  }\n\n  ", " {\n    padding: ", " 0;\n    border-top: ", " solid ", ";\n    line-height: ", ";\n  }\n"])), BorderColorLight, FH5, TextGrayColor, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(22));
-// Components
-var SearchSuggestionsCaption = function (_a) {
-    var caption = _a.caption, children = _a.children;
-    return (<StyledSearchSuggestionsCaption>
-      <span className={'caption'}>{caption}</span>
-      {children}
-    </StyledSearchSuggestionsCaption>);
-};
-// Export
-export default SearchSuggestionsCaption;
-var templateObject_1;

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

@@ -1,26 +0,0 @@
-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 from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, BorderColorLight, TextGrayColor } from '@/styles/colors';
-import { TextSmall } from '@/styles/typography';
-import { dmsansFontVarCss } from '@/fonts/vars';
-// Styles
-var StyledSearchSuggestionsFooter = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"], ["\n  .footer {\n    font-family: ", ";\n    ", ";\n    border-top: 1px solid ", ";\n    color: ", ";\n    text-align: center;\n    margin-top: auto;\n    user-select: none;\n\n    .text {\n      padding: 12px 0;\n\n      strong {\n        font-weight: 700;\n        color: ", ";\n      }\n    }\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    //border-bottom-right-radius: ", ";\n\n    .footer {\n      border-top: ", " solid ", ";\n\n      .text {\n        padding: ", " 0;\n      }\n    }\n  }\n"])), dmsansFontVarCss.css, TextSmall, BorderColorLight, TextGrayColor, BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(28), adaptiveValueCalc(28), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(12));
-// Components
-var SearchSuggestionsFooter = function () {
-    return (<StyledSearchSuggestionsFooter>
-      <div className={" footer"}>
-        <p className={'text'}>
-          Press <strong>Enter</strong> to search all results
-        </p>
-      </div>
-    </StyledSearchSuggestionsFooter>);
-};
-// Export
-export default SearchSuggestionsFooter;
-var templateObject_1;

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

@@ -1,42 +0,0 @@
-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 Link from 'next/link';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { searchQueryLetters } from '@ludo.ninja/utils';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BlackColor, TextDarkGrayColor, TextGrayColor } from '@/styles/colors';
-import { FH5 } from '@/styles/typography';
-import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-// Styles
-var StyledSearchSuggestionsItem = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n\n  .link {\n    text-decoration: none;\n    display: flex;\n    padding: 6px 0;\n    border-radius: 8px;\n    gap: 8px;\n    align-items: center;\n    position: relative;\n\n    & > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    img {\n      border-radius: ", ";\n      width: 32px;\n      height: 32px;\n    }\n\n    .additional {\n      white-space: nowrap;\n      ", ";\n      color: ", ";\n      margin-left: auto;\n    }\n\n    .text {\n      display: flex;\n\n      overflow: hidden;\n\n      .strong {\n        font-weight: 600;\n        color: ", ";\n        font-size: 18px;\n        line-height: 26px;\n      }\n\n      .regular {\n        ", ";\n        color: ", ";\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      width: calc(100% + 12px);\n      height: 100%;\n      top: 0;\n      left: -6px;\n      border-radius: 8px;\n      transition: background-color 200ms;\n    }\n\n    &:hover:before {\n      background: #ecf0fc;\n    }\n  }\n\n  ", " {\n    .link {\n      padding: ", " 0;\n      border-radius: ", ";\n      gap: ", ";\n\n      img {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      .text {\n        .strong {\n          font-size: ", ";\n          line-height: ", ";\n        }\n      }\n\n      &:before {\n        width: calc(100% + ", ");\n        left: ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"], ["\n  user-select: none;\n\n  .link {\n    text-decoration: none;\n    display: flex;\n    padding: 6px 0;\n    border-radius: 8px;\n    gap: 8px;\n    align-items: center;\n    position: relative;\n\n    & > * {\n      position: relative;\n      z-index: 1;\n    }\n\n    img {\n      border-radius: ", ";\n      width: 32px;\n      height: 32px;\n    }\n\n    .additional {\n      white-space: nowrap;\n      ", ";\n      color: ", ";\n      margin-left: auto;\n    }\n\n    .text {\n      display: flex;\n\n      overflow: hidden;\n\n      .strong {\n        font-weight: 600;\n        color: ", ";\n        font-size: 18px;\n        line-height: 26px;\n      }\n\n      .regular {\n        ", ";\n        color: ", ";\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n    }\n\n    &:before {\n      content: '';\n      position: absolute;\n      width: calc(100% + 12px);\n      height: 100%;\n      top: 0;\n      left: -6px;\n      border-radius: 8px;\n      transition: background-color 200ms;\n    }\n\n    &:hover:before {\n      background: #ecf0fc;\n    }\n  }\n\n  ", " {\n    .link {\n      padding: ", " 0;\n      border-radius: ", ";\n      gap: ", ";\n\n      img {\n        border-radius: ", ";\n        width: ", ";\n        height: ", ";\n      }\n\n      .text {\n        .strong {\n          font-size: ", ";\n          line-height: ", ";\n        }\n      }\n\n      &:before {\n        width: calc(100% + ", ");\n        left: ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"])), function (props) { return (props.borderRadius ? '16px' : 'none'); }, FH5, TextDarkGrayColor, BlackColor, FH5, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(8), function (props) {
-    return props.borderRadius ? adaptiveValueCalc(16) : 'none';
-}, adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(18), adaptiveValueCalc(26), adaptiveValueCalc(12), adaptiveValueCalc(-6), adaptiveValueCalc(8));
-// Components
-var SearchSuggestionsItem = function (_a) {
-    var name = _a.name, link = _a.link, imgUrl = _a.imgUrl, borderRadius = _a.borderRadius, additionalHTML = _a.additionalHTML, searchTerm = _a.searchTerm;
-    return (<StyledSearchSuggestionsItem borderRadius={borderRadius}>
-    <Link href={link} className={'link'}>
-      <ImageInterceptor borderRadiusSkeleton={borderRadius && 16}>
-        <img src={imgUrl} alt={'pirate'} width={32} height={32}/>
-      </ImageInterceptor>
-
-      <div className={'text'}>
-        <p className={'regular'}>
-          {searchQueryLetters({
-            text: name,
-            searchQuery: searchTerm,
-            className: 'strong',
-        })}
-        </p>
-      </div>
-      {additionalHTML}
-    </Link>
-  </StyledSearchSuggestionsItem>);
-};
-// Export
-export default SearchSuggestionsItem;
-var templateObject_1;

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

@@ -1,33 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
-import styled from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { InactiveButtonColor } from '@/styles/colors';
-import SearchSuggestionsCaption from '@/components/search/searchSuggestions/searchSuggestionsCaption';
-// Styles
-var StyledSearchSuggestionsItemSkeleton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n  height: 44px;\n  align-items: center;\n\n  & > * {\n    overflow: hidden;\n    display: flex;\n    height: 32px;\n    border-radius: 6px;\n\n    &:nth-child(1) {\n      flex: 1 32px;\n      min-width: 32px;\n      max-width: 32px;\n    }\n\n    &:nth-child(2) {\n      flex: 1 336px;\n    }\n\n    &:nth-child(3) {\n      flex: 1 65px;\n      min-width: 32px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    height: ", ";\n\n    & > * {\n      height: ", ";\n      border-radius: ", ";\n\n      &:nth-child(1) {\n        flex: 1 ", ";\n        min-width: ", ";\n        max-width: ", ";\n      }\n\n      &:nth-child(2) {\n        flex: 1 ", ";\n      }\n\n      &:nth-child(3) {\n        flex: 1 ", ";\n        min-width: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n  height: 44px;\n  align-items: center;\n\n  & > * {\n    overflow: hidden;\n    display: flex;\n    height: 32px;\n    border-radius: 6px;\n\n    &:nth-child(1) {\n      flex: 1 32px;\n      min-width: 32px;\n      max-width: 32px;\n    }\n\n    &:nth-child(2) {\n      flex: 1 336px;\n    }\n\n    &:nth-child(3) {\n      flex: 1 65px;\n      min-width: 32px;\n    }\n  }\n\n  ", " {\n    gap: ", ";\n    height: ", ";\n\n    & > * {\n      height: ", ";\n      border-radius: ", ";\n\n      &:nth-child(1) {\n        flex: 1 ", ";\n        min-width: ", ";\n        max-width: ", ";\n      }\n\n      &:nth-child(2) {\n        flex: 1 ", ";\n      }\n\n      &:nth-child(3) {\n        flex: 1 ", ";\n        min-width: ", ";\n      }\n    }\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(44), adaptiveValueCalc(32), adaptiveValueCalc(6), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(336), adaptiveValueCalc(65), adaptiveValueCalc(32));
-// Components
-var SearchSuggestionsItemSkeleton = function () { return (<StyledSearchSuggestionsItemSkeleton>
-    <SkeletonTheme baseColor={InactiveButtonColor}>
-      <Skeleton />
-      <Skeleton />
-      <Skeleton />
-    </SkeletonTheme>
-  </StyledSearchSuggestionsItemSkeleton>); };
-var SContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var SSkeleton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  @media (min-width: 768px) {\n    max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  ", " {\n    max-height: calc(\n      var(--app-height) - ", " - ", " -\n        ", " - ", " -\n        ", "\n    );\n  }\n"], ["\n  @media (min-width: 768px) {\n    max-height: calc(var(--app-height) - 124px - 50px - 24px - 10px - 24px);\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  ", " {\n    max-height: calc(\n      var(--app-height) - ", " - ", " -\n        ", " - ", " -\n        ", "\n    );\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(124), adaptiveValueCalc(50), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(24));
-export var SearchSuggestionsItemsSkeleton = function () { return (<SSkeleton>
-    {['NFTs', 'Collections', 'Profiles'].map(function (item) { return (<SearchSuggestionsCaption key={item} caption={item}>
-        <SContainer>
-          {Array.from({ length: 3 }, function (_, index) { return (<SearchSuggestionsItemSkeleton key={index}/>); })}
-        </SContainer>
-      </SearchSuggestionsCaption>); })}
-  </SSkeleton>); };
-// Export
-export default SearchSuggestionsItemSkeleton;
-var templateObject_1, templateObject_2, templateObject_3;

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

@@ -1,22 +0,0 @@
-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 from 'styled-components';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { BorderColorLight, TextGrayColor } from '@/styles/colors';
-import { FH5 } from '@/styles/typography';
-// Styles
-var StyledSearchSuggestionsNotFound = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  text-align: left;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  border-top: 1px solid ", ";\n\n  .text {\n    padding: 24px 0 14px 0;\n  }\n\n  ", " {\n    border-top: unset;\n    padding: 0;\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    border-top: ", " solid ", ";\n\n    .text {\n      padding: ", " 0 ", " 0;\n    }\n  }\n"], ["\n  ", ";\n  color: ", ";\n  text-align: left;\n  padding-top: 12px;\n  padding-bottom: 12px;\n  border-top: 1px solid ", ";\n\n  .text {\n    padding: 24px 0 14px 0;\n  }\n\n  ", " {\n    border-top: unset;\n    padding: 0;\n  }\n\n  ", " {\n    //border-bottom-left-radius: ", ";\n    padding-top: ", ";\n    padding-bottom: ", ";\n    border-top: ", " solid ", ";\n\n    .text {\n      padding: ", " 0 ", " 0;\n    }\n  }\n"])), FH5, TextGrayColor, BorderColorLight, mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(28), adaptiveValueCalc(12), adaptiveValueCalc(12), adaptiveValueCalc(1), BorderColorLight, adaptiveValueCalc(24), adaptiveValueCalc(14));
-// Components
-var SearchSuggestionsNotFound = function (_a) {
-    var notFoundText = _a.notFoundText;
-    return (<StyledSearchSuggestionsNotFound>
-      <p>No results found for “{notFoundText}”</p>
-    </StyledSearchSuggestionsNotFound>);
-};
-// Export
-export default SearchSuggestionsNotFound;
-var templateObject_1;

package/dist/components/searchPage/SearchTabs.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-
-import { useRouter } from 'next/router';
-
-import { getForSearch } from '@ludo.ninja/utils';
-
-import LinkTabs from '@/components/linkTabs';
-import LinkTab from '@/components/linkTabs/linkTab';
-
-export var SearchTabs = function (_a) {
-  var defaultsTerm = _a.defaultsTerm;
-  var router = useRouter();
-  var term = router.query.term;
-  var defaultTermOrClientTerm =
-    defaultsTerm === (term || '') ? defaultsTerm : term || '';
-  return (
-    <LinkTabs isUnderlined={false}>
-      {[
-        {
-          link: '/search/nfts',
-          text: 'NFTs',
-        },
-        {
-          link: '/search/collections',
-          text: 'Collections',
-        },
-        {
-          link: '/search/profiles',
-          text: 'Profiles',
-        },
-      ].map(function (_a) {
-        var link = _a.link,
-          text = _a.text;
-        return (
-          <LinkTab
-            key={link}
-            link={''.concat(link).concat(getForSearch(defaultTermOrClientTerm))}
-            isActive={router.asPath.includes(link)}
-            countItems={null}
-            text={text}
-          />
-        );
-      })}
-    </LinkTabs>
-  );
-};