@commercetools-uikit/rich-text-utils 15.2.4 → 15.4.0

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

@@ -607,44 +607,41 @@ var getSizeStyle$b = function getSizeStyle(size) {
   }
 };
 
-var getColor$b = function getColor(color, theme) {
+var getColor$b = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$f(_objectSpread$f({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -655,8 +652,8 @@ var getColor$b = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$b = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$b(props.color), ";}&,image{", getSizeStyle$b(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgBold = function SvgBold(props) {
@@ -664,7 +661,8 @@ var SvgBold = function SvgBold(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("path", {
       d: "M6 3h5.599c2.55 0 4.403.363 5.555 1.089 1.153.726 1.729 1.88 1.729 3.464 0 1.074-.252 1.956-.757 2.645a3.023 3.023 0 0 1-2.012 1.243v.123c1.14.254 1.963.73 2.468 1.427.504.698.756 1.625.756 2.781 0 1.64-.592 2.92-1.778 3.84-1.185.918-2.795 1.377-4.83 1.377H6V3Zm3.814 7.124h2.215c1.034 0 1.782-.16 2.246-.48.463-.32.695-.848.695-1.587 0-.689-.252-1.183-.757-1.482-.504-.3-1.302-.45-2.393-.45H9.814v4Zm0 3.027v4.688H12.3c1.05 0 1.825-.2 2.326-.602.5-.402.75-1.018.75-1.846 0-1.493-1.066-2.24-3.199-2.24H9.814Z",
@@ -677,12 +675,11 @@ var SvgBold = function SvgBold(props) {
 SvgBold.displayName = 'SvgBold';
 
 var BoldIcon = function BoldIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgBold, _objectSpread$f(_objectSpread$f({}, props), {}, {
-        className: createClass(getIconStyles$b(props, theme))
+        className: createClass(getIconStyles$b(props))
       }));
     }
   });
@@ -738,44 +735,41 @@ var getSizeStyle$a = function getSizeStyle(size) {
   }
 };
 
-var getColor$a = function getColor(color, theme) {
+var getColor$a = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$e(_objectSpread$e({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -786,8 +780,8 @@ var getColor$a = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$a = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$a(props.color), ";}&,image{", getSizeStyle$a(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgExpandFull = function SvgExpandFull(props) {
@@ -795,7 +789,8 @@ var SvgExpandFull = function SvgExpandFull(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("path", {
       d: "m14.902 13.93.086.074 4.62 4.62v-2.967a.696.696 0 0 1 1.386-.095l.006.095v4.647a.696.696 0 0 1-.601.69l-.095.006h-4.647a.696.696 0 0 1-.095-1.386l.095-.006h2.967l-4.62-4.62a.696.696 0 0 1 .898-1.058Zm-4.906.074c.245.244.27.626.074.898l-.074.086-4.62 4.62h2.967a.696.696 0 0 1 .095 1.386L8.343 21H3.696a.696.696 0 0 1-.69-.601L3 20.304v-4.647a.696.696 0 0 1 1.386-.095l.006.095v2.967l4.62-4.62a.696.696 0 0 1 .984 0ZM8.448 3a.71.71 0 0 1 .096 1.413l-.096.006H5.422l4.57 4.57a.71.71 0 0 1-.915 1.078l-.088-.075-4.57-4.57v3.026a.71.71 0 0 1-1.413.097L3 8.449v-4.74a.71.71 0 0 1 .613-.703L3.71 3h4.738ZM20.29 3a.71.71 0 0 1 .71.71v4.738a.71.71 0 1 1-1.42 0V5.423l-4.569 4.57a.708.708 0 0 1-1.003 0 .71.71 0 0 1 0-1.004l4.57-4.57h-3.026a.71.71 0 1 1 0-1.419Z",
@@ -808,12 +803,11 @@ var SvgExpandFull = function SvgExpandFull(props) {
 SvgExpandFull.displayName = 'SvgExpandFull';
 
 var ExpandFullIcon = function ExpandFullIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgExpandFull, _objectSpread$e(_objectSpread$e({}, props), {}, {
-        className: createClass(getIconStyles$a(props, theme))
+        className: createClass(getIconStyles$a(props))
       }));
     }
   });
@@ -869,44 +863,41 @@ var getSizeStyle$9 = function getSizeStyle(size) {
   }
 };
 
-var getColor$9 = function getColor(color, theme) {
+var getColor$9 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$d(_objectSpread$d({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -917,8 +908,8 @@ var getColor$9 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$9 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$9(props.color), ";}&,image{", getSizeStyle$9(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgItalic = function SvgItalic(props) {
@@ -926,7 +917,8 @@ var SvgItalic = function SvgItalic(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("path", {
       d: "M9 20.99 12.827 3h2.067l-3.827 17.99z",
@@ -939,12 +931,11 @@ var SvgItalic = function SvgItalic(props) {
 SvgItalic.displayName = 'SvgItalic';
 
 var ItalicIcon = function ItalicIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgItalic, _objectSpread$d(_objectSpread$d({}, props), {}, {
-        className: createClass(getIconStyles$9(props, theme))
+        className: createClass(getIconStyles$9(props))
       }));
     }
   });
@@ -1000,44 +991,41 @@ var getSizeStyle$8 = function getSizeStyle(size) {
   }
 };
 
-var getColor$8 = function getColor(color, theme) {
+var getColor$8 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$c(_objectSpread$c({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1048,8 +1036,8 @@ var getColor$8 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$8 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$8(props.color), ";}&,image{", getSizeStyle$8(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgMoreStyles = function SvgMoreStyles(props) {
@@ -1058,7 +1046,8 @@ var SvgMoreStyles = function SvgMoreStyles(props) {
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img"
   }, props), {}, {
     children: [jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsx("path", {
@@ -1076,12 +1065,11 @@ var SvgMoreStyles = function SvgMoreStyles(props) {
 SvgMoreStyles.displayName = 'SvgMoreStyles';
 
 var MoreStylesIcon = function MoreStylesIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgMoreStyles, _objectSpread$c(_objectSpread$c({}, props), {}, {
-        className: createClass(getIconStyles$8(props, theme))
+        className: createClass(getIconStyles$8(props))
       }));
     }
   });
@@ -1137,44 +1125,41 @@ var getSizeStyle$7 = function getSizeStyle(size) {
   }
 };
 
-var getColor$7 = function getColor(color, theme) {
+var getColor$7 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$b(_objectSpread$b({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1185,8 +1170,8 @@ var getColor$7 = function getColor(color, theme) {
   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 getIconStyles$7 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$7(props.color), ";}&,image{", getSizeStyle$7(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgOrderedList = function SvgOrderedList(props) {
@@ -1194,7 +1179,8 @@ var SvgOrderedList = function SvgOrderedList(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, 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 0 1-.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 0 0-.49.276l-.424-.709C3.4 16.159 3.873 16 4.42 16Zm16.33 1.962a.39.39 0 0 1 .176.037.145.145 0 0 1 .066.055l.008.033v.75c0 .033-.025.063-.074.088a.35.35 0 0 1-.111.032l-.065.005h-10.5a.389.389 0 0 1-.176-.037.144.144 0 0 1-.066-.056L10 18.837v-.75c0-.034.025-.064.074-.088a.352.352 0 0 1 .111-.033l.065-.004h10.5ZM4.526 9c.267 0 .503.056.708.169.205.112.363.27.477.472a1.4 1.4 0 0 1 .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 0 0-.379-.145.972.972 0 0 0-.482.131 2.493 2.493 0 0 0-.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 0 1 .176.037.145.145 0 0 1 .066.056l.008.032v.75c0 .034-.025.063-.074.088a.352.352 0 0 1-.111.033l-.065.004h-10.5a.39.39 0 0 1-.176-.037.145.145 0 0 1-.066-.056L10 12.375v-.75c0-.034.025-.063.074-.088a.35.35 0 0 1 .111-.033l.065-.004h10.5ZM5 3v4h-.852V4.685l.008-.38.014-.416a4.47 4.47 0 0 1-.296.277l-.463.369L3 4.026 4.3 3H5Zm15.75 2.038a.39.39 0 0 1 .176.038.145.145 0 0 1 .066.055l.008.032v.75c0 .034-.025.064-.074.088a.35.35 0 0 1-.111.033l-.065.004h-10.5a.388.388 0 0 1-.176-.037.145.145 0 0 1-.066-.055L10 5.913v-.75c0-.033.025-.063.074-.087a.35.35 0 0 1 .111-.033l.065-.005h10.5Z",
@@ -1207,12 +1193,11 @@ var SvgOrderedList = function SvgOrderedList(props) {
 SvgOrderedList.displayName = 'SvgOrderedList';
 
 var OrderedListIcon = function OrderedListIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgOrderedList, _objectSpread$b(_objectSpread$b({}, props), {}, {
-        className: createClass(getIconStyles$7(props, theme))
+        className: createClass(getIconStyles$7(props))
       }));
     }
   });
@@ -1268,44 +1253,41 @@ var getSizeStyle$6 = function getSizeStyle(size) {
   }
 };
 
-var getColor$6 = function getColor(color, theme) {
+var getColor$6 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$a(_objectSpread$a({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1316,8 +1298,8 @@ var getColor$6 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$6 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$6(props.color), ";}&,image{", getSizeStyle$6(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgRedo = function SvgRedo(props) {
@@ -1326,7 +1308,8 @@ var SvgRedo = function SvgRedo(props) {
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img"
   }, props), {}, {
     children: [jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsx("path", {
@@ -1345,12 +1328,11 @@ var SvgRedo = function SvgRedo(props) {
 SvgRedo.displayName = 'SvgRedo';
 
 var RedoIcon = function RedoIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgRedo, _objectSpread$a(_objectSpread$a({}, props), {}, {
-        className: createClass(getIconStyles$6(props, theme))
+        className: createClass(getIconStyles$6(props))
       }));
     }
   });
@@ -1406,44 +1388,41 @@ var getSizeStyle$5 = function getSizeStyle(size) {
   }
 };
 
-var getColor$5 = function getColor(color, theme) {
+var getColor$5 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$9(_objectSpread$9({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1454,8 +1433,8 @@ var getColor$5 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$5 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$5(props.color), ";}&,image{", getSizeStyle$5(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgStrikethrough = function SvgStrikethrough(props) {
@@ -1463,7 +1442,8 @@ var SvgStrikethrough = function SvgStrikethrough(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, 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",
@@ -1476,12 +1456,11 @@ var SvgStrikethrough = function SvgStrikethrough(props) {
 SvgStrikethrough.displayName = 'SvgStrikethrough';
 
 var StrikethroughIcon = function StrikethroughIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgStrikethrough, _objectSpread$9(_objectSpread$9({}, props), {}, {
-        className: createClass(getIconStyles$5(props, theme))
+        className: createClass(getIconStyles$5(props))
       }));
     }
   });
@@ -1537,44 +1516,41 @@ var getSizeStyle$4 = function getSizeStyle(size) {
   }
 };
 
-var getColor$4 = function getColor(color, theme) {
+var getColor$4 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$8(_objectSpread$8({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1585,8 +1561,8 @@ var getColor$4 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$4 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$4(props.color), ";}&,image{", getSizeStyle$4(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgSubscript = function SvgSubscript(props) {
@@ -1594,7 +1570,8 @@ var SvgSubscript = function SvgSubscript(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("g", {
       fillRule: "nonzero",
@@ -1609,12 +1586,11 @@ var SvgSubscript = function SvgSubscript(props) {
 SvgSubscript.displayName = 'SvgSubscript';
 
 var SubscriptIcon = function SubscriptIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgSubscript, _objectSpread$8(_objectSpread$8({}, props), {}, {
-        className: createClass(getIconStyles$4(props, theme))
+        className: createClass(getIconStyles$4(props))
       }));
     }
   });
@@ -1670,44 +1646,41 @@ var getSizeStyle$3 = function getSizeStyle(size) {
   }
 };
 
-var getColor$3 = function getColor(color, theme) {
+var getColor$3 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$7(_objectSpread$7({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1718,8 +1691,8 @@ var getColor$3 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$3 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$3(props.color), ";}&,image{", getSizeStyle$3(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgSuperscript = function SvgSuperscript(props) {
@@ -1727,7 +1700,8 @@ var SvgSuperscript = function SvgSuperscript(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, props), {}, {
     children: jsxRuntime.jsx("g", {
       fillRule: "evenodd",
@@ -1743,12 +1717,11 @@ var SvgSuperscript = function SvgSuperscript(props) {
 SvgSuperscript.displayName = 'SvgSuperscript';
 
 var SuperscriptIcon = function SuperscriptIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgSuperscript, _objectSpread$7(_objectSpread$7({}, props), {}, {
-        className: createClass(getIconStyles$3(props, theme))
+        className: createClass(getIconStyles$3(props))
       }));
     }
   });
@@ -1804,44 +1777,41 @@ var getSizeStyle$2 = function getSizeStyle(size) {
   }
 };
 
-var getColor$2 = function getColor(color, theme) {
+var getColor$2 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$6(_objectSpread$6({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1852,8 +1822,8 @@ var getColor$2 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$2 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$2(props.color), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUnderline = function SvgUnderline(props) {
@@ -1861,7 +1831,8 @@ var SvgUnderline = function SvgUnderline(props) {
     width: 24,
     height: 24,
     viewBox: "0 0 24 24",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    role: "img"
   }, 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",
@@ -1874,12 +1845,11 @@ var SvgUnderline = function SvgUnderline(props) {
 SvgUnderline.displayName = 'SvgUnderline';
 
 var UnderlineIcon = function UnderlineIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgUnderline, _objectSpread$6(_objectSpread$6({}, props), {}, {
-        className: createClass(getIconStyles$2(props, theme))
+        className: createClass(getIconStyles$2(props))
       }));
     }
   });
@@ -1935,44 +1905,41 @@ var getSizeStyle$1 = function getSizeStyle(size) {
   }
 };
 
-var getColor$1 = function getColor(color, theme) {
+var getColor$1 = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$5(_objectSpread$5({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -1983,8 +1950,8 @@ var getColor$1 = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles$1 = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUndo = function SvgUndo(props) {
@@ -1993,7 +1960,8 @@ var SvgUndo = function SvgUndo(props) {
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img"
   }, props), {}, {
     children: [jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsx("path", {
@@ -2011,12 +1979,11 @@ var SvgUndo = function SvgUndo(props) {
 SvgUndo.displayName = 'SvgUndo';
 
 var UndoIcon = function UndoIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgUndo, _objectSpread$5(_objectSpread$5({}, props), {}, {
-        className: createClass(getIconStyles$1(props, theme))
+        className: createClass(getIconStyles$1(props))
       }));
     }
   });
@@ -2072,44 +2039,41 @@ var getSizeStyle = function getSizeStyle(size) {
   }
 };
 
-var getColor = function getColor(color, theme) {
+var getColor = function getColor(color) {
   if (!color) return 'inherit';
-
-  var overwrittenVars = _objectSpread$4(_objectSpread$4({}, designSystem.customProperties), theme);
-
   var iconColor;
 
   switch (color) {
     case 'solid':
-      iconColor = overwrittenVars.colorSolid;
+      iconColor = designSystem.designTokens.colorSolid;
       break;
 
     case 'neutral60':
-      iconColor = overwrittenVars.colorNeutral60;
+      iconColor = designSystem.designTokens.colorNeutral60;
       break;
 
     case 'surface':
-      iconColor = overwrittenVars.colorSurface;
+      iconColor = designSystem.designTokens.colorSurface;
       break;
 
     case 'info':
-      iconColor = overwrittenVars.colorInfo;
+      iconColor = designSystem.designTokens.colorInfo;
       break;
 
     case 'primary':
-      iconColor = overwrittenVars.colorPrimary;
+      iconColor = designSystem.designTokens.colorPrimary;
       break;
 
     case 'primary40':
-      iconColor = overwrittenVars.colorPrimary40;
+      iconColor = designSystem.designTokens.colorPrimary40;
       break;
 
     case 'warning':
-      iconColor = overwrittenVars.colorWarning;
+      iconColor = designSystem.designTokens.colorWarning;
       break;
 
     case 'error':
-      iconColor = overwrittenVars.colorError;
+      iconColor = designSystem.designTokens.colorError;
       break;
   }
 
@@ -2120,8 +2084,8 @@ var getColor = function getColor(color, theme) {
   return iconColor;
 };
 
-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 getIconStyles = function getIconStyles(props) {
+  return /*#__PURE__*/react$1.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
 var SvgUnorderedList = function SvgUnorderedList(props) {
@@ -2130,7 +2094,8 @@ var SvgUnorderedList = function SvgUnorderedList(props) {
     height: 24,
     viewBox: "0 0 24 24",
     xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink"
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    role: "img"
   }, props), {}, {
     children: [jsxRuntime.jsx("defs", {
       children: jsxRuntime.jsx("path", {
@@ -2148,12 +2113,11 @@ var SvgUnorderedList = function SvgUnorderedList(props) {
 SvgUnorderedList.displayName = 'SvgUnorderedList';
 
 var UnorderedListIcon = function UnorderedListIcon(props) {
-  var theme = react$1.useTheme();
   return jsxRuntime.jsx(react$1.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
       return jsxRuntime.jsx(SvgUnorderedList, _objectSpread$4(_objectSpread$4({}, props), {}, {
-        className: createClass(getIconStyles(props, theme))
+        className: createClass(getIconStyles(props))
       }));
     }
   });
@@ -2164,30 +2128,30 @@ var UnorderedListIcon$1 = UnorderedListIcon;
 
 var getBorderColor = function getBorderColor(props) {
   if (props.isDisabled) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenDisabled, ";" + ("" ), "" );
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenDisabled, ";" + ("" ), "" );
   }
 
   if (props.hasError) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenError, ";" + ("" ), "" );
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenError, ";" + ("" ), "" );
   }
 
   if (props.hasWarning) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenWarning, ";" + ("" ), "" );
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenWarning, ";" + ("" ), "" );
   }
 
   if (props.isReadOnly) {
-    return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInputWhenReadonly, ";" + ("" ), "" );
+    return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInputWhenReadonly, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react$1.css("border-color:", designSystem.customProperties.borderColorForInput, ";" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("border-color:", designSystem.designTokens.borderColorForInput, ";" + ("" ), "" );
 };
 
 var getBackgroundColor = function getBackgroundColor(props) {
   if (props.isDisabled) {
-    return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInputWhenDisabled, ";" + ("" ), "" );
+    return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.backgroundColorForInputWhenDisabled, ";" + ("" ), "" );
   }
 
-  return /*#__PURE__*/react$1.css("background-color:", designSystem.customProperties.backgroundColorForInput, ";" + ("" ), "" );
+  return /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.backgroundColorForInput, ";" + ("" ), "" );
 };
 
 var ToolbarMainControls = /*#__PURE__*/_styled__default["default"]("div", {
@@ -2201,7 +2165,7 @@ var ToolbarRightControls = /*#__PURE__*/_styled__default["default"]("div", {
 } )("" );
 var Toolbar = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae42"
-} )("display:flex;flex-wrap:wrap;font-family:", designSystem.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.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom:0;padding:", designSystem.designTokens.spacingXs, " calc(", designSystem.designTokens.spacingS, " - 1px);padding-left:calc(", designSystem.designTokens.spacingXs, " - 1px);align-items:flex-start;align-content:stretch;position:relative;&::after{position:absolute;content:'';width:calc(100% - ", designSystem.designTokens.spacingS, ");height:1px;background:", designSystem.designTokens.colorNeutral, ";left:50%;transform:translateX(-50%);bottom:-1px;}&:focus{outline:none;}" + ("" ));
 
 var _ref$2 = {
   name: "7g2mws",
@@ -2209,17 +2173,17 @@ var _ref$2 = {
 } ;
 
 var reset = function reset(props) {
-  return [_ref$2, props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.fontColorForInputWhenReadonly, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.customProperties.fontColorForInputWhenDisabled, ";" + ("" ), "" )];
+  return [_ref$2, props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenReadonly, ";" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.fontColorForInputWhenDisabled, ";" + ("" ), "" )];
 };
 
 var EditorContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae41"
-} )("padding:4px ", designSystem.customProperties.spacingS, ";padding-top:6px;border-radius:", designSystem.customProperties.borderRadiusForInput, ";font-family:", designSystem.customProperties.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";" + ("" ));
+} )("padding:4px ", designSystem.designTokens.spacingS, ";padding-top:6px;border-radius:", designSystem.designTokens.borderRadiusForInput, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";", getBorderColor, " overflow-y:scroll;", reset, ";" + ("" ));
 var Container = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1sckae40"
-} )("border-radius:", designSystem.customProperties.borderRadiusForInput, ";border:1px solid ", designSystem.customProperties.borderColorForInput, ";transition:", designSystem.customProperties.transitionStandard, ";", getBorderColor, " ", getBackgroundColor, " pointer-events:", function (props) {
+} )("border-radius:", designSystem.designTokens.borderRadiusForInput, ";border:1px solid ", designSystem.designTokens.borderColorForInput, ";transition:", designSystem.designTokens.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.designTokens.borderColorForInputWhenFocused, ";}&:focus{outline:none;box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}", Toolbar, "{border-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:", designSystem.designTokens.borderColorForInput, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:inset 0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";", Toolbar, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}", EditorContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}}" + ("" ));
 
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -2227,8 +2191,8 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 var propsToOmit = ['isActive', 'label', 'isDisabled', 'isReadOnly'];
 
 function getFillColor(props) {
-  if (props.isActive) return designSystem.customProperties.colorSurface;
-  return designSystem.customProperties.colorSolid;
+  if (props.isActive) return designSystem.designTokens.colorSurface;
+  return designSystem.designTokens.colorSolid;
 }
 
 var RichTextBodyButton = function RichTextBodyButton(props) {
@@ -2239,7 +2203,7 @@ var RichTextBodyButton = function RichTextBodyButton(props) {
     "aria-disabled": props.isDisabled,
     disabled: props.isDisabled,
     "aria-label": props.label,
-    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.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, ";}" + ("" ), "" ), "" , "" ],
+    css: [/*#__PURE__*/react$1.css("border:0;cursor:pointer;background:", props.isActive ? designSystem.designTokens.colorAccent30 : 'transparent', ";display:flex;justify-content:center;align-items:center;border-radius:", designSystem.designTokens.spacingXs, ";padding:", designSystem.designTokens.spacingXs, ";&:focus{outline:none;}&:hover,&:focus{background:", props.isActive ? designSystem.designTokens.colorAccent30 : designSystem.designTokens.colorNeutral90, ";}svg{fill:", getFillColor(props), ";}&:disabled{pointer-events:none;svg{fill:", designSystem.designTokens.colorNeutral60, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), "" , "" ],
     children: props.children
   }));
 };
@@ -2250,25 +2214,25 @@ var Button = RichTextBodyButton;
 
 var Divider = /*#__PURE__*/_styled__default["default"]("span", {
   target: "ehglnxa0"
-} )("width:1px;height:", designSystem.customProperties.spacingL, ";background:", designSystem.customProperties.colorNeutral, ";margin:0 ", designSystem.customProperties.spacingXs, ";" + ("" ));
+} )("width:1px;height:", designSystem.designTokens.spacingL, ";background:", designSystem.designTokens.colorNeutral, ";margin:0 ", designSystem.designTokens.spacingXs, ";" + ("" ));
 
 var Divider$1 = Divider;
 
 var DropdownItem = /*#__PURE__*/_styled__default["default"]("button", {
   target: "e1f4n71b1"
-} )("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, ";}" + ("" ));
+} )("width:100%;border:0;font-size:1rem;cursor:pointer;padding:", designSystem.designTokens.spacingXs, " ", designSystem.designTokens.spacingS, ";font-family:", designSystem.designTokens.fontFamilyDefault, ";display:block;background-color:", function (props) {
+  return props.isSelected ? designSystem.designTokens.colorAccent95 : designSystem.designTokens.colorSurface;
+}, ";&:focus,&:hover{outline:none;background-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ));
 
 var getButtonStyles = function getButtonStyles(props) {
   var _context;
 
-  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, ";}" + ("" ), "" )];
+  return [/*#__PURE__*/react$1.css("border:0;font-family:", designSystem.designTokens.fontFamilyDefault, ";border-radius:", designSystem.designTokens.borderRadius4, ";cursor:pointer;font-size:", designSystem.designTokens.fontSizeForInput, ";color:", designSystem.designTokens.colorSolid, ";display:flex;justify-content:center;align-items:center;padding:", props.isStyleButton ? _concatInstanceProperty__default["default"](_context = "calc(".concat(designSystem.designTokens.spacingXs, " - 1px) ")).call(_context, designSystem.designTokens.spacingS) : designSystem.designTokens.spacingXs, ";&:hover{background-color:", designSystem.designTokens.colorNeutral90, ";}" + ("" ), "" ), props.isIndeterminate && /*#__PURE__*/react$1.css("background-color:", designSystem.designTokens.colorAccent95, ";" + ("" ), "" ), props.isOpen && /*#__PURE__*/react$1.css("&:not(:hover){background-color:", designSystem.designTokens.colorAccent30, ";color:", designSystem.designTokens.colorSurface, ";svg{fill:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), props.isReadOnly && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react$1.css("color:", designSystem.designTokens.colorNeutral60, ";svg{fill:", designSystem.designTokens.colorNeutral60, ";}" + ("" ), "" )];
 };
 
 var DropdownContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1f4n71b0"
-} )("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.designTokens.fontSizeForInput, ";top:", designSystem.designTokens.spacingXs, ";margin-top:", designSystem.designTokens.spacingXs, ";left:0;white-space:nowrap;background:", designSystem.designTokens.colorSurface, ";overflow:hidden;z-index:9999;border:1px solid ", designSystem.designTokens.colorPrimary, ";border-radius:", designSystem.designTokens.borderRadius6, ";" + ("" ));
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -3129,7 +3093,7 @@ RichTextEditorBody.defaultProps = defaultProps;
 var RichTextEditorBody$1 = RichTextEditorBody;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.2.4";
+var version = "15.4.0";
 
 exports.Element = Element;
 exports.HiddenInput = HiddenInput$1;