@maif/react-forms 1.0.7 → 1.0.11

package/lib/form.js

@@ -55,14 +55,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 var usePrevious = function usePrevious(value) {
   // The ref object is a generic container whose current property is mutable ...
   // ... and can hold any value, similar to an instance property on a class
@@ -83,8 +83,13 @@ var BasicWrapper = function BasicWrapper(_ref) {
       help = _ref.help,
       children = _ref.children,
       render = _ref.render;
+  var classes = (0, _styleContext.useCustomStyle)();
   var id = (0, _uuid.v4)();
 
+  if (_typeof(entry) === 'object') {
+    return children;
+  }
+
   if (render) {
     return render({
       entry: entry,
@@ -118,7 +123,7 @@ var BasicWrapper = function BasicWrapper(_ref) {
       cursor: 'help'
     }
   })))), children, error && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "invalid-feedback"
+    className: classes.invalid_feedback
   }, error.message));
 };
 
@@ -133,8 +138,8 @@ var CustomizableInput = function CustomizableInput(props) {
 };
 
 var defaultVal = function defaultVal(t, array, defaultValue) {
-  if (!!array) return [];
   if (!!defaultValue) return defaultValue;
+  if (!!array) return [];
 
   switch (t) {
     case _type.type.bool:
@@ -144,7 +149,8 @@ var defaultVal = function defaultVal(t, array, defaultValue) {
       return 0;
 
     case _type.type.object:
-      return {};
+      return undefined;
+    //todo: passur de moi
 
     case _type.type.string:
       return "";
@@ -162,7 +168,7 @@ var getDefaultValues = function getDefaultValues(flow, schema) {
       return _objectSpread(_objectSpread({}, acc), getDefaultValues(key.flow, schema));
     }
 
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array, entry.defaultValue)));
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, defaultVal(entry.type, entry.array || entry.isMulti, entry.defaultValue)));
   }, {});
 };
 
@@ -328,56 +334,46 @@ var Form = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       onSubmit(clean);
     }, onError)
   }, formFlow.map(function (entry, idx) {
-    if (entry && _typeof(entry) === 'object') {
-      var errored = entry.flow.some(function (step) {
-        return !!errors[step];
-      });
-      return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
-        key: idx,
-        label: entry.label,
-        collapsed: entry.collapsed,
-        errored: errored
-      }, entry.flow.map(function (entry, idx) {
-        var step = schema[entry];
-        return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-          key: idx,
-          entry: entry,
-          error: error,
-          label: step.label || entry,
-          help: step.help,
-          render: inputWrapper
-        }, /*#__PURE__*/_react["default"].createElement(Step, {
-          entry: entry,
-          step: schema[entry],
-          error: error,
-          register: register,
-          schema: schema,
-          control: control,
-          trigger: trigger,
-          getValues: getValues,
-          setValue: setValue,
-          watch: watch,
-          inputWrapper: inputWrapper
-        }));
-      }));
-    }
-
     var step = schema[entry];
-    var error = entry.split('.').reduce(function (object, key) {
+    var error = _typeof(entry) === 'object' ? undefined : entry.split('.').reduce(function (object, key) {
       return object && object[key];
     }, errors);
+    var visibleStep = (0, _Option.option)(step).map(function (s) {
+      return s.visible;
+    }).map(function (visible) {
+      switch (_typeof(visible)) {
+        case 'object':
+          var _value = watch(step.visible.ref);
+
+          return (0, _Option.option)(step.visible.test).map(function (test) {
+            return test(_value);
+          }).getOrElse(_value);
+
+        case 'boolean':
+          return visible;
+
+        default:
+          return true;
+      }
+    }).getOrElse(true);
+
+    if (!visibleStep) {
+      return null;
+    }
+
     return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-      key: idx,
+      key: "".concat(entry, "-").concat(idx),
       entry: entry,
       error: error,
-      label: step.label || entry,
-      help: step.help,
+      label: (step === null || step === void 0 ? void 0 : step.label) || entry,
+      help: step === null || step === void 0 ? void 0 : step.help,
       render: inputWrapper
     }, /*#__PURE__*/_react["default"].createElement(Step, {
       key: idx,
       entry: entry,
       step: step,
       error: error,
+      errors: errors,
       register: register,
       schema: schema,
       control: control,
@@ -431,6 +427,7 @@ var Step = function Step(_ref4) {
   var entry = _ref4.entry,
       step = _ref4.step,
       error = _ref4.error,
+      errors = _ref4.errors,
       register = _ref4.register,
       schema = _ref4.schema,
       control = _ref4.control,
@@ -444,6 +441,43 @@ var Step = function Step(_ref4) {
       index = _ref4.index;
   var classes = (0, _styleContext.useCustomStyle)();
 
+  if (entry && _typeof(entry) === 'object') {
+    var errored = entry.flow.some(function (step) {
+      return !!errors[step];
+    });
+    return /*#__PURE__*/_react["default"].createElement(_index.Collapse, {
+      label: entry.label,
+      collapsed: entry.collapsed,
+      errored: errored
+    }, entry.flow.map(function (en, entryIdx) {
+      var stp = schema[en];
+      var err = _typeof(entry) === 'object' ? undefined : en.split('.').reduce(function (object, key) {
+        return object && object[key];
+      }, errors);
+      return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
+        key: "collapse-".concat(en, "-").concat(entryIdx),
+        entry: en,
+        error: err,
+        label: (stp === null || stp === void 0 ? void 0 : stp.label) || en,
+        help: stp === null || stp === void 0 ? void 0 : stp.help,
+        render: inputWrapper
+      }, /*#__PURE__*/_react["default"].createElement(Step, {
+        entry: en,
+        step: stp,
+        error: err,
+        errors: errors,
+        register: register,
+        schema: schema,
+        control: control,
+        trigger: trigger,
+        getValues: getValues,
+        setValue: _setValue,
+        watch: watch,
+        inputWrapper: inputWrapper
+      }));
+    }));
+  }
+
   if (step.array) {
     return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
       entry: entry,
@@ -481,26 +515,6 @@ var Step = function Step(_ref4) {
     });
   }
 
-  var visibleStep = step && (0, _Option.option)(step.visible).map(function (visible) {
-    switch (_typeof(visible)) {
-      case 'object':
-        var value = watch(step.visible.ref);
-        return (0, _Option.option)(step.visible.test).map(function (test) {
-          return test(value);
-        }).getOrElse(value);
-
-      case 'boolean':
-        return visible;
-
-      default:
-        return true;
-    }
-  }).getOrElse(true);
-
-  if (!visibleStep) {
-    return null;
-  }
-
   switch (step.type) {
     case _type.type.string:
       switch (step.format) {
@@ -521,9 +535,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
             type: "text",
             id: entry,
-            className: (0, _classnames["default"])(classes.input, {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null
           }, step.props, {
             name: entry,
@@ -547,9 +559,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.CodeInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -574,9 +584,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.MarkdownInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -585,6 +593,7 @@ var Step = function Step(_ref4) {
             }
           });
 
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -601,9 +610,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -634,9 +641,7 @@ var Step = function Step(_ref4) {
             // {...step.props}
             type: step.format || 'text',
             id: entry,
-            className: (0, _classnames["default"])(classes.input, {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
             ,
             placeholder: step.placeholder
@@ -645,6 +650,7 @@ var Step = function Step(_ref4) {
 
     case _type.type.number:
       switch (step.format) {
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -661,9 +667,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])(classes.content, {
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(classes.content, _defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -691,9 +695,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
             type: step.format || 'number',
             id: entry,
-            className: (0, _classnames["default"])(classes.input, {
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             name: entry,
             placeholder: step.placeholder,
@@ -717,9 +719,7 @@ var Step = function Step(_ref4) {
             }, field),
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_index.BooleanInput, _extends({}, step.props, {
-            className: (0, _classnames["default"])({
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             onChange: field.onChange,
             value: field.value
@@ -729,6 +729,7 @@ var Step = function Step(_ref4) {
 
     case _type.type.object:
       switch (step.format) {
+        case _format.format.buttonsSelect:
         case _format.format.select:
           return /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
             name: entry,
@@ -746,9 +747,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -806,9 +805,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.ObjectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
-                  'is-invalid': error
-                }),
+                className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
                 readOnly: step.disabled ? 'readOnly' : null,
                 onChange: field.onChange,
                 value: field.value,
@@ -836,9 +833,7 @@ var Step = function Step(_ref4) {
             error: error
           }, /*#__PURE__*/_react["default"].createElement(_reactRainbowComponents.DatePicker, _extends({}, step.props, {
             id: "datePicker-1",
-            className: (0, _classnames["default"])({
-              'is-invalid': error
-            }),
+            className: (0, _classnames["default"])(_defineProperty({}, classes.input__invalid, error)),
             readOnly: step.disabled ? 'readOnly' : null,
             value: field.value,
             onChange: field.onChange,
@@ -881,9 +876,7 @@ var Step = function Step(_ref4) {
               };
 
               return /*#__PURE__*/_react["default"].createElement("div", {
-                className: (0, _classnames["default"])("d-flex flex-row justify-content-start", {
-                  'is-invalid': error
-                })
+                className: (0, _classnames["default"])("d-flex flex-row justify-content-start", _defineProperty({}, classes.input__invalid, error))
               }, /*#__PURE__*/_react["default"].createElement("input", {
                 ref: function ref(r) {
                   return setInput(r);
@@ -937,9 +930,7 @@ var Step = function Step(_ref4) {
       }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
         type: "file",
         id: entry,
-        className: (0, _classnames["default"])(classes.input, {
-          'is-invalid': error
-        }),
+        className: (0, _classnames["default"])(classes.input, _defineProperty({}, classes.input__invalid, error)),
         readOnly: step.disabled ? 'readOnly' : null,
         name: entry,
         placeholder: step.placeholder
@@ -961,6 +952,7 @@ var ArrayStep = function ArrayStep(_ref15) {
       values = _ref15.values,
       defaultValue = _ref15.defaultValue,
       setValue = _ref15.setValue;
+  var classes = (0, _styleContext.useCustomStyle)();
 
   var _useFieldArray = (0, _reactHookForm.useFieldArray)({
     control: control,
@@ -977,11 +969,13 @@ var ArrayStep = function ArrayStep(_ref15) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: field.id,
       className: "d-flex flex-row"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "flex-grow-1"
     }, component(_objectSpread(_objectSpread({
       key: field.id
     }, field), {}, {
       defaultValue: values[idx] || defaultValue
-    }), idx), /*#__PURE__*/_react["default"].createElement("div", {
+    }), idx)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "input-group-append"
     }, /*#__PURE__*/_react["default"].createElement("button", {
       className: "btn btn-danger btn-sm",
@@ -992,12 +986,10 @@ var ArrayStep = function ArrayStep(_ref15) {
     }, "remove")));
   }), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", {
     type: "button",
-    className: (0, _classnames["default"])("btn btn-info mt-2", {
-      'is-invalid': error
-    }),
+    className: (0, _classnames["default"])("btn btn-info mt-2", _defineProperty({}, classes.input__invalid, error)),
     onClick: function onClick() {
       append({
-        value: defaultValue
+        value: step.addableDefaultValue
       });
       trigger(entry);
     },

package/lib/format.d.ts

@@ -8,4 +8,5 @@ export declare const format: {
     password: string;
     hidden: string;
     form: string;
+    buttonsSelect: string;
 };

package/lib/format.js

@@ -13,6 +13,7 @@ var format = {
   email: 'email',
   password: 'password',
   hidden: 'hidden',
-  form: 'form'
+  form: 'form',
+  buttonsSelect: 'buttons'
 };
 exports.format = format;

package/lib/inputs/ArrayInput.js

@@ -84,7 +84,7 @@ var ArrayInput = function ArrayInput(props) {
         });
       }
     }
-  }, [props, value]);
+  }, [props.optionsFrom]);
 
   var handleChanges = function handleChanges(changes) {
     props.onChange(changes.map(function (x) {

package/lib/inputs/CodeInput.d.ts

@@ -1,4 +1,5 @@
-export function CodeInput({ onChange, value, className, readOnly, theme, mode }: {
+export function CodeInput({ onChange, value, className, readOnly, theme, mode, ...props }: {
+    [x: string]: any;
     onChange: any;
     value: any;
     className?: string | undefined;

package/lib/inputs/CodeInput.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactAce = _interopRequireDefault(require("react-ace"));
 
+var _extBeautify = _interopRequireDefault(require("ace-builds/src-noconflict/ext-beautify"));
+
 require("ace-builds/src-noconflict/mode-html");
 
 require("ace-builds/src-noconflict/mode-json");
@@ -27,8 +29,14 @@ require("ace-builds/src-noconflict/ext-searchbox");
 
 require("ace-builds/src-noconflict/ext-language_tools");
 
+var _excluded = ["onChange", "value", "className", "readOnly", "theme", "mode"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 var CodeInput = function CodeInput(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value,
@@ -38,8 +46,11 @@ var CodeInput = function CodeInput(_ref) {
       _ref$theme = _ref.theme,
       theme = _ref$theme === void 0 ? 'monokai' : _ref$theme,
       _ref$mode = _ref.mode,
-      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode;
+      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode,
+      props = _objectWithoutProperties(_ref, _excluded);
+
   return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
+    commands: _extBeautify["default"].commands,
     className: className,
     readOnly: readOnly,
     style: {
@@ -54,8 +65,15 @@ var CodeInput = function CodeInput(_ref) {
     editorProps: {
       $blockScrolling: true
     },
-    height: "300px",
-    width: "100%",
+    onLoad: function onLoad(editorInstance) {
+      editorInstance.container.style.resize = "both"; // mouseup = css resize end
+
+      document.addEventListener("mouseup", function (e) {
+        return editorInstance.resize();
+      });
+    },
+    height: props.height,
+    width: props.width,
     showGutter: true,
     tabSize: 2,
     highlightActiveLine: true,

package/lib/inputs/Collapse.d.ts

@@ -1,2 +1 @@
 export function Collapse(props: any): JSX.Element;
-export function Panel(props: any): JSX.Element;

package/lib/inputs/Collapse.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Panel = exports.Collapse = void 0;
+exports.Collapse = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -13,12 +13,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _styleContext = require("../styleContext");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,68 +41,27 @@ var Collapse = function Collapse(props) {
       collapsed = _useState2[0],
       setCollapsed = _useState2[1];
 
+  var classes = (0, _styleContext.useCustomStyle)();
+
   var toggle = function toggle(e) {
     if (e && e.preventDefault) e.preventDefault();
     setCollapsed(!collapsed);
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])('form__collapse', {
-      errored: props.errored
-    })
-  }, /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-12",
-    onClick: toggle,
-    style: {
-      cursor: 'pointer'
-    }
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("hr", {
+    className: (0, _classnames["default"])(_defineProperty({}, classes.collapse_error, props.errored))
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(classes.cursor_pointer, " ").concat(classes.flex, " ").concat(classes.justifyContentBetween),
+    onClick: toggle
   }, /*#__PURE__*/_react["default"].createElement("span", {
-    className: "form__collapse__label",
-    style: {
-      fontWeight: 'bold',
-      marginTop: 7
-    }
+    className: (0, _classnames["default"])(classes.collapse_label, _defineProperty({}, classes.collapse_error, props.errored))
   }, props.label), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: "btn btn-access-negative pull-right btn-sm",
-    style: {
-      "float": 'right'
-    },
-    onClick: toggle
-  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null)))), !collapsed && props.children, props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
-};
-
-exports.Collapse = Collapse;
-
-var Panel = function Panel(props) {
-  var _useState3 = (0, _react.useState)(props.initCollapsed || props.collapsed),
-      _useState4 = _slicedToArray(_useState3, 2),
-      collapsed = _useState4[0],
-      setCollapsed = _useState4[1];
-
-  var toggle = function toggle(e) {
-    if (e && e.preventDefault) e.preventDefault();
-    setCollapsed(!collapsed);
-  };
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-xs-12 col-sm-3"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel panel-primary",
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-heading",
-    style: {
-      cursor: 'pointer'
-    },
+    className: (0, _classnames["default"])(classes.btn, _defineProperty({}, classes.collapse_error, props.errored)),
     onClick: toggle
-  }, props.title), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
-    className: "panel-body"
-  }, props.children)));
+  }, !!collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.Eye, null), !collapsed && /*#__PURE__*/_react["default"].createElement(_reactFeather.EyeOff, null))), !collapsed && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.ml_10
+  }, props.children), props.lineEnd && /*#__PURE__*/_react["default"].createElement("hr", null));
 };
 
-exports.Panel = Panel;
+exports.Collapse = Collapse;