@commercetools-uikit/input-utils 15.15.1 → 16.1.0

package/dist/commercetools-uikit-input-utils.cjs.dev.js

@@ -59,7 +59,6 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "xyzkeb",
   styles: "align-self:flex-start"
@@ -69,7 +68,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlOiBzdHJpbmcgfCBNZXNzYWdlRGVzY3JpcHRvcjtcbiAgaGlkZU1lc3NhZ2U6IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xuICByZW1haW5pbmdMb2NhbGl6YXRpb25zPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyxcbiAgJ3Nob3dNZXNzYWdlJyB8ICdoaWRlTWVzc2FnZSdcbj4gPSB7XG4gIGhpZGVNZXNzYWdlOiBtZXNzYWdlcy5oaWRlLFxuICBzaG93TWVzc2FnZTogbWVzc2FnZXMuc2hvdyxcbn07XG5cbmNvbnN0IExvY2FsaXplZElucHV0VG9nZ2xlID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBsYWJlbE1lc3NhZ2UgPSBwcm9wcy5pc09wZW4gPyBwcm9wcy5oaWRlTWVzc2FnZSA6IHByb3BzLnNob3dNZXNzYWdlO1xuICBjb25zdCBsYWJlbCA9XG4gICAgdHlwZW9mIGxhYmVsTWVzc2FnZSA9PT0gJ3N0cmluZydcbiAgICAgID8gbGFiZWxNZXNzYWdlXG4gICAgICA6IGludGwuZm9ybWF0TWVzc2FnZShsYWJlbE1lc3NhZ2UsIHtcbiAgICAgICAgICByZW1haW5pbmdMYW5ndWFnZXM6IHByb3BzLnJlbWFpbmluZ0xvY2FsaXphdGlvbnMsXG4gICAgICAgIH0pO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBhbGlnbi1zZWxmOiBmbGV4LXN0YXJ0O1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8RmxhdEJ1dHRvblxuICAgICAgICBpY29uPXtwcm9wcy5pY29uID8gcHJvcHMuaWNvbiA6IDxXb3JsZEljb24gLz59XG4gICAgICAgIGxhYmVsPXtsYWJlbH1cbiAgICAgICAgb25DbGljaz17cHJvcHMub25DbGlja31cbiAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdMb2NhbGl6ZWRJbnB1dFRvZ2dsZSc7XG5leHBvcnQgZGVmYXVsdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
-
 const LocalizedInputToggle = props => {
   const intl = reactIntl.useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -86,7 +84,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
-
 LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: _pt__default["default"].element,
   isOpen: _pt__default["default"].bool,
@@ -102,119 +99,94 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
-
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.borderColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-
   return defaultBorderColor;
 };
-
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.fontColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.fontColorForInput;
 };
-
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderWidthForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.borderWidthForInputWhenWarning;
   }
-
   return designSystem.designTokens.borderWidthForInput;
 };
-
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.shadowForInputWhenWarning;
   }
-
   return designSystem.designTokens.shadowForInput;
 };
-
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.backgroundColorForInput;
 };
