@ludo.ninja/components 1.8.0 → 1.8.2

package/dist/components/CreationCard/CardHead.js

@@ -42,15 +42,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardHead = void 0;
 var react_1 = __importDefault(require("react"));
 var router_1 = require("next/router");
-var store_1 = require("@/modules/user/store");
-var ui_1 = require("@/store/ui");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var user_1 = require("@ludo.ninja/components/dist/modules/user");
+var store_1 = require("@ludo.ninja/components/dist/store");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var addCreationToFavoriteList_1 = __importDefault(require("@/components/favoriteList/add/addCreationToFavoriteList"));
 var CardRank_1 = __importDefault(require("@/system/Cards/CardRank"));
 var Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
-var auth_1 = require("@/utils/auth");
+var auth_1 = require("@ludo.ninja/components/dist/utils/auth");
 var env_1 = require("@/utils/env");
-var screen_1 = require("@/utils/screen");
+var utils_1 = require("@ludo.ninja/components/dist/utils");
 var CollectionCreationEntity_1 = __importDefault(require("@/dto/Collection/CollectionCreationEntity"));
 var ItemType_1 = require("@/dto/common/ItemType");
 var addToFavListIcon_svg_1 = __importDefault(require("@/public/cards/addToFavListIcon.svg"));
@@ -59,12 +59,12 @@ var heart_svg_1 = __importDefault(require("@/public/cards/heart.svg"));
 // Component
 var CardHead = function (_a) {
     var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled, isShowCheckbox = _a.isShowCheckbox, currentMyGalleryId = _a.currentMyGalleryId, isProdENV = _a.isProdENV;
-    var openModalSidebarPortal = (0, ui_1.useUiStore)(function (state) { return state.openModalSidebarPortal; });
-    var isSignedIn = (0, store_1.useUserStore)(function (state) { return state.isSignedIn; });
+    var openModalSidebarPortal = (0, store_1.useUiStore)(function (state) { return state.openModalSidebarPortal; });
+    var isSignedIn = (0, user_1.useUserStore)(function (state) { return state.isSignedIn; });
     var isLicked = isIconLiked && isSignedIn;
-    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    var windowDimensions = (0, utils_1.useWindowDimensionsWithServerInitial)().windowDimensions;
     var isMobile = !!((windowDimensions === null || windowDimensions === void 0 ? void 0 : windowDimensions.windowWidth) &&
-        windowDimensions.windowWidth <= ScreenWidth_1.ScreenWidth.DESKTOP);
+        windowDimensions.windowWidth <= styles_1.ScreenWidth.DESKTOP);
     var router = (0, router_1.useRouter)();
     var isGallery = router.pathname.includes('gallery');
     var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {

package/dist/components/CreationCard/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { searchSchema as schema } from '@ludo.ninja/api';
-import { TCreationAndCollection } from '@/modules/virtuoso/types';
+import { TCreationAndCollection } from '@ludo.ninja/components/dist/modules';
 import GalleryEntityV2 from '@/dto/GalleryEntityV2';
 export type RemoveToolsType = {
     gallery?: GalleryEntityV2;

package/dist/components/CreationCard/index.js

@@ -46,12 +46,9 @@ var react_1 = __importDefault(require("react"));
 var react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 var styled_components_1 = __importStar(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var likes_1 = __importDefault(require("@/hooks/likes"));
-var useToGalleryAsset_1 = require("@/hooks/useToGalleryAsset");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var colors_1 = require("@/styles/colors");
-var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
-var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
+var likes_1 = __importDefault(require("@ludo.ninja/components/dist/hooks/likes"));
+var useToGalleryAsset_1 = require("@ludo.ninja/components/dist/hooks/useToGalleryAsset");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var CardHead_1 = require("@/components/CreationCard/CardHead");
 var HideLink_1 = __importDefault(require("@/system/Cards/HideLink"));
 var CardCheckbox_1 = __importDefault(require("@/system/Cards/CardCheckbox"));
@@ -63,10 +60,10 @@ var Headicons_1 = __importDefault(require("@/system/Cards/Styles/Headicons"));
 var _system_1 = require("@system");
 var env_1 = require("@/utils/env");
 // Styles
-var StyledRegularCard = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"])), colors_1.WhiteColor, boxShadow_1.default, boxTransform_1.default, function (props) { return (props.isNeedTransform ? null : boxTransform_1.default); }, function (props) { return (props.isNeedHeight ? '346px' : ''); }, function (props) {
+var StyledRegularCard = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"], ["\n  position: relative;\n  background-color: ", ";\n  border-radius: 6px;\n  ", ";\n  ", ";\n  // ", "\n\n  min-height: ", ";\n\n  ", "\n  .linkRegularCard {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n  }\n\n  ", " {\n    width: 164px;\n    min-height: ", ";\n  }\n\n  ", " {\n    width: 154px;\n    min-height: ", ";\n  }\n\n  ", " {\n    border-radius: ", ";\n\n    min-height: ", ";\n  }\n"])), styles_1.WhiteColor, styles_1.BoxShadow, styles_1.BoxTransform, function (props) { return (props.isNeedTransform ? null : styles_1.BoxTransform); }, function (props) { return (props.isNeedHeight ? '346px' : ''); }, function (props) {
     return props.isShowCheckbox
         ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "], ["\n          ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "])), Headicons_1.default) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          &:hover ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "], ["\n          &:hover ", " {\n            transition: 0.2s opacity ease-in;\n            opacity: 1 !important;\n          }\n        "])), Headicons_1.default);
-}, ScreenWidth_1.mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, ScreenWidth_1.mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), function (props) {
+}, styles_1.mediaQuery.maxWidthTablet, function (props) { return (props.isNeedHeight ? '258px' : ''); }, styles_1.mediaQuery.mobile, function (props) { return (props.isNeedHeight ? '244px' : ''); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(6), function (props) {
     return props.isNeedHeight ? (0, _4k_1.adaptiveValueCalc)(346) : '';
 });
 // Component

package/dist/components/deleteDialog/index.js

