@crystallize/design-system 1.12.0 → 1.13.0

package/dist/index.js

@@ -63,8 +63,8 @@ var import_react2 = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
 
 // src/spinner/index.tsx
-var import_class_variance_authority = require("class-variance-authority");
 var import_react = require("react");
+var import_class_variance_authority = require("class-variance-authority");
 var import_jsx_runtime = require("react/jsx-runtime");
 var realSize = 40;
 var Spinner = (0, import_react.forwardRef)(
@@ -233,8 +233,8 @@ var import_class_variance_authority7 = require("class-variance-authority");
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 
 // src/dropdown-menu/dropdown-menu-item.tsx
-var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_class_variance_authority4 = require("class-variance-authority");
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function DropdownMenuItem({ children, className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DropdownMenuPrimitive.Item, { ...delegated, className: (0, import_class_variance_authority4.cx)("c-dropdown-menu-item", className), children });
@@ -363,8 +363,8 @@ var Avatar = (0, import_react3.forwardRef)(({ name, size, className, ...delegate
 Avatar.displayName = "Avatar";
 
 // src/checkbox/checkbox.tsx
-var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_react4 = require("react");
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var Checkbox = (0, import_react4.forwardRef)((props, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxPrimitive.Root, { ...props, ref, className: "c-checkbox", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxPrimitive.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("svg", { viewBox: "0 0 9 9", fill: "none", className: "c-checkbox__svg", children: [
@@ -386,8 +386,8 @@ var Checkbox = (0, import_react4.forwardRef)((props, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 
-// src/dialog/destroyFns.ts
-var destroyFns = [];
+// src/dialog/config.tsx
+var import_react_dom = require("react-dom");
 
 // src/dialog/dialog.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
@@ -3775,9 +3775,6 @@ DialogBase.Content = DialogContent;
 DialogBase.Overlay = DialogPrimitive.Overlay;
 DialogBase.Close = DialogPrimitive.Close;
 
-// src/dialog/config.tsx
-var import_react_dom = require("react-dom");
-
 // src/dialog/confirm-dialog.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function ConfirmDialog({
@@ -3842,6 +3839,9 @@ function ConfirmDialog({
   ) });
 }
 
+// src/dialog/destroyFns.ts
+var destroyFns = [];
+
 // src/dialog/config.tsx
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function confirm(config) {
@@ -4013,8 +4013,8 @@ var IconButton = (0, import_react59.forwardRef)(
 IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
-var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
 var import_class_variance_authority11 = require("class-variance-authority");
+var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var inlineRadioGroupStyles = (0, import_class_variance_authority11.cva)("c-inline-radio-group", {
   variants: {
@@ -4044,34 +4044,12 @@ var InlineRadio = {
 var import_react63 = require("react");
 var import_class_variance_authority14 = require("class-variance-authority");
 
-// src/input/input.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
+// src/iconography/triangle.tsx
 var import_react60 = require("react");
 var import_jsx_runtime71 = require("react/jsx-runtime");
-var inputStyles = (0, import_class_variance_authority12.cva)(["c-input"], {
-  variants: {},
-  defaultVariants: {}
-});
-var Input = (0, import_react60.forwardRef)(({ className, ...delegated }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("input", { ref, className: inputStyles({ className }), type: "text", ...delegated });
-});
-Input.displayName = "Input";
-
-// src/label/label.tsx
-var import_react61 = require("react");
-var import_class_variance_authority13 = require("class-variance-authority");
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var Label2 = (0, import_react61.forwardRef)(({ className, ...delegated }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("label", { ref, className: (0, import_class_variance_authority13.cx)("c-label", className), ...delegated });
-});
-Label2.displayName = "Label";
-
-// src/iconography/triangle.tsx
-var import_react62 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var Triangle = (0, import_react62.forwardRef)((delegated, ref) => {
+var Triangle = (0, import_react60.forwardRef)((delegated, ref) => {
   const { width = 20, height = 20, ...rest } = delegated;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "svg",
     {
       viewBox: "0 0 17 15",
@@ -4081,11 +4059,33 @@ var Triangle = (0, import_react62.forwardRef)((delegated, ref) => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("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__ */ (0, import_jsx_runtime71.jsx)("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
+var import_react61 = require("react");
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var inputStyles = (0, import_class_variance_authority12.cva)(["c-input"], {
+  variants: {},
+  defaultVariants: {}
+});
+var Input = (0, import_react61.forwardRef)(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("input", { ref, className: inputStyles({ className }), type: "text", ...delegated });
+});
+Input.displayName = "Input";
+
+// src/label/label.tsx
+var import_react62 = require("react");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Label2 = (0, import_react62.forwardRef)(({ className, ...delegated }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("label", { ref, className: (0, import_class_variance_authority13.cx)("c-label", className), ...delegated });
+});
+Label2.displayName = "Label";
+
 // src/input-with-label/input-with-label.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var inputWithLabelStyles = (0, import_class_variance_authority14.cva)(["c-input-with-label"], {
@@ -4124,8 +4124,8 @@ var InputWithLabel = (0, import_react63.forwardRef)(
 InputWithLabel.displayName = "InputWithLabel";
 
 // src/progress/progress.tsx
-var ProgressPrimitives = __toESM(require("@radix-ui/react-progress"));
 var import_class_variance_authority15 = require("class-variance-authority");
+var ProgressPrimitives = __toESM(require("@radix-ui/react-progress"));
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function Progress({ className, value }) {
   return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ProgressPrimitives.Root, { className: (0, import_class_variance_authority15.cx)(className, "c-progress-root"), value, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
@@ -4163,8 +4163,8 @@ SelectItem.displayName = "SelectItem";
 
 // src/select/select-root.tsx
 var import_react65 = require("react");
-var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
 var import_class_variance_authority16 = require("class-variance-authority");
+var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var selectTriggerStyles = (0, import_class_variance_authority16.cva)("c-select-trigger", {
   variants: {
@@ -4203,9 +4203,9 @@ var Select = {
 };
 
 // src/slider/slider.tsx
-var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var import_class_variance_authority17 = require("class-variance-authority");
 var import_react66 = require("react");
+var import_class_variance_authority17 = require("class-variance-authority");
+var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
 var import_jsx_runtime79 = require("react/jsx-runtime");
 var Slider = (0, import_react66.forwardRef)(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(SliderPrimitive.Root, { className: (0, import_class_variance_authority17.cx)("c-slider-root", className), ref, ...delegated, children: [
@@ -4258,7 +4258,7 @@ function Tag({ children, className, variant, size, prepend, onRemove, ...delegat
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_react83 = require("react");
+var import_react84 = require("react");
 var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -4800,8 +4800,8 @@ var BaseNodes = [
 ];
 
 // src/rich-text-editor/plugins/AutoLinkPlugin/index.tsx
-var import_LexicalAutoLinkPlugin = require("@lexical/react/LexicalAutoLinkPlugin");
 var React = require("react");
+var import_LexicalAutoLinkPlugin = require("@lexical/react/LexicalAutoLinkPlugin");
 var import_jsx_runtime83 = require("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,}))/;
@@ -4876,7 +4876,7 @@ function CopyButton({ editor, getCodeDOMNode }) {
       console.error("Failed to copy: ", err);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("button", { className: "menu-item", onClick: handleClick, "aria-label": tr("actionCopyCode"), children: isCopyCompleted ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", { className: "format success" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", { className: "format copy" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("button", { className: "c-rte-code-button", onClick: handleClick, "aria-label": tr("actionCopyCode"), children: isCopyCompleted ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", { className: "c-rte-code-button__icon c-rte-icon-success" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("i", { className: "c-rte-code-button__icon c-rte-icon-copy" }) });
 }
 
 // src/rich-text-editor/plugins/CodeActionMenuPlugin/components/PrettierButton/index.tsx
@@ -4970,19 +4970,19 @@ function PrettierButton({ lang, editor, getCodeDOMNode }) {
       setTipsVisible(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "prettier-wrapper", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "c-rte-prettier-wrapper", children: [
     /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       "button",
       {
-        className: "menu-item",
+        className: "c-rte-code-button",
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "aria-label": tr("actionFormatCode"),
-        children: syntaxError ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("i", { className: "format prettier-error" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("i", { className: "format prettier" })
+        children: syntaxError ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("i", { className: "c-rte-code-button__icon c-rte-icon-prettier-error" }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("i", { className: "c-rte-code-button__icon c-rte-icon-prettier" })
       }
     ),
-    tipsVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("pre", { className: "code-error-tips", children: syntaxError }) : null
+    tipsVisible ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("pre", { className: "c-rte-code-error-tips", children: syntaxError }) : null
   ] });
 }
 
@@ -5064,8 +5064,8 @@ function CodeActionMenuContainer({ anchorElem }) {
   });
   const normalizedLang = (0, import_code6.normalizeCodeLang)(lang);
   const codeFriendlyName = (0, import_code6.getLanguageFriendlyName)(lang);
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "code-action-menu-container", style: { ...position }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "code-highlight-language", children: codeFriendlyName }),
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: isShown ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "c-rte-code-action-menu-container", style: { ...position }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "c-rte-code-highlight-language", children: codeFriendlyName }),
     /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(CopyButton, { editor, getCodeDOMNode }),
     canBePrettier(normalizedLang) ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(PrettierButton, { editor, getCodeDOMNode, lang: normalizedLang }) : null
   ] }) : null });
@@ -5074,7 +5074,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 };
@@ -5098,20 +5098,54 @@ function CodeHighlightPlugin() {
   return null;
 }
 
+// src/rich-text-editor/plugins/DimensionsDetectorPlugin/index.tsx
+var import_react73 = require("react");
+var import_jsx_runtime87 = require("react/jsx-runtime");
+function DimensionDetectorPlugin({ onChange }) {
+  const [dimensions, setDimensions] = (0, import_react73.useState)();
+  const ref = (0, import_react73.useRef)(null);
+  (0, import_react73.useEffect)(() => {
+    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();
+    }
+  }, []);
+  (0, import_react73.useEffect)(() => {
+    if (dimensions) {
+      onChange(dimensions);
+    }
+  }, [dimensions, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { ref, style: { height: 1, marginTop: -1 } });
+}
+
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_react74 = require("react");
+var import_react75 = require("react");
 var React4 = require("react");
-var import_lexical9 = require("lexical");
+var import_lexical8 = require("lexical");
 var import_react_dom3 = require("react-dom");
 var import_link4 = require("@lexical/link");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
 var import_utils = require("@lexical/utils");
 
 // src/rich-text-editor/ui/LinkPreview.tsx
-var import_react73 = require("react");
+var import_react74 = require("react");
 var import_lexical7 = require("lexical");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("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) {
@@ -5135,12 +5169,12 @@ function useSuspenseRequest(url) {
 function LinkPreviewContent({
   url
 }) {
-  const [textContent, setTextContent] = (0, import_react73.useState)("");
+  const [textContent, setTextContent] = (0, import_react74.useState)("");
   const { preview } = useSuspenseRequest(url);
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
   const tr = useTr();
   const hasPreview = preview !== null && preview.google?.title;
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     editor.update(() => {
       const sel = (0, import_lexical7.$getSelection)();
       const nodes = sel?.getNodes();
@@ -5168,18 +5202,18 @@ function LinkPreviewContent({
   if (!hasPreview) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "LinkPreview__container", children: [
-    preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "LinkPreview__imageWrapper bg-purple-50-900", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("img", { src: preview.google.image, alt: preview.google.title, className: "LinkPreview__image" }) }),
-    preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "LinkPreview__title", children: preview.google.title }),
-    preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "LinkPreview__description", children: preview.google.description }),
-    textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button, { className: "mb-4 ml-5", onClick: useTitleForText, children: tr("linkPreviewReplaceTextWithTitle") }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "c-rte-link-preview", children: [
+    preview.google.image && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "c-rte-link-preview-image-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("img", { src: preview.google.image, alt: preview.google.title, className: "c-rte-link-preview-image" }) }),
+    preview.google.title && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "c-rte-link-preview-title", children: preview.google.title }),
+    preview.google.description && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "c-rte-link-preview-description", children: preview.google.description }),
+    textContent && textContent !== preview.google.title ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button, { className: "c-rte-link-preview__replace-text-btn", onClick: useTitleForText, children: tr("linkPreviewReplaceTextWithTitle") }) : null
   ] });
 }
 function Glimmer(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "div",
     {
-      className: "LinkPreview__glimmer",
+      className: "c-rte-link-preview-glimmer",
       ...props,
       style: {
         animationDelay: String((props.index || 0) * 300),
@@ -5191,22 +5225,21 @@ function Glimmer(props) {
 function LinkPreview({
   url
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-    import_react73.Suspense,
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    import_react74.Suspense,
     {
-      fallback: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Glimmer, { style: { height: "80px" }, index: 0 }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Glimmer, { style: { width: "60%" }, index: 1 }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Glimmer, { style: { width: "80%" }, index: 2 })
+      fallback: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Glimmer, { style: { height: "80px" }, index: 0 }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Glimmer, { style: { width: "60%" }, index: 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Glimmer, { style: { width: "80%" }, index: 2 })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(LinkPreviewContent, { url })
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(LinkPreviewContent, { url })
     }
   );
 }
 
 // src/rich-text-editor/utils/getSelectedNode.ts
 var import_selection = require("@lexical/selection");
-var import_lexical8 = require("lexical");
 function getSelectedNode(selection) {
   const anchor = selection.anchor;
   const focus = selection.focus;
@@ -5267,24 +5300,24 @@ function validateUrl(url) {
 }
 
 // src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 function FloatingLinkEditor({
   editor,
   isLink,
   setIsLink,
   anchorElem
 }) {
-  const editorRef = (0, import_react74.useRef)(null);
-  const inputRef = (0, import_react74.useRef)(null);
-  const [linkUrl, setLinkUrl] = (0, import_react74.useState)("");
-  const [rel, setRel] = (0, import_react74.useState)(null);
-  const [target, setTarget] = (0, import_react74.useState)(null);
-  const [isEditMode, setEditMode] = (0, import_react74.useState)(false);
-  const [lastSelection, setLastSelection] = (0, import_react74.useState)(null);
+  const editorRef = (0, import_react75.useRef)(null);
+  const inputRef = (0, import_react75.useRef)(null);
+  const [linkUrl, setLinkUrl] = (0, import_react75.useState)("");
+  const [rel, setRel] = (0, import_react75.useState)(null);
+  const [target, setTarget] = (0, import_react75.useState)(null);
+  const [isEditMode, setEditMode] = (0, import_react75.useState)(false);
+  const [lastSelection, setLastSelection] = (0, import_react75.useState)(null);
   const tr = useTr();
-  const updateLinkEditor = (0, import_react74.useCallback)(() => {
-    const selection = (0, import_lexical9.$getSelection)();
-    if ((0, import_lexical9.$isRangeSelection)(selection)) {
+  const updateLinkEditor = (0, import_react75.useCallback)(() => {
+    const selection = (0, import_lexical8.$getSelection)();
+    if ((0, import_lexical8.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
       const parent2 = node.getParent();
       if ((0, import_link4.$isLinkNode)(parent2)) {
@@ -5332,7 +5365,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor]);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -5350,7 +5383,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, updateLinkEditor]);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     return (0, import_utils.mergeRegister)(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -5358,15 +5391,15 @@ function FloatingLinkEditor({
         });
       }),
       editor.registerCommand(
-        import_lexical9.SELECTION_CHANGE_COMMAND,
+        import_lexical8.SELECTION_CHANGE_COMMAND,
         () => {
           updateLinkEditor();
           return true;
         },
-        import_lexical9.COMMAND_PRIORITY_LOW
+        import_lexical8.COMMAND_PRIORITY_LOW
       ),
       editor.registerCommand(
-        import_lexical9.KEY_ESCAPE_COMMAND,
+        import_lexical8.KEY_ESCAPE_COMMAND,
         () => {
           if (isLink) {
             setIsLink(false);
@@ -5374,22 +5407,22 @@ function FloatingLinkEditor({
           }
           return false;
         },
-        import_lexical9.COMMAND_PRIORITY_HIGH
+        import_lexical8.COMMAND_PRIORITY_HIGH
       )
     );
   }, [editor, updateLinkEditor, setIsLink, isLink]);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateLinkEditor();
     });
   }, [editor, updateLinkEditor]);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     if (isEditMode && inputRef.current) {
       inputRef.current.focus();
     }
   }, [isEditMode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { ref: editorRef, className: "link-editor", children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ref: editorRef, className: "c-rte-link-editor", children: isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       InputWithLabel,
       {
         label: tr("linkEditorLink"),
@@ -5398,7 +5431,7 @@ function FloatingLinkEditor({
         onChange: (e) => setLinkUrl(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       InputWithLabel,
       {
         label: tr("linkEditorRel"),
@@ -5407,7 +5440,7 @@ function FloatingLinkEditor({
         onChange: (e) => setRel(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "border-0 border-b border-gray-100-800 border-solid px-3", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-input-group", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       InputWithLabel,
       {
         label: tr("linkEditorTarget"),
@@ -5416,7 +5449,7 @@ function FloatingLinkEditor({
         onChange: (e) => setTarget(e.target.value)
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "flex px-6 py-2 justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-button-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       Button,
       {
         onClick: () => {
@@ -5434,16 +5467,16 @@ function FloatingLinkEditor({
         children: tr("linkEditorCommit")
       }
     ) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "link-input !flex flex-nowrap justify-between items-center max-w-full ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl }),
-        rel || target ? /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex mt-1 gap-1", children: [
-          rel && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900 rounded-md py-0.5", children: rel }),
-          target && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "text-[10px] text-gray-600-300 px-1 bg-purple-50-900  rounded-md py-0.5", children: target })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "c-rte-link-editor-link-input", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "c-rte-link-editor-link-preview", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("a", { href: linkUrl, target: "_blank", rel: "noopener noreferrer", children: linkUrl }),
+        rel || target ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "c-rte-link-editor-preview-attrs", children: [
+          rel && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-preview-attr", children: rel }),
+          target && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: "c-rte-link-editor-preview-attr", children: target })
         ] }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         IconButton,
         {
           size: "sm",
@@ -5451,19 +5484,19 @@ function FloatingLinkEditor({
           onMouseDown: (event) => event.preventDefault(),
           onClick: () => setEditMode(true),
           "aria-label": tr("linkEditorEdit"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon.Edit, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon.Edit, {})
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(LinkPreview, { url: linkUrl }) })
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(LinkPreview, { url: linkUrl }) })
   ] }) });
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem) {
-  const [activeEditor, setActiveEditor] = (0, import_react74.useState)(editor);
-  const [isLink, setIsLink] = (0, import_react74.useState)(false);
-  const updateToolbar = (0, import_react74.useCallback)(() => {
-    const selection = (0, import_lexical9.$getSelection)();
-    if ((0, import_lexical9.$isRangeSelection)(selection)) {
+  const [activeEditor, setActiveEditor] = (0, import_react75.useState)(editor);
+  const [isLink, setIsLink] = (0, import_react75.useState)(false);
+  const updateToolbar = (0, import_react75.useCallback)(() => {
+    const selection = (0, import_lexical8.$getSelection)();
+    if ((0, import_lexical8.$isRangeSelection)(selection)) {
       const node = getSelectedNode(selection);
       const linkParent = (0, import_utils.$findMatchingParent)(node, import_link4.$isLinkNode);
       const autoLinkParent = (0, import_utils.$findMatchingParent)(node, import_link4.$isAutoLinkNode);
@@ -5474,19 +5507,19 @@ function useFloatingLinkEditorToolbar(editor, anchorElem) {
       }
     }
   }, []);
-  (0, import_react74.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     return editor.registerCommand(
-      import_lexical9.SELECTION_CHANGE_COMMAND,
+      import_lexical8.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
         updateToolbar();
         setActiveEditor(newEditor);
         return false;
       },
-      import_lexical9.COMMAND_PRIORITY_CRITICAL
+      import_lexical8.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
   return isLink ? (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FloatingLinkEditor, { editor: activeEditor, isLink, anchorElem, setIsLink }),
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(FloatingLinkEditor, { editor: activeEditor, isLink, anchorElem, setIsLink }),
     anchorElem
   ) : null;
 }
@@ -5498,9 +5531,9 @@ function FloatingLinkEditorPlugin({
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var React5 = require("react");
-var import_lexical10 = require("lexical");
+var import_lexical9 = require("lexical");
 var import_react_dom4 = require("react-dom");
 var import_code8 = require("@lexical/code");
 var import_link5 = require("@lexical/link");
@@ -5540,7 +5573,7 @@ function getDOMRangeRect(nativeSelection, rootElement) {
 }
 
 // src/rich-text-editor/plugins/FloatingTextFormatToolbarPlugin/index.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 function TextFormatFloatingToolbar({
   editor,
   anchorElem,
@@ -5553,17 +5586,17 @@ function TextFormatFloatingToolbar({
   isSubscript,
   isSuperscript
 }) {
-  const popupCharStylesEditorRef = (0, import_react75.useRef)(null);
+  const popupCharStylesEditorRef = (0, import_react76.useRef)(null);
   const tr = useTr();
-  const insertLink = (0, import_react75.useCallback)(() => {
+  const insertLink = (0, import_react76.useCallback)(() => {
     if (!isLink) {
       editor.dispatchCommand(import_link5.TOGGLE_LINK_COMMAND, "https://");
     } else {
       editor.dispatchCommand(import_link5.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  const updateTextFormatFloatingToolbar = (0, import_react75.useCallback)(() => {
-    const selection = (0, import_lexical10.$getSelection)();
+  const updateTextFormatFloatingToolbar = (0, import_react76.useCallback)(() => {
+    const selection = (0, import_lexical9.$getSelection)();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = window.getSelection();
     if (popupCharStylesEditorElem === null) {
@@ -5575,7 +5608,7 @@ function TextFormatFloatingToolbar({
       setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem);
     }
   }, [editor, anchorElem]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -5593,7 +5626,7 @@ function TextFormatFloatingToolbar({
       }
     };
   }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     editor.getEditorState().read(() => {
       updateTextFormatFloatingToolbar();
     });
@@ -5604,144 +5637,144 @@ function TextFormatFloatingToolbar({
         });
       }),
       editor.registerCommand(
-        import_lexical10.SELECTION_CHANGE_COMMAND,
+        import_lexical9.SELECTION_CHANGE_COMMAND,
         () => {
           updateTextFormatFloatingToolbar();
           return false;
         },
-        import_lexical10.COMMAND_PRIORITY_LOW
+        import_lexical9.COMMAND_PRIORITY_LOW
       )
     );
   }, [editor, updateTextFormatFloatingToolbar]);
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { ref: popupCharStylesEditorRef, className: "c-floating-text-format-popup gap-0.5", children: editor.isEditable() && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { ref: popupCharStylesEditorRef, className: "c-rte-floating-text-format-tb-plugin", children: editor.isEditable() && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "bold");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "bold");
         },
         style: { padding: 0, overflow: "hidden" },
         title: tr(IS_APPLE ? "actionFormatAsStrongTitleApple" : "actionFormatAsStrongTitle"),
         "aria-label": tr("actionFormatAsStrongLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "italic");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "italic");
         },
         title: tr("actionFormatAsEmphasizedTitle"),
         "aria-label": tr("actionFormatAsEmphasizedLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "underline");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "underline");
         },
         title: tr("actionFormatAsUnderlinedTitle"),
         "aria-label": tr("actionFormatAsUnderlinedLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "strikethrough");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "strikethrough");
         },
         title: tr("actionFormatWithStrikethroughTitle"),
         "aria-label": tr("actionFormatWithStrikethroughLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "subscript");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "subscript");
         },
         title: tr("actionFormatWithSubscriptTitle"),
         "aria-label": tr("actionFormatWithSubscriptLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "superscript");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "superscript");
         },
         title: tr("actionFormatWithSuperscriptTitle"),
         "aria-label": tr("actionFormatWithSuperscriptLabel"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: () => {
-          editor.dispatchCommand(import_lexical10.FORMAT_TEXT_COMMAND, "code");
+          editor.dispatchCommand(import_lexical9.FORMAT_TEXT_COMMAND, "code");
         },
         "aria-label": tr("actionInsertCodeBlock"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       IconButton,
       {
         style: { padding: 0, overflow: "hidden" },
         onClick: insertLink,
         "aria-label": tr("actionInsertlink"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "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" : ""}`
           }
         )
       }
@@ -5749,28 +5782,28 @@ function TextFormatFloatingToolbar({
   ] }) });
 }
 function useFloatingTextFormatToolbar(editor, anchorElem) {
-  const [isText, setIsText] = (0, import_react75.useState)(false);
-  const [isLink, setIsLink] = (0, import_react75.useState)(false);
-  const [isBold, setIsBold] = (0, import_react75.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react75.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react75.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react75.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react75.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react75.useState)(false);
-  const [isCode, setIsCode] = (0, import_react75.useState)(false);
-  const updatePopup = (0, import_react75.useCallback)(() => {
+  const [isText, setIsText] = (0, import_react76.useState)(false);
+  const [isLink, setIsLink] = (0, import_react76.useState)(false);
+  const [isBold, setIsBold] = (0, import_react76.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react76.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react76.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react76.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react76.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react76.useState)(false);
+  const [isCode, setIsCode] = (0, import_react76.useState)(false);
+  const updatePopup = (0, import_react76.useCallback)(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
       }
-      const selection = (0, import_lexical10.$getSelection)();
+      const selection = (0, import_lexical9.$getSelection)();
       const nativeSelection = window.getSelection();
       const rootElement = editor.getRootElement();
-      if (nativeSelection !== null && (!(0, import_lexical10.$isRangeSelection)(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
+      if (nativeSelection !== null && (!(0, import_lexical9.$isRangeSelection)(selection) || rootElement === null || !rootElement.contains(nativeSelection.anchorNode))) {
         setIsText(false);
         return;
       }
-      if (!(0, import_lexical10.$isRangeSelection)(selection)) {
+      if (!(0, import_lexical9.$isRangeSelection)(selection)) {
         return;
       }
       const node = getSelectedNode(selection);
@@ -5788,19 +5821,19 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
         setIsLink(false);
       }
       if (!(0, import_code8.$isCodeHighlightNode)(selection.anchor.getNode()) && selection.getTextContent() !== "") {
-        setIsText((0, import_lexical10.$isTextNode)(node));
+        setIsText((0, import_lexical9.$isTextNode)(node));
       } else {
         setIsText(false);
       }
     });
   }, [editor]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -5816,7 +5849,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
     return null;
   }
   return (0, import_react_dom4.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       TextFormatFloatingToolbar,
       {
         editor,
@@ -5842,33 +5875,28 @@ function FloatingTextFormatToolbarPlugin({
 }
 
 // src/rich-text-editor/plugins/LinkPlugin/index.tsx
-var import_LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
 var React6 = require("react");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_LexicalLinkPlugin = require("@lexical/react/LexicalLinkPlugin");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 function LinkPlugin() {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalLinkPlugin.LinkPlugin, { validateUrl });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_LexicalLinkPlugin.LinkPlugin, { validateUrl });
 }
 
 // src/rich-text-editor/plugins/ListMaxIndentLevelPlugin/index.ts
+var import_react77 = require("react");
+var import_lexical10 = require("lexical");
 var import_list4 = require("@lexical/list");
 var import_LexicalComposerContext6 = require("@lexical/react/LexicalComposerContext");
-var import_lexical11 = require("lexical");
-var import_react76 = require("react");
 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) => (0, import_lexical11.$isElementNode)(n) ? n : n.getParentOrThrow())
-  );
+  return new Set(nodesInSelection.map((n) => (0, import_lexical10.$isElementNode)(n) ? n : n.getParentOrThrow()));
 }
 function isIndentPermitted(maxDepth) {
-  const selection = (0, import_lexical11.$getSelection)();
-  if (!(0, import_lexical11.$isRangeSelection)(selection)) {
+  const selection = (0, import_lexical10.$getSelection)();
+  if (!(0, import_lexical10.$isRangeSelection)(selection)) {
     return false;
   }
   const elementNodesInSelection = getElementNodesInSelection(selection);
@@ -5879,9 +5907,7 @@ function isIndentPermitted(maxDepth) {
     } else if ((0, import_list4.$isListItemNode)(elementNode)) {
       const parent2 = elementNode.getParent();
       if (!(0, import_list4.$isListNode)(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((0, import_list4.$getListDepth)(parent2) + 1, totalDepth);
     }
@@ -5890,19 +5916,19 @@ function isIndentPermitted(maxDepth) {
 }
 function ListMaxIndentLevelPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     return editor.registerCommand(
-      import_lexical11.INDENT_CONTENT_COMMAND,
+      import_lexical10.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth ?? 7),
-      import_lexical11.COMMAND_PRIORITY_CRITICAL
+      import_lexical10.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
   return null;
 }
 
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
-var import_react77 = require("react");
-var import_lexical12 = require("lexical");
+var import_react78 = require("react");
+var import_lexical11 = require("lexical");
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
 var import_selection2 = require("@lexical/selection");
 var import_utils3 = require("@lexical/utils");
@@ -5943,12 +5969,12 @@ ${content}
 // src/rich-text-editor/plugins/MaxLengthPlugin/index.tsx
 function MaxLengthPlugin({ maxLength }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     let lastRestoredEditorState = null;
     return editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       editor.update(() => {
-        const selection = (0, import_lexical12.$getSelection)();
-        if (!(0, import_lexical12.$isRangeSelection)(selection) || !selection.isCollapsed()) {
+        const selection = (0, import_lexical11.$getSelection)();
+        if (!(0, import_lexical11.$isRangeSelection)(selection) || !selection.isCollapsed()) {
           return;
         }
         const prevTextContent = toText(lexicalToCrystallizeRichText({ editor, editorState: prevEditorState }));
@@ -5973,8 +5999,8 @@ function MaxLengthPlugin({ maxLength }) {
 }
 
 // src/rich-text-editor/plugins/TabFocusPlugin/index.tsx
-var import_react78 = require("react");
-var import_lexical13 = require("lexical");
+var import_react79 = require("react");
+var import_lexical12 = require("lexical");
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var COMMAND_PRIORITY_LOW3 = 1;
 var TAB_TO_FOCUS_INTERVAL = 100;
@@ -5993,18 +6019,18 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react78.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
     }
     return editor.registerCommand(
-      import_lexical13.FOCUS_COMMAND,
+      import_lexical12.FOCUS_COMMAND,
       (event) => {
-        const selection = (0, import_lexical13.$getSelection)();
-        if ((0, import_lexical13.$isRangeSelection)(selection)) {
+        const selection = (0, import_lexical12.$getSelection)();
+        if ((0, import_lexical12.$isRangeSelection)(selection)) {
           if (lastTabKeyDownTimestamp + TAB_TO_FOCUS_INTERVAL > event.timeStamp) {
-            (0, import_lexical13.$setSelection)(selection.clone());
+            (0, import_lexical12.$setSelection)(selection.clone());
           }
         }
         return false;
@@ -6016,22 +6042,22 @@ function TabFocusPlugin() {
 }
 
 // src/rich-text-editor/plugins/TableActionMenuPlugin/index.tsx
-var import_react79 = require("react");
-var import_lexical14 = require("lexical");
+var import_react80 = require("react");
+var import_lexical13 = require("lexical");
 var import_react_dom5 = require("react-dom");
 var import_LexicalComposerContext9 = require("@lexical/react/LexicalComposerContext");
 var import_useLexicalEditable = __toESM(require("@lexical/react/useLexicalEditable"));
 var import_table4 = require("@lexical/table");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  const [tableCellNode, updateTableCellNode] = (0, import_react79.useState)(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = (0, import_react79.useState)({
+  const [tableCellNode, updateTableCellNode] = (0, import_react80.useState)(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = (0, import_react80.useState)({
     columns: 1,
     rows: 1
   });
   const tr = useTr();
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     return editor.registerMutationListener(import_table4.TableCellNode, (nodeMutations) => {
       const nodeUpdated = nodeMutations.get(tableCellNode.getKey()) === "updated";
       if (nodeUpdated) {
@@ -6041,10 +6067,10 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor, tableCellNode]);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     editor.getEditorState().read(() => {
-      const selection = (0, import_lexical14.$getSelection)();
-      if ((0, import_lexical14.DEPRECATED_$isGridSelection)(selection)) {
+      const selection = (0, import_lexical13.$getSelection)();
+      if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
         const selectionShape = selection.getShape();
         updateSelectionCounts({
           columns: selectionShape.toX - selectionShape.fromX + 1,
@@ -6053,7 +6079,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       }
     });
   }, [editor]);
-  const clearTableSelection = (0, import_react79.useCallback)(() => {
+  const clearTableSelection = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
@@ -6068,17 +6094,17 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
         tableNode.markDirty();
         updateTableCellNode(tableCellNode.getLatest());
       }
-      const rootNode = (0, import_lexical14.$getRoot)();
+      const rootNode = (0, import_lexical13.$getRoot)();
       rootNode.selectStart();
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = (0, import_react79.useCallback)(
+  const insertTableRowAtSelection = (0, import_react80.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
-        const selection = (0, import_lexical14.$getSelection)();
+        const selection = (0, import_lexical13.$getSelection)();
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
         let tableRowIndex;
-        if ((0, import_lexical14.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
           const selectionShape = selection.getShape();
           tableRowIndex = shouldInsertAfter ? selectionShape.toY : selectionShape.fromY;
         } else {
@@ -6091,13 +6117,13 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.rows, clearTableSelection]
   );
-  const insertTableColumnAtSelection = (0, import_react79.useCallback)(
+  const insertTableColumnAtSelection = (0, import_react80.useCallback)(
     (shouldInsertAfter) => {
       editor.update(() => {
-        const selection = (0, import_lexical14.$getSelection)();
+        const selection = (0, import_lexical13.$getSelection)();
         const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
         let tableColumnIndex;
-        if ((0, import_lexical14.DEPRECATED_$isGridSelection)(selection)) {
+        if ((0, import_lexical13.DEPRECATED_$isGridSelection)(selection)) {
           const selectionShape = selection.getShape();
           tableColumnIndex = shouldInsertAfter ? selectionShape.toX : selectionShape.fromX;
         } else {
@@ -6110,7 +6136,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
     },
     [editor, tableCellNode, selectionCounts.columns, clearTableSelection]
   );
-  const deleteTableRowAtSelection = (0, import_react79.useCallback)(() => {
+  const deleteTableRowAtSelection = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -6118,14 +6144,14 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableAtSelection = (0, import_react79.useCallback)(() => {
+  const deleteTableAtSelection = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = (0, import_react79.useCallback)(() => {
+  const deleteTableColumnAtSelection = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -6133,7 +6159,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableRowIsHeader = (0, import_react79.useCallback)(() => {
+  const toggleTableRowIsHeader = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableRowIndex = (0, import_table4.$getTableRowIndexFromTableCellNode)(tableCellNode);
@@ -6154,7 +6180,7 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = (0, import_react79.useCallback)(() => {
+  const toggleTableColumnIsHeader = (0, import_react80.useCallback)(() => {
     editor.update(() => {
       const tableNode = (0, import_table4.$getTableNodeFromLexicalNodeOrThrow)(tableCellNode);
       const tableColumnIndex = (0, import_table4.$getTableColumnIndexFromTableCellNode)(tableCellNode);
@@ -6177,36 +6203,36 @@ function TableActionMenu({ tableCellNode: _tableCellNode, tableStats }) {
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(false), children: tr("actionTableInsertRowsAbove", selectionCounts.rows) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(true), children: tr("actionTableInsertRowsBelow", selectionCounts.rows) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(false), children: tr("actionTableInsertColumnsBefore", selectionCounts.columns) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(true), children: tr("actionTableInsertColumnsAfter", selectionCounts.columns) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => toggleTableRowIsHeader(), children: tr(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(false), children: tr("actionTableInsertRowsAbove", selectionCounts.rows) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => insertTableRowAtSelection(true), children: tr("actionTableInsertRowsBelow", selectionCounts.rows) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(false), children: tr("actionTableInsertColumnsBefore", selectionCounts.columns) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => insertTableColumnAtSelection(true), children: tr("actionTableInsertColumnsAfter", selectionCounts.columns) }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => toggleTableRowIsHeader(), children: tr(
       (tableCellNode.__headerState & import_table4.TableCellHeaderStates.ROW) === import_table4.TableCellHeaderStates.ROW ? "actionTableRemoveRowHeader" : "actionTableAddRowHeader"
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => toggleTableColumnIsHeader(), children: tr(
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => toggleTableColumnIsHeader(), children: tr(
       (tableCellNode.__headerState & import_table4.TableCellHeaderStates.COLUMN) === import_table4.TableCellHeaderStates.COLUMN ? "actionTableRemoveColumnHeader" : "actionTableAddColumnHeader"
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Separator, {}),
-    tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableColumnAtSelection(), children: tr("actionTableDeleteColumn") }),
-    tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableRowAtSelection(), children: tr("actionTableDeleteRow") }),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableAtSelection(), children: tr("actionTableDeleteTable") })
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Separator, {}),
+    tableStats.columns > 1 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableColumnAtSelection(), children: tr("actionTableDeleteColumn") }),
+    tableStats.rows > 1 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableRowAtSelection(), children: tr("actionTableDeleteRow") }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(DropdownMenu.Item, { onSelect: () => deleteTableAtSelection(), children: tr("actionTableDeleteTable") })
   ] });
 }
 function TableCellActionMenuContainer({ anchorElem }) {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
   const tr = useTr();
-  const menuButtonRef = (0, import_react79.useRef)(null);
-  const [isMenuOpen, setIsMenuOpen] = (0, import_react79.useState)(false);
-  const [tableCellNode, setTableMenuCellNode] = (0, import_react79.useState)(null);
-  const [tableStats, setTablestats] = (0, import_react79.useState)({ rows: 1, columns: 1 });
-  const moveMenu = (0, import_react79.useCallback)(() => {
+  const menuButtonRef = (0, import_react80.useRef)(null);
+  const [isMenuOpen, setIsMenuOpen] = (0, import_react80.useState)(false);
+  const [tableCellNode, setTableMenuCellNode] = (0, import_react80.useState)(null);
+  const [tableStats, setTablestats] = (0, import_react80.useState)({ rows: 1, columns: 1 });
+  const moveMenu = (0, import_react80.useCallback)(() => {
     if (isMenuOpen) {
       return;
     }
     const menu = menuButtonRef.current;
-    const selection = (0, import_lexical14.$getSelection)();
+    const selection = (0, import_lexical13.$getSelection)();
     const nativeSelection = window.getSelection();
     const activeElement = document.activeElement;
     if (selection == null || menu == null) {
@@ -6214,7 +6240,7 @@ function TableCellActionMenuContainer({ anchorElem }) {
       return;
     }
     const rootElement = editor.getRootElement();
-    if ((0, import_lexical14.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
+    if ((0, import_lexical13.$isRangeSelection)(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
       const tableCellNodeFromSelection = (0, import_table4.$getTableCellNodeFromLexicalNode)(selection.anchor.getNode());
       if (tableCellNodeFromSelection == null) {
         setTableMenuCellNode(null);
@@ -6244,14 +6270,14 @@ function TableCellActionMenuContainer({ anchorElem }) {
       setTableMenuCellNode(null);
     }
   }, [editor, isMenuOpen]);
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         moveMenu();
       });
     });
   });
-  (0, import_react79.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     const menuButtonDOM = menuButtonRef.current;
     if (menuButtonDOM != null && tableCellNode != null) {
       const tableCellNodeDOM = editor.getElementByKey(tableCellNode.getKey());
@@ -6269,12 +6295,12 @@ function TableCellActionMenuContainer({ anchorElem }) {
       }
     }
   }, [menuButtonRef, tableCellNode, editor, anchorElem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: "table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: "c-rte-table-cell-action-button-container", ref: menuButtonRef, children: tableCellNode != null && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     DropdownMenu.Root,
     {
       onOpenChange: (isOpen) => setIsMenuOpen(isOpen),
-      content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TableActionMenu, { tableCellNode, tableStats }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(IconButton, { size: "xs", className: "table-cell-action-button", "aria-label": tr("actionTableOpenOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon.Arrow, {}) })
+      content: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TableActionMenu, { tableCellNode, tableStats }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(IconButton, { size: "xs", "aria-label": tr("actionTableOpenOptions"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon.Arrow, {}) })
     }
   ) });
 }
@@ -6282,12 +6308,12 @@ function TableActionMenuPlugin({
   anchorElem = document.body
 }) {
   const isEditable = (0, import_useLexicalEditable.default)();
-  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TableCellActionMenuContainer, { anchorElem }) : null, anchorElem);
+  return (0, import_react_dom5.createPortal)(isEditable ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TableCellActionMenuContainer, { anchorElem }) : null, anchorElem);
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_react82 = require("react");
-var import_lexical16 = require("lexical");
+var import_react83 = require("react");
+var import_lexical15 = require("lexical");
 var import_code9 = require("@lexical/code");
 var import_link6 = require("@lexical/link");
 var import_list5 = require("@lexical/list");
@@ -6299,10 +6325,10 @@ var import_selection3 = require("@lexical/selection");
 var import_utils4 = require("@lexical/utils");
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
-var import_react80 = require("react");
-var import_lexical15 = require("lexical");
+var import_react81 = require("react");
+var import_lexical14 = require("lexical");
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 async function copyJson(editor) {
   const json = lexicalToCrystallizeRichText({ editor, editorState: editor.getEditorState() });
   try {
@@ -6317,51 +6343,48 @@ function ActionsPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const tr = useTr();
-  const actionMenuAnchorRef = (0, import_react80.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ref: actionMenuAnchorRef, className: "z-50 flex items-center ", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", {}),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(ActionMenu, { container: actionMenuAnchorRef.current, children: [
-      !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        ActionMenu.Item,
-        {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
-        },
-        actionItem.title
-      )),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ActionMenu.Item, { onSelect: () => copyJson(editor), children: tr("actionCopyJSON") }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        ActionMenu.Item,
-        {
-          className: "danger",
-          onSelect: () => {
-            editor.dispatchCommand(import_lexical15.CLEAR_EDITOR_COMMAND, void 0);
-            editor.focus();
-          },
-          children: tr("actionClear")
-        }
-      ),
-      !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-        ActionMenu.Item,
-        {
-          onSelect: actionItem.action,
-          className: actionItem.type === "danger" ? "danger" : "",
-          children: actionItem.title
+  const actionMenuAnchorRef = (0, import_react81.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { ref: actionMenuAnchorRef, className: "c-rte-actions-plugin", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(ActionMenu, { container: actionMenuAnchorRef.current, children: [
+    !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      ActionMenu.Item,
+      {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      },
+      actionItem.title
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ActionMenu.Item, { onSelect: () => copyJson(editor), children: tr("actionCopyJSON") }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      ActionMenu.Item,
+      {
+        className: "danger",
+        onSelect: () => {
+          editor.dispatchCommand(import_lexical14.CLEAR_EDITOR_COMMAND, void 0);
+          editor.focus();
         },
-        actionItem.title
-      ))
-    ] })
-  ] });
+        children: tr("actionClear")
+      }
+    ),
+    !append ? null : append.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      ActionMenu.Item,
+      {
+        onSelect: actionItem.action,
+        className: actionItem.type === "danger" ? "danger" : "",
+        children: actionItem.title
+      },
+      actionItem.title
+    ))
+  ] }) });
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-var import_react81 = require("react");
+var import_react82 = require("react");
 var import_table5 = require("@lexical/table");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = (0, import_react81.useState)("5");
-  const [columns, setColumns] = (0, import_react81.useState)("5");
+  const [rows, setRows] = (0, import_react82.useState)("5");
+  const [columns, setColumns] = (0, import_react82.useState)("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -6376,9 +6399,9 @@ function InsertTableDialog({ activeEditor }) {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "grid grid-cols-[1fr_1px_1fr] border border-gray-100-800 border-solid shadow-sm rounded-md ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "c-rte-insert-table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "c-rte-insert-table__dimensions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         InputWithLabel,
         {
           label: tr("insertTableRows"),
@@ -6389,8 +6412,8 @@ function InsertTableDialog({ activeEditor }) {
           onChange: (e) => setRows(e.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "h-full bg-gray-100-800" }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "c-rte-insert-table__dimensions__separator" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         InputWithLabel,
         {
           type: "text",
@@ -6402,12 +6425,12 @@ function InsertTableDialog({ activeEditor }) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "flex justify-end mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button, { as: Dialog.Close, size: "sm", intent: "action", "aria-label": tr("insertTableCommit"), onClick, children: tr("insertTableCommit") }) })
+    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "c-rte-insert-table__actions", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Button, { as: Dialog.Close, size: "sm", intent: "action", "aria-label": tr("insertTableCommit"), onClick, children: tr("insertTableCommit") }) })
   ] });
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var headingTypeToBlockName = {
   h1: "Heading 1",
   h2: "Heading 2",
@@ -6448,17 +6471,17 @@ function BlockFormatDropDown({
   const formatParagraph = () => {
     if (blockType !== "paragraph") {
       editor.update(() => {
-        const selection = (0, import_lexical16.$getSelection)();
-        if ((0, import_lexical16.$isRangeSelection)(selection) || (0, import_lexical16.DEPRECATED_$isGridSelection)(selection))
-          (0, import_selection3.$setBlocksType)(selection, () => (0, import_lexical16.$createParagraphNode)());
+        const selection = (0, import_lexical15.$getSelection)();
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection))
+          (0, import_selection3.$setBlocksType)(selection, () => (0, import_lexical15.$createParagraphNode)());
       });
     }
   };
   const formatHeading = (headingSize) => {
     if (blockType !== headingSize) {
       editor.update(() => {
-        const selection = (0, import_lexical16.$getSelection)();
-        if ((0, import_lexical16.$isRangeSelection)(selection) || (0, import_lexical16.DEPRECATED_$isGridSelection)(selection)) {
+        const selection = (0, import_lexical15.$getSelection)();
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
           (0, import_selection3.$setBlocksType)(selection, () => (0, import_rich_text4.$createHeadingNode)(headingSize));
         }
       });
@@ -6481,11 +6504,11 @@ function BlockFormatDropDown({
   const formatQuote = () => {
     if (blockType !== "quote") {
       editor.update(() => {
-        const selection = (0, import_lexical16.$getSelection)();
-        if ((0, import_lexical16.$isRangeSelection)(selection) || (0, import_lexical16.DEPRECATED_$isGridSelection)(selection)) {
+        const selection = (0, import_lexical15.$getSelection)();
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
           (0, import_selection3.$setBlocksType)(selection, () => (0, import_rich_text4.$createQuoteNode)());
         } else {
-          (0, import_selection3.$setBlocksType)((0, import_lexical16.$getRoot)().select(), () => (0, import_rich_text4.$createQuoteNode)());
+          (0, import_selection3.$setBlocksType)((0, import_lexical15.$getRoot)().select(), () => (0, import_rich_text4.$createQuoteNode)());
         }
       });
     }
@@ -6493,95 +6516,94 @@ function BlockFormatDropDown({
   const formatCode = () => {
     if (blockType !== "code") {
       editor.update(() => {
-        let selection = (0, import_lexical16.$getSelection)();
-        if ((0, import_lexical16.$isRangeSelection)(selection) || (0, import_lexical16.DEPRECATED_$isGridSelection)(selection)) {
+        let selection = (0, import_lexical15.$getSelection)();
+        if ((0, import_lexical15.$isRangeSelection)(selection) || (0, import_lexical15.DEPRECATED_$isGridSelection)(selection)) {
           if (selection.isCollapsed()) {
             (0, import_selection3.$setBlocksType)(selection, () => (0, import_code9.$createCodeNode)());
           } else {
             const textContent = selection.getTextContent();
             const codeNode = (0, import_code9.$createCodeNode)();
             selection.insertNodes([codeNode]);
-            selection = (0, import_lexical16.$getSelection)();
-            if ((0, import_lexical16.$isRangeSelection)(selection))
+            selection = (0, import_lexical15.$getSelection)();
+            if ((0, import_lexical15.$isRangeSelection)(selection))
               selection.insertRawText(textContent);
           }
         } else {
-          (0, import_selection3.$setBlocksType)((0, import_lexical16.$getRoot)().select(), () => (0, import_code9.$createCodeNode)());
+          (0, import_selection3.$setBlocksType)((0, import_lexical15.$getRoot)().select(), () => (0, import_code9.$createCodeNode)());
         }
       });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     DropdownMenu.Root,
     {
       disabled,
       style: { zIndex: 1 },
-      content: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: formatParagraph, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      content: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: formatParagraph, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("i", { className: "icon paragraph" }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === "paragraph" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Normal" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === "paragraph" ? "selected" : ""}`, children: "Normal" })
         ] }),
-        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: () => formatHeading(headingSize), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        headings.map((headingSize) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: () => formatHeading(headingSize), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === headingSize ? "font-bold" : "font-normal"} text-sm px-3 min-w-[150px]`, children: headingTypeToBlockName[headingSize] })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === headingSize ? "selected" : ""}`, children: headingTypeToBlockName[headingSize] })
         ] }, headingSize)),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: formatBulletList, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: formatBulletList, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === "bullet" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Bullet List" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === "bullet" ? "selected" : ""}`, children: "Bullet List" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: formatNumberedList, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: formatNumberedList, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === "number" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Numbered List" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === "number" ? "selected" : ""}`, children: "Numbered List" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: formatQuote, "data-testid": "toggle-block-format-quote", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: formatQuote, "data-testid": "toggle-block-format-quote", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === "quote" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Quote" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === "quote" ? "selected" : ""}`, children: "Quote" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(DropdownMenu.Item, { onClick: formatCode, "data-testid": "toggle-block-format-code", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(DropdownMenu.Item, { onClick: formatCode, "data-testid": "toggle-block-format-code", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `${blockType === "code" ? "font-bold" : "font-normal"} text-sm px-3  min-w-[150px]`, children: "Code block" })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__block-format__text ${blockType === "code" ? "selected" : ""}`, children: "Code block" })
         ] })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
         Button,
         {
           style: { backgroundColor: "transparent", padding: "0 8px" },
           "aria-label": "Formatting options for text style",
           "data-testid": "toggle-block-format",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: `icon ${blockType} border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6` }),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon.Arrow, {})
+            /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__toggle-icon c-rte-icon-${blockType}` }),
+            /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon.Arrow, {})
           ]
         }
       )
@@ -6589,36 +6611,36 @@ function BlockFormatDropDown({
   );
 }
 function Divider() {
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "divider" });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "c-rte-toolbar__divider" });
 }
 function ToolbarPlugin({
   actionsMenuPrepend,
   actionsMenuAppend
 }) {
   const [editor] = (0, import_LexicalComposerContext11.useLexicalComposerContext)();
-  const [activeEditor, setActiveEditor] = (0, import_react82.useState)(editor);
-  const [blockType, setBlockType] = (0, import_react82.useState)("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = (0, import_react82.useState)(null);
-  const [isLink, setIsLink] = (0, import_react82.useState)(false);
-  const [isBold, setIsBold] = (0, import_react82.useState)(false);
-  const [isItalic, setIsItalic] = (0, import_react82.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, import_react82.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, import_react82.useState)(false);
-  const [isSubscript, setIsSubscript] = (0, import_react82.useState)(false);
-  const [isSuperscript, setIsSuperscript] = (0, import_react82.useState)(false);
-  const [isCode, setIsCode] = (0, import_react82.useState)(false);
-  const [canUndo, setCanUndo] = (0, import_react82.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react82.useState)(false);
+  const [activeEditor, setActiveEditor] = (0, import_react83.useState)(editor);
+  const [blockType, setBlockType] = (0, import_react83.useState)("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = (0, import_react83.useState)(null);
+  const [isLink, setIsLink] = (0, import_react83.useState)(false);
+  const [isBold, setIsBold] = (0, import_react83.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react83.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react83.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react83.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react83.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react83.useState)(false);
+  const [isCode, setIsCode] = (0, import_react83.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react83.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react83.useState)(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = (0, import_react82.useState)("");
-  const [isEditable, setIsEditable] = (0, import_react82.useState)(() => editor.isEditable());
-  const updateToolbar = (0, import_react82.useCallback)(() => {
-    const selection = (0, import_lexical16.$getSelection)();
-    if ((0, import_lexical16.$isRangeSelection)(selection)) {
+  const [codeLanguage, setCodeLanguage] = (0, import_react83.useState)("");
+  const [isEditable, setIsEditable] = (0, import_react83.useState)(() => editor.isEditable());
+  const updateToolbar = (0, import_react83.useCallback)(() => {
+    const selection = (0, import_lexical15.$getSelection)();
+    if ((0, import_lexical15.$isRangeSelection)(selection)) {
       const anchorNode = selection.anchor.getNode();
       let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils4.$findMatchingParent)(anchorNode, (e) => {
         const parent3 = e.getParent();
-        return parent3 !== null && (0, import_lexical16.$isRootOrShadowRoot)(parent3);
+        return parent3 !== null && (0, import_lexical15.$isRootOrShadowRoot)(parent3);
       });
       if (element === null) {
         element = anchorNode.getTopLevelElementOrThrow();
@@ -6659,18 +6681,18 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     return editor.registerCommand(
-      import_lexical16.SELECTION_CHANGE_COMMAND,
+      import_lexical15.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
         updateToolbar();
         setActiveEditor(newEditor);
         return false;
       },
-      import_lexical16.COMMAND_PRIORITY_CRITICAL
+      import_lexical15.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react82.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6681,30 +6703,30 @@ function ToolbarPlugin({
         });
       }),
       activeEditor.registerCommand(
-        import_lexical16.CAN_UNDO_COMMAND,
+        import_lexical15.CAN_UNDO_COMMAND,
         (payload) => {
           setCanUndo(payload);
           return false;
         },
-        import_lexical16.COMMAND_PRIORITY_CRITICAL
+        import_lexical15.COMMAND_PRIORITY_CRITICAL
       ),
       activeEditor.registerCommand(
-        import_lexical16.CAN_REDO_COMMAND,
+        import_lexical15.CAN_REDO_COMMAND,
         (payload) => {
           setCanRedo(payload);
           return false;
         },
-        import_lexical16.COMMAND_PRIORITY_CRITICAL
+        import_lexical15.COMMAND_PRIORITY_CRITICAL
       )
     );
   }, [activeEditor, editor, updateToolbar]);
-  const clearFormatting = (0, import_react82.useCallback)(() => {
+  const clearFormatting = (0, import_react83.useCallback)(() => {
     activeEditor.update(() => {
-      const selection = (0, import_lexical16.$getSelection)();
-      if ((0, import_lexical16.$isRangeSelection)(selection)) {
+      const selection = (0, import_lexical15.$getSelection)();
+      if ((0, import_lexical15.$isRangeSelection)(selection)) {
         (0, import_selection3.$selectAll)(selection);
         selection.getNodes().forEach((node) => {
-          if ((0, import_lexical16.$isTextNode)(node)) {
+          if ((0, import_lexical15.$isTextNode)(node)) {
             node.setFormat(0);
             node.setStyle("");
             (0, import_utils4.$getNearestBlockElementAncestorOrThrow)(node).setFormat("");
@@ -6716,18 +6738,18 @@ function ToolbarPlugin({
       }
     });
   }, [activeEditor]);
-  const insertLink = (0, import_react82.useCallback)(() => {
+  const insertLink = (0, import_react83.useCallback)(() => {
     if (!isLink) {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
     } else {
       editor.dispatchCommand(import_link6.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink]);
-  const onCodeLanguageSelect = (0, import_react82.useCallback)(
+  const onCodeLanguageSelect = (0, import_react83.useCallback)(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
-          const node = (0, import_lexical16.$getNodeByKey)(selectedElementKey);
+          const node = (0, import_lexical15.$getNodeByKey)(selectedElementKey);
           if ((0, import_code9.$isCodeNode)(node)) {
             node.setLanguage(value);
           }
@@ -6736,65 +6758,60 @@ function ToolbarPlugin({
     },
     [activeEditor, selectedElementKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "c-rte-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "c-rte-toolbar__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         IconButton,
         {
           disabled: !canUndo || !isEditable,
           onClick: () => {
-            activeEditor.dispatchCommand(import_lexical16.UNDO_COMMAND, void 0);
+            activeEditor.dispatchCommand(import_lexical15.UNDO_COMMAND, void 0);
           },
           type: "button",
           title: tr(IS_APPLE ? "actionUndoTitleApple" : "actionUndoTitle"),
           "aria-label": tr("actionUndoLabel"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             "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__ */ (0, import_jsx_runtime94.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         IconButton,
         {
           disabled: !canRedo || !isEditable,
           onClick: () => {
-            activeEditor.dispatchCommand(import_lexical16.REDO_COMMAND, void 0);
+            activeEditor.dispatchCommand(import_lexical15.REDO_COMMAND, void 0);
           },
           type: "button",
           title: tr(IS_APPLE ? "actionRedoTitleApple" : "actionRedoTitle"),
           "aria-label": tr("actionRedoLabel"),
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            "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__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-icon-redo c-rte-toolbar__icon ${!canRedo ? "disabled" : ""}` })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Divider, {}),
-      blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(BlockFormatDropDown, { disabled: !isEditable, blockType, editor }),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Divider, {})
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Divider, {}),
+      blockType in blockTypeToBlockName && activeEditor === editor && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(BlockFormatDropDown, { disabled: !isEditable, blockType, editor }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Divider, {})
       ] }),
-      blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      blockType === "code" ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         DropdownMenu.Root,
         {
           disabled: !isEditable,
           style: { zIndex: 1 },
-          content: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_jsx_runtime94.Fragment, { children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
-            return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          content: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, { children: CODE_LANGUAGE_OPTIONS.map(([value, name]) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
               DropdownMenu.Item,
               {
                 className: `item ${dropDownActiveClass(value === codeLanguage)}`,
                 onClick: () => onCodeLanguageSelect(value),
-                children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                   "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
                   }
                 )
@@ -6802,149 +6819,144 @@ function ToolbarPlugin({
               value
             );
           }) }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Button, { "aria-label": tr("codeSelectLanguage"), append: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon.Arrow, {}), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "font-medium text-sm", children: (0, import_code9.getLanguageFriendlyName)(codeLanguage) }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Button, { "aria-label": tr("codeSelectLanguage"), append: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon.Arrow, {}), children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "c-rte-toolbar__code-lang__button-text", children: (0, import_code9.getLanguageFriendlyName)(codeLanguage) }) })
         }
-      ) }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+      ) }) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "c-rte-toolbar__actions-rest", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           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"),
             "data-testid": "toggle-format-bold",
             onClick: () => {
-              activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "bold");
+              activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "bold");
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: `format icon bold border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-bold` })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           IconButton,
           {
-            className: `${isItalic ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isItalic ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
-              activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "italic");
+              activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "italic");
             },
             type: "button",
             title: tr(IS_APPLE ? "actionFormatAsEmphasizedTitleApple" : "actionFormatAsEmphasizedTitle"),
             "aria-label": tr("actionFormatAsEmphasizedLabel"),
             "data-testid": "toggle-format-emphasized",
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: `format icon italic border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-italic` })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           IconButton,
           {
-            className: `${isUnderline ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isUnderline ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
-              activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "underline");
+              activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "underline");
             },
             type: "button",
             title: tr(IS_APPLE ? "actionFormatAsUnderlinedTitleApple" : "actionFormatAsUnderlinedTitle"),
             "aria-label": tr("actionFormatAsUnderlinedLabel"),
             "data-testid": "toggle-format-underlined",
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-              "i",
-              {
-                className: `format icon underline border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]`
-              }
-            )
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-underline` })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           IconButton,
           {
-            className: `${isCode ? "opacity-100 !bg-purple-50-900" : "opacity-60"}`,
+            className: `c-rte-toolbar__icon-btn ${isCode ? "selected" : ""}`,
             disabled: !isEditable,
             onClick: () => {
-              activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "code");
+              activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "code");
             },
             type: "button",
             title: tr("actionInsertCodeBlock"),
             "aria-label": tr("actionInsertCodeBlock"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: `format icon code border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-code` })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           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__ */ (0, import_jsx_runtime94.jsx)("i", { className: `format icon link border w-full h-full bg-no-repeat bg-center bg-[length:18px_18px]` })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-toolbar__icon-btn__icon c-rte-icon-link` })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           DropdownMenu.Root,
           {
             disabled: !isEditable,
             style: { zIndex: 1 },
-            content: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
-                    activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "strikethrough");
+                    activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "strikethrough");
                   },
                   title: tr("actionFormatWithStrikethroughTitle"),
                   "aria-label": tr("actionFormatWithStrikethroughLabel"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                       "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `px-3 text-sm font-sans ${isStrikethrough ? "font-medium" : "font-normal"}`, children: tr("actionFormatAsStrongTitle") })
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__dd-item__text ${isStrikethrough ? "selected" : ""}`, children: tr("actionFormatAsStrongTitle") })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
-                    activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "subscript");
+                    activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "subscript");
                   },
                   title: tr("actionFormatWithSubscriptTitle"),
                   "aria-label": tr("actionFormatWithSubscriptLabel"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                       "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `px-3 text-sm font-sans ${isSubscript ? "font-medium" : "font-normal"}`, children: tr("actionFormatWithSubscriptTitle") })
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__dd-item__text ${isSubscript ? "selected" : ""}`, children: tr("actionFormatWithSubscriptTitle") })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
-                    activeEditor.dispatchCommand(import_lexical16.FORMAT_TEXT_COMMAND, "superscript");
+                    activeEditor.dispatchCommand(import_lexical15.FORMAT_TEXT_COMMAND, "superscript");
                   },
                   title: tr("actionFormatWithSuperscriptTitle"),
                   "aria-label": tr("actionFormatWithSuperscriptLabel"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
                       "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__ */ (0, import_jsx_runtime94.jsx)("span", { className: `px-3 text-sm font-sans ${isSuperscript ? "bg-purple-50-900" : "font-normal"}`, children: tr("actionFormatWithSuperscriptTitle") })
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: `c-rte-toolbar__dd-item__text ${isSuperscript ? "selected" : ""}`, children: tr("actionFormatWithSuperscriptTitle") })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                 DropdownMenu.Item,
                 {
                   onClick: clearFormatting,
@@ -6952,60 +6964,60 @@ function ToolbarPlugin({
                   title: tr("actionClearTextFormatting"),
                   "aria-label": tr("actionClearTextFormatting"),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: "icon w-6 h-6 clear border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "px-3 text-sm text-pink-600-300 font-sans font-normal", children: "Clear Formatting" })
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: "c-rte-icon-clear c-rte-toolbar__dd-item__icon" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "c-rte-toolbar__dd-item__text--clear", children: "Clear Formatting" })
                   ]
                 }
               )
             ] }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
               Button,
               {
                 style: { backgroundColor: "transparent", padding: "0 8px" },
                 "aria-label": tr("actionTextFormattingOptions"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: `icon dropdown-more border bg-no-repeat bg-center bg-[length:18px_18px] w-6 h-6` }),
-                  /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon.Arrow, {})
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: `c-rte-icon-dropdown-more c-rte-toolbar__toggle-icon` }),
+                  /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon.Arrow, {})
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Divider, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Divider, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
           DropdownMenu.Root,
           {
             style: { zIndex: 1 },
             disabled: !isEditable,
-            content: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+            content: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
                 DropdownMenu.Item,
                 {
                   onClick: () => {
                     activeEditor.dispatchCommand(import_LexicalHorizontalRuleNode4.INSERT_HORIZONTAL_RULE_COMMAND, void 0);
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center font-sans font-normal", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: "icon w-5 h-5 horizontal-rule border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "px-3 text-sm", children: tr("horizontalRule") })
-                  ] })
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: "c-rte-toolbar__dd-item__icon c-rte-icon-horizontal-rule" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "c-rte-toolbar__dd-item__text", children: tr("horizontalRule") })
+                  ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(DropdownMenu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center font-sans font-normal", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: "icon w-5 h-5 table border bg-no-repeat bg-center bg-[length:16px_16px] opacity-60" }),
-                /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { className: "px-3 text-sm", children: tr("table") })
+              /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(DropdownMenu.Item, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Dialog.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "c-rte-toolbar__dd-item--table", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: "c-rte-toolbar__dd-item__icon c-rte-icon-table" }),
+                /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { className: "c-rte-toolbar__dd-item__text", children: tr("table") })
               ] }) }) })
             ] }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("i", { className: "icon plus border w-full h-full bg-no-repeat bg-center bg-[length:20px_20px] " }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(IconButton, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("i", { className: "c-rte-icon-plus c-rte-toolbar__plus" }) })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(Dialog.Content, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Dialog.Title, { children: tr("insertTableTitle") }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Dialog.Description, { children: tr("insertTableDescription") }),