-
 const getInputStyles = props => {
   return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.paddingForInput, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";background-color:", designSystem.designTokens.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3JkZXJXaWR0aCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7Z2V0SW5wdXRCb3JkZXJXaWR0aChwcm9wcyl9IHNvbGlkICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJveC1zaGFkb3c6ICR7Z2V0SW5wdXRCb3hTaGFkb3cocHJvcHMpfTtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgbWluLWhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIG9wYWNpdHk6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyAnMSdcbiAgICAgIDogJ3Vuc2V0J307IC8qIGZpeCBmb3IgbW9iaWxlIHNhZmFyaSAqL1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAwICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXR9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYDtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9O1xuIl19 */");
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
-
 const getTextareaStyles = props => {
   const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IHZlcnRpY2FsO1xuICAgIGAsXG4gIF07XG4gIHJldHVybiBiYXNlU3R5bGVzO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldFRleHRhcmVhU3R5bGVzIH07XG4iXX0= */")];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const MIN_ROW_COUNT = 1;
-
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = react$1.useRef(null);
   const handleHeightChange = react$1.useCallback((height, meta) => {
     var _ref$current;
-
     const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
-
     if (onHeightChange) {
       onHeightChange(height, rowCount);
     }
   }, [ref, onHeightChange]);
-
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
   }
-
   return jsxRuntime.jsx(TextareaAutosize__default["default"], _objectSpread({
     ref: ref,
     name: props.name,
@@ -229,13 +201,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -246,7 +218,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, utils.filterDataAttributes(props)));
 };
-
 MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
   autoComplete: _pt__default["default"].string,
   className: _pt__default["default"].string,
@@ -296,7 +267,7 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.1";
+var version = "16.1.0";
 
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

package/dist/commercetools-uikit-input-utils.cjs.prod.js

@@ -57,12 +57,10 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
-
 var _ref = {
   name: "xyzkeb",
   styles: "align-self:flex-start"
 } ;
-
 const LocalizedInputToggle = props => {
   const intl = reactIntl.useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -79,7 +77,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
-
 LocalizedInputToggle.propTypes = {};
 LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
@@ -87,117 +84,92 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
-
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.borderColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-
   return defaultBorderColor;
 };
-
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.fontColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.fontColorForInput;
 };
-
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designSystem.designTokens.borderWidthForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.borderWidthForInputWhenWarning;
   }
-
   return designSystem.designTokens.borderWidthForInput;
 };
-
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designSystem.designTokens.shadowForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designSystem.designTokens.shadowForInputWhenWarning;
   }
-
   return designSystem.designTokens.shadowForInput;
 };
-
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.backgroundColorForInput;
 };
-
 const getInputStyles = props => {
   return /*#__PURE__*/react.css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.heightForInput, ";min-height:", designSystem.designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.paddingForInput, ";transition:border-color ", designSystem.designTokens.transitionStandard, ",background-color ", designSystem.designTokens.transitionStandard, ",color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designSystem.designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered), ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";background-color:", designSystem.designTokens.backgroundColorForInputWhenFocused, ";}" + ("" ), "" );
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
-
 const getTextareaStyles = props => {
   const baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + ("" ), "" )];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const MIN_ROW_COUNT = 1;
-
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = react$1.useRef(null);
   const handleHeightChange = react$1.useCallback((height, meta) => {
     var _ref$current;
-
     const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
-
     if (onHeightChange) {
       onHeightChange(height, rowCount);
     }
   }, [ref, onHeightChange]);
-
   if (!props.isReadOnly) ;
-
   return jsxRuntime.jsx(TextareaAutosize__default["default"], _objectSpread({
     ref: ref,
     name: props.name,
@@ -212,13 +184,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -229,7 +201,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, utils.filterDataAttributes(props)));
 };
-
 MultilineInput.propTypes = {};
 MultilineInput.displayName = 'MultilineInput';
 var MultilineInput$1 = MultilineInput;
