@luscii-healthtech/web-ui 51.4.0 → 52.0.1

package/dist/index.development.js

@@ -26,10 +26,10 @@ var TabsPrimitive = require('@radix-ui/react-tabs');
 var PropTypes = require('prop-types');
 var ReactSelect = require('react-select');
 var RadixSwitch = require('@radix-ui/react-switch');
-var Quill = require('quill');
-require('quill-paste-smart');
+var react = require('@tiptap/react');
+var StarterKit = require('@tiptap/starter-kit');
 var solid = require('@heroicons/react/20/solid');
-var react = require('@headlessui/react');
+var react$1 = require('@headlessui/react');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
 var d3 = require('d3-scale');
 
@@ -65,7 +65,7 @@ var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
-var Quill__default = /*#__PURE__*/_interopDefault(Quill);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 
@@ -224,8 +224,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$e = "/* https://stackoverflow.com/a/13924997 */\n.ui\\:text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
-styleInject(css_248z$e);
+var css_248z$d = "/* https://stackoverflow.com/a/13924997 */\n.ui\\:text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
+styleInject(css_248z$d);
 
 const newVariants = /* @__PURE__ */ new Set([
   "body-base-light",
@@ -1009,8 +1009,8 @@ toast.info = (message) => {
   showToaster({ message, type: "success", showIcon: true, title: "" });
 };
 
-var css_248z$d = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
-styleInject(css_248z$d);
+var css_248z$c = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$c);
 
 const Title = (props) => {
   const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
@@ -1086,8 +1086,8 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
   return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
 };
 
-var css_248z$c = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
-styleInject(css_248z$c);
+var css_248z$b = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+styleInject(css_248z$b);
 
 const ListItemSkeleton = () => {
   return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:p-4", children: [jsxRuntime.jsx("div", { className: "skeleton-box is-circle ui:mr-2", style: { width: `${32}px`, height: `${32}px` } }), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [jsxRuntime.jsx("div", { className: "skeleton-box ui:mb-1", style: { width: `${160}px`, height: `${14}px` } }), jsxRuntime.jsx("div", { className: "skeleton-box", style: { width: `${110}px`, height: `${14}px` } })] }), jsxRuntime.jsx("div", { className: "skeleton-box is-button ui:ml-auto ui:rounded-full", style: { width: `${24}px`, height: `${24}px` } })] });
@@ -1587,9 +1587,6 @@ const ListItem = (props) => {
   return jsxRuntime.jsx(BaseListItem, Object.assign({}, props));
 };
 
-var css_248z$b = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\nli.gu-mirror {\n  position: fixed;\n  z-index: 9999;\n  margin: calc(var(--ui-spacing, 0.25rem) * 0);\n  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\nli.gu-hide {\n  display: none;\n}\nli.gu-unselectable {\n  user-select: none;\n}\nli.gu-transit {\n  background-color: var(--ui-color-blue-50, #eff6ff);\n  filter: none;\n  border-radius: 0;\n  --tw-border-style: none;\n  border-style: none;\n  opacity: 100%;\n}\nli.gu-transit > * {\n  visibility: hidden;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n    }\n  }\n}";
-styleInject(css_248z$b);
-
 const DefaultList = (_a) => {
   var { items, onDragEnd, onAssetLoadError, subtitle } = _a, props = __rest(_a, ["items", "onDragEnd", "onAssetLoadError", "subtitle"]);
   const sensor = core.useSensor(core.MouseSensor);
@@ -5041,7 +5038,7 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
   ]), style, ref }));
 });
 
