@maif/react-forms 1.0.57 → 1.0.60

package/lib/esm/index.js

@@ -1,4 +1,3 @@
-import 'fs';
 import * as yup from 'yup';
 import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -547,28 +546,28 @@ var BooleanInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames = {}, _defineProperty$1(_classNames, 'cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'cursor_not_allowed', readOnly), _classNames))
+    className: classNames((_classNames = {}, _defineProperty$1(_classNames, 'mrf-cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'mrf-cursor_not_allowed', readOnly), _classNames))
   }, !!value && /*#__PURE__*/React.createElement("div", {
-    className: classNames('content_switch_button_on'),
+    className: classNames('mrf-content_switch_button_on'),
     onClick: function onClick() {
       return handleClick(false);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('switch_button_on')
+    className: classNames('mrf-switch_button_on')
   })), !value && value !== null && /*#__PURE__*/React.createElement("div", {
-    className: classNames('content_switch_button_off'),
+    className: classNames('mrf-content_switch_button_off'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('switch_button_off')
+    className: classNames('mrf-switch_button_off')
   })), value === null && /*#__PURE__*/React.createElement("div", {
-    className: classNames('content_switch_button_null'),
+    className: classNames('mrf-content_switch_button_null'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames('switch_button_null')
+    className: classNames('mrf-switch_button_null')
   })));
 });
 
@@ -586,22 +585,22 @@ var Collapse = function Collapse(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("hr", {
-    className: classNames(_defineProperty$1({}, 'collapse_error', props.errored))
+    className: classNames(_defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }), /*#__PURE__*/React.createElement("div", {
-    className: "cursor_pointer flex jc_between",
+    className: "mrf-cursor_pointer mrf-flex mrf-jc_between",
     onClick: toggle
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames('collapse_label', _defineProperty$1({}, 'collapse_error', props.errored))
+    className: classNames('mrf-collapse_label', _defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }, props.label), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames('btn', 'btn_sm', 'ml_5', _defineProperty$1({}, 'collapse_error', props.errored)),
+    className: classNames('mrf-btn', 'mrf-btn_sm', 'mrf-ml_5', _defineProperty$1({}, 'mrf-collapse_error', props.errored)),
     onClick: toggle
   }, !!collapsed && /*#__PURE__*/React.createElement(Eye, {
     size: 16
   }), !collapsed && /*#__PURE__*/React.createElement(EyeOff, {
     size: 16
   }))), /*#__PURE__*/React.createElement("div", {
-    className: classNames('ml_10', (_classNames4 = {}, _defineProperty$1(_classNames4, 'display__none', !!collapsed), _defineProperty$1(_classNames4, 'flex', !!props.inline), _defineProperty$1(_classNames4, 'collapse__inline', !!props.inline), _classNames4))
+    className: classNames('mrf-ml_10', (_classNames4 = {}, _defineProperty$1(_classNames4, 'mrf-display__none', !!collapsed), _defineProperty$1(_classNames4, 'mrf-flex', !!props.inline), _defineProperty$1(_classNames4, 'mrf-collapse__inline', !!props.inline), _classNames4))
   }, props.children), props.lineEnd && /*#__PURE__*/React.createElement("hr", null));
 };
 
