oasis-editor 0.0.117 → 0.0.119

package/dist/{OasisEditorApp-DijR5F-O.js → OasisEditorApp-1pwk-3zw.js}

@@ -1,7 +1,7 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { E as EMPTY_PROJECTION_CONTEXT, d as domTextMeasurer, g as getProjectedParagraphBlockHeight, e as estimateTableBlockHeight, p as projectParagraphLayout, a as getPageBodyBottom, b as getPageBodyTop, c as getPageContentWidth, F as FOOTNOTE_MARKER_GUTTER_PX, f as getParagraphText, h as getBlockParagraphs, i as getRunFootnoteReference, l as listReferencedEndnotes, j as getFootnoteDisplayMarker, k as createProjectionContext, m as getDocumentSections, n as getRunField, o as projectBlocksLayout, u as useContext, s as splitProps, q as spread, r as mergeProps, t as memo, v as insert, w as createComponent, x as createRenderEffect, y as setAttribute, S as Show, z as className, A as For, B as createContext, C as template, D as createUniqueId, G as style, H as visitRun, I as assertNever, J as createSignal, K as createEditorStateFromDocument, L as createInitialEditorState, M as STANDARD_FONT_SIZES_PT, N as fontSizePxToPt, O as probeLocalFontFamilies, P as createEditorParagraphFromRuns, Q as isInlineObjectRun, R as createEditorStyledRun, T as getParagraphLength, U as getActiveZone, V as getActiveSectionIndex, W as getParagraphs, X as normalizeSelection, Y as positionToParagraphOffset, Z as paragraphOffsetToPosition, _ as clampPosition, $ as findParagraphIndex, a0 as createCollapsedSelection, a1 as isSelectionCollapsed, a2 as parseFontSizePtToPx, a3 as formatFontSizePt, a4 as createEditorParagraph, a5 as findParagraphTableLocation, a6 as buildTableCellLayout, a7 as PT_PER_PX, a8 as createEditorTableCell, a9 as createEditorTableRow, aa as createEditorTable, ab as PX_PER_POINT, ac as underlineStyleToCssDecorationStyle, ad as resolveImageSrc, ae as listKindForTag, af as isParagraphTag, ag as collectInlineRuns, ah as parseParagraphStyle, ai as getRunImage, aj as InlineShell, ak as BalloonShell, al as DocumentShell, am as createMemo, an as getCaretRectFromSnapshot, ao as getParagraphRectFromSnapshot, ap as CaretOverlay, aq as setStyleProperty, ar as Button, as as useI18n, at as createEffect, au as TextField, av as Dialog, aw as SelectField, ax as UNDERLINE_STYLE_OPTIONS, ay as delegateEvents, az as Checkbox, aA as Tabs, aB as FieldRow, aC as NumberField, aD as createStore, aE as reconcile, aF as addEventListener, aG as onMount, aH as onCleanup, aI as use, aJ as PluginUiHost, aK as OasisEditorEditor, aL as OasisBrandMark, aM as setPreciseFontPreference, aN as setWelcomeSeen, aO as enablePreciseFontMode, aP as TWIPS_PER_POINT, aQ as PX_PER_INCH, aR as TWIPS_PER_INCH, aS as normalizeHex6, aT as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aU as TABLE_BORDER_EDGE_KEYS, aV as resolveEffectiveParagraphStyle, aW as resolveEffectiveTextStyleForParagraph, aX as EMU_PER_PT, aY as OOXML_ROTATION_UNITS, aZ as OOXML_PERCENT_DENOMINATOR, a_ as parseHexColorToRgb255, a$ as EMU_PER_PX, b0 as getRunEndnoteReference, b1 as iterateFootnoteReferenceRuns, b2 as iterateEndnoteReferenceRuns, b3 as imageContentTypeDefaults, b4 as getRunFieldChar, b5 as getRunFieldInstruction, b6 as createEditorRun, b7 as JSZip, b8 as imageExtensionFromMime, b9 as pxToPt$1, ba as resolveFloatingObjectRect, bb as getTextBoxFloatingGeometry, bc as getPresetPathSegments, bd as buildListLabels, be as DEFAULT_FONT_SIZE_PX, bf as resolveGradientAxis, bg as isDoubleUnderlineStyle, bh as isWavyUnderlineStyle, bi as underlineStyleLineWidthPx, bj as WAVY_UNDERLINE_WAVELENGTH_PX, bk as WAVY_UNDERLINE_AMPLITUDE_PX, bl as DOUBLE_UNDERLINE_OFFSET_PX, bm as underlineStyleDashArray, bn as EMPHASIS_GLYPH, bo as rgb255ToHex, bp as getImageFloatingGeometry, bq as textStyleToFontSizePt, br as TEXT_BASELINE_RATIO, bs as resolveOpenTypeFeatureTags, bt as resolveDecorationLineY, bu as DOUBLE_STRIKE_OFFSET_PX, bv as resolveListLabel, bw as getListLabelInset, bx as getAlignedListLabelInset, by as getParagraphBorderInsets, bz as buildSegmentTable, bA as buildCanvasTableLayout, bB as resolveCanvasTableWidth, bC as resolveFloatingTableRect, bD as normalizeFamily, bE as ROBOTO_FONT_FILES, bF as loadFontAsset, bG as OFFICE_COMPAT_FONT_FAMILIES, bH as BinaryReader, bI as buildSfnt, bJ as defaultFontDecoderRegistry, bK as SfntFontProgram, bL as collectPdfFontFamilies, bM as outlineFrom, bN as getPageHeaderZoneTop, bO as getPageColumnRects, bP as findFootnoteReference, bQ as resolveImporterForFile, bR as roundTo, bS as getDocumentSectionsCanonical, bT as getDocumentParagraphsCanonical, bU as getDocumentParagraphs, bV as getDocumentPageSettings, bW as getTableCellContentWidthForParagraph, bX as layoutMetricsEpoch, bY as bumpLayoutMetricsEpoch, bZ as createCanvasLayoutSnapshotProvider, b_ as on, b$ as debounce, c0 as unwrap, c1 as perfTimer, c2 as getRunTextBox, c3 as createEditorDocument, c4 as resolveResizedDimensions, c5 as resolveTextBoxRenderHeight, c6 as getToolbarStyleState, c7 as VERTICAL_HIT_WEIGHT, c8 as getCachedCanvasImage, c9 as measureParagraphMinContentWidthPx, ca as getEditableBlocksForZone, cb as findParagraphLocation, cc as createSectionBoundaryParagraph, cd as normalizePageSettings, ce as DEFAULT_EDITOR_PAGE_SETTINGS, cf as markStart, cg as markEnd, ch as getParagraphEntries, ci as getParagraphById, cj as createEditorFootnote, ck as createFootnoteReferenceRun, cl as renumberFootnotes, cm as getHeadingLevel, cn as preciseFontModeVersion, co as isPreciseFontModeEnabled, cp as resolveNamedTextStyle, cq as togglePreciseFontMode, cr as nextFontSizePt, cs as previousFontSizePt, ct as fontSizePtToPx, cu as createDefaultToolbarPreset, cv as MenuRegistry, cw as createToolbarRegistry, cx as Editor, cy as resolveCommandRef, cz as commandRefName, cA as createOasisEditorClient, cB as createEditorZoom, cC as startLongTaskObserver, cD as installGlobalReport, cE as applyStoredPreciseFontPreference, cF as getWelcomeSeen, cG as isLocalFontAccessSupported, cH as EDITOR_SCROLL_PADDING_PX, cI as Toolbar, cJ as OasisEditorLoading, cK as I18nProvider, cL as createTranslator, cM as createEditorLogger, cN as registerDomStatsSurface } from "./index-Comlrue1.js";
+import { E as EMPTY_PROJECTION_CONTEXT, d as domTextMeasurer, g as getProjectedParagraphBlockHeight, e as estimateTableBlockHeight, p as projectParagraphLayout, a as getPageBodyBottom, b as getPageBodyTop, c as getPageContentWidth, F as FOOTNOTE_MARKER_GUTTER_PX, f as getParagraphText, h as getBlockParagraphs, i as getRunFootnoteReference, l as listReferencedEndnotes, j as getFootnoteDisplayMarker, k as createProjectionContext, m as getDocumentSections, n as getRunField, o as projectBlocksLayout, v as visitRun, q as assertNever, r as createSignal, s as createEditorStateFromDocument, t as createInitialEditorState, S as STANDARD_FONT_SIZES_PT, u as fontSizePxToPt, w as probeLocalFontFamilies, x as createEditorParagraphFromRuns, y as isInlineObjectRun, z as createEditorStyledRun, A as getParagraphLength, B as getActiveZone, C as getActiveSectionIndex, D as getParagraphs, G as normalizeSelection, H as positionToParagraphOffset, I as paragraphOffsetToPosition, J as clampPosition, K as findParagraphIndex, L as createCollapsedSelection, M as isSelectionCollapsed, N as parseFontSizePtToPx, O as formatFontSizePt, P as createEditorParagraph, Q as findParagraphTableLocation, R as buildTableCellLayout, T as PT_PER_PX, U as createEditorTableCell, V as createEditorTableRow, W as createEditorTable, X as PX_PER_POINT, Y as underlineStyleToCssDecorationStyle, Z as resolveImageSrc, _ as listKindForTag, $ as isParagraphTag, a0 as collectInlineRuns, a1 as parseParagraphStyle, a2 as getRunImage, a3 as InlineShell, a4 as BalloonShell, a5 as DocumentShell, a6 as createMemo, a7 as getCaretRectFromSnapshot, a8 as getParagraphRectFromSnapshot, a9 as createComponent, aa as CaretOverlay, ab as Show, ac as createRenderEffect, ad as style, ae as setAttribute, af as setStyleProperty, ag as memo, ah as template, ai as Button, aj as useI18n, ak as createEffect, al as TextField, am as Dialog, an as insert, ao as className, ap as Grid, aq as SelectField, ar as StatusText, as as ColorField, at as UNDERLINE_STYLE_OPTIONS, au as Stack, av as For, aw as ToggleChip, ax as FormField, ay as Checkbox, az as FieldGroup, aA as Tabs, aB as NumberField, aC as createStore, aD as reconcile, aE as RadioGroup, aF as Radio$1, aG as TextAreaField, aH as Text, aI as SurfaceButton, aJ as delegateEvents, aK as onMount, aL as onCleanup, aM as use, aN as PluginUiHost, aO as OasisEditorEditor, aP as OasisBrandMark, aQ as setPreciseFontPreference, aR as setWelcomeSeen, aS as enablePreciseFontMode, aT as TWIPS_PER_POINT, aU as PX_PER_INCH, aV as TWIPS_PER_INCH, aW as normalizeHex6, aX as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aY as TABLE_BORDER_EDGE_KEYS, aZ as resolveEffectiveParagraphStyle, a_ as resolveEffectiveTextStyleForParagraph, a$ as EMU_PER_PT, b0 as OOXML_ROTATION_UNITS, b1 as OOXML_PERCENT_DENOMINATOR, b2 as parseHexColorToRgb255, b3 as EMU_PER_PX, b4 as getRunEndnoteReference, b5 as iterateFootnoteReferenceRuns, b6 as iterateEndnoteReferenceRuns, b7 as imageContentTypeDefaults, b8 as getRunFieldChar, b9 as getRunFieldInstruction, ba as createEditorRun, bb as JSZip, bc as imageExtensionFromMime, bd as pxToPt$1, be as resolveFloatingObjectRect, bf as getTextBoxFloatingGeometry, bg as getPresetPathSegments, bh as buildListLabels, bi as DEFAULT_FONT_SIZE_PX, bj as resolveGradientAxis, bk as isDoubleUnderlineStyle, bl as isWavyUnderlineStyle, bm as underlineStyleLineWidthPx, bn as WAVY_UNDERLINE_WAVELENGTH_PX, bo as WAVY_UNDERLINE_AMPLITUDE_PX, bp as DOUBLE_UNDERLINE_OFFSET_PX, bq as underlineStyleDashArray, br as EMPHASIS_GLYPH, bs as rgb255ToHex, bt as getImageFloatingGeometry, bu as textStyleToFontSizePt, bv as TEXT_BASELINE_RATIO, bw as resolveOpenTypeFeatureTags, bx as resolveDecorationLineY, by as DOUBLE_STRIKE_OFFSET_PX, bz as resolveListLabel, bA as getListLabelInset, bB as getAlignedListLabelInset, bC as getParagraphBorderInsets, bD as buildSegmentTable, bE as buildCanvasTableLayout, bF as resolveCanvasTableWidth, bG as resolveFloatingTableRect, bH as normalizeFamily, bI as ROBOTO_FONT_FILES, bJ as loadFontAsset, bK as OFFICE_COMPAT_FONT_FAMILIES, bL as BinaryReader, bM as buildSfnt, bN as defaultFontDecoderRegistry, bO as SfntFontProgram, bP as collectPdfFontFamilies, bQ as outlineFrom, bR as getPageHeaderZoneTop, bS as getPageColumnRects, bT as findFootnoteReference, bU as resolveImporterForFile, bV as roundTo, bW as getDocumentSectionsCanonical, bX as getDocumentParagraphsCanonical, bY as getDocumentParagraphs, bZ as getDocumentPageSettings, b_ as getTableCellContentWidthForParagraph, b$ as layoutMetricsEpoch, c0 as bumpLayoutMetricsEpoch, c1 as createCanvasLayoutSnapshotProvider, c2 as on, c3 as debounce, c4 as unwrap, c5 as perfTimer, c6 as getRunTextBox, c7 as createEditorDocument, c8 as resolveResizedDimensions, c9 as resolveTextBoxRenderHeight, ca as getToolbarStyleState, cb as VERTICAL_HIT_WEIGHT, cc as getCachedCanvasImage, cd as measureParagraphMinContentWidthPx, ce as getEditableBlocksForZone, cf as findParagraphLocation, cg as createSectionBoundaryParagraph, ch as normalizePageSettings, ci as DEFAULT_EDITOR_PAGE_SETTINGS, cj as markStart, ck as markEnd, cl as getParagraphEntries, cm as getParagraphById, cn as createEditorFootnote, co as createFootnoteReferenceRun, cp as renumberFootnotes, cq as getHeadingLevel, cr as preciseFontModeVersion, cs as isPreciseFontModeEnabled, ct as resolveNamedTextStyle, cu as togglePreciseFontMode, cv as nextFontSizePt, cw as previousFontSizePt, cx as fontSizePtToPx, cy as createDefaultToolbarPreset, cz as MenuRegistry, cA as createToolbarRegistry, cB as Editor, cC as resolveCommandRef, cD as commandRefName, cE as createOasisEditorClient, cF as createEditorZoom, cG as startLongTaskObserver, cH as installGlobalReport, cI as applyStoredPreciseFontPreference, cJ as getWelcomeSeen, cK as isLocalFontAccessSupported, cL as EDITOR_SCROLL_PADDING_PX, cM as Toolbar, cN as OasisEditorLoading, cO as I18nProvider, cP as createTranslator, cQ as createEditorLogger, cR as registerDomStatsSurface } from "./index-rlmjHSGT.js";
 function projectHeaderFooterBlocksWithDependencies(blocks, deps, context = {}) {
   const {
     pageIndex,
@@ -606,163 +606,6 @@ function projectDocumentLayout(document2, maxPageHeightOverride, measuredHeights
     pages: applyFootnotesToPages(pages, footnoteContext)
   };
 }
-var _tmpl$$g = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-description>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label><input type=radio class=oasis-editor-ui-radio-input><span class=oasis-editor-ui-checkbox-copy><span class=oasis-editor-ui-field-label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-label>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div role=radiogroup>`);
-const RadioGroupCtx = createContext();
-function Radio$1(props) {
-  const fallbackId = createUniqueId();
-  const group = useContext(RadioGroupCtx);
-  const [local, others] = splitProps(props, ["label", "description", "value", "onChange", "class", "id", "checked", "name", "disabled"]);
-  const id = () => local.id ?? fallbackId;
-  const descriptionId = () => `${id()}-description`;
-  const checked = () => group ? group.value() === local.value : Boolean(local.checked);
-  const disabled = () => Boolean(local.disabled) || (group ? group.disabled() : false);
-  return (() => {
-    var _el$ = _tmpl$2$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
-    _el$2.addEventListener("change", (event) => {
-      var _a2;
-      if (group) group.onSelect(local.value);
-      (_a2 = local.onChange) == null ? void 0 : _a2.call(local, event.currentTarget.checked);
-    });
-    spread(_el$2, mergeProps({
-      get id() {
-        return id();
-      },
-      get name() {
-        return local.name ?? (group == null ? void 0 : group.name);
-      },
-      get value() {
-        return local.value;
-      },
-      get checked() {
-        return checked();
-      },
-      get disabled() {
-        return disabled();
-      },
-      get ["aria-describedby"]() {
-        return memo(() => !!local.description)() ? descriptionId() : void 0;
-      }
-    }, others), false, false);
-    insert(_el$4, () => local.label);
-    insert(_el$3, createComponent(Show, {
-      get when() {
-        return local.description;
-      },
-      get children() {
-        var _el$5 = _tmpl$$g();
-        insert(_el$5, () => local.description);
-        createRenderEffect(() => setAttribute(_el$5, "id", descriptionId()));
-        return _el$5;
-      }
-    }), null);
-    createRenderEffect((_p$) => {
-      var _v$ = `oasis-editor-ui-radio ${local.class ?? ""}`, _v$2 = id();
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && setAttribute(_el$, "for", _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    return _el$;
-  })();
-}
-function RadioGroup(props) {
-  const fallbackName = createUniqueId();
-  const ctx = {
-    name: props.name ?? fallbackName,
-    value: () => props.value,
-    onSelect: (value) => {
-      var _a2;
-      return (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value);
-    },
-    disabled: () => Boolean(props.disabled)
-  };
-  return createComponent(RadioGroupCtx.Provider, {
-    value: ctx,
-    get children() {
-      var _el$6 = _tmpl$4$1();
-      insert(_el$6, createComponent(Show, {
-        get when() {
-          return props.label;
-        },
-        get children() {
-          var _el$7 = _tmpl$3$3();
-          insert(_el$7, () => props.label);
-          return _el$7;
-        }
-      }), null);
-      insert(_el$6, createComponent(Show, {
-        get when() {
-          return props.options;
-        },
-        get fallback() {
-          return props.children;
-        },
-        get children() {
-          return createComponent(For, {
-            get each() {
-              return props.options;
-            },
-            children: (option) => createComponent(Radio$1, {
-              get value() {
-                return option.value;
-              },
-              get label() {
-                return option.label;
-              },
-              get description() {
-                return option.description;
-              },
-              get disabled() {
-                return option.disabled;
-              }
-            })
-          });
-        }
-      }), null);
-      createRenderEffect((_p$) => {
-        var _v$3 = `oasis-editor-ui-radio-group ${props.class ?? ""}`, _v$4 = props.label;
-        _v$3 !== _p$.e && className(_el$6, _p$.e = _v$3);
-        _v$4 !== _p$.t && setAttribute(_el$6, "aria-label", _p$.t = _v$4);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0
-      });
-      return _el$6;
-    }
-  });
-}
-var _tmpl$$f = /* @__PURE__ */ template(`<label><input type=checkbox class=oasis-editor-ui-toggle-chip-input><span class=oasis-editor-ui-toggle-chip-label>`);
-function ToggleChip(props) {
-  const [local, others] = splitProps(props, ["label", "labelStyle", "onChange", "class", "checked"]);
-  return (() => {
-    var _el$ = _tmpl$$f(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    _el$2.addEventListener("change", (event) => {
-      var _a2;
-      return (_a2 = local.onChange) == null ? void 0 : _a2.call(local, event.currentTarget.checked);
-    });
-    spread(_el$2, mergeProps({
-      get checked() {
-        return local.checked;
-      }
-    }, others), false, false);
-    insert(_el$3, () => local.label);
-    createRenderEffect((_p$) => {
-      var _v$ = `oasis-editor-ui-toggle-chip ${local.class ?? ""}`, _v$2 = !!Boolean(local.checked), _v$3 = local.labelStyle;
-      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
-      _v$2 !== _p$.t && _el$.classList.toggle("is-active", _p$.t = _v$2);
-      _p$.a = style(_el$3, _v$3, _p$.a);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0,
-      a: void 0
-    });
-    return _el$;
-  })();
-}
 function cloneStyle(style2) {
   return style2 ? { ...style2 } : void 0;
 }
@@ -31448,7 +31291,7 @@ function DropCaret(props) {
     })
   });
 }
-var _tmpl$$e = /* @__PURE__ */ template(`<div class=oasis-editor-table-resize-guide>`), _tmpl$2$3 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class=oasis-editor-table-ghost>`);
+var _tmpl$$e = /* @__PURE__ */ template(`<div class=oasis-editor-table-resize-guide>`), _tmpl$2$2 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-ghost>`);
 function EditorDragLayers(props) {
   return [createComponent(Show, {
     get when() {
@@ -31486,7 +31329,7 @@ function EditorDragLayers(props) {
       return memo(() => !!props.imageOps.dragging())() && props.imageOps.draggedImageInfo();
     },
     children: (info) => (() => {
-      var _el$2 = _tmpl$2$3();
+      var _el$2 = _tmpl$2$2();
       createRenderEffect((_p$) => {
         var _v$4 = info().src, _v$5 = `${info().width}px`, _v$6 = `${info().height}px`, _v$7 = `${props.imageOps.mousePos().x - info().offsetX}px`, _v$8 = `${props.imageOps.mousePos().y - info().offsetY}px`;
         _v$4 !== _p$.e && setAttribute(_el$2, "src", _p$.e = _v$4);
@@ -31509,7 +31352,7 @@ function EditorDragLayers(props) {
       return memo(() => !!props.tableDrag.dragging())() && props.tableDrag.draggedTableInfo();
     },
     children: (info) => (() => {
-      var _el$3 = _tmpl$3$2();
+      var _el$3 = _tmpl$3$1();
       createRenderEffect((_p$) => {
         var _v$9 = `${info().width}px`, _v$0 = `${info().height}px`, _v$1 = `${props.tableDrag.mousePos().x - info().offsetX}px`, _v$10 = `${props.tableDrag.mousePos().y - info().offsetY}px`;
         _v$9 !== _p$.e && setStyleProperty(_el$3, "width", _p$.e = _v$9);
@@ -32125,7 +31968,7 @@ function FontPreview(props) {
     return _el$;
   })();
 }
-var _tmpl$$c = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-font-panel"><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-custom-size-group"><span class=oasis-editor-dialog-help-text></span></div></div><div class="oasis-editor-dialog-row oasis-editor-font-dialog-color-row"><div class="oasis-editor-dialog-input-group oasis-editor-font-dialog-color-mode-group"><label class=oasis-editor-dialog-label></label><select class=oasis-editor-dialog-input data-testid=editor-font-dialog-color-mode><option value=automatic></option><option value=custom></option></select><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-highlight></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-shading></div></div><div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-color data-testid=editor-font-dialog-underline-color></div></div><div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-style-row></div></div></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label>`);
+var _tmpl$$c = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-font-panel">`);
 function FontTab(props) {
   const t = useI18n();
   const {
@@ -32215,409 +32058,729 @@ function FontTab(props) {
     onChange: (checked) => ctrl.updateFontTab("hidden", checked)
   }];
   return (() => {
-    var _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$0.nextSibling, _el$12 = _el$8.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$12.nextSibling, _el$16 = _el$15.firstChild, _el$17 = _el$16.nextSibling, _el$18 = _el$7.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$19.firstChild, _el$21 = _el$20.nextSibling, _el$22 = _el$18.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$23.firstChild, _el$25 = _el$24.nextSibling, _el$26 = _el$22.nextSibling, _el$27 = _el$26.firstChild;
-    insert(_el$2, createComponent(TextField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("dialog.font.familyFilter");
-      },
-      get value() {
-        return ctrl.fontTabValues().familyFilter;
-      },
-      onChange: (value) => ctrl.updateFontTab("familyFilter", value),
-      "data-testid": "editor-font-dialog-family-filter"
-    }));
-    insert(_el$3, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("dialog.font.family");
-      },
-      get value() {
-        return ctrl.fontTabValues().fontFamily;
-      },
-      onChange: (value) => ctrl.updateFontTab("fontFamily", value),
-      "data-testid": "editor-font-dialog-family",
-      get options() {
-        return [{
-          value: "",
-          label: "—"
-        }, ...ctrl.visibleFamilyOptions().map((family) => ({
-          value: family,
-          label: family
-        }))];
+    var _el$ = _tmpl$$c();
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      get children() {
+        return [createComponent(Grid, {
+          size: 12,
+          get children() {
+            return createComponent(TextField, {
+              get label() {
+                return t("dialog.font.familyFilter");
+              },
+              get value() {
+                return ctrl.fontTabValues().familyFilter;
+              },
+              onChange: (value) => ctrl.updateFontTab("familyFilter", value),
+              "data-testid": "editor-font-dialog-family-filter"
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 8
+          },
+          get children() {
+            return createComponent(SelectField, {
+              get label() {
+                return t("dialog.font.family");
+              },
+              get value() {
+                return ctrl.fontTabValues().fontFamily;
+              },
+              onChange: (value) => ctrl.updateFontTab("fontFamily", value),
+              "data-testid": "editor-font-dialog-family",
+              get options() {
+                return [{
+                  value: "",
+                  label: "—"
+                }, ...ctrl.visibleFamilyOptions().map((family) => ({
+                  value: family,
+                  label: family
+                }))];
+              }
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(SelectField, {
+              "class": "oasis-editor-font-dialog-size-group",
+              get label() {
+                return t("dialog.font.size");
+              },
+              get value() {
+                return ctrl.fontTabValues().fontSize;
+              },
+              onChange: (value) => ctrl.updateFontTab("fontSize", value),
+              "data-testid": "editor-font-dialog-size",
+              get options() {
+                return [{
+                  value: "",
+                  label: "—"
+                }, ...ctrl.effectiveSizeOptions().map((size) => ({
+                  value: String(size),
+                  label: String(size)
+                }))];
+              }
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return [createComponent(TextField, {
+              "class": "oasis-editor-font-dialog-custom-size-group",
+              get label() {
+                return t("dialog.font.customSize");
+              },
+              get value() {
+                return ctrl.fontTabValues().fontSize;
+              },
+              onChange: (value) => ctrl.updateFontTab("fontSize", value),
+              "data-testid": "editor-font-dialog-custom-size"
+            }), createComponent(StatusText, {
+              "class": "oasis-editor-dialog-help-text",
+              get children() {
+                return ctrl.customSizeError();
+              }
+            })];
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 8
+          },
+          get children() {
+            return createComponent(SelectField, {
+              "class": "oasis-editor-font-dialog-style-list-group",
+              get label() {
+                return t("dialog.font.styleList");
+              },
+              get value() {
+                return ctrl.selectedFontStyle();
+              },
+              onChange: (value) => ctrl.applyFontStylePreset(value),
+              "data-testid": "editor-font-dialog-style-list",
+              get options() {
+                return [{
+                  value: "regular",
+                  label: t("dialog.font.styleRegular")
+                }, {
+                  value: "italic",
+                  label: t("dialog.font.styleItalic")
+                }, {
+                  value: "bold",
+                  label: t("dialog.font.styleBold")
+                }, {
+                  value: "boldItalic",
+                  label: t("dialog.font.styleBoldItalic")
+                }];
+              }
+            });
+          }
+        })];
       }
     }), null);
-    insert(_el$3, createComponent(SelectField, {
-      "class": "oasis-editor-font-dialog-size-group",
-      get label() {
-        return t("dialog.font.size");
-      },
-      get value() {
-        return ctrl.fontTabValues().fontSize;
-      },
-      onChange: (value) => ctrl.updateFontTab("fontSize", value),
-      "data-testid": "editor-font-dialog-size",
-      get options() {
-        return [{
-          value: "",
-          label: "—"
-        }, ...ctrl.effectiveSizeOptions().map((size) => ({
-          value: String(size),
-          label: String(size)
-        }))];
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      "class": "oasis-editor-font-dialog-color-row",
+      get children() {
+        return [createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(SelectField, {
+              "class": "oasis-editor-font-dialog-color-mode-group",
+              get label() {
+                return t("dialog.font.color");
+              },
+              get value() {
+                return ctrl.fontTabValues().colorMode;
+              },
+              onChange: (value) => ctrl.updateFontTab("colorMode", value),
+              "data-testid": "editor-font-dialog-color-mode",
+              get options() {
+                return [{
+                  value: "automatic",
+                  label: t("toolbar.colorAutomatic")
+                }, {
+                  value: "custom",
+                  label: t("dialog.font.customColor")
+                }];
+              }
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(ColorField, {
+              get label() {
+                return t("dialog.font.color");
+              },
+              get value() {
+                return ctrl.fontTabValues().color;
+              },
+              get disabled() {
+                return ctrl.fontTabValues().colorMode === "automatic";
+              },
+              onChange: (value) => ctrl.setFontTabValues((current) => ({
+                ...current,
+                color: value,
+                colorMode: "custom"
+              })),
+              "data-testid": "editor-font-dialog-color"
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 2
+          },
+          get children() {
+            return createComponent(ColorField, {
+              get label() {
+                return t("dialog.font.highlight");
+              },
+              get value() {
+                return ctrl.fontTabValues().highlight || DEFAULT_HIGHLIGHT;
+              },
+              onChange: (value) => ctrl.updateFontTab("highlight", value),
+              "data-testid": "editor-font-dialog-highlight"
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 2
+          },
+          get children() {
+            return createComponent(ColorField, {
+              get label() {
+                return t("dialog.font.shading");
+              },
+              get value() {
+                return ctrl.fontTabValues().shading || DEFAULT_SHADING;
+              },
+              onChange: (value) => ctrl.updateFontTab("shading", value),
+              "data-testid": "editor-font-dialog-shading"
+            });
+          }
+        })];
       }
     }), null);
-    insert(_el$5, createComponent(TextField, {
-      get label() {
-        return t("dialog.font.customSize");
-      },
-      get value() {
-        return ctrl.fontTabValues().fontSize;
-      },
-      onChange: (value) => ctrl.updateFontTab("fontSize", value),
-      "data-testid": "editor-font-dialog-custom-size"
-    }), _el$6);
-    insert(_el$6, () => ctrl.customSizeError());
-    insert(_el$4, createComponent(SelectField, {
-      "class": "oasis-editor-font-dialog-style-list-group",
-      get label() {
-        return t("dialog.font.styleList");
-      },
-      get value() {
-        return ctrl.selectedFontStyle();
-      },
-      onChange: (value) => ctrl.applyFontStylePreset(value),
-      "data-testid": "editor-font-dialog-style-list",
-      get options() {
-        return [{
-          value: "regular",
-          label: t("dialog.font.styleRegular")
-        }, {
-          value: "italic",
-          label: t("dialog.font.styleItalic")
-        }, {
-          value: "bold",
-          label: t("dialog.font.styleBold")
-        }, {
-          value: "boldItalic",
-          label: t("dialog.font.styleBoldItalic")
-        }];
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      get children() {
+        return [createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 8
+          },
+          get children() {
+            return createComponent(SelectField, {
+              get label() {
+                return t("dialog.font.underlineStyle");
+              },
+              get value() {
+                return ctrl.fontTabValues().underlineStyle;
+              },
+              onChange: (value) => ctrl.setFontTabValues((current) => ({
+                ...current,
+                underlineStyle: value,
+                underline: value !== "none"
+              })),
+              "data-testid": "editor-font-dialog-underline-style",
+              get options() {
+                return [{
+                  value: "none",
+                  label: t("toolbar.underlineRemove")
+                }, ...UNDERLINE_STYLE_OPTIONS.map((option) => ({
+                  value: option.value,
+                  label: t(option.labelKey)
+                }))];
+              }
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(ColorField, {
+              get label() {
+                return t("dialog.font.underlineColor");
+              },
+              get value() {
+                return ctrl.fontTabValues().underlineColor || DEFAULT_COLOR;
+              },
+              get disabled() {
+                return ctrl.fontTabValues().underlineStyle === "none";
+              },
+              onChange: (value) => ctrl.setFontTabValues((current) => ({
+                ...current,
+                underlineColor: value,
+                underline: current.underlineStyle !== "none"
+              })),
+              "data-testid": "editor-font-dialog-underline-color"
+            });
+          }
+        })];
       }
     }), null);
-    insert(_el$9, () => t("dialog.font.color"));
-    _el$0.addEventListener("change", (e) => ctrl.updateFontTab("colorMode", e.currentTarget.value));
-    insert(_el$1, () => t("toolbar.colorAutomatic"));
-    insert(_el$10, () => t("dialog.font.customColor"));
-    _el$11.$$input = (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      color: e.currentTarget.value,
-      colorMode: "custom"
-    }));
-    insert(_el$13, () => t("dialog.font.highlight"));
-    _el$14.$$input = (e) => ctrl.updateFontTab("highlight", e.currentTarget.value);
-    insert(_el$16, () => t("dialog.font.shading"));
-    _el$17.$$input = (e) => ctrl.updateFontTab("shading", e.currentTarget.value);
-    insert(_el$18, createComponent(SelectField, {
+    insert(_el$, createComponent(FormField, {
       "class": "oasis-editor-dialog-input-group-grow",
       get label() {
-        return t("dialog.font.underlineStyle");
-      },
-      get value() {
-        return ctrl.fontTabValues().underlineStyle;
+        return t("dialog.font.style");
       },
-      onChange: (value) => ctrl.setFontTabValues((current) => ({
-        ...current,
-        underlineStyle: value,
-        underline: value !== "none"
-      })),
-      "data-testid": "editor-font-dialog-underline-style",
-      get options() {
-        return [{
-          value: "none",
-          label: t("toolbar.underlineRemove")
-        }, ...UNDERLINE_STYLE_OPTIONS.map((option) => ({
-          value: option.value,
-          label: t(option.labelKey)
-        }))];
+      get children() {
+        return createComponent(Stack, {
+          "class": "oasis-editor-dialog-style-row",
+          direction: "row",
+          spacing: 1,
+          get children() {
+            return createComponent(For, {
+              get each() {
+                return effectToggles();
+              },
+              children: (toggle) => createComponent(ToggleChip, {
+                get label() {
+                  return toggle.label;
+                },
+                get labelStyle() {
+                  return toggle.labelStyle;
+                },
+                get checked() {
+                  return toggle.checked();
+                },
+                get onChange() {
+                  return toggle.onChange;
+                },
+                get ["data-testid"]() {
+                  return toggle.testId;
+                }
+              })
+            });
+          }
+        });
       }
-    }), _el$19);
-    insert(_el$20, () => t("dialog.font.underlineColor"));
-    _el$21.$$input = (e) => ctrl.setFontTabValues((current) => ({
-      ...current,
-      underlineColor: e.currentTarget.value,
-      underline: current.underlineStyle !== "none"
-    }));
-    insert(_el$24, () => t("dialog.font.style"));
-    insert(_el$25, createComponent(For, {
-      get each() {
-        return effectToggles();
+    }), null);
+    insert(_el$, createComponent(FormField, {
+      get label() {
+        return t("dialog.font.preview");
       },
-      children: (toggle) => createComponent(ToggleChip, {
-        get label() {
-          return toggle.label;
-        },
-        get labelStyle() {
-          return toggle.labelStyle;
-        },
-        get checked() {
-          return toggle.checked();
-        },
-        get onChange() {
-          return toggle.onChange;
-        },
-        get ["data-testid"]() {
-          return toggle.testId;
-        }
-      })
-    }));
-    insert(_el$27, () => t("dialog.font.preview"));
-    insert(_el$26, createComponent(FontPreview, {
-      testId: "editor-font-dialog-preview",
-      get style() {
-        return ctrl.previewStyle();
+      get children() {
+        return createComponent(FontPreview, {
+          testId: "editor-font-dialog-preview",
+          get style() {
+            return ctrl.previewStyle();
+          }
+        });
       }
     }), null);
-    createRenderEffect((_p$) => {
-      var _v$ = ctrl.fontTabValues().colorMode === "automatic", _v$2 = ctrl.fontTabValues().underlineStyle === "none";
-      _v$ !== _p$.e && (_el$11.disabled = _p$.e = _v$);
-      _v$2 !== _p$.t && (_el$21.disabled = _p$.t = _v$2);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    createRenderEffect(() => _el$0.value = ctrl.fontTabValues().colorMode);
-    createRenderEffect(() => _el$11.value = ctrl.fontTabValues().color);
-    createRenderEffect(() => _el$14.value = ctrl.fontTabValues().highlight || DEFAULT_HIGHLIGHT);
-    createRenderEffect(() => _el$17.value = ctrl.fontTabValues().shading || DEFAULT_SHADING);
-    createRenderEffect(() => _el$21.value = ctrl.fontTabValues().underlineColor || DEFAULT_COLOR);
     return _el$;
   })();
 }
-delegateEvents(["input"]);
-var _tmpl$$b = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-advanced-panel"><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label><label class="oasis-editor-dialog-label oasis-editor-font-dialog-by-label"></label></div><div class="oasis-editor-font-dialog-word-row oasis-editor-font-dialog-kerning-row"><span class="oasis-editor-dialog-help-text oasis-editor-font-dialog-kerning-suffix"></span></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div><div class=oasis-editor-font-dialog-word-row><label class=oasis-editor-dialog-label></label></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend></fieldset><p class=oasis-editor-dialog-help-text data-testid=editor-font-dialog-advanced-placeholder>`);
+var _tmpl$$b = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-advanced-panel">`);
 function AdvancedFontTab(props) {
   const t = useI18n();
   const {
     ctrl
   } = props;
   return (() => {
-    var _el$ = _tmpl$$b(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$9.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$2.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$14.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.firstChild, _el$20 = _el$18.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$12.nextSibling, _el$23 = _el$22.firstChild, _el$24 = _el$22.nextSibling;
-    insert(_el$3, () => t("dialog.font.advancedCharacterSpacingGroup"));
-    insert(_el$5, () => t("dialog.font.advancedScale"));
-    insert(_el$4, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().characterScale || "100";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("characterScale", value),
-      "data-testid": "editor-font-dialog-advanced-scale",
-      get options() {
-        return WORD_CHARACTER_SCALES.map((scale) => ({
-          value: String(scale),
-          label: `${scale}%`
-        }));
-      }
-    }), null);
-    insert(_el$7, () => t("dialog.font.advancedSpacing"));
-    insert(_el$6, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().spacingMode;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("spacingMode", value),
-      "data-testid": "editor-font-dialog-advanced-spacing-mode",
-      get options() {
-        return [{
-          value: "normal",
-          label: t("dialog.font.advancedNormal")
-        }, {
-          value: "expanded",
-          label: t("dialog.font.advancedExpanded")
-        }, {
-          value: "condensed",
-          label: t("dialog.font.advancedCondensed")
-        }];
-      }
-    }), _el$8);
-    insert(_el$8, () => t("dialog.font.advancedBy"));
-    insert(_el$6, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-small-input",
-      get value() {
-        return ctrl.advancedTabValues().spacingAmount;
+    var _el$ = _tmpl$$b();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedCharacterSpacingGroup");
       },
-      get disabled() {
-        return ctrl.advancedTabValues().spacingMode === "normal";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("spacingAmount", value),
-      "data-testid": "editor-font-dialog-advanced-spacing-amount"
-    }), null);
-    insert(_el$0, () => t("dialog.font.advancedPosition"));
-    insert(_el$9, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().positionMode;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("positionMode", value),
-      "data-testid": "editor-font-dialog-advanced-position-mode",
-      get options() {
-        return [{
-          value: "normal",
-          label: t("dialog.font.advancedNormal")
-        }, {
-          value: "raised",
-          label: t("dialog.font.advancedRaised")
-        }, {
-          value: "lowered",
-          label: t("dialog.font.advancedLowered")
-        }];
-      }
-    }), _el$1);
-    insert(_el$1, () => t("dialog.font.advancedBy"));
-    insert(_el$9, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-small-input",
-      get value() {
-        return ctrl.advancedTabValues().positionAmount;
-      },
-      get disabled() {
-        return ctrl.advancedTabValues().positionMode === "normal";
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("positionAmount", value),
-      "data-testid": "editor-font-dialog-advanced-position-amount"
-    }), null);
-    insert(_el$10, createComponent(Checkbox, {
-      "class": "oasis-editor-font-dialog-kerning-toggle",
-      get label() {
-        return t("dialog.font.advancedKerning");
-      },
-      get checked() {
-        return ctrl.advancedTabValues().kerningEnabled;
-      },
-      onChange: (checked) => ctrl.setAdvancedTabValues((current) => ({
-        ...current,
-        kerningEnabled: checked,
-        kerningThreshold: checked ? current.kerningThreshold || "1" : current.kerningThreshold
-      })),
-      "data-testid": "editor-font-dialog-advanced-kerning-enabled"
-    }), _el$11);
-    insert(_el$10, createComponent(TextField, {
-      "class": "oasis-editor-font-dialog-kerning-input",
-      get value() {
-        return ctrl.advancedTabValues().kerningThreshold;
-      },
-      get disabled() {
-        return !ctrl.advancedTabValues().kerningEnabled;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("kerningThreshold", value),
-      "data-testid": "editor-font-dialog-advanced-kerning"
-    }), _el$11);
-    insert(_el$11, () => t("dialog.font.advancedKerningAbove"));
-    insert(_el$13, () => t("dialog.font.advancedOpenTypeGroup"));
-    insert(_el$15, () => t("dialog.font.advancedLigatures"));
-    insert(_el$14, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().ligatures;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("ligatures", value),
-      "data-testid": "editor-font-dialog-advanced-ligatures",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "none",
-          label: t("dialog.font.advancedLigaturesNone")
-        }, {
-          value: "standard",
-          label: t("dialog.font.advancedLigaturesStandard")
-        }, {
-          value: "contextual",
-          label: t("dialog.font.advancedLigaturesContextual")
-        }, {
-          value: "historical",
-          label: t("dialog.font.advancedLigaturesHistorical")
-        }, {
-          value: "standardContextual",
-          label: t("dialog.font.advancedLigaturesStandardContextual")
-        }];
-      }
-    }), null);
-    insert(_el$17, () => t("dialog.font.advancedNumberSpacing"));
-    insert(_el$16, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().numberSpacing;
-      },
-      onChange: (value) => ctrl.updateAdvancedTab("numberSpacing", value),
-      "data-testid": "editor-font-dialog-advanced-number-spacing",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "proportional",
-          label: t("dialog.font.advancedNumberSpacingProportional")
-        }, {
-          value: "tabular",
-          label: t("dialog.font.advancedNumberSpacingTabular")
-        }];
+      get children() {
+        return createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return [createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 4
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedScale");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().characterScale || "100";
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("characterScale", value),
+                  "data-testid": "editor-font-dialog-advanced-scale",
+                  get options() {
+                    return WORD_CHARACTER_SCALES.map((scale) => ({
+                      value: String(scale),
+                      label: `${scale}%`
+                    }));
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 8
+              },
+              get children() {
+                return createComponent(Grid, {
+                  container: true,
+                  spacing: 1.5,
+                  get children() {
+                    return [createComponent(Grid, {
+                      size: {
+                        xs: 12,
+                        md: 8
+                      },
+                      get children() {
+                        return createComponent(SelectField, {
+                          get label() {
+                            return t("dialog.font.advancedSpacing");
+                          },
+                          get value() {
+                            return ctrl.advancedTabValues().spacingMode;
+                          },
+                          onChange: (value) => ctrl.updateAdvancedTab("spacingMode", value),
+                          "data-testid": "editor-font-dialog-advanced-spacing-mode",
+                          get options() {
+                            return [{
+                              value: "normal",
+                              label: t("dialog.font.advancedNormal")
+                            }, {
+                              value: "expanded",
+                              label: t("dialog.font.advancedExpanded")
+                            }, {
+                              value: "condensed",
+                              label: t("dialog.font.advancedCondensed")
+                            }];
+                          }
+                        });
+                      }
+                    }), createComponent(Grid, {
+                      size: {
+                        xs: 12,
+                        md: 4
+                      },
+                      get children() {
+                        return createComponent(TextField, {
+                          "class": "oasis-editor-font-dialog-small-input",
+                          get label() {
+                            return t("dialog.font.advancedBy");
+                          },
+                          get value() {
+                            return ctrl.advancedTabValues().spacingAmount;
+                          },
+                          get disabled() {
+                            return ctrl.advancedTabValues().spacingMode === "normal";
+                          },
+                          onChange: (value) => ctrl.updateAdvancedTab("spacingAmount", value),
+                          "data-testid": "editor-font-dialog-advanced-spacing-amount"
+                        });
+                      }
+                    })];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 8
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedPosition");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().positionMode;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("positionMode", value),
+                  "data-testid": "editor-font-dialog-advanced-position-mode",
+                  get options() {
+                    return [{
+                      value: "normal",
+                      label: t("dialog.font.advancedNormal")
+                    }, {
+                      value: "raised",
+                      label: t("dialog.font.advancedRaised")
+                    }, {
+                      value: "lowered",
+                      label: t("dialog.font.advancedLowered")
+                    }];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 4
+              },
+              get children() {
+                return createComponent(TextField, {
+                  "class": "oasis-editor-font-dialog-small-input",
+                  get label() {
+                    return t("dialog.font.advancedBy");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().positionAmount;
+                  },
+                  get disabled() {
+                    return ctrl.advancedTabValues().positionMode === "normal";
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("positionAmount", value),
+                  "data-testid": "editor-font-dialog-advanced-position-amount"
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 4
+              },
+              get children() {
+                return createComponent(Checkbox, {
+                  "class": "oasis-editor-font-dialog-kerning-toggle",
+                  get label() {
+                    return t("dialog.font.advancedKerning");
+                  },
+                  get checked() {
+                    return ctrl.advancedTabValues().kerningEnabled;
+                  },
+                  onChange: (checked) => ctrl.setAdvancedTabValues((current) => ({
+                    ...current,
+                    kerningEnabled: checked,
+                    kerningThreshold: checked ? current.kerningThreshold || "1" : current.kerningThreshold
+                  })),
+                  "data-testid": "editor-font-dialog-advanced-kerning-enabled"
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 4
+              },
+              get children() {
+                return createComponent(TextField, {
+                  "class": "oasis-editor-font-dialog-kerning-input",
+                  get value() {
+                    return ctrl.advancedTabValues().kerningThreshold;
+                  },
+                  get disabled() {
+                    return !ctrl.advancedTabValues().kerningEnabled;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("kerningThreshold", value),
+                  "data-testid": "editor-font-dialog-advanced-kerning"
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 4
+              },
+              get children() {
+                return createComponent(StatusText, {
+                  "class": "oasis-editor-dialog-help-text oasis-editor-font-dialog-kerning-suffix",
+                  get children() {
+                    return t("dialog.font.advancedKerningAbove");
+                  }
+                });
+              }
+            })];
+          }
+        });
       }
     }), null);
-    insert(_el$19, () => t("dialog.font.advancedNumberForm"));
-    insert(_el$18, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().numberForm;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedOpenTypeGroup");
       },
-      onChange: (value) => ctrl.updateAdvancedTab("numberForm", value),
-      "data-testid": "editor-font-dialog-advanced-number-form",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, {
-          value: "lining",
-          label: t("dialog.font.advancedNumberFormLining")
-        }, {
-          value: "oldStyle",
-          label: t("dialog.font.advancedNumberFormOldStyle")
-        }];
+      get children() {
+        return [createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return [createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedLigatures");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().ligatures;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("ligatures", value),
+                  "data-testid": "editor-font-dialog-advanced-ligatures",
+                  get options() {
+                    return [{
+                      value: "",
+                      label: t("dialog.font.advancedDefault")
+                    }, {
+                      value: "none",
+                      label: t("dialog.font.advancedLigaturesNone")
+                    }, {
+                      value: "standard",
+                      label: t("dialog.font.advancedLigaturesStandard")
+                    }, {
+                      value: "contextual",
+                      label: t("dialog.font.advancedLigaturesContextual")
+                    }, {
+                      value: "historical",
+                      label: t("dialog.font.advancedLigaturesHistorical")
+                    }, {
+                      value: "standardContextual",
+                      label: t("dialog.font.advancedLigaturesStandardContextual")
+                    }];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedNumberSpacing");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().numberSpacing;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("numberSpacing", value),
+                  "data-testid": "editor-font-dialog-advanced-number-spacing",
+                  get options() {
+                    return [{
+                      value: "",
+                      label: t("dialog.font.advancedDefault")
+                    }, {
+                      value: "proportional",
+                      label: t("dialog.font.advancedNumberSpacingProportional")
+                    }, {
+                      value: "tabular",
+                      label: t("dialog.font.advancedNumberSpacingTabular")
+                    }];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedNumberForm");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().numberForm;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("numberForm", value),
+                  "data-testid": "editor-font-dialog-advanced-number-form",
+                  get options() {
+                    return [{
+                      value: "",
+                      label: t("dialog.font.advancedDefault")
+                    }, {
+                      value: "lining",
+                      label: t("dialog.font.advancedNumberFormLining")
+                    }, {
+                      value: "oldStyle",
+                      label: t("dialog.font.advancedNumberFormOldStyle")
+                    }];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("dialog.font.advancedStylisticSet");
+                  },
+                  get value() {
+                    return ctrl.advancedTabValues().stylisticSet;
+                  },
+                  onChange: (value) => ctrl.updateAdvancedTab("stylisticSet", value),
+                  "data-testid": "editor-font-dialog-advanced-stylistic-set",
+                  get options() {
+                    return [{
+                      value: "",
+                      label: t("dialog.font.advancedDefault")
+                    }, ...Array.from({
+                      length: 20
+                    }, (_, index) => index + 1).map((set) => ({
+                      value: String(set),
+                      label: String(set)
+                    }))];
+                  }
+                });
+              }
+            })];
+          }
+        }), createComponent(Checkbox, {
+          "class": "oasis-editor-font-dialog-contextual-toggle",
+          get label() {
+            return t("dialog.font.advancedContextualAlternates");
+          },
+          get checked() {
+            return ctrl.advancedTabValues().contextualAlternates;
+          },
+          onChange: (checked) => ctrl.updateAdvancedTab("contextualAlternates", checked),
+          "data-testid": "editor-font-dialog-advanced-contextual-alternates"
+        })];
       }
     }), null);
