oasis-editor 0.0.118 → 0.0.119

package/dist/{OasisEditorApp-DxTXNB8H.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 Text, aA as Checkbox, aB as StatusText, aC as FieldGroup, aD as Tabs, aE as FieldRow, aF as NumberField, aG as createStore, aH as reconcile, aI as TextAreaField, aJ as SurfaceButton, aK as ActionRow, aL as onMount, aM as onCleanup, aN as use, aO as PluginUiHost, aP as OasisEditorEditor, aQ as OasisBrandMark, aR as setPreciseFontPreference, aS as setWelcomeSeen, aT as enablePreciseFontMode, aU as TWIPS_PER_POINT, aV as PX_PER_INCH, aW as TWIPS_PER_INCH, aX as normalizeHex6, aY as TABLE_CONDITIONAL_FLAG_ATTRIBUTES, aZ as TABLE_BORDER_EDGE_KEYS, a_ as resolveEffectiveParagraphStyle, a$ as resolveEffectiveTextStyleForParagraph, b0 as EMU_PER_PT, b1 as OOXML_ROTATION_UNITS, b2 as OOXML_PERCENT_DENOMINATOR, b3 as parseHexColorToRgb255, b4 as EMU_PER_PX, b5 as getRunEndnoteReference, b6 as iterateFootnoteReferenceRuns, b7 as iterateEndnoteReferenceRuns, b8 as imageContentTypeDefaults, b9 as getRunFieldChar, ba as getRunFieldInstruction, bb as createEditorRun, bc as JSZip, bd as imageExtensionFromMime, be as pxToPt$1, bf as resolveFloatingObjectRect, bg as getTextBoxFloatingGeometry, bh as getPresetPathSegments, bi as buildListLabels, bj as DEFAULT_FONT_SIZE_PX, bk as resolveGradientAxis, bl as isDoubleUnderlineStyle, bm as isWavyUnderlineStyle, bn as underlineStyleLineWidthPx, bo as WAVY_UNDERLINE_WAVELENGTH_PX, bp as WAVY_UNDERLINE_AMPLITUDE_PX, bq as DOUBLE_UNDERLINE_OFFSET_PX, br as underlineStyleDashArray, bs as EMPHASIS_GLYPH, bt as rgb255ToHex, bu as getImageFloatingGeometry, bv as textStyleToFontSizePt, bw as TEXT_BASELINE_RATIO, bx as resolveOpenTypeFeatureTags, by as resolveDecorationLineY, bz as DOUBLE_STRIKE_OFFSET_PX, bA as resolveListLabel, bB as getListLabelInset, bC as getAlignedListLabelInset, bD as getParagraphBorderInsets, bE as buildSegmentTable, bF as buildCanvasTableLayout, bG as resolveCanvasTableWidth, bH as resolveFloatingTableRect, bI as normalizeFamily, bJ as ROBOTO_FONT_FILES, bK as loadFontAsset, bL as OFFICE_COMPAT_FONT_FAMILIES, bM as BinaryReader, bN as buildSfnt, bO as defaultFontDecoderRegistry, bP as SfntFontProgram, bQ as collectPdfFontFamilies, bR as outlineFrom, bS as getPageHeaderZoneTop, bT as getPageColumnRects, bU as findFootnoteReference, bV as resolveImporterForFile, bW as roundTo, bX as getDocumentSectionsCanonical, bY as getDocumentParagraphsCanonical, bZ as getDocumentParagraphs, b_ as getDocumentPageSettings, b$ as getTableCellContentWidthForParagraph, c0 as layoutMetricsEpoch, c1 as bumpLayoutMetricsEpoch, c2 as createCanvasLayoutSnapshotProvider, c3 as on, c4 as debounce, c5 as unwrap, c6 as perfTimer, c7 as getRunTextBox, c8 as createEditorDocument, c9 as resolveResizedDimensions, ca as resolveTextBoxRenderHeight, cb as getToolbarStyleState, cc as VERTICAL_HIT_WEIGHT, cd as getCachedCanvasImage, ce as measureParagraphMinContentWidthPx, cf as getEditableBlocksForZone, cg as findParagraphLocation, ch as createSectionBoundaryParagraph, ci as normalizePageSettings, cj as DEFAULT_EDITOR_PAGE_SETTINGS, ck as markStart, cl as markEnd, cm as getParagraphEntries, cn as getParagraphById, co as createEditorFootnote, cp as createFootnoteReferenceRun, cq as renumberFootnotes, cr as getHeadingLevel, cs as preciseFontModeVersion, ct as isPreciseFontModeEnabled, cu as resolveNamedTextStyle, cv as togglePreciseFontMode, cw as nextFontSizePt, cx as previousFontSizePt, cy as fontSizePtToPx, cz as createDefaultToolbarPreset, cA as MenuRegistry, cB as createToolbarRegistry, cC as Editor, cD as resolveCommandRef, cE as commandRefName, cF as createOasisEditorClient, cG as createEditorZoom, cH as startLongTaskObserver, cI as installGlobalReport, cJ as applyStoredPreciseFontPreference, cK as getWelcomeSeen, cL as isLocalFontAccessSupported, cM as EDITOR_SCROLL_PADDING_PX, cN as Toolbar, cO as OasisEditorLoading, cP as I18nProvider, cQ as createTranslator, cR as createEditorLogger, cS as registerDomStatsSurface } from "./index-DxemmUXw.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$6 = /* @__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$5 = /* @__PURE__ */ template(`<span class=oasis-editor-ui-field-label>`), _tmpl$4$2 = /* @__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$6(), _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$2();
-      insert(_el$6, createComponent(Show, {
-        get when() {
-          return props.label;
-        },
-        get children() {
-          var _el$7 = _tmpl$3$5();
-          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$5 = /* @__PURE__ */ template(`<img class=oasis-editor-image-ghost>`), _tmpl$3$4 = /* @__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$5();
+      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$4();
+      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,348 +32058,555 @@ 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-word-row>`), _tmpl$2$4 = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-word-row oasis-editor-font-dialog-kerning-row">`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="oasis-editor-font-dialog-panel oasis-editor-font-dialog-advanced-panel">`);
+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$3$3();
+    var _el$ = _tmpl$$b();
     insert(_el$, createComponent(FieldGroup, {
       "class": "oasis-editor-font-dialog-fieldset",
       get legend() {
         return t("dialog.font.advancedCharacterSpacingGroup");
       },
       get children() {
-        return [(() => {
-          var _el$2 = _tmpl$$b();
-          insert(_el$2, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedScale");
-            }
-          }), null);
-          insert(_el$2, 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);
-          return _el$2;
-        })(), (() => {
-          var _el$3 = _tmpl$$b();
-          insert(_el$3, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedSpacing");
-            }
-          }), null);
-          insert(_el$3, 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")
-              }];
-            }
-          }), null);
-          insert(_el$3, createComponent(Text, {
-            "class": "oasis-editor-dialog-label oasis-editor-font-dialog-by-label",
-            get children() {
-              return t("dialog.font.advancedBy");
-            }
-          }), null);
-          insert(_el$3, createComponent(TextField, {
-            "class": "oasis-editor-font-dialog-small-input",
-            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"
-          }), null);
-          return _el$3;
-        })(), (() => {
-          var _el$4 = _tmpl$$b();
-          insert(_el$4, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedPosition");
-            }
-          }), null);
-          insert(_el$4, 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")
-              }];
-            }
-          }), null);
-          insert(_el$4, createComponent(Text, {
-            "class": "oasis-editor-dialog-label oasis-editor-font-dialog-by-label",
-            get children() {
-              return t("dialog.font.advancedBy");
-            }
-          }), null);
-          insert(_el$4, 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);
-          return _el$4;
-        })(), (() => {
-          var _el$5 = _tmpl$2$4();
-          insert(_el$5, 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"
-          }), null);
-          insert(_el$5, 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"
-          }), null);
-          insert(_el$5, createComponent(StatusText, {
-            "class": "oasis-editor-dialog-help-text oasis-editor-font-dialog-kerning-suffix",
-            get children() {
-              return t("dialog.font.advancedKerningAbove");
-            }
-          }), null);
-          return _el$5;
-        })()];
+        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$, createComponent(FieldGroup, {
@@ -32565,127 +32615,137 @@ function AdvancedFontTab(props) {
         return t("dialog.font.advancedOpenTypeGroup");
       },
       get children() {
-        return [(() => {
-          var _el$6 = _tmpl$$b();
-          insert(_el$6, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedLigatures");
-            }
-          }), null);
-          insert(_el$6, 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);
-          return _el$6;
-        })(), (() => {
-          var _el$7 = _tmpl$$b();
-          insert(_el$7, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedNumberSpacing");
-            }
-          }), null);
-          insert(_el$7, 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")
-              }];
-            }
-          }), null);
-          return _el$7;
-        })(), (() => {
-          var _el$8 = _tmpl$$b();
-          insert(_el$8, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedNumberForm");
-            }
-          }), null);
-          insert(_el$8, createComponent(SelectField, {
-            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")
-              }];
-            }
-          }), null);
-          return _el$8;
-        })(), (() => {
-          var _el$9 = _tmpl$$b();
-          insert(_el$9, createComponent(Text, {
-            "class": "oasis-editor-dialog-label",
-            get children() {
-              return t("dialog.font.advancedStylisticSet");
-            }
-          }), null);
-          insert(_el$9, createComponent(SelectField, {
-            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)
-              }))];
-            }
-          }), null);
-          return _el$9;
-        })(), createComponent(Checkbox, {
+        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");
@@ -32789,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$3 = /* @__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$2 = /* @__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) {
@@ -32933,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() ?? "";
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            onChange: setIndentLeft,
-            "data-testid": "editor-paragraph-dialog-indent-left"
-          }), createComponent(NumberField, {
-            get label() {
-              return t("paragraph.indentRightLabel");
-            },
-            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");
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 6
             },
-            get value() {
-              return special();
-            },
-            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");
-            },
-            min: "0",
-            step: "1",
-            get value() {
-              return spacingBefore() ?? "";
+          return [createComponent(Grid, {
+            size: {
+              xs: 12,
+              md: 3
             },
-            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$3(), _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$2(), _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) {
@@ -33406,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$2 = /* @__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$2(), _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");
-      },
-      get value() {
-        return form().tableWidthUnit;
+    var _el$ = _tmpl$$9();
+    insert(_el$, createComponent(FieldGroup, {
+      "class": "oasis-editor-font-dialog-fieldset",
+      get legend() {
+        return t("table.sizeSection");
       },
-      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-dialog-style-row>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=oasis-editor-dialog-row>`), _tmpl$3$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-cell-preview data-testid=editor-table-properties-cell-preview>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class=oasis-editor-table-properties-panel><div class=oasis-editor-dialog-row>`);
+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;
@@ -33688,64 +34037,90 @@ function CellTabPanel(props) {
   });
   const borderDisabled = () => form().borderStyle === "none";
   return (() => {
-    var _el$ = _tmpl$4$1(), _el$2 = _el$.firstChild;
-    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")
-        }];
-      }
-    }), null);
-    insert(_el$2, createComponent(SelectField, {
-      "class": "oasis-editor-dialog-input-group-grow",
-      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"
-        }];
+    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$, createComponent(FieldGroup, {
@@ -33754,38 +34129,41 @@ function CellTabPanel(props) {
         return t("table.options");
       },
       get children() {
-        var _el$3 = _tmpl$$6();
-        insert(_el$3, 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$3, 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$3, 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);
-        return _el$3;
+        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$, createComponent(FieldGroup, {
@@ -33794,12 +34172,45 @@ function CellTabPanel(props) {
         return t("table.cellMargins");
       },
       get children() {
-        var _el$4 = _tmpl$2$1();
-        insert(_el$4, () => NumField(t("paragraph.borderSideTop"), () => form().marginTop, (v) => set("marginTop", v), "editor-table-properties-margin-top"), null);
-        insert(_el$4, () => NumField(t("paragraph.borderSideRight"), () => form().marginRight, (v) => set("marginRight", v), "editor-table-properties-margin-right"), null);
-        insert(_el$4, () => NumField(t("paragraph.borderSideBottom"), () => form().marginBottom, (v) => set("marginBottom", v), "editor-table-properties-margin-bottom"), null);
-        insert(_el$4, () => NumField(t("paragraph.borderSideLeft"), () => form().marginLeft, (v) => set("marginLeft", v), "editor-table-properties-margin-left"), null);
-        return _el$4;
+        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");
+              }
+            })];
+          }
+        });
       }
     }), null);
     insert(_el$, createComponent(FieldGroup, {
@@ -33808,194 +34219,214 @@ function CellTabPanel(props) {
         return t("paragraph.bordersSection");
       },
       get children() {
-        return [(() => {
-          var _el$5 = _tmpl$2$1();
-          insert(_el$5, createComponent(SelectField, {
-            "class": "oasis-editor-dialog-input-group-grow",
-            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);
+        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")
+                    }];
+                  }
+                });
               }
-            },
-            "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")
-              }];
-            }
-          }), null);
-          insert(_el$5, () => NumField(t("paragraph.borderWidthLabel"), () => form().borderWidth, (v) => set("borderWidth", v), "editor-table-properties-border-width", borderDisabled()), null);
-          insert(_el$5, createComponent(TextField, {
-            type: "color",
-            "class": "oasis-editor-dialog-input-group",
-            controlClass: "oasis-editor-dialog-input",
-            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"
-          }), null);
-          insert(_el$5, createComponent(TextField, {
-            type: "color",
-            "class": "oasis-editor-dialog-input-group",
-            controlClass: "oasis-editor-dialog-input",
-            get label() {
-              return t("paragraph.shadingLabel");
-            },
-            get value() {
-              return form().shading || "#ffffff";
-            },
-            onChange: (value) => set("shading", value),
-            "data-testid": "editor-table-properties-shading"
-          }), null);
-          return _el$5;
-        })(), (() => {
-          var _el$6 = _tmpl$$6();
-          insert(_el$6, 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$6, 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$6, 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$6, 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$6, 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$6, 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"
-          }), null);
-          insert(_el$6, 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$6, 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"
-          }), null);
-          return _el$6;
-        })(), (() => {
-          var _el$7 = _tmpl$3$1();
-          createRenderEffect((_$p) => style(_el$7, borderPreview(), _$p));
-          return _el$7;
+            }), 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);
@@ -34176,9 +34607,10 @@ function FindReplaceDialog(props) {
           return memo(() => fr.matches().length > 0)() ? `${fr.currentIndex() + 1} / ${fr.matches().length}` : t("find.noMatches");
         }
       }), null);
-      insert(_el$4, createComponent(ActionRow, {
+      insert(_el$4, createComponent(Stack, {
         "class": "oasis-editor-fr-actions",
-        wrap: false,
+        direction: "row",
+        spacing: 1,
         get children() {
           return [createComponent(SurfaceButton, {
             get onClick() {
@@ -34216,9 +34648,10 @@ function FindReplaceDialog(props) {
         onChange: (value) => fr.setReplaceTerm(value),
         controlClass: "oasis-editor-fr-input"
       }), null);
-      insert(_el$6, createComponent(ActionRow, {
+      insert(_el$6, createComponent(Stack, {
         "class": "oasis-editor-fr-actions",
-        wrap: false,
+        direction: "row",
+        spacing: 1,
         get children() {
           return [createComponent(SurfaceButton, {
             "class": "oasis-editor-fr-btn-text",
@@ -34245,8 +34678,10 @@ function FindReplaceDialog(props) {
           })];
         }
       }), null);
-      insert(_el$3, createComponent(ActionRow, {
+      insert(_el$3, createComponent(Stack, {
         "class": "oasis-editor-fr-options",
+        direction: "row",
+        spacing: 1,
         get children() {
           return [createComponent(Checkbox, {
             "class": "oasis-editor-fr-checkbox",