npm - @commercetools-uikit/input-utils - Versions diffs - 15.2.4 → 15.3.0 - Mend

@commercetools-uikit/input-utils 15.2.4 → 15.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

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

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var _pt = require('prop-types');
+var react$1 = require('react');
+var reactIntl = require('react-intl');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -12,18 +19,13 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var designSystem = require('@commercetools-uikit/design-system');
-var _pt = require('prop-types');
-var react$1 = require('react');
-var reactIntl = require('react-intl');
-var FlatButton = require('@commercetools-uikit/flat-button');
-var icons = require('@commercetools-uikit/icons');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var TextareaAutosize = require('react-textarea-autosize');
 var utils = require('@commercetools-uikit/utils');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -32,8 +34,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _pt__default = /*#__PURE__*/_interopDefault(_pt);
-var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
 var messages$1 = reactIntl.defineMessages({
@@ -86,54 +86,48 @@ LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
 var LocalizedInputToggle$1 = LocalizedInputToggle;
-function ownKeys$1(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$1(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$1(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$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var getInputBorderColor = function getInputBorderColor(vars, props) {
+var getInputBorderColor = function getInputBorderColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designSystem.designTokens.borderColorForInputWhenDisabled];
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designSystem.designTokens.borderColorForInputWhenError];
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designSystem.designTokens.borderColorForInputWhenWarning];
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designSystem.designTokens.borderColorForInputWhenReadonly];
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-  return vars[designSystem.designTokens.borderColorForInput];
+  return designSystem.designTokens.borderColorForInput;
 };
-var getInputFontColor = function getInputFontColor(vars, props) {
+var getInputFontColor = function getInputFontColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designSystem.designTokens.fontColorForInputWhenDisabled];
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designSystem.designTokens.fontColorForInputWhenError];
+    return designSystem.designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designSystem.designTokens.fontColorForInputWhenWarning];
+    return designSystem.designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designSystem.designTokens.fontColorForInputWhenReadonly];
+    return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-  return vars[designSystem.designTokens.fontColorForInput];
+  return designSystem.designTokens.fontColorForInput;
 };
