@ludo.ninja/components 2.3.36 → 2.3.38

package/build/system/Cards/Styles/Head.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 styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+// Styles
+const StyledCardHead = styled_components_1.default.div `
+  position: relative;
+  height: 252px;
+  width: 252px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  .playIcon,
+  .pauseIcon {
+    position: absolute;
+    right: 6%;
+    bottom: 6%;
+
+    :hover {
+      circle {
+        opacity: 0.6;
+        fill: #12183a;
+      }
+    }
+  }
+
+  @media (max-width: 1199px) {
+    height: 164px;
+    width: 164px;
+  }
+
+  @media (max-width: 767px) {
+    height: 154px;
+    width: 154px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(252)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+  }
+`;
+exports.default = StyledCardHead;

package/build/system/Cards/Styles/Headicons.d.ts

@@ -0,0 +1,4 @@
+declare const StyledHeadIcons: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isMobile: boolean;
+}, never>;
+export default StyledHeadIcons;

package/build/system/Cards/Styles/Headicons.js

@@ -0,0 +1,122 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+// Styles
+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");
+const StyledHeadIcons = styled_components_1.default.div `
+  transition: 0.2s opacity ease-out;
+  opacity: 0;
+
+  &:before {
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 100px;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background: linear-gradient(180deg, #12183a 0%, rgba(18, 24, 58, 0) 100%);
+    opacity: 0.3;
+  }
+
+  .rank {
+    position: absolute;
+    top: 16px;
+    left: 16px;
+  }
+
+  .icons {
+    position: absolute;
+    top: 16px;
+    right: 7px;
+    display: flex;
+  }
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${colors_1.WhiteColor};
+    border-radius: 6px;
+    width: ${(props) => (props.isMobile ? '24px' : '36px')};
+    height: ${(props) => (props.isMobile ? '24px' : '36px')};
+
+    svg {
+      overflow: visible;
+      will-change: transform;
+      transition: transform 0.2s;
+      transform: scale(1);
+      width: ${(props) => (props.isMobile ? '13px' : '20px')};
+      height: ${(props) => (props.isMobile ? '12px' : '18px')};
+
+      path {
+        fill: ${colors_1.TextDarkGrayColor};
+        transition: fill 0.2s;
+      }
+    }
+
+    :hover svg {
+      transform: scale(1.1);
+      transition: transform 0.2s;
+
+      path {
+        fill: ${colors_1.BlackColor};
+        transition: fill 0.2s;
+      }
+    }
+  }
+
+  .icon.like {
+    margin-left: 12px;
+  }
+
+  .icon.like.liked {
+    svg path {
+      fill: #f94c66;
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    &:before {
+      height: ${(0, _4k_1.adaptiveValueCalc)(100)};
+      border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+      border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    }
+
+    .rank {
+      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      left: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    }
+
+    .icons {
+      top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+      right: ${(0, _4k_1.adaptiveValueCalc)(7)};
+    }
+
+    .icon {
+      border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+      width: ${(props) => (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36))};
+      height: ${(props) => (props.isMobile ? '24px' : (0, _4k_1.adaptiveValueCalc)(36))};
+
+      svg {
+        width: ${(props) => (props.isMobile ? '13px' : (0, _4k_1.adaptiveValueCalc)(20))};
+        height: ${(props) => (props.isMobile ? '12px' : (0, _4k_1.adaptiveValueCalc)(18))};
+      }
+    }
+
+    .icon.like {
+      margin-left: ${(0, _4k_1.adaptiveValueCalc)(12)};
+    }
+  }
+`;
+StyledHeadIcons.defaultProps = {
+    isMobile: false,
+};
+exports.default = StyledHeadIcons;

package/build/system/Cards/Styles/Image.d.ts

@@ -0,0 +1,4 @@
+declare const StyledImg: import("styled-components").StyledComponent<"img", import("styled-components").DefaultTheme, {
+    isLoading: boolean;
+}, never>;
+export default StyledImg;

