@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/system/CardsHolderWithSkeleton/index.jsx

@@ -1,57 +1,17 @@
 import React from 'react';
-
 import CardsGrid from '@/system/Cards/CardsGrid';
 import CardsHolder from '@/system/CardsHolderWithSkeleton/CardsHolder';
 import CardSkeletonWrapper from '@/system/CardsHolderWithSkeleton/CardsHolder/CardsSkeleton';
-
 // Component
 var CardsHolderWithSkeleton = function (_a) {
-  var loading = _a.loading,
-    error = _a.error,
-    items = _a.items,
-    refetchQuery = _a.refetchQuery,
-    children = _a.children,
-    notFoundText = _a.notFoundText,
-    isOneColumn = _a.isOneColumn,
-    isTwoColumnLayout = _a.isTwoColumnLayout,
-    isNeedShowNetWorth = _a.isNeedShowNetWorth,
-    isForVirtualize = _a.isForVirtualize,
-    likesArray = _a.likesArray,
-    tabsSlot = _a.tabsSlot;
-  if (
-    loading &&
-    (!likesArray ||
-      (likesArray === null || likesArray === void 0
-        ? void 0
-        : likesArray.length) === 0)
-  )
-    return (
-      <CardsGrid
-        isTwoColumnLayout={isTwoColumnLayout}
-        isNeedShowNetWorth={isNeedShowNetWorth}
-        isEmptyGallery={false}
-        tabsSlot={tabsSlot}
-      >
-        <CardSkeletonWrapper cardCount={40} />
-      </CardsGrid>
-    );
-  return (
-    <CardsHolder
-      items={items}
-      refetchQuery={refetchQuery}
-      error={error}
-      loading={loading}
-      notFoundText={notFoundText}
-      isOneColumn={isOneColumn}
-      isTwoColumnLayout={isTwoColumnLayout}
-      isNeedShowNetWorth={isNeedShowNetWorth}
-      isForVirtualize={isForVirtualize}
-      likesArray={likesArray}
-      tabsSlot={tabsSlot}
-    >
+    var loading = _a.loading, error = _a.error, items = _a.items, refetchQuery = _a.refetchQuery, children = _a.children, notFoundText = _a.notFoundText, isOneColumn = _a.isOneColumn, isTwoColumnLayout = _a.isTwoColumnLayout, isNeedShowNetWorth = _a.isNeedShowNetWorth, isForVirtualize = _a.isForVirtualize, likesArray = _a.likesArray, tabsSlot = _a.tabsSlot;
+    if (loading && (!likesArray || (likesArray === null || likesArray === void 0 ? void 0 : likesArray.length) === 0))
+        return (<CardsGrid isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isEmptyGallery={false} tabsSlot={tabsSlot}>
+        <CardSkeletonWrapper cardCount={40}/>
+      </CardsGrid>);
+    return (<CardsHolder items={items} refetchQuery={refetchQuery} error={error} loading={loading} notFoundText={notFoundText} isOneColumn={isOneColumn} isTwoColumnLayout={isTwoColumnLayout} isNeedShowNetWorth={isNeedShowNetWorth} isForVirtualize={isForVirtualize} likesArray={likesArray} tabsSlot={tabsSlot}>
       {children}
-    </CardsHolder>
-  );
+    </CardsHolder>);
 };
 // Export
 export default CardsHolderWithSkeleton;

package/dist/system/DropDown/DropDown.test.jsx

@@ -1,54 +1,41 @@
 import React from 'react';
-
 import { fireEvent, render, screen } from '@testing-library/react';
 import 'jest-styled-components';
-
 import DropDown from '../DropDown';
