@mmb-digital/ds-lilly 0.0.1-alpha.322 → 0.0.1-alpha.326

package/dist/ds-lilly.js

@@ -8585,7 +8585,8 @@ function Layer(props) {
 }
 
 /***/ }),
-/* 12 */
+/* 12 */,
+/* 13 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -8620,7 +8621,6 @@ function initInterpolator(domain, interpolator) {
 
 
 /***/ }),
-/* 13 */,
 /* 14 */
 /***/ (function(module, exports, __webpack_require__) {
 
@@ -11236,7 +11236,7 @@ module.exports = isObject;
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return linear; });
 /* harmony import */ var d3_array__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(888);
 /* harmony import */ var _continuous_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
-/* harmony import */ var _init_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
+/* harmony import */ var _init_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
 /* harmony import */ var _tickFormat_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(624);
 
 
@@ -16720,7 +16720,7 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__67__;
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return implicit; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ordinal; });
-/* harmony import */ var _init_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(12);
+/* harmony import */ var _init_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(13);
 
 
 const implicit = Symbol("implicit");
@@ -32854,7 +32854,7 @@ function nice(domain, interval) {
 var continuous = __webpack_require__(16);
 
 // EXTERNAL MODULE: ./node_modules/d3-scale/src/init.js
-var init = __webpack_require__(12);
+var init = __webpack_require__(13);
 
 // CONCATENATED MODULE: ./node_modules/d3-scale/src/log.js
 
@@ -39310,7 +39310,7 @@ __webpack_require__.d(__webpack_exports__, "b", function() { return /* binding *
 });
 
 // EXTERNAL MODULE: ./node_modules/d3-scale/src/init.js
-var init = __webpack_require__(12);
+var init = __webpack_require__(13);
 
 // EXTERNAL MODULE: ./node_modules/d3-scale/src/ordinal.js
 var ordinal = __webpack_require__(68);
@@ -80091,6 +80091,7 @@ __webpack_require__.d(__webpack_exports__, "SelectMenu", function() { return /*
 __webpack_require__.d(__webpack_exports__, "SelectOption", function() { return /* reexport */ SelectOption; });
 __webpack_require__.d(__webpack_exports__, "Slider", function() { return /* reexport */ Slider_Slider; });
 __webpack_require__.d(__webpack_exports__, "Textarea", function() { return /* reexport */ Textarea; });
+__webpack_require__.d(__webpack_exports__, "Textarea2", function() { return /* reexport */ Textarea2; });
 __webpack_require__.d(__webpack_exports__, "TextareaControl", function() { return /* reexport */ TextareaControl; });
 __webpack_require__.d(__webpack_exports__, "TextInput", function() { return /* reexport */ TextInput; });
 __webpack_require__.d(__webpack_exports__, "TextInputControl", function() { return /* reexport */ TextInputControl; });
@@ -96998,6 +96999,9 @@ var IntegerInput_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 var IntegerInput = function (_a) {
     var _b = _a.allowNegative, allowNegative = _b === void 0 ? false : _b, _c = _a.integerPlaces, integerPlaces = _c === void 0 ? 0 : _c, _d = _a.thousandSeparator, customThousandSeparator = _d === void 0 ? '' : _d, _e = _a.allowLeadingZeros, allowLeadingZeros = _e === void 0 ? false : _e, value = _a.value, maxValue = _a.maxValue, _f = _a.onChange, onChange = _f === void 0 ? es_noop : _f, _g = _a.onBlur, onBlur = _g === void 0 ? es_noop : _g, rest = IntegerInput_rest(_a, ["allowNegative", "integerPlaces", "thousandSeparator", "allowLeadingZeros", "value", "maxValue", "onChange", "onBlur"]);
     var thousandSeparator = es_defaultToEmptyString(customThousandSeparator);
@@ -97222,12 +97226,13 @@ var Label2 = function (_a) {
 
 
 var FormGroup2 = function (_a) {
-    var children = _a.children, error = _a.error, _b = _a.hasError, hasError = _b === void 0 ? false : _b, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, theme = _a.theme;
+    var charCounter = _a.charCounter, children = _a.children, error = _a.error, _b = _a.hasError, hasError = _b === void 0 ? false : _b, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, name = _a.name, theme = _a.theme;
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-group2', { 'f-group2--disabled': isDisabled, 'f-group2--error': hasError }, theme) },
         label && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Label2, { htmlFor: name, identifier: name + "_label", labelTooltip: labelTooltip }, label)),
         children,
-        help && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlHelp", id: name + "_help" }, help)),
-        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { "aria-live": "assertive", className: "f-validationMsg f-validationMsg--invalid", id: name + "_errorMessage" }, error)));
+        charCounter && charCounter.max > 0 && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-controlCounter', { 'f-controlCounter--error': charCounter.length > charCounter.max }) }, (charCounter.length || 0) + " / " + charCounter.max)),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { "aria-live": "assertive", className: "f-validationMsg f-validationMsg--invalid", id: name + "_errorMessage" }, error),
+        help && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlHelp", id: name + "_help" }, help))));
 };
 
 // CONCATENATED MODULE: ./src/components/Form/Select2/_elements_/Select2CategorisedOptions.tsx