package/build/system/Cards/Styles/Image.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 StyledImg = styled_components_1.default.img `
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  opacity: ${(props) => (props.isLoading ? '0' : '1')};
+  transition: opacity ease-in 0.3s;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    border-top-left-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border-top-right-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+  }
+`;
+exports.default = StyledImg;

package/build/system/Cards/Styles/Likes.d.ts

@@ -0,0 +1,4 @@
+declare const StyledLikes: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isLiked: boolean;
+}, never>;
+export default StyledLikes;

package/build/system/Cards/Styles/Likes.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const typography_1 = require("../../../styles/typography");
+// Styles
+const StyledLikes = styled_components_1.default.div `
+  display: flex;
+  align-items: end;
+
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-right: 5px;
+
+    path {
+      fill: ${(props) => (props.isLiked ? '#F94C66' : '#cfd5ea')};
+      transition: fill 0.2s;
+    }
+
+    :hover path {
+      fill: ${(props) => (props.isLiked ? '' : '#696F90')};
+    }
+  }
+
+  .counter {
+    ${typography_1.MainText};
+    font-size: 15px;
+    color: ${colors_1.TextGrayColor};
+    line-height: 1;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .icon {
+      width: ${(0, _4k_1.adaptiveValueCalc)(18)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(18)};
+      margin-right: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    }
+
+    .counter {
+      font-size: ${(0, _4k_1.adaptiveValueCalc)(15)};
+    }
+  }
+`;
+exports.default = StyledLikes;

package/build/system/Cards/Styles/MultiHead.d.ts

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