@@ -48,27 +48,25 @@ var router_1 = require("next/router");
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 var useDeleteGallery_1 = __importDefault(require("@/api/server-galleries/mutations/useDeleteGallery"));
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
-var _system_1 = require("@system");
-var scale_1 = require("@/utils/adaptive/scale");
-var screen_1 = require("@/utils/screen");
-var vars_1 = require("@/fonts/vars");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+var system_1 = require("@ludo.ninja/components/dist/system");
+var utils_1 = require("@ludo.ninja/components/dist/utils");
+var fonts_1 = require("@ludo.ninja/components/dist/fonts");
 var warning_svg_1 = __importDefault(require("@/public/warning.svg"));
 // Styles
-var StyledDelete = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 534px;\n  min-height: 199px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  & svg {\n    margin-bottom: 16px;\n  }\n\n  ", " {\n    min-width: 288px;\n    min-height: 220px;\n\n    .btns {\n      position: static;\n      justify-content: center;\n    }\n\n    .delete,\n    .cancel {\n      max-width: 133px;\n    }\n  }\n\n  .btns {\n    min-width: 280px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n\n    .delete {\n      width: 100%;\n\n      & button {\n        font-size: 15px;\n        font-weight: 500;\n        line-height: 1.47;\n\n        @media (max-width: 767px) {\n          font-size: 14px;\n          line-height: 1.43;\n        }\n      }\n    }\n\n    .cancel {\n      width: 100%;\n    }\n\n    & button {\n      width: 100%;\n      padding: 9px 0;\n    }\n\n    ", " {\n      min-width: 100%;\n    }\n  }\n\n  .title {\n    font-family: ", ";\n    margin-bottom: 16px;\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ", ";\n    text-align: center;\n\n    @media (max-width: 767px) {\n      max-width: 245px;\n      margin-bottom: 20px;\n      font-size: 18px;\n      line-height: 1.33;\n    }\n  }\n\n  .warning {\n    font-family: ", ";\n    margin-bottom: 34px;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.46;\n    color: ", ";\n\n    @media (max-width: 767px) {\n      margin-bottom: 32px;\n      font-size: 14px;\n      line-height: 1.42;\n    }\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n\n    & svg {\n      margin-bottom: ", ";\n    }\n\n    .btns {\n      min-width: ", ";\n      gap: ", ";\n      margin-bottom: ", ";\n\n      .delete {\n        & button {\n          font-size: ", ";\n        }\n      }\n\n      & button {\n        padding: ", " 0;\n      }\n    }\n\n    .title {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n\n    .warning {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n  }\n"], ["\n  min-width: 534px;\n  min-height: 199px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  & svg {\n    margin-bottom: 16px;\n  }\n\n  ", " {\n    min-width: 288px;\n    min-height: 220px;\n\n    .btns {\n      position: static;\n      justify-content: center;\n    }\n\n    .delete,\n    .cancel {\n      max-width: 133px;\n    }\n  }\n\n  .btns {\n    min-width: 280px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n\n    .delete {\n      width: 100%;\n\n      & button {\n        font-size: 15px;\n        font-weight: 500;\n        line-height: 1.47;\n\n        @media (max-width: 767px) {\n          font-size: 14px;\n          line-height: 1.43;\n        }\n      }\n    }\n\n    .cancel {\n      width: 100%;\n    }\n\n    & button {\n      width: 100%;\n      padding: 9px 0;\n    }\n\n    ", " {\n      min-width: 100%;\n    }\n  }\n\n  .title {\n    font-family: ", ";\n    margin-bottom: 16px;\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ", ";\n    text-align: center;\n\n    @media (max-width: 767px) {\n      max-width: 245px;\n      margin-bottom: 20px;\n      font-size: 18px;\n      line-height: 1.33;\n    }\n  }\n\n  .warning {\n    font-family: ", ";\n    margin-bottom: 34px;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.46;\n    color: ", ";\n\n    @media (max-width: 767px) {\n      margin-bottom: 32px;\n      font-size: 14px;\n      line-height: 1.42;\n    }\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n\n    & svg {\n      margin-bottom: ", ";\n    }\n\n    .btns {\n      min-width: ", ";\n      gap: ", ";\n      margin-bottom: ", ";\n\n      .delete {\n        & button {\n          font-size: ", ";\n        }\n      }\n\n      & button {\n        padding: ", " 0;\n      }\n    }\n\n    .title {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n\n    .warning {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.mobile, vars_1.poppinsFontVarCss.css, function (_a) {
+var StyledDelete = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  min-width: 534px;\n  min-height: 199px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  & svg {\n    margin-bottom: 16px;\n  }\n\n  ", " {\n    min-width: 288px;\n    min-height: 220px;\n\n    .btns {\n      position: static;\n      justify-content: center;\n    }\n\n    .delete,\n    .cancel {\n      max-width: 133px;\n    }\n  }\n\n  .btns {\n    min-width: 280px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n\n    .delete {\n      width: 100%;\n\n      & button {\n        font-size: 15px;\n        font-weight: 500;\n        line-height: 1.47;\n\n        @media (max-width: 767px) {\n          font-size: 14px;\n          line-height: 1.43;\n        }\n      }\n    }\n\n    .cancel {\n      width: 100%;\n    }\n\n    & button {\n      width: 100%;\n      padding: 9px 0;\n    }\n\n    ", " {\n      min-width: 100%;\n    }\n  }\n\n  .title {\n    font-family: ", ";\n    margin-bottom: 16px;\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ", ";\n    text-align: center;\n\n    @media (max-width: 767px) {\n      max-width: 245px;\n      margin-bottom: 20px;\n      font-size: 18px;\n      line-height: 1.33;\n    }\n  }\n\n  .warning {\n    font-family: ", ";\n    margin-bottom: 34px;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.46;\n    color: ", ";\n\n    @media (max-width: 767px) {\n      margin-bottom: 32px;\n      font-size: 14px;\n      line-height: 1.42;\n    }\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n\n    & svg {\n      margin-bottom: ", ";\n    }\n\n    .btns {\n      min-width: ", ";\n      gap: ", ";\n      margin-bottom: ", ";\n\n      .delete {\n        & button {\n          font-size: ", ";\n        }\n      }\n\n      & button {\n        padding: ", " 0;\n      }\n    }\n\n    .title {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n\n    .warning {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n  }\n"], ["\n  min-width: 534px;\n  min-height: 199px;\n  display: flex;\n  flex-direction: column;\n  justify-items: center;\n  align-items: center;\n\n  & svg {\n    margin-bottom: 16px;\n  }\n\n  ", " {\n    min-width: 288px;\n    min-height: 220px;\n\n    .btns {\n      position: static;\n      justify-content: center;\n    }\n\n    .delete,\n    .cancel {\n      max-width: 133px;\n    }\n  }\n\n  .btns {\n    min-width: 280px;\n    display: flex;\n    gap: 16px;\n    margin-bottom: 16px;\n\n    .delete {\n      width: 100%;\n\n      & button {\n        font-size: 15px;\n        font-weight: 500;\n        line-height: 1.47;\n\n        @media (max-width: 767px) {\n          font-size: 14px;\n          line-height: 1.43;\n        }\n      }\n    }\n\n    .cancel {\n      width: 100%;\n    }\n\n    & button {\n      width: 100%;\n      padding: 9px 0;\n    }\n\n    ", " {\n      min-width: 100%;\n    }\n  }\n\n  .title {\n    font-family: ", ";\n    margin-bottom: 16px;\n    font-size: 20px;\n    font-weight: 600;\n    line-height: 1.4;\n    color: ", ";\n    text-align: center;\n\n    @media (max-width: 767px) {\n      max-width: 245px;\n      margin-bottom: 20px;\n      font-size: 18px;\n      line-height: 1.33;\n    }\n  }\n\n  .warning {\n    font-family: ", ";\n    margin-bottom: 34px;\n    font-size: 15px;\n    font-weight: 500;\n    line-height: 1.46;\n    color: ", ";\n\n    @media (max-width: 767px) {\n      margin-bottom: 32px;\n      font-size: 14px;\n      line-height: 1.42;\n    }\n  }\n\n  ", " {\n    min-width: ", ";\n    min-height: ", ";\n\n    & svg {\n      margin-bottom: ", ";\n    }\n\n    .btns {\n      min-width: ", ";\n      gap: ", ";\n      margin-bottom: ", ";\n\n      .delete {\n        & button {\n          font-size: ", ";\n        }\n      }\n\n      & button {\n        padding: ", " 0;\n      }\n    }\n\n    .title {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n\n    .warning {\n      margin-bottom: ", ";\n      font-size: ", ";\n    }\n  }\n"])), styles_1.mediaQuery.mobile, styles_1.mediaQuery.mobile, fonts_1.poppinsFontVarCss.css, function (_a) {
     var theme = _a.theme;
     return theme.colors.naturalBlack;
-}, vars_1.poppinsFontVarCss.css, function (_a) {
+}, fonts_1.poppinsFontVarCss.css, function (_a) {
     var theme = _a.theme;
     return theme.colors.grayText;
-}, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(534), (0, _4k_1.adaptiveValueCalc)(199), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(280), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(9), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(34), (0, _4k_1.adaptiveValueCalc)(15));
+}, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(534), (0, _4k_1.adaptiveValueCalc)(199), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(280), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(15), (0, _4k_1.adaptiveValueCalc)(9), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(20), (0, _4k_1.adaptiveValueCalc)(34), (0, _4k_1.adaptiveValueCalc)(15));
 // Components
-var SIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(35));
+var SIcon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  ", " {\n    width: ", ";\n    height: ", ";\n  }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(40), (0, _4k_1.adaptiveValueCalc)(35));
 var WarningIconResize = function () {
-    var windowDimensions = (0, screen_1.useWindowDimensionsWithServerInitial)().windowDimensions;
+    var windowDimensions = (0, utils_1.useWindowDimensionsWithServerInitial)().windowDimensions;
     return (react_1.default.createElement(SIcon, null,
-        react_1.default.createElement(warning_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+        react_1.default.createElement(warning_svg_1.default, { style: (0, utils_1.getAdaptiveScale)({
                 windowDimensions: windowDimensions,
                 currentSize: 1,
             }) })));
@@ -98,13 +96,13 @@ var DeleteDialog = function (_a) {
     }); };
     return (react_1.default.createElement(StyledDelete, null,
         react_1.default.createElement(WarningIconResize, null),
-        react_1.default.createElement(_system_1.H2, { className: "title" }, "Are you sure you want to delete this gallery?"),
+        react_1.default.createElement(system_1.H2, { className: "title" }, "Are you sure you want to delete this gallery?"),
         react_1.default.createElement("p", { className: "warning" }, "Gallery can\u2019t be restored after deleting."),
         react_1.default.createElement("div", { className: 'btns' },
             react_1.default.createElement("div", { className: 'delete' },
-                react_1.default.createElement(MainButton_1.default, { text: 'Delete', type: 'button', variant: "danger", onClick: function () { return hendleDelete(galleryId); } })),
+                react_1.default.createElement(system_1.MainButton, { text: 'Delete', type: 'button', variant: "danger", onClick: function () { return hendleDelete(galleryId); } })),
             react_1.default.createElement("div", { className: 'cancel' },
-                react_1.default.createElement(MainButton_1.default, { text: 'Cancel', variant: "outline", onClick: onHide })))));
+                react_1.default.createElement(system_1.MainButton, { text: 'Cancel', variant: "outline", onClick: onHide })))));
 };
 // Export
 exports.default = DeleteDialog;

