@ludo.ninja/components 1.1.2 → 1.1.3

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

@@ -1,82 +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 React, { 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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 (
-    <StyledCardCheckBox>
+    var isActiveCheckbox = _a.isActiveCheckbox, onChange = _a.onChange;
+    var id = useId();
+    return (<StyledCardCheckBox>
       <label htmlFor={id} className="cardCheckboxLabel">
-        <input
-          className="cardCheckboxInput"
-          type="checkbox"
-          name={'checkbox'}
-          id={id}
-          onChange={onChange}
-          checked={isActiveCheckbox}
-        />
-        <span className="cardCustomCheckbox" />
+        <input className="cardCheckboxInput" type="checkbox" name={'checkbox'} id={id} onChange={onChange} checked={isActiveCheckbox}/>
+        <span className="cardCustomCheckbox"/>
       </label>
-    </StyledCardCheckBox>
-  );
+    </StyledCardCheckBox>);
 };
 // Export
 export default CardCheckBox;

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

@@ -1,74 +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 React from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
 import { FH6 } from '@/styles/typography';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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 (
-    <StyledCardCategory background={label.backgroundColor} color={label.color}>
+    var label = _a.label;
+    if (!label)
+        return null;
+    return (<StyledCardCategory background={label.backgroundColor} color={label.color}>
       <div className={'category'}>
         <span className={'label'}>{label.text}</span>
       </div>
-    </StyledCardCategory>
-  );
+    </StyledCardCategory>);
 };
 // Export
 export default CardCategory;

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

@@ -1,60 +1,30 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import styled from 'styled-components';
-
 import StyledLikes from '@/system/Cards/Styles/Likes';
-
 import { getAdaptiveScale } from '@/utils/adaptive/scale';
 import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-
 import HeartIcon from '@/public/showCaseIcons/heart.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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',
-      ]
-    ))
-);
+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 (
-    <StyledCardLikes>
-      {Boolean(likes) && (
-        <StyledLikes isLiked={isLiked}>
+    var likes = _a.likes, isLiked = _a.isLiked;
+    var windowDimensions = useWindowDimensionsWithServerInitial().windowDimensions;
+    return (<StyledCardLikes>
+      {Boolean(likes) && (<StyledLikes isLiked={isLiked}>
           <div className={'icon'}>
-            <HeartIcon
-              style={getAdaptiveScale({
+            <HeartIcon style={getAdaptiveScale({
                 windowDimensions: windowDimensions,
                 currentSize: 1,
-              })}
-            />
+            })}/>
           </div>
           <span className={'counter'}>{likes}</span>
-        </StyledLikes>
-      )}
-    </StyledCardLikes>
-  );
+        </StyledLikes>)}
+    </StyledCardLikes>);
 };
 // Export
 export default CardLikes;

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

@@ -1,130 +1,38 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // 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)
-);
+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 (
-    <StyledCardShowMore>
+    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 (<StyledCardShowMore>
       <div className="cardShowMore">
         <MoreButtonIcon />
-        <div
-          className={'cardShowMoreDropDown'}
-          id={itemId}
-          onClick={copyAssetLinkToClipboard}
-        >
+        <div className={"cardShowMoreDropDown"} id={itemId} onClick={copyAssetLinkToClipboard}>
           <span className={'cardShowMoreDropDownItem'}>Copy link</span>
         </div>
       </div>
-    </StyledCardShowMore>
-  );
+    </StyledCardShowMore>);
 };
 // Export
 export default CardShowMore;

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

@@ -1,151 +1,60 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React from 'react';
-
 import { 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var 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)
-);
+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 (
-    <StyledCardContent>
+    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 (<StyledCardContent>
       <div className="cardContent">
         <div className="cardContentWrapper">
-          {isGalleryAndFavPage ? (
-            <>
-              {firstName && (
-                <p className={'secondName'}>
+          {isGalleryAndFavPage ? (<>
+              {firstName && (<p className={"secondName"}>
                   {firstName.length > 20 ? shortenedText(firstName) : firstName}
-                </p>
-              )}
-              <h3 className={'mainName'}>
+                </p>)}
+              <h3 className={"mainName"}>
                 {cuttedShowcaseName
-                  ? cuttedShowcaseName.length > 20
+                ? cuttedShowcaseName.length > 20
                     ? shortenedText(cuttedShowcaseName)
                     : cuttedShowcaseName
-                  : shortenedText(wallet)}
+                : shortenedText(wallet)}
               </h3>
-            </>
-          ) : (
-            <>
-              {creatorName ? (
-                <p className="creatorName">{creatorName}</p>
-              ) : (
-                firstName && (
-                  <p className={'mainName'}>
+            </>) : (<>
+              {creatorName ? (<p className="creatorName">{creatorName}</p>) : (firstName && (<p className={"mainName"}>
                     {creationName
-                      ? creationName
-                      : firstName.length > 20
-                      ? shortenedText(firstName)
-                      : firstName}
-                  </p>
-                )
-              )}
-              <h3 className={'secondName'}>
+                    ? creationName
+                    : firstName.length > 20
+                        ? shortenedText(firstName)
+                        : firstName}
+                  </p>))}
+              <h3 className={"secondName"}>
                 {cuttedShowcaseName && isContainChinese(cuttedShowcaseName)
-                  ? cuttedShowcaseName.substring(0, 9)
-                  : cuttedShowcaseName}
+                ? cuttedShowcaseName.substring(0, 9)
+                : cuttedShowcaseName}
               </h3>
-            </>
-          )}
+            </>)}
         </div>
-        {isNeedShowMoreButton && <CardShowMore href={href} itemId={itemId} />}
+        {isNeedShowMoreButton && (<CardShowMore href={href} itemId={itemId}/>)}
       </div>
       {children}
-    </StyledCardContent>
-  );
+    </StyledCardContent>);
 };
 // Export
 export default CardContent;