@ludo.ninja/components 1.1.4 → 1.1.6

package/dist/styles/mixins/z-indexes.js

@@ -0,0 +1,10 @@
+export var zIndexSearch = 996;
+export var zIndexModal = 996;
+export var zIndexOverlay = 995;
+export var zIndexToTopBtn = 993;
+export var zIndexSidebar = 996;
+export var zIndexHeaderSearchFocused = 996;
+export var zIndexAlert = 999;
+export var zIndexHeaderSearch = 994;
+export var zIndexPageLoader = 996;
+export var zIndexApplyResetBtns = 996;

package/dist/styles/typography/index.js

@@ -0,0 +1 @@
+export { FH1, FH2, FH3, MainText, FH4, FH5, FH6, FH7, TextSmall, } from '@ludo.ninja/ui/build/styles/typography';

package/dist/system/ActiveLink/index.js

@@ -0,0 +1,44 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Children } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { pathToRegexp } from 'path-to-regexp';
+var ActiveLink = function (_a) {
+    var children = _a.children, activeClassName = _a.activeClassName, props = __rest(_a, ["children", "activeClassName"]);
+    var asPath = useRouter().asPath;
+    var child = Children.only(children);
+    var childClassName = child.props.className || '';
+    var isActive = pathToRegexp(props.href || props.as, [], {
+        sensitive: true,
+    }).test(asPath);
+    var className = props.href || asPath === props.as
+        ? "".concat(childClassName, " ").concat(isActive ? activeClassName : '').trim()
+        : childClassName;
+    return (_jsx(Link, __assign({}, props, { children: React.cloneElement(child, {
+            className: className || null,
+        }) })));
+};
+// Export
+export default ActiveLink;

package/dist/system/Alert/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import AlertUi from '@ludo.ninja/ui/build/system/Alert';
+import { useUiStore } from '@/store/ui';
+// Component
+var Alert = function () {
+    var _a = useUiStore(function (state) { return ({
+        closeAlert: state.closeAlert,
+        updateData: state.alertType,
+        isAlertOpen: state.isAlertOpen,
+    }); }), closeAlert = _a.closeAlert, updateData = _a.updateData, isAlertOpen = _a.isAlertOpen;
+    if (!(isAlertOpen && updateData))
+        return null;
+    return _jsx(AlertUi, { closeAlert: closeAlert, updateData: updateData });
+};
+// Export
+export default Alert;

package/dist/system/Alert/type.js

@@ -1,6 +1 @@
-export {
-  alertVariants,
-  alertCaptions,
-  alertBgColors,
-  alertDefaultText,
-} from '@ludo.ninja/ui/build/system/Alert/type';
+export { alertVariants, alertCaptions, alertBgColors, alertDefaultText, } from '@ludo.ninja/ui/build/system/Alert/type';

package/dist/system/BasicOverlay/index.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+// Styles
+var StyledBasicOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"], ["\n  position: fixed;\n  display: block;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.3);\n  z-index: 3;\n  user-select: none;\n"])));
+// Component
+var BasicOverlay = function () {
+    return _jsx(StyledBasicOverlay, { "data-testid": "basic-overlay" });
+};
+// Export
+export default BasicOverlay;
+var templateObject_1;

package/dist/system/Buttons/IconButton/index.js

@@ -0,0 +1,2 @@
+import IconButton from '@ludo.ninja/ui/build/system/Buttons/IconButton';
+export default IconButton;

package/dist/system/Buttons/IconWithButton/index.js

@@ -0,0 +1,2 @@
+import IconWithButton from '@ludo.ninja/ui/build/system/Buttons/IconWithButton';
+export default IconWithButton;

package/dist/system/Buttons/IconWithButton/themes.js

@@ -1 +1 @@
-'use strict';
+"use strict";

package/dist/system/Buttons/MainButton/index.js

@@ -0,0 +1,2 @@
+import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
+export default MainButton;

package/dist/system/Buttons/MainButton/themes.js

