@maif/react-forms 1.0.57 → 1.0.60

package/lib/index.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('fs');
 var yup = require('yup');
 var React = require('react');
 var yup$1 = require('@hookform/resolvers/yup');
@@ -582,28 +581,28 @@ var BooleanInput = /*#__PURE__*/React__default["default"].forwardRef(function (_
   };
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]((_classNames = {}, _defineProperty$1(_classNames, 'cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'cursor_not_allowed', readOnly), _classNames))
+    className: classNames__default["default"]((_classNames = {}, _defineProperty$1(_classNames, 'mrf-cursor_pointer', !readOnly), _defineProperty$1(_classNames, 'mrf-cursor_not_allowed', readOnly), _classNames))
   }, !!value && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_on'),
+    className: classNames__default["default"]('mrf-content_switch_button_on'),
     onClick: function onClick() {
       return handleClick(false);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_on')
+    className: classNames__default["default"]('mrf-switch_button_on')
   })), !value && value !== null && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_off'),
+    className: classNames__default["default"]('mrf-content_switch_button_off'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_off')
+    className: classNames__default["default"]('mrf-switch_button_off')
   })), value === null && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('content_switch_button_null'),
+    className: classNames__default["default"]('mrf-content_switch_button_null'),
     onClick: function onClick() {
       return handleClick(true);
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('switch_button_null')
+    className: classNames__default["default"]('mrf-switch_button_null')
   })));
 });
 
@@ -621,22 +620,22 @@ var Collapse = function Collapse(props) {
   };
 
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("hr", {
-    className: classNames__default["default"](_defineProperty$1({}, 'collapse_error', props.errored))
+    className: classNames__default["default"](_defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "cursor_pointer flex jc_between",
+    className: "mrf-cursor_pointer mrf-flex mrf-jc_between",
     onClick: toggle
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]('collapse_label', _defineProperty$1({}, 'collapse_error', props.errored))
+    className: classNames__default["default"]('mrf-collapse_label', _defineProperty$1({}, 'mrf-collapse_error', props.errored))
   }, props.label), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: classNames__default["default"]('btn', 'btn_sm', 'ml_5', _defineProperty$1({}, 'collapse_error', props.errored)),
+    className: classNames__default["default"]('mrf-btn', 'mrf-btn_sm', 'mrf-ml_5', _defineProperty$1({}, 'mrf-collapse_error', props.errored)),
     onClick: toggle
   }, !!collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.Eye, {
     size: 16
   }), !collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.EyeOff, {
     size: 16
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('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__default["default"]('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__default["default"].createElement("hr", null));
 };
 
@@ -888,7 +887,7 @@ var SelectInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
         key: idx,
         type: "button",
         disabled: props.disabled,
-        className: classNames__default["default"](props.className, 'btn btn_grey ml_5', {
+        className: classNames__default["default"](props.className, 'mrf-btn mrf-btn_grey mrf-ml_5', {
           active: active
         }),
         onClick: function onClick() {
@@ -1040,7 +1039,7 @@ var ObjectInput = function ObjectInput(props) {
   }, Object.keys(internalState || {}).length === 0 && /*#__PURE__*/React__default["default"].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__default["default"].createElement(reactFeather.PlusCircle, null)), Object.entries(internalState || {}).map(function (_ref9, idx) {
     var _ref10 = _slicedToArray(_ref9, 2),
@@ -1050,12 +1049,12 @@ var ObjectInput = function ObjectInput(props) {
         value = _ref10$.value;
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "flex mt_5",
+      className: "mrf-flex mrf-mt_5",
       key: idx
     }, /*#__PURE__*/React__default["default"].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) {
@@ -1064,7 +1063,7 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React__default["default"].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) {
@@ -1073,14 +1072,14 @@ var ObjectInput = function ObjectInput(props) {
     }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(reactFeather.MinusCircle, null)), idx === Object.keys(internalState).length - 1 && /*#__PURE__*/React__default["default"].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__default["default"].createElement(reactFeather.PlusCircle, null)));
   }));