-const LinkTooltip = ({ linkElement, quillInstance, onClose }) => {
+const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) => {
   const dialogRef = React.useRef(null);
   const anchorName = React.useRef(`link-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`);
   React.useEffect(() => {
@@ -5069,25 +5066,23 @@ const LinkTooltip = ({ linkElement, quillInstance, onClose }) => {
   }, [linkElement, onClose]);
   const handleEditLink = () => {
     const currentUrl = linkElement.getAttribute("href") || "";
-    const newUrl = prompt("Link URL:", currentUrl);
+    const newUrl = prompt(translations.linkUrlPrompt, currentUrl);
     if (newUrl !== null) {
-      const blot = quillInstance.scroll.find(linkElement);
-      if (blot) {
-        const index = quillInstance.getIndex(blot);
-        const length = blot.length();
-        quillInstance.setSelection(index, length);
-        quillInstance.format("link", newUrl || false);
+      const { view } = editorInstance;
+      const pos = view.posAtDOM(linkElement, 0);
+      const node = view.state.doc.nodeAt(pos);
+      if (node) {
+        editorInstance.chain().focus().setTextSelection({ from: pos, to: pos + node.nodeSize }).setLink({ href: newUrl || "" }).run();
       }
     }
     onClose();
   };
   const handleRemoveLink = () => {
-    const blot = quillInstance.scroll.find(linkElement);
-    if (blot) {
-      const index = quillInstance.getIndex(blot);
-      const length = blot.length();
-      quillInstance.setSelection(index, length);
-      quillInstance.format("link", false);
+    const { view } = editorInstance;
+    const pos = view.posAtDOM(linkElement, 0);
+    const node = view.state.doc.nodeAt(pos);
+    if (node) {
+      editorInstance.chain().focus().setTextSelection({ from: pos, to: pos + node.nodeSize }).unsetLink().run();
     }
     onClose();
   };
@@ -5099,33 +5094,57 @@ const LinkTooltip = ({ linkElement, quillInstance, onClose }) => {
     top: "anchor(bottom)",
     left: "anchor(left)",
     marginTop: "8px"
-  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { p: "xs", children: jsxRuntime.jsxs(Text, { children: ["Visit URL:", " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: "xs", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: "Edit", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: "Remove", size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: "Close", size: "medium" })] })] }) }) });
+  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { p: "xs", children: jsxRuntime.jsxs(Text, { children: [translations.visitUrlLabel, " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: "xs", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: translations.editButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: translations.removeButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: translations.closeButtonText, size: "medium" })] })] }) }) });
 };
 
-const TextEditorToolbarButton = ({ option, hasTextSelected }) => {
+const TextEditorToolbarButton = ({ option, hasTextSelected, editor, translations }) => {
+  const [, forceUpdate] = React.useState(0);
+  React.useEffect(() => {
+    if (!editor) {
+      return void 0;
+    }
+    const handleUpdate = () => {
+      forceUpdate((n) => n + 1);
+    };
+    editor.on("transaction", handleUpdate);
+    editor.on("selectionUpdate", handleUpdate);
+    return () => {
+      editor.off("transaction", handleUpdate);
+      editor.off("selectionUpdate", handleUpdate);
+    };
+  }, [editor]);
   const buttonClasses = "ui:aria-pressed:bg-primary-background ui:aria-disabled:cursor-not-allowed";
+  if (!editor) {
+    return null;
+  }
   if (typeof option === "string") {
     switch (option) {
       case "bold":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "bold", className: `ql-bold ${buttonClasses}`, children: jsxRuntime.jsx(solid.BoldIcon, { width: 16 }) });
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.boldLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleBold().run(), "aria-pressed": editor.isActive("bold"), children: jsxRuntime.jsx(solid.BoldIcon, { width: 16 }) });
       case "italic":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "italic", className: `ql-italic ${buttonClasses}`, children: jsxRuntime.jsx(solid.ItalicIcon, { width: 16 }) });
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.italicLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleItalic().run(), "aria-pressed": editor.isActive("italic"), children: jsxRuntime.jsx(solid.ItalicIcon, { width: 16 }) });
       case "underline":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "underline", className: `ql-underline ${buttonClasses}`, children: jsxRuntime.jsx(solid.UnderlineIcon, { width: 16 }) });
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.underlineLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleUnderline().run(), "aria-pressed": editor.isActive("underline"), children: jsxRuntime.jsx(solid.UnderlineIcon, { width: 16 }) });
       case "strike":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "strike", className: `ql-strike ${buttonClasses}`, children: jsxRuntime.jsx(solid.StrikethroughIcon, { width: 16 }) });
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.strikeLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleStrike().run(), "aria-pressed": editor.isActive("strike"), children: jsxRuntime.jsx(solid.StrikethroughIcon, { width: 16 }) });
       case "link":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "link", className: `ql-link ${buttonClasses}`, disabled: !hasTextSelected, children: jsxRuntime.jsx(solid.LinkIcon, { width: 16 }) });