@@ -1 +1 @@
-'use strict';
+"use strict";

package/dist/system/Buttons/SecondaryButton/index.js

@@ -0,0 +1,2 @@
+import SecondaryButton from '@ludo.ninja/ui/build/system/Buttons/SecondaryButton';
+export default SecondaryButton;

package/dist/system/Cards/CardCheckbox/index.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { WhiteColor } from '@/styles/colors';
+// Styles
+var StyledCardCheckBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  z-index: 1;\n\n  .cardCheckboxLabel {\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    .cardCheckboxInput {\n      margin: 0;\n      visibility: hidden;\n\n      &:checked + span {\n        border: none;\n      }\n\n      &:checked + span:after {\n        opacity: 1;\n      }\n    }\n\n    .cardCustomCheckbox {\n      cursor: pointer;\n      width: 32px;\n      height: 32px;\n      border: 2px solid ", ";\n      background-color: #12183a33;\n      border-radius: 50%;\n      display: inline-block;\n      position: relative;\n\n      &::after {\n        content: '';\n        display: block;\n        background-image: url('/forms/checkbox/checked.svg');\n        background-size: cover;\n        background-repeat: no-repeat;\n        width: 32px;\n        height: 32px;\n        opacity: 0;\n        transition: opacity 0.2s;\n      }\n\n      @media (max-width: 767px) {\n        width: 24px;\n        height: 24px;\n\n        &::after {\n          width: 24px;\n          height: 24px;\n        }\n      }\n    }\n  }\n\n  ", " {\n    top: ", ";\n    right: ", ";\n    .cardCheckboxLabel {\n      .cardCustomCheckbox {\n        width: ", ";\n        height: ", ";\n        border-width: ", ";\n        &::after {\n          width: ", ";\n          height: ", ";\n        }\n      }\n    }\n  }\n"])), WhiteColor, mediaQuery.minWidthFourK, adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(32), adaptiveValueCalc(32), adaptiveValueCalc(2), adaptiveValueCalc(32), adaptiveValueCalc(32));
+// Component
+var CardCheckBox = function (_a) {
+    var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
+    var id = useId();
+    return (_jsx(StyledCardCheckBox, { children: _jsxs("label", { htmlFor: id, className: "cardCheckboxLabel", children: [_jsx("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }), _jsx("span", { className: "cardCustomCheckbox" })] }) }));
+};
+// Export
+export default CardCheckBox;
+var templateObject_1;

package/dist/system/Cards/CardContent/CardCategory/index.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { FH6 } from '@/styles/typography';
+// Styles
+var StyledCardCategory = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 8px;\n\n  .category {\n    .label {\n      ", ";\n      display: inline-block;\n      background: ", ";\n      padding: 1px 5px;\n      line-height: 1.35em;\n      color: ", ";\n      user-select: none;\n      border-radius: 2px;\n      text-transform: uppercase;\n    }\n  }\n\n  @media (max-width: 1040px) {\n    margin-top: 6px;\n  }\n\n  ", " {\n    margin-top: ", ";\n\n    .category {\n      .label {\n        padding: ", " ", ";\n        border-radius: ", ";\n      }\n    }\n  }\n"])), FH6, function (props) { return props.background; }, function (props) { return props.color; }, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(1), adaptiveValueCalc(5), adaptiveValueCalc(2));
+// Component
+var CardCategory = function (_a) {
+    var label = _a.label;
+    if (!label)
+        return null;
+    return (_jsx(StyledCardCategory, { background: label.backgroundColor, color: label.color, children: _jsx("div", { className: 'category', children: _jsx("span", { className: 'label', children: label.text }) }) }));
+};
+// Export
+export default CardCategory;
+var templateObject_1;

package/dist/system/Cards/CardContent/CardLikes/index.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import StyledLikes from '@/system/Cards/Styles/Likes';
+import { getAdaptiveScale } from '@/utils/adaptive/scale';
+import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
+import HeartIcon from '@/public/showCaseIcons/heart.svg';
+// Styles
+var StyledCardLikes = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: end;\n"])));
+// Component
+var CardLikes = function (_a) {
+    var likes = _a.likes, isLiked = _a.isLiked;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (_jsx(StyledCardLikes, { children: Boolean(likes) && (_jsxs(StyledLikes, { isLiked: isLiked, children: [_jsx("div", { className: 'icon', children: _jsx(HeartIcon, { style: getAdaptiveScale({
+                            windowDimensions: windowDimensions,
+                            currentSize: 1,
+                        }) }) }), _jsx("span", { className: 'counter', children: likes })] })) }));
+};
+// Export
+export default CardLikes;
+var templateObject_1;

package/dist/system/Cards/CardContent/CardShowMore/index.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { copyToClipboard } from '@ludo.ninja/utils';
+import { useUiStore } from '@/store/ui';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BackgroundColorLight, BlackColor } from '@/styles/colors';
+import { TextSmall } from '@/styles/typography';
+import { dmsansFontVarCss } from '@/fonts/vars';
+import MoreButtonIcon from '@/public/creation/card/moreBtnVertical.svg';
+// Styles
+export var StyledCardShowMore = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"], ["\n  .cardShowMore {\n    position: relative;\n    cursor: pointer;\n    z-index: 100;\n\n    &:before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 40px;\n      height: 40px;\n      z-index: -1;\n    }\n\n    @media (max-width: 1200px) {\n      display: none;\n    }\n\n    &DropDown {\n      font-family: ", ";\n      display: none;\n      position: absolute;\n      background-color: white;\n      top: 20px;\n      left: -170px;\n      width: 184px;\n      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);\n      border-radius: 6px;\n      padding: 8px;;\n\n      &:before {\n        content: '';\n        display: block;\n        position: absolute;\n        top: -15px;\n        height: 15px;\n        width: 100%;\n      }\n\n      &Item {\n        ", ";\n        display: block;\n        padding: 6px 0 6px 8px;\n        color: #696f91;\n\n        &:hover {\n          border-radius: 4px;\n          color: ", ";\n          background-color: ", ";\n        }\n      }\n    }\n\n    &:hover > div {\n      display: block;\n      z-index: 100000;\n    }\n    ", " {\n      &:before {\n        width: ", ";\n        height:  ", ";\n      }\n      &DropDown {\n        top: ", ";\n        left:", ";\n        width: ", ";\n        box-shadow: 0px 0px ", " ", " rgba(33, 21, 95, 0.1);\n        border-radius: ", ";\n        padding: ", ";\n\n        &:before {\n          top: ", ";\n          height: ", ";\n        }\n\n        &Item {\n          padding: ", " 0 ", " ", ";\n          &:hover {\n            border-radius: ", ";\n          }\n        }\n      }\n    }\n  }\n}\n"])), dmsansFontVarCss.css, TextSmall, BlackColor, BackgroundColorLight, mediaQuery.minWidthFourK, adaptiveValueCalc(40), adaptiveValueCalc(40), adaptiveValueCalc(20), adaptiveValueCalc(-170), adaptiveValueCalc(184), adaptiveValueCalc(10), adaptiveValueCalc(5), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(-15), adaptiveValueCalc(15), adaptiveValueCalc(6), adaptiveValueCalc(6), adaptiveValueCalc(8), adaptiveValueCalc(4));
+// Component
+var CardShowMore = function (_a) {
+    var itemId = _a.itemId, href = _a.href;
+    var openAlert = useUiStore(function (state) { return state.openAlert; });
+    var copyAssetLinkToClipboard = function (e) {
+        e.preventDefault();
+        copyToClipboard("".concat(window.location.origin).concat(href));
+        openAlert({
+            type: alertVariants.copied,
+        });
+    };
+    return (_jsx(StyledCardShowMore, { children: _jsxs("div", { className: "cardShowMore", children: [_jsx(MoreButtonIcon, {}), _jsx("div", { className: "cardShowMoreDropDown", id: itemId, onClick: copyAssetLinkToClipboard, children: _jsx("span", { className: 'cardShowMoreDropDownItem', children: "Copy link" }) })] }) }));
+};
+// Export
+export default CardShowMore;
+var templateObject_1;

package/dist/system/Cards/CardContent/index.js

@@ -0,0 +1,39 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { isContainChinese, shortenedText } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, TextGrayColor } from '@/styles/colors';
+import { FH5, TextSmall } from '@/styles/typography';
+import CardShowMore from '@/system/Cards/CardContent/CardShowMore';
+import { dmsansFontVarCss, poppinsFontVarCss } from '@/fonts/vars';
+// Styles
+var StyledCardContent = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px;\n  min-height: 94px;\n  flex-grow: 1;\n  justify-content: end;\n\n  .cardContent {\n    display: flex;\n    justify-content: space-between;\n\n    .cardContentWrapper {\n      .mainName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 13px;\n        margin-bottom: 0;\n      }\n\n      .secondName {\n        font-family: ", ";\n        ", ";\n        color: ", ";\n        font-size: 15px;\n      }\n    }\n  }\n\n  .creatorName {\n    ", ";\n    color: ", ";\n    line-height: 1.39em;\n  }\n\n  @media (max-width: 1040px) {\n    height: auto;\n    padding: 12px;\n  }\n  @media (max-width: 767px) {\n    min-height: 84px;\n  }\n\n  ", " {\n    padding: ", " ", ";\n    min-height: ", ";\n\n    .cardContent {\n      .cardContentWrapper {\n        .mainName {\n          font-size: ", ";\n        }\n\n        .secondName {\n          font-size: ", ";\n        }\n      }\n    }\n  }\n"])), dmsansFontVarCss.css, TextSmall, TextGrayColor, poppinsFontVarCss.css, FH5, BlackColor, TextSmall, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(12), adaptiveValueCalc(16), adaptiveValueCalc(94), adaptiveValueCalc(13), adaptiveValueCalc(15));
+// Component
+var CardContent = function (_a) {
+    var _b;
+    var firstName = _a.firstName, creationName = _a.creationName, cuttedShowcaseName = _a.cuttedSecondName, children = _a.children, isNeedShowMoreButton = _a.isNeedShowMoreButton, itemId = _a.itemId, wallets = _a.wallets, creatorName = _a.creatorName, href = _a.href;
+    var router = useRouter();
+    var isGalleryAndFavPage = router.pathname.includes('galleries') ||
+        router.pathname.includes('favorite-lists');
+    var wallet = wallets && ((_b = wallets[0]) === null || _b === void 0 ? void 0 : _b.address);
+    return (_jsxs(StyledCardContent, { children: [_jsxs("div", { className: "cardContent", children: [_jsx("div", { className: "cardContentWrapper", children: isGalleryAndFavPage ? (_jsxs(_Fragment, { children: [firstName && (_jsx("p", { className: "secondName", children: firstName.length > 20 ? shortenedText(firstName) : firstName })), _jsx("h3", { className: "mainName", children: cuttedShowcaseName
+                                        ? cuttedShowcaseName.length > 20
+                                            ? shortenedText(cuttedShowcaseName)
+                                            : cuttedShowcaseName
+                                        : shortenedText(wallet) })] })) : (_jsxs(_Fragment, { children: [creatorName ? (_jsx("p", { className: "creatorName", children: creatorName })) : (firstName && (_jsx("p", { className: "mainName", children: creationName
+                                        ? creationName
+                                        : firstName.length > 20
+                                            ? shortenedText(firstName)
+                                            : firstName }))), _jsx("h3", { className: "secondName", children: cuttedShowcaseName && isContainChinese(cuttedShowcaseName)
+                                        ? cuttedShowcaseName.substring(0, 9)
+                                        : cuttedShowcaseName })] })) }), isNeedShowMoreButton && (_jsx(CardShowMore, { href: href, itemId: itemId }))] }), children] }));
+};
+// Export
+export default CardContent;
+var templateObject_1;

package/dist/system/Cards/CardHeadIcons/index.js

@@ -0,0 +1,123 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRouter } from 'next/router';
+import { useUserStore } from '@/modules/user/store';
+import { useUiStore } from '@/store/ui';
+import { ScreenWidth } from '@/styles/ScreenWidth';
+import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
+import CardRank from '@/system/Cards/CardRank';
+import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
+import { redirectToLoginWindow } from '@/utils/auth';
+import { isProd } from '@/utils/env';
+import { getWindowDimensions } from '@/utils/screen';
+import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
+import { LabelKeys } from '@/dto/common/ItemType';
+import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
+import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
+import AddToLikesIcon from '@/public/cards/heart.svg';
+// Component
+var CardHeadIcons = function (_a) {
+    var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, actionIsNeedRenderCheckbox = _a.actionIsNeedRenderCheckbox, itemId = _a.itemId, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled;
+    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var isLicked = isIconLiked && isSignedIn;
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
+    var router = useRouter();
+    var isGallery = router.pathname.includes('gallery');
+    var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!!isSignedIn) return [3 /*break*/, 1];
+                    redirectToLoginWindow();
+                    return [3 /*break*/, 8];
+                case 1:
+                    if (!(type === 'fav-list')) return [3 /*break*/, 2];
+                    openModalSidebarPortal(_jsx(AddCreationToFavoriteList, { ids: [
+                            creation instanceof CollectionCreationEntity
+                                ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
+                                : creation.getCreationId(),
+                        ] }));
+                    return [3 /*break*/, 8];
+                case 2:
+                    if (!(type === 'likes')) return [3 /*break*/, 7];
+                    if (!!isLicked) return [3 /*break*/, 4];
+                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity &&
+                            creation.getItemType() !== LabelKeys.collection
+                            ? creation.getCollectionCreationId()
+                            : creation.getItemId())];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
+                        creation.getItemType() !== LabelKeys.collection
+                        ? creation.getCollectionCreationId()
+                        : creation.getItemId())];
+                case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    if (type === 'gallery') {
+                        actionIsNeedRenderCheckbox && actionIsNeedRenderCheckbox(true, itemId);
+                    }
+                    _a.label = 8;
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); };
+    var renderLikeButton = function () {
+        if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
+            return (_jsx("div", { className: "icon like ".concat(isLicked ? 'liked' : ''), onClick: function (e) { return handleClick(e, 'likes'); }, children: _jsx(AddToLikesIcon, {}) }));
+        }
+    };
+    return (_jsxs(StyledHeadIcons, { isMobile: isMobile, style: isDisabled
+            ? {
+                pointerEvents: 'none',
+            }
+            : {}, children: [_jsx("div", { className: 'rank', children: _jsx(CardRank, { rank: creation.getRank() }) }), !isProd() && (_jsxs("div", { className: "icons", children: [_jsx("div", { className: "icon", onClick: function (e) {
+                            return handleClick(e, isRegularCard || !isUserProfile || isGallery
+                                ? 'fav-list'
+                                : 'gallery');
+                        }, children: isRegularCard || !isUserProfile || isGallery ? (_jsx(AddToFavListIcon, {})) : (_jsx(AddToGalleryIcon, {})) }), renderLikeButton()] }))] }));
+};
+// Export
+export default CardHeadIcons;

