@maif/react-forms 1.0.8 → 1.0.12

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));
 };
 
@@ -329,57 +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: "collapse-".concat(idx),
-        label: entry.label,
-        collapsed: entry.collapsed,
-        errored: errored
-      }, entry.flow.map(function (entry, entryIdx) {
-        var step = schema[entry]; //FIXME: better key ==> entry name + idx
-
-        return /*#__PURE__*/_react["default"].createElement(BasicWrapper, {
-          key: "collapse-".concat(idx, "-").concat(entry, "-").concat(entryIdx),
-          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: "".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,
@@ -433,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,
@@ -446,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(en) === '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,
@@ -483,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) {
@@ -523,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,
@@ -549,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,
@@ -576,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,
@@ -587,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,
@@ -603,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,
@@ -636,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
@@ -647,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,
@@ -663,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,
@@ -693,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,
@@ -719,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
@@ -731,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,
@@ -748,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,
@@ -808,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,
@@ -838,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,
@@ -883,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);
@@ -939,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
@@ -963,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,
@@ -975,9 +965,6 @@ var ArrayStep = function ArrayStep(_ref15) {
       append = _useFieldArray.append,
       remove = _useFieldArray.remove;
 
-  console.log({
-    fields: fields
-  });
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, fields.map(function (field, idx) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       key: field.id,
@@ -999,9 +986,7 @@ 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: step.addableDefaultValue

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/Collapse.js

@@ -21,6 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 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."); }
@@ -46,20 +48,20 @@ var Collapse = function Collapse(props) {
     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", {
+  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: classes.collapse_label
+    className: (0, _classnames["default"])(classes.collapse_label, _defineProperty({}, classes.collapse_error, props.errored))
   }, props.label), /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
-    className: classes.btn,
+    className: (0, _classnames["default"])(classes.btn, _defineProperty({}, classes.collapse_error, props.errored)),
     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));
+  }, !!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.Collapse = Collapse;

package/lib/inputs/SelectInput.js

@@ -9,6 +9,8 @@ exports.SelectInput = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _creatable = _interopRequireDefault(require("react-select/creatable"));
 
 var _reactSelect = _interopRequireDefault(require("react-select"));
@@ -17,6 +19,10 @@ var _Option = require("../Option");
 
 var _utils = require("../utils");
 
+var _ = require("..");
+
+var _styleContext = require("../styleContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
@@ -76,6 +82,7 @@ var valueToSelectOption = function valueToSelectOption(value) {
 };
 
 var SelectInput = function SelectInput(props) {
+  var classes = (0, _styleContext.useCustomStyle)();
   var possibleValues = (props.possibleValues || []).map(function (v) {
     return props.transformer ? props.transformer(v) : v;
   }).map(function (v) {
@@ -157,6 +164,40 @@ var SelectInput = function SelectInput(props) {
     }
   };
 
+  var handleSelectButtonClick = function handleSelectButtonClick(v) {
+    if (props.isMulti) {
+      if (value.includes(v)) {
+        return onChange(value.filter(function (val) {
+          return val.value !== v.value;
+        }));
+      } else {
+        return onChange([].concat(_toConsumableArray(value), [v]));
+      }
+    }
+
+    return onChange(v);
+  };
+
+  if (props.format === _.format.buttonsSelect) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, values.map(function (v, idx) {
+      var active = props.isMulti ? value.includes(v) : v.value === value.value;
+      return /*#__PURE__*/_react["default"].createElement("button", {
+        key: idx,
+        type: "button",
+        className: (0, _classnames["default"])(props.className, classes.btn, classes.btn_grey, classes.ml_5, {
+          active: active
+        }),
+        onClick: function onClick() {
+          return handleSelectButtonClick(v);
+        }
+      }, v.label);
+    }));
+  }
+
   if (props.createOption) {
     return /*#__PURE__*/_react["default"].createElement(_creatable["default"], _extends({}, props, {
       name: "".concat(props.label, "-search"),

package/lib/style.d.ts

@@ -17,7 +17,8 @@ export namespace style {
         const padding: number;
         const fontSize: string;
         const cursor: string;
-        const border: number;
+        const borderWidth: string;
+        const backgroundColor: string;
     }
     namespace btn_sm {
         const fontSize_1: string;
@@ -36,39 +37,59 @@ export namespace style {
         };
     };
     const btn_red: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_green: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_blue: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     const btn_grey: {
-        color: string;
-        backgroundColor: string;
-        borderColor: string;
+        color: any;
+        borderColor: any;
         "&:hover": {
-            backgroundColor: string;
-            borderColor: string;
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
+        };
+        "&.active": {
+            color: string;
+            backgroundColor: any;
+            borderColor: any;
         };
     };
     namespace txt_red {
@@ -142,6 +163,10 @@ export namespace style {
         const marginTop_3: number;
         export { marginTop_3 as marginTop };
     }
+    namespace collapse_error {
+        const color_1: string;
+        export { color_1 as color };
+    }
     const datepicker: {
         "& input": {
             borderRadius: string;
@@ -149,11 +174,23 @@ export namespace style {
     };
     const code: {};
     namespace input__boolean__on {
-        const color_1: string;
-        export { color_1 as color };
-    }
-    namespace input__boolean__off {
         const color_2: string;
         export { color_2 as color };
     }
+    namespace input__boolean__off {
+        const color_3: string;
+        export { color_3 as color };
+    }
+    namespace input__invalid {
+        const borderColor: string;
+    }
+    namespace invalid_feedback {
+        export const width: string;
+        const marginTop_4: string;
+        export { marginTop_4 as marginTop };
+        const fontSize_2: string;
+        export { fontSize_2 as fontSize };
+        const color_4: string;
+        export { color_4 as color };
+    }
 }