package/build/system/Cards/Styles/MultiHead.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+// Styles
+const StyledMultiHead = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: 114px;
+  gap: 8px;
+  position: relative;
+  height: 252px;
+  width: 252px;
+  cursor: pointer;
+  padding: 8px;
+
+  @media (max-width: 1199px) {
+    height: 164px;
+    width: 164px;
+    grid-auto-rows: auto;
+    gap: 5.21px;
+    padding: 5.21px;
+  }
+
+  @media (max-width: 767px) {
+    height: 154px;
+    width: 154px;
+    gap: 4px;
+    padding: 4px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    grid-auto-rows: ${(0, _4k_1.adaptiveValueCalc)(114)};
+    gap: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(252)};
+    width: ${(0, _4k_1.adaptiveValueCalc)(252)};
+  }
+`;
+exports.default = StyledMultiHead;

package/build/system/Cards/Styles/Video.d.ts

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

package/build/system/Cards/Styles/Video.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledVideo = styled_components_1.default.video `
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+`;
+exports.default = StyledVideo;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsError/index.d.ts

@@ -0,0 +1,4 @@
+declare const CardsError: ({ refetch }: {
+    refetch: () => Promise<void>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardsError;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsError/index.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 react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const animations_1 = require("../../../../styles/animations");
+const colors_1 = require("../../../../styles/colors");
+const vars_1 = require("../../../../fonts/vars");
+const refresh_svg_1 = __importDefault(require("../../../../public/error/refresh"));
+// Styles
+const StyledCardsError = styled_components_1.default.div `
+  padding-top: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .icon {
+    margin-bottom: 24px;
+    cursor: pointer;
+    animation: ${animations_1.rotateReverse} 2s infinite linear;
+  }
+  .text {
+    max-width: 308px;
+    text-align: center;
+    color: ${colors_1.TextGrayColor};
+    user-select: none;
+    font-family: ${vars_1.poppinsFontVarCss.css};
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 26px;
+  }
+`;
+// Component
+const CardsError = ({ refetch }) => {
+    const [isAnimated, setIsAnimated] = (0, react_1.useState)(false);
+    const handleAnimation = async () => {
+        setIsAnimated(true);
+        await refetch();
+        setIsAnimated(false);
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledCardsError, { children: [(0, jsx_runtime_1.jsx)(refresh_svg_1.default, { className: 'icon', onClick: handleAnimation }), !isAnimated && ((0, jsx_runtime_1.jsx)("h2", { className: 'text', children: "Whoops! Something went wrong. Let's try to refresh it!" }))] }));
+};
+// Export
+exports.default = CardsError;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/index.d.ts

@@ -0,0 +1,4 @@
+declare const CardsNoResults: ({ noFoundText }: {
+    noFoundText: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardsNoResults;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsNoResults/index.js

@@ -0,0 +1,34 @@
+"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 colors_1 = require("../../../../styles/colors");
+const typography_1 = require("../../../../styles/typography");
+const no_found_svg_1 = __importDefault(require("../../../../public/search/no_found"));
+// Styles
+const StyledNoResults = styled_components_1.default.div `
+  user-select: none;
+  padding-top: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+
+  .icon {
+    margin-bottom: 38px;
+  }
+
+  .text {
+    ${typography_1.FH3};
+    color: ${colors_1.TextGrayColor};
+  }
+`;
+// Component
+const CardsNoResults = ({ noFoundText }) => {
+    return ((0, jsx_runtime_1.jsxs)(StyledNoResults, { children: [(0, jsx_runtime_1.jsx)(no_found_svg_1.default, { className: 'icon' }), (0, jsx_runtime_1.jsx)("p", { className: 'text', children: noFoundText })] }));
+};
+// Export
+exports.default = CardsNoResults;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.d.ts

@@ -0,0 +1,5 @@
+declare const CardsSkeleton: ({ cardCount }: {
+    cardCount: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default CardsSkeleton;

package/build/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
+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 Head_1 = __importDefault(require("../../../Cards/Styles/Head"));
+// Styles
+const StyledCardSkeleton = styled_components_1.default.div `
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0 0 0;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    .content {
+      padding: ${(0, _4k_1.adaptiveValueCalc)(12)} 0 0 0;
+      gap: ${(0, _4k_1.adaptiveValueCalc)(4)};
+
+      .react-loading-skeleton {
+        height: ${(0, _4k_1.adaptiveValueCalc)(18)} !important;
+      }
+
+      .footer {
+        & > *:first-child .react-loading-skeleton {
+          width: ${(0, _4k_1.adaptiveValueCalc)(120)} !important;
+        }
+
+        & > *:last-child .react-loading-skeleton {
+          width: ${(0, _4k_1.adaptiveValueCalc)(30)} !important;
+        }
+      }
+    }
+  }
+`;
+const CardsSkeleton = ({ cardCount }) => {
+    const arr = Array.from(Array(cardCount).keys());
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: arr.map(() => ((0, jsx_runtime_1.jsx)(exports.CardSkeleton, {}, Math.random()))) }));
+};
+// Component
+const CardSkeleton = () => {
+    return ((0, jsx_runtime_1.jsxs)(StyledCardSkeleton, { children: [(0, jsx_runtime_1.jsx)(Head_1.default, { children: (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '100%', width: '100%' }) }), (0, jsx_runtime_1.jsxs)("div", { className: 'content', children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '18px', width: '70%' }), (0, jsx_runtime_1.jsxs)("div", { className: 'footer', children: [(0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '18px', width: '120px' }), (0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: '18px', width: '30px' })] })] })] }));
+};
+exports.CardSkeleton = CardSkeleton;
+// Export
+exports.default = CardsSkeleton;

package/build/system/CardsHolderWithSkeleton/CardsHolderLoader/index.d.ts

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

package/build/system/CardsHolderWithSkeleton/CardsHolderLoader/index.js

@@ -0,0 +1,42 @@
+"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 animations_1 = require("../../../styles/animations");
+const scale_1 = require("../../../utils/adaptive/scale");
+const screen_1 = require("../../../utils/screen");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const loader_svg_1 = __importDefault(require("../../../public/cardsHolderLoader/loader"));
+// Styles
+const StyledCardsHolderLoader = styled_components_1.default.div `
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 24px;
+
+  .loader {
+    animation: ${animations_1.rotate} 1s ease-in-out infinite;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding-top: ${(0, _4k_1.adaptiveValueCalc)(24)};
+  }
+
+  /* &.virtual {
+  position: fixed;
+    bottom: 90px;
+    right: 30px;
+ } */
+`;
+// Component
+const CardsHolderLoader = () => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(StyledCardsHolderLoader, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }), children: (0, jsx_runtime_1.jsx)(loader_svg_1.default, { className: 'loader' }) }));
+};
+// Export
+exports.default = CardsHolderLoader;

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

@@ -0,0 +1 @@
+import 'jest-styled-components';

package/build/system/DropDown/DropDown.test.js

@@ -0,0 +1,38 @@
+"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("@testing-library/react");
+require("jest-styled-components");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@/public/dropDown/arrow_down.svg', () => 'div');
+describe('DropDown Component', () => {
+    test('renders with caption and closed by default', () => {
+        const mockFallback = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)("div", { "data-testid": 'test_container', children: (0, jsx_runtime_1.jsx)(index_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback, children: (0, jsx_runtime_1.jsx)("div", { children: "Dropdown Content" }) }) }));
+        const captionElement = react_1.screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        const contentElement = react_1.screen
+            .queryByTestId('test_container')
+            ?.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        react_1.fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', () => {
+        const mockFallback = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback, children: (0, jsx_runtime_1.jsx)("div", { children: "Dropdown Content" }) }));
+        const captionElement = react_1.screen.getByText('Test Dropdown');
+        react_1.fireEvent.click(captionElement);
+        react_1.fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', () => {
+        const mockFallback = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { caption: "Test Dropdown", fallBackOnClose: mockFallback, active: true, children: (0, jsx_runtime_1.jsx)("div", { children: "Dropdown Content" }) }));
+        const openedContentElement = react_1.screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
+});

package/build/system/DropDown/index.js

@@ -6,8 +6,8 @@ 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 colors_1 = require("@/styles/colors");
-const arrow_down_svg_1 = __importDefault(require("@/public/dropDown/arrow_down.svg"));
+const colors_1 = require("../../styles/colors");
+const arrow_down_svg_1 = __importDefault(require("../../public/dropDown/arrow_down"));
 // Styles
 const StyledDropDown = styled_components_1.default.div `
   border-bottom: 1px solid ${colors_1.InactiveButtonColor};