@@ -853,7 +852,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function (props, _) {
         key: idx,
         type: "button",
         disabled: props.disabled,
-        className: classNames(props.className, 'btn btn_grey ml_5', {
+        className: classNames(props.className, 'mrf-btn mrf-btn_grey mrf-ml_5', {
           active: active
         }),
         onClick: function onClick() {
@@ -1005,7 +1004,7 @@ var ObjectInput = function ObjectInput(props) {
   }, Object.keys(internalState || {}).length === 0 && /*#__PURE__*/React.createElement("button", {
     disabled: props.disabled,
     type: "button",
-    className: "flex btn btn_blue btn_sm",
+    className: "mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm",
     onClick: addFirst
   }, /*#__PURE__*/React.createElement(PlusCircle, null)), Object.entries(internalState || {}).map(function (_ref9, idx) {
     var _ref10 = _slicedToArray(_ref9, 2),
@@ -1015,12 +1014,12 @@ var ObjectInput = function ObjectInput(props) {
         value = _ref10$.value;
 
     return /*#__PURE__*/React.createElement("div", {
-      className: "flex mt_5",
+      className: "mrf-flex mrf-mt_5",
       key: idx
     }, /*#__PURE__*/React.createElement("input", {
       disabled: props.disabled,
       type: "text",
-      className: "w_50 input",
+      className: "mrf-w_50 mrf-input",
       placeholder: props.placeholderKey,
       value: key,
       onChange: function onChange(e) {
@@ -1029,7 +1028,7 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React.createElement("input", {
       disabled: props.disabled,
       type: "text",
-      className: "w_50 input",
+      className: "mrf-w_50 mrf-input",
       placeholder: props.placeholderValue,
       value: value,
       onChange: function onChange(e) {
@@ -1038,14 +1037,14 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React.createElement("button", {
       disabled: props.disabled,
       type: "button",
-      className: "flex btn btn_red btn_sm ml_10",
+      className: "mrf-flex mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_10",
       onClick: function onClick() {
         return remove(id);
       }
     }, /*#__PURE__*/React.createElement(MinusCircle, null)), idx === Object.keys(internalState).length - 1 && /*#__PURE__*/React.createElement("button", {
       disabled: props.disabled,
       type: "button",
-      className: "flex btn btn_blue btn_sm ml_5",
+      className: "mrf-flex mrf-btn mrf-btn_blue mrf-btn_sm mrf-ml_5",
       onClick: addNext
     }, /*#__PURE__*/React.createElement(PlusCircle, null)));
   }));
@@ -28442,7 +28441,7 @@ var MarkdownInput = function MarkdownInput(props) {
   }];
 
   var showPreview = function showPreview() {
-    var parent = _toConsumableArray$1(document.getElementsByClassName('preview'));
+    var parent = _toConsumableArray$1(document.getElementsByClassName('mrf-preview'));
 
     if (parent.length > 0) _toConsumableArray$1(parent[0].querySelectorAll('pre code')).forEach(function (block) {
       return hljs.highlightElement(block);
@@ -28457,7 +28456,7 @@ var MarkdownInput = function MarkdownInput(props) {
 
       return /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: classNames('btn_for_descriptionToolbar'),
+        className: classNames('mrf-btn_for_descriptionToolbar'),
         "aria-label": command.name,
         title: command.name,
         key: "toolbar-btn-".concat(idx),
@@ -28493,7 +28492,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn_sm",
+    className: "mrf-btn mrf-btn_sm",
     style: {
       color: !preview ? '#7f96af' : 'white',
       backgroundColor: preview ? '#7f96af' : 'white'
@@ -28503,7 +28502,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, "Write"), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn_sm ml_5",
+    className: "mrf-btn mrf-btn_sm mrf-ml_5",
     style: {
       color: preview ? '#7f96af' : 'white',
       backgroundColor: preview ? 'white' : '#7f96af'
@@ -28512,13 +28511,13 @@ var MarkdownInput = function MarkdownInput(props) {
       return setPreview(true);
     }
   }, "Preview"))), /*#__PURE__*/React.createElement("div", {
-    className: "flex flexWrap"
+    className: "mrf-flex mrf-flexWrap"
   }, injectButtons())), !preview && /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
     setRef: function setRef(e) {
       return ref.current = e;
     }
   })), preview && /*#__PURE__*/React.createElement("div", {
-    className: "preview",
+    className: "mrf-preview",
     dangerouslySetInnerHTML: {
       __html: converter.makeHtml(props.value)
     }
@@ -28840,19 +28839,19 @@ var BasicWrapper = function BasicWrapper(_ref) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: "mt_10",
+    className: "mrf-mt_10",
     style: {
       position: 'relative'
     }
   }, label && /*#__PURE__*/React.createElement("label", {
-    className: "flex ai_center mb_5",
+    className: "mrf-flex mrf-ai_center mrf-mb_5",
     htmlFor: entry
   }, /*#__PURE__*/React.createElement("span", null, label), help && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactToolTip, {
     html: true,
     place: 'bottom',
     id: id
   }), /*#__PURE__*/React.createElement("span", {
-    className: "flex ai_center",
+    className: "mrf-flex mrf-ai_center",
     "data-html": true,
     "data-tip": help,
     "data-for": id
@@ -28864,7 +28863,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       cursor: 'help'
     }
   })))), children, error && /*#__PURE__*/React.createElement("div", {
-    className: classNames('feedback', _defineProperty$1({}, 'txt_red', errorDisplayed))
+    className: classNames('mrf-feedback', _defineProperty$1({}, 'mrf-txt_red', errorDisplayed))
   }, error.message));
 };
 
@@ -29046,13 +29045,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       _ref7$options = _ref7.options,
       options = _ref7$options === void 0 ? {} : _ref7$options;
       _ref7.nostyle;
-
-  var _useState = useState(schema),
-      _useState2 = _slicedToArray(_useState, 2),
-      calcSchema = _useState2[0];
-      _useState2[1];
-
-  var formFlow = flow || Object.keys(calcSchema);
+  var formFlow = flow || Object.keys(schema);
 
   var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
     //todo: if present props.resolve()
@@ -29069,7 +29062,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     });
   };
 
