@commercetools-uikit/money-input 20.2.3 → 20.3.1

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

@@ -22,6 +22,7 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var ReactDOM = require('react-dom');
 var has = require('lodash/has');
@@ -57,6 +58,7 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var has__default = /*#__PURE__*/_interopDefault(has);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
@@ -748,16 +750,18 @@ const getHighPrecisionWrapperStyles = _ref => {
 
 var messages = reactIntl.defineMessages({
   highPrecision: {
-    id: 'UIKit.MoneyInput.highPrecision',
-    description: 'Label of high precision tooltip in MoneyInput',
-    defaultMessage: 'High Precision Price'
+    id: "UIKit.MoneyInput.highPrecision",
+    defaultMessage: [{
+      "type": 0,
+      "value": "High Precision Price"
+    }]
   }
 });
 
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
   target: "e1u90zjc0"
@@ -773,8 +777,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", process.e
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const moneyInputSequentialId = utils.createSequentialId('money-input-');
-const getPortalId = id => `portal-${id}`;
-const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
+const getPortalId = id => "portal-".concat(id);
+const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -818,15 +822,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: `0 ${designSystem.designTokens.spacing25}`,
+      padding: "0 ".concat(designSystem.designTokens.spacing25),
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
-        if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
+        if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
+        if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
         if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
         if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -836,7 +840,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return `default`;
+        if (isReadOnly) return "default";
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -949,7 +953,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat__default["default"](normalizedAmount);
@@ -974,7 +978,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
   if (!currency) return null;
   // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
   if (rawAmount.length === 0 || !utils.isNumberish(rawAmount)) return null;
-  process.env.NODE_ENV !== "production" ? utils.warning(locale || currency.fractionDigits !== 0, `MoneyInput: A locale must be provided when currency has no fraction digits (${currencyCode})`) : void 0;
+  process.env.NODE_ENV !== "production" ? utils.warning(locale || currency.fractionDigits !== 0, "MoneyInput: A locale must be provided when currency has no fraction digits (".concat(currencyCode, ")")) : void 0;
   const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
   if (isNaN(amountAsNumber)) return null;
 
@@ -1041,8 +1045,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? `${name}.amount` : undefined;
-const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
+const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
+const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1060,6 +1064,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const MoneyInput = _ref5 => {
+  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1119,18 +1124,20 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange?.(fakeEvent);
+        onChange === null || onChange === void 0 || onChange(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = react$1.useCallback(event => {
-    if (utils.isNumberish(event.target?.value)) {
-      onChange?.({
+    var _event$target;
+    if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
+      var _event$target2;
+      onChange === null || onChange === void 0 || onChange({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: event.target?.value
+          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
         }
       });
     }
@@ -1138,7 +1145,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = react$1.useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6;
+      var _context6, _amountInputRef$curre;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1160,11 +1167,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange?.(fakeCurrencyEvent);
+      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange?.({
+        onChange === null || onChange === void 0 || onChange({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1173,7 +1180,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      amountInputRef.current?.focus();
+      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1217,9 +1224,10 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = react$1.useCallback(event => {
+    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
+    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1319,7 +1327,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
+                  margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1341,8 +1349,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context8;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
+  var _context0;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1365,19 +1373,19 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context9, _context0;
-  return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
+  var _context1, _context10;
+  return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   process.env.NODE_ENV !== "production" ? utils.warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return moneyValue?.type === 'highPrecision';
+  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.2.3";
+var version = "20.3.1";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;

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

@@ -22,6 +22,7 @@ var _parseInt = require('@babel/runtime-corejs3/core-js-stable/parse-int');
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
 var react$1 = require('react');
 var ReactDOM = require('react-dom');
 require('lodash/has');
@@ -57,6 +58,7 @@ var _parseInt__default = /*#__PURE__*/_interopDefault(_parseInt);
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstanceProperty);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
+var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var Tooltip__default = /*#__PURE__*/_interopDefault(Tooltip);
@@ -747,16 +749,18 @@ const getHighPrecisionWrapperStyles = _ref => {
 
 var messages = reactIntl.defineMessages({
   highPrecision: {
-    id: 'UIKit.MoneyInput.highPrecision',
-    description: 'Label of high precision tooltip in MoneyInput',
-    defaultMessage: 'High Precision Price'
+    id: "UIKit.MoneyInput.highPrecision",
+    defaultMessage: [{
+      "type": 0,
+      "value": "High Precision Price"
+    }]
   }
 });
 
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys__default["default"](e); if (_Object$getOwnPropertySymbols__default["default"]) { var o = _Object$getOwnPropertySymbols__default["default"](e); r && (o = _filterInstanceProperty__default["default"](o).call(o, function (r) { return _Object$getOwnPropertyDescriptor__default["default"](e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty__default["default"](_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](e, _Object$getOwnPropertyDescriptors__default["default"](t)) : _forEachInstanceProperty__default["default"](_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty__default["default"](e, r, _Object$getOwnPropertyDescriptor__default["default"](t, r)); }); } return e; }
 const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1u90zjc0"
 } )({
@@ -764,8 +768,8 @@ const TooltipWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   styles: "display:flex"
 } );
 const moneyInputSequentialId = utils.createSequentialId('money-input-');
-const getPortalId = id => `portal-${id}`;
-const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
+const getPortalId = id => "portal-".concat(id);
+const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -809,15 +813,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: `0 ${designSystem.designTokens.spacing25}`,
+      padding: "0 ".concat(designSystem.designTokens.spacing25),
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return `${designSystem.designTokens.borderColorForInputWhenDisabled} !important`;
-        if (isReadOnly) return `${designSystem.designTokens.borderColorForInputWhenReadonly} !important`;
+        if (isDisabled) return "".concat(designSystem.designTokens.borderColorForInputWhenDisabled, " !important");
+        if (isReadOnly) return "".concat(designSystem.designTokens.borderColorForInputWhenReadonly, " !important");
         if (hasError) return designSystem.designTokens.borderColorForInputWhenError;
         if (hasWarning) return designSystem.designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -827,7 +831,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return `default`;
+        if (isReadOnly) return "default";
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -940,7 +944,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat__default["default"](normalizedAmount);
@@ -1031,8 +1035,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? `${name}.amount` : undefined;
-const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
+const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
+const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
 var _ref = {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1042,6 +1046,7 @@ var _ref2 = {
   styles: "font-family:inherit;width:100%;position:relative;display:flex"
 } ;
 const MoneyInput = _ref5 => {
+  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1099,18 +1104,20 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange?.(fakeEvent);
+        onChange === null || onChange === void 0 || onChange(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = react$1.useCallback(event => {
-    if (utils.isNumberish(event.target?.value)) {
-      onChange?.({
+    var _event$target;
+    if (utils.isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
+      var _event$target2;
+      onChange === null || onChange === void 0 || onChange({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: event.target?.value
+          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
         }
       });
     }
@@ -1118,7 +1125,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = react$1.useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6;
+      var _context6, _amountInputRef$curre;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1140,11 +1147,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange?.(fakeCurrencyEvent);
+      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange?.({
+        onChange === null || onChange === void 0 || onChange({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1153,7 +1160,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      amountInputRef.current?.focus();
+      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = react$1.useCallback(() => {
@@ -1197,9 +1204,10 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = react$1.useCallback(event => {
+    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
+    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1299,7 +1307,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: `${designSystem.designTokens.spacing20} -${designSystem.designTokens.spacing10} ${designSystem.designTokens.spacing20} 0`
+                  margin: _concatInstanceProperty__default["default"](_context8 = _concatInstanceProperty__default["default"](_context9 = "".concat(designSystem.designTokens.spacing20, " -")).call(_context9, designSystem.designTokens.spacing10, " ")).call(_context8, designSystem.designTokens.spacing20, " 0")
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1321,8 +1329,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context8;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
+  var _context0;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty__default["default"](_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1338,18 +1346,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context9, _context0;
-  return !formValue || _trimInstanceProperty__default["default"](_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty__default["default"](_context0 = formValue.currencyCode).call(_context0) === '';
+  var _context1, _context10;
+  return !formValue || _trimInstanceProperty__default["default"](_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty__default["default"](_context10 = formValue.currencyCode).call(_context10) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return moneyValue?.type === 'highPrecision';
+  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.2.3";
+var version = "20.3.1";
 
 exports["default"] = MoneyInput$1;
 exports.version = version;

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

@@ -18,6 +18,7 @@ import _parseInt from '@babel/runtime-corejs3/core-js-stable/parse-int';
 import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
 import _mapInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/map';
 import _findInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/find';
+import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
 import { useRef, useCallback } from 'react';
 import ReactDOM from 'react-dom';
 import has from 'lodash/has';
@@ -719,16 +720,18 @@ const getHighPrecisionWrapperStyles = _ref => {
 
 var messages = defineMessages({
   highPrecision: {
-    id: 'UIKit.MoneyInput.highPrecision',
-    description: 'Label of high precision tooltip in MoneyInput',
-    defaultMessage: 'High Precision Price'
+    id: "UIKit.MoneyInput.highPrecision",
+    defaultMessage: [{
+      "type": 0,
+      "value": "High Precision Price"
+    }]
   }
 });
 
 const _excluded = ["id"],
   _excluded2 = ["currencies", "horizontalConstraint", "menuPortalZIndex"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context1, _context10; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context1 = ownKeys(Object(t), !0)).call(_context1, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context10 = ownKeys(Object(t))).call(_context10, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context11, _context12; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context11 = ownKeys(Object(t), !0)).call(_context11, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context12 = ownKeys(Object(t))).call(_context12, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
   target: "e1u90zjc0"
@@ -744,8 +747,8 @@ const TooltipWrapper = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "pro
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 const moneyInputSequentialId = createSequentialId('money-input-');
-const getPortalId = id => `portal-${id}`;
-const getPortalNode = id => document.querySelector(`#${getPortalId(id)}`);
+const getPortalId = id => "portal-".concat(id);
+const getPortalNode = id => document.querySelector("#".concat(getPortalId(id)));
 const Portal = props => {
   const domNode = getPortalNode(props.id);
   if (domNode) {
@@ -789,15 +792,15 @@ const createCurrencySelectStyles = _ref4 => {
   });
   return _objectSpread(_objectSpread({}, selectStyles), {}, {
     control: (base, state) => _objectSpread(_objectSpread({}, selectStyles.control(base, state)), {}, {
-      padding: `0 ${designTokens.spacing25}`,
+      padding: "0 ".concat(designTokens.spacing25),
       borderTopRightRadius: '0',
       borderBottomRightRadius: '0',
       borderRight: '0',
       minWidth: '80px',
       height: '100%',
       borderColor: (() => {
-        if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`;
-        if (isReadOnly) return `${designTokens.borderColorForInputWhenReadonly} !important`;
+        if (isDisabled) return "".concat(designTokens.borderColorForInputWhenDisabled, " !important");
+        if (isReadOnly) return "".concat(designTokens.borderColorForInputWhenReadonly, " !important");
         if (hasError) return designTokens.borderColorForInputWhenError;
         if (hasWarning) return designTokens.borderColorForInputWhenWarning;
         if (currencyHasFocus) {
@@ -807,7 +810,7 @@ const createCurrencySelectStyles = _ref4 => {
       })(),
       cursor: (() => {
         if (isDisabled) return 'not-allowed';
-        if (isReadOnly) return `default`;
+        if (isReadOnly) return "default";
         return 'pointer';
       })(),
       backgroundColor: (() => {
@@ -920,7 +923,7 @@ const parseRawAmountToNumber = (rawAmount, locale) => {
   }
   fractionsSeparator = fractionsSeparator === '.' ? '\\.' : fractionsSeparator; // here we escape the '.' to use it as regex
   // The raw amount with only one sparator
-  const normalizedAmount = String(rawAmount).replace(new RegExp(`[^-0-9${fractionsSeparator}]`, 'g'), '') // we just keep the numbers and the fraction symbol
+  const normalizedAmount = String(rawAmount).replace(new RegExp("[^-0-9".concat(fractionsSeparator, "]"), 'g'), '') // we just keep the numbers and the fraction symbol
   .replace(fractionsSeparator, '.'); // then we change whatever `fractionsSeparator` was to `.` so we can parse it as float
 
   return _parseFloat(normalizedAmount);
@@ -945,7 +948,7 @@ const createMoneyValue = (rawAmount, locale, currencyCode) => {
   if (!currency) return null;
   // The user may enter a value with a comma, dot, or apostrophe as the decimal separator.
   if (rawAmount.length === 0 || !isNumberish(rawAmount)) return null;
-  process.env.NODE_ENV !== "production" ? warning(locale || currency.fractionDigits !== 0, `MoneyInput: A locale must be provided when currency has no fraction digits (${currencyCode})`) : void 0;
+  process.env.NODE_ENV !== "production" ? warning(locale || currency.fractionDigits !== 0, "MoneyInput: A locale must be provided when currency has no fraction digits (".concat(currencyCode, ")")) : void 0;
   const amountAsNumber = parseRawAmountToNumber(rawAmount, locale);
   if (isNaN(amountAsNumber)) return null;
 
@@ -1012,8 +1015,8 @@ const formatAmount = (rawAmount, locale, currencyCode) => {
     minimumFractionDigits: fractionDigits
   });
 };
-const getAmountInputName = name => name ? `${name}.amount` : undefined;
-const getCurrencyDropdownName = name => name ? `${name}.currencyCode` : undefined;
+const getAmountInputName = name => name ? "".concat(name, ".amount") : undefined;
+const getCurrencyDropdownName = name => name ? "".concat(name, ".currencyCode") : undefined;
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "pw7jst",
   styles: "position:relative;width:100%"
@@ -1031,6 +1034,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 const MoneyInput = _ref5 => {
+  var _context8, _context9;
   let _ref5$currencies = _ref5.currencies,
     currencies = _ref5$currencies === void 0 ? [] : _ref5$currencies,
     _ref5$horizontalConst = _ref5.horizontalConstraint,
@@ -1090,18 +1094,20 @@ const MoneyInput = _ref5 => {
             value: formattedAmount
           }
         };
-        onChange?.(fakeEvent);
+        onChange === null || onChange === void 0 || onChange(fakeEvent);
       }
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode, toggleAmountHasFocus]);
   const handleAmountChange = useCallback(event => {
-    if (isNumberish(event.target?.value)) {
-      onChange?.({
+    var _event$target;
+    if (isNumberish((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value)) {
+      var _event$target2;
+      onChange === null || onChange === void 0 || onChange({
         persist: () => {},
         target: {
           id: MoneyInput.getAmountInputId(moneyInputId),
           name: getAmountInputName(props.name),
-          value: event.target?.value
+          value: (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.value
         }
       });
     }
@@ -1109,7 +1115,7 @@ const MoneyInput = _ref5 => {
   const handleCurrencyChange = useCallback(option => {
     const currencyCode = option.value;
     if (props.value.currencyCode !== currencyCode) {
-      var _context6;
+      var _context6, _amountInputRef$curre;
       // When the user changes from a currency with 3 fraction digits to
       // a currency with 2 fraction digits, and when the input value was
       // "9.000" (9), then it should change to "9.00" to reflect the new
@@ -1131,11 +1137,11 @@ const MoneyInput = _ref5 => {
           value: currencyCode || ''
         }
       };
-      onChange?.(fakeCurrencyEvent);
+      onChange === null || onChange === void 0 || onChange(fakeCurrencyEvent);
 
       // change amount if necessary
       if (props.value.amount !== nextAmount) {
-        onChange?.({
+        onChange === null || onChange === void 0 || onChange({
           persist: () => {},
           target: {
             id: MoneyInput.getAmountInputId(moneyInputId),
@@ -1144,7 +1150,7 @@ const MoneyInput = _ref5 => {
           }
         });
       }
-      amountInputRef.current?.focus();
+      (_amountInputRef$curre = amountInputRef.current) === null || _amountInputRef$curre === void 0 || _amountInputRef$curre.focus();
     }
   }, [intl.locale, onChange, moneyInputId, props.name, props.value.amount, props.value.currencyCode]);
   const handleCurrencyFocus = useCallback(() => {
@@ -1188,9 +1194,10 @@ const MoneyInput = _ref5 => {
   const isHighPrecision = !MoneyInput.isEmpty(props.value) && MoneyInput.isHighPrecision(props.value, intl.locale);
   const onBlur = props.onBlur;
   const handleContainerBlur = useCallback(event => {
+    var _containerRef$current;
     // ensures that both fields are marked as touched when one of them
     // is blurred
-    if (typeof onBlur === 'function' && !containerRef.current?.contains(event.relatedTarget)) {
+    if (typeof onBlur === 'function' && !((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.relatedTarget))) {
       onBlur({
         target: {
           id: MoneyInput.getCurrencyDropdownId(moneyInputId),
@@ -1290,7 +1297,7 @@ const MoneyInput = _ref5 => {
               ,
               styles: {
                 body: {
-                  margin: `${designTokens.spacing20} -${designTokens.spacing10} ${designTokens.spacing20} 0`
+                  margin: _concatInstanceProperty(_context8 = _concatInstanceProperty(_context9 = "".concat(designTokens.spacing20, " -")).call(_context9, designTokens.spacing10, " ")).call(_context8, designTokens.spacing20, " 0")
                 }
               },
               title: intl.formatMessage(messages.highPrecision),
@@ -1312,8 +1319,8 @@ MoneyInput.displayName = 'MoneyInput';
 MoneyInput.getAmountInputId = getAmountInputName;
 MoneyInput.getCurrencyDropdownId = getCurrencyDropdownName;
 MoneyInput.convertToMoneyValue = (value, locale) => {
-  var _context8;
-  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context8 = value.amount).call(_context8) : '', locale, value.currencyCode);
+  var _context0;
+  return createMoneyValue(typeof value.amount === 'string' ? _trimInstanceProperty(_context0 = value.amount).call(_context0) : '', locale, value.currencyCode);
 };
 MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   if (!moneyValue) return {
@@ -1336,18 +1343,18 @@ MoneyInput.parseMoneyValue = (moneyValue, locale) => {
   };
 };
 MoneyInput.isEmpty = formValue => {
-  var _context9, _context0;
-  return !formValue || _trimInstanceProperty(_context9 = formValue.amount).call(_context9) === '' || _trimInstanceProperty(_context0 = formValue.currencyCode).call(_context0) === '';
+  var _context1, _context10;
+  return !formValue || _trimInstanceProperty(_context1 = formValue.amount).call(_context1) === '' || _trimInstanceProperty(_context10 = formValue.currencyCode).call(_context10) === '';
 };
 MoneyInput.isHighPrecision = (formValue, locale) => {
   process.env.NODE_ENV !== "production" ? warning(!MoneyInput.isEmpty(formValue), 'MoneyValue.isHighPrecision may not be called with an empty money value.') : void 0;
   const moneyValue = MoneyInput.convertToMoneyValue(formValue, locale);
-  return moneyValue?.type === 'highPrecision';
+  return (moneyValue === null || moneyValue === void 0 ? void 0 : moneyValue.type) === 'highPrecision';
 };
 MoneyInput.isTouched = touched => Boolean(touched && touched.currencyCode && touched.amount);
 var MoneyInput$1 = MoneyInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "20.2.3";
+var version = "20.3.1";
 
 export { MoneyInput$1 as default, version };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/money-input",
   "description": "A controlled input component for money values with validation states.",
-  "version": "20.2.3",
+  "version": "20.3.1",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -21,22 +21,22 @@
   "dependencies": {
     "@babel/runtime": "^7.20.13",
     "@babel/runtime-corejs3": "^7.20.13",
-    "@commercetools-uikit/constraints": "20.2.3",
-    "@commercetools-uikit/design-system": "20.2.3",
-    "@commercetools-uikit/hooks": "20.2.3",
-    "@commercetools-uikit/icons": "20.2.3",
-    "@commercetools-uikit/input-utils": "20.2.3",
-    "@commercetools-uikit/select-utils": "20.2.3",
-    "@commercetools-uikit/tooltip": "20.2.3",
-    "@commercetools-uikit/utils": "20.2.3",
+    "@commercetools-uikit/constraints": "20.3.1",
+    "@commercetools-uikit/design-system": "20.3.1",
+    "@commercetools-uikit/hooks": "20.3.1",
+    "@commercetools-uikit/icons": "20.3.1",
+    "@commercetools-uikit/input-utils": "20.3.1",
+    "@commercetools-uikit/select-utils": "20.3.1",
+    "@commercetools-uikit/tooltip": "20.3.1",
+    "@commercetools-uikit/utils": "20.3.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "lodash": "4.17.21",
+    "lodash": "4.17.23",
     "react-select": "5.10.2"
   },
   "devDependencies": {
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "react-intl": "^7.1.4"
   },
   "peerDependencies": {