package/dist/system/Cards/CardMedia/CardAudio/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import { useMediaStore } from '@/store/media';
+import StyledImg from '@/system/Cards/Styles/Image';
+import { getWindowDimensions } from '@/utils/screen';
+import PauseIcon from '@/public/video/pause.svg';
+import PlayIcon from '@/public/video/play.svg';
+// Component
+var CardAudio = function (_a) {
+    var audioSrc = _a.audioSrc, imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(''), lImgSrc = _b[0], setLImgSrc = _b[1];
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= 768;
+    var imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
+    var _c = useState(false), isPauseIcon = _c[0], setPauseIcon = _c[1];
+    var _d = useState(null), lAudioSrc = _d[0], setLAudioSrc = _d[1];
+    var _e = useMediaStore(function (state) { return ({
+        playAudioTrack: state.playAudioTrack,
+        pauseAudioTrack: state.pauseAudioTrack,
+        tracks: state.audioTracks,
+    }); }), playAudioTrack = _e.playAudioTrack, pauseAudioTrack = _e.pauseAudioTrack, tracks = _e.tracks;
+    useEffect(function () {
+        var audioElement = new Audio(audioSrc);
+        audioElement.addEventListener('canplay', function () {
+            setLAudioSrc(audioSrc);
+        });
+        var image = new Image();
+        image.src = imgSrc;
+        image.onload = function () { return setLImgSrc("".concat(image.src).concat(imageDimensions)); };
+        image.onerror = function () { return setLImgSrc("".concat(errorImg).concat(imageDimensions)); };
+        return function () {
+            return audioElement.removeEventListener('canplay', function () {
+                setLAudioSrc(null);
+            });
+        };
+    }, []);
+    useEffect(function () {
+        var isNeedSetPlayBtn = tracks.some(function (track) {
+            return track.audioSrc === lAudioSrc && !track.playing;
+        });
+        if (isNeedSetPlayBtn) {
+            setPauseIcon(false);
+        }
+    }, [tracks]);
+    var handlePause = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(false);
+        pauseAudioTrack(lAudioSrc);
+    };
+    var handlePlay = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(true);
+        playAudioTrack(lAudioSrc);
+    };
+    var renderPlayPauseIcon = function () {
+        return isPauseIcon ? (_jsx(PauseIcon, { className: 'pauseIcon', onClick: function (e) { return handlePause(e); } })) : (_jsx(PlayIcon, { className: 'playIcon', onClick: function (e) { return handlePlay(e); } }));
+    };
+    return lImgSrc.length ? (_jsxs(_Fragment, { children: [_jsx(StyledImg, { src: imgSrc, alt: alt, isLoading: lAudioSrc }), (lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon()] })) : (_jsx(Skeleton, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+};
+// Export
+export default CardAudio;

package/dist/system/Cards/CardMedia/CardImage/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import StyledImg from '@/system/Cards/Styles/Image';
+// Component
+var CardImage = function (_a) {
+    var imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(true), loading = _b[0], setLoading = _b[1];
+    return (_jsxs(_Fragment, { children: [loading && (_jsx(Skeleton, { height: '100%', width: '100%', style: {
+                    lineHeight: 'normal',
+                    visibility: "".concat(loading ? 'hidden' : 'visible'),
+                } })), _jsx(StyledImg, { isLoading: loading, src: imgSrc, alt: alt, onError: function (e) { return (e.target.src = errorImg); }, onLoad: function () { return setLoading(false); } })] }));
+};
+// Export
+export default CardImage;

package/dist/system/Cards/CardMedia/CardVideo/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import Skeleton from 'react-loading-skeleton';
+import StyledImg from '@/system/Cards/Styles/Image';
+import StyledVideo from '@/system/Cards/Styles/Video';
+import PauseIcon from '@/public/video/pause.svg';
+import PlayIcon from '@/public/video/play.svg';
+// Component
+var CardVideo = function (_a) {
+    var videoSrc = _a.videoSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(null), lVideoSrc = _b[0], setLVideoSrc = _b[1];
+    var _c = useState(false), isPlayIcon = _c[0], setPlayIcon = _c[1];
+    var video = useRef();
+    useEffect(function () {
+        var video = document.createElement('video');
+        video.setAttribute('src', "".concat(videoSrc));
+        video.addEventListener('canplay', function () {
+            setLVideoSrc(videoSrc);
+            setPlayIcon(true);
+        }, false);
+        video.addEventListener('error', function () {
+            setLVideoSrc(null);
+            setPlayIcon(false);
+        }, false);
+        return function () { return video.removeEventListener('canplay', function () { return setLVideoSrc(null); }); };
+    }, []);
+    var playVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.play());
+        setPlayIcon(false);
+    };
+    var pauseVideo = function () {
+        var _a;
+        video.current && ((_a = video.current) === null || _a === void 0 ? void 0 : _a.pause());
+        setPlayIcon(true);
+    };
+    var renderImage = function () { return (_jsx(StyledImg, { isLoading: false, src: errorImg, alt: alt })); };
+    if (!videoSrc)
+        return renderImage();
+    return lVideoSrc ? (_jsxs(_Fragment, { children: [_jsxs(StyledVideo, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false', children: [_jsx("source", { type: "video/mp4", src: lVideoSrc }), _jsx("p", { children: alt })] }), lVideoSrc.length &&
+                (isPlayIcon ? (_jsx(PlayIcon, { className: 'playIcon', onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        playVideo();
+                    } })) : (_jsx(PauseIcon, { className: 'pauseIcon', onClick: function (e) {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        pauseVideo();
+                    } })))] })) : (_jsx(Skeleton, { height: '100%', width: '100%', style: { lineHeight: 'normal' } }));
+};
+// Export
+export default CardVideo;