-var getInputStyles = function getInputStyles(props, theme) {
-  var vars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme);
-  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled || props.disabled ? vars[designSystem.designTokens.backgroundColorForInputWhenDisabled] : vars[designSystem.designTokens.backgroundColorForInput], ";border:1px solid ", getInputBorderColor(vars, props), ";border-radius:", vars[designSystem.designTokens.borderRadiusForInput], ";box-sizing:border-box;color:", getInputFontColor(vars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", vars[designSystem.designTokens.fontSizeForInput], ";height:", vars.sizeHeightInput, ";min-height:", vars.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", vars.spacingS, ";transition:border-color ", vars.transitionStandard, ",background-color ", vars.transitionStandard, ",color ", vars.transitionStandard, ",box-shadow ", vars.transitionStandard, ";width:100%;&::placeholder{color:", vars[designSystem.designTokens.placeholderFontColorForInput], ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", vars[designSystem.designTokens.borderColorForInputWhenFocused], ";}:focus{box-shadow:inset 0 0 0 2px ", vars[designSystem.designTokens.borderColorForInputWhenFocused], ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRFkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7XG4gIGN1c3RvbVByb3BlcnRpZXMsXG4gIGRlc2lnblRva2Vucyxcbn0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm9yZGVyQ29sb3IgPSAodmFyczogVEV4dGVuZGVkVGhlbWUsIHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiB2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkXTtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcl07XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nXTtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiB2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5XTtcbiAgfVxuICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dF07XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9ICh2YXJzOiBURXh0ZW5kZWRUaGVtZSwgcHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkXTtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3JdO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmddO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5XTtcbiAgfVxuICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRdO1xufTtcblxuY29uc3QgZ2V0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzLCB0aGVtZT86IFRoZW1lKSA9PiB7XG4gIGNvbnN0IHZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLmN1c3RvbVByb3BlcnRpZXMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyB2YXJzW2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZF1cbiAgICAgIDogdmFyc1tkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRdfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IodmFycywgcHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke3ZhcnNbZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0XX07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcih2YXJzLCBwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHt2YXJzW2Rlc2lnblRva2Vucy5mb250U2l6ZUZvcklucHV0XX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuc2l6ZUhlaWdodElucHV0fTtcbiAgICBtaW4taGVpZ2h0OiAke3ZhcnMuc2l6ZUhlaWdodElucHV0fTtcbiAgICBvcGFjaXR5OiAke3Byb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWRcbiAgICAgID8gJzEnXG4gICAgICA6ICd1bnNldCd9OyAvKiBmaXggZm9yIG1vYmlsZSBzYWZhcmkgKi9cbiAgICBvdXRsaW5lOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfSwgYm94LXNoYWRvdyAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgICB3aWR0aDogMTAwJTtcblxuICAgICY6OnBsYWNlaG9sZGVyIHtcbiAgICAgIGNvbG9yOiAke3ZhcnNbZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXRdfTtcbiAgICB9XG4gICAgOmFjdGl2ZSxcbiAgICA6Zm9jdXMsXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7dmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkXX07XG4gICAgfVxuICAgIDpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAycHhcbiAgICAgICAgJHt2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWRdfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
+var getInputStyles = function getInputStyles(props) {
+  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled || props.disabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";border:1px solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.sizeHeightInput, ";min-height:", designSystem.designTokens.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.spacingS, ";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,:focus,:hover:not(:disabled):not(:read-only){border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}:focus{box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q1kiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkgfHwgcHJvcHMucmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWRcbiAgICAgIDogZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5zaXplSGVpZ2h0SW5wdXR9O1xuICAgIG1pbi1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLnNpemVIZWlnaHRJbnB1dH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6IDAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ1N9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJveC1zaGFkb3cgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgICB3aWR0aDogMTAwJTtcblxuICAgICY6OnBsYWNlaG9sZGVyIHtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5wbGFjZWhvbGRlckZvbnRDb2xvckZvcklucHV0fTtcbiAgICB9XG4gICAgOmFjdGl2ZSxcbiAgICA6Zm9jdXMsXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgfVxuICAgIDpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAycHggJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
 }; // eslint-disable-next-line import/prefer-default-export
 /* we need this line-height to achieve 32px height when the component has only one row */
@@ -142,8 +136,8 @@ var sizeInputLineHeight = '22px'; // NOTE: order is important here
 // * 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
-var getTextareaStyles = function getTextareaStyles(props, theme) {
-  var baseStyles = [getInputStyles(props, theme), /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingS, ";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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JPIiwiZmlsZSI6Im11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9IGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgdHlwZSB7IFRNdWx0aUxpbmVJbnB1dFByb3BzIH0gZnJvbSAnLi9tdWx0aWxpbmUtaW5wdXQnO1xuXG4vKiB3ZSBuZWVkIHRoaXMgbGluZS1oZWlnaHQgdG8gYWNoaWV2ZSAzMnB4IGhlaWdodCB3aGVuIHRoZSBjb21wb25lbnQgaGFzIG9ubHkgb25lIHJvdyAqL1xuY29uc3Qgc2l6ZUlucHV0TGluZUhlaWdodCA9ICcyMnB4JztcblxuLy8gTk9URTogb3JkZXIgaXMgaW1wb3J0YW50IGhlcmVcbi8vICogYSBkaXNhYmxlZC1maWVsZCBjdXJyZW50bHkgZG9lcyBub3QgZGlzcGxheSB3YXJuaW5nL2Vycm9yLXN0YXRlcyBzbyBpdCB0YWtlcyBwcmVjZWRlbmNlXG4vLyAqIGEgcmVhZG9ubHktZmllbGQgY2Fubm90IGJlIGNoYW5nZWQsIGJ1dCBpdCBtaWdodCBiZSByZWxldmFudCBmb3IgdmFsaWRhdGlvbiwgc28gZXJyb3IgYW5kIHdhcm5pbmcgYXJlIGNoZWNrZWQgZmlyc3Rcbi8vIGhvdyB5b3UgY2FuIGludGVyYWN0IHdpdGggdGhlIGZpZWxkIGlzIGNvbnRyb2xsZWQgc2VwYXJhdGVseSBieSB0aGUgcHJvcHMsIHRoaXMgb25seSBpbmZsdWVuY2VzIHZpc3VhbHNcbmNvbnN0IGdldFRleHRhcmVhU3R5bGVzID0gKHByb3BzOiBUTXVsdGlMaW5lSW5wdXRQcm9wcywgdGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IGJhc2VTdHlsZXMgPSBbXG4gICAgZ2V0SW5wdXRTdHlsZXMocHJvcHMsIHRoZW1lKSxcbiAgICBjc3NgXG4gICAgICBwYWRkaW5nOiAke3ZhcnMuc3BhY2luZ1hzfSAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgbGluZS1oZWlnaHQ6ICR7c2l6ZUlucHV0TGluZUhlaWdodH07XG4gICAgICBmbGV4OiBhdXRvO1xuICAgICAgd29yZC1icmVhazogYnJlYWstd29yZDtcbiAgICAgIHdoaXRlLXNwYWNlOiBwcmUtd3JhcDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
+var getTextareaStyles = function getTextareaStyles(props) {
+  var baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacingXs, " ", designSystem.designTokens.spacingS, ";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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ1hzfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nU307XG4gICAgICBsaW5lLWhlaWdodDogJHtzaXplSW5wdXRMaW5lSGVpZ2h0fTtcbiAgICAgIGZsZXg6IGF1dG87XG4gICAgICB3b3JkLWJyZWFrOiBicmVhay13b3JkO1xuICAgICAgd2hpdGUtc3BhY2U6IHByZS13cmFwO1xuICAgICAgcmVzaXplOiB2ZXJ0aWNhbDtcbiAgICBgLFxuICBdO1xuICByZXR1cm4gYmFzZVN0eWxlcztcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRUZXh0YXJlYVN0eWxlcyB9O1xuIl19 */")];
   return baseStyles;
 }; // eslint-disable-next-line import/prefer-default-export
@@ -153,7 +147,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var MIN_ROW_COUNT = 1;
 var MultilineInput = function MultilineInput(props) {
-  var theme = react.useTheme();
   var onHeightChange = props.onHeightChange;
   var ref = react$1.useRef(null);
   var handleHeightChange = react$1.useCallback(function (height, meta) {
@@ -184,7 +177,7 @@ var MultilineInput = function MultilineInput(props) {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props, theme) // 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
     ,
@@ -251,7 +244,7 @@ var 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.2.4";
+var version = "15.3.0";
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

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

@@ -3,6 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+require('prop-types');
+var react$1 = require('react');
+var reactIntl = require('react-intl');
+var FlatButton = require('@commercetools-uikit/flat-button');
+var icons = require('@commercetools-uikit/icons');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
@@ -12,18 +19,12 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var designSystem = require('@commercetools-uikit/design-system');
-require('prop-types');
-var react$1 = require('react');
-var reactIntl = require('react-intl');
-var FlatButton = require('@commercetools-uikit/flat-button');
-var icons = require('@commercetools-uikit/icons');
-var jsxRuntime = require('@emotion/react/jsx-runtime');
 var TextareaAutosize = require('react-textarea-autosize');
 var utils = require('@commercetools-uikit/utils');
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
@@ -32,7 +33,6 @@ var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachIns
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var FlatButton__default = /*#__PURE__*/_interopDefault(FlatButton);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
 var messages$1 = reactIntl.defineMessages({
@@ -77,54 +77,48 @@ LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
 var LocalizedInputToggle$1 = LocalizedInputToggle;
-function ownKeys$1(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$1(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$1(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$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var getInputBorderColor = function getInputBorderColor(vars, props) {
+var getInputBorderColor = function getInputBorderColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designSystem.designTokens.borderColorForInputWhenDisabled];
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designSystem.designTokens.borderColorForInputWhenError];
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designSystem.designTokens.borderColorForInputWhenWarning];
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designSystem.designTokens.borderColorForInputWhenReadonly];
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-  return vars[designSystem.designTokens.borderColorForInput];
+  return designSystem.designTokens.borderColorForInput;
 };
-var getInputFontColor = function getInputFontColor(vars, props) {
+var getInputFontColor = function getInputFontColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designSystem.designTokens.fontColorForInputWhenDisabled];
+    return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designSystem.designTokens.fontColorForInputWhenError];
+    return designSystem.designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designSystem.designTokens.fontColorForInputWhenWarning];
+    return designSystem.designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designSystem.designTokens.fontColorForInputWhenReadonly];
+    return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-  return vars[designSystem.designTokens.fontColorForInput];
+  return designSystem.designTokens.fontColorForInput;
 };
-var getInputStyles = function getInputStyles(props, theme) {
-  var vars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme);
-  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled || props.disabled ? vars[designSystem.designTokens.backgroundColorForInputWhenDisabled] : vars[designSystem.designTokens.backgroundColorForInput], ";border:1px solid ", getInputBorderColor(vars, props), ";border-radius:", vars[designSystem.designTokens.borderRadiusForInput], ";box-sizing:border-box;color:", getInputFontColor(vars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", vars[designSystem.designTokens.fontSizeForInput], ";height:", vars.sizeHeightInput, ";min-height:", vars.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", vars.spacingS, ";transition:border-color ", vars.transitionStandard, ",background-color ", vars.transitionStandard, ",color ", vars.transitionStandard, ",box-shadow ", vars.transitionStandard, ";width:100%;&::placeholder{color:", vars[designSystem.designTokens.placeholderFontColorForInput], ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", vars[designSystem.designTokens.borderColorForInputWhenFocused], ";}:focus{box-shadow:inset 0 0 0 2px ", vars[designSystem.designTokens.borderColorForInputWhenFocused], ";}" + ("" ), "" );
+var getInputStyles = function getInputStyles(props) {
+  return /*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled || props.disabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";border:1px solid ", getInputBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designSystem.designTokens.fontSizeForInput, ";height:", designSystem.designTokens.sizeHeightInput, ";min-height:", designSystem.designTokens.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designSystem.designTokens.spacingS, ";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,:focus,:hover:not(:disabled):not(:read-only){border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}:focus{box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" );
 }; // eslint-disable-next-line import/prefer-default-export
 /* we need this line-height to achieve 32px height when the component has only one row */
@@ -133,8 +127,8 @@ var sizeInputLineHeight = '22px'; // NOTE: order is important here
 // * 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
-var getTextareaStyles = function getTextareaStyles(props, theme) {
-  var baseStyles = [getInputStyles(props, theme), /*#__PURE__*/react.css("padding:", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingS, ";line-height:", sizeInputLineHeight, ";flex:auto;word-break:break-word;white-space:pre-wrap;resize:vertical;" + ("" ), "" )];
+var getTextareaStyles = function getTextareaStyles(props) {
+  var baseStyles = [getInputStyles(props), /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacingXs, " ", designSystem.designTokens.spacingS, ";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
@@ -144,7 +138,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var MIN_ROW_COUNT = 1;
 var MultilineInput = function MultilineInput(props) {
-  var theme = react.useTheme();
   var onHeightChange = props.onHeightChange;
   var ref = react$1.useRef(null);
   var handleHeightChange = react$1.useCallback(function (height, meta) {
@@ -173,7 +166,7 @@ var MultilineInput = function MultilineInput(props) {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props, theme) // 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
     ,
@@ -215,7 +208,7 @@ var accessibleHiddenInputStyles = {
 var accessibleHiddenInputStyles$1 = accessibleHiddenInputStyles;
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.3.0";
 exports.LocalizedInputToggle = LocalizedInputToggle$1;
 exports.MultilineInput = MultilineInput$1;

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

@@ -1,4 +1,11 @@
-import { css, useTheme } from '@emotion/react';
+import { css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+import _pt from 'prop-types';
+import { useRef, useCallback } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import FlatButton from '@commercetools-uikit/flat-button';
+import { WorldIcon } from '@commercetools-uikit/icons';
+import { jsx } from '@emotion/react/jsx-runtime';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
@@ -8,13 +15,6 @@ import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import { customProperties, designTokens } from '@commercetools-uikit/design-system';
-import _pt from 'prop-types';
-import { useRef, useCallback } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import FlatButton from '@commercetools-uikit/flat-button';
-import { WorldIcon } from '@commercetools-uikit/icons';
-import { jsx } from '@emotion/react/jsx-runtime';
 import TextareaAutosize from 'react-textarea-autosize';
 import { warning, filterDataAttributes } from '@commercetools-uikit/utils';
@@ -68,54 +68,48 @@ LocalizedInputToggle.defaultProps = defaultProps;
 LocalizedInputToggle.displayName = 'LocalizedInputToggle';
 var LocalizedInputToggle$1 = LocalizedInputToggle;
-function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-var getInputBorderColor = function getInputBorderColor(vars, props) {
+var getInputBorderColor = function getInputBorderColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designTokens.borderColorForInputWhenDisabled];
+    return designTokens.borderColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designTokens.borderColorForInputWhenError];
+    return designTokens.borderColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designTokens.borderColorForInputWhenWarning];
+    return designTokens.borderColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designTokens.borderColorForInputWhenReadonly];
+    return designTokens.borderColorForInputWhenReadonly;
   }
-  return vars[designTokens.borderColorForInput];
+  return designTokens.borderColorForInput;
 };
-var getInputFontColor = function getInputFontColor(vars, props) {
+var getInputFontColor = function getInputFontColor(props) {
   if (props.isDisabled || props.disabled) {
-    return vars[designTokens.fontColorForInputWhenDisabled];
+    return designTokens.fontColorForInputWhenDisabled;
   }
   if (props.hasError) {
-    return vars[designTokens.fontColorForInputWhenError];
+    return designTokens.fontColorForInputWhenError;
   }
   if (props.hasWarning) {
-    return vars[designTokens.fontColorForInputWhenWarning];
+    return designTokens.fontColorForInputWhenWarning;
   }
   if (props.isReadOnly || props.readOnly) {
-    return vars[designTokens.fontColorForInputWhenReadonly];
+    return designTokens.fontColorForInputWhenReadonly;
   }
-  return vars[designTokens.fontColorForInput];
+  return designTokens.fontColorForInput;
 };
-var getInputStyles = function getInputStyles(props, theme) {
-  var vars = _objectSpread$1(_objectSpread$1({}, customProperties), theme);
-  return /*#__PURE__*/css("appearance:none;background-color:", props.isDisabled || props.disabled ? vars[designTokens.backgroundColorForInputWhenDisabled] : vars[designTokens.backgroundColorForInput], ";border:1px solid ", getInputBorderColor(vars, props), ";border-radius:", vars[designTokens.borderRadiusForInput], ";box-sizing:border-box;color:", getInputFontColor(vars, props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", vars[designTokens.fontSizeForInput], ";height:", vars.sizeHeightInput, ";min-height:", vars.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", vars.spacingS, ";transition:border-color ", vars.transitionStandard, ",background-color ", vars.transitionStandard, ",color ", vars.transitionStandard, ",box-shadow ", vars.transitionStandard, ";width:100%;&::placeholder{color:", vars[designTokens.placeholderFontColorForInput], ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", vars[designTokens.borderColorForInputWhenFocused], ";}:focus{box-shadow:inset 0 0 0 2px ", vars[designTokens.borderColorForInputWhenFocused], ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwRFkiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUaGVtZSB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7XG4gIGN1c3RvbVByb3BlcnRpZXMsXG4gIGRlc2lnblRva2Vucyxcbn0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVEV4dGVuZGVkVGhlbWUgPSB7XG4gIFtrZXk6IHN0cmluZ106IHN0cmluZztcbn0gJiBUaGVtZTtcblxudHlwZSBUSW5wdXRQcm9wcyA9IHtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGRpc2FibGVkPzogYm9vbGVhbjtcbiAgaGFzRXJyb3I/OiBib29sZWFuO1xuICBoYXNXYXJuaW5nPzogYm9vbGVhbjtcbiAgaXNSZWFkT25seT86IGJvb2xlYW47XG4gIHJlYWRPbmx5PzogYm9vbGVhbjtcbn07XG5cbmNvbnN0IGdldElucHV0Qm9yZGVyQ29sb3IgPSAodmFyczogVEV4dGVuZGVkVGhlbWUsIHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiB2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkRpc2FibGVkXTtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5FcnJvcl07XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5XYXJuaW5nXTtcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiB2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlblJlYWRvbmx5XTtcbiAgfVxuICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dF07XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9ICh2YXJzOiBURXh0ZW5kZWRUaGVtZSwgcHJvcHM6IFRJbnB1dFByb3BzKSA9PiB7XG4gIGlmIChwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkKSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkXTtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3JdO1xuICB9XG4gIGlmIChwcm9wcy5oYXNXYXJuaW5nKSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmddO1xuICB9XG4gIGlmIChwcm9wcy5pc1JlYWRPbmx5IHx8IHByb3BzLnJlYWRPbmx5KSB7XG4gICAgcmV0dXJuIHZhcnNbZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5XTtcbiAgfVxuICByZXR1cm4gdmFyc1tkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRdO1xufTtcblxuY29uc3QgZ2V0SW5wdXRTdHlsZXMgPSAocHJvcHM6IFRJbnB1dFByb3BzLCB0aGVtZT86IFRoZW1lKSA9PiB7XG4gIGNvbnN0IHZhcnM6IFRFeHRlbmRlZFRoZW1lID0ge1xuICAgIC4uLmN1c3RvbVByb3BlcnRpZXMsXG4gICAgLi4udGhlbWUsXG4gIH07XG5cbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyB2YXJzW2Rlc2lnblRva2Vucy5iYWNrZ3JvdW5kQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZF1cbiAgICAgIDogdmFyc1tkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRdfTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IodmFycywgcHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke3ZhcnNbZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1c0ZvcklucHV0XX07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcih2YXJzLCBwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHt2YXJzW2Rlc2lnblRva2Vucy5mb250U2l6ZUZvcklucHV0XX07XG4gICAgaGVpZ2h0OiAke3ZhcnMuc2l6ZUhlaWdodElucHV0fTtcbiAgICBtaW4taGVpZ2h0OiAke3ZhcnMuc2l6ZUhlaWdodElucHV0fTtcbiAgICBvcGFjaXR5OiAke3Byb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWRcbiAgICAgID8gJzEnXG4gICAgICA6ICd1bnNldCd9OyAvKiBmaXggZm9yIG1vYmlsZSBzYWZhcmkgKi9cbiAgICBvdXRsaW5lOiBub25lO1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcGFkZGluZzogMCAke3ZhcnMuc3BhY2luZ1N9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJhY2tncm91bmQtY29sb3IgJHt2YXJzLnRyYW5zaXRpb25TdGFuZGFyZH0sXG4gICAgICBjb2xvciAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfSwgYm94LXNoYWRvdyAke3ZhcnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgICB3aWR0aDogMTAwJTtcblxuICAgICY6OnBsYWNlaG9sZGVyIHtcbiAgICAgIGNvbG9yOiAke3ZhcnNbZGVzaWduVG9rZW5zLnBsYWNlaG9sZGVyRm9udENvbG9yRm9ySW5wdXRdfTtcbiAgICB9XG4gICAgOmFjdGl2ZSxcbiAgICA6Zm9jdXMsXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7dmFyc1tkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkXX07XG4gICAgfVxuICAgIDpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAycHhcbiAgICAgICAgJHt2YXJzW2Rlc2lnblRva2Vucy5ib3JkZXJDb2xvckZvcklucHV0V2hlbkZvY3VzZWRdfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
+var getInputStyles = function getInputStyles(props) {
+  return /*#__PURE__*/css("appearance:none;background-color:", props.isDisabled || props.disabled ? designTokens.backgroundColorForInputWhenDisabled : designTokens.backgroundColorForInput, ";border:1px solid ", getInputBorderColor(props), ";border-radius:", designTokens.borderRadiusForInput, ";box-sizing:border-box;color:", getInputFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";display:flex;flex:1;font-family:inherit;font-size:", designTokens.fontSizeForInput, ";height:", designTokens.sizeHeightInput, ";min-height:", designTokens.sizeHeightInput, ";opacity:", props.isDisabled || props.disabled ? '1' : 'unset', ";outline:none;overflow:hidden;padding:0 ", designTokens.spacingS, ";transition:border-color ", designTokens.transitionStandard, ",background-color ", designTokens.transitionStandard, ",color ", designTokens.transitionStandard, ",box-shadow ", designTokens.transitionStandard, ";width:100%;&::placeholder{color:", designTokens.placeholderFontColorForInput, ";}:active,:focus,:hover:not(:disabled):not(:read-only){border-color:", designTokens.borderColorForInputWhenFocused, ";}:focus{box-shadow:inset 0 0 0 2px ", designTokens.borderColorForInputWhenFocused, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getInputStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q1kiLCJmaWxlIjoic3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5cbnR5cGUgVElucHV0UHJvcHMgPSB7XG4gIGlzRGlzYWJsZWQ/OiBib29sZWFuO1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIGhhc0Vycm9yPzogYm9vbGVhbjtcbiAgaGFzV2FybmluZz86IGJvb2xlYW47XG4gIGlzUmVhZE9ubHk/OiBib29sZWFuO1xuICByZWFkT25seT86IGJvb2xlYW47XG59O1xuXG5jb25zdCBnZXRJbnB1dEJvcmRlckNvbG9yID0gKHByb3BzOiBUSW5wdXRQcm9wcykgPT4ge1xuICBpZiAocHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZCkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5EaXNhYmxlZDtcbiAgfVxuICBpZiAocHJvcHMuaGFzRXJyb3IpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuV2FybmluZztcbiAgfVxuICBpZiAocHJvcHMuaXNSZWFkT25seSB8fCBwcm9wcy5yZWFkT25seSkge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5SZWFkb25seTtcbiAgfVxuICByZXR1cm4gZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dEZvbnRDb2xvciA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgaWYgKHByb3BzLmlzRGlzYWJsZWQgfHwgcHJvcHMuZGlzYWJsZWQpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbkRpc2FibGVkO1xuICB9XG4gIGlmIChwcm9wcy5oYXNFcnJvcikge1xuICAgIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXRXaGVuRXJyb3I7XG4gIH1cbiAgaWYgKHByb3BzLmhhc1dhcm5pbmcpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlbldhcm5pbmc7XG4gIH1cbiAgaWYgKHByb3BzLmlzUmVhZE9ubHkgfHwgcHJvcHMucmVhZE9ubHkpIHtcbiAgICByZXR1cm4gZGVzaWduVG9rZW5zLmZvbnRDb2xvckZvcklucHV0V2hlblJlYWRvbmx5O1xuICB9XG4gIHJldHVybiBkZXNpZ25Ub2tlbnMuZm9udENvbG9yRm9ySW5wdXQ7XG59O1xuXG5jb25zdCBnZXRJbnB1dFN0eWxlcyA9IChwcm9wczogVElucHV0UHJvcHMpID0+IHtcbiAgcmV0dXJuIGNzc2BcbiAgICBhcHBlYXJhbmNlOiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7cHJvcHMuaXNEaXNhYmxlZCB8fCBwcm9wcy5kaXNhYmxlZFxuICAgICAgPyBkZXNpZ25Ub2tlbnMuYmFja2dyb3VuZENvbG9yRm9ySW5wdXRXaGVuRGlzYWJsZWRcbiAgICAgIDogZGVzaWduVG9rZW5zLmJhY2tncm91bmRDb2xvckZvcklucHV0fTtcbiAgICBib3JkZXI6IDFweCBzb2xpZCAke2dldElucHV0Qm9yZGVyQ29sb3IocHJvcHMpfTtcbiAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXNGb3JJbnB1dH07XG4gICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgICBjb2xvcjogJHtnZXRJbnB1dEZvbnRDb2xvcihwcm9wcyl9O1xuICAgIGN1cnNvcjogJHtwcm9wcy5pc0Rpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdkZWZhdWx0J307XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4OiAxO1xuICAgIGZvbnQtZmFtaWx5OiBpbmhlcml0O1xuICAgIGZvbnQtc2l6ZTogJHtkZXNpZ25Ub2tlbnMuZm9udFNpemVGb3JJbnB1dH07XG4gICAgaGVpZ2h0OiAke2Rlc2lnblRva2Vucy5zaXplSGVpZ2h0SW5wdXR9O1xuICAgIG1pbi1oZWlnaHQ6ICR7ZGVzaWduVG9rZW5zLnNpemVIZWlnaHRJbnB1dH07XG4gICAgb3BhY2l0eTogJHtwcm9wcy5pc0Rpc2FibGVkIHx8IHByb3BzLmRpc2FibGVkXG4gICAgICA/ICcxJ1xuICAgICAgOiAndW5zZXQnfTsgLyogZml4IGZvciBtb2JpbGUgc2FmYXJpICovXG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBvdmVyZmxvdzogaGlkZGVuO1xuICAgIHBhZGRpbmc6IDAgJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ1N9O1xuICAgIHRyYW5zaXRpb246IGJvcmRlci1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgYmFja2dyb3VuZC1jb2xvciAke2Rlc2lnblRva2Vucy50cmFuc2l0aW9uU3RhbmRhcmR9LFxuICAgICAgY29sb3IgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfSxcbiAgICAgIGJveC1zaGFkb3cgJHtkZXNpZ25Ub2tlbnMudHJhbnNpdGlvblN0YW5kYXJkfTtcbiAgICB3aWR0aDogMTAwJTtcblxuICAgICY6OnBsYWNlaG9sZGVyIHtcbiAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5wbGFjZWhvbGRlckZvbnRDb2xvckZvcklucHV0fTtcbiAgICB9XG4gICAgOmFjdGl2ZSxcbiAgICA6Zm9jdXMsXG4gICAgOmhvdmVyOm5vdCg6ZGlzYWJsZWQpOm5vdCg6cmVhZC1vbmx5KSB7XG4gICAgICBib3JkZXItY29sb3I6ICR7ZGVzaWduVG9rZW5zLmJvcmRlckNvbG9yRm9ySW5wdXRXaGVuRm9jdXNlZH07XG4gICAgfVxuICAgIDpmb2N1cyB7XG4gICAgICBib3gtc2hhZG93OiBpbnNldCAwIDAgMCAycHggJHtkZXNpZ25Ub2tlbnMuYm9yZGVyQ29sb3JGb3JJbnB1dFdoZW5Gb2N1c2VkfTtcbiAgICB9XG4gIGA7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0SW5wdXRTdHlsZXMgfTtcbiJdfQ== */");
 }; // eslint-disable-next-line import/prefer-default-export
 /* we need this line-height to achieve 32px height when the component has only one row */
@@ -124,8 +118,8 @@ var sizeInputLineHeight = '22px'; // NOTE: order is important here
 // * 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
-var getTextareaStyles = function getTextareaStyles(props, theme) {
-  var baseStyles = [getInputStyles(props, theme), /*#__PURE__*/css("padding:", customProperties.spacingXs, " ", customProperties.spacingS, ";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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JPIiwiZmlsZSI6Im11bHRpbGluZS1pbnB1dC5zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3VzdG9tUHJvcGVydGllcyBhcyB2YXJzIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyBnZXRJbnB1dFN0eWxlcyB9IGZyb20gJy4uL3N0eWxlcyc7XG5pbXBvcnQgdHlwZSB7IFRNdWx0aUxpbmVJbnB1dFByb3BzIH0gZnJvbSAnLi9tdWx0aWxpbmUtaW5wdXQnO1xuXG4vKiB3ZSBuZWVkIHRoaXMgbGluZS1oZWlnaHQgdG8gYWNoaWV2ZSAzMnB4IGhlaWdodCB3aGVuIHRoZSBjb21wb25lbnQgaGFzIG9ubHkgb25lIHJvdyAqL1xuY29uc3Qgc2l6ZUlucHV0TGluZUhlaWdodCA9ICcyMnB4JztcblxuLy8gTk9URTogb3JkZXIgaXMgaW1wb3J0YW50IGhlcmVcbi8vICogYSBkaXNhYmxlZC1maWVsZCBjdXJyZW50bHkgZG9lcyBub3QgZGlzcGxheSB3YXJuaW5nL2Vycm9yLXN0YXRlcyBzbyBpdCB0YWtlcyBwcmVjZWRlbmNlXG4vLyAqIGEgcmVhZG9ubHktZmllbGQgY2Fubm90IGJlIGNoYW5nZWQsIGJ1dCBpdCBtaWdodCBiZSByZWxldmFudCBmb3IgdmFsaWRhdGlvbiwgc28gZXJyb3IgYW5kIHdhcm5pbmcgYXJlIGNoZWNrZWQgZmlyc3Rcbi8vIGhvdyB5b3UgY2FuIGludGVyYWN0IHdpdGggdGhlIGZpZWxkIGlzIGNvbnRyb2xsZWQgc2VwYXJhdGVseSBieSB0aGUgcHJvcHMsIHRoaXMgb25seSBpbmZsdWVuY2VzIHZpc3VhbHNcbmNvbnN0IGdldFRleHRhcmVhU3R5bGVzID0gKHByb3BzOiBUTXVsdGlMaW5lSW5wdXRQcm9wcywgdGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IGJhc2VTdHlsZXMgPSBbXG4gICAgZ2V0SW5wdXRTdHlsZXMocHJvcHMsIHRoZW1lKSxcbiAgICBjc3NgXG4gICAgICBwYWRkaW5nOiAke3ZhcnMuc3BhY2luZ1hzfSAke3ZhcnMuc3BhY2luZ1N9O1xuICAgICAgbGluZS1oZWlnaHQ6ICR7c2l6ZUlucHV0TGluZUhlaWdodH07XG4gICAgICBmbGV4OiBhdXRvO1xuICAgICAgd29yZC1icmVhazogYnJlYWstd29yZDtcbiAgICAgIHdoaXRlLXNwYWNlOiBwcmUtd3JhcDtcbiAgICAgIHJlc2l6ZTogdmVydGljYWw7XG4gICAgYCxcbiAgXTtcbiAgcmV0dXJuIGJhc2VTdHlsZXM7XG59O1xuXG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgaW1wb3J0L3ByZWZlci1kZWZhdWx0LWV4cG9ydFxuZXhwb3J0IHsgZ2V0VGV4dGFyZWFTdHlsZXMgfTtcbiJdfQ== */")];
+var getTextareaStyles = function getTextareaStyles(props) {
+  var baseStyles = [getInputStyles(props), /*#__PURE__*/css("padding:", designTokens.spacingXs, " ", designTokens.spacingS, ";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+IHtcbiAgY29uc3QgYmFzZVN0eWxlcyA9IFtcbiAgICBnZXRJbnB1dFN0eWxlcyhwcm9wcyksXG4gICAgY3NzYFxuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZ1hzfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nU307XG4gICAgICBsaW5lLWhlaWdodDogJHtzaXplSW5wdXRMaW5lSGVpZ2h0fTtcbiAgICAgIGZsZXg6IGF1dG87XG4gICAgICB3b3JkLWJyZWFrOiBicmVhay13b3JkO1xuICAgICAgd2hpdGUtc3BhY2U6IHByZS13cmFwO1xuICAgICAgcmVzaXplOiB2ZXJ0aWNhbDtcbiAgICBgLFxuICBdO1xuICByZXR1cm4gYmFzZVN0eWxlcztcbn07XG5cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBpbXBvcnQvcHJlZmVyLWRlZmF1bHQtZXhwb3J0XG5leHBvcnQgeyBnZXRUZXh0YXJlYVN0eWxlcyB9O1xuIl19 */")];
   return baseStyles;
 }; // eslint-disable-next-line import/prefer-default-export
@@ -135,7 +129,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var MIN_ROW_COUNT = 1;
 var MultilineInput = function MultilineInput(props) {
-  var theme = useTheme();
   var onHeightChange = props.onHeightChange;
   var ref = useRef(null);
   var handleHeightChange = useCallback(function (height, meta) {
@@ -166,7 +159,7 @@ var MultilineInput = function MultilineInput(props) {
     placeholder: props.placeholder,
     readOnly: props.isReadOnly,
     autoFocus: props.isAutofocussed,
-    css: getTextareaStyles(props, theme) // 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
     ,
@@ -233,6 +226,6 @@ var 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.2.4";
+var version = "15.3.0";
 export { LocalizedInputToggle$1 as LocalizedInputToggle, MultilineInput$1 as MultilineInput, accessibleHiddenInputStyles$1 as accessibleHiddenInputStyles, getInputStyles, messages$1 as messagesLocalizedInput, messages as messagesMultilineInput, version };

package/dist/declarations/src/multiline-input/multiline-input.styles.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Theme } from '@emotion/react';
 import type { TMultiLineInputProps } from './multiline-input';
-declare const getTextareaStyles: (props: TMultiLineInputProps, theme: Theme) => import("@emotion/utils").SerializedStyles[];
+declare const getTextareaStyles: (props: TMultiLineInputProps) => import("@emotion/utils").SerializedStyles[];
 export { getTextareaStyles };

package/dist/declarations/src/styles.d.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import type { Theme } from '@emotion/react';
 declare type TInputProps = {
     isDisabled?: boolean;
     disabled?: boolean;
@@ -7,5 +6,5 @@ declare type TInputProps = {
     isReadOnly?: boolean;
     readOnly?: boolean;
 };
-declare const getInputStyles: (props: TInputProps, theme?: Theme) => import("@emotion/utils").SerializedStyles;
+declare const getInputStyles: (props: TInputProps) => import("@emotion/utils").SerializedStyles;
 export { getInputStyles };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/input-utils",
   "description": "Utilities for working with input components.",
-  "version": "15.2.4",
+  "version": "15.3.0",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,10 +21,10 @@
   "dependencies": {
     "@babel/runtime": "^7.19.0",
     "@babel/runtime-corejs3": "^7.19.1",
-    "@commercetools-uikit/design-system": "15.2.4",
-    "@commercetools-uikit/flat-button": "15.2.4",
-    "@commercetools-uikit/icons": "15.2.4",
-    "@commercetools-uikit/utils": "15.2.4",
+    "@commercetools-uikit/design-system": "15.3.0",
+    "@commercetools-uikit/flat-button": "15.3.0",
+    "@commercetools-uikit/icons": "15.3.0",
+    "@commercetools-uikit/utils": "15.3.0",
     "@emotion/react": "^11.4.0",
     "prop-types": "15.8.1",
     "react-textarea-autosize": "8.3.4"