@agilemotion/oui-react-js 1.2.6 → 1.2.7

package/dist/components/form/Section.js

@@ -1,186 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Utils = _interopRequireDefault(require("../../Utils"));
-
-var _Observable = _interopRequireDefault(require("../../event/Observable"));
-
-var _FieldSet = _interopRequireDefault(require("./FieldSet"));
-
-var _TabPanel = _interopRequireDefault(require("../TabPanel"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var Section = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _React$useState = _react.default.useState(null),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      fieldGrid = _React$useState2[0],
-      setFieldGrid = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      width = _React$useState4[0],
-      setWidth = _React$useState4[1];
-
-  var _React$useState5 = _react.default.useState({}),
-      _React$useState6 = _slicedToArray(_React$useState5, 1),
-      componentHandles = _React$useState6[0];
-
-  var _React$useState7 = _react.default.useState(true),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      initializing = _React$useState8[0],
-      setInitializing = _React$useState8[1];
-
-  var componentKey = 0;
-
-  _react.default.useEffect(function () {
-    props.handle.api = api();
-
-    if (initializing) {
-      var _fieldGrid = _Utils.default.getFieldGrid(props.config.attributes, props.config.components);
-
-      setFieldGrid(_fieldGrid);
-
-      var _width = !_Utils.default.isNull(props.config.attributes) && !_Utils.default.isNull(props.config.attributes['width']) ? props.config.attributes['width'] : '100%';
-
-      setWidth(_width);
-      setInitializing(false);
-    }
-  });
-
-  var createComponentHandle = function createComponentHandle(component) {
-    if (_Utils.default.isNull(componentHandles[component.id])) {
-      var handle = {};
-      componentHandles[component.id] = handle;
-      return handle;
-    }
-
-    return componentHandles[component.id];
-  };
-
-  function renderComponent(component) {
-    return component.type === 'fieldSet' ? /*#__PURE__*/_react.default.createElement(_FieldSet.default, {
-      keyHandler: props.keyHandler,
-      config: component,
-      form: props.form,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      parentId: props.parentId,
-      loadCompleteHandler: props.loadCompleteHandler,
-      viewId: props.viewId,
-      values: props.values
-    }) : component.type === 'tab' ? /*#__PURE__*/_react.default.createElement(_TabPanel.default, {
-      keyHandler: props.keyHandler,
-      config: component,
-      form: props.form,
-      handle: createComponentHandle(component),
-      ref: /*#__PURE__*/_react.default.createRef(),
-      loadCompleteHandler: props.loadCompleteHandler,
-      viewId: props.viewId,
-      values: props.values
-    }) : /*#__PURE__*/_react.default.createElement("div", null, "Unsupported form section component type " + component.type);
-  }
-
-  var api = function api() {
-    return {
-      get id() {
-        return props.config.id;
-      },
-
-      getChildren: function getChildren() {
-        var children = [];
-        var properties = Object.getOwnPropertyNames(componentHandles);
-
-        var _iterator = _createForOfIteratorHelper(properties),
-            _step;
-
-        try {
-          for (_iterator.s(); !(_step = _iterator.n()).done;) {
-            var property = _step.value;
-            var componentHandle = componentHandles[property];
-            children.push(componentHandle);
-
-            var _iterator2 = _createForOfIteratorHelper(componentHandle.api.getChildren()),
-                _step2;
-
-            try {
-              for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                var child = _step2.value;
-                children.push(child);
-              }
-            } catch (err) {
-              _iterator2.e(err);
-            } finally {
-              _iterator2.f();
-            }
-          }
-        } catch (err) {
-          _iterator.e(err);
-        } finally {
-          _iterator.f();
-        }
-
-        return children;
-      }
-    };
-  };
-
-  var loadCompleteHandler = function loadCompleteHandler(id) {
-    console.log('Load complete event in form layout, for ' + id); // TODO : call props.loadCompleteHandler
-  };
-
-  function render(section) {
-    var margin = !_Utils.default.isNull(section.attributes) && !_Utils.default.isNull(section.attributes['margin']) ? section.attributes['margin'] : null;
-    var counter = 0;
-    return _Utils.default.isNull(section.components) || section.components.length === 0 ? /*#__PURE__*/_react.default.createElement("div", null, " Error: A form section must have components") : /*#__PURE__*/_react.default.createElement("div", null, fieldGrid.rows.map(function (row) {
-      return /*#__PURE__*/_react.default.createElement(_Grid.default, {
-        container: true,
-        spacing: 2,
-        style: {
-          margin: margin,
-          textAlign: 'left',
-          width: '100%'
-        },
-        key: componentKey++
-      }, row.fields.map(function (field) {
-        if (_Utils.default.isNull(field.id)) {
-          field.id = counter + "-" + field.type + '-section-component';
-        }
-
-        return renderComponent(field);
-      }));
-    }));
-  }
-
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: ref,
-    style: {
-      width: width
-    }
-  }, !initializing && !_Utils.default.isNull(fieldGrid) ? render(props.config) : null);
-}));
-
-var _default = Section;
-exports.default = _default;