-
-jest.mock('@/public/dropDown/arrow_down.svg', function () {
-  return 'div';
-});
+jest.mock('@/public/dropDown/arrow_down.svg', function () { return 'div'; });
 describe('DropDown Component', function () {
-  test('renders with caption and closed by default', function () {
-    var _a;
-    var mockFallback = jest.fn();
-    render(
-      <div data-testid={'test_container'}>
+    test('renders with caption and closed by default', function () {
+        var _a;
+        var mockFallback = jest.fn();
+        render(<div data-testid={'test_container'}>
         <DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
           <div>Dropdown Content</div>
         </DropDown>
-      </div>
-    );
-    var captionElement = screen.getByText('Test Dropdown');
-    expect(captionElement).toBeInTheDocument();
-    var contentElement =
-      (_a = screen.queryByTestId('test_container')) === null || _a === void 0
-        ? void 0
-        : _a.querySelector('.dropDownContent');
-    expect(contentElement).toHaveStyle('grid-template-rows:0fr');
-    fireEvent.click(captionElement);
-    expect(contentElement).toHaveStyle('grid-template-rows:1fr');
-  });
-  test('calls fallback function when closed', function () {
-    var mockFallback = jest.fn();
-    render(
-      <DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
+      </div>);
+        var captionElement = screen.getByText('Test Dropdown');
+        expect(captionElement).toBeInTheDocument();
+        var contentElement = (_a = screen
+            .queryByTestId('test_container')) === null || _a === void 0 ? void 0 : _a.querySelector('.dropDownContent');
+        expect(contentElement).toHaveStyle('grid-template-rows:0fr');
+        fireEvent.click(captionElement);
+        expect(contentElement).toHaveStyle('grid-template-rows:1fr');
+    });
+    test('calls fallback function when closed', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback}>
         <div>Dropdown Content</div>
-      </DropDown>
-    );
-    var captionElement = screen.getByText('Test Dropdown');
-    fireEvent.click(captionElement);
-    fireEvent.click(captionElement);
-    expect(mockFallback).toHaveBeenCalledWith(null);
-  });
-  test('renders with active prop', function () {
-    var mockFallback = jest.fn();
-    render(
-      <DropDown caption="Test Dropdown" fallBackOnClose={mockFallback} active>
+      </DropDown>);
+        var captionElement = screen.getByText('Test Dropdown');
+        fireEvent.click(captionElement);
+        fireEvent.click(captionElement);
+        expect(mockFallback).toHaveBeenCalledWith(null);
+    });
+    test('renders with active prop', function () {
+        var mockFallback = jest.fn();
+        render(<DropDown caption="Test Dropdown" fallBackOnClose={mockFallback} active>
         <div>Dropdown Content</div>
-      </DropDown>
-    );
-    var openedContentElement = screen.getByText('Dropdown Content');
-    expect(openedContentElement).toBeInTheDocument();
-  });
+      </DropDown>);
+        var openedContentElement = screen.getByText('Dropdown Content');
+        expect(openedContentElement).toBeInTheDocument();
+    });
 });

package/dist/system/DropDown/index.jsx

@@ -1,78 +1,37 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useEffect, useState } from 'react';
-
 import styled from 'styled-components';
-
 import { InactiveButtonColor } from '@/styles/colors';
-
 import ArrowDownIcon from '@/public/dropDown/arrow_down.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-var StyledDropDown = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  border-bottom: 1px solid ',
-        ';\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ',
-        ';\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ',
-        ';\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  border-bottom: 1px solid ',
-        ';\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ',
-        ';\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ',
-        ';\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n',
-      ]
-    )),
-  InactiveButtonColor,
-  function (props) {
+var StyledDropDown = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n\n  .dropDownTab {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    padding: 18px 0;\n    text-transform: capitalize;\n    width: 100%;\n\n    &Caption {\n      font-size: 1.4em;\n      font-weight: 500;\n      color: #000000;\n    }\n\n    &Icon {\n      transform: ", ";\n      transition: transform 0.3s;\n    }\n  }\n\n  .dropDownContent {\n    display: grid;\n    grid-template-rows: ", ";\n\n    overflow: hidden;\n    transition: grid-template-rows 300ms ease-in-out;\n    .gridDown {\n      min-height: 0;\n      & > *:last-child {\n        margin-bottom: 24px;\n      }\n    }\n  }\n"])), InactiveButtonColor, function (props) {
     return props.isActive ? 'rotate(180deg)' : 'rotate(0deg)';
-  },
-  function (props) {
-    return props.isActive ? '1fr' : '0fr';
-  }
-);
+}, function (props) { return (props.isActive ? '1fr' : '0fr'); });
 // Component
 var DropDown = function (_a) {
-  var caption = _a.caption,
-    children = _a.children,
-    fallBackOnClose = _a.fallBackOnClose,
-    active = _a.active;
-  var _b = useState(false),
-    isActive = _b[0],
-    setActive = _b[1];
-  useEffect(function () {
-    if (active) {
-      setActive(true);
-    }
-  }, []);
-  return (
-    <StyledDropDown isActive={isActive}>
-      <div
-        className={'dropDownTab'}
-        onClick={function () {
-          setActive(!isActive);
-          if (!isActive) fallBackOnClose(null);
-        }}
-      >
+    var caption = _a.caption, children = _a.children, fallBackOnClose = _a.fallBackOnClose, active = _a.active;
+    var _b = useState(false), isActive = _b[0], setActive = _b[1];
+    useEffect(function () {
+        if (active) {
+            setActive(true);
+        }
+    }, []);
+    return (<StyledDropDown isActive={isActive}>
+      <div className={'dropDownTab'} onClick={function () {
+            setActive(!isActive);
+            if (!isActive)
+                fallBackOnClose(null);
+        }}>
         <span className={'dropDownTabCaption'}>{caption}</span>
-        <ArrowDownIcon className={'dropDownTabIcon'} />
+        <ArrowDownIcon className={'dropDownTabIcon'}/>
       </div>
       <div className={'dropDownContent'}>
         <div className={'gridDown'}>{children}</div>
       </div>
-    </StyledDropDown>
-  );
+    </StyledDropDown>);
 };
 // Export
 export default DropDown;

