@commercetools-uikit/rich-text-utils 15.13.1 → 15.14.0

package/dist/commercetools-uikit-rich-text-utils.cjs.prod.js

@@ -38,12 +38,12 @@ var react = require('react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var _styled = require('@emotion/styled/base');
 var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/find');
+var designSystem = require('@commercetools-uikit/design-system');
 var reactIntl = require('react-intl');
 var react$1 = require('@emotion/react');
 var Tooltip = require('@commercetools-uikit/tooltip');
 var icons = require('@commercetools-uikit/icons');
 var Inline = require('@commercetools-uikit/spacings-inline');
-var designSystem = require('@commercetools-uikit/design-system');
 var omit = require('lodash/omit');
 var DownshiftUntyped = require('downshift');
 
@@ -79,9 +79,9 @@ var Inline__default = /*#__PURE__*/_interopDefault(Inline);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
 var DownshiftUntyped__default = /*#__PURE__*/_interopDefault(DownshiftUntyped);
 
-function ownKeys$g(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$g(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$g(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context5 = ownKeys$h(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context6 = ownKeys$h(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
 var serializeNode = function serializeNode(node) {
   var _context;
@@ -389,7 +389,7 @@ var deserializeElement = function deserializeElement(el) {
 
           if ((_mapper$key = mapper[key]) !== null && _mapper$key !== void 0 && _mapper$key[splittedValue]) {
             // checking if the parsed style attr value has representation in the mapper obj
-            mappedAttrObj = _objectSpread$g(_objectSpread$g({}, mappedAttrObj), mapper[key][splittedValue]);
+            mappedAttrObj = _objectSpread$h(_objectSpread$h({}, mappedAttrObj), mapper[key][splittedValue]);
           }
         });
 
@@ -560,6 +560,134 @@ HiddenInput.propTypes = {};
 HiddenInput.displayName = 'HiddenInput';
 var HiddenInput$1 = HiddenInput;
 
+function ownKeys$g(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$g(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$g(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+var iconSizes$c = {
+  small: 12,
+  medium: 16,
+  big: 24
+};
+
+var getSizeDimensions$c = function getSizeDimensions(size) {
+  switch (size) {
+    case 'scale':
+      return {
+        width: '100%',
+        height: 'auto'
+      };
+
+    case 'small':
+    case 'medium':
+    case 'big':
+      return {
+        width: "".concat(iconSizes$c[size], "px"),
+        height: "".concat(iconSizes$c[size], "px")
+      };
+
+    default:
+      return {
+        width: "".concat(iconSizes$c.big, "px"),
+        height: "".concat(iconSizes$c.big, "px")
+      };
+  }
+};
+
+var getSizeStyle$c = function getSizeStyle(size) {
+  var _context, _context2;
+
+  var dimensions = getSizeDimensions$c(size);
+
+  switch (size) {
+    case 'scale':
+      return _concatInstanceProperty__default["default"](_context = "\n        &:not(:root) {\n          width: ".concat(dimensions.width, ";\n          height: ")).call(_context, dimensions.height, ";\n        }\n      ");
+
+    default:
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
+  }
+};
+
+var getColor$c = function getColor(color) {
+  if (!color) return 'inherit';
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = designSystem.designTokens.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = designSystem.designTokens.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = designSystem.designTokens.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = designSystem.designTokens.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = designSystem.designTokens.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = designSystem.designTokens.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = designSystem.designTokens.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = designSystem.designTokens.colorError;
+      break;
+  }
+
+  if (!iconColor) {
+    return 'inherit';
+  }
+
+  return iconColor;
+};
+
+var getIconStyles$c = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$c(props.color), ";}&,image{", getSizeStyle$c(props.size), ";}flex-shrink:0;" + ("" ), "" );
+};
+
+var SvgBold = function SvgBold(props) {
+  return jsxRuntime.jsx("svg", _objectSpread$g(_objectSpread$g({
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M6 3h5.599c2.55 0 4.403.363 5.555 1.089 1.153.726 1.729 1.88 1.729 3.464 0 1.074-.252 1.956-.757 2.645a3.023 3.023 0 0 1-2.012 1.243v.123c1.14.254 1.963.73 2.468 1.427.504.698.756 1.625.756 2.781 0 1.64-.592 2.92-1.778 3.84-1.185.918-2.795 1.377-4.83 1.377H6V3Zm3.814 7.124h2.215c1.034 0 1.782-.16 2.246-.48.463-.32.695-.848.695-1.587 0-.689-.252-1.183-.757-1.482-.504-.3-1.302-.45-2.393-.45H9.814v4Zm0 3.027v4.688H12.3c1.05 0 1.825-.2 2.326-.602.5-.402.75-1.018.75-1.846 0-1.493-1.066-2.24-3.199-2.24H9.814Z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
+SvgBold.displayName = 'SvgBold';
+
+var BoldIcon = function BoldIcon(props) {
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgBold, _objectSpread$g(_objectSpread$g({}, props), {}, {
+        className: createClass(getIconStyles$c(props))
+      }));
+    }
+  });
+};
+
+BoldIcon.displayName = 'BoldIcon';
+var BoldIcon$1 = BoldIcon;
+
 function ownKeys$f(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$f(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$f(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -656,7 +784,7 @@ var getIconStyles$b = function getIconStyles(props) {
   return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$b(props.color), ";}&,image{", getSizeStyle$b(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
-var SvgBold = function SvgBold(props) {
+var SvgExpandFull = function SvgExpandFull(props) {
   return jsxRuntime.jsx("svg", _objectSpread$f(_objectSpread$f({
     width: 24,
     height: 24,
@@ -665,28 +793,28 @@ var SvgBold = function SvgBold(props) {
     role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("path", {
-      d: "M6 3h5.599c2.55 0 4.403.363 5.555 1.089 1.153.726 1.729 1.88 1.729 3.464 0 1.074-.252 1.956-.757 2.645a3.023 3.023 0 0 1-2.012 1.243v.123c1.14.254 1.963.73 2.468 1.427.504.698.756 1.625.756 2.781 0 1.64-.592 2.92-1.778 3.84-1.185.918-2.795 1.377-4.83 1.377H6V3Zm3.814 7.124h2.215c1.034 0 1.782-.16 2.246-.48.463-.32.695-.848.695-1.587 0-.689-.252-1.183-.757-1.482-.504-.3-1.302-.45-2.393-.45H9.814v4Zm0 3.027v4.688H12.3c1.05 0 1.825-.2 2.326-.602.5-.402.75-1.018.75-1.846 0-1.493-1.066-2.24-3.199-2.24H9.814Z",
+      d: "m14.902 13.93.086.074 4.62 4.62v-2.967a.696.696 0 0 1 1.386-.095l.006.095v4.647a.696.696 0 0 1-.601.69l-.095.006h-4.647a.696.696 0 0 1-.095-1.386l.095-.006h2.967l-4.62-4.62a.696.696 0 0 1 .898-1.058Zm-4.906.074c.245.244.27.626.074.898l-.074.086-4.62 4.62h2.967a.696.696 0 0 1 .095 1.386L8.343 21H3.696a.696.696 0 0 1-.69-.601L3 20.304v-4.647a.696.696 0 0 1 1.386-.095l.006.095v2.967l4.62-4.62a.696.696 0 0 1 .984 0ZM8.448 3a.71.71 0 0 1 .096 1.413l-.096.006H5.422l4.57 4.57a.71.71 0 0 1-.915 1.078l-.088-.075-4.57-4.57v3.026a.71.71 0 0 1-1.413.097L3 8.449v-4.74a.71.71 0 0 1 .613-.703L3.71 3h4.738ZM20.29 3a.71.71 0 0 1 .71.71v4.738a.71.71 0 1 1-1.42 0V5.423l-4.569 4.57a.708.708 0 0 1-1.003 0 .71.71 0 0 1 0-1.004l4.57-4.57h-3.026a.71.71 0 1 1 0-1.419Z",
       fill: "#1A1A1A",
       fillRule: "evenodd"
     })
   }));
 };
 
-SvgBold.displayName = 'SvgBold';
+SvgExpandFull.displayName = 'SvgExpandFull';
 
-var BoldIcon = function BoldIcon(props) {
+var ExpandFullIcon = function ExpandFullIcon(props) {
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgBold, _objectSpread$f(_objectSpread$f({}, props), {}, {
+      return jsxRuntime.jsx(SvgExpandFull, _objectSpread$f(_objectSpread$f({}, props), {}, {
         className: createClass(getIconStyles$b(props))
       }));
     }
   });
 };
 
-BoldIcon.displayName = 'BoldIcon';
-var BoldIcon$1 = BoldIcon;
+ExpandFullIcon.displayName = 'ExpandFullIcon';
+var ExpandFullIcon$1 = ExpandFullIcon;
 
 function ownKeys$e(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -784,7 +912,7 @@ var getIconStyles$a = function getIconStyles(props) {
   return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$a(props.color), ";}&,image{", getSizeStyle$a(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
-var SvgExpandFull = function SvgExpandFull(props) {
+var SvgExpand = function SvgExpand(props) {
   return jsxRuntime.jsx("svg", _objectSpread$e(_objectSpread$e({
     width: 24,
     height: 24,
@@ -793,28 +921,26 @@ var SvgExpandFull = function SvgExpandFull(props) {
     role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("path", {
-      d: "m14.902 13.93.086.074 4.62 4.62v-2.967a.696.696 0 0 1 1.386-.095l.006.095v4.647a.696.696 0 0 1-.601.69l-.095.006h-4.647a.696.696 0 0 1-.095-1.386l.095-.006h2.967l-4.62-4.62a.696.696 0 0 1 .898-1.058Zm-4.906.074c.245.244.27.626.074.898l-.074.086-4.62 4.62h2.967a.696.696 0 0 1 .095 1.386L8.343 21H3.696a.696.696 0 0 1-.69-.601L3 20.304v-4.647a.696.696 0 0 1 1.386-.095l.006.095v2.967l4.62-4.62a.696.696 0 0 1 .984 0ZM8.448 3a.71.71 0 0 1 .096 1.413l-.096.006H5.422l4.57 4.57a.71.71 0 0 1-.915 1.078l-.088-.075-4.57-4.57v3.026a.71.71 0 0 1-1.413.097L3 8.449v-4.74a.71.71 0 0 1 .613-.703L3.71 3h4.738ZM20.29 3a.71.71 0 0 1 .71.71v4.738a.71.71 0 1 1-1.42 0V5.423l-4.569 4.57a.708.708 0 0 1-1.003 0 .71.71 0 0 1 0-1.004l4.57-4.57h-3.026a.71.71 0 1 1 0-1.419Z",
-      fill: "#1A1A1A",
-      fillRule: "evenodd"
+      d: "M4 21a.965.965 0 0 1-.712-.288A.965.965 0 0 1 3 20v-6c0-.283.096-.521.288-.713A.967.967 0 0 1 4 13a.97.97 0 0 1 .713.287A.97.97 0 0 1 5 14v3.6L17.6 5H14a.965.965 0 0 1-.712-.288A.965.965 0 0 1 13 4c0-.283.096-.521.288-.713A.967.967 0 0 1 14 3h6c.283 0 .52.096.712.287.192.192.288.43.288.713v6c0 .283-.096.52-.288.712A.965.965 0 0 1 20 11a.965.965 0 0 1-.712-.288A.965.965 0 0 1 19 10V6.4L6.4 19H10c.283 0 .521.096.713.288A.967.967 0 0 1 11 20c0 .283-.096.52-.287.712A.968.968 0 0 1 10 21H4Z"
     })
   }));
 };
 
-SvgExpandFull.displayName = 'SvgExpandFull';
+SvgExpand.displayName = 'SvgExpand';
 
-var ExpandFullIcon = function ExpandFullIcon(props) {
+var ExpandIcon = function ExpandIcon(props) {
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgExpandFull, _objectSpread$e(_objectSpread$e({}, props), {}, {
+      return jsxRuntime.jsx(SvgExpand, _objectSpread$e(_objectSpread$e({}, props), {}, {
         className: createClass(getIconStyles$a(props))
       }));
     }
   });
 };
 
-ExpandFullIcon.displayName = 'ExpandFullIcon';
-var ExpandFullIcon$1 = ExpandFullIcon;
+ExpandIcon.displayName = 'ExpandIcon';
+var ExpandIcon$1 = ExpandIcon;
 
 function ownKeys$d(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -2127,31 +2253,67 @@ UnorderedListIcon.displayName = 'UnorderedListIcon';
 var UnorderedListIcon$1 = UnorderedListIcon;
 
 var getBorderColor = function getBorderColor(props) {
+  var defaultBorderColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.borderColorForInput;
+
   if (props.isDisabled) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenDisabled, ";" + ("" ), "" );
+    return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
 
   if (props.hasError) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenError, ";" + ("" ), "" );
+    return designSystem.designTokens.borderColorForInputWhenError;
   }
 
   if (props.hasWarning) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenWarning, ";" + ("" ), "" );
+    return designSystem.designTokens.borderColorForInputWhenWarning;
   }
 
   if (props.isReadOnly) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenReadonly, ";" + ("" ), "" );
+    return designSystem.designTokens.borderColorForInputWhenReadonly;
+  }
+
+  return defaultBorderColor;
+};
+
+var getInputBoxShadow = function getInputBoxShadow(props) {
+  var defaultBoxShadow = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : designSystem.designTokens.shadowForInput;
+
+  if (props.hasError) {
+    return /*#__PURE__*/react$1.css("box-shadow:", designSystem.designTokens.shadowForInputWhenError, ";" + ("" ), "" );
+  }
+
+  if (props.hasWarning) {
+    return /*#__PURE__*/react$1.css("box-shadow:", designSystem.designTokens.shadowForInputWhenWarning, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInput, ";" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("box-shadow:", defaultBoxShadow, ";" + ("" ), "" );
 };
 
-var getBackgroundColor = function getBackgroundColor(props) {
+var getTextColor = function getTextColor(props) {
+  if (props.hasError && props.isNewTheme) {
+    return /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenError, ";" + ("" ), "" );
+  }
+
+  if (props.hasWarning && props.isNewTheme) {
+    return /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenWarning, ";" + ("" ), "" );
+  }
+
+  if (props.isDisabled || props.isReadOnly) {
+    return /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenDisabled, ";" + ("" ), "" );
+  }
+
+  return /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInput, ";" + ("" ), "" );
+};
+
+var getContainerBackgroundColor = function getContainerBackgroundColor(props) {
   if (props.isDisabled) {
-    return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.backgroundColorForInputWhenDisabled, ";" + ("" ), "" );
+    return designSystem.designTokens.backgroundColorForInputWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
 
-  return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.backgroundColorForInput, ";" + ("" ), "" );
+  return designSystem.designTokens.backgroundColorForInput;
 };
 
 var ToolbarMainControls = /*#__PURE__*/_styled__default["default"]("div", {
@@ -2165,7 +2327,7 @@ var ToolbarRightControls = /*#__PURE__*/_styled__default["default"]("div", {
 } )("" );
 var Toolbar = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae42"
-} )("display:flex;flex-wrap:wrap;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.designTokens.spacing10, " calc(", designSystem.designTokens.spacing20, " - 1px);padding-left:calc(", designSystem.designTokens.spacing10, " - 1px);align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.designTokens.spacing20, ");height:1px;background:", designSystem.designTokens.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
+} )("display:flex;flex-wrap:wrap;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.designTokens.paddingForRichTextToolbar, ";padding-left:", designSystem.designTokens.paddingLeftForRichTextToolbar, ";align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.designTokens.spacing20, ");height:1px;background:", designSystem.designTokens.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
 
 var _ref$2 = {
   name: "7g2mws",
@@ -2178,12 +2340,22 @@ var reset = function reset(props) {
 
 var EditorContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae41"
-} )("padding:4px ", designSystem.designTokens.spacing20, ";padding-top:6px;border-radius:", designSystem.designTokens.borderRadiusForInput, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";" + ("" ));
+} )("padding:", designSystem.designTokens.paddingForRichTextEditorContainer, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";border-color:", function (props) {
+  return getBorderColor(props);
+}, ";overflow-y:scroll;", reset, " ", getTextColor, ";" + ("" ));
 var Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae40"
-} )("border-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", designSystem.designTokens.borderColorForInput, ";transition:", designSystem.designTokens.transitionStandard, ";", getBorderColor, " ", getBackgroundColor, " pointer-events:", function (props) {
+} )("border-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", designSystem.designTokens.borderColorForInput, ";transition:", designSystem.designTokens.transitionStandard, ";padding:", designSystem.designTokens.paddingForRichTextInput, ";background-color:", function (props) {
+  return getContainerBackgroundColor(props);
+}, ";", function (props) {
+  return getInputBoxShadow(props);
+}, " border-color:", function (props) {
+  return getBorderColor(props);
+}, ";pointer-events:", function (props) {
   return props.isDisabled || props.isReadOnly ? 'none' : 'inherit';
-}, ";position:relative;&:hover{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.designTokens.borderColorForInput, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}}" + ("" ));
+}, ";position:relative;&:hover{", function (props) {
+  return getBorderColor(props, designSystem.designTokens.borderColorForInputWhenHovered);
+}, ";background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.designTokens.borderColorForInput, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.shadowForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}}" + ("" ));
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -2203,7 +2375,7 @@ var RichTextBodyButton = function RichTextBodyButton(props) {
     "aria-disabled": props.isDisabled,
     disabled: props.isDisabled,
     "aria-label": props.label,
-    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.designTokens.colorAccent30 : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.designTokens.spacing10, ";padding:", designSystem.designTokens.spacing10, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.designTokens.colorAccent30 : designSystem.designTokens.colorNeutral90, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
+    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButtonWhenActive : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.designTokens.spacing10, ";padding:", designSystem.designTokens.paddingForLocalizedRichTextBodyButton, ";margin:", designSystem.designTokens.marginForLocalizedRichTextBodyButton, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButtonWhenActive : designSystem.designTokens.backgroundColorForLocalizedRichTextBodyButton, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
     children: props.children
   }));
 };
@@ -2219,20 +2391,22 @@ var Divider = /*#__PURE__*/_styled__default["default"]("span", {
 var Divider$1 = Divider;
 
 var DropdownItem = /*#__PURE__*/_styled__default["default"]("button", {
-  target: "e1f4n71b1"
-} )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.designTokens.spacing10, " ", designSystem.designTokens.spacing20, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";display:block;background-color:", function (props) {
-  return props.isSelected ? designSystem.designTokens.colorAccent95 : designSystem.designTokens.colorSurface;
-}, ";&:focus,&:hover{outline:none;background-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ));
+  target: "e1f4n71b2"
+} )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.designTokens.paddingForLocalizedRichTextDropdownItem, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";display:block;background-color:", function (props) {
+  return props.isSelected ? designSystem.designTokens.backgroundColorForInputWhenActive : designSystem.designTokens.colorSurface;
+}, ";&:focus,&:hover{outline:none;background-color:", designSystem.designTokens.backgroundColorForSelectInputOptionWhenHovered, ";}" + ("" ));
 
 var getButtonStyles = function getButtonStyles(props) {
-  var _context;
-
-  return [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadius4, ";cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";color:", designSystem.designTokens.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? _concatInstanceProperty__default["default"](_context = "calc(".concat(designSystem.designTokens.spacing10, " - 1px) ")).call(_context, designSystem.designTokens.spacing20) : designSystem.designTokens.spacing10, ";&:hover{background-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.designTokens.colorAccent30, ";color:", designSystem.designTokens.colorSurface, ";svg{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" )];
+  return [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadius4, ";cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";color:", designSystem.designTokens.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? "".concat(designSystem.designTokens.paddingForLocalizedRichTextDropdownButton) : designSystem.designTokens.paddingForLocalizedRichTextBodyButton, ";&:hover{background-color:", designSystem.designTokens.backgroundColorForRichTextDropdownWhenHovered, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.designTokens.backgroundColorForRichTextButton, ";color:", designSystem.designTokens.colorSurface, ";svg{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" )];
 };
 
 var DropdownContainer = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e1f4n71b1"
+} )("position:absolute;cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";top:", designSystem.designTokens.spacing10, ";margin-top:", designSystem.designTokens.spacing10, ";left:0;white-space:nowrap;background:", designSystem.designTokens.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.designTokens.borderColorForSelectInputMenu, ";box-shadow:", designSystem.designTokens.shadowForSelectInputMenu, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ));
+
+var DropdownItemLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1f4n71b0"
-} )("position:absolute;cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";top:", designSystem.designTokens.spacing10, ";margin-top:", designSystem.designTokens.spacing10, ";left:0;white-space:nowrap;background:", designSystem.designTokens.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.designTokens.colorPrimary, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ));
+} )("margin:", designSystem.designTokens.marginForRichTextDropdownItemLabel, ";" + ("" ));
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -2306,7 +2480,9 @@ var Dropdown = function Dropdown(props) {
                 key: index,
                 value: item.value,
                 isSelected: props.getIsItemSelected(item)
-              }), item.label);
+              }), jsxRuntime.jsx(DropdownItemLabelWrapper, {
+                children: item.label
+              }));
             })
           })
         }) : null]
