@ludo.ninja/components 1.1.2 → 1.1.3

package/dist/components/search/index.jsx

@@ -1,373 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled, { css } from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  AccentColor,
-  BlackColor,
-  BorderColorLight,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
+import { AccentColor, BlackColor, BorderColorLight, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import { zIndexSearch } from '@/styles/mixins/z-indexes';
 import { FH6, FH7 } 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';
-
-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 StyledSearch = styled.div(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ',
-        ';\n  box-shadow: ',
-        ';\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ',
-        ';\n  border-bottom-left-radius: ',
-        ';\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ',
-        '\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ',
-        ';\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ',
-        ' {\n    //margin: ',
-        ' 0 0 0;\n    max-width: ',
-        ';\n    margin: 0 ',
-        ' ',
-        ';\n    box-shadow: ',
-        ';\n    width: ',
-        ';\n    height: ',
-        ';\n    border-top-right-radius: ',
-        ';\n    border-top-left-radius: ',
-        ';\n    border-bottom-right-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n\n    .suggestionBar {\n      top: ',
-        ';\n      padding: 0 ',
-        ' ',
-        ';\n      border-bottom-right-radius: ',
-        ';\n      border-bottom-left-radius: ',
-        ';\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ',
-        ' -\n            ',
-        ' - ',
-        ' -\n            ',
-        ' - ',
-        ' -\n            ',
-        '\n        );\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ',
-        ';\n  box-shadow: ',
-        ';\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ',
-        ';\n  border-bottom-left-radius: ',
-        ';\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ',
-        '\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ',
-        ';\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ',
-        ' {\n    //margin: ',
-        ' 0 0 0;\n    max-width: ',
-        ';\n    margin: 0 ',
-        ' ',
-        ';\n    box-shadow: ',
-        ';\n    width: ',
-        ';\n    height: ',
-        ';\n    border-top-right-radius: ',
-        ';\n    border-top-left-radius: ',
-        ';\n    border-bottom-right-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n\n    .suggestionBar {\n      top: ',
-        ';\n      padding: 0 ',
-        ' ',
-        ';\n      border-bottom-right-radius: ',
-        ';\n      border-bottom-left-radius: ',
-        ';\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ',
-        ' -\n            ',
-        ' - ',
-        ' -\n            ',
-        ' - ',
-        ' -\n            ',
-        '\n        );\n      }\n    }\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.isFocused ? zIndexSearch.toString() : '0';
-  },
-  function (props) {
+var StyledSearch = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ", ";\n  box-shadow: ", ";\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ", ";\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ", " {\n    //margin: ", " 0 0 0;\n    max-width: ", ";\n    margin: 0 ", " ", ";\n    box-shadow: ", ";\n    width: ", ";\n    height: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n\n    .suggestionBar {\n      top: ", ";\n      padding: 0 ", " ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ", " -\n            ", " - ", " -\n            ", " - ", " -\n            ", "\n        );\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  max-width: 600px;\n  margin: 0px 20px 50px;\n  position: relative;\n  z-index: ", ";\n  box-shadow: ", ";\n  background-color: white;\n  width: 600px;\n  height: 60px;\n  border-top-right-radius: 30px;\n  border-top-left-radius: 30px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  @media (max-width: 767px) {\n    margin: 0 20px 20px 20px;\n    height: 52px;\n    box-shadow: 0 16px 32px -16px rgba(33, 21, 95, 0.12);\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  .suggestionBar {\n    position: absolute;\n    top: 50px;\n    left: 0;\n    right: 0;\n    padding: 0 10px 10px;\n    background-color: ", ";\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    @media (min-width: 768px) {\n      .scroller {\n        max-height: calc(\n          var(--app-height) - 124px - 50px - 24px - 10px - 24px - 44px\n        );\n      }\n    }\n  }\n\n  ", " {\n    //margin: ", " 0 0 0;\n    max-width: ", ";\n    margin: 0 ", " ", ";\n    box-shadow: ", ";\n    width: ", ";\n    height: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n\n    .suggestionBar {\n      top: ", ";\n      padding: 0 ", " ", ";\n      border-bottom-right-radius: ", ";\n      border-bottom-left-radius: ", ";\n\n      .scroller {\n        max-height: calc(\n          var(--app-height) - ", " -\n            ", " - ", " -\n            ", " - ", " -\n            ", "\n        );\n      }\n    }\n  }\n"])), function (props) { return (props.isFocused ? zIndexSearch.toString() : '0'); }, function (props) {
     return props.isActive ? 'none' : '0 16px 32px -16px rgba(33, 21, 95, 0.12)';
-  },
-  function (props) {
-    return props.isActive ? 'none' : '30px';
-  },
-  function (props) {
-    return props.isActive ? 'none' : '30px';
-  },
-  function (props) {
-    return (
-      props.isMobileOpen &&
-      css(
-        templateObject_1 ||
-          (templateObject_1 = __makeTemplateObject(
-            [
-              '\n        height: unset;\n        width: 100%;\n        margin: 0;\n      ',
-            ],
-            [
-              '\n        height: unset;\n        width: 100%;\n        margin: 0;\n      ',
-            ]
-          ))
-      )
-    );
-  },
-  WhiteColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(30),
-  adaptiveValueCalc(600),
-  adaptiveValueCalc(20),
-  adaptiveValueCalc(50),
-  function (props) {
+}, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) {
+    return props.isMobileOpen && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        height: unset;\n        width: 100%;\n        margin: 0;\n      "], ["\n        height: unset;\n        width: 100%;\n        margin: 0;\n      "])));
+}, WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(30), adaptiveValueCalc(600), adaptiveValueCalc(20), adaptiveValueCalc(50), function (props) {
     return props.isActive
-      ? 'none'
-      : '0 '
-          .concat(adaptiveValueCalc(16), ' ')
-          .concat(adaptiveValueCalc(32), ' ')
-          .concat(adaptiveValueCalc(-16), ' rgba(33, 21, 95, 0.12)');
-  },
-  adaptiveValueCalc(600),
-  adaptiveValueCalc(60),
-  adaptiveValueCalc(30),
-  adaptiveValueCalc(30),
-  function (props) {
+        ? 'none'
+        : "0 ".concat(adaptiveValueCalc(16), " ").concat(adaptiveValueCalc(32), " ").concat(adaptiveValueCalc(-16), " rgba(33, 21, 95, 0.12)");
+}, adaptiveValueCalc(600), adaptiveValueCalc(60), adaptiveValueCalc(30), adaptiveValueCalc(30), function (props) {
     return props.isActive ? 'none' : adaptiveValueCalc(30);
-  },
-  function (props) {
+}, function (props) {
     return props.isActive ? 'none' : adaptiveValueCalc(30);
-  },
-  adaptiveValueCalc(50),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(30),
-  adaptiveValueCalc(30),
-  adaptiveValueCalc(124),
-  adaptiveValueCalc(50),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(44)
-);
-var StyledInput = styled.input(
-  templateObject_4 ||
-    (templateObject_4 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ',
-        ';\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ',
-        ';\n  margin-bottom: ',
-        ';\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ',
-        ';\n  border-bottom-left-radius: ',
-        ';\n\n  ::placeholder {\n    color: ',
-        ';\n  }\n\n  @media (max-width: 767px) {\n    ',
-        ';\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ',
-        '\n  }\n\n  ',
-        ' {\n    margin: ',
-        ';\n    height: ',
-        ';\n    padding-left: ',
-        ';\n    padding-right: ',
-        ';\n    margin-top: ',
-        ';\n    margin-bottom: ',
-        ';\n    border-top-right-radius: ',
-        ';\n    border-top-left-radius: ',
-        ';\n    border-bottom-right-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ',
-        ';\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ',
-        ';\n  margin-bottom: ',
-        ';\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ',
-        ';\n  border-bottom-left-radius: ',
-        ';\n\n  ::placeholder {\n    color: ',
-        ';\n  }\n\n  @media (max-width: 767px) {\n    ',
-        ';\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ',
-        '\n  }\n\n  ',
-        ' {\n    margin: ',
-        ';\n    height: ',
-        ';\n    padding-left: ',
-        ';\n    padding-right: ',
-        ';\n    margin-top: ',
-        ';\n    margin-bottom: ',
-        ';\n    border-top-right-radius: ',
-        ';\n    border-top-left-radius: ',
-        ';\n    border-bottom-right-radius: ',
-        ';\n    border-bottom-left-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  FH7,
-  BlackColor,
-  function (props) {
-    return props.isActive ? '0' : '10px';
-  },
-  function (props) {
-    return props.isActive ? '0' : '10px';
-  },
-  function (props) {
-    return props.isActive ? 'none' : '30px';
-  },
-  function (props) {
-    return props.isActive ? 'none' : '30px';
-  },
-  TextGrayColor,
-  FH6,
-  function (props) {
-    return (
-      props.isMobileOpen &&
-      css(
-        templateObject_3 ||
-          (templateObject_3 = __makeTemplateObject(
-            [
-              '\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      ',
-            ],
-            [
-              '\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      ',
-            ]
-          ))
-      )
-    );
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(10),
-  adaptiveValueCalc(40),
-  adaptiveValueCalc(52),
-  adaptiveValueCalc(48),
-  function (props) {
-    return props.isActive ? '0' : adaptiveValueCalc(10);
-  },
-  function (props) {
-    return props.isActive ? '0' : adaptiveValueCalc(10);
-  },
-  adaptiveValueCalc(20),
-  adaptiveValueCalc(20),
-  function (props) {
+}, adaptiveValueCalc(50), adaptiveValueCalc(10), adaptiveValueCalc(10), adaptiveValueCalc(30), adaptiveValueCalc(30), adaptiveValueCalc(124), adaptiveValueCalc(50), adaptiveValueCalc(24), adaptiveValueCalc(10), adaptiveValueCalc(24), adaptiveValueCalc(44));
+var StyledInput = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ", ";\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  @media (max-width: 767px) {\n    ", ";\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    height: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  margin: 10px;\n  position: relative;\n  width: 96%;\n  height: 40px;\n  outline: none;\n  border: none;\n  color: ", ";\n  background-color: #f9fafc;\n  padding-left: 52px;\n  padding-right: 48px;\n  box-sizing: border-box;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  border-top-right-radius: 20px;\n  border-top-left-radius: 20px;\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  @media (max-width: 767px) {\n    ", ";\n    padding-left: 40px;\n\n    height: 36px;\n    margin: 8px;\n    width: 96%;\n    border-bottom-right-radius: 30px;\n    border-bottom-left-radius: 30px;\n    ", "\n  }\n\n  ", " {\n    margin: ", ";\n    height: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    margin-top: ", ";\n    margin-bottom: ", ";\n    border-top-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-bottom-left-radius: ", ";\n  }\n"])), dmsansFontVarCss.css, FH7, BlackColor, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? '0' : '10px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, function (props) { return (props.isActive ? 'none' : '30px'); }, TextGrayColor, FH6, function (props) {
+    return props.isMobileOpen && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      "], ["\n        border-top-right-radius: 30px;\n        border-top-left-radius: 30px;\n        width: 100%;\n        margin: 0;\n      "])));
+}, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(40), adaptiveValueCalc(52), adaptiveValueCalc(48), function (props) { return (props.isActive ? '0' : adaptiveValueCalc(10)); }, function (props) { return (props.isActive ? '0' : adaptiveValueCalc(10)); }, adaptiveValueCalc(20), adaptiveValueCalc(20), function (props) {
     return props.isActive ? 'none' : adaptiveValueCalc(30);
-  },
-  function (props) {
+}, function (props) {
     return props.isActive ? 'none' : adaptiveValueCalc(30);
-  }
-);
-var StyledSearchIcon = styled.div(
-  templateObject_5 ||
-    (templateObject_5 = __makeTemplateObject(
-      [
-        '\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ',
-        ';\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ',
-        ' {\n    top: ',
-        ';\n    bottom: ',
-        ';\n    left: ',
-        ';\n\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ',
-        ';\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ',
-        ' {\n    top: ',
-        ';\n    bottom: ',
-        ';\n    left: ',
-        ';\n\n    width: ',
-        ';\n    height: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.isActive ? BorderColorLight : AccentColor;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(18),
-  adaptiveValueCalc(18),
-  adaptiveValueCalc(30),
-  adaptiveValueCalc(24),
-  adaptiveValueCalc(24)
-);
+});
+var StyledSearchIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  position: absolute;\n  top: 18px;\n  bottom: 18px;\n  left: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  z-index: 1;\n\n  width: 24px;\n  height: 24px;\n\n  svg path {\n    stroke: ", ";\n  }\n\n  @media (max-width: 767px) {\n    left: 16px;\n  }\n\n  ", " {\n    top: ", ";\n    bottom: ", ";\n    left: ", ";\n\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) { return (props.isActive ? BorderColorLight : AccentColor); }, mediaQuery.minWidthFourK, adaptiveValueCalc(18), adaptiveValueCalc(18), adaptiveValueCalc(30), adaptiveValueCalc(24), adaptiveValueCalc(24));
 var SearchGlassIconResize = function () {
-  var windowDimensions =
-    useWindowDimensionsWithServerInitial().windowDimensions;
-  return (
-    <SearchGlassIcon
-      style={getAdaptiveScale({
-        windowDimensions: windowDimensions,
-        currentSize: 1,
-      })}
-    />
-  );
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<SearchGlassIcon style={getAdaptiveScale({
+            windowDimensions: windowDimensions,
+            currentSize: 1,
+        })}/>);
 };
 // Components