package/dist/system/Filters/type.js

@@ -1,8 +1,8 @@
 export var SelectNamesTypes;
 (function (SelectNamesTypes) {
-  SelectNamesTypes['type'] = 'type';
-  SelectNamesTypes['blockchain'] = 'blockchain';
-  SelectNamesTypes['category'] = 'category';
-  SelectNamesTypes['status'] = 'status';
-  SelectNamesTypes['time'] = 'time';
+    SelectNamesTypes["type"] = "type";
+    SelectNamesTypes["blockchain"] = "blockchain";
+    SelectNamesTypes["category"] = "category";
+    SelectNamesTypes["status"] = "status";
+    SelectNamesTypes["time"] = "time";
 })(SelectNamesTypes || (SelectNamesTypes = {}));

package/dist/system/Flex/index.jsx

@@ -1 +1 @@
-'use strict';
+"use strict";

package/dist/system/Forms/Checkbox/Checkbox.test.jsx

@@ -1,79 +1,74 @@
 import React from 'react';
-
 import '@testing-library/jest-dom/extend-expect';
 import { fireEvent, render, screen } from '@testing-library/react';
-
 import CheckboxInput from '@/system/Forms/Checkbox';
-
-jest.mock('../ErrorLabel', function () {
-  return {
+jest.mock('../ErrorLabel', function () { return ({
     __esModule: true,
     default: function (_a) {
-      var children = _a.children;
-      return <div data-testid="error-label">{children}</div>;
+        var children = _a.children;
+        return (<div data-testid="error-label">{children}</div>);
     },
-  };
-});
+}); });
 var mockRegister = {
-  name: 'test-checkbox',
-  onBlur: jest.fn(),
-  onChange: jest.fn(),
-  ref: jest.fn(),
+    name: 'test-checkbox',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
 };
 var mockInnerTextInputRef = {
-  name: 'inner-text-input',
-  onBlur: jest.fn(),
-  onChange: jest.fn(),
-  ref: jest.fn(),
+    name: 'inner-text-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
 };
 var renderComponent = function (props) {
-  return render(<CheckboxInput {...props} />);
+    return render(<CheckboxInput {...props}/>);
 };
 describe('CheckboxInput Component', function () {
-  test('renders correctly with provided props', function () {
-    renderComponent({
-      label: 'Test Label',
-      data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
-      register: mockRegister,
+    test('renders correctly with provided props', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var labelElement = screen.getByText('Test Label');
+        expect(checkboxElement).toBeInTheDocument();
+        expect(labelElement).toBeInTheDocument();
     });
-    var checkboxElement = screen.getByRole('checkbox');
-    var labelElement = screen.getByText('Test Label');
-    expect(checkboxElement).toBeInTheDocument();
-    expect(labelElement).toBeInTheDocument();
-  });
-  test('toggles text input field based on checkbox', function () {
-    renderComponent({
-      label: 'Test Label',
-      data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
-      register: mockRegister,
-      withInput: true,
-      innerTextInputRef: mockInnerTextInputRef,
+    test('toggles text input field based on checkbox', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            withInput: true,
+            innerTextInputRef: mockInnerTextInputRef,
+        });
+        var checkboxElement = screen.getByRole('checkbox');
+        var textInputElement = screen.getByRole('textbox');
+        expect(textInputElement).toBeDisabled();
+        fireEvent.click(checkboxElement);
+        expect(textInputElement).not.toBeDisabled();
     });
-    var checkboxElement = screen.getByRole('checkbox');
-    var textInputElement = screen.getByRole('textbox');
-    expect(textInputElement).toBeDisabled();
-    fireEvent.click(checkboxElement);
-    expect(textInputElement).not.toBeDisabled();
-  });
-  test('displays error message when there is an error', function () {
-    renderComponent({
-      label: 'Test Label',
-      data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
-      register: mockRegister,
-      error: { isNeedShowError: true, message: 'Error message' },
+    test('displays error message when there is an error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: true, message: 'Error message' },
+        });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
     });
-    var errorLabel = screen.getByTestId('error-label');
-    expect(errorLabel).toBeInTheDocument();
-    expect(errorLabel).toHaveTextContent('Error message');
-  });
-  test('does not display error message when there is no error', function () {
-    renderComponent({
-      label: 'Test Label',
-      data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
-      register: mockRegister,
-      error: { isNeedShowError: false, message: '' },
+    test('does not display error message when there is no error', function () {
+        renderComponent({
+            label: 'Test Label',
+            data: { name: 'test-checkbox', placeHolder: 'Placeholder' },
+            register: mockRegister,
+            error: { isNeedShowError: false, message: '' },
+        });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
     });
-    var errorLabel = screen.queryByTestId('error-label');
-    expect(errorLabel).toBeNull();
-  });
 });

package/dist/system/Forms/Checkbox/index.jsx

@@ -1,106 +1,35 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState } from 'react';
-
 import styled from 'styled-components';
