@ludo.ninja/components 1.1.5 → 1.1.6

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

@@ -0,0 +1,48 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import SearchCloseIcon from '@/public/search/close.svg';
+var StyledSearchCloseMoreButtons = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  transform: ", ";\n  display: flex;\n  height: 40px;\n  ", " {\n    height: ", ";\n  }\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  bottom: ", ";\n  left: ", ";\n  transform: ", ";\n  display: flex;\n  height: 40px;\n  ", " {\n    height: ", ";\n  }\n"])), function (props) { return props.position.right; }, function (props) { return props.position.top; }, function (props) { return props.position.bottom; }, function (props) { return props.position.left; }, function (props) { return props.position.transform; }, mediaQuery.minWidthFourK, adaptiveValueCalc(40));
+var StyledCloseIcon = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  cursor: pointer;\n  z-index: 1;\n  padding: 8px 6px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    padding: ", " ", ";\n  }\n"], ["\n  cursor: pointer;\n  z-index: 1;\n  padding: 8px 6px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    padding: ", " ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(6));
+var SearchCloseIconResize = function () {
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(SearchCloseIcon, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }));
+};
+// Components
+var SearchCloseMoreButtons = function (_a) {
+    var isNeedToShow = _a.isNeedToShow, position = _a.position, clearSearchValue = _a.clearSearchValue;
+    var router = useRouter();
+    var term = router.query.term;
+    return (_jsx(StyledSearchCloseMoreButtons, { position: position, children: isNeedToShow ? (_jsx(StyledCloseIcon, { onClick: function () {
+                if (term) {
+                    router
+                        .push({
+                        query: __assign(__assign({}, router.query), { term: [] }),
+                    })
+                        .then(function () { return clearSearchValue(''); });
+                }
+                clearSearchValue('');
+            }, children: _jsx(SearchCloseIconResize, {}) })) : null }));
+};
+// Export
+export default SearchCloseMoreButtons;
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Skeleton from 'react-loading-skeleton';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { AccentColor, BlackColor } from '@/styles/colors';
+import { FH3 } from '@/styles/typography';
+// Styles
+var StyledSearchResultCaption = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ", ";\n    color: ", ";\n\n    strong {\n      margin-right: 8px;\n      color: ", ";\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ", " {\n    margin: ", " 0 ", " 0;\n\n    .caption {\n      strong {\n        margin-right: ", ";\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ", ";\n      max-width: ", ";\n    }\n  }\n"], ["\n  margin: 24px 0 16px 0;\n\n  .caption {\n    ", ";\n    color: ", ";\n\n    strong {\n      margin-right: 8px;\n      color: ", ";\n    }\n  }\n\n  .skeleton-caption-search {\n    height: 27px;\n    max-width: 250px;\n  }\n\n  ", " {\n    margin: ", " 0 ", " 0;\n\n    .caption {\n      strong {\n        margin-right: ", ";\n      }\n    }\n\n    .skeleton-caption-search {\n      height: ", ";\n      max-width: ", ";\n    }\n  }\n"])), FH3, BlackColor, AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(16), adaptiveValueCalc(8), adaptiveValueCalc(27), adaptiveValueCalc(250));
+// Component
+var SearchResultCaption = function (_a) {
+    var _b = _a.nftCounter, nftCounter = _b === void 0 ? 0 : _b, searchQuery = _a.searchQuery, isLoading = _a.isLoading;
+    var searchText = searchQuery && searchQuery.length
+        ? "search results for \"".concat(searchQuery, "\"")
+        : 'search results';
+    return (_jsx(StyledSearchResultCaption, { children: isLoading ? (_jsx(Skeleton, { className: "skeleton-caption-search" })) : (_jsxs("p", { className: 'caption', children: [_jsx("strong", { children: nftCounter.toLocaleString('ru-RU') }), searchText] })) }));
+};
+// Export
+export default SearchResultCaption;
+var templateObject_1;

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

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

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

@@ -0,0 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 (_jsxs(StyledSearchSelectsNfts, { children: [_jsx("div", { className: 'filterButton', children: _jsxs("button", { onClick: function () {
+                        openOverLay();
+                        setSidebarOpen(true);
+                    }, children: ["Filters", selectedFiltersCount ? (_jsx("span", { className: 'counter', children: selectedFiltersCount })) : null] }) }), _jsxs(SidebarFilters, { isOpen: isSideBarOpen, handleClose: function () {
+                    closeOverlay();
+                    setSidebarOpen(false);
+                }, children: [_jsx(SetsFiltersForm, { handleFiltersCount: setSelectedFiltersCount, handleNeedShowButtons: setNeedShowButtons, selectTypeSearchResult: selectTypeSearchResult, selectBlockchainCategoryResult: selectBlockchainCategoryResult, selectBlockchainTimeResult: selectBlockchainTimeResult }), isNeedShowButtons ? (_jsx(ApplyResetButtons, { onApply: function () { return null; }, onReset: function () { return null; } })) : null] })] }));
+};
+// Export
+export default SearchSelectsSets;
+var templateObject_1;

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

@@ -0,0 +1,52 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { 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 (_jsx(SearchGlassIcon, { style: getAdaptiveScale({ windowDimensions: windowDimensions, currentSize: 1 }) }));
+};
+// Components
+var SearchSimpleInput = function (_a) {
+    var onFocusHandler = _a.onFocusHandler;
+    return (_jsx(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 (_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
+export default SearchSimpleInput;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

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

@@ -0,0 +1,105 @@
+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 { 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 { 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 (_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: __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 (_jsx(SearchSuggestionsItem, { name: asset === null || asset === void 0 ? void 0 : asset.getName(), link: asset.getAssetLink(), imgUrl: miniatureUrl, searchTerm: searchTerm }, "".concat(asset === null || asset === void 0 ? void 0 : asset.getAssetId(), ".").concat(Math.random())));
+                                            }),
+                                        },
+                                    ]
+                                    : []), true), ((collections === null || collections === void 0 ? void 0 : collections.length)
+                                    ? [
+                                        {
+                                            caption: 'Collections',
+                                            children: collections.map(function (collection) { return (_jsx(SearchSuggestionsItem, { 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 }, "".concat(collection === null || collection === void 0 ? void 0 : collection.collectionId, ".").concat(Math.random()))); }),
+                                        },
+                                    ]
+                                    : []), true), ((profiles === null || profiles === void 0 ? void 0 : profiles.length)
+                                    ? [
+                                        {
+                                            caption: 'Profiles',
+                                            children: profiles.map(function (profile) { return (_jsx(SearchSuggestionsItem, { borderRadius: true, name: profile.getName() || '', link: "/profile/".concat(profile.getUserId(), "/nfts"), imgUrl: profile.getUserPic({
+                                                    mediaDomain: getMediaENVDomain(),
+                                                }), additionalHTML: Boolean(profile.getFollowings()) && (_jsxs("span", { className: 'additional', children: [profile.getFollowings(), " followers"] })), searchTerm: searchTerm }, profile.getUserId())); }),
+                                        },
+                                    ]
+                                    : []), true).map(function (_a) {
+                                    var caption = _a.caption, children = _a.children;
+                                    return (_jsx(SearchSuggestionsCaption, { caption: caption, children: children }, caption));
+                                }) }), _jsx(SearchSuggestionsFooter, {})] })))] }) }));
+};
+// Export
+export default SearchSuggestions;
+var templateObject_1;

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

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs(StyledSearchSuggestionsCaption, { children: [_jsx("span", { className: 'caption', children: caption }), children] }));
+};
+// Export
+export default SearchSuggestionsCaption;
+var templateObject_1;

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

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsx(StyledSearchSuggestionsFooter, { children: _jsx("div", { className: " footer", children: _jsxs("p", { className: 'text', children: ["Press ", _jsx("strong", { children: "Enter" }), " to search all results"] }) }) }));
+};
+// Export
+export default SearchSuggestionsFooter;
+var templateObject_1;

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

