@ludo.ninja/components 2.3.36 → 2.3.37

package/build/store/media/index.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaStore = void 0;
+const shallow_1 = require("zustand/shallow");
+const traditional_1 = require("zustand/traditional");
+exports.useMediaStore = (0, traditional_1.createWithEqualityFn)()((setState) => ({
+    audioTracks: [],
+    setAudioTracks: (audioTracks) => {
+        setState({ audioTracks });
+    },
+    playAudioTrack: (audioSrc) => {
+        setState((prevStore) => {
+            const tracks = prevStore.audioTracks;
+            const ifExist = tracks.some((track) => {
+                return track.audioSrc === audioSrc;
+            });
+            if (!ifExist) {
+                const newTracks = [...tracks].map((track) => {
+                    track.playing = false;
+                    track.audio.currentTime = 0;
+                    return track;
+                });
+                return {
+                    ...prevStore,
+                    audioTracks: [
+                        ...newTracks,
+                        {
+                            audioSrc,
+                            audio: new Audio(audioSrc),
+                            playing: true,
+                        },
+                    ],
+                };
+            }
+            else {
+                return {
+                    ...prevStore,
+                    audioTracks: [...tracks].map((track) => {
+                        track.playing = track.audioSrc === audioSrc;
+                        track.audio.currentTime = 0;
+                        return track;
+                    }),
+                };
+            }
+        });
+    },
+    pauseAudioTrack: (audioSrc) => {
+        setState((prevStore) => ({
+            ...prevStore,
+            audioTracks: [...prevStore.audioTracks].map((track) => {
+                if (track.audioSrc === audioSrc) {
+                    track.playing = false;
+                    track.audio.currentTime = 0;
+                }
+                return track;
+            }),
+        }));
+    },
+}), shallow_1.shallow);

package/build/store/media/types.d.ts

@@ -0,0 +1,11 @@
+export type sourceType = {
+    audioSrc: string;
+    audio: HTMLAudioElement;
+    playing: boolean;
+};
+export interface IMediaStore {
+    audioTracks: sourceType[];
+    setAudioTracks: (audioTracks: sourceType[]) => void;
+    playAudioTrack: (audioSrc: string) => void;
+    pauseAudioTrack: (audioSrc: string) => void;
+}

package/build/store/media/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/store/ui/index.js

@@ -6,8 +6,8 @@ const traditional_1 = require("zustand/traditional");
 const createNotificationWithId_1 = require("@ludo.ninja/ui/build/modules/notifications/createNotificationWithId");
 const utils_1 = require("@ludo.ninja/utils");
 const utils_2 = require("@ludo.ninja/utils");
