@ludo.ninja/components 1.1.2 → 1.1.4

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

@@ -1,180 +1,39 @@
+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 from 'react';
-
 import 'react-calendar/dist/Calendar.css';
 import ReactDatePicker from 'react-date-picker';
 import 'react-date-picker/dist/DatePicker.css';
 import { Controller } from 'react-hook-form';
 import styled from 'styled-components';
-
-import {
-  AccentColor,
-  InactiveButtonColor,
-  ProgressColorMedium,
-  TextDarkGrayColor,
-} from '@ludo.ninja/ui/build/styles/colors';
+import { AccentColor, InactiveButtonColor, ProgressColorMedium, TextDarkGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
 import BoxShadow from '@ludo.ninja/ui/build/styles/mixins/boxShadow';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  BorderColorLight,
-  ProgressColorMinimum,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import { MainText } from '@/styles/typography';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
 import CalendarIcon from '@/public/calendar.svg';
 import CloseIcon from '@/public/close20.svg';
-
 import BasicErrorLabel from '../ErrorLabel';
-
-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 StyledReactDatePicker = styled(ReactDatePicker)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ',
-        ';\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ',
-        ';\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ',
-        ';\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ',
-        ';\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ',
-        ';\n      background: ',
-        ';\n\n      &:hover {\n        background: ',
-        ';\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ',
-        ';\n      background: ',
-        ';\n      color: ',
-        ';\n\n      &:hover {\n        background: ',
-        ';\n        color: ',
-        ';\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ',
-        ';\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ',
-        ';\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ',
-        ';\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ',
-        ';\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ',
-        ';\n      background: ',
-        ';\n\n      &:hover {\n        background: ',
-        ';\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ',
-        ';\n      background: ',
-        ';\n      color: ',
-        ';\n\n      &:hover {\n        background: ',
-        ';\n        color: ',
-        ';\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  MainText,
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  WhiteColor,
-  BlackColor,
-  InactiveButtonColor,
-  TextDarkGrayColor,
-  BorderColorLight,
-  dmsansFontVarCss.css,
-  BoxShadow,
-  ProgressColorMedium,
-  ProgressColorMedium,
-  BoxShadow,
-  AccentColor,
-  WhiteColor,
-  AccentColor,
-  WhiteColor,
-  TextGrayColor,
-  TextGrayColor,
-  TextGrayColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(46),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(1),
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  adaptiveValueCalc(12)
-);
+var StyledReactDatePicker = styled(ReactDatePicker)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 8px 12px;\n\n  .react-date-picker__wrapper {\n    border: none;\n\n    .react-date-picker__inputGroup {\n      padding: 0;\n    }\n\n    .react-date-picker__inputGroup__input:focus-visible {\n      outline: none;\n    }\n\n    .react-date-picker__button {\n      padding: 4px;\n      border-radius: 50%;\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-date-picker__clear-button {\n      svg path {\n        stroke: ", ";\n      }\n    }\n  }\n\n  .react-calendar {\n    padding: 4px;\n    width: 280px;\n    border-radius: 6px;\n    border: 1px solid ", ";\n    box-shadow: 0 10px 32px -16px rgba(0, 0, 0, 0.6);\n    font-family: ", ";\n\n    button {\n      border-radius: 30px;\n      border: 1px solid white;\n    }\n\n    .react-calendar__tile--hasActive {\n      background: #76baff;\n    }\n\n    .react-calendar__tile--now {\n      ", ";\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    }\n\n    .react-calendar__tile--active,\n    .react-calendar__tile--hasActive {\n      ", ";\n      background: ", ";\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        color: ", ";\n      }\n    }\n\n    .react-calendar__year-view .react-calendar__tile,\n    .react-calendar__decade-view .react-calendar__tile,\n    .react-calendar__century-view .react-calendar__tile {\n      padding: 8px 0;\n    }\n  }\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, InactiveButtonColor, TextDarkGrayColor, BorderColorLight, dmsansFontVarCss.css, BoxShadow, ProgressColorMedium, ProgressColorMedium, BoxShadow, AccentColor, WhiteColor, AccentColor, WhiteColor, TextGrayColor, TextGrayColor, TextGrayColor, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
 var DatePicker = function (_a) {
-  var name = _a.name,
-    control = _a.control,
-    error = _a.error;
-  var renderError = function () {
-    if (error.isNeedShowError) {
-      return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
-    }
-  };
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={function (_a) {
-        var field = _a.field;
-        return (
-          <>
-            <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 ? <CloseIcon /> : null}
-              calendarIcon={<CalendarIcon />}
-            />
-            {renderError()}
-          </>
-        );
-      }}
-    />
-  );
+    var name = _a.name, control = _a.control, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<Controller name={name} control={control} render={function (_a) {
+            var field = _a.field;
+            return (<>
+          <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 ? <CloseIcon /> : null} calendarIcon={<CalendarIcon />}/>
+          {renderError()}
+        </>);
+        }}/>);
 };
 export default DatePicker;
 var templateObject_1;

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

@@ -1,25 +1,22 @@
 import React from 'react';