@@ -0,0 +1,29 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsx(StyledSearchSuggestionsItem, { borderRadius: borderRadius, children: _jsxs(Link, { href: link, className: 'link', children: [_jsx(ImageInterceptor, { borderRadiusSkeleton: borderRadius && 16, children: _jsx("img", { src: imgUrl, alt: 'pirate', width: 32, height: 32 }) }), _jsx("div", { className: 'text', children: _jsx("p", { className: 'regular', children: searchQueryLetters({
+                            text: name,
+                            searchQuery: searchTerm,
+                            className: 'strong',
+                        }) }) }), additionalHTML] }) }));
+};
+// Export
+export default SearchSuggestionsItem;
+var templateObject_1;

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

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsx(StyledSearchSuggestionsItemSkeleton, { children: _jsxs(SkeletonTheme, { baseColor: InactiveButtonColor, children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }) })); };
+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 (_jsx(SSkeleton, { children: ['NFTs', 'Collections', 'Profiles'].map(function (item) { return (_jsx(SearchSuggestionsCaption, { caption: item, children: _jsx(SContainer, { children: Array.from({ length: 3 }, function (_, index) { return (_jsx(SearchSuggestionsItemSkeleton, {}, index)); }) }) }, item)); }) })); };
+// Export
+export default SearchSuggestionsItemSkeleton;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+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 (_jsx(StyledSearchSuggestionsNotFound, { children: _jsxs("p", { children: ["No results found for \u201C", notFoundText, "\u201D"] }) }));
+};
+// Export
+export default SearchSuggestionsNotFound;
+var templateObject_1;

