@contentful/field-editor-markdown 0.17.0 → 1.0.1

package/dist/field-editor-markdown.esm.js

@@ -3,12 +3,12 @@ import 'codemirror/mode/xml/xml';
 import 'codemirror/addon/edit/continuelist';
 import 'codemirror/addon/mode/overlay';
 import 'codemirror/addon/display/autorefresh';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { css, cx } from 'emotion';
-import tokens from '@contentful/forma-36-tokens';
+import tokens from '@contentful/f36-tokens';
 import { ConstraintsUtils, CharCounter, CharValidation, FieldConnector, ModalDialogLauncher } from '@contentful/field-editor-shared';
-import noop from 'lodash-es/noop';
-import { Dropdown, DropdownList, DropdownListItem, Button, Icon, Tooltip, Paragraph, TextLink, Modal, Heading as Heading$1, Form, TextField, DisplayText, RadioButtonField, CheckboxField, HelpText, Typography, EntityList, EntityListItem } from '@contentful/forma-36-react-components';
+import { Menu, Button, Tooltip, Flex, Paragraph, TextLink, ModalContent, Heading, Form, FormControl, TextInput, ModalControls, Text, Radio, Checkbox, EntityList } from '@contentful/f36-components';
+import { AssetIcon, ChevronDownIcon, MoreHorizontalIcon, HeadingIcon, FormatBoldIcon, FormatItalicIcon, QuoteIcon, ListBulletedIcon, ListNumberedIcon, LinkIcon, CodeIcon, HorizontalRuleIcon, ChevronRightIcon, ChevronLeftIcon } from '@contentful/f36-icons';
 import transform from 'lodash-es/transform';
 import throttle from 'lodash-es/throttle';
 import CodeMirror from 'codemirror';
@@ -188,16 +188,7 @@ var _excluded = ["label"],
     _excluded7 = ["label"],
     _excluded8 = ["label"],
     _excluded9 = ["label"],