@@ -28477,7 +28476,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__default["default"].highlightElement(block);
@@ -28492,7 +28491,7 @@ var MarkdownInput = function MarkdownInput(props) {
 
       return /*#__PURE__*/React__default["default"].createElement("button", {
         type: "button",
-        className: classNames__default["default"]('btn_for_descriptionToolbar'),
+        className: classNames__default["default"]('mrf-btn_for_descriptionToolbar'),
         "aria-label": command.name,
         title: command.name,
         key: "toolbar-btn-".concat(idx),
@@ -28528,7 +28527,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "btn btn_sm",
+    className: "mrf-btn mrf-btn_sm",
     style: {
       color: !preview ? '#7f96af' : 'white',
       backgroundColor: preview ? '#7f96af' : 'white'
@@ -28538,7 +28537,7 @@ var MarkdownInput = function MarkdownInput(props) {
     }
   }, "Write"), /*#__PURE__*/React__default["default"].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'
@@ -28547,13 +28546,13 @@ var MarkdownInput = function MarkdownInput(props) {
       return setPreview(true);
     }
   }, "Preview"))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flexWrap"
+    className: "mrf-flex mrf-flexWrap"
   }, injectButtons())), !preview && /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
     setRef: function setRef(e) {
       return ref.current = e;
     }
   })), preview && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "preview",
+    className: "mrf-preview",
     dangerouslySetInnerHTML: {
       __html: converter.makeHtml(props.value)
     }
@@ -28875,19 +28874,19 @@ var BasicWrapper = function BasicWrapper(_ref) {
   }
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mt_10",
+    className: "mrf-mt_10",
     style: {
       position: 'relative'
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("label", {
-    className: "flex ai_center mb_5",
+    className: "mrf-flex mrf-ai_center mrf-mb_5",
     htmlFor: entry
   }, /*#__PURE__*/React__default["default"].createElement("span", null, label), help && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ReactToolTip__default["default"], {
     html: true,
     place: 'bottom',
     id: id
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "flex ai_center",
+    className: "mrf-flex mrf-ai_center",
     "data-html": true,
     "data-tip": help,
     "data-for": id
@@ -28899,7 +28898,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       cursor: 'help'
     }
   })))), children, error && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('feedback', _defineProperty$1({}, 'txt_red', errorDisplayed))
+    className: classNames__default["default"]('mrf-feedback', _defineProperty$1({}, 'mrf-txt_red', errorDisplayed))
   }, error.message));
 };
 
@@ -29081,13 +29080,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
       _ref7$options = _ref7.options,
       options = _ref7$options === void 0 ? {} : _ref7$options;
       _ref7.nostyle;
-
-  var _useState = React.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()
@@ -29104,7 +29097,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
     });
   };
 
-  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),
@@ -29123,10 +29116,10 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
     mode: 'onChange'
   });
 
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      initialReseted = _useState4[0];
-      _useState4[1]; // useEffect(() => {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      initialReseted = _useState2[0];
+      _useState2[1]; // useEffect(() => {
   //   reset(cleanInputArray(value, defaultValues, flow, schema))
   //   setReset(true)
   // }, [reset])
@@ -29145,7 +29138,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
       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') {
@@ -29182,7 +29175,7 @@ var Form = /*#__PURE__*/React__default["default"].forwardRef(function (_ref7, re
     handleSubmit: _handleSubmit,
     watch: methods.watch
   }), /*#__PURE__*/React__default["default"].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);
@@ -29258,9 +29251,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__default["default"].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__default["default"].createElement("button", {
-    className: "btn btn_red",
+    className: "mrf-btn mrf-btn_red",
     type: "button",
     onClick: function onClick() {
       var _props$actions4;
@@ -29268,11 +29261,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__default["default"].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__default["default"].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'));
 };
@@ -29446,7 +29439,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement("textarea", {
             type: "text",
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"]('mrf-input', step.className, _defineProperty$1({}, 'mrf-mrf-input__invalid', errorDisplayed))
           }));
 
         case format.code:
@@ -29458,7 +29451,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement(Component, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"](step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.markdown:
@@ -29468,7 +29461,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement(MarkdownInput, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"](step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
 
         case format.buttonsSelect:
@@ -29480,7 +29473,7 @@ var Step = function Step(_ref8) {
               entry: entry,
               errorDisplayed: errorDisplayed
             }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-              className: classNames__default["default"]('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+              className: classNames__default["default"]('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
               disabled: functionalProperty(entry, step.disabled)
             }, step.props, {
               possibleValues: step.options,
@@ -29501,7 +29494,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement("input", {
             type: step.format || 'text',
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"]('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29515,7 +29508,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-            className: classNames__default["default"]('content', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"]('mrf-content', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29535,7 +29528,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement("input", {
             type: step.format || 'number',
-            className: classNames__default["default"]('input', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"]('mrf-input', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29545,7 +29538,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React__default["default"].createElement(BooleanInput, {
-        className: classNames__default["default"](steop.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+        className: classNames__default["default"](step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
       }));
 
     case type.object:
@@ -29558,7 +29551,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement(SelectInput, _extends({
-            className: classNames__default["default"]('flex_grow_1', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"]('mrf-flex_grow_1', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }, step.props, {
             possibleValues: step.options,
             httpClient: httpClient,
@@ -29611,7 +29604,7 @@ var Step = function Step(_ref8) {
             errorDisplayed: errorDisplayed,
             component: function component(field, props) {
               return /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
-                className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', error)),
+                className: classNames__default["default"](step.className, _defineProperty$1({}, 'mrf-input__invalid', error)),
                 onChange: function onChange(e) {
                   _readOnlyError("errorDisplayed");
                   var v;
@@ -29643,7 +29636,7 @@ var Step = function Step(_ref8) {
             entry: entry,
             errorDisplayed: errorDisplayed
           }, /*#__PURE__*/React__default["default"].createElement(ObjectInput, {
-            className: classNames__default["default"](step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed))
+            className: classNames__default["default"](step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed))
           }));
       }
 
@@ -29654,7 +29647,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         errorDisplayed: errorDisplayed
       }, /*#__PURE__*/React__default["default"].createElement(reactRainbowComponents.DatePicker, {
-        className: classNames__default["default"]('datepicker', step.className, _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+        className: classNames__default["default"]('mrf-datepicker', step.className, _defineProperty$1({}, 'mrf-input__invalid', errorDisplayed)),
         formatStyle: "large"
       }));
 
@@ -29668,15 +29661,15 @@ var Step = function Step(_ref8) {
           var FileInput = function FileInput(_ref10) {
             var onChange = _ref10.onChange;
 
-            var _useState5 = React.useState(false),
-                _useState6 = _slicedToArray(_useState5, 2),
-                uploading = _useState6[0],
-                setUploading = _useState6[1];
+            var _useState3 = React.useState(false),
+                _useState4 = _slicedToArray(_useState3, 2),
+                uploading = _useState4[0],
+                setUploading = _useState4[1];
 
-            var _useState7 = React.useState(undefined),
-                _useState8 = _slicedToArray(_useState7, 2),
-                input = _useState8[0],
-                setInput = _useState8[1];
+            var _useState5 = React.useState(undefined),
+                _useState6 = _slicedToArray(_useState5, 2),
+                input = _useState6[0],
+                setInput = _useState6[1];
 
             var setFiles = function setFiles(e) {
               var files = e.target.files;
@@ -29691,24 +29684,24 @@ var Step = function Step(_ref8) {
 
             var files = field.value || [];
             return /*#__PURE__*/React__default["default"].createElement("div", {
-              className: classNames__default["default"]('flex', 'ai_center', step.className, _defineProperty$1({}, 'input__invalid', error))
+              className: classNames__default["default"]('mrf-flex', 'mrf-ai_center', step.className, _defineProperty$1({}, 'mrf-input__invalid', error))
             }, /*#__PURE__*/React__default["default"].createElement("input", {
               ref: function ref(r) {
                 return setInput(r);
               },
               type: "file",
               multiple: true,
-              className: 'd_none',
+              className: "mrf-d_none",
               onChange: setFiles
             }), /*#__PURE__*/React__default["default"].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__default["default"].createElement(reactFeather.Loader, null), !uploading && /*#__PURE__*/React__default["default"].createElement(reactFeather.Upload, null), /*#__PURE__*/React__default["default"].createElement("span", {
-              className: "ml_5"
+              className: "mrf-ml_5"
             }, "Select file(s)")), /*#__PURE__*/React__default["default"].createElement("span", {
-              className: "ml_5"
+              className: "mrf-ml_5"
             }, files.length <= 0 ? 'No files selected' : files.map(function (r) {
               return r.name;
             }).join(" , ")));
@@ -29730,7 +29723,7 @@ var Step = function Step(_ref8) {
         entry: entry,
         component: function component(field, props) {
           return /*#__PURE__*/React__default["default"].createElement(CodeInput, _extends({}, props, {
-            className: classNames__default["default"](_defineProperty$1({}, 'input__invalid', error)),
+            className: classNames__default["default"](_defineProperty$1({}, 'mrf-input__invalid', error)),
             onChange: function onChange(v) {
               field.onChange(v);
               option(step.onChange).map(function (onChange) {
@@ -29788,7 +29781,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: field.id
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]('ai_center', 'mt_5'),
+      className: "mrf-ai_center mrf-mt_5",
       style: {
         position: 'relative'
       }
@@ -29807,7 +29800,7 @@ var ArrayStep = function ArrayStep(_ref11) {
         top: '2px',
         right: 0
       },
-      className: classNames__default["default"]('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);
@@ -29817,10 +29810,10 @@ var ArrayStep = function ArrayStep(_ref11) {
       size: 16
     }))));
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]('flex', 'jc_flex_end')
+    className: "mrf-flex mrf-jc_flex_end"
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: classNames__default["default"]('btn', 'btn_blue', 'btn_sm', 'mt_5', _defineProperty$1({}, 'input__invalid', errorDisplayed)),
+    className: classNames__default["default"]('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({
@@ -29837,7 +29830,7 @@ var ArrayStep = function ArrayStep(_ref11) {
     },
     disabled: disabled
   }, "Add"), error && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "invalid-feedback"
+    className: "mrf-invalid-feedback"
   }, error.message)));
 };
 
@@ -29860,10 +29853,10 @@ var NestedForm = function NestedForm(_ref12) {
       setValue = _useFormContext4.setValue,
       watch = _useFormContext4.watch;
 
-  var _useState9 = React.useState(!!step.collapsed),
-      _useState10 = _slicedToArray(_useState9, 2),
-      collapsed = _useState10[0],
-      setCollapsed = _useState10[1];
+  var _useState7 = React.useState(!!step.collapsed),
+      _useState8 = _slicedToArray(_useState7, 2),
+      collapsed = _useState8[0],
+      setCollapsed = _useState8[1];
 
   reactHookForm.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) {
@@ -29931,13 +29924,13 @@ var NestedForm = function NestedForm(_ref12) {
     return x.visibleStep;
   }).length >= 1 && step.label !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]((_classNames17 = {}, _defineProperty$1(_classNames17, 'nestedform__border', bordered), _defineProperty$1(_classNames17, 'border__error', !!errorDisplayed), _classNames17)),
+    className: classNames__default["default"]((_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__default["default"].createElement(reactFeather.ChevronDown, {
     size: 30,
-    className: 'cursor_pointer',
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -29950,7 +29943,7 @@ var NestedForm = function NestedForm(_ref12) {
     }
   }), !!step.collapsable && schemaAndFlow.flow.length > 1 && !collapsed && /*#__PURE__*/React__default["default"].createElement(reactFeather.ChevronUp, {
     size: 30,
-    className: 'cursor_pointer',
+    className: "mrf-cursor_pointer",
     style: {
       position: 'absolute',
       top: -35,
@@ -29973,7 +29966,7 @@ var NestedForm = function NestedForm(_ref12) {
 
     return /*#__PURE__*/React__default["default"].createElement(BasicWrapper, {
       key: "".concat(entry, ".").concat(idx),
-      className: classNames__default["default"](_defineProperty$1({}, 'display__none', collapsed && !step.visibleOnCollapse || !visibleStep)),
+      className: classNames__default["default"](_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,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maif/react-forms",
   "description": "Build react safe forms as fast as possible",
-  "version": "1.0.57",
+  "version": "1.0.60",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",
   "types": "lib/index.js",