-var Search = function () {
-  return (
-    <SearchInputContainer
-      isClearOnBlur
-      initializeInputComponent={function (_a) {
-        var searchSuggestion = _a.searchSuggestion,
-          handle = _a.handle,
-          inputRef = _a.inputRef,
-          searchValue = _a.searchValue,
-          isSearchFocused = _a.isSearchFocused,
-          mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder,
-          searchCloseButton = _a.searchCloseButton,
-          isMobileOpen = _a.isMobileOpen;
-        return (
-          <StyledSearch
-            isActive={Boolean(searchValue.length)}
-            isFocused={isSearchFocused}
-            isMobileOpen={isMobileOpen}
-          >
-            <StyledSearchIcon isActive={Boolean(searchValue.length)}>
-              <SearchGlassIconResize />
-            </StyledSearchIcon>
-            <StyledInput
-              isMobileOpen={isMobileOpen}
-              isActive={Boolean(searchValue.length)}
-              tabIndex={0}
-              autoComplete={'off'}
-              onChange={handle.change}
-              ref={inputRef}
-              onFocus={handle.focus}
-              onBlur={handle.blur}
-              onKeyPress={handle.keyPress}
-              value={searchValue}
-              type={'text'}
-              placeholder={mobileOrDesktopPlaceHolder}
-            />
-            {searchCloseButton}
-            {searchSuggestion}
-          </StyledSearch>
-        );
-      }}
-    />
-  );
-};
+var Search = function () { return (<SearchInputContainer isClearOnBlur initializeInputComponent={function (_a) {
+        var searchSuggestion = _a.searchSuggestion, handle = _a.handle, inputRef = _a.inputRef, searchValue = _a.searchValue, isSearchFocused = _a.isSearchFocused, mobileOrDesktopPlaceHolder = _a.mobileOrDesktopPlaceHolder, searchCloseButton = _a.searchCloseButton, isMobileOpen = _a.isMobileOpen;
+        return (<StyledSearch isActive={Boolean(searchValue.length)} isFocused={isSearchFocused} isMobileOpen={isMobileOpen}>
+        <StyledSearchIcon isActive={Boolean(searchValue.length)}>
+          <SearchGlassIconResize />
+        </StyledSearchIcon>
+        <StyledInput isMobileOpen={isMobileOpen} isActive={Boolean(searchValue.length)} tabIndex={0} autoComplete={'off'} onChange={handle.change} ref={inputRef} onFocus={handle.focus} onBlur={handle.blur} onKeyPress={handle.keyPress} value={searchValue} type={'text'} placeholder={mobileOrDesktopPlaceHolder}/>
+        {searchCloseButton}
+        {searchSuggestion}
+      </StyledSearch>);
+    }}/>); };
 // Export
 export default Search;
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -1,91 +1,54 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState } from 'react';
-
 import styled from 'styled-components';
-
 import { TextGrayColor } from '@/styles/colors';
 import { FH3 } 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;
-  };
-
-var StyledSearchCategories = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        "\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ",
-        ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ",
-        ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n",
-      ],
-      [
-        "\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ",
-        ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ",
-        ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n",
-      ]
-    )),
-  FH3,
-  TextGrayColor
-);
+var StyledSearchCategories = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ", ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ", ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  height: 100%;\n  width: 24.58%;\n  z-index: 1000;\n  top: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n\n  :before {\n    content: '';\n    width: 1px;\n    height: 24px;\n    background-color: #c1c8de;\n    margin-right: 16px;\n  }\n\n  .caption {\n    ", ";\n    user-select: none;\n    color: #696f91;\n  }\n  .dropdown {\n    display: none;\n    position: absolute;\n    top: 60px;\n    background-color: white;\n    width: 220px;\n    height: auto;\n    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);\n    border-radius: 24px;\n\n    :before {\n      content: '';\n      height: 20px;\n      display: block;\n      width: 100%;\n      background-color: transparent;\n      top: -20px;\n      position: absolute;\n    }\n\n    span {\n      display: block;\n      color: ", ";\n      font-size: 16px;\n      height: 100%;\n      padding: 13px 0 13px 20px;\n      user-select: none;\n\n      :last-child {\n        border-bottom-right-radius: 24px;\n        border-bottom-left-radius: 24px;\n      }\n\n      :first-child {\n        border-top-right-radius: 24px;\n        border-top-left-radius: 24px;\n      }\n\n      :hover {\n        background-color: #f6f7fd;\n      }\n    }\n  }\n\n  .arrow_icon {\n    width: 24px;\n    height: 24px;\n    margin-left: 16px;\n\n    .icon {\n      content: url('/search/arrow_up.svg');\n      transform: rotate(0deg);\n      transition: transform 0.2s;\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  :hover {\n    .dropdown {\n      display: block;\n    }\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n  }\n\n  :hover :before {\n    .arrow_icon .icon {\n      transform: rotate(180deg);\n      transition: transform 0.2s;\n    }\n    .dropdown {\n      display: block;\n    }\n  }\n"])), FH3, TextGrayColor);
 var data = [
-  {
-    id: Math.random(),
-    label: 'Creations',
-  },
-  {
-    id: Math.random(),
-    label: 'Users',
-  },
-  {
-    id: Math.random(),
-    label: 'Galleries',
-  },
-  {
-    id: Math.random(),
-    label: 'Campaigns',
-  },
+    {
+        id: Math.random(),
+        label: 'Creations',
+    },
+    {
+        id: Math.random(),
+        label: 'Users',
+    },
+    {
+        id: Math.random(),
+        label: 'Galleries',
+    },
+    {
+        id: Math.random(),
+        label: 'Campaigns',
+    },
 ];
 // Components
 var SearchCategories = function () {
-  var _a = useState(data[0]),
-    categoryValue = _a[0],
-    setCategoryValue = _a[1];
-  // Handlers
-  var handleCategory = function (e, indx) {
-    setCategoryValue(data[indx]);
-  };
-  // Renders
-  var renderCategories = function () {
-    return data.map(function (category, indx) {
-      if (category.id !== categoryValue.id) {
-        return (
-          <span
-            key={category.id}
-            onClick={function (e) {
-              return handleCategory(e, indx);
-            }}
-          >
+    var _a = useState(data[0]), categoryValue = _a[0], setCategoryValue = _a[1];
+    // Handlers
+    var handleCategory = function (e, indx) {
+        setCategoryValue(data[indx]);
+    };
+    // Renders
+    var renderCategories = function () {
+        return data.map(function (category, indx) {
+            if (category.id !== categoryValue.id) {
+                return (<span key={category.id} onClick={function (e) { return handleCategory(e, indx); }}>
             {category.label}
-          </span>
-        );
-      }
-    });
-  };
-  return (
-    <StyledSearchCategories>
+          </span>);
+            }
+        });
+    };
+    return (<StyledSearchCategories>
       <span className={'caption'}>{categoryValue.label}</span>
       <div className={'arrow_icon'}>
-        <span className={'icon'} />
+        <span className={'icon'}/>
       </div>
       <div className={'dropdown'}>{renderCategories()}</div>
-    </StyledSearchCategories>
-  );
+    </StyledSearchCategories>);
 };
 // Export
 export default SearchCategories;