@ludo.ninja/components 2.0.1 → 2.0.2

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

@@ -0,0 +1,92 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+// Styles
+const StyledCardCheckBox = styled_components_1.default.div `
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 1;
+
+  .cardCheckboxLabel {
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    .cardCheckboxInput {
+      margin: 0;
+      visibility: hidden;
+
+      &:checked + span {
+        border: none;
+      }
+
+      &:checked + span:after {
+        opacity: 1;
+      }
+    }
+
+    .cardCustomCheckbox {
+      cursor: pointer;
+      width: 32px;
+      height: 32px;
+      border: 2px solid ${colors_1.WhiteColor};
+      background-color: #12183a33;
+      border-radius: 50%;
+      display: inline-block;
+      position: relative;
+
+      &::after {
+        content: '';
+        display: block;
+        background-image: url('/forms/checkbox/checked.svg');
+        background-size: cover;
+        background-repeat: no-repeat;
+        width: 32px;
+        height: 32px;
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+
+      @media (max-width: 767px) {
+        width: 24px;
+        height: 24px;
+
+        &::after {
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    .cardCheckboxLabel {
+      .cardCustomCheckbox {
+        width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
+        &::after {
+          width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+          height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        }
+      }
+    }
+  }
+`;
+// Component
+const CardCheckBox = ({ isActiveCheckbox, onChange, }) => {
+    const id = (0, react_1.useId)();
+    return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { children: (0, jsx_runtime_1.jsxs)("label", { htmlFor: id, className: "cardCheckboxLabel", children: [(0, jsx_runtime_1.jsx)("input", { className: "cardCheckboxInput", type: "checkbox", name: 'checkbox', id: id, onChange: onChange, checked: isActiveCheckbox }), (0, jsx_runtime_1.jsx)("span", { className: "cardCustomCheckbox" })] }) }));
+};
+// Export
+exports.default = CardCheckBox;

package/build/system/Cards/CardContent/CardCategory/CardCategory.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardCategory/CardCategory.test.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const ItemType_1 = require("@/dto/common/ItemType");
+const index_1 = __importDefault(require("./index"));
+describe('CardCategory Component', () => {
+    const labelMock = {
+        text: ItemType_1.LabelText.opportunity,
+        backgroundColor: ItemType_1.LabelBackground.opportunity,
+        color: ItemType_1.LabelColor.opportunity,
+    };
+    test('renders the component with the provided label', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { label: labelMock }));
+        const labelElement = react_1.screen.getByText(ItemType_1.LabelText.opportunity);
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveStyle(`background: ${labelMock.backgroundColor}`);
+        expect(labelElement).toHaveStyle(`color: ${labelMock.color}`);
+    });
+    test('does not render the component when no label is provided', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { label: undefined }));
+        expect(container.firstChild).toBeNull();
+    });
+});

package/build/system/Cards/CardContent/CardCategory/index.d.ts