-
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-
 import ErrorLabel from '@/system/Forms/ErrorLabel';
-
 describe('ErrorLabel Component', function () {
-  test('renders correctly with given children and id', function () {
-    React.act(function () {
-      render(<ErrorLabel id="test-id">Test Label</ErrorLabel>);
+    test('renders correctly with given children and id', function () {
+        React.act(function () {
+            render(<ErrorLabel id="test-id">Test Label</ErrorLabel>);
+        });
+        var labelElement = screen.getByText('Test Label');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveAttribute('for', 'test-id');
     });
-    var labelElement = screen.getByText('Test Label');
-    expect(labelElement).toBeInTheDocument();
-    expect(labelElement).toHaveAttribute('for', 'test-id');
-  });
-  test('renders correctly without id', function () {
-    React.act(function () {
-      render(<ErrorLabel>Test Label Without ID</ErrorLabel>);
+    test('renders correctly without id', function () {
+        React.act(function () {
+            render(<ErrorLabel>Test Label Without ID</ErrorLabel>);
+        });
+        var labelElement = screen.getByText('Test Label Without ID');
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).not.toHaveAttribute('for');
     });
-    var labelElement = screen.getByText('Test Label Without ID');
-    expect(labelElement).toBeInTheDocument();
-    expect(labelElement).not.toHaveAttribute('for');
-  });
 });

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

@@ -1,46 +1,15 @@
+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 from 'react';
-
 import styled from 'styled-components';
-
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var StyledLabel = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ',
-        ' {\n    padding-top: ',
-        ';\n    font-size: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ',
-        ' {\n    padding-top: ',
-        ';\n    font-size: ',
-        ';\n  }\n',
-      ]
-    )),
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(13)
-);
+var StyledLabel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"], ["\n  user-select: none;\n  padding-top: 8px;\n  color: #f4205f;\n  font-size: 13px;\n  font-weight: 400;\n\n  ", " {\n    padding-top: ", ";\n    font-size: ", ";\n  }\n"])), mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(13));
 var BasicErrorLabel = function (_a) {
-  var children = _a.children,
-    id = _a.id;
-  return <StyledLabel htmlFor={id}>{children}</StyledLabel>;
+    var children = _a.children, id = _a.id;
+    return <StyledLabel htmlFor={id}>{children}</StyledLabel>;
 };
 export default BasicErrorLabel;
 var templateObject_1;

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

@@ -1,64 +1,52 @@
 import React from 'react';
-
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-
 import { ProgressColorMinimum } from '@/styles/colors';
-
 import Input from '@/system/Forms/Input';
-
-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-input',
-  onBlur: jest.fn(),
-  onChange: jest.fn(),
-  ref: jest.fn(),
+    name: 'test-input',
+    onBlur: jest.fn(),
+    onChange: jest.fn(),
+    ref: jest.fn(),
 };
 var mockData = {
-  name: 'test-input',
-  placeHolder: 'Enter text...',
-  labelText: 'Test Input',
+    name: 'test-input',
+    placeHolder: 'Enter text...',
+    labelText: 'Test Input',
 };
 var renderComponent = function (error) {
-  return render(
-    <Input data={mockData} register={mockRegister} error={error} />
-  );
+    return render(<Input data={mockData} register={mockRegister} error={error}/>);
 };
 describe('Input Component', function () {
-  test('renders input element with correct attributes', function () {
-    renderComponent({ isNeedShowError: false, message: undefined });
-    var inputElement = screen.getByPlaceholderText('Enter text...');
-    expect(inputElement).toBeInTheDocument();
-    expect(inputElement.name).toBe('test-input');
-    expect(inputElement.id).toBe('test-input');
-  });
-  test('applies error styles when there is an error', function () {
-    renderComponent({ isNeedShowError: true, message: 'Error message' });
-    var inputElement = screen.getByPlaceholderText('Enter text...');
-    expect(inputElement).toHaveStyle(
-      'border-color: '.concat(ProgressColorMinimum)
-    );
-    expect(screen.getByTestId('error-label')).toHaveTextContent(
-      'Error message'
-    );
-  });
-  test('does not render error label when there is no error', function () {
-    renderComponent({ isNeedShowError: false, message: undefined });
-    var errorLabel = screen.queryByTestId('error-label');
-    expect(errorLabel).toBeNull();
-  });
-  test('renders error label when there is an error', function () {
-    renderComponent({ isNeedShowError: true, message: 'Error message' });
-    var errorLabel = screen.getByTestId('error-label');
-    expect(errorLabel).toBeInTheDocument();
-    expect(errorLabel).toHaveTextContent('Error message');
-  });
+    test('renders input element with correct attributes', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toBeInTheDocument();
+        expect(inputElement.name).toBe('test-input');
+        expect(inputElement.id).toBe('test-input');
+    });
+    test('applies error styles when there is an error', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var inputElement = screen.getByPlaceholderText('Enter text...');
+        expect(inputElement).toHaveStyle("border-color: ".concat(ProgressColorMinimum));
+        expect(screen.getByTestId('error-label')).toHaveTextContent('Error message');
+    });
+    test('does not render error label when there is no error', function () {
+        renderComponent({ isNeedShowError: false, message: undefined });
+        var errorLabel = screen.queryByTestId('error-label');
+        expect(errorLabel).toBeNull();
+    });
+    test('renders error label when there is an error', function () {
+        renderComponent({ isNeedShowError: true, message: 'Error message' });
+        var errorLabel = screen.getByTestId('error-label');
+        expect(errorLabel).toBeInTheDocument();
+        expect(errorLabel).toHaveTextContent('Error message');
+    });
 });

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

@@ -1,134 +1,29 @@
+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 from 'react';
-
 import styled from 'styled-components';
-
-import {
-  DisabledGrayColor,
-  DisabledLightGrayColor,
-} from '@ludo.ninja/ui/build/styles/colors';
+import { DisabledGrayColor, DisabledLightGrayColor, } from '@ludo.ninja/ui/build/styles/colors';
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  BorderColorLight,
-  ProgressColorMinimum,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
+import { BlackColor, BorderColorLight, ProgressColorMinimum, TextGrayColor, WhiteColor, } from '@/styles/colors';
 import { MainText } from '@/styles/typography';
-
 import BasicErrorLabel from '@/system/Forms/ErrorLabel';
-
 import { dmsansFontVarCss } from '@/fonts/vars';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 // Styles
-export var StyledInput = styled.input(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  :disabled {\n    background: ',
-        ';\n    color: ',
-        ';\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  font-family: ',
-        ';\n  ',
-        ';\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ',
-        ';\n  background: ',
-        ';\n  color: ',
-        ';\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ',
-        ';\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  ::-ms-input-placeholder {\n    color: ',
-        ';\n  }\n\n  :disabled {\n    background: ',
-        ';\n    color: ',
-        ';\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ',
-        ';\n  // }\n  ',
-        ' {\n    height: ',
-        ';\n    border-radius: ',
-        ';\n    border: ',
-        ' solid\n      ',
-        ';\n    padding: ',
-        ';\n  }\n',
-      ]
-    )),
-  dmsansFontVarCss.css,
-  MainText,
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  WhiteColor,
-  BlackColor,
-  TextGrayColor,
-  TextGrayColor,
-  TextGrayColor,
-  DisabledLightGrayColor,
-  DisabledGrayColor,
-  function (props) {
-    return props.status ? '#F4205F' : '#C1C8DE';
-  },
-  function (props) {
-    return props.status ? '#F4205F' : '#C1C8DE';
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(46),
-  adaptiveValueCalc(6),
-  adaptiveValueCalc(1),
-  function (props) {
-    return props.status ? ProgressColorMinimum : BorderColorLight;
-  },
-  adaptiveValueCalc(12)
-);
+export var StyledInput = styled.input(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"], ["\n  font-family: ", ";\n  ", ";\n  width: 100%;\n  height: 46px;\n  border-radius: 6px;\n  border: 1px solid\n    ", ";\n  background: ", ";\n  color: ", ";\n  outline: none;\n  padding: 12px;\n\n  ::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  :-ms-input-placeholder {\n    color: ", ";\n  }\n\n  ::-ms-input-placeholder {\n    color: ", ";\n  }\n\n  :disabled {\n    background: ", ";\n    color: ", ";\n  }\n\n  // :focus {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  // :hover {\n  //   transition: border-color 0.3s ease-in-out;\n  //   border: 2px solid ", ";\n  // }\n  ", " {\n    height: ", ";\n    border-radius: ", ";\n    border: ", " solid\n      ", ";\n    padding: ", ";\n  }\n"])), dmsansFontVarCss.css, MainText, function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, WhiteColor, BlackColor, TextGrayColor, TextGrayColor, TextGrayColor, DisabledLightGrayColor, DisabledGrayColor, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, function (props) { return (props.status ? '#F4205F' : '#C1C8DE'); }, mediaQuery.minWidthFourK, adaptiveValueCalc(46), adaptiveValueCalc(6), adaptiveValueCalc(1), function (props) { return (props.status ? ProgressColorMinimum : BorderColorLight); }, adaptiveValueCalc(12));
 var Input = function (_a) {
-  var data = _a.data,
-    register = _a.register,
-    error = _a.error;
-  var renderError = function () {
-    if (error.isNeedShowError) {
-      return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
-    }
-  };
-  return (
-    <>
-      <StyledInput
-        {...register}
-        status={error.isNeedShowError}
-        id={data.name}
-        name={data.name}
-        autoComplete={'off'}
-        placeholder={data.placeHolder}
-      />
+    var data = _a.data, register = _a.register, error = _a.error;
+    var renderError = function () {
+        if (error.isNeedShowError) {
+            return <BasicErrorLabel>{error.message}</BasicErrorLabel>;
+        }
+    };
+    return (<>
+      <StyledInput {...register} status={error.isNeedShowError} id={data.name} name={data.name} autoComplete={'off'} placeholder={data.placeHolder}/>
       {renderError()}
-    </>
-  );
+    </>);
 };
 export default Input;
 var templateObject_1;