superdesk-ui-framework 3.0.45 → 3.0.46

package/app/styles/form-elements/_inputs.scss

@@ -918,45 +918,29 @@
 }
 
 .sd-input--invalid {
-    input,
-    textarea {
-        &.sd-input__input {
-            background-color: hsla(357, 79%, 50%, 0.075);
-            border-color: $red;
-
-            &:hover {
-                background-color: hsla(357, 79%, 50%, 0.12);
-                border-color: $red;
-            }
+    .sd-input__input,
+    .sd-input__select,
+    .sd-input__duration-input,
+    .p-multiselect,
+    .p-calendar {
+        background-color: hsla(357, 79%, 50%, 0.075);
+        border-color: $red;
 
-            &:focus {
-                background-color: hsla(357, 79%, 50%, 0.16);
-                border-color: $red;
-                box-shadow: 0 1px 0 0 $red;
-            }
+        &:hover {
+            background-color: hsla(357, 79%, 50%, 0.12);
+            border-color: $red;
         }
-    }
 
-    select {
-        &.sd-input__select {
-            background-color: hsla(357, 79%, 50%, 0.075);
+        &:focus {
+            background-color: hsla(357, 79%, 50%, 0.16);
             border-color: $red;
-
-            &:hover {
-                background-color: hsla(357, 79%, 50%, 0.12);
-                border-color: $red;
-            }
-
-            &:focus {
-                background-color: hsla(357, 79%, 50%, 0.16);
-                border-color: $red;
-                box-shadow: 0 1px 0 0 $red;
-            }
+            box-shadow: 0 1px 0 0 $red;
         }
     }
 
     .sd-input__label,
-    .sd-input__message {
+    .sd-input__message,
+    .sd-input__message-box {
         color: $red;
     }
 }

package/app-typescript/components/DatePicker.tsx

@@ -146,6 +146,7 @@ export class DatePicker extends React.PureComponent<IDatePicker, IState> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/app-typescript/components/DurationInput.tsx

@@ -289,6 +289,7 @@ export class DurationInput extends React.PureComponent<IProps, IState> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/app-typescript/components/Input.tsx

@@ -60,8 +60,8 @@ export class Input extends React.Component<IProps> {
                 required={this.props.required}
                 disabled={this.props.disabled}
                 value={this.props.value}
-                invalid={this.props.error != null ? true : false}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 info={this.props.info}
                 maxLength={this.props.maxLength}
                 inlineLabel={this.props.inlineLabel}

package/app-typescript/components/MultiSelect.tsx

@@ -65,6 +65,7 @@ export class MultiSelect<T> extends React.Component<IProps<T>, IState<T>> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/app-typescript/components/Select.tsx

@@ -33,6 +33,7 @@ class Select extends React.Component<ISelect> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 readonly={this.props.readonly}

package/app-typescript/components/TagInput.tsx

@@ -31,6 +31,7 @@ export class TagInput extends React.Component<IProps> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/app-typescript/components/TimePicker.tsx

@@ -25,6 +25,7 @@ export class TimePicker extends React.PureComponent<IProps> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/app-typescript/components/TreeSelect/TreeSelect.tsx

@@ -613,6 +613,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
             <InputWrapper
                 label={this.props.label}
                 error={this.props.error}
+                invalid={this.props.error != null}
                 required={this.props.required}
                 disabled={this.props.disabled}
                 info={this.props.info}

package/dist/examples.bundle.js

@@ -40057,7 +40057,7 @@ var DatePicker = /** @class */ (function (_super) {
             React.createElement("div", null,
                 React.createElement("span", null, (0, moment_1.default)(this.state.value).format(this.props.dateFormat))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(calendar_1.Calendar, { inputId: this.htmlId, ariaLabelledBy: this.htmlId + 'label', ref: function (ref) {
                     _this.instance = ref;
                 }, value: this.state.value === null ? undefined : this.state.value, onChange: function (event) {
@@ -41615,7 +41615,7 @@ var DurationInput = /** @class */ (function (_super) {
                     React.createElement("span", { className: 'duration-input-preview' }, this.state.seconds),
                     React.createElement("span", { className: 'sd-input__suffix' }, "s"))));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("div", { className: 'sd-input__duration-input' },
                 React.createElement("input", { className: "duration-input ".concat(this.state.blink === 'hour' ? 'blink_me' : ''), type: 'text', id: 'hours', autoComplete: "off", max: 99, min: 0, ref: this.hourRef, value: this.state.hours, disabled: this.props.disabled, onKeyDown: function (event) { return _this.handleKeyDown(event); }, onKeyUp: function (event) { return _this.handleFocusOnKeyUp(event, _this.minuteRef.current); }, onChange: function (event) { _this.handleChange(event, 'hours'); }, onBlur: function (event) { return _this.setState({ hours: _this.zeroPad(event.target.value) }); }, onKeyPress: function (event) {
                         if (!/[0-9]/.test(event.key)) {
@@ -64100,7 +64100,7 @@ var TimePicker = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("input", { value: this.props.value, type: "time", className: "sd-input__input", id: this.htmlId, "aria-labelledby": this.htmlId + 'label', step: this.props.allowSeconds ? 1 : undefined, required: this.props.required, disabled: this.props.disabled, onChange: function (event) {
                     _this.props.onChange(event.target.value);
                 } })));
@@ -64176,7 +64176,7 @@ var TagInput = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.props.value, getLabel: function (item) { return item; } }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(chips_1.Chips, { className: "tags-input--multi-select sd-input__input ".concat(this.props.disabled ? ' tags-input__padding-disabled' : ''), allowDuplicate: false, separator: ",", onChange: function (event) { return onChange(event.value); }, value: value, placeholder: this.props.disabled ? undefined : placeholder, disabled: this.props.disabled })));
     };
     return TagInput;
@@ -64897,7 +64897,7 @@ var TreeSelect = /** @class */ (function (_super) {
                         getBorderColor: this.props.getBorderColor,
                     }, items: this.state.value, valueTemplate: this.props.valueTemplate, getLabel: this.props.getLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("div", { className: "tags-input sd-input__input tags-input--".concat(this.props.allowMultiple ? 'multi-select' : 'single-select'), ref: this.treeSelectRef },
                 this.props.allowMultiple
                     ? React.createElement("div", { className: "tags-input__tags" },
@@ -66687,7 +66687,7 @@ var Input = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, invalid: this.props.error != null ? true : false, error: this.props.error, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
+        return (React.createElement(InputWrapper_1.InputWrapper, { label: this.props.label, required: this.props.required, disabled: this.props.disabled, value: this.props.value, error: this.props.error, invalid: this.props.error != null, info: this.props.info, maxLength: this.props.maxLength, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, size: (_a = this.props.size) !== null && _a !== void 0 ? _a : 'medium', fullWidth: this.props.fullWidth, htmlId: this.htmlId, boxedStyle: this.props.boxedStyle, boxedLable: this.props.boxedLable, tabindex: this.props.tabindex },
             React.createElement("input", { className: 'sd-input__input', type: (_b = this.props.type) !== null && _b !== void 0 ? _b : 'text', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId + 'label', tabIndex: this.props.tabindex, onChange: this.handleChange, placeholder: this.props.placeholder, disabled: this.props.disabled })));
     };
     return Input;
@@ -66763,7 +66763,7 @@ var Select = /** @class */ (function (_super) {
             return (React.createElement("div", null,
                 React.createElement("span", null, this.props.value)));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
     };
     return Select;
@@ -117299,7 +117299,7 @@ var MultiSelect = /** @class */ (function (_super) {
         if (this.props.preview) {
             return (React.createElement(SelectPreview_1.SelectPreview, { kind: { mode: 'multi-select' }, items: this.state.value, valueTemplate: this.props.selectedItemTemplate, getLabel: this.props.optionLabel }));
         }
-        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
+        return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, htmlId: this.htmlId, tabindex: this.props.tabindex },
             React.createElement(multiselect_1.MultiSelect, { panelClassName: classes, value: this.props.value, options: this.props.options, onChange: function (_a) {
                     var value = _a.value;
                     return _this.props.onChange(value);
@@ -130896,14 +130896,14 @@ var InputsDoc = /** @class */ (function (_super) {
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.disabled, label: { text: 'Disabled input' }, onChange: function (value) { _this.setState({ disabled: value }); } }),
                                 React.createElement(app_typescript_1.Checkbox, { checked: this.state.inlineLabel, label: { text: 'Label positioned inline' }, onChange: function (value) { _this.setState({ inlineLabel: value }); } }))),
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_1.Select, { value: this.state.value, label: 'Select label', error: 'This is error message', info: 'This is some hint message', required: this.state.required, disabled: this.state.disabled, inlineLabel: this.state.inlineLabel, onChange: function (value) {
+                            React.createElement(app_typescript_1.Select, { value: this.state.value, label: 'Select label', info: 'This is some hint message', required: this.state.required, disabled: this.state.disabled, inlineLabel: this.state.inlineLabel, onChange: function (value) {
                                     _this.setState({
                                         value: value,
                                     });
                                 } },
                                 React.createElement(app_typescript_1.Option, null, "Option 1"),
                                 React.createElement(app_typescript_1.Option, null, "Option 2"))))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Select\n                            value={this.state.value}\n                            label='Select label'\n                            error='This is error message'\n                            info='This is some hint message'\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            inlineLabel={this.state.inlineLabel}\n                            onChange={(value) => {\n                                this.setState({\n                                    value: value,\n                                })\n                            }}\n                        >\n                            <Option>Option 1</Option>\n                            <Option>Option 2</Option>\n                        </Select>\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <Select\n                            value={this.state.value}\n                            label='Select label'\n                            info='This is some hint message'\n                            required={this.state.required}\n                            disabled={this.state.disabled}\n                            inlineLabel={this.state.inlineLabel}\n                            onChange={(value) => {\n                                this.setState({\n                                    value: value,\n                                })\n                            }}\n                        >\n                            <Option>Option 1</Option>\n                            <Option>Option 2</Option>\n                        </Select>\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'string', default: '/', description: 'Value of the component.' }),
@@ -133720,7 +133720,7 @@ var DatePickerExample = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement(app_typescript_1.DatePicker, { value: this.state.date, dateFormat: "YYYY-MM-DD", onChange: function (date) {
                 _this.setState({ date: date });
-            }, label: 'This is Label', info: 'This is info', error: 'This is error' }));
+            }, label: 'This is Label', info: 'This is info' }));
     };
     return DatePickerExample;
 }(React.PureComponent));
@@ -133747,7 +133747,7 @@ var DatePickerDoc = /** @class */ (function (_super) {
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement(app_typescript_1.DatePickerISO, { value: '2019-01-01', dateFormat: "YYYY-MM-DD", onChange: function (date) {
                                 _this.setState({ today: date });
-                            }, label: 'This is Label', info: 'This is info', error: 'This is error' }))),
+                            }, label: 'This is Label', info: 'This is info' }))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <DatePicker\n                            value={this.state.date}\n                            onChange={(date) => {\n                                this.setState({date});\n                            }}\n                            dateFormat=\"YYYY-MM-DD\"\n                            shortcuts={[\n                                {label: 'tomorrow', days: 1},\n                                {label: 'yesterday', days: -1},\n                            ]}\n                            locale={{\n                                firstDayOfWeek: 1,\n                                dayNames: [\n                                    \"domingo\", \"lunes\", \"martes\", \"mi\u00E9rcoles\",\n                                    \"jueves\", \"viernes\", \"s\u00E1bado\",\n                                ],\n                                dayNamesShort: [\n                                    \"dom\", \"lun\", \"mar\", \"mi\u00E9\",\n                                    \"jue\", \"vie\", \"s\u00E1b\",\n                                ],\n                                dayNamesMin: [\n                                    \"D\", \"L\", \"M\", \"X\",\n                                    \"J\", \"V\", \"S\",\n                                ],\n                                monthNames: [\n                                    \"enero\", \"febrero\", \"marzo\", \"abril\",\n                                    \"mayo\", \"junio\", \"julio\", \"agosto\",\n                                    \"septiembre\", \"octubre\", \"noviembre\",\n                                    \"diciembre\",\n                                ],\n                                monthNamesShort: [\n                                    \"ene\", \"feb\", \"mar\", \"abr\", \"may\",\n                                    \"jun\", \"jul\", \"ago\", \"sep\", \"oct\",\n                                    \"nov\", \"dic\",\n                                ],\n                            }}\n                        />\n                    ")),
             React.createElement("p", { className: "docs-page__paragraph" }, "DatePicker with headerButtonBar:"),
             React.createElement(Markup.ReactMarkup, null,
@@ -133755,8 +133755,8 @@ var DatePickerDoc = /** @class */ (function (_super) {
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement(app_typescript_1.DatePicker, { value: this.state.date, dateFormat: "YYYY-MM-DD", onChange: function (date) {
                                 _this.setState({ date: date });
-                            }, label: 'This is Label', info: 'This is info', error: 'This is error', headerButtonBar: [{ days: 0, label: 'today' }, { days: 1, label: 'tomorow' }, { days: 2, label: 'in 2 days' }] }))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DatePicker\n                            value={this.state.date}\n                            dateFormat=\"YYYY-MM-DD\"\n                            onChange={(date) => {\n                                this.setState({date});\n                            }}\n                            label={'This is Label'}\n                            info={'This is info'}\n                            error={'This is error'}\n                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}\n                        />\n                    ")),
+                            }, label: 'This is Label', info: 'This is info', headerButtonBar: [{ days: 0, label: 'today' }, { days: 1, label: 'tomorow' }, { days: 2, label: 'in 2 days' }] }))),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DatePicker\n                            value={this.state.date}\n                            dateFormat=\"YYYY-MM-DD\"\n                            onChange={(date) => {\n                                this.setState({date});\n                            }}\n                            label='This is Label'\n                            info='This is info'\n                            headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}\n                        />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'Date', default: '/', description: 'Value of the component.' }),
@@ -133842,7 +133842,7 @@ var TimePickerExample = /** @class */ (function (_super) {
         var _this = this;
         return (React.createElement(TimePicker_1.TimePicker, { value: this.state.time, onChange: function (time) {
                 _this.setState({ time: time });
-            }, allowSeconds: true, label: 'This is Label', info: 'This is info', error: 'This is error' }));
+            }, allowSeconds: true, label: 'This is Label', info: 'This is info' }));
     };
     return TimePickerExample;
 }(React.PureComponent));
