@maif/react-forms 1.0.5 → 1.0.6

package/dist/react-form.js.LICENSE.txt

@@ -54,6 +54,14 @@ and limitations under the License.
 
 /*! showdown v 1.9.1 - 02-11-2019 */
 
+/**
+ * A better abstraction over CSS.
+ *
+ * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
+ * @website https://github.com/cssinjs/jss
+ * @license MIT
+ */
+
 /** @license React v0.20.2
  * scheduler.production.min.js
  *

package/lib/form.d.ts

@@ -5,7 +5,7 @@ export function Form({ schema, flow, value, inputWrapper, onSubmit, footer, styl
     inputWrapper: any;
     onSubmit: any;
     footer: any;
-    style: any;
+    style?: {} | undefined;
     className: any;
     options?: {} | undefined;
 }): JSX.Element;

package/lib/form.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Form = void 0;
 
+var _react = _interopRequireWildcard(require("react"));
+
 var _yup = require("@hookform/resolvers/yup");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _reactFeather = require("react-feather");
 
 var _reactHookForm = require("react-hook-form");
@@ -23,6 +23,8 @@ var _uuid = require("uuid");
 
 var yup = _interopRequireWildcard(require("yup"));
 
+var _styleContext = require("./styleContext");
+
 var _type = require("./type");
 
 var _format = require("./format");
@@ -33,12 +35,12 @@ var _index2 = require("./resolvers/index");
 
 var _Option = require("./Option");
 
+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); }
 
 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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -171,10 +173,12 @@ var Form = function Form(_ref2) {
       inputWrapper = _ref2.inputWrapper,
       onSubmit = _ref2.onSubmit,
       footer = _ref2.footer,
-      style = _ref2.style,
+      _ref2$style = _ref2.style,
+      style = _ref2$style === void 0 ? {} : _ref2$style,
       className = _ref2.className,
       _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options;
+  var classes = (0, _styleContext.useCustomStyle)(style);
   var formFlow = flow || Object.keys(schema);
 
   var maybeCustomHttpClient = function maybeCustomHttpClient(url, method) {
@@ -203,39 +207,63 @@ var Form = function Form(_ref2) {
     return resolver;
   };
 
-  var cleanInputArray = function cleanInputArray(obj) {
+  var cleanInputArray = function cleanInputArray(obj, subSchema) {
     return Object.entries(obj).reduce(function (acc, curr) {
       var _curr = _slicedToArray(curr, 2),
           key = _curr[0],
           v = _curr[1];
 
       if (Array.isArray(v)) {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (value) {
-          return {
-            value: value
-          };
-        })));
+        var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
+          return s[key];
+        }).map(function (entry) {
+          return !!entry.array;
+        }).getOrElse(false);
+
+        if (isArray) {
+          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (value) {
+            return {
+              value: value
+            };
+          })));
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v)));
+        var _schema$key;
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanInputArray(v, ((_schema$key = schema[key]) === null || _schema$key === void 0 ? void 0 : _schema$key.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
     }, {});
   };
 
-  var cleanOutputArray = function cleanOutputArray(obj) {
+  var cleanOutputArray = function cleanOutputArray(obj, subSchema) {
     return Object.entries(obj).reduce(function (acc, curr) {
       var _curr2 = _slicedToArray(curr, 2),
           key = _curr2[0],
           v = _curr2[1];
 
       if (Array.isArray(v)) {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (_ref3) {
-          var value = _ref3.value;
-          return value;
-        })));
+        var isArray = (0, _Option.option)(subSchema).orElse(schema).map(function (s) {
+          return s[key];
+        }).map(function (entry) {
+          return !!entry.array;
+        }).getOrElse(false);
+
+        if (isArray) {
+          return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v.map(function (_ref3) {
+            var value = _ref3.value;
+            return value;
+          })));
+        }
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       } else if (!!v && _typeof(v) === 'object') {
-        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v)));
+        var _schema$key2;
+
+        return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, cleanOutputArray(v, ((_schema$key2 = schema[key]) === null || _schema$key2 === void 0 ? void 0 : _schema$key2.schema) || {})));
       } else {
         return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, v));
       }
@@ -269,7 +297,7 @@ var Form = function Form(_ref2) {
   (0, _react.useEffect)(function () {
     //todo: with debounce
     if (!!options.autosubmit) {
-      handleSubmit(function (data) {
+      handleSubmit(function () {
         return onSubmit(cleanOutputArray(data));
       });
     }
@@ -280,8 +308,7 @@ var Form = function Form(_ref2) {
   }
 
   return /*#__PURE__*/_react["default"].createElement(_reactHookForm.FormProvider, methods, /*#__PURE__*/_react["default"].createElement("form", {
-    className: className || "col-12 section pt-2 pr-2",
-    style: style,
+    className: className || classes.pr_15,
     onSubmit: handleSubmit(function (data) {
       var clean = cleanOutputArray(data);
       return onSubmit(clean);
@@ -364,6 +391,8 @@ exports.Form = Form;
 var Footer = function Footer(props) {
   var _props$actions, _props$actions$submit, _props$actions2, _props$actions2$submi, _props$actions3, _props$actions3$reset, _props$actions4, _props$actions4$reset, _props$actions5, _props$actions5$submi;
 
+  var classes = (0, _styleContext.useCustomStyle)();
+
   if (props.render) {
     return props.render({
       reset: props.reset,
@@ -373,13 +402,13 @@ 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"].createElement("div", {
-    className: "d-flex flex-row justify-content-end mt-2"
+    className: "".concat(classes.flex, " ").concat(classes.jc_end, " ").concat(classes.mt_5)
   }, ((_props$actions3 = props.actions) === null || _props$actions3 === void 0 ? void 0 : (_props$actions3$reset = _props$actions3.reset) === null || _props$actions3$reset === void 0 ? void 0 : _props$actions3$reset.display) && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "btn btn-danger",
+    className: "".concat(classes.btn, " ").concat(classes.btn_red),
     type: "button",
     onClick: props.reset
   }, ((_props$actions4 = props.actions) === null || _props$actions4 === void 0 ? void 0 : (_props$actions4$reset = _props$actions4.reset) === null || _props$actions4$reset === void 0 ? void 0 : _props$actions4$reset.label) || 'Reset'), isSubmitDisplayed && /*#__PURE__*/_react["default"].createElement("button", {
-    className: "btn btn-success ml-1",
+    className: "".concat(classes.btn, " ").concat(classes.btn_green, " ").concat(classes.ml_10),
     type: "submit"
   }, ((_props$actions5 = props.actions) === null || _props$actions5 === void 0 ? void 0 : (_props$actions5$submi = _props$actions5.submit) === null || _props$actions5$submi === void 0 ? void 0 : _props$actions5$submi.label) || 'Save'));
 };
@@ -399,6 +428,7 @@ var Step = function Step(_ref4) {
       httpClient = _ref4.httpClient,
       defaultValue = _ref4.defaultValue,
       index = _ref4.index;
+  var classes = (0, _styleContext.useCustomStyle)();
 
   if (step.array) {
     return /*#__PURE__*/_react["default"].createElement(ArrayStep, {
@@ -477,7 +507,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("textarea", _extends({
             type: "text",
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null
@@ -590,7 +620,7 @@ var Step = function Step(_ref4) {
             // {...step.props}
             type: step.format || 'text',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null // defaultValue={defaultValue}
@@ -617,7 +647,7 @@ var Step = function Step(_ref4) {
                 }, field),
                 error: error
               }, /*#__PURE__*/_react["default"].createElement(_index.SelectInput, _extends({}, step.props, {
-                className: (0, _classnames["default"])({
+                className: (0, _classnames["default"])(classes.content, {
                   'is-invalid': error
                 }),
                 readOnly: step.disabled ? 'readOnly' : null,
@@ -647,7 +677,7 @@ var Step = function Step(_ref4) {
           }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
             type: step.format || 'number',
             id: entry,
-            className: (0, _classnames["default"])("form-control", {
+            className: (0, _classnames["default"])(classes.input, {
               'is-invalid': error
             }),
             readOnly: step.disabled ? 'readOnly' : null,
@@ -846,14 +876,16 @@ var Step = function Step(_ref4) {
                 },
                 type: "file",
                 multiple: true,
-                className: "form-control d-none",
+                className: classes.d_none,
                 onChange: setFiles
               }), /*#__PURE__*/_react["default"].createElement("button", {
                 type: "button",
-                className: "btn btn-outline-success pl",
+                className: "".concat(classes.btn, " ").concat(classes.flex, " ").concat(classes.ai_center),
                 disabled: uploading,
                 onClick: trigger
-              }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), "Select file"));
+              }, uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Loader, null), !uploading && /*#__PURE__*/_react["default"].createElement(_reactFeather.Upload, null), /*#__PURE__*/_react["default"].createElement("span", {
+                className: "".concat(classes.ml_5)
+              }, "Select file")));
             };
 
             return /*#__PURE__*/_react["default"].createElement(CustomizableInput, {
@@ -891,7 +923,7 @@ var Step = function Step(_ref4) {
       }, /*#__PURE__*/_react["default"].createElement("input", _extends({}, step.props, {
         type: "file",
         id: entry,
-        className: (0, _classnames["default"])("form-control", {
+        className: (0, _classnames["default"])(classes.input, {
           'is-invalid': error
         }),
         readOnly: step.disabled ? 'readOnly' : null,

package/lib/inputs/BooleanInput.js

@@ -9,30 +9,27 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactFeather = require("react-feather");
 
+var _styleContext = require("../styleContext");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var BooleanInput = function BooleanInput(_ref) {
   var onChange = _ref.onChange,
       value = _ref.value;
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "form-group row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-10"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-6 cursor-pointer"
+  var classes = (0, _styleContext.useCustomStyle)();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.cursor_pointer
   }, !!value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleRight, {
-    className: "input__boolean__on",
+    className: classes.input__boolean__on,
     onClick: function onClick() {
       return onChange(false);
     }
   }), !value && /*#__PURE__*/_react["default"].createElement(_reactFeather.ToggleLeft, {
-    className: "input__boolean__off",
+    className: classes.input__boolean__off,
     onClick: function onClick() {
       return onChange(true);
     }
-  }))))));
+  }));
 };
 
 exports.BooleanInput = BooleanInput;

package/lib/inputs/CodeInput.d.ts

@@ -1,6 +1,8 @@
-export function CodeInput({ onChange, value, className, readOnly }: {
+export function CodeInput({ onChange, value, className, readOnly, theme, mode }: {
     onChange: any;
     value: any;
     className?: string | undefined;
     readOnly: any;
+    theme?: string | undefined;
+    mode?: string | undefined;
 }): JSX.Element;

package/lib/inputs/CodeInput.js

@@ -15,10 +15,14 @@ require("ace-builds/src-noconflict/mode-json");
 
 require("ace-builds/src-noconflict/mode-javascript");
 
+require("ace-builds/src-noconflict/mode-css");
+
 require("ace-builds/src-noconflict/mode-markdown");
 
 require("ace-builds/src-noconflict/theme-monokai");
 
+require("ace-builds/src-noconflict/theme-tomorrow");
+
 require("ace-builds/src-noconflict/ext-searchbox");
 
 require("ace-builds/src-noconflict/ext-language_tools");
@@ -30,7 +34,11 @@ var CodeInput = function CodeInput(_ref) {
       value = _ref.value,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className,
-      readOnly = _ref.readOnly;
+      readOnly = _ref.readOnly,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'monokai' : _ref$theme,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'javascript' : _ref$mode;
   return /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
     className: className,
     readOnly: readOnly,
@@ -38,8 +46,8 @@ var CodeInput = function CodeInput(_ref) {
       zIndex: 0,
       isolation: 'isolate'
     },
-    mode: "javascript",
-    theme: "monokai",
+    mode: mode,
+    theme: theme,
     onChange: onChange,
     value: value,
     name: "scriptParam",

package/lib/inputs/Collapse.js

@@ -49,7 +49,7 @@ var Collapse = function Collapse(props) {
   }, /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-group row"
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: "col-sm-10",
+    className: "col-sm-12",
     onClick: toggle,
     style: {
       cursor: 'pointer'

package/lib/inputs/SelectInput.js

@@ -44,7 +44,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var valueToSelectOption = function valueToSelectOption(value) {
-  var isMulti = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var possibleValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var isMulti = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
   if (value === null) {
     return null;
@@ -52,39 +53,51 @@ var valueToSelectOption = function valueToSelectOption(value) {
 
   if (isMulti) {
     return value.map(function (x) {
-      return valueToSelectOption(x);
+      return valueToSelectOption(x, possibleValues, false);
     });
   }
 
+  var maybeValue = (0, _Option.option)(possibleValues.find(function (v) {
+    return v.value === value;
+  }));
   return {
-    label: (value === null || value === void 0 ? void 0 : value.label) || value,
-    value: (value === null || value === void 0 ? void 0 : value.value) || value
+    label: maybeValue.map(function (v) {
+      return v.label;
+    }).getOrElse(value),
+    value: maybeValue.map(function (v) {
+      return v.value;
+    }).getOrElse(value)
   };
 };
 
 var SelectInput = function SelectInput(props) {
+  var possibleValues = (props.possibleValues || []).map(function (v) {
+    return props.transformer ? props.transformer(v) : v;
+  }).map(function (v) {
+    return {
+      label: (v === null || v === void 0 ? void 0 : v.label) || v,
+      value: (v === null || v === void 0 ? void 0 : v.value) || v
+    };
+  });
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       loading = _useState2[0],
       setLoading = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, props.isMulti)),
+  var _useState3 = (0, _react.useState)(possibleValues),
       _useState4 = _slicedToArray(_useState3, 2),
-      value = _useState4[0],
-      setValue = _useState4[1];
+      values = _useState4[0],
+      setValues = _useState4[1];
 
-  var _useState5 = (0, _react.useState)((props.possibleValues || []).map(function (v) {
-    return props.transformer ? props.transformer(v) : v;
-  }).map(function (v) {
-    return valueToSelectOption(v);
-  })),
+  var _useState5 = (0, _react.useState)(valueToSelectOption(props.value || props.defaultValue, possibleValues, props.isMulti)),
       _useState6 = _slicedToArray(_useState5, 2),
-      values = _useState6[0],
-      setValues = _useState6[1];
+      value = _useState6[0],
+      setValue = _useState6[1];
 
   (0, _react.useEffect)(function () {
-    setValue(valueToSelectOption(props.value || props.defaultValue, props.isMulti));
-  }, []);
+    setValue(valueToSelectOption(props.value, values, props.isMulti));
+  }, [props.value, values]);
   (0, _react.useEffect)(function () {
     if (props.optionsFrom) {
       var cond = (0, _Option.option)(props.fetchCondition).map(function (cond) {
@@ -125,8 +138,8 @@ var SelectInput = function SelectInput(props) {
   var createOption = function createOption(option) {
     var fn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
     fn(option);
-    setValues([].concat(_toConsumableArray(values), [valueToSelectOption(option)]));
-    onChange(valueToSelectOption(option));
+    setValues([].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]));
+    onChange([].concat(_toConsumableArray(value), [valueToSelectOption(option, [].concat(_toConsumableArray(values), [valueToSelectOption(option, values)]))]));
   };
 
   if (props.createOption) {

package/lib/style.d.ts

@@ -0,0 +1,156 @@
+export namespace style {
+    const input: {
+        display: string;
+        width: string;
+        padding: string;
+        fontSize: string;
+        color: string;
+        border: string;
+        borderRadius: number;
+        "&[readonly]": {
+            backgroundColor: string;
+            opacity: number;
+        };
+    };
+    namespace btn {
+        const borderRadius: number;
+        const padding: number;
+        const fontSize: string;
+        const cursor: string;
+        const border: number;
+    }
+    namespace btn_sm {
+        const fontSize_1: string;
+        export { fontSize_1 as fontSize };
+        const padding_1: string;
+        export { padding_1 as padding };
+    }
+    const btn_group: {
+        "& > button:not(:last-child)": {
+            borderTopRightRadius: number;
+            borderBottomRightRadius: number;
+        };
+        "& > button:not(:first-child)": {
+            borderTopLeftRadius: number;
+            borderBottomLeftRadius: number;
+        };
+    };
+    const btn_red: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_green: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_blue: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    const btn_grey: {
+        color: string;
+        backgroundColor: string;
+        borderColor: string;
+        "&:hover": {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    namespace txt_red {
+        const color: string;
+    }
+    namespace ml_5 {
+        const marginLeft: number;
+    }
+    namespace ml_10 {
+        const marginLeft_1: number;
+        export { marginLeft_1 as marginLeft };
+    }
+    namespace mt_5 {
+        const marginTop: number;
+    }
+    namespace mt_10 {
+        const marginTop_1: number;
+        export { marginTop_1 as marginTop };
+    }
+    namespace mt_20 {
+        const marginTop_2: number;
+        export { marginTop_2 as marginTop };
+    }
+    namespace mb_5 {
+        const marginBottom: number;
+    }
+    namespace p_15 {
+        const padding_2: number;
+        export { padding_2 as padding };
+    }
+    namespace pr_15 {
+        const paddingRight: number;
+    }
+    namespace d_none {
+        const display: string;
+    }
+    namespace flex {
+        const display_1: string;
+        export { display_1 as display };
+    }
+    namespace flexDirection {
+        const flexDirection_1: string;
+        export { flexDirection_1 as flexDirection };
+    }
+    namespace jc_end {
+        const justifyContent: string;
+    }
+    namespace ac_center {
+        const alignContent: string;
+    }
+    namespace ai_center {
+        const alignItems: string;
+    }
+    namespace cursor_pointer {
+        const cursor_1: string;
+        export { cursor_1 as cursor };
+    }
+    namespace collapse {
+        const display_2: string;
+        export { display_2 as display };
+        const justifyContent_1: string;
+        export { justifyContent_1 as justifyContent };
+        const cursor_2: string;
+        export { cursor_2 as cursor };
+    }
+    namespace collapse_label {
+        export const fontWeight: string;
+        const marginTop_3: number;
+        export { marginTop_3 as marginTop };
+    }
+    const datepicker: {
+        "& input": {
+            borderRadius: string;
+        };
+    };
+    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 };
+    }
+}