@ludo.ninja/components 1.1.2 → 1.1.4

package/dist/components/forms/form/index.jsx

@@ -1,315 +1,118 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React, { useEffect } from 'react';
-
 import { Spinner } from 'react-bootstrap';
 import { Controller, useForm } from 'react-hook-form';
 import styled from 'styled-components';
-
 import { TextGrayColor } from '@ludo.ninja/ui/build/styles/colors';
 import { MainText } from '@ludo.ninja/ui/build/system/Text';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-
 import MainButton from '@/system/Buttons/MainButton';
 import { BasicTextArea, CheckboxInput, Input } from '@/system/Forms';
 import DatePicker from '@/system/Forms/DatePicker';
 import BasicRadioInput from '@/system/Forms/RadioInput';
-
 import { Flex, H1, H5 } from '@system';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-var __rest =
-  (this && this.__rest) ||
-  function (s, e) {
-    var t = {};
-    for (var p in s)
-      if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === 'function')
-      for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-        if (
-          e.indexOf(p[i]) < 0 &&
-          Object.prototype.propertyIsEnumerable.call(s, p[i])
-        )
-          t[p[i]] = s[p[i]];
-      }
-    return t;
-  };
-
-var Title = styled(H1)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      ['\n  margin-bottom: 24px;\n  text-align: center;\n'],
-      ['\n  margin-bottom: 24px;\n  text-align: center;\n']
-    ))
-);
-var Description = styled(MainText)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      ['\n  color: ', ';\n  text-align: justify;\n'],
-      ['\n  color: ', ';\n  text-align: justify;\n']
-    )),
-  TextGrayColor
-);
-var Wrapper = styled(Flex)(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  justify-content: center;\n\n  ',
-        ' {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n',
-      ],
-      [
-        '\n  justify-content: center;\n\n  ',
-        ' {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n',
-      ]
-    )),
-  mediaQuery.tablet
-);
-var FormWrapper = styled.form(
-  templateObject_4 ||
-    (templateObject_4 = __makeTemplateObject(
-      [
-        '\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ',
-        ' {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ',
-        ' {\n    margin: 0;\n    width: 320px;\n  }\n',
-      ],
-      [
-        '\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ',
-        ' {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ',
-        ' {\n    margin: 0;\n    width: 320px;\n  }\n',
-      ]
-    )),
-  mediaQuery.desktop,
-  mediaQuery.tablet
-);
-var InputTitle = styled(H5)(
-  templateObject_5 ||
-    (templateObject_5 = __makeTemplateObject(
-      ['\n  margin-bottom: 8px;\n'],
-      ['\n  margin-bottom: 8px;\n']
-    ))
-);
-var RadioInput = styled(BasicRadioInput)(
-  templateObject_6 ||
-    (templateObject_6 = __makeTemplateObject(
-      ['\n  color: ', ';\n'],
-      ['\n  color: ', ';\n']
-    )),
-  TextGrayColor
-);
-var StyledInputGroup = styled.div(
-  templateObject_7 ||
-    (templateObject_7 = __makeTemplateObject(
-      ['\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n'],
-      ['\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n']
-    ))
-);
+var Title = styled(H1)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 24px;\n  text-align: center;\n"], ["\n  margin-bottom: 24px;\n  text-align: center;\n"])));
+var Description = styled(MainText)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-align: justify;\n"], ["\n  color: ", ";\n  text-align: justify;\n"])), TextGrayColor);
+var Wrapper = styled(Flex)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"], ["\n  justify-content: center;\n\n  ", " {\n    width: 100%;\n    align-items: center;\n    flex-direction: column-reverse;\n    margin: 0;\n  }\n"])), mediaQuery.tablet);
+var FormWrapper = styled.form(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"], ["\n  margin: 0 50px 0 70px;\n  justify-content: center;\n  width: 472px;\n\n  ", " {\n    margin: 0 25px 0 25px;\n    width: 450px;\n  }\n\n  ", " {\n    margin: 0;\n    width: 320px;\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet);
+var InputTitle = styled(H5)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-bottom: 8px;\n"], ["\n  margin-bottom: 8px;\n"])));
+var RadioInput = styled(BasicRadioInput)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), TextGrayColor);
+var StyledInputGroup = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"], ["\n  position: relative;\n  width: 100%;\n  margin-top: 24px;\n"])));
 var Form = function (_a) {
-  var props = __rest(_a, []);
-  var inputs = props.inputs,
-    onSubmit = props.onSubmit,
-    submitLoading = props.submitLoading,
-    formDescription = props.formDescription,
-    formTitle = props.formTitle,
-    initialValues = props.initialValues;
-  var _b = useForm({
-      mode: 'all',
-      defaultValues: initialValues,
-    }),
-    register = _b.register,
-    _c = _b.formState,
-    errors = _c.errors,
-    isDirty = _c.isDirty,
-    isValid = _c.isValid,
-    handleSubmit = _b.handleSubmit,
-    reset = _b.reset,
-    control = _b.control,
-    setFocus = _b.setFocus,
-    formState = _b.formState;
-  useEffect(
-    function () {
-      reset();
-    },
-    [inputs, reset]
-  );
-  useEffect(
-    function () {
-      if (formState.isSubmitSuccessful) {
+    var props = __rest(_a, []);
+    var inputs = props.inputs, onSubmit = props.onSubmit, submitLoading = props.submitLoading, formDescription = props.formDescription, formTitle = props.formTitle, initialValues = props.initialValues;
+    var _b = useForm({
+        mode: 'all',
+        defaultValues: initialValues,
+    }), register = _b.register, _c = _b.formState, errors = _c.errors, isDirty = _c.isDirty, isValid = _c.isValid, handleSubmit = _b.handleSubmit, reset = _b.reset, control = _b.control, setFocus = _b.setFocus, formState = _b.formState;
+    useEffect(function () {
         reset();
-      }
-    },
-    [formState, reset]
-  );
-  var getInput = function (inputProps) {
-    var _a, _b;
-    var dataProp = {
-      labelText: inputProps.label || '',
-      name: inputProps.name,
-      placeHolder: inputProps.placeholder || '',
-    };
-    var inputErrors =
-      errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
-    var errorProp = {
-      isNeedShowError: Boolean(inputErrors),
-      message: inputErrors ? inputErrors.message : '',
+    }, [inputs, reset]);
+    useEffect(function () {
+        if (formState.isSubmitSuccessful) {
+            reset();
+        }
+    }, [formState, reset]);
+    var getInput = function (inputProps) {
+        var _a, _b;
+        var dataProp = {
+            labelText: inputProps.label || '',
+            name: inputProps.name,
+            placeHolder: inputProps.placeholder || '',
+        };
+        var inputErrors = errors === null || errors === void 0 ? void 0 : errors[inputProps.name];
+        var errorProp = {
+            isNeedShowError: Boolean(inputErrors),
+            message: inputErrors ? inputErrors.message : '',
+        };
+        var registerProp = register(inputProps.name, inputProps.validations);
+        switch (inputProps.type) {
+            case 'textArea':
+                return (<BasicTextArea register={registerProp} error={errorProp} data={dataProp} isNeedBiggerArea={false}/>);
+            case 'checkbox':
+                return (<>
+            {(_a = inputProps.options) === null || _a === void 0 ? void 0 : _a.map(function (option) {
+                        var isCheckboxWithInput = option.value === 'other';
+                        var registerTextInput = isCheckboxWithInput
+                            ? register("".concat(inputProps.name, "-other-checkbox"))
+                            : undefined;
+                        return (<CheckboxInput key={option.value} register={registerProp} error={errorProp} data={dataProp} label={option.desc} value={option.value} withInput={isCheckboxWithInput} innerTextInputRef={registerTextInput}/>);
+                    })}
+          </>);
+            case 'radio':
+                return (<>
+            {(_b = inputProps.options) === null || _b === void 0 ? void 0 : _b.map(function (option) {
+                        var isRadioWithInput = option.value === 'other';
+                        var registerTextInput = isRadioWithInput
+                            ? register("".concat(inputProps.name, "-other-radio"))
+                            : undefined;
+                        return (<Controller key={option.desc} name={inputProps.name} control={control} render={function (_a) {
+                                var field = _a.field;
+                                return (<RadioInput key={option.value} radioLabel={option.desc} radioValue={option.value} handleChange={field.onChange} radioChecked={field.value === option.value} withInput={isRadioWithInput} innerTextInputRef={registerTextInput} setFocus={setFocus}/>);
+                            }}/>);
+                    })}
+          </>);
+            case 'date':
+                return (<DatePicker register={registerProp} error={errorProp} control={control} name={inputProps.name}/>);
+            default:
+                return (<Input register={registerProp} error={errorProp} data={dataProp}/>);
+        }
     };
-    var registerProp = register(inputProps.name, inputProps.validations);
-    switch (inputProps.type) {
-      case 'textArea':
-        return (
-          <BasicTextArea
-            register={registerProp}
-            error={errorProp}
-            data={dataProp}
-            isNeedBiggerArea={false}
-          />
-        );
-      case 'checkbox':
-        return (
-          <>
-            {(_a = inputProps.options) === null || _a === void 0
-              ? void 0
-              : _a.map(function (option) {
-                  var isCheckboxWithInput = option.value === 'other';
-                  var registerTextInput = isCheckboxWithInput
-                    ? register(''.concat(inputProps.name, '-other-checkbox'))
-                    : undefined;
-                  return (
-                    <CheckboxInput
-                      key={option.value}
-                      register={registerProp}
-                      error={errorProp}
-                      data={dataProp}
-                      label={option.desc}
-                      value={option.value}
-                      withInput={isCheckboxWithInput}
-                      innerTextInputRef={registerTextInput}
-                    />
-                  );
-                })}
-          </>
-        );
-      case 'radio':
-        return (
-          <>
-            {(_b = inputProps.options) === null || _b === void 0
-              ? void 0
-              : _b.map(function (option) {
-                  var isRadioWithInput = option.value === 'other';
-                  var registerTextInput = isRadioWithInput
-                    ? register(''.concat(inputProps.name, '-other-radio'))
-                    : undefined;
-                  return (
-                    <Controller
-                      key={option.desc}
-                      name={inputProps.name}
-                      control={control}
-                      render={function (_a) {
-                        var field = _a.field;
-                        return (
-                          <RadioInput
-                            key={option.value}
-                            radioLabel={option.desc}
-                            radioValue={option.value}
-                            handleChange={field.onChange}
-                            radioChecked={field.value === option.value}
-                            withInput={isRadioWithInput}
-                            innerTextInputRef={registerTextInput}
-                            setFocus={setFocus}
-                          />
-                        );
-                      }}
-                    />
-                  );
-                })}
-          </>
-        );
-      case 'date':
-        return (
-          <DatePicker
-            register={registerProp}
-            error={errorProp}
-            control={control}
-            name={inputProps.name}
-          />
-        );
-      default:
-        return (
-          <Input register={registerProp} error={errorProp} data={dataProp} />
-        );
-    }
-  };
-  return (
-    <Wrapper>
+    return (<Wrapper>
       <FormWrapper onSubmit={handleSubmit(onSubmit)}>
         <Title>{formTitle}</Title>
         <Description>{formDescription}</Description>
         {inputs.map(function (input) {
-          var _a;
-          return (
-            <StyledInputGroup key={input.name}>
-              <InputTitle>
-                {(
-                  (_a = input.validations) === null || _a === void 0
-                    ? void 0
-                    : _a.required
-                )
-                  ? '*'
-                  : ''}
-                {input.label}
-              </InputTitle>
-              {getInput(input)}
-            </StyledInputGroup>
-          );
+            var _a;
+            return (<StyledInputGroup key={input.name}>
+            <InputTitle>
+              {((_a = input.validations) === null || _a === void 0 ? void 0 : _a.required) ? '*' : ''}
+              {input.label}
+            </InputTitle>
+            {getInput(input)}
+          </StyledInputGroup>);
         })}
 
         <Flex justifyContent="space-between" style={{ marginTop: 44 }}>
-          <MainButton
-            onClick={function (e) {
-              var _a;
-              return (_a =
-                e === null || e === void 0 ? void 0 : e.currentTarget) ===
-                null || _a === void 0
-                ? void 0
-                : _a.blur();
-            }}
-            disabled={!isDirty || !isValid}
-            variant="primaryM"
-            text={submitLoading ? <Spinner variant="light" /> : 'Submit'}
-            type={'submit'}
-          />
-          <MainButton
-            onClick={function (e) {
-              var _a;
-              return (_a =
-                e === null || e === void 0 ? void 0 : e.currentTarget) ===
-                null || _a === void 0
-                ? void 0
-                : _a.blur();
-            }}
-            disabled={!isDirty}
-            variant="secondary"
-            text={submitLoading ? <Spinner variant="light" /> : 'Clear Form'}
-            type={'reset'}
-          />
+          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty || !isValid} variant="primaryM" text={submitLoading ? <Spinner variant="light"/> : 'Submit'} type={'submit'}/>
+          <MainButton onClick={function (e) { var _a; return (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.blur(); }} disabled={!isDirty} variant="secondary" text={submitLoading ? <Spinner variant="light"/> : 'Clear Form'} type={'reset'}/>
         </Flex>
       </FormWrapper>
-    </Wrapper>
-  );
+    </Wrapper>);
 };
 export default Form;
-var templateObject_1,
-  templateObject_2,
-  templateObject_3,
-  templateObject_4,
-  templateObject_5,
-  templateObject_6,
-  templateObject_7;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/forms/formsNavigation/index.jsx

@@ -1,166 +1,54 @@
+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 Link from 'next/link';
 import { useRouter } from 'next/router';
-
 import styled from 'styled-components';
-
 import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BackgroundColorLight,
-  BlackColor,
-  InactiveButtonColor,
-  TextGrayColor,
-} from '@/styles/colors';
-
+import { BackgroundColorLight, BlackColor, InactiveButtonColor, TextGrayColor, } from '@/styles/colors';
 import { FormsNavigationTabs } from '@/components/forms/types';
-
 import { Flex } from '@system';
-
 import BackIcon from '@/public/settings_page/back.svg';
 import MenuIcon from '@/public/settings_page/burger_menu.svg';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
 var NAVIGATION_TABS = [
-  { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
-  { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
-  {
-    slug: FormsNavigationTabs.registrationRequest,
-    label: 'Registration Invite Request',
-  },
-  { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
-  { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
-  { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
-  {
-    slug: FormsNavigationTabs.investor,
-    label: 'Investor Relations Inquiry Form',
-  },
+    { slug: FormsNavigationTabs.opportunity, label: 'opportunity Submission' },
+    { slug: FormsNavigationTabs.contactSupport, label: 'Contact Ludo Support' },
+    {
+        slug: FormsNavigationTabs.registrationRequest,
+        label: 'Registration Invite Request',
+    },
+    { slug: FormsNavigationTabs.report, label: 'Content Report Form' },
+    { slug: FormsNavigationTabs.feedback, label: 'User Feedback' },
+    { slug: FormsNavigationTabs.partnership, label: 'Partnership Inquiry Form' },
+    {
+        slug: FormsNavigationTabs.investor,
+        label: 'Investor Relations Inquiry Form',
+    },
 ];
-var StyledFlex = styled(Flex)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: none;\n\n  ',
-        ' {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n',
-      ],
-      [
-        '\n  display: none;\n\n  ',
-        ' {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n',
-      ]
-    )),
-  mediaQuery.tablet
-);
-var Wrapper = styled(Flex)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  flex-direction: column;\n  width: 250px;\n\n  ',
-        ' {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ',
-        ';\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n',
-      ],
-      [
-        '\n  flex-direction: column;\n  width: 250px;\n\n  ',
-        ' {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ',
-        ';\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n',
-      ]
-    )),
-  mediaQuery.tablet,
-  BackgroundColorLight
-);
-var List = styled.ul(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ',
-        ' {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ',
-        ';\n\n    &:hover {\n      background: ',
-        ';\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ',
-        ' {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ',
-        ';\n      color: ',
-        ';\n\n      ',
-        ' {\n        background: transparent;\n      }\n    }\n  }\n',
-      ],
-      [
-        '\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ',
-        ' {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ',
-        ';\n\n    &:hover {\n      background: ',
-        ';\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ',
-        ' {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ',
-        ';\n      color: ',
-        ';\n\n      ',
-        ' {\n        background: transparent;\n      }\n    }\n  }\n',
-      ]
-    )),
-  mediaQuery.tablet,
-  TextGrayColor,
-  InactiveButtonColor,
-  mediaQuery.tablet,
-  InactiveButtonColor,
-  BlackColor,
-  mediaQuery.tablet
-);
+var StyledFlex = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"], ["\n  display: none;\n\n  ", " {\n    cursor: pointer;\n    position: absolute;\n    top: 22px;\n    right: 20px;\n    z-index: 3;\n    display: flex;\n  }\n"])), mediaQuery.tablet);
+var Wrapper = styled(Flex)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"], ["\n  flex-direction: column;\n  width: 250px;\n\n  ", " {\n    left: 0;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    width: 100%;\n    height: 100%;\n    padding-top: 110px;\n    padding-left: 25px;\n    position: fixed;\n    overflow: hidden;\n    transition: transform ease-in-out 300ms;\n    background: ", ";\n    box-shadow: 20px 16px 32px -16px rgba(33, 21, 95, 0.2);\n    z-index: 1;\n\n    &.hide {\n      transform: translate(calc(-100% - 20px), 0);\n    }\n\n    &.show {\n      transform: translate(0%, 0%);\n    }\n  }\n"])), mediaQuery.tablet, BackgroundColorLight);
+var List = styled.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"], ["\n  margin: 0;\n  padding: 20px 0 0 0;\n  list-style-type: none;\n\n  ", " {\n    padding-left: 50px;\n  }\n\n  li {\n    margin: 4px 0;\n    padding-left: 5px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 50px;\n    font-size: 15px;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      background: ", ";\n      opacity: 0.9;\n    }\n\n    .link {\n      width: 100%;\n      height: 100%;\n      align-content: center;\n      color: inherit;\n    }\n\n    svg {\n      margin-right: 5px;\n\n      ", " {\n        margin-right: 15px;\n      }\n    }\n\n    &.activeTab {\n      background: ", ";\n      color: ", ";\n\n      ", " {\n        background: transparent;\n      }\n    }\n  }\n"])), mediaQuery.tablet, TextGrayColor, InactiveButtonColor, mediaQuery.tablet, InactiveButtonColor, BlackColor, mediaQuery.tablet);
 var FormsNavigation = function () {
-  var _a;
-  var _b = useState(false),
-    isOpen = _b[0],
-    setIsOpen = _b[1];
-  var router = useRouter();
-  var activeTab =
-    (_a = router === null || router === void 0 ? void 0 : router.query) ===
-      null || _a === void 0
-      ? void 0
-      : _a.formId;
-  return (
-    <>
+    var _a;
+    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var router = useRouter();
+    var activeTab = (_a = router === null || router === void 0 ? void 0 : router.query) === null || _a === void 0 ? void 0 : _a.formId;
+    return (<>
       <StyledFlex isOpen={isOpen}>
-        {isOpen ? (
-          <BackIcon
-            onClick={function () {
-              return setIsOpen(false);
-            }}
-          />
-        ) : (
-          <MenuIcon
-            onClick={function () {
-              return setIsOpen(true);
-            }}
-          />
-        )}
+        {isOpen ? (<BackIcon onClick={function () { return setIsOpen(false); }}/>) : (<MenuIcon onClick={function () { return setIsOpen(true); }}/>)}
       </StyledFlex>
-      <Wrapper className={'mobile_menu '.concat(isOpen ? 'show' : 'hide')}>
+      <Wrapper className={"mobile_menu ".concat(isOpen ? 'show' : 'hide')}>
         <List>
-          {NAVIGATION_TABS.map(function (tab) {
-            return (
-              <li
-                onClick={function () {
-                  return setIsOpen(false);
-                }}
-                key={tab.slug}
-                className={''.concat(
-                  activeTab === tab.slug ? 'activeTab' : '',
-                  ' '
-                )}
-              >
-                <Link href={'/forms/'.concat(tab.slug)} className={'link'}>
-                  <span>{tab.label}</span>
-                </Link>
-              </li>
-            );
-          })}
+          {NAVIGATION_TABS.map(function (tab) { return (<li onClick={function () { return setIsOpen(false); }} key={tab.slug} className={"".concat(activeTab === tab.slug ? 'activeTab' : '', " ")}>
+              <Link href={"/forms/".concat(tab.slug)} className={'link'}>
+                <span>{tab.label}</span>
+              </Link>
+            </li>); })}
         </List>
       </Wrapper>
-    </>
-  );
+    </>);
 };
 export default FormsNavigation;
 var templateObject_1, templateObject_2, templateObject_3;