-  var defaultValues = getDefaultValues(formFlow, calcSchema, value); //FIXME: get real schema through the switch
+  var defaultValues = getDefaultValues(formFlow, schema, value); //FIXME: get real schema through the switch
 
   var _resolver = function resolver(rawData) {
     var _getShapeAndDependenc2 = getShapeAndDependencies(formFlow, schema, [], rawData),
@@ -29088,10 +29081,10 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     mode: 'onChange'
   });
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      initialReseted = _useState4[0];
-      _useState4[1]; // useEffect(() => {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
   //   reset(cleanInputArray(value, defaultValues, flow, schema))
   //   setReset(true)
   // }, [reset])
@@ -29110,7 +29103,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
       watch = methods.watch;
   useHashEffect(function () {
     _reset(_objectSpread2$1({}, cleanInputArray(value, defaultValues, flow, schema)));
-  }, [value, calcSchema]);
+  }, [value, schema]);
 
   var functionalProperty = function functionalProperty(entry, prop) {
     if (typeof prop === 'function') {
@@ -29147,7 +29140,7 @@ var Form = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     handleSubmit: _handleSubmit,
     watch: methods.watch
   }), /*#__PURE__*/React.createElement("form", {
-    className: className || "pr_15 w_100",
+    className: className || "mrf-pr_15 mrf-w_100",
     onSubmit: _handleSubmit(function (data) {
       var clean = cleanOutputArray(data, schema);
       onSubmit(clean);
@@ -29223,9 +29216,9 @@ var Footer = function Footer(props) {
 
   var isSubmitDisplayed = ((_props$actions = props.actions) === null || _props$actions === void 0 ? void 0 : (_props$actions$submit = _props$actions.submit) === null || _props$actions$submit === void 0 ? void 0 : _props$actions$submit.display) === undefined ? true : !!((_props$actions2 = props.actions) !== null && _props$actions2 !== void 0 && (_props$actions2$submi = _props$actions2.submit) !== null && _props$actions2$submi !== void 0 && _props$actions2$submi.display);
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex jc_end mt_5"
+    className: "mrf-flex mrf-jc_end mrf-mt_5"
   }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$cance = _props$actions3.cancel) === null || _props$actions3$cance === void 0 ? void 0 : _props$actions3$cance.display) && /*#__PURE__*/React.createElement("button", {
-    className: "btn btn_red",
+    className: "mrf-btn mrf-btn_red",
     type: "button",
     onClick: function onClick() {
       var _props$actions4;
@@ -29233,11 +29226,11 @@ var Footer = function Footer(props) {
       return (_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : _props$actions4.cancel.action();
     }
   }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$cance = _props$actions5.cancel) === null || _props$actions5$cance === void 0 ? void 0 : _props$actions5$cance.label) || 'Cancel'), ((_props$actions6 = props.actions) === null || _props$actions6 === void 0 ? void 0 : (_props$actions6$reset = _props$actions6.reset) === null || _props$actions6$reset === void 0 ? void 0 : _props$actions6$reset.display) && /*#__PURE__*/React.createElement("button", {
-    className: "btn btn_red",
+    className: "mrf-btn mrf-btn_red",
     type: "button",
     onClick: props.reset
   }, ((_props$actions7 = props.actions) === null || _props$actions7 === void 0 ? void 0 : (_props$actions7$reset = _props$actions7.reset) === null || _props$actions7$reset === void 0 ? void 0 : _props$actions7$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/React.createElement("button", {
-    className: "btn btn_green ml_10",
+    className: "mrf-btn mrf-btn_green mrf-ml_10",
     type: "submit"
   }, ((_props$actions8 = props.actions) === null || _props$actions8 === void 0 ? void 0 : (_props$actions8$submi = _props$actions8.submit) === null || _props$actions8$submi === void 0 ? void 0 : _props$actions8$submi.label) || 'Save'));
 };
@@ -29411,7 +29404,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("textarea", {
             type: "text",
-            className: classNames('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-mrf-input__invalid', errorDisplayed))
           }));
 
         case format.code:
@@ -29423,7 +29416,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(Component, {
-            className: classNames(step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.markdown:
@@ -29433,7 +29426,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(MarkdownInput, {
-            className: classNames(step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.buttonsSelect:
@@ -29445,7 +29438,7 @@ var Step = function Step(_ref8) {
               entry: entry,
               errorDisplayed: errorDisplayed
             }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-              className: classNames('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+              className: classNames('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
               disabled: functionalProperty(entry, step.disabled)
             }, step.props, {
               possibleValues: step.options,
@@ -29466,7 +29459,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("input", {
             type: step.format || 'text',
-            className: classNames('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29480,7 +29473,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-            className: classNames('content', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames('mrf-content', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29500,7 +29493,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement("input", {
             type: step.format || 'number',
-            className: classNames('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29510,7 +29503,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React.createElement(BooleanInput, {
-        className: classNames(steop.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+        className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
       }));
 
     case type.object:
@@ -29523,7 +29516,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(SelectInput, _extends({
-            className: classNames('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29576,7 +29569,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed,
             component: function component(field, props) {
               return /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
-                className: classNames(step.className, _defineProperty$1({}, 'input__invalid', error)),
+                className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', error)),
                 onChange: function onChange(e) {
                   _readOnlyError("errorDisplayed");
                   var v;
@@ -29608,7 +29601,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React.createElement(ObjectInput, {
-            className: classNames(step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames(step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29619,7 +29612,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React.createElement(DatePicker, {
-        className: classNames('datepicker', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+        className: classNames('mrf-datepicker', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
         formatStyle: "large"
       }));
 
@@ -29633,15 +29626,15 @@ var Step = function Step(_ref8) {
           var FileInput = function FileInput(_ref10) {
             var onChange = _ref10.onChange;
 
-            var _useState5 = useState(false),
-                _useState6 = _slicedToArray(_useState5, 2),
-                uploading = _useState6[0],
-                setUploading = _useState6[1];
+            var _useState3 = useState(false),
+                _useState4 = _slicedToArray(_useState3, 2),
+                uploading = _useState4[0],
+                setUploading = _useState4[1];
 
-            var _useState7 = useState(undefined),
-                _useState8 = _slicedToArray(_useState7, 2),
-                input = _useState8[0],
-                setInput = _useState8[1];
+            var _useState5 = useState(undefined),
+                _useState6 = _slicedToArray(_useState5, 2),
+                input = _useState6[0],
+                setInput = _useState6[1];
 
             var setFiles = function setFiles(e) {
               var files = e.target.files;
@@ -29656,24 +29649,24 @@ var Step = function Step(_ref8) {
 
             var files = field.value || [];
             return /*#__PURE__*/React.createElement("div", {
-              className: classNames('flex', 'ai_center', step.className, _defineProperty$1({}, 'input__invalid', error))
+              className: classNames('mrf-flex', 'mrf-ai_center', step.className, _defineProperty$1({}, 'mrf-input__invalid', error))
             }, /*#__PURE__*/React.createElement("input", {
               ref: function ref(r) {
                 return setInput(r);
               },
               type: "file",
               multiple: true,
-              className: 'd_none',
+              className: "mrf-d_none",
               onChange: setFiles
             }), /*#__PURE__*/React.createElement("button", {
               type: "button",
-              className: "btn btn_sm flex ai_center",
+              className: "mrf-btn mrf-btn_sm mrf-flex mrf-ai_center",
               disabled: uploading || functionalProperty(entry, step.disabled),
               onClick: trigger
             }, uploading && /*#__PURE__*/React.createElement(Loader, null), !uploading && /*#__PURE__*/React.createElement(Upload, null), /*#__PURE__*/React.createElement("span", {
-              className: "ml_5"
+              className: "mrf-ml_5"
             }, "Select file(s)")), /*#__PURE__*/React.createElement("span", {
-              className: "ml_5"
+              className: "mrf-ml_5"
             }, files.length <= 0 ? 'No files selected' : files.map(function (r) {
               return r.name;
             }).join(" , ")));
@@ -29695,7 +29688,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         component: function component(field, props) {
           return /*#__PURE__*/React.createElement(CodeInput, _extends({}, props, {
-            className: classNames(_defineProperty$1({}, 'input__invalid', error)),
+            className: classNames(_defineProperty$1({}, 'mrf-input__invalid', error)),
             onChange: function onChange(v) {
               field.onChange(v);
               option(step.onChange).map(function (onChange) {
@@ -29753,7 +29746,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     return /*#__PURE__*/React.createElement("div", {
       key: field.id
     }, /*#__PURE__*/React.createElement("div", {
-      className: classNames('ai_center', 'mt_5'),
+      className: "mrf-ai_center mrf-mt_5",
       style: {
         position: 'relative'
       }
@@ -29772,7 +29765,7 @@ var ArrayStep = function ArrayStep(_ref11) {
         top: '2px',
         right: 0
       },
-      className: classNames('btn', 'btn_red', 'btn_sm', 'ml_5'),
+      className: "mrf-btn mrf-btn_red mrf-btn_sm mrf-ml_5",
       disabled: disabled,
       onClick: function onClick() {
         remove(idx);
@@ -29782,10 +29775,10 @@ var ArrayStep = function ArrayStep(_ref11) {
       size: 16
     }))));
   }), /*#__PURE__*/React.createElement("div", {
-    className: classNames('flex', 'jc_flex_end')
+    className: "mrf-flex mrf-jc_flex_end"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames('btn', 'btn_blue', 'btn_sm', 'mt_5', _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+    className: classNames('mrf-btn', 'mrf-btn_blue', 'mrf-btn_sm', 'mrf-mt_5', _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
     onClick: function onClick() {
       var newValue = cleanInputArray({}, getValues(entry), step.flow, step.schema);
       append({
@@ -29802,7 +29795,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     },
     disabled: disabled
   }, "Add"), error && /*#__PURE__*/React.createElement("div", {
-    className: "invalid-feedback"
+    className: "mrf-invalid-feedback"
   }, error.message)));
 };
 
@@ -29825,10 +29818,10 @@ var NestedForm = function NestedForm(_ref12) {
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
 
-  var _useState9 = useState(!!step.collapsed),
-      _useState10 = _slicedToArray(_useState9, 2),
-      collapsed = _useState10[0],
-      setCollapsed = _useState10[1];
+  var _useState7 = useState(!!step.collapsed),
+      _useState8 = _slicedToArray(_useState7, 2),
+      collapsed = _useState8[0],
+      setCollapsed = _useState8[1];
 
   useWatch(step === null || step === void 0 ? void 0 : (_step$conditionalSche = step.conditionalSchema) === null || _step$conditionalSche === void 0 ? void 0 : _step$conditionalSche.ref);
   var schemaAndFlow = option(step.conditionalSchema).map(function (condiSchema) {
@@ -29896,13 +29889,13 @@ var NestedForm = function NestedForm(_ref12) {
     return x.visibleStep;
   }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, 'nestedform__border', bordered), _defineProperty$1(_classNames17, 'border__error', !!errorDisplayed), _classNames17)),
+    className: classNames((_classNames17 = {}, _defineProperty$1(_classNames17, 'mrf-nestedform__border', bordered), _defineProperty$1(_classNames17, 'mrf-border__error', !!errorDisplayed), _classNames17)),
     style: {
       position: 'relative'
     }
   }, !!step.collapsable && schemaAndFlow.flow.length > 1 && collapsed && /*#__PURE__*/React.createElement(ChevronDown, {
     size: 30,
-    className: 'cursor_pointer',
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -29915,7 +29908,7 @@ var NestedForm = function NestedForm(_ref12) {
     }
   }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/React.createElement(ChevronUp, {
     size: 30,
-    className: 'cursor_pointer',
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -29938,7 +29931,7 @@ var NestedForm = function NestedForm(_ref12) {
 
     return /*#__PURE__*/React.createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
-      className: classNames(_defineProperty$1({}, 'display__none', collapsed && !step.visibleOnCollapse || !visibleStep)),
+      className: classNames(_defineProperty$1({}, 'mrf-display__none', collapsed && !step.visibleOnCollapse || !visibleStep)),
       entry: "".concat(parent, ".").concat(entry),
       label: functionalProperty(entry, (step === null || step === void 0 ? void 0 : step.label) === null ? null : (step === null || step === void 0 ? void 0 : step.label) || entry),
       help: step.help,