@@ -254,7 +225,7 @@ const accessibleHiddenInputStyles = {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.1";
+var version = "16.1.0";
 
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

package/dist/commercetools-uikit-input-utils.esm.js

@@ -41,7 +41,6 @@ const defaultProps = {
   hideMessage: messages$1.hide,
   showMessage: messages$1.show
 };
-
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "xyzkeb",
   styles: "align-self:flex-start"
@@ -51,7 +50,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxvY2FsaXplZC1pbnB1dC10b2dnbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTBDYyIsImZpbGUiOiJsb2NhbGl6ZWQtaW5wdXQtdG9nZ2xlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB0eXBlIHsgTWVzc2FnZURlc2NyaXB0b3IgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCB7IE1vdXNlRXZlbnQsIEtleWJvYXJkRXZlbnQsIFJlYWN0RWxlbWVudCB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUludGwgfSBmcm9tICdyZWFjdC1pbnRsJztcbmltcG9ydCBGbGF0QnV0dG9uIGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ZsYXQtYnV0dG9uJztcbmltcG9ydCB7IFdvcmxkSWNvbiB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2ljb25zJztcbmltcG9ydCBtZXNzYWdlcyBmcm9tICcuLi9tZXNzYWdlcy9sb2NhbGl6ZWQtaW5wdXQnO1xuXG5leHBvcnQgdHlwZSBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyA9IHtcbiAgaWNvbj86IFJlYWN0RWxlbWVudDtcbiAgaXNPcGVuPzogYm9vbGVhbjtcbiAgb25DbGljazogKFxuICAgIGV2ZW50OlxuICAgICAgfCBNb3VzZUV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBLZXlib2FyZEV2ZW50PEhUTUxCdXR0b25FbGVtZW50PlxuICAgICAgfCBib29sZWFuXG4gICkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIHNob3dNZXNzYWdlOiBzdHJpbmcgfCBNZXNzYWdlRGVzY3JpcHRvcjtcbiAgaGlkZU1lc3NhZ2U6IHN0cmluZyB8IE1lc3NhZ2VEZXNjcmlwdG9yO1xuICByZW1haW5pbmdMb2NhbGl6YXRpb25zPzogbnVtYmVyO1xufTtcblxuY29uc3QgZGVmYXVsdFByb3BzOiBQaWNrPFxuICBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcyxcbiAgJ3Nob3dNZXNzYWdlJyB8ICdoaWRlTWVzc2FnZSdcbj4gPSB7XG4gIGhpZGVNZXNzYWdlOiBtZXNzYWdlcy5oaWRlLFxuICBzaG93TWVzc2FnZTogbWVzc2FnZXMuc2hvdyxcbn07XG5cbmNvbnN0IExvY2FsaXplZElucHV0VG9nZ2xlID0gKHByb3BzOiBUTG9jYWxpemVkSW5wdXRUb2dnbGVQcm9wcykgPT4ge1xuICBjb25zdCBpbnRsID0gdXNlSW50bCgpO1xuICBjb25zdCBsYWJlbE1lc3NhZ2UgPSBwcm9wcy5pc09wZW4gPyBwcm9wcy5oaWRlTWVzc2FnZSA6IHByb3BzLnNob3dNZXNzYWdlO1xuICBjb25zdCBsYWJlbCA9XG4gICAgdHlwZW9mIGxhYmVsTWVzc2FnZSA9PT0gJ3N0cmluZydcbiAgICAgID8gbGFiZWxNZXNzYWdlXG4gICAgICA6IGludGwuZm9ybWF0TWVzc2FnZShsYWJlbE1lc3NhZ2UsIHtcbiAgICAgICAgICByZW1haW5pbmdMYW5ndWFnZXM6IHByb3BzLnJlbWFpbmluZ0xvY2FsaXphdGlvbnMsXG4gICAgICAgIH0pO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Y3NzYFxuICAgICAgICBhbGlnbi1zZWxmOiBmbGV4LXN0YXJ0O1xuICAgICAgYH1cbiAgICA+XG4gICAgICA8RmxhdEJ1dHRvblxuICAgICAgICBpY29uPXtwcm9wcy5pY29uID8gcHJvcHMuaWNvbiA6IDxXb3JsZEljb24gLz59XG4gICAgICAgIGxhYmVsPXtsYWJlbH1cbiAgICAgICAgb25DbGljaz17cHJvcHMub25DbGlja31cbiAgICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIC8+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kZWZhdWx0UHJvcHMgPSBkZWZhdWx0UHJvcHM7XG5Mb2NhbGl6ZWRJbnB1dFRvZ2dsZS5kaXNwbGF5TmFtZSA9ICdMb2NhbGl6ZWRJbnB1dFRvZ2dsZSc7XG5leHBvcnQgZGVmYXVsdCBMb2NhbGl6ZWRJbnB1dFRvZ2dsZTtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$1
 };
-
 const LocalizedInputToggle = props => {
   const intl = useIntl();
   const labelMessage = props.isOpen ? props.hideMessage : props.showMessage;
@@ -68,7 +66,6 @@ const LocalizedInputToggle = props => {
     })
   });
 };