-    insert(_el$21, () => t("dialog.font.advancedStylisticSet"));
-    insert(_el$20, createComponent(SelectField, {
-      get value() {
-        return ctrl.advancedTabValues().stylisticSet;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("dialog.font.advancedPreviewGroup");
       },
-      onChange: (value) => ctrl.updateAdvancedTab("stylisticSet", value),
-      "data-testid": "editor-font-dialog-advanced-stylistic-set",
-      get options() {
-        return [{
-          value: "",
-          label: t("dialog.font.advancedDefault")
-        }, ...Array.from({
-          length: 20
-        }, (_, index) => index + 1).map((set) => ({
-          value: String(set),
-          label: String(set)
-        }))];
+      get children() {
+        return createComponent(FontPreview, {
+          "class": "oasis-editor-dialog-preview oasis-editor-font-dialog-advanced-preview",
+          testId: "editor-font-dialog-advanced-preview",
+          get style() {
+            return ctrl.previewStyle();
+          }
+        });
       }
     }), null);
-    insert(_el$12, createComponent(Checkbox, {
-      "class": "oasis-editor-font-dialog-contextual-toggle",
-      get label() {
-        return t("dialog.font.advancedContextualAlternates");
-      },
-      get checked() {
-        return ctrl.advancedTabValues().contextualAlternates;
-      },
-      onChange: (checked) => ctrl.updateAdvancedTab("contextualAlternates", checked),
-      "data-testid": "editor-font-dialog-advanced-contextual-alternates"
-    }), null);
-    insert(_el$23, () => t("dialog.font.advancedPreviewGroup"));
-    insert(_el$22, createComponent(FontPreview, {
-      "class": "oasis-editor-dialog-preview oasis-editor-font-dialog-advanced-preview",
-      testId: "editor-font-dialog-advanced-preview",
-      get style() {
-        return ctrl.previewStyle();
+    insert(_el$, createComponent(StatusText, {
+      as: "p",
+      "class": "oasis-editor-dialog-help-text",
+      "data-testid": "editor-font-dialog-advanced-placeholder",
+      get children() {
+        return ctrl.advancedValidationError() || t("dialog.font.advancedPlaceholder");
       }
     }), null);
-    insert(_el$24, () => ctrl.advancedValidationError() || t("dialog.font.advancedPlaceholder"));
     return _el$;
   })();
 }
@@ -32686,7 +32849,7 @@ function FontDialog(props) {
     }
   });
 }