-          /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(InsertTableDialog, { activeEditor }) })
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(Dialog.Content, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Dialog.Title, { children: tr("insertTableTitle") }),
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Dialog.Description, { children: tr("insertTableDescription") }),
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(InsertTableDialog, { activeEditor })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ActionsPlugin, { prepend: actionsMenuPrepend, append: actionsMenuAppend })
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ActionsPlugin, { prepend: actionsMenuPrepend, append: actionsMenuAppend })
   ] });
 }
 
@@ -7059,7 +7071,7 @@ var theme = {
     h5: "CrystallizeRTEditorTheme__h5",
     h6: "CrystallizeRTEditorTheme__h6"
   },
-  image: "editor-image",
+  image: "",
   indent: "CrystallizeRTEditorTheme__indent",
   link: "CrystallizeRTEditorTheme__link",
   list: {
@@ -7112,7 +7124,7 @@ var theme = {
 var CrystallizeRTEditorTheme_default = theme;
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function RichTextEditor({
   initialData,
   editable = true,
@@ -7120,7 +7132,7 @@ function RichTextEditor({
   labelTranslations,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     import_LexicalComposer.LexicalComposer,
     {
       initialConfig: {
@@ -7135,7 +7147,7 @@ function RichTextEditor({
           richText: initialData
         }) : void 0
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(I18nProvider, { language, labelTranslations, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SharedHistoryContext, { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "c-rich-text-editor", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(RichTextEditorWithoutContext, { ...rest, editable }) }) }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(I18nProvider, { language, labelTranslations, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SharedHistoryContext, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "c-rich-text-editor", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(RichTextEditorWithoutContext, { ...rest, editable }) }) }) })
     }
   );
 }
@@ -7148,34 +7160,23 @@ function RichTextEditorWithoutContext({
   actionsMenuAppend,
   slotPreContent,
   maxLength,
-  editable
+  editable,
+  id
 }) {
   const { historyState } = useSharedHistoryContext();
-  const placeholder = /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("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__ */ (0, import_jsx_runtime96.jsx)("div", { className: "c-rte-placeholder", children: placeholderText ?? "" });
   const [editor] = (0, import_LexicalComposerContext12.useLexicalComposerContext)();
-  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react83.useState)(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react83.useState)(false);
-  const firstOnChangeTriggeredRef = (0, import_react83.useRef)(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react84.useState)(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react84.useState)(false);
+  const firstOnChangeTriggeredRef = (0, import_react84.useRef)(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  (0, import_react83.useEffect)(() => {
+  (0, import_react84.useEffect)(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  (0, import_react83.useEffect)(() => {
-    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) {
@@ -7184,37 +7185,38 @@ function RichTextEditorWithoutContext({
     }
     firstOnChangeTriggeredRef.current = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalOnChangePlugin.OnChangePlugin, { onChange: onLocalChange, ignoreSelectionChange: true }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ToolbarPlugin, { actionsMenuPrepend, actionsMenuAppend }),
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalOnChangePlugin.OnChangePlugin, { onChange: onLocalChange, ignoreSelectionChange: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(DimensionDetectorPlugin, { onChange: (d) => setIsSmallWidthViewport(d.isSmallWidth) }),
+    isSmallWidthViewport ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ToolbarPlugin, { actionsMenuPrepend, actionsMenuAppend }),
     slotPreContent,
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "editor-container", children: [
-      maxLength != null ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(MaxLengthPlugin, { maxLength }) : null,
-      !autoFocus ? null : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(LexicalAutoLinkPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalHistoryPlugin2.HistoryPlugin, { externalHistoryState: historyState }),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "c-rte-editor-container", children: [
+      maxLength != null ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(MaxLengthPlugin, { maxLength }) : null,
+      !autoFocus ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(LexicalAutoLinkPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalHistoryPlugin2.HistoryPlugin, { externalHistoryState: historyState }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
         import_LexicalRichTextPlugin.RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "editor-scroller", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: "editor", ref: onRef, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalContentEditable.ContentEditable, { className: "ContentEditable__root" }) }) }),
+          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "c-rte-editor-scroller", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: "c-rte-editor", ref: onRef, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalContentEditable.ContentEditable, { className: "c-rte-contenteditable-root", id }) }) }),
           placeholder,
           ErrorBoundary: import_LexicalErrorBoundary.default
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CodeHighlightPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ListMaxIndentLevelPlugin, { maxDepth: 7 }),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalTablePlugin.TablePlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(LinkPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TabFocusPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
-      floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TableActionMenuPlugin, { anchorElem: floatingAnchorElem }),
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CodeHighlightPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ListMaxIndentLevelPlugin, { maxDepth: 7 }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalTablePlugin.TablePlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(LinkPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalHorizontalRulePlugin.HorizontalRulePlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TabFocusPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {}),
+      floatingAnchorElem && !isSmallWidthViewport && /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TableActionMenuPlugin, { anchorElem: floatingAnchorElem }),
+        /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem })
       ] })
     ] })
   ] });