@ludo.ninja/components 2.0.0 → 2.0.2

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("@/system/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.svg"));
+// 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.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare const DropDown: ({ caption, children, fallBackOnClose, active, }: {
+    caption: string;
+    children: React.ReactNode;
+    fallBackOnClose: (value: null | string) => void;
+    active?: boolean | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DropDown;

package/build/system/DropDown/index.js

@@ -0,0 +1,65 @@
+"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 colors_1 = require("@/styles/colors");
+const arrow_down_svg_1 = __importDefault(require("@/public/dropDown/arrow_down.svg"));
+// Styles
+const StyledDropDown = styled_components_1.default.div `
+  border-bottom: 1px solid ${colors_1.InactiveButtonColor};
+
+  .dropDownTab {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 18px 0;
+    text-transform: capitalize;
+    width: 100%;
+
+    &Caption {
+      font-size: 1.4em;
+      font-weight: 500;
+      color: #000000;
+    }
+
+    &Icon {
+      transform: ${(props) => props.isActive ? 'rotate(180deg)' : 'rotate(0deg)'};
+      transition: transform 0.3s;
+    }
+  }
+
+  .dropDownContent {
+    display: grid;
+    grid-template-rows: ${(props) => (props.isActive ? '1fr' : '0fr')};
+
+    overflow: hidden;
+    transition: grid-template-rows 300ms ease-in-out;
+    .gridDown {
+      min-height: 0;
+      & > *:last-child {
+        margin-bottom: 24px;
+      }
+    }
+  }
+`;
+// Component
+const DropDown = ({ caption, children, fallBackOnClose, active, }) => {
+    const [isActive, setActive] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            setActive(true);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(StyledDropDown, { isActive: isActive, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'dropDownTab', onClick: () => {
+                    setActive(!isActive);
+                    if (!isActive)
+                        fallBackOnClose(null);
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: 'dropDownTabCaption', children: caption }), (0, jsx_runtime_1.jsx)(arrow_down_svg_1.default, { className: 'dropDownTabIcon' })] }), (0, jsx_runtime_1.jsx)("div", { className: 'dropDownContent', children: (0, jsx_runtime_1.jsx)("div", { className: 'gridDown', children: children }) })] }));
+};
+// Export
+exports.default = DropDown;

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

@@ -0,0 +1,6 @@
+import { ISelection, Maybe } from '@ludo.ninja/api/build/graphql_tools/__generated__/preferencesHost/schema';
+type Selection = Maybe<Pick<ISelection, 'label'> & {
+    id: string;
+}>;
+export declare const findDefaultFilterValue: (queryValue: string | string[] | undefined, selectionsArr?: Selection[], defaultSelectionValue?: string) => string | undefined;
+export {};

package/build/system/Filters/helpers.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findDefaultFilterValue = void 0;
+const findDefaultFilterValue = (queryValue, selectionsArr, defaultSelectionValue) => {
+    const findedValue = selectionsArr && selectionsArr.find((value) => queryValue === value?.id);
+    return findedValue?.id || defaultSelectionValue;
+};
+exports.findDefaultFilterValue = findDefaultFilterValue;

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

@@ -0,0 +1,16 @@
+import { ISelectInput } from '@/system/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.d.ts

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

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

@@ -0,0 +1,76 @@
+"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("@/system/Forms/Checkbox/index"));
+jest.mock('../ErrorLabel', () => ({
+    __esModule: true,
+    default: ({ children }) => ((0, jsx_runtime_1.jsx)("div", { "data-testid": "error-label", children: children })),
+}));
+const mockRegister = {
+    name: 'test-checkbox',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const mockInnerTextInputRef = {
+    name: 'inner-text-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
+};
+const renderComponent = (props) => {
+    return (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+};
+describe('CheckboxInput Component', () => {
+    test('renders correctly with provided props', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+        });
+        const checkboxElement = react_1.screen.getByRole('checkbox');
+        const labelElement = react_1.screen.getByText('Test Label');
+        expect(checkboxElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
+    });
+    test('toggles text input field based on checkbox', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            withInput: true,
+            innerTextInputRef: mockInnerTextInputRef,
+        });
+        const checkboxElement = react_1.screen.getByRole('checkbox');
+        const textInputElement = react_1.screen.getByRole('textbox');
+        expect(textInputElement).toBeDisabled();
+        react_1.fireEvent.click(checkboxElement);
+        expect(textInputElement).not.toBeDisabled();
+    });
+    test('displays error message when there is an error', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: true, message: 'Error message' },
+        });
+        const errorLabel = react_1.screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
+    test('does not display error message when there is no error', () => {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: false, message: '' },
+        });
+        const errorLabel = react_1.screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+});

