@commercetools-uikit/design-system 15.11.2 → 15.12.0

package/dist/commercetools-uikit-design-system.cjs.dev.js

@@ -19,6 +19,7 @@ var react = require('react');
 var isObject = require('lodash/isObject');
 var merge = require('lodash/merge');
 var isEqual = require('lodash/isEqual');
+var hooks = require('@commercetools-uikit/hooks');
 var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -181,6 +182,7 @@ var themes = {
     breakPointBiggerdesktop: '1280px',
     breakPointGiantdesktop: '1680px',
     breakPointJumbodesktop: '1920px',
+    alignItemsForSelectInputTag: 'unset',
     backgroundColorForButtonWhenActive: '#fff',
     backgroundColorForButtonWhenHovered: '#fff',
     backgroundColorForButtonAsPrimaryWhenActive: '#00b39e',
@@ -229,6 +231,7 @@ var themes = {
     borderForCardWhenRaised: 'none',
     borderForCollapsiblePanelHeaderIconWhenDisabled: '1px solid var(--color-neutral)',
     borderForViewSwitcher: 'none',
+    borderForSelectInputTag: 'none',
     borderColorForInput: 'hsl(0, 0%, 60%)',
     borderColorForInputWhenFocused: '#00b39e',
     borderColorForInputWhenDisabled: '#ccc',
@@ -315,12 +318,14 @@ var themes = {
     fontColorForContentNotificationIconWhenSuccess: '#fff',
     fontColorForContentNotificationIconWhenInfo: '#fff',
     fontColorForSearchInputIcon: '#1a1a1a',
-    fontColorForSearchInputIconWhenHovered: '#1a1a1a',
+    fontColorForSearchInputIconWhenHovered: '#00b39e',
     fontColorForSelectInputIcon: '#1a1a1a',
     fontColorForSelectInputWhenError: '#1a1a1a',
     fontColorForSelectInputWhenWarning: '#1a1a1a',
     fontColorForSelectInputIconWhenError: '#1a1a1a',
     fontColorForSelectInputIconWhenWarning: '#1a1a1a',
+    fontColorForMoneyInputCurrencyDropdownIndicator: '#1a1a1a',
+    fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
     heightForButtonAsBig: '32px',
     heightForButtonAsSmall: '24px',
     heightForButtonAsIconAsBig: '32px',
@@ -329,7 +334,9 @@ var themes = {
     heightForInput: '32px',
     heightForViewSwitcher: '32px',
     heightForViewSwitcherWhenCondensed: '24px',
+    heightForSelectInputTag: '26px',
     widthForAvatarAsMedium: '48px',
+    minWidthForMoneyInputCurrencyDropdown: '72px',
     placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
     fontSizeForButton: '1rem',
     fontSizeForInput: '1rem',
@@ -350,6 +357,7 @@ var themes = {
     fontSizeForAvatarAsBig: '3rem',
     fontSizeForLocalizedMultilineTextInputLabel: '0.9231rem',
     fontSizeForContentNotification: '1rem',
+    fontSizeForSelectInputTag: '0.9231rem',
     iconColorForDatetimeInputIcon: '#1a1a1a',
     iconColorForDatetimeInputIconWhenHovered: '#f16d0e',
     lineHeightForTextAsH1: 'inherit',
@@ -374,6 +382,9 @@ var themes = {
     marginForGroupHeadingSelectInputOptions: '4px',
     marginForSelectInputIcon: '4px',
     marginLeftForSelectInputIcon: 'inherit',
+    marginRightForMoneyInputPrecisionBadge: '4px',
+    marginRightForSearchInputIcon: '8px',
+    marginRightForClearInputIcon: '4px',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -406,6 +417,7 @@ var themes = {
     paddingBottomForSelectInputOptions: '4px',
     paddingForGroupHeadingSelectInputOptions: '8px',
     paddingForSelectInputMenu: 'inherit',
+    paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)',
     shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
     shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
     shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
@@ -433,6 +445,7 @@ var themes = {
   test: {
     colorPrimary: '#00b39e',
     fontFamily: "'Inter', system-ui",
+    alignItemsForSelectInputTag: 'center',
     backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
     backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)',
     backgroundColorForButtonAsPrimaryWhenActive: '#15A390',
@@ -475,6 +488,7 @@ var themes = {
     borderForCardWhenRaised: '1px solid var(--color-neutral-90)',
     borderForCollapsiblePanelHeaderIconWhenDisabled: 'none',
     borderForViewSwitcher: '1px solid var(--color-neutral)',
+    borderForSelectInputTag: '1px solid var(--color-neutral-85)',
     borderColorForInput: '#ccc',
     borderColorForInputWhenDisabled: '#ccc',
     borderColorForInputWhenHovered: '#ccc',
@@ -540,12 +554,12 @@ var themes = {
     fontColorForClearInputIconWhenHovered: '#e60050',
     fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
     fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)',
-    fontColorForSearchInputIconWhenHovered: '#00b39e',
     fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)',
     fontColorForSelectInputWhenError: '#e60050',
     fontColorForSelectInputWhenWarning: '#f16d0e',
     fontColorForSelectInputIconWhenError: '#e60050',
     fontColorForSelectInputIconWhenWarning: '#f16d0e',
+    fontColorForMoneyInputCurrencyDropdownIndicator: 'hsl(0, 0%, 40%)',
     fontSizeForInput: '1rem',
     fontSizeForTextAsH1: '1.5rem',
     fontSizeForTextAsH2: '1.25rem',
@@ -564,6 +578,7 @@ var themes = {
     fontSizeForAvatarAsMedium: '1rem',
     fontSizeForAvatarAsBig: '2.5rem',
     fontSizeForLocalizedMultilineTextInputLabel: '1rem',
+    fontSizeForSelectInputTag: '1rem',
     lineHeightForTextAsH1: '2.125rem',
     lineHeightForTextAsH2: '1.75rem',
     lineHeightForTextAsH3: '1.5rem',
@@ -588,15 +603,20 @@ var themes = {
     heightForInput: '40px',
     heightForViewSwitcher: '40px',
     heightForViewSwitcherWhenCondensed: '32px',
+    heightForSelectInputTag: '32px',
     iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
     iconColorForDatetimeInputIconWhenHovered: '#e60050',
     widthForAvatarAsMedium: '40px',
+    minWidthForMoneyInputCurrencyDropdown: '80px',
     marginForTableHeader: '16px',
     marginForTableCellAsCondensed: '8px',
     marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
     marginForGroupHeadingSelectInputOptions: '8px',
     marginForSelectInputIcon: '8px',
     marginLeftForSelectInputIcon: '8px',
+    marginRightForMoneyInputPrecisionBadge: '12px',
+    marginRightForSearchInputIcon: '12px',
+    marginRightForClearInputIcon: '8px',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -629,6 +649,7 @@ var themes = {
     paddingBottomForSelectInputOptions: '8px',
     paddingForGroupHeadingSelectInputOptions: '16px',
     paddingForSelectInputMenu: 'var(--spacing-10) 0',
+    paddingForMoneyInputCurrencyDropdown: '0 12px',
     shadowForButton: 'none',
     shadowForButtonWhenFocused: 'none',
     shadowForButtonWhenHovered: 'none',
@@ -772,6 +793,7 @@ var designTokens = {
   breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
   breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
   breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
+  alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, unset)',
   backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, #fff)',
   backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, #fff)',
   backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #00b39e)',
@@ -820,6 +842,7 @@ var designTokens = {
   borderForCardWhenRaised: 'var(--border-for-card-when-raised, none)',
   borderForCollapsiblePanelHeaderIconWhenDisabled: 'var(--border-for-collapsible-panel-header-icon-when-disabled, 1px solid var(--color-neutral))',
   borderForViewSwitcher: 'var(--border-for-view-switcher, none)',
+  borderForSelectInputTag: 'var(--border-for-select-input-tag, none)',
   borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
   borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
   borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
@@ -906,12 +929,14 @@ var designTokens = {
   fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #fff)',
   fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #fff)',
   fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, #1a1a1a)',
-  fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #1a1a1a)',
+  fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #00b39e)',
   fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, #1a1a1a)',
   fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #1a1a1a)',
   fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #1a1a1a)',
   fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #1a1a1a)',
   fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #1a1a1a)',
+  fontColorForMoneyInputCurrencyDropdownIndicator: 'var(--font-color-for-money-input-currency-dropdown-indicator, #1a1a1a)',
+  fontColorForSearchInputIconWhenReadonly: 'var(--font-color-for-search-input-icon-when-readonly, hsl(0, 0%, 60%))',
   heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
   heightForButtonAsSmall: 'var(--height-for-button-as-small, 24px)',
   heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
@@ -920,7 +945,9 @@ var designTokens = {
   heightForInput: 'var(--height-for-input, 32px)',
   heightForViewSwitcher: 'var(--height-for-view-switcher, 32px)',
   heightForViewSwitcherWhenCondensed: 'var(--height-for-view-switcher-when-condensed, 24px)',
+  heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)',
   widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)',
+  minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 72px)',
   placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
   fontSizeForButton: 'var(--font-size-for-button, 1rem)',
   fontSizeForInput: 'var(--font-size-for-input, 1rem)',
@@ -941,6 +968,7 @@ var designTokens = {
   fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
   fontSizeForLocalizedMultilineTextInputLabel: 'var(--font-size-for-localized-multiline-text-input-label, 0.9231rem)',
   fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)',
+  fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 0.9231rem)',
   iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
   iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)',
   lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
@@ -965,6 +993,9 @@ var designTokens = {
   marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 4px)',
   marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 4px)',
   marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, inherit)',
+  marginRightForMoneyInputPrecisionBadge: 'var(--margin-right-for-money-input-precision-badge, 4px)',
+  marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 8px)',
+  marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)',
   paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
   paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
@@ -997,6 +1028,7 @@ var designTokens = {
   paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 4px)',
   paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 8px)',
   paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
+  paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))',
   shadowForButton: 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
   shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
   shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
@@ -1165,12 +1197,18 @@ var useTheme = function useTheme() {
       setTheme = _useState2[1];
 
   var parentSelectorRef = react.useRef(parentSelector);
-  var observerRef = react.useRef(new MutationObserver(function (mutationList, _observer) {
-    // Since we are only observing the theme DOM node for changes in its
-    // `data-theme` attribute (configured below when calling `observe` function),
-    // we will receive a single element in the list
-    setTheme(mutationList[0].target.dataset.theme);
-  }));
+  var mutationChangeCallback = react.useCallback(function (mutationList) {
+    // We expect only a single element in the mutation list as we configured the
+    // observer to only listen to `data-theme` changes.
+    var _mutationList = _slicedToArray(mutationList, 1),
+        mutationEvent = _mutationList[0];
+
+    setTheme(mutationEvent.target.dataset.theme);
+  }, []);
+  hooks.useMutationObserver(parentSelector(), mutationChangeCallback, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
 
   var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
     return theme === 'default' ? defaultThemeValue : newThemeValue;
@@ -1179,30 +1217,16 @@ var useTheme = function useTheme() {
 
 
   react.useEffect(function () {
-    var themeDomNode = parentSelectorRef.current();
-    var observer = observerRef.current;
-
-    if (themeDomNode) {
-      // We need to read the current theme after the provider is rendered
-      // to have the actual selected theme (calculated client-side) in the
-      // hook local state
-      var nextTheme = themeDomNode.dataset.theme;
-
-      if (nextTheme) {
-        setTheme(nextTheme);
-      } // We observe the theme DOM node for changes in its `data-theme`
-      // attribute, which is the one we update in the `applyTheme` function
+    var _parentSelectorRef$cu;
 
+    // We need to read the current theme after the provider is rendered
+    // to have the actual selected theme (calculated client-side) in the
+    // hook local state
+    var nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
 
-      observer.observe(themeDomNode, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
+    if (nextTheme) {
+      setTheme(nextTheme);
     }
-
-    return function () {
-      return observer.disconnect();
-    };
   }, []);
   return {
     theme: theme,
@@ -1220,7 +1244,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.11.2";
+var version = "15.12.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;

package/dist/commercetools-uikit-design-system.cjs.prod.js

@@ -19,6 +19,7 @@ var react = require('react');
 var isObject = require('lodash/isObject');
 var merge = require('lodash/merge');
 var isEqual = require('lodash/isEqual');
+var hooks = require('@commercetools-uikit/hooks');
 var _Object$fromEntries = require('@babel/runtime-corejs3/core-js-stable/object/from-entries');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/map');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
@@ -181,6 +182,7 @@ var themes = {
     breakPointBiggerdesktop: '1280px',
     breakPointGiantdesktop: '1680px',
     breakPointJumbodesktop: '1920px',
+    alignItemsForSelectInputTag: 'unset',
     backgroundColorForButtonWhenActive: '#fff',
     backgroundColorForButtonWhenHovered: '#fff',
     backgroundColorForButtonAsPrimaryWhenActive: '#00b39e',
@@ -229,6 +231,7 @@ var themes = {
     borderForCardWhenRaised: 'none',
     borderForCollapsiblePanelHeaderIconWhenDisabled: '1px solid var(--color-neutral)',
     borderForViewSwitcher: 'none',
+    borderForSelectInputTag: 'none',
     borderColorForInput: 'hsl(0, 0%, 60%)',
     borderColorForInputWhenFocused: '#00b39e',
     borderColorForInputWhenDisabled: '#ccc',
@@ -315,12 +318,14 @@ var themes = {
     fontColorForContentNotificationIconWhenSuccess: '#fff',
     fontColorForContentNotificationIconWhenInfo: '#fff',
     fontColorForSearchInputIcon: '#1a1a1a',
-    fontColorForSearchInputIconWhenHovered: '#1a1a1a',
+    fontColorForSearchInputIconWhenHovered: '#00b39e',
     fontColorForSelectInputIcon: '#1a1a1a',
     fontColorForSelectInputWhenError: '#1a1a1a',
     fontColorForSelectInputWhenWarning: '#1a1a1a',
     fontColorForSelectInputIconWhenError: '#1a1a1a',
     fontColorForSelectInputIconWhenWarning: '#1a1a1a',
+    fontColorForMoneyInputCurrencyDropdownIndicator: '#1a1a1a',
+    fontColorForSearchInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
     heightForButtonAsBig: '32px',
     heightForButtonAsSmall: '24px',
     heightForButtonAsIconAsBig: '32px',
@@ -329,7 +334,9 @@ var themes = {
     heightForInput: '32px',
     heightForViewSwitcher: '32px',
     heightForViewSwitcherWhenCondensed: '24px',
+    heightForSelectInputTag: '26px',
     widthForAvatarAsMedium: '48px',
+    minWidthForMoneyInputCurrencyDropdown: '72px',
     placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
     fontSizeForButton: '1rem',
     fontSizeForInput: '1rem',
@@ -350,6 +357,7 @@ var themes = {
     fontSizeForAvatarAsBig: '3rem',
     fontSizeForLocalizedMultilineTextInputLabel: '0.9231rem',
     fontSizeForContentNotification: '1rem',
+    fontSizeForSelectInputTag: '0.9231rem',
     iconColorForDatetimeInputIcon: '#1a1a1a',
     iconColorForDatetimeInputIconWhenHovered: '#f16d0e',
     lineHeightForTextAsH1: 'inherit',
@@ -374,6 +382,9 @@ var themes = {
     marginForGroupHeadingSelectInputOptions: '4px',
     marginForSelectInputIcon: '4px',
     marginLeftForSelectInputIcon: 'inherit',
+    marginRightForMoneyInputPrecisionBadge: '4px',
+    marginRightForSearchInputIcon: '8px',
+    marginRightForClearInputIcon: '4px',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -406,6 +417,7 @@ var themes = {
     paddingBottomForSelectInputOptions: '4px',
     paddingForGroupHeadingSelectInputOptions: '8px',
     paddingForSelectInputMenu: 'inherit',
+    paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)',
     shadowForButton: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
     shadowForButtonWhenFocused: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
     shadowForButtonWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
@@ -433,6 +445,7 @@ var themes = {
   test: {
     colorPrimary: '#00b39e',
     fontFamily: "'Inter', system-ui",
+    alignItemsForSelectInputTag: 'center',
     backgroundColorForButtonWhenActive: 'hsl(0deg 0% 10% / 10%)',
     backgroundColorForButtonWhenHovered: 'hsl(0deg 0% 10% / 5%)',
     backgroundColorForButtonAsPrimaryWhenActive: '#15A390',
@@ -475,6 +488,7 @@ var themes = {
     borderForCardWhenRaised: '1px solid var(--color-neutral-90)',
     borderForCollapsiblePanelHeaderIconWhenDisabled: 'none',
     borderForViewSwitcher: '1px solid var(--color-neutral)',
+    borderForSelectInputTag: '1px solid var(--color-neutral-85)',
     borderColorForInput: '#ccc',
     borderColorForInputWhenDisabled: '#ccc',
     borderColorForInputWhenHovered: '#ccc',
@@ -540,12 +554,12 @@ var themes = {
     fontColorForClearInputIconWhenHovered: '#e60050',
     fontColorForClearInputIcon: 'hsl(0, 0%, 40%)',
     fontColorForSearchInputIcon: 'hsl(0, 0%, 60%)',
-    fontColorForSearchInputIconWhenHovered: '#00b39e',
     fontColorForSelectInputIcon: 'hsl(0, 0%, 60%)',
     fontColorForSelectInputWhenError: '#e60050',
     fontColorForSelectInputWhenWarning: '#f16d0e',
     fontColorForSelectInputIconWhenError: '#e60050',
     fontColorForSelectInputIconWhenWarning: '#f16d0e',
+    fontColorForMoneyInputCurrencyDropdownIndicator: 'hsl(0, 0%, 40%)',
     fontSizeForInput: '1rem',
     fontSizeForTextAsH1: '1.5rem',
     fontSizeForTextAsH2: '1.25rem',
@@ -564,6 +578,7 @@ var themes = {
     fontSizeForAvatarAsMedium: '1rem',
     fontSizeForAvatarAsBig: '2.5rem',
     fontSizeForLocalizedMultilineTextInputLabel: '1rem',
+    fontSizeForSelectInputTag: '1rem',
     lineHeightForTextAsH1: '2.125rem',
     lineHeightForTextAsH2: '1.75rem',
     lineHeightForTextAsH3: '1.5rem',
@@ -588,15 +603,20 @@ var themes = {
     heightForInput: '40px',
     heightForViewSwitcher: '40px',
     heightForViewSwitcherWhenCondensed: '32px',
+    heightForSelectInputTag: '32px',
     iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
     iconColorForDatetimeInputIconWhenHovered: '#e60050',
     widthForAvatarAsMedium: '40px',
+    minWidthForMoneyInputCurrencyDropdown: '80px',
     marginForTableHeader: '16px',
     marginForTableCellAsCondensed: '8px',
     marginForViewSwitcherIcon: '0 var(--spacing-20) 0 0',
     marginForGroupHeadingSelectInputOptions: '8px',
     marginForSelectInputIcon: '8px',
     marginLeftForSelectInputIcon: '8px',
+    marginRightForMoneyInputPrecisionBadge: '12px',
+    marginRightForSearchInputIcon: '12px',
+    marginRightForClearInputIcon: '8px',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -629,6 +649,7 @@ var themes = {
     paddingBottomForSelectInputOptions: '8px',
     paddingForGroupHeadingSelectInputOptions: '16px',
     paddingForSelectInputMenu: 'var(--spacing-10) 0',
+    paddingForMoneyInputCurrencyDropdown: '0 12px',
     shadowForButton: 'none',
     shadowForButtonWhenFocused: 'none',
     shadowForButtonWhenHovered: 'none',
@@ -772,6 +793,7 @@ var designTokens = {
   breakPointBiggerdesktop: 'var(--break-point-biggerdesktop, 1280px)',
   breakPointGiantdesktop: 'var(--break-point-giantdesktop, 1680px)',
   breakPointJumbodesktop: 'var(--break-point-jumbodesktop, 1920px)',
+  alignItemsForSelectInputTag: 'var(--align-items-for-select-input-tag, unset)',
   backgroundColorForButtonWhenActive: 'var(--background-color-for-button-when-active, #fff)',
   backgroundColorForButtonWhenHovered: 'var(--background-color-for-button-when-hovered, #fff)',
   backgroundColorForButtonAsPrimaryWhenActive: 'var(--background-color-for-button-as-primary-when-active, #00b39e)',
@@ -820,6 +842,7 @@ var designTokens = {
   borderForCardWhenRaised: 'var(--border-for-card-when-raised, none)',
   borderForCollapsiblePanelHeaderIconWhenDisabled: 'var(--border-for-collapsible-panel-header-icon-when-disabled, 1px solid var(--color-neutral))',
   borderForViewSwitcher: 'var(--border-for-view-switcher, none)',
+  borderForSelectInputTag: 'var(--border-for-select-input-tag, none)',
   borderColorForInput: 'var(--border-color-for-input, hsl(0, 0%, 60%))',
   borderColorForInputWhenFocused: 'var(--border-color-for-input-when-focused, #00b39e)',
   borderColorForInputWhenDisabled: 'var(--border-color-for-input-when-disabled, #ccc)',
@@ -906,12 +929,14 @@ var designTokens = {
   fontColorForContentNotificationIconWhenSuccess: 'var(--font-color-for-content-notification-icon-when-success, #fff)',
   fontColorForContentNotificationIconWhenInfo: 'var(--font-color-for-content-notification-icon-when-info, #fff)',
   fontColorForSearchInputIcon: 'var(--font-color-for-search-input-icon, #1a1a1a)',
-  fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #1a1a1a)',
+  fontColorForSearchInputIconWhenHovered: 'var(--font-color-for-search-input-icon-when-hovered, #00b39e)',
   fontColorForSelectInputIcon: 'var(--font-color-for-select-input-icon, #1a1a1a)',
   fontColorForSelectInputWhenError: 'var(--font-color-for-select-input-when-error, #1a1a1a)',
   fontColorForSelectInputWhenWarning: 'var(--font-color-for-select-input-when-warning, #1a1a1a)',
   fontColorForSelectInputIconWhenError: 'var(--font-color-for-select-input-icon-when-error, #1a1a1a)',
   fontColorForSelectInputIconWhenWarning: 'var(--font-color-for-select-input-icon-when-warning, #1a1a1a)',
+  fontColorForMoneyInputCurrencyDropdownIndicator: 'var(--font-color-for-money-input-currency-dropdown-indicator, #1a1a1a)',
+  fontColorForSearchInputIconWhenReadonly: 'var(--font-color-for-search-input-icon-when-readonly, hsl(0, 0%, 60%))',
   heightForButtonAsBig: 'var(--height-for-button-as-big, 32px)',
   heightForButtonAsSmall: 'var(--height-for-button-as-small, 24px)',
   heightForButtonAsIconAsBig: 'var(--height-for-button-as-icon-as-big, 32px)',
@@ -920,7 +945,9 @@ var designTokens = {
   heightForInput: 'var(--height-for-input, 32px)',
   heightForViewSwitcher: 'var(--height-for-view-switcher, 32px)',
   heightForViewSwitcherWhenCondensed: 'var(--height-for-view-switcher-when-condensed, 24px)',
+  heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)',
   widthForAvatarAsMedium: 'var(--width-for-avatar-as-medium, 48px)',
+  minWidthForMoneyInputCurrencyDropdown: 'var(--min-width-for-money-input-currency-dropdown, 72px)',
   placeholderFontColorForInput: 'var(--placeholder-font-color-for-input, hsl(0, 0%, 60%))',
   fontSizeForButton: 'var(--font-size-for-button, 1rem)',
   fontSizeForInput: 'var(--font-size-for-input, 1rem)',
@@ -941,6 +968,7 @@ var designTokens = {
   fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
   fontSizeForLocalizedMultilineTextInputLabel: 'var(--font-size-for-localized-multiline-text-input-label, 0.9231rem)',
   fontSizeForContentNotification: 'var(--font-size-for-content-notification, 1rem)',
+  fontSizeForSelectInputTag: 'var(--font-size-for-select-input-tag, 0.9231rem)',
   iconColorForDatetimeInputIcon: 'var(--icon-color-for-datetime-input-icon, #1a1a1a)',
   iconColorForDatetimeInputIconWhenHovered: 'var(--icon-color-for-datetime-input-icon-when-hovered, #f16d0e)',
   lineHeightForTextAsH1: 'var(--line-height-for-text-as-h-1, inherit)',
@@ -965,6 +993,9 @@ var designTokens = {
   marginForGroupHeadingSelectInputOptions: 'var(--margin-for-group-heading-select-input-options, 4px)',
   marginForSelectInputIcon: 'var(--margin-for-select-input-icon, 4px)',
   marginLeftForSelectInputIcon: 'var(--margin-left-for-select-input-icon, inherit)',
+  marginRightForMoneyInputPrecisionBadge: 'var(--margin-right-for-money-input-precision-badge, 4px)',
+  marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 8px)',
+  marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)',
   paddingForStamp: 'var(--padding-for-stamp, var(--spacing-10) var(--spacing-20))',
   paddingForStampAsCondensed: 'var(--padding-for-stamp-as-condensed, 1px var(--spacing-10))',
   paddingForTag: 'var(--padding-for-tag, 5px var(--spacing-20))',
@@ -997,6 +1028,7 @@ var designTokens = {
   paddingBottomForSelectInputOptions: 'var(--padding-bottom-for-select-input-options, 4px)',
   paddingForGroupHeadingSelectInputOptions: 'var(--padding-for-group-heading-select-input-options, 8px)',
   paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
+  paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))',
   shadowForButton: 'var(--shadow-for-button, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
   shadowForButtonWhenFocused: 'var(--shadow-for-button-when-focused, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
   shadowForButtonWhenHovered: 'var(--shadow-for-button-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
@@ -1165,12 +1197,18 @@ var useTheme = function useTheme() {
       setTheme = _useState2[1];
 
   var parentSelectorRef = react.useRef(parentSelector);
-  var observerRef = react.useRef(new MutationObserver(function (mutationList, _observer) {
-    // Since we are only observing the theme DOM node for changes in its
-    // `data-theme` attribute (configured below when calling `observe` function),
-    // we will receive a single element in the list
-    setTheme(mutationList[0].target.dataset.theme);
-  }));
+  var mutationChangeCallback = react.useCallback(function (mutationList) {
+    // We expect only a single element in the mutation list as we configured the
+    // observer to only listen to `data-theme` changes.
+    var _mutationList = _slicedToArray(mutationList, 1),
+        mutationEvent = _mutationList[0];
+
+    setTheme(mutationEvent.target.dataset.theme);
+  }, []);
+  hooks.useMutationObserver(parentSelector(), mutationChangeCallback, {
+    attributes: true,
+    attributeFilter: ['data-theme']
+  });
 
   var themedValue = function themedValue(defaultThemeValue, newThemeValue) {
     return theme === 'default' ? defaultThemeValue : newThemeValue;
@@ -1179,30 +1217,16 @@ var useTheme = function useTheme() {
 
 
   react.useEffect(function () {
-    var themeDomNode = parentSelectorRef.current();
-    var observer = observerRef.current;
-
-    if (themeDomNode) {
-      // We need to read the current theme after the provider is rendered
-      // to have the actual selected theme (calculated client-side) in the
-      // hook local state
-      var nextTheme = themeDomNode.dataset.theme;
-
-      if (nextTheme) {
-        setTheme(nextTheme);
-      } // We observe the theme DOM node for changes in its `data-theme`
-      // attribute, which is the one we update in the `applyTheme` function
+    var _parentSelectorRef$cu;
 
+    // We need to read the current theme after the provider is rendered
+    // to have the actual selected theme (calculated client-side) in the
+    // hook local state
+    var nextTheme = (_parentSelectorRef$cu = parentSelectorRef.current()) === null || _parentSelectorRef$cu === void 0 ? void 0 : _parentSelectorRef$cu.dataset.theme;
 
-      observer.observe(themeDomNode, {
-        attributes: true,
-        attributeFilter: ['data-theme']
-      });
+    if (nextTheme) {
+      setTheme(nextTheme);
     }
-
-    return function () {
-      return observer.disconnect();
-    };
   }, []);
   return {
     theme: theme,
@@ -1220,7 +1244,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.11.2";
+var version = "15.12.0";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;