@commercetools-uikit/rich-text-utils 12.2.1 → 12.2.5

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

@@ -20,18 +20,18 @@ var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instan
 var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
 var _sliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/slice');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
-var React = require('react');
 var Html = require('slate-html-serializer');
 var flatMap = require('lodash/flatMap');
-var react = require('@emotion/react');
-var isHotkey = require('is-hotkey');
-var memoize = require('lodash/memoize');
-var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var isHotkey = require('is-hotkey');
+var memoize = require('lodash/memoize');
+var _someInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/some');
+var react = require('react');
 require('prop-types');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var _styled = require('@emotion/styled/base');
@@ -39,11 +39,11 @@ var _findInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/insta
 var _Array$from = require('@babel/runtime-corejs3/core-js-stable/array/from');
 var reactIntl = require('react-intl');
 require('react-required-if');
+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 _extends = require('@babel/runtime-corejs3/helpers/extends');
 var omit = require('lodash/omit');
 var Downshift = require('downshift');
 
@@ -61,16 +61,15 @@ var _mapInstanceProperty__default = /*#__PURE__*/_interopDefault(_mapInstancePro
 var _trimInstanceProperty__default = /*#__PURE__*/_interopDefault(_trimInstanceProperty);
 var _sliceInstanceProperty__default = /*#__PURE__*/_interopDefault(_sliceInstanceProperty);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
-var React__default = /*#__PURE__*/_interopDefault(React);
 var Html__default = /*#__PURE__*/_interopDefault(Html);
 var flatMap__default = /*#__PURE__*/_interopDefault(flatMap);
-var memoize__default = /*#__PURE__*/_interopDefault(memoize);
-var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
+var memoize__default = /*#__PURE__*/_interopDefault(memoize);
+var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceProperty);
 var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 var _findInstanceProperty__default = /*#__PURE__*/_interopDefault(_findInstanceProperty);
 var _Array$from__default = /*#__PURE__*/_interopDefault(_Array$from);
