@crystallize/design-system 1.11.3 → 1.11.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.11.5
+
+### Patch Changes
+
+- f7cb015: Allow to pass a portal container, in order to attach the menu on the Dialog cases
+
+## 1.11.4
+
+### Patch Changes
+
+- 1bb27da: Add portal component to the ActionMenu and data-testid property
+
 ## 1.11.3
 
 ### Patch Changes

package/dist/index.css

@@ -640,6 +640,9 @@ button {
 .h-full {
   height: 100%;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-4 {
   width: 1rem;
 }
@@ -878,6 +881,9 @@ button {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.pt-14 {
+  padding-top: 3.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1199,8 +1205,6 @@ button {
 /* src/action-menu/action-menu.css */
 .c-action-menu {
   display: flex;
-  height: 2rem;
-  width: 2rem;
   flex-shrink: 0;
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1212,7 +1216,6 @@ button {
   border-radius: 0.375rem;
   border-style: none;
   background-color: transparent;
-  padding: 0.25rem;
   outline-offset: -1px;
   transition-property:
     color,
@@ -1230,8 +1233,6 @@ button {
   transition-duration: 150ms;
 }
 .c-action-menu-dot {
-  height: 4px;
-  width: 4px;
   border-radius: 9999px;
   background-color: rgb(var(--c-color-gray));
 }
@@ -1261,15 +1262,33 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
+.c-action-menu-xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  padding: 0.125rem;
+}
+.c-action-menu-xs .c-action-menu-dot {
+  height: 0.125rem;
+  width: 0.125rem;
+}
+.c-action-menu-sm {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.25rem;
+}
+.c-action-menu-sm .c-action-menu-dot {
+  height: 0.25rem;
+  width: 0.25rem;
+}
 .c-action-menu-item {
   display: flex;
   cursor: pointer;
   align-items: center;
   gap: 0.5rem;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
   padding-left: 1.25rem;
   padding-right: 1.25rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
   font-family:
     Roboto,
     ui-sans-serif,
@@ -1400,12 +1419,12 @@ button {
   outline-offset: 2px;
 }
 .c-dropdown-menu-item:first-child {
-  border-top-right-radius: 0.25rem;
   border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 .c-dropdown-menu-item:last-child {
-  border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 }
 
 /* src/avatar/avatar.css */

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes, ReactNode, ComponentPropsWithRef, ComponentProps, RefAt
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ProgressPrimitives from '@radix-ui/react-progress';
 import * as _radix_ui_react_select from '@radix-ui/react-select';
@@ -19,11 +19,45 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 };
 declare function Item({ children, className, onSelect }: ItemProps): JSX.Element;
 
-type ActionMenuProps = {
+type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
+    children: ReactNode;
+};
+declare function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps): JSX.Element;
+
+type DropdownMenuLabelProps = {
     children: ReactNode;
+};
+declare function DropdownMenuLabel({ children }: DropdownMenuLabelProps): JSX.Element;
+
+type Container = HTMLElement | null | undefined;
+type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+    children: ReactNode;
+    content: ReactNode;
+    alignContent?: 'start' | 'center' | 'end';
+    disabled?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    container?: Container;
+};
+declare function DropdownMenuRoot({ children, content, alignContent, disabled, onOpenChange, container, ...delegated }: DropdownMenuRootProps): JSX.Element;
+
+declare const DropdownMenu: {
+    Root: typeof DropdownMenuRoot;
+    Item: typeof DropdownMenuItem;
+    Label: typeof DropdownMenuLabel;
+    Separator: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
+    Portal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+};
+
+type ButtonStylesProps$1 = VariantProps<typeof buttonStyles$2>;
+declare const buttonStyles$2: (props?: ({
+    size?: "xs" | "sm" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+type ActionMenuProps = ButtonStylesProps$1 & {
+    children: ReactNode;
+    container?: Container;
     tabIndex?: number;
 };
-declare function ActionMenu({ children, tabIndex }: ActionMenuProps): JSX.Element;
+declare function ActionMenu({ children, container, tabIndex, size }: ActionMenuProps): JSX.Element;
 declare namespace ActionMenu {
     var Item: typeof Item;
     var Separator: typeof Separator;
@@ -184,33 +218,6 @@ declare function showInfo(delegated: DialogFuncProps): {
 };
 declare function destroyAll(): void;
 
-type DropdownMenuItemProps = DropdownMenuPrimitive.MenuItemProps & {
-    children: ReactNode;
-};
-declare function DropdownMenuItem({ children, className, ...delegated }: DropdownMenuItemProps): JSX.Element;
-
-type DropdownMenuLabelProps = {
-    children: ReactNode;
-};
-declare function DropdownMenuLabel({ children }: DropdownMenuLabelProps): JSX.Element;
-
-type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
-    children: ReactNode;
-    content: ReactNode;
-    alignContent?: 'start' | 'center' | 'end';
-    disabled?: boolean;
-    onOpenChange?: (open: boolean) => void;
-};
-declare function DropdownMenuRoot({ children, content, alignContent, disabled, onOpenChange, ...delegated }: DropdownMenuRootProps): JSX.Element;
-
-declare const DropdownMenu: {
-    Root: typeof DropdownMenuRoot;
-    Item: typeof DropdownMenuItem;
-    Label: typeof DropdownMenuLabel;
-    Separator: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>>;
-    Portal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
-};
-
 type IconButtonStylesProps = VariantProps<typeof buttonStyles>;
 declare const buttonStyles: (props?: ({
     variant?: "default" | "elevate" | null | undefined;
@@ -484,4 +491,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, Tag, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, Tag, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, tokens };

package/dist/index.js

@@ -251,6 +251,9 @@ function Card({ children, className, variant, ...delegated }) {
 // src/card/index.ts
 var cardToken = "c-card";
 
+// src/action-menu/action-menu.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+
 // src/dropdown-menu/index.ts
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 
@@ -282,9 +285,10 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function DropdownMenuRoot({
   children,
   content,
-  alignContent = "start",
+  alignContent = "center",
   disabled,
   onOpenChange,
+  container,
   ...delegated
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenuPrimitive3.Root, {
@@ -295,12 +299,15 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
-        align: alignContent,
-        sideOffset: 5,
-        className: "c-dropdown-menu-content",
-        ...delegated,
-        children: content
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
+        container,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
+          align: alignContent,
+          sideOffset: 5,
+          className: "c-dropdown-menu-content",
+          ...delegated,
+          children: content
+        })
       })
     ]
   });
@@ -338,15 +345,28 @@ function Separator2({ className }) {
 
 // src/action-menu/action-menu.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ActionMenu({ children, tabIndex }) {
+var buttonStyles2 = (0, import_class_variance_authority7.cva)("c-action-menu", {
+  variants: {
+    size: {
+      xs: "c-action-menu-xs",
+      sm: "c-action-menu-sm"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function ActionMenu({ children, container, tabIndex, size }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
+    container,
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", {
+      "aria-label": "more options",
+      className: buttonStyles2({ size }),
+      "data-testid": "action-menu-button",
       tabIndex,
       type: "button",
-      className: "c-action-menu",
-      "aria-label": "more options",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
           className: "sr-only",
@@ -370,7 +390,7 @@ ActionMenu.Separator = Separator2;
 
 // src/avatar/avatar.tsx
 var import_react3 = require("react");
-var import_class_variance_authority7 = require("class-variance-authority");
+var import_class_variance_authority8 = require("class-variance-authority");
 
 // src/avatar/get-initials.ts
 var getInitials = (name) => {
@@ -381,7 +401,7 @@ var getInitials = (name) => {
 
 // src/avatar/avatar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var avatarClassName = (0, import_class_variance_authority7.cva)(["c-avatar"], {
+var avatarClassName = (0, import_class_variance_authority8.cva)(["c-avatar"], {
   variants: {
     size: {
       md: "c-avatar-md",
@@ -443,7 +463,7 @@ var destroyFns = [];
 
 // src/dialog/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 
 // src/iconography/add.tsx
 var import_react5 = require("react");
@@ -2972,7 +2992,7 @@ var IconMap = {
   info: Icon.Info,
   warning: Icon.Warning
 };
-var dialogContentStyles = (0, import_class_variance_authority8.cva)("c-dialog", {
+var dialogContentStyles = (0, import_class_variance_authority9.cva)("c-dialog", {
   variants: {
     withIcon: {
       true: "c-dialog-with-icon"
@@ -3022,7 +3042,7 @@ function DialogContent({ children, closable = true, type, className, container,
 }
 function DialogTitle({ className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogPrimitive.Title, {
-    className: (0, import_class_variance_authority8.cx)("c-dialog-title", className),
+    className: (0, import_class_variance_authority9.cx)("c-dialog-title", className),
     ...delegated
   });
 }
@@ -3263,9 +3283,9 @@ function destroyAll() {
 
 // src/icon-button/icon-button.tsx
 var import_react54 = require("react");
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var buttonStyles2 = (0, import_class_variance_authority9.cva)(["c-icon-button"], {
+var buttonStyles3 = (0, import_class_variance_authority10.cva)(["c-icon-button"], {
   variants: {
     variant: {
       default: "",
@@ -3289,7 +3309,7 @@ var IconButton = (0, import_react54.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", {
       ref,
       type,
-      className: buttonStyles2({ size, variant, className }),
+      className: buttonStyles3({ size, variant, className }),
       ...delegated,
       children
     });
@@ -3299,9 +3319,9 @@ IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var inlineRadioGroupStyles = (0, import_class_variance_authority10.cva)("c-inline-radio-group", {
+var inlineRadioGroupStyles = (0, import_class_variance_authority11.cva)("c-inline-radio-group", {
   variants: {
     size: {
       xs: "c-inline-radio-group-xs",
@@ -3323,7 +3343,7 @@ function InlineRadioGroup({ size, className, ...delegated }) {
 function InlineRadioItem({ children, className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupPrimitive.Item, {
     ...delegated,
-    className: (0, import_class_variance_authority10.cx)("c-inline-radio", className),
+    className: (0, import_class_variance_authority11.cx)("c-inline-radio", className),
     children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupPrimitive.Indicator, {
       forceMount: true,
       children
@@ -3337,13 +3357,13 @@ var InlineRadio = {
 
 // src/input-with-label/input-with-label.tsx
 var import_react58 = require("react");
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 
 // src/input/input.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 var import_react55 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var inputStyles = (0, import_class_variance_authority11.cva)(["c-input"], {
+var inputStyles = (0, import_class_variance_authority12.cva)(["c-input"], {
   variants: {},
   defaultVariants: {}
 });
@@ -3359,12 +3379,12 @@ Input.displayName = "Input";
 
 // src/label/label.tsx
 var import_react56 = require("react");
-var import_class_variance_authority12 = require("class-variance-authority");
+var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var Label2 = (0, import_react56.forwardRef)(({ className, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("label", {
     ref,
-    className: (0, import_class_variance_authority12.cx)("c-label", className),
+    className: (0, import_class_variance_authority13.cx)("c-label", className),
     ...delegated
   });
 });
@@ -3393,7 +3413,7 @@ var Triangle = (0, import_react57.forwardRef)((delegated, ref) => {
 
 // src/input-with-label/input-with-label.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var inputWithLabelStyles = (0, import_class_variance_authority13.cva)(["c-input-with-label"], {
+var inputWithLabelStyles = (0, import_class_variance_authority14.cva)(["c-input-with-label"], {
   variants: {
     variant: {
       default: "",
@@ -3420,7 +3440,7 @@ var InputWithLabel = (0, import_react58.forwardRef)(
             className: "c-input-with-label-input-wrap",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Input, {
-                className: (0, import_class_variance_authority13.cx)("c-input-with-label-input", className),
+                className: (0, import_class_variance_authority14.cx)("c-input-with-label-input", className),
                 ref,
                 id,
                 ...delegated
@@ -3441,11 +3461,11 @@ InputWithLabel.displayName = "InputWithLabel";
 
 // src/progress/progress.tsx
 var ProgressPrimitives = __toESM(require("@radix-ui/react-progress"));
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 function Progress({ className, value }) {
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ProgressPrimitives.Root, {
-    className: (0, import_class_variance_authority14.cx)(className, "c-progress-root"),
+    className: (0, import_class_variance_authority15.cx)(className, "c-progress-root"),
     value,
     children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ProgressPrimitives.Indicator, {
       className: "c-progress-indicator",
@@ -3494,9 +3514,9 @@ SelectItem.displayName = "SelectItem";
 // src/select/select-root.tsx
 var import_react60 = require("react");
 var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
-var import_class_variance_authority15 = require("class-variance-authority");
+var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var selectTriggerStyles = (0, import_class_variance_authority15.cva)("c-select-trigger", {
+var selectTriggerStyles = (0, import_class_variance_authority16.cva)("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -3556,12 +3576,12 @@ var Select = {
 
 // src/slider/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority17 = require("class-variance-authority");
 var import_react61 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var Slider = (0, import_react61.forwardRef)(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(SliderPrimitive.Root, {
-    className: (0, import_class_variance_authority16.cx)("c-slider-root", className),
+    className: (0, import_class_variance_authority17.cx)("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -3579,9 +3599,9 @@ var Slider = (0, import_react61.forwardRef)(({ className, transparentRange, ...d
 });
 
 // src/tag/tag.tsx
-var import_class_variance_authority17 = require("class-variance-authority");
+var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var tagStyles = (0, import_class_variance_authority17.cva)("c-tag", {
+var tagStyles = (0, import_class_variance_authority18.cva)("c-tag", {
   variants: {
     variant: {
       default: "",
@@ -3601,7 +3621,7 @@ function Tag({ children, className, variant, ...delegated }) {
 }
 
 // src/rich-text-editor/rich-text-editor.tsx
-var import_react77 = require("react");
+var import_react78 = require("react");
 var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
@@ -5712,7 +5732,7 @@ function TableActionMenuPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/index.tsx
-var import_react76 = require("react");
+var import_react77 = require("react");
 var import_lexical16 = require("lexical");
 var import_code9 = require("@lexical/code");
 var import_link6 = require("@lexical/link");
@@ -5725,6 +5745,7 @@ var import_selection3 = require("@lexical/selection");
 var import_utils4 = require("@lexical/utils");
 
 // src/rich-text-editor/plugins/ActionsPlugin/index.tsx
+var import_react75 = require("react");
 var import_lexical15 = require("lexical");
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -5742,11 +5763,14 @@ function ActionsPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const tr = useTr();
+  const actionMenuAnchorRef = (0, import_react75.useRef)(null);
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", {
+    ref: actionMenuAnchorRef,
     className: "z-50 flex items-center ",
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {}),
       /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(ActionMenu, {
+        container: actionMenuAnchorRef.current,
         children: [
           !prepend ? null : prepend.map((actionItem) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ActionMenu.Item, {
             onSelect: actionItem.action,
@@ -5777,12 +5801,12 @@ function ActionsPlugin({
 }
 
 // src/rich-text-editor/plugins/ToolbarPlugin/insert-table.tsx
-var import_react75 = require("react");
+var import_react76 = require("react");
 var import_table5 = require("@lexical/table");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 function InsertTableDialog({ activeEditor }) {
-  const [rows, setRows] = (0, import_react75.useState)("5");
-  const [columns, setColumns] = (0, import_react75.useState)("5");
+  const [rows, setRows] = (0, import_react76.useState)("5");
+  const [columns, setColumns] = (0, import_react76.useState)("5");
   const tr = useTr();
   const onClick = () => {
     if (parseInt(rows) < 1 || parseInt(columns) < 1) {
@@ -6050,23 +6074,23 @@ function ToolbarPlugin({
   actionsMenuAppend
 }) {
   const [editor] = (0, import_LexicalComposerContext11.useLexicalComposerContext)();
-  const [activeEditor, setActiveEditor] = (0, import_react76.useState)(editor);
-  const [blockType, setBlockType] = (0, import_react76.useState)("paragraph");
-  const [selectedElementKey, setSelectedElementKey] = (0, import_react76.useState)(null);
-  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 [canUndo, setCanUndo] = (0, import_react76.useState)(false);
-  const [canRedo, setCanRedo] = (0, import_react76.useState)(false);
+  const [activeEditor, setActiveEditor] = (0, import_react77.useState)(editor);
+  const [blockType, setBlockType] = (0, import_react77.useState)("paragraph");
+  const [selectedElementKey, setSelectedElementKey] = (0, import_react77.useState)(null);
+  const [isLink, setIsLink] = (0, import_react77.useState)(false);
+  const [isBold, setIsBold] = (0, import_react77.useState)(false);
+  const [isItalic, setIsItalic] = (0, import_react77.useState)(false);
+  const [isUnderline, setIsUnderline] = (0, import_react77.useState)(false);
+  const [isStrikethrough, setIsStrikethrough] = (0, import_react77.useState)(false);
+  const [isSubscript, setIsSubscript] = (0, import_react77.useState)(false);
+  const [isSuperscript, setIsSuperscript] = (0, import_react77.useState)(false);
+  const [isCode, setIsCode] = (0, import_react77.useState)(false);
+  const [canUndo, setCanUndo] = (0, import_react77.useState)(false);
+  const [canRedo, setCanRedo] = (0, import_react77.useState)(false);
   const tr = useTr();
-  const [codeLanguage, setCodeLanguage] = (0, import_react76.useState)("");
-  const [isEditable, setIsEditable] = (0, import_react76.useState)(() => editor.isEditable());
-  const updateToolbar = (0, import_react76.useCallback)(() => {
+  const [codeLanguage, setCodeLanguage] = (0, import_react77.useState)("");
+  const [isEditable, setIsEditable] = (0, import_react77.useState)(() => editor.isEditable());
+  const updateToolbar = (0, import_react77.useCallback)(() => {
     const selection = (0, import_lexical16.$getSelection)();
     if ((0, import_lexical16.$isRangeSelection)(selection)) {
       const anchorNode = selection.anchor.getNode();
@@ -6113,7 +6137,7 @@ function ToolbarPlugin({
       }
     }
   }, [activeEditor]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     return editor.registerCommand(
       import_lexical16.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -6124,7 +6148,7 @@ function ToolbarPlugin({
       import_lexical16.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6152,7 +6176,7 @@ function ToolbarPlugin({
       )
     );
   }, [activeEditor, editor, updateToolbar]);
-  const clearFormatting = (0, import_react76.useCallback)(() => {
+  const clearFormatting = (0, import_react77.useCallback)(() => {
     activeEditor.update(() => {
       const selection = (0, import_lexical16.$getSelection)();
       if ((0, import_lexical16.$isRangeSelection)(selection)) {
@@ -6170,14 +6194,14 @@ function ToolbarPlugin({
       }
     });
   }, [activeEditor]);
-  const insertLink = (0, import_react76.useCallback)(() => {
+  const insertLink = (0, import_react77.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_react76.useCallback)(
+  const onCodeLanguageSelect = (0, import_react77.useCallback)(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -6641,18 +6665,18 @@ function RichTextEditorWithoutContext({
     children: placeholderText ?? ""
   });
   const [editor] = (0, import_LexicalComposerContext12.useLexicalComposerContext)();
-  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react77.useState)(null);
-  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react77.useState)(false);
-  const firstOnChangeTriggeredRef = (0, import_react77.useRef)(!autoFocus);
+  const [floatingAnchorElem, setFloatingAnchorElem] = (0, import_react78.useState)(null);
+  const [isSmallWidthViewport, setIsSmallWidthViewport] = (0, import_react78.useState)(false);
+  const firstOnChangeTriggeredRef = (0, import_react78.useRef)(!autoFocus);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
     }
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     editor.setEditable(editable || false);
   }, [editable, editor]);
-  (0, import_react77.useEffect)(() => {
+  (0, import_react78.useEffect)(() => {
     const updateViewPortWidth = () => {
       const isNextSmallWidthViewport = window.matchMedia("(max-width: 1025px)").matches;
       if (isNextSmallWidthViewport !== isSmallWidthViewport) {