-      case "video":
-        return jsxRuntime.jsx(TertiaryIconButton, { label: "video", className: `ql-video ${buttonClasses}`, children: jsxRuntime.jsx(solid.VideoCameraIcon, { width: 16 }) });
+        return jsxRuntime.jsx(TertiaryIconButton, { label: translations.linkLabel, className: buttonClasses, disabled: !hasTextSelected, onClick: () => {
+          if (!hasTextSelected) {
+            return;
+          }
+          const url = prompt(translations.enterUrlPrompt);
+          if (url) {
+            editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+          }
+        }, "aria-pressed": editor.isActive("link"), children: jsxRuntime.jsx(solid.LinkIcon, { width: 16 }) });
       default:
         return null;
     }
   } else if (typeof option === "object" && "list" in option) {
     if (option.list === "ordered") {
-      return jsxRuntime.jsx(TertiaryIconButton, { label: "ordered list", className: `ql-list ${buttonClasses}`, value: "ordered", children: jsxRuntime.jsx(solid.NumberedListIcon, { width: 16 }) });
+      return jsxRuntime.jsx(TertiaryIconButton, { label: translations.orderedListLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleOrderedList().run(), "aria-pressed": editor.isActive("orderedList"), children: jsxRuntime.jsx(solid.NumberedListIcon, { width: 16 }) });
     } else if (option.list === "bullet") {
-      return jsxRuntime.jsx(TertiaryIconButton, { label: "bullet list", className: `ql-list ${buttonClasses}`, value: "bullet", children: jsxRuntime.jsx(solid.ListBulletIcon, { width: 16 }) });
+      return jsxRuntime.jsx(TertiaryIconButton, { label: translations.bulletListLabel, className: buttonClasses, onClick: () => editor.chain().focus().toggleBulletList().run(), "aria-pressed": editor.isActive("bulletList"), children: jsxRuntime.jsx(solid.ListBulletIcon, { width: 16 }) });
     }
   }
   return null;
@@ -5149,11 +5168,92 @@ const getGroupKey = (group) => {
     return "";
   }).join("-");
 };