-var _tmpl$$a = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-border-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-paragraph-dialog-shading>`), _tmpl$2$2 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row><div class="oasis-editor-dialog-input-group oasis-editor-dialog-input-group-grow"><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-style-row>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><div class=oasis-editor-dialog-preview data-testid=editor-paragraph-dialog-preview>`);
+var _tmpl$$a = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-preview data-testid=editor-paragraph-dialog-preview>`);
 const DEFAULT_BORDER_WIDTH_PT$1 = 0.5;
 const DEFAULT_BORDER_COLOR$1 = "#000000";
 function parseNumber$1(value) {
@@ -32830,271 +32993,398 @@ function ParagraphDialog(props) {
       });
     },
     get children() {
-      return [createComponent(FieldRow, {
+      return [createComponent(Grid, {
+        container: true,
+        spacing: 1.5,
         get children() {
-          return createComponent(SelectField, {
-            get label() {
-              return t("paragraph.alignLabel");
-            },
-            get value() {
-              return align();
+          return createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            onChange: setAlign,
-            "data-testid": "editor-paragraph-dialog-align",
-            get options() {
-              return [{
-                value: "left",
-                label: t("paragraph.alignLeft")
-              }, {
-                value: "center",
-                label: t("paragraph.alignCenter")
-              }, {
-                value: "right",
-                label: t("paragraph.alignRight")
-              }, {
-                value: "justify",
-                label: t("paragraph.alignJustify")
-              }];
+            get children() {
+              return createComponent(SelectField, {
+                get label() {
+                  return t("paragraph.alignLabel");
+                },
+                get value() {
+                  return align();
+                },
+                onChange: setAlign,
+                "data-testid": "editor-paragraph-dialog-align",
+                get options() {
+                  return [{
+                    value: "left",
+                    label: t("paragraph.alignLeft")
+                  }, {
+                    value: "center",
+                    label: t("paragraph.alignCenter")
+                  }, {
+                    value: "right",
+                    label: t("paragraph.alignRight")
+                  }, {
+                    value: "justify",
+                    label: t("paragraph.alignJustify")
+                  }];
+                }
+              });
             }
           });
         }
-      }), createComponent(FieldRow, {
+      }), createComponent(Grid, {
+        container: true,
+        spacing: 1.5,
         get children() {
-          return [createComponent(NumberField, {
-            get label() {
-              return t("paragraph.indentLeftLabel");
-            },
-            step: "1",
-            get value() {
-              return indentLeft() ?? "";
-            },
-            onChange: setIndentLeft,
-            "data-testid": "editor-paragraph-dialog-indent-left"
-          }), createComponent(NumberField, {
-            get label() {
-              return t("paragraph.indentRightLabel");
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            step: "1",
-            get value() {
-              return indentRight() ?? "";
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.indentLeftLabel");
+                },
+                step: "1",
+                get value() {
+                  return indentLeft() ?? "";
+                },
+                onChange: setIndentLeft,
+                "data-testid": "editor-paragraph-dialog-indent-left"
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            onChange: setIndentRight,
-            "data-testid": "editor-paragraph-dialog-indent-right"
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.indentRightLabel");
+                },
+                step: "1",
+                get value() {
+                  return indentRight() ?? "";
+                },
+                onChange: setIndentRight,
+                "data-testid": "editor-paragraph-dialog-indent-right"
+              });
+            }
           })];
         }
-      }), createComponent(FieldRow, {
+      }), createComponent(Grid, {
+        container: true,
+        spacing: 1.5,
         get children() {
-          return [createComponent(SelectField, {
-            get label() {
-              return t("paragraph.specialLabel");
-            },
-            get value() {
-              return special();
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            onChange: (value) => {
-              const next = value;
-              setSpecial(next);
-              if (next === "none") setSpecialBy(null);
+            get children() {
+              return createComponent(SelectField, {
+                get label() {
+                  return t("paragraph.specialLabel");
+                },
+                get value() {
+                  return special();
+                },
+                onChange: (value) => {
+                  const next = value;
+                  setSpecial(next);
+                  if (next === "none") setSpecialBy(null);
+                },
+                "data-testid": "editor-paragraph-dialog-special",
+                get options() {
+                  return [{
+                    value: "none",
+                    label: t("paragraph.specialNone")
+                  }, {
+                    value: "firstLine",
+                    label: t("paragraph.specialFirstLine")
+                  }, {
+                    value: "hanging",
+                    label: t("paragraph.specialHanging")
+                  }];
+                }
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            "data-testid": "editor-paragraph-dialog-special",
-            get options() {
-              return [{
-                value: "none",
-                label: t("paragraph.specialNone")
-              }, {
-                value: "firstLine",
-                label: t("paragraph.specialFirstLine")
-              }, {
-                value: "hanging",
-                label: t("paragraph.specialHanging")
-              }];
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.specialByLabel");
+                },
+                min: "0",
+                step: "1",
+                get disabled() {
+                  return special() === "none";
+                },
+                get value() {
+                  return specialBy() ?? "";
+                },
+                onChange: setSpecialBy,
+                "data-testid": "editor-paragraph-dialog-special-by"
+              });
             }
-          }), createComponent(NumberField, {
-            get label() {
-              return t("paragraph.specialByLabel");
+          })];
+        }
+      }), createComponent(Grid, {
+        container: true,
+        spacing: 1.5,
+        get children() {
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 4
             },
-            min: "0",
-            step: "1",
-            get disabled() {
-              return special() === "none";
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.spacingBeforeLabel");
+                },
+                min: "0",
+                step: "1",
+                get value() {
+                  return spacingBefore() ?? "";
+                },
+                onChange: setSpacingBefore,
+                "data-testid": "editor-paragraph-dialog-spacing-before"
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 4
             },
-            get value() {
-              return specialBy() ?? "";
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.spacingAfterLabel");
+                },
+                min: "0",
+                step: "1",
+                get value() {
+                  return spacingAfter() ?? "";
+                },
+                onChange: setSpacingAfter,
+                "data-testid": "editor-paragraph-dialog-spacing-after"
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 4
             },
-            onChange: setSpecialBy,
-            "data-testid": "editor-paragraph-dialog-special-by"
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.lineSpacingLabel");
+                },
+                min: "0.5",
+                step: "0.05",
+                get value() {
+                  return lineHeight() ?? "";
+                },
+                onChange: setLineHeight,
+                "data-testid": "editor-paragraph-dialog-line-height"
+              });
+            }
           })];
         }
-      }), createComponent(FieldRow, {
+      }), createComponent(Grid, {
+        container: true,
+        spacing: 1.5,
         get children() {
-          return [createComponent(NumberField, {
-            get label() {
-              return t("paragraph.spacingBeforeLabel");
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 3
             },
-            min: "0",
-            step: "1",
-            get value() {
-              return spacingBefore() ?? "";
-            },
-            onChange: setSpacingBefore,
-            "data-testid": "editor-paragraph-dialog-spacing-before"
-          }), createComponent(NumberField, {
-            get label() {
-              return t("paragraph.spacingAfterLabel");
-            },
-            min: "0",
-            step: "1",
-            get value() {
-              return spacingAfter() ?? "";
+            get children() {
+              return createComponent(SelectField, {
+                get label() {
+                  return t("paragraph.borderStyleLabel");
+                },
+                get value() {
+                  return borderStyle();
+                },
+                onChange: (value) => {
+                  const next = value;
+                  setBorderStyle(next);
+                  if (next === "none") {
+                    setSideTop(false);
+                    setSideRight(false);
+                    setSideBottom(false);
+                    setSideLeft(false);
+                  } else if (!sideTop() && !sideRight() && !sideBottom() && !sideLeft()) {
+                    setSideTop(true);
+                    setSideRight(true);
+                    setSideBottom(true);
+                    setSideLeft(true);
+                  }
+                },
+                "data-testid": "editor-paragraph-dialog-border-style",
+                get options() {
+                  return [{
+                    value: "none",
+                    label: t("paragraph.borderNone")
+                  }, {
+                    value: "solid",
+                    label: t("paragraph.borderSolid")
+                  }, {
+                    value: "dashed",
+                    label: t("paragraph.borderDashed")
+                  }, {
+                    value: "dotted",
+                    label: t("paragraph.borderDotted")
+                  }];
+                }
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 3
             },
-            onChange: setSpacingAfter,
-            "data-testid": "editor-paragraph-dialog-spacing-after"
-          }), createComponent(NumberField, {
-            get label() {
-              return t("paragraph.lineSpacingLabel");
+            get children() {
+              return createComponent(NumberField, {
+                get label() {
+                  return t("paragraph.borderWidthLabel");
+                },
+                min: "0",
+                step: "0.25",
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get value() {
+                  return borderWidth() ?? "";
+                },
+                onChange: setBorderWidth,
+                "data-testid": "editor-paragraph-dialog-border-width"
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 3
             },
-            min: "0.5",
-            step: "0.05",
-            get value() {
-              return lineHeight() ?? "";
+            get children() {
+              return createComponent(ColorField, {
+                get label() {
+                  return t("paragraph.borderColorLabel");
+                },
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get value() {
+                  return borderColor() || DEFAULT_BORDER_COLOR$1;
+                },
+                onChange: setBorderColor,
+                "data-testid": "editor-paragraph-dialog-border-color"
+              });
+            }
+          }), createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 3
             },
-            onChange: setLineHeight,
-            "data-testid": "editor-paragraph-dialog-line-height"
+            get children() {
+              return createComponent(ColorField, {
+                get label() {
+                  return t("paragraph.shadingLabel");
+                },
+                get value() {
+                  return shading() || "#ffffff";
+                },
+                onChange: setShading,
+                "data-testid": "editor-paragraph-dialog-shading"
+              });
+            }
           })];
         }
-      }), (() => {
-        var _el$ = _tmpl$$a(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
-        insert(_el$, createComponent(SelectField, {
-          "class": "oasis-editor-dialog-input-group-grow",
-          get label() {
-            return t("paragraph.borderStyleLabel");
-          },
-          get value() {
-            return borderStyle();
-          },
-          onChange: (value) => {
-            const next = value;
-            setBorderStyle(next);
-            if (next === "none") {
-              setSideTop(false);
-              setSideRight(false);
-              setSideBottom(false);
-              setSideLeft(false);
-            } else if (!sideTop() && !sideRight() && !sideBottom() && !sideLeft()) {
-              setSideTop(true);
-              setSideRight(true);
-              setSideBottom(true);
-              setSideLeft(true);
+      }), createComponent(FormField, {
+        "class": "oasis-editor-dialog-input-group-grow",
+        get label() {
+          return t("paragraph.borderSidesLabel");
+        },
+        get children() {
+          return createComponent(Stack, {
+            "class": "oasis-editor-dialog-style-row",
+            direction: "row",
+            spacing: 1,
+            get children() {
+              return [createComponent(Checkbox, {
+                get label() {
+                  return t("paragraph.borderSideTop");
+                },
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get checked() {
+                  return sideTop();
+                },
+                onChange: setSideTop,
+                "data-testid": "editor-paragraph-dialog-border-side-top"
+              }), createComponent(Checkbox, {
+                get label() {
+                  return t("paragraph.borderSideRight");
+                },
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get checked() {
+                  return sideRight();
+                },
+                onChange: setSideRight,
+                "data-testid": "editor-paragraph-dialog-border-side-right"
+              }), createComponent(Checkbox, {
+                get label() {
+                  return t("paragraph.borderSideBottom");
+                },
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get checked() {
+                  return sideBottom();
+                },
+                onChange: setSideBottom,
+                "data-testid": "editor-paragraph-dialog-border-side-bottom"
+              }), createComponent(Checkbox, {
+                get label() {
+                  return t("paragraph.borderSideLeft");
+                },
+                get disabled() {
+                  return borderStyle() === "none";
+                },
+                get checked() {
+                  return sideLeft();
+                },
+                onChange: setSideLeft,
+                "data-testid": "editor-paragraph-dialog-border-side-left"
+              })];
             }
-          },
-          "data-testid": "editor-paragraph-dialog-border-style",
-          get options() {
-            return [{
-              value: "none",
-              label: t("paragraph.borderNone")
-            }, {
-              value: "solid",
-              label: t("paragraph.borderSolid")
-            }, {
-              value: "dashed",
-              label: t("paragraph.borderDashed")
-            }, {
-              value: "dotted",
-              label: t("paragraph.borderDotted")
-            }];
-          }
-        }), _el$2);
-        insert(_el$, createComponent(NumberField, {
-          "class": "oasis-editor-dialog-input-group-grow",
-          get label() {
-            return t("paragraph.borderWidthLabel");
-          },
-          min: "0",
-          step: "0.25",
-          get disabled() {
-            return borderStyle() === "none";
-          },
-          get value() {
-            return borderWidth() ?? "";
-          },
-          onChange: setBorderWidth,
-          "data-testid": "editor-paragraph-dialog-border-width"
-        }), _el$2);
-        insert(_el$3, () => t("paragraph.borderColorLabel"));
-        _el$4.$$input = (e) => setBorderColor(e.currentTarget.value);
-        insert(_el$6, () => t("paragraph.shadingLabel"));
-        _el$7.$$input = (e) => setShading(e.currentTarget.value);
-        createRenderEffect(() => _el$4.disabled = borderStyle() === "none");
-        createRenderEffect(() => _el$4.value = borderColor() || DEFAULT_BORDER_COLOR$1);
-        createRenderEffect(() => _el$7.value = shading() || "#ffffff");
-        return _el$;
-      })(), (() => {
-        var _el$8 = _tmpl$2$2(), _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling;
-        insert(_el$0, () => t("paragraph.borderSidesLabel"));
-        insert(_el$1, createComponent(Checkbox, {
-          get label() {
-            return t("paragraph.borderSideTop");
-          },
-          get disabled() {
-            return borderStyle() === "none";
-          },
-          get checked() {
-            return sideTop();
-          },
-          onChange: setSideTop,
-          "data-testid": "editor-paragraph-dialog-border-side-top"
-        }), null);
-        insert(_el$1, createComponent(Checkbox, {
-          get label() {
-            return t("paragraph.borderSideRight");
-          },
-          get disabled() {
-            return borderStyle() === "none";
-          },
-          get checked() {
-            return sideRight();
-          },
-          onChange: setSideRight,
-          "data-testid": "editor-paragraph-dialog-border-side-right"
-        }), null);
-        insert(_el$1, createComponent(Checkbox, {
-          get label() {
-            return t("paragraph.borderSideBottom");
-          },
-          get disabled() {
-            return borderStyle() === "none";
-          },
-          get checked() {
-            return sideBottom();
-          },
-          onChange: setSideBottom,
-          "data-testid": "editor-paragraph-dialog-border-side-bottom"
-        }), null);
-        insert(_el$1, createComponent(Checkbox, {
-          get label() {
-            return t("paragraph.borderSideLeft");
-          },
-          get disabled() {
-            return borderStyle() === "none";
-          },
-          get checked() {
-            return sideLeft();
-          },
-          onChange: setSideLeft,
-          "data-testid": "editor-paragraph-dialog-border-side-left"
-        }), null);
-        return _el$8;
-      })(), (() => {
-        var _el$10 = _tmpl$3$1(), _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling;
-        insert(_el$11, () => t("paragraph.preview"));
-        insert(_el$12, () => t("paragraph.previewText"));
-        createRenderEffect((_$p) => style(_el$12, previewStyle(), _$p));
-        return _el$10;
-      })()];
+          });
+        }
+      }), createComponent(FormField, {
+        get label() {
+          return t("paragraph.preview");
+        },
+        get children() {
+          var _el$ = _tmpl$$a();
+          insert(_el$, () => t("paragraph.previewText"));
+          createRenderEffect((_$p) => style(_el$, previewStyle(), _$p));
+          return _el$;
+        }
+      })];
     }
   });
 }
-delegateEvents(["input"]);
 const DEFAULT_BORDER_WIDTH_PT = 0.5;
 const DEFAULT_BORDER_COLOR = "#000000";
 function parseNumber(value) {
@@ -33303,271 +33593,433 @@ function NumField(label, value, setter, testId, disabled = false, allowNegative
     "data-testid": testId
   });
 }
-var _tmpl$$9 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row>`);
+var _tmpl$$9 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function TableTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$2$1(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling, _el$8 = _el$5.nextSibling, _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
-    insert(_el$3, () => t("table.sizeSection"));
-    insert(_el$4, () => NumField(t("table.preferredWidth"), () => form().tableWidth, (v) => set("tableWidth", v), "editor-table-properties-table-width"), null);
-    insert(_el$4, createComponent(SelectField, {
-      get label() {
-        return t("table.measureIn");
+    var _el$ = _tmpl$$9();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.sizeSection");
       },
-      get value() {
-        return form().tableWidthUnit;
-      },
-      onChange: (value) => set("tableWidthUnit", value),
-      "data-testid": "editor-table-properties-table-width-unit",
-      get options() {
-        return [{
-          value: "points",
-          label: t("table.points")
-        }, {
-          value: "percent",
-          label: t("table.percent")
-        }];
+      get children() {
+        return createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return [createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return NumField(t("table.preferredWidth"), () => form().tableWidth, (v) => set("tableWidth", v), "editor-table-properties-table-width");
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("table.measureIn");
+                  },
+                  get value() {
+                    return form().tableWidthUnit;
+                  },
+                  onChange: (value) => set("tableWidthUnit", value),
+                  "data-testid": "editor-table-properties-table-width-unit",
+                  get options() {
+                    return [{
+                      value: "points",
+                      label: t("table.points")
+                    }, {
+                      value: "percent",
+                      label: t("table.percent")
+                    }];
+                  }
+                });
+              }
+            })];
+          }
+        });
       }
     }), null);
