@crystallize/design-system 1.12.0 → 1.13.0

package/dist/index.mjs

@@ -3,8 +3,8 @@ import { forwardRef as forwardRef2 } from "react";
 import { cva } from "class-variance-authority";
 
 // src/spinner/index.tsx
-import { cx } from "class-variance-authority";
 import { forwardRef } from "react";
+import { cx } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 var realSize = 40;
 var Spinner = forwardRef(
@@ -173,8 +173,8 @@ import { cva as cva3 } from "class-variance-authority";
 import { Portal as Portal2, Separator } from "@radix-ui/react-dropdown-menu";
 
 // src/dropdown-menu/dropdown-menu-item.tsx
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { cx as cx2 } from "class-variance-authority";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function DropdownMenuItem({ children, className, ...delegated }) {
   return /* @__PURE__ */ jsx4(DropdownMenuPrimitive.Item, { ...delegated, className: cx2("c-dropdown-menu-item", className), children });
@@ -303,8 +303,8 @@ var Avatar = forwardRef3(({ name, size, className, ...delegated }, ref) => {
 Avatar.displayName = "Avatar";
 
 // src/checkbox/checkbox.tsx
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { forwardRef as forwardRef4 } from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var Checkbox = forwardRef4((props, ref) => {
   return /* @__PURE__ */ jsx11(CheckboxPrimitive.Root, { ...props, ref, className: "c-checkbox", children: /* @__PURE__ */ jsx11(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 9 9", fill: "none", className: "c-checkbox__svg", children: [
@@ -326,8 +326,8 @@ var Checkbox = forwardRef4((props, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 
-// src/dialog/destroyFns.ts
-var destroyFns = [];
+// src/dialog/config.tsx
+import { unmountComponentAtNode, render as DOMRender } from "react-dom";
 
 // src/dialog/dialog.tsx
 import { cva as cva5, cx as cx5 } from "class-variance-authority";
@@ -3715,9 +3715,6 @@ DialogBase.Content = DialogContent;
 DialogBase.Overlay = DialogPrimitive.Overlay;
 DialogBase.Close = DialogPrimitive.Close;
 
-// src/dialog/config.tsx
-import { unmountComponentAtNode, render as DOMRender } from "react-dom";
-
 // src/dialog/confirm-dialog.tsx
 import { jsx as jsx67, jsxs as jsxs58 } from "react/jsx-runtime";
 function ConfirmDialog({
@@ -3782,6 +3779,9 @@ function ConfirmDialog({
   ) });
 }
 
+// src/dialog/destroyFns.ts
+var destroyFns = [];
+
 // src/dialog/config.tsx
 import { jsx as jsx68 } from "react/jsx-runtime";
 function confirm(config) {
@@ -3953,8 +3953,8 @@ var IconButton = forwardRef59(
 IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cx as cx6, cva as cva7 } from "class-variance-authority";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var inlineRadioGroupStyles = cva7("c-inline-radio-group", {
   variants: {
@@ -3984,34 +3984,12 @@ var InlineRadio = {
 import { forwardRef as forwardRef63 } from "react";
 import { cva as cva9, cx as cx8 } from "class-variance-authority";
 
-// src/input/input.tsx
-import { cva as cva8 } from "class-variance-authority";
+// src/iconography/triangle.tsx
 import { forwardRef as forwardRef60 } from "react";
 import { jsx as jsx71 } from "react/jsx-runtime";
-var inputStyles = cva8(["c-input"], {
-  variants: {},
-  defaultVariants: {}
-});
-var Input = forwardRef60(({ className, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsx71("input", { ref, className: inputStyles({ className }), type: "text", ...delegated });
-});
-Input.displayName = "Input";
-
-// src/label/label.tsx
-import { forwardRef as forwardRef61 } from "react";
-import { cx as cx7 } from "class-variance-authority";
-import { jsx as jsx72 } from "react/jsx-runtime";
-var Label2 = forwardRef61(({ className, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsx72("label", { ref, className: cx7("c-label", className), ...delegated });
-});
-Label2.displayName = "Label";
-
-// src/iconography/triangle.tsx
-import { forwardRef as forwardRef62 } from "react";
-import { jsx as jsx73 } from "react/jsx-runtime";
-var Triangle = forwardRef62((delegated, ref) => {
+var Triangle = forwardRef60((delegated, ref) => {
   const { width = 20, height = 20, ...rest } = delegated;
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx71(
     "svg",
     {
       viewBox: "0 0 17 15",
@@ -4021,11 +3999,33 @@ var Triangle = forwardRef62((delegated, ref) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: /* @__PURE__ */ jsx73("path", { d: "M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z", stroke: "currentColor", strokeWidth: 2.4 })
+      children: /* @__PURE__ */ jsx71("path", { d: "M15.463 1.2L8.5 12.685 1.537 1.2h13.925zM1.353.896s0 0 0 0h0z", stroke: "currentColor", strokeWidth: 2.4 })
     }
   );
 });
 
+// src/input/input.tsx
+import { forwardRef as forwardRef61 } from "react";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx72 } from "react/jsx-runtime";
+var inputStyles = cva8(["c-input"], {
+  variants: {},
+  defaultVariants: {}
+});
+var Input = forwardRef61(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx72("input", { ref, className: inputStyles({ className }), type: "text", ...delegated });
+});
+Input.displayName = "Input";
+
+// src/label/label.tsx
+import { forwardRef as forwardRef62 } from "react";
+import { cx as cx7 } from "class-variance-authority";
+import { jsx as jsx73 } from "react/jsx-runtime";
+var Label2 = forwardRef62(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ jsx73("label", { ref, className: cx7("c-label", className), ...delegated });
+});
+Label2.displayName = "Label";
+
 // src/input-with-label/input-with-label.tsx
 import { Fragment, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
 var inputWithLabelStyles = cva9(["c-input-with-label"], {
@@ -4064,8 +4064,8 @@ var InputWithLabel = forwardRef63(
 InputWithLabel.displayName = "InputWithLabel";
 
 // src/progress/progress.tsx
-import * as ProgressPrimitives from "@radix-ui/react-progress";
 import { cx as cx9 } from "class-variance-authority";
+import * as ProgressPrimitives from "@radix-ui/react-progress";
 import { jsx as jsx75 } from "react/jsx-runtime";
 function Progress({ className, value }) {
   return /* @__PURE__ */ jsx75(ProgressPrimitives.Root, { className: cx9(className, "c-progress-root"), value, children: /* @__PURE__ */ jsx75(
@@ -4103,8 +4103,8 @@ SelectItem.displayName = "SelectItem";
 
 // src/select/select-root.tsx
 import { forwardRef as forwardRef65 } from "react";
-import * as SelectPrimitives2 from "@radix-ui/react-select";
 import { cva as cva10 } from "class-variance-authority";
+import * as SelectPrimitives2 from "@radix-ui/react-select";
 import { jsx as jsx78, jsxs as jsxs61 } from "react/jsx-runtime";
 var selectTriggerStyles = cva10("c-select-trigger", {
   variants: {
@@ -4143,9 +4143,9 @@ var Select = {
 };
 
 // src/slider/slider.tsx
-import * as SliderPrimitive from "@radix-ui/react-slider";
-import { cx as cx10 } from "class-variance-authority";
 import { forwardRef as forwardRef66 } from "react";
+import { cx as cx10 } from "class-variance-authority";
+import * as SliderPrimitive from "@radix-ui/react-slider";
 import { jsx as jsx79, jsxs as jsxs62 } from "react/jsx-runtime";
 var Slider = forwardRef66(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ jsxs62(SliderPrimitive.Root, { className: cx10("c-slider-root", className), ref, ...delegated, children: [
@@ -4198,7 +4198,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { useEffect as useEffect11, useRef as useRef6, useState as useState10 } from "react";
+import { useEffect as useEffect12, useRef as useRef7, useState as useState11 } from "react";
 import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -4752,8 +4752,8 @@ var BaseNodes = [
 ];
 
 // src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx
-import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 import "react";
+import { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin";
 import { jsx as jsx83 } from "react/jsx-runtime";
 var URL_MATCHER = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 var EMAIL_MATCHER = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
@@ -4828,7 +4828,7 @@ function CopyButton({ editor, getCodeDOMNode }) {
       console.error("Failed to copy: ", err);
     }
   }
-  return /* @__PURE__ */ jsx84("button", { className: "menu-item", onClick: handleClick, "aria-label": tr("actionCopyCode"), children: isCopyCompleted ? /* @__PURE__ */ jsx84("i", { className: "format success" }) : /* @__PURE__ */ jsx84("i", { className: "format copy" }) });
+  return /* @__PURE__ */ jsx84("button", { className: "c-rte-code-button", onClick: handleClick, "aria-label": tr("actionCopyCode"), children: isCopyCompleted ? /* @__PURE__ */ jsx84("i", { className: "c-rte-code-button__icon c-rte-icon-success" }) : /* @__PURE__ */ jsx84("i", { className: "c-rte-code-button__icon c-rte-icon-copy" }) });
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
@@ -4922,19 +4922,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       setTipsVisible(false);
     }
   }
-  return /* @__PURE__ */ jsxs64("div", { className: "prettier-wrapper", children: [
+  return /* @__PURE__ */ jsxs64("div", { className: "c-rte-prettier-wrapper", children: [
     /* @__PURE__ */ jsx85(
       "button",
       {
-        className: "menu-item",
+        className: "c-rte-code-button",
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "aria-label": tr("actionFormatCode"),
-        children: syntaxError ? /* @__PURE__ */ jsx85("i", { className: "format prettier-error" }) : /* @__PURE__ */ jsx85("i", { className: "format prettier" })
+        children: syntaxError ? /* @__PURE__ */ jsx85("i", { className: "c-rte-code-button__icon c-rte-icon-prettier-error" }) : /* @__PURE__ */ jsx85("i", { className: "c-rte-code-button__icon c-rte-icon-prettier" })
       }
     ),
-    tipsVisible ? /* @__PURE__ */ jsx85("pre", { className: "code-error-tips", children: syntaxError }) : null
+    tipsVisible ? /* @__PURE__ */ jsx85("pre", { className: "c-rte-code-error-tips", children: syntaxError }) : null
   ] });
 }
 
@@ -5016,8 +5016,8 @@ function CodeActionMenuContainer({ anchorElem }) {
   });
   const normalizedLang = normalizeCodeLang(lang);
   const codeFriendlyName = getLanguageFriendlyName(lang);
-  return /* @__PURE__ */ jsx86(Fragment2, { children: isShown ? /* @__PURE__ */ jsxs65("div", { className: "code-action-menu-container", style: { ...position }, children: [
-    /* @__PURE__ */ jsx86("div", { className: "code-highlight-language", children: codeFriendlyName }),
+  return /* @__PURE__ */ jsx86(Fragment2, { children: isShown ? /* @__PURE__ */ jsxs65("div", { className: "c-rte-code-action-menu-container", style: { ...position }, children: [
+    /* @__PURE__ */ jsx86("div", { className: "c-rte-code-highlight-language", children: codeFriendlyName }),
     /* @__PURE__ */ jsx86(CopyButton, { editor, getCodeDOMNode }),
     canBePrettier(normalizedLang) ? /* @__PURE__ */ jsx86(PrettierButton, { editor, getCodeDOMNode, lang: normalizedLang }) : null
   ] }) : null });
@@ -5026,7 +5026,7 @@ function getMouseInfo(event) {
   const target = event.target;
   if (target && target instanceof HTMLElement) {
     const codeDOMNode = target.closest("code.CrystallizeRTEditorTheme__code");
-    const isOutside = !(codeDOMNode || target.closest("div.code-action-menu-container"));
+    const isOutside = !(codeDOMNode || target.closest("div.c-rte-code-action-menu-container"));
     return { codeDOMNode, isOutside };
   } else {
     return { codeDOMNode: null, isOutside: true };
@@ -5050,8 +5050,42 @@ function CodeHighlightPlugin() {
   return null;
 }
 
+// src/rich-text-editor/plugins/DimensionsDetectorPlugin/index.tsx
+import { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
+import { jsx as jsx87 } from "react/jsx-runtime";
+function DimensionDetectorPlugin({ onChange }) {
+  const [dimensions, setDimensions] = useState4();
+  const ref = useRef2(null);
+  useEffect3(() => {
+    if (ref.current) {
+      const el = ref.current;
+      const resizeObserver = new ResizeObserver((entries) => {
+        const [first] = entries;
+        if (first) {
+          const [contentBox] = first.contentBoxSize;
+          if (contentBox) {
+            const width = contentBox.inlineSize;
+            setDimensions({
+              width,
+              isSmallWidth: width < 600
+            });
+          }
+        }
+      });
+      resizeObserver.observe(el);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+  useEffect3(() => {
+    if (dimensions) {
+      onChange(dimensions);
+    }
+  }, [dimensions, onChange]);
+  return /* @__PURE__ */ jsx87("div", { ref, style: { height: 1, marginTop: -1 } });
+}
+
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-import { useCallback, useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
 import "react";
 import {
   $getSelection as $getSelection3,
@@ -5068,10 +5102,10 @@ import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexica
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 
 // src/rich-text-editor/ui/LinkPreview.tsx
-import { Suspense, useEffect as useEffect3, useState as useState4 } from "react";
+import { Suspense, useEffect as useEffect4, useState as useState5 } from "react";
 import { $getSelection as $getSelection2, $isTextNode as $isTextNode3 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
-import { Fragment as Fragment3, jsx as jsx87, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx88, jsxs as jsxs66 } from "react/jsx-runtime";
 var PREVIEW_CACHE = {};
 var URL_MATCHER2 = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 function useSuspenseRequest(url) {
@@ -5095,12 +5129,12 @@ function useSuspenseRequest(url) {
 function LinkPreviewContent({
   url
 }) {
-  const [textContent, setTextContent] = useState4("");
+  const [textContent, setTextContent] = useState5("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = useLexicalComposerContext3();
   const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
-  useEffect3(() => {
+  useEffect4(() => {
     editor.update(() => {
       const sel = $getSelection2();
       const nodes = sel?.getNodes();
@@ -5128,18 +5162,18 @@ function LinkPreviewContent({
   if (!hasPreview) {
     return null;
   }
-  return /* @__PURE__ */ jsxs66("div", { className: "LinkPreview__container", children: [
-    preview.google.image && /* @__PURE__ */ jsx87("div", { className: "LinkPreview__imageWrapper bg-purple-50-900", children: /* @__PURE__ */ jsx87("img", { src: preview.google.image, alt: preview.google.title, className: "LinkPreview__image" }) }),
-    preview.google.title && /* @__PURE__ */ jsx87("div", { className: "LinkPreview__title", children: preview.google.title }),
-    preview.google.description && /* @__PURE__ */ jsx87("div", { className: "LinkPreview__description", children: preview.google.description }),
-    textContent && textContent !== preview.google.title ? /* @__PURE__ */ jsx87(Button, { className: "mb-4 ml-5", onClick: useTitleForText, children: tr("linkPreviewReplaceTextWithTitle") }) : null
+  return /* @__PURE__ */ jsxs66("div", { className: "c-rte-link-preview", children: [
+    preview.google.image && /* @__PURE__ */ jsx88("div", { className: "c-rte-link-preview-image-wrapper", children: /* @__PURE__ */ jsx88("img", { src: preview.google.image, alt: preview.google.title, className: "c-rte-link-preview-image" }) }),
+    preview.google.title && /* @__PURE__ */ jsx88("div", { className: "c-rte-link-preview-title", children: preview.google.title }),
+    preview.google.description && /* @__PURE__ */ jsx88("div", { className: "c-rte-link-preview-description", children: preview.google.description }),
+    textContent && textContent !== preview.google.title ? /* @__PURE__ */ jsx88(Button, { className: "c-rte-link-preview__replace-text-btn", onClick: useTitleForText, children: tr("linkPreviewReplaceTextWithTitle") }) : null
   ] });
 }
 function Glimmer(props) {
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88(
     "div",
     {
-      className: "LinkPreview__glimmer",
+      className: "c-rte-link-preview-glimmer",
       ...props,
       style: {
         animationDelay: String((props.index || 0) * 300),
@@ -5151,22 +5185,21 @@ function Glimmer(props) {
 function LinkPreview({
   url
 }) {
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88(
     Suspense,
     {
       fallback: /* @__PURE__ */ jsxs66(Fragment3, { children: [
-        /* @__PURE__ */ jsx87(Glimmer, { style: { height: "80px" }, index: 0 }),
-        /* @__PURE__ */ jsx87(Glimmer, { style: { width: "60%" }, index: 1 }),
-        /* @__PURE__ */ jsx87(Glimmer, { style: { width: "80%" }, index: 2 })
+        /* @__PURE__ */ jsx88(Glimmer, { style: { height: "80px" }, index: 0 }),
+        /* @__PURE__ */ jsx88(Glimmer, { style: { width: "60%" }, index: 1 }),
+        /* @__PURE__ */ jsx88(Glimmer, { style: { width: "80%" }, index: 2 })
       ] }),
-      children: /* @__PURE__ */ jsx87(LinkPreviewContent, { url })
+      children: /* @__PURE__ */ jsx88(LinkPreviewContent, { url })
     }
   );
 }
 
 // src/rich-text-editor/utils/getSelectedNode.ts
 import { $isAtNodeEnd } from "@lexical/selection";
-import "lexical";
 function getSelectedNode(selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
@@ -5227,20 +5260,20 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-import { Fragment as Fragment4, jsx as jsx88, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx89, jsxs as jsxs67 } from "react/jsx-runtime";
 function FloatingLinkEditor({
   editor,
   isLink,
   setIsLink,
   anchorElem
 }) {
-  const editorRef = useRef2(null);
-  const inputRef = useRef2(null);
-  const [linkUrl, setLinkUrl] = useState5("");
-  const [rel, setRel] = useState5(null);
-  const [target, setTarget] = useState5(null);
-  const [isEditMode, setEditMode] = useState5(false);
-  const [lastSelection, setLastSelection] = useState5(null);
+  const editorRef = useRef3(null);
+  const inputRef = useRef3(null);
+  const [linkUrl, setLinkUrl] = useState6("");
+  const [rel, setRel] = useState6(null);
+  const [target, setTarget] = useState6(null);
+  const [isEditMode, setEditMode] = useState6(false);
+  const [lastSelection, setLastSelection] = useState6(null);
   const tr = useTr();
   const updateLinkEditor = useCallback(() => {
     const selection = $getSelection3();
@@ -5292,7 +5325,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor]);
-  useEffect4(() => {
+  useEffect5(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -5310,7 +5343,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, updateLinkEditor]);
-  useEffect4(() => {
+  useEffect5(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -5338,18 +5371,18 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  useEffect4(() => {
+  useEffect5(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });
   }, [editor, updateLinkEditor]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isEditMode && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isEditMode]);
-  return /* @__PURE__ */ jsx88("div", { ref: editorRef, className: "link-editor", children: isEditMode ? /* @__PURE__ */ jsxs67("div", { children: [
-    /* @__PURE__ */ jsx88("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89("div", { ref: editorRef, className: "c-rte-link-editor", children: isEditMode ? /* @__PURE__ */ jsxs67("div", { children: [
+    /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ jsx89(
       InputWithLabel,
       {
         label: tr("linkEditorLink"),
@@ -5358,7 +5391,7 @@ function FloatingLinkEditor({
         onChange: (e) => setLinkUrl(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx88("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ jsx88(
+    /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ jsx89(
       InputWithLabel,
       {
         label: tr("linkEditorRel"),
@@ -5367,7 +5400,7 @@ function FloatingLinkEditor({
         onChange: (e) => setRel(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx88("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ jsx88(
+    /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ jsx89(
       InputWithLabel,
       {
         label: tr("linkEditorTarget"),
@@ -5376,7 +5409,7 @@ function FloatingLinkEditor({
         onChange: (e) => setTarget(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ jsx88("div", { className: "flex px-6 py-2 justify-end", children: /* @__PURE__ */ jsx88(
+    /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-button-wrap", children: /* @__PURE__ */ jsx89(
       Button,
       {
         onClick: () => {
@@ -5395,15 +5428,15 @@ function FloatingLinkEditor({
       }
     ) })
   ] }) : /* @__PURE__ */ jsxs67(Fragment4, { children: [
-    /* @__PURE__ */ jsxs67("div", { className: "link-input !flex flex-nowrap justify-between items-center max-w-full ", children: [
-      /* @__PURE__ */ jsxs67("div", { className: "grid", children: [
-        /* @__PURE__ */ jsx88("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl }),
-        rel || target ? /* @__PURE__ */ jsxs67("div", { className: "flex mt-1 gap-1", children: [
-          rel && /* @__PURE__ */ jsx88("div", { className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5", children: rel }),
-          target && /* @__PURE__ */ jsx88("div", { className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5", children: target })
+    /* @__PURE__ */ jsxs67("div", { className: "c-rte-link-editor-link-input", children: [
+      /* @__PURE__ */ jsxs67("div", { className: "c-rte-link-editor-link-preview", children: [
+        /* @__PURE__ */ jsx89("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl }),
+        rel || target ? /* @__PURE__ */ jsxs67("div", { className: "c-rte-link-editor-preview-attrs", children: [
+          rel && /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-preview-attr", children: rel }),
+          target && /* @__PURE__ */ jsx89("div", { className: "c-rte-link-editor-preview-attr", children: target })
         ] }) : null
       ] }),
-      /* @__PURE__ */ jsx88("div", { children: /* @__PURE__ */ jsx88(
+      /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsx89(
         IconButton,
         {
           size: "sm",
@@ -5411,16 +5444,16 @@ function FloatingLinkEditor({
           onMouseDown: (event) => event.preventDefault(),
           onClick: () => setEditMode(true),
           "aria-label": tr("linkEditorEdit"),
-          children: /* @__PURE__ */ jsx88(Icon.Edit, {})
+          children: /* @__PURE__ */ jsx89(Icon.Edit, {})
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsx88("div", { children: /* @__PURE__ */ jsx88(LinkPreview, { url: linkUrl }) })
+    /* @__PURE__ */ jsx89("div", { children: /* @__PURE__ */ jsx89(LinkPreview, { url: linkUrl }) })
   ] }) });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem) {
-  const [activeEditor, setActiveEditor] = useState5(editor);
-  const [isLink, setIsLink] = useState5(false);
+  const [activeEditor, setActiveEditor] = useState6(editor);
+  const [isLink, setIsLink] = useState6(false);
   const updateToolbar = useCallback(() => {
     const selection = $getSelection3();
     if ($isRangeSelection(selection)) {
@@ -5434,7 +5467,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       }
     }
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -5446,7 +5479,7 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
     );
   }, [editor, updateToolbar]);
   return isLink ? createPortal2(
-    /* @__PURE__ */ jsx88(FloatingLinkEditor, { editor: activeEditor, isLink, anchorElem, setIsLink }),
+    /* @__PURE__ */ jsx89(FloatingLinkEditor, { editor: activeEditor, isLink, anchorElem, setIsLink }),
     anchorElem
   ) : null;
 }
@@ -5458,7 +5491,7 @@ function FloatingLinkEditorPlugin({
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
 import "react";
 import {
   $getSelection as $getSelection4,
@@ -5507,7 +5540,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-import { Fragment as Fragment5, jsx as jsx89, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx90, jsxs as jsxs68 } from "react/jsx-runtime";
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -5520,7 +5553,7 @@ function TextFormatFloatingToolbar({
   isSubscript,
   isSuperscript
 }) {
-  const popupCharStylesEditorRef = useRef3(null);
+  const popupCharStylesEditorRef = useRef4(null);
   const tr = useTr();
   const insertLink = useCallback2(() => {
     if (!isLink) {
@@ -5542,7 +5575,7 @@ function TextFormatFloatingToolbar({
       setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  useEffect5(() => {
+  useEffect6(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -5560,7 +5593,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  useEffect5(() => {
+  useEffect6(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -5580,8 +5613,8 @@ function TextFormatFloatingToolbar({
       )
     );
   }, [editor, updateTextFormatFloatingToolbar]);
-  return /* @__PURE__ */ jsx89("div", { ref: popupCharStylesEditorRef, className: "c-floating-text-format-popup gap-0.5", children: editor.isEditable() && /* @__PURE__ */ jsxs68(Fragment5, { children: [
-    /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90("div", { ref: popupCharStylesEditorRef, className: "c-rte-floating-text-format-tb-plugin", children: editor.isEditable() && /* @__PURE__ */ jsxs68(Fragment5, { children: [
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         onClick: () => {
@@ -5590,15 +5623,15 @@ function TextFormatFloatingToolbar({
         style: { padding: 0, overflow: "hidden" },
         title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
         "aria-label": tr("actionFormatAsStrongLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format bold  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isBold ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-bold c-rte-floating-text-format-tb-plugin__format-icon ${isBold ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5607,15 +5640,15 @@ function TextFormatFloatingToolbar({
         },
         title: tr("actionFormatAsEmphasizedTitle"),
         "aria-label": tr("actionFormatAsEmphasizedLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format italic  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isItalic ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-italic c-rte-floating-text-format-tb-plugin__format-icon ${isItalic ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5624,15 +5657,15 @@ function TextFormatFloatingToolbar({
         },
         title: tr("actionFormatAsUnderlinedTitle"),
         "aria-label": tr("actionFormatAsUnderlinedLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format underline  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isUnderline ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-underline c-rte-floating-text-format-tb-plugin__format-icon ${isUnderline ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5641,15 +5674,15 @@ function TextFormatFloatingToolbar({
         },
         title: tr("actionFormatWithStrikethroughTitle"),
         "aria-label": tr("actionFormatWithStrikethroughLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format strikethrough  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isStrikethrough ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-strikethrough c-rte-floating-text-format-tb-plugin__format-icon ${isStrikethrough ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5658,15 +5691,15 @@ function TextFormatFloatingToolbar({
         },
         title: tr("actionFormatWithSubscriptTitle"),
         "aria-label": tr("actionFormatWithSubscriptLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format subscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isSubscript ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-subscript c-rte-floating-text-format-tb-plugin__format-icon ${isSubscript ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5675,15 +5708,15 @@ function TextFormatFloatingToolbar({
         },
         title: tr("actionFormatWithSuperscriptTitle"),
         "aria-label": tr("actionFormatWithSuperscriptLabel"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format superscript  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isSuperscript ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-superscript c-rte-floating-text-format-tb-plugin__format-icon ${isSuperscript ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
@@ -5691,24 +5724,24 @@ function TextFormatFloatingToolbar({
           editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
         },
         "aria-label": tr("actionInsertCodeBlock"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format code  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isCode ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-code c-rte-floating-text-format-tb-plugin__format-icon ${isCode ? "selected" : ""}`
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: insertLink,
         "aria-label": tr("actionInsertlink"),
-        children: /* @__PURE__ */ jsx89(
+        children: /* @__PURE__ */ jsx90(
           "i",
           {
-            className: `format link  w-full h-full bg-[length:18px_18px] bg-no-repeat bg-center ${isLink ? "bg-purple-50-900 opacity-100" : "opacity-60"}`
+            className: `c-rte-icon-link c-rte-floating-text-format-tb-plugin__format-icon ${isLink ? "selected" : ""}`
           }
         )
       }
@@ -5716,15 +5749,15 @@ function TextFormatFloatingToolbar({
   ] }) });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
-  const [isText, setIsText] = useState6(false);
-  const [isLink, setIsLink] = useState6(false);
-  const [isBold, setIsBold] = useState6(false);
-  const [isItalic, setIsItalic] = useState6(false);
-  const [isUnderline, setIsUnderline] = useState6(false);
-  const [isStrikethrough, setIsStrikethrough] = useState6(false);
-  const [isSubscript, setIsSubscript] = useState6(false);
-  const [isSuperscript, setIsSuperscript] = useState6(false);
-  const [isCode, setIsCode] = useState6(false);
+  const [isText, setIsText] = useState7(false);
+  const [isLink, setIsLink] = useState7(false);
+  const [isBold, setIsBold] = useState7(false);
+  const [isItalic, setIsItalic] = useState7(false);
+  const [isUnderline, setIsUnderline] = useState7(false);
+  const [isStrikethrough, setIsStrikethrough] = useState7(false);
+  const [isSubscript, setIsSubscript] = useState7(false);
+  const [isSuperscript, setIsSuperscript] = useState7(false);
+  const [isCode, setIsCode] = useState7(false);
   const updatePopup = useCallback2(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
@@ -5761,13 +5794,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
       }
     });
   }, [editor]);
-  useEffect5(() => {
+  useEffect6(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  useEffect5(() => {
+  useEffect6(() => {
     return mergeRegister2(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -5783,7 +5816,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     return null;
   }
   return createPortal3(
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       TextFormatFloatingToolbar,
       {
         editor,
@@ -5809,16 +5842,15 @@ function FloatingTextFormatToolbarPlugin({
 }
 
 // src/rich-text-editor/plugins/LinkPlugin/index.tsx
-import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import "react";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { LinkPlugin as LexicalLinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { jsx as jsx91 } from "react/jsx-runtime";
 function LinkPlugin() {
-  return /* @__PURE__ */ jsx90(LexicalLinkPlugin, { validateUrl });
+  return /* @__PURE__ */ jsx91(LexicalLinkPlugin, { validateUrl });
 }
 
 // src/rich-text-editor/plugins/ListMaxIndentLevelPlugin/index.ts
-import { $getListDepth, $isListItemNode as $isListItemNode2, $isListNode as $isListNode2 } from "@lexical/list";
-import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
+import { useEffect as useEffect7 } from "react";
 import {
   $getSelection as $getSelection5,
   $isElementNode as $isElementNode2,
@@ -5826,18 +5858,14 @@ import {
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect6 } from "react";
+import { $getListDepth, $isListItemNode as $isListItemNode2, $isListNode as $isListNode2 } from "@lexical/list";
+import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
 function getElementNodesInSelection(selection) {
   const nodesInSelection = selection.getNodes();
   if (nodesInSelection.length === 0) {
-    return /* @__PURE__ */ new Set([
-      selection.anchor.getNode().getParentOrThrow(),
-      selection.focus.getNode().getParentOrThrow()
-    ]);
+    return /* @__PURE__ */ new Set([selection.anchor.getNode().getParentOrThrow(), selection.focus.getNode().getParentOrThrow()]);
   }
-  return new Set(
-    nodesInSelection.map((n) => $isElementNode2(n) ? n : n.getParentOrThrow())
-  );
+  return new Set(nodesInSelection.map((n) => $isElementNode2(n) ? n : n.getParentOrThrow()));
 }
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection5();
@@ -5852,9 +5880,7 @@ function isIndentPermitted(maxDepth) {
     } else if ($isListItemNode2(elementNode)) {
       const parent2 = elementNode.getParent();
       if (!$isListNode2(parent2)) {
-        throw new Error(
-          "ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent."
-        );
+        throw new Error("ListMaxIndentLevelPlugin: A ListItemNode must have a ListNode for a parent.");
       }
       totalDepth = Math.max($getListDepth(parent2) + 1, totalDepth);
     }
@@ -5863,7 +5889,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListMaxIndentLevelPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext6();
-  useEffect6(() => {
+  useEffect7(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
@@ -5874,7 +5900,7 @@ function ListMaxIndentLevelPlugin({ maxDepth }) {
 }
 
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { $getSelection as $getSelection6, $isRangeSelection as $isRangeSelection4 } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
 import { trimTextContentFromAnchor } from "@lexical/selection";
@@ -5916,7 +5942,7 @@ ${content}
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = useLexicalComposerContext7();
-  useEffect7(() => {
+  useEffect8(() => {
     let lastRestoredEditorState = null;
     return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       editor.update(() => {
@@ -5946,7 +5972,7 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 import { $getSelection as $getSelection7, $isRangeSelection as $isRangeSelection5, $setSelection as $setSelection2, FOCUS_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext8 } from "@lexical/react/LexicalComposerContext";
 var COMMAND_PRIORITY_LOW3 = 1;
@@ -5966,7 +5992,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = useLexicalComposerContext8();
-  useEffect8(() => {
+  useEffect9(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -5989,7 +6015,7 @@ function TabFocusPlugin() {
 }
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
-import { useCallback as useCallback3, useEffect as useEffect9, useRef as useRef4, useState as useState7 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect10, useRef as useRef5, useState as useState8 } from "react";
 import { $getRoot as $getRoot3, $getSelection as $getSelection8, $isRangeSelection as $isRangeSelection6, DEPRECATED_$isGridSelection } from "lexical";
 import { createPortal as createPortal4 } from "react-dom";
 import { useLexicalComposerContext as useLexicalComposerContext9 } from "@lexical/react/LexicalComposerContext";
@@ -6011,16 +6037,16 @@ import {
   TableCellHeaderStates,
   TableCellNode as TableCellNode2
 } from "@lexical/table";
-import { Fragment as Fragment6, jsx as jsx91, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx92, jsxs as jsxs69 } from "react/jsx-runtime";
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = useLexicalComposerContext9();
-  const [tableCellNode, updateTableCellNode] = useState7(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState7({
+  const [tableCellNode, updateTableCellNode] = useState8(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState8({
     columns: 1,
     rows: 1
   });
   const tr = useTr();
-  useEffect9(() => {
+  useEffect10(() => {
     return editor.registerMutationListener(TableCellNode2, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
       if (nodeUpdated) {
@@ -6030,7 +6056,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor, tableCellNode]);
-  useEffect9(() => {
+  useEffect10(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection8();
       if (DEPRECATED_$isGridSelection(selection)) {
@@ -6167,29 +6193,29 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     });
   }, [editor, tableCellNode, clearTableSelection]);
   return /* @__PURE__ */ jsxs69(Fragment6, { children: [
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(false), children: tr("actionTableInsertRowsAbove", selectionCounts.rows) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(true), children: tr("actionTableInsertRowsBelow", selectionCounts.rows) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(false), children: tr("actionTableInsertColumnsBefore", selectionCounts.columns) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(true), children: tr("actionTableInsertColumnsAfter", selectionCounts.columns) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => toggleTableRowIsHeader(), children: tr(
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(false), children: tr("actionTableInsertRowsAbove", selectionCounts.rows) }),
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(true), children: tr("actionTableInsertRowsBelow", selectionCounts.rows) }),
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(false), children: tr("actionTableInsertColumnsBefore", selectionCounts.columns) }),
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(true), children: tr("actionTableInsertColumnsAfter", selectionCounts.columns) }),
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => toggleTableRowIsHeader(), children: tr(
       (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "actionTableRemoveRowHeader" : "actionTableAddRowHeader"
     ) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => toggleTableColumnIsHeader(), children: tr(
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => toggleTableColumnIsHeader(), children: tr(
       (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "actionTableRemoveColumnHeader" : "actionTableAddColumnHeader"
     ) }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Separator, {}),
-    tableStats.columns > 1 && /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => deleteTableColumnAtSelection(), children: tr("actionTableDeleteColumn") }),
-    tableStats.rows > 1 && /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => deleteTableRowAtSelection(), children: tr("actionTableDeleteRow") }),
-    /* @__PURE__ */ jsx91(DropdownMenu.Item, { onSelect: () => deleteTableAtSelection(), children: tr("actionTableDeleteTable") })
+    /* @__PURE__ */ jsx92(DropdownMenu.Separator, {}),
+    tableStats.columns > 1 && /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => deleteTableColumnAtSelection(), children: tr("actionTableDeleteColumn") }),
+    tableStats.rows > 1 && /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => deleteTableRowAtSelection(), children: tr("actionTableDeleteRow") }),
+    /* @__PURE__ */ jsx92(DropdownMenu.Item, { onSelect: () => deleteTableAtSelection(), children: tr("actionTableDeleteTable") })
   ] });
 }
 function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = useLexicalComposerContext9();
   const tr = useTr();
-  const menuButtonRef = useRef4(null);
-  const [isMenuOpen, setIsMenuOpen] = useState7(false);
-  const [tableCellNode, setTableMenuCellNode] = useState7(null);
-  const [tableStats, setTablestats] = useState7({ rows: 1, columns: 1 });
+  const menuButtonRef = useRef5(null);
+  const [isMenuOpen, setIsMenuOpen] = useState8(false);
+  const [tableCellNode, setTableMenuCellNode] = useState8(null);
+  const [tableStats, setTablestats] = useState8({ rows: 1, columns: 1 });
   const moveMenu = useCallback3(() => {
     if (isMenuOpen) {
       return;
@@ -6233,14 +6259,14 @@ function TableCellActionMenuContainer({ anchorElem }) {
       setTableMenuCellNode(null);
     }
   }, [editor, isMenuOpen]);
-  useEffect9(() => {
+  useEffect10(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         moveMenu();
       });
     });
   });
-  useEffect9(() => {
+  useEffect10(() => {
     const menuButtonDOM = menuButtonRef.current;
     if (menuButtonDOM != null && tableCellNode != null) {
       const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
@@ -6258,12 +6284,12 @@ function TableCellActionMenuContainer({ anchorElem }) {
       }
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-  return /* @__PURE__ */ jsx91("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92("div", { className: "c-rte-table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ jsx92(
     DropdownMenu.Root,
     {
       onOpenChange: (isOpen) => setIsMenuOpen(isOpen),
-      content: /* @__PURE__ */ jsx91(TableActionMenu, { tableCellNode, tableStats }),
-      children: /* @__PURE__ */ jsx91(IconButton, { size: "xs", className: "table-cell-action-button", "aria-label": tr("actionTableOpenOptions"), children: /* @__PURE__ */ jsx91(Icon.Arrow, {}) })
+      content: /* @__PURE__ */ jsx92(TableActionMenu, { tableCellNode, tableStats }),
+      children: /* @__PURE__ */ jsx92(IconButton, { size: "xs", "aria-label": tr("actionTableOpenOptions"), children: /* @__PURE__ */ jsx92(Icon.Arrow, {}) })
     }
   ) });
 }
@@ -6271,11 +6297,11 @@ function TableActionMenuPlugin({
   anchorElem = document.body
 }) {
   const isEditable = useLexicalEditable();
-  return createPortal4(isEditable ? /* @__PURE__ */ jsx91(TableCellActionMenuContainer, { anchorElem }) : null, anchorElem);
+  return createPortal4(isEditable ? /* @__PURE__ */ jsx92(TableCellActionMenuContainer, { anchorElem }) : null, anchorElem);
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-import { useCallback as useCallback4, useEffect as useEffect10, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect11, useState as useState10 } from "react";
 import {
   $createParagraphNode as $createParagraphNode2,
   $getNodeByKey,
@@ -6321,10 +6347,10 @@ import {
 } from "@lexical/utils";
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import { CLEAR_EDITOR_COMMAND } from "lexical";
 import { useLexicalComposerContext as useLexicalComposerContext10 } from "@lexical/react/LexicalComposerContext";
-import { jsx as jsx92, jsxs as jsxs70 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs70 } from "react/jsx-runtime";
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -6339,51 +6365,48 @@ function ActionsPlugin({
 }) {
   const [editor] = useLexicalComposerContext10();
   const tr = useTr();
-  const actionMenuAnchorRef = useRef5(null);
-  return /* @__PURE__ */ jsxs70("div", { ref: actionMenuAnchorRef, className: "z-50 flex items-center ", children: [
-    /* @__PURE__ */ jsx92("div", {}),
-    /* @__PURE__ */ jsxs70(ActionMenu, { container: actionMenuAnchorRef.current, children: [
-      !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx92(
-        ActionMenu.Item,
-        {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
-        },
-        actionItem.title
-      )),
-      /* @__PURE__ */ jsx92(ActionMenu.Item, { onSelect: () => copyJson(editor), children: tr("actionCopyJSON") }),
-      /* @__PURE__ */ jsx92(
-        ActionMenu.Item,
-        {
-          className: "danger",
-          onSelect: () => {
-            editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
-            editor.focus();
-          },
-          children: tr("actionClear")
-        }
-      ),
-      !append ? null : append.map((actionItem) => /* @__PURE__ */ jsx92(
-        ActionMenu.Item,
-        {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
+  const actionMenuAnchorRef = useRef6(null);
+  return /* @__PURE__ */ jsx93("div", { ref: actionMenuAnchorRef, className: "c-rte-actions-plugin", children: /* @__PURE__ */ jsxs70(ActionMenu, { container: actionMenuAnchorRef.current, children: [
+    !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ jsx93(
+      ActionMenu.Item,
+      {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      },
+      actionItem.title
+    )),
+    /* @__PURE__ */ jsx93(ActionMenu.Item, { onSelect: () => copyJson(editor), children: tr("actionCopyJSON") }),
+    /* @__PURE__ */ jsx93(
+      ActionMenu.Item,
+      {
+        className: "danger",
+        onSelect: () => {
+          editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
+          editor.focus();
         },
-        actionItem.title
-      ))
-    ] })
-  ] });
+        children: tr("actionClear")
+      }
+    ),
+    !append ? null : append.map((actionItem) => /* @__PURE__ */ jsx93(
+      ActionMenu.Item,
+      {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      },
+      actionItem.title
+    ))
+  ] }) });
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-import { useState as useState8 } from "react";
+import { useState as useState9 } from "react";
 import { INSERT_TABLE_COMMAND } from "@lexical/table";
-import { Fragment as Fragment7, jsx as jsx93, jsxs as jsxs71 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs71 } from "react/jsx-runtime";
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = useState8("5");
-  const [columns, setColumns] = useState8("5");
+  const [rows, setRows] = useState9("5");
+  const [columns, setColumns] = useState9("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -6398,9 +6421,9 @@ function InsertTableDialog({ activeEditor }) {
       }
     });
   };
-  return /* @__PURE__ */ jsxs71(Fragment7, { children: [
-    /* @__PURE__ */ jsxs71("div", { className: "grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ", children: [
-      /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsxs71("div", { className: "c-rte-insert-table", children: [
+    /* @__PURE__ */ jsxs71("div", { className: "c-rte-insert-table__dimensions", children: [
+      /* @__PURE__ */ jsx94(
         InputWithLabel,
         {
           label: tr("insertTableRows"),
@@ -6411,8 +6434,8 @@ function InsertTableDialog({ activeEditor }) {
           onChange: (e) => setRows(e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx93("span", { className: "h-full bg-gray-100-800" }),
-      /* @__PURE__ */ jsx93(
+      /* @__PURE__ */ jsx94("span", { className: "c-rte-insert-table__dimensions__separator" }),
+      /* @__PURE__ */ jsx94(
         InputWithLabel,
         {
           type: "text",
@@ -6424,12 +6447,12 @@ function InsertTableDialog({ activeEditor }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx93("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ jsx93(Button, { as: Dialog.Close, size: "sm", intent: "action", "aria-label": tr("insertTableCommit"), onClick, children: tr("insertTableCommit") }) })
+    /* @__PURE__ */ jsx94("div", { className: "c-rte-insert-table__actions", children: /* @__PURE__ */ jsx94(Button, { as: Dialog.Close, size: "sm", intent: "action", "aria-label": tr("insertTableCommit"), onClick, children: tr("insertTableCommit") }) })
   ] });
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-import { Fragment as Fragment8, jsx as jsx94, jsxs as jsxs72 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx95, jsxs as jsxs72 } from "react/jsx-runtime";
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -6533,66 +6556,65 @@ function BlockFormatDropDown({
       });
     }
   };
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     DropdownMenu.Root,
     {
       disabled,
       style: { zIndex: 1 },
-      content: /* @__PURE__ */ jsxs72(Fragment8, { children: [
+      content: /* @__PURE__ */ jsxs72(Fragment7, { children: [
         /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: formatParagraph, children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon paragraph border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "paragraph" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `c-rte-icon-paragraph c-rte-toolbar__block-format__icon ${blockType === "paragraph" ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("i", { className: "icon paragraph" }),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === "paragraph" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Normal" })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === "paragraph" ? "selected" : ""}`, children: "Normal" })
         ] }),
         headings.map((headingSize) => /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: () => formatHeading(headingSize), children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon ${headingSize} border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px]  ${blockType === headingSize ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `c-rte-icon-${headingSize} c-rte-toolbar__block-format__icon ${blockType === headingSize ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`, children: headingTypeToBlockName[headingSize] })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === headingSize ? "selected" : ""}`, children: headingTypeToBlockName[headingSize] })
         ] }, headingSize)),
         /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: formatBulletList, children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon bullet-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "bullet" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `c-rte-icon-bullet-list c-rte-toolbar__block-format__icon ${blockType === "bullet" ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === "bullet" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Bullet List" })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === "bullet" ? "selected" : ""}`, children: "Bullet List" })
         ] }),
         /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: formatNumberedList, children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon numbered-list border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "number" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `c-rte-icon-numbered-list c-rte-toolbar__block-format__icon ${blockType === "number" ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === "number" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Numbered List" })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === "number" ? "selected" : ""}`, children: "Numbered List" })
         ] }),
         /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: formatQuote, "data-testid": "toggle-block-format-quote", children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon quote border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "quote" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `c-rte-icon-quote c-rte-toolbar__block-format__icon ${blockType === "quote" ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === "quote" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Quote" })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === "quote" ? "selected" : ""}`, children: "Quote" })
         ] }),
         /* @__PURE__ */ jsxs72(DropdownMenu.Item, { onClick: formatCode, "data-testid": "toggle-block-format-code", children: [
-          /* @__PURE__ */ jsx94(
+          /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `icon code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "opacity-100 bg-purple-50-900" : "opacity-60"}`
+              className: `icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${blockType === "code" ? "selected" : ""}`
             }
           ),
-          /* @__PURE__ */ jsx94("span", { className: `${blockType === "code" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Code block" })
+          /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__block-format__text ${blockType === "code" ? "selected" : ""}`, children: "Code block" })
         ] })
       ] }),
       children: /* @__PURE__ */ jsxs72(
@@ -6602,8 +6624,8 @@ function BlockFormatDropDown({
           "aria-label": "Formatting options for text style",
           "data-testid": "toggle-block-format",
           children: [
-            /* @__PURE__ */ jsx94("i", { className: `icon ${blockType} border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6` }),
-            /* @__PURE__ */ jsx94(Icon.Arrow, {})
+            /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__toggle-icon c-rte-icon-${blockType}` }),
+            /* @__PURE__ */ jsx95(Icon.Arrow, {})
           ]
         }
       )
@@ -6611,29 +6633,29 @@ function BlockFormatDropDown({
   );
 }
 function Divider() {
-  return /* @__PURE__ */ jsx94("div", { className: "divider" });
+  return /* @__PURE__ */ jsx95("div", { className: "c-rte-toolbar__divider" });
 }
 function ToolbarPlugin({
   actionsMenuPrepend,
   actionsMenuAppend
 }) {
   const [editor] = useLexicalComposerContext11();
-  const [activeEditor, setActiveEditor] = useState9(editor);
-  const [blockType, setBlockType] = useState9("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = useState9(null);
-  const [isLink, setIsLink] = useState9(false);
-  const [isBold, setIsBold] = useState9(false);
-  const [isItalic, setIsItalic] = useState9(false);
-  const [isUnderline, setIsUnderline] = useState9(false);
-  const [isStrikethrough, setIsStrikethrough] = useState9(false);
-  const [isSubscript, setIsSubscript] = useState9(false);
-  const [isSuperscript, setIsSuperscript] = useState9(false);
-  const [isCode, setIsCode] = useState9(false);
-  const [canUndo, setCanUndo] = useState9(false);
-  const [canRedo, setCanRedo] = useState9(false);
+  const [activeEditor, setActiveEditor] = useState10(editor);
+  const [blockType, setBlockType] = useState10("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = useState10(null);
+  const [isLink, setIsLink] = useState10(false);
+  const [isBold, setIsBold] = useState10(false);
+  const [isItalic, setIsItalic] = useState10(false);
+  const [isUnderline, setIsUnderline] = useState10(false);
+  const [isStrikethrough, setIsStrikethrough] = useState10(false);
+  const [isSubscript, setIsSubscript] = useState10(false);
+  const [isSuperscript, setIsSuperscript] = useState10(false);
+  const [isCode, setIsCode] = useState10(false);
+  const [canUndo, setCanUndo] = useState10(false);
+  const [canRedo, setCanRedo] = useState10(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = useState9("");
-  const [isEditable, setIsEditable] = useState9(() => editor.isEditable());
+  const [codeLanguage, setCodeLanguage] = useState10("");
+  const [isEditable, setIsEditable] = useState10(() => editor.isEditable());
   const updateToolbar = useCallback4(() => {
     const selection = $getSelection9();
     if ($isRangeSelection7(selection)) {
@@ -6681,7 +6703,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  useEffect10(() => {
+  useEffect11(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload, newEditor) => {
@@ -6692,7 +6714,7 @@ function ToolbarPlugin({
       COMMAND_PRIORITY_CRITICAL3
     );
   }, [editor, updateToolbar]);
-  useEffect10(() => {
+  useEffect11(() => {
     return mergeRegister3(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6758,9 +6780,9 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  return /* @__PURE__ */ jsxs72("div", { className: "toolbar", children: [
-    /* @__PURE__ */ jsxs72("div", { className: "flex", children: [
-      /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsxs72("div", { className: "c-rte-toolbar", children: [
+    /* @__PURE__ */ jsxs72("div", { className: "c-rte-toolbar__inner", children: [
+      /* @__PURE__ */ jsx95(
         IconButton,
         {
           disabled: !canUndo || !isEditable,
@@ -6770,16 +6792,16 @@ function ToolbarPlugin({
           type: "button",
           title: tr(IS_APPLE ? "actionUndoTitleApple" : "actionUndoTitle"),
           "aria-label": tr("actionUndoLabel"),
-          children: /* @__PURE__ */ jsx94(
+          children: /* @__PURE__ */ jsx95(
             "i",
             {
-              className: `format icon undo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${canUndo ? "opacity-100" : "opacity-30"}
+              className: `c-rte-icon-undo c-rte-toolbar__icon ${!canUndo ? "disabled" : ""}
         `
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx94(
+      /* @__PURE__ */ jsx95(
         IconButton,
         {
           disabled: !canRedo || !isEditable,
@@ -6789,34 +6811,29 @@ function ToolbarPlugin({
           type: "button",
           title: tr(IS_APPLE ? "actionRedoTitleApple" : "actionRedoTitle"),
           "aria-label": tr("actionRedoLabel"),
-          children: /* @__PURE__ */ jsx94(
-            "i",
-            {
-              className: `format icon redo border w-4 h-6 bg-no-repeat bg-center bg-[length:17px_17px] ${canRedo ? "opacity-100" : "opacity-30"}`
-            }
-          )
+          children: /* @__PURE__ */ jsx95("i", { className: `c-rte-icon-redo c-rte-toolbar__icon ${!canRedo ? "disabled" : ""}` })
         }
       ),
-      /* @__PURE__ */ jsx94(Divider, {}),
-      blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs72(Fragment8, { children: [
-        /* @__PURE__ */ jsx94(BlockFormatDropDown, { disabled: !isEditable, blockType, editor }),
-        /* @__PURE__ */ jsx94(Divider, {})
+      /* @__PURE__ */ jsx95(Divider, {}),
+      blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ jsxs72(Fragment7, { children: [
+        /* @__PURE__ */ jsx95(BlockFormatDropDown, { disabled: !isEditable, blockType, editor }),
+        /* @__PURE__ */ jsx95(Divider, {})
       ] }),
-      blockType === "code" ? /* @__PURE__ */ jsx94(Fragment8, { children: /* @__PURE__ */ jsx94(
+      blockType === "code" ? /* @__PURE__ */ jsx95(Fragment7, { children: /* @__PURE__ */ jsx95(
         DropdownMenu.Root,
         {
           disabled: !isEditable,
           style: { zIndex: 1 },
-          content: /* @__PURE__ */ jsx94(Fragment8, { children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
-            return /* @__PURE__ */ jsx94(
+          content: /* @__PURE__ */ jsx95(Fragment7, { children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
+            return /* @__PURE__ */ jsx95(
               DropdownMenu.Item,
               {
                 className: `item ${dropDownActiveClass(value === codeLanguage)}`,
                 onClick: () => onCodeLanguageSelect(value),
-                children: /* @__PURE__ */ jsx94(
+                children: /* @__PURE__ */ jsx95(
                   "span",
                   {
-                    className: `text min-w-[200px] block text-sm px-3 ${dropDownActiveClass(value === codeLanguage) ? "font-bold opacity-100" : "font-normal opacity-80"}`,
+                    className: `c-rte-toolbar__code-lang__sel-item ${dropDownActiveClass(value === codeLanguage) ? "selected" : ""}`,
                     children: name
                   }
                 )
@@ -6824,14 +6841,14 @@ function ToolbarPlugin({
               value
             );
           }) }),
-          children: /* @__PURE__ */ jsx94(Button, { "aria-label": tr("codeSelectLanguage"), append: /* @__PURE__ */ jsx94(Icon.Arrow, {}), children: /* @__PURE__ */ jsx94("span", { className: "font-medium text-sm", children: getLanguageFriendlyName2(codeLanguage) }) })
+          children: /* @__PURE__ */ jsx95(Button, { "aria-label": tr("codeSelectLanguage"), append: /* @__PURE__ */ jsx95(Icon.Arrow, {}), children: /* @__PURE__ */ jsx95("span", { className: "c-rte-toolbar__code-lang__button-text", children: getLanguageFriendlyName2(codeLanguage) }) })
         }
-      ) }) : /* @__PURE__ */ jsx94(Dialog, { children: /* @__PURE__ */ jsxs72("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ jsx94(
+      ) }) : /* @__PURE__ */ jsx95(Dialog, { children: /* @__PURE__ */ jsxs72("div", { className: "c-rte-toolbar__actions-rest", children: [
+        /* @__PURE__ */ jsx95(
           IconButton,
           {
             disabled: !isEditable,
-            className: `${isBold ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isBold ? "selected" : ""}`,
             type: "button",
             title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
             "aria-label": tr("actionFormatAsStrongLabel"),
@@ -6839,13 +6856,13 @@ function ToolbarPlugin({
             onClick: () => {
               activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "bold");
             },
-            children: /* @__PURE__ */ jsx94("i", { className: `format icon bold border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-bold` })
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           IconButton,
           {
-            className: `${isItalic ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isItalic ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "italic");
@@ -6854,13 +6871,13 @@ function ToolbarPlugin({
             title: tr(IS_APPLE ? "actionFormatAsEmphasizedTitleApple" : "actionFormatAsEmphasizedTitle"),
             "aria-label": tr("actionFormatAsEmphasizedLabel"),
             "data-testid": "toggle-format-emphasized",
-            children: /* @__PURE__ */ jsx94("i", { className: `format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-italic` })
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           IconButton,
           {
-            className: `${isUnderline ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isUnderline ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "underline");
@@ -6869,18 +6886,13 @@ function ToolbarPlugin({
             title: tr(IS_APPLE ? "actionFormatAsUnderlinedTitleApple" : "actionFormatAsUnderlinedTitle"),
             "aria-label": tr("actionFormatAsUnderlinedLabel"),
             "data-testid": "toggle-format-underlined",
-            children: /* @__PURE__ */ jsx94(
-              "i",
-              {
-                className: `format icon underline border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
-              }
-            )
+            children: /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-underline` })
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           IconButton,
           {
-            className: `${isCode ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isCode ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
               activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND2, "code");
@@ -6888,27 +6900,27 @@ function ToolbarPlugin({
             type: "button",
             title: tr("actionInsertCodeBlock"),
             "aria-label": tr("actionInsertCodeBlock"),
-            children: /* @__PURE__ */ jsx94("i", { className: `format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-code` })
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           IconButton,
           {
-            className: `${isLink ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isLink ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: insertLink,
             type: "button",
             "aria-label": tr("actionInsertlink"),
             title: tr("actionInsertlink"),
-            children: /* @__PURE__ */ jsx94("i", { className: `format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ jsx95("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-link` })
           }
         ),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(
           DropdownMenu.Root,
           {
             disabled: !isEditable,
             style: { zIndex: 1 },
-            content: /* @__PURE__ */ jsxs72(Fragment8, { children: [
+            content: /* @__PURE__ */ jsxs72(Fragment7, { children: [
               /* @__PURE__ */ jsxs72(
                 DropdownMenu.Item,
                 {
@@ -6918,13 +6930,13 @@ function ToolbarPlugin({
                   title: tr("actionFormatWithStrikethroughTitle"),
                   "aria-label": tr("actionFormatWithStrikethroughLabel"),
                   children: [
-                    /* @__PURE__ */ jsx94(
+                    /* @__PURE__ */ jsx95(
                       "i",
                       {
-                        className: `icon w-6 h-6 strikethrough border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isStrikethrough ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
+                        className: `c-rte-icon-strikethrough c-rte-toolbar__dd-item__icon ${isStrikethrough ? "selected" : ""}`
                       }
                     ),
-                    /* @__PURE__ */ jsx94("span", { className: `px-3 text-sm font-sans ${isStrikethrough ? "font-medium" : "font-normal"}`, children: tr("actionFormatAsStrongTitle") })
+                    /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__dd-item__text ${isStrikethrough ? "selected" : ""}`, children: tr("actionFormatAsStrongTitle") })
                   ]
                 }
               ),
@@ -6937,13 +6949,13 @@ function ToolbarPlugin({
                   title: tr("actionFormatWithSubscriptTitle"),
                   "aria-label": tr("actionFormatWithSubscriptLabel"),
                   children: [
-                    /* @__PURE__ */ jsx94(
+                    /* @__PURE__ */ jsx95(
                       "i",
                       {
-                        className: `icon w-6 h-6 subscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isSubscript ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
+                        className: `c-rte-icon-subscript c-rte-toolbar__dd-item__icon ${isSubscript ? "selected" : ""}`
                       }
                     ),
-                    /* @__PURE__ */ jsx94("span", { className: `px-3 text-sm font-sans ${isSubscript ? "font-medium" : "font-normal"}`, children: tr("actionFormatWithSubscriptTitle") })
+                    /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__dd-item__text ${isSubscript ? "selected" : ""}`, children: tr("actionFormatWithSubscriptTitle") })
                   ]
                 }
               ),
@@ -6956,13 +6968,13 @@ function ToolbarPlugin({
                   title: tr("actionFormatWithSuperscriptTitle"),
                   "aria-label": tr("actionFormatWithSuperscriptLabel"),
                   children: [
-                    /* @__PURE__ */ jsx94(
+                    /* @__PURE__ */ jsx95(
                       "i",
                       {
-                        className: `icon w-6 h-6 superscript border bg-no-repeat bg-center bg-[length:16px_16px]  rounded-sm ${isSuperscript ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`
+                        className: `c-rte-icon-superscript c-rte-toolbar__dd-item__icon ${isSuperscript ? "selected" : ""}`
                       }
                     ),
-                    /* @__PURE__ */ jsx94("span", { className: `px-3 text-sm font-sans ${isSuperscript ? "bg-purple-50-900" : "font-normal"}`, children: tr("actionFormatWithSuperscriptTitle") })
+                    /* @__PURE__ */ jsx95("span", { className: `c-rte-toolbar__dd-item__text ${isSuperscript ? "selected" : ""}`, children: tr("actionFormatWithSuperscriptTitle") })
                   ]
                 }
               ),
@@ -6974,8 +6986,8 @@ function ToolbarPlugin({
                   title: tr("actionClearTextFormatting"),
                   "aria-label": tr("actionClearTextFormatting"),
                   children: [
-                    /* @__PURE__ */ jsx94("i", { className: "icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                    /* @__PURE__ */ jsx94("span", { className: "px-3 text-sm text-pink-600-300 font-sans font-normal", children: "Clear Formatting" })
+                    /* @__PURE__ */ jsx95("i", { className: "c-rte-icon-clear c-rte-toolbar__dd-item__icon" }),
+                    /* @__PURE__ */ jsx95("span", { className: "c-rte-toolbar__dd-item__text--clear", children: "Clear Formatting" })
                   ]
                 }
               )
@@ -6986,48 +6998,48 @@ function ToolbarPlugin({
                 style: { backgroundColor: "transparent", padding: "0 8px" },
                 "aria-label": tr("actionTextFormattingOptions"),
                 children: [
-                  /* @__PURE__ */ jsx94("i", { className: `icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6` }),
-                  /* @__PURE__ */ jsx94(Icon.Arrow, {})
+                  /* @__PURE__ */ jsx95("i", { className: `c-rte-icon-dropdown-more c-rte-toolbar__toggle-icon` }),
+                  /* @__PURE__ */ jsx95(Icon.Arrow, {})
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx94(Divider, {}),
-        /* @__PURE__ */ jsx94(
+        /* @__PURE__ */ jsx95(Divider, {}),
+        /* @__PURE__ */ jsx95(
           DropdownMenu.Root,
           {
             style: { zIndex: 1 },
             disabled: !isEditable,
-            content: /* @__PURE__ */ jsxs72(Fragment8, { children: [
-              /* @__PURE__ */ jsx94(
+            content: /* @__PURE__ */ jsxs72(Fragment7, { children: [
+              /* @__PURE__ */ jsxs72(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
                     activeEditor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                   },
-                  children: /* @__PURE__ */ jsxs72("div", { className: "flex items-center font-sans font-normal", children: [
-                    /* @__PURE__ */ jsx94("i", { className: "icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                    /* @__PURE__ */ jsx94("span", { className: "px-3 text-sm", children: tr("horizontalRule") })
-                  ] })
+                  children: [
+                    /* @__PURE__ */ jsx95("i", { className: "c-rte-toolbar__dd-item__icon c-rte-icon-horizontal-rule" }),
+                    /* @__PURE__ */ jsx95("span", { className: "c-rte-toolbar__dd-item__text", children: tr("horizontalRule") })
+                  ]
                 }
               ),
-              /* @__PURE__ */ jsx94(DropdownMenu.Item, { children: /* @__PURE__ */ jsx94(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs72("div", { className: "flex items-center font-sans font-normal", children: [
-                /* @__PURE__ */ jsx94("i", { className: "icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                /* @__PURE__ */ jsx94("span", { className: "px-3 text-sm", children: tr("table") })
+              /* @__PURE__ */ jsx95(DropdownMenu.Item, { children: /* @__PURE__ */ jsx95(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs72("div", { className: "c-rte-toolbar__dd-item--table", children: [
+                /* @__PURE__ */ jsx95("i", { className: "c-rte-toolbar__dd-item__icon c-rte-icon-table" }),
+                /* @__PURE__ */ jsx95("span", { className: "c-rte-toolbar__dd-item__text", children: tr("table") })
               ] }) }) })
             ] }),
-            children: /* @__PURE__ */ jsx94(IconButton, { children: /* @__PURE__ */ jsx94("i", { className: "icon plus border w-full h-full bg-no-repeat bg-center bg-[length:20px_20px] " }) })
+            children: /* @__PURE__ */ jsx95(IconButton, { children: /* @__PURE__ */ jsx95("i", { className: "c-rte-icon-plus c-rte-toolbar__plus" }) })
           }
         ),
         /* @__PURE__ */ jsxs72(Dialog.Content, { children: [
-          /* @__PURE__ */ jsx94(Dialog.Title, { children: tr("insertTableTitle") }),
-          /* @__PURE__ */ jsx94(Dialog.Description, { children: tr("insertTableDescription") }),
-          /* @__PURE__ */ jsx94("div", { className: "items-center justify-between", children: /* @__PURE__ */ jsx94(InsertTableDialog, { activeEditor }) })
+          /* @__PURE__ */ jsx95(Dialog.Title, { children: tr("insertTableTitle") }),
+          /* @__PURE__ */ jsx95(Dialog.Description, { children: tr("insertTableDescription") }),
+          /* @__PURE__ */ jsx95(InsertTableDialog, { activeEditor })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx94(ActionsPlugin, { prepend: actionsMenuPrepend, append: actionsMenuAppend })
+    /* @__PURE__ */ jsx95(ActionsPlugin, { prepend: actionsMenuPrepend, append: actionsMenuAppend })
   ] });
 }
 
@@ -7081,7 +7093,7 @@ var theme = {
     h5: "CrystallizeRTEditorTheme__h5",
     h6: "CrystallizeRTEditorTheme__h6"
   },
-  image: "editor-image",
+  image: "",
   indent: "CrystallizeRTEditorTheme__indent",
   link: "CrystallizeRTEditorTheme__link",
   list: {
@@ -7134,7 +7146,7 @@ var theme = {
 var CrystallizeRTEditorTheme_default = theme;
 
 // src/rich-text-editor/rich-text-editor.tsx
-import { Fragment as Fragment9, jsx as jsx95, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx96, jsxs as jsxs73 } from "react/jsx-runtime";
 function RichTextEditor({
   initialData,
   editable = true,
@@ -7142,7 +7154,7 @@ function RichTextEditor({
   labelTranslations,
   ...rest
 }) {
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     LexicalComposer,
     {
       initialConfig: {
@@ -7157,7 +7169,7 @@ function RichTextEditor({
           richText: initialData
         }) : void 0
       },
-      children: /* @__PURE__ */ jsx95(I18nProvider, { language, labelTranslations, children: /* @__PURE__ */ jsx95(SharedHistoryContext, { children: /* @__PURE__ */ jsx95("div", { className: "c-rich-text-editor", children: /* @__PURE__ */ jsx95(RichTextEditorWithoutContext, { ...rest, editable }) }) }) })
+      children: /* @__PURE__ */ jsx96(I18nProvider, { language, labelTranslations, children: /* @__PURE__ */ jsx96(SharedHistoryContext, { children: /* @__PURE__ */ jsx96("div", { className: "c-rich-text-editor", children: /* @__PURE__ */ jsx96(RichTextEditorWithoutContext, { ...rest, editable }) }) }) })
     }
   );
 }
@@ -7170,34 +7182,23 @@ function RichTextEditorWithoutContext({
   actionsMenuAppend,
   slotPreContent,
   maxLength,
-  editable
+  editable,
+  id
 }) {
   const { historyState } = useSharedHistoryContext();
-  const placeholder = /* @__PURE__ */ jsx95("div", { className: "text-[14px] font-normal text-gray-300-600 italic absolute overflow-hidden text-ellipsis top-0 left-6 right-10 select-none whitespace-nowrap inline-block pointer-events-none ", children: placeholderText ?? "" });
+  const placeholder = /* @__PURE__ */ jsx96("div", { className: "c-rte-placeholder", children: placeholderText ?? "" });
   const [editor] = useLexicalComposerContext12();
-  const [floatingAnchorElem, setFloatingAnchorElem] = useState10(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState10(false);
-  const firstOnChangeTriggeredRef = useRef6(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState11(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = useState11(false);
+  const firstOnChangeTriggeredRef = useRef7(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  useEffect11(() => {
+  useEffect12(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  useEffect11(() => {
-    const updateViewPortWidth = () => {
-      const isNextSmallWidthViewport = window.matchMedia("(max-width: 1025px)").matches;
-      if (isNextSmallWidthViewport !== isSmallWidthViewport) {
-        setIsSmallWidthViewport(isNextSmallWidthViewport);
-      }
-    };
-    window.addEventListener("resize", updateViewPortWidth);
-    return () => {
-      window.removeEventListener("resize", updateViewPortWidth);
-    };
-  }, [isSmallWidthViewport]);
   function onLocalChange(editorState) {
     if (onChange) {
       if (triggerOnChangeOnAutoFocus || firstOnChangeTriggeredRef.current) {
@@ -7206,37 +7207,38 @@ function RichTextEditorWithoutContext({
     }
     firstOnChangeTriggeredRef.current = true;
   }
-  return /* @__PURE__ */ jsxs73(Fragment9, { children: [
-    /* @__PURE__ */ jsx95(OnChangePlugin, { onChange: onLocalChange, ignoreSelectionChange: true }),
-    /* @__PURE__ */ jsx95(ToolbarPlugin, { actionsMenuPrepend, actionsMenuAppend }),
+  return /* @__PURE__ */ jsxs73(Fragment8, { children: [
+    /* @__PURE__ */ jsx96(OnChangePlugin, { onChange: onLocalChange, ignoreSelectionChange: true }),
+    /* @__PURE__ */ jsx96(DimensionDetectorPlugin, { onChange: (d) => setIsSmallWidthViewport(d.isSmallWidth) }),
+    isSmallWidthViewport ? null : /* @__PURE__ */ jsx96(ToolbarPlugin, { actionsMenuPrepend, actionsMenuAppend }),
     slotPreContent,
-    /* @__PURE__ */ jsxs73("div", { className: "editor-container", children: [
-      maxLength != null ? /* @__PURE__ */ jsx95(MaxLengthPlugin, { maxLength }) : null,
-      !autoFocus ? null : /* @__PURE__ */ jsx95(AutoFocusPlugin, {}),
-      /* @__PURE__ */ jsx95(ClearEditorPlugin, {}),
-      /* @__PURE__ */ jsx95(LexicalAutoLinkPlugin, {}),
-      /* @__PURE__ */ jsx95(HistoryPlugin, { externalHistoryState: historyState }),
-      /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsxs73("div", { className: "c-rte-editor-container", children: [
+      maxLength != null ? /* @__PURE__ */ jsx96(MaxLengthPlugin, { maxLength }) : null,
+      !autoFocus ? null : /* @__PURE__ */ jsx96(AutoFocusPlugin, {}),
+      /* @__PURE__ */ jsx96(ClearEditorPlugin, {}),
+      /* @__PURE__ */ jsx96(LexicalAutoLinkPlugin, {}),
+      /* @__PURE__ */ jsx96(HistoryPlugin, { externalHistoryState: historyState }),
+      /* @__PURE__ */ jsx96(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx95("div", { className: "editor-scroller", children: /* @__PURE__ */ jsx95("div", { className: "editor", ref: onRef, children: /* @__PURE__ */ jsx95(ContentEditable, { className: "ContentEditable__root" }) }) }),
+          contentEditable: /* @__PURE__ */ jsx96("div", { className: "c-rte-editor-scroller", children: /* @__PURE__ */ jsx96("div", { className: "c-rte-editor", ref: onRef, children: /* @__PURE__ */ jsx96(ContentEditable, { className: "c-rte-contenteditable-root", id }) }) }),
           placeholder,
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx95(CodeHighlightPlugin, {}),
-      /* @__PURE__ */ jsx95(ListPlugin, {}),
-      /* @__PURE__ */ jsx95(ListMaxIndentLevelPlugin, { maxDepth: 7 }),
-      /* @__PURE__ */ jsx95(TablePlugin, {}),
-      /* @__PURE__ */ jsx95(LinkPlugin, {}),
-      /* @__PURE__ */ jsx95(HorizontalRulePlugin, {}),
-      /* @__PURE__ */ jsx95(TabFocusPlugin, {}),
-      /* @__PURE__ */ jsx95(TabIndentationPlugin, {}),
-      floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs73(Fragment9, { children: [
-        /* @__PURE__ */ jsx95(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ jsx95(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ jsx95(TableActionMenuPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ jsx95(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })
+      /* @__PURE__ */ jsx96(CodeHighlightPlugin, {}),
+      /* @__PURE__ */ jsx96(ListPlugin, {}),
+      /* @__PURE__ */ jsx96(ListMaxIndentLevelPlugin, { maxDepth: 7 }),
+      /* @__PURE__ */ jsx96(TablePlugin, {}),
+      /* @__PURE__ */ jsx96(LinkPlugin, {}),
+      /* @__PURE__ */ jsx96(HorizontalRulePlugin, {}),
+      /* @__PURE__ */ jsx96(TabFocusPlugin, {}),
+      /* @__PURE__ */ jsx96(TabIndentationPlugin, {}),
+      floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ jsxs73(Fragment8, { children: [
+        /* @__PURE__ */ jsx96(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ jsx96(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ jsx96(TableActionMenuPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ jsx96(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })
       ] })
     ] })
   ] });