-const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected }) => {
-  return jsxRuntime.jsx(Stack, { axis: "x", gap: "m", px: "xxxs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", gap: "xxxxs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
+const TextEditorToolbar = ({ toolbarId, toolbar, hasTextSelected, editor, translations }) => {
+  return jsxRuntime.jsx(Stack, { axis: "x", gap: "m", _px: "xs", id: toolbarId, children: toolbar.map((group) => jsxRuntime.jsx(Stack, { axis: "x", _gap: "xs", children: group.map((option, optionIndex) => jsxRuntime.jsx(TextEditorToolbarButton, { option, hasTextSelected, editor, translations }, getOptionKey(option, optionIndex))) }, getGroupKey(group))) });
+};
+
+const TEXT_EDITOR_TRANSLATIONS = {
+  "en-GB": {
+    boldLabel: "bold",
+    italicLabel: "italic",
+    underlineLabel: "underline",
+    strikeLabel: "strike",
+    linkLabel: "link",
+    orderedListLabel: "ordered list",
+    bulletListLabel: "bullet list",
+    enterUrlPrompt: "Enter URL:",
+    linkUrlPrompt: "Link URL:",
+    visitUrlLabel: "Visit URL:",
+    editButtonText: "Edit",
+    removeButtonText: "Remove",
+    closeButtonText: "Close"
+  },
+  "nl-NL": {
+    boldLabel: "vetgedrukt",
+    italicLabel: "cursief",
+    underlineLabel: "onderstreept",
+    strikeLabel: "doorgestreept",
+    linkLabel: "link",
+    orderedListLabel: "genummerde lijst",
+    bulletListLabel: "opsommingslijst",
+    enterUrlPrompt: "Voer URL in:",
+    linkUrlPrompt: "Link URL:",
+    visitUrlLabel: "Bezoek URL:",
+    editButtonText: "Bewerken",
+    removeButtonText: "Verwijderen",
+    closeButtonText: "Sluiten"
+  },
+  "de-DE": {
+    boldLabel: "fett",
+    italicLabel: "kursiv",
+    underlineLabel: "unterstrichen",
+    strikeLabel: "durchgestrichen",
+    linkLabel: "Link",
+    orderedListLabel: "nummerierte Liste",
+    bulletListLabel: "Aufz\xE4hlungsliste",
+    enterUrlPrompt: "URL eingeben:",
+    linkUrlPrompt: "Link-URL:",
+    visitUrlLabel: "URL besuchen:",
+    editButtonText: "Bearbeiten",
+    removeButtonText: "Entfernen",
+    closeButtonText: "Schlie\xDFen"
+  },
+  "fr-FR": {
+    boldLabel: "gras",
+    italicLabel: "italique",
+    underlineLabel: "soulign\xE9",
+    strikeLabel: "barr\xE9",
+    linkLabel: "lien",
+    orderedListLabel: "liste num\xE9rot\xE9e",
+    bulletListLabel: "liste \xE0 puces",
+    enterUrlPrompt: "Entrer l'URL :",
+    linkUrlPrompt: "URL du lien :",
+    visitUrlLabel: "Visiter l'URL :",
+    editButtonText: "Modifier",
+    removeButtonText: "Supprimer",
+    closeButtonText: "Fermer"
+  },
+  "pt-PT": {
+    boldLabel: "negrito",
+    italicLabel: "it\xE1lico",
+    underlineLabel: "sublinhado",
+    strikeLabel: "riscado",
+    linkLabel: "liga\xE7\xE3o",
+    orderedListLabel: "lista numerada",
+    bulletListLabel: "lista com marcadores",
+    enterUrlPrompt: "Introduzir URL:",
+    linkUrlPrompt: "URL da liga\xE7\xE3o:",
+    visitUrlLabel: "Visitar URL:",
+    editButtonText: "Editar",
+    removeButtonText: "Remover",
+    closeButtonText: "Fechar"
+  }
+};
+const getTextEditorTranslations = (locale) => {
+  return TEXT_EDITOR_TRANSLATIONS[locale] || TEXT_EDITOR_TRANSLATIONS["en-GB"];
 };
 
-var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n}\n.ql-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.ql-editor ul,\n.ql-editor ol {\n  padding-left: 1.5rem;\n}\n.ql-editor ul {\n  list-style-type: disc;\n}\n.ql-editor ol {\n  list-style-type: decimal;\n}\n.ql-editor li {\n  margin-bottom: 0.25rem;\n}\n.ql-editor strong {\n  font-weight: 600;\n}\n.ql-editor em {\n  font-style: italic;\n}\n.ql-editor u {\n  text-decoration: underline;\n}\n.ql-editor s {\n  text-decoration: line-through;\n}\n.ql-editor h1,\n.ql-editor h2,\n.ql-editor h3,\n.ql-editor h4,\n.ql-editor h5,\n.ql-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.ql-editor h1:first-child,\n.ql-editor h2:first-child,\n.ql-editor h3:first-child,\n.ql-editor h4:first-child,\n.ql-editor h5:first-child,\n.ql-editor h6:first-child {\n  margin-top: 0;\n}\n.ql-editor h1 {\n  font-size: 2rem;\n}\n.ql-editor h2 {\n  font-size: 1.5rem;\n}\n.ql-editor h3 {\n  font-size: 1.25rem;\n}\n.ql-editor h4 {\n  font-size: 1.125rem;\n}\n.ql-editor h5,\n.ql-editor h6 {\n  font-size: 1rem;\n}";
+var css_248z$1 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.web-ui-text-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  outline: none;\n}\n.web-ui-text-editor.tiptap.ProseMirror p.is-editor-empty:first-child::before {\n  color: var(--ui-color-text-neutral-primary-disabled);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.web-ui-text-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.web-ui-text-editor ul,\n.web-ui-text-editor ol {\n  padding-left: 1.5rem;\n}\n.web-ui-text-editor ul {\n  list-style-type: disc;\n}\n.web-ui-text-editor ol {\n  list-style-type: decimal;\n}\n.web-ui-text-editor li {\n  margin-bottom: 0.25rem;\n}\n.web-ui-text-editor strong {\n  font-weight: 600;\n}\n.web-ui-text-editor em {\n  font-style: italic;\n}\n.web-ui-text-editor u {\n  text-decoration: underline;\n}\n.web-ui-text-editor s {\n  text-decoration: line-through;\n}\n.web-ui-text-editor h1,\n.web-ui-text-editor h2,\n.web-ui-text-editor h3,\n.web-ui-text-editor h4,\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.web-ui-text-editor h1:first-child,\n.web-ui-text-editor h2:first-child,\n.web-ui-text-editor h3:first-child,\n.web-ui-text-editor h4:first-child,\n.web-ui-text-editor h5:first-child,\n.web-ui-text-editor h6:first-child {\n  margin-top: 0;\n}\n.web-ui-text-editor h1 {\n  font-size: 2rem;\n}\n.web-ui-text-editor h2 {\n  font-size: 1.5rem;\n}\n.web-ui-text-editor h3 {\n  font-size: 1.25rem;\n}\n.web-ui-text-editor h4 {\n  font-size: 1.125rem;\n}\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-size: 1rem;\n}";
 styleInject(css_248z$1);
 
 const sanitize = (html) => DOMPurify__default.default.sanitize(html, {
@@ -5161,7 +5261,7 @@ const sanitize = (html) => DOMPurify__default.default.sanitize(html, {
   ALLOWED_ATTR: ["href", "target"]
 });
 const TextEditor = (_a) => {
-  var { defaultValue, formats, toolbar = [
+  var { defaultValue, formats = ["bold", "italic", "underline", "strike", "list", "link"], toolbar = [
     ["bold", "italic", "underline", "strike"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
@@ -5170,58 +5270,75 @@ const TextEditor = (_a) => {
   const toolbarId = `toolbar-${rawId.replace(/:/g, "")}`;
   const defaultValueRef = React.useRef(sanitize(defaultValue !== null && defaultValue !== void 0 ? defaultValue : ""));
   const onTextChangeRef = React.useRef(onValueChange);
-  const editorRef = React.useRef(null);
-  const quillRef = React.useRef(null);
   const [linkTooltip, setLinkTooltip] = React.useState(null);
   const [hasTextSelected, setHasTextSelected] = React.useState(false);
+  const locale = useLocaleContext();
+  const translations = getTextEditorTranslations(locale);
   React.useLayoutEffect(() => {
     onTextChangeRef.current = onValueChange;
   });
-  React.useEffect(() => {
-    if (!editorRef.current || quillRef.current) {
-      return void 0;
-    }
-    const editor = editorRef.current;
-    const quill = new Quill__default.default(editor, {
-      formats,
-      modules: {
-        toolbar: `#${toolbarId}`
+  const editor = react.useEditor({
+    extensions: [
+      StarterKit__default.default.configure({
+        // Configure extensions based on formats prop
+        blockquote: (formats === null || formats === void 0 ? void 0 : formats.includes("blockquote")) ? {} : false,
+        bold: (formats === null || formats === void 0 ? void 0 : formats.includes("bold")) ? {} : false,
+        bulletList: (formats === null || formats === void 0 ? void 0 : formats.includes("list")) ? {} : false,
+        code: (formats === null || formats === void 0 ? void 0 : formats.includes("code")) ? {} : false,
+        heading: (formats === null || formats === void 0 ? void 0 : formats.includes("header")) ? {} : false,
+        italic: (formats === null || formats === void 0 ? void 0 : formats.includes("italic")) ? {} : false,
+        link: (formats === null || formats === void 0 ? void 0 : formats.includes("link")) ? {
+          openOnClick: false,
+          defaultProtocol: "https",
+          HTMLAttributes: {
+            rel: "noopener noreferrer"
+          }
+        } : false,
+        orderedList: (formats === null || formats === void 0 ? void 0 : formats.includes("list")) ? {} : false,
+        strike: (formats === null || formats === void 0 ? void 0 : formats.includes("strike")) ? {} : false,
+        underline: (formats === null || formats === void 0 ? void 0 : formats.includes("underline")) ? {
+          HTMLAttributes: {
+            class: ""
+          }
+        } : false,
+        codeBlock: (formats === null || formats === void 0 ? void 0 : formats.includes("code")) ? {} : false
+      })
+    ],
+    content: defaultValueRef.current,
+    editorProps: {
+      attributes: {
+        class: "web-ui-text-editor ui:overflow-auto ui:resize-y ui:min-h-40",
+        "data-placeholder": placeholder || ""
       },
-      placeholder
-    });
-    quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
+      transformPastedHTML: (html) => sanitize(html),
+      handleClick: (view, pos, event) => {
+        const { doc } = view.state;
+        const $pos = doc.resolve(pos);
+        const marks = $pos.marks();
+        const linkMark = marks.find((mark) => mark.type.name === "link");
+        if (linkMark) {
+          event.preventDefault();
+          const anchor = event.target.closest("a");
+          if (anchor) {
+            setLinkTooltip(anchor);
+          }
+          return true;
+        }
+        return false;
+      }
+    },
+    onUpdate: ({ editor: ed }) => {
       var _a2;
-      (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, sanitize(quill.getSemanticHTML()), value, source);
-    });
-    const handleSelectionChange = () => {
-      const selection = quill.getSelection();
-      setHasTextSelected(selection ? selection.length > 0 : false);
-    };
-    quill.on(Quill__default.default.events.SELECTION_CHANGE, handleSelectionChange);
-    if (defaultValueRef.current) {
-      quill.setContents(quill.clipboard.convert({
-        html: defaultValueRef.current
-      }));
-    }
-    quillRef.current = quill;
-    const qlEditor = editor.querySelector(".ql-editor");
-    if (qlEditor) {
-      qlEditor.classList.add("ui:overflow-auto", "ui:resize-y", "ui:min-h-40");
+      const html = ed.getHTML();
+      const json = ed.getJSON();
+      (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, sanitize(html), json, "user");
+    },
+    onSelectionUpdate: ({ editor: ed }) => {
+      const { from, to } = ed.state.selection;
+      setHasTextSelected(from !== to);
     }
-    const handleEditorClick = (e) => {
-      const target = e.target;
-      if (target.tagName === "A") {
-        e.preventDefault();
-        const anchor = target;
-        setLinkTooltip(anchor);
-      }
-    };
-    editor.addEventListener("click", handleEditorClick);
-    return () => {
-      editor.removeEventListener("click", handleEditorClick);
-    };
-  }, []);
-  return jsxRuntime.jsxs(Card, Object.assign({ padding: false, border: true, borderRadius: "xs", backgroundColor: "base" }, attrs, { children: [jsxRuntime.jsx(Card.TopBar, { children: jsxRuntime.jsx(Card.Actions, { className: "ui:justify-start", children: jsxRuntime.jsx(TextEditorToolbar, { toolbarId, toolbar, hasTextSelected }) }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsx("div", { className: "editor", ref: editorRef }), jsxRuntime.jsx("div", { children: linkTooltip && quillRef.current && jsxRuntime.jsx(LinkTooltip, { linkElement: linkTooltip, quillInstance: quillRef.current, onClose: () => setLinkTooltip(null) }) })] }));
+  });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, Object.assign({ padding: false, border: true, borderRadius: "xs", backgroundColor: "base" }, attrs, { children: [jsxRuntime.jsx(Card.TopBar, { children: jsxRuntime.jsx(Card.Actions, { className: "ui:justify-start", children: jsxRuntime.jsx(TextEditorToolbar, { toolbarId, toolbar, hasTextSelected, editor, translations }) }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsx(react.EditorContent, { editor }), jsxRuntime.jsx("div", {})] })), linkTooltip && editor && jsxRuntime.jsx(LinkTooltip, { linkElement: linkTooltip, editorInstance: editor, onClose: () => setLinkTooltip(null), translations })] });
 };
 
 const TextLink = (props) => {
@@ -5617,7 +5734,7 @@ const FilterMenu = (props) => {
   const { showCheckedAmount = false, alignPopover = "left", categorizedFilter, singleSelection = false } = props;
   const multiSelection = !singleSelection;
   const amountOfCheckedItems = categorizedFilter.options.filter((option) => option.isChecked).length;
-  return jsxRuntime.jsxs(react.Popover, { className: "ui:relative ui:inline-block ui:px-4 ui:text-left", children: [jsxRuntime.jsxs(react.PopoverButton, { className: "ui:group ui:inline-flex ui:justify-center ui:text-sm ui:font-medium ui:text-slate-700 ui:hover:text-slate-900", children: [jsxRuntime.jsx("span", { children: categorizedFilter.label }), amountOfCheckedItems > 0 && showCheckedAmount ? jsxRuntime.jsx("span", { className: "ui:ml-1.5 ui:rounded ui:bg-slate-200 ui:px-1.5 ui:py-0.5 ui:text-xs ui:font-semibold ui:tabular-nums ui:text-slate-700", children: amountOfCheckedItems }) : null, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "ui:-mr-1 ui:ml-1 ui:h-5 ui:w-5 ui:shrink-0 ui:text-slate-400 ui:group-hover:text-slate-500", "aria-hidden": "true" })] }), jsxRuntime.jsx(react.Transition, { enter: "ui:transition ui:ease-out ui:duration-100", enterFrom: "ui:transform ui:opacity-0 ui:scale-95", enterTo: "ui:transform ui:opacity-100 ui:scale-100", leave: "ui:transition ui:ease-in ui:duration-75", leaveFrom: "ui:transform ui:opacity-100 ui:scale-100", leaveTo: "ui:transform ui:opacity-0 ui:scale-95", children: jsxRuntime.jsx(react.PopoverPanel, { className: classNames__default.default("ui:min-w-58", "ui:absolute ui:z-10 ui:mt-2", "ui:rounded-2xl ui:bg-white ui:shadow-2xl ui:ring-1 ui:ring-black ui:ring-opacity-5", "ui:focus:outline-none", "ui:border ui:border-neutral-border-high-contrast", {
+  return jsxRuntime.jsxs(react$1.Popover, { className: "ui:relative ui:inline-block ui:px-4 ui:text-left", children: [jsxRuntime.jsxs(react$1.PopoverButton, { className: "ui:group ui:inline-flex ui:justify-center ui:text-sm ui:font-medium ui:text-slate-700 ui:hover:text-slate-900", children: [jsxRuntime.jsx("span", { children: categorizedFilter.label }), amountOfCheckedItems > 0 && showCheckedAmount ? jsxRuntime.jsx("span", { className: "ui:ml-1.5 ui:rounded ui:bg-slate-200 ui:px-1.5 ui:py-0.5 ui:text-xs ui:font-semibold ui:tabular-nums ui:text-slate-700", children: amountOfCheckedItems }) : null, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "ui:-mr-1 ui:ml-1 ui:h-5 ui:w-5 ui:shrink-0 ui:text-slate-400 ui:group-hover:text-slate-500", "aria-hidden": "true" })] }), jsxRuntime.jsx(react$1.Transition, { enter: "ui:transition ui:ease-out ui:duration-100", enterFrom: "ui:transform ui:opacity-0 ui:scale-95", enterTo: "ui:transform ui:opacity-100 ui:scale-100", leave: "ui:transition ui:ease-in ui:duration-75", leaveFrom: "ui:transform ui:opacity-100 ui:scale-100", leaveTo: "ui:transform ui:opacity-0 ui:scale-95", children: jsxRuntime.jsx(react$1.PopoverPanel, { className: classNames__default.default("ui:min-w-58", "ui:absolute ui:z-10 ui:mt-2", "ui:rounded-2xl ui:bg-white ui:shadow-2xl ui:ring-1 ui:ring-black ui:ring-opacity-5", "ui:focus:outline-none", "ui:border ui:border-neutral-border-high-contrast", {
     // Align popover to the left side of the button label
     "ui:left-4 ui:origin-top-left": alignPopover === "left",
     // Align popover to the right side of the chevron icon
@@ -5666,7 +5783,7 @@ const SortMenu = (props) => {
 
 const FiltersMenus = (props) => {
   const { filters, singleSelection } = props;
-  return jsxRuntime.jsx("div", { className: "ui:hidden ui:sm:block", children: jsxRuntime.jsx("div", { className: "ui:flow-root", children: jsxRuntime.jsx(react.PopoverGroup, { className: "ui:-mx-4 ui:flex ui:items-center ui:divide-x ui:divide-slate-200", children: filters.map((categorizedFilter) => jsxRuntime.jsx(FilterMenu, { alignPopover: "right", showCheckedAmount: true, categorizedFilter, onFilterOptionChange: props.onFilterOptionChange, singleSelection }, `filter-menu-${categorizedFilter.key}`)) }) }) });
+  return jsxRuntime.jsx("div", { className: "ui:hidden ui:sm:block", children: jsxRuntime.jsx("div", { className: "ui:flow-root", children: jsxRuntime.jsx(react$1.PopoverGroup, { className: "ui:-mx-4 ui:flex ui:items-center ui:divide-x ui:divide-slate-200", children: filters.map((categorizedFilter) => jsxRuntime.jsx(FilterMenu, { alignPopover: "right", showCheckedAmount: true, categorizedFilter, onFilterOptionChange: props.onFilterOptionChange, singleSelection }, `filter-menu-${categorizedFilter.key}`)) }) }) });
 };
 
 const isPresetFilterOption = (option) => {