@@ -0,0 +1,5 @@
+import { LabelType } from '@/dto/common/ItemType';
+declare const CardCategory: ({ label }: {
+    label: LabelType | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CardCategory;

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

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const typography_1 = require("@/styles/typography");
+// Styles
+const StyledCardCategory = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+
+  .category {
+    .label {
+      ${typography_1.FH6};
+      display: inline-block;
+      background: ${(props) => props.background};
+      padding: 1px 5px;
+      line-height: 1.35em;
+      color: ${(props) => props.color};
+      user-select: none;
+      border-radius: 2px;
+      text-transform: uppercase;
+    }
+  }
+
+  @media (max-width: 1040px) {
+    margin-top: 6px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+    .category {
+      .label {
+        padding: ${(0, _4k_1.adaptiveValueCalc)(1)} ${(0, _4k_1.adaptiveValueCalc)(5)};
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)};
+      }
+    }
+  }
+`;
+// Component
+const CardCategory = ({ label }) => {
+    if (!label)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, children: (0, jsx_runtime_1.jsx)("div", { className: 'category', children: (0, jsx_runtime_1.jsx)("span", { className: 'label', children: label.text }) }) }));
+};
+// Export
+exports.default = CardCategory;

package/build/system/Cards/CardContent/CardContent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardContent.test.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const utils_1 = require("@ludo.ninja/utils");
+const index_1 = __importDefault(require("./index"));
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+jest.mock('@/system/Cards/CardContent/CardShowMore', () => {
+    return function ShowMore() {
+        return (0, jsx_runtime_1.jsx)("div", { "data-testid": "card-show-more", children: "Show More" });
+    };
+});
+describe('CardContent Component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('renders correctly with all props', () => {
+        const props = {
+            href: '/test-link',
+            creationName: 'Creation Name',
+            firstName: 'First Name',
+            secondName: 'Second Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: true,
+            itemId: '123',
+            // wallets: [{ address: 'wallet-address' }],
+            creatorName: 'Creator Name',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText(props.creatorName)).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+        expect(react_1.screen.getByText('Child Component')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('card-show-more')).toBeInTheDocument();
+    });
+    test('renders shortened firstName and cuttedSecondName if they exceed length', () => {
+        const props = {
+            firstName: 'A very long first name that exceeds twenty characters',
+            cuttedSecondName: 'A very long second name that exceeds twenty characters',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props, children: props.children }));
+        expect(react_1.screen.getByText((0, utils_1.shortenedText)(props.firstName))).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+    });
+    test('shows creatorName if provided', () => {
+        const props = {
+            creatorName: 'Creator Name',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('Creator Name')).toBeInTheDocument();
+    });
+    test('renders correctly when isGalleryAndFavPage is true', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            // wallets: [{ address: 'wallet-address' }],
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/galleries',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('First Name')).toBeInTheDocument();
+    });
+    test('does not render "Show More" button if isNeedShowMoreButton is false', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: false,
+            itemId: '123',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.queryByTestId('card-show-more')).not.toBeInTheDocument();
+    });
+});

package/build/system/Cards/CardContent/CardLikes/CardLikes.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardLikes/CardLikes.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@/utils/screen', () => ({
+    useWindowDimensionsWithServerInitial: () => ({
+        windowDimensions: { width: 800, height: 600 },
+    }),
+}));
+// Mock the HeartIcon
+jest.mock('@/public/showCaseIcons/heart.svg', () => function SVG() {
+    return (0, jsx_runtime_1.jsx)("svg", { "data-testid": "heart-icon" });
+});
+// Mock the StyledLikes component
+jest.mock('@/system/Cards/Styles/Likes', () => function Like({ children, isLiked }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-testid": `likes-${isLiked ? 'liked' : 'not-liked'}`, children: children }));
+});
+describe('CardLikes Component', () => {
+    test('renders correctly with likes and liked status', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 10, isLiked: true }));
+        const likesElement = react_1.screen.getByTestId('likes-liked');
+        const heartIcon = react_1.screen.getByTestId('heart-icon');
+        const counter = react_1.screen.getByText('10');
+        expect(likesElement).toBeInTheDocument();
+        expect(heartIcon).toBeInTheDocument();
+        expect(counter).toBeInTheDocument();
+    });
+    test('does not render when likes is 0', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 0, isLiked: false }));
+        expect(container.firstChild).toBeNull();
+    });
+});

package/build/system/Cards/CardContent/CardLikes/index.d.ts

@@ -0,0 +1,5 @@
+declare const CardLikes: ({ likes, isLiked }: {
+    likes: number;
+    isLiked: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CardLikes;

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

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const scale_1 = require("@/utils/adaptive/scale");
+const screen_1 = require("@/utils/screen");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Likes_1 = __importDefault(require("@/system/Cards/Styles/Likes"));
+const heart_svg_1 = __importDefault(require("@/public/showCaseIcons/heart.svg"));
+// Styles
+const StyledCardLikes = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+`;
+// Component
+const CardLikes = ({ likes, isLiked }) => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    if (!likes)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledCardLikes, { children: Boolean(likes) && ((0, jsx_runtime_1.jsxs)(Likes_1.default, { isLiked: isLiked, children: [(0, jsx_runtime_1.jsx)("div", { className: 'icon', children: (0, jsx_runtime_1.jsx)(heart_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({
+                            windowDimensions,
+                            currentSize: 1,
+                        }) }) }), (0, jsx_runtime_1.jsx)("span", { className: 'counter', children: likes })] })) }));
+};
+// Export
+exports.default = CardLikes;

package/build/system/Cards/CardContent/CardShowMore/CardShowMore.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardShowMore/CardShowMore.test.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const utils_1 = require("@ludo.ninja/utils");
+const ui_1 = require("@/store/ui");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@ludo.ninja/utils', () => ({
+    copyToClipboard: jest.fn(),
+}));
+jest.mock('@/store/ui', () => ({
+    useUiStore: jest.fn(),
+}));
+jest.mock('@/public/creation/card/moreBtnVertical.svg', () => function SVG() {
+    return (0, jsx_runtime_1.jsx)("svg", { "data-testid": "more-btn-icon" });
+});
+describe('CardShowMore Component', () => {
+    const mockOpenAlert = jest.fn();
+    beforeEach(() => {
+        jest.clearAllMocks();
+        ui_1.useUiStore.mockReturnValue(mockOpenAlert);
+    });
+    test('renders correctly and shows MoreButtonIcon', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
+        expect(react_1.screen.getByTestId('more-btn-icon')).toBeInTheDocument();
+    });
+    test('copies link to clipboard and opens alert on click', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
+        const dropDownItem = react_1.screen.getByText('Copy link');
+        react_1.fireEvent.click(dropDownItem);
+        expect(utils_1.copyToClipboard).toHaveBeenCalledWith(`${window.location.origin}/some-path`);
+        expect(mockOpenAlert).toHaveBeenCalledWith({ type: type_1.alertVariants.copied });
+    });
+    test('dropdown is displayed on hover', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { itemId: "123", href: "/some-path" }));
+        const moreButton = react_1.screen.getByTestId('more-btn-icon');
+        react_1.fireEvent.mouseOver(moreButton);
+        const dropDownItem = react_1.screen.getByText('Copy link');
+        expect(dropDownItem).toBeVisible();
+    });
+});