package/dist/system/Cards/CardRank/index.js

@@ -0,0 +1,23 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+import { getRankColor } from '@ludo.ninja/utils';
+import { mediaQuery } from '@/styles/ScreenWidth';
+import { BlackColor, InactiveButtonColor, WhiteColor } from '@/styles/colors';
+import { Box, Flex } from '@system';
+// Styles
+var StyledCardRank = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"], ["\n  width: 64px;\n  height: 24px;\n  background-color: ", ";\n  border-radius: 4px;\n  padding: 5px;\n\n  .rankText {\n    color: ", ";\n    margin-right: 4px;\n    font-size: 1.3em;\n    font-weight: 600;\n  }\n\n  .smallText {\n    font-size: 1.2em;\n    letter-spacing: -0.5px;\n  }\n\n  ", " {\n    width: 43px;\n    height: 18px;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n    padding: ", ";\n\n    .rankText {\n      font-size: ", ";\n      margin-right: ", ";\n    }\n\n    .smallText {\n      font-size: ", ";\n      letter-spacing: ", ";\n    }\n  }\n"])), WhiteColor, BlackColor, mediaQuery.phone, mediaQuery.minWidthFourK, adaptiveValueCalc(64), adaptiveValueCalc(24), adaptiveValueCalc(4), adaptiveValueCalc(5), adaptiveValueCalc(13), adaptiveValueCalc(4), adaptiveValueCalc(12), adaptiveValueCalc(-0.5));
+var SBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"], ["\n  height: 10px;\n  width: 32px;\n  background: ", ";\n\n  ", " {\n    height: ", ";\n    width: ", ";\n  }\n"])), InactiveButtonColor, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(32));
+var RangeValue = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"], ["\n  display: block;\n  background: ", ";\n  height: 10px;\n  width: ", ";\n  border-radius: 2px 0 0 2px;\n\n  ", " {\n    height: ", ";\n    border-radius: ", " 0 0 ", ";\n  }\n"])), function (props) { return props.rankValue && getRankColor(props.rankValue); }, function (props) { return "".concat(props.rankValue, "%"); }, mediaQuery.minWidthFourK, adaptiveValueCalc(10), adaptiveValueCalc(2), adaptiveValueCalc(2));
+// Component
+var CardRank = function (_a) {
+    var rank = _a.rank;
+    return (_jsx(StyledCardRank, { children: _jsxs(Flex, { alignItems: 'center', height: '100%', children: [_jsx(Box, { children: _jsx("p", { className: "rankText ".concat(!rank && 'smallText'), children: rank ? rank : 'unknown' }) }), Boolean(rank) && (_jsx(SBox, { children: _jsx(RangeValue, { rankValue: rank }) }))] }) }));
+};
+// Export
+export default CardRank;
+var templateObject_1, templateObject_2, templateObject_3;