package/build/system/Forms/Checkbox/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { UseFormRegisterReturn } from 'react-hook-form';
+export type inputType = {
+    labelText?: string;
+    name: string;
+    placeHolder?: string;
+};
+interface Props {
+    label: string;
+    data: inputType;
+    register: UseFormRegisterReturn;
+    error?: {
+        isNeedShowError: boolean;
+        message: string;
+    };
+    className?: string;
+    value?: string | number;
+    withInput?: boolean;
+    innerTextInputRef?: UseFormRegisterReturn;
+}
+declare const CheckboxInput: React.FC<Props>;
+export default CheckboxInput;

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

@@ -0,0 +1,64 @@
+"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 colors_1 = require("@/styles/colors");
+const ErrorLabel_1 = __importDefault(require("@/system/Forms/ErrorLabel"));
+const Input_1 = require("@/system/Forms/Input");
+const BasicCheckbox = styled_components_1.default.label `
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding-left: 25px;
+  padding-bottom: 2px;
+  margin: 14px 0;
+  font-size: 15px;
+  font-weight: 400;
+  color: ${colors_1.TextGrayColor};
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+
+  .input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked ~ .checkmark {
+      background-color: ${colors_1.AccentColor};
+      background-image: url('/checkboxArrow.svg');
+      background-position: center;
+      background-repeat: no-repeat;
+      border-color: transparent;
+    }
+  }
+
+  .checkmark {
+    position: absolute;
+    left: 0;
+    height: 18px;
+    width: 18px;
+    background-color: ${colors_1.WhiteColor};
+    border: 2px solid ${colors_1.BorderColorLight};
+    border-radius: 6px;
+  }
+`;
+const CheckboxInput = ({ data, label, register, error, className, value, withInput, innerTextInputRef, }) => {
+    const [textInputDisabled, setTextInputDisables] = (0, react_1.useState)(true);
+    const renderError = () => {
+        if (error?.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error?.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(BasicCheckbox, { className: className, status: error?.isNeedShowError, children: [(0, jsx_runtime_1.jsx)("input", { ...register, onChange: (e) => {
+                                setTextInputDisables(!e.target.checked);
+                                register.onChange(e);
+                            }, className: "input", type: "checkbox", name: data.name, value: value }), (0, jsx_runtime_1.jsx)("p", { className: "checkmark" }), label, withInput && ((0, jsx_runtime_1.jsx)(Input_1.StyledInput, { status: false, ...innerTextInputRef, disabled: textInputDisabled }))] }) }), renderError()] }));
+};
+exports.default = CheckboxInput;

package/build/system/Forms/DatePicker/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import 'react-calendar/dist/Calendar.css';
+import 'react-date-picker/dist/DatePicker.css';
+import { UseFormRegisterReturn } from 'react-hook-form';
+import { Control } from 'react-hook-form/dist/types/form';
+interface Props {
+    name: string;
+    register: UseFormRegisterReturn;
+    error: {
+        isNeedShowError: boolean;
+        message: string | undefined;
+    };
+    control: Control;
+}
+declare const DatePicker: React.FC<Props>;
+export default DatePicker;

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