-const theme_1 = require("@/system/theme");
-const interface_1 = require("@/dto/Theme/interface");
+const theme_1 = require("../../system/theme");
+const interface_1 = require("../../dto/Theme/interface");
 const utils_3 = require("./utils");
 exports.useUiStore = (0, traditional_1.createWithEqualityFn)()((setState) => ({
     //theme

package/build/store/ui/types.d.ts

@@ -1,8 +1,8 @@
 import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { TNotificationData, TNotifications } from '@/modules/notifications';
-import { alertTypeProps } from '@/system/Alert/type';
-import { ThemeEnum } from '@/dto/Theme/interface';
+import { TNotificationData, TNotifications } from '../../modules/notifications';
+import { alertTypeProps } from '../../system/Alert/type';
+import { ThemeEnum } from '../../dto/Theme/interface';
 export interface IUiStore {
     theme: DefaultTheme;
     toggleTheme: (theme: DefaultTheme, themeName: keyof typeof ThemeEnum) => void;

package/build/store/ui/utils.d.ts

@@ -1,5 +1,5 @@
 import { StoreApi } from 'zustand/esm/vanilla';
-import { IUiStore } from '@/store/ui/types';
+import { IUiStore } from './types';
 export declare const builderModal: <T, O, C>(fields: {
     trigger: keyof T;
     opener: keyof O;

package/build/styles/animations/index.d.ts

@@ -0,0 +1,2 @@
+export declare const rotateReverse: import("styled-components").Keyframes;
+export declare const rotate: import("styled-components").Keyframes;

package/build/styles/animations/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotate = exports.rotateReverse = void 0;
+const styled_components_1 = require("styled-components");
+exports.rotateReverse = (0, styled_components_1.keyframes) `
+  from {
+    transform: rotate(360deg);
+  }
+  to {
+    transform: rotate(0deg);
+  }
+`;
+exports.rotate = (0, styled_components_1.keyframes) `
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;

package/build/styles/globalStyles.d.ts

@@ -0,0 +1,2 @@
+declare const GlobalStyle: import("styled-components").GlobalStyleComponent<{}, import("styled-components").DefaultTheme>;
+export default GlobalStyle;

package/build/styles/globalStyles.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = require("styled-components");
+const FontsInitializeLayout_1 = require("../fonts/FontsInitializeLayout");
+const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
+  :root {
+    --app-height: 100vh;
+  }
+
+  button {
+    cursor: pointer;
+    box-sizing: border-box;
+    font-family: inherit;
+  }
+
+  html {
+    font-size: 0.625rem;
+    min-height: var(--app-height);
+    -webkit-font-smoothing: antialiased;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--PoppinsFont);
+    letter-spacing: -0.015em;
+    padding: 0;
+    background: ${({ theme }) => theme.colors.bg};
+    border: 0;
+    margin: 0;
+    min-height: var(--app-height);
+    position: relative;
+
+    &.dark-theme {
+      .react-loading-skeleton {
+        --base-color: #3A3D4C !important;
+        --highlight-color: #292C39 !important;
+      }
+    }
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+
+  a {
+    text-decoration: none;
+    color: rgba(13, 110, 253, var(--bs-link-opacity, 1));
+  }
+
+  .modal-dialog {
+    max-width: 100%;
+    width: fit-content;
+  }
+
+  .modal-dg {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .modal-content {
+    border-radius: 2.2rem !important;
+    overflow: hidden;
+    outline: none;
+    border: 0;
+  }
+
+  ::selection {
+    color: ${({ theme }) => theme.colors.naturalWhite};
+    background-color: ${({ theme }) => theme.colors.accent};
+  }
+
+  ::-webkit-scrollbar {
+    height: 2px;
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: ${({ theme }) => theme.colors.scrollBar};
+  }
+
+  ${FontsInitializeLayout_1.GlobalFontsFallback}
+`;
+exports.default = GlobalStyle;

package/build/system/ActiveLink/ActiveLink.test.d.ts

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

package/build/system/ActiveLink/ActiveLink.test.js

@@ -0,0 +1,48 @@
+"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 index_1 = __importDefault(require("./index"));
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+describe('ActiveLink Component', () => {
+    const useRouterMock = router_1.useRouter;
+    beforeEach(() => {
+        useRouterMock.mockReturnValue({
+            asPath: '/test-path',
+        });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    test('renders child component', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toBeInTheDocument();
+    });
+    test('applies activeClassName when href matches asPath', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link active');
+    });
+    test('does not apply activeClassName when href does not match asPath', () => {
+        useRouterMock.mockReturnValueOnce({
+            asPath: '/different-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link');
+        expect(linkElement).not.toHaveClass('active');
+    });
+    test('applies activeClassName when as prop matches asPath', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", as: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link active');
+    });
+});

package/build/system/ActiveLink/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+interface Props {
+    children: ReactElement;
+    activeClassName?: string;
+    href: string;
+    as?: string;
+}
+declare const ActiveLink: ({ children, activeClassName, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ActiveLink;

package/build/system/ActiveLink/index.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const router_1 = require("next/router");
+const path_to_regexp_1 = require("path-to-regexp");
+const ActiveLink = ({ children, activeClassName, ...props }) => {
+    const { asPath } = (0, router_1.useRouter)();
+    const child = react_1.Children.only(children);
+    const childClassName = child.props.className || '';
+    const isActive = (0, path_to_regexp_1.pathToRegexp)(props.href || props.as, [], {
+        sensitive: true,
+    }).test(asPath);
+    const className = props.href || asPath === props.as
+        ? `${childClassName} ${isActive ? activeClassName : ''}`.trim()
+        : childClassName;
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { ...props, children: react_1.default.cloneElement(child, {
+            className: className || null,
+        }) }));
+};
+// Export
+exports.default = ActiveLink;

package/build/system/Alert/index.d.ts

@@ -0,0 +1,2 @@
+declare const Alert: () => import("react/jsx-runtime").JSX.Element | null;
+export default Alert;

package/build/system/Alert/index.js

@@ -0,0 +1,21 @@
+"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 Alert_1 = __importDefault(require("@ludo.ninja/ui/build/system/Alert"));
+const ui_1 = require("../../store/ui");
+// Component
+const Alert = () => {
+    const { closeAlert, updateData, isAlertOpen } = (0, ui_1.useUiStore)((state) => ({
+        closeAlert: state.closeAlert,
+        updateData: state.alertType,
+        isAlertOpen: state.isAlertOpen,
+    }));
+    if (!(isAlertOpen && updateData))
+        return null;
+    return (0, jsx_runtime_1.jsx)(Alert_1.default, { closeAlert: closeAlert, updateData: updateData });
+};
+// Export
+exports.default = Alert;

package/build/system/BasicOverlay/index.d.ts

@@ -0,0 +1,2 @@
+declare const BasicOverlay: () => import("react/jsx-runtime").JSX.Element;
+export default BasicOverlay;

package/build/system/BasicOverlay/index.js

@@ -0,0 +1,27 @@
+"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"));
+// Styles
+const StyledBasicOverlay = styled_components_1.default.div `
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 3;
+  user-select: none;
+`;
+// Component
+const BasicOverlay = () => {
+    return (0, jsx_runtime_1.jsx)(StyledBasicOverlay, { "data-testid": "basic-overlay" });
+};
+// Export
+exports.default = BasicOverlay;

package/build/system/Buttons/IconButton/index.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const IconButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/IconButton"));
+exports.default = IconButton_1.default;

package/build/system/Buttons/IconWithButton/index.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const IconWithButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/IconWithButton"));
+exports.default = IconWithButton_1.default;

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

@@ -0,0 +1 @@
+"use strict";

package/build/system/Buttons/MainButton/index.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+exports.default = MainButton_1.default;

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

@@ -0,0 +1 @@
+"use strict";

package/build/system/Buttons/SecondaryButton/index.d.ts

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

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

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const SecondaryButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/SecondaryButton"));
+exports.default = SecondaryButton_1.default;

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

@@ -0,0 +1,5 @@
+declare const CardCheckBox: ({ isActiveCheckbox, onChange }: {
+    isActiveCheckbox: boolean;
+    onChange: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardCheckBox;

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

@@ -0,0 +1,89 @@
+"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 ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledCardCheckBox = styled_components_1.default.button `
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: unset;
+  background: unset;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+
+  .cardCustomCheckbox {
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border: 2px solid ${colors_1.WhiteColor};
+    background-color: #12183a33;
+    border-radius: 50%;
+    display: inline-block;
+
+    &.active::after {
+      opacity: 1;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      background-image: url("${constants_1.staticLink}/forms/checkbox/checked.svg");
+      background-size: cover;
+      background-repeat: no-repeat;
+      width: 32px;
+      height: 32px;
+      opacity: 0;
+      transition: opacity 0.2s;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    @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)};
+
+    .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 }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
+            console.log("StyledCardCheckBox click");
+            e.preventDefault();
+            e.stopPropagation();
+            onChange();
+        }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? "active" : ""}` }) }));
+};
+// 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");
+const index_1 = __importDefault(require("./index"));
+const types_1 = require("../../../../entities/labelCreationType/types");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+describe("CardCategory Component", () => {
+    const labelMock = {
+        text: types_1.LabelText.opportunity,
+        backgroundColor: types_1.LabelBackground.opportunity,
+        color: types_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(types_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 '../../../../entities/labelCreationType/types';
+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 ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const typography_1 = require("../../../../styles/typography");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+// 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';