-    insert(_el$6, () => t("table.alignmentSection"));
-    insert(_el$5, createComponent(RadioGroup, {
-      "class": "oasis-editor-dialog-style-row",
-      name: "table-align",
-      get value() {
-        return form().tableAlign;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.alignmentSection");
       },
-      onChange: (value) => set("tableAlign", value),
       get children() {
-        return ["left", "center", "right"].map((align) => createComponent(Radio$1, {
-          value: align,
-          get label() {
-            return t(`table.align${align[0].toUpperCase()}${align.slice(1)}`);
+        return [createComponent(RadioGroup, {
+          "class": "oasis-editor-dialog-style-row",
+          name: "table-align",
+          get value() {
+            return form().tableAlign;
           },
-          "data-testid": `editor-table-properties-align-${align}`
-        }));
+          onChange: (value) => set("tableAlign", value),
+          get children() {
+            return ["left", "center", "right"].map((align) => createComponent(Radio$1, {
+              value: align,
+              get label() {
+                return t(`table.align${align[0].toUpperCase()}${align.slice(1)}`);
+              },
+              "data-testid": `editor-table-properties-align-${align}`
+            }));
+          }
+        }), createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 6
+              },
+              get children() {
+                return NumField(t("table.indentFromLeft"), () => form().tableIndentLeft, (v) => set("tableIndentLeft", v), "editor-table-properties-indent-left");
+              }
+            });
+          }
+        })];
       }