package/build/system/Filters/type.d.ts

@@ -0,0 +1,16 @@
+import { ISelectInput } from '../Forms/Selects/MobileSelect';
+export declare enum SelectNamesTypes {
+    type = "type",
+    blockchain = "blockchain",
+    category = "category",
+    status = "status",
+    time = "time"
+}
+export type SelectNamesWithOptions = {
+    selectName: SelectNamesTypes;
+    selectOptions: ISelectInput[];
+};
+export type SelectsType = {
+    id: number;
+    data: SelectNamesWithOptions;
+};

package/build/system/Filters/type.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectNamesTypes = void 0;
+var SelectNamesTypes;
+(function (SelectNamesTypes) {
+    SelectNamesTypes["type"] = "type";
+    SelectNamesTypes["blockchain"] = "blockchain";
+    SelectNamesTypes["category"] = "category";
+    SelectNamesTypes["status"] = "status";
+    SelectNamesTypes["time"] = "time";
+})(SelectNamesTypes || (exports.SelectNamesTypes = SelectNamesTypes = {}));

package/build/system/Flex/index.js

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

package/build/system/Forms/Checkbox/Checkbox.test.js

@@ -6,7 +6,7 @@ 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("@/system/Forms/Checkbox/index"));
+const index_1 = __importDefault(require("./index"));
 jest.mock('../ErrorLabel', () => ({
     __esModule: true,
     default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),

package/build/system/Forms/Checkbox/index.js

@@ -4,13 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const colors_1 = require("@/styles/colors");
-const ErrorLabel_1 = __importDefault(require("@/system/Forms/ErrorLabel"));
-const Input_1 = require("@/system/Forms/Input");
+const colors_1 = require("../../../styles/colors");
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+const Input_1 = require("../Input");
 const constants_1 = require("@ludo.ninja/core/build/constants");
 const react_1 = require("react");
 const styled_components_1 = __importDefault(require("styled-components"));
-const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
 const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
 const BasicCheckbox = styled_components_1.default.label `
   display: flex;