@@ -102457,6 +102462,9 @@ var TextInput_assign = (undefined && undefined.__assign) || function () {
 };
 
 
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 var TextInput = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["forwardRef"])(function (props, ref) { return (
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
@@ -102942,6 +102950,9 @@ var getGroupedItemsLength = function (groupedItems) {
     groupedItems.map(function (groupedItem) { return (length = length + groupedItem.items.length); });
     return length;
 };
+/**
+ * @deprecated This component is **deprecated** please use **Select2**
+ */
 var BankAccountSelect = function (_a) {
     var _b = _a.hasAlwaysValue, hasAlwaysValue = _b === void 0 ? true : _b, hasAutocomplete = _a.hasAutocomplete, items = _a.items, rest = BankAccountSelect_rest(_a, ["hasAlwaysValue", "hasAutocomplete", "items"]);
     var itemsLength = !hasGroups(items) ? items.length : getGroupedItemsLength(items);
@@ -103156,6 +103167,9 @@ var DecimalInput_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 var DecimalInput = function (_a) {
     var _b = _a.allowNegative, allowNegative = _b === void 0 ? false : _b, _c = _a.allowLeadingZeroes, allowLeadingZeroes = _c === void 0 ? true : _c, customDecimalSeparator = _a.decimalSeparator, _d = _a.decimalPlaces, decimalPlaces = _d === void 0 ? 2 : _d, _e = _a.integerPlaces, integerPlaces = _e === void 0 ? 0 : _e, _f = _a.thousandSeparator, customThousandSeparator = _f === void 0 ? ' ' : _f, value = _a.value, _g = _a.onChange, onChange = _g === void 0 ? es_noop : _g, _h = _a.onBlur, onBlur = _h === void 0 ? es_noop : _h, rest = DecimalInput_rest(_a, ["allowNegative", "allowLeadingZeroes", "decimalSeparator", "decimalPlaces", "integerPlaces", "thousandSeparator", "value", "onChange", "onBlur"]);
     var thousandSeparator = es_defaultToEmptyString(customThousandSeparator);
@@ -104460,23 +104474,26 @@ function es_reducer(state, action) {
 // CONCATENATED MODULE: ./src/components/Form/FileUpload/_parts_/FileList.tsx
 
 
+
 var FileList = function (_a) {
-    var files = _a.files, handleOnDelete = _a.handleOnDelete, _b = _a.hideImagePreview, hideImagePreview = _b === void 0 ? false : _b, _c = _a.messages, ariaForDelete = _c.ariaForDelete, ariaForShow = _c.ariaForShow, errorMessages = _c.multipleUploaderErrors, onShow = _a.onShow, _d = _a.selectMultiple, selectMultiple = _d === void 0 ? false : _d, uploadProgress = _a.uploadProgress, _e = _a.withProgressBar, withProgressBar = _e === void 0 ? false : _e;
+    var files = _a.files, handleOnDelete = _a.handleOnDelete, _b = _a.hideImagePreview, hideImagePreview = _b === void 0 ? false : _b, _c = _a.messages, ariaForDelete = _c.ariaForDelete, errorMessages = _c.multipleUploaderErrors, onShow = _a.onShow, _d = _a.selectMultiple, selectMultiple = _d === void 0 ? false : _d, uploadProgress = _a.uploadProgress, _e = _a.withProgressBar, withProgressBar = _e === void 0 ? false : _e;
     var handleOnShow = function (id) { return function () { return onShow && onShow(id); }; };
     var handleOnDeleteAction = function (id) { return function () { return handleOnDelete && handleOnDelete(id); }; };
     var renderImage = function (file) {
         if (!file.src)
             return external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null);
         return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-fileUpload__imagePreview') },
-            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("img", { alt: "img - " + file.name, className: "file-img", src: file.src }),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("img", { alt: "", className: "file-img", src: file.src }),
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-fileUpload__imageOverlay" }),
-            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isRounded: true, ariaLabel: ariaForShow + " " + file.name, onlyIconName: "search", theme: "f-fileUpload__overlaySearch", onClick: handleOnShow(file.id) }),
+            external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isRounded: true, "aria-hidden": "true", ariaLabel: "", onlyIconName: "search", theme: "f-fileUpload__overlaySearch", onClick: handleOnShow(file.id) }),
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isRounded: true, ariaLabel: ariaForDelete + " " + file.name, onlyIconName: "bin", theme: "f-fileUpload__overlayDelete", onClick: handleOnDeleteAction(file.id) })));
     };