@@ -0,0 +1,137 @@
+"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("react-calendar/dist/Calendar.css");
+const react_date_picker_1 = __importDefault(require("react-date-picker"));
+require("react-date-picker/dist/DatePicker.css");
+const react_hook_form_1 = require("react-hook-form");
+const styled_components_1 = __importDefault(require("styled-components"));
+const colors_1 = require("@ludo.ninja/ui/build/styles/colors");
+const boxShadow_1 = __importDefault(require("@ludo.ninja/ui/build/styles/mixins/boxShadow"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_2 = require("@/styles/colors");
+const typography_1 = require("@/styles/typography");
+const vars_1 = require("@/fonts/vars");
+const calendar_svg_1 = __importDefault(require("@/public/calendar.svg"));
+const close20_svg_1 = __importDefault(require("@/public/close20.svg"));
+const ErrorLabel_1 = __importDefault(require("../ErrorLabel"));
+// Styles
+const StyledReactDatePicker = (0, styled_components_1.default)(react_date_picker_1.default) `
+  font-family: ${vars_1.dmsansFontVarCss.css};
+  ${typography_1.MainText};
+  width: 100%;
+  height: 46px;
+  border-radius: 6px;
+  border: 1px solid
+    ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
+  background: ${colors_2.WhiteColor};
+  color: ${colors_2.BlackColor};
+  outline: none;
+  padding: 8px 12px;
+
+  .react-date-picker__wrapper {
+    border: none;
+
+    .react-date-picker__inputGroup {
+      padding: 0;
+    }
+
+    .react-date-picker__inputGroup__input:focus-visible {
+      outline: none;
+    }
+
+    .react-date-picker__button {
+      padding: 4px;
+      border-radius: 50%;
+
+      &:hover {
+        background: ${colors_1.InactiveButtonColor};
+      }
+    }
+
+    .react-date-picker__clear-button {
+      svg path {
+        stroke: ${colors_1.TextDarkGrayColor};
+      }
+    }
+  }
+
+  .react-calendar {
+    padding: 4px;
+    width: 280px;
+    border-radius: 6px;
+    border: 1px solid ${colors_2.BorderColorLight};
+    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);
+    font-family: ${vars_1.dmsansFontVarCss.css};
+
+    button {
+      border-radius: 30px;
+      border: 1px solid white;
+    }
+
+    .react-calendar__tile--hasActive {
+      background: #76baff;
+    }
+
+    .react-calendar__tile--now {
+      ${boxShadow_1.default};
+      background: ${colors_1.ProgressColorMedium};
+
+      &:hover {
+        background: ${colors_1.ProgressColorMedium};
+      }
+    }
+
+    .react-calendar__tile--active,
+    .react-calendar__tile--hasActive {
+      ${boxShadow_1.default};
+      background: ${colors_1.AccentColor};
+      color: ${colors_2.WhiteColor};
+
+      &:hover {
+        background: ${colors_1.AccentColor};
+        color: ${colors_2.WhiteColor};
+      }
+    }
+
+    .react-calendar__year-view .react-calendar__tile,
+    .react-calendar__decade-view .react-calendar__tile,
+    .react-calendar__century-view .react-calendar__tile {
+      padding: 8px 0;
+    }
+  }
+
+  ::placeholder {
+    color: ${colors_2.TextGrayColor};
+    opacity: 1;
+  }
+
+  :-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  ::-ms-input-placeholder {
+    color: ${colors_2.TextGrayColor};
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    height: ${(0, _4k_1.adaptiveValueCalc)(46)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(6)};
+    border: ${(0, _4k_1.adaptiveValueCalc)(1)} solid
+      ${(props) => (props.status ? colors_2.ProgressColorMinimum : colors_2.BorderColorLight)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(12)};
+  }
+`;
+const DatePicker = ({ name, control, error }) => {
+    const renderError = () => {
+        if (error.isNeedShowError) {
+            return (0, jsx_runtime_1.jsx)(ErrorLabel_1.default, { children: error.message });
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { name: name, control: control, render: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledReactDatePicker, { onChange: field.onChange, onBlur: field.onBlur, value: field.value, disableCalendar: field.disabled, name: field.name, status: error.isNeedShowError, dayPlaceholder: 'dd', monthPlaceholder: 'mm', yearPlaceholder: 'yy', format: 'dd.MM.yyyy', locale: 'en', clearIcon: field.value ? (0, jsx_runtime_1.jsx)(close20_svg_1.default, {}) : null, calendarIcon: (0, jsx_runtime_1.jsx)(calendar_svg_1.default, {}) }), renderError()] })) }));
+};
+exports.default = DatePicker;

package/build/system/Forms/ErrorLabel/ErrorLabel.test.d.ts

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

package/build/system/Forms/ErrorLabel/ErrorLabel.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 react_1 = __importDefault(require("react"));
+require("@testing-library/jest-dom");
+const react_2 = require("@testing-library/react");
+const index_1 = __importDefault(require("@/system/Forms/ErrorLabel/index"));
+describe('ErrorLabel Component', () => {
+    test('renders correctly with given children and id', () => {
+        react_1.default.act(() => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { id: "test-id", children: "Test Label" }));
+        });
+        const labelElement = react_2.screen.getByText('Test Label');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveAttribute('for', 'test-id');
+    });
+    test('renders correctly without id', () => {
+        react_1.default.act(() => {
+            (0, react_2.render)((0, jsx_runtime_1.jsx)(index_1.default, { children: "Test Label Without ID" }));
+        });
+        const labelElement = react_2.screen.getByText('Test Label Without ID');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).not.toHaveAttribute('for');
+    });
+});

package/build/system/Forms/ErrorLabel/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    children: React.ReactNode;
+    id?: string;
+}
+declare const BasicErrorLabel: React.FC<Props>;
+export default BasicErrorLabel;

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

@@ -0,0 +1,25 @@
+"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 StyledLabel = styled_components_1.default.div `
+  user-select: none;
+  padding-top: 8px;
+  color: #f4205f;
+  font-size: 13px;
+  font-weight: 400;
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    padding-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+    font-size: ${(0, _4k_1.adaptiveValueCalc)(13)};
+  }
+`;
+const BasicErrorLabel = ({ children, id }) => {
+    return (0, jsx_runtime_1.jsx)(StyledLabel, { htmlFor: id, children: children });
+};
+exports.default = BasicErrorLabel;