package/dist/components/filters/index.js

@@ -44,22 +44,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var ui_1 = require("@/store/ui");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var colors_1 = require("@/styles/colors");
+var store_1 = require("@ludo.ninja/components/dist/store");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var applyResetBtns_1 = __importDefault(require("@/components/filters/applyResetBtns"));
 var mobileFilters_1 = __importDefault(require("@/components/filters/mobileFilters"));
 var sidebarFilters_1 = __importDefault(require("@/components/sidebar/sidebarFilters"));
 var DesktopSelect_1 = __importDefault(require("@/system/Forms/Selects/DesktopSelect"));
 var MobileSelect_1 = __importDefault(require("@/system/Forms/Selects/MobileSelect"));
 // Styles
-var StyledFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), colors_1.BlackColor, colors_1.InactiveButtonColor, colors_1.AccentColor, colors_1.BorderColorLight, colors_1.AccentColor, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(154), (0, _4k_1.adaptiveValueCalc)(163), (0, _4k_1.adaptiveValueCalc)(156), (0, _4k_1.adaptiveValueCalc)(125), (0, _4k_1.adaptiveValueCalc)(135), (0, _4k_1.adaptiveValueCalc)(24));
+var StyledFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n\n  .select {\n    margin-right: 8px;\n    margin-top: 8px;\n  }\n\n  .type {\n    width: 154px;\n  }\n\n  .blockchain {\n    width: 163px;\n  }\n\n  .category {\n    width: 156px;\n  }\n\n  .time {\n    width: 125px;\n  }\n\n  .status {\n    width: 135px;\n    margin-right: 24px;\n  }\n\n  .filterButton {\n    width: 100%;\n\n    button {\n      position: relative;\n      width: 100%;\n      border: 1px solid transparent;\n      outline: none;\n      background-color: white;\n      padding: 10px 85px;\n      border-radius: 6px;\n      min-height: 40px;\n      font-size: 1.4em;\n      color: ", ";\n      font-weight: 500;\n      transition: all 0.3s ease-in;\n\n      &:hover {\n        transition: all 0.3s ease-in-out;\n        background: ", ";\n        color: ", ";\n        border: 1px solid ", ";\n      }\n\n      .counter {\n        position: absolute;\n        background-color: ", ";\n        color: white;\n        right: -5px;\n        padding: 8px;\n        font-size: 0.86em;\n        font-weight: 500;\n        border-radius: 50%;\n        top: -10px;\n        width: 16px;\n        height: 16px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    }\n  }\n\n  ", " {\n    .select {\n      margin-right: ", ";\n      margin-top: ", ";\n    }\n    .type {\n      width: ", ";\n    }\n    .blockchain {\n      width: ", ";\n    }\n    .category {\n      width: ", ";\n    }\n    .time {\n      width: ", ";\n    }\n    .status {\n      width: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), styles_1.BlackColor, styles_1.InactiveButtonColor, styles_1.AccentColor, styles_1.BorderColorLight, styles_1.AccentColor, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(154), (0, _4k_1.adaptiveValueCalc)(163), (0, _4k_1.adaptiveValueCalc)(156), (0, _4k_1.adaptiveValueCalc)(125), (0, _4k_1.adaptiveValueCalc)(135), (0, _4k_1.adaptiveValueCalc)(24));
 // Component
 var Filters = function (_a) {
     var filterInputHandler = _a.filterInputHandler, handleResetFilter = _a.handleResetFilter, selectData = _a.selectData, filterInput = _a.filterInput, handleMobileFilterInput = _a.handleMobileFilterInput, isMobile = _a.isMobile;
     var _b = (0, react_1.useState)(false), isSideBarOpen = _b[0], setSidebarOpen = _b[1];
     var selectedFiltersCount = (0, react_1.useState)(0)[0];
-    var _c = (0, ui_1.useUiStore)(function (state) { return ({
+    var _c = (0, store_1.useUiStore)(function (state) { return ({
         openOverLay: state.openOverLay,
         closeOverlay: state.closeOverlay,
     }); }), openOverLay = _c.openOverLay, closeOverlay = _c.closeOverlay;

package/dist/components/forms/form/index.js

@@ -47,7 +47,7 @@ var react_hook_form_1 = require("react-hook-form");
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 var Text_1 = require("@ludo.ninja/ui/build/system/Text");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
 var Forms_1 = require("@/system/Forms");
 var DatePicker_1 = __importDefault(require("@/system/Forms/DatePicker"));
@@ -55,8 +55,8 @@ var RadioInput_1 = __importDefault(require("@/system/Forms/RadioInput"));
 var _system_1 = require("@system");
 var Title = (0, styled_components_1.default)(_system_1.H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
 var Description = (0, styled_components_1.default)(Text_1.MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), colors_1.TextGrayColor);
-var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), ScreenWidth_1.mediaQuery.tablet);
-var FormWrapper = styled_components_1.default.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), ScreenWidth_1.mediaQuery.desktop, ScreenWidth_1.mediaQuery.tablet);
+var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), styles_1.mediaQuery.tablet);
+var FormWrapper = styled_components_1.default.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), styles_1.mediaQuery.desktop, styles_1.mediaQuery.tablet);
 var InputTitle = (0, styled_components_1.default)(_system_1.H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
 var RadioInput = (0, styled_components_1.default)(RadioInput_1.default)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), colors_1.TextGrayColor);
 var StyledInputGroup = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));