@@ -133859,7 +133859,7 @@ var TimePickerDoc = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row' },
                         React.createElement(TimePickerExample, null))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TimePicker\n                            value={this.state.time}\n                            onChange={(time) => {\n                                this.setState({time});\n                            }}\n                            allowSeconds\n                            label={'This is Label'}\n                            info={'This is info'}\n                            error={'This is error'}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TimePicker\n                            value={this.state.time}\n                            onChange={(time) => {\n                                this.setState({time});\n                            }}\n                            allowSeconds\n                            label='This is Label'\n                            info='This is info'\n                        />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: true, type: 'string', default: '/', description: 'Item value.' }),
@@ -138940,12 +138940,12 @@ var TagInputDocs = /** @class */ (function (_super) {
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row' },
-                        React.createElement(TagInput_1.TagInput, { value: this.state.value, placeholder: "Type Here", label: 'Tag-input Label', info: 'Info Message', error: 'Error Message', onChange: function (value) {
+                        React.createElement(TagInput_1.TagInput, { value: this.state.value, placeholder: "Type Here", label: 'Tag-input Label', info: 'Info Message', onChange: function (value) {
                                 _this.setState({
                                     value: value,
                                 });
                             } }))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TagInput\n                            value={this.state.value}\n                            placeholder=\"Type Here\"\n                            label={'Tag-input Label'}\n                            info={'Info Message'}\n                            error={'Error Message'}\n                            onChange={(value) => {\n                                this.setState({\n                                    value: value,\n                                });\n                            }}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TagInput\n                            value={this.state.value}\n                            placeholder=\"Type Here\"\n                            label='Tag-input Label'\n                            info='Info Message'\n                            onChange={(value) => {\n                                this.setState({\n                                    value: value,\n                                });\n                            }}\n                        />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'Array<T>', default: '/', description: 'Value of the component.' }),
@@ -142418,7 +142418,7 @@ var MultiselectDocs = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(app_typescript_2.MultiSelect, { preview: true, value: this.state.value, options: ItemArr, optionLabel: function (option) { return option.name; }, label: 'This is Label', info: 'This is info', placeholder: 'Select a color', filter: true, showSelectAll: true, zIndex: 2000, onChange: function (e) { return _this.setState({ value: e }); } })))),
+                            React.createElement(app_typescript_2.MultiSelect, { value: this.state.value, options: ItemArr, optionLabel: function (option) { return option.name; }, label: 'This is Label', info: 'This is info', placeholder: 'Select a color', filter: true, showSelectAll: true, zIndex: 2000, onChange: function (e) { return _this.setState({ value: e }); } })))),
                 React.createElement(Markup.ReactMarkupCode, null, "\n                        <MultiSelect\n                            value={this.state.value}\n                            options={ItemArr}\n                            optionLabel={(option) => option.name}\n                            label='This is Label'\n                            info='This is info'\n                            placeholder='Select a color'\n                            filter\n                            showSelectAll\n                            zIndex={2000}\n                            onChange={(e: any) => this.setState({value: e})}\n                        />\n                    ")),
             React.createElement("p", { className: 'docs-page__paragraph' }, "MultiSelect with custom template."),
             React.createElement(Markup.ReactMarkup, null,
@@ -142717,11 +142717,11 @@ var TreeSelectDocs = /** @class */ (function (_super) {
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return options; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, searchPlaceholder: 'Search...', info: 'Info Message', error: 'Error Message', label: 'TreeSelect Label', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
+                            React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [{ name: 'Category1' }], getOptions: function () { return options; }, getId: function (item) { return item.name; }, getLabel: function (item) { return item.name; }, selectBranchWithChildren: true, allowMultiple: true, label: 'TreeSelect Label', info: 'Info Message', searchPlaceholder: 'Search...', getBackgroundColor: function (item) { return item.bgColor; }, valueTemplate: function (item, Wrapper) {
                                     return (React.createElement(Wrapper, { backgroundColor: item.bgColor },
                                         React.createElement("span", null, item.name)));
                                 }, onChange: function (e) { return false; } })))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind='synchronous'\n                            value={[{name: 'Item 1'}, {name: 'Item 2'}]}\n                            getOptions={() => options}\n                            getId={(item) => item.name}\n                            getLabel={(item) => item.name}\n                            selectBranchWithChildren\n                            allowMultiple\n                            searchPlaceholder='Search...'\n                            info={'Info Message'}\n                            error={'Error Message'}\n                            label={'TreeSelect Label'}\n                            getBackgroundColor={(item: any) => item.bgColor} \n                            valueTemplate={(item, Wrapper) => {\n                                return (\n                                    <Wrapper backgroundColor={item.bgColor}>\n                                        <span>{item.name}</span>\n                                    </Wrapper>\n                                );\n                            }}\n                            onChange={(e) => false}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind='synchronous'\n                            value={[{name: 'Category1'}]}\n                            getOptions={() => options}\n                            getId={(item) => item.name}\n                            getLabel={(item) => item.name}\n                            selectBranchWithChildren\n                            allowMultiple\n                            label='TreeSelect Label'\n                            info='Info Message'\n                            searchPlaceholder='Search...'\n                            getBackgroundColor={(item: any) => item.bgColor} \n                            valueTemplate={(item, Wrapper) => {\n                                return (\n                                    <Wrapper backgroundColor={item.bgColor}>\n                                        <span>{item.name}</span>\n                                    </Wrapper>\n                                );\n                            }}\n                            onChange={(e) => false}\n                        />\n                    ")),
             React.createElement("p", { className: 'docs-page__paragraph' }, "Asynchronous mode in TreeSelect component."),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