-    }), _el$7);
-    insert(_el$7, () => NumField(t("table.indentFromLeft"), () => form().tableIndentLeft, (v) => set("tableIndentLeft", v), "editor-table-properties-indent-left"));
-    insert(_el$9, () => t("table.textWrappingSection"));
-    insert(_el$0, createComponent(Checkbox, {
-      get label() {
-        return t("table.wrapNone");
-      },
-      get checked() {
-        return form().tableWrapping === "none";
-      },
-      onChange: () => set("tableWrapping", "none"),
-      "data-testid": "editor-table-properties-wrap-none"
-    }), null);
-    insert(_el$0, createComponent(Checkbox, {
-      get label() {
-        return t("table.wrapAround");
-      },
-      get checked() {
-        return form().tableWrapping === "around";
-      },
-      onChange: () => set("tableWrapping", "around"),
-      "data-testid": "editor-table-properties-wrap-around"
     }), null);
-    insert(_el$8, createComponent(Show, {
-      get when() {
-        return form().tableWrapping === "around";
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.textWrappingSection");
       },
       get children() {
-        return [(() => {
-          var _el$1 = _tmpl$$9();
-          insert(_el$1, createComponent(SelectField, {
-            "class": "oasis-editor-dialog-input-group-grow",
-            get label() {
-              return t("table.horizontalAnchor");
-            },
-            get value() {
-              return form().floatingHorizontalAnchor;
-            },
-            onChange: (value) => set("floatingHorizontalAnchor", value),
-            "data-testid": "editor-table-properties-floating-h-anchor",
-            get options() {
-              return [{
-                value: "margin",
-                label: t("table.anchorMargin")
-              }, {
-                value: "page",
-                label: t("table.anchorPage")
-              }, {
-                value: "text",
-                label: t("table.anchorText")
-              }];
-            }
-          }), null);
-          insert(_el$1, createComponent(SelectField, {
-            "class": "oasis-editor-dialog-input-group-grow",
-            get label() {
-              return t("table.verticalAnchor");
-            },
-            get value() {
-              return form().floatingVerticalAnchor;
-            },
-            onChange: (value) => set("floatingVerticalAnchor", value),
-            "data-testid": "editor-table-properties-floating-v-anchor",
-            get options() {
-              return [{
-                value: "margin",
-                label: t("table.anchorMargin")
-              }, {
-                value: "page",
-                label: t("table.anchorPage")
-              }, {
-                value: "text",
-                label: t("table.anchorText")
-              }];
-            }
-          }), null);
-          return _el$1;
-        })(), (() => {
-          var _el$10 = _tmpl$$9();
-          insert(_el$10, () => NumField(t("table.positionX"), () => form().floatingX, (v) => set("floatingX", v), "editor-table-properties-floating-x", Boolean(form().floatingXAlign), true), null);
-          insert(_el$10, () => NumField(t("table.positionY"), () => form().floatingY, (v) => set("floatingY", v), "editor-table-properties-floating-y", Boolean(form().floatingYAlign), true), null);
-          insert(_el$10, createComponent(SelectField, {
-            "class": "oasis-editor-dialog-input-group-grow",
-            get label() {
-              return t("table.horizontalAlignment");
-            },
-            get value() {
-              return form().floatingXAlign;
-            },
-            onChange: (value) => set("floatingXAlign", value),
-            "data-testid": "editor-table-properties-floating-x-align",
-            get options() {
-              return [{
-                value: "",
-                label: t("table.explicitOffset")
-              }, ...["left", "center", "right", "inside", "outside"].map((value) => ({
-                value,
-                label: value
-              }))];
-            }
-          }), null);
-          insert(_el$10, createComponent(SelectField, {
-            "class": "oasis-editor-dialog-input-group-grow",
-            get label() {
-              return t("table.verticalAlignment");
-            },
-            get value() {
-              return form().floatingYAlign;
-            },
-            onChange: (value) => set("floatingYAlign", value),
-            "data-testid": "editor-table-properties-floating-y-align",
-            get options() {
-              return [{
-                value: "",
-                label: t("table.explicitOffset")
-              }, ...["top", "center", "bottom", "inside", "outside"].map((value) => ({
-                value,
-                label: value
-              }))];
-            }
-          }), null);
-          return _el$10;
-        })(), (() => {
-          var _el$11 = _tmpl$$9();
-          insert(_el$11, () => NumField(t("table.distanceTop"), () => form().floatingDistanceTop, (v) => set("floatingDistanceTop", v), "editor-table-properties-floating-distance-top"), null);
-          insert(_el$11, () => NumField(t("table.distanceRight"), () => form().floatingDistanceRight, (v) => set("floatingDistanceRight", v), "editor-table-properties-floating-distance-right"), null);
-          insert(_el$11, () => NumField(t("table.distanceBottom"), () => form().floatingDistanceBottom, (v) => set("floatingDistanceBottom", v), "editor-table-properties-floating-distance-bottom"), null);
-          insert(_el$11, () => NumField(t("table.distanceLeft"), () => form().floatingDistanceLeft, (v) => set("floatingDistanceLeft", v), "editor-table-properties-floating-distance-left"), null);
-          return _el$11;
-        })(), createComponent(Checkbox, {
-          get label() {
-            return t("table.allowOverlap");
-          },
-          get checked() {
-            return form().floatingOverlap === "overlap";
+        return [createComponent(Stack, {
+          "class": "oasis-editor-dialog-style-row",
+          direction: "row",
+          spacing: 1,
+          get children() {
+            return [createComponent(Checkbox, {
+              get label() {
+                return t("table.wrapNone");
+              },
+              get checked() {
+                return form().tableWrapping === "none";
+              },
+              onChange: () => set("tableWrapping", "none"),
+              "data-testid": "editor-table-properties-wrap-none"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.wrapAround");
+              },
+              get checked() {
+                return form().tableWrapping === "around";
+              },
+              onChange: () => set("tableWrapping", "around"),
+              "data-testid": "editor-table-properties-wrap-around"
+            })];
+          }
+        }), createComponent(Show, {
+          get when() {
+            return form().tableWrapping === "around";
           },
-          onChange: (value) => set("floatingOverlap", value ? "overlap" : "never"),
-          "data-testid": "editor-table-properties-floating-overlap"
+          get children() {
+            return [createComponent(Grid, {
+              container: true,
+              spacing: 1.5,
+              get children() {
+                return [createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 6
+                  },
+                  get children() {
+                    return createComponent(SelectField, {
+                      get label() {
+                        return t("table.horizontalAnchor");
+                      },
+                      get value() {
+                        return form().floatingHorizontalAnchor;
+                      },
+                      onChange: (value) => set("floatingHorizontalAnchor", value),
+                      "data-testid": "editor-table-properties-floating-h-anchor",
+                      get options() {
+                        return [{
+                          value: "margin",
+                          label: t("table.anchorMargin")
+                        }, {
+                          value: "page",
+                          label: t("table.anchorPage")
+                        }, {
+                          value: "text",
+                          label: t("table.anchorText")
+                        }];
+                      }
+                    });
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 6
+                  },
+                  get children() {
+                    return createComponent(SelectField, {
+                      get label() {
+                        return t("table.verticalAnchor");
+                      },
+                      get value() {
+                        return form().floatingVerticalAnchor;
+                      },
+                      onChange: (value) => set("floatingVerticalAnchor", value),
+                      "data-testid": "editor-table-properties-floating-v-anchor",
+                      get options() {
+                        return [{
+                          value: "margin",
+                          label: t("table.anchorMargin")
+                        }, {
+                          value: "page",
+                          label: t("table.anchorPage")
+                        }, {
+                          value: "text",
+                          label: t("table.anchorText")
+                        }];
+                      }
+                    });
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.positionX"), () => form().floatingX, (v) => set("floatingX", v), "editor-table-properties-floating-x", Boolean(form().floatingXAlign), true);
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.positionY"), () => form().floatingY, (v) => set("floatingY", v), "editor-table-properties-floating-y", Boolean(form().floatingYAlign), true);
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return createComponent(SelectField, {
+                      get label() {
+                        return t("table.horizontalAlignment");
+                      },
+                      get value() {
+                        return form().floatingXAlign;
+                      },
+                      onChange: (value) => set("floatingXAlign", value),
+                      "data-testid": "editor-table-properties-floating-x-align",
+                      get options() {
+                        return [{
+                          value: "",
+                          label: t("table.explicitOffset")
+                        }, ...["left", "center", "right", "inside", "outside"].map((value) => ({
+                          value,
+                          label: value
+                        }))];
+                      }
+                    });
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return createComponent(SelectField, {
+                      get label() {
+                        return t("table.verticalAlignment");
+                      },
+                      get value() {
+                        return form().floatingYAlign;
+                      },
+                      onChange: (value) => set("floatingYAlign", value),
+                      "data-testid": "editor-table-properties-floating-y-align",
+                      get options() {
+                        return [{
+                          value: "",
+                          label: t("table.explicitOffset")
+                        }, ...["top", "center", "bottom", "inside", "outside"].map((value) => ({
+                          value,
+                          label: value
+                        }))];
+                      }
+                    });
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.distanceTop"), () => form().floatingDistanceTop, (v) => set("floatingDistanceTop", v), "editor-table-properties-floating-distance-top");
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.distanceRight"), () => form().floatingDistanceRight, (v) => set("floatingDistanceRight", v), "editor-table-properties-floating-distance-right");
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.distanceBottom"), () => form().floatingDistanceBottom, (v) => set("floatingDistanceBottom", v), "editor-table-properties-floating-distance-bottom");
+                  }
+                }), createComponent(Grid, {
+                  size: {
+                    xs: 12,
+                    md: 3
+                  },
+                  get children() {
+                    return NumField(t("table.distanceLeft"), () => form().floatingDistanceLeft, (v) => set("floatingDistanceLeft", v), "editor-table-properties-floating-distance-left");
+                  }
+                })];
+              }
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.allowOverlap");
+              },
+              get checked() {
+                return form().floatingOverlap === "overlap";
+              },
+              onChange: (value) => set("floatingOverlap", value ? "overlap" : "never"),
+              "data-testid": "editor-table-properties-floating-overlap"
+            })];
+          }
         })];
       }
     }), null);
     return _el$;
   })();
 }