package/dist/components/shareDialog/index.js

@@ -0,0 +1,45 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EmailShareButton, FacebookShareButton, // InstapaperShareButton,
+RedditShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton, } from 'react-share';
+import styled from 'styled-components';
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { copyToClipboard } from '@ludo.ninja/utils';
+import { useUiStore } from '@/store/ui';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { Flex, H1, H5 } from '@system';
+// import CopyIcon from '@/public/share/copy-link-btn.svg';
+// import EmailIcon from '@/public/share/email-btn.svg';
+// import FacebookIcon from '@/public/share/facebook-btn.svg';
+// import InstagramIcon from '@/public/share/insta-btn.svg';
+// import RedditIcon from '@/public/share/reddit-btn.svg';
+// import TelegramIcon from '@/public/share/telegram-btn.svg';
+// import TwitterIcon from '@/public/share/twitter-btn.svg';
+// import WatsUpIcon from '@/public/share/whatsapp-btn.svg';
+// Styles
+var STitle = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"], ["\n  margin-bottom: 24px;\n  color: ", ";\n  ", " {\n    margin-bottom: ", ";\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(24));
+var StyledShare = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  .shareButtons {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n    row-gap: 24px;\n    column-gap: 16px;\n    margin: 0 43px 33px 43px;\n    justify-content: center;\n\n    ", " {\n      grid-template-columns: 1fr 1fr;\n      justify-items: center;\n      align-items: center;\n    }\n  }\n\n  .shareBtn {\n    width: 108px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-direction: column;\n    cursor: pointer;\n    border: none;\n    background-color: transparent;\n\n    img {\n      width: 40px;\n      height: 40px;\n    }\n  }\n\n  ", " {\n    .shareButtons {\n      row-gap: ", ";\n      column-gap: ", ";\n      margin: 0 ", " ", "\n        ", ";\n    }\n\n    .shareBtn {\n      width: ", ";\n      height: ", ";\n\n      img {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), mediaQuery.mobile, mediaQuery.minWidthFourK, adaptiveValueCalc(24), adaptiveValueCalc(16), adaptiveValueCalc(43), adaptiveValueCalc(33), adaptiveValueCalc(43), adaptiveValueCalc(108), adaptiveValueCalc(64), adaptiveValueCalc(40), adaptiveValueCalc(40));
+var ShareDialog = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var link = _a.link, onHide = _a.onHide, params = _a.params;
+    var url = new URL(link || '');
+    url.search = '';
+    var urlWithoutGetParameters = url.toString();
+    var openAlert = useUiStore(function (state) { return state.openAlert; });
+    return (_jsxs(StyledShare, { children: [_jsx(Flex, { alignItems: 'center', justifyContent: 'center', children: _jsx(STitle, { children: 'Share to...' }) }), _jsxs("div", { className: "shareButtons", children: [_jsxs("button", { onClick: function () {
+                            onHide();
+                            copyToClipboard(urlWithoutGetParameters).then(function () {
+                                openAlert({
+                                    type: alertVariants.copied,
+                                });
+                            });
+                        }, className: 'shareBtn', children: [_jsx("img", { src: "/share/copy-link-btn.svg", alt: "share", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Copy Link" })] }), _jsxs(EmailShareButton, { url: urlWithoutGetParameters, body: (_b = params === null || params === void 0 ? void 0 : params.email) === null || _b === void 0 ? void 0 : _b.body, separator: (_c = params === null || params === void 0 ? void 0 : params.email) === null || _c === void 0 ? void 0 : _c.separator, subject: (_d = params === null || params === void 0 ? void 0 : params.email) === null || _d === void 0 ? void 0 : _d.subject, className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/email-btn.svg", alt: "email", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Email" })] }), _jsxs(TelegramShareButton, { url: urlWithoutGetParameters, title: (_e = params === null || params === void 0 ? void 0 : params.telegram) === null || _e === void 0 ? void 0 : _e.title, className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/telegram-btn.svg", alt: "telegram", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "Telegram" })] }), _jsxs(WhatsappShareButton, { url: urlWithoutGetParameters, title: (_f = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _f === void 0 ? void 0 : _f.title, separator: (_g = params === null || params === void 0 ? void 0 : params.whatsapp) === null || _g === void 0 ? void 0 : _g.separator, className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/whatsapp-btn.svg", alt: "whatsapp", height: 40, width: 40 }), _jsx(H5, { color: TextGrayColor, children: "WhatsApp" })] }), _jsxs(TwitterShareButton, { url: urlWithoutGetParameters, title: (_h = params === null || params === void 0 ? void 0 : params.twitter) === null || _h === void 0 ? void 0 : _h.title, via: (_j = params === null || params === void 0 ? void 0 : params.twitter) === null || _j === void 0 ? void 0 : _j.via, related: (_k = params === null || params === void 0 ? void 0 : params.twitter) === null || _k === void 0 ? void 0 : _k.related, hashtags: (_l = params === null || params === void 0 ? void 0 : params.twitter) === null || _l === void 0 ? void 0 : _l.hashtags, className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/twitter-btn.svg", alt: "twitter", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Twitter" })] }), _jsxs(RedditShareButton, { url: urlWithoutGetParameters, title: (_m = params === null || params === void 0 ? void 0 : params.reddit) === null || _m === void 0 ? void 0 : _m.title, className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/reddit-btn.svg", alt: "reddit", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Reddit" })] }), _jsxs(FacebookShareButton, { url: urlWithoutGetParameters, quote: ((_o = params === null || params === void 0 ? void 0 : params.facebook) === null || _o === void 0 ? void 0 : _o.quote) || 'My cool NFT', hashtag: ((_p = params === null || params === void 0 ? void 0 : params.facebook) === null || _p === void 0 ? void 0 : _p.hashtag) || '#ludo', className: "shareBtn", onClick: onHide, children: [_jsx("img", { src: "/share/facebook-btn.svg", alt: "facebook", width: 40, height: 40 }), _jsx(H5, { color: TextGrayColor, children: "Facebook" })] })] })] }));
+};
+// Export
+export default ShareDialog;
+var templateObject_1, templateObject_2;

package/dist/components/showcaseAssets/showcaseSort/data.js

@@ -1,26 +1,26 @@
 var sortData = [
-  {
-    id: Math.random(),
-    value: 'all',
-    label: 'All',
-  },
-  {
-    id: Math.random(),
-    value: 'asset',
-    label: 'NFTs',
-  },
-  {
-    id: Math.random(),
-    value: 'collection',
-    label: 'Collections',
-  },
-  // {
-  //   id: Math.random(),
-  //   label: 'Events',
-  // },
-  // {
-  //   id: Math.random(),
-  //   label: 'Apps',
-  // },
+    {
+        id: Math.random(),
+        value: 'all',
+        label: 'All',
+    },
+    {
+        id: Math.random(),
+        value: 'asset',
+        label: 'NFTs',
+    },
+    {
+        id: Math.random(),
+        value: 'collection',
+        label: 'Collections',
+    },
+    // {
+    //   id: Math.random(),
+    //   label: 'Events',
+    // },
+    // {
+    //   id: Math.random(),
+    //   label: 'Apps',
+    // },
 ];
 export { sortData };

package/dist/components/showcaseAssets/showcaseSort/index.js

@@ -0,0 +1,20 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { BlackColor } from '@/styles/colors';
+import { FH2 } from '@/styles/typography';
+import { StyledTabsNavLink } from '@/system/Tabs/TabNavLink';
+import TabsNav from '@/system/Tabs/TabsNav';
+// Styles
+var StyledShowCaseSort = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"], ["\n  margin-bottom: 25px;\n  display: flex;\n  align-items: center;\n  .caption {\n    user-select: none;\n    color: ", ";\n    ", ";\n    margin-right: 32px;\n    padding-bottom: 10px;\n  }\n  .tabs {\n    ", " {\n      margin-right: 24px;\n      margin-bottom: 10px;\n      &:last-child {\n        margin-right: 0;\n      }\n    }\n  }\n"])), BlackColor, FH2, StyledTabsNavLink);
+// Component
+var ShowCaseSort = function (_a) {
+    var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, data = _a.data;
+    return (_jsxs(StyledShowCaseSort, { children: [_jsx("span", { className: "caption", children: "Explore" }), _jsx("div", { className: "tabs", children: _jsx(TabsNav, { activeTab: activeTab, tabsData: data, setActiveTab: setActiveTab }) })] }));
+};
+// Export
+export default ShowCaseSort;
+var templateObject_1;