@commercetools-uikit/design-system 15.13.1 → 15.13.2

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

@@ -64,6 +64,7 @@ var themes = {
     colorAccent20: 'hsl(195, 35.2941176471%, 20%)',
     colorAccent30: 'hsl(195, 35.2941176471%, 30%)',
     colorAccent40: 'hsl(195, 35.2941176471%, 40%)',
+    colorAccent60: 'hsl(195, 35.2941176471%, 60%)',
     colorAccent90: 'hsl(195, 35.2941176471%, 90%)',
     colorAccent95: 'hsl(195, 35.2941176471%, 95%)',
     colorAccent98: 'hsl(195, 35.2941176471%, 98%)',
@@ -210,8 +211,9 @@ var themes = {
     backgroundColorForAvatar: 'hsl(0, 0%, 60%)',
     backgroundColorForAvatarWhenHighlighted: '#ccc',
     backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 85%)',
-    backgroundColorForLocalizedMultilineTextInputLabel: 'hsl(195, 35.2941176471%, 98%)',
-    backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
+    backgroundColorForLocalizedInputLabel: 'hsl(195, 35.2941176471%, 98%)',
+    backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(195, 35.2941176471%, 95%)',
+    backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
     backgroundColorForTooltip: '#213c45',
     backgroundColorForViewSwitcher: '#fff',
     backgroundColorForViewSwitcherWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
@@ -230,6 +232,15 @@ var themes = {
     backgroundColorForCheckboxInputIconWhenReadonly: '#fff',
     backgroundColorForCheckboxInputIconWhenError: '#fff',
     backgroundColorForCheckboxInputIconWhenHovered: '#fff',
+    backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 95%)',
+    backgroundColorForPrimaryActionDropdownWhenDisabled: 'hsl(195, 35.2941176471%, 98%)',
+    backgroundColorForToggleInputTrack: 'hsl(0, 0%, 60%)',
+    backgroundColorForToggleInputTrackWhenDisabled: '#ccc',
+    backgroundColorForToggleInputThumbWhenDisabled: 'hsl(195, 35.2941176471%, 95%)',
+    backgroundColorForToggleInputTrackWhenChecked: '#00b39e',
+    backgroundColorForToggleInputThumbWhenChecked: '#fff',
+    backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(172.9608938547486, 100%, 25%)',
+    backgroundColorForToggleInputThumbWhenCheckedAndDisabled: '#ccc',
     borderForButtonAsSecondary: 'none',
     borderForButtonAsSecondaryWhenHovered: 'none',
     borderForButtonAsSecondaryWhenActive: 'none',
@@ -263,8 +274,8 @@ var themes = {
     borderColorForStampAsInformation: '#078cdf',
     borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 25%)',
     borderColorForStampAsSecondary: 'hsl(0, 0%, 60%)',
-    borderColorForLocalizedMultilineTextInputLabel: '#ccc',
-    borderColorForLocalizedMultilineTextInputLabelWhenReadonly: '#ccc',
+    borderColorForLocalizedInputLabel: '#ccc',
+    borderColorForLocalizedInputLabelWhenReadonly: '#ccc',
     borderColorForContentNotificationWhenError: '#e60050',
     borderColorForContentNotificationWhenInfo: '#078cdf',
     borderColorForContentNotificationWhenWarning: '#f16d0e',
@@ -283,6 +294,7 @@ var themes = {
     borderColorForRadioInputWhenReadonly: '#ccc',
     borderColorForRadioInputWhenChecked: '#ccc',
     borderColorForRadioInputWhenFocused: '#00b39e',
+    borderColorForPrimaryActionDropdownMenu: '#ccc',
     borderRadiusForButtonAsBig: '6px',
     borderRadiusForButtonAsSmall: '4px',
     borderRadiusForButtonAsIconAsBig: '6px',
@@ -296,6 +308,9 @@ var themes = {
     borderRadiusForViewSwitcher: '6px',
     borderRadiusForContentNotification: '0 var(--border-radius-6) var(--border-radius-6) 0',
     borderRadiusForContentNotificationIcon: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
+    borderRadiusForPrimaryActionDropdown: 'var(--border-radius-6) 0 0 var(--border-radius-6)',
+    borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-6) var(--border-radius-6) 0',
+    borderRadiusForPrimaryActionDropdownMenu: '6px',
     borderWidthForInput: '1px',
     borderWidthForInputWhenWarning: '1px',
     borderWidthForInputWhenError: '1px',
@@ -305,6 +320,7 @@ var themes = {
     borderWidthForContentNotificationIcon: '0px',
     borderLeftWidthForContentNotification: '1px',
     borderWidthForCheckboxInputIcon: '1px',
+    borderForPrimaryActionDropdownIcon: '0px 0px 0px 1px',
     boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 2px',
     boxShadowForViewSwitcher: '0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12)',
     boxShadowForViewSwitcherWhenSelected: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
@@ -322,7 +338,7 @@ var themes = {
     fontColorForTagWhenDisabled: 'hsl(0, 0%, 60%)',
     fontColorForTextWhenInverted: '#fff',
     fontColorForTableHeader: '#fff',
-    fontColorForLocalizedMultilineTextInputLabel: 'hsl(0, 0%, 60%)',
+    fontColorForLocalizedInputLabel: 'hsl(0, 0%, 60%)',
     fontColorForViewSwitcher: '#1a1a1a',
     fontColorForViewSwitcherWhenDisabled: 'hsl(0, 0%, 60%)',
     fontColorForViewSwitcherWhenSelected: '#1a1a1a',
@@ -361,6 +377,7 @@ var themes = {
     heightForSelectInputTag: '26px',
     heightForRadioInputOption: '16px',
     heightForRadioInputOptionWhenChecked: '8px',
+    heightForPrimaryActionDropdown: '32px',
     widthForAvatarAsMedium: '48px',
     minWidthForMoneyInputCurrencyDropdown: '72px',
     placeholderFontColorForInput: 'hsl(0, 0%, 60%)',
@@ -381,7 +398,7 @@ var themes = {
     fontSizeForAvatarAsSmall: '1rem',
     fontSizeForAvatarAsMedium: '1.5rem',
     fontSizeForAvatarAsBig: '3rem',
-    fontSizeForLocalizedMultilineTextInputLabel: '0.9231rem',
+    fontSizeForLocalizedInputLabel: '1rem',
     fontSizeForContentNotification: '1rem',
     fontSizeForSelectInputTag: '0.9231rem',
     iconColorForDatetimeInputIcon: '#1a1a1a',
@@ -412,6 +429,8 @@ var themes = {
     marginRightForSearchInputIcon: '8px',
     marginRightForClearInputIcon: '4px',
     marginLeftForRadioInputLabel: '8px',
+    marginRightForPrimaryActionDropdown: '4px',
+    marginTopForPrimaryActionDropdown: 'none',
     paddingForStamp: 'var(--spacing-10) var(--spacing-20)',
     paddingForStampAsCondensed: '1px var(--spacing-10)',
     paddingForTag: '5px var(--spacing-20)',
@@ -431,7 +450,7 @@ var themes = {
     paddingForInput: '8px',
     paddingForMultilineInput: 'var(--spacing-10) var(--spacing-20)',
     paddingForLocalizedRichTextInputLabel: '0 var(--spacing-20)',
-    paddingForLocalizedMultilineTextInputLabel: '0 var(--spacing-20)',
+    paddingForLocalizedInputLabel: '0 var(--spacing-20)',
     paddingForTagRemoveIcon: '0 var(--spacing-10)',
     paddingForTooltip: 'var(--spacing-10) var(--spacing-20)',
     paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
@@ -446,6 +465,8 @@ var themes = {
     paddingForSelectInputMenu: 'inherit',
     paddingForMoneyInputCurrencyDropdown: '0 var(--spacing-20)',
     paddingForSelectableSearchInputDropdown: '0 var(--spacing-20)',
+    paddingForPrimaryActionDropdown: '0 var(--spacing-20)',
+    paddingForPrimaryActionDropdownIcon: '0 var(--spacing-10)',
     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)',
@@ -459,6 +480,11 @@ var themes = {
     shadowForInputWhenWarning: 'none',
     shadowForTooltip: '0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12)',
     shadowForSelectInputMenu: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
+    shadowForPrimaryActionDropdown: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
+    shadowForPrimaryActionDropdownWhenHovered: '0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24)',
+    shadowForPrimaryActionDropdownWhenActive: 'inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25)',
+    shadowForPrimaryActionDropdownMenu: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+    shadowForToggleInputThumb: '0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24)',
     fontSizeM: '1rem',
     bigButtonHeight: '32px',
     smallButtonHeight: '24px',
@@ -467,8 +493,7 @@ var themes = {
     fontSizeDefault: '1rem',
     fontSizeSmall: '0.9231rem',
     shadowBoxTagHover: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-    sizeHeightTag: '26px',
-    standardInputHeight: '32px'
+    sizeHeightTag: '26px'
   },
   test: {
     colorPrimary: '#00b39e',
@@ -495,8 +520,9 @@ var themes = {
     backgroundColorForAvatar: '#213c45',
     backgroundColorForAvatarWhenHighlighted: 'hsl(195, 35.2941176471%, 30%)',
     backgroundColorForStampAsPositive: 'hsl(172.9608938547486, 100%, 95%)',
-    backgroundColorForLocalizedMultilineTextInputLabel: '#fff',
-    backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'hsl(0, 0%, 95%)',
+    backgroundColorForLocalizedInputLabel: '#fff',
+    backgroundColorForLocalizedInputLabelWhenReadonly: 'hsl(0, 0%, 95%)',
+    backgroundColorForLocalizedInputLabelWhenDisabled: 'hsl(0, 0%, 95%)',
     backgroundColorForTooltip: 'hsl(195, 35.2941176471%, 10%)',
     backgroundColorForViewSwitcherWhenDisabled: '#fff',
     backgroundColorForViewSwitcherWhenSelected: 'hsl(0, 0%, 95%)',
@@ -515,6 +541,15 @@ var themes = {
     backgroundColorForCheckboxInputIconWhenReadonly: 'hsl(0, 0%, 60%)',
     backgroundColorForCheckboxInputIconWhenError: '#e60050',
     backgroundColorForCheckboxInputIconWhenHovered: 'hsl(0, 0%, 90%)',
+    backgroundColorForPrimaryActionDropdownWhenActive: 'hsl(0, 0%, 90%)',
+    backgroundColorForPrimaryActionDropdownWhenDisabled: 'hsl(0, 0%, 95%)',
+    backgroundColorForToggleInputTrack: '#ccc',
+    backgroundColorForToggleInputTrackWhenDisabled: 'hsl(0, 0%, 90%)',
+    backgroundColorForToggleInputThumbWhenDisabled: 'hsl(0, 0%, 60%)',
+    backgroundColorForToggleInputTrackWhenChecked: 'hsl(172.9608938547486, 100%, 40%)',
+    backgroundColorForToggleInputThumbWhenChecked: 'hsl(172.9608938547486, 100%, 25%)',
+    backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 90%)',
+    backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'hsl(195, 35.2941176471%, 60%)',
     borderForButtonAsSecondary: '1px solid var(--color-neutral)',
     borderForButtonAsSecondaryWhenHovered: '1px solid var(--color-neutral)',
     borderForButtonAsSecondaryWhenActive: '1px solid var(--color-neutral)',
@@ -543,7 +578,7 @@ var themes = {
     borderColorForStampAsInformation: 'hsl(203.05555555555554, 93.9130434783%, 85%)',
     borderColorForStampAsPrimary: 'hsl(172.9608938547486, 100%, 85%)',
     borderColorForStampAsSecondary: 'hsl(0, 0%, 85%)',
-    borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'hsl(0, 0%, 90%)',
+    borderColorForLocalizedInputLabelWhenReadonly: '#fff',
     borderColorForTag: '#ccc',
     borderColorForTagWhenHovered: '#ccc',
     borderColorForContentNotificationWhenError: 'hsl(339.1304347826087, 100%, 85%)',
@@ -564,6 +599,7 @@ var themes = {
     borderColorForRadioInputWhenReadonly: 'hsl(0, 0%, 60%)',
     borderColorForRadioInputWhenChecked: '#00b39e',
     borderColorForRadioInputWhenFocused: 'hsl(0, 0%, 60%)',
+    borderColorForPrimaryActionDropdownMenu: '#fff',
     borderRadiusForButtonAsBig: '4px',
     borderRadiusForButtonAsSmall: '4px',
     borderRadiusForButtonAsIconAsBig: '4px',
@@ -576,11 +612,15 @@ var themes = {
     borderRadiusForViewSwitcher: '4px',
     borderRadiusForContentNotification: '0 var(--border-radius-4) var(--border-radius-4) 0',
     borderRadiusForContentNotificationIcon: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
+    borderRadiusForPrimaryActionDropdown: 'var(--border-radius-4) 0 0 var(--border-radius-4)',
+    borderRadiusForPrimaryActionDropdownIcon: '0 var(--border-radius-4) var(--border-radius-4) 0',
+    borderRadiusForPrimaryActionDropdownMenu: '4px',
     borderWidthForTag: '1px 1px 1px 0',
     borderWidthForContentNotificationIcon: '1px',
     borderLeftWidthForContentNotification: '0px',
     borderWidthForSelectInput: '2px',
     borderWidthForCheckboxInputIcon: '2px',
+    borderForPrimaryActionDropdownIcon: '1px 1px 1px 0px',
     boxShadowForDatetimeInputWhenHovered: 'inset 0 0 0 1px',
     boxShadowForViewSwitcher: 'none',
     boxShadowForViewSwitcherWhenSelected: 'none',
@@ -624,7 +664,7 @@ var themes = {
     fontSizeForAvatarAsSmall: '0.875rem',
     fontSizeForAvatarAsMedium: '1rem',
     fontSizeForAvatarAsBig: '2.5rem',
-    fontSizeForLocalizedMultilineTextInputLabel: '1rem',
+    fontSizeForLocalizedInputLabel: '1rem',
     fontSizeForSelectInputTag: '1rem',
     lineHeightForTextAsH1: '2.125rem',
     lineHeightForTextAsH2: '1.75rem',
@@ -653,6 +693,7 @@ var themes = {
     heightForSelectInputTag: '32px',
     heightForRadioInputOption: '18px',
     heightForRadioInputOptionWhenChecked: '10px',
+    heightForPrimaryActionDropdown: '40px',
     iconColorForDatetimeInputIcon: 'hsl(0, 0%, 40%)',
     iconColorForDatetimeInputIconWhenHovered: '#e60050',
     widthForAvatarAsMedium: '40px',
@@ -667,6 +708,8 @@ var themes = {
     marginRightForSearchInputIcon: '12px',
     marginRightForClearInputIcon: '8px',
     marginLeftForRadioInputLabel: '4px',
+    marginRightForPrimaryActionDropdown: '8px',
+    marginTopForPrimaryActionDropdown: '8px',
     paddingForStamp: '4px 12px',
     paddingForStampAsCondensed: '0 var(--spacing-20)',
     paddingForTag: '2px 12px',
@@ -686,7 +729,7 @@ var themes = {
     paddingForInput: '16px',
     paddingForMultilineInput: '8px',
     paddingForLocalizedRichTextInputLabel: '8px',
-    paddingForLocalizedMultilineTextInputLabel: '0 12px',
+    paddingForLocalizedInputLabel: '0 12px',
     paddingForTagRemoveIcon: '0 12px',
     paddingForTooltip: 'var(--spacing-20) 12px',
     paddingForViewSwitcher: '0 var(--spacing-30) 0 var(--spacing-30)',
@@ -701,6 +744,8 @@ var themes = {
     paddingForSelectInputMenu: 'var(--spacing-10) 0',
     paddingForMoneyInputCurrencyDropdown: '0 12px',
     paddingForSelectableSearchInputDropdown: '0 12px',
+    paddingForPrimaryActionDropdown: '0 var(--spacing-30)',
+    paddingForPrimaryActionDropdownIcon: '0 var(--spacing-20)',
     shadowForButton: 'none',
     shadowForButtonWhenFocused: 'none',
     shadowForButtonWhenHovered: 'none',
@@ -712,7 +757,12 @@ var themes = {
     shadowForInputWhenError: 'inset 0 0 0 1px var(--color-error)',
     shadowForInputWhenWarning: 'inset 0 0 0 1px var(--color-warning)',
     shadowForTooltip: '0px 1px 2px 0px rgba(0, 0, 0, 0.25)',
-    shadowForSelectInputMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)'
+    shadowForSelectInputMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    shadowForPrimaryActionDropdown: 'none',
+    shadowForPrimaryActionDropdownWhenHovered: 'none',
+    shadowForPrimaryActionDropdownWhenActive: 'none',
+    shadowForPrimaryActionDropdownMenu: '0 2px 5px 0px rgba(0, 0, 0, 0.15)',
+    shadowForToggleInputThumb: '0px 1px 5px rgba(0, 0, 0, 0.2)'
   }
 };
 var designTokens = {
@@ -726,6 +776,7 @@ var designTokens = {
   colorAccent20: 'var(--color-accent-20, hsl(195, 35.2941176471%, 20%))',
   colorAccent30: 'var(--color-accent-30, hsl(195, 35.2941176471%, 30%))',
   colorAccent40: 'var(--color-accent-40, hsl(195, 35.2941176471%, 40%))',
+  colorAccent60: 'var(--color-accent-60, hsl(195, 35.2941176471%, 60%))',
   colorAccent90: 'var(--color-accent-90, hsl(195, 35.2941176471%, 90%))',
   colorAccent95: 'var(--color-accent-95, hsl(195, 35.2941176471%, 95%))',
   colorAccent98: 'var(--color-accent-98, hsl(195, 35.2941176471%, 98%))',
@@ -872,8 +923,9 @@ var designTokens = {
   backgroundColorForAvatar: 'var(--background-color-for-avatar, hsl(0, 0%, 60%))',
   backgroundColorForAvatarWhenHighlighted: 'var(--background-color-for-avatar-when-highlighted, #ccc)',
   backgroundColorForStampAsPositive: 'var(--background-color-for-stamp-as-positive, hsl(172.9608938547486, 100%, 85%))',
-  backgroundColorForLocalizedMultilineTextInputLabel: 'var(--background-color-for-localized-multiline-text-input-label, hsl(195, 35.2941176471%, 98%))',
-  backgroundColorForLocalizedMultilineTextInputLabelWhenDisabled: 'var(--background-color-for-localized-multiline-text-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))',
+  backgroundColorForLocalizedInputLabel: 'var(--background-color-for-localized-input-label, hsl(195, 35.2941176471%, 98%))',
+  backgroundColorForLocalizedInputLabelWhenReadonly: 'var(--background-color-for-localized-input-label-when-readonly, hsl(195, 35.2941176471%, 95%))',
+  backgroundColorForLocalizedInputLabelWhenDisabled: 'var(--background-color-for-localized-input-label-when-disabled, hsl(195, 35.2941176471%, 98%))',
   backgroundColorForTooltip: 'var(--background-color-for-tooltip, #213c45)',
   backgroundColorForViewSwitcher: 'var(--background-color-for-view-switcher, #fff)',
   backgroundColorForViewSwitcherWhenDisabled: 'var(--background-color-for-view-switcher-when-disabled, hsl(195, 35.2941176471%, 98%))',
@@ -892,6 +944,15 @@ var designTokens = {
   backgroundColorForCheckboxInputIconWhenReadonly: 'var(--background-color-for-checkbox-input-icon-when-readonly, #fff)',
   backgroundColorForCheckboxInputIconWhenError: 'var(--background-color-for-checkbox-input-icon-when-error, #fff)',
   backgroundColorForCheckboxInputIconWhenHovered: 'var(--background-color-for-checkbox-input-icon-when-hovered, #fff)',
+  backgroundColorForPrimaryActionDropdownWhenActive: 'var(--background-color-for-primary-action-dropdown-when-active, hsl(0, 0%, 95%))',
+  backgroundColorForPrimaryActionDropdownWhenDisabled: 'var(--background-color-for-primary-action-dropdown-when-disabled, hsl(195, 35.2941176471%, 98%))',
+  backgroundColorForToggleInputTrack: 'var(--background-color-for-toggle-input-track, hsl(0, 0%, 60%))',
+  backgroundColorForToggleInputTrackWhenDisabled: 'var(--background-color-for-toggle-input-track-when-disabled, #ccc)',
+  backgroundColorForToggleInputThumbWhenDisabled: 'var(--background-color-for-toggle-input-thumb-when-disabled, hsl(195, 35.2941176471%, 95%))',
+  backgroundColorForToggleInputTrackWhenChecked: 'var(--background-color-for-toggle-input-track-when-checked, #00b39e)',
+  backgroundColorForToggleInputThumbWhenChecked: 'var(--background-color-for-toggle-input-thumb-when-checked, #fff)',
+  backgroundColorForToggleInputTrackWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-track-when-checked-and-disabled, hsl(172.9608938547486, 100%, 25%))',
+  backgroundColorForToggleInputThumbWhenCheckedAndDisabled: 'var(--background-color-for-toggle-input-thumb-when-checked-and-disabled, #ccc)',
   borderForButtonAsSecondary: 'var(--border-for-button-as-secondary, none)',
   borderForButtonAsSecondaryWhenHovered: 'var(--border-for-button-as-secondary-when-hovered, none)',
   borderForButtonAsSecondaryWhenActive: 'var(--border-for-button-as-secondary-when-active, none)',
@@ -925,8 +986,8 @@ var designTokens = {
   borderColorForStampAsInformation: 'var(--border-color-for-stamp-as-information, #078cdf)',
   borderColorForStampAsPrimary: 'var(--border-color-for-stamp-as-primary, hsl(172.9608938547486, 100%, 25%))',
   borderColorForStampAsSecondary: 'var(--border-color-for-stamp-as-secondary, hsl(0, 0%, 60%))',
-  borderColorForLocalizedMultilineTextInputLabel: 'var(--border-color-for-localized-multiline-text-input-label, #ccc)',
-  borderColorForLocalizedMultilineTextInputLabelWhenReadonly: 'var(--border-color-for-localized-multiline-text-input-label-when-readonly, #ccc)',
+  borderColorForLocalizedInputLabel: 'var(--border-color-for-localized-input-label, #ccc)',
+  borderColorForLocalizedInputLabelWhenReadonly: 'var(--border-color-for-localized-input-label-when-readonly, #ccc)',
   borderColorForContentNotificationWhenError: 'var(--border-color-for-content-notification-when-error, #e60050)',
   borderColorForContentNotificationWhenInfo: 'var(--border-color-for-content-notification-when-info, #078cdf)',
   borderColorForContentNotificationWhenWarning: 'var(--border-color-for-content-notification-when-warning, #f16d0e)',
@@ -945,6 +1006,7 @@ var designTokens = {
   borderColorForRadioInputWhenReadonly: 'var(--border-color-for-radio-input-when-readonly, #ccc)',
   borderColorForRadioInputWhenChecked: 'var(--border-color-for-radio-input-when-checked, #ccc)',
   borderColorForRadioInputWhenFocused: 'var(--border-color-for-radio-input-when-focused, #00b39e)',
+  borderColorForPrimaryActionDropdownMenu: 'var(--border-color-for-primary-action-dropdown-menu, #ccc)',
   borderRadiusForButtonAsBig: 'var(--border-radius-for-button-as-big, 6px)',
   borderRadiusForButtonAsSmall: 'var(--border-radius-for-button-as-small, 4px)',
   borderRadiusForButtonAsIconAsBig: 'var(--border-radius-for-button-as-icon-as-big, 6px)',
@@ -958,6 +1020,9 @@ var designTokens = {
   borderRadiusForViewSwitcher: 'var(--border-radius-for-view-switcher, 6px)',
   borderRadiusForContentNotification: 'var(--border-radius-for-content-notification, 0 var(--border-radius-6) var(--border-radius-6) 0)',
   borderRadiusForContentNotificationIcon: 'var(--border-radius-for-content-notification-icon, var(--border-radius-6) 0 0 var(--border-radius-6))',
+  borderRadiusForPrimaryActionDropdown: 'var(--border-radius-for-primary-action-dropdown, var(--border-radius-6) 0 0 var(--border-radius-6))',
+  borderRadiusForPrimaryActionDropdownIcon: 'var(--border-radius-for-primary-action-dropdown-icon, 0 var(--border-radius-6) var(--border-radius-6) 0)',
+  borderRadiusForPrimaryActionDropdownMenu: 'var(--border-radius-for-primary-action-dropdown-menu, 6px)',
   borderWidthForInput: 'var(--border-width-for-input, 1px)',
   borderWidthForInputWhenWarning: 'var(--border-width-for-input-when-warning, 1px)',
   borderWidthForInputWhenError: 'var(--border-width-for-input-when-error, 1px)',
@@ -967,6 +1032,7 @@ var designTokens = {
   borderWidthForContentNotificationIcon: 'var(--border-width-for-content-notification-icon, 0px)',
   borderLeftWidthForContentNotification: 'var(--border-left-width-for-content-notification, 1px)',
   borderWidthForCheckboxInputIcon: 'var(--border-width-for-checkbox-input-icon, 1px)',
+  borderForPrimaryActionDropdownIcon: 'var(--border-for-primary-action-dropdown-icon, 0px 0px 0px 1px)',
   boxShadowForDatetimeInputWhenHovered: 'var(--box-shadow-for-datetime-input-when-hovered, inset 0 0 0 2px)',
   boxShadowForViewSwitcher: 'var(--box-shadow-for-view-switcher, 0 1px 1px 0 rgba(0, 0, 0, 0.24), 0 -1px 1px 0 rgba(0, 0, 0, 0.12))',
   boxShadowForViewSwitcherWhenSelected: 'var(--box-shadow-for-view-switcher-when-selected, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))',
@@ -984,7 +1050,7 @@ var designTokens = {
   fontColorForTagWhenDisabled: 'var(--font-color-for-tag-when-disabled, hsl(0, 0%, 60%))',
   fontColorForTextWhenInverted: 'var(--font-color-for-text-when-inverted, #fff)',
   fontColorForTableHeader: 'var(--font-color-for-table-header, #fff)',
-  fontColorForLocalizedMultilineTextInputLabel: 'var(--font-color-for-localized-multiline-text-input-label, hsl(0, 0%, 60%))',
+  fontColorForLocalizedInputLabel: 'var(--font-color-for-localized-input-label, hsl(0, 0%, 60%))',
   fontColorForViewSwitcher: 'var(--font-color-for-view-switcher, #1a1a1a)',
   fontColorForViewSwitcherWhenDisabled: 'var(--font-color-for-view-switcher-when-disabled, hsl(0, 0%, 60%))',
   fontColorForViewSwitcherWhenSelected: 'var(--font-color-for-view-switcher-when-selected, #1a1a1a)',
@@ -1023,6 +1089,7 @@ var designTokens = {
   heightForSelectInputTag: 'var(--height-for-select-input-tag, 26px)',
   heightForRadioInputOption: 'var(--height-for-radio-input-option, 16px)',
   heightForRadioInputOptionWhenChecked: 'var(--height-for-radio-input-option-when-checked, 8px)',
+  heightForPrimaryActionDropdown: 'var(--height-for-primary-action-dropdown, 32px)',
   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%))',
@@ -1043,7 +1110,7 @@ var designTokens = {
   fontSizeForAvatarAsSmall: 'var(--font-size-for-avatar-as-small, 1rem)',
   fontSizeForAvatarAsMedium: 'var(--font-size-for-avatar-as-medium, 1.5rem)',
   fontSizeForAvatarAsBig: 'var(--font-size-for-avatar-as-big, 3rem)',
-  fontSizeForLocalizedMultilineTextInputLabel: 'var(--font-size-for-localized-multiline-text-input-label, 0.9231rem)',
+  fontSizeForLocalizedInputLabel: 'var(--font-size-for-localized-input-label, 1rem)',
   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)',
@@ -1074,6 +1141,8 @@ var designTokens = {
   marginRightForSearchInputIcon: 'var(--margin-right-for-search-input-icon, 8px)',
   marginRightForClearInputIcon: 'var(--margin-right-for-clear-input-icon, 4px)',
   marginLeftForRadioInputLabel: 'var(--margin-left-for-radio-input-label, 8px)',
+  marginRightForPrimaryActionDropdown: 'var(--margin-right-for-primary-action-dropdown, 4px)',
+  marginTopForPrimaryActionDropdown: 'var(--margin-top-for-primary-action-dropdown, none)',
   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))',
@@ -1093,7 +1162,7 @@ var designTokens = {
   paddingForInput: 'var(--padding-for-input, 8px)',
   paddingForMultilineInput: 'var(--padding-for-multiline-input, var(--spacing-10) var(--spacing-20))',
   paddingForLocalizedRichTextInputLabel: 'var(--padding-for-localized-rich-text-input-label, 0 var(--spacing-20))',
-  paddingForLocalizedMultilineTextInputLabel: 'var(--padding-for-localized-multiline-text-input-label, 0 var(--spacing-20))',
+  paddingForLocalizedInputLabel: 'var(--padding-for-localized-input-label, 0 var(--spacing-20))',
   paddingForTagRemoveIcon: 'var(--padding-for-tag-remove-icon, 0 var(--spacing-10))',
   paddingForTooltip: 'var(--padding-for-tooltip, var(--spacing-10) var(--spacing-20))',
   paddingForViewSwitcher: 'var(--padding-for-view-switcher, 0 var(--spacing-30) 0 var(--spacing-30))',
@@ -1108,6 +1177,8 @@ var designTokens = {
   paddingForSelectInputMenu: 'var(--padding-for-select-input-menu, inherit)',
   paddingForMoneyInputCurrencyDropdown: 'var(--padding-for-money-input-currency-dropdown, 0 var(--spacing-20))',
   paddingForSelectableSearchInputDropdown: 'var(--padding-for-selectable-search-input-dropdown, 0 var(--spacing-20))',
+  paddingForPrimaryActionDropdown: 'var(--padding-for-primary-action-dropdown, 0 var(--spacing-20))',
+  paddingForPrimaryActionDropdownIcon: 'var(--padding-for-primary-action-dropdown-icon, 0 var(--spacing-10))',
   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))',
@@ -1121,6 +1192,11 @@ var designTokens = {
   shadowForInputWhenWarning: 'var(--shadow-for-input-when-warning, none)',
   shadowForTooltip: 'var(--shadow-for-tooltip, 0 2px 2px rgba(0, 0, 0, 0.24), 0 1px 4.75px rgba(0, 0, 0, 0.12))',
   shadowForSelectInputMenu: 'var(--shadow-for-select-input-menu, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
+  shadowForPrimaryActionDropdown: 'var(--shadow-for-primary-action-dropdown, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
+  shadowForPrimaryActionDropdownWhenHovered: 'var(--shadow-for-primary-action-dropdown-when-hovered, 0 1px 9.5px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24))',
+  shadowForPrimaryActionDropdownWhenActive: 'var(--shadow-for-primary-action-dropdown-when-active, inset 0 -1px 3px 0 rgba(0, 0, 0, 0.1), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), inset 0 1px 1.5px 0 rgba(0, 0, 0, 0.25))',
+  shadowForPrimaryActionDropdownMenu: 'var(--shadow-for-primary-action-dropdown-menu, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
+  shadowForToggleInputThumb: 'var(--shadow-for-toggle-input-thumb, 0 -1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24))',
   fontSizeM: 'var(--font-size-m, 1rem)',
   bigButtonHeight: 'var(--big-button-height, 32px)',
   smallButtonHeight: 'var(--small-button-height, 24px)',
@@ -1129,8 +1205,7 @@ var designTokens = {
   fontSizeDefault: 'var(--font-size-default, 1rem)',
   fontSizeSmall: 'var(--font-size-small, 0.9231rem)',
   shadowBoxTagHover: 'var(--shadow-box-tag-hover, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24))',
-  sizeHeightTag: 'var(--size-height-tag, 26px)',
-  standardInputHeight: 'var(--standard-input-height, 32px)'
+  sizeHeightTag: 'var(--size-height-tag, 26px)'
 };
 var designTokens$1 = designTokens;
 
@@ -1323,7 +1398,7 @@ var withThemeContext = function withThemeContext(WrappedComponent) {
 };
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.1";
+var version = "15.13.2";
 
 exports.ThemeProvider = ThemeProvider;
 exports.customProperties = designTokens$1;