-var _tmpl$$8 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row></div><div class=oasis-editor-dialog-style-row>`);
+var _tmpl$$8 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function RowTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-    insert(_el$2, () => NumField(t("table.rowHeight"), () => form().rowHeight, (v) => set("rowHeight", v), "editor-table-properties-row-height"), null);
-    insert(_el$2, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("table.rowHeightRule");
-      },
-      get value() {
-        return form().rowHeightRule;
-      },
-      onChange: (value) => set("rowHeightRule", value),
-      "data-testid": "editor-table-properties-row-height-rule",
-      get options() {
-        return [{
-          value: "",
-          label: t("table.rowAuto")
-        }, {
-          value: "atLeast",
-          label: t("table.rowAtLeast")
-        }, {
-          value: "exact",
-          label: t("table.rowExactly")
-        }];
+    var _el$ = _tmpl$$8();
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      get children() {
+        return [createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 6
+          },
+          get children() {
+            return NumField(t("table.rowHeight"), () => form().rowHeight, (v) => set("rowHeight", v), "editor-table-properties-row-height");
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 6
+          },
+          get children() {
+            return createComponent(SelectField, {
+              get label() {
+                return t("table.rowHeightRule");
+              },
+              get value() {
+                return form().rowHeightRule;
+              },
+              onChange: (value) => set("rowHeightRule", value),
+              "data-testid": "editor-table-properties-row-height-rule",
+              get options() {
+                return [{
+                  value: "",
+                  label: t("table.rowAuto")
+                }, {
+                  value: "atLeast",
+                  label: t("table.rowAtLeast")
+                }, {
+                  value: "exact",
+                  label: t("table.rowExactly")
+                }];
+              }
+            });
+          }
+        })];
       }
     }), null);
-    insert(_el$3, createComponent(Checkbox, {
-      get label() {
-        return t("table.repeatHeader");
-      },
-      get checked() {
-        return form().repeatHeader;
-      },
-      onChange: (v) => set("repeatHeader", v),
-      "data-testid": "editor-table-properties-repeat-header"
-    }), null);
-    insert(_el$3, createComponent(Checkbox, {
-      get label() {
-        return t("table.allowBreakAcrossPages");
-      },
-      get checked() {
-        return form().allowBreakAcrossPages;
-      },
-      onChange: (v) => set("allowBreakAcrossPages", v),
-      "data-testid": "editor-table-properties-allow-break"
-    }), null);
-    insert(_el$3, createComponent(Checkbox, {
-      get label() {
-        return t("table.hiddenRow");
-      },
-      get checked() {
-        return form().hiddenRow;
-      },
-      onChange: (v) => set("hiddenRow", v),
-      "data-testid": "editor-table-properties-hidden-row"
+    insert(_el$, createComponent(Stack, {
+      "class": "oasis-editor-dialog-style-row",
+      direction: "row",
+      spacing: 1,
+      get children() {
+        return [createComponent(Checkbox, {
+          get label() {
+            return t("table.repeatHeader");
+          },
+          get checked() {
+            return form().repeatHeader;
+          },
+          onChange: (v) => set("repeatHeader", v),
+          "data-testid": "editor-table-properties-repeat-header"
+        }), createComponent(Checkbox, {
+          get label() {
+            return t("table.allowBreakAcrossPages");
+          },
+          get checked() {
+            return form().allowBreakAcrossPages;
+          },
+          onChange: (v) => set("allowBreakAcrossPages", v),
+          "data-testid": "editor-table-properties-allow-break"
+        }), createComponent(Checkbox, {
+          get label() {
+            return t("table.hiddenRow");
+          },
+          get checked() {
+            return form().hiddenRow;
+          },
+          onChange: (v) => set("hiddenRow", v),
+          "data-testid": "editor-table-properties-hidden-row"
+        })];
+      }
     }), null);
     return _el$;
   })();
 }
-var _tmpl$$7 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row>`);
+var _tmpl$$7 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function ColumnTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$$7(), _el$2 = _el$.firstChild;
-    insert(_el$2, () => NumField(t("table.columnWidth"), () => form().columnWidth, (v) => set("columnWidth", v), "editor-table-properties-column-width"));
+    var _el$ = _tmpl$$7();
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      get children() {
+        return createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 6
+          },
+          get children() {
+            return NumField(t("table.columnWidth"), () => form().columnWidth, (v) => set("columnWidth", v), "editor-table-properties-column-width");
+          }
+        });
+      }
+    }));
     return _el$;
   })();
 }
