@12-apps/ui 5.0.0 → 5.0.1

package/dist/form/RichTextEditor.js

@@ -0,0 +1,558 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/RichTextEditor/RichTextEditor.tsx
+import {
+  alpha as alpha2,
+  Box as Box2,
+  Paper,
+  useTheme
+} from "@mui/material";
+import { forwardRef } from "react";
+
+// src/components/form/RichTextEditor/RichTextEditor.hooks.ts
+import DOMPurify from "dompurify";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+// src/components/form/RichTextEditor/RichTextEditor.dom.ts
+var wrapSelection = (range, tagName) => {
+  const selectedText = range.toString();
+  if (!selectedText) return;
+  const wrapper = document.createElement(tagName);
+  wrapper.appendChild(document.createTextNode(selectedText));
+  range.deleteContents();
+  range.insertNode(wrapper);
+  const newRange = document.createRange();
+  newRange.setStartAfter(wrapper);
+  newRange.collapse(true);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(newRange);
+};
+var wrapSelectionWithLink = (range, url) => {
+  const selectedText = range.toString();
+  if (!selectedText) return;
+  const link = document.createElement("a");
+  link.href = url.startsWith("http") ? url : `https://${url}`;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.appendChild(document.createTextNode(selectedText));
+  range.deleteContents();
+  range.insertNode(link);
+  const newRange = document.createRange();
+  newRange.setStartAfter(link);
+  newRange.collapse(true);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(newRange);
+};
+var insertImage = (range, src) => {
+  const img = document.createElement("img");
+  img.src = src;
+  img.style.maxWidth = "100%";
+  img.style.height = "auto";
+  range.deleteContents();
+  range.insertNode(img);
+  const newRange = document.createRange();
+  newRange.setStartAfter(img);
+  newRange.collapse(true);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(newRange);
+};
+var blockElementFor = (range) => {
+  const node = range.commonAncestorContainer;
+  return node.nodeType === globalThis.Node.TEXT_NODE ? node.parentElement : node;
+};
+var removeFromList = (block) => {
+  const listItem = block.closest("li");
+  if (!listItem?.parentElement) return;
+  listItem.parentElement.replaceChild(
+    document.createTextNode(listItem.textContent || ""),
+    listItem
+  );
+};
+var wrapInList = (range, listType) => {
+  const list = document.createElement(listType);
+  const listItem = document.createElement("li");
+  listItem.appendChild(document.createTextNode(range.toString() || "List item"));
+  list.appendChild(listItem);
+  range.deleteContents();
+  range.insertNode(list);
+  const newRange = document.createRange();
+  newRange.selectNodeContents(listItem);
+  newRange.collapse(false);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(newRange);
+};
+var toggleList = (range, listType, editor) => {
+  if (!editor) return;
+  const block = blockElementFor(range);
+  if (!block) return;
+  if (block.closest(listType)) {
+    removeFromList(block);
+    return;
+  }
+  wrapInList(range, listType);
+};
+
+// src/components/form/RichTextEditor/RichTextEditor.format.ts
+var WRAP_TAGS = {
+  bold: "strong",
+  italic: "em",
+  underline: "u",
+  strikethrough: "s"
+};
+var LIST_TAGS = {
+  insertOrderedList: "ol",
+  insertUnorderedList: "ul"
+};
+var BLOCK_TAGS = /* @__PURE__ */ new Set(["pre", "blockquote"]);
+var applyFormatToRange = ({
+  formatType,
+  value,
+  range,
+  editor
+}) => {
+  const wrapTag = WRAP_TAGS[formatType];
+  if (wrapTag) {
+    wrapSelection(range, wrapTag);
+    return;
+  }
+  const listTag = LIST_TAGS[formatType];
+  if (listTag) {
+    toggleList(range, listTag, editor);
+    return;
+  }
+  if (formatType === "createLink" && value) {
+    wrapSelectionWithLink(range, value);
+    return;
+  }
+  if (formatType === "insertImage" && value) {
+    insertImage(range, value);
+    return;
+  }
+  if (formatType === "formatBlock" && value && BLOCK_TAGS.has(value)) {
+    wrapSelection(range, value);
+  }
+};
+
+// src/components/form/RichTextEditor/RichTextEditor.hooks.ts
+var SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    "p",
+    "br",
+    "strong",
+    "em",
+    "u",
+    "s",
+    "a",
+    "img",
+    "ul",
+    "ol",
+    "li",
+    "blockquote",
+    "pre",
+    "code",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "span",
+    "div"
+  ],
+  ALLOWED_ATTR: ["href", "src", "alt", "target", "rel", "style", "class"],
+  ALLOW_DATA_ATTR: false,
+  KEEP_CONTENT: true
+};
+var textLengthOf = (html) => {
+  const probe = document.createElement("div");
+  probe.innerHTML = html;
+  return probe.textContent?.length || 0;
+};
+var useEditorContent = ({
+  editorRef,
+  value,
+  onChange,
+  maxLength
+}) => {
+  const [content, setContent] = useState(value ?? "");
+  const handleContentChange = useCallback(() => {
+    if (!editorRef.current) return;
+    const newContent = editorRef.current.innerHTML;
+    if (maxLength && (editorRef.current.textContent || "").length > maxLength) {
+      editorRef.current.innerHTML = content;
+      return;
+    }
+    setContent(newContent);
+    onChange?.(newContent);
+  }, [maxLength, onChange, content, editorRef]);
+  return { content, handleContentChange };
+};
+var useFocusState = ({ onFocus, onBlur }) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    onFocus?.();
+  }, [onFocus]);
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    onBlur?.();
+  }, [onBlur]);
+  return { isFocused, handleFocus, handleBlur };
+};
+var useRichTextEditor = ({
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  readOnly,
+  maxLength
+}) => {
+  const editorRef = useRef(null);
+  const { content, handleContentChange } = useEditorContent({
+    editorRef,
+    value,
+    onChange,
+    maxLength
+  });
+  const { isFocused, handleFocus, handleBlur } = useFocusState({ onFocus, onBlur });
+  const applyFormat = useCallback(
+    (formatType, formatValue) => {
+      if (disabled || readOnly || !editorRef.current) return;
+      const selection = window.getSelection();
+      if (!selection || selection.rangeCount === 0) {
+        editorRef.current.focus();
+        return;
+      }
+      applyFormatToRange({
+        formatType,
+        value: formatValue,
+        range: selection.getRangeAt(0),
+        editor: editorRef.current
+      });
+      handleContentChange();
+      editorRef.current.focus();
+    },
+    [disabled, readOnly, handleContentChange]
+  );
+  const sanitizedContent = DOMPurify.sanitize(content, SANITIZE_CONFIG);
+  useEffect(() => {
+    if (editorRef.current && editorRef.current.innerHTML !== sanitizedContent) {
+      editorRef.current.innerHTML = sanitizedContent;
+    }
+  }, [sanitizedContent]);
+  return {
+    editorRef,
+    isFocused,
+    characterCount: textLengthOf(sanitizedContent),
+    handleContentChange,
+    handleFocus,
+    handleBlur,
+    applyFormat
+  };
+};
+
+// src/components/form/RichTextEditor/RichTextEditorToolbar.tsx
+import Code from "@mui/icons-material/Code";
+import FormatBold from "@mui/icons-material/FormatBold";
+import FormatItalic from "@mui/icons-material/FormatItalic";
+import FormatListBulleted from "@mui/icons-material/FormatListBulleted";
+import FormatListNumbered from "@mui/icons-material/FormatListNumbered";
+import FormatQuote from "@mui/icons-material/FormatQuote";
+import FormatStrikethrough from "@mui/icons-material/FormatStrikethrough";
+import FormatUnderlined from "@mui/icons-material/FormatUnderlined";
+import Image from "@mui/icons-material/Image";
+import Link from "@mui/icons-material/Link";
+import { alpha, Box, Divider, IconButton, Toolbar, Tooltip, Typography } from "@mui/material";
+import React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GROUPS = [
+  [
+    { key: "bold", icon: /* @__PURE__ */ jsx(FormatBold, {}), tooltip: "Bold", command: "bold" },
+    { key: "italic", icon: /* @__PURE__ */ jsx(FormatItalic, {}), tooltip: "Italic", command: "italic" },
+    { key: "underline", icon: /* @__PURE__ */ jsx(FormatUnderlined, {}), tooltip: "Underline", command: "underline" },
+    {
+      key: "strikethrough",
+      icon: /* @__PURE__ */ jsx(FormatStrikethrough, {}),
+      tooltip: "Strikethrough",
+      command: "strikethrough"
+    }
+  ],
+  [
+    {
+      key: "orderedList",
+      icon: /* @__PURE__ */ jsx(FormatListNumbered, {}),
+      tooltip: "Numbered List",
+      command: "insertOrderedList"
+    },
+    {
+      key: "unorderedList",
+      icon: /* @__PURE__ */ jsx(FormatListBulleted, {}),
+      tooltip: "Bulleted List",
+      command: "insertUnorderedList"
+    }
+  ],
+  [
+    { key: "link", icon: /* @__PURE__ */ jsx(Link, {}), tooltip: "Insert Link", command: "createLink" },
+    { key: "image", icon: /* @__PURE__ */ jsx(Image, {}), tooltip: "Insert Image", command: "insertImage" },
+    {
+      key: "codeBlock",
+      icon: /* @__PURE__ */ jsx(Code, {}),
+      tooltip: "Code Block",
+      command: "formatBlock",
+      commandValue: "pre"
+    },
+    {
+      key: "quote",
+      icon: /* @__PURE__ */ jsx(FormatQuote, {}),
+      tooltip: "Quote",
+      command: "formatBlock",
+      commandValue: "blockquote"
+    }
+  ]
+];
+var PROMPTS = {
+  createLink: { message: "Enter URL:", initial: "https://" },
+  insertImage: { message: "Enter image URL:" }
+};
+var Separator = () => /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true, sx: { mx: 0.5 } });
+var ToolbarGroups = ({ config, disabled, readOnly, onRun }) => {
+  const groupIsActive = (group) => group.some((item) => config[item.key]);
+  return /* @__PURE__ */ jsx(Fragment, { children: GROUPS.map((group, groupIndex) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    groupIsActive(group) && GROUPS.slice(0, groupIndex).some(groupIsActive) && /* @__PURE__ */ jsx(Separator, {}),
+    group.filter((item) => config[item.key]).map((item) => /* @__PURE__ */ jsx(Tooltip, { title: item.tooltip, children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "small",
+        onClick: () => onRun(item.command, item.commandValue),
+        disabled: disabled || readOnly,
+        "aria-label": item.tooltip,
+        "data-testid": `toolbar-${item.key}`,
+        children: item.icon
+      }
+    ) }, item.key))
+  ] }, group[0]?.key ?? groupIndex)) });
+};
+var RichTextEditorToolbar = ({
+  config,
+  disabled,
+  readOnly,
+  maxLength,
+  characterCount,
+  editorRef,
+  onFormat
+}) => {
+  const run = (command, commandValue) => {
+    const prompt = PROMPTS[command];
+    if (!prompt) {
+      onFormat(command, commandValue);
+      return;
+    }
+    const answer = window.prompt(prompt.message, prompt.initial);
+    if (answer) onFormat(command, answer);
+  };
+  return /* @__PURE__ */ jsxs(
+    Toolbar,
+    {
+      variant: "dense",
+      "data-testid": "editor-toolbar",
+      sx: {
+        minHeight: 48,
+        px: 1,
+        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
+        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8)
+      },
+      children: [
+        /* @__PURE__ */ jsx(ToolbarGroups, { config, disabled, readOnly, onRun: run }),
+        config.customItems && config.customItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Separator, {}),
+          config.customItems.map((item) => /* @__PURE__ */ jsx(Tooltip, { title: item.label, children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              size: "small",
+              onClick: () => item.action(editorRef.current),
+              disabled: item.disabled || disabled || readOnly,
+              "aria-label": item.label,
+              "data-testid": `toolbar-custom-${item.id}`,
+              children: item.icon
+            }
+          ) }, item.id))
+        ] }),
+        /* @__PURE__ */ jsx(Box, { sx: { flexGrow: 1 } }),
+        maxLength && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "caption",
+            color: characterCount > maxLength * 0.8 ? "error" : "text.secondary",
+            sx: { mr: 1 },
+            "data-testid": "editor-counter",
+            children: [
+              characterCount,
+              "/",
+              maxLength
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/form/RichTextEditor/RichTextEditor.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_TOOLBAR = {
+  bold: true,
+  italic: true,
+  underline: true,
+  strikethrough: false,
+  orderedList: true,
+  unorderedList: true,
+  link: true,
+  image: false,
+  codeBlock: false,
+  quote: false,
+  customItems: []
+};
+var RICH_TEXT_DEFAULTS = {
+  value: "",
+  placeholder: "Start typing...",
+  disabled: false,
+  readOnly: false,
+  toolbar: {},
+  height: 300
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, v]) => v !== void 0)
+);
+var editorContentSx = (theme, disabled, placeholder, height) => ({
+  minHeight: typeof height === "number" ? `${height}px` : height,
+  p: 2,
+  outline: "none",
+  cursor: disabled ? "not-allowed" : "text",
+  "&:empty::before": {
+    content: `"${placeholder}"`,
+    color: theme.palette.text.disabled,
+    pointerEvents: "none"
+  },
+  "& p": {
+    margin: "8px 0",
+    "&:first-of-type": { marginTop: 0 },
+    "&:last-of-type": { marginBottom: 0 }
+  },
+  "& ul, & ol": { marginLeft: theme.spacing(2) },
+  "& blockquote": {
+    borderLeft: `4px solid ${theme.palette.primary.main}`,
+    paddingLeft: theme.spacing(2),
+    margin: `${theme.spacing(1)} 0`,
+    fontStyle: "italic",
+    backgroundColor: alpha2(theme.palette.primary.main, 0.05)
+  },
+  "& pre": {
+    backgroundColor: alpha2(theme.palette.text.primary, 0.08),
+    padding: theme.spacing(1),
+    borderRadius: 1,
+    fontFamily: 'Monaco, Menlo, "Ubuntu Mono", monospace',
+    fontSize: "0.875rem",
+    overflow: "auto"
+  },
+  "& a": { color: theme.palette.primary.main, textDecoration: "underline" }
+});
+var shellSx = (theme, isFocused, disabled) => ({
+  border: `1px solid ${alpha2(theme.palette.divider, 0.12)}`,
+  borderRadius: 1,
+  overflow: "hidden",
+  transition: "border-color 0.2s ease-in-out",
+  ...isFocused && {
+    borderColor: theme.palette.primary.main,
+    boxShadow: `0 0 0 2px ${alpha2(theme.palette.primary.main, 0.2)}`
+  },
+  ...disabled && {
+    backgroundColor: theme.palette.action.disabledBackground,
+    color: theme.palette.text.disabled
+  }
+});
+var RichTextEditor = forwardRef(
+  (editorProps, ref) => {
+    const {
+      value,
+      onChange,
+      placeholder,
+      disabled,
+      readOnly,
+      toolbar,
+      height,
+      maxLength,
+      onFocus,
+      onBlur,
+      className,
+      "data-testid": testId,
+      "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedBy,
+      ...props
+    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) };
+    const theme = useTheme();
+    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };
+    const editor = useRichTextEditor({
+      value,
+      onChange,
+      onFocus,
+      onBlur,
+      disabled,
+      readOnly,
+      maxLength
+    });
+    return /* @__PURE__ */ jsxs2(
+      Paper,
+      {
+        ref,
+        className,
+        "data-testid": testId || "rich-text-editor",
+        elevation: 1,
+        sx: shellSx(theme, editor.isFocused, Boolean(disabled)),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx2(
+            RichTextEditorToolbar,
+            {
+              config: toolbarConfig,
+              disabled: Boolean(disabled),
+              readOnly: Boolean(readOnly),
+              maxLength,
+              characterCount: editor.characterCount,
+              editorRef: editor.editorRef,
+              onFormat: editor.applyFormat
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            Box2,
+            {
+              ref: editor.editorRef,
+              contentEditable: !disabled && !readOnly,
+              onInput: editor.handleContentChange,
+              onFocus: editor.handleFocus,
+              onBlur: editor.handleBlur,
+              role: "textbox",
+              "aria-label": ariaLabel || "Rich text editor",
+              "aria-describedby": ariaDescribedBy,
+              "aria-multiline": "true",
+              tabIndex: disabled ? -1 : 0,
+              "data-testid": "editor-content",
+              suppressContentEditableWarning: true,
+              sx: editorContentSx(theme, Boolean(disabled), placeholder, height)
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+RichTextEditor.displayName = "RichTextEditor";
+export {
+  RichTextEditor,
+  RichTextEditor as default
+};
+//# sourceMappingURL=RichTextEditor.js.map

package/dist/form/RichTextEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/RichTextEditor/RichTextEditor.tsx","../../src/components/form/RichTextEditor/RichTextEditor.hooks.ts","../../src/components/form/RichTextEditor/RichTextEditor.dom.ts","../../src/components/form/RichTextEditor/RichTextEditor.format.ts","../../src/components/form/RichTextEditor/RichTextEditorToolbar.tsx"],"sourcesContent":["import {\n  alpha,\n  Box,\n  Paper,\n  useTheme } from '@mui/material';\nimport React, { forwardRef } from 'react';\n\nimport type { Theme } from '@mui/material';\nimport { useRichTextEditor } from './RichTextEditor.hooks';\nimport type { RichTextEditorProps, ToolbarConfig } from './RichTextEditor.types';\nimport { RichTextEditorToolbar } from './RichTextEditorToolbar';\n\nconst DEFAULT_TOOLBAR: Required<Omit<ToolbarConfig, 'customItems'>> & Pick<ToolbarConfig, 'customItems'> = {\n  bold: true,\n  italic: true,\n  underline: true,\n  strikethrough: false,\n  orderedList: true,\n  unorderedList: true,\n  link: true,\n  image: false,\n  codeBlock: false,\n  quote: false,\n  customItems: [] };\n\nconst RICH_TEXT_DEFAULTS: Partial<RichTextEditorProps> = {\n  value: '',\n  placeholder: 'Start typing...',\n  disabled: false,\n  readOnly: false,\n  toolbar: {},\n  height: 300 };\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: RichTextEditorProps): Partial<RichTextEditorProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, v]) => v !== undefined),\n  ) as Partial<RichTextEditorProps>;\n\n// Simple inline formats are a tag swap; lists and the value-carrying formats\n// need their own handling. This was one nine-case switch.\nconst editorContentSx = (theme: Theme, disabled: boolean, placeholder?: string, height?: string | number) => ({\n  minHeight: typeof height === 'number' ? `${height}px` : height,\n  p: 2,\n  outline: 'none',\n  cursor: disabled ? 'not-allowed' : 'text',\n  '&:empty::before': {\n    content: `\"${placeholder}\"`,\n    color: theme.palette.text.disabled,\n    pointerEvents: 'none' },\n  '& p': {\n    margin: '8px 0',\n    '&:first-of-type': { marginTop: 0 },\n    '&:last-of-type': { marginBottom: 0 } },\n  '& ul, & ol': { marginLeft: theme.spacing(2) },\n  '& blockquote': {\n    borderLeft: `4px solid ${theme.palette.primary.main}`,\n    paddingLeft: theme.spacing(2),\n    margin: `${theme.spacing(1)} 0`,\n    fontStyle: 'italic',\n    backgroundColor: alpha(theme.palette.primary.main, 0.05) },\n  '& pre': {\n    backgroundColor: alpha(theme.palette.text.primary, 0.08),\n    padding: theme.spacing(1),\n    borderRadius: 1,\n    fontFamily: 'Monaco, Menlo, \"Ubuntu Mono\", monospace',\n    fontSize: '0.875rem',\n    overflow: 'auto' },\n  '& a': { color: theme.palette.primary.main, textDecoration: 'underline' } });\n\nconst shellSx = (theme: Theme, isFocused: boolean, disabled: boolean) => ({\n  border: `1px solid ${alpha(theme.palette.divider, 0.12)}`,\n  borderRadius: 1,\n  overflow: 'hidden',\n  transition: 'border-color 0.2s ease-in-out',\n  ...(isFocused && {\n    borderColor: theme.palette.primary.main,\n    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.2)}` }),\n  ...(disabled && {\n    backgroundColor: theme.palette.action.disabledBackground,\n    color: theme.palette.text.disabled }) });\n\nexport const RichTextEditor = forwardRef<HTMLDivElement, RichTextEditorProps>(\n  (editorProps, ref) => {\n    const {\n      value,\n      onChange,\n      placeholder,\n      disabled,\n      readOnly,\n      toolbar,\n      height,\n      maxLength,\n      onFocus,\n      onBlur,\n      className,\n      'data-testid': testId,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      ...props\n    } = { ...RICH_TEXT_DEFAULTS, ...definedProps(editorProps) } as RichTextEditorProps;\n\n    const theme = useTheme();\n    const toolbarConfig = { ...DEFAULT_TOOLBAR, ...toolbar };\n    const editor = useRichTextEditor({\n      value,\n      onChange,\n      onFocus,\n      onBlur,\n      disabled,\n      readOnly,\n      maxLength });\n\n    return (\n      <Paper\n        ref={ref}\n        className={className}\n        data-testid={testId || 'rich-text-editor'}\n        elevation={1}\n        sx={shellSx(theme, editor.isFocused, Boolean(disabled))}\n        {...props}\n      >\n        <RichTextEditorToolbar\n          config={toolbarConfig}\n          disabled={Boolean(disabled)}\n          readOnly={Boolean(readOnly)}\n          maxLength={maxLength}\n          characterCount={editor.characterCount}\n          editorRef={editor.editorRef}\n          onFormat={editor.applyFormat}\n        />\n\n        <Box\n          ref={editor.editorRef}\n          contentEditable={!disabled && !readOnly}\n          onInput={editor.handleContentChange}\n          onFocus={editor.handleFocus}\n          onBlur={editor.handleBlur}\n          role=\"textbox\"\n          aria-label={ariaLabel || 'Rich text editor'}\n          aria-describedby={ariaDescribedBy}\n          aria-multiline=\"true\"\n          tabIndex={disabled ? -1 : 0}\n          data-testid=\"editor-content\"\n          suppressContentEditableWarning\n          sx={editorContentSx(theme, Boolean(disabled), placeholder, height)}\n        />\n      </Paper>\n    );\n  },\n);\n\nRichTextEditor.displayName = 'RichTextEditor';\n\nexport default RichTextEditor;","import DOMPurify from 'dompurify';\nimport type React from 'react';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { applyFormatToRange } from './RichTextEditor.format';\n\n// Deliberately narrow: anything not listed is stripped, and no data-* attributes\n// survive, so pasted markup cannot smuggle in behaviour.\nconst SANITIZE_CONFIG = {\n  ALLOWED_TAGS: [\n    'p', 'br', 'strong', 'em', 'u', 's', 'a', 'img', 'ul', 'ol', 'li',\n    'blockquote', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'div',\n  ],\n  ALLOWED_ATTR: ['href', 'src', 'alt', 'target', 'rel', 'style', 'class'],\n  ALLOW_DATA_ATTR: false,\n  KEEP_CONTENT: true,\n};\n\nconst textLengthOf = (html: string): number => {\n  const probe = document.createElement('div');\n  probe.innerHTML = html;\n  return probe.textContent?.length || 0;\n};\n\n// The editable content and the limit that guards it.\nconst useEditorContent = ({\n  editorRef,\n  value,\n  onChange,\n  maxLength,\n}: {\n  editorRef: React.RefObject<HTMLDivElement | null>;\n  value?: string;\n  onChange?: (value: string) => void;\n  maxLength?: number;\n}) => {\n  const [content, setContent] = useState(value ?? '');\n\n  const handleContentChange = useCallback(() => {\n    if (!editorRef.current) return;\n\n    const newContent = editorRef.current.innerHTML;\n\n    // Over the limit, put the last accepted content back rather than truncating\n    // mid-markup.\n    if (maxLength && (editorRef.current.textContent || '').length > maxLength) {\n      editorRef.current.innerHTML = content;\n      return;\n    }\n\n    setContent(newContent);\n    onChange?.(newContent);\n  }, [maxLength, onChange, content, editorRef]);\n\n  return { content, handleContentChange };\n};\n\nconst useFocusState = ({ onFocus, onBlur }: { onFocus?: () => void; onBlur?: () => void }) => {\n  const [isFocused, setIsFocused] = useState(false);\n\n  const handleFocus = useCallback(() => {\n    setIsFocused(true);\n    onFocus?.();\n  }, [onFocus]);\n\n  const handleBlur = useCallback(() => {\n    setIsFocused(false);\n    onBlur?.();\n  }, [onBlur]);\n\n  return { isFocused, handleFocus, handleBlur };\n};\n\nexport const useRichTextEditor = ({\n  value,\n  onChange,\n  onFocus,\n  onBlur,\n  disabled,\n  readOnly,\n  maxLength,\n}: {\n  value?: string;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  disabled?: boolean;\n  readOnly?: boolean;\n  maxLength?: number;\n}) => {\n  const editorRef = useRef<HTMLDivElement>(null);\n  const { content, handleContentChange } = useEditorContent({\n    editorRef,\n    value,\n    onChange,\n    maxLength,\n  });\n  const { isFocused, handleFocus, handleBlur } = useFocusState({ onFocus, onBlur });\n\n  const applyFormat = useCallback(\n    (formatType: string, formatValue?: string) => {\n      if (disabled || readOnly || !editorRef.current) return;\n\n      const selection = window.getSelection();\n      // Nothing selected: give the editor focus so the next keystroke lands.\n      if (!selection || selection.rangeCount === 0) {\n        editorRef.current.focus();\n        return;\n      }\n\n      applyFormatToRange({\n        formatType,\n        value: formatValue,\n        range: selection.getRangeAt(0),\n        editor: editorRef.current,\n      });\n\n      handleContentChange();\n      editorRef.current.focus();\n    },\n    [disabled, readOnly, handleContentChange],\n  );\n\n  const sanitizedContent = DOMPurify.sanitize(content, SANITIZE_CONFIG);\n\n  // Reflect the sanitized result back when it differs from what is on screen.\n  useEffect(() => {\n    if (editorRef.current && editorRef.current.innerHTML !== sanitizedContent) {\n      editorRef.current.innerHTML = sanitizedContent;\n    }\n  }, [sanitizedContent]);\n\n  return {\n    editorRef,\n    isFocused,\n    characterCount: textLengthOf(sanitizedContent),\n    handleContentChange,\n    handleFocus,\n    handleBlur,\n    applyFormat,\n  };\n};\n","// Selection surgery for the editor. Each of these mutates the DOM around a\n// Range and then rebuilds the selection, so the caret ends up where the user\n// expects rather than at the start of the document.\n\nexport const wrapSelection = (range: globalThis.Range, tagName: string) => {\n  const selectedText = range.toString();\n  if (!selectedText) return;\n  \n  const wrapper = document.createElement(tagName);\n  wrapper.appendChild(document.createTextNode(selectedText));\n  \n  range.deleteContents();\n  range.insertNode(wrapper);\n  \n  // Move cursor after inserted element\n  const newRange = document.createRange();\n  newRange.setStartAfter(wrapper);\n  newRange.collapse(true);\n  \n  const selection = window.getSelection();\n  selection?.removeAllRanges();\n  selection?.addRange(newRange);\n};\n\nexport const wrapSelectionWithLink = (range: globalThis.Range, url: string) => {\n  const selectedText = range.toString();\n  if (!selectedText) return;\n  \n  const link = document.createElement('a');\n  link.href = url.startsWith('http') ? url : `https://${url}`;\n  link.target = '_blank';\n  link.rel = 'noopener noreferrer';\n  link.appendChild(document.createTextNode(selectedText));\n  \n  range.deleteContents();\n  range.insertNode(link);\n  \n  // Move cursor after inserted element\n  const newRange = document.createRange();\n  newRange.setStartAfter(link);\n  newRange.collapse(true);\n  \n  const selection = window.getSelection();\n  selection?.removeAllRanges();\n  selection?.addRange(newRange);\n};\n\nexport const insertImage = (range: globalThis.Range, src: string) => {\n  const img = document.createElement('img');\n  img.src = src;\n  img.style.maxWidth = '100%';\n  img.style.height = 'auto';\n  \n  range.deleteContents();\n  range.insertNode(img);\n  \n  // Move cursor after inserted element\n  const newRange = document.createRange();\n  newRange.setStartAfter(img);\n  newRange.collapse(true);\n  \n  const selection = window.getSelection();\n  selection?.removeAllRanges();\n  selection?.addRange(newRange);\n};\n\n// Resolves to the nearest element, since a collapsed selection reports its text\n// node as the common ancestor.\nconst blockElementFor = (range: globalThis.Range): globalThis.Element | null => {\n  const node = range.commonAncestorContainer;\n\n  return node.nodeType === globalThis.Node.TEXT_NODE\n    ? node.parentElement\n    : (node as globalThis.Element);\n};\n\n// Unwraps the item back to plain text, keeping its content.\nconst removeFromList = (block: globalThis.Element) => {\n  const listItem = block.closest('li');\n  if (!listItem?.parentElement) return;\n\n  listItem.parentElement.replaceChild(\n    document.createTextNode(listItem.textContent || ''),\n    listItem,\n  );\n};\n\nconst wrapInList = (range: globalThis.Range, listType: 'ol' | 'ul') => {\n  const list = document.createElement(listType);\n  const listItem = document.createElement('li');\n\n  listItem.appendChild(document.createTextNode(range.toString() || 'List item'));\n  list.appendChild(listItem);\n\n  range.deleteContents();\n  range.insertNode(list);\n\n  // Move cursor inside list item\n  const newRange = document.createRange();\n  newRange.selectNodeContents(listItem);\n  newRange.collapse(false);\n\n  const selection = window.getSelection();\n  selection?.removeAllRanges();\n  selection?.addRange(newRange);\n};\n\nexport const toggleList = (\n  range: globalThis.Range,\n  listType: 'ol' | 'ul',\n  editor: HTMLElement | null,\n) => {\n  if (!editor) return;\n\n  const block = blockElementFor(range);\n  if (!block) return;\n\n  if (block.closest(listType)) {\n    removeFromList(block);\n    return;\n  }\n\n  wrapInList(range, listType);\n};\n","import {\n  insertImage,\n  toggleList,\n  wrapSelection,\n  wrapSelectionWithLink,\n} from './RichTextEditor.dom';\n\nconst WRAP_TAGS: Record<string, string> = {\n  bold: 'strong',\n  italic: 'em',\n  underline: 'u',\n  strikethrough: 's',\n};\n\nconst LIST_TAGS: Record<string, 'ol' | 'ul'> = {\n  insertOrderedList: 'ol',\n  insertUnorderedList: 'ul',\n};\n\n// formatBlock is the only format whose value names the tag, and only these two\n// are accepted.\nconst BLOCK_TAGS = new Set(['pre', 'blockquote']);\n\nexport const applyFormatToRange = ({\n  formatType,\n  value,\n  range,\n  editor,\n}: {\n  formatType: string;\n  value?: string;\n  range: globalThis.Range;\n  editor: HTMLElement | null;\n}) => {\n  const wrapTag = WRAP_TAGS[formatType];\n  if (wrapTag) {\n    wrapSelection(range, wrapTag);\n    return;\n  }\n\n  const listTag = LIST_TAGS[formatType];\n  if (listTag) {\n    toggleList(range, listTag, editor);\n    return;\n  }\n\n  if (formatType === 'createLink' && value) {\n    wrapSelectionWithLink(range, value);\n    return;\n  }\n\n  if (formatType === 'insertImage' && value) {\n    insertImage(range, value);\n    return;\n  }\n\n  if (formatType === 'formatBlock' && value && BLOCK_TAGS.has(value)) {\n    wrapSelection(range, value);\n  }\n};\n\n","import Code from '@mui/icons-material/Code';\nimport FormatBold from '@mui/icons-material/FormatBold';\nimport FormatItalic from '@mui/icons-material/FormatItalic';\nimport FormatListBulleted from '@mui/icons-material/FormatListBulleted';\nimport FormatListNumbered from '@mui/icons-material/FormatListNumbered';\nimport FormatQuote from '@mui/icons-material/FormatQuote';\nimport FormatStrikethrough from '@mui/icons-material/FormatStrikethrough';\nimport FormatUnderlined from '@mui/icons-material/FormatUnderlined';\nimport Image from '@mui/icons-material/Image';\nimport Link from '@mui/icons-material/Link';\nimport { alpha, Box, Divider, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';\nimport type { FC, ReactElement } from 'react';\nimport React from 'react';\n\nimport type { ToolbarConfig } from './RichTextEditor.types';\n\ntype ResolvedToolbar = Required<Omit<ToolbarConfig, 'customItems'>> &\n  Pick<ToolbarConfig, 'customItems'>;\n\n// The button groups, in render order. A separator is drawn between two groups\n// only when both actually have something switched on.\nconst GROUPS: Array<Array<{ key: keyof ResolvedToolbar; icon: ReactElement; tooltip: string; command: string; commandValue?: string }>> = [\n  [\n    { key: 'bold', icon: <FormatBold />, tooltip: 'Bold', command: 'bold' },\n    { key: 'italic', icon: <FormatItalic />, tooltip: 'Italic', command: 'italic' },\n    { key: 'underline', icon: <FormatUnderlined />, tooltip: 'Underline', command: 'underline' },\n    {\n      key: 'strikethrough',\n      icon: <FormatStrikethrough />,\n      tooltip: 'Strikethrough',\n      command: 'strikethrough',\n    },\n  ],\n  [\n    {\n      key: 'orderedList',\n      icon: <FormatListNumbered />,\n      tooltip: 'Numbered List',\n      command: 'insertOrderedList',\n    },\n    {\n      key: 'unorderedList',\n      icon: <FormatListBulleted />,\n      tooltip: 'Bulleted List',\n      command: 'insertUnorderedList',\n    },\n  ],\n  [\n    { key: 'link', icon: <Link />, tooltip: 'Insert Link', command: 'createLink' },\n    { key: 'image', icon: <Image />, tooltip: 'Insert Image', command: 'insertImage' },\n    {\n      key: 'codeBlock',\n      icon: <Code />,\n      tooltip: 'Code Block',\n      command: 'formatBlock',\n      commandValue: 'pre',\n    },\n    {\n      key: 'quote',\n      icon: <FormatQuote />,\n      tooltip: 'Quote',\n      command: 'formatBlock',\n      commandValue: 'blockquote',\n    },\n  ],\n];\n\n// Link and image need a target before they can run.\nconst PROMPTS: Record<string, { message: string; initial?: string }> = {\n  createLink: { message: 'Enter URL:', initial: 'https://' },\n  insertImage: { message: 'Enter image URL:' },\n};\n\nconst Separator: FC = () => <Divider orientation=\"vertical\" flexItem sx={{ mx: 0.5 }} />;\n\nexport interface RichTextEditorToolbarProps {\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  maxLength?: number;\n  characterCount: number;\n  editorRef: React.RefObject<HTMLDivElement | null>;\n  onFormat: (command: string, value?: string) => void;\n}\n\nconst ToolbarGroups: FC<{\n  config: ResolvedToolbar;\n  disabled: boolean;\n  readOnly: boolean;\n  onRun: (command: string, commandValue?: string) => void;\n}> = ({ config, disabled, readOnly, onRun }) => {\n  const groupIsActive = (group: (typeof GROUPS)[number]) => group.some((item) => config[item.key]);\n\n  return (\n    <>\n      {GROUPS.map((group, groupIndex) => (\n        <React.Fragment key={group[0]?.key ?? groupIndex}>\n          {groupIsActive(group) && GROUPS.slice(0, groupIndex).some(groupIsActive) && <Separator />}\n          {group\n            .filter((item) => config[item.key])\n            .map((item) => (\n              <Tooltip key={item.key} title={item.tooltip}>\n                <IconButton\n                  size=\"small\"\n                  onClick={() => onRun(item.command, item.commandValue)}\n                  disabled={disabled || readOnly}\n                  aria-label={item.tooltip}\n                  data-testid={`toolbar-${item.key}`}\n                >\n                  {item.icon}\n                </IconButton>\n              </Tooltip>\n            ))}\n        </React.Fragment>\n      ))}\n    </>\n  );\n};\n\nexport const RichTextEditorToolbar: FC<RichTextEditorToolbarProps> = ({\n  config,\n  disabled,\n  readOnly,\n  maxLength,\n  characterCount,\n  editorRef,\n  onFormat,\n}) => {\n  const run = (command: string, commandValue?: string) => {\n    const prompt = PROMPTS[command];\n    if (!prompt) {\n      onFormat(command, commandValue);\n      return;\n    }\n\n    const answer = window.prompt(prompt.message, prompt.initial);\n    if (answer) onFormat(command, answer);\n  };\n\n  return (\n    <Toolbar\n      variant=\"dense\"\n      data-testid=\"editor-toolbar\"\n      sx={{\n        minHeight: 48,\n        px: 1,\n        borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n        backgroundColor: (theme) => alpha(theme.palette.background.paper, 0.8),\n      }}\n    >\n      <ToolbarGroups config={config} disabled={disabled} readOnly={readOnly} onRun={run} />\n\n      {config.customItems && config.customItems.length > 0 && (\n        <>\n          <Separator />\n          {config.customItems.map((item) => (\n            <Tooltip key={item.id} title={item.label}>\n              <IconButton\n                size=\"small\"\n                onClick={() => item.action(editorRef.current)}\n                disabled={item.disabled || disabled || readOnly}\n                aria-label={item.label}\n                data-testid={`toolbar-custom-${item.id}`}\n              >\n                {item.icon}\n              </IconButton>\n            </Tooltip>\n          ))}\n        </>\n      )}\n\n      <Box sx={{ flexGrow: 1 }} />\n\n      {maxLength && (\n        <Typography\n          variant=\"caption\"\n          // Turns red in the last fifth of the allowance.\n          color={characterCount > maxLength * 0.8 ? 'error' : 'text.secondary'}\n          sx={{ mr: 1 }}\n          data-testid=\"editor-counter\"\n        >\n          {characterCount}/{maxLength}\n        </Typography>\n      )}\n    </Toolbar>\n  );\n};\n"],"mappings":";;;AAAA;AAAA,EACE,SAAAA;AAAA,EACA,OAAAC;AAAA,EACA;AAAA,EACA;AAAA,OAAgB;AAClB,SAAgB,kBAAkB;;;ACLlC,OAAO,eAAe;AAEtB,SAAS,aAAa,WAAW,QAAQ,gBAAgB;;;ACElD,IAAM,gBAAgB,CAAC,OAAyB,YAAoB;AACzE,QAAM,eAAe,MAAM,SAAS;AACpC,MAAI,CAAC,aAAc;AAEnB,QAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,UAAQ,YAAY,SAAS,eAAe,YAAY,CAAC;AAEzD,QAAM,eAAe;AACrB,QAAM,WAAW,OAAO;AAGxB,QAAM,WAAW,SAAS,YAAY;AACtC,WAAS,cAAc,OAAO;AAC9B,WAAS,SAAS,IAAI;AAEtB,QAAM,YAAY,OAAO,aAAa;AACtC,aAAW,gBAAgB;AAC3B,aAAW,SAAS,QAAQ;AAC9B;AAEO,IAAM,wBAAwB,CAAC,OAAyB,QAAgB;AAC7E,QAAM,eAAe,MAAM,SAAS;AACpC,MAAI,CAAC,aAAc;AAEnB,QAAM,OAAO,SAAS,cAAc,GAAG;AACvC,OAAK,OAAO,IAAI,WAAW,MAAM,IAAI,MAAM,WAAW,GAAG;AACzD,OAAK,SAAS;AACd,OAAK,MAAM;AACX,OAAK,YAAY,SAAS,eAAe,YAAY,CAAC;AAEtD,QAAM,eAAe;AACrB,QAAM,WAAW,IAAI;AAGrB,QAAM,WAAW,SAAS,YAAY;AACtC,WAAS,cAAc,IAAI;AAC3B,WAAS,SAAS,IAAI;AAEtB,QAAM,YAAY,OAAO,aAAa;AACtC,aAAW,gBAAgB;AAC3B,aAAW,SAAS,QAAQ;AAC9B;AAEO,IAAM,cAAc,CAAC,OAAyB,QAAgB;AACnE,QAAM,MAAM,SAAS,cAAc,KAAK;AACxC,MAAI,MAAM;AACV,MAAI,MAAM,WAAW;AACrB,MAAI,MAAM,SAAS;AAEnB,QAAM,eAAe;AACrB,QAAM,WAAW,GAAG;AAGpB,QAAM,WAAW,SAAS,YAAY;AACtC,WAAS,cAAc,GAAG;AAC1B,WAAS,SAAS,IAAI;AAEtB,QAAM,YAAY,OAAO,aAAa;AACtC,aAAW,gBAAgB;AAC3B,aAAW,SAAS,QAAQ;AAC9B;AAIA,IAAM,kBAAkB,CAAC,UAAuD;AAC9E,QAAM,OAAO,MAAM;AAEnB,SAAO,KAAK,aAAa,WAAW,KAAK,YACrC,KAAK,gBACJ;AACP;AAGA,IAAM,iBAAiB,CAAC,UAA8B;AACpD,QAAM,WAAW,MAAM,QAAQ,IAAI;AACnC,MAAI,CAAC,UAAU,cAAe;AAE9B,WAAS,cAAc;AAAA,IACrB,SAAS,eAAe,SAAS,eAAe,EAAE;AAAA,IAClD;AAAA,EACF;AACF;AAEA,IAAM,aAAa,CAAC,OAAyB,aAA0B;AACrE,QAAM,OAAO,SAAS,cAAc,QAAQ;AAC5C,QAAM,WAAW,SAAS,cAAc,IAAI;AAE5C,WAAS,YAAY,SAAS,eAAe,MAAM,SAAS,KAAK,WAAW,CAAC;AAC7E,OAAK,YAAY,QAAQ;AAEzB,QAAM,eAAe;AACrB,QAAM,WAAW,IAAI;AAGrB,QAAM,WAAW,SAAS,YAAY;AACtC,WAAS,mBAAmB,QAAQ;AACpC,WAAS,SAAS,KAAK;AAEvB,QAAM,YAAY,OAAO,aAAa;AACtC,aAAW,gBAAgB;AAC3B,aAAW,SAAS,QAAQ;AAC9B;AAEO,IAAM,aAAa,CACxB,OACA,UACA,WACG;AACH,MAAI,CAAC,OAAQ;AAEb,QAAM,QAAQ,gBAAgB,KAAK;AACnC,MAAI,CAAC,MAAO;AAEZ,MAAI,MAAM,QAAQ,QAAQ,GAAG;AAC3B,mBAAe,KAAK;AACpB;AAAA,EACF;AAEA,aAAW,OAAO,QAAQ;AAC5B;;;ACpHA,IAAM,YAAoC;AAAA,EACxC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,eAAe;AACjB;AAEA,IAAM,YAAyC;AAAA,EAC7C,mBAAmB;AAAA,EACnB,qBAAqB;AACvB;AAIA,IAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,YAAY,CAAC;AAEzC,IAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,QAAM,UAAU,UAAU,UAAU;AACpC,MAAI,SAAS;AACX,kBAAc,OAAO,OAAO;AAC5B;AAAA,EACF;AAEA,QAAM,UAAU,UAAU,UAAU;AACpC,MAAI,SAAS;AACX,eAAW,OAAO,SAAS,MAAM;AACjC;AAAA,EACF;AAEA,MAAI,eAAe,gBAAgB,OAAO;AACxC,0BAAsB,OAAO,KAAK;AAClC;AAAA,EACF;AAEA,MAAI,eAAe,iBAAiB,OAAO;AACzC,gBAAY,OAAO,KAAK;AACxB;AAAA,EACF;AAEA,MAAI,eAAe,iBAAiB,SAAS,WAAW,IAAI,KAAK,GAAG;AAClE,kBAAc,OAAO,KAAK;AAAA,EAC5B;AACF;;;AFnDA,IAAM,kBAAkB;AAAA,EACtB,cAAc;AAAA,IACZ;AAAA,IAAK;AAAA,IAAM;AAAA,IAAU;AAAA,IAAM;AAAA,IAAK;AAAA,IAAK;AAAA,IAAK;AAAA,IAAO;AAAA,IAAM;AAAA,IAAM;AAAA,IAC7D;AAAA,IAAc;AAAA,IAAO;AAAA,IAAQ;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAM;AAAA,IAAQ;AAAA,EAC3E;AAAA,EACA,cAAc,CAAC,QAAQ,OAAO,OAAO,UAAU,OAAO,SAAS,OAAO;AAAA,EACtE,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEA,IAAM,eAAe,CAAC,SAAyB;AAC7C,QAAM,QAAQ,SAAS,cAAc,KAAK;AAC1C,QAAM,YAAY;AAClB,SAAO,MAAM,aAAa,UAAU;AACtC;AAGA,IAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAKM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,SAAS,EAAE;AAElD,QAAM,sBAAsB,YAAY,MAAM;AAC5C,QAAI,CAAC,UAAU,QAAS;AAExB,UAAM,aAAa,UAAU,QAAQ;AAIrC,QAAI,cAAc,UAAU,QAAQ,eAAe,IAAI,SAAS,WAAW;AACzE,gBAAU,QAAQ,YAAY;AAC9B;AAAA,IACF;AAEA,eAAW,UAAU;AACrB,eAAW,UAAU;AAAA,EACvB,GAAG,CAAC,WAAW,UAAU,SAAS,SAAS,CAAC;AAE5C,SAAO,EAAE,SAAS,oBAAoB;AACxC;AAEA,IAAM,gBAAgB,CAAC,EAAE,SAAS,OAAO,MAAqD;AAC5F,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,QAAM,cAAc,YAAY,MAAM;AACpC,iBAAa,IAAI;AACjB,cAAU;AAAA,EACZ,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,aAAa,YAAY,MAAM;AACnC,iBAAa,KAAK;AAClB,aAAS;AAAA,EACX,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO,EAAE,WAAW,aAAa,WAAW;AAC9C;AAEO,IAAM,oBAAoB,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAQM;AACJ,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,EAAE,SAAS,oBAAoB,IAAI,iBAAiB;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,EAAE,WAAW,aAAa,WAAW,IAAI,cAAc,EAAE,SAAS,OAAO,CAAC;AAEhF,QAAM,cAAc;AAAA,IAClB,CAAC,YAAoB,gBAAyB;AAC5C,UAAI,YAAY,YAAY,CAAC,UAAU,QAAS;AAEhD,YAAM,YAAY,OAAO,aAAa;AAEtC,UAAI,CAAC,aAAa,UAAU,eAAe,GAAG;AAC5C,kBAAU,QAAQ,MAAM;AACxB;AAAA,MACF;AAEA,yBAAmB;AAAA,QACjB;AAAA,QACA,OAAO;AAAA,QACP,OAAO,UAAU,WAAW,CAAC;AAAA,QAC7B,QAAQ,UAAU;AAAA,MACpB,CAAC;AAED,0BAAoB;AACpB,gBAAU,QAAQ,MAAM;AAAA,IAC1B;AAAA,IACA,CAAC,UAAU,UAAU,mBAAmB;AAAA,EAC1C;AAEA,QAAM,mBAAmB,UAAU,SAAS,SAAS,eAAe;AAGpE,YAAU,MAAM;AACd,QAAI,UAAU,WAAW,UAAU,QAAQ,cAAc,kBAAkB;AACzE,gBAAU,QAAQ,YAAY;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,gBAAgB,CAAC;AAErB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,gBAAgB,aAAa,gBAAgB;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;;;AG7IA,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,OAAO,kBAAkB;AACzB,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,iBAAiB;AACxB,OAAO,yBAAyB;AAChC,OAAO,sBAAsB;AAC7B,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,OAAO,KAAK,SAAS,YAAY,SAAS,SAAS,kBAAkB;AAE9E,OAAO,WAAW;AAWO,SAuErB,UAvEqB,KAyEjB,YAzEiB;AAFzB,IAAM,SAAoI;AAAA,EACxI;AAAA,IACE,EAAE,KAAK,QAAQ,MAAM,oBAAC,cAAW,GAAI,SAAS,QAAQ,SAAS,OAAO;AAAA,IACtE,EAAE,KAAK,UAAU,MAAM,oBAAC,gBAAa,GAAI,SAAS,UAAU,SAAS,SAAS;AAAA,IAC9E,EAAE,KAAK,aAAa,MAAM,oBAAC,oBAAiB,GAAI,SAAS,aAAa,SAAS,YAAY;AAAA,IAC3F;AAAA,MACE,KAAK;AAAA,MACL,MAAM,oBAAC,uBAAoB;AAAA,MAC3B,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA;AAAA,IACE;AAAA,MACE,KAAK;AAAA,MACL,MAAM,oBAAC,sBAAmB;AAAA,MAC1B,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,oBAAC,sBAAmB;AAAA,MAC1B,SAAS;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA;AAAA,IACE,EAAE,KAAK,QAAQ,MAAM,oBAAC,QAAK,GAAI,SAAS,eAAe,SAAS,aAAa;AAAA,IAC7E,EAAE,KAAK,SAAS,MAAM,oBAAC,SAAM,GAAI,SAAS,gBAAgB,SAAS,cAAc;AAAA,IACjF;AAAA,MACE,KAAK;AAAA,MACL,MAAM,oBAAC,QAAK;AAAA,MACZ,SAAS;AAAA,MACT,SAAS;AAAA,MACT,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,oBAAC,eAAY;AAAA,MACnB,SAAS;AAAA,MACT,SAAS;AAAA,MACT,cAAc;AAAA,IAChB;AAAA,EACF;AACF;AAGA,IAAM,UAAiE;AAAA,EACrE,YAAY,EAAE,SAAS,cAAc,SAAS,WAAW;AAAA,EACzD,aAAa,EAAE,SAAS,mBAAmB;AAC7C;AAEA,IAAM,YAAgB,MAAM,oBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC,IAAI,EAAE,IAAI,IAAI,GAAG;AAYtF,IAAM,gBAKD,CAAC,EAAE,QAAQ,UAAU,UAAU,MAAM,MAAM;AAC9C,QAAM,gBAAgB,CAAC,UAAmC,MAAM,KAAK,CAAC,SAAS,OAAO,KAAK,GAAG,CAAC;AAE/F,SACE,gCACG,iBAAO,IAAI,CAAC,OAAO,eAClB,qBAAC,MAAM,UAAN,EACE;AAAA,kBAAc,KAAK,KAAK,OAAO,MAAM,GAAG,UAAU,EAAE,KAAK,aAAa,KAAK,oBAAC,aAAU;AAAA,IACtF,MACE,OAAO,CAAC,SAAS,OAAO,KAAK,GAAG,CAAC,EACjC,IAAI,CAAC,SACJ,oBAAC,WAAuB,OAAO,KAAK,SAClC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,MAAM,MAAM,KAAK,SAAS,KAAK,YAAY;AAAA,QACpD,UAAU,YAAY;AAAA,QACtB,cAAY,KAAK;AAAA,QACjB,eAAa,WAAW,KAAK,GAAG;AAAA,QAE/B,eAAK;AAAA;AAAA,IACR,KATY,KAAK,GAUnB,CACD;AAAA,OAhBgB,MAAM,CAAC,GAAG,OAAO,UAiBtC,CACD,GACH;AAEJ;AAEO,IAAM,wBAAwD,CAAC;AAAA,EACpE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,MAAM,CAAC,SAAiB,iBAA0B;AACtD,UAAM,SAAS,QAAQ,OAAO;AAC9B,QAAI,CAAC,QAAQ;AACX,eAAS,SAAS,YAAY;AAC9B;AAAA,IACF;AAEA,UAAM,SAAS,OAAO,OAAO,OAAO,SAAS,OAAO,OAAO;AAC3D,QAAI,OAAQ,UAAS,SAAS,MAAM;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,eAAY;AAAA,MACZ,IAAI;AAAA,QACF,WAAW;AAAA,QACX,IAAI;AAAA,QACJ,cAAc,CAAC,UAAU,aAAa,MAAM,QAAQ,OAAO;AAAA,QAC3D,iBAAiB,CAAC,UAAU,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MACvE;AAAA,MAEA;AAAA,4BAAC,iBAAc,QAAgB,UAAoB,UAAoB,OAAO,KAAK;AAAA,QAElF,OAAO,eAAe,OAAO,YAAY,SAAS,KACjD,iCACE;AAAA,8BAAC,aAAU;AAAA,UACV,OAAO,YAAY,IAAI,CAAC,SACvB,oBAAC,WAAsB,OAAO,KAAK,OACjC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAM,KAAK,OAAO,UAAU,OAAO;AAAA,cAC5C,UAAU,KAAK,YAAY,YAAY;AAAA,cACvC,cAAY,KAAK;AAAA,cACjB,eAAa,kBAAkB,KAAK,EAAE;AAAA,cAErC,eAAK;AAAA;AAAA,UACR,KATY,KAAK,EAUnB,CACD;AAAA,WACH;AAAA,QAGF,oBAAC,OAAI,IAAI,EAAE,UAAU,EAAE,GAAG;AAAA,QAEzB,aACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YAER,OAAO,iBAAiB,YAAY,MAAM,UAAU;AAAA,YACpD,IAAI,EAAE,IAAI,EAAE;AAAA,YACZ,eAAY;AAAA,YAEX;AAAA;AAAA,cAAe;AAAA,cAAE;AAAA;AAAA;AAAA,QACpB;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AJvEM,SAQE,OAAAC,MARF,QAAAC,aAAA;AAvGN,IAAM,kBAAqG;AAAA,EACzG,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,eAAe;AAAA,EACf,aAAa;AAAA,EACb,eAAe;AAAA,EACf,MAAM;AAAA,EACN,OAAO;AAAA,EACP,WAAW;AAAA,EACX,OAAO;AAAA,EACP,aAAa,CAAC;AAAE;AAElB,IAAM,qBAAmD;AAAA,EACvD,OAAO;AAAA,EACP,aAAa;AAAA,EACb,UAAU;AAAA,EACV,UAAU;AAAA,EACV,SAAS,CAAC;AAAA,EACV,QAAQ;AAAI;AAId,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,MAAM,MAAS;AACzD;AAIF,IAAM,kBAAkB,CAAC,OAAc,UAAmB,aAAsB,YAA8B;AAAA,EAC5G,WAAW,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAAA,EACxD,GAAG;AAAA,EACH,SAAS;AAAA,EACT,QAAQ,WAAW,gBAAgB;AAAA,EACnC,mBAAmB;AAAA,IACjB,SAAS,IAAI,WAAW;AAAA,IACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,eAAe;AAAA,EAAO;AAAA,EACxB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,mBAAmB,EAAE,WAAW,EAAE;AAAA,IAClC,kBAAkB,EAAE,cAAc,EAAE;AAAA,EAAE;AAAA,EACxC,cAAc,EAAE,YAAY,MAAM,QAAQ,CAAC,EAAE;AAAA,EAC7C,gBAAgB;AAAA,IACd,YAAY,aAAa,MAAM,QAAQ,QAAQ,IAAI;AAAA,IACnD,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,QAAQ,GAAG,MAAM,QAAQ,CAAC,CAAC;AAAA,IAC3B,WAAW;AAAA,IACX,iBAAiBC,OAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,EAAE;AAAA,EAC3D,SAAS;AAAA,IACP,iBAAiBA,OAAM,MAAM,QAAQ,KAAK,SAAS,IAAI;AAAA,IACvD,SAAS,MAAM,QAAQ,CAAC;AAAA,IACxB,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,EAAO;AAAA,EACnB,OAAO,EAAE,OAAO,MAAM,QAAQ,QAAQ,MAAM,gBAAgB,YAAY;AAAE;AAE5E,IAAM,UAAU,CAAC,OAAc,WAAoB,cAAuB;AAAA,EACxE,QAAQ,aAAaA,OAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AAAA,EACvD,cAAc;AAAA,EACd,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,GAAI,aAAa;AAAA,IACf,aAAa,MAAM,QAAQ,QAAQ;AAAA,IACnC,WAAW,aAAaA,OAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,CAAC;AAAA,EAAG;AAAA,EACnE,GAAI,YAAY;AAAA,IACd,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IACtC,OAAO,MAAM,QAAQ,KAAK;AAAA,EAAS;AAAG;AAEnC,IAAM,iBAAiB;AAAA,EAC5B,CAAC,aAAa,QAAQ;AACpB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,cAAc;AAAA,MACd,oBAAoB;AAAA,MACpB,GAAG;AAAA,IACL,IAAI,EAAE,GAAG,oBAAoB,GAAG,aAAa,WAAW,EAAE;AAE1D,UAAM,QAAQ,SAAS;AACvB,UAAM,gBAAgB,EAAE,GAAG,iBAAiB,GAAG,QAAQ;AACvD,UAAM,SAAS,kBAAkB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAU,CAAC;AAEb,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,eAAa,UAAU;AAAA,QACvB,WAAW;AAAA,QACX,IAAI,QAAQ,OAAO,OAAO,WAAW,QAAQ,QAAQ,CAAC;AAAA,QACrD,GAAG;AAAA,QAEJ;AAAA,0BAAAD;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ;AAAA,cACR,UAAU,QAAQ,QAAQ;AAAA,cAC1B,UAAU,QAAQ,QAAQ;AAAA,cAC1B;AAAA,cACA,gBAAgB,OAAO;AAAA,cACvB,WAAW,OAAO;AAAA,cAClB,UAAU,OAAO;AAAA;AAAA,UACnB;AAAA,UAEA,gBAAAA;AAAA,YAACG;AAAA,YAAA;AAAA,cACC,KAAK,OAAO;AAAA,cACZ,iBAAiB,CAAC,YAAY,CAAC;AAAA,cAC/B,SAAS,OAAO;AAAA,cAChB,SAAS,OAAO;AAAA,cAChB,QAAQ,OAAO;AAAA,cACf,MAAK;AAAA,cACL,cAAY,aAAa;AAAA,cACzB,oBAAkB;AAAA,cAClB,kBAAe;AAAA,cACf,UAAU,WAAW,KAAK;AAAA,cAC1B,eAAY;AAAA,cACZ,gCAA8B;AAAA,cAC9B,IAAI,gBAAgB,OAAO,QAAQ,QAAQ,GAAG,aAAa,MAAM;AAAA;AAAA,UACnE;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;","names":["alpha","Box","jsx","jsxs","alpha","Box"]}