package/dist/components/forms/formsNavigation/index.js

@@ -34,8 +34,7 @@ var react_1 = __importStar(require("react"));
 var link_1 = __importDefault(require("next/link"));
 var router_1 = require("next/router");
 var styled_components_1 = __importDefault(require("styled-components"));
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var colors_1 = require("@/styles/colors");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var types_1 = require("@/components/forms/types");
 var _system_1 = require("@system");
 var back_svg_1 = __importDefault(require("@/public/settings_page/back.svg"));
@@ -55,9 +54,9 @@ var NAVIGATION_TABS = [
         label: 'Investor Relations Inquiry Form',
     },
 ];
-var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), ScreenWidth_1.mediaQuery.tablet);
-var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, colors_1.BackgroundColorLight);
-var List = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, colors_1.TextGrayColor, colors_1.InactiveButtonColor, ScreenWidth_1.mediaQuery.tablet, colors_1.InactiveButtonColor, colors_1.BlackColor, ScreenWidth_1.mediaQuery.tablet);
+var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), styles_1.mediaQuery.tablet);
+var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), styles_1.mediaQuery.tablet, styles_1.BackgroundColorLight);
+var List = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), styles_1.mediaQuery.tablet, styles_1.TextGrayColor, styles_1.InactiveButtonColor, styles_1.mediaQuery.tablet, styles_1.InactiveButtonColor, styles_1.BlackColor, styles_1.mediaQuery.tablet);
 var FormsNavigation = function () {
     var _a;
     var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];

package/dist/components/forms/formsTemplate/index.js

