@arquimedes.co/eureka-forms 3.0.35-test → 3.0.36

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -1,66 +1,92 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import CheckCircleOutlineRoundedIcon from '@material-ui/icons/CheckCircleOutlineRounded';
 import styles from './ConfirmationDialog.module.css';
-import { Dialog } from '@mui/material';
+import Dialog from '@material-ui/core/Dialog';
+import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import { useAppSelector } from '../../hooks';
 import { EditorState, convertFromRaw } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { useContext, useMemo } from 'react';
 import { mapDraftEntities } from '../../Utils/DraftFunctions';
 import FormContext from '../../Contexts/FormContext';
-import CloseIcon from '../../Icons/CloseIcon';
-import CheckCircleIcon from '../../Icons/CheckCircleIcon';
-function ConfirmationDialog({ onClose, confirmation, customConfirmation }) {
-    const { formStyle, ...global } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const dependencies = useAppSelector((state) => state.site.dependencies);
-    const widthStats = useAppSelector((state) => state.widthStats);
-    const editorState = useMemo(() => {
+function ConfirmationDialog(_a) {
+    var onClose = _a.onClose, confirmation = _a.confirmation, customConfirmation = _a.customConfirmation;
+    var _b = useAppSelector(function (state) { return state.global; }), formStyle = _b.formStyle, global = __rest(_b, ["formStyle"]);
+    var form = useContext(FormContext);
+    var dependencies = useAppSelector(function (state) { return state.site.dependencies; });
+    var widthStats = useAppSelector(function (state) { return state.widthStats; });
+    var editorState = useMemo(function () {
         return EditorState.createWithContent(convertFromRaw(mapDraftEntities({
-            form,
-            dependencies,
+            form: form,
+            dependencies: dependencies,
             ticket: { caseNumber: confirmation.case },
         }, global.confirmation.confirmationMessage)));
-    }, [form, dependencies, confirmation.case, global.confirmation.confirmationMessage]);
-    const hasText = editorState.getCurrentContent().hasText();
-    const renderIcon = () => {
-        return (_jsx("div", { className: styles.checkContainer, style: {
+    }, [global.confirmation, dependencies, form]);
+    var hasText = editorState.getCurrentContent().hasText();
+    var renderIcon = function () {
+        return (_jsx("div", __assign({ className: styles.checkContainer, style: {
                 color: formStyle.primaryColor,
                 paddingTop: widthStats.isMobile ? '20px' : '30px',
-            }, children: _jsx(CheckCircleIcon, { style: {
+            } }, { children: _jsx(CheckCircleOutlineRoundedIcon, { fontSize: "inherit", style: {
                     fontSize: widthStats.isMobile ? '100px' : '160px',
-                } }) }));
+                } }) })));
     };
-    const renderConfirmation = (state = editorState) => {
-        if (!hasText)
-            return null;
-        return (_jsx("div", { className: styles.messageContainer, style: {
-                fontSize: widthStats.isMobile ? '1.1rem' : '1.4rem',
-                padding: widthStats.isMobile ? '5px 0px' : '20px 0px',
-            }, children: _jsx(Editor, { editorClassName: 'Erk-Forms-Confirmation', editorState: state, readOnly: true, toolbarHidden: true }) }));
+    var renderConfirmation = function (state) {
+        if (state === void 0) { state = editorState; }
+        if (hasText) {
+            return (_jsx("div", __assign({ className: styles.messageContainer, style: {
+                    fontSize: widthStats.isMobile ? '1.1rem' : '1.4rem',
+                    padding: widthStats.isMobile ? '5px 0px' : '20px 0px',
+                } }, { children: _jsx(Editor, { editorClassName: 'Erk-Forms-Confirmation', editorState: state, readOnly: true, toolbarHidden: true }) })));
+        }
     };
-    const renderLink = () => {
-        if (!global.confirmation.showLink)
-            return null;
-        return (_jsxs(_Fragment, { children: [_jsx("div", { className: widthStats.isMobile ? styles.mobileLinkContainer : styles.linkContainer, children: "Puedes consultar el estado aqui:" }), _jsx("a", { className: styles.url, "data-testid": "ResUrl", target: "_blank", rel: "noreferrer", href: confirmation.url, style: {
-                        color: '#293241',
-                        fontSize: widthStats.isMobile ? '1rem' : '1.2rem',
-                    }, children: confirmation.url })] }));
+    var renderLink = function () {
+        if (global.confirmation.showLink) {
+            return (_jsxs(_Fragment, { children: [_jsx("div", __assign({ className: widthStats.isMobile
+                            ? styles.mobileLinkContainer
+                            : styles.linkContainer }, { children: "Puedes consultar el estado aqu\u00ED:" })), _jsx("a", __assign({ className: styles.url, "data-testid": "ResUrl", target: "_blank", href: confirmation.url, style: {
+                            color: '#293241',
+                            fontSize: widthStats.isMobile ? '1rem' : '1.2rem',
+                        } }, { children: confirmation.url }))] }));
+        }
     };
-    return (_jsx(Dialog, { PaperProps: {
+    return (_jsx(Dialog, __assign({ PaperProps: {
             style: {
                 borderRadius: '20px',
                 maxWidth: '100vw',
                 boxSizing: 'content-box',
             },
-        }, open: true, children: _jsxs("div", { className: styles.confirmationContainer, style: {
+        }, open: true }, { children: _jsxs("div", __assign({ className: styles.confirmationContainer, style: {
                 color: '#293241',
                 padding: widthStats.isMobile ? '0px 20px' : '0px 30px',
-            }, children: [_jsx("div", { className: styles.closeIcon, onClick: () => {
+            } }, { children: [_jsx("div", __assign({ className: styles.closeIcon, onClick: function () {
                         onClose();
-                    }, children: _jsx(CloseIcon, { style: { fontSize: 'inherit' } }) }), !customConfirmation && (_jsxs("div", { className: styles.container, children: [renderIcon(), renderConfirmation(), renderLink()] })), customConfirmation?.({
+                    } }, { children: _jsx(CloseRoundedIcon, { fontSize: "inherit" }) })), !customConfirmation && (_jsxs("div", __assign({ className: styles.container }, { children: [renderIcon(), renderConfirmation(), renderLink()] }))), customConfirmation === null || customConfirmation === void 0 ? void 0 : customConfirmation({
                     url: confirmation.url,
                     caseNumber: confirmation.case,
                     idTicket: confirmation.idTicket,
-                }, renderIcon, renderConfirmation, renderLink, onClose)] }) }));
+                }, renderIcon, renderConfirmation, renderLink, onClose)] })) })));
 }
 export default ConfirmationDialog;

package/dist/Form/Form.d.ts

@@ -7,11 +7,12 @@ import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import { Form } from '../@Types';
 import { FormStep } from '../@Types/FormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
+export declare const getLocale: () => any;
 export interface StepDependency {
     /** The id of the step before it was mapped */
     idOriginal: string;
     dependents: (FormStep | CBRFormStep)[];
-    value: any;
+    value: any | undefined;
     type: FormStepTypes | CBRFormStepTypes | 'ORIGINAL';
     empty?: boolean;
 }
@@ -29,7 +30,7 @@ export interface BaseFormProps extends CustomAppProps {
     isWidget: boolean;
     apiKey: string | undefined;
     customSubmit: AppProps['customSubmit'];
-    containerRef: React.RefObject<HTMLDivElement | null>;
+    containerRef: React.RefObject<HTMLDivElement>;
     scrollToTop?: () => void;
 }
 export interface FormComponentProps extends CustomAppProps {

package/dist/Form/Form.js

@@ -1,11 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useRef, useState, } from 'react';
 import Navbar from '../Shared/Navbar/Navbar';
 import styles from './Form.module.css';
 import InternalFormStyle from '../constants/InternalFormStyle';
+import enLocale from 'date-fns/locale/en-US';
+import esLocale from 'date-fns/locale/es';
 import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
 import StepperForm from './FormTypes/StepperForm/StepperForm';
-import { FormStyleTypes, FormTypes } from '../constants/FormStepTypes';
+import { FormStyleTypes, FormTypes, } from '../constants/FormStepTypes';
 import { calcValue } from './FormFunctions';
 import { FormProvider, useForm } from 'react-hook-form';
 import widgetInstance from '../Utils/AxiosWidget';
@@ -14,118 +63,159 @@ import ReCAPTCHA from 'react-google-recaptcha';
 import ConfirmationDialog from './ConfirmationDialog/ConfirmationDialog';
 import MaterialProviders from '../Utils/MaterialProviders';
 import { useWidthStats } from './FormHooks';
+import { IdFormContext } from '../App/App';
 import { useAppDispatch, useAppSelector } from '../hooks';
-import FormContext, { IdFormContext } from '../Contexts/FormContext';
+import FormContext from '../Contexts/FormContext';
 import { getAppState } from '../Utils/store';
 import { focusStep } from '../States/SiteSlice';
-function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, scrollToTop, customSteps, containerRef, customSubmit, customSubmitBtns, customConfirmation, }) {
-    const { idOrganization, internal, postview } = useAppSelector((state) => state.global);
-    const formMethods = useForm({
+import LoginPage from '../Login/LoginPage';
+var localeMap = {
+    en: enLocale,
+    'en-US': enLocale,
+    es: esLocale,
+};
+export var getLocale = function () {
+    var _a;
+    return ((_a = localeMap[navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.userLanguage ||
+            navigator.language ||
+            navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
+};
+function FormComponent(_a) {
+    var _this = this;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var form = _a.form, apiKey = _a.apiKey, reload = _a.reload, isWidget = _a.isWidget, branding = _a.branding, setSubmit = _a.setSubmit, scrollToTop = _a.scrollToTop, customSteps = _a.customSteps, containerRef = _a.containerRef, customSubmit = _a.customSubmit, customSubmitBtns = _a.customSubmitBtns, customConfirmation = _a.customConfirmation;
+    var _l = useAppSelector(function (state) { return state.global; }), idOrganization = _l.idOrganization, internal = _l.internal, postview = _l.postview, user = _l.user;
+    var formMethods = useForm({
         mode: 'onTouched',
         shouldFocusError: true,
     });
-    const idForm = useContext(IdFormContext);
-    const recaptchaRef = useRef(null);
-    const dispatch = useAppDispatch();
-    const [showConfirmation, setShowConfirmation] = useState();
-    const idFocusStep = useAppSelector((state) => state.site.focusStep);
-    useEffect(() => {
+    var idForm = useContext(IdFormContext);
+    var recaptchaRef = useRef();
+    var dispatch = useAppDispatch();
+    var _m = useState(), showConfirmation = _m[0], setShowConfirmation = _m[1];
+    var idFocusStep = useAppSelector(function (state) { return state.site.focusStep; });
+    useEffect(function () {
         if (idFocusStep) {
             formMethods.setFocus(idFocusStep);
             dispatch(focusStep(undefined));
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
-    const onSubmit = useCallback(async (values) => {
-        let token = null;
-        if (form.hasCaptcha && !internal && !customSubmit) {
-            token = recaptchaRef.current?.getValue();
-            token ?? (token = await recaptchaRef?.current.executeAsync());
-        }
-        const ApiKey = internal ? form.apiKey : apiKey;
-        if (!ApiKey && !customSubmit && !customSubmitBtns)
-            return;
-        try {
-            const state = await dispatch(getAppState({ idForm })).unwrap();
-            const newValues = {
-                ...state.site.values.global,
-            };
-            const deleteIds = [];
-            for (const idStep of Object.keys(values)) {
-                newValues[idStep] = calcValue(idStep, form.steps, values, customSteps, deleteIds);
+    var onSubmit = useCallback(function (values) { return __awaiter(_this, void 0, void 0, function () {
+        var token, ApiKey, state, newValues, deleteIds, _i, _a, idStep, _b, deleteIds_1, id, params, url, axios, resp, error_1;
+        var _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    token = null;
+                    if (!(form.hasCaptcha && !internal && !customSubmit)) return [3 /*break*/, 2];
+                    token = (_c = recaptchaRef.current) === null || _c === void 0 ? void 0 : _c.getValue();
+                    if (!!token) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (recaptchaRef === null || recaptchaRef === void 0 ? void 0 : recaptchaRef.current.executeAsync())];
+                case 1:
+                    token = _d.sent();
+                    _d.label = 2;
+                case 2:
+                    ApiKey = internal ? form.apiKey : apiKey;
+                    if (!ApiKey && !customSubmit && !customSubmitBtns)
+                        return [2 /*return*/];
+                    _d.label = 3;
+                case 3:
+                    _d.trys.push([3, 8, , 9]);
+                    return [4 /*yield*/, dispatch(getAppState({ idForm: idForm })).unwrap()];
+                case 4:
+                    state = _d.sent();
+                    newValues = __assign({}, state.site.values.global);
+                    deleteIds = [];
+                    for (_i = 0, _a = Object.keys(values); _i < _a.length; _i++) {
+                        idStep = _a[_i];
+                        newValues[idStep] = calcValue(idStep, form.steps, values, customSteps, deleteIds);
+                    }
+                    for (_b = 0, deleteIds_1 = deleteIds; _b < deleteIds_1.length; _b++) {
+                        id = deleteIds_1[_b];
+                        delete newValues[id];
+                    }
+                    if (!customSubmit) return [3 /*break*/, 6];
+                    return [4 /*yield*/, customSubmit(newValues, reload)];
+                case 5: return [2 /*return*/, _d.sent()];
+                case 6:
+                    if (customSubmitBtns)
+                        return [2 /*return*/, newValues];
+                    params = new URLSearchParams();
+                    if (idOrganization || internal)
+                        params.set('idOrganization', idOrganization !== null && idOrganization !== void 0 ? idOrganization : '');
+                    if (token)
+                        params.set('token', token);
+                    url = "/ticket/".concat(ApiKey);
+                    if (params.toString()) {
+                        url += "?".concat(params.toString());
+                    }
+                    axios = idOrganization || internal ? widgetInstance : axiosInstance;
+                    return [4 /*yield*/, axios.post(url, newValues)];
+                case 7:
+                    resp = _d.sent();
+                    setShowConfirmation(resp === null || resp === void 0 ? void 0 : resp.data);
+                    return [3 /*break*/, 9];
+                case 8:
+                    error_1 = _d.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 9];
+                case 9: return [2 /*return*/];
             }
-            for (const id of deleteIds) {
-                delete newValues[id];
-            }
-            if (customSubmit)
-                return await customSubmit(newValues, reload);
-            if (customSubmitBtns)
-                return newValues;
-            const params = new URLSearchParams();
-            if (idOrganization || internal)
-                params.set('idOrganization', idOrganization ?? '');
-            if (token)
-                params.set('token', token);
-            let url = `/ticket/${ApiKey}`;
-            if (params.toString()) {
-                url += `?${params.toString()}`;
-            }
-            const axios = idOrganization || internal ? widgetInstance : axiosInstance;
-            const resp = await axios.post(url, newValues);
-            setShowConfirmation(resp?.data);
-        }
-        catch (error) {
-            console.error(error);
-        }
-    }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [customSteps, internal, customSubmit, idOrganization, idForm]);
+        });
+    }); }, [customSteps, internal, customSubmit, idOrganization, idForm]);
     useWidthStats(containerRef, form, postview, internal);
-    const isResponsive = useAppSelector((state) => state.widthStats.isResponsive);
-    const renderForm = () => {
-        return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: () => {
+    var isResponsive = useAppSelector(function (state) { return state.widthStats.isResponsive; });
+    var renderForm = function () {
+        return (_jsxs(React.Fragment, { children: [showConfirmation !== undefined && (_jsx(ConfirmationDialog, { confirmation: showConfirmation, onClose: function () {
                         reload();
                         setShowConfirmation(undefined);
-                    }, customConfirmation: customConfirmation })), form.hasCaptcha && !internal && !postview && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, { ...formMethods, children: _jsx(FormContext.Provider, { value: form, children: _jsx(FormTypeComponent, { onSubmit: onSubmit, setSubmit: setSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) }) })] }));
+                    }, customConfirmation: customConfirmation })), form.hasCaptcha && !internal && !postview && (_jsx(ReCAPTCHA, { ref: recaptchaRef, sitekey: "6LcL22kkAAAAAEotDeAFbRATob-u5vbibbCyWL2p", size: 'invisible', badge: 'bottomright' })), _jsx(FormProvider, __assign({}, formMethods, { children: _jsx(FormContext.Provider, __assign({ value: form }, { children: _jsx(FormTypeComponent, { onSubmit: onSubmit, setSubmit: setSubmit, scrollToTop: scrollToTop, customSubmitBtns: customSubmitBtns }) })) }))] }));
     };
     if (!idOrganization)
         return _jsx(_Fragment, {});
     //If currently displaying internal or form is standalone
     if (postview || internal || !form.isStandAlone) {
-        return (_jsx("div", { style: {
+        return (_jsx("div", __assign({ style: {
                 backgroundColor: internal
                     ? 'transparent'
-                    : (form.style?.backgroundColor ?? InternalFormStyle.backgroundColor),
+                    : (_c = (_b = form.style) === null || _b === void 0 ? void 0 : _b.backgroundColor) !== null && _c !== void 0 ? _c : InternalFormStyle.backgroundColor,
                 minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
-            }, children: _jsx("div", { className: styles.widgetFormContainer, ref: containerRef, children: renderForm() }) }));
+            } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: renderForm() })) })));
     }
     else {
+        if (user === null && form.hasLogin) {
+            return (_jsx("div", __assign({ className: styles.loginContainer }, { children: _jsx(LoginPage, { form: form }) })));
+        }
         //Standalone cant have widget
-        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: branding?.images.logoUrl, color: branding?.colors?.navbarColor ?? branding?.colors?.primaryColor }), _jsx("div", { className: styles.standAloneFormContainer, ref: containerRef, style: {
-                        background: form.style?.standAloneBackgroundColor ?? '#ffffff',
-                    }, children: _jsx("div", { className: isResponsive ? styles.fullScreenStandAloneForm : styles.standAloneFormCard, style: {
-                            backgroundColor: form.style?.backgroundColor ?? InternalFormStyle.backgroundColor,
-                        }, children: renderForm() }) })] }));
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { apiKey: form.apiKey, logo: branding === null || branding === void 0 ? void 0 : branding.images.logoUrl, color: (_e = (_d = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _d === void 0 ? void 0 : _d.navbarColor) !== null && _e !== void 0 ? _e : (_f = branding === null || branding === void 0 ? void 0 : branding.colors) === null || _f === void 0 ? void 0 : _f.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_h = (_g = form.style) === null || _g === void 0 ? void 0 : _g.standAloneBackgroundColor) !== null && _h !== void 0 ? _h : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: isResponsive
+                            ? styles.fullScreenStandAloneForm
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: (_k = (_j = form.style) === null || _j === void 0 ? void 0 : _j.backgroundColor) !== null && _k !== void 0 ? _k : InternalFormStyle.backgroundColor,
+                        } }, { children: renderForm() })) }))] }));
     }
 }
 export default FormComponent;
 function FormTypeComponent(props) {
-    const { formStyle } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
-    const renderTypes = () => {
+    var formStyle = useAppSelector(function (state) { return state.global; }).formStyle;
+    var form = useContext(FormContext);
+    var renderTypes = function () {
         switch (form.type) {
             case FormTypes.STEPPER: {
-                return _jsx(StepperForm, { ...props });
+                return _jsx(StepperForm, __assign({}, props));
             }
             case FormTypes.COLUMN:
             default: {
-                return _jsx(ColumnForm, { ...props });
+                return _jsx(ColumnForm, __assign({}, props));
             }
         }
     };
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
-            return _jsx(MaterialProviders, { formStyle: formStyle, children: renderTypes() });
+            return _jsx(MaterialProviders, { children: renderTypes() });
         default:
             return renderTypes();
     }

package/dist/Form/Form.module.css

@@ -14,6 +14,15 @@
     overflow: hidden;
 }
 
+.loginContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: 100vh;
+    display: flex;
+    overflow-x: hidden;
+}
+
 .standAloneFormCard {
     -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
     -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);