-
 LocalizedInputToggle.propTypes = process.env.NODE_ENV !== "production" ? {
   icon: _pt.element,
   isOpen: _pt.bool,
@@ -84,119 +81,94 @@ var LocalizedInputToggle$1 = LocalizedInputToggle;
 
 const getInputBorderColor = function (props) {
   let defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designTokens.borderColorForInput;
-
   if (props.isDisabled || props.disabled) {
     return designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designTokens.borderColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designTokens.borderColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designTokens.borderColorForInputWhenReadonly;
   }
-
   return defaultBorderColor;
 };
-
 const getInputFontColor = props => {
   if (props.isDisabled || props.disabled) {
     return designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designTokens.fontColorForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designTokens.fontColorForInputWhenWarning;
   }
-
   if (props.isReadOnly || props.readOnly) {
     return designTokens.fontColorForInputWhenReadonly;
   }
-
   return designTokens.fontColorForInput;
 };
-
 const getInputBorderWidth = props => {
   if (props.hasError) {
     return designTokens.borderWidthForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designTokens.borderWidthForInputWhenWarning;
   }
-
   return designTokens.borderWidthForInput;
 };
-
 const getInputBoxShadow = props => {
   if (props.hasError) {
     return designTokens.shadowForInputWhenError;
   }
-
   if (props.hasWarning) {
     return designTokens.shadowForInputWhenWarning;
   }
-
   return designTokens.shadowForInput;
 };
-
 const getInputBackgroundColor = props => {
   if (props.isDisabled || props.disabled) {
     return designTokens.backgroundColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designTokens.backgroundColorForInputWhenReadonly;
   }
-
   return designTokens.backgroundColorForInput;
 };
-
 const getInputStyles = props => {
   return /*#__PURE__*/css("appearance:none;background-color:", getInputBackgroundColor(props), ";border:", getInputBorderWidth(props), " solid ", getInputBorderColor(props), ";border-radius:", designTokens.borderRadiusForInput, ";box-sizing:border-box;box-shadow:", getInputBoxShadow(props), ";color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designTokens.fontSizeForInput, ";height:", designTokens.heightForInput, ";min-height:", designTokens.heightForInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designTokens.paddingForInput, ";transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ",color ", designTokens.transitionStandard, ",box-shadow ", designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designTokens.placeholderFontColorForInput, ";}:active:not(:disabled):not(:read-only),:hover:not(:disabled):not(:read-only):not(:focus){border-color:", getInputBorderColor(props, designTokens.borderColorForInputWhenHovered), ";background-color:", designTokens.backgroundColorForInputWhenHovered, ";}:focus:not(:read-only){box-shadow:", designTokens.shadowForInputWhenFocused, ";border-color:", designTokens.borderColorForInputWhenFocused, ";background-color:", designTokens.backgroundColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE4RVkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKFxuICBwcm9wczogVElucHV0UHJvcHMsXG4gIGRlZmF1bHRCb3JkZXJDb2xvcjogc3RyaW5nID0gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRcbikgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVmYXVsdEJvcmRlckNvbG9yO1xufTtcblxuY29uc3QgZ2V0SW5wdXRGb250Q29sb3IgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5mb250Q29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3JkZXJXaWR0aCA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmhhc0Vycm9yKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbkVycm9yO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5ib3JkZXJXaWR0aEZvcklucHV0O1xufTtcblxuY29uc3QgZ2V0SW5wdXRCb3hTaGFkb3cgPSAocHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuc2hhZG93Rm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLnNoYWRvd0ZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgcmV0dXJuIGRlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dDtcbn07XG5cbmNvbnN0IGdldElucHV0QmFja2dyb3VuZENvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWQ7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7Z2V0SW5wdXRCYWNrZ3JvdW5kQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXI6ICR7Z2V0SW5wdXRCb3JkZXJXaWR0aChwcm9wcyl9IHNvbGlkICR7Z2V0SW5wdXRCb3JkZXJDb2xvcihwcm9wcyl9O1xuICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0fTtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIGJveC1zaGFkb3c6ICR7Z2V0SW5wdXRCb3hTaGFkb3cocHJvcHMpfTtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5oZWlnaHRGb3JJbnB1dH07XG4gICAgbWluLWhlaWdodDogJHtkZXNpZ25Ub2tlbnMuaGVpZ2h0Rm9ySW5wdXR9O1xuICAgIG9wYWNpdHk6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyAnMSdcbiAgICAgIDogJ3Vuc2V0J307IC8qIGZpeCBmb3IgbW9iaWxlIHNhZmFyaSAqL1xuICAgIG91dGxpbmU6IG5vbmU7XG4gICAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgICBwYWRkaW5nOiAwICR7ZGVzaWduVG9rZW5zLnBhZGRpbmdGb3JJbnB1dH07XG4gICAgdHJhbnNpdGlvbjogYm9yZGVyLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yICR7ZGVzaWduVG9rZW5zLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYm94LXNoYWRvdyAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9O1xuICAgIHdpZHRoOiAxMDAlO1xuXG4gICAgJjo6cGxhY2Vob2xkZXIge1xuICAgICAgY29sb3I6ICR7ZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXR9O1xuICAgIH1cbiAgICA6YWN0aXZlOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSxcbiAgICA6aG92ZXI6bm90KDpkaXNhYmxlZCk6bm90KDpyZWFkLW9ubHkpOm5vdCg6Zm9jdXMpIHtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtnZXRJbnB1dEJvcmRlckNvbG9yKFxuICAgICAgICBwcm9wcyxcbiAgICAgICAgZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuSG92ZXJlZFxuICAgICAgKX07XG4gICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5Ib3ZlcmVkfTtcbiAgICB9XG4gICAgOmZvY3VzOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3gtc2hhZG93OiAke2Rlc2lnblRva2Vucy5zaGFkb3dGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJvcmRlci1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0V2hlbkZvY3VzZWR9O1xuICAgIH1cbiAgYDtcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9O1xuIl19 */");
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 /* we need this line-height to achieve 32px height when the component has only one row */
-const sizeInputLineHeight = '22px'; // NOTE: order is important here
+const sizeInputLineHeight = '22px';
+
+// NOTE: order is important here
 // * a disabled-field currently does not display warning/error-states so it takes precedence
 // * a readonly-field cannot be changed, but it might be relevant for validation, so error and warning are checked first
 // how you can interact with the field is controlled separately by the props, this only influences visuals
-
 const getTextareaStyles = props => {
   const baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.paddingForMultilineInput, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + (process.env.NODE_ENV === "production" ? "" : ";label:baseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZU8iLCJmaWxlIjoibXVsdGlsaW5lLWlucHV0LnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfSBmcm9tICcuLi9zdHlsZXMnO1xuaW1wb3J0IHR5cGUgeyBUTXVsdGlMaW5lSW5wdXRQcm9wcyB9IGZyb20gJy4vbXVsdGlsaW5lLWlucHV0JztcblxuLyogd2UgbmVlZCB0aGlzIGxpbmUtaGVpZ2h0IHRvIGFjaGlldmUgMzJweCBoZWlnaHQgd2hlbiB0aGUgY29tcG9uZW50IGhhcyBvbmx5IG9uZSByb3cgKi9cbmNvbnN0IHNpemVJbnB1dExpbmVIZWlnaHQgPSAnMjJweCc7XG5cbi8vIE5PVEU6IG9yZGVyIGlzIGltcG9ydGFudCBoZXJlXG4vLyAqIGEgZGlzYWJsZWQtZmllbGQgY3VycmVudGx5IGRvZXMgbm90IGRpc3BsYXkgd2FybmluZy9lcnJvci1zdGF0ZXMgc28gaXQgdGFrZXMgcHJlY2VkZW5jZVxuLy8gKiBhIHJlYWRvbmx5LWZpZWxkIGNhbm5vdCBiZSBjaGFuZ2VkLCBidXQgaXQgbWlnaHQgYmUgcmVsZXZhbnQgZm9yIHZhbGlkYXRpb24sIHNvIGVycm9yIGFuZCB3YXJuaW5nIGFyZSBjaGVja2VkIGZpcnN0XG4vLyBob3cgeW91IGNhbiBpbnRlcmFjdCB3aXRoIHRoZSBmaWVsZCBpcyBjb250cm9sbGVkIHNlcGFyYXRlbHkgYnkgdGhlIHByb3BzLCB0aGlzIG9ubHkgaW5mbHVlbmNlcyB2aXN1YWxzXG5jb25zdCBnZXRUZXh0YXJlYVN0eWxlcyA9IChwcm9wczogVE11bHRpTGluZUlucHV0UHJvcHMpID0+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMucGFkZGluZ0Zvck11bHRpbGluZUlucHV0fTtcbiAgICAgIGxpbmUtaGVpZ2h0OiAke3NpemVJbnB1dExpbmVIZWlnaHR9O1xuICAgICAgZmxleDogYXV0bztcbiAgICAgIHdvcmQtYnJlYWs6IGJyZWFrLXdvcmQ7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgICByZXNpemU6IHZlcnRpY2FsO1xuICAgIGAsXG4gIF07XG4gIHJldHVybiBiYXNlU3R5bGVzO1xufTtcblxuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIGltcG9ydC9wcmVmZXItZGVmYXVsdC1leHBvcnRcbmV4cG9ydCB7IGdldFRleHRhcmVhU3R5bGVzIH07XG4iXX0= */")];
   return baseStyles;
-}; // eslint-disable-next-line import/prefer-default-export
+};
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 const MIN_ROW_COUNT = 1;
-
 const MultilineInput = props => {
   const onHeightChange = props.onHeightChange;
   const ref = useRef(null);
   const handleHeightChange = useCallback((height, meta) => {
     var _ref$current;
-
     const rowCount = Math.floor(((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollHeight) || 0 / meta.rowHeight);
-
     if (onHeightChange) {
       onHeightChange(height, rowCount);
     }
   }, [ref, onHeightChange]);
-
   if (!props.isReadOnly) {
     process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'MultilineInput: "onChange" is required when is not read only.') : void 0;
   }
-
   return jsx(TextareaAutosize, _objectSpread({
     ref: ref,
     name: props.name,
@@ -211,13 +183,13 @@ const MultilineInput = props => {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props) // Allow to override the styles by passing a `className` prop.
+    css: getTextareaStyles(props)
+    // Allow to override the styles by passing a `className` prop.
     // Custom styles can also be passed using the `css` prop from emotion.
     // https://emotion.sh/docs/css-prop#style-precedence
     ,
     className: props.className
-    /* ARIA */
-    ,
+    /* ARIA */,
     "aria-readonly": props.isReadOnly,
     "aria-multiline": "true",
     "aria-invalid": props['aria-invalid'],
@@ -228,7 +200,6 @@ const MultilineInput = props => {
     cacheMeasurements: true
   }, filterDataAttributes(props)));
 };
-
 MultilineInput.propTypes = process.env.NODE_ENV !== "production" ? {
   autoComplete: _pt.string,
   className: _pt.string,
@@ -278,6 +249,6 @@ const accessibleHiddenInputStyles = process.env.NODE_ENV === "production" ? {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.15.1";
+var version = "16.1.0";
 
 export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/input-utils",
   "description": "Utilities for working with input components.",
-  "version": "15.15.1",
+  "version": "16.1.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,20 +21,20 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/design-system": "15.15.1",
-    "@commercetools-uikit/flat-button": "15.15.1",
-    "@commercetools-uikit/icons": "15.15.1",
-    "@commercetools-uikit/utils": "15.15.1",
+    "@commercetools-uikit/design-system": "16.1.0",
+    "@commercetools-uikit/flat-button": "16.1.0",
+    "@commercetools-uikit/icons": "16.1.0",
+    "@commercetools-uikit/utils": "16.1.0",
     "@emotion/react": "^11.10.5",
     "prop-types": "15.8.1",
     "react-textarea-autosize": "8.4.0"
   },
   "devDependencies": {
     "react": "17.0.2",
-    "react-intl": "^5.25.1"
+    "react-intl": "^6.3.2"
   },
   "peerDependencies": {
     "react": "17.x",
-    "react-intl": "5.x"
+    "react-intl": "6.x"
   }
 }