@@ -95,21 +95,21 @@ var react_google_recaptcha_v3_1 = require("react-google-recaptcha-v3");
 var styled_components_1 = __importDefault(require("styled-components"));
 var api_1 = require("@ludo.ninja/api");
 var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
-var store_1 = require("@/modules/user/store");
-var ui_1 = require("@/store/ui");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var modules_1 = require("@ludo.ninja/components/dist/modules");
+var store_1 = require("@ludo.ninja/components/dist/store");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var form_1 = __importDefault(require("@/components/forms/form"));
 var formsNavigation_1 = __importDefault(require("@/components/forms/formsNavigation"));
 var types_1 = require("@/components/forms/types");
 var Messages_1 = __importDefault(require("@/system/Forms/Messages"));
 var _system_1 = require("@system");
-var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    margin-left: 30px;\n  }\n\n  ", " {\n    margin-left: 0;\n    padding-top: 30px;\n    flex-direction: column;\n  }\n\n  ", " {\n    padding-top: 0;\n    margin-top: -15px;\n  }\n"], ["\n  ", " {\n    margin-left: 30px;\n  }\n\n  ", " {\n    margin-left: 0;\n    padding-top: 30px;\n    flex-direction: column;\n  }\n\n  ", " {\n    padding-top: 0;\n    margin-top: -15px;\n  }\n"])), ScreenWidth_1.mediaQuery.desktop, ScreenWidth_1.mediaQuery.tablet, ScreenWidth_1.mediaQuery.bigPhone);
+var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", " {\n    margin-left: 30px;\n  }\n\n  ", " {\n    margin-left: 0;\n    padding-top: 30px;\n    flex-direction: column;\n  }\n\n  ", " {\n    padding-top: 0;\n    margin-top: -15px;\n  }\n"], ["\n  ", " {\n    margin-left: 30px;\n  }\n\n  ", " {\n    margin-left: 0;\n    padding-top: 30px;\n    flex-direction: column;\n  }\n\n  ", " {\n    padding-top: 0;\n    margin-top: -15px;\n  }\n"])), styles_1.mediaQuery.desktop, styles_1.mediaQuery.tablet, styles_1.mediaQuery.bigPhone);
 var FormsTemplate = function () {
     var router = (0, router_1.useRouter)();
-    var getUser = (0, store_1.useUserStore)(function (state) { return state.user; });
+    var getUser = (0, modules_1.useUserStore)(function (state) { return state.user; });
     var executeRecaptcha = (0, react_google_recaptcha_v3_1.useGoogleReCaptcha)().executeRecaptcha;
     var query = router.query;
-    var openAlert = (0, ui_1.useUiStore)(function (state) { return state.openAlert; });
+    var openAlert = (0, store_1.useUiStore)(function (state) { return state.openAlert; });
     var formId = query.formId, nameOfSubject = query.nameOfSubject, contentId = query.contentId;
     var form = getForm(formId);
     var initialValues = {};

package/dist/components/headers/components/headerExperienceLabel/index.js

@@ -9,15 +9,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_components_1 = __importDefault(require("styled-components"));
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var store_1 = require("@/modules/user/store");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var ExperienceLabel_1 = __importDefault(require("@/system/Labels/ExperienceLabel"));
+var modules_1 = require("@ludo.ninja/components/dist/modules");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+var system_1 = __importDefault(require("@ludo.ninja/components/dist/system"));
 // Styles
-var StyledHeaderExperienceLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"])), ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20));
+var StyledHeaderExperienceLabel = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 20px;\n  ", " {\n    margin-right: ", ";\n  }\n"])), styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(20));
 // Component
 var HeaderExperienceLabel = function (_a) {
     var userId = _a.userId;
-    var _b = (0, store_1.useUserStore)(function (state) { return ({
+    var _b = (0, modules_1.useUserStore)(function (state) { return ({
         userExp: state.userExp,
         isLoadingExp: state.isLoadingExp,
         errorExp: state.errorExp,
@@ -25,7 +25,7 @@ var HeaderExperienceLabel = function (_a) {
     if (!userId)
         return null;
     return (React.createElement(StyledHeaderExperienceLabel, null,
-        React.createElement(ExperienceLabel_1.default, { value: userExp.xps, link: "/rewards/".concat(userId), loading: isLoadingExp || !!errorExp })));
+        React.createElement(system_1.default, { value: userExp.xps, link: "/rewards/".concat(userId), loading: isLoadingExp || !!errorExp })));
 };
 // Export
 exports.default = HeaderExperienceLabel;

package/dist/components/headers/components/headerUserPic/index.js

@@ -10,17 +10,17 @@ 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 Userpic_1 = __importDefault(require("@/system/Img/Userpic"));
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+var system_1 = __importDefault(require("@ludo.ninja/components/dist/system"));
 // Styles
-var StyledHeaderUserPick = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"])), ScreenWidth_1.mediaQuery.mobile, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
+var StyledHeaderUserPick = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"], ["\n  margin-right: 24px;\n\n  ", " {\n    margin-right: 8px;\n  }\n  ", " {\n    margin-right: ", ";\n  }\n"])), styles_1.mediaQuery.mobile, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24));
 // Component
 var HeaderUserPick = function (_a) {
     var userId = _a.userId;
     if (!userId)
         return null;
     return (react_1.default.createElement(StyledHeaderUserPick, null,
-        react_1.default.createElement(Userpic_1.default, { width: 32, height: 32, userId: userId, isNeedBoxTransform: true })));
+        react_1.default.createElement(system_1.default, { width: 32, height: 32, userId: userId, isNeedBoxTransform: true })));
 };
 // Export
 exports.default = HeaderUserPick;

package/dist/components/inviteCodesPage/wrappers/resumeCodes/index.js

@@ -11,21 +11,16 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 var utils_1 = require("@ludo.ninja/utils");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var colors_2 = require("@/styles/colors");
-var boxShadow_1 = __importDefault(require("@/styles/mixins/boxShadow"));
-var boxTransform_1 = __importDefault(require("@/styles/mixins/boxTransform"));
-var typography_1 = require("@/styles/typography");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 var loader_1 = __importDefault(require("@/components/inviteCodesPage/wrappers/resumeCodes/loader"));
-var MainButton_1 = __importDefault(require("@/system/Buttons/MainButton"));
-var _system_1 = require("@system");
-var vars_1 = require("@/fonts/vars");
+var system_1 = require("@ludo.ninja/components/dist/system");
+var fonts_1 = require("@ludo.ninja/components/dist/fonts");
 // Styles
-var StyledResumeCodes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), boxShadow_1.default, boxTransform_1.default, colors_2.WhiteColor, ScreenWidth_1.mediaQuery.mobile);
-var StyledResumeCodesCaption = (0, styled_components_1.default)(_system_1.H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), colors_2.BlackColor, colors_2.AccentColor);
-var StyledResumeCodesSubCaption = (0, styled_components_1.default)(_system_1.H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), colors_2.TextGrayColor, colors_2.BlackColor);
-var StyledResumeCodesText = (0, styled_components_1.default)(_system_1.MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), vars_1.dmsansFontVarCss.css, colors_2.TextGrayColor);
-var StyledAddCodesText = (0, styled_components_1.default)(_system_1.MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), typography_1.FH5, vars_1.dmsansFontVarCss.css, colors_1.TextGray2Color);
+var StyledResumeCodes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"], ["\n  ", ";\n  ", ";\n  background-color: ", ";\n  padding: 24px 32px;\n  border-radius: 8px;\n  text-align: left;\n\n  ", " {\n    padding: 20px;\n  }\n"])), styles_1.BoxShadow, styles_1.BoxTransform, styles_1.WhiteColor, styles_1.mediaQuery.mobile);
+var StyledResumeCodesCaption = (0, styled_components_1.default)(system_1.H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), styles_1.BlackColor, styles_1.AccentColor);
+var StyledResumeCodesSubCaption = (0, styled_components_1.default)(system_1.H3)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"], ["\n  margin-top: 12px;\n  color: ", ";\n\n  strong {\n    color: ", ";\n  }\n"])), styles_1.TextGrayColor, styles_1.BlackColor);
+var StyledResumeCodesText = (0, styled_components_1.default)(system_1.MainText)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"], ["\n  font-family: ", ";\n  margin-top: 24px;\n  color: ", ";\n"])), fonts_1.dmsansFontVarCss.css, styles_1.TextGrayColor);
+var StyledAddCodesText = (0, styled_components_1.default)(system_1.MainText)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"], ["\n  ", ";\n  font-family: ", ";\n  margin-top: 24px;\n  margin-bottom: 16px;\n  color: ", ";\n"])), styles_1.FH5, fonts_1.dmsansFontVarCss.css, colors_1.TextGray2Color);
 // Component
 var ResumeCodes = function (_a) {
     var invites = _a.invites, activeInvites = _a.activeInvites, isLoading = _a.isLoading, userId = _a.userId;
@@ -45,7 +40,7 @@ var ResumeCodes = function (_a) {
                 "already")),
         react_1.default.createElement(StyledResumeCodesText, null, "Invite your friends to be among the first who will collect Ludo XP, which is the key to unlock a variety of benefits. From benefiting from selected partner projects, such as airdrops or whitelisting spots, to increased XP for your engagement and activities, such as referrals, to an increased Ludo Rank. The more Ludo XP you gather, the richer your experience."),
         react_1.default.createElement(StyledAddCodesText, null, "Do you have more friends to invite?"),