package/build/system/Cards/CardContent/CardShowMore/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const StyledCardShowMore: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const CardShowMore: ({ itemId, href }: {
+    itemId: string;
+    href: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardShowMore;

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

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledCardShowMore = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const ui_1 = require("@/store/ui");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const typography_1 = require("@/styles/typography");
+const vars_1 = require("@/fonts/vars");
+const moreBtnVertical_svg_1 = __importDefault(require("@/public/creation/card/moreBtnVertical.svg"));
+// Styles
+exports.StyledCardShowMore = styled_components_1.default.div `
+  .cardShowMore {
+    position: relative;
+    cursor: pointer;
+    z-index: 100;
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 40px;
+      height: 40px;
+      z-index: -1;
+    }
+
+    @media (max-width: 1200px) {
+      display: none;
+    }
+
+    &DropDown {
+      font-family: ${vars_1.dmsansFontVarCss.css};
+      display: none;
+      position: absolute;
+      background-color: white;
+      top: 20px;
+      left: -170px;
+      width: 184px;
+      box-shadow: 0px 0px 10px 5px rgba(33, 21, 95, 0.1);
+      border-radius: 6px;
+      padding: 8px;;
+
+      &:before {
+        content: '';
+        display: block;
+        position: absolute;
+        top: -15px;
+        height: 15px;
+        width: 100%;
+      }
+
+      &Item {
+        ${typography_1.TextSmall};
+        display: block;
+        padding: 6px 0 6px 8px;
+        color: #696f91;
+
+        &:hover {
+          border-radius: 4px;
+          color: ${colors_1.BlackColor};
+          background-color: ${colors_1.BackgroundColorLight};
+        }
+      }
+    }
+
+    &:hover > div {
+      display: block;
+      z-index: 100000;
+    }
+    ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+      &:before {
+        width: ${(0, _4k_1.adaptiveValueCalc)(40)};
+        height:  ${(0, _4k_1.adaptiveValueCalc)(40)};
+      }
+      &DropDown {
+        top: ${(0, _4k_1.adaptiveValueCalc)(20)};
+        left:${(0, _4k_1.adaptiveValueCalc)(-170)};
+        width: ${(0, _4k_1.adaptiveValueCalc)(184)};
+        box-shadow: 0px 0px ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(5)} rgba(33, 21, 95, 0.1);
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+        padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+        &:before {
+          top: ${(0, _4k_1.adaptiveValueCalc)(-15)};
+          height: ${(0, _4k_1.adaptiveValueCalc)(15)};
+        }
+
+        &Item {
+          padding: ${(0, _4k_1.adaptiveValueCalc)(6)} 0 ${(0, _4k_1.adaptiveValueCalc)(6)} ${(0, _4k_1.adaptiveValueCalc)(8)};
+          &:hover {
+            border-radius: ${(0, _4k_1.adaptiveValueCalc)(4)};
+          }
+        }
+      }
+    }
+  }
+}
+`;
+// Component
+const CardShowMore = ({ itemId, href }) => {
+    const openAlert = (0, ui_1.useUiStore)((state) => state.openAlert);
+    const copyAssetLinkToClipboard = (e) => {
+        e.preventDefault();
+        (0, utils_1.copyToClipboard)(`${window.location.origin}${href}`);
+        openAlert({
+            type: type_1.alertVariants.copied,
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.StyledCardShowMore, { children: (0, jsx_runtime_1.jsxs)("div", { className: "cardShowMore", children: [(0, jsx_runtime_1.jsx)(moreBtnVertical_svg_1.default, {}), (0, jsx_runtime_1.jsx)("div", { className: `cardShowMoreDropDown`, id: itemId, onClick: copyAssetLinkToClipboard, children: (0, jsx_runtime_1.jsx)("span", { className: 'cardShowMoreDropDownItem', children: "Copy link" }) })] }) }));
+};
+// Export
+exports.default = CardShowMore;

package/build/system/Cards/CardContent/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { IWallet } from '@ludo.ninja/api/build/graphql_tools/__generated__/galleriesHost/schema';
+declare const CardContent: ({ firstName, creationName, cuttedSecondName: cuttedShowcaseName, children, isNeedShowMoreButton, itemId, wallets, creatorName, href, }: {
+    href?: string | undefined;
+    creationName?: string | undefined;
+    firstName?: string | null | undefined;
+    secondName?: string | null | undefined;
+    cuttedSecondName?: string | null | undefined;
+    children: React.ReactNode;
+    userCreationAddresses?: string | undefined;
+    wallets?: IWallet[] | undefined;
+    isNeedShowMoreButton: boolean;
+    actionIsNeedRenderCheckbox?: ((isNeedToShow: boolean, itemId?: string) => void) | undefined;
+    itemId: string;
+    creatorName?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardContent;

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

@@ -0,0 +1,97 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const utils_1 = require("@ludo.ninja/utils");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const typography_1 = require("@/styles/typography");
+const CardShowMore_1 = __importDefault(require("@/system/Cards/CardContent/CardShowMore"));
+const vars_1 = require("@/fonts/vars");
+// Styles
+const StyledCardContent = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px;
+  min-height: 94px;
+  flex-grow: 1;
+  justify-content: end;
+
+  .cardContent {
+    display: flex;
+    justify-content: space-between;
+
+    .cardContentWrapper {
+      .mainName {
+        font-family: ${vars_1.dmsansFontVarCss.css};
+        ${typography_1.TextSmall};
+        color: ${colors_1.TextGrayColor};
+        font-size: 13px;
+        margin-bottom: 0;
+      }
+
+      .secondName {
+        font-family: ${vars_1.poppinsFontVarCss.css};
+        ${typography_1.FH5};
+        color: ${colors_1.BlackColor};
+        font-size: 15px;
+      }
+    }
+  }
+
+  .creatorName {
+    ${typography_1.TextSmall};
+    color: ${colors_1.TextGrayColor};
+    line-height: 1.39em;
+  }
+
+  @media (max-width: 1040px) {
+    height: auto;
+    padding: 12px;
+  }
+  @media (max-width: 767px) {
+    min-height: 84px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)} ${(0, _4k_1.adaptiveValueCalc)(16)};
+    min-height: ${(0, _4k_1.adaptiveValueCalc)(94)};
+
+    .cardContent {
+      .cardContentWrapper {
+        .mainName {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+        }
+
+        .secondName {
+          font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+        }
+      }
+    }
+  }
+`;
+// Component
+const CardContent = ({ firstName, creationName, cuttedSecondName: cuttedShowcaseName, children, isNeedShowMoreButton, itemId, wallets, creatorName, href, }) => {
+    const router = (0, router_1.useRouter)();
+    const isGalleryAndFavPage = router.pathname.includes('galleries') ||
+        router.pathname.includes('favorite-lists');
+    const wallet = wallets && wallets[0]?.address;
+    return ((0, jsx_runtime_1.jsxs)(StyledCardContent, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "cardContent", children: [(0, jsx_runtime_1.jsx)("div", { className: "cardContentWrapper", children: isGalleryAndFavPage ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [firstName && ((0, jsx_runtime_1.jsx)("p", { className: `secondName`, children: firstName.length > 20 ? (0, utils_1.shortenedText)(firstName) : firstName })), (0, jsx_runtime_1.jsx)("h3", { className: `mainName`, children: cuttedShowcaseName
+                                        ? cuttedShowcaseName.length > 20
+                                            ? (0, utils_1.shortenedText)(cuttedShowcaseName)
+                                            : cuttedShowcaseName
+                                        : (0, utils_1.shortenedText)(wallet) })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [creatorName ? ((0, jsx_runtime_1.jsx)("p", { className: "creatorName", children: creatorName })) : (firstName && ((0, jsx_runtime_1.jsx)("p", { className: `mainName`, children: creationName
+                                        ? creationName
+                                        : firstName.length > 20
+                                            ? (0, utils_1.shortenedText)(firstName)
+                                            : firstName }))), (0, jsx_runtime_1.jsx)("h3", { className: `secondName`, children: cuttedShowcaseName && (0, utils_1.isContainChinese)(cuttedShowcaseName)
+                                        ? cuttedShowcaseName.substring(0, 9)
+                                        : cuttedShowcaseName })] })) }), isNeedShowMoreButton && ((0, jsx_runtime_1.jsx)(CardShowMore_1.default, { href: href, itemId: itemId }))] }), children] }));
+};
+// Export
+exports.default = CardContent;

package/build/system/Cards/CardMedia/CardAudio/CardAudio.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';