-
-import {
-  AccentColor,
-  BorderColorLight,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-
+import { AccentColor, BorderColorLight, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import BasicErrorLabel from '@/system/Forms/ErrorLabel';
 import { StyledInput } from '@/system/Forms/Input';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var BasicCheckbox = styled.label(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ',
-        ';\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ',
-        ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ",
-        ';\n    border: 2px solid ',
-        ';\n    border-radius: 6px;\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ',
-        ';\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ',
-        ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ",
-        ';\n    border: 2px solid ',
-        ';\n    border-radius: 6px;\n  }\n',
-      ]
-    )),
-  TextGrayColor,
-  AccentColor,
-  WhiteColor,
-  BorderColorLight
-);
+var BasicCheckbox = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding-left: 25px;\n  padding-bottom: 2px;\n  margin: 14px 0;\n  font-size: 15px;\n  font-weight: 400;\n  color: ", ";\n  width: 100%;\n  position: relative;\n  cursor: pointer;\n\n  .input {\n    position: absolute;\n    opacity: 0;\n    cursor: pointer;\n    height: 0;\n    width: 0;\n\n    &:checked ~ .checkmark {\n      background-color: ", ";\n      background-image: url('/checkboxArrow.svg');\n      background-position: center;\n      background-repeat: no-repeat;\n      border-color: transparent;\n    }\n  }\n\n  .checkmark {\n    position: absolute;\n    left: 0;\n    height: 18px;\n    width: 18px;\n    background-color: ", ";\n    border: 2px solid ", ";\n    border-radius: 6px;\n  }\n"])), TextGrayColor, AccentColor, WhiteColor, BorderColorLight);
 var CheckboxInput = function (_a) {
-  var data = _a.data,
-    label = _a.label,
-    register = _a.register,
-    error = _a.error,
-    className = _a.className,
-    value = _a.value,
-    withInput = _a.withInput,
-    innerTextInputRef = _a.innerTextInputRef;
-  var _b = useState(true),
-    textInputDisabled = _b[0],
-    setTextInputDisables = _b[1];
-  var renderError = function () {
-    if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
-      return (
-        <BasicErrorLabel>
-          {error === null || error === void 0 ? void 0 : error.message}
-        </BasicErrorLabel>
-      );
-    }
-  };
-  return (
-    <>
+    var data = _a.data, label = _a.label, register = _a.register, error = _a.error, className = _a.className, value = _a.value, withInput = _a.withInput, innerTextInputRef = _a.innerTextInputRef;
+    var _b = useState(true), textInputDisabled = _b[0], setTextInputDisables = _b[1];
+    var renderError = function () {
+        if (error === null || error === void 0 ? void 0 : error.isNeedShowError) {
+            return <BasicErrorLabel>{error === null || error === void 0 ? void 0 : error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
       <>
-        <BasicCheckbox
-          className={className}
-          status={
-            error === null || error === void 0 ? void 0 : error.isNeedShowError
-          }
-        >
-          <input
-            {...register}
-            onChange={function (e) {
-              setTextInputDisables(!e.target.checked);
-              register.onChange(e);
-            }}
-            className="input"
-            type="checkbox"
-            name={data.name}
-            value={value}
-          />
-          <p className="checkmark" />
+        <BasicCheckbox className={className} status={error === null || error === void 0 ? void 0 : error.isNeedShowError}>
+          <input {...register} onChange={function (e) {
+            setTextInputDisables(!e.target.checked);
+            register.onChange(e);
+        }} className="input" type="checkbox" name={data.name} value={value}/>
+          <p className="checkmark"/>
           {label}
-          {withInput && (
-            <StyledInput
-              status={false}
-              {...innerTextInputRef}
-              disabled={textInputDisabled}
-            />
-          )}
+          {withInput && (<StyledInput status={false} {...innerTextInputRef} disabled={textInputDisabled}/>)}
         </BasicCheckbox>
       </>
       {renderError()}
-    </>
-  );
+    </>);
 };
 export default CheckboxInput;
 var templateObject_1;