-        react_1.default.createElement(MainButton_1.default, { onClick: function () {
+        react_1.default.createElement(system_1.MainButton, { onClick: function () {
                 return window.open("".concat(utils_1.ASK_MORE_INVITES_GOOGLE_FORM).concat(userId), '_blank');
             }, variant: "primaryM", text: 'Ask for more invites' })));
 };

package/dist/components/linkTabs/index.js

@@ -10,10 +10,9 @@ 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 styles_1 = require("@ludo.ninja/components/dist/styles");
 // Styles
-var StyledLinkTabs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) { return (props.isUnderlined ? 'block' : 'none'); }, colors_1.BorderColorLight, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(-4), (0, _4k_1.adaptiveValueCalc)(1), (0, _4k_1.adaptiveValueCalc)(32));
+var StyledLinkTabs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 24px;\n  position: relative;\n\n  &::after {\n    display: ", ";\n    position: absolute;\n    content: '';\n    border-bottom: 1px solid ", ";\n    width: 100%;\n    bottom: -4px;\n    left: 0;\n    right: 0;\n  }\n\n  a {\n    margin-left: 32px;\n\n    :first-child {\n      margin: 0;\n    }\n  }\n  ", " {\n    margin-bottom: ", ";\n\n    &::after {\n      bottom: ", ";\n      border-bottom-width: ", ";\n    }\n    a {\n      margin-left: ", ";\n    }\n  }\n"])), function (props) { return (props.isUnderlined ? 'block' : 'none'); }, styles_1.BorderColorLight, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(24), (0, _4k_1.adaptiveValueCalc)(-4), (0, _4k_1.adaptiveValueCalc)(1), (0, _4k_1.adaptiveValueCalc)(32));
 // Component
 var LinkTabs = function (_a) {
     var isUnderlined = _a.isUnderlined, children = _a.children, style = _a.style;

package/dist/components/linkTabs/linkTab/index.js

@@ -11,15 +11,13 @@ 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 ScreenWidth_1 = require("@/styles/ScreenWidth");
-var colors_1 = require("@/styles/colors");
-var typography_1 = require("@/styles/typography");
-var screen_1 = require("@/utils/screen");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+var utils_1 = require("@ludo.ninja/components/dist/utils");
 // Styles
-var StyledLinkTab = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"])), function (props) { return (props.isActive ? colors_1.BlackColor : colors_1.TextGrayColor); }, function (props) { return (props.isMobile ? typography_1.FH3 : typography_1.FH2); }, function (props) { return (props.isActive ? colors_1.AccentColor : colors_1.TextGrayColor); }, function (props) { return (props.isActive ? 'scaleX(1)' : 'scaleX(0)'); }, colors_1.BlackColor, function (props) { return (props.isActive ? colors_1.AccentColor : colors_1.BlackColor); }, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(-4));
+var StyledLinkTab = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"], ["\n  position: relative;\n  color: ", ";\n  cursor: pointer;\n  ", ";\n  user-select: none;\n  line-height: 1.4em;\n  text-decoration: none;\n\n  .count {\n    margin-right: 8px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  :before {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 3px;\n    bottom: -4px;\n    left: 0;\n    background-color: #000;\n    transform: ", ";\n    transition: all 0.2s ease;\n  }\n\n  :hover {\n    color: ", ";\n\n    .count {\n      color: ", ";\n    }\n  }\n\n  :hover::before {\n    transform: scaleX(1);\n    transition: transform 0.2s ease-in-out;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    .count {\n      margin-right: ", ";\n    }\n\n    :before {\n      height: ", ";\n      bottom: ", ";\n    }\n  }\n"])), function (props) { return (props.isActive ? styles_1.BlackColor : styles_1.TextGrayColor); }, function (props) { return (props.isMobile ? styles_1.FH3 : styles_1.FH2); }, function (props) { return (props.isActive ? styles_1.AccentColor : styles_1.TextGrayColor); }, function (props) { return (props.isActive ? 'scaleX(1)' : 'scaleX(0)'); }, styles_1.BlackColor, function (props) { return (props.isActive ? styles_1.AccentColor : styles_1.BlackColor); }, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(22), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(3), (0, _4k_1.adaptiveValueCalc)(-4));
 var LinkTabs = function (_a) {
     var link = _a.link, isActive = _a.isActive, countItems = _a.countItems, text = _a.text;
-    var deviceType = (0, screen_1.useWindowDimensions)().deviceType;
+    var deviceType = (0, utils_1.useWindowDimensions)().deviceType;
     return (react_1.default.createElement(link_1.default, { href: link },
         react_1.default.createElement(StyledLinkTab, { isActive: isActive, isMobile: deviceType === 'isMobile' },
             countItems !== null && (react_1.default.createElement("strong", { className: 'count' }, countItems)),

package/dist/components/navigation/index.js

@@ -34,7 +34,7 @@ exports.NavigationTabs = void 0;
 var react_1 = __importStar(require("react"));
 var router_1 = require("next/router");
 var styled_components_1 = __importDefault(require("styled-components"));
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
 // import NotificationIcon from '@/public/settings_page/notifications.svg';
 // import NotificationActiveIcon from '@/public/settings_page/notifications_active.svg';
 var colors_1 = require("@/styles/colors");
@@ -51,10 +51,10 @@ var NavigationTabs;
     NavigationTabs["notifications"] = "notifications";
     NavigationTabs["privacy"] = "privacy";
 })(NavigationTabs || (exports.NavigationTabs = NavigationTabs = {}));
-var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: relative;\n    // position: ", ";\n    z-index: 1;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: relative;\n    // position: ", ";\n    z-index: 1;\n    display: flex;\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, function (props) { return (props.isOpen ? 'fixed' : 'relative'); });
-var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, colors_1.BackgroundColorLight);
-var StyledH1 = (0, styled_components_1.default)(_system_1.H1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    padding-top: 25px;\n    text-align: center;\n  }\n  ", " {\n    margin-top: -45px;\n  }\n\n  svg {\n    display: none;\n    ", " {\n      display: flex;\n      cursor: pointer;\n      position: absolute;\n      left: 15px;\n      margin-top: -25px;\n    }\n    // ", " {\n    //   margin-top: -25px;\n    // }\n  }\n"], ["\n  ", " {\n    padding-top: 25px;\n    text-align: center;\n  }\n  ", " {\n    margin-top: -45px;\n  }\n\n  svg {\n    display: none;\n    ", " {\n      display: flex;\n      cursor: pointer;\n      position: absolute;\n      left: 15px;\n      margin-top: -25px;\n    }\n    // ", " {\n    //   margin-top: -25px;\n    // }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, ScreenWidth_1.mediaQuery.bigPhone, ScreenWidth_1.mediaQuery.tablet, ScreenWidth_1.mediaQuery.bigPhone);
-var List = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    .activeIcon {\n      display: none;\n    }\n    .icon {\n      display: flex;\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n\n      .icon {\n        display: none;\n      }\n      .activeIcon {\n        display: flex;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    .activeIcon {\n      display: none;\n    }\n    .icon {\n      display: flex;\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n\n      .icon {\n        display: none;\n      }\n      .activeIcon {\n        display: flex;\n      }\n    }\n  }\n"])), ScreenWidth_1.mediaQuery.tablet, colors_1.TextGrayColor, ScreenWidth_1.mediaQuery.tablet, colors_1.InactiveButtonColor, colors_1.BlackColor, ScreenWidth_1.mediaQuery.tablet);
+var StyledFlex = (0, styled_components_1.default)(_system_1.Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: relative;\n    // position: ", ";\n    z-index: 1;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: relative;\n    // position: ", ";\n    z-index: 1;\n    display: flex;\n  }\n"])), styles_1.mediaQuery.tablet, function (props) { return (props.isOpen ? 'fixed' : 'relative'); });
+var Wrapper = (0, styled_components_1.default)(_system_1.Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), styles_1.mediaQuery.tablet, colors_1.BackgroundColorLight);
+var StyledH1 = (0, styled_components_1.default)(_system_1.H1)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", " {\n    padding-top: 25px;\n    text-align: center;\n  }\n  ", " {\n    margin-top: -45px;\n  }\n\n  svg {\n    display: none;\n    ", " {\n      display: flex;\n      cursor: pointer;\n      position: absolute;\n      left: 15px;\n      margin-top: -25px;\n    }\n    // ", " {\n    //   margin-top: -25px;\n    // }\n  }\n"], ["\n  ", " {\n    padding-top: 25px;\n    text-align: center;\n  }\n  ", " {\n    margin-top: -45px;\n  }\n\n  svg {\n    display: none;\n    ", " {\n      display: flex;\n      cursor: pointer;\n      position: absolute;\n      left: 15px;\n      margin-top: -25px;\n    }\n    // ", " {\n    //   margin-top: -25px;\n    // }\n  }\n"])), styles_1.mediaQuery.tablet, styles_1.mediaQuery.bigPhone, styles_1.mediaQuery.tablet, styles_1.mediaQuery.bigPhone);
+var List = styled_components_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    .activeIcon {\n      display: none;\n    }\n    .icon {\n      display: flex;\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n\n      .icon {\n        display: none;\n      }\n      .activeIcon {\n        display: flex;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    .activeIcon {\n      display: none;\n    }\n    .icon {\n      display: flex;\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n\n      .icon {\n        display: none;\n      }\n      .activeIcon {\n        display: flex;\n      }\n    }\n  }\n"])), styles_1.mediaQuery.tablet, colors_1.TextGrayColor, styles_1.mediaQuery.tablet, colors_1.InactiveButtonColor, colors_1.BlackColor, styles_1.mediaQuery.tablet);
 var Navigation = function () {
     var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
     var router = (0, router_1.useRouter)();

package/dist/components/profile/MultiversXAudit/MultiversXAudit.js

@@ -26,10 +26,10 @@ var schema_1 = require("@ludo.ninja/api/build/graphql_tools/__generated__/identi
 var colors_1 = require("@ludo.ninja/ui/build/styles/colors");
 var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
 var _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
-var ui_1 = require("@/store/ui");
-var ScreenWidth_1 = require("@/styles/ScreenWidth");
-var vars_1 = require("@/fonts/vars");
-var SWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  padding: 12px 16px;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  border-radius: 6px;\n  background: ", ";\n  margin-bottom: 16px;\n\n  .canvas {\n    width: 164px;\n    height: 164px;\n\n    ", " {\n      width: 124px;\n      height: 124px;\n    }\n  }\n\n  .labels {\n    padding-top: 8px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    & > * {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      color: ", ";\n      font-family: ", ";\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n    }\n\n    .circle {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n\n    .canvas {\n      width: ", ";\n      height: ", ";\n    }\n\n    .labels {\n      padding-top: ", ";\n      gap: ", ";\n\n      & > * {\n        gap: ", ";\n\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      .circle {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  padding: 12px 16px;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  border-radius: 6px;\n  background: ", ";\n  margin-bottom: 16px;\n\n  .canvas {\n    width: 164px;\n    height: 164px;\n\n    ", " {\n      width: 124px;\n      height: 124px;\n    }\n  }\n\n  .labels {\n    padding-top: 8px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    & > * {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      color: ", ";\n      font-family: ", ";\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n    }\n\n    .circle {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n\n    .canvas {\n      width: ", ";\n      height: ", ";\n    }\n\n    .labels {\n      padding-top: ", ";\n      gap: ", ";\n\n      & > * {\n        gap: ", ";\n\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      .circle {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), colors_1.WhiteColor, ScreenWidth_1.mediaQuery.maxWidthTablet, colors_1.BlackColor, vars_1.dmsansFontVarCss.css, ScreenWidth_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(164), (0, _4k_1.adaptiveValueCalc)(164), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10));
+var store_1 = require("@ludo.ninja/components/dist/store");
+var styles_1 = require("@ludo.ninja/components/dist/styles");
+var fonts_1 = require("@ludo.ninja/components/dist/fonts");
+var SWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  padding: 12px 16px;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  border-radius: 6px;\n  background: ", ";\n  margin-bottom: 16px;\n\n  .canvas {\n    width: 164px;\n    height: 164px;\n\n    ", " {\n      width: 124px;\n      height: 124px;\n    }\n  }\n\n  .labels {\n    padding-top: 8px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    & > * {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      color: ", ";\n      font-family: ", ";\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n    }\n\n    .circle {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n\n    .canvas {\n      width: ", ";\n      height: ", ";\n    }\n\n    .labels {\n      padding-top: ", ";\n      gap: ", ";\n\n      & > * {\n        gap: ", ";\n\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      .circle {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  padding: 12px 16px;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  border-radius: 6px;\n  background: ", ";\n  margin-bottom: 16px;\n\n  .canvas {\n    width: 164px;\n    height: 164px;\n\n    ", " {\n      width: 124px;\n      height: 124px;\n    }\n  }\n\n  .labels {\n    padding-top: 8px;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n\n    & > * {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n\n      color: ", ";\n      font-family: ", ";\n      font-size: 13px;\n      font-weight: 400;\n      line-height: 18px;\n    }\n\n    .circle {\n      width: 10px;\n      height: 10px;\n      border-radius: 50%;\n    }\n  }\n\n  ", " {\n    padding: ", " ", ";\n    gap: ", ";\n    border-radius: ", ";\n    margin-bottom: ", ";\n\n    .canvas {\n      width: ", ";\n      height: ", ";\n    }\n\n    .labels {\n      padding-top: ", ";\n      gap: ", ";\n\n      & > * {\n        gap: ", ";\n\n        font-size: ", ";\n        line-height: ", ";\n      }\n\n      .circle {\n        width: ", ";\n        height: ", ";\n      }\n    }\n  }\n"])), colors_1.WhiteColor, styles_1.mediaQuery.maxWidthTablet, colors_1.BlackColor, fonts_1.dmsansFontVarCss.css, styles_1.mediaQuery.minWidthFourK, (0, _4k_1.adaptiveValueCalc)(12), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(16), (0, _4k_1.adaptiveValueCalc)(164), (0, _4k_1.adaptiveValueCalc)(164), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(8), (0, _4k_1.adaptiveValueCalc)(6), (0, _4k_1.adaptiveValueCalc)(13), (0, _4k_1.adaptiveValueCalc)(18), (0, _4k_1.adaptiveValueCalc)(10), (0, _4k_1.adaptiveValueCalc)(10));
 var colors = [
     '#977CFF',
     '#98E2EB',
@@ -101,7 +101,7 @@ var AuditUI = function (_a) {
 var Audit = function (_a) {
     var _b;
     var wallet = _a.wallet;
-    var openAlert = (0, ui_1.useUiStore)(function (state) { return state.openAlert; });
+    var openAlert = (0, store_1.useUiStore)(function (state) { return state.openAlert; });
     var data = (0, schema_1.useFetchMultiversXAuditQuery)({
         variables: { wallet: wallet },
         context: {