-    _excluded10 = ["label"],
-    _excluded11 = ["label"],
-    _excluded12 = ["label"],
-    _excluded13 = ["label"],
-    _excluded14 = ["label"],
-    _excluded15 = ["label"],
-    _excluded16 = ["label"],
-    _excluded17 = ["label"],
-    _excluded18 = ["label"],
-    _excluded19 = ["label"];
+    _excluded10 = ["label"];
 var srOnly = /*#__PURE__*/css({
   position: 'absolute',
   width: '1px',
@@ -208,49 +199,49 @@ var srOnly = /*#__PURE__*/css({
   clip: 'rect(0, 0, 0, 0)',
   border: '0'
 });
-var Bold = function Bold(_ref) {
+var Zen = function Zen(_ref) {
   var label = _ref.label,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return React.createElement("svg", Object.assign({
     width: 14,
     height: 14,
-    viewBox: "0 0 1782 1792"
+    viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M747 1521q74 32 140 32 376 0 376-335 0-114-41-180-27-44-61.5-74t-67.5-46.5-80.5-25-84-10.5-94.5-2q-73 0-101 10 0 53-.5 159t-.5 158q0 8-1 67.5t-.5 96.5 4.5 83.5 12 66.5zm-14-746q42 7 109 7 82 0 143-13t110-44.5 74.5-89.5 25.5-142q0-70-29-122.5t-79-82T979 245t-124-14q-50 0-130 13 0 50 4 151t4 152q0 27-.5 80t-.5 79q0 46 1 69zm-541 889l2-94q15-4 85-16t106-27q7-12 12.5-27t8.5-33.5 5.5-32.5 3-37.5.5-34V1297q0-982-22-1025-4-8-22-14.5t-44.5-11-49.5-7-48.5-4.5-30.5-3l-4-83q98-2 340-11.5t373-9.5q23 0 68 .5t68 .5q70 0 136.5 13t128.5 42 108 71 74 104.5 28 137.5q0 52-16.5 95.5t-39 72T1398 722t-73 45-84 40q154 35 256.5 134t102.5 248q0 100-35 179.5t-93.5 130.5-138 85.5T1170 1633t-176 14q-44 0-132-3t-132-3q-106 0-307 11t-231 12z"
+    d: "M1411 541l-355 355 355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V192q0-26 19-45t45-19h448q42 0 59 40 17 39-14 69L541 381l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Italic = function Italic(_ref2) {
+var Strikethrough = function Strikethrough(_ref2) {
   var label = _ref2.label,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   return React.createElement("svg", Object.assign({
     width: 14,
     height: 14,
-    viewBox: "0 0 1782 1792"
+    viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M384 1662l17-85q22-7 61.5-16.5t72-19T594 1518q28-35 41-101 1-7 62-289t114-543.5T863 288v-25q-24-13-54.5-18.5t-69.5-8-58-5.5l19-103q33 2 120 6.5t149.5 7T1090 144q48 0 98.5-2.5t121-7 98.5-6.5q-5 39-19 89-30 10-101.5 28.5T1179 279q-8 19-14 42.5t-9 40-7.5 45.5-6.5 42q-27 148-87.5 419.5T977 1224q-2 9-13 58t-20 90-16 83.5-6 57.5l1 18q17 4 185 31-3 44-16 99-11 0-32.5 1.5t-32.5 1.5q-29 0-87-10t-86-10q-138-2-206-2-51 0-143 9t-121 11z"
+    d: "M1760 896q14 0 23 9t9 23v64q0 14-9 23t-23 9H32q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h1728zM483 832q-28-35-51-80-48-98-48-188 0-181 134-309 133-127 393-127 50 0 167 19 66 12 177 48 10 38 21 118 14 123 14 183 0 18-5 45l-12 3-84-6-14-2q-50-149-103-205-88-91-210-91-114 0-182 59-67 58-67 146 0 73 66 140t279 129q69 20 173 66 58 28 95 52H483zm507 256h411q7 39 7 92 0 111-41 212-23 56-71 104-37 35-109 81-80 48-153 66-80 21-203 21-114 0-195-23l-140-40q-57-16-72-28-8-8-8-22v-13q0-108-2-156-1-30 0-68l2-37v-44l102-2q15 34 30 71t22.5 56 12.5 27q35 57 80 94 43 36 105 57 59 22 132 22 64 0 139-27 77-26 122-86 47-61 47-129 0-84-81-157-34-29-137-71z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Quote = function Quote(_ref3) {
+var Indent = function Indent(_ref3) {
   var label = _ref3.label,
       rest = _objectWithoutPropertiesLoose(_ref3, _excluded3);
 
   return React.createElement("svg", Object.assign({
     width: 14,
     height: 14,
-    viewBox: "0 0 1782 1792"
+    viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M832 960v384q0 80-56 136t-136 56H256q-80 0-136-56t-56-136V640q0-104 40.5-198.5T214 278t163.5-109.5T576 128h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136V640q0-104 40.5-198.5T1110 278t163.5-109.5T1472 128h64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z"
+    d: "M352 832q0 14-9 23L55 1143q-9 9-23 9-13 0-22.5-9.5T0 1120V544q0-13 9.5-22.5T32 512q14 0 23 9l288 288q9 9 9 23zm1440 480v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var List = function List(_ref4) {
+var Dedent = function Dedent(_ref4) {
   var label = _ref4.label,
       rest = _objectWithoutPropertiesLoose(_ref4, _excluded4);
 
@@ -259,26 +250,26 @@ var List = function List(_ref4) {
     height: 14,
     viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M256 1312v192q0 13-9.5 22.5T224 1536H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h192q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T224 1152H32q-13 0-22.5-9.5T0 1120V928q0-13 9.5-22.5T32 896h192q13 0 22.5 9.5T256 928zm0-384v192q0 13-9.5 22.5T224 768H32q-13 0-22.5-9.5T0 736V544q0-13 9.5-22.5T32 512h192q13 0 22.5 9.5T256 544zm1536 768v192q0 13-9.5 22.5t-22.5 9.5H416q-13 0-22.5-9.5T384 1504v-192q0-13 9.5-22.5t22.5-9.5h1344q13 0 22.5 9.5t9.5 22.5zM256 160v192q0 13-9.5 22.5T224 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h192q13 0 22.5 9.5T256 160zm1536 768v192q0 13-9.5 22.5t-22.5 9.5H416q-13 0-22.5-9.5T384 1120V928q0-13 9.5-22.5T416 896h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H416q-13 0-22.5-9.5T384 736V544q0-13 9.5-22.5T416 512h1344q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H416q-13 0-22.5-9.5T384 352V160q0-13 9.5-22.5T416 128h1344q13 0 22.5 9.5t9.5 22.5z"
+    d: "M384 544v576q0 13-9.5 22.5T352 1152q-14 0-23-9L41 855q-9-9-9-23t9-23l288-288q9-9 23-9 13 0 22.5 9.5T384 544zm1408 768v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var ListOl = function ListOl(_ref5) {
+var Cubes = function Cubes(_ref5) {
   var label = _ref5.label,
       rest = _objectWithoutPropertiesLoose(_ref5, _excluded5);
 
   return React.createElement("svg", Object.assign({
-    width: 14,
+    width: 18,
     height: 14,
-    viewBox: "0 0 1792 1792"
+    viewBox: "0 0 2304 1792"
   }, rest), React.createElement("path", {
-    d: "M381 1620q0 80-54.5 126T191 1792q-106 0-172-66l57-88q49 45 106 45 29 0 50.5-14.5T254 1626q0-64-105-56l-26-56q8-10 32.5-43.5t42.5-54 37-38.5v-1q-16 0-48.5 1t-48.5 1v53H32v-152h333v88l-95 115q51 12 81 49t30 88zm2-627v159H21q-6-36-6-54 0-51 23.5-93T95 937t66-47.5 56.5-43.5 23.5-45q0-25-14.5-38.5T187 749q-46 0-81 58l-85-59q24-51 71.5-79.5T198 640q73 0 123 41.5T371 794q0 50-34 91.5T262 950t-75.5 50.5T151 1053h127v-60h105zm1409 319v192q0 13-9.5 22.5t-22.5 9.5H544q-13 0-22.5-9.5T512 1504v-192q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zM384 413v99H49v-99h107q0-41 .5-121.5T157 170v-12h-2q-8 17-50 54l-71-76L170 9h106v404h108zm1408 387v192q0 13-9.5 22.5t-22.5 9.5H544q-13 0-22.5-9.5T512 992V800q0-14 9-23t23-9h1216q13 0 22.5 9.5t9.5 22.5zm0-512v192q0 13-9.5 22.5T1760 512H544q-13 0-22.5-9.5T512 480V288q0-13 9.5-22.5T544 256h1216q13 0 22.5 9.5t9.5 22.5z"
+    d: "M640 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165V454l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-4-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14L71 1554q-33-16-52-47t-19-67v-416q0-38 21.5-70T78 906l434-186V320q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Link = function Link(_ref6) {
+var Table = function Table(_ref6) {
   var label = _ref6.label,
       rest = _objectWithoutPropertiesLoose(_ref6, _excluded6);
 
@@ -287,12 +278,12 @@ var Link = function Link(_ref6) {
     height: 14,
     viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M1520 1216q0-40-28-68l-208-208q-28-28-68-28-42 0-72 32 3 3 19 18.5t21.5 21.5 15 19 13 25.5 3.5 27.5q0 40-28 68t-68 28q-15 0-27.5-3.5t-25.5-13-19-15-21.5-21.5-18.5-19q-33 31-33 73 0 40 28 68l206 207q27 27 68 27 40 0 68-26l147-146q28-28 28-67zM817 511q0-40-28-68L583 236q-28-28-68-28-39 0-68 27L300 381q-28 28-28 67 0 40 28 68l208 208q27 27 68 27 42 0 72-31-3-3-19-18.5T607.5 680t-15-19-13-25.5T576 608q0-40 28-68t68-28q15 0 27.5 3.5t25.5 13 19 15 21.5 21.5 18.5 19q33-31 33-73zm895 705q0 120-85 203l-147 146q-83 83-203 83-121 0-204-85l-206-207q-83-83-83-203 0-123 88-209l-88-88q-86 88-208 88-120 0-204-84L164 652q-84-84-84-204t85-203L312 99q83-83 203-83 121 0 204 85l206 207q83 83 83 203 0 123-88 209l88 88q86-88 208-88 120 0 204 84l208 208q84 84 84 204z"
+    d: "M576 1376v-192q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V800q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zM576 608V416q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768V416q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V416q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm128-320v1088q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Heading = function Heading(_ref7) {
+var SpecialChar = function SpecialChar(_ref7) {
   var label = _ref7.label,
       rest = _objectWithoutPropertiesLoose(_ref7, _excluded7);
 
@@ -301,12 +292,12 @@ var Heading = function Heading(_ref7) {
     height: 14,
     viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M1682 1664q-44 0-132.5-3.5T1416 1657q-44 0-132 3.5t-132 3.5q-24 0-37-20.5t-13-45.5q0-31 17-46t39-17 51-7 45-15q33-21 33-140l-1-391q0-21-1-31-13-4-50-4H560q-38 0-51 4-1 10-1 31l-1 371q0 142 37 164 16 10 48 13t57 3.5 45 15 20 45.5q0 26-12.5 48t-36.5 22q-47 0-139.5-3.5T387 1657q-43 0-128 3.5t-127 3.5q-23 0-35.5-21T84 1598q0-30 15.5-45t36-17.5 47.5-7.5 42-15q33-23 33-143l-1-57V500q0-3 .5-26t0-36.5T256 399t-3.5-42-6.5-36.5-11-31.5-16-18q-15-10-45-12t-53-2-41-14-18-45q0-26 12-48t36-22q46 0 138.5 3.5T387 135q42 0 126.5-3.5T640 128q25 0 37.5 22t12.5 48q0 30-17 43.5T634.5 256t-49.5 4-43 13q-35 21-35 160l1 320q0 21 1 32 13 3 39 3h699q25 0 38-3 1-11 1-32l1-320q0-139-35-160-18-11-58.5-12.5t-66-13T1102 198q0-26 12.5-48t37.5-22q44 0 132 3.5t132 3.5q43 0 129-3.5t129-3.5q25 0 37.5 22t12.5 48q0 30-17.5 44t-40 14.5-51.5 3-44 12.5q-35 23-35 161l1 943q0 119 34 140 16 10 46 13.5t53.5 4.5 41.5 15.5 18 44.5q0 26-12 48t-36 22z"
+    d: "M1360 1307l35 159q3 12-3 22.5t-17 14.5l-5 1q-4 2-10.5 3.5t-16 4.5-21.5 5.5-25.5 5-30 5-33.5 4.5-36.5 3-38.5 1q-234 0-409-130.5T511 1054h-95q-13 0-22.5-9.5T384 1022V909q0-13 9.5-22.5T416 877h66q-2-57 1-105h-67q-14 0-23-9t-9-23V626q0-14 9-23t23-9h98q67-210 243.5-338T1158 128q102 0 194 23 11 3 20 15 6 11 3 24l-43 159q-3 13-14 19.5t-24 2.5l-4-1q-4-1-11.5-2.5L1261 364l-22.5-3.5-26-3-29-2.5-29.5-1q-126 0-226 64T778 594h468q16 0 25 12 10 12 7 26l-24 114q-5 26-32 26H734q-3 37 0 105h459q15 0 25 12 9 12 6 27l-24 112q-2 11-11 18.5t-20 7.5H782q48 117 149.5 185.5T1160 1308q18 0 36-1.5t33.5-3.5 29.5-4.5 24.5-5 18.5-4.5l12-3 5-2q13-5 26 2 12 7 15 21z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Zen = function Zen(_ref8) {
+var OrgLinks = function OrgLinks(_ref8) {
   var label = _ref8.label,
       rest = _objectWithoutPropertiesLoose(_ref8, _excluded8);
 
@@ -315,12 +306,12 @@ var Zen = function Zen(_ref8) {
     height: 14,
     viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M1411 541l-355 355 355 355 144-144q29-31 70-14 39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40-17-39 14-69l144-144-355-355-355 355 144 144q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45v-448q0-42 40-59 39-17 69 14l144 144 355-355-355-355-144 144q-19 19-45 19-12 0-24-5-40-17-40-59V192q0-26 19-45t45-19h448q42 0 59 40 17 39-14 69L541 381l355 355 355-355-144-144q-31-30-14-69 17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59-13 5-25 5-26 0-45-19z"
+    d: "M1792 1248v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960q0-52 38-90t90-38h512V640h-96q-40 0-68-28t-28-68V224q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Strikethrough = function Strikethrough(_ref9) {
+var Undo = function Undo(_ref9) {
   var label = _ref9.label,
       rest = _objectWithoutPropertiesLoose(_ref9, _excluded9);
 
@@ -329,141 +320,15 @@ var Strikethrough = function Strikethrough(_ref9) {
     height: 14,
     viewBox: "0 0 1792 1792"
   }, rest), React.createElement("path", {
-    d: "M1760 896q14 0 23 9t9 23v64q0 14-9 23t-23 9H32q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h1728zM483 832q-28-35-51-80-48-98-48-188 0-181 134-309 133-127 393-127 50 0 167 19 66 12 177 48 10 38 21 118 14 123 14 183 0 18-5 45l-12 3-84-6-14-2q-50-149-103-205-88-91-210-91-114 0-182 59-67 58-67 146 0 73 66 140t279 129q69 20 173 66 58 28 95 52H483zm507 256h411q7 39 7 92 0 111-41 212-23 56-71 104-37 35-109 81-80 48-153 66-80 21-203 21-114 0-195-23l-140-40q-57-16-72-28-8-8-8-22v-13q0-108-2-156-1-30 0-68l2-37v-44l102-2q15 34 30 71t22.5 56 12.5 27q35 57 80 94 43 36 105 57 59 22 132 22 64 0 139-27 77-26 122-86 47-61 47-129 0-84-81-157-34-29-137-71z"
+    d: "M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5T305 1387q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5T1258 1258t109.5-163.5T1408 896t-40.5-198.5T1258 534t-163.5-109.5T896 384q-98 0-188 35.5T548 521l137 138q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45V256q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5T896 128q156 0 298 61t245 164 164 245 61 298z"
   }), React.createElement("span", {
     className: srOnly
   }, label));
 };
-var Code = function Code(_ref10) {
+var Redo = function Redo(_ref10) {
   var label = _ref10.label,
       rest = _objectWithoutPropertiesLoose(_ref10, _excluded10);
 
-  return React.createElement("svg", Object.assign({
-    width: 18,
-    height: 14,
-    viewBox: "0 0 2048 1792"
-  }, rest), React.createElement("path", {
-    d: "M681 1399l-50 50q-10 10-23 10t-23-10L119 983q-10-10-10-23t10-23l466-466q10-10 23-10t23 10l50 50q10 10 10 23t-10 23L288 960l393 393q10 10 10 23t-10 23zm591-1067L899 1623q-4 13-15.5 19.5T860 1645l-62-17q-13-4-19.5-15.5T776 1588l373-1291q4-13 15.5-19.5t23.5-2.5l62 17q13 4 19.5 15.5t2.5 24.5zm657 651l-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Hr = function Hr(_ref11) {
-  var label = _ref11.label,
-      rest = _objectWithoutPropertiesLoose(_ref11, _excluded11);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M1792 896q0 26-19 45l-256 256q-19 19-45 19t-45-19-19-45v-128H384v128q0 26-19 45t-45 19-45-19L19 941Q0 922 0 896t19-45l256-256q19-19 45-19t45 19 19 45v128h1024V640q0-26 19-45t45-19 45 19l256 256q19 19 19 45z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Indent = function Indent(_ref12) {
-  var label = _ref12.label,
-      rest = _objectWithoutPropertiesLoose(_ref12, _excluded12);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M352 832q0 14-9 23L55 1143q-9 9-23 9-13 0-22.5-9.5T0 1120V544q0-13 9.5-22.5T32 512q14 0 23 9l288 288q9 9 9 23zm1440 480v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Dedent = function Dedent(_ref13) {
-  var label = _ref13.label,
-      rest = _objectWithoutPropertiesLoose(_ref13, _excluded13);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M384 544v576q0 13-9.5 22.5T352 1152q-14 0-23-9L41 855q-9-9-9-23t9-23l288-288q9-9 23-9 13 0 22.5 9.5T384 544zm1408 768v192q0 13-9.5 22.5t-22.5 9.5H32q-13 0-22.5-9.5T0 1504v-192q0-13 9.5-22.5T32 1280h1728q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5t-22.5 9.5H672q-13 0-22.5-9.5T640 1120V928q0-13 9.5-22.5T672 896h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 768H672q-13 0-22.5-9.5T640 736V544q0-13 9.5-22.5T672 512h1088q13 0 22.5 9.5t9.5 22.5zm0-384v192q0 13-9.5 22.5T1760 384H32q-13 0-22.5-9.5T0 352V160q0-13 9.5-22.5T32 128h1728q13 0 22.5 9.5t9.5 22.5z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Cubes = function Cubes(_ref14) {
-  var label = _ref14.label,
-      rest = _objectWithoutPropertiesLoose(_ref14, _excluded14);
-
-  return React.createElement("svg", Object.assign({
-    width: 18,
-    height: 14,
-    viewBox: "0 0 2304 1792"
-  }, rest), React.createElement("path", {
-    d: "M640 1632l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm1088 454l384-192v-314l-384 164v342zm-64-454l404-173-404-173-404 173zm-448-293l384-165V454l-384 164v267zm-64-379l441-189-441-189-441 189zm1088 518v416q0 36-19 67t-52 47l-448 224q-25 14-57 14t-57-14l-448-224q-4-2-7-4-2 2-7 4l-448 224q-25 14-57 14t-57-14L71 1554q-33-16-52-47t-19-67v-416q0-38 21.5-70T78 906l434-186V320q0-38 21.5-70t56.5-48l448-192q23-10 50-10t50 10l448 192q35 16 56.5 48t21.5 70v400l434 186q36 16 57 48t21 70z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Table = function Table(_ref15) {
-  var label = _ref15.label,
-      rest = _objectWithoutPropertiesLoose(_ref15, _excluded15);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M576 1376v-192q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V800q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zM576 608V416q0-14-9-23t-23-9H224q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384v-192q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm-512-768V416q0-14-9-23t-23-9H736q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm512 384V800q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm0-384V416q0-14-9-23t-23-9h-320q-14 0-23 9t-9 23v192q0 14 9 23t23 9h320q14 0 23-9t9-23zm128-320v1088q0 66-47 113t-113 47H224q-66 0-113-47t-47-113V288q0-66 47-113t113-47h1344q66 0 113 47t47 113z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var SpecialChar = function SpecialChar(_ref16) {
-  var label = _ref16.label,
-      rest = _objectWithoutPropertiesLoose(_ref16, _excluded16);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M1360 1307l35 159q3 12-3 22.5t-17 14.5l-5 1q-4 2-10.5 3.5t-16 4.5-21.5 5.5-25.5 5-30 5-33.5 4.5-36.5 3-38.5 1q-234 0-409-130.5T511 1054h-95q-13 0-22.5-9.5T384 1022V909q0-13 9.5-22.5T416 877h66q-2-57 1-105h-67q-14 0-23-9t-9-23V626q0-14 9-23t23-9h98q67-210 243.5-338T1158 128q102 0 194 23 11 3 20 15 6 11 3 24l-43 159q-3 13-14 19.5t-24 2.5l-4-1q-4-1-11.5-2.5L1261 364l-22.5-3.5-26-3-29-2.5-29.5-1q-126 0-226 64T778 594h468q16 0 25 12 10 12 7 26l-24 114q-5 26-32 26H734q-3 37 0 105h459q15 0 25 12 9 12 6 27l-24 112q-2 11-11 18.5t-20 7.5H782q48 117 149.5 185.5T1160 1308q18 0 36-1.5t33.5-3.5 29.5-4.5 24.5-5 18.5-4.5l12-3 5-2q13-5 26 2 12 7 15 21z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var OrgLinks = function OrgLinks(_ref17) {
-  var label = _ref17.label,
-      rest = _objectWithoutPropertiesLoose(_ref17, _excluded17);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M1792 1248v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V960q0-52 38-90t90-38h512V640h-96q-40 0-68-28t-28-68V224q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Undo = function Undo(_ref18) {
-  var label = _ref18.label,
-      rest = _objectWithoutPropertiesLoose(_ref18, _excluded18);
-
-  return React.createElement("svg", Object.assign({
-    width: 14,
-    height: 14,
-    viewBox: "0 0 1792 1792"
-  }, rest), React.createElement("path", {
-    d: "M1664 896q0 156-61 298t-164 245-245 164-298 61q-172 0-327-72.5T305 1387q-7-10-6.5-22.5t8.5-20.5l137-138q10-9 25-9 16 2 23 12 73 95 179 147t225 52q104 0 198.5-40.5T1258 1258t109.5-163.5T1408 896t-40.5-198.5T1258 534t-163.5-109.5T896 384q-98 0-188 35.5T548 521l137 138q31 30 14 69-17 40-59 40H192q-26 0-45-19t-19-45V256q0-42 40-59 39-17 69 14l130 129q107-101 244.5-156.5T896 128q156 0 298 61t245 164 164 245 61 298z"
-  }), React.createElement("span", {
-    className: srOnly
-  }, label));
-};
-var Redo = function Redo(_ref19) {
-  var label = _ref19.label,
-      rest = _objectWithoutPropertiesLoose(_ref19, _excluded19);
-
   return React.createElement("svg", Object.assign({
     width: 14,
     height: 14,
@@ -476,36 +341,21 @@ var Redo = function Redo(_ref19) {
 };
 
 var HeadingSelector = function HeadingSelector(props) {
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setOpen = _useState[1];
-
   var handleMenuClick = function handleMenuClick(heading) {
     props.onSelect(heading);
-    setOpen(false);
   };
 
-  return React.createElement(Dropdown, {
-    isOpen: isOpen,
-    onClose: function onClose() {
-      return setOpen(false);
-    },
-    toggleElement: React.cloneElement(props.children, {
-      onClick: function onClick() {
-        return setOpen(!isOpen);
-      }
-    })
-  }, React.createElement(DropdownList, null, React.createElement(DropdownListItem, {
+  return React.createElement(Menu, null, React.createElement(Menu.Trigger, null, props.children), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
     testId: "markdown-action-button-heading-h1",
     onClick: function onClick() {
       return handleMenuClick('h1');
     }
-  }, "Heading 1"), React.createElement(DropdownListItem, {
+  }, "Heading 1"), React.createElement(Menu.Item, {
     testId: "markdown-action-button-heading-h2",
     onClick: function onClick() {
       return handleMenuClick('h2');
     }
-  }, "Heading 2"), React.createElement(DropdownListItem, {
+  }, "Heading 2"), React.createElement(Menu.Item, {
     testId: "markdown-action-button-heading-h3",
     onClick: function onClick() {
       return handleMenuClick('h3');
@@ -518,11 +368,11 @@ var InsertLinkSelector = function InsertLinkSelector(props) {
     return React.createElement(MultipleMediaContextMenu, Object.assign({}, props));
   } else {
     return React.createElement(Button, {
-      disabled: props.disabled,
-      icon: "Asset",
+      isDisabled: props.disabled,
+      startIcon: React.createElement(AssetIcon, null),
       testId: "markdownEditor.linkExistingAssets",
       size: "small",
-      buttonType: "muted",
+      variant: "secondary",
       onClick: function onClick() {
         props.onSelectExisting();
       }
@@ -531,45 +381,29 @@ var InsertLinkSelector = function InsertLinkSelector(props) {
 };
 
 var MultipleMediaContextMenu = function MultipleMediaContextMenu(props) {
-  var _useState = useState(false),
-      isOpen = _useState[0],
-      setOpen = _useState[1];
-
-  var handleMenuClick = function handleMenuClick(fn) {
-    fn();
-    setOpen(false);
-  };
-
-  return React.createElement(Dropdown, {
-    isOpen: isOpen,
-    position: "bottom-right",
-    onClose: function onClose() {
-      return setOpen(false);
-    },
-    toggleElement: React.createElement(Button, {
-      disabled: props.disabled,
-      icon: "Asset",
-      testId: "markdownEditor.insertMediaDropdownTrigger",
-      size: "small",
-      buttonType: "muted",
-      indicateDropdown: true,
-      onClick: function onClick() {
-        return setOpen(!isOpen);
-      }
-    }, "Insert media")
-  }, React.createElement(DropdownList, null, React.createElement(DropdownListItem, {
+  return React.createElement(Menu, {
+    placement: "bottom-end"
+  }, React.createElement(Menu.Trigger, null, React.createElement(Button, {
+    endIcon: React.createElement(ChevronDownIcon, null),
+    isDisabled: props.disabled,
+    startIcon: React.createElement(AssetIcon, null),
+    testId: "markdownEditor.insertMediaDropdownTrigger",
+    size: "small",
+    variant: "secondary"
+  }, "Insert media")), React.createElement(Menu.List, null, React.createElement(Menu.Item, {
     testId: "markdownEditor.uploadAssetsAndLink",
     onClick: function onClick() {
-      return handleMenuClick(props.onAddNew);
+      return props.onAddNew();
     }
-  }, "Add new media and link"), React.createElement(DropdownListItem, {
+  }, "Add new media and link"), React.createElement(Menu.Item, {
     testId: "markdownEditor.linkExistingAssets",
     onClick: function onClick() {
-      return handleMenuClick(props.onSelectExisting);
+      return props.onSelectExisting();
     }
   }, "Link existing media")));
 };
 
+var _excluded$1 = ["tooltip", "onClick", "children", "className", "variant", "tooltipPlace", "isDisabled"];
 var styles$1 = {
   root: /*#__PURE__*/css({
     position: 'relative',
@@ -579,18 +413,11 @@ var styles$1 = {
     padding: tokens.spacingXs,
     borderTopLeftRadius: tokens.borderRadiusSmall
   }),
-  actionsRow: /*#__PURE__*/css({
-    display: 'flex',
-    justifyContent: 'space-between'
-  }),
-  additionalRow: /*#__PURE__*/css({
-    marginTop: tokens.spacingXs
-  }),
-  actionsGroup: /*#__PURE__*/css({
-    display: 'flex'
-  }),
   button: /*#__PURE__*/css({
-    minWidth: '46px'
+    height: '30px',
+    width: '36px',
+    marginLeft: tokens.spacing2Xs,
+    marginRight: tokens.spacing2Xs
   }),
   icon: /*#__PURE__*/css({
     fill: tokens.gray700,
@@ -606,42 +433,39 @@ var styles$1 = {
     zIndex: /*#__PURE__*/Number(tokens.zIndexTooltip)
   })
 };
-
-function ToolbarButton(props) {
+var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var tooltip = props.tooltip,
-      _props$onClick = props.onClick,
-      _onClick = _props$onClick === void 0 ? noop : _props$onClick,
-      testId = props.testId,
+      onClick = props.onClick,
       children = props.children,
       className = props.className,
-      _props$buttonType = props.buttonType,
-      buttonType = _props$buttonType === void 0 ? 'naked' : _props$buttonType,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? 'transparent' : _props$variant,
       _props$tooltipPlace = props.tooltipPlace,
       tooltipPlace = _props$tooltipPlace === void 0 ? 'top' : _props$tooltipPlace,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled;
+      _props$isDisabled = props.isDisabled,
+      isDisabled = _props$isDisabled === void 0 ? false : _props$isDisabled,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
 
-  var button = React.createElement(Button, {
+  var button = React.createElement(Button, Object.assign({}, otherProps, {
+    ref: ref,
     className: cx(styles$1.button, className),
-    disabled: disabled,
-    onClick: function onClick() {
-      _onClick();
-    },
-    testId: testId,
-    buttonType: buttonType,
+    isDisabled: isDisabled,
+    onClick: onClick,
+    variant: variant,
     size: "small"
-  }, children);
+  }), children);
 
   if (tooltip) {
     return React.createElement(Tooltip, {
       className: styles$1.tooltip,
-      place: tooltipPlace,
+      placement: tooltipPlace,
       content: tooltip
     }, button);
   }
 
   return button;
-}
+});
+ToolbarButton.displayName = 'ToolbarButton';
 
 function MainButtons(props) {
   var tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
@@ -652,66 +476,66 @@ function MainButtons(props) {
       }
     }
   }, React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-heading",
     tooltip: "Headings",
     tooltipPlace: tooltipPlace
-  }, React.createElement(Heading, {
-    label: "Headings",
+  }, React.createElement(HeadingIcon, {
+    "aria-label": "Headings",
     className: styles$1.icon
   }))), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-bold",
     tooltip: "Bold",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.bold
-  }, React.createElement(Bold, {
-    label: "Bold",
+  }, React.createElement(FormatBoldIcon, {
+    "aria-label": "Bold",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-italic",
     tooltip: "Italic",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.italic
-  }, React.createElement(Italic, {
-    label: "Italic",
+  }, React.createElement(FormatItalicIcon, {
+    "aria-label": "Italic",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-quote",
     tooltip: "Quote",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.quote
-  }, React.createElement(Quote, {
-    label: "Quote",
+  }, React.createElement(QuoteIcon, {
+    "aria-label": "Quote",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-ul",
     tooltip: "Unordered list",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.ul
-  }, React.createElement(List, {
-    label: "Unordered list",
+  }, React.createElement(ListBulletedIcon, {
+    "aria-label": "Unordered list",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-ol",
     tooltip: "Ordered list",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.ol
-  }, React.createElement(ListOl, {
-    label: "Ordered list",
+  }, React.createElement(ListNumberedIcon, {
+    "aria-label": "Ordered list",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-link",
     tooltip: "Link",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.insertLink
-  }, React.createElement(Link, {
-    label: "Link",
+  }, React.createElement(LinkIcon, {
+    "aria-label": "Link",
     className: styles$1.icon
   })));
 }
@@ -719,7 +543,7 @@ function MainButtons(props) {
 function AdditionalButtons(props) {
   var tooltipPlace = props.mode === 'zen' ? 'bottom' : 'top';
   return React.createElement(React.Fragment, null, React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-strike",
     tooltip: "Strike out",
     tooltipPlace: tooltipPlace,
@@ -728,25 +552,25 @@ function AdditionalButtons(props) {
     label: "Strike out",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-code",
     tooltip: "Code block",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.code
-  }, React.createElement(Code, {
-    label: "Code block",
+  }, React.createElement(CodeIcon, {
+    "aria-label": "Code block",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-hr",
     tooltip: "Horizontal rule",
     tooltipPlace: tooltipPlace,
     onClick: props.actions.simple.hr
-  }, React.createElement(Hr, {
-    label: "Horizontal rule",
+  }, React.createElement(HorizontalRuleIcon, {
+    "aria-label": "Horizontal rule",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-indent",
     tooltip: "Increase indentation",
     tooltipPlace: tooltipPlace,
@@ -755,7 +579,7 @@ function AdditionalButtons(props) {
     label: "Increase indentation",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-dedent",
     tooltip: "Decrease indentation",
     tooltipPlace: tooltipPlace,
@@ -764,7 +588,7 @@ function AdditionalButtons(props) {
     label: "Decrease indentation",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-embed",
     tooltip: "Embed external content",
     tooltipPlace: tooltipPlace,
@@ -773,7 +597,7 @@ function AdditionalButtons(props) {
     label: "Embed external content",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-table",
     tooltip: "Insert table",
     tooltipPlace: tooltipPlace,
@@ -782,7 +606,7 @@ function AdditionalButtons(props) {
     label: "Insert table",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-special",
     tooltip: "Insert special character",
     tooltipPlace: tooltipPlace,
@@ -791,7 +615,7 @@ function AdditionalButtons(props) {
     label: "Insert special character",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-organizeLinks",
     tooltip: "Organize links",
     tooltipPlace: tooltipPlace,
@@ -800,7 +624,7 @@ function AdditionalButtons(props) {
     label: "Organize links",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-undo",
     tooltip: "Undo",
     tooltipPlace: tooltipPlace,
@@ -809,7 +633,7 @@ function AdditionalButtons(props) {
     label: "Undo",
     className: styles$1.icon
   })), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-redo",
     tooltip: "Redo",
     tooltipPlace: tooltipPlace,
@@ -827,59 +651,49 @@ function DefaultMarkdownToolbar(props) {
 
   return React.createElement("div", {
     className: styles$1.root
-  }, React.createElement("div", {
-    className: styles$1.actionsRow
-  }, React.createElement("div", {
-    className: styles$1.actionsGroup
-  }, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+  }, React.createElement(Flex, {
+    justifyContent: "space-between"
+  }, React.createElement(Flex, null, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(ToolbarButton, {
+    isDisabled: props.disabled,
     testId: "markdown-action-button-toggle-additional",
     tooltip: showAdditional ? 'Hide additional actions' : 'More actions',
     onClick: function onClick() {
       setShowAdditional(!showAdditional);
     }
-  }, React.createElement(Icon, {
-    className: styles$1.icon,
-    icon: "MoreHorizontal"
-  }))), React.createElement("div", {
-    className: styles$1.actionsGroup
-  }, React.createElement(InsertLinkSelector, {
+  }, React.createElement(MoreHorizontalIcon, {
+    className: styles$1.icon
+  }))), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
     disabled: props.disabled,
     onSelectExisting: props.actions.linkExistingMedia,
     onAddNew: props.actions.addNewMedia,
     canAddNew: props.canUploadAssets
   }), React.createElement(ToolbarButton, {
-    disabled: props.disabled,
+    isDisabled: props.disabled,
     testId: "markdown-action-button-zen",
-    buttonType: "muted",
+    variant: "secondary",
     onClick: props.actions.openZenMode,
     className: styles$1.zenButton
   }, React.createElement(Zen, {
     label: "Expand",
     className: styles$1.icon
-  })))), showAdditional && React.createElement("div", {
-    className: cx(styles$1.actionsRow, styles$1.additionalRow)
-  }, React.createElement("div", {
-    className: styles$1.actionsGroup
-  }, React.createElement(AdditionalButtons, Object.assign({}, props)))));
+  })))), showAdditional && React.createElement(Flex, {
+    justifyContent: "space-between",
+    marginTop: "spacingXs"
+  }, React.createElement(Flex, null, React.createElement(AdditionalButtons, Object.assign({}, props)))));
 }
 function ZenMarkdownToolbar(props) {
   return React.createElement("div", {
     className: styles$1.root
-  }, React.createElement("div", {
-    className: styles$1.actionsRow
-  }, React.createElement("div", {
-    className: styles$1.actionsGroup
-  }, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(AdditionalButtons, Object.assign({}, props))), React.createElement("div", {
-    className: styles$1.actionsGroup
-  }, React.createElement(InsertLinkSelector, {
+  }, React.createElement(Flex, {
+    justifyContent: "space-between"
+  }, React.createElement(Flex, null, React.createElement(MainButtons, Object.assign({}, props)), React.createElement(AdditionalButtons, Object.assign({}, props))), React.createElement(Flex, null, React.createElement(InsertLinkSelector, {
     disabled: props.disabled,
     onSelectExisting: props.actions.linkExistingMedia,
     onAddNew: props.actions.addNewMedia,
     canAddNew: props.canUploadAssets
   }), React.createElement(Button, {
     testId: "markdown-action-button-zen-close",
-    buttonType: "muted",
+    variant: "secondary",
     size: "small",
     className: cx(styles$1.zenButton, styles$1.zenButtonPressed),
     onClick: function onClick() {
@@ -903,6 +717,8 @@ var userAgent = /*#__PURE__*/get(window, 'navigator.userAgent', '');
 var platform = /*#__PURE__*/get(window, 'navigator.platform', '');
 var ctrlKey = 'Ctrl';
 var tests = {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore ignore missing MSStream
   ios: /*#__PURE__*/ /(iphone os|ipad|iphone|ipod)/i.test(userAgent) && !window.MSStream
 };
 
@@ -1861,8 +1677,10 @@ var styles$3 = {
 };
 function MarkdownHelp(props) {
   return React.createElement(Paragraph, {
+    marginBottom: "none",
     className: styles$3.help
   }, "Format your text like a pro with the", ' ', React.createElement(TextLink, {
+    as: "button",
     testId: "open-markdown-cheatsheet-button",
     onClick: function onClick() {
       props.onClick();
@@ -1945,7 +1763,7 @@ var styles$4 = {
   })
 };
 var CheatsheetModalDialog = function CheatsheetModalDialog() {
-  return React.createElement(Modal.Content, {
+  return React.createElement(ModalContent, {
     testId: "markdown-cheatsheet-dialog-content"
   }, React.createElement("div", {
     className: styles$4.flexColumnContainer
@@ -1953,22 +1771,25 @@ var CheatsheetModalDialog = function CheatsheetModalDialog() {
     className: cx(styles$4.flexColumn, styles$4.verticalDivider)
   }, React.createElement("div", {
     className: styles$4.helpItem
-  }, React.createElement(Heading$1, {
-    element: "h1",
+  }, React.createElement(Heading, {
+    marginBottom: "none",
+    as: "h1",
     className: cx(styles$4.preview, styles$4.h1)
   }, "H1"), React.createElement("div", {
     className: styles$4.markup
   }, "# heading")), React.createElement("div", {
     className: styles$4.helpItem
-  }, React.createElement(Heading$1, {
-    element: "h2",
+  }, React.createElement(Heading, {
+    marginBottom: "none",
+    as: "h2",
     className: cx(styles$4.preview, styles$4.h2)
   }, "H2"), React.createElement("div", {
     className: styles$4.markup
   }, "## heading")), React.createElement("div", {
     className: styles$4.helpItem
-  }, React.createElement(Heading$1, {
-    element: "h3",
+  }, React.createElement(Heading, {
+    marginBottom: "none",
+    as: "h3",
     className: cx(styles$4.preview, styles$4.h3)
   }, "H3"), React.createElement("div", {
     className: styles$4.markup
@@ -1993,6 +1814,7 @@ var CheatsheetModalDialog = function CheatsheetModalDialog() {
   }, "~~text~~")), React.createElement("div", {
     className: styles$4.helpItem
   }, React.createElement(TextLink, {
+    as: "button",
     className: styles$4.preview
   }, "Link"), React.createElement("div", {
     className: styles$4.markup
@@ -2047,7 +1869,7 @@ var openCheatsheetModal = function openCheatsheetModal(dialogs) {
   return dialogs.openCurrent({
     title: 'Markdown formatting help',
     width: 'large',
-    minHeight: '425px',
+    minHeight: '415px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: {
@@ -2056,7 +1878,7 @@ var openCheatsheetModal = function openCheatsheetModal(dialogs) {
   });
 };
 
-var _excluded$1 = ["Embedly", "children"];
+var _excluded$2 = ["Embedly", "children"];
 
 var _templateObject$1;
 var styles$5 = {
@@ -2079,7 +1901,7 @@ var styles$5 = {
 function MarkdownLink(props) {
   var Embedly = props.Embedly,
       children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$1);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
 
   if (props.className === 'embedly-card' && Embedly) {
     return React.createElement(Embedly, {
@@ -2878,14 +2700,6 @@ function isValidUrl(value) {
   return urlRegex.test(value);
 }
 
-var styles$7 = {
-  controlsContainer: /*#__PURE__*/css({
-    display: 'flex',
-    button: {
-      marginRight: tokens.spacingM
-    }
-  })
-};
 var InsertLinkModal = function InsertLinkModal(_ref) {
   var selectedText = _ref.selectedText,
       onClose = _ref.onClose;
@@ -2919,7 +2733,7 @@ var InsertLinkModal = function InsertLinkModal(_ref) {
       mainInputRef.current.focus();
     }
   }, [mainInputRef]);
-  return React.createElement(Modal.Content, {
+  return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
     testId: "insert-link-modal"
   }, React.createElement(Form, {
     onSubmit: function onSubmit() {
@@ -2929,50 +2743,47 @@ var InsertLinkModal = function InsertLinkModal(_ref) {
         title: title
       });
     }
-  }, React.createElement(TextField, {
-    value: text,
-    name: "link-text",
+  }, React.createElement(FormControl, {
     id: "link-text-field",
-    labelText: "Link text",
+    isDisabled: Boolean(selectedText)
+  }, React.createElement(FormControl.Label, null, "Link text"), React.createElement(TextInput, {
+    name: "link-text",
+    value: text,
     onChange: function onChange(e) {
       setText(e.target.value);
     },
-    textInputProps: {
-      disabled: Boolean(selectedText),
-      testId: 'link-text-field'
-    }
-  }), React.createElement(TextField, {
-    value: url,
-    name: "target-url",
+    testId: "link-text-field"
+  })), React.createElement(FormControl, {
     id: "target-url-field",
-    labelText: "Target URL",
-    helpText: "Include protocol (e.g. https://)",
+    isInvalid: touched && !urlIsValid
+  }, React.createElement(FormControl.Label, null, "Target URL"), React.createElement(TextInput, {
+    name: "target-url",
+    value: url,
     onChange: function onChange(e) {
       setUrl(e.target.value);
       setTouched(true);
     },
-    validationMessage: touched && !urlIsValid ? 'Invalid URL' : '',
-    textInputProps: {
-      placeholder: 'https://',
-      maxLength: 2100,
-      testId: 'target-url-field',
-      inputRef: mainInputRef
-    }
-  }), React.createElement(TextField, {
-    value: title,
+    placeholder: "https://",
+    maxLength: 2100,
+    testId: "target-url-field",
+    ref: mainInputRef
+  }), React.createElement(FormControl.HelpText, null, "Include protocol (e.g. https://)"), touched && !urlIsValid && React.createElement(FormControl.ValidationMessage, null, "Invalid URL")), React.createElement(FormControl, {
+    id: "link-title-field"
+  }, React.createElement(FormControl.Label, null, "Link title"), React.createElement(TextInput, {
     name: "link-title",
-    id: "link-title-field",
-    labelText: "Link title",
-    helpText: "Recommended for accessibility",
+    value: title,
     onChange: function onChange(e) {
       setTitle(e.target.value);
     },
-    textInputProps: {
-      testId: 'link-title-field'
-    }
-  })), React.createElement("div", {
-    className: styles$7.controlsContainer
-  }, React.createElement(Button, {
+    testId: "link-title-field"
+  }), React.createElement(FormControl.HelpText, null, "Recommended for accessibility")))), React.createElement(ModalControls, null, React.createElement(Button, {
+    testId: "insert-link-cancel",
+    onClick: function onClick() {
+      return onClose(false);
+    },
+    variant: "secondary",
+    size: "small"
+  }, "Cancel"), React.createElement(Button, {
     testId: "insert-link-confirm",
     onClick: function onClick() {
       onInsert({
@@ -2981,21 +2792,16 @@ var InsertLinkModal = function InsertLinkModal(_ref) {
         title: title
       });
     },
-    disabled: !urlIsValid,
-    buttonType: "positive"
-  }, "Insert"), React.createElement(Button, {
-    testId: "insert-link-cancel",
-    onClick: function onClick() {
-      return onClose(false);
-    },
-    buttonType: "muted"
-  }, "Cancel")));
+    isDisabled: !urlIsValid,
+    variant: "positive",
+    size: "small"
+  }, "Insert")));
 };
 var openInsertLinkDialog = function openInsertLinkDialog(dialogs, params) {
   return dialogs.openCurrent({
     title: 'Insert link',
     width: 'large',
-    minHeight: '441px',
+    minHeight: '410px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: _extends({
@@ -3168,7 +2974,7 @@ var specialCharacters = [{
   desc: 'diamond'
 }];
 
-var styles$8 = {
+var styles$7 = {
   buttonPanel: /*#__PURE__*/css({
     display: 'flex',
     flexWrap: 'wrap'
@@ -3190,20 +2996,6 @@ var styles$8 = {
   button: /*#__PURE__*/css({
     marginTop: tokens.spacingM,
     marginRight: tokens.spacingS
-  }),
-  charContainer: /*#__PURE__*/css({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    marginBottom: tokens.spacingM
-  }),
-  selectedCharacter: /*#__PURE__*/css({
-    fontSize: tokens.fontSize3Xl,
-    margin: 'auto'
-  }),
-  selectedCharacterDesc: /*#__PURE__*/css({
-    fontSize: tokens.fontSizeM,
-    margin: 'auto'
   })
 };
 var SpecialCharacterModalDialog = function SpecialCharacterModalDialog(_ref) {
@@ -3213,54 +3005,59 @@ var SpecialCharacterModalDialog = function SpecialCharacterModalDialog(_ref) {
       selectedCharacter = _useState[0],
       setSelectedCharacter = _useState[1];
 
-  return React.createElement(Modal.Content, {
+  return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
     testId: "insert-special-character-modal"
-  }, React.createElement("div", {
-    className: styles$8.charContainer
-  }, React.createElement(DisplayText, {
-    element: "p",
-    className: styles$8.selectedCharacter
-  }, String.fromCharCode(selectedCharacter.code)), React.createElement(DisplayText, {
-    element: "p",
-    className: styles$8.selectedCharacterDesc
+  }, React.createElement(Flex, {
+    flexDirection: "column",
+    alignItems: "center"
+  }, React.createElement(Text, {
+    as: "div",
+    lineHeight: "lineHeight3Xl",
+    fontSize: "fontSize3Xl",
+    marginBottom: "spacingS"
+  }, String.fromCharCode(selectedCharacter.code)), React.createElement(Text, {
+    as: "div",
+    marginBottom: "spacingS"
   }, selectedCharacter.desc)), React.createElement("div", {
-    className: styles$8.buttonPanel
+    className: styles$7.buttonPanel
   }, specialCharacters.map(function (_char) {
     return React.createElement("div", {
       key: _char.code
     }, React.createElement(Tooltip, {
-      className: styles$8.tooltip,
+      className: styles$7.tooltip,
       content: _char.desc
     }, React.createElement(Button, {
       testId: "special-character-button",
       isActive: _char.code === selectedCharacter.code,
-      className: styles$8.charButton,
-      buttonType: "naked",
+      className: styles$7.charButton,
+      variant: "transparent",
       onClick: function onClick() {
         return setSelectedCharacter(_char);
       }
     }, String.fromCharCode(_char.code))));
-  })), React.createElement(Button, {
-    className: styles$8.button,
-    testId: "insert-character-confirm",
-    onClick: function onClick() {
-      return onClose(String.fromCharCode(selectedCharacter.code));
-    },
-    buttonType: "positive"
-  }, "Insert selected"), React.createElement(Button, {
+  }))), React.createElement(ModalControls, null, React.createElement(Button, {
     testId: "insert-character-cancel",
-    className: styles$8.button,
+    className: styles$7.button,
     onClick: function onClick() {
       return onClose(false);
     },
-    buttonType: "muted"
-  }, "Cancel"));
+    variant: "secondary",
+    size: "small"
+  }, "Cancel"), React.createElement(Button, {
+    className: styles$7.button,
+    testId: "insert-character-confirm",
+    onClick: function onClick() {
+      return onClose(String.fromCharCode(selectedCharacter.code));
+    },
+    variant: "positive",
+    size: "small"
+  }, "Insert selected")));
 };
 var openInsertSpecialCharacter = function openInsertSpecialCharacter(dialogs) {
   return dialogs.openCurrent({
     title: 'Insert special character',
     width: 'large',
-    minHeight: '615px',
+    minHeight: '600px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: {
@@ -3269,13 +3066,6 @@ var openInsertSpecialCharacter = function openInsertSpecialCharacter(dialogs) {
   });
 };
 
-var styles$9 = {
-  controlButton: /*#__PURE__*/css({
-    button: {
-      marginRight: tokens.spacingM
-    }
-  })
-};
 var InsertTableModal = function InsertTableModal(_ref) {
   var onClose = _ref.onClose;
   var mainInputRef = useRef(null);
@@ -3297,50 +3087,51 @@ var InsertTableModal = function InsertTableModal(_ref) {
       mainInputRef.current.focus();
     }
   }, [mainInputRef]);
-  return React.createElement(Modal.Content, {
+  return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
     testId: "insert-table-modal"
-  }, React.createElement(Form, null, React.createElement(TextField, {
-    labelText: "Number of rows",
-    value: rows.toString(),
+  }, React.createElement(Form, null, React.createElement(FormControl, {
     id: "insert-table-rows-number-field",
+    isRequired: true,
+    isInvalid: !rowsAreValid
+  }, React.createElement(FormControl.Label, null, "Number of rows"), React.createElement(TextInput, {
     name: "rows",
+    value: rows.toString(),
     onChange: function onChange(e) {
       return setRows(Number(e.target.value));
     },
-    textInputProps: {
-      testId: 'insert-table-rows-number-field',
-      min: 2,
-      max: 100,
-      pattern: '[1-9][0-9]*',
-      type: 'number',
-      width: 'small',
-      autoComplete: 'off',
-      inputRef: mainInputRef
-    },
-    validationMessage: !rowsAreValid ? 'Should be between 2 and 100' : '',
-    required: true
-  }), React.createElement(TextField, {
-    labelText: "Number of columns",
-    value: cols.toString(),
+    testId: "insert-table-rows-number-field",
+    min: 2,
+    max: 100,
+    pattern: "[1-9][0-9]*",
+    type: "number",
+    width: "small",
+    autoComplete: "off",
+    ref: mainInputRef
+  }), !rowsAreValid && React.createElement(FormControl.ValidationMessage, null, "Should be between 2 and 100")), React.createElement(FormControl, {
     id: "insert-table-columns-number-field",
+    isRequired: true,
+    isInvalid: !colsAreValid
+  }, React.createElement(FormControl.Label, null, "Number of columns"), React.createElement(TextInput, {
     name: "columns",
+    value: cols.toString(),
     onChange: function onChange(e) {
       return setColumns(Number(e.target.value));
     },
-    textInputProps: {
-      testId: 'insert-table-columns-number-field',
-      min: 1,
-      max: 100,
-      pattern: '[1-9][0-9]*',
-      type: 'number',
-      width: 'small',
-      autoComplete: 'off'
+    testId: "insert-table-columns-number-field",
+    min: 1,
+    max: 100,
+    pattern: "[1-9][0-9]*",
+    type: "number",
+    width: "small",
+    autoComplete: "off"
+  }), !colsAreValid && React.createElement(FormControl.ValidationMessage, null, "Should be between 1 and 100")))), React.createElement(ModalControls, null, React.createElement(Button, {
+    testId: "insert-table-cancel",
+    onClick: function onClick() {
+      return onClose(false);
     },
-    validationMessage: !colsAreValid ? 'Should be between 1 and 100' : '',
-    required: true
-  })), React.createElement("div", {
-    className: styles$9.controlButton
-  }, React.createElement(Button, {
+    variant: "secondary",
+    size: "small"
+  }, "Cancel"), React.createElement(Button, {
     testId: "insert-table-confirm",
     onClick: function onClick() {
       return onClose({
@@ -3348,21 +3139,16 @@ var InsertTableModal = function InsertTableModal(_ref) {
         cols: cols
       });
     },
-    buttonType: "positive",
-    disabled: !rowsAreValid || !colsAreValid
-  }, "Insert"), React.createElement(Button, {
-    testId: "insert-table-cancel",
-    onClick: function onClick() {
-      return onClose(false);
-    },
-    buttonType: "muted"
-  }, "Cancel")));
+    variant: "positive",
+    size: "small",
+    isDisabled: !rowsAreValid || !colsAreValid
+  }, "Insert")));
 };
 var openInsertTableDialog = function openInsertTableDialog(dialogs) {
   return dialogs.openCurrent({
     title: 'Insert table',
     width: 'medium',
-    minHeight: '290px',
+    minHeight: '260px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: {
@@ -3371,7 +3157,7 @@ var openInsertTableDialog = function openInsertTableDialog(dialogs) {
   });
 };
 
-var styles$a = {
+var styles$8 = {
   widthFiledGroup: /*#__PURE__*/css({
     display: 'flex',
     flexWrap: 'nowrap',
@@ -3384,12 +3170,6 @@ var styles$a = {
   }),
   radioButton: /*#__PURE__*/css({
     marginLeft: tokens.spacingM
-  }),
-  controlsContainer: /*#__PURE__*/css({
-    display: 'flex',
-    button: {
-      marginRight: tokens.spacingM
-    }
   })
 };
 
@@ -3440,87 +3220,85 @@ var EmbedExternalContentModal = function EmbedExternalContentModal(_ref2) {
       mainInputRef.current.focus();
     }
   }, [mainInputRef]);
-  return React.createElement(Modal.Content, {
+  return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
     testId: "embed-external-dialog"
-  }, React.createElement(Form, null, React.createElement(TextField, {
-    value: url,
+  }, React.createElement(Form, null, React.createElement(FormControl, {
+    id: "external-link-url-field",
+    isRequired: true,
+    isInvalid: !urlIsValid
+  }, React.createElement(FormControl.Label, null, "Content URL"), React.createElement(TextInput, {
     name: "external-link-url",
+    value: url,
     onChange: function onChange(e) {
       var value = e.target.value;
       setUrl(value);
       setUrlValidity(isValidUrl(value));
     },
-    labelText: "Content URL",
-    id: "external-link-url-field",
-    helpText: "Include protocol (e.g. https://)",
-    textInputProps: {
-      testId: 'external-link-url-field',
-      placeholder: 'https://example.com',
-      inputRef: mainInputRef
-    },
-    required: true,
-    validationMessage: urlIsValid ? '' : 'URL is invalid'
-  }), React.createElement(TextLink, {
+    testId: "external-link-url-field",
+    placeholder: "https://example.com",
+    ref: mainInputRef
+  }), React.createElement(FormControl.HelpText, null, "Include protocol (e.g. https://)"), !urlIsValid && React.createElement(FormControl.ValidationMessage, null, "URL is invalid")), React.createElement(TextLink, {
     href: "http://embed.ly/providers",
     target: "_blank",
     rel: "noopener noreferrer"
   }, "Supported sources"), React.createElement("div", {
-    className: styles$a.widthFiledGroup
-  }, React.createElement(TextField, {
-    value: width,
+    className: styles$8.widthFiledGroup
+  }, React.createElement(FormControl, {
     id: "embedded-content-width",
+    isRequired: true,
+    isInvalid: !isWidthValid(Number(width), selectedUnit)
+  }, React.createElement(FormControl.Label, null, "Width"), React.createElement(TextInput, {
+    value: width,
     name: "embedded-content-width",
+    testId: "embedded-content-width",
+    type: "number",
+    width: "small",
     onChange: function onChange(e) {
       return setWidth(e.target.value);
-    },
-    labelText: "Width",
-    textInputProps: {
-      testId: 'embedded-content-width',
-      type: 'number',
-      width: 'small'
-    },
-    required: true,
-    validationMessage: isWidthValid(Number(width), selectedUnit) ? '' : 'Should be equal or less then 100'
-  }), React.createElement("div", {
-    className: styles$a.radioButtonGroup
-  }, React.createElement(RadioButtonField, {
-    className: styles$a.radioButton,
+    }
+  }), !isWidthValid(Number(width), selectedUnit) && React.createElement(FormControl.ValidationMessage, null, "Should be equal or less then 100")), React.createElement("div", {
+    className: styles$8.radioButtonGroup
+  }, React.createElement(Radio, {
     id: "unit-option-percent",
-    checked: selectedUnit === 'percent',
-    labelText: "percent",
     value: "percent",
+    isChecked: selectedUnit === 'percent',
     onChange: function onChange() {
       return setUnit('percent');
     },
-    labelIsLight: true
-  }), React.createElement(RadioButtonField, {
-    className: styles$a.radioButton,
+    className: styles$8.radioButton
+  }, "percent"), React.createElement(Radio, {
     id: "unit-option-pixels",
-    checked: selectedUnit === 'px',
-    labelText: "pixels",
     value: "pixels",
+    isChecked: selectedUnit === 'px',
     onChange: function onChange() {
       return setUnit('px');
     },
-    labelIsLight: true
-  }))), React.createElement(CheckboxField, {
-    value: "Yes",
-    testId: "attach-social-checkbox",
+    className: styles$8.radioButton
+  }, "pixels"))), React.createElement(Checkbox, {
     id: "attach-social-checkbox",
     name: "attach-social-checkbox",
-    checked: attachSocial,
+    value: "Yes",
+    isChecked: attachSocial,
     onChange: function onChange() {
       return setAttachSocial(!attachSocial);
     },
-    labelText: "Attach social sharing links to this element",
-    labelIsLight: true
-  }), React.createElement(HelpText, null, "To enable this embedded content in your application make sure to add the\xA0", React.createElement(TextLink, {
+    testId: "attach-social-checkbox"
+  }, "Attach social sharing links to this element"), React.createElement(Text, {
+    as: "p",
+    fontColor: "gray500",
+    marginTop: "spacingXs"
+  }, "To enable this embedded content in your application make sure to add the\xA0", React.createElement(TextLink, {
     href: "http://embed.ly/docs/products/cards",
     target: "_blank",
     rel: "noopener noreferrer"
-  }, "Embedly's platform.js"), "\xA0on your development environment")), React.createElement("div", {
-    className: styles$a.controlsContainer
-  }, React.createElement(Button, {
+  }, "Embedly's platform.js"), "\xA0on your development environment"))), React.createElement(ModalControls, null, React.createElement(Button, {
+    testId: "emded-external-cancel",
+    onClick: function onClick() {
+      return onClose(false);
+    },
+    variant: "secondary",
+    size: "small"
+  }, "Cancel"), React.createElement(Button, {
     testId: "embed-external-confirm",
     onClick: function onClick() {
       return onClose(makeEmbedlyLink({
@@ -3530,20 +3308,15 @@ var EmbedExternalContentModal = function EmbedExternalContentModal(_ref2) {
         attachSocial: attachSocial
       }));
     },
-    buttonType: "positive"
-  }, "Insert"), React.createElement(Button, {
-    testId: "emded-external-cancel",
-    onClick: function onClick() {
-      return onClose(false);
-    },
-    buttonType: "muted"
-  }, "Cancel")));
+    variant: "positive",
+    size: "small"
+  }, "Insert")));
 };
 var openEmbedExternalContentDialog = function openEmbedExternalContentDialog(dialogs) {
   return dialogs.openCurrent({
     title: 'Embed external content',
     width: 'large',
-    minHeight: '475px',
+    minHeight: '435px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: {
@@ -3552,53 +3325,45 @@ var openEmbedExternalContentDialog = function openEmbedExternalContentDialog(dia
   });
 };
 
-var styles$b = {
-  controlButton: /*#__PURE__*/css({
-    marginTop: tokens.spacingL,
-    button: {
-      marginRight: tokens.spacingM
-    }
-  })
-};
 var ConfirmInsertAssetModalDialog = function ConfirmInsertAssetModalDialog(_ref) {
   var onClose = _ref.onClose,
       assets = _ref.assets,
       locale = _ref.locale;
   var localesNumber = assets.length;
-  return React.createElement(Modal.Content, {
+  return React.createElement(React.Fragment, null, React.createElement(ModalContent, {
     testId: "confirm-insert-asset"
-  }, React.createElement(Typography, null, React.createElement(Paragraph, null, localesNumber === 1 ? "Link asset with missing file for locale " + locale : "Link assets with missing files for locale " + locale), React.createElement(Paragraph, null, localesNumber === 1 ? 'Do you want to link to the file in its fallback locale?' : 'Do you want to link to the files in their fallback locales?')), React.createElement(EntityList, null, assets.map(function (_ref2) {
+  }, React.createElement(Paragraph, null, localesNumber === 1 ? "Link asset with missing file for locale " + locale : "Link assets with missing files for locale " + locale), React.createElement(Paragraph, null, localesNumber === 1 ? 'Do you want to link to the file in its fallback locale?' : 'Do you want to link to the files in their fallback locales?'), React.createElement(EntityList, null, assets.map(function (_ref2) {
     var title = _ref2.title,
         description = _ref2.description,
         thumbnailUrl = _ref2.thumbnailUrl,
         thumbnailAltText = _ref2.thumbnailAltText;
-    return React.createElement(EntityListItem, {
+    return React.createElement(EntityList.Item, {
       key: thumbnailUrl,
       title: title,
       thumbnailUrl: thumbnailUrl + "?w=46&h=46&fit=thumb",
       thumbnailAltText: thumbnailAltText,
       description: description
     });
-  })), React.createElement("div", {
-    className: styles$b.controlButton
-  }, React.createElement(Button, {
-    testId: "confirm-insert-asset",
+  }))), React.createElement(ModalControls, null, React.createElement(Button, {
     onClick: function onClick() {
-      return onClose(true);
+      return onClose(false);
     },
-    buttonType: "positive"
-  }, "Confirm"), React.createElement(Button, {
+    variant: "secondary",
+    size: "small"
+  }, "Cancel"), React.createElement(Button, {
+    testId: "confirm-insert-asset",
     onClick: function onClick() {
-      return onClose(false);
+      return onClose(true);
     },
-    buttonType: "muted"
-  }, "Cancel")));
+    variant: "positive",
+    size: "small"
+  }, "Confirm")));
 };
 var openConfirmInsertAsset = function openConfirmInsertAsset(dialogs, options) {
   return dialogs.openCurrent({
     title: 'Confirm using fallback assets',
     width: 'medium',
-    minHeight: '290px',
+    minHeight: '270px',
     shouldCloseOnEscapePress: true,
     shouldCloseOnOverlayClick: true,
     parameters: _extends({
@@ -3607,7 +3372,7 @@ var openConfirmInsertAsset = function openConfirmInsertAsset(dialogs, options) {
   });
 };
 
-var styles$c = {
+var styles$9 = {
   root: /*#__PURE__*/css({
     position: 'fixed',
     left: 0,
@@ -3726,17 +3491,17 @@ var ZenModeModalDialog = function ZenModeModalDialog(props) {
 
   var direction = (_props$sdk$locales$di = props.sdk.locales.direction[props.locale]) != null ? _props$sdk$locales$di : 'ltr';
   return React.createElement("div", {
-    className: styles$c.root,
+    className: styles$9.root,
     "data-test-id": "zen-mode-markdown-editor"
   }, React.createElement("div", {
-    className: styles$c.topSplit
+    className: styles$9.topSplit
   }, React.createElement(MarkdownToolbar, {
     mode: "zen",
     disabled: false,
     canUploadAssets: false,
     actions: actions
   })), React.createElement("div", {
-    className: cx(styles$c.editorSplit, (_cx = {}, _cx[styles$c.editorSplitFullscreen] = showPreview === false, _cx))
+    className: cx(styles$9.editorSplit, (_cx = {}, _cx[styles$9.editorSplitFullscreen] = showPreview === false, _cx))
   }, React.createElement(MarkdownTextarea, {
     mode: "zen",
     visible: true,
@@ -3755,38 +3520,36 @@ var ZenModeModalDialog = function ZenModeModalDialog(props) {
       });
     }
   })), showPreview && React.createElement("div", {
-    className: styles$c.previewSplit
+    className: styles$9.previewSplit
   }, React.createElement(MarkdownPreview, {
     direction: direction,
     mode: "zen",
     value: currentValue,
     previewComponents: props.previewComponents
   })), showPreview && React.createElement("div", {
-    className: styles$c.separator
+    className: styles$9.separator
   }), showPreview && React.createElement("button", {
-    className: cx(styles$c.button, styles$c.hideButton),
+    className: cx(styles$9.button, styles$9.hideButton),
     "aria-label": "Hide preview",
     onClick: function onClick() {
       setShowPreview(false);
     }
-  }, React.createElement(Icon, {
-    icon: "ChevronRight",
-    color: "muted",
+  }, React.createElement(ChevronRightIcon, {
+    variant: "muted",
     size: "tiny",
-    className: styles$c.icon
+    className: styles$9.icon
   })), !showPreview && React.createElement("button", {
-    className: cx(styles$c.button, styles$c.showButton),
+    className: cx(styles$9.button, styles$9.showButton),
     "aria-label": "Show preview",
     onClick: function onClick() {
       setShowPreview(true);
     }
-  }, React.createElement(Icon, {
-    icon: "ChevronLeft",
-    color: "muted",
+  }, React.createElement(ChevronLeftIcon, {
+    variant: "muted",
     size: "tiny",
-    className: styles$c.icon
+    className: styles$9.icon
   })), React.createElement("div", {
-    className: styles$c.bottomSplit
+    className: styles$9.bottomSplit
   }, React.createElement(MarkdownBottomBar, null, React.createElement(MarkdownHelp, {
     onClick: function onClick() {
       openCheatsheetModal(props.sdk.dialogs);
@@ -4568,7 +4331,7 @@ function createMarkdownActions(props) {
   };
 }
 
-var styles$d = {
+var styles$a = {
   container: /*#__PURE__*/css({
     display: 'flex',
     flexDirection: 'column',
@@ -4626,7 +4389,7 @@ function MarkdownEditor(props) {
     openCheatsheetModal(props.sdk.dialogs);
   }, []);
   return React.createElement("div", {
-    className: styles$d.container,
+    className: styles$a.container,
     "data-test-id": "markdown-editor"
   }, React.createElement(MarkdownTabs, {
     active: selectedTab,