@@ -2895,6 +3071,10 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
       containerRef = _ref2.containerRef;
   var intl = reactIntl.useIntl();
   var editor = slateReact.useSlate();
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme;
+
   var dropdownOptions = createMoreStylesDropdownOptions(intl);
   var styleDropdownOptions = createStyleDropdownOptions(intl);
   var hasUndos = editor.history.undos.length > 0;
@@ -2995,7 +3175,9 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
             Label: MoreStylesDropdownLabel
           },
           getIsItemSelected: getIsMoreStyleMarkItemSelected
-        }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsx(Tooltip__default["default"], {
+        }), jsxRuntime.jsx(Divider$1, {
+          css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.marginForRichTextDivider, ";" + ("" ), "" )
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
           title: intl.formatMessage(messages.orderedListButtonLabel),
           placement: "bottom",
           styles: tooltipStyles,
@@ -3053,7 +3235,9 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
             })
           })
         }), props.showExpandIcon && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsx(Tooltip__default["default"], {
+          children: [jsxRuntime.jsx(Divider$1, {
+            css: /*#__PURE__*/react$1.css("margin:", designSystem.designTokens.marginForRichTextDivider, ";" + ("" ), "" )
+          }), jsxRuntime.jsx(Tooltip__default["default"], {
             title: intl.formatMessage(messages.expandButtonLabel),
             placement: "bottom-end",
             children: jsxRuntime.jsx(Button, {
@@ -3062,7 +3246,9 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
               isReadOnly: props.isReadOnly,
               label: intl.formatMessage(messages.expandButtonLabel),
               onClick: props.onClickExpand,
-              children: jsxRuntime.jsx(ExpandFullIcon$1, {
+              children: isNewTheme ? jsxRuntime.jsx(ExpandIcon$1, {
+                size: "medium"
+              }) : jsxRuntime.jsx(ExpandFullIcon$1, {
                 size: "medium"
               })
             })
@@ -3079,6 +3265,7 @@ var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
           isReadOnly: props.isReadOnly,
           isDisabled: props.isDisabled,
           ref: containerRef,
+          isNewTheme: isNewTheme,
           children: props.children
         })
       })
@@ -3093,7 +3280,7 @@ RichTextEditorBody.defaultProps = defaultProps;
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.13.1";
+var version = "15.14.0";
 
 exports.Element = Element;
 exports.HiddenInput = HiddenInput$1;