@uniformdev/design-system 19.24.0 → 19.25.1-alpha.8

package/dist/esm/index.js

@@ -11152,11 +11152,13 @@ import { css as css20 } from "@emotion/react";
 var MenuGroupContainer = css20`
   display: flex;
   flex-direction: column;
+  margin-top: var(--spacing-sm);
 `;
 var MenuTitle = css20`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
+  padding: var(--spacing-xs) var(--spacing-sm);
   text-transform: uppercase;
 `;
 
@@ -11171,7 +11173,12 @@ var MenuGroup = ({ title, children }) => {
 
 // src/components/Menu/MenuItem.styles.ts
 import { css as css21 } from "@emotion/react";
-var menuItem = (textTheme) => css21`
+var activeMenuItem = css21`
+  box-shadow: none;
+  background: var(--gray-200);
+  outline: none;
+`;
+var menuItem = (textTheme, forceActive) => css21`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11182,9 +11189,10 @@ var menuItem = (textTheme) => css21`
   font-weight: var(--fw-regular);
   flex-grow: 1;
   gap: var(--spacing-xs);
-  line-height: 1.5;
+
   white-space: nowrap;
   transition: background-color var(--duration-fast) var(--timing-ease-out);
+  ${forceActive ? activeMenuItem : ""}
 
   &:disabled {
     color: var(--gray-300);
@@ -11192,9 +11200,7 @@ var menuItem = (textTheme) => css21`
 
   &:hover,
   &:focus {
-    box-shadow: none;
-    background: var(--gray-200);
-    outline: none;
+    ${typeof forceActive === "undefined" ? activeMenuItem : ""}
   }
 `;
 var menuItemWithIcon = css21`
@@ -11323,14 +11329,15 @@ import * as React8 from "react";
 import { MenuItem as BaseMenuItem } from "reakit";
 import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 var MenuItem = React8.forwardRef(
-  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
+  ({ children, className, hideMenuOnClick = true, icon, textColor = "base", active, ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
       const resolvedProps2 = { ...originalProps };
       if (resolvedProps2.onClick) {
         const origOnClick = resolvedProps2.onClick;
         resolvedProps2.onClick = (e) => {
-          menuState.hide();
+          var _a;
+          (_a = menuState == null ? void 0 : menuState.hide) == null ? void 0 : _a.call(menuState);
           origOnClick(e);
         };
       }
@@ -11346,7 +11353,7 @@ var MenuItem = React8.forwardRef(
         "data-test-id": "button-menu",
         ...menuState,
         ...resolvedProps,
-        css: [menuItem(textColor), typeof className === "object" ? className : void 0],
+        css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
         children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
       }
@@ -12481,47 +12488,52 @@ var summaryIconVisiblyHidden = css38`
 
 // src/components/Details/Details.tsx
 import { jsx as jsx38, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
-var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props }) => {
+var Details = ({
+  summary: summary2,
+  children,
+  isOpenByDefault = false,
+  isOpen,
+  onChange,
+  ...props
+}) => {
   const detailsRef = React9.useRef(null);
-  const [open, setOpen] = React9.useState(isOpenByDefault);
-  React9.useEffect(() => {
-    var _a;
-    if (!detailsRef) {
-      return;
+  const [internalOpen, setInternalOpen] = React9.useState(isOpenByDefault);
+  const memoizedIsOpen = React9.useMemo(() => {
+    return isOpen !== void 0 ? isOpen : internalOpen;
+  }, [internalOpen, isOpen]);
+  return /* @__PURE__ */ jsxs21(
+    "details",
+    {
+      "data-testid": "details",
+      onToggle: (e) => {
+        setInternalOpen(e.currentTarget.open);
+        onChange == null ? void 0 : onChange(e.currentTarget.open);
+      },
+      css: details,
+      open: memoizedIsOpen,
+      ref: detailsRef,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs21("summary", { "data-testid": "summary", css: summary, children: [
+          /* @__PURE__ */ jsx38(
+            Icon,
+            {
+              css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
+              icon: "chevron-down",
+              iconColor: "currentColor",
+              size: "1.25rem"
+            }
+          ),
+          summary2
+        ] }),
+        memoizedIsOpen ? /* @__PURE__ */ jsx38("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+      ]
     }
-    const toggleEvent = () => {
-      var _a2;
-      const toggle = Boolean((_a2 = detailsRef == null ? void 0 : detailsRef.current) == null ? void 0 : _a2.open);
-      setOpen(toggle);
-    };
-    (_a = detailsRef.current) == null ? void 0 : _a.addEventListener("toggle", toggleEvent);
-    () => {
-      var _a2;
-      return (_a2 = detailsRef.current) == null ? void 0 : _a2.removeEventListener("toggle", toggleEvent);
-    };
-  }, [detailsRef]);
-  React9.useEffect(() => {
-    setOpen(isOpenByDefault);
-  }, [isOpenByDefault]);
-  return /* @__PURE__ */ jsxs21("details", { "data-testid": "details", css: details, open, ref: detailsRef, ...props, children: [
-    /* @__PURE__ */ jsxs21("summary", { "data-testid": "summary", css: summary, children: [
-      /* @__PURE__ */ jsx38(
-        Icon,
-        {
-          css: [!children ? summaryIconVisiblyHidden : void 0, summaryIcon],
-          icon: "chevron-down",
-          iconColor: "currentColor",
-          size: "1.25rem"
-        }
-      ),
-      summary2
-    ] }),
-    open ? /* @__PURE__ */ jsx38("div", { "data-testid": "details-content", css: detailsContent, children }) : null
-  ] });
+  );
 };
 
 // src/components/Drawer/Drawer.tsx
-import React12, { useEffect as useEffect6, useMemo, useRef as useRef2 } from "react";
+import React12, { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -12797,7 +12809,7 @@ var DrawerInner = ({
 }) => {
   const { registerDrawer, unregisterDrawer } = useDrawer();
   const closeButtonRef = useRef2(null);
-  const component = useMemo(() => {
+  const component = useMemo2(() => {
     const headerId = `dialog-header-${stackId}-${id}`;
     return /* @__PURE__ */ jsxs23(
       "div",
@@ -12838,7 +12850,7 @@ var DrawerInner = ({
       }
     );
   }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  useEffect6(() => {
+  useEffect5(() => {
     registerDrawer({
       drawer: {
         id,
@@ -12857,7 +12869,7 @@ var DrawerInner = ({
       }
     });
   }, [component, instanceKey, registerDrawer]);
-  useEffect6(() => {
+  useEffect5(() => {
     return () => unregisterDrawer({ id, stackId, instanceKey });
   }, [id, stackId, instanceKey, unregisterDrawer]);
   return null;
@@ -14065,7 +14077,7 @@ var LoadingIndicator = ({ ...props }) => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback2, useEffect as useEffect7, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css55 } from "@emotion/react";
@@ -14118,7 +14130,7 @@ var LoadingOverlay = ({
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  useEffect7(() => {
+  useEffect6(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -14447,7 +14459,7 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css58 } from "@emotion/react";
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState6 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx70, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
@@ -14463,7 +14475,7 @@ var IntegrationComingSoon = ({
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  useEffect8(() => {
+  useEffect7(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -15310,7 +15322,7 @@ var ParameterGroup = forwardRef8(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef10, useCallback as useCallback3, useDeferredValue, useEffect as useEffect9, useState as useState8 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback3, useDeferredValue, useEffect as useEffect8, useState as useState8 } from "react";
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { useState as useState7 } from "react";
@@ -15552,7 +15564,7 @@ var ParameterImageInner = forwardRef10(
         handleManuallySetErrorMessage(errorText);
       }
     };
-    useEffect9(() => {
+    useEffect8(() => {
       updateImageSrc();
     }, [deferredValue]);
     return /* @__PURE__ */ jsxs56(Fragment11, { children: [
@@ -15871,7 +15883,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect13, useRef as useRef6 } from "react";
+import { useEffect as useEffect12, useRef as useRef6 } from "react";
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
 import { css as css71 } from "@emotion/css";
@@ -16065,7 +16077,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef5, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect9, useRef as useRef5, useState as useState9 } from "react";
 
 // src/components/Popover/Popover.styles.ts
 import { css as css72 } from "@emotion/react";
@@ -16325,6 +16337,26 @@ function removeLinkNode(node) {
   }
   node.remove();
 }
+function removeLinkNodeFromSelection() {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) {
+    return;
+  }
+  const nodes = selection.extract();
+  const linkNodesFound = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    if ($isElementNode2(node) && !node.isInline()) {
+      continue;
+    }
+    const linkNodeAncestor = getLinkAncestor(node);
+    if (linkNodeAncestor) {
+      linkNodesFound.add(linkNodeAncestor);
+    }
+  }
+  for (const node of linkNodesFound) {
+    removeLinkNode(node);
+  }
+}
 function upsertLinkNode(props) {
   var _a, _b, _c, _d, _e;
   const selection = $getSelection();
@@ -16382,6 +16414,7 @@ function upsertLinkNode(props) {
     }
   }
 }
+var REMOVE_LINK_NODE_COMMAND = createCommand("REMOVE_LINK_NODE_COMMAND");
 var UPSERT_LINK_NODE_COMMAND = createCommand("UPSERT_LINK_NODE_COMMAND");
 var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
   "OPEN_LINK_NODE_MODAL_COMMAND"
@@ -16407,13 +16440,13 @@ function LinkNodePlugin({ onConnectLink }) {
   const linkPopoverElRef = useRef5(null);
   const [isEditorFocused, setIsEditorFocused] = useState9(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState9(false);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -16426,6 +16459,14 @@ function LinkNodePlugin({ onConnectLink }) {
         },
         COMMAND_PRIORITY_EDITOR
       ),
+      editor.registerCommand(
+        REMOVE_LINK_NODE_COMMAND,
+        () => {
+          removeLinkNodeFromSelection();
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR
+      ),
       editor.registerCommand(
         OPEN_LINK_NODE_MODAL_COMMAND,
         () => {
@@ -16506,7 +16547,7 @@ function LinkNodePlugin({ onConnectLink }) {
       }
     });
   }, [editor]);
-  useEffect10(() => {
+  useEffect9(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16596,7 +16637,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { jsx as jsx91 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
@@ -16620,7 +16661,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext2();
-  useEffect11(() => {
+  useEffect10(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -16641,30 +16682,19 @@ import {
   REMOVE_LIST_COMMAND
 } from "@lexical/list";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
-import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
-import {
-  $createHeadingNode,
-  $createQuoteNode,
-  $isHeadingNode,
-  $isQuoteNode
-} from "@lexical/rich-text";
+import { $createHeadingNode, $createQuoteNode, $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
-import {
-  $findMatchingParent,
-  $getNearestBlockElementAncestorOrThrow,
-  $getNearestNodeOfType
-} from "@lexical/utils";
+import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
 import {
   $createParagraphNode,
   $getSelection as $getSelection3,
   $isRangeSelection as $isRangeSelection3,
   $isRootOrShadowRoot,
-  $isTextNode,
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect11, useMemo as useMemo3, useState as useState10 } from "react";
 import { Fragment as Fragment14, jsx as jsx92, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var toolbar = css74`
   background: var(--gray-50);
@@ -16719,40 +16749,35 @@ var toolbarChevron = css74`
 var ToolbarIcon = ({ icon }) => {
   return /* @__PURE__ */ jsx92(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
+var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
+  ["bold", "format-bold"],
+  ["italic", "format-italic"],
+  ["underline", "format-underline"],
+  ["strikethrough", "format-strike"],
+  ["code", "format-code"],
+  ["superscript", "format-superscript"],
+  ["subscript", "format-subscript"]
+]);
+var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 var RichTextToolbar = ({ config }) => {
   const [editor] = useLexicalComposerContext3();
-  const enabledBuiltInFormats = richTextBuiltInFormats.filter(
-    (format) => {
-      var _a, _b;
-      return (_b = (_a = config == null ? void 0 : config.formatting) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(format.type);
-    }
-  );
-  const enabledBuiltInElements = richTextBuiltInElements.filter(
-    (element) => {
-      var _a, _b;
-      return (_b = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(element.type);
-    }
-  );
-  const formatsWithIcon = /* @__PURE__ */ new Map([
-    ["bold", "format-bold"],
-    ["italic", "format-italic"],
-    ["underline", "format-underline"],
-    ["strikethrough", "format-strike"],
-    ["code", "format-code"],
-    ["superscript", "format-superscript"],
-    ["subscript", "format-subscript"]
-  ]);
-  const enabledBuiltInFormatsWithIcon = enabledBuiltInFormats.filter(
-    (format) => formatsWithIcon.has(format.type)
-  );
-  const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
-    (format) => !formatsWithIcon.has(format.type)
-  );
-  const [activeFormats, setActiveFormats] = useState10([]);
-  const [activeElement, setActiveElement] = useState10("paragraph");
-  const enabledTextualElements = enabledBuiltInElements.filter(
-    (element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
-  );
+  const {
+    activeElement,
+    setActiveElement,
+    activeFormats,
+    setActiveFormats,
+    visibleFormatsWithIcon,
+    visibleFormatsWithoutIcon,
+    visibleTextualElements,
+    isLink,
+    setIsLink,
+    linkElementVisible,
+    visibleLists,
+    codeElementVisible,
+    quoteElementVisible,
+    visibleElementsWithIcons
+  } = useRichTextToolbarState({ config });
   const onSelectElement = (type) => {
     if (activeElement === type) {
       return;
@@ -16762,7 +16787,7 @@ var RichTextToolbar = ({ config }) => {
       if (!$isRangeSelection3(selection)) {
         return;
       }
-      if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(type)) {
+      if (HEADING_ELEMENTS.includes(type)) {
         $setBlocksType(selection, () => $createHeadingNode(type));
       } else if (type === "paragraph") {
         $setBlocksType(selection, () => $createParagraphNode());
@@ -16773,28 +16798,13 @@ var RichTextToolbar = ({ config }) => {
       }
     });
   };
-  const [isLink, setIsLink] = useState10(false);
-  const linkElementEnabled = useMemo2(() => {
-    return enabledBuiltInElements.some((element) => element.type === "link");
-  }, [enabledBuiltInElements]);
-  const enabledLists = useMemo2(() => {
-    return new Set(
-      enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
-    );
-  }, [enabledBuiltInElements]);
-  const quoteElementEnabled = useMemo2(() => {
-    return enabledBuiltInElements.some((element) => element.type === "quote");
-  }, [enabledBuiltInElements]);
-  const codeElementEnabled = useMemo2(() => {
-    return enabledBuiltInElements.some((element) => element.type === "code");
-  }, [enabledBuiltInElements]);
   const updateToolbar = useCallback5(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
       return;
     }
     const newActiveFormats = [];
-    for (const format of enabledBuiltInFormats) {
+    for (const format of richTextBuiltInFormats) {
       if (selection.hasFormat(format.type)) {
         newActiveFormats.push(format.type);
       }
@@ -16826,8 +16836,8 @@ var RichTextToolbar = ({ config }) => {
     } else {
       setIsLink(false);
     }
-  }, [editor, enabledBuiltInFormats]);
-  useEffect12(() => {
+  }, [editor, setActiveElement, setActiveFormats, setIsLink]);
+  useEffect11(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -16837,7 +16847,7 @@ var RichTextToolbar = ({ config }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect12(() => {
+  useEffect11(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16846,103 +16856,56 @@ var RichTextToolbar = ({ config }) => {
       });
     });
   }, [editor, updateToolbar]);
-  const clearFormatting2 = useCallback5(() => {
-    editor.update(() => {
-      const selection = $getSelection3();
-      if ($isRangeSelection3(selection)) {
-        const anchor = selection.anchor;
-        const focus = selection.focus;
-        const nodes = selection.getNodes();
-        if (anchor.key === focus.key && anchor.offset === focus.offset) {
-          return;
-        }
-        nodes.forEach((node, idx) => {
-          if ($isTextNode(node)) {
-            if (idx === 0 && anchor.offset !== 0) {
-              node = node.splitText(anchor.offset)[1] || node;
-            }
-            if (idx === nodes.length - 1) {
-              node = node.splitText(focus.offset)[0] || node;
-            }
-            if (node.__style !== "") {
-              node.setStyle("");
-            }
-            if (node.__format !== 0) {
-              node.setFormat(0);
-              $getNearestBlockElementAncestorOrThrow(node).setFormat("");
-            }
-          } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
-            node.replace($createParagraphNode(), true);
-          } else if ($isDecoratorBlockNode(node)) {
-            node.setFormat("");
-          }
-        });
-      }
-      updateToolbar();
-    });
-  }, [editor, updateToolbar]);
-  const elementsThatShouldBeVisibleInDropdown = useMemo2(() => {
-    if (activeElement === "paragraph") {
-      return enabledTextualElements;
-    }
-    if (enabledBuiltInElements.some((element) => element.type === activeElement)) {
-      return enabledTextualElements;
-    }
-    return [
-      ...enabledTextualElements,
-      {
-        label: getLabelForElement(activeElement),
-        type: activeElement
-      }
-    ];
-  }, [enabledBuiltInElements, enabledTextualElements, activeElement]);
   return /* @__PURE__ */ jsxs60("div", { css: toolbar, children: [
-    elementsThatShouldBeVisibleInDropdown.length > 0 ? /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsxs60(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text formatting", children: [
-          elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
+        menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text styles", children: [
+          visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
           /* @__PURE__ */ jsx92(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
-          {
-            label: "Normal",
-            type: "paragraph"
-          },
-          ...elementsThatShouldBeVisibleInDropdown
-        ].map((element) => /* @__PURE__ */ jsx92(
-          MenuItem,
-          {
-            onClick: () => {
-              onSelectElement(element.type);
+          [
+            {
+              label: "Normal",
+              type: "paragraph"
             },
-            children: element.label
-          },
-          element.type
-        ))
+            ...visibleTextualElements
+          ].map((element) => /* @__PURE__ */ jsx92(
+            MenuItem,
+            {
+              onClick: () => {
+                onSelectElement(element.type);
+              },
+              children: element.label
+            },
+            element.type
+          )),
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx92(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+        ]
       }
-    ) : null,
-    enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
-      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ jsx92(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx92(
+    ),
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx92(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
           },
           css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
+          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx92(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx92(
         Menu,
         {
-          menuLabel: "Text formatting",
-          menuTrigger: /* @__PURE__ */ jsx92("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ jsx92(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuLabel: "Alternative text styles",
+          menuTrigger: /* @__PURE__ */ jsx92("button", { css: toolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx92(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx92(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx92(
             MenuItem,
             {
               onClick: () => {
@@ -16955,19 +16918,19 @@ var RichTextToolbar = ({ config }) => {
         }
       ) : null
     ] }) : null,
-    linkElementEnabled || enabledLists.size > 0 || quoteElementEnabled || codeElementEnabled ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
-      linkElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx92(
+    visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
+      linkElementVisible ? /* @__PURE__ */ jsx92(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
-            editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
+            isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [toolbarButton, isLink ? toolbarButtonActive : null],
           children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      enabledLists.size > 0 ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
-        enabledLists.has("unorderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ jsx92(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx92(
           "button",
           {
             onClick: () => {
@@ -16977,7 +16940,7 @@ var RichTextToolbar = ({ config }) => {
             children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        enabledLists.has("orderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ jsx92(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx92(
           "button",
           {
             onClick: () => {
@@ -16988,7 +16951,7 @@ var RichTextToolbar = ({ config }) => {
           }
         ) }) : null
       ] }) : null,
-      quoteElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx92(
+      quoteElementVisible ? /* @__PURE__ */ jsx92(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
@@ -16998,7 +16961,7 @@ var RichTextToolbar = ({ config }) => {
           children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Code", placement: "top", children: /* @__PURE__ */ jsx92(
+      codeElementVisible ? /* @__PURE__ */ jsx92(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
@@ -17008,31 +16971,118 @@ var RichTextToolbar = ({ config }) => {
           children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
-    ] }) : null,
-    /* @__PURE__ */ jsx92(
-      "div",
-      {
-        css: [
-          toolbarGroup,
-          {
-            marginLeft: "auto"
-          }
-        ],
-        children: /* @__PURE__ */ jsx92(Tooltip, { title: "Clear formatting", placement: "top", children: /* @__PURE__ */ jsx92(
-          "button",
-          {
-            onClick: () => {
-              clearFormatting2();
-            },
-            css: [toolbarButton],
-            children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "clear-formatting" })
-          }
-        ) })
-      }
-    )
+    ] }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
+var useRichTextToolbarState = ({ config }) => {
+  var _a;
+  const enabledBuiltInFormats = useMemo3(() => {
+    return richTextBuiltInFormats.filter((format) => {
+      var _a2, _b;
+      return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
+    });
+  }, [config]);
+  const enabledBuiltInElements = useMemo3(() => {
+    return richTextBuiltInElements.filter((element) => {
+      var _a2, _b;
+      return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
+    });
+  }, [config]);
+  const enabledBuiltInFormatsWithIcon = useMemo3(() => {
+    return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
+  }, [enabledBuiltInFormats]);
+  const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
+    (format) => !FORMATS_WITH_ICON.has(format.type)
+  );
+  const [activeFormats, setActiveFormats] = useState10([]);
+  const visibleFormatsWithIcon = useMemo3(() => {
+    const visibleFormats = /* @__PURE__ */ new Set();
+    activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
+      visibleFormats.add(type);
+    });
+    enabledBuiltInFormatsWithIcon.forEach((format) => {
+      visibleFormats.add(format.type);
+    });
+    return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
+  }, [activeFormats, enabledBuiltInFormatsWithIcon]);
+  const visibleFormatsWithoutIcon = useMemo3(() => {
+    const visibleFormats = /* @__PURE__ */ new Set();
+    activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
+      visibleFormats.add(type);
+    });
+    enabledBuiltInFormatsWithoutIcon.forEach((format) => {
+      visibleFormats.add(format.type);
+    });
+    return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
+  }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
+  const [activeElement, setActiveElement] = useState10("paragraph");
+  const enabledTextualElements = enabledBuiltInElements.filter(
+    (element) => TEXTUAL_ELEMENTS.includes(element.type)
+  );
+  const visibleTextualElements = useMemo3(() => {
+    if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
+      return enabledTextualElements;
+    }
+    return richTextBuiltInElements.filter(
+      (element) => {
+        var _a2, _b;
+        return TEXTUAL_ELEMENTS.includes(element.type) && (((_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type)) || element.type === activeElement);
+      }
+    );
+  }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
+  const [isLink, setIsLink] = useState10(false);
+  const linkElementVisible = useMemo3(() => {
+    return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
+  }, [isLink, enabledBuiltInElements]);
+  const visibleLists = useMemo3(() => {
+    return new Set(
+      ["orderedList", "unorderedList"].filter(
+        (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
+      )
+    );
+  }, [activeElement, enabledBuiltInElements]);
+  const quoteElementVisible = useMemo3(() => {
+    return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
+  }, [activeElement, enabledBuiltInElements]);
+  const codeElementVisible = useMemo3(() => {
+    return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
+  }, [activeElement, enabledBuiltInElements]);
+  const visibleElementsWithIcons = useMemo3(() => {
+    const visibleElements = /* @__PURE__ */ new Set();
+    if (linkElementVisible) {
+      visibleElements.add("link");
+    }
+    if (visibleLists.size > 0) {
+      visibleLists.forEach((type) => {
+        visibleElements.add(type);
+      });
+    }
+    if (quoteElementVisible) {
+      visibleElements.add("quote");
+    }
+    if (codeElementVisible) {
+      visibleElements.add("code");
+    }
+    return visibleElements;
+  }, [codeElementVisible, linkElementVisible, quoteElementVisible, visibleLists]);
+  return {
+    activeFormats,
+    setActiveFormats,
+    activeElement,
+    setActiveElement,
+    visibleFormatsWithIcon,
+    visibleFormatsWithoutIcon,
+    visibleTextualElements,
+    isLink,
+    setIsLink,
+    linkElementVisible,
+    visibleLists,
+    quoteElementVisible,
+    codeElementVisible,
+    visibleElementsWithIcons
+  };
+};
 
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
@@ -17216,12 +17266,12 @@ var RichText = ({
 }) => {
   const editorContainerRef = useRef6(null);
   const [editor] = useLexicalComposerContext4();
-  useEffect13(() => {
+  useEffect12(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect13(() => {
+  useEffect12(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -17353,7 +17403,7 @@ var Popover2 = ({
 
 // src/components/ProgressList/ProgressList.tsx
 import { css as css77 } from "@emotion/react";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
@@ -17373,7 +17423,7 @@ var progressListItemStyles = css76`
 // src/components/ProgressList/ProgressList.tsx
 import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo3(() => {
+  const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -17406,7 +17456,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = useMemo3(() => {
+  const Icon2 = useMemo4(() => {
     if (error) {
       return warningIcon;
     }
@@ -17417,7 +17467,7 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo3(() => {
+  const statusStyles = useMemo4(() => {
     if (error) {
       return errorLevel === "caution" ? css77`
             color: rgb(161, 98, 7);
@@ -17455,7 +17505,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css79 } from "@emotion/react";
-import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
@@ -17570,7 +17620,7 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo4(() => {
+  const sizeStyles = useMemo5(() => {
     const map = {
       sm: css79({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
       md: css79({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
@@ -17578,7 +17628,7 @@ var SegmentedControl = ({
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo4(() => {
+  const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx99(
@@ -17845,7 +17895,7 @@ var TableCellData = React21.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect14, useMemo as useMemo5 } from "react";
+import { createContext as createContext6, useContext as useContext7, useEffect as useEffect13, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -17889,13 +17939,13 @@ var useCurrentTab = () => {
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = useMemo5(() => {
+  const selected = useMemo6(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect14(() => {
+  useEffect13(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -17903,7 +17953,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect14(() => {
+  useEffect13(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }