@sok-brand-sites/common-frontend-components 0.0.1-security → 1.643.1

package/dist/components/FormBuilder/FormBuilder.js

@@ -0,0 +1,364 @@
+import { __assign, __read, __awaiter, __generator } from '../../_virtual/_tslib.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, useEffect } from 'react';
+import { ButtonShape } from '@sok/design-system';
+import { getThemeComponents, scrollIntoViewIfNeeded } from '../utils.js';
+import FormBuilderInput from './FormBuilderInput.js';
+import FormBuilderTextAreaInput from './FormBuilderTextAreaInput.js';
+import FormBuilderSelect from './FormBuilderSelect.js';
+import FormBuilderParagraph from './FormBuilderParagraph.js';
+import FormBuilderCheckboxes from './FormBuilderCheckboxes.js';
+import { GoogleReCaptchaProvider, useGoogleReCaptcha } from 'react-google-recaptcha-v3';
+import { MainContainer, SubmitResultContainer, SectionTitle, StyledButton } from './FormBuilder.styles.js';
+import { Formik, Form } from 'formik';
+import { string, array, object } from 'yup';
+/*
+  TODO:
+  Maybe rename better FormBuilder / FormBuilderMain
+
+*/
+// let submitSchema:SectionsTypes
+
+var createValidationSchema = function createValidationSchema(_a) {
+  var sections = _a.sections,
+      initialValues = _a.initialValues; // Have to do a deep copy instead of shallow copy with Object.assign / spread operator
+  // to not mutate initialValues on line 42
+
+  var submitSchema = JSON.parse(JSON.stringify(initialValues));
+  var validationFunc = {
+    input: string(),
+    textarea: string(),
+    select: string(),
+    checkbox: array()
+  };
+  sections.forEach(function (section, sectionId) {
+    if (section.formFields) {
+      delete submitSchema[sectionId].sendToSecondaryEmail;
+      section.formFields.forEach(function (field) {
+        var _a, _b;
+
+        if (field.type !== 'paragraph') {
+          var validationObj = void 0;
+
+          if (field.type !== 'checkbox') {
+            validationObj = field.required ? validationFunc[field.type].required('Tämä kenttä pitää täyttää') : validationFunc[field.type];
+          } else {
+            validationObj = field.required ? validationFunc[field.type].min(1, 'valitse vähintään yksi vaihtoehto') : validationFunc[field.type];
+          }
+
+          submitSchema = __assign(__assign({}, submitSchema), (_a = {}, _a[sectionId] = __assign(__assign({}, submitSchema[sectionId]), {
+            fields: __assign(__assign({}, submitSchema[sectionId].fields), (_b = {}, _b[field.label] = validationObj, _b))
+          }), _a));
+        }
+      });
+    }
+  });
+  Object.keys(submitSchema).forEach(function (key) {
+    return submitSchema[key].fields = object().shape(submitSchema[key].fields);
+  });
+  Object.keys(submitSchema).forEach(function (key) {
+    return submitSchema[key] = object().shape(submitSchema[key]);
+  });
+  return object().shape(submitSchema);
+};
+
+var FormBuilderMain = function FormBuilderMain(_a) {
+  var sections = _a.sections,
+      formTitle = _a.formTitle,
+      endpoint = _a.endpoint,
+      successMessage = _a.successMessage,
+      errorMessage = _a.errorMessage,
+      anchor = _a.anchor;
+
+  var _b = __read(useState(false), 2),
+      isSubmitSuccess = _b[0],
+      setIsSubmitSuccess = _b[1];
+
+  var _c = __read(useState(false), 2),
+      showSubmitResult = _c[0],
+      setShowSubmitResult = _c[1];
+
+  var _d = __read(useState(false), 2),
+      disableSubmitButton = _d[0],
+      setDisableSubmitButton = _d[1];
+
+  var executeRecaptcha = useGoogleReCaptcha().executeRecaptcha;
+  var ref = useRef();
+  useEffect(function () {
+    // set up the mutation observer
+    var grecaptchaObserver = new MutationObserver(function (mutations, observer) {
+      var elements = document.getElementsByClassName('grecaptcha-badge');
+
+      if (elements.length > 0) {
+        ref.current.appendChild(elements[0]);
+        observer.disconnect(); // stop observing
+
+        return;
+      }
+    }); // start observing
+
+    grecaptchaObserver.observe(document, {
+      childList: true,
+      subtree: true
+    });
+  }, []); // Initial fields and empty values
+
+  var initialValues = sections.reduce(function (obj, section, i) {
+    if (section.formFields) {
+      obj[i] = section.formFields.reduce(function (obj, field) {
+        // Skip paragraphs
+        if (field.type === 'paragraph') return obj;
+
+        if (field.type === 'checkbox') {
+          obj['fields'][field.label || ''] = [];
+        } else {
+          obj['fields'][field.label || ''] = '';
+        }
+
+        return obj;
+      }, {
+        fields: {},
+        sendToSecondaryEmail: section.sendToSecondaryEmail || false
+      });
+      return obj;
+    }
+
+    return {};
+  }, {}); // create validation scheme
+
+  var submitScheme = createValidationSchema({
+    sections: sections,
+    initialValues: initialValues
+  });
+
+  var submit = function submit(values) {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var token, options, response;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            // Do not submit empty form
+            if (JSON.stringify(initialValues) === JSON.stringify(values)) {
+              return [2
+              /*return*/
+              ];
+            }
+
+            setDisableSubmitButton(true);
+            _a.label = 1;
+
+          case 1:
+            _a.trys.push([1, 5,, 6]);
+
+            token = '';
+            if (!executeRecaptcha) return [3
+            /*break*/
+            , 3];
+            return [4
+            /*yield*/
+            , executeRecaptcha()];
+
+          case 2:
+            token = _a.sent();
+            _a.label = 3;
+
+          case 3:
+            options = {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json'
+              },
+              body: JSON.stringify({
+                token: token,
+                form: values,
+                title: formTitle,
+                time: new Date().toLocaleString('fi-FI')
+              })
+            };
+            return [4
+            /*yield*/
+            , fetch("https://" + endpoint, options)];
+
+          case 4:
+            response = _a.sent();
+
+            if ((response === null || response === void 0 ? void 0 : response.status) === 200) {
+              setIsSubmitSuccess(true);
+              setShowSubmitResult(true);
+              scrollIntoViewIfNeeded(ref.current);
+              return [2
+              /*return*/
+              , true];
+            } // Failure returns no response data due to cors error currently
+            // so this code is currently never reached. Will go to catch block.
+            // To-do: fix cors issues when error occurs in the endpoint.
+
+
+            setIsSubmitSuccess(false);
+            setShowSubmitResult(true);
+            setDisableSubmitButton(false);
+            scrollIntoViewIfNeeded(ref.current);
+            return [2
+            /*return*/
+            , false];
+
+          case 5:
+            _a.sent();
+
+            setIsSubmitSuccess(false);
+            setShowSubmitResult(true);
+            setDisableSubmitButton(false);
+            scrollIntoViewIfNeeded(ref.current);
+            return [2
+            /*return*/
+            , false];
+
+          case 6:
+            return [2
+            /*return*/
+            ];
+        }
+      });
+    });
+  };
+
+  return jsxs(MainContainer, __assign({
+    ref: ref,
+    id: anchor,
+    reCaptchaPosition: 500
+  }, {
+    children: [showSubmitResult && jsxs(SubmitResultContainer, __assign({
+      isSubmitSuccess: isSubmitSuccess
+    }, {
+      children: [isSubmitSuccess && jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: successMessage
+        }
+      }, void 0), !isSubmitSuccess && jsx("div", {
+        dangerouslySetInnerHTML: {
+          __html: errorMessage
+        }
+      }, void 0)]
+    }), void 0), jsx(Formik, __assign({
+      initialValues: initialValues,
+      validationSchema: submitScheme,
+      onSubmit: function onSubmit(values, actions) {
+        submit(values).then(function (isSuccess) {
+          if (isSuccess) {
+            actions.resetForm();
+          }
+        });
+      }
+    }, {
+      children: function children(_a) {
+        var errors = _a.errors,
+            handleChange = _a.handleChange,
+            isValid = _a.isValid,
+            touched = _a.touched;
+        var isValidForSubmit = false;
+
+        if (Object.keys(touched).length === 0 && Object.keys(errors).length === 0) {
+          isValidForSubmit = false;
+        }
+
+        if (Object.keys(touched).length > 0 && Object.keys(errors).length === 0) {
+          isValidForSubmit = isValid;
+        }
+
+        return jsxs(Form, {
+          children: [sections.map(function (section, sectionId) {
+            return jsxs(React.Fragment, {
+              children: [jsx(SectionTitle, {
+                children: section.title
+              }, void 0), section.formFields && section.formFields.map(function (field, i) {
+                switch (field.type) {
+                  case 'paragraph':
+                    return jsx(FormBuilderParagraph, {
+                      text: field.text
+                    }, i);
+
+                  case 'input':
+                    return jsx(FormBuilderInput, {
+                      label: field.label,
+                      name: sectionId + ".fields." + field.label,
+                      required: field.required,
+                      errors: errors,
+                      touched: touched,
+                      onChange: handleChange
+                    }, i);
+
+                  case 'textarea':
+                    return jsx(FormBuilderTextAreaInput, {
+                      label: field.label,
+                      name: sectionId + ".fields." + field.label,
+                      required: field.required,
+                      touched: touched,
+                      errors: errors
+                    }, i);
+
+                  case 'select':
+                    return jsx(FormBuilderSelect, {
+                      label: field.label,
+                      options: field.options,
+                      placeholder: 'Valitse',
+                      name: sectionId + ".fields." + field.label,
+                      required: field.required,
+                      touched: touched,
+                      errors: errors
+                    }, i);
+
+                  case 'checkbox':
+                    return jsx(FormBuilderCheckboxes, {
+                      label: field.label,
+                      options: field.options,
+                      name: sectionId + ".fields." + field.label,
+                      required: field.required,
+                      touched: touched,
+                      errors: errors
+                    }, i);
+
+                  default:
+                    return null;
+                }
+              })]
+            }, sectionId);
+          }), jsx(StyledButton, {
+            htmlType: "submit",
+            text: 'Lähetä',
+            shape: ButtonShape.ROUND,
+            disabled: disableSubmitButton || !isValidForSubmit
+          }, void 0)]
+        }, void 0);
+      }
+    }), void 0)]
+  }), void 0);
+};
+
+var FormBuilder = function FormBuilder(_a) {
+  var sections = _a.sections,
+      formTitle = _a.formTitle,
+      endpoint = _a.endpoint,
+      successMessage = _a.successMessage,
+      errorMessage = _a.errorMessage,
+      anchor = _a.anchor;
+  return jsx(GoogleReCaptchaProvider, __assign({
+    useRecaptchaNet: true,
+    reCaptchaKey: getThemeComponents().formBuilder.reCaptchaSiteKey,
+    scriptProps: {
+      async: true,
+      defer: true,
+      appendTo: 'body'
+    }
+  }, {
+    children: jsx(FormBuilderMain, {
+      formTitle: formTitle,
+      endpoint: endpoint,
+      successMessage: successMessage,
+      errorMessage: errorMessage,
+      sections: sections,
+      anchor: anchor
+    }, void 0)
+  }), void 0);
+};
+
+export { FormBuilder, FormBuilder as default };

package/dist/components/FormBuilder/FormBuilder.styles.js

@@ -0,0 +1,224 @@
+import { __makeTemplateObject } from '../../_virtual/_tslib.js';
+import styled from 'styled-components';
+import { Input, TextAreaInput, Select, Button } from '@sok/design-system';
+import media from '../../styles/media.js';
+var MainContainer = styled.div.withConfig({
+  displayName: "FormBuilderstyles__MainContainer",
+  componentId: "sc-1k0y8i1-0"
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  label {\n    margin-right: ", ";\n  }\n\n  .grecaptcha-badge {\n    position: unset !important;\n    align-self: flex-end;\n    width: 70px !important;\n    margin-top: -60px;\n    transition: all 0.3s ease !important;\n    :hover {\n      width: 256px !important;\n    }\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  label {\n    margin-right: ", ";\n  }\n\n  .grecaptcha-badge {\n    position: unset !important;\n    align-self: flex-end;\n    width: 70px !important;\n    margin-top: -60px;\n    transition: all 0.3s ease !important;\n    :hover {\n      width: 256px !important;\n    }\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var SubmitResultContainer = styled.div.withConfig({
+  displayName: "FormBuilderstyles__SubmitResultContainer",
+  componentId: "sc-1k0y8i1-1"
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  p,\n  li,\n  ul {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"], ["\n  margin-bottom: ", ";\n  padding: ", ";\n\n  background-color: ", ";\n\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n\n  p,\n  li,\n  ul {\n    color: ", ";\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return "" + theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme;
+  return "" + theme.spacings.spacing32;
+}, function (_a) {
+  var theme = _a.theme,
+      isSubmitSuccess = _a.isSubmitSuccess;
+  return isSubmitSuccess ? theme.components.formBuilder.submitResult.color.success.background : theme.components.formBuilder.submitResult.color.error.background;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme,
+      isSubmitSuccess = _a.isSubmitSuccess;
+  return isSubmitSuccess ? theme.components.formBuilder.submitResult.color.success.text : theme.components.formBuilder.submitResult.color.error.text;
+}, media.tablet(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.submitResult.fontSizes.desktop.lineHeight;
+}));
+var SectionTitle = styled.div.withConfig({
+  displayName: "FormBuilderstyles__SectionTitle",
+  componentId: "sc-1k0y8i1-2"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  margin-bottom: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  font-family: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  color: ", ";\n  text-transform: ", ";\n  margin-bottom: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontFamily;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.mobile.lineHeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.textTransform;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+}, media.tablet(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.tablet.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.tablet.lineHeight;
+}), media.desktop(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "], ["\n    font-weight: ", ";\n    font-size: ", ";\n    line-height: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.desktop.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.title.fontSizes.desktop.lineHeight;
+}));
+var SectionContainer = styled.div.withConfig({
+  displayName: "FormBuilderstyles__SectionContainer",
+  componentId: "sc-1k0y8i1-3"
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing32;
+});
+var ParagraphContainer = styled.div.withConfig({
+  displayName: "FormBuilderstyles__ParagraphContainer",
+  componentId: "sc-1k0y8i1-4"
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  p,\n  ol,\n  ul {\n    margin-top: 0;\n    margin-bottom: ", ";\n  }\n\n  *:last-child {\n    margin-bottom: 0;\n  }\n"], ["\n  p,\n  ol,\n  ul {\n    margin-top: 0;\n    margin-bottom: ", ";\n  }\n\n  *:last-child {\n    margin-bottom: 0;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var Label = styled.label.withConfig({
+  displayName: "FormBuilderstyles__Label",
+  componentId: "sc-1k0y8i1-5"
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-weight: ", ";\n  margin-bottom: ", ";\n"], ["\n  font-weight: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.label.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var LabelError = styled.label.withConfig({
+  displayName: "FormBuilderstyles__LabelError",
+  componentId: "sc-1k0y8i1-6"
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  margin: 0;\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  height: ", ";\n  margin-top: ", ";\n\n  ", "\n\n  ", "\n"], ["\n  margin: 0;\n  font-weight: ", ";\n  font-size: ", ";\n  color: ", ";\n  height: ", ";\n  margin-top: ", ";\n\n  ", "\n\n  ", "\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.color;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, media.tablet(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-size: ", ";\n  "], ["\n    font-size: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.fontSizes.tablet.fontSize;
+}), media.desktop(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    font-size: ", ";\n  "], ["\n    font-size: ", ";\n  "])), function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.labelError.fontSizes.desktop.fontSize;
+}));
+var InputContainer = styled(Input).withConfig({
+  displayName: "FormBuilderstyles__InputContainer",
+  componentId: "sc-1k0y8i1-7"
+})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  height: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing48;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.input.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.input.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.input.fontSizes.mobile.lineHeight;
+});
+var TextAreaInputContainer = styled(TextAreaInput).withConfig({
+  displayName: "FormBuilderstyles__TextAreaInputContainer",
+  componentId: "sc-1k0y8i1-8"
+})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  height: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"], ["\n  height: ", ";\n  font-weight: ", ";\n  font-size: ", ";\n  line-height: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing48;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.textAreaInput.fontWeight;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.textAreaInput.fontSizes.mobile.fontSize;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.components.formBuilder.section.textAreaInput.fontSizes.mobile.lineHeight;
+});
+var CheckItemContainer = styled.div.withConfig({
+  displayName: "FormBuilderstyles__CheckItemContainer",
+  componentId: "sc-1k0y8i1-9"
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: ", ";\n  margin-top: ", ";\n\n  .ant-checkbox-wrapper {\n    margin: 0;\n    word-break: break-all;\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  gap: ", ";\n  margin-top: ", ";\n\n  .ant-checkbox-wrapper {\n    margin: 0;\n    word-break: break-all;\n  }\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing8;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var SelectContainer = styled(Select).withConfig({
+  displayName: "FormBuilderstyles__SelectContainer",
+  componentId: "sc-1k0y8i1-10"
+})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  margin-top: ", ";\n  width: fit-content;\n  min-width: 280px;\n"], ["\n  margin-top: ", ";\n  width: fit-content;\n  min-width: 280px;\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+});
+var StyledButton = styled(Button).withConfig({
+  displayName: "FormBuilderstyles__StyledButton",
+  componentId: "sc-1k0y8i1-11"
+})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  display: block;\n  margin-top: ", ";\n  width: ", ";\n"], ["\n  display: block;\n  margin-top: ", ";\n  width: ", ";\n"])), function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing16;
+}, function (_a) {
+  var theme = _a.theme;
+  return theme.spacings.spacing112;
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+export { CheckItemContainer, InputContainer, Label, LabelError, MainContainer, ParagraphContainer, SectionContainer, SectionTitle, SelectContainer, StyledButton, SubmitResultContainer, TextAreaInputContainer };

package/dist/components/FormBuilder/FormBuilderCheckboxes.js

@@ -0,0 +1,39 @@
+import { __rest, __read, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SectionContainer, Label, CheckItemContainer, LabelError } from './FormBuilder.styles.js';
+import { Checkbox, CheckboxSize } from '@sok/design-system';
+import { useField } from 'formik';
+import { getErrorMsg } from './utiles.js';
+
+var FormBuilderCheckboxes = function FormBuilderCheckboxes(_a) {
+  var label = _a.label,
+      props = __rest(_a, ["label"]);
+
+  var _b = __read(useField(props), 1),
+      field = _b[0];
+
+  var _c = getErrorMsg(field.name, props.errors, props.touched),
+      errorMsg = _c.errorMsg,
+      isTouched = _c.isTouched;
+
+  return jsxs(SectionContainer, {
+    children: [jsxs(Label, {
+      children: [label, props.required ? '*' : '']
+    }, void 0), jsx(CheckItemContainer, {
+      children: props.options && props.options.map(function (option, i) {
+        return jsx(Checkbox, __assign({
+          size: CheckboxSize.SMALL
+        }, field, {
+          value: option.value,
+          checked: field.value.includes(option.value)
+        }, {
+          children: option.value
+        }), i);
+      })
+    }, void 0), jsx(LabelError, {
+      children: isTouched ? errorMsg : ''
+    }, void 0)]
+  }, void 0);
+};
+
+export { FormBuilderCheckboxes as default };

package/dist/components/FormBuilder/FormBuilderInput.js

@@ -0,0 +1,29 @@
+import { __rest, __read, __assign } from '../../_virtual/_tslib.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SectionContainer, Label, InputContainer, LabelError } from './FormBuilder.styles.js';
+import { useField } from 'formik';
+import { getErrorMsg } from './utiles.js';
+
+var FormBuilderInput = function FormBuilderInput(_a) {
+  var label = _a.label,
+      props = __rest(_a, ["label"]);
+
+  var _b = __read(useField(props), 1),
+      field = _b[0];
+
+  var _c = getErrorMsg(field.name, props.errors, props.touched),
+      errorMsg = _c.errorMsg,
+      isTouched = _c.isTouched;
+
+  return jsxs(SectionContainer, {
+    children: [jsxs(Label, __assign({
+      htmlFor: props.id || props.name
+    }, {
+      children: [label, props.required ? '*' : '']
+    }), void 0), jsx(InputContainer, __assign({}, field), void 0), jsx(LabelError, {
+      children: isTouched ? errorMsg : ''
+    }, void 0)]
+  }, void 0);
+};
+
+export { FormBuilderInput as default };

package/dist/components/FormBuilder/FormBuilderParagraph.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import { SectionContainer, ParagraphContainer } from './FormBuilder.styles.js';
+
+var FormBuilderParagraph = function FormBuilderParagraph(_a) {
+  var text = _a.text;
+  return jsx(SectionContainer, {
+    children: jsx(ParagraphContainer, {
+      dangerouslySetInnerHTML: {
+        __html: text || ''
+      }
+    }, void 0)
+  }, void 0);
+};
+
+export { FormBuilderParagraph as default };