@@ -142733,16 +142733,16 @@ var TreeSelectDocs = /** @class */ (function (_super) {
                                 }, getId: function (_a) {
                                     var display_name = _a.display_name;
                                     return display_name;
-                                }, selectBranchWithChildren: true, allowMultiple: true, searchOptions: searchOptions, info: 'Info Message', error: 'Error Message', label: 'TreeSelect Label', onChange: function (val) {
+                                }, selectBranchWithChildren: true, allowMultiple: true, searchOptions: searchOptions, label: 'TreeSelect Label', info: 'Info Message', onChange: function (val) {
                                     _this.setState({ value: val });
                                 } })))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind=\"asynchronous\"\n                            value={this.state.value}\n                            getLabel={({display_name}) => display_name}\n                            getId={({qcode}) => qcode.display_name}\n                            selectBranchWithChildren\n                            allowMultiple\n                            searchOptions={searchOptions}\n                            onChange={(val) => {\n                                this.setState({value: val});\n                            }}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind=\"asynchronous\"\n                            value={this.state.value}\n                            getLabel={({display_name}) => display_name}\n                            getId={({display_name}) => display_name}\n                            selectBranchWithChildren\n                            allowMultiple\n                            searchOptions={searchOptions}\n                            label='TreeSelect Label'\n                            info='Info Message'\n                            onChange={(val) => {\n                                this.setState({value: val});\n                            }}\n                        />\n                    ")),
             React.createElement("p", { className: 'docs-page__paragraph' }, "SingleSelect mode with custom template."),
             React.createElement(Markup.ReactMarkup, null,
                 React.createElement(Markup.ReactMarkupPreview, null,
                     React.createElement("div", { className: 'docs-page__content-row docs-page__content-row--no-margin' },
                         React.createElement("div", { className: 'form__row' },
-                            React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, getBorderColor: function (item) { return item.border; }, selectBranchWithChildren: true, placeholder: 'Select one', info: 'Info Message', error: 'Error Message', label: 'TreeSelect Label', optionTemplate: function (item) {
+                            React.createElement(TreeSelect_1.TreeSelect, { kind: 'synchronous', value: [], getOptions: function () { return options2; }, getLabel: function (item) { return item.name; }, getId: function (item) { return item.name; }, getBorderColor: function (item) { return item.border; }, selectBranchWithChildren: true, label: 'TreeSelect Label', info: 'Info Message', placeholder: 'Select one', optionTemplate: function (item) {
                                     return React.createElement("div", null,
                                         "Label: ",
                                         item.name);
@@ -142750,7 +142750,7 @@ var TreeSelectDocs = /** @class */ (function (_super) {
                                     return React.createElement(Wrapper, { borderColor: item.border },
                                         React.createElement("span", null, item.name));
                                 }, onChange: function (e) { return false; } })))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind='synchronous'\n                            value={[{name: 'Item 1'}]}\n                            getOptions={() => options2}\n                            getLabel={(item) => item.name}\n                            getId={(item) => item.name}\n                            getBackgroundColor={(item) => item.bgColor}\n                            getBorderColor={(item) => item.border}\n                            selectBranchWithChildren\n                            placeholder='Select one'\n                            optionTemplate={(item: any) => {\n                                return <div>Label: {item.name}</div>\n                            }}\n                            valueTemplate={(item: any, Wrapper) => {\n                                return <Wrapper borderColor={item.border}>\n                                    <span>{item.name}</span>\n                                </Wrapper>\n                            }}\n                            onChange={(e) => false}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <TreeSelect\n                            kind='synchronous'\n                            value={[]}\n                            getOptions={() => options2}\n                            getLabel={(item) => item.name}\n                            getId={(item) => item.name}\n                            getBorderColor={(item) => item.border}\n                            selectBranchWithChildren\n                            label='TreeSelect Label'\n                            info='Info Message'\n                            placeholder='Select one'\n                            optionTemplate={(item: any) => {\n                                return <div>Label: {item.name}</div>\n                            }}\n                            valueTemplate={(item: any, Wrapper) => {\n                                return <Wrapper borderColor={item.border}>\n                                    <span>{item.name}</span>\n                                </Wrapper>\n                            }}\n                            onChange={(e) => false}\n                        />\n                    ")),
             React.createElement("h3", { className: "docs-page__h3" }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'value', isRequired: false, type: 'Array<T>', default: '/', description: 'Value of the component.' }),
@@ -142871,7 +142871,7 @@ var DurationInputDoc = /** @class */ (function (_super) {
                             React.createElement(DurationInput_1.DurationInput, { seconds: this.state.value, label: 'Label', info: 'info message', disabled: this.state.disabled, required: this.state.required, inlineLabel: this.state.inlineLabel, onChange: function (value) {
                                     _this.setState({ value: value });
                                 } })))),
-                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DurationInput\n                            seconds={this.state.value}\n                            label='Label'\n                            info='info message'\n                            disabled={this.state.disabled}\n                            required={this.state.required}\n                            inlineLabel={this.state.inlineLabel}\n                            onChange={(e) => {\n                                this.setState({value: e})\n                            }}\n                        />\n                    ")),
+                React.createElement(Markup.ReactMarkupCode, null, "\n                        <DurationInput\n                            seconds={this.state.value}\n                            label='Label'\n                            info='info message'\n                            disabled={this.state.disabled}\n                            required={this.state.required}\n                            inlineLabel={this.state.inlineLabel}\n                            onChange={(value) => {\n                                this.setState({value})\n                            }}\n                        />\n                    ")),
             React.createElement("h3", { className: 'docs-page__h3' }, "Props"),
             React.createElement(app_typescript_1.PropsList, null,
                 React.createElement(app_typescript_1.Prop, { name: 'hours', isRequired: false, type: 'number', default: '00', description: 'Hours value.' }),
@@ -143355,7 +143355,7 @@ exports.ResizablePanelsDoc = ResizablePanelsDoc;
 /* 688 */
 /***/ (function(module, exports) {
 
-module.exports = {"name":"superdesk-ui-framework","version":"3.0.45","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
+module.exports = {"name":"superdesk-ui-framework","version":"3.0.46","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","@types/enzyme-adapter-react-16":"^1.0.6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","moment":"^2.29.3","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
 
 /***/ }),
 /* 689 */

package/dist/react/DatePicker.tsx

@@ -10,6 +10,7 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
             date: new Date(),
         };
     }
+
     render() {
         return (
             <DatePicker
@@ -18,9 +19,8 @@ class DatePickerExample extends React.PureComponent<{}, {date: Date | null}> {
                 onChange={(date) => {
                     this.setState({date});
                 }}
-                label={'This is Label'}
-                info={'This is info'}
-                error={'This is error'}
+                label='This is Label'
+                info='This is info'
             />
         );
     }
@@ -40,6 +40,7 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
             date: new Date(),
         };
     }
+
     render() {
         return (
             <section className="docs-page__container">
@@ -67,9 +68,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                                 onChange={(date) => {
                                     this.setState({today: date});
                                 }}
-                                label={'This is Label'}
-                                info={'This is info'}
-                                error={'This is error'}
+                                label='This is Label'
+                                info='This is info'
                             />
                         </div>
                     </Markup.ReactMarkupPreview>
@@ -123,9 +123,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                                 onChange={(date) => {
                                     this.setState({date});
                                 }}
-                                label={'This is Label'}
-                                info={'This is info'}
-                                error={'This is error'}
+                                label='This is Label'
+                                info='This is info'
                                 headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
                             />
                         </div>
@@ -137,9 +136,8 @@ export default class DatePickerDoc extends React.Component<{}, IState> {
                             onChange={(date) => {
                                 this.setState({date});
                             }}
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
+                            label='This is Label'
+                            info='This is info'
                             headerButtonBar={[{days: 0, label: 'today'}, {days: 1, label: 'tomorow'}, {days: 2, label: 'in 2 days'}]}
                         />
                     `}</Markup.ReactMarkupCode>

package/dist/react/DurationInput.tsx

@@ -70,8 +70,8 @@ export default class DurationInputDoc extends React.Component<{}, IState> {
                             disabled={this.state.disabled}
                             required={this.state.required}
                             inlineLabel={this.state.inlineLabel}
-                            onChange={(e) => {
-                                this.setState({value: e})
+                            onChange={(value) => {
+                                this.setState({value})
                             }}
                         />
                     `}</Markup.ReactMarkupCode>

package/dist/react/MultiSelect.tsx

@@ -63,7 +63,6 @@ export class MultiselectDocs extends React.Component<{}, IState> {
                         <div className='docs-page__content-row docs-page__content-row--no-margin'>
                             <div className='form__row'>
                                 <MultiSelect
-                                preview
                                     value={this.state.value}
                                     options={ItemArr}
                                     optionLabel={(option) => option.name}

package/dist/react/Selects.tsx

@@ -55,7 +55,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
                                 <Select
                                     value={this.state.value}
                                     label='Select label'
-                                    error='This is error message'
                                     info='This is some hint message'
                                     required={this.state.required}
                                     disabled={this.state.disabled}
@@ -77,7 +76,6 @@ export default class InputsDoc extends React.Component<{}, IState> {
                         <Select
                             value={this.state.value}
                             label='Select label'
-                            error='This is error message'
                             info='This is some hint message'
                             required={this.state.required}
                             disabled={this.state.disabled}

package/dist/react/TagInputDocs.tsx

@@ -30,9 +30,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                             <TagInput
                                 value={this.state.value}
                                 placeholder="Type Here"
-                                label={'Tag-input Label'}
-                                info={'Info Message'}
-                                error={'Error Message'}
+                                label='Tag-input Label'
+                                info='Info Message'
                                 onChange={(value) => {
                                     this.setState({
                                         value: value,
@@ -45,9 +44,8 @@ export default class TagInputDocs extends React.Component<{}, {value: Array<stri
                         <TagInput
                             value={this.state.value}
                             placeholder="Type Here"
-                            label={'Tag-input Label'}
-                            info={'Info Message'}
-                            error={'Error Message'}
+                            label='Tag-input Label'
+                            info='Info Message'
                             onChange={(value) => {
                                 this.setState({
                                     value: value,

package/dist/react/TimePicker.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import * as Markup from '../../js/react';
 import {PropsList, Prop} from '../../../app-typescript';
 import {TimePicker} from '../../../app-typescript/components/TimePicker';
@@ -12,6 +11,7 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
             time: '',
         };
     }
+
     render() {
         return (
             <TimePicker
@@ -20,9 +20,8 @@ class TimePickerExample extends React.PureComponent<{}, {time: string}> {
                     this.setState({time});
                 }}
                 allowSeconds
-                label={'This is Label'}
-                info={'This is info'}
-                error={'This is error'}
+                label='This is Label'
+                info='This is info'
             />
         );
     }
@@ -54,9 +53,8 @@ export default class TimePickerDoc extends React.Component {
                                 this.setState({time});
                             }}
                             allowSeconds
-                            label={'This is Label'}
-                            info={'This is info'}
-                            error={'This is error'}
+                            label='This is Label'
+                            info='This is info'
                         />
                     `}</Markup.ReactMarkupCode>
                 </Markup.ReactMarkup>