@ludo.ninja/components 1.1.1 → 1.1.3

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

@@ -1,73 +1,22 @@
+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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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>
+    var caption = _a.caption, children = _a.children;
+    return (<StyledSearchSuggestionsCaption>
       <span className={'caption'}>{caption}</span>
       {children}
-    </StyledSearchSuggestionsCaption>
-  );
+    </StyledSearchSuggestionsCaption>);
 };
 // Export
 export default SearchSuggestionsCaption;

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

@@ -1,82 +1,25 @@
+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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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'}>
+    return (<StyledSearchSuggestionsFooter>
+      <div className={" footer"}>
         <p className={'text'}>
           Press <strong>Enter</strong> to search all results
         </p>
       </div>
-    </StyledSearchSuggestionsFooter>
-  );
+    </StyledSearchSuggestionsFooter>);
 };
 // Export
 export default SearchSuggestionsFooter;

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

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

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

@@ -1,136 +1,33 @@
+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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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>
-  );
-};
+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,80 +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 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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>
+    var notFoundText = _a.notFoundText;
+    return (<StyledSearchSuggestionsNotFound>
       <p>No results found for “{notFoundText}”</p>
-    </StyledSearchSuggestionsNotFound>
-  );
+    </StyledSearchSuggestionsNotFound>);
 };
 // Export
 export default SearchSuggestionsNotFound;