-    var isFileUploading = function (file) { return uploadProgress && uploadProgress[file.id]; };
+    var isFileUploading = function (file) { return uploadProgress && !es_isNil(uploadProgress[file.id]); };
+    var getUploadProgress = function (file) { return (uploadProgress && uploadProgress[file.id]) || 0; };
     var renderList = function (file) {
         var _a, _b, _c;
         var uploading = isFileUploading(file);
+        var progress = getUploadProgress(file);
         var hasErrors = file.errors && ((_a = file.errors) === null || _a === void 0 ? void 0 : _a.length) > 0;
         var iconName = undefined;
         if (hasErrors) {
@@ -104505,8 +104522,8 @@ var FileList = function (_a) {
                 hasErrors && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-fileUpload__errorTitle') },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("strong", null, file.name + " " + (errorMessages === null || errorMessages === void 0 ? void 0 : errorMessages.didNotUpload)))),
                 !hasErrors && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["Fragment"], null,
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isSmall: true, ariaLabel: ariaForShow, theme: 'f-fileUpload__fileName', type: "transparent", onClick: handleOnShow(file.id) }, file.name),
-                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { ariaLabel: ariaForDelete, color: "red", onlyIconName: uploading ? 'close' : 'bin', type: "transparent", onClick: function () { return handleOnDelete(file.id); } }))),
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { isSmall: true, "aria-hidden": "true", ariaLabel: "", theme: 'f-fileUpload__fileName', type: "transparent", onClick: handleOnShow(file.id) }, file.name),
+                    external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Button, { ariaLabel: ariaForDelete + " " + file.name, color: "red", onlyIconName: uploading ? 'close' : 'bin', type: "transparent", onClick: function () { return handleOnDelete(file.id); } }))),
                 hasErrors &&
                     ((_c = file === null || file === void 0 ? void 0 : file.errors) === null || _c === void 0 ? void 0 : _c.map(function (error, index) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { key: index, className: classBinder_cx('f-fileUpload__errorDesc') },
                         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Text, { component: "div", size: "xSmall", type: "secondary" }, errorMessages &&
@@ -104515,7 +104532,7 @@ var FileList = function (_a) {
                             errorMessages[error.code]))); })),
                 uploading && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-fileUpload__progressBar') },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-fileUpload__progress'), style: {
-                            right: 100 - uploading + "%"
+                            right: 100 - progress + "%"
                         } }))))));
     };
     if (files.length === 1 && !selectMultiple && withProgressBar) {
@@ -104752,12 +104769,12 @@ var Input2_assign = (undefined && undefined.__assign) || function () {
 
 
 var Input2 = function (_a) {
-    var _b = _a.allowLeadingZeros, allowLeadingZeros = _b === void 0 ? true : _b, _c = _a.allowNegative, allowNegative = _c === void 0 ? false : _c, autocomplete = _a.autocomplete, autofocus = _a.autofocus, _d = _a.decimalLimit, decimalLimit = _d === void 0 ? 0 : _d, _e = _a.decimalSeparator, decimalSeparator = _e === void 0 ? ',' : _e, error = _a.error, help = _a.help, _f = _a.integerPlaces, integerPlaces = _f === void 0 ? 0 : _f, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, prefixIconName = _a.prefixIconName, _g = _a.showPassword, showPassword = _g === void 0 ? true : _g, showPasswordTooltip = _a.showPasswordTooltip, suffixIconName = _a.suffixIconName, testId = _a.testId, theme = _a.theme, _h = _a.thousandSeparator, thousandSeparator = _h === void 0 ? '' : _h, _j = _a.type, type = _j === void 0 ? 'text' : _j, unit = _a.unit, outerValue = _a.value;
+    var _b = _a.allowLeadingZeros, allowLeadingZeros = _b === void 0 ? true : _b, _c = _a.allowNegative, allowNegative = _c === void 0 ? false : _c, autocomplete = _a.autocomplete, autofocus = _a.autofocus, _d = _a.decimalLimit, decimalLimit = _d === void 0 ? 0 : _d, _e = _a.decimalSeparator, decimalSeparator = _e === void 0 ? ',' : _e, error = _a.error, help = _a.help, _f = _a.integerPlaces, integerPlaces = _f === void 0 ? 0 : _f, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, maxCharCounter = _a.maxCharCounter, maxLength = _a.maxLength, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, prefixIconName = _a.prefixIconName, _g = _a.showPassword, showPassword = _g === void 0 ? true : _g, showPasswordTooltip = _a.showPasswordTooltip, suffixIconName = _a.suffixIconName, testId = _a.testId, theme = _a.theme, _h = _a.thousandSeparator, thousandSeparator = _h === void 0 ? '' : _h, _j = _a.type, type = _j === void 0 ? 'text' : _j, unit = _a.unit, outerValue = _a.value;
     var minusCharacter = '-';
     var _k = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(outerValue || ''), value = _k[0], setValue = _k[1];
     var _l = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(false), isPasswordVisible = _l[0], setIsPasswordVisible = _l[1];
     var numberRegex = new RegExp(/^-*\d*[,.]*\d*$/);
-    var fromGroupProps = {
+    var formGroupProps = {
         error: error,
         hasError: !!error,
         help: help,
@@ -104765,6 +104782,7 @@ var Input2 = function (_a) {
         label: label,
         labelTooltip: labelTooltip,
         name: name,
+        charCounter: { length: (value === null || value === void 0 ? void 0 : value.length) || 0, max: maxCharCounter || 0 },
         theme: theme
     };
     var getConformedValue = function (value) {
@@ -104875,7 +104893,7 @@ var Input2 = function (_a) {
     var togglePasswordVisibility = function () { return setIsPasswordVisible(!isPasswordVisible); };
     if (type === 'search')
         prefixIconName = 'search';
-    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Input2_assign({}, fromGroupProps),
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Input2_assign({}, formGroupProps),
         external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlGroup" },
             prefix && external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: "f-controlGroup__prefix" }, prefix),
             external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("div", { className: classBinder_cx('f-controlWrap', {
@@ -104885,7 +104903,7 @@ var Input2 = function (_a) {
                 }), "data-testid": testId },
                 prefixIconName && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx('f-controlPrefix') },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: "search", size: "small", theme: "f-controlPrefix__icon" }))),
-                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("input", { "aria-describedby": name + "_help", "aria-errormessage": error ? name + "_errorMessage" : undefined, "aria-invalid": !!error, "aria-labelledby": name + "_label", autoComplete: autocomplete ? 'on' : 'off', autoFocus: autofocus, className: classBinder_cx("f-control2 f-control2--input f-control2__" + (value ? 'value' : 'placeholder')), "data-testid": testId, disabled: isDisabled, id: name, inputMode: getInputMode(), maxLength: maxLength, name: name, placeholder: placeholder, type: getInputType(), value: value, onBlur: handleOnBlur, onChange: handleOnChange, onFocus: onFocus, onPaste: handleOnPaste }),
+                external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("input", { "aria-describedby": name + "_help", "aria-errormessage": error ? name + "_errorMessage" : undefined, "aria-invalid": !!error, "aria-labelledby": name + "_label", autoComplete: autocomplete ? 'on' : 'off', autoFocus: autofocus, className: classBinder_cx("f-control2 f-control2__" + (value ? 'value' : 'placeholder')), "data-testid": testId, disabled: isDisabled, id: name, inputMode: getInputMode(), maxLength: maxLength, name: name, placeholder: placeholder, type: getInputType(), value: value, onBlur: handleOnBlur, onChange: handleOnChange, onFocus: onFocus, onPaste: handleOnPaste }),
                 type === 'password' && showPassword && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(ShowPasswordIcon, { isPasswordVisible: isPasswordVisible, showPasswordTooltip: showPasswordTooltip, togglePasswordVisibility: togglePasswordVisibility })),
                 suffixIconName && (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("span", { className: classBinder_cx('f-controlSuffix') },
                     external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(Icon, { name: suffixIconName, size: "small", theme: "f-controlSuffix__icon" })))),