package/dist/components/form/SelectItem.js

@@ -1,142 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _Utils = _interopRequireDefault(require("../../Utils"));
-
-var _BaseField = require("./BaseField");
-
-var _RestUtils = require("../../RestUtils");
-
-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(); }
-
-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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var SelectItemComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var base = props.base;
-
-  var _React$useState = _react.default.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      optionsLoaded = _React$useState2[0],
-      setOptionsLoaded = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      loadFullOptionList = _React$useState4[0],
-      setLoadFullOptionList = _React$useState4[1];
-
-  var minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-
-  var width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-
-  var defaultValue = _Utils.default.isNull(props.value) ? '' : props.value.id;
-
-  _react.default.useEffect(function () {
-    if (!_Utils.default.isNull(base.value) && !optionsLoaded) {
-      var defaultOptions = [];
-      defaultOptions.push(base.value);
-      base.setSelectOptions(defaultOptions);
-      setOptionsLoaded(true);
-    }
-  }, [base.value]);
-
-  _react.default.useEffect(function () {
-    if (loadFullOptionList && !_Utils.default.isNull(props.config.dataService)) {
-      (0, _RestUtils.invokeRpc)(props.config.dataService, props.handle, props.viewId, function (result) {
-        var data = result.data;
-        var options = [];
-
-        for (var i = 0; i < data.records.length; i++) {
-          var record = data.records[i];
-          options.push(record.map.objectReference);
-        }
-
-        base.setSelectOptions(options);
-      }, function (e) {
-        console.error(e);
-
-        _Utils.default.publishSystemErrorMessage(props.viewId);
-      });
-      setOptionsLoaded(true);
-    }
-  }, [loadFullOptionList]);
-
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    select: true,
-    InputProps: props.InputProps,
-    id: props.id,
-    reference: ref,
-    disabled: base.disabled,
-    required: base.required,
-    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
-    style: {
-      minWidth: minWidth,
-      width: width
-    },
-    SelectProps: {
-      onOpen: function onOpen() {
-        if (!loadFullOptionList) {
-          setLoadFullOptionList(true);
-        }
-      },
-      displayEmpty: props.allowEmptyValue || false
-    },
-    value: !_Utils.default.isNull(base.value) ? base.value.id : defaultValue,
-    className: props.className,
-    onChange: function onChange(e) {
-      base.handleValueChange(e.target.value);
-    },
-    error: base.hasError,
-    helperText: base.errorMessage,
-    margin: "dense",
-    size: "small",
-    variant: "outlined"
-  }, base.selectOptions.map(function (option) {
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
-      key: option.id,
-      value: option.id
-    }, _Utils.default.isNull(option.label) ? "" : option.label.trim());
-  }));
-}));
-
-var SelectItem = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
-    handle: props.handle,
-    valueParser: function valueParser(value) {
-      if (!_Utils.default.isNull(value)) {
-        value.type = 'ObjectReference';
-      }
-
-      return value;
-    }
-  }), function (base) {
-    return /*#__PURE__*/_react.default.createElement(SelectItemComponent, _extends({
-      ref: ref,
-      base: base
-    }, props));
-  });
-}));
-
-var _default = SelectItem;
-exports.default = _default;

package/dist/components/form/TextField.js

@@ -1,108 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _BaseField = require("./BaseField");
-
-var _Utils = _interopRequireDefault(require("../../Utils"));
-
-var _reactRedux = require("react-redux");
-
-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(); }
-
-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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var TextFieldWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var base = props.base;
-
-  var _React$useState = _react.default.useState(props.multiline),
-      _React$useState2 = _slicedToArray(_React$useState, 1),
-      multiline = _React$useState2[0];
-
-  var minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-
-  var width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-
-  var height = _Utils.default.getComponentAttribute(props.config, 'height', multiline ? '200px' : null);
-
-  var rows = height === null ? 4 : height.replace('px', '') / 20 - 1;
-  var secondaryColor = (0, _reactRedux.useSelector)(function (state) {
-    return state.dashboard.secondaryThemeColor;
-  });
-  var ThemedTextField = (0, _styles.withStyles)({
-    root: {
-      '& label.Mui-focused': {
-        color: secondaryColor
-      },
-      '& .MuiInput-underline:after': {
-        borderBottomColor: secondaryColor
-      },
-      '& .MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-          borderColor: secondaryColor
-        }
-      }
-    }
-  })(_TextField.default);
-  return /*#__PURE__*/_react.default.createElement(_TextField.default, {
-    id: props.id,
-    ref: ref,
-    type: props.type,
-    required: base.required,
-    label: !_Utils.default.isNull(props.config.attributes) ? props.config.attributes['label'] : null,
-    value: !_Utils.default.isNull(base.value) || base.value === 0 ? base.value : '',
-    onChange: function onChange(e) {
-      base.handleValueChange(e.target.value);
-    },
-    onKeyPress: props.keyHandler,
-    error: base.hasError,
-    helperText: base.errorMessage,
-    margin: "dense",
-    multiline: multiline,
-    rows: rows,
-    disabled: base.disabled,
-    size: "small",
-    style: {
-      minWidth: minWidth,
-      width: width,
-      height: height,
-      color: 'secondary'
-    },
-    variant: "outlined"
-  });
-}));
-
-var TextField = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
-    handle: props.handle
-  }), function (base) {
-    return /*#__PURE__*/_react.default.createElement(TextFieldWrapper, _extends({
-      ref: ref,
-      base: base
-    }, props));
-  });
-}));
-
-var _default = TextField;
-exports.default = _default;