@@ -142,49 +141,67 @@ var rules = [{
       // eslint-disable-next-line default-case
       switch (obj.type) {
         case 'code':
-          return react.jsx("pre", null, react.jsx("code", null, children));
+          return jsxRuntime.jsx("pre", {
+            children: jsxRuntime.jsx("code", {
+              children: children
+            })
+          });
 
         case 'bulleted-list':
-          return react.jsx("ul", null, children);
+          return jsxRuntime.jsx("ul", {
+            children: children
+          });
 
         case 'numbered-list':
-          return react.jsx("ol", null, children);
+          return jsxRuntime.jsx("ol", {
+            children: children
+          });
 
         case 'list-item':
-          return react.jsx("li", null, children);
+          return jsxRuntime.jsx("li", {
+            children: children
+          });
 
         case 'paragraph':
-          return react.jsx("p", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("p", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'heading-one':
-          return react.jsx("h1", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("h1", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'heading-two':
-          return react.jsx("h2", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("h2", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'heading-three':
-          return react.jsx("h3", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("h3", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'heading-four':
-          return react.jsx("h4", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("h4", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'heading-five':
-          return react.jsx("h5", {
-            className: obj.data.get('className')
-          }, children);
+          return jsxRuntime.jsx("h5", {
+            className: obj.data.get('className'),
+            children: children
+          });
 
         case 'block-quote':
-          return react.jsx("blockquote", null, children);
+          return jsxRuntime.jsx("blockquote", {
+            children: children
+          });
       }
     }
   }
@@ -199,18 +216,18 @@ var rules = [{
       if (styleAttribute) {
         var _context, _context2;
 
-        var marks = _filterInstanceProperty__default['default'](_context = _mapInstanceProperty__default['default'](_context2 = flatMap__default['default'](styleAttribute.split(';'), function (val) {
-          var split = _trimInstanceProperty__default['default'](val).call(val).split(' ');
+        var marks = _filterInstanceProperty__default["default"](_context = _mapInstanceProperty__default["default"](_context2 = flatMap__default["default"](styleAttribute.split(';'), function (val) {
+          var split = _trimInstanceProperty__default["default"](val).call(val).split(' ');
 
           var _split = _toArray(split),
               key = _split[0],
-              values = _sliceInstanceProperty__default['default'](_split).call(_split, 1);
+              values = _sliceInstanceProperty__default["default"](_split).call(_split, 1);
 
-          return _mapInstanceProperty__default['default'](values).call(values, function (value) {
-            return _defineProperty({}, _sliceInstanceProperty__default['default'](key).call(key, 0, -1), value);
+          return _mapInstanceProperty__default["default"](values).call(values, function (value) {
+            return _defineProperty({}, _sliceInstanceProperty__default["default"](key).call(key, 0, -1), value);
           });
         })).call(_context2, function (val) {
-          var _Object$entries$ = _slicedToArray(_Object$entries__default['default'](val)[0], 2),
+          var _Object$entries$ = _slicedToArray(_Object$entries__default["default"](val)[0], 2),
               key = _Object$entries$[0],
               value = _Object$entries$[1];
 
@@ -224,7 +241,7 @@ var rules = [{
         if (marks && marks.length > 0) {
           tagName = marks[0];
 
-          _forEachInstanceProperty__default['default'](marks).call(marks, function (mark) {
+          _forEachInstanceProperty__default["default"](marks).call(marks, function (mark) {
             deepestNode.removeChild(childNode);
             var newNode = document.createElement(mark);
             newNode.appendChild(childNode);
@@ -259,58 +276,79 @@ var rules = [{
       // eslint-disable-next-line default-case
       switch (obj.type) {
         case 'span':
-          return react.jsx("span", null, children);
+          return jsxRuntime.jsx("span", {
+            children: children
+          });
 
         case 'bold':
-          return react.jsx("strong", null, children);
+          return jsxRuntime.jsx("strong", {
+            children: children
+          });
 
         case 'italic':
-          return react.jsx("em", null, children);
+          return jsxRuntime.jsx("em", {
+            children: children
+          });
 
         case 'underlined':
-          return react.jsx("u", null, children);
+          return jsxRuntime.jsx("u", {
+            children: children
+          });
 
         case 'superscript':
-          return react.jsx("sup", null, children);
+          return jsxRuntime.jsx("sup", {
+            children: children
+          });
 
         case 'subscript':
-          return react.jsx("sub", null, children);
+          return jsxRuntime.jsx("sub", {
+            children: children
+          });
 
         case 'strikethrough':
-          return react.jsx("del", null, children);
+          return jsxRuntime.jsx("del", {
+            children: children
+          });
 
         case 'code':
-          return react.jsx("pre", null, react.jsx("code", null, children));
+          return jsxRuntime.jsx("pre", {
+            children: jsxRuntime.jsx("code", {
+              children: children
+            })
+          });
       }
     }
   }
 }]; // Create a new serializer instance with our `rules` from above.
 
-var html = new Html__default['default']({
+var html = new Html__default["default"]({
   rules: rules
 });
+var html$1 = html;
 
-var isEmpty = function isEmpty(rawValue) {
-  return html.deserialize(rawValue).document.text === '';
+var isEmpty$1 = function isEmpty(rawValue) {
+  return html$1.deserialize(rawValue).document.text === '';
 };
 
+var isRichTextEmpty = isEmpty$1;
+
 var initializeValue = function initializeValue(value) {
-  return html.serialize(html.deserialize(value));
+  return html$1.serialize(html$1.deserialize(value));
 };
 
 var isLocalizedHtmlValueEmpty = function isLocalizedHtmlValueEmpty(value) {
-  return !value || isEmpty(value);
+  return !value || isRichTextEmpty(value);
 };
 
-var isEmpty$1 = function isEmpty(localizedHtmlValue) {
+var isEmpty = function isEmpty(localizedHtmlValue) {
   var _context;
 
   if (!localizedHtmlValue) return true;
-  return _everyInstanceProperty__default['default'](_context = _Object$values__default['default'](localizedHtmlValue)).call(_context, isLocalizedHtmlValueEmpty);
+  return _everyInstanceProperty__default["default"](_context = _Object$values__default["default"](localizedHtmlValue)).call(_context, isLocalizedHtmlValueEmpty);
 };
 var omitEmptyTranslations = function omitEmptyTranslations(localizedString) {
   var _context2;
-  return _reduceInstanceProperty__default['default'](_context2 = _Object$entries__default['default'](localizedString)).call(_context2, function (localizedStringWithoutEmptyTranslations, _ref) {
+  return _reduceInstanceProperty__default["default"](_context2 = _Object$entries__default["default"](localizedString)).call(_context2, function (localizedStringWithoutEmptyTranslations, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
         language = _ref2[0],
         value = _ref2[1];
@@ -327,8 +365,8 @@ var createLocalizedString = function createLocalizedString(languages) {
   var _context3;
 
   var existingTranslations = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var mergedLanguages = existingTranslations ? uniq__default['default'](_concatInstanceProperty__default['default'](_context3 = []).call(_context3, _toConsumableArray(languages), _toConsumableArray(_Object$keys__default['default'](existingTranslations)))) : languages;
-  return _reduceInstanceProperty__default['default'](mergedLanguages).call(mergedLanguages, function (localizedString, language) {
+  var mergedLanguages = existingTranslations ? uniq__default["default"](_concatInstanceProperty__default["default"](_context3 = []).call(_context3, _toConsumableArray(languages), _toConsumableArray(_Object$keys__default["default"](existingTranslations)))) : languages;
+  return _reduceInstanceProperty__default["default"](mergedLanguages).call(mergedLanguages, function (localizedString, language) {
     // eslint-disable-next-line no-param-reassign
     localizedString[language] = existingTranslations && existingTranslations[language] ? initializeValue(existingTranslations[language]) : initializeValue('');
     return localizedString;
@@ -338,12 +376,12 @@ var createLocalizedString = function createLocalizedString(languages) {
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   createLocalizedString: createLocalizedString,
-  isEmpty: isEmpty$1,
+  isEmpty: isEmpty,
   omitEmptyTranslations: omitEmptyTranslations
 });
 
-var memoizedIsHotkey = memoize__default['default'](isHotkey.isKeyHotkey);
-var HOT_KEY = 'mod+z';
+var memoizedIsHotkey$2 = memoize__default["default"](isHotkey.isKeyHotkey);
+var HOT_KEY$1 = 'mod+z';
 
 var _hasUndos = function hasUndos(editor) {
   var value = editor.value;
@@ -354,8 +392,8 @@ var _hasUndos = function hasUndos(editor) {
 
 var UndoPlugin = function UndoPlugin() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var hotkey = options.hotkey || HOT_KEY;
-  var isUndoHotkey = memoizedIsHotkey(hotkey);
+  var hotkey = options.hotkey || HOT_KEY$1;
+  var isUndoHotkey = memoizedIsHotkey$2(hotkey);
   return [{
     // eslint-disable-next-line consistent-return
     onKeyDown: function onKeyDown(event, editor, next) {
@@ -381,8 +419,10 @@ var UndoPlugin = function UndoPlugin() {
   }];
 };
 
-var memoizedIsHotkey$1 = memoize__default['default'](isHotkey.isKeyHotkey);
-var HOT_KEY$1 = 'mod+y';
+var UndoPlugin$1 = UndoPlugin;
+
+var memoizedIsHotkey$1 = memoize__default["default"](isHotkey.isKeyHotkey);
+var HOT_KEY = 'mod+y';
 
 var _hasRedos = function hasRedos(editor) {
   var value = editor.value;
@@ -393,7 +433,7 @@ var _hasRedos = function hasRedos(editor) {
 
 var RedoPlugin = function RedoPlugin() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var hotkey = options.hotkey || HOT_KEY$1;
+  var hotkey = options.hotkey || HOT_KEY;
   var isRedoHotkey = memoizedIsHotkey$1(hotkey);
   return [{
     // eslint-disable-next-line consistent-return
@@ -424,12 +464,17 @@ var RedoPlugin = function RedoPlugin() {
   }];
 };
 
-var DEFAULT_NODE = BLOCK_TAGS.p;
+var RedoPlugin$1 = RedoPlugin;
 
-var hasBlock = function hasBlock(type, editor) {
+function ownKeys$j(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$j(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$j(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var DEFAULT_NODE$1 = BLOCK_TAGS.p;
+
+var hasBlock$2 = function hasBlock(type, editor) {
   var _context;
 
-  return _someInstanceProperty__default['default'](_context = editor.value.blocks).call(_context, function (node) {
+  return _someInstanceProperty__default["default"](_context = editor.value.blocks).call(_context, function (node) {
     return node.type === type;
   });
 };
@@ -438,16 +483,16 @@ var toggle = function toggle(editor, typeName) {
   var _context2;
 
   // Handle the extra wrapping required for list buttons.
-  var isList = hasBlock(BLOCK_TAGS.li, editor);
+  var isList = hasBlock$2(BLOCK_TAGS.li, editor);
 
-  var isType = _someInstanceProperty__default['default'](_context2 = editor.value.blocks).call(_context2, function (block) {
+  var isType = _someInstanceProperty__default["default"](_context2 = editor.value.blocks).call(_context2, function (block) {
     return Boolean(editor.value.document.getClosest(block.key, function (parent) {
       return parent.type === typeName;
     }));
   });
 
   if (isList && isType) {
-    editor.setBlocks(DEFAULT_NODE).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
+    editor.setBlocks(DEFAULT_NODE$1).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
   } else if (isList) {
     editor.unwrapBlock(typeName === BLOCK_TAGS.ul ? BLOCK_TAGS.ol : BLOCK_TAGS.ul).wrapBlock(typeName);
   } else {
@@ -456,11 +501,11 @@ var toggle = function toggle(editor, typeName) {
 };
 
 var query = function query(editor, typeName) {
-  var isActive = hasBlock(typeName, editor);
+  var isActive = hasBlock$2(typeName, editor);
 
   if (editor.value.blocks.size > 0) {
     var parent = editor.value.document.getParent(editor.value.blocks.first().key);
-    isActive = hasBlock(BLOCK_TAGS.li, editor) && parent && parent.type === typeName;
+    isActive = hasBlock$2(BLOCK_TAGS.li, editor) && parent && parent.type === typeName;
   }
 
   return isActive;
@@ -475,13 +520,19 @@ var ListPlugin = function ListPlugin() {
 
       switch (node.type) {
         case BLOCK_TAGS.ul:
-          return react.jsx("ul", attributes, children);
+          return jsxRuntime.jsx("ul", _objectSpread$j(_objectSpread$j({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.li:
-          return react.jsx("li", attributes, children);
+          return jsxRuntime.jsx("li", _objectSpread$j(_objectSpread$j({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.ol:
-          return react.jsx("ol", attributes, children);
+          return jsxRuntime.jsx("ol", _objectSpread$j(_objectSpread$j({}, attributes), {}, {
+            children: children
+          }));
 
         default:
           return next();
@@ -514,12 +565,17 @@ var ListPlugin = function ListPlugin() {
   }];
 };
 
-var memoizedIsHotkey$2 = memoize__default['default'](isHotkey.isKeyHotkey);
+var ListPlugin$1 = ListPlugin;
+
+function ownKeys$i(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$i(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$i(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var memoizedIsHotkey = memoize__default["default"](isHotkey.isKeyHotkey);
 var requiredOptions = ['typeName', 'hotkey', 'command', 'query', 'RenderMark'];
 
 var validate = function validate(options) {
   // eslint-disable-next-line consistent-return
-  var missingRequiredOptions = _filterInstanceProperty__default['default'](requiredOptions).call(requiredOptions, function (option) {
+  var missingRequiredOptions = _filterInstanceProperty__default["default"](requiredOptions).call(requiredOptions, function (option) {
     return !options[option];
   });
 
@@ -529,7 +585,7 @@ var validate = function validate(options) {
 var MarkPlugin = function MarkPlugin() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   validate(options);
-  var isHotKey = memoizedIsHotkey$2(options.hotkey);
+  var isHotKey = memoizedIsHotkey(options.hotkey);
   return [{
     // eslint-disable-next-line consistent-return
     onKeyDown: function onKeyDown(event, editor, next) {
@@ -547,7 +603,9 @@ var MarkPlugin = function MarkPlugin() {
 
       switch (mark.type) {
         case options.typeName:
-          return react.jsx(options.RenderMark, attributes, children);
+          return jsxRuntime.jsx(options.RenderMark, _objectSpread$i(_objectSpread$i({}, attributes), {}, {
+            children: children
+          }));
 
         default:
           return next();
@@ -559,13 +617,18 @@ var MarkPlugin = function MarkPlugin() {
     queries: _defineProperty({}, options.query, function (editor) {
       var _context;
 
-      return _someInstanceProperty__default['default'](_context = editor.value.activeMarks).call(_context, function (mark) {
+      return _someInstanceProperty__default["default"](_context = editor.value.activeMarks).call(_context, function (mark) {
         return mark.type === options.typeName;
       });
     })
   }];
 };
 
+var MarkPlugin$1 = MarkPlugin;
+
+function ownKeys$h(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$h(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$h(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var RenderBlockPlugin = function RenderBlockPlugin() {
   return {
     renderBlock: function renderBlock(props, editor, next) {
@@ -575,37 +638,61 @@ var RenderBlockPlugin = function RenderBlockPlugin() {
 
       switch (node.type) {
         case BLOCK_TAGS.pre:
-          return react.jsx("pre", null, react.jsx("code", attributes, children));
+          return jsxRuntime.jsx("pre", {
+            children: jsxRuntime.jsx("code", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+              children: children
+            }))
+          });
 
         case BLOCK_TAGS.blockquote:
-          return react.jsx("blockquote", attributes, children);
+          return jsxRuntime.jsx("blockquote", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.h1:
-          return react.jsx("h1", attributes, children);
+          return jsxRuntime.jsx("h1", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.h2:
-          return react.jsx("h2", attributes, children);
+          return jsxRuntime.jsx("h2", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.h3:
-          return react.jsx("h3", attributes, children);
+          return jsxRuntime.jsx("h3", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.h4:
-          return react.jsx("h4", attributes, children);
+          return jsxRuntime.jsx("h4", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.h5:
-          return react.jsx("h5", attributes, children);
+          return jsxRuntime.jsx("h5", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.li:
-          return react.jsx("li", attributes, children);
+          return jsxRuntime.jsx("li", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.ol:
-          return react.jsx("ol", attributes, children);
+          return jsxRuntime.jsx("ol", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.ul:
-          return react.jsx("ul", attributes, children);
+          return jsxRuntime.jsx("ul", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case BLOCK_TAGS.p:
-          return react.jsx("p", attributes, children);
+          return jsxRuntime.jsx("p", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         default:
           return next();
@@ -622,13 +709,19 @@ var RenderMarkPlugin = function RenderMarkPlugin() {
 
       switch (mark.type) {
         case MARK_TAGS.sup:
-          return react.jsx("sup", attributes, children);
+          return jsxRuntime.jsx("sup", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case MARK_TAGS.sub:
-          return react.jsx("sub", attributes, children);
+          return jsxRuntime.jsx("sub", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         case MARK_TAGS.del:
-          return react.jsx("del", attributes, children);
+          return jsxRuntime.jsx("del", _objectSpread$h(_objectSpread$h({}, attributes), {}, {
+            children: children
+          }));
 
         default:
           return next();
@@ -637,9 +730,9 @@ var RenderMarkPlugin = function RenderMarkPlugin() {
   };
 };
 
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$g(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default['default'](_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$g(Object(source), true)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$g(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var instanceCounter = 0;
 /**
  * A plugin that renders a React placeholder for a given Slate node.
@@ -707,7 +800,7 @@ function SlateReactPlaceholder() {
         path: lastPath
       }
     };
-    return _concatInstanceProperty__default['default'](_context = []).call(_context, _toConsumableArray(others), [decoration]);
+    return _concatInstanceProperty__default["default"](_context = []).call(_context, _toConsumableArray(others), [decoration]);
   }
   /**
    * Render an inline placeholder for the placeholder mark.
@@ -724,7 +817,7 @@ function SlateReactPlaceholder() {
         deco = props.decoration;
 
     if (deco.type === 'placeholder' && deco.data.get('key') === instanceId) {
-      var placeHolderStyle = _objectSpread({
+      var placeHolderStyle = _objectSpread$g({
         pointerEvents: 'none',
         display: 'inline-block',
         position: 'absolute',
@@ -735,10 +828,13 @@ function SlateReactPlaceholder() {
         verticalAlign: 'text-top'
       }, style);
 
-      return react.jsx("span", null, react.jsx("span", {
-        contentEditable: false,
-        style: placeHolderStyle
-      }, editor.props.options.placeholder), children);
+      return jsxRuntime.jsxs("span", {
+        children: [jsxRuntime.jsx("span", {
+          contentEditable: false,
+          style: placeHolderStyle,
+          children: editor.props.options.placeholder
+        }), children]
+      });
     }
 
     return next();
@@ -756,18 +852,22 @@ function SlateReactPlaceholder() {
   };
 }
 
+function ownKeys$f(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$f(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _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; }
+
 var RenderMark_Strong = function RenderMark_Strong(props) {
-  return react.jsx("strong", props);
+  return jsxRuntime.jsx("strong", _objectSpread$f({}, props));
 }; // eslint-disable-next-line camelcase, react/display-name
 
 
 var RenderMark_Em = function RenderMark_Em(props) {
-  return react.jsx("em", props);
+  return jsxRuntime.jsx("em", _objectSpread$f({}, props));
 }; // eslint-disable-next-line camelcase, react/display-name
 
 
 var RenderMark_U = function RenderMark_U(props) {
-  return react.jsx("u", props);
+  return jsxRuntime.jsx("u", _objectSpread$f({}, props));
 };
 
 var plugins = [{
@@ -777,11 +877,11 @@ var plugins = [{
       var _context, _context2;
 
       var isEditorEmpty = editor.value.document.text === '';
-      var hasOneNode = _mapInstanceProperty__default['default'](_context = editor.value.document.nodes).call(_context, function (node) {
+      var hasOneNode = _mapInstanceProperty__default["default"](_context = editor.value.document.nodes).call(_context, function (node) {
         return node.text;
       }).toArray().length === 1;
 
-      var blocks = _mapInstanceProperty__default['default'](_context2 = editor.value.blocks).call(_context2, function (block) {
+      var blocks = _mapInstanceProperty__default["default"](_context2 = editor.value.blocks).call(_context2, function (block) {
         return block.type;
       }).toArray();
 
@@ -800,39 +900,40 @@ var plugins = [{
     fontSize: '1rem',
     fontWeight: 'normal'
   }
-}), MarkPlugin({
+}), MarkPlugin$1({
   typeName: MARK_TAGS.strong,
   hotkey: 'mod+b',
   command: 'toggleBoldMark',
   query: 'hasBoldMark',
   RenderMark: RenderMark_Strong
-}), MarkPlugin({
+}), MarkPlugin$1({
   typeName: MARK_TAGS.em,
   hotkey: 'mod+i',
   command: 'toggleItalicMark',
   query: 'hasItalicMark',
   RenderMark: RenderMark_Em
-}), MarkPlugin({
+}), MarkPlugin$1({
   typeName: MARK_TAGS.u,
   hotkey: 'mod+u',
   command: 'toggleUnderlinedMark',
   query: 'hasUnderlinedMark',
   RenderMark: RenderMark_U
-}), RenderMarkPlugin(), RenderBlockPlugin(), UndoPlugin(), RedoPlugin(), ListPlugin()];
+}), RenderMarkPlugin(), RenderBlockPlugin(), UndoPlugin$1(), RedoPlugin$1(), ListPlugin$1()];
+var plugins$1 = plugins;
 
 var HiddenInput = function HiddenInput(props) {
   var handleFocus = props.handleFocus;
-  var onFocus = React__default['default'].useCallback(function (event) {
+  var onFocus = react.useCallback(function (event) {
     event.preventDefault();
 
     if (!props.isFocused) {
       handleFocus();
     }
   }, [props.isFocused, handleFocus]);
-  var onBlur = React__default['default'].useCallback(function (event) {
+  var onBlur = react.useCallback(function (event) {
     event.preventDefault();
   }, []);
-  return react.jsx("input", {
+  return jsxRuntime.jsx("input", {
     css: inputUtils.accessibleHiddenInputStyles,
     id: props.id,
     onFocus: onFocus,
@@ -844,17 +945,18 @@ var HiddenInput = function HiddenInput(props) {
 
 HiddenInput.displayName = 'HiddenInput';
 HiddenInput.propTypes = {};
+var HiddenInput$1 = HiddenInput;
 
-function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$e(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$1(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$1(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes = {
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$e(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$e(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$b = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions = function getSizeDimensions(size) {
+var getSizeDimensions$b = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -866,43 +968,72 @@ var getSizeDimensions = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes[size], "px"),
-        height: "".concat(iconSizes[size], "px")
+        width: "".concat(iconSizes$b[size], "px"),
+        height: "".concat(iconSizes$b[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes.big, "px"),
-        height: "".concat(iconSizes.big, "px")
+        width: "".concat(iconSizes$b.big, "px"),
+        height: "".concat(iconSizes$b.big, "px")
       };
   }
 };
 
-var getSizeStyle = function getSizeStyle(size) {
+var getSizeStyle$b = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions(size);
+  var dimensions = getSizeDimensions$b(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor = function getColor(color, theme) {
+var getColor$b = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$1(_objectSpread$1({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$e(_objectSpread$e({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
 
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize(color))];
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -911,53 +1042,52 @@ var getColor = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color, theme), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$b = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$b(props.color, theme), ";}&,image{", getSizeStyle$b(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgBold = function SvgBold(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$e(_objectSpread$e({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "bold_react_svg__Component-/-icon-/-24px-/-Richtext-/-Bold-",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "bold_react_svg__Component-/-icon-/-16px-/-Richtext-/-Bold-",
-    fill: "#1A1A1A"
-  }, react.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 01-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",
-    id: "bold_react_svg__B"
-  }))));
-};
-
-SvgBold.propTypes = {};
+  }, 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 01-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) {
-  var theme = react.useTheme();
-  return react.jsx(SvgBold, _extends({}, props, {
-    css: getIconStyles(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgBold, _objectSpread$e(_objectSpread$e({}, props), {}, {
+        className: createClass(getIconStyles$b(props, theme))
+      }));
+    }
+  });
 };
 
-BoldIcon.propTypes = {};
 BoldIcon.displayName = 'BoldIcon';
+var BoldIcon$1 = BoldIcon;
 
-function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$d(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$2(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$2(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$1 = {
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$d(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$d(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$a = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$1 = function getSizeDimensions(size) {
+var getSizeDimensions$a = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -969,43 +1099,72 @@ var getSizeDimensions$1 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$1[size], "px"),
-        height: "".concat(iconSizes$1[size], "px")
+        width: "".concat(iconSizes$a[size], "px"),
+        height: "".concat(iconSizes$a[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$1.big, "px"),
-        height: "".concat(iconSizes$1.big, "px")
+        width: "".concat(iconSizes$a.big, "px"),
+        height: "".concat(iconSizes$a.big, "px")
       };
   }
 };
 
-var getSizeStyle$1 = function getSizeStyle(size) {
+var getSizeStyle$a = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$1(size);
+  var dimensions = getSizeDimensions$a(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$1 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$1 = function getColor(color, theme) {
+var getColor$a = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$2(_objectSpread$2({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$d(_objectSpread$d({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
 
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$1(color))];
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1014,56 +1173,52 @@ var getColor$1 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$1 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$a = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$a(props.color, theme), ";}&,image{", getSizeStyle$a(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgExpandFull = function SvgExpandFull(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$d(_objectSpread$d({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "expand-full_react_svg__Component-/-icon-/-16px-/-Richtext-/-Expand",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "expand-full_react_svg__Component-/-icon-/-16px-/-Richtext-/-Indent",
-    fill: "#1A1A1A"
-  }, react.jsx("g", {
-    id: "expand-full_react_svg__full-size-copy-3",
-    transform: "translate(3 3)"
-  }, react.jsx("path", {
-    d: "M11.902 10.93l.086.074 4.62 4.62v-2.967a.696.696 0 011.386-.095l.006.095v4.647a.696.696 0 01-.601.69l-.095.006h-4.647a.696.696 0 01-.095-1.386l.095-.006h2.967l-4.62-4.62a.696.696 0 01.898-1.058zm-4.906.074c.245.244.27.626.074.898l-.074.086-4.62 4.62h2.967a.696.696 0 01.095 1.386L5.343 18H.696a.696.696 0 01-.69-.601L0 17.304v-4.647a.696.696 0 011.386-.095l.006.095v2.967l4.62-4.62a.696.696 0 01.984 0zM5.448 0a.71.71 0 01.096 1.413l-.096.006H2.422l4.57 4.57a.71.71 0 01-.915 1.078l-.088-.075-4.57-4.57v3.026a.71.71 0 01-1.413.097L0 5.449V.709A.71.71 0 01.613.007L.71 0h4.738zM17.29 0a.71.71 0 01.71.71v4.738a.71.71 0 11-1.42 0V2.423l-4.569 4.57a.708.708 0 01-1.003 0 .71.71 0 010-1.004l4.57-4.57h-3.026a.71.71 0 110-1.419z",
-    id: "expand-full_react_svg__Combined-Shape"
-  })))));
-};
-
-SvgExpandFull.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M14.902 13.93l.086.074 4.62 4.62v-2.967a.696.696 0 011.386-.095l.006.095v4.647a.696.696 0 01-.601.69l-.095.006h-4.647a.696.696 0 01-.095-1.386l.095-.006h2.967l-4.62-4.62a.696.696 0 01.898-1.058zm-4.906.074c.245.244.27.626.074.898l-.074.086-4.62 4.62h2.967a.696.696 0 01.095 1.386L8.343 21H3.696a.696.696 0 01-.69-.601L3 20.304v-4.647a.696.696 0 011.386-.095l.006.095v2.967l4.62-4.62a.696.696 0 01.984 0zM8.448 3a.71.71 0 01.096 1.413l-.096.006H5.422l4.57 4.57a.71.71 0 01-.915 1.078l-.088-.075-4.57-4.57v3.026a.71.71 0 01-1.413.097L3 8.449v-4.74a.71.71 0 01.613-.703L3.71 3h4.738zM20.29 3a.71.71 0 01.71.71v4.738a.71.71 0 11-1.42 0V5.423l-4.569 4.57a.708.708 0 01-1.003 0 .71.71 0 010-1.004l4.57-4.57h-3.026a.71.71 0 110-1.419z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
 SvgExpandFull.displayName = 'SvgExpandFull';
 
 var ExpandFullIcon = function ExpandFullIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgExpandFull, _extends({}, props, {
-    css: getIconStyles$1(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgExpandFull, _objectSpread$d(_objectSpread$d({}, props), {}, {
+        className: createClass(getIconStyles$a(props, theme))
+      }));
+    }
+  });
 };
 
-ExpandFullIcon.propTypes = {};
 ExpandFullIcon.displayName = 'ExpandFullIcon';
+var ExpandFullIcon$1 = ExpandFullIcon;
 
-function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$c(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$3(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$2 = {
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$c(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$c(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$9 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$2 = function getSizeDimensions(size) {
+var getSizeDimensions$9 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1075,43 +1230,72 @@ var getSizeDimensions$2 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$2[size], "px"),
-        height: "".concat(iconSizes$2[size], "px")
+        width: "".concat(iconSizes$9[size], "px"),
+        height: "".concat(iconSizes$9[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$2.big, "px"),
-        height: "".concat(iconSizes$2.big, "px")
+        width: "".concat(iconSizes$9.big, "px"),
+        height: "".concat(iconSizes$9.big, "px")
       };
   }
 };
 
-var getSizeStyle$2 = function getSizeStyle(size) {
+var getSizeStyle$9 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$2(size);
+  var dimensions = getSizeDimensions$9(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$2 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$2 = function getColor(color, theme) {
+var getColor$9 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$c(_objectSpread$c({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
 
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$2(color))];
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1120,53 +1304,52 @@ var getColor$2 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$2 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$2(props.color, theme), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$9 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$9(props.color, theme), ";}&,image{", getSizeStyle$9(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgItalic = function SvgItalic(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$c(_objectSpread$c({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "italic_react_svg__Component-/-icon-/-24px-/-Richtext-/-Italic-",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "italic_react_svg__Component-/-icon-/-16px-/-Richtext-/-Italic-",
-    fill: "#1A1A1A"
-  }, react.jsx("path", {
-    id: "italic_react_svg__I",
-    d: "M9 20.99L12.827 3h2.067l-3.827 17.99z"
-  }))));
-};
-
-SvgItalic.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M9 20.99L12.827 3h2.067l-3.827 17.99z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
 SvgItalic.displayName = 'SvgItalic';
 
 var ItalicIcon = function ItalicIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgItalic, _extends({}, props, {
-    css: getIconStyles$2(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgItalic, _objectSpread$c(_objectSpread$c({}, props), {}, {
+        className: createClass(getIconStyles$9(props, theme))
+      }));
+    }
+  });
 };
 
-ItalicIcon.propTypes = {};
 ItalicIcon.displayName = 'ItalicIcon';
+var ItalicIcon$1 = ItalicIcon;
 
-function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$b(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$4(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$4(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$3 = {
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$b(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$b(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$8 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$3 = function getSizeDimensions(size) {
+var getSizeDimensions$8 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1178,43 +1361,72 @@ var getSizeDimensions$3 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$3[size], "px"),
-        height: "".concat(iconSizes$3[size], "px")
+        width: "".concat(iconSizes$8[size], "px"),
+        height: "".concat(iconSizes$8[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$3.big, "px"),
-        height: "".concat(iconSizes$3.big, "px")
+        width: "".concat(iconSizes$8.big, "px"),
+        height: "".concat(iconSizes$8.big, "px")
       };
   }
 };
 
-var getSizeStyle$3 = function getSizeStyle(size) {
+var getSizeStyle$8 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$3(size);
+  var dimensions = getSizeDimensions$8(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$3 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$3 = function getColor(color, theme) {
+var getColor$8 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$b(_objectSpread$b({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
 
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$3(color))];
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1223,62 +1435,58 @@ var getColor$3 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$3 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$3(props.color, theme), ";}&,image{", getSizeStyle$3(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$8 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$8(props.color, theme), ";}&,image{", getSizeStyle$8(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgMoreStyles = function SvgMoreStyles(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsxs("svg", _objectSpread$b(_objectSpread$b({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), react.jsx("defs", null, react.jsx("path", {
-    d: "M9.261 8.057a8.97 8.97 0 013.548.738l-.605 1.384c-1.128-.465-2.15-.697-3.066-.697-.806 0-1.415.126-1.825.38-.41.252-.615.6-.615 1.045 0 .301.077.557.23.77.155.211.402.413.744.604.342.192.998.469 1.969.83.355.13.68.26.974.39L13.5 13.5v1.25h-1.007c.368.462.552 1.023.552 1.684 0 1.046-.39 1.853-1.169 2.42-.78.567-1.873.851-3.281.851-1.49 0-2.652-.236-3.486-.707v-1.58c.54.274 1.119.49 1.738.646a7.258 7.258 0 001.789.236c.889 0 1.572-.142 2.05-.425.48-.284.719-.716.719-1.297 0-.438-.19-.812-.57-1.123-.255-.21-.673-.444-1.255-.704L4.5 14.75V13.5h2.164a4.444 4.444 0 01-.279-.168c-.44-.29-.769-.62-.984-.99-.215-.368-.323-.81-.323-1.322 0-.916.372-1.639 1.118-2.169.745-.53 1.767-.794 3.065-.794zm11.27 2.443c.127 0 .237.05.33.148.092.099.139.215.139.35a.492.492 0 01-.078.273l-.061.078-3.281 3.489a.438.438 0 01-.587.064l-.073-.064-3.28-3.49a.494.494 0 01-.14-.35c0-.135.046-.251.14-.35a.448.448 0 01.237-.139l.092-.009h6.562zm-7.076-7.094l.795 1.303.802-1.303h1.267l-1.333 2.003L16.381 7.5h-1.27l-.861-1.403-.864 1.403h-1.267l1.388-2.091-1.319-2.003h1.267z",
-    id: "more-styles_react_svg__path-1"
-  })), react.jsx("g", {
-    id: "more-styles_react_svg__Component-/-icon-/-24px-/-Richtext-/-more-styles",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "more-styles_react_svg__Component-/-icon-/-16px-/-Richtext-/-Strike-trough"
-  }, react.jsx("mask", {
-    id: "more-styles_react_svg__mask-2",
-    fill: "#fff"
-  }, react.jsx("use", {
-    xlinkHref: "#more-styles_react_svg__path-1"
-  })), react.jsx("use", {
-    id: "more-styles_react_svg__Combined-Shape",
-    fill: "#1A1A1A",
-    xlinkHref: "#more-styles_react_svg__path-1"
-  }))));
-};
-
-SvgMoreStyles.propTypes = {};
+  }, props), {}, {
+    children: [jsxRuntime.jsx("defs", {
+      children: jsxRuntime.jsx("path", {
+        d: "M9.261 8.057a8.97 8.97 0 013.548.738l-.605 1.384c-1.128-.465-2.15-.697-3.066-.697-.806 0-1.415.126-1.825.38-.41.252-.615.6-.615 1.045 0 .301.077.557.23.77.155.211.402.413.744.604.342.192.998.469 1.969.83.355.13.68.26.974.39L13.5 13.5v1.25h-1.007c.368.462.552 1.023.552 1.684 0 1.046-.39 1.853-1.169 2.42-.78.567-1.873.851-3.281.851-1.49 0-2.652-.236-3.486-.707v-1.58c.54.274 1.119.49 1.738.646a7.258 7.258 0 001.789.236c.889 0 1.572-.142 2.05-.425.48-.284.719-.716.719-1.297 0-.438-.19-.812-.57-1.123-.255-.21-.673-.444-1.255-.704L4.5 14.75V13.5h2.164a4.444 4.444 0 01-.279-.168c-.44-.29-.769-.62-.984-.99-.215-.368-.323-.81-.323-1.322 0-.916.372-1.639 1.118-2.169.745-.53 1.767-.794 3.065-.794zm11.27 2.443c.127 0 .237.05.33.148.092.099.139.215.139.35a.492.492 0 01-.078.273l-.061.078-3.281 3.489a.438.438 0 01-.587.064l-.073-.064-3.28-3.49a.494.494 0 01-.14-.35c0-.135.046-.251.14-.35a.448.448 0 01.237-.139l.092-.009h6.562zm-7.076-7.094l.795 1.303.802-1.303h1.267l-1.333 2.003L16.381 7.5h-1.27l-.861-1.403-.864 1.403h-1.267l1.388-2.091-1.319-2.003h1.267z",
+        id: "more-styles_react_svg__a"
+      })
+    }), jsxRuntime.jsx("use", {
+      fill: "#1A1A1A",
+      xlinkHref: "#more-styles_react_svg__a",
+      fillRule: "evenodd"
+    })]
+  }));
+};
+
 SvgMoreStyles.displayName = 'SvgMoreStyles';
 
 var MoreStylesIcon = function MoreStylesIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgMoreStyles, _extends({}, props, {
-    css: getIconStyles$3(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgMoreStyles, _objectSpread$b(_objectSpread$b({}, props), {}, {
+        className: createClass(getIconStyles$8(props, theme))
+      }));
+    }
+  });
 };
 
-MoreStylesIcon.propTypes = {};
 MoreStylesIcon.displayName = 'MoreStylesIcon';
+var MoreStylesIcon$1 = MoreStylesIcon;
 
-function ownKeys$5(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$a(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$5(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$5(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$4 = {
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$a(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$a(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$7 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$4 = function getSizeDimensions(size) {
+var getSizeDimensions$7 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1290,98 +1498,126 @@ var getSizeDimensions$4 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$4[size], "px"),
-        height: "".concat(iconSizes$4[size], "px")
+        width: "".concat(iconSizes$7[size], "px"),
+        height: "".concat(iconSizes$7[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$4.big, "px"),
-        height: "".concat(iconSizes$4.big, "px")
+        width: "".concat(iconSizes$7.big, "px"),
+        height: "".concat(iconSizes$7.big, "px")
       };
   }
 };
 
-var getSizeStyle$4 = function getSizeStyle(size) {
+var getSizeStyle$7 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$4(size);
+  var dimensions = getSizeDimensions$7(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$4 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$4 = function getColor(color, theme) {
+var getColor$7 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$5(_objectSpread$5({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$a(_objectSpread$a({}, designSystem.customProperties), theme);
 
+  var iconColor;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$4(color))];
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
 
-  if (!iconColor) {
-    return 'inherit';
-  }
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
 
-  return iconColor;
-};
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
 
-var getIconStyles$4 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$4(props.color, theme), ";}&,image{", getSizeStyle$4(props.size), ";}flex-shrink:0;" + ("" ));
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
+
+  if (!iconColor) {
+    return 'inherit';
+  }
+
+  return iconColor;
+};
+
+var getIconStyles$7 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$7(props.color, theme), ";}&,image{", getSizeStyle$7(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgOrderedList = function SvgOrderedList(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$a(_objectSpread$a({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "ordered-list_react_svg__Component-/-icon-/-24px-/-Richtext-/-Number-list",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "ordered-list_react_svg__Component-/-icon-/-16px-/-Richtext-/-Number-list",
-    fill: "#1A1A1A"
-  }, react.jsx("path", {
-    d: "M4.42 16c.449 0 .803.102 1.063.306.26.204.39.488.39.852 0 .304-.082.562-.247.775a1.25 1.25 0 01-.69.439v.02c.35.049.614.168.794.358.18.19.27.445.27.766 0 .468-.151.833-.454 1.093-.302.26-.734.391-1.295.391-.47 0-.887-.088-1.251-.263v-.875c.168.096.353.173.554.233.202.06.402.09.6.09.302 0 .525-.058.67-.173.143-.115.216-.3.216-.556 0-.228-.083-.39-.25-.485-.165-.096-.43-.143-.794-.143h-.329v-.789h.335c.336 0 .581-.05.737-.148.155-.098.232-.268.232-.507 0-.368-.205-.552-.616-.552-.143 0-.287.026-.435.08a2.04 2.04 0 00-.49.276l-.424-.709C3.4 16.159 3.873 16 4.42 16zm16.33 1.962a.39.39 0 01.176.037.145.145 0 01.066.055l.008.033v.75c0 .033-.025.063-.074.088a.35.35 0 01-.111.032l-.065.005h-10.5a.389.389 0 01-.176-.037.144.144 0 01-.066-.056L10 18.837v-.75c0-.034.025-.064.074-.088a.352.352 0 01.111-.033l.065-.004h10.5zM4.526 9c.267 0 .503.056.708.169.205.112.363.27.477.472a1.4 1.4 0 01.17.694c0 .227-.035.44-.105.639-.069.199-.176.403-.321.612-.146.209-.401.507-.768.893l-.55.597v.047H6V14H3.012v-.725l1.073-1.25c.318-.376.525-.636.623-.781.097-.145.167-.28.21-.403.043-.124.064-.252.064-.384 0-.198-.047-.346-.141-.442a.506.506 0 00-.379-.145.972.972 0 00-.482.131 2.493 2.493 0 00-.489.375L3 9.705c.21-.207.385-.353.523-.439.139-.085.29-.15.454-.197.163-.046.347-.069.55-.069zm16.224 2.5a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.352.352 0 01-.111.033l-.065.004h-10.5a.39.39 0 01-.176-.037.145.145 0 01-.066-.056L10 12.375v-.75c0-.034.025-.063.074-.088a.35.35 0 01.111-.033l.065-.004h10.5zM5 3v4h-.852V4.685l.008-.38.014-.416a4.47 4.47 0 01-.296.277l-.463.369L3 4.026 4.3 3H5zm15.75 2.038a.39.39 0 01.176.038.145.145 0 01.066.055l.008.032v.75c0 .034-.025.064-.074.088a.35.35 0 01-.111.033l-.065.004h-10.5a.388.388 0 01-.176-.037.145.145 0 01-.066-.055L10 5.913v-.75c0-.033.025-.063.074-.087a.35.35 0 01.111-.033l.065-.005h10.5z",
-    id: "ordered-list_react_svg__Combined-Shape"
-  }))));
-};
-
-SvgOrderedList.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M4.42 16c.449 0 .803.102 1.063.306.26.204.39.488.39.852 0 .304-.082.562-.247.775a1.25 1.25 0 01-.69.439v.02c.35.049.614.168.794.358.18.19.27.445.27.766 0 .468-.151.833-.454 1.093-.302.26-.734.391-1.295.391-.47 0-.887-.088-1.251-.263v-.875c.168.096.353.173.554.233.202.06.402.09.6.09.302 0 .525-.058.67-.173.143-.115.216-.3.216-.556 0-.228-.083-.39-.25-.485-.165-.096-.43-.143-.794-.143h-.329v-.789h.335c.336 0 .581-.05.737-.148.155-.098.232-.268.232-.507 0-.368-.205-.552-.616-.552-.143 0-.287.026-.435.08a2.04 2.04 0 00-.49.276l-.424-.709C3.4 16.159 3.873 16 4.42 16zm16.33 1.962a.39.39 0 01.176.037.145.145 0 01.066.055l.008.033v.75c0 .033-.025.063-.074.088a.35.35 0 01-.111.032l-.065.005h-10.5a.389.389 0 01-.176-.037.144.144 0 01-.066-.056L10 18.837v-.75c0-.034.025-.064.074-.088a.352.352 0 01.111-.033l.065-.004h10.5zM4.526 9c.267 0 .503.056.708.169.205.112.363.27.477.472a1.4 1.4 0 01.17.694c0 .227-.035.44-.105.639-.069.199-.176.403-.321.612-.146.209-.401.507-.768.893l-.55.597v.047H6V14H3.012v-.725l1.073-1.25c.318-.376.525-.636.623-.781.097-.145.167-.28.21-.403.043-.124.064-.252.064-.384 0-.198-.047-.346-.141-.442a.506.506 0 00-.379-.145.972.972 0 00-.482.131 2.493 2.493 0 00-.489.375L3 9.705c.21-.207.385-.353.523-.439.139-.085.29-.15.454-.197.163-.046.347-.069.55-.069zm16.224 2.5a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.352.352 0 01-.111.033l-.065.004h-10.5a.39.39 0 01-.176-.037.145.145 0 01-.066-.056L10 12.375v-.75c0-.034.025-.063.074-.088a.35.35 0 01.111-.033l.065-.004h10.5zM5 3v4h-.852V4.685l.008-.38.014-.416a4.47 4.47 0 01-.296.277l-.463.369L3 4.026 4.3 3H5zm15.75 2.038a.39.39 0 01.176.038.145.145 0 01.066.055l.008.032v.75c0 .034-.025.064-.074.088a.35.35 0 01-.111.033l-.065.004h-10.5a.388.388 0 01-.176-.037.145.145 0 01-.066-.055L10 5.913v-.75c0-.033.025-.063.074-.087a.35.35 0 01.111-.033l.065-.005h10.5z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
 SvgOrderedList.displayName = 'SvgOrderedList';
 
 var OrderedListIcon = function OrderedListIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgOrderedList, _extends({}, props, {
-    css: getIconStyles$4(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgOrderedList, _objectSpread$a(_objectSpread$a({}, props), {}, {
+        className: createClass(getIconStyles$7(props, theme))
+      }));
+    }
+  });
 };
 
-OrderedListIcon.propTypes = {};
 OrderedListIcon.displayName = 'OrderedListIcon';
+var OrderedListIcon$1 = OrderedListIcon;
 
-function ownKeys$6(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$9(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$6(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$6(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$5 = {
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$9(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$6 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$5 = function getSizeDimensions(size) {
+var getSizeDimensions$6 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1393,43 +1629,72 @@ var getSizeDimensions$5 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$5[size], "px"),
-        height: "".concat(iconSizes$5[size], "px")
+        width: "".concat(iconSizes$6[size], "px"),
+        height: "".concat(iconSizes$6[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$5.big, "px"),
-        height: "".concat(iconSizes$5.big, "px")
+        width: "".concat(iconSizes$6.big, "px"),
+        height: "".concat(iconSizes$6.big, "px")
       };
   }
 };
 
-var getSizeStyle$5 = function getSizeStyle(size) {
+var getSizeStyle$6 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$5(size);
+  var dimensions = getSizeDimensions$6(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$5 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$5 = function getColor(color, theme) {
+var getColor$6 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$6(_objectSpread$6({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$9(_objectSpread$9({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
 
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$5(color))];
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1438,63 +1703,59 @@ var getColor$5 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$5 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$5(props.color, theme), ";}&,image{", getSizeStyle$5(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$6 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$6(props.color, theme), ";}&,image{", getSizeStyle$6(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgRedo = function SvgRedo(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsxs("svg", _objectSpread$9(_objectSpread$9({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), react.jsx("defs", null, react.jsx("path", {
-    d: "M12.458 7.41a8.524 8.524 0 00-6.7 3.246L3.796 8.693c-.437-.438-.795-.29-.795.33v7.335c0 .618.024.593.643.593h7.286c.619 0 .767-.358.33-.795l-2.243-2.243a6.283 6.283 0 015.697-3.64 6.283 6.283 0 016.277 6.085 8.542 8.542 0 00-8.531-8.948z",
-    id: "redo_react_svg__path-1"
-  })), react.jsx("g", {
-    id: "redo_react_svg__Component-/-icon-/-24px-/-Richtext-/-Redo",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "redo_react_svg__Component-/-icon-/-12px-/-redo--",
-    transform: "matrix(-1 0 0 1 24 0)"
-  }, react.jsx("mask", {
-    id: "redo_react_svg__mask-2",
-    fill: "#fff"
-  }, react.jsx("use", {
-    xlinkHref: "#redo_react_svg__path-1"
-  })), react.jsx("use", {
-    id: "redo_react_svg__Shape",
-    fill: "#1A1A1A",
-    xlinkHref: "#redo_react_svg__path-1"
-  }))));
-};
-
-SvgRedo.propTypes = {};
+  }, props), {}, {
+    children: [jsxRuntime.jsx("defs", {
+      children: jsxRuntime.jsx("path", {
+        d: "M12.458 7.41a8.524 8.524 0 00-6.7 3.246L3.796 8.693c-.437-.438-.795-.29-.795.33v7.335c0 .618.024.593.643.593h7.286c.619 0 .767-.358.33-.795l-2.243-2.243a6.283 6.283 0 015.697-3.64 6.283 6.283 0 016.277 6.085 8.542 8.542 0 00-8.531-8.948z",
+        id: "redo_react_svg__a"
+      })
+    }), jsxRuntime.jsx("use", {
+      fill: "#1A1A1A",
+      xlinkHref: "#redo_react_svg__a",
+      transform: "matrix(-1 0 0 1 24 0)",
+      fillRule: "evenodd"
+    })]
+  }));
+};
+
 SvgRedo.displayName = 'SvgRedo';
 
 var RedoIcon = function RedoIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgRedo, _extends({}, props, {
-    css: getIconStyles$5(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgRedo, _objectSpread$9(_objectSpread$9({}, props), {}, {
+        className: createClass(getIconStyles$6(props, theme))
+      }));
+    }
+  });
 };
 
-RedoIcon.propTypes = {};
 RedoIcon.displayName = 'RedoIcon';
+var RedoIcon$1 = RedoIcon;
 
-function ownKeys$7(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$8(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$7(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$7(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$6 = {
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$8(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$8(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$5 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$6 = function getSizeDimensions(size) {
+var getSizeDimensions$5 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1506,43 +1767,72 @@ var getSizeDimensions$6 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$6[size], "px"),
-        height: "".concat(iconSizes$6[size], "px")
+        width: "".concat(iconSizes$5[size], "px"),
+        height: "".concat(iconSizes$5[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$6.big, "px"),
-        height: "".concat(iconSizes$6.big, "px")
+        width: "".concat(iconSizes$5.big, "px"),
+        height: "".concat(iconSizes$5.big, "px")
       };
   }
 };
 
-var getSizeStyle$6 = function getSizeStyle(size) {
+var getSizeStyle$5 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$6(size);
+  var dimensions = getSizeDimensions$5(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$6 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$6 = function getColor(color, theme) {
+var getColor$5 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$7(_objectSpread$7({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$8(_objectSpread$8({}, designSystem.customProperties), theme);
+
+  var iconColor;
+
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
 
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$6(color))];
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1551,53 +1841,52 @@ var getColor$6 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$6 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$6(props.color, theme), ";}&,image{", getSizeStyle$6(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$5 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$5(props.color, theme), ";}&,image{", getSizeStyle$5(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgStrikethrough = function SvgStrikethrough(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$8(_objectSpread$8({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "strikethrough_react_svg__Component-/-icon-/-24px-/-Richtext-/-Strike-trough",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "strikethrough_react_svg__Component-/-icon-/-16px-/-Richtext-/-Strike-trough",
-    fill: "#1A1A1A"
-  }, react.jsx("path", {
-    d: "M11.648 3c1.704 0 3.27.312 4.7.938l-.621 1.734c-1.415-.594-2.79-.89-4.125-.89-1.055 0-1.88.226-2.473.679-.594.453-.89 1.082-.89 1.887 0 .593.109 1.08.327 1.459.22.379.588.726 1.108 1.043.52.316 1.314.666 2.385 1.048.99.353 1.81.72 2.459 1.102H19.5v1.25l-3.493-.002c.516.69.774 1.548.774 2.572 0 1.508-.547 2.684-1.64 3.528-1.094.843-2.578 1.265-4.454 1.265-2.03 0-3.593-.261-4.687-.785v-1.922c.703.297 1.469.531 2.297.703.828.172 1.648.258 2.46.258 1.329 0 2.329-.252 3-.756.673-.504 1.009-1.205 1.009-2.103 0-.594-.12-1.08-.358-1.46-.238-.378-.637-.728-1.195-1.048-.14-.08-.3-.164-.478-.25H4.5V12h5.137c-1.066-.476-1.863-1.016-2.389-1.617-.684-.781-1.025-1.801-1.025-3.059 0-1.32.496-2.37 1.488-3.152C8.703 3.39 10.016 3 11.648 3z",
-    id: "strikethrough_react_svg__Combined-Shape"
-  }))));
-};
-
-SvgStrikethrough.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M11.648 3c1.704 0 3.27.312 4.7.938l-.621 1.734c-1.415-.594-2.79-.89-4.125-.89-1.055 0-1.88.226-2.473.679-.594.453-.89 1.082-.89 1.887 0 .593.109 1.08.327 1.459.22.379.588.726 1.108 1.043.52.316 1.314.666 2.385 1.048.99.353 1.81.72 2.459 1.102H19.5v1.25l-3.493-.002c.516.69.774 1.548.774 2.572 0 1.508-.547 2.684-1.64 3.528-1.094.843-2.578 1.265-4.454 1.265-2.03 0-3.593-.261-4.687-.785v-1.922c.703.297 1.469.531 2.297.703.828.172 1.648.258 2.46.258 1.329 0 2.329-.252 3-.756.673-.504 1.009-1.205 1.009-2.103 0-.594-.12-1.08-.358-1.46-.238-.378-.637-.728-1.195-1.048-.14-.08-.3-.164-.478-.25H4.5V12h5.137c-1.066-.476-1.863-1.016-2.389-1.617-.684-.781-1.025-1.801-1.025-3.059 0-1.32.496-2.37 1.488-3.152C8.703 3.39 10.016 3 11.648 3z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
 SvgStrikethrough.displayName = 'SvgStrikethrough';
 
 var StrikethroughIcon = function StrikethroughIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgStrikethrough, _extends({}, props, {
-    css: getIconStyles$6(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgStrikethrough, _objectSpread$8(_objectSpread$8({}, props), {}, {
+        className: createClass(getIconStyles$5(props, theme))
+      }));
+    }
+  });
 };
 
-StrikethroughIcon.propTypes = {};
 StrikethroughIcon.displayName = 'StrikethroughIcon';
+var StrikethroughIcon$1 = StrikethroughIcon;
 
-function ownKeys$8(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$7(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$8(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$8(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$7 = {
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$7(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$7(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$4 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$7 = function getSizeDimensions(size) {
+var getSizeDimensions$4 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1609,43 +1898,72 @@ var getSizeDimensions$7 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$7[size], "px"),
-        height: "".concat(iconSizes$7[size], "px")
+        width: "".concat(iconSizes$4[size], "px"),
+        height: "".concat(iconSizes$4[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$7.big, "px"),
-        height: "".concat(iconSizes$7.big, "px")
+        width: "".concat(iconSizes$4.big, "px"),
+        height: "".concat(iconSizes$4.big, "px")
       };
   }
 };
 
-var getSizeStyle$7 = function getSizeStyle(size) {
+var getSizeStyle$4 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$7(size);
+  var dimensions = getSizeDimensions$4(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$7 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$7 = function getColor(color, theme) {
+var getColor$4 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$8(_objectSpread$8({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$7(_objectSpread$7({}, designSystem.customProperties), theme);
+
+  var iconColor;
 
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$7(color))];
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1654,55 +1972,54 @@ var getColor$7 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$7 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$7(props.color, theme), ";}&,image{", getSizeStyle$7(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$4 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$4(props.color, theme), ";}&,image{", getSizeStyle$4(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgSubscript = function SvgSubscript(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$7(_objectSpread$7({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "subscript_react_svg__Component-/-icon-/-24px-/-Richtext-/-Sub-script",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "nonzero",
-    fill: "#333"
-  }, react.jsx("path", {
-    id: "subscript_react_svg__x",
-    transform: "matrix(1 0 0 -1 0 19.645)",
-    d: "M6.609 9.708L3.18 4.5h3.294l2.067 3.39 2.085-3.39h3.294l-3.466 5.208 3.628 5.437h-3.304l-2.237-3.647-2.248 3.647H3z"
-  }), react.jsx("path", {
-    d: "M21.044 19.5h-5.988v-1.26l2.15-2.174c.637-.652 1.053-1.104 1.248-1.356.195-.252.336-.485.422-.7.086-.215.129-.438.129-.668 0-.344-.095-.6-.284-.768-.19-.168-.443-.252-.76-.252-.331 0-.653.076-.966.229a4.99 4.99 0 00-.978.65l-.985-1.166c.422-.36.772-.613 1.05-.762a3.85 3.85 0 01.907-.342c.328-.08.696-.12 1.102-.12.535 0 1.008.097 1.418.293.41.195.728.468.955.82.226.351.34.754.34 1.207 0 .394-.07.765-.208 1.11-.139.346-.354.7-.645 1.064-.29.363-.804.88-1.538 1.552l-1.101 1.038v.082h3.732V19.5z",
-    id: "subscript_react_svg__2"
-  })));
-};
-
-SvgSubscript.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("g", {
+      fillRule: "nonzero",
+      fill: "#333",
+      children: jsxRuntime.jsx("path", {
+        d: "M6.609 9.937L3.18 15.145h3.294l2.067-3.39 2.085 3.39h3.294l-3.466-5.208L14.083 4.5h-3.304L8.542 8.147 6.294 4.5H3zM21.044 19.5h-5.988v-1.26l2.15-2.174c.637-.652 1.053-1.104 1.248-1.356.195-.252.336-.485.422-.7.086-.215.129-.438.129-.668 0-.344-.095-.6-.284-.768-.19-.168-.443-.252-.76-.252-.331 0-.653.076-.966.229a4.99 4.99 0 00-.978.65l-.985-1.166c.422-.36.772-.613 1.05-.762a3.85 3.85 0 01.907-.342c.328-.08.696-.12 1.102-.12.535 0 1.008.097 1.418.293.41.195.728.468.955.82.226.351.34.754.34 1.207 0 .394-.07.765-.208 1.11-.139.346-.354.7-.645 1.064-.29.363-.804.88-1.538 1.552l-1.101 1.038v.082h3.732V19.5z"
+      })
+    })
+  }));
+};
+
 SvgSubscript.displayName = 'SvgSubscript';
 
 var SubscriptIcon = function SubscriptIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgSubscript, _extends({}, props, {
-    css: getIconStyles$7(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgSubscript, _objectSpread$7(_objectSpread$7({}, props), {}, {
+        className: createClass(getIconStyles$4(props, theme))
+      }));
+    }
+  });
 };
 
-SubscriptIcon.propTypes = {};
 SubscriptIcon.displayName = 'SubscriptIcon';
+var SubscriptIcon$1 = SubscriptIcon;
 
-function ownKeys$9(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$6(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$9(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$9(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$8 = {
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$6(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$6(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$3 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$8 = function getSizeDimensions(size) {
+var getSizeDimensions$3 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1714,43 +2031,72 @@ var getSizeDimensions$8 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$8[size], "px"),
-        height: "".concat(iconSizes$8[size], "px")
+        width: "".concat(iconSizes$3[size], "px"),
+        height: "".concat(iconSizes$3[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$8.big, "px"),
-        height: "".concat(iconSizes$8.big, "px")
+        width: "".concat(iconSizes$3.big, "px"),
+        height: "".concat(iconSizes$3.big, "px")
       };
   }
 };
 
-var getSizeStyle$8 = function getSizeStyle(size) {
+var getSizeStyle$3 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$8(size);
+  var dimensions = getSizeDimensions$3(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$8 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$8 = function getColor(color, theme) {
+var getColor$3 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$9(_objectSpread$9({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$6(_objectSpread$6({}, designSystem.customProperties), theme);
 
+  var iconColor;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$8(color))];
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1759,57 +2105,55 @@ var getColor$8 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$8 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$8(props.color, theme), ";}&,image{", getSizeStyle$8(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$3 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$3(props.color, theme), ";}&,image{", getSizeStyle$3(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgSuperscript = function SvgSuperscript(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$6(_objectSpread$6({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "superscript_react_svg__Component-/-icon-/-24px-/-Richtext-/-Super-script",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("path", {
-    id: "superscript_react_svg__x",
-    fill: "#333",
-    fillRule: "nonzero",
-    d: "M7.067 14.063L3.64 8.855h3.295L9 12.245l2.085-3.39h3.295l-3.466 5.208 3.628 5.437h-3.304L9 15.853 6.753 19.5H3.458z"
-  }), react.jsx("path", {
-    d: "M21.044 13.5h-5.988v-1.26l2.15-2.174c.637-.652 1.053-1.104 1.248-1.356.195-.252.336-.485.422-.7.086-.215.129-.438.129-.668 0-.344-.095-.6-.284-.768-.19-.168-.443-.252-.76-.252-.331 0-.653.076-.966.229a4.99 4.99 0 00-.978.65l-.985-1.166c.422-.36.772-.613 1.05-.762a3.85 3.85 0 01.907-.342c.328-.08.696-.12 1.102-.12.535 0 1.008.097 1.418.293.41.195.728.468.955.82.226.351.34.754.34 1.207 0 .394-.07.765-.208 1.11-.139.346-.354.7-.645 1.064-.29.363-.804.88-1.538 1.552l-1.101 1.038v.082h3.732V13.5z",
-    id: "superscript_react_svg__2",
-    fill: "#333",
-    fillRule: "nonzero"
-  })));
-};
-
-SvgSuperscript.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("g", {
+      fillRule: "evenodd",
+      children: jsxRuntime.jsx("path", {
+        fill: "#333",
+        fillRule: "nonzero",
+        d: "M7.067 14.063L3.64 8.855h3.295L9 12.245l2.085-3.39h3.295l-3.466 5.208 3.628 5.437h-3.304L9 15.853 6.753 19.5H3.458zM21.044 13.5h-5.988v-1.26l2.15-2.174c.637-.652 1.053-1.104 1.248-1.356.195-.252.336-.485.422-.7.086-.215.129-.438.129-.668 0-.344-.095-.6-.284-.768-.19-.168-.443-.252-.76-.252-.331 0-.653.076-.966.229a4.99 4.99 0 00-.978.65l-.985-1.166c.422-.36.772-.613 1.05-.762a3.85 3.85 0 01.907-.342c.328-.08.696-.12 1.102-.12.535 0 1.008.097 1.418.293.41.195.728.468.955.82.226.351.34.754.34 1.207 0 .394-.07.765-.208 1.11-.139.346-.354.7-.645 1.064-.29.363-.804.88-1.538 1.552l-1.101 1.038v.082h3.732V13.5z"
+      })
+    })
+  }));
+};
+
 SvgSuperscript.displayName = 'SvgSuperscript';
 
 var SuperscriptIcon = function SuperscriptIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgSuperscript, _extends({}, props, {
-    css: getIconStyles$8(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgSuperscript, _objectSpread$6(_objectSpread$6({}, props), {}, {
+        className: createClass(getIconStyles$3(props, theme))
+      }));
+    }
+  });
 };
 
-SuperscriptIcon.propTypes = {};
 SuperscriptIcon.displayName = 'SuperscriptIcon';
+var SuperscriptIcon$1 = SuperscriptIcon;
 
-function ownKeys$a(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$5(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$a(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$a(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$9 = {
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$5(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$5(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$2 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$9 = function getSizeDimensions(size) {
+var getSizeDimensions$2 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1821,43 +2165,72 @@ var getSizeDimensions$9 = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$9[size], "px"),
-        height: "".concat(iconSizes$9[size], "px")
+        width: "".concat(iconSizes$2[size], "px"),
+        height: "".concat(iconSizes$2[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$9.big, "px"),
-        height: "".concat(iconSizes$9.big, "px")
+        width: "".concat(iconSizes$2.big, "px"),
+        height: "".concat(iconSizes$2.big, "px")
       };
   }
 };
 
-var getSizeStyle$9 = function getSizeStyle(size) {
+var getSizeStyle$2 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$9(size);
+  var dimensions = getSizeDimensions$2(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$9 = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$9 = function getColor(color, theme) {
+var getColor$2 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$a(_objectSpread$a({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$5(_objectSpread$5({}, designSystem.customProperties), theme);
 
+  var iconColor;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$9(color))];
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1866,56 +2239,52 @@ var getColor$9 = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$9 = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$9(props.color, theme), ";}&,image{", getSizeStyle$9(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$2 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$2(props.color, theme), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUnderline = function SvgUnderline(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsx("svg", _objectSpread$5(_objectSpread$5({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), react.jsx("g", {
-    id: "underline_react_svg__Component-/-icon-/-24px-/-Richtext-/-Underline",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "underline_react_svg__Component-/-icon-/-16px-/-Richtext-/-Underline",
-    fill: "#1A1A1A"
-  }, react.jsx("g", {
-    id: "underline_react_svg__U",
-    transform: "translate(4.5 3)"
-  }, react.jsx("path", {
-    d: "M15 16.625v1.25H0v-1.25h15zM4.19.223v9.642c0 1.234.313 2.18.938 2.84.626.661 1.546.991 2.76.991 1.156 0 2.048-.332 2.673-.995.626-.664.939-1.616.939-2.856V.223h1.595v9.562c0 1.684-.472 3.008-1.417 3.972-.945.963-2.243 1.445-3.894 1.445-1.652 0-2.93-.485-3.833-1.455-.904-.97-1.356-2.305-1.356-4.003V.223H4.19z",
-    id: "underline_react_svg__Combined-Shape"
-  })))));
-};
-
-SvgUnderline.propTypes = {};
+  }, props), {}, {
+    children: jsxRuntime.jsx("path", {
+      d: "M19.5 19.625v1.25h-15v-1.25h15zM8.69 3.223v9.642c0 1.234.313 2.18.938 2.84.626.661 1.546.991 2.76.991 1.156 0 2.048-.332 2.673-.995.626-.664.939-1.616.939-2.856V3.223h1.595v9.562c0 1.684-.472 3.008-1.417 3.972-.945.963-2.243 1.445-3.894 1.445-1.652 0-2.93-.485-3.833-1.455-.904-.97-1.356-2.305-1.356-4.003V3.223H8.69z",
+      fill: "#1A1A1A",
+      fillRule: "evenodd"
+    })
+  }));
+};
+
 SvgUnderline.displayName = 'SvgUnderline';
 
 var UnderlineIcon = function UnderlineIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgUnderline, _extends({}, props, {
-    css: getIconStyles$9(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgUnderline, _objectSpread$5(_objectSpread$5({}, props), {}, {
+        className: createClass(getIconStyles$2(props, theme))
+      }));
+    }
+  });
 };
 
-UnderlineIcon.propTypes = {};
 UnderlineIcon.displayName = 'UnderlineIcon';
+var UnderlineIcon$1 = UnderlineIcon;
 
-function ownKeys$b(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$b(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$b(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$a = {
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$4(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes$1 = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$a = function getSizeDimensions(size) {
+var getSizeDimensions$1 = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -1927,43 +2296,72 @@ var getSizeDimensions$a = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$a[size], "px"),
-        height: "".concat(iconSizes$a[size], "px")
+        width: "".concat(iconSizes$1[size], "px"),
+        height: "".concat(iconSizes$1[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$a.big, "px"),
-        height: "".concat(iconSizes$a.big, "px")
+        width: "".concat(iconSizes$1.big, "px"),
+        height: "".concat(iconSizes$1.big, "px")
       };
   }
 };
 
-var getSizeStyle$a = function getSizeStyle(size) {
+var getSizeStyle$1 = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$a(size);
+  var dimensions = getSizeDimensions$1(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$a = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$a = function getColor(color, theme) {
+var getColor$1 = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$b(_objectSpread$b({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme);
 
+  var iconColor;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$a(color))];
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -1972,64 +2370,58 @@ var getColor$a = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$a = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$a(props.color, theme), ";}&,image{", getSizeStyle$a(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles$1 = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$1(props.color, theme), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUndo = function SvgUndo(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsxs("svg", _objectSpread$4(_objectSpread$4({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), react.jsx("defs", null, react.jsx("path", {
-    d: "M12.458 7.41a8.524 8.524 0 00-6.7 3.246L3.796 8.693c-.437-.438-.795-.29-.795.33v7.335c0 .618.024.593.643.593h7.286c.619 0 .767-.358.33-.795l-2.243-2.243a6.283 6.283 0 015.697-3.64 6.283 6.283 0 016.277 6.085 8.542 8.542 0 00-8.531-8.948z",
-    id: "undo_react_svg__path-1"
-  })), react.jsx("g", {
-    id: "undo_react_svg__Component-/-icon-/-24px-/-Richtext-/-Undo",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "undo_react_svg__Component-/-icon-/-12px-/-undo--",
-    transform: "matrix(-1 0 0 1 24 0)"
-  }, react.jsx("mask", {
-    id: "undo_react_svg__mask-2",
-    fill: "#fff"
-  }, react.jsx("use", {
-    xlinkHref: "#undo_react_svg__path-1"
-  })), react.jsx("use", {
-    id: "undo_react_svg__Shape",
-    fill: "#1A1A1A",
-    transform: "matrix(-1 0 0 1 24 0)",
-    xlinkHref: "#undo_react_svg__path-1"
-  }))));
-};
-
-SvgUndo.propTypes = {};
+  }, props), {}, {
+    children: [jsxRuntime.jsx("defs", {
+      children: jsxRuntime.jsx("path", {
+        d: "M12.458 7.41a8.524 8.524 0 00-6.7 3.246L3.796 8.693c-.437-.438-.795-.29-.795.33v7.335c0 .618.024.593.643.593h7.286c.619 0 .767-.358.33-.795l-2.243-2.243a6.283 6.283 0 015.697-3.64 6.283 6.283 0 016.277 6.085 8.542 8.542 0 00-8.531-8.948z",
+        id: "undo_react_svg__a"
+      })
+    }), jsxRuntime.jsx("use", {
+      fill: "#1A1A1A",
+      xlinkHref: "#undo_react_svg__a",
+      fillRule: "evenodd"
+    })]
+  }));
+};
+
 SvgUndo.displayName = 'SvgUndo';
 
 var UndoIcon = function UndoIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgUndo, _extends({}, props, {
-    css: getIconStyles$a(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgUndo, _objectSpread$4(_objectSpread$4({}, props), {}, {
+        className: createClass(getIconStyles$1(props, theme))
+      }));
+    }
+  });
 };
 
-UndoIcon.propTypes = {};
 UndoIcon.displayName = 'UndoIcon';
+var UndoIcon$1 = UndoIcon;
 
-function ownKeys$c(object, enumerableOnly) { var keys = _Object$keys__default['default'](object); if (_Object$getOwnPropertySymbols__default['default']) { var symbols = _Object$getOwnPropertySymbols__default['default'](object); if (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$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default['default'](_context3 = ownKeys$c(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default['default']) { _Object$defineProperties__default['default'](target, _Object$getOwnPropertyDescriptors__default['default'](source)); } else { var _context4; _forEachInstanceProperty__default['default'](_context4 = ownKeys$c(Object(source))).call(_context4, function (key) { _Object$defineProperty__default['default'](target, key, _Object$getOwnPropertyDescriptor__default['default'](source, key)); }); } } return target; }
-var iconSizes$b = {
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+var iconSizes = {
   small: 12,
   medium: 16,
   big: 24
 };
 
-var getSizeDimensions$b = function getSizeDimensions(size) {
+var getSizeDimensions = function getSizeDimensions(size) {
   switch (size) {
     case 'scale':
       return {
@@ -2041,43 +2433,72 @@ var getSizeDimensions$b = function getSizeDimensions(size) {
     case 'medium':
     case 'big':
       return {
-        width: "".concat(iconSizes$b[size], "px"),
-        height: "".concat(iconSizes$b[size], "px")
+        width: "".concat(iconSizes[size], "px"),
+        height: "".concat(iconSizes[size], "px")
       };
 
     default:
       return {
-        width: "".concat(iconSizes$b.big, "px"),
-        height: "".concat(iconSizes$b.big, "px")
+        width: "".concat(iconSizes.big, "px"),
+        height: "".concat(iconSizes.big, "px")
       };
   }
 };
 
-var getSizeStyle$b = function getSizeStyle(size) {
+var getSizeStyle = function getSizeStyle(size) {
   var _context, _context2;
 
-  var dimensions = getSizeDimensions$b(size);
+  var dimensions = getSizeDimensions(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      ");
+      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      ");
+      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
   }
 };
 
-var capitalize$b = function capitalize(value) {
-  return value[0].toUpperCase() + _sliceInstanceProperty__default['default'](value).call(value, 1);
-};
-
-var getColor$b = function getColor(color, theme) {
+var getColor = function getColor(color, theme) {
   if (!color) return 'inherit';
 
-  var overwrittenVars = _objectSpread$c(_objectSpread$c({}, designSystem.customProperties), theme); // @ts-expect-error
+  var overwrittenVars = _objectSpread$3(_objectSpread$3({}, designSystem.customProperties), theme);
 
+  var iconColor;
 
-  var iconColor = overwrittenVars["color".concat(capitalize$b(color))];
+  switch (color) {
+    case 'solid':
+      iconColor = overwrittenVars.colorSolid;
+      break;
+
+    case 'neutral60':
+      iconColor = overwrittenVars.colorNeutral60;
+      break;
+
+    case 'surface':
+      iconColor = overwrittenVars.colorSurface;
+      break;
+
+    case 'info':
+      iconColor = overwrittenVars.colorInfo;
+      break;
+
+    case 'primary':
+      iconColor = overwrittenVars.colorPrimary;
+      break;
+
+    case 'primary40':
+      iconColor = overwrittenVars.colorPrimary40;
+      break;
+
+    case 'warning':
+      iconColor = overwrittenVars.colorWarning;
+      break;
+
+    case 'error':
+      iconColor = overwrittenVars.colorError;
+      break;
+  }
 
   if (!iconColor) {
     return 'inherit';
@@ -2086,115 +2507,114 @@ var getColor$b = function getColor(color, theme) {
   return iconColor;
 };
 
-var getIconStyles$b = function getIconStyles(props, theme) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$b(props.color, theme), ";}&,image{", getSizeStyle$b(props.size), ";}flex-shrink:0;" + ("" ));
+var getIconStyles = function getIconStyles(props, theme) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor(props.color, theme), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUnorderedList = function SvgUnorderedList(props) {
-  return react.jsx("svg", _extends({
+  return jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink"
-  }, props), react.jsx("defs", null, react.jsx("path", {
-    d: "M5.625 17a.36.36 0 01.264.111c.055.056.09.12.104.19l.007.074v2.25a.36.36 0 01-.111.264.363.363 0 01-.19.104L5.625 20h-2.25a.36.36 0 01-.264-.111.364.364 0 01-.104-.19L3 19.625v-2.25a.36.36 0 01.111-.264.366.366 0 01.19-.104L3.375 17h2.25zm15.125 1a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.35.35 0 01-.111.033L20.75 19h-10.5a.389.389 0 01-.176-.037.144.144 0 01-.066-.056L10 18.875v-.75c0-.034.025-.063.074-.088a.352.352 0 01.111-.033L10.25 18h10.5zM5.625 10a.36.36 0 01.264.111c.055.056.09.12.104.19l.007.074v2.25a.36.36 0 01-.111.264.365.365 0 01-.19.104L5.625 13h-2.25a.361.361 0 01-.264-.111.364.364 0 01-.104-.19L3 12.625v-2.25a.36.36 0 01.111-.264.364.364 0 01.19-.104L3.375 10h2.25zm15.125 1a.39.39 0 01.176.037c.05.025.074.054.074.088v.75c0 .034-.025.063-.074.088a.39.39 0 01-.176.037h-10.5a.39.39 0 01-.176-.037c-.05-.025-.074-.054-.074-.088v-.75c0-.034.025-.063.074-.088A.389.389 0 0110.25 11zM5.625 4c.102 0 .19.037.264.111.055.056.09.12.104.19L6 4.375v2.25a.36.36 0 01-.111.264.363.363 0 01-.19.104L5.625 7h-2.25a.36.36 0 01-.264-.111.364.364 0 01-.104-.19L3 6.625v-2.25a.36.36 0 01.111-.264.364.364 0 01.19-.104L3.375 4h2.25zm4.625 1h10.5a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.35.35 0 01-.111.033L20.75 6h-10.5a.388.388 0 01-.176-.037.145.145 0 01-.066-.056L10 5.875v-.75c0-.034.025-.063.074-.088a.35.35 0 01.111-.033L10.25 5h10.5z",
-    id: "unordered-list_react_svg__path-1"
-  })), react.jsx("g", {
-    id: "unordered-list_react_svg__Component-/-icon-/-24px-/-Richtext-/-Bullet-list",
-    stroke: "none",
-    strokeWidth: 1,
-    fillRule: "evenodd"
-  }, react.jsx("g", {
-    id: "unordered-list_react_svg__Component-/-icon-/-16px-/-Richtext-/-Bullet-list"
-  }, react.jsx("mask", {
-    id: "unordered-list_react_svg__mask-2",
-    fill: "#fff"
-  }, react.jsx("use", {
-    xlinkHref: "#unordered-list_react_svg__path-1"
-  })), react.jsx("use", {
-    id: "unordered-list_react_svg__shape",
-    fill: "#1A1A1A",
-    xlinkHref: "#unordered-list_react_svg__path-1"
-  }))));
-};
-
-SvgUnorderedList.propTypes = {};
+  }, props), {}, {
+    children: [jsxRuntime.jsx("defs", {
+      children: jsxRuntime.jsx("path", {
+        d: "M5.625 17a.36.36 0 01.264.111c.055.056.09.12.104.19l.007.074v2.25a.36.36 0 01-.111.264.363.363 0 01-.19.104L5.625 20h-2.25a.36.36 0 01-.264-.111.364.364 0 01-.104-.19L3 19.625v-2.25a.36.36 0 01.111-.264.366.366 0 01.19-.104L3.375 17h2.25zm15.125 1a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.35.35 0 01-.111.033L20.75 19h-10.5a.389.389 0 01-.176-.037.144.144 0 01-.066-.056L10 18.875v-.75c0-.034.025-.063.074-.088a.352.352 0 01.111-.033L10.25 18h10.5zM5.625 10a.36.36 0 01.264.111c.055.056.09.12.104.19l.007.074v2.25a.36.36 0 01-.111.264.365.365 0 01-.19.104L5.625 13h-2.25a.361.361 0 01-.264-.111.364.364 0 01-.104-.19L3 12.625v-2.25a.36.36 0 01.111-.264.364.364 0 01.19-.104L3.375 10h2.25zm15.125 1a.39.39 0 01.176.037c.05.025.074.054.074.088v.75c0 .034-.025.063-.074.088a.39.39 0 01-.176.037h-10.5a.39.39 0 01-.176-.037c-.05-.025-.074-.054-.074-.088v-.75c0-.034.025-.063.074-.088A.389.389 0 0110.25 11zM5.625 4c.102 0 .19.037.264.111.055.056.09.12.104.19L6 4.375v2.25a.36.36 0 01-.111.264.363.363 0 01-.19.104L5.625 7h-2.25a.36.36 0 01-.264-.111.364.364 0 01-.104-.19L3 6.625v-2.25a.36.36 0 01.111-.264.364.364 0 01.19-.104L3.375 4h2.25zm4.625 1h10.5a.39.39 0 01.176.037.145.145 0 01.066.056l.008.032v.75c0 .034-.025.063-.074.088a.35.35 0 01-.111.033L20.75 6h-10.5a.388.388 0 01-.176-.037.145.145 0 01-.066-.056L10 5.875v-.75c0-.034.025-.063.074-.088a.35.35 0 01.111-.033L10.25 5h10.5z",
+        id: "unordered-list_react_svg__a"
+      })
+    }), jsxRuntime.jsx("use", {
+      fill: "#1A1A1A",
+      xlinkHref: "#unordered-list_react_svg__a",
+      fillRule: "evenodd"
+    })]
+  }));
+};
+
 SvgUnorderedList.displayName = 'SvgUnorderedList';
 
 var UnorderedListIcon = function UnorderedListIcon(props) {
-  var theme = react.useTheme();
-  return react.jsx(SvgUnorderedList, _extends({}, props, {
-    css: getIconStyles$b(props, theme)
-  }));
+  var theme = react$1.useTheme();
+  return jsxRuntime.jsx(react$1.ClassNames, {
+    children: function children(_ref) {
+      var createClass = _ref.css;
+      return jsxRuntime.jsx(SvgUnorderedList, _objectSpread$3(_objectSpread$3({}, props), {}, {
+        className: createClass(getIconStyles(props, theme))
+      }));
+    }
+  });
 };
 
-UnorderedListIcon.propTypes = {};
 UnorderedListIcon.displayName = 'UnorderedListIcon';
+var UnorderedListIcon$1 = UnorderedListIcon;
 
 var getBorderColor = function getBorderColor(props) {
   if (props.isDisabled) {
-    return /*#__PURE__*/react.css("border-color:", designSystem.customProperties.borderColorForInputWhenDisabled, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenDisabled, ";" + ("" ), "" );
   }
 
   if (props.hasError) {
-    return /*#__PURE__*/react.css("border-color:", designSystem.customProperties.borderColorForInputWhenError, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenError, ";" + ("" ), "" );
   }
 
   if (props.hasWarning) {
-    return /*#__PURE__*/react.css("border-color:", designSystem.customProperties.borderColorForInputWhenWarning, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenWarning, ";" + ("" ), "" );
   }
 
   if (props.isReadOnly) {
-    return /*#__PURE__*/react.css("border-color:", designSystem.customProperties.borderColorForInputWhenReadonly, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenReadonly, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react.css("border-color:", designSystem.customProperties.borderColorForInput, ";" + ("" ));
+  return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInput, ";" + ("" ), "" );
 };
 
 var getBackgroundColor = function getBackgroundColor(props) {
   if (props.isDisabled) {
-    return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenDisabled, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenDisabled, ";" + ("" ), "" );
   }
 
   if (props.isReadOnly) {
-    return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenReadonly, ";" + ("" ));
+    return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenReadonly, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react.css("background-color:", designSystem.customProperties.backgroundColorForInput, ";" + ("" ));
+  return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInput, ";" + ("" ), "" );
 };
 
-var ToolbarMainControls = _styled__default['default']("div", {
+var ToolbarMainControls = _styled__default["default"]("div", {
   target: "e10epvnp4"
 } )({
   name: "tg5p88",
   styles: "display:flex;flex-wrap:wrap;flex:1;align-items:flex-start;>*{margin-left:1px;}"
 } );
-var ToolbarRightControls = _styled__default['default']("div", {
+var ToolbarRightControls = _styled__default["default"]("div", {
   target: "e10epvnp3"
-} )();
-var Toolbar = _styled__default['default']("div", {
+} )("" );
+var Toolbar = _styled__default["default"]("div", {
   target: "e10epvnp2"
-} )("display:flex;flex-wrap:wrap;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.customProperties.spacingXs, " calc(", designSystem.customProperties.spacingS, " - 1px);padding-left:calc(", designSystem.customProperties.spacingXs, " - 1px);align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.customProperties.spacingS, ");height:1px;background:", designSystem.customProperties.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}");
+} )("display:flex;flex-wrap:wrap;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.customProperties.spacingXs, " calc(", designSystem.customProperties.spacingS, " - 1px);padding-left:calc(", designSystem.customProperties.spacingXs, " - 1px);align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.customProperties.spacingS, ");height:1px;background:", designSystem.customProperties.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
 
-var _ref = {
+var _ref$2 = {
   name: "7g2mws",
   styles: "h1,h2,h3,h4,h5,h6{margin:0;}p{margin:0;line-height:22px;}"
 } ;
 
 var reset = function reset(props) {
-  return [_ref, props.isReadOnly && /*#__PURE__*/react.css("color:", designSystem.customProperties.fontColorForInputWhenReadonly, ";" + ("" )), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.customProperties.fontColorForInputWhenDisabled, ";" + ("" ))];
+  return [_ref$2, props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.fontColorForInputWhenReadonly, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.fontColorForInputWhenDisabled, ";" + ("" ), "" )];
 };
 
-var EditorContainer = _styled__default['default']("div", {
+var EditorContainer = _styled__default["default"]("div", {
   target: "e10epvnp1"
-} )("padding:4px ", designSystem.customProperties.spacingS, ";padding-top:6px;border-radius:", designSystem.customProperties.borderRadiusForInput, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";");
-var Container = _styled__default['default']("div", {
+} )("padding:4px ", designSystem.customProperties.spacingS, ";padding-top:6px;border-radius:", designSystem.customProperties.borderRadiusForInput, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";" + ("" ));
+var Container = _styled__default["default"]("div", {
   target: "e10epvnp0"
 } )("border-radius:", designSystem.customProperties.borderRadiusForInput, ";border:1px solid ", designSystem.customProperties.borderColorForInput, ";transition:", designSystem.customProperties.transitionStandard, ";", getBorderColor, " ", getBackgroundColor, " pointer-events:", function (props) {
   return props.isDisabled || props.isReadOnly ? 'none' : 'inherit';
-}, ";position:relative;&:hover{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.customProperties.borderColorForInput, ";}&:focus-within{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}}");
+}, ";position:relative;&:hover{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.customProperties.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.customProperties.borderColorForInput, ";}&:focus-within{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", designSystem.customProperties.borderColorForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.customProperties.borderColorForInputWhenFocused, ";}}" + ("" ));
+
+function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty__default["default"](_context = ownKeys$2(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context2; _forEachInstanceProperty__default["default"](_context2 = ownKeys$2(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 var propsToOmit = ['isActive', 'label', 'isDisabled', 'isReadOnly'];
 
 function getFillColor(props) {
@@ -2203,29 +2623,33 @@ function getFillColor(props) {
 }
 
 var RichTextBodyButton = function RichTextBodyButton(props) {
-  var restOfProps = omit__default['default'](props, propsToOmit);
-  return react.jsx("button", _extends({}, restOfProps, {
+  var restOfProps = omit__default["default"](props, propsToOmit);
+  return jsxRuntime.jsx("button", _objectSpread$2(_objectSpread$2({}, restOfProps), {}, {
     type: "button",
     tabIndex: -1,
     "aria-disabled": props.isDisabled,
     disabled: props.isDisabled,
     "aria-label": props.label,
-    css: [/*#__PURE__*/react.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.customProperties.colorAccent30 : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.customProperties.spacingXs, ";padding:", designSystem.customProperties.spacingXs, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.customProperties.colorAccent30 : designSystem.customProperties.colorNeutral90, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.customProperties.colorNeutral60, ";}}" + ("" )), props.isReadOnly && /*#__PURE__*/react.css("svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" )), "" ]
-  }), props.children);
+    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.customProperties.colorAccent30 : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.customProperties.spacingXs, ";padding:", designSystem.customProperties.spacingXs, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.customProperties.colorAccent30 : designSystem.customProperties.colorNeutral90, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.customProperties.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
+    children: props.children
+  }));
 };
 
 RichTextBodyButton.propTypes = {};
 RichTextBodyButton.displayName = 'RichTextInputButton';
+var Button = RichTextBodyButton;
 
-var Divider = _styled__default['default']("span", {
+var Divider = _styled__default["default"]("span", {
   target: "ek11h3e0"
-} )("width:1px;height:", designSystem.customProperties.spacingL, ";background:", designSystem.customProperties.colorNeutral, ";margin:0 ", designSystem.customProperties.spacingXs, ";");
+} )("width:1px;height:", designSystem.customProperties.spacingL, ";background:", designSystem.customProperties.colorNeutral, ";margin:0 ", designSystem.customProperties.spacingXs, ";" + ("" ));
 
-var DropdownItem = _styled__default['default']("button", {
+var Divider$1 = Divider;
+
+var DropdownItem = _styled__default["default"]("button", {
   target: "e10zulpn1"
 } )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.customProperties.spacingXs, " ", designSystem.customProperties.spacingS, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";display:block;background-color:", function (props) {
   return props.isSelected ? designSystem.customProperties.colorAccent95 : designSystem.customProperties.colorSurface;
-}, ";&:focus,&:hover{outline:none;background-color:", designSystem.customProperties.colorNeutral90, ";}");
+}, ";&:focus,&:hover{outline:none;background-color:", designSystem.customProperties.colorNeutral90, ";}" + ("" ));
 
 var getButtonStyles = function getButtonStyles() {
   var _context;
@@ -2233,22 +2657,26 @@ var getButtonStyles = function getButtonStyles() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     isStyleButton: true
   };
-  return [/*#__PURE__*/react.css("border:0;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadius4, ";cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";color:", designSystem.customProperties.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? _concatInstanceProperty__default['default'](_context = "calc(".concat(designSystem.customProperties.spacingXs, " - 1px) ")).call(_context, designSystem.customProperties.spacingS) : designSystem.customProperties.spacingXs, ";&:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}" + ("" )), props.isIndeterminate && /*#__PURE__*/react.css("background-color:", designSystem.customProperties.colorAccent95, ";" + ("" )), props.isOpen && /*#__PURE__*/react.css("&:not(:hover){background-color:", designSystem.customProperties.colorAccent30, ";color:", designSystem.customProperties.colorSurface, ";svg{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" )), props.isReadOnly && /*#__PURE__*/react.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" )), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ))];
+  return [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.customProperties.fontFamilyDefault, ";border-radius:", designSystem.customProperties.borderRadius4, ";cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";color:", designSystem.customProperties.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? _concatInstanceProperty__default["default"](_context = "calc(".concat(designSystem.customProperties.spacingXs, " - 1px) ")).call(_context, designSystem.customProperties.spacingS) : designSystem.customProperties.spacingXs, ";&:hover{background-color:", designSystem.customProperties.colorNeutral90, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.customProperties.colorAccent30, ";color:", designSystem.customProperties.colorSurface, ";svg{fill:", designSystem.customProperties.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.colorNeutral60, ";svg{fill:", designSystem.customProperties.colorNeutral60, ";}" + ("" ), "" )];
 };
 
-var DropdownContainer = _styled__default['default']("div", {
+var DropdownContainer = _styled__default["default"]("div", {
   target: "e10zulpn0"
-} )("position:absolute;cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";top:", designSystem.customProperties.spacingXs, ";margin-top:", designSystem.customProperties.spacingXs, ";left:0;white-space:nowrap;background:", designSystem.customProperties.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.customProperties.colorPrimary, ";border-radius:", designSystem.customProperties.borderRadius6, ";");
+} )("position:absolute;cursor:pointer;font-size:", designSystem.customProperties.fontSizeForInput, ";top:", designSystem.customProperties.spacingXs, ";margin-top:", designSystem.customProperties.spacingXs, ";left:0;white-space:nowrap;background:", designSystem.customProperties.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.customProperties.colorPrimary, ";border-radius:", designSystem.customProperties.borderRadius6, ";" + ("" ));
+
+function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (enumerableOnly) { symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys$1(Object(source), true)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context6; _forEachInstanceProperty__default["default"](_context6 = ownKeys$1(Object(source))).call(_context6, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
 
 var getIsSelected = function getIsSelected(props, item) {
   var _context;
 
-  return !props.isMulti ? item.value === props.value : _findInstanceProperty__default['default'](_context = props.value).call(_context, function (selectedItem) {
+  return !props.isMulti ? item.value === props.value : _findInstanceProperty__default["default"](_context = props.value).call(_context, function (selectedItem) {
     return selectedItem === item.value;
   });
 };
 
-var Label = _styled__default['default']("div", {
+var Label = _styled__default["default"]("div", {
   target: "eow992s0"
 } );
 
@@ -2261,52 +2689,62 @@ var Dropdown = function Dropdown(props) {
   var DropdownItem = props.components.Item;
   var DropdownLabel = props.components.Label;
   var isIndeterminate = props.isMulti && props.value && props.value.length > 0;
-  return react.jsx(Downshift__default['default'], {
+  return jsxRuntime.jsx(Downshift__default["default"], {
     onChange: props.onChange,
     selectedItem: props.value,
     itemToString: function itemToString(headings) {
       return headings ? headings.label : '';
-    }
-  }, function (_ref2) {
-    var _context2;
-
-    var isOpen = _ref2.isOpen,
-        getToggleButtonProps = _ref2.getToggleButtonProps,
-        getItemProps = _ref2.getItemProps;
-    var toggleButtonProps = getToggleButtonProps();
-    return react.jsx("div", null, react.jsx(Tooltip__default['default'], {
-      title: props.label,
-      placement: "bottom",
-      off: isOpen,
-      style: {
-        body: {
-          zIndex: 9999
-        }
-      }
-    }, react.jsx(RichTextBodyButton, _extends({}, toggleButtonProps, {
-      label: props.label,
-      css: getButtonStyles({
-        isOpen: isOpen,
-        isIndeterminate: isIndeterminate,
-        isStyleButton: !props.isMulti,
-        isDisabled: props.isDisabled,
-        isReadOnly: props.isReadOnly
-      })
-    }), react.jsx(DropdownLabel, null, props.label))), isOpen ? react.jsx("div", {
-      css: _ref$1
-    }, react.jsx(DropdownContainer, null, _mapInstanceProperty__default['default'](_context2 = props.options).call(_context2, function (item, index) {
-      var itemProps = getItemProps({
-        index: index,
-        item: item
+    },
+    children: function children(_ref2) {
+      var _context2;
+
+      var isOpen = _ref2.isOpen,
+          getToggleButtonProps = _ref2.getToggleButtonProps,
+          getItemProps = _ref2.getItemProps;
+      var toggleButtonProps = getToggleButtonProps();
+      return jsxRuntime.jsxs("div", {
+        children: [jsxRuntime.jsx(Tooltip__default["default"], {
+          title: props.label,
+          placement: "bottom",
+          off: isOpen,
+          style: {
+            body: {
+              zIndex: 9999
+            }
+          },
+          children: jsxRuntime.jsx(Button, _objectSpread$1(_objectSpread$1({}, toggleButtonProps), {}, {
+            label: props.label,
+            css: getButtonStyles({
+              isOpen: isOpen,
+              isIndeterminate: isIndeterminate,
+              isStyleButton: !props.isMulti,
+              isDisabled: props.isDisabled,
+              isReadOnly: props.isReadOnly
+            }),
+            children: jsxRuntime.jsx(DropdownLabel, {
+              children: props.label
+            })
+          }))
+        }), isOpen ? jsxRuntime.jsx("div", {
+          css: _ref$1,
+          children: jsxRuntime.jsx(DropdownContainer, {
+            children: _mapInstanceProperty__default["default"](_context2 = props.options).call(_context2, function (item, index) {
+              var itemProps = getItemProps({
+                index: index,
+                item: item
+              });
+              var dropdownItemProps = itemProps;
+              var isSelected = getIsSelected(props, item);
+              return react$1.createElement(DropdownItem, _objectSpread$1(_objectSpread$1({}, dropdownItemProps), {}, {
+                key: index,
+                value: item.value,
+                isSelected: isSelected
+              }), item.label);
+            })
+          })
+        }) : null]
       });
-      var dropdownItemProps = itemProps;
-      var isSelected = getIsSelected(props, item);
-      return react.jsx(DropdownItem, _extends({}, dropdownItemProps, {
-        key: index,
-        value: item.value,
-        isSelected: isSelected
-      }), item.label);
-    }))) : null);
+    }
   });
 };
 
@@ -2319,15 +2757,18 @@ Dropdown.defaultProps = {
   isMulti: false
 };
 Dropdown.propTypes = {};
+var Dropdown$1 = Dropdown;
 
-var hasBlock$1 = function hasBlock(type, editor) {
+var hasBlock = function hasBlock(type, editor) {
   var _context;
 
-  return _someInstanceProperty__default['default'](_context = editor.value.blocks).call(_context, function (node) {
+  return _someInstanceProperty__default["default"](_context = editor.value.blocks).call(_context, function (node) {
     return node.type === type;
   });
 };
 
+var hasBlock$1 = hasBlock;
+
 var messages = reactIntl.defineMessages({
   boldButtonLabel: {
     id: 'UIKit.RichTextBody.boldButtonLabel',
@@ -2436,8 +2877,12 @@ var messages = reactIntl.defineMessages({
   }
 });
 
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); if (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(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context4; _forEachInstanceProperty__default["default"](_context4 = ownKeys(Object(source), true)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors__default["default"]) { _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)); } else { var _context5; _forEachInstanceProperty__default["default"](_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } } return target; }
+
 var MoreStylesDropdownLabel = function MoreStylesDropdownLabel() {
-  return react.jsx(MoreStylesIcon, {
+  return jsxRuntime.jsx(MoreStylesIcon$1, {
     size: "medium"
   });
 };
@@ -2449,43 +2894,51 @@ var MoreStylesDropdownItem = function MoreStylesDropdownItem(props) {
 
   switch (props.value) {
     case 'subscript':
-      Icon = SubscriptIcon;
+      Icon = SubscriptIcon$1;
       break;
 
     case 'strikethrough':
-      Icon = StrikethroughIcon;
+      Icon = StrikethroughIcon$1;
       break;
 
     default:
-      Icon = SuperscriptIcon;
+      Icon = SuperscriptIcon$1;
   }
 
-  return react.jsx(DropdownItem, props, react.jsx(Inline__default['default'], {
-    scale: "xs",
-    alignItems: "center",
-    justifyContent: "flex-start"
-  }, react.jsx(Icon, {
-    size: "medium"
-  }), react.jsx("div", null, props.children)));
+  return jsxRuntime.jsx(DropdownItem, _objectSpread(_objectSpread({}, props), {}, {
+    children: jsxRuntime.jsxs(Inline__default["default"], {
+      scale: "xs",
+      alignItems: "center",
+      justifyContent: "flex-start",
+      children: [jsxRuntime.jsx(Icon, {
+        size: "medium"
+      }), jsxRuntime.jsx("div", {
+        children: props.children
+      })]
+    })
+  }));
 };
 
 MoreStylesDropdownItem.displayName = 'MoreStylesDropdownItem';
 MoreStylesDropdownItem.propTypes = {};
 
 var DropdownLabel = function DropdownLabel(props) {
-  return react.jsx(Inline__default['default'], {
+  return jsxRuntime.jsxs(Inline__default["default"], {
     scale: "xs",
     alignItems: "center",
-    justifyContent: "center"
-  }, react.jsx("span", null, props.children), react.jsx(icons.CaretDownIcon, {
-    size: "small"
-  }));
+    justifyContent: "center",
+    children: [jsxRuntime.jsx("span", {
+      children: props.children
+    }), jsxRuntime.jsx(icons.CaretDownIcon, {
+      size: "small"
+    })]
+  });
 };
 
 DropdownLabel.displayName = 'DropdownLabel';
 DropdownLabel.propTypes = {};
 
-var Item = _styled__default['default']("div", {
+var Item = _styled__default["default"]("div", {
   target: "e1i52mlj0"
 } )({
   name: "1rmndyi",
@@ -2495,17 +2948,20 @@ var Item = _styled__default['default']("div", {
 var StylesDropdownItem = function StylesDropdownItem(props) {
   var _context;
 
-  var as = _findInstanceProperty__default['default'](_context = _Object$keys__default['default'](BLOCK_TAGS)).call(_context, function (key) {
+  var as = _findInstanceProperty__default["default"](_context = _Object$keys__default["default"](BLOCK_TAGS)).call(_context, function (key) {
     return BLOCK_TAGS[key] === props.value;
   }) || 'div';
-  return react.jsx(DropdownItem, props, react.jsx(Item, {
-    as: as
-  }, props.children));
+  return jsxRuntime.jsx(DropdownItem, _objectSpread(_objectSpread({}, props), {}, {
+    children: jsxRuntime.jsx(Item, {
+      as: as,
+      children: props.children
+    })
+  }));
 };
 
 StylesDropdownItem.propTypes = {};
 StylesDropdownItem.displayName = 'StylesDropdownItem';
-var DEFAULT_NODE$1 = BLOCK_TAGS.p;
+var DEFAULT_NODE = BLOCK_TAGS.p;
 var tooltipStyles = {
   body: {
     zIndex: 9999
@@ -2553,12 +3009,12 @@ var createMoreStylesDropdownOptions = function createMoreStylesDropdownOptions(i
   }];
 };
 
-var _ref$2 = {
+var _ref = {
   name: "1h10g35",
   styles: "display:flex;flex-wrap:wrap;>*{margin-left:1px;}"
 } ;
 
-var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(function (props, ref) {
+var RichTextEditorBody = /*#__PURE__*/react.forwardRef(function (props, ref) {
   var registerContentNode = ref.registerContentNode,
       containerRef = ref.containerRef;
   var intl = reactIntl.useIntl();
@@ -2566,7 +3022,7 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
   var styleDropdownOptions = createStyleDropdownOptions(intl);
   var hasUndos = props.editor.hasUndos();
   var hasRedos = props.editor.hasRedos();
-  var onClickBlock = React__default['default'].useCallback(function (_ref2) {
+  var onClickBlock = react.useCallback(function (_ref2) {
     var type = _ref2.value;
 
     // Handle everything but list buttons.
@@ -2575,9 +3031,9 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
       var isList = hasBlock$1(BLOCK_TAGS.li, props.editor);
 
       if (isList) {
-        props.editor.setBlocks(isActive ? DEFAULT_NODE$1 : type).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
+        props.editor.setBlocks(isActive ? DEFAULT_NODE : type).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
       } else {
-        props.editor.setBlocks(isActive ? DEFAULT_NODE$1 : type);
+        props.editor.setBlocks(isActive ? DEFAULT_NODE : type);
       }
     } else {
       var _context2;
@@ -2585,14 +3041,14 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
       // Handle the extra wrapping required for list buttons.
       var _isList = hasBlock$1(BLOCK_TAGS.li, props.editor);
 
-      var isType = _someInstanceProperty__default['default'](_context2 = props.editor.value.blocks).call(_context2, function (block) {
+      var isType = _someInstanceProperty__default["default"](_context2 = props.editor.value.blocks).call(_context2, function (block) {
         return !!props.editor.value.document.getClosest(block.key, function (parent) {
           return parent.type === type;
         });
       });
 
       if (_isList && isType) {
-        props.editor.setBlocks(DEFAULT_NODE$1).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
+        props.editor.setBlocks(DEFAULT_NODE).unwrapBlock(BLOCK_TAGS.ul).unwrapBlock(BLOCK_TAGS.ol);
       } else if (_isList) {
         props.editor.unwrapBlock(type === BLOCK_TAGS.ul ? BLOCK_TAGS.ol : BLOCK_TAGS.ul).wrapBlock(type);
       } else {
@@ -2600,7 +3056,7 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
       }
     }
   }, [props.editor]);
-  var onChangeMoreStyles = React__default['default'].useCallback(function (val) {
+  var onChangeMoreStyles = react.useCallback(function (val) {
     props.editor.toggleMark(val.value);
   }, [props.editor]);
   var activeBlock = props.editor.value.blocks.first() && props.editor.value.blocks.first().type || ''; // so that we don't show our multi dropdown in an `indeterminate`
@@ -2611,12 +3067,12 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
   if (props.editor.value.selection.isFocused) {
     var _context3;
 
-    var activeMarks = _mapInstanceProperty__default['default'](_context3 = _Array$from__default['default'](props.editor.value.activeMarks)).call(_context3, function (mark) {
+    var activeMarks = _mapInstanceProperty__default["default"](_context3 = _Array$from__default["default"](props.editor.value.activeMarks)).call(_context3, function (mark) {
       return mark.type;
     });
 
-    activeMoreStyleMarks = _filterInstanceProperty__default['default'](activeMarks).call(activeMarks, function (activeMark) {
-      return _someInstanceProperty__default['default'](dropdownOptions).call(dropdownOptions, function (dropdownOption) {
+    activeMoreStyleMarks = _filterInstanceProperty__default["default"](activeMarks).call(activeMarks, function (activeMark) {
+      return _someInstanceProperty__default["default"](dropdownOptions).call(dropdownOptions, function (dropdownOption) {
         return activeMark === dropdownOption.value;
       });
     });
@@ -2625,162 +3081,189 @@ var RichTextEditorBody = /*#__PURE__*/React__default['default'].forwardRef(funct
   // from blurring our input.
 
 
-  var onToolbarMouseDown = React__default['default'].useCallback(function (event) {
+  var onToolbarMouseDown = react.useCallback(function (event) {
     event.preventDefault();
   }, []);
-  return react.jsx(Container, {
+  return jsxRuntime.jsxs(Container, {
     css: props.styles.container,
     hasError: props.hasError,
     hasWarning: props.hasWarning,
     isReadOnly: props.isReadOnly,
-    isDisabled: props.isDisabled
-  }, react.jsx(Toolbar, {
-    onMouseDown: onToolbarMouseDown
-  }, react.jsx(ToolbarMainControls, null, react.jsx(Dropdown, {
-    label: intl.formatMessage(messages.styleDropdownLabel),
-    value: activeBlock,
-    onChange: onClickBlock,
-    options: styleDropdownOptions,
-    components: {
-      Item: StylesDropdownItem,
-      Label: DropdownLabel
-    },
     isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly
-  }), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.boldButtonLabel),
-    placement: "bottom",
-    styles: tooltipStyles
-  }, react.jsx(RichTextBodyButton, {
-    isActive: props.editor.value.selection.isFocused && props.editor.hasBoldMark(),
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.boldButtonLabel),
-    onClick: props.editor.toggleBoldMark
-  }, react.jsx(BoldIcon, {
-    size: "medium"
-  }))), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.italicButtonLabel),
-    placement: "bottom",
-    styles: tooltipStyles
-  }, react.jsx(RichTextBodyButton, {
-    isActive: props.editor.value.selection.isFocused && props.editor.hasItalicMark(),
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.italicButtonLabel),
-    onClick: props.editor.toggleItalicMark
-  }, react.jsx(ItalicIcon, {
-    size: "medium"
-  }))), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.underlinedButtonLabel),
-    placement: "bottom",
-    styles: tooltipStyles
-  }, react.jsx(RichTextBodyButton, {
-    isActive: props.editor.value.selection.isFocused && props.editor.hasUnderlinedMark(),
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.underlinedButtonLabel),
-    onClick: props.editor.toggleUnderlinedMark
-  }, react.jsx(UnderlineIcon, {
-    size: "medium"
-  }))), react.jsx(Dropdown, {
-    isMulti: true,
-    label: intl.formatMessage(messages.moreStylesDropdownLabel),
-    options: dropdownOptions,
-    value: activeMoreStyleMarks,
-    onChange: onChangeMoreStyles,
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    components: {
-      Item: MoreStylesDropdownItem,
-      Label: MoreStylesDropdownLabel
-    }
-  }), react.jsx(Divider, null), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.orderedListButtonLabel),
-    placement: "bottom",
-    styles: tooltipStyles
-  }, react.jsx(RichTextBodyButton, {
-    isActive: props.editor.value.selection.isFocused && props.editor.hasNumberedListBlock(),
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.orderedListButtonLabel),
-    onClick: props.editor.toggleNumberedListBlock
-  }, react.jsx(OrderedListIcon, {
-    size: "medium"
-  }))), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.unorderedListButtonLabel),
-    placement: "bottom",
-    styles: tooltipStyles
-  }, react.jsx(RichTextBodyButton, {
-    isActive: props.editor.value.selection.isFocused && props.editor.hasBulletedListBlock(),
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.unorderedListButtonLabel),
-    onClick: props.editor.toggleBulletedListBlock
-  }, react.jsx(UnorderedListIcon, {
-    size: "medium"
-  })))), react.jsx(ToolbarRightControls, {
-    css: _ref$2
-  }, react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.undoButtonLabel),
-    placement: "bottom",
-    off: !hasUndos
-  }, react.jsx(RichTextBodyButton, {
-    isActive: false,
-    label: intl.formatMessage(messages.undoButtonLabel),
-    isDisabled: !hasUndos || props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    onClick: props.editor.toggleUndo
-  }, react.jsx(UndoIcon, {
-    size: "medium"
-  }))), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.redoButtonLabel),
-    placement: "bottom",
-    off: !hasRedos
-  }, react.jsx(RichTextBodyButton, {
-    isActive: false,
-    label: intl.formatMessage(messages.redoButtonLabel),
-    isDisabled: !hasRedos || props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    onClick: props.editor.toggleRedo
-  }, react.jsx(RedoIcon, {
-    size: "medium"
-  }))), props.showExpandIcon && react.jsx(React__default['default'].Fragment, null, react.jsx(Divider, null), react.jsx(Tooltip__default['default'], {
-    title: intl.formatMessage(messages.expandButtonLabel),
-    placement: "bottom-end"
-  }, react.jsx(RichTextBodyButton, {
-    isActive: false,
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
-    label: intl.formatMessage(messages.expandButtonLabel),
-    onClick: props.onClickExpand
-  }, react.jsx(ExpandFullIcon, {
-    size: "medium"
-  })))))), react.jsx("div", {
-    style: props.containerStyles
-  }, react.jsx("div", {
-    ref: registerContentNode
-  }, react.jsx(EditorContainer, {
-    hasError: props.hasError,
-    hasWarning: props.hasWarning,
-    isReadOnly: props.isReadOnly,
-    isDisabled: props.isDisabled,
-    ref: containerRef
-  }, props.children))));
+    children: [jsxRuntime.jsxs(Toolbar, {
+      onMouseDown: onToolbarMouseDown,
+      children: [jsxRuntime.jsxs(ToolbarMainControls, {
+        children: [jsxRuntime.jsx(Dropdown$1, {
+          label: intl.formatMessage(messages.styleDropdownLabel),
+          value: activeBlock,
+          onChange: onClickBlock,
+          options: styleDropdownOptions,
+          components: {
+            Item: StylesDropdownItem,
+            Label: DropdownLabel
+          },
+          isDisabled: props.isDisabled,
+          isReadOnly: props.isReadOnly
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.boldButtonLabel),
+          placement: "bottom",
+          styles: tooltipStyles,
+          children: jsxRuntime.jsx(Button, {
+            isActive: props.editor.value.selection.isFocused && props.editor.hasBoldMark(),
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            label: intl.formatMessage(messages.boldButtonLabel),
+            onClick: props.editor.toggleBoldMark,
+            children: jsxRuntime.jsx(BoldIcon$1, {
+              size: "medium"
+            })
+          })
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.italicButtonLabel),
+          placement: "bottom",
+          styles: tooltipStyles,
+          children: jsxRuntime.jsx(Button, {
+            isActive: props.editor.value.selection.isFocused && props.editor.hasItalicMark(),
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            label: intl.formatMessage(messages.italicButtonLabel),
+            onClick: props.editor.toggleItalicMark,
+            children: jsxRuntime.jsx(ItalicIcon$1, {
+              size: "medium"
+            })
+          })
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.underlinedButtonLabel),
+          placement: "bottom",
+          styles: tooltipStyles,
+          children: jsxRuntime.jsx(Button, {
+            isActive: props.editor.value.selection.isFocused && props.editor.hasUnderlinedMark(),
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            label: intl.formatMessage(messages.underlinedButtonLabel),
+            onClick: props.editor.toggleUnderlinedMark,
+            children: jsxRuntime.jsx(UnderlineIcon$1, {
+              size: "medium"
+            })
+          })
+        }), jsxRuntime.jsx(Dropdown$1, {
+          isMulti: true,
+          label: intl.formatMessage(messages.moreStylesDropdownLabel),
+          options: dropdownOptions,
+          value: activeMoreStyleMarks,
+          onChange: onChangeMoreStyles,
+          isDisabled: props.isDisabled,
+          isReadOnly: props.isReadOnly,
+          components: {
+            Item: MoreStylesDropdownItem,
+            Label: MoreStylesDropdownLabel
+          }
+        }), jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.orderedListButtonLabel),
+          placement: "bottom",
+          styles: tooltipStyles,
+          children: jsxRuntime.jsx(Button, {
+            isActive: props.editor.value.selection.isFocused && props.editor.hasNumberedListBlock(),
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            label: intl.formatMessage(messages.orderedListButtonLabel),
+            onClick: props.editor.toggleNumberedListBlock,
+            children: jsxRuntime.jsx(OrderedListIcon$1, {
+              size: "medium"
+            })
+          })
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.unorderedListButtonLabel),
+          placement: "bottom",
+          styles: tooltipStyles,
+          children: jsxRuntime.jsx(Button, {
+            isActive: props.editor.value.selection.isFocused && props.editor.hasBulletedListBlock(),
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            label: intl.formatMessage(messages.unorderedListButtonLabel),
+            onClick: props.editor.toggleBulletedListBlock,
+            children: jsxRuntime.jsx(UnorderedListIcon$1, {
+              size: "medium"
+            })
+          })
+        })]
+      }), jsxRuntime.jsxs(ToolbarRightControls, {
+        css: _ref,
+        children: [jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.undoButtonLabel),
+          placement: "bottom",
+          off: !hasUndos,
+          children: jsxRuntime.jsx(Button, {
+            isActive: false,
+            label: intl.formatMessage(messages.undoButtonLabel),
+            isDisabled: !hasUndos || props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            onClick: props.editor.toggleUndo,
+            children: jsxRuntime.jsx(UndoIcon$1, {
+              size: "medium"
+            })
+          })
+        }), jsxRuntime.jsx(Tooltip__default["default"], {
+          title: intl.formatMessage(messages.redoButtonLabel),
+          placement: "bottom",
+          off: !hasRedos,
+          children: jsxRuntime.jsx(Button, {
+            isActive: false,
+            label: intl.formatMessage(messages.redoButtonLabel),
+            isDisabled: !hasRedos || props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            onClick: props.editor.toggleRedo,
+            children: jsxRuntime.jsx(RedoIcon$1, {
+              size: "medium"
+            })
+          })
+        }), props.showExpandIcon && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [jsxRuntime.jsx(Divider$1, {}), jsxRuntime.jsx(Tooltip__default["default"], {
+            title: intl.formatMessage(messages.expandButtonLabel),
+            placement: "bottom-end",
+            children: jsxRuntime.jsx(Button, {
+              isActive: false,
+              isDisabled: props.isDisabled,
+              isReadOnly: props.isReadOnly,
+              label: intl.formatMessage(messages.expandButtonLabel),
+              onClick: props.onClickExpand,
+              children: jsxRuntime.jsx(ExpandFullIcon$1, {
+                size: "medium"
+              })
+            })
+          })]
+        })]
+      })]
+    }), jsxRuntime.jsx("div", {
+      style: props.containerStyles,
+      children: jsxRuntime.jsx("div", {
+        ref: registerContentNode,
+        children: jsxRuntime.jsx(EditorContainer, {
+          hasError: props.hasError,
+          hasWarning: props.hasWarning,
+          isReadOnly: props.isReadOnly,
+          isDisabled: props.isDisabled,
+          ref: containerRef,
+          children: props.children
+        })
+      })
+    })]
+  });
 });
 RichTextEditorBody.displayName = 'RichTextEditorBody';
 RichTextEditorBody.propTypes = {};
 RichTextEditorBody.defaultProps = {
   styles: {}
 };
+var RichTextEditorBody$1 = RichTextEditorBody;
 
-// NOTE: This string will be replaced in the `prepare` script by the `scripts/version.js` file.
-var version = '12.2.1';
+// NOTE: This string will be replaced on build time with the package version.
+var version = "12.2.5";
 
-exports.HiddenInput = HiddenInput;
-exports.RichTextBody = RichTextEditorBody;
-exports.html = html;
-exports.isEmpty = isEmpty;
+exports.HiddenInput = HiddenInput$1;
+exports.RichTextBody = RichTextEditorBody$1;
+exports.html = html$1;
+exports.isEmpty = isRichTextEmpty;
 exports.localized = index;
-exports.richTextPlugins = plugins;
+exports.richTextPlugins = plugins$1;
 exports.version = version;