@@ -105260,6 +105278,9 @@ var PasswordInput_rest = (undefined && undefined.__rest) || function (s, e) {
 
 
 
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 var PasswordInput = function (_a) {
     var hideLabel = _a.hideLabel, name = _a.name, showLabel = _a.showLabel, value = _a.value, props = PasswordInput_rest(_a, ["hideLabel", "name", "showLabel", "value"]);
     return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(WithShowPassword, { hideLabel: hideLabel, name: name, password: value, showLabel: showLabel }, function (_a) {
@@ -106038,6 +106059,9 @@ var Textarea_assign = (undefined && undefined.__assign) || function () {
 
 
 
+/**
+ * @deprecated This component is **deprecated** please use **Textarea2**
+ */
 var Textarea = function (props) { return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormField, Textarea_assign({ className: classBinder_cx('f-control', 'f-control--textarea'), 
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -106046,6 +106070,53 @@ var Textarea = function (props) { return (external_root_React_commonjs2_react_co
 // CONCATENATED MODULE: ./src/components/Form/Textarea/index.ts
 
 
+// CONCATENATED MODULE: ./src/components/Form/Textarea2/Textarea2.tsx
+var Textarea2_assign = (undefined && undefined.__assign) || function () {
+    Textarea2_assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return Textarea2_assign.apply(this, arguments);
+};
+
+
+
+var Textarea2 = function (_a) {
+    var autofocus = _a.autofocus, children = _a.children, error = _a.error, height = _a.height, help = _a.help, isDisabled = _a.isDisabled, label = _a.label, labelTooltip = _a.labelTooltip, maxCharCounter = _a.maxCharCounter, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onPaste = _a.onPaste, placeholder = _a.placeholder, testId = _a.testId, theme = _a.theme, outerValue = _a.value;
+    var _b = Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useState"])(outerValue), value = _b[0], setValue = _b[1];
+    var formGroupProps = {
+        error: error,
+        hasError: !!error,
+        help: help,
+        isDisabled: isDisabled,
+        label: label,
+        labelTooltip: labelTooltip,
+        charCounter: { length: (value === null || value === void 0 ? void 0 : value.length) || 0, max: maxCharCounter || 0 },
+        name: name,
+        theme: theme
+    };
+    Object(external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_["useEffect"])(function () { return setValue(outerValue); }, [outerValue]);
+    var handleOnChange = function (_a) {
+        var value = _a.target.value;
+        setValue(value);
+        onChange && onChange(value);
+    };
+    var handleOnBlur = function (_a) {
+        var value = _a.target.value;
+        setValue(value);
+        onBlur && onBlur(value);
+    };
+    return (external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement(FormGroup2, Textarea2_assign({}, formGroupProps),
+        external_root_React_commonjs2_react_commonjs_react_amd_react_umd_react_default.a.createElement("textarea", { "aria-describedby": name + "_help", "aria-errormessage": error ? name + "_errorMessage" : undefined, "aria-invalid": !!error, "aria-labelledby": name + "_label", autoFocus: autofocus, className: classBinder_cx("f-control2 f-control2--textarea f-control2__" + (value ? 'value' : 'placeholder')), "data-testid": testId, disabled: isDisabled, id: name, name: name, placeholder: placeholder, style: { height: height }, value: value, onBlur: handleOnBlur, onChange: handleOnChange, onFocus: onFocus, onPaste: onPaste }, children)));
+};
+
+// CONCATENATED MODULE: ./src/components/Form/Textarea2/index.ts
+
+
 // CONCATENATED MODULE: ./src/components/Form/TextareaControl/index.ts
 
 
@@ -106112,6 +106183,7 @@ var Toggle = function (_a) {
 
 
 
+
 
 
 

package/dist/types/src/components/Form/BankAccountSelect/BankAccountSelect.d.ts

@@ -5,5 +5,8 @@ export interface BankAccountSelectPropsType extends SelectPropsType {
     /** OnBlur will not reset value. */
     hasAlwaysValue?: boolean;
 }
+/**
+ * @deprecated This component is **deprecated** please use **Select2**
+ */
 export declare const BankAccountSelect: ({ hasAlwaysValue, hasAutocomplete, items, ...rest }: BankAccountSelectPropsType) => JSX.Element;
 //# sourceMappingURL=BankAccountSelect.d.ts.map

package/dist/types/src/components/Form/DecimalInput/DecimalInput.d.ts

@@ -5,5 +5,8 @@ export interface DecimalInputPropsType extends NumberMaskType, FormFieldType {
     onChange: (val: string | number) => void;
     value?: number;
 }
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 export declare const DecimalInput: ({ allowNegative, allowLeadingZeroes, decimalSeparator: customDecimalSeparator, decimalPlaces, integerPlaces, thousandSeparator: customThousandSeparator, value, onChange, onBlur, ...rest }: DecimalInputPropsType) => JSX.Element;
 //# sourceMappingURL=DecimalInput.d.ts.map

package/dist/types/src/components/Form/FileUpload/FileUpload.d.ts

@@ -14,8 +14,6 @@ export interface FileUploadPropsType extends ComponentPropsType {
     maxSizeBytes?: number;
     /** Set of all used text messages. */
     messages: {
-        /** ARIA label for `preview` button */
-        ariaForShow: FileListPropsType['messages']['ariaForShow'];
         /** ARIA label for `delete` button */
         ariaForDelete: FileListPropsType['messages']['ariaForDelete'];
         /** Message for `active` drag area e.g. "Drag file here" */

package/dist/types/src/components/Form/FileUpload/_parts_/FileList.d.ts

@@ -5,7 +5,6 @@ export interface FileListPropsType {
     handleOnDelete: (id: string) => void;
     hideImagePreview?: boolean;
     messages: {
-        ariaForShow: string;
         ariaForDelete: string;
         multipleUploaderErrors?: {
             'file-invalid-type': ReactNode;
@@ -18,5 +17,5 @@ export interface FileListPropsType {
     uploadProgress?: Record<string, number>;
     withProgressBar?: boolean;
 }
-export declare const FileList: ({ files, handleOnDelete, hideImagePreview, messages: { ariaForDelete, ariaForShow, multipleUploaderErrors: errorMessages }, onShow, selectMultiple, uploadProgress, withProgressBar }: FileListPropsType) => JSX.Element;
+export declare const FileList: ({ files, handleOnDelete, hideImagePreview, messages: { ariaForDelete, multipleUploaderErrors: errorMessages }, onShow, selectMultiple, uploadProgress, withProgressBar }: FileListPropsType) => JSX.Element;
 //# sourceMappingURL=FileList.d.ts.map

package/dist/types/src/components/Form/FormGroup2/FormGroup2.d.ts

@@ -3,20 +3,25 @@ import { ComponentPropsType } from '../../../utils';
 export interface FormGroup2PropsType extends ComponentPropsType {
     /** Children to be rendered in the main container. */
     children: ReactNode;
-    /** If `true`, the form group is disabled. */
-    isDisabled?: boolean;
-    /** If `true`, form field is in error state. `hasWarning` is ignored */
-    hasError?: boolean;
     /** Error message shown in error state + switch component to error state. */
     error?: string;
+    /** If `true`, form field is in error state. `hasWarning` is ignored */
+    hasError?: boolean;
     /** Additional information for form field. */
     help?: ReactNode;
+    /** If `true`, the form group is disabled. */
+    isDisabled?: boolean;
     /** Form field label. */
     label?: ReactNode;
     /** Content of additional label tooltip. */
     labelTooltip?: ReactNode;
+    /** Defines counter of maximum characters to be inserted. */
+    charCounter?: {
+        length: number;
+        max: number;
+    };
     /** Name of form field. */
     name: string;
 }
-export declare const FormGroup2: ({ children, error, hasError, help, isDisabled, label, labelTooltip, name, theme }: FormGroup2PropsType) => JSX.Element;
+export declare const FormGroup2: ({ charCounter, children, error, hasError, help, isDisabled, label, labelTooltip, name, theme }: FormGroup2PropsType) => JSX.Element;
 //# sourceMappingURL=FormGroup2.d.ts.map

package/dist/types/src/components/Form/Input2/Input2.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode, SyntheticEvent } from 'react';
+import { ReactNode } from 'react';
 import { FormField2PropsType, IconNameType } from '../../../types';
 export interface Input2PropsType extends FormField2PropsType {
     /** If `true` number can start with zeros. */
@@ -17,8 +17,6 @@ export interface Input2PropsType extends FormField2PropsType {
     integerPlaces?: number;
     /** Sets maximum value length. */
     maxLength?: HTMLInputElement['maxLength'];
-    /** Custom handler function for onPaste event. */
-    onPaste?: (event: SyntheticEvent) => void;
     /** Text placed before input itself. */
     prefix?: ReactNode;
     /** Icon placed inside input before value. */
@@ -41,5 +39,5 @@ export interface Input2PropsType extends FormField2PropsType {
     value?: string;
 }
 export declare type Input2TypeType = 'text' | 'number' | 'password' | 'tel' | 'email' | 'search';
-export declare const Input2: ({ allowLeadingZeros, allowNegative, autocomplete, autofocus, decimalLimit, decimalSeparator, error, help, integerPlaces, isDisabled, label, labelTooltip, maxLength, name, onBlur, onChange, onFocus, onPaste, placeholder, prefix, prefixIconName, showPassword, showPasswordTooltip, suffixIconName, testId, theme, thousandSeparator, type, unit, value: outerValue }: Input2PropsType) => JSX.Element;
+export declare const Input2: ({ allowLeadingZeros, allowNegative, autocomplete, autofocus, decimalLimit, decimalSeparator, error, help, integerPlaces, isDisabled, label, labelTooltip, maxCharCounter, maxLength, name, onBlur, onChange, onFocus, onPaste, placeholder, prefix, prefixIconName, showPassword, showPasswordTooltip, suffixIconName, testId, theme, thousandSeparator, type, unit, value: outerValue }: Input2PropsType) => JSX.Element;
 //# sourceMappingURL=Input2.d.ts.map

package/dist/types/src/components/Form/IntegerInput/IntegerInput.d.ts

@@ -9,5 +9,8 @@ export interface IntegerInputPropsType extends IntegerMaskType, FormFieldType {
     /** Value of the form control. */
     value?: number | string | undefined;
 }
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 export declare const IntegerInput: ({ allowNegative, integerPlaces, thousandSeparator: customThousandSeparator, allowLeadingZeros, value, maxValue, onChange, onBlur, ...rest }: IntegerInputPropsType) => JSX.Element;
 //# sourceMappingURL=IntegerInput.d.ts.map

package/dist/types/src/components/Form/PasswordInput/PasswordInput.d.ts

@@ -4,6 +4,9 @@ interface PasswordInputPropsType extends FormFieldType {
     showLabel?: string;
     value: string;
 }
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 export declare const PasswordInput: ({ hideLabel, name, showLabel, value, ...props }: PasswordInputPropsType) => JSX.Element;
 export {};
 //# sourceMappingURL=PasswordInput.d.ts.map

package/dist/types/src/components/Form/TextInput/TextInput.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import { FormFieldType } from '../';
+/**
+ * @deprecated This component is **deprecated** please use **Input2**
+ */
 export declare const TextInput: React.ForwardRefExoticComponent<FormFieldType & React.RefAttributes<unknown>>;
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/types/src/components/Form/Textarea/Textarea.d.ts

@@ -1,3 +1,6 @@
 import { FormFieldType } from '../';
+/**
+ * @deprecated This component is **deprecated** please use **Textarea2**
+ */
 export declare const Textarea: (props: FormFieldType) => JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/types/src/components/Form/Textarea2/Textarea2.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { FormField2PropsType } from '../../../types';
+export interface Textarea2PropsType extends FormField2PropsType {
+    /** If `true` textarea will be focused after render. */
+    autofocus?: boolean;
+    /** Children to be rendered in the main container. */
+    children?: ReactNode;
+    /** Custom textarea height in px. */
+    height?: number;
+}
+export declare const Textarea2: ({ autofocus, children, error, height, help, isDisabled, label, labelTooltip, maxCharCounter, name, onBlur, onChange, onFocus, onPaste, placeholder, testId, theme, value: outerValue }: Textarea2PropsType) => JSX.Element;
+//# sourceMappingURL=Textarea2.d.ts.map

package/dist/types/src/components/Form/Textarea2/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Textarea2';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Form/index.d.ts

@@ -31,6 +31,7 @@ export * from './SelectMenu';
 export * from './SelectOption';
 export * from './Slider';
 export * from './Textarea';
+export * from './Textarea2';
 export * from './TextareaControl';
 export * from './TextInput';
 export * from './TextInputControl';

package/dist/types/src/types/common.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="css-modules" />
-import { FocusEventHandler, ReactNode } from 'react';
+import { FocusEventHandler, ReactNode, SyntheticEvent } from 'react';
 import { ComponentPropsType } from '../utils';
 declare type ThemeValue = CSSModule | string;
 export declare type Theme = ThemeValue | Array<Theme>;
@@ -16,6 +16,8 @@ export interface FormField2PropsType extends ComponentPropsType {
     label?: ReactNode;
     /** Content of additional label tooltip. */
     labelTooltip?: ReactNode;
+    /** Defines counter of maximum characters to be inserted. (use only for Input or Textarea) */
+    maxCharCounter?: number;
     /** Name of form field. */
     name: string;
     /** Handler for input blur. */
@@ -24,6 +26,8 @@ export interface FormField2PropsType extends ComponentPropsType {
     onChange?: (value: string | number | null) => void;
     /** Function to call when the form control emits a `focus` event. */
     onFocus?: FocusEventHandler<HTMLElement>;
+    /** Custom handler function for onPaste event. */
+    onPaste?: (event: SyntheticEvent) => void;
     /** Placeholder content for empty form field. */
     placeholder?: string;
     value?: string;

package/dist/types/src/types/iconBackground.d.ts

@@ -1,2 +1,2 @@
-export declare type IconBackgroundType = 'info' | 'warning' | 'error' | 'success' | 'blueRed' | 'redLightest' | 'redNormal' | 'redDark' | 'redDarker' | 'redHover' | 'redActive' | 'greenLightest' | 'greenNormal' | 'greenDark' | 'greenDarker' | 'greenDarkest' | 'greenHover' | 'greenActive' | 'orangeLightest' | 'orangeNormal' | 'orangeDark' | 'orangeDarker' | 'orangeHover' | 'orangeActive' | 'primaryLightest' | 'primaryLighter' | 'primaryLight' | 'primaryNormal' | 'primaryDark' | 'primaryDarker' | 'primaryDarkest' | 'primaryHover' | 'primaryActive' | 'cloudLightest' | 'cloudLighter' | 'cloudLight' | 'cloudNormal' | 'cloudDark' | 'cloudDarker' | 'cloudHover' | 'cloudActive' | 'secondaryLightest' | 'secondaryLighter' | 'secondaryLight' | 'secondaryNormal' | 'secondaryDark' | 'secondaryDarker' | 'secondaryDarkest' | 'secondaryHover' | 'secondaryActive' | 'greyLightest' | 'greyLighter' | 'greyLight' | 'greyNormal' | 'greyDark' | 'greyDarker' | 'greyDarkest' | 'greyHover' | 'greyActive' | 'goldNormal' | 'goldDark' | 'goldDarker' | 'whiteNormal' | 'blackNormal' | 'categoryYellow' | 'categoryOrange' | 'categoryPink' | 'categoryCherry' | 'categoryViolet' | 'categoryOceanBlue' | 'categorySkyBlue' | 'categoryMidnightBlue' | 'categorySemiBlue' | 'categoryTorquise' | 'categoryMintGreen' | 'categoryForestGreen' | 'categoryOliveGreen' | 'thirdPartyFacebook' | 'thirdPartyTwitter';
+export declare type IconBackgroundType = 'info' | 'warning' | 'error' | 'success' | 'blueRed' | 'blueRedDark' | 'redLightest' | 'redNormal' | 'redDark' | 'redDarker' | 'redHover' | 'redActive' | 'greenLightest' | 'greenNormal' | 'greenDark' | 'greenDarker' | 'greenDarkest' | 'greenHover' | 'greenActive' | 'orangeLightest' | 'orangeNormal' | 'orangeDark' | 'orangeDarker' | 'orangeHover' | 'orangeActive' | 'primaryLightest' | 'primaryLighter' | 'primaryLight' | 'primaryNormal' | 'primaryDark' | 'primaryDarker' | 'primaryDarkest' | 'primaryHover' | 'primaryActive' | 'cloudLightest' | 'cloudLighter' | 'cloudLight' | 'cloudNormal' | 'cloudDark' | 'cloudDarker' | 'cloudHover' | 'cloudActive' | 'secondaryLightest' | 'secondaryLighter' | 'secondaryLight' | 'secondaryNormal' | 'secondaryDark' | 'secondaryDarker' | 'secondaryDarkest' | 'secondaryHover' | 'secondaryActive' | 'greyLightest' | 'greyLighter' | 'greyLight' | 'greyNormal' | 'greyDark' | 'greyDarker' | 'greyDarkest' | 'greyHover' | 'greyActive' | 'goldNormal' | 'goldDark' | 'goldDarker' | 'whiteNormal' | 'blackNormal' | 'categoryYellow' | 'categoryOrange' | 'categoryPink' | 'categoryCherry' | 'categoryViolet' | 'categoryOceanBlue' | 'categorySkyBlue' | 'categoryMidnightBlue' | 'categorySemiBlue' | 'categoryTorquise' | 'categoryMintGreen' | 'categoryForestGreen' | 'categoryOliveGreen' | 'thirdPartyFacebook' | 'thirdPartyTwitter';
 //# sourceMappingURL=iconBackground.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mmb-digital/ds-lilly",
-  "version": "0.0.1-alpha.322",
+  "version": "0.0.1-alpha.326",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": false,