-var _tmpl$$6 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row></div><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-style-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row></div></fieldset><fieldset class=oasis-editor-font-dialog-fieldset><legend></legend><div class=oasis-editor-dialog-row><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-table-properties-border-color></div><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><input type=color class=oasis-editor-dialog-input data-testid=editor-table-properties-shading></div></div><div class=oasis-editor-dialog-style-row></div><div class=oasis-editor-table-properties-cell-preview data-testid=editor-table-properties-cell-preview>`);
+var _tmpl$$6 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-cell-preview data-testid=editor-table-properties-cell-preview>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function CellTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
@@ -33585,278 +34037,409 @@ function CellTabPanel(props) {
   });
   const borderDisabled = () => form().borderStyle === "none";
   return (() => {
-    var _el$ = _tmpl$$6(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling, _el$6 = _el$3.nextSibling, _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling, _el$9 = _el$6.nextSibling, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$10.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$1.nextSibling, _el$17 = _el$16.nextSibling;
-    insert(_el$2, () => NumField(t("table.cellWidth"), () => form().cellWidth, (v) => set("cellWidth", v), "editor-table-properties-cell-width"), null);
-    insert(_el$2, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("table.verticalAlignment");
-      },
-      get value() {
-        return form().cellVerticalAlign;
-      },
-      onChange: (value) => set("cellVerticalAlign", value),
-      "data-testid": "editor-table-properties-cell-valign",
-      get options() {
-        return [{
-          value: "",
-          label: t("table.inherit")
-        }, {
-          value: "top",
-          label: t("table.valignTop")
-        }, {
-          value: "middle",
-          label: t("table.valignMiddle")
-        }, {
-          value: "bottom",
-          label: t("table.valignBottom")
-        }];
+    var _el$ = _tmpl$2$1();
+    insert(_el$, createComponent(Grid, {
+      container: true,
+      spacing: 1.5,
+      get children() {
+        return [createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return NumField(t("table.cellWidth"), () => form().cellWidth, (v) => set("cellWidth", v), "editor-table-properties-cell-width");
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(SelectField, {
+              get label() {
+                return t("table.verticalAlignment");
+              },
+              get value() {
+                return form().cellVerticalAlign;
+              },
+              onChange: (value) => set("cellVerticalAlign", value),
+              "data-testid": "editor-table-properties-cell-valign",
+              get options() {
+                return [{
+                  value: "",
+                  label: t("table.inherit")
+                }, {
+                  value: "top",
+                  label: t("table.valignTop")
+                }, {
+                  value: "middle",
+                  label: t("table.valignMiddle")
+                }, {
+                  value: "bottom",
+                  label: t("table.valignBottom")
+                }];
+              }
+            });
+          }
+        }), createComponent(Grid, {
+          size: {
+            xs: 12,
+            md: 4
+          },
+          get children() {
+            return createComponent(SelectField, {
+              get label() {
+                return t("table.textDirection");
+              },
+              get value() {
+                return form().cellTextDirection;
+              },
+              onChange: (value) => set("cellTextDirection", value),
+              "data-testid": "editor-table-properties-cell-direction",
+              get options() {
+                return [{
+                  value: "",
+                  label: t("table.inherit")
+                }, {
+                  value: "lrTb",
+                  label: "lrTb"
+                }, {
+                  value: "tbRl",
+                  label: "tbRl"
+                }, {
+                  value: "btLr",
+                  label: "btLr"
+                }, {
+                  value: "lrTbV",
+                  label: "lrTbV"
+                }, {
+                  value: "tbRlV",
+                  label: "tbRlV"
+                }];
+              }
+            });
+          }
+        })];
       }
     }), null);
-    insert(_el$2, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("table.textDirection");
-      },
-      get value() {
-        return form().cellTextDirection;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.options");
       },
-      onChange: (value) => set("cellTextDirection", value),
-      "data-testid": "editor-table-properties-cell-direction",
-      get options() {
-        return [{
-          value: "",
-          label: t("table.inherit")
-        }, {
-          value: "lrTb",
-          label: "lrTb"
-        }, {
-          value: "tbRl",
-          label: "tbRl"
-        }, {
-          value: "btLr",
-          label: "btLr"
-        }, {
-          value: "lrTbV",
-          label: "lrTbV"
-        }, {
-          value: "tbRlV",
-          label: "tbRlV"
-        }];
+      get children() {
+        return createComponent(Stack, {
+          "class": "oasis-editor-dialog-style-row",
+          direction: "row",
+          spacing: 1,
+          get children() {
+            return [createComponent(Checkbox, {
+              get label() {
+                return t("table.noWrap");
+              },
+              get checked() {
+                return form().cellNoWrap;
+              },
+              onChange: (v) => set("cellNoWrap", v),
+              "data-testid": "editor-table-properties-cell-nowrap"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.fitText");
+              },
+              get checked() {
+                return form().cellFitText;
+              },
+              onChange: (v) => set("cellFitText", v),
+              "data-testid": "editor-table-properties-cell-fit-text"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.hideMark");
+              },
+              get checked() {
+                return form().cellHideMark;
+              },
+              onChange: (v) => set("cellHideMark", v),
+              "data-testid": "editor-table-properties-cell-hide-mark"
+            })];
+          }
+        });
       }
     }), null);
-    insert(_el$4, () => t("table.options"));
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.noWrap");
-      },
-      get checked() {
-        return form().cellNoWrap;
-      },
-      onChange: (v) => set("cellNoWrap", v),
-      "data-testid": "editor-table-properties-cell-nowrap"
-    }), null);
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.fitText");
-      },
-      get checked() {
-        return form().cellFitText;
-      },
-      onChange: (v) => set("cellFitText", v),
-      "data-testid": "editor-table-properties-cell-fit-text"
-    }), null);
-    insert(_el$5, createComponent(Checkbox, {
-      get label() {
-        return t("table.hideMark");
-      },
-      get checked() {
-        return form().cellHideMark;
-      },
-      onChange: (v) => set("cellHideMark", v),
-      "data-testid": "editor-table-properties-cell-hide-mark"
-    }), null);
-    insert(_el$7, () => t("table.cellMargins"));
-    insert(_el$8, () => NumField(t("paragraph.borderSideTop"), () => form().marginTop, (v) => set("marginTop", v), "editor-table-properties-margin-top"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideRight"), () => form().marginRight, (v) => set("marginRight", v), "editor-table-properties-margin-right"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideBottom"), () => form().marginBottom, (v) => set("marginBottom", v), "editor-table-properties-margin-bottom"), null);
-    insert(_el$8, () => NumField(t("paragraph.borderSideLeft"), () => form().marginLeft, (v) => set("marginLeft", v), "editor-table-properties-margin-left"), null);
-    insert(_el$0, () => t("paragraph.bordersSection"));
-    insert(_el$1, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      get label() {
-        return t("paragraph.borderStyleLabel");
-      },
-      get value() {
-        return form().borderStyle;
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.cellMargins");
       },
-      onChange: (value) => {
-        const next = value;
-        set("borderStyle", next);
-        if (next === "none") {
-          set("borderTop", false);
-          set("borderRight", false);
-          set("borderBottom", false);
-          set("borderLeft", false);
-          set("borderStart", false);
-          set("borderEnd", false);
-          set("borderTlBr", false);
-          set("borderTrBl", false);
-        } else if (!form().borderTop && !form().borderRight && !form().borderBottom && !form().borderLeft) {
-          set("borderTop", true);
-          set("borderRight", true);
-          set("borderBottom", true);
-          set("borderLeft", true);
-        }
-      },
-      "data-testid": "editor-table-properties-border-style",
-      get options() {
-        return [{
-          value: "none",
-          label: t("paragraph.borderNone")
-        }, {
-          value: "solid",
-          label: t("paragraph.borderSolid")
-        }, {
-          value: "dashed",
-          label: t("paragraph.borderDashed")
-        }, {
-          value: "dotted",
-          label: t("paragraph.borderDotted")
-        }];
+      get children() {
+        return createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return [createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return NumField(t("paragraph.borderSideTop"), () => form().marginTop, (v) => set("marginTop", v), "editor-table-properties-margin-top");
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return NumField(t("paragraph.borderSideRight"), () => form().marginRight, (v) => set("marginRight", v), "editor-table-properties-margin-right");
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return NumField(t("paragraph.borderSideBottom"), () => form().marginBottom, (v) => set("marginBottom", v), "editor-table-properties-margin-bottom");
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return NumField(t("paragraph.borderSideLeft"), () => form().marginLeft, (v) => set("marginLeft", v), "editor-table-properties-margin-left");
+              }
+            })];
+          }
+        });
       }
-    }), _el$10);
-    insert(_el$1, () => NumField(t("paragraph.borderWidthLabel"), () => form().borderWidth, (v) => set("borderWidth", v), "editor-table-properties-border-width", borderDisabled()), _el$10);
-    insert(_el$11, () => t("paragraph.borderColorLabel"));
-    _el$12.$$input = (e) => set("borderColor", e.currentTarget.value);
-    insert(_el$14, () => t("paragraph.shadingLabel"));
-    _el$15.$$input = (e) => set("shading", e.currentTarget.value);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideTop");
-      },
-      get checked() {
-        return form().borderTop;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTop", v),
-      "data-testid": "editor-table-properties-border-top"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideRight");
-      },
-      get checked() {
-        return form().borderRight;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderRight", v),
-      "data-testid": "editor-table-properties-border-right"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideBottom");
-      },
-      get checked() {
-        return form().borderBottom;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderBottom", v),
-      "data-testid": "editor-table-properties-border-bottom"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("paragraph.borderSideLeft");
-      },
-      get checked() {
-        return form().borderLeft;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderLeft", v),
-      "data-testid": "editor-table-properties-border-left"
     }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderStart");
-      },
-      get checked() {
-        return form().borderStart;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderStart", v),
-      "data-testid": "editor-table-properties-border-start"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderEnd");
-      },
-      get checked() {
-        return form().borderEnd;
-      },
-      get disabled() {
-        return borderDisabled();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("paragraph.bordersSection");
       },
-      onChange: (v) => set("borderEnd", v),
-      "data-testid": "editor-table-properties-border-end"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderTlBr");
-      },
-      get checked() {
-        return form().borderTlBr;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTlBr", v),
-      "data-testid": "editor-table-properties-border-tlbr"
-    }), null);
-    insert(_el$16, createComponent(Checkbox, {
-      get label() {
-        return t("table.borderTrBl");
-      },
-      get checked() {
-        return form().borderTrBl;
-      },
-      get disabled() {
-        return borderDisabled();
-      },
-      onChange: (v) => set("borderTrBl", v),
-      "data-testid": "editor-table-properties-border-trbl"
+      get children() {
+        return [createComponent(Grid, {
+          container: true,
+          spacing: 1.5,
+          get children() {
+            return [createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return createComponent(SelectField, {
+                  get label() {
+                    return t("paragraph.borderStyleLabel");
+                  },
+                  get value() {
+                    return form().borderStyle;
+                  },
+                  onChange: (value) => {
+                    const next = value;
+                    set("borderStyle", next);
+                    if (next === "none") {
+                      set("borderTop", false);
+                      set("borderRight", false);
+                      set("borderBottom", false);
+                      set("borderLeft", false);
+                      set("borderStart", false);
+                      set("borderEnd", false);
+                      set("borderTlBr", false);
+                      set("borderTrBl", false);
+                    } else if (!form().borderTop && !form().borderRight && !form().borderBottom && !form().borderLeft) {
+                      set("borderTop", true);
+                      set("borderRight", true);
+                      set("borderBottom", true);
+                      set("borderLeft", true);
+                    }
+                  },
+                  "data-testid": "editor-table-properties-border-style",
+                  get options() {
+                    return [{
+                      value: "none",
+                      label: t("paragraph.borderNone")
+                    }, {
+                      value: "solid",
+                      label: t("paragraph.borderSolid")
+                    }, {
+                      value: "dashed",
+                      label: t("paragraph.borderDashed")
+                    }, {
+                      value: "dotted",
+                      label: t("paragraph.borderDotted")
+                    }];
+                  }
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return NumField(t("paragraph.borderWidthLabel"), () => form().borderWidth, (v) => set("borderWidth", v), "editor-table-properties-border-width", borderDisabled());
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return createComponent(ColorField, {
+                  get label() {
+                    return t("paragraph.borderColorLabel");
+                  },
+                  get value() {
+                    return form().borderColor || DEFAULT_BORDER_COLOR;
+                  },
+                  get disabled() {
+                    return borderDisabled();
+                  },
+                  onChange: (value) => set("borderColor", value),
+                  "data-testid": "editor-table-properties-border-color"
+                });
+              }
+            }), createComponent(Grid, {
+              size: {
+                xs: 12,
+                md: 3
+              },
+              get children() {
+                return createComponent(ColorField, {
+                  get label() {
+                    return t("paragraph.shadingLabel");
+                  },
+                  get value() {
+                    return form().shading || "#ffffff";
+                  },
+                  onChange: (value) => set("shading", value),
+                  "data-testid": "editor-table-properties-shading"
+                });
+              }
+            })];
+          }
+        }), createComponent(Stack, {
+          "class": "oasis-editor-dialog-style-row",
+          direction: "row",
+          spacing: 1,
+          get children() {
+            return [createComponent(Checkbox, {
+              get label() {
+                return t("paragraph.borderSideTop");
+              },
+              get checked() {
+                return form().borderTop;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderTop", v),
+              "data-testid": "editor-table-properties-border-top"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("paragraph.borderSideRight");
+              },
+              get checked() {
+                return form().borderRight;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderRight", v),
+              "data-testid": "editor-table-properties-border-right"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("paragraph.borderSideBottom");
+              },
+              get checked() {
+                return form().borderBottom;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderBottom", v),
+              "data-testid": "editor-table-properties-border-bottom"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("paragraph.borderSideLeft");
+              },
+              get checked() {
+                return form().borderLeft;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderLeft", v),
+              "data-testid": "editor-table-properties-border-left"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.borderStart");
+              },
+              get checked() {
+                return form().borderStart;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderStart", v),
+              "data-testid": "editor-table-properties-border-start"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.borderEnd");
+              },
+              get checked() {
+                return form().borderEnd;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderEnd", v),
+              "data-testid": "editor-table-properties-border-end"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.borderTlBr");
+              },
+              get checked() {
+                return form().borderTlBr;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderTlBr", v),
+              "data-testid": "editor-table-properties-border-tlbr"
+            }), createComponent(Checkbox, {
+              get label() {
+                return t("table.borderTrBl");
+              },
+              get checked() {
+                return form().borderTrBl;
+              },
+              get disabled() {
+                return borderDisabled();
+              },
+              onChange: (v) => set("borderTrBl", v),
+              "data-testid": "editor-table-properties-border-trbl"
+            })];
+          }
+        }), (() => {
+          var _el$2 = _tmpl$$6();
+          createRenderEffect((_$p) => style(_el$2, borderPreview(), _$p));
+          return _el$2;
+        })()];
+      }
     }), null);
-    createRenderEffect((_p$) => {
-      var _v$ = borderDisabled(), _v$2 = borderPreview();
-      _v$ !== _p$.e && (_el$12.disabled = _p$.e = _v$);
-      _p$.t = style(_el$17, _v$2, _p$.t);
-      return _p$;
-    }, {
-      e: void 0,
-      t: void 0
-    });
-    createRenderEffect(() => _el$12.value = form().borderColor || DEFAULT_BORDER_COLOR);
-    createRenderEffect(() => _el$15.value = form().shading || "#ffffff");
     return _el$;
   })();
 }
-delegateEvents(["input"]);
-var _tmpl$$5 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-input-group><label class=oasis-editor-dialog-label></label><textarea class="oasis-editor-ui-input oasis-editor-table-properties-textarea"data-testid=editor-table-properties-alt-description>`);
+var _tmpl$$5 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel>`);
 function AltTextTabPanel(props) {
   const t = useI18n();
   const form = () => props.ctrl.form;
   const set = props.ctrl.set;
   return (() => {
-    var _el$ = _tmpl$$5(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+    var _el$ = _tmpl$$5();
     insert(_el$, createComponent(TextField, {
       get label() {
         return t("table.altTitle");
@@ -33866,14 +34449,22 @@ function AltTextTabPanel(props) {
       },
       onChange: (v) => set("altTitle", v),
       "data-testid": "editor-table-properties-alt-title"
-    }), _el$2);
-    insert(_el$3, () => t("table.altDescription"));
-    _el$4.$$input = (e) => set("altDescription", e.currentTarget.value);
-    createRenderEffect(() => _el$4.value = form().altDescription);
+    }), null);
+    insert(_el$, createComponent(TextAreaField, {
+      "class": "oasis-editor-dialog-input-group",
+      get label() {
+        return t("table.altDescription");
+      },
+      controlClass: "oasis-editor-table-properties-textarea",
+      get value() {
+        return form().altDescription;
+      },
+      onChange: (value) => set("altDescription", value),
+      "data-testid": "editor-table-properties-alt-description"
+    }), null);
     return _el$;
   })();
 }
-delegateEvents(["input"]);
 function TablePropertiesDialog(props) {
   const t = useI18n();
   const ctrl = useTablePropertiesController(props);
@@ -33960,7 +34551,7 @@ function TablePropertiesDialog(props) {
     }
   });
 }
-var _tmpl$$4 = /* @__PURE__ */ template(`<div class=oasis-editor-find-replace-dialog><div class=oasis-editor-fr-header><span></span><button class=oasis-editor-fr-close><i data-lucide=x></i></button></div><div class=oasis-editor-fr-body><div class=oasis-editor-fr-input-group><div class=oasis-editor-fr-input-wrapper><input type=text autofocus class=oasis-editor-fr-input><span class=oasis-editor-fr-counter></span></div><div class=oasis-editor-fr-actions><button><i data-lucide=chevron-up></i></button><button><i data-lucide=chevron-down></i></button></div></div><div class=oasis-editor-fr-input-group><input type=text class=oasis-editor-fr-input><div class=oasis-editor-fr-actions><button class=oasis-editor-fr-btn-text></button><button class=oasis-editor-fr-btn-text></button></div></div><div class=oasis-editor-fr-options><label class=oasis-editor-fr-checkbox><input type=checkbox><span></span></label><label class=oasis-editor-fr-checkbox><input type=checkbox><span>`);
+var _tmpl$$4 = /* @__PURE__ */ template(`<div class=oasis-editor-find-replace-dialog><div class=oasis-editor-fr-header></div><div class=oasis-editor-fr-body><div class=oasis-editor-fr-input-group><div class=oasis-editor-fr-input-wrapper></div></div><div class=oasis-editor-fr-input-group>`);
 function FindReplaceDialog(props) {
   const t = useI18n();
   const {
@@ -33983,64 +34574,147 @@ function FindReplaceDialog(props) {
       return fr.isOpen();
     },
     get children() {
-      var _el$ = _tmpl$$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling, _el$0 = _el$7.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$6.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling, _el$14 = _el$13.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$11.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild, _el$19 = _el$18.nextSibling, _el$20 = _el$17.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling;
+      var _el$ = _tmpl$$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$4.nextSibling;
       _el$.$$keydown = handleKeyDown;
-      insert(_el$3, () => t("find.title"));
-      _el$4.$$click = () => fr.setIsOpen(false);
-      _el$8.$$input = (e) => fr.setSearchTerm(e.currentTarget.value);
-      insert(_el$9, (() => {
-        var _c$ = memo(() => fr.matches().length > 0);
-        return () => _c$() ? `${fr.currentIndex() + 1} / ${fr.matches().length}` : t("find.noMatches");
-      })());
-      addEventListener(_el$1, "click", fr.findPrevious, true);
-      addEventListener(_el$10, "click", fr.findNext, true);
-      _el$12.$$input = (e) => fr.setReplaceTerm(e.currentTarget.value);
-      addEventListener(_el$14, "click", fr.replace, true);
-      insert(_el$14, () => t("replace.one"));
-      addEventListener(_el$15, "click", fr.replaceAll, true);
-      insert(_el$15, () => t("replace.allBtn"));
-      _el$18.addEventListener("change", (e) => fr.setFindOptions({
-        ...fr.findOptions(),
-        matchCase: e.currentTarget.checked
-      }));
-      insert(_el$19, () => t("find.matchCase"));
-      _el$21.addEventListener("change", (e) => fr.setFindOptions({
-        ...fr.findOptions(),
-        wholeWord: e.currentTarget.checked
-      }));
-      insert(_el$22, () => t("find.wholeWord"));
-      createRenderEffect((_p$) => {
-        var _v$ = t("generic.close"), _v$2 = t("find.placeholder"), _v$3 = fr.matches().length === 0, _v$4 = t("find.prevTooltip"), _v$5 = fr.matches().length === 0, _v$6 = t("find.nextTooltip"), _v$7 = t("replace.placeholder"), _v$8 = fr.matches().length === 0, _v$9 = fr.matches().length === 0;
-        _v$ !== _p$.e && setAttribute(_el$4, "aria-label", _p$.e = _v$);
-        _v$2 !== _p$.t && setAttribute(_el$8, "placeholder", _p$.t = _v$2);
-        _v$3 !== _p$.a && (_el$1.disabled = _p$.a = _v$3);
-        _v$4 !== _p$.o && setAttribute(_el$1, "title", _p$.o = _v$4);
-        _v$5 !== _p$.i && (_el$10.disabled = _p$.i = _v$5);
-        _v$6 !== _p$.n && setAttribute(_el$10, "title", _p$.n = _v$6);
-        _v$7 !== _p$.s && setAttribute(_el$12, "placeholder", _p$.s = _v$7);
-        _v$8 !== _p$.h && (_el$14.disabled = _p$.h = _v$8);
-        _v$9 !== _p$.r && (_el$15.disabled = _p$.r = _v$9);
-        return _p$;
-      }, {
-        e: void 0,
-        t: void 0,
-        a: void 0,
-        o: void 0,
-        i: void 0,
-        n: void 0,
-        s: void 0,
-        h: void 0,
-        r: void 0
-      });
-      createRenderEffect(() => _el$8.value = fr.searchTerm());
-      createRenderEffect(() => _el$12.value = fr.replaceTerm());
-      createRenderEffect(() => _el$18.checked = fr.findOptions().matchCase);
-      createRenderEffect(() => _el$21.checked = fr.findOptions().wholeWord);
+      insert(_el$2, createComponent(Text, {
+        get children() {
+          return t("find.title");
+        }
+      }), null);
+      insert(_el$2, createComponent(SurfaceButton, {
+        "class": "oasis-editor-fr-close",
+        icon: "x",
+        onClick: () => fr.setIsOpen(false),
+        get label() {
+          return t("generic.close");
+        }
+      }), null);
+      insert(_el$5, createComponent(TextField, {
+        type: "text",
+        get placeholder() {
+          return t("find.placeholder");
+        },
+        get value() {
+          return fr.searchTerm();
+        },
+        onChange: (value) => fr.setSearchTerm(value),
+        autofocus: true,
+        controlClass: "oasis-editor-fr-input"
+      }), null);
+      insert(_el$5, createComponent(StatusText, {
+        "class": "oasis-editor-fr-counter",
+        get children() {
+          return memo(() => fr.matches().length > 0)() ? `${fr.currentIndex() + 1} / ${fr.matches().length}` : t("find.noMatches");
+        }
+      }), null);
+      insert(_el$4, createComponent(Stack, {
+        "class": "oasis-editor-fr-actions",
+        direction: "row",
+        spacing: 1,
+        get children() {
+          return [createComponent(SurfaceButton, {
+            get onClick() {
+              return fr.findPrevious;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            icon: "chevron-up",
+            get label() {
+              return t("find.prevTooltip");
+            }
+          }), createComponent(SurfaceButton, {
+            get onClick() {
+              return fr.findNext;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            icon: "chevron-down",
+            get label() {
+              return t("find.nextTooltip");
+            }
+          })];
+        }
+      }), null);
+      insert(_el$6, createComponent(TextField, {
+        type: "text",
+        get placeholder() {
+          return t("replace.placeholder");
+        },
+        get value() {
+          return fr.replaceTerm();
+        },
+        onChange: (value) => fr.setReplaceTerm(value),
+        controlClass: "oasis-editor-fr-input"
+      }), null);
+      insert(_el$6, createComponent(Stack, {
+        "class": "oasis-editor-fr-actions",
+        direction: "row",
+        spacing: 1,
+        get children() {
+          return [createComponent(SurfaceButton, {
+            "class": "oasis-editor-fr-btn-text",
+            get onClick() {
+              return fr.replace;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            get children() {
+              return t("replace.one");
+            }
+          }), createComponent(SurfaceButton, {
+            "class": "oasis-editor-fr-btn-text",
+            get onClick() {
+              return fr.replaceAll;
+            },
+            get disabled() {
+              return fr.matches().length === 0;
+            },
+            get children() {
+              return t("replace.allBtn");
+            }
+          })];
+        }
+      }), null);
+      insert(_el$3, createComponent(Stack, {
+        "class": "oasis-editor-fr-options",
+        direction: "row",
+        spacing: 1,
+        get children() {
+          return [createComponent(Checkbox, {
+            "class": "oasis-editor-fr-checkbox",
+            get label() {
+              return t("find.matchCase");
+            },
+            get checked() {
+              return fr.findOptions().matchCase;
+            },
+            onChange: (checked) => fr.setFindOptions({
+              ...fr.findOptions(),
+              matchCase: checked
+            })
+          }), createComponent(Checkbox, {
+            "class": "oasis-editor-fr-checkbox",
+            get label() {
+              return t("find.wholeWord");
+            },
+            get checked() {
+              return fr.findOptions().wholeWord;
+            },
+            onChange: (checked) => fr.setFindOptions({
+              ...fr.findOptions(),
+              wholeWord: checked
+            })
+          })];
+        }
+      }), null);
       return _el$;
     }
   });
 }
-delegateEvents(["keydown", "click", "input"]);
+delegateEvents(["keydown"]);
 var _tmpl$$3 = /* @__PURE__ */ template(`<div class=oasis-editor-context-menu role=menu data-testid=editor-context-menu>`), _tmpl$2 = /* @__PURE__ */ template(`<i>`), _tmpl$3 = /* @__PURE__ */ template(`<span class=oasis-editor-context-menu-shortcut>`), _tmpl$4 = /* @__PURE__ */ template(`<button type=button class=oasis-editor-context-menu-item role=menuitem><span class=oasis-editor-context-menu-label>`), _tmpl$5 = /* @__PURE__ */ template(`<div class=oasis-editor-context-menu-separator>`), _tmpl$6 = /* @__PURE__ */ template(`<i data-lucide=check style=visibility:hidden>`);
 function ContextMenu(props) {
   let menuRef;