@ludo.ninja/components 1.7.5 → 1.7.7

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

@@ -0,0 +1,40 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var ImageInterceptor_1 = require("@/system/Img/ImageInterceptor");
+// Styles
+var StyledSearchSuggestionsItem = styled_components_1.default.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'); }, typography_1.FH5, colors_1.TextDarkGrayColor, colors_1.BlackColor, typography_1.FH5, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), function (props) {
+    return props.borderRadius ? (0, _4k_1.adaptiveValueCalc)(16) : 'none';
+}, (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(26), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(-6), (0, _4k_1.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 (react_1.default.createElement(StyledSearchSuggestionsItem, { borderRadius: borderRadius },
+        react_1.default.createElement(link_1.default, { href: link, className: 'link' },
+            react_1.default.createElement(ImageInterceptor_1.ImageInterceptor, { borderRadiusSkeleton: borderRadius && 16 },
+                react_1.default.createElement("img", { src: imgUrl, alt: 'pirate', width: 32, height: 32 })),
+            react_1.default.createElement("div", { className: 'text' },
+                react_1.default.createElement("p", { className: 'regular' }, (0, utils_1.searchQueryLetters)({
+                    text: name,
+                    searchQuery: searchTerm,
+                    className: 'strong',
+                }))),
+            additionalHTML)));
+};
+// Export
+exports.default = SearchSuggestionsItem;
+var templateObject_1;

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

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchSuggestionsItemsSkeleton = void 0;
+var react_1 = __importDefault(require("react"));
+var react_loading_skeleton_1 = __importStar(require("react-loading-skeleton"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var searchSuggestionsCaption_1 = __importDefault(require("@/components/search/searchSuggestions/searchSuggestionsCaption"));
+// Styles
+var StyledSearchSuggestionsItemSkeleton = styled_components_1.default.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"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(44), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(32), (0, _4k_1.adaptiveValueCalc)(336), (0, _4k_1.adaptiveValueCalc)(65), (0, _4k_1.adaptiveValueCalc)(32));
+// Components
+var SearchSuggestionsItemSkeleton = function () { return (react_1.default.createElement(StyledSearchSuggestionsItemSkeleton, null,
+    react_1.default.createElement(react_loading_skeleton_1.SkeletonTheme, { baseColor: colors_1.InactiveButtonColor },
+        react_1.default.createElement(react_loading_skeleton_1.default, null),
+        react_1.default.createElement(react_loading_skeleton_1.default, null),
+        react_1.default.createElement(react_loading_skeleton_1.default, null)))); };
+var SContainer = styled_components_1.default.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_components_1.default.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"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(124), (0, _4k_1.adaptiveValueCalc)(50), (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(24));
+var SearchSuggestionsItemsSkeleton = function () { return (react_1.default.createElement(SSkeleton, null, ['NFTs', 'Collections', 'Profiles'].map(function (item) { return (react_1.default.createElement(searchSuggestionsCaption_1.default, { key: item, caption: item },
+    react_1.default.createElement(SContainer, null, Array.from({ length: 3 }, function (_, index) { return (react_1.default.createElement(SearchSuggestionsItemSkeleton, { key: index })); })))); }))); };
+exports.SearchSuggestionsItemsSkeleton = SearchSuggestionsItemsSkeleton;
+// Export
+exports.default = SearchSuggestionsItemSkeleton;
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+// Styles
+var StyledSearchSuggestionsNotFound = styled_components_1.default.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"])), typography_1.FH5, colors_1.TextGrayColor, colors_1.BorderColorLight, ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(28), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), colors_1.BorderColorLight, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(14));
+// Components
+var SearchSuggestionsNotFound = function (_a) {
+    var notFoundText = _a.notFoundText;
+    return (react_1.default.createElement(StyledSearchSuggestionsNotFound, null,
+        react_1.default.createElement("p", null,
+            "No results found for \u201C",
+            notFoundText,
+            "\u201D")));
+};
+// Export
+exports.default = SearchSuggestionsNotFound;
+var templateObject_1;

package/dist/components/shareDialog/index.js

@@ -0,0 +1,72 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_share_1 = require("react-share");
+var styled_components_1 = __importDefault(require("styled-components"));
+var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var utils_1 = require("@ludo.ninja/utils");
+var ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var colors_1 = require("@/styles/colors");
+var _system_1 = require("@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 = (0, styled_components_1.default)(_system_1.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"])), colors_1.BlackColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
+var StyledShare = styled_components_1.default.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"])), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(43), (0, _4k_1.adaptiveValueCalc)(33), (0, _4k_1.adaptiveValueCalc)(43), (0, _4k_1.adaptiveValueCalc)(108), (0, _4k_1.adaptiveValueCalc)(64), (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.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 = (0, ui_1.useUiStore)(function (state) { return state.openAlert; });
+    return (React.createElement(StyledShare, null,
+        React.createElement(_system_1.Flex, { alignItems: 'center', justifyContent: 'center' },
+            React.createElement(STitle, null, 'Share to...')),
+        React.createElement("div", { className: "shareButtons" },
+            React.createElement("button", { onClick: function () {
+                    onHide();
+                    (0, utils_1.copyToClipboard)(urlWithoutGetParameters).then(function () {
+                        openAlert({
+                            type: type_1.alertVariants.copied,
+                        });
+                    });
+                }, className: 'shareBtn' },
+                React.createElement("img", { src: "/share/copy-link-btn.svg", alt: "share", height: 40, width: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Copy Link")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/email-btn.svg", alt: "email", height: 40, width: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Email")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/telegram-btn.svg", alt: "telegram", height: 40, width: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Telegram")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/whatsapp-btn.svg", alt: "whatsapp", height: 40, width: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "WhatsApp")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/twitter-btn.svg", alt: "twitter", width: 40, height: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Twitter")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/reddit-btn.svg", alt: "reddit", width: 40, height: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Reddit")),
+            React.createElement(react_share_1.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 },
+                React.createElement("img", { src: "/share/facebook-btn.svg", alt: "facebook", width: 40, height: 40 }),
+                React.createElement(_system_1.H5, { color: colors_1.TextGrayColor }, "Facebook")))));
+};
+// Export
+exports.default = ShareDialog;
+var templateObject_1, templateObject_2;

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

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sortData = void 0;
 var sortData = [
     {
         id: Math.random(),
@@ -23,4 +26,4 @@ var sortData = [
     //   label: 'Apps',
     // },
 ];
-export { sortData };
+exports.sortData = sortData;

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

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("@/styles/colors");
+var typography_1 = require("@/styles/typography");
+var TabNavLink_1 = require("@/system/Tabs/TabNavLink");
+var TabsNav_1 = __importDefault(require("@/system/Tabs/TabsNav"));
+// Styles
+var StyledShowCaseSort = styled_components_1.default.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"])), colors_1.BlackColor, typography_1.FH2, TabNavLink_1.StyledTabsNavLink);
+// Component
+var ShowCaseSort = function (_a) {
+    var activeTab = _a.activeTab, setActiveTab = _a.setActiveTab, data = _a.data;
+    return (react_1.default.createElement(StyledShowCaseSort, null,
+        react_1.default.createElement("span", { className: "caption" }, "Explore"),
+        react_1.default.createElement("div", { className: "tabs" },
+            react_1.default.createElement(TabsNav_1.default, { activeTab: activeTab, tabsData: data, setActiveTab: setActiveTab }))));
+};
+// Export
+exports.default = ShowCaseSort;
+var templateObject_1;

package/dist/components/sidebar/data.js

@@ -0,0 +1,89 @@
+"use strict";
+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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sideBarDataForProd = exports.sideBarDataForDev = void 0;
+var react_1 = __importDefault(require("react"));
+var aboutLudo_svg_1 = __importDefault(require("@/public/sidebar/aboutLudo.svg"));
+var aboutLudoDark_svg_1 = __importDefault(require("@/public/sidebar/aboutLudoDark.svg"));
+var api_svg_1 = __importDefault(require("@/public/sidebar/api.svg"));
+var explore_svg_1 = __importDefault(require("@/public/sidebar/explore.svg"));
+var my_invites_svg_1 = __importDefault(require("@/public/sidebar/my-invites.svg"));
+var rewards_svg_1 = __importDefault(require("@/public/sidebar/rewards.svg"));
+var submitNft_svg_1 = __importDefault(require("@/public/sidebar/submitNft.svg"));
+var sideBarDataForDev = function (_a) {
+    var isAuthorized = _a.isAuthorized, isDarkTheme = _a.isDarkTheme, userId = _a.userId;
+    return __spreadArray(__spreadArray([
+        {
+            href: '/',
+            title: 'Explore',
+            icon: react_1.default.createElement(explore_svg_1.default, null),
+            isExternalUrl: false,
+        }
+    ], (isAuthorized
+        ? [
+            {
+                href: "/rewards/".concat(userId),
+                title: 'Rewards',
+                icon: react_1.default.createElement(rewards_svg_1.default, null),
+                isExternalUrl: false,
+            },
+            {
+                href: '/invite-codes',
+                title: 'My invites',
+                icon: react_1.default.createElement(my_invites_svg_1.default, null),
+                isExternalUrl: false,
+            },
+        ]
+        : []), true), [
+        {
+            href: 'https://apidocs.ludo.com/',
+            title: 'API',
+            icon: react_1.default.createElement(api_svg_1.default, null),
+            isExternalUrl: true,
+        },
+        {
+            href: '/',
+            title: 'Submit NFT',
+            icon: react_1.default.createElement(submitNft_svg_1.default, null),
+            isExternalUrl: false,
+        },
+        {
+            href: '/',
+            title: 'About Ludo',
+            icon: isDarkTheme ? react_1.default.createElement(aboutLudoDark_svg_1.default, null) : react_1.default.createElement(aboutLudo_svg_1.default, null),
+            isExternalUrl: false,
+        },
+    ], false);
+};
+exports.sideBarDataForDev = sideBarDataForDev;
+var sideBarDataForProd = function (_a) {
+    var isAuthorized = _a.isAuthorized, userId = _a.userId;
+    return __spreadArray([], (isAuthorized
+        ? [
+            {
+                href: "/rewards/".concat(userId),
+                title: 'Rewards',
+                icon: react_1.default.createElement(rewards_svg_1.default, null),
+                isExternalUrl: false,
+            },
+            {
+                href: '/invite-codes',
+                title: 'My invites',
+                icon: react_1.default.createElement(my_invites_svg_1.default, null),
+                isExternalUrl: false,
+            },
+        ]
+        : []), true);
+};
+exports.sideBarDataForProd = sideBarDataForProd;

package/dist/components/sidebar/index.js

@@ -0,0 +1,133 @@
+"use strict";
+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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var styled_components_1 = __importStar(require("styled-components"));
+var sidebar_1 = require("@ludo.ninja/ui/build/components/sidebar");
+var interface_1 = require("@ludo.ninja/ui/build/dto/Theme/interface");
+var MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+var useExtension_1 = __importDefault(require("@/hooks/extension/useExtension"));
+var useSignOut_1 = require("@/modules/user/auth/useSignOut");
+var store_1 = require("@/modules/user/store");
+var ui_1 = require("@/store/ui");
+var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var data_1 = require("@/components/sidebar/data");
+var sidebarInviteCodeLabel_1 = __importDefault(require("@/components/sidebar/sidebarInviteCodeLabel"));
+var Userpic_1 = __importDefault(require("@/system/Img/Userpic"));
+var scale_1 = require("@/utils/adaptive/scale");
+var auth_1 = require("@/utils/auth");
+var env_1 = require("@/utils/env");
+var screen_1 = require("@/utils/screen");
+var MenuItem = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"], ["\n  font-size: 15px;\n  font-weight: 500;\n  line-height: 22px;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding: 12px 4px;\n  text-indent: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  color: ", ";\n\n  ", " {\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  transition: background-color 0.3s ease-in-out;\n\n  @media (hover: hover) {\n    &:hover {\n      transition: background-color 0.3s ease-in;\n      background-color: ", ";\n    }\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: ", ";\n    gap: ", ";\n    padding: ", " ", ";\n    text-indent: ", ";\n    border-radius: ", ";\n    img {\n      width: ", ";\n      height: ", ";\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.secondaryText;
+}, ScreenWidth_1.mediaQuery.mobile, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.secondaryBg;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(4), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20));
+var BeforeMenuContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"], ["\n  padding: 12px 0;\n  border-bottom: 1px solid ", ";\n\n  ", " {\n    padding: ", " 0;\n    border-bottom: ", " solid\n      ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.divider;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(1), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.divider;
+});
+var SLink = (0, styled_components_1.default)(link_1.default)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"], ["\n  &:not(:last-child) svg path {\n    fill: ", ";\n  }\n  .icon-wrapper {\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    ", " {\n      width: ", ";\n      height: ", ";\n      svg {\n        transform: ", ";\n      }\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.sidebarSvgPathFill;
+}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(20), function (props) {
+    return 'transform' in props.scale && props.scale.transform;
+});
+// Component
+var Sidebar = function (_a) {
+    var _b;
+    var isProdENV = _a.isProdENV;
+    var closeSidebar = (0, ui_1.useUiStore)(function (state) { return state.closeSidebar; });
+    var isSidebarOpen = (0, ui_1.useUiStore)(function (state) { return state.isSidebarOpen; });
+    var isAuthorized = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
+    var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
+    var signOut = (0, useSignOut_1.useSignOut)();
+    var deviceType = (0, screen_1.useWindowDimensions)().deviceType;
+    var _c = (0, useExtension_1.default)(), isExtensionInstalled = _c.isExtensionInstalled, openExtensionChromeStorePage = _c.openExtensionChromeStorePage, openExtension = _c.openExtension;
+    var _d = (_b = getUser) !== null && _b !== void 0 ? _b : [''], wallets = _d.wallets, userId = _d.userId;
+    var type = (0, styled_components_1.useTheme)().type;
+    var isDarkTheme = type === interface_1.ThemeEnum.dark;
+    // Todo fav-list
+    var sideBarData = (0, env_1.isProd)({ ENV: isProdENV })
+        ? (0, data_1.sideBarDataForProd)({ userId: userId, isAuthorized: isAuthorized })
+        : (0, data_1.sideBarDataForDev)({ userId: userId, isAuthorized: isAuthorized, isDarkTheme: isDarkTheme });
+    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    return (react_1.default.createElement(sidebar_1.Sidebar, { closeSidebar: closeSidebar, isOpen: isSidebarOpen, handle: {
+            login: function () {
+                closeSidebar();
+                (0, auth_1.redirectToLoginWindow)();
+            },
+            logout: signOut,
+        }, isAuthorized: isAuthorized, userWallets: wallets, slots: __assign({ menu: sideBarData.map(function (_a) {
+                var title = _a.title, href = _a.href, icon = _a.icon, isExternalUrl = _a.isExternalUrl;
+                return (react_1.default.createElement(SLink, { href: href, target: isExternalUrl ? '_blank' : '_self', onClick: closeSidebar, key: title, passHref: isExternalUrl, scale: (0, scale_1.getAdaptiveScale)({ windowDimensions: windowDimensions, currentSize: 1 }) },
+                    react_1.default.createElement("span", { className: "icon-wrapper" }, icon),
+                    title));
+            }), userPicture: function (_a) {
+                var children = _a.children, height = _a.height, width = _a.width, isNeedBoxTransform = _a.isNeedBoxTransform;
+                return (react_1.default.createElement(Userpic_1.default, { width: width, height: height, userId: userId, isNeedBoxTransform: isNeedBoxTransform }, children));
+            }, inviteCode: react_1.default.createElement(sidebarInviteCodeLabel_1.default, null) }, (deviceType == 'isDesktop' && isAuthorized
+            ? {
+                beforeMenu: (react_1.default.createElement(BeforeMenuContainer, null, isExtensionInstalled ? (react_1.default.createElement(MenuItem, { onClick: function () {
+                        closeSidebar();
+                        openExtension();
+                    } },
+                    react_1.default.createElement("img", { src: "/sidebar/ludoX.svg", alt: "Ludo X", width: 20, height: 20 }),
+                    "Open Ludo X")) : (react_1.default.createElement("div", { style: { padding: '12px 0' } },
+                    react_1.default.createElement(MainButton_1.default, { onClick: function () {
+                            closeSidebar();
+                            openExtensionChromeStorePage();
+                        }, text: 'Install Ludo X now', variant: 'primaryM' }))))),
+            }
+            : {})) }));
+};
+// Export
+exports.default = Sidebar;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/sidebar/initializer.js

@@ -0,0 +1,38 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarInitializer = void 0;
+var dynamic_1 = __importDefault(require("next/dynamic"));
+var Sidebar = (0, dynamic_1.default)(function () { return Promise.resolve().then(function () { return __importStar(require('../sidebar')); }).then(function (res) { return res.default; }); }, {
+    ssr: false,
+});
+var SidebarInitializer = function (_a) {
+    var isProdENV = _a.isProdENV;
+    return (React.createElement(Sidebar, { isProdENV: isProdENV }));
+};
+exports.SidebarInitializer = SidebarInitializer;

package/dist/components/sidebar/sidebarFilters/index.js

@@ -0,0 +1,30 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var typography_1 = require("@/styles/typography");
+var close20_svg_1 = __importDefault(require("@/public/close20.svg"));
+// Styles
+var StyledSidebarFilters = styled_components_1.default.aside(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ", ";\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ", ";\n      margin: 0;\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  background-color: white;\n  position: fixed;\n  z-index: 1000000;\n  transform: ", ";\n  transition: transform 0.2s;\n  will-change: transform;\n  width: 100%;\n  height: var(--app-height);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n\n  .closeIcon {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    justify-content: flex-end;\n    cursor: pointer;\n  }\n\n  .header {\n    padding: 32px 32px 6px 32px;\n\n    .caption {\n      ", ";\n      margin: 0;\n    }\n  }\n"])), function (props) {
+    return props.isOpen ? 'translateX(0%)' : 'translateX(calc(100% + 16px))';
+}, typography_1.FH3);
+// Component
+var SidebarFilters = function (_a) {
+    var isOpen = _a.isOpen, handleClose = _a.handleClose, children = _a.children;
+    return (react_1.default.createElement(StyledSidebarFilters, { isOpen: isOpen },
+        react_1.default.createElement("div", { className: 'closeIcon', onClick: handleClose },
+            react_1.default.createElement(close20_svg_1.default, null)),
+        react_1.default.createElement("div", { className: "header" },
+            react_1.default.createElement("h3", { className: 'caption' }, "Filters")),
+        children));
+};
+// Export
+exports.default = SidebarFilters;
+var templateObject_1;