package/dist/components/form/TimePicker.js

@@ -1,112 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("date-fns");
-
-var _Utils = _interopRequireDefault(require("../../Utils"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));
-
-var _BaseField = require("./BaseField");
-
-var _dateFns2 = _interopRequireDefault(require("@date-io/date-fns"));
-
-var _pickers = require("@material-ui/pickers");
-
-var _styles = require("@material-ui/core/styles");
-
-var _reactRedux = require("react-redux");
-
-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); }
-
-var CustomTimePickerComponent = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var base = props.base;
-  var defaultDate = !_Utils.default.isNull(base.valueObject[base.valueProperty]) ? new Date(base.valueObject[base.valueProperty]) : null;
-
-  var minWidth = _Utils.default.getComponentAttribute(props.config, 'minWidth', '240px');
-
-  var width = _Utils.default.getComponentAttribute(props.config, 'width', '100%');
-
-  var handleDateChange = function handleDateChange(date) {
-    base.setValue(date);
-    base.handleValueChange(date);
-  };
-
-  _react.default.useEffect(function () {
-    base.setValue(defaultDate);
-  }, [props.base.valueObject[props.base.valueProperty]]);
-
-  var secondaryColor = (0, _reactRedux.useSelector)(function (state) {
-    return state.dashboard.secondaryThemeColor;
-  });
-  var ThemedKeyboardTimePicker = (0, _styles.withStyles)({
-    root: {
-      '& label.Mui-focused': {
-        color: secondaryColor
-      },
-      '& .MuiInput-underline:after': {
-        borderBottomColor: secondaryColor
-      },
-      '& .MuiOutlinedInput-root': {
-        '&.Mui-focused fieldset': {
-          borderColor: secondaryColor
-        }
-      }
-    }
-  })(_pickers.KeyboardTimePicker);
-  return /*#__PURE__*/_react.default.createElement(_pickers.MuiPickersUtilsProvider, {
-    utils: _dateFns2.default
-  }, /*#__PURE__*/_react.default.createElement(_Grid.default, {
-    container: true,
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(_pickers.KeyboardTimePicker, {
-    id: props.id,
-    InputProps: props.InputProps,
-    disabled: base.disabled,
-    required: base.required,
-    ampm: false,
-    label: props.config.attributes['label'],
-    value: base.value,
-    className: props.className,
-    error: base.hasError,
-    margin: "dense",
-    inputVariant: "outlined",
-    style: {
-      minWidth: minWidth,
-      width: width,
-      textAlign: 'left'
-    },
-    onChange: handleDateChange,
-    size: "small",
-    KeyboardButtonProps: {
-      'aria-label': 'change time',
-      'disabled': props.disabled
-    },
-    readOnly: props.readOnly
-  })));
-}));
-
-var TimePicker = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_BaseField.BaseField, _extends({}, props, {
-    handle: props.handle,
-    valueParser: function valueParser(value, inbound) {
-      return !_Utils.default.isNull(value) ? inbound ? new Date(value) : value.getTime() : null;
-    }
-  }), function (base) {
-    return /*#__PURE__*/_react.default.createElement(CustomTimePickerComponent, _extends({
-      ref: ref,
-      base: base
-    }, props));
-  });
-}));
-
-var _default = TimePicker;
-exports.default = _default;

package/dist/components/form/TransferList.css

@@ -1,11 +0,0 @@
-.error {
-    color: #f44336;
-    margin-left: 14px;
-    font-size: 0.75rem;
-    margin-top: 3px;
-    text-align: left;
-    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-    font-weight: 400;
-    line-height: 1.66;
-    letter-spacing: 0.03333em;
-}