@persona/design-system 0.10.6 → 0.10.8

package/dist/FloatingToolbar-Df90f7Dm.mjs

@@ -0,0 +1,493 @@
+import { a as styled } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+import "./variables/transitions.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { n as Stack } from "./Stack-Bzom2BTR.mjs";
+import { t as IconButton } from "./IconButton-DftINsp7.mjs";
+import Input_default from "./components/Input/index.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-Q8S-9rXm.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BoldIcon, CheckIcon, GridIcon, ItalicIcon, LinkIcon, ListIcon, UnlinkIcon, XIcon } from "@persona/icons";
+import { AnimatePresence, motion } from "framer-motion";
+import { PluginKey } from "@tiptap/pm/state";
+import { useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+//#region src/components/FloatingToolbar/FloatingToolbar.tsx
+const BubbleMenuBar = styled(Stack)`
+  padding: ${Spacing[1]} ${Spacing[2]};
+  background-color: ${Color.CoreSlate1100};
+  border-radius: ${BorderRadius.Lg};
+`;
+const IconContainer = styled(motion.div)`
+  display: flex;
+  gap: ${Spacing[1]};
+`;
+const InverseIconButton = styled(IconButton)`
+  background-color: ${({ $selected }) => $selected ? Color.CoreSlate900 : "transparent"};
+  color: ${Color.PrimaryWhite};
+  transition: background-color ${"100ms"} ease-out;
+
+  &:hover:not(:disabled) {
+    background-color: ${Color.CoreSlate800};
+  }
+
+  &:disabled {
+    background-color: transparent;
+    opacity: 0.35;
+  }
+`;
+const InverseInput = styled(Input_default)`
+  background-color: ${Color.CoreSlate900};
+  color: ${Color.PrimaryWhite};
+
+  :focus-within {
+    border-color: ${Color.CoreBlue700};
+  }
+  ::placeholder {
+    color: ${Color.TextDisabled};
+  }
+
+  input {
+    background-color: ${Color.CoreSlate900};
+    color: ${Color.PrimaryWhite};
+  }
+`;
+const StyledDropdownItem = styled(DropdownMenu_default.Item)`
+  width: 100%;
+  height: 30px;
+  font-size: small;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+const TOOLBAR_GAP = parseInt(Spacing[1]);
+const FIELD_OFFSET = {
+	mainAxis: TOOLBAR_GAP,
+	crossAxis: 0
+};
+const SELECTION_OFFSET = {
+	mainAxis: TOOLBAR_GAP,
+	crossAxis: -parseInt(Spacing[2])
+};
+const getFieldElement = (editor) => editor.options.element instanceof Element ? editor.options.element : editor.view.dom;
+const SAFE_LINK_SCHEME = /^(https?|mailto|tel):/i;
+const URI_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;
+const ensureProtocol = (url) => {
+	const trimmedUrl = url.trim();
+	if (!trimmedUrl) return "";
+	if (trimmedUrl.includes("{{")) {
+		const beforePlaceholder = trimmedUrl.slice(0, trimmedUrl.indexOf("{{")).replace(/[\u0000-\u0020]/g, "");
+		if (!URI_SCHEME.test(beforePlaceholder) || SAFE_LINK_SCHEME.test(beforePlaceholder)) return trimmedUrl;
+		return "";
+	}
+	const candidate = SAFE_LINK_SCHEME.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;
+	return URL.canParse(candidate) ? candidate : "";
+};
+/**
+* Floating bubble toolbar that appears on text selection or inside a table, or —
+* with `showOnFocus` — for as long as the editor is focused.
+* Keyboard shortcut: Cmd/Ctrl+Shift+U opens the link-edit row.
+*/
+function FloatingToolbar({ editor, showOnFocus = false }) {
+	const [linkURL, setLinkURL] = useState("");
+	const [editingLink, setEditingLink] = useState(false);
+	const linkInputRef = useRef(null);
+	const toolbarRef = useRef(null);
+	const savedSelection = useRef(null);
+	const editingLinkRef = useRef(editingLink);
+	const blurTimeout = useRef();
+	const [pluginKey] = useState(() => new PluginKey("floatingToolbar"));
+	useEffect(() => () => clearTimeout(blurTimeout.current), []);
+	useEffect(() => {
+		editingLinkRef.current = editingLink;
+	}, [editingLink]);
+	const restoreSelection = useCallback(() => {
+		if (editor && savedSelection.current) {
+			const { from, to } = savedSelection.current;
+			editor.chain().focus().setTextSelection({
+				from,
+				to
+			}).run();
+		}
+	}, [editor]);
+	const openLinkEditingMode = useCallback(() => {
+		if (!editor) return;
+		if (!editor.can().chain().toggleLink({ href: "https://www.google.com" }).run()) return;
+		const { from, to } = editor.state.selection;
+		savedSelection.current = {
+			from,
+			to
+		};
+		const linkAttr = editor.getAttributes("link");
+		if (linkAttr.href) setLinkURL(linkAttr.href);
+		editor.chain().focus().setTextSelection({
+			from,
+			to
+		}).run();
+		setEditingLink(true);
+		setTimeout(() => {
+			linkInputRef.current?.focus();
+		}, 250);
+	}, [editor]);
+	useEffect(() => {
+		if (!editor) return;
+		const dom = editor.view.dom;
+		const handler = (event) => {
+			if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "u") {
+				event.preventDefault();
+				openLinkEditingMode();
+				return;
+			}
+			if (event.key === "Escape" && editingLinkRef.current) {
+				event.preventDefault();
+				setEditingLink(false);
+				setLinkURL("");
+				savedSelection.current = null;
+			}
+		};
+		dom.addEventListener("keydown", handler);
+		return () => {
+			dom.removeEventListener("keydown", handler);
+		};
+	}, [editor, openLinkEditingMode]);
+	useEffect(() => {
+		if (!editingLink || !editor || !savedSelection.current) return;
+		restoreSelection();
+		const timeoutId = setTimeout(() => {
+			restoreSelection();
+			editor.view.dom?.focus();
+		}, 0);
+		return () => clearTimeout(timeoutId);
+	}, [
+		editingLink,
+		restoreSelection,
+		editor
+	]);
+	const isFocusWithinToolbar = useCallback(() => !!toolbarRef.current?.contains(document.activeElement), []);
+	const bubbleMenuOptions = useMemo(() => ({
+		placement: "top-start",
+		offset: showOnFocus ? FIELD_OFFSET : SELECTION_OFFSET
+	}), [showOnFocus]);
+	const getReferencedVirtualElement = useMemo(() => showOnFocus && editor ? () => ({ getBoundingClientRect: () => getFieldElement(editor).getBoundingClientRect() }) : void 0, [editor, showOnFocus]);
+	const shouldShow = useCallback(({ editor: e, view, from, to }) => {
+		if (!e.isEditable) return false;
+		if (e.isActive("mention")) return false;
+		if (e.isActive("table")) return true;
+		if (from !== to) return true;
+		return showOnFocus && (view.hasFocus() || isFocusWithinToolbar());
+	}, [isFocusWithinToolbar, showOnFocus]);
+	const editorState = useEditorState({
+		editor,
+		selector: (snapshot) => snapshot.editor && {
+			isBold: snapshot.editor.isActive("bold"),
+			canBold: snapshot.editor.can().chain().toggleBold().run(),
+			isItalic: snapshot.editor.isActive("italic"),
+			canItalic: snapshot.editor.can().chain().toggleItalic().run(),
+			isLink: snapshot.editor.isActive("link"),
+			isBulletList: snapshot.editor.isActive("bulletList"),
+			canLink: snapshot.editor.can().chain().toggleLink({ href: "https://www.google.com" }).run(),
+			isTable: snapshot.editor.isActive("table"),
+			canInsertTable: snapshot.editor.can().chain().insertTable({
+				rows: 3,
+				cols: 3,
+				withHeaderRow: true
+			}).run()
+		}
+	});
+	if (!editor || !editorState) return null;
+	const handleToolbarBlur = () => {
+		blurTimeout.current = setTimeout(() => {
+			if (editor.isDestroyed || isFocusWithinToolbar() || editor.view.hasFocus()) return;
+			editor.view.dispatch(editor.state.tr.setMeta(pluginKey, "hide"));
+		});
+	};
+	return /* @__PURE__ */ jsx(BubbleMenu, {
+		editor,
+		pluginKey,
+		options: bubbleMenuOptions,
+		getReferencedVirtualElement,
+		shouldShow,
+		style: { zIndex: Z_INDICES.modalElevated },
+		children: /* @__PURE__ */ jsx(AnimatePresence, { children: /* @__PURE__ */ jsx(BubbleMenuBar, {
+			ref: toolbarRef,
+			role: "toolbar",
+			"aria-label": "Text formatting",
+			direction: "horizontal",
+			spacing: Spacing[1],
+			onBlur: handleToolbarBlur,
+			children: !editingLink ? /* @__PURE__ */ jsxs(IconContainer, {
+				layout: true,
+				initial: {
+					x: -10,
+					opacity: 0
+				},
+				animate: {
+					x: 0,
+					opacity: 1
+				},
+				exit: {
+					x: -10,
+					opacity: 0
+				},
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				},
+				children: [
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleBulletList().run(),
+						$selected: editorState.isBulletList,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle bullet list",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(ListIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleBold().run(),
+						disabled: !editorState.canBold,
+						$selected: editorState.isBold,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle bold",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(BoldIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().toggleItalic().run(),
+						$selected: editorState.isItalic,
+						disabled: !editorState.canItalic,
+						type: "button",
+						size: "sm",
+						"aria-label": "Toggle italic",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(ItalicIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							openLinkEditingMode();
+						},
+						$selected: editorState.isLink,
+						disabled: !editorState.canLink,
+						size: "sm",
+						type: "button",
+						"aria-label": "Toggle link",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(LinkIcon, {})
+					}),
+					editorState.isTable ? /* @__PURE__ */ jsxs(DropdownMenu_default, {
+						contentProps: {
+							"data-rte-menu-bar-item": "table-actions-dropdown-menu",
+							onCloseAutoFocus: (event) => {
+								event.preventDefault();
+								editor.commands.focus();
+							}
+						},
+						trigger: /* @__PURE__ */ jsx(InverseIconButton, {
+							size: "sm",
+							type: "button",
+							"aria-label": "Table actions",
+							"data-rte-menu-bar-item": true,
+							$selected: true,
+							children: /* @__PURE__ */ jsx(GridIcon, {})
+						}),
+						children: [
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableAddRowAfter",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-row-after",
+								onClick: () => editor.chain().focus().addRowAfter().run(),
+								children: "Add row below"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableAddRowBefore",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-row-before",
+								onClick: () => editor.chain().focus().addRowBefore().run(),
+								children: "Add row above"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableAddColumnAfter",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-column-after",
+								onClick: () => editor.chain().focus().addColumnAfter().run(),
+								children: "Add column right"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableAddColumnBefore",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-add-column-before",
+								onClick: () => editor.chain().focus().addColumnBefore().run(),
+								children: "Add column left"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableDeleteRow",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete-row",
+								onClick: () => editor.chain().focus().deleteRow().run(),
+								children: "Delete row"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableDeleteColumn",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete-column",
+								onClick: () => editor.chain().focus().deleteColumn().run(),
+								children: "Delete column"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableToggleHeaderRow",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-toggle-header-row",
+								onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+								children: "Toggle header row"
+							}),
+							/* @__PURE__ */ jsx(StyledDropdownItem, {
+								id: "floating-toolbar__tableDelete",
+								variant: "basic",
+								"data-rte-menu-bar-item": "table-delete",
+								onClick: () => editor.chain().focus().deleteTable().run(),
+								children: "Delete table"
+							})
+						]
+					}) : /* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: () => editor.chain().focus().insertTable({
+							rows: 3,
+							cols: 3,
+							withHeaderRow: true
+						}).run(),
+						disabled: !editorState.canInsertTable,
+						size: "sm",
+						type: "button",
+						"aria-label": "Insert table",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(GridIcon, {})
+					})
+				]
+			}, "main-toolbar") : /* @__PURE__ */ jsxs(IconContainer, {
+				initial: {
+					x: -10,
+					opacity: 0
+				},
+				animate: {
+					x: 0,
+					opacity: 1
+				},
+				exit: {
+					x: -10,
+					opacity: 0
+				},
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				},
+				"aria-label": "Link toolbar",
+				onAnimationComplete: () => {
+					if (editor && savedSelection.current) setTimeout(() => {
+						restoreSelection();
+						linkInputRef.current?.focus();
+					}, 10);
+				},
+				children: [
+					/* @__PURE__ */ jsx(InverseInput, {
+						ref: linkInputRef,
+						size: "sm",
+						value: linkURL,
+						onChange: (e) => setLinkURL(e.target.value),
+						placeholder: "Click to enter URL...",
+						"aria-label": "Link input",
+						"data-rte-menu-bar-item": true,
+						onClick: () => {
+							linkInputRef.current?.focus();
+						},
+						onFocus: () => {
+							if (savedSelection.current && editor) {
+								const { from, to } = savedSelection.current;
+								editor.chain().setTextSelection({
+									from,
+									to
+								}).run();
+							}
+						},
+						onKeyDown: (e) => {
+							if (e.key === "Enter" && linkURL.trim() && editor && savedSelection.current) {
+								e.preventDefault();
+								e.stopPropagation();
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).setLink({ href: ensureProtocol(linkURL) }).run();
+								savedSelection.current = null;
+								setEditingLink(false);
+								setLinkURL("");
+								return;
+							}
+							if (e.key === "Escape") {
+								e.preventDefault();
+								e.stopPropagation();
+								setEditingLink(false);
+								setLinkURL("");
+								savedSelection.current = null;
+								const { from, to } = editor.state.selection;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).run();
+							}
+						}
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (linkURL) editor.chain().focus().unsetLink().run();
+							restoreSelection();
+							setLinkURL("");
+							savedSelection.current = null;
+							setEditingLink(false);
+						},
+						size: "sm",
+						type: "button",
+						"aria-label": "Cancel link",
+						"data-rte-menu-bar-item": true,
+						children: linkURL && editorState.isLink ? /* @__PURE__ */ jsx(UnlinkIcon, {}) : /* @__PURE__ */ jsx(XIcon, {})
+					}),
+					/* @__PURE__ */ jsx(InverseIconButton, {
+						onClick: (e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							if (linkURL.trim() && editor && savedSelection.current) {
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).setLink({ href: ensureProtocol(linkURL) }).run();
+							} else if (editor && savedSelection.current) {
+								const { from, to } = savedSelection.current;
+								editor.chain().focus().setTextSelection({
+									from,
+									to
+								}).unsetLink().run();
+							}
+							savedSelection.current = null;
+							setEditingLink(false);
+							setLinkURL("");
+						},
+						size: "sm",
+						type: "button",
+						"aria-label": "Apply link",
+						"data-rte-menu-bar-item": true,
+						children: /* @__PURE__ */ jsx(CheckIcon, {})
+					})
+				]
+			}, "link-toolbar")
+		}) })
+	});
+}
+//#endregion
+export { ensureProtocol as n, FloatingToolbar as t };
+
+//# sourceMappingURL=FloatingToolbar-Df90f7Dm.mjs.map

package/dist/FloatingToolbar-Df90f7Dm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingToolbar-Df90f7Dm.mjs","names":["Input","DropdownMenu"],"sources":["../src/components/FloatingToolbar/FloatingToolbar.tsx"],"sourcesContent":["import { PluginKey } from '@tiptap/pm/state';\nimport type { EditorView } from '@tiptap/pm/view';\nimport { useEditorState, type Editor } from '@tiptap/react';\nimport { BubbleMenu } from '@tiptap/react/menus';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport {\n  BoldIcon,\n  CheckIcon,\n  GridIcon,\n  ItalicIcon,\n  LinkIcon,\n  ListIcon,\n  UnlinkIcon,\n  XIcon,\n} from '@persona/icons';\n\nimport { IconButton } from '#src/components/Button';\nimport DropdownMenu from '#src/components/DropdownMenu';\nimport Input from '#src/components/Input';\nimport Stack from '#src/components/Stack';\nimport { Z_INDICES } from '#src/lib/zindex';\nimport { TransitionDuration } from '#src/variables/transitions';\n\n// Core* colors throughout this file are intentional: the bubble toolbar is an\n// always-dark inverse surface floating over the editor, so it must not track\n// the semantic surface theme.\nconst BubbleMenuBar = styled(Stack)`\n  padding: ${Spacing[1]} ${Spacing[2]};\n  background-color: ${Color.CoreSlate1100};\n  border-radius: ${BorderRadius.Lg};\n`;\n\nconst IconContainer = styled(motion.div)`\n  display: flex;\n  gap: ${Spacing[1]};\n`;\n\nconst InverseIconButton = styled(IconButton)<{ $selected?: boolean }>`\n  background-color: ${({ $selected }) => ($selected ? Color.CoreSlate900 : 'transparent')};\n  color: ${Color.PrimaryWhite};\n  transition: background-color ${TransitionDuration.ExtraFast} ease-out;\n\n  &:hover:not(:disabled) {\n    background-color: ${Color.CoreSlate800};\n  }\n\n  &:disabled {\n    background-color: transparent;\n    opacity: 0.35;\n  }\n`;\n\nconst InverseInput = styled(Input)`\n  background-color: ${Color.CoreSlate900};\n  color: ${Color.PrimaryWhite};\n\n  :focus-within {\n    border-color: ${Color.CoreBlue700};\n  }\n  ::placeholder {\n    color: ${Color.TextDisabled};\n  }\n\n  input {\n    background-color: ${Color.CoreSlate900};\n    color: ${Color.PrimaryWhite};\n  }\n`;\n\nconst StyledDropdownItem = styled(DropdownMenu.Item)`\n  width: 100%;\n  height: 30px;\n  font-size: small;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n`;\n\n// Floating UI takes its offset as numbers while the spacing tokens are CSS lengths.\nconst TOOLBAR_GAP = parseInt(Spacing[1]);\n\n// Anchored to the field, the toolbar lines up with the input's left edge; over a\n// selection it sits back a notch so it does not crowd the first selected glyph.\nconst FIELD_OFFSET = { mainAxis: TOOLBAR_GAP, crossAxis: 0 };\nconst SELECTION_OFFSET = { mainAxis: TOOLBAR_GAP, crossAxis: -parseInt(Spacing[2]) };\n\n// The element EditorContent mounts the editor into — the visible field. Tiptap\n// types `options.element` loosely, so fall back to the editable root.\nconst getFieldElement = (editor: Editor): Element =>\n  editor.options.element instanceof Element ? editor.options.element : editor.view.dom;\n\n// Schemes we trust as link targets. Anything else (no scheme, or an unsafe one\n// like javascript:/data:/vbscript:) is treated as a bare host and forced onto\n// https, which both preserves host:port input and neutralizes script schemes.\nconst SAFE_LINK_SCHEME = /^(https?|mailto|tel):/i;\nconst URI_SCHEME = /^[a-zA-Z][a-zA-Z0-9+.-]*:/;\n\nexport const ensureProtocol = (url: string): string => {\n  const trimmedUrl = url.trim();\n  if (!trimmedUrl) {\n    return '';\n  }\n  // Handlebars placeholders (e.g. {{inquiry.id}}) are legitimate link targets in\n  // templated messages — the template render produces the final URL, so pass\n  // the expression through unvalidated. Only when nothing before the first\n  // placeholder looks like an unsafe scheme: javascript:alert(1)//{{x}} would\n  // otherwise smuggle a script href past the allowlist. URL parsers strip C0\n  // controls, tabs and spaces before reading the scheme, so normalize the\n  // prefix the same way first — java\\tscript:...{{x}} must not slip through.\n  if (trimmedUrl.includes('{{')) {\n    const beforePlaceholder = trimmedUrl\n      .slice(0, trimmedUrl.indexOf('{{'))\n      // eslint-disable-next-line no-control-regex -- mirrors how URL parsers strip C0/space before reading the scheme\n      .replace(/[\\u0000-\\u0020]/g, '');\n    if (!URI_SCHEME.test(beforePlaceholder) || SAFE_LINK_SCHEME.test(beforePlaceholder)) {\n      return trimmedUrl;\n    }\n    return '';\n  }\n  const candidate = SAFE_LINK_SCHEME.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;\n  // Re-parse so malformed input — including an unsafe scheme that can't survive\n  // the https prefix — is dropped instead of applied as a broken href.\n  return URL.canParse(candidate) ? candidate : '';\n};\n\ninterface FloatingToolbarProps {\n  /** TipTap editor instance to operate on. */\n  editor: Editor | null;\n  /**\n   * Keep the toolbar up the whole time the editor is focused instead of only\n   * while text is selected, so the formatting actions are discoverable without\n   * knowing to select first.\n   */\n  showOnFocus?: boolean;\n}\n\n/**\n * Floating bubble toolbar that appears on text selection or inside a table, or —\n * with `showOnFocus` — for as long as the editor is focused.\n * Keyboard shortcut: Cmd/Ctrl+Shift+U opens the link-edit row.\n */\nfunction FloatingToolbar({ editor, showOnFocus = false }: FloatingToolbarProps) {\n  const [linkURL, setLinkURL] = useState('');\n  const [editingLink, setEditingLink] = useState(false);\n  const linkInputRef = useRef<HTMLInputElement>(null);\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const savedSelection = useRef<{ from: number; to: number } | null>(null);\n  const editingLinkRef = useRef(editingLink);\n  const blurTimeout = useRef<ReturnType<typeof setTimeout>>();\n  // Lets the toolbar close its own bubble menu plugin via a `hide` meta.\n  const [pluginKey] = useState(() => new PluginKey('floatingToolbar'));\n\n  useEffect(() => () => clearTimeout(blurTimeout.current), []);\n\n  useEffect(() => {\n    editingLinkRef.current = editingLink;\n  }, [editingLink]);\n\n  const restoreSelection = useCallback(() => {\n    if (editor && savedSelection.current) {\n      const { from, to } = savedSelection.current;\n      editor.chain().focus().setTextSelection({ from, to }).run();\n    }\n  }, [editor]);\n\n  const openLinkEditingMode = useCallback(() => {\n    if (!editor) {\n      return;\n    }\n    if (!editor.can().chain().toggleLink({ href: 'https://www.google.com' }).run()) {\n      return;\n    }\n\n    const { from, to } = editor.state.selection;\n    savedSelection.current = { from, to };\n\n    const linkAttr = editor.getAttributes('link');\n    if (linkAttr.href) {\n      setLinkURL(linkAttr.href);\n    }\n\n    editor.chain().focus().setTextSelection({ from, to }).run();\n    setEditingLink(true);\n\n    setTimeout(() => {\n      linkInputRef.current?.focus();\n    }, 250);\n  }, [editor]);\n\n  // Cmd/Ctrl+Shift+U → open link mode; Escape inside link mode → cancel.\n  useEffect(() => {\n    if (!editor) {\n      return undefined;\n    }\n    const dom = editor.view.dom;\n    const handler = (event: KeyboardEvent) => {\n      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === 'u') {\n        event.preventDefault();\n        openLinkEditingMode();\n        return;\n      }\n      if (event.key === 'Escape' && editingLinkRef.current) {\n        event.preventDefault();\n        setEditingLink(false);\n        setLinkURL('');\n        savedSelection.current = null;\n      }\n    };\n    dom.addEventListener('keydown', handler);\n    return () => {\n      dom.removeEventListener('keydown', handler);\n    };\n  }, [editor, openLinkEditingMode]);\n\n  // Keep selection highlighted while focus is in the link input.\n  useEffect(() => {\n    if (!editingLink || !editor || !savedSelection.current) {\n      return undefined;\n    }\n    restoreSelection();\n    const timeoutId = setTimeout(() => {\n      restoreSelection();\n      editor.view.dom?.focus();\n    }, 0);\n    return () => clearTimeout(timeoutId);\n  }, [editingLink, restoreSelection, editor]);\n\n  // Pressing a toolbar button focuses that button, and the command's own\n  // transaction re-runs this check before the chained `.focus()` hands focus\n  // back to the editor. Ignoring focus held inside the toolbar therefore tears\n  // the bar down for a frame mid-click, taking the pressed button with it.\n  const isFocusWithinToolbar = useCallback(\n    () => !!toolbarRef.current?.contains(document.activeElement),\n    [],\n  );\n\n  // BubbleMenu dispatches an options-update transaction whenever these props\n  // change identity, and editors that re-render per transaction would then\n  // loop — so keep them stable across renders.\n  const bubbleMenuOptions = useMemo(\n    () => ({\n      placement: 'top-start' as const,\n      offset: showOnFocus ? FIELD_OFFSET : SELECTION_OFFSET,\n    }),\n    [showOnFocus],\n  );\n\n  // Sitting above the field rather than the selection: a toolbar that is up\n  // for the whole time the field is focused looks jumpy if it chases the\n  // caret and hops between selections.\n  const getReferencedVirtualElement = useMemo(\n    () =>\n      showOnFocus && editor\n        ? () => ({ getBoundingClientRect: () => getFieldElement(editor).getBoundingClientRect() })\n        : undefined,\n    [editor, showOnFocus],\n  );\n\n  const shouldShow = useCallback(\n    ({\n      editor: e,\n      view,\n      from,\n      to,\n    }: {\n      editor: Editor;\n      view: EditorView;\n      from: number;\n      to: number;\n    }) => {\n      if (!e.isEditable) {\n        return false;\n      }\n      if (e.isActive('mention')) {\n        return false;\n      }\n      // The toolbar carries the table-actions dropdown — a collapsed caret\n      // inside a table must still show it or row/column controls are\n      // unreachable.\n      if (e.isActive('table')) {\n        return true;\n      }\n      if (from !== to) {\n        return true;\n      }\n      return showOnFocus && (view.hasFocus() || isFocusWithinToolbar());\n    },\n    [isFocusWithinToolbar, showOnFocus],\n  );\n\n  // Self-subscribe: standalone use can't rely on the host's useEditor options (shouldRerenderOnTransaction is off by default in Tiptap 3).\n  const editorState = useEditorState({\n    editor,\n    selector: (snapshot) =>\n      snapshot.editor && {\n        isBold: snapshot.editor.isActive('bold'),\n        canBold: snapshot.editor.can().chain().toggleBold().run(),\n        isItalic: snapshot.editor.isActive('italic'),\n        canItalic: snapshot.editor.can().chain().toggleItalic().run(),\n        isLink: snapshot.editor.isActive('link'),\n        isBulletList: snapshot.editor.isActive('bulletList'),\n        canLink: snapshot.editor.can().chain().toggleLink({ href: 'https://www.google.com' }).run(),\n        isTable: snapshot.editor.isActive('table'),\n        canInsertTable: snapshot.editor\n          .can()\n          .chain()\n          .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n          .run(),\n      },\n  });\n\n  if (!editor || !editorState) {\n    return null;\n  }\n\n  // The plugin closes the toolbar off the editor's blur, which cannot fire again\n  // once focus has moved in here, so leaving from the toolbar has to close it.\n  // Focus only lands on its next target after this event, hence the tick.\n  const handleToolbarBlur = () => {\n    blurTimeout.current = setTimeout(() => {\n      if (editor.isDestroyed || isFocusWithinToolbar() || editor.view.hasFocus()) {\n        return;\n      }\n      editor.view.dispatch(editor.state.tr.setMeta(pluginKey, 'hide'));\n    });\n  };\n\n  return (\n    <BubbleMenu\n      editor={editor}\n      pluginKey={pluginKey}\n      options={bubbleMenuOptions}\n      getReferencedVirtualElement={getReferencedVirtualElement}\n      shouldShow={shouldShow}\n      // Floating UI sets no z-index on the portaled menu (Tippy used 9999).\n      style={{ zIndex: Z_INDICES.modalElevated }}\n    >\n      <AnimatePresence>\n        <BubbleMenuBar\n          ref={toolbarRef}\n          role='toolbar'\n          aria-label='Text formatting'\n          direction='horizontal'\n          spacing={Spacing[1]}\n          onBlur={handleToolbarBlur}\n        >\n          {!editingLink ? (\n            <IconContainer\n              key='main-toolbar'\n              layout\n              initial={{ x: -10, opacity: 0 }}\n              animate={{ x: 0, opacity: 1 }}\n              exit={{ x: -10, opacity: 0 }}\n              transition={{ duration: 0.2, ease: 'easeOut' }}\n            >\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleBulletList().run()}\n                $selected={editorState.isBulletList}\n                size='sm'\n                type='button'\n                aria-label='Toggle bullet list'\n                data-rte-menu-bar-item\n              >\n                <ListIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleBold().run()}\n                disabled={!editorState.canBold}\n                $selected={editorState.isBold}\n                size='sm'\n                type='button'\n                aria-label='Toggle bold'\n                data-rte-menu-bar-item\n              >\n                <BoldIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={() => editor.chain().focus().toggleItalic().run()}\n                $selected={editorState.isItalic}\n                disabled={!editorState.canItalic}\n                type='button'\n                size='sm'\n                aria-label='Toggle italic'\n                data-rte-menu-bar-item\n              >\n                <ItalicIcon />\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  openLinkEditingMode();\n                }}\n                $selected={editorState.isLink}\n                disabled={!editorState.canLink}\n                size='sm'\n                type='button'\n                aria-label='Toggle link'\n                data-rte-menu-bar-item\n              >\n                <LinkIcon />\n              </InverseIconButton>\n              {editorState.isTable ? (\n                <DropdownMenu\n                  contentProps={{\n                    // @ts-expect-error data attribute on dropdown menu\n                    'data-rte-menu-bar-item': 'table-actions-dropdown-menu',\n                    onCloseAutoFocus: (event) => {\n                      event.preventDefault();\n                      editor.commands.focus();\n                    },\n                  }}\n                  trigger={\n                    <InverseIconButton\n                      size='sm'\n                      type='button'\n                      aria-label='Table actions'\n                      data-rte-menu-bar-item\n                      $selected\n                    >\n                      <GridIcon />\n                    </InverseIconButton>\n                  }\n                >\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddRowAfter'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-row-after'\n                    onClick={() => editor.chain().focus().addRowAfter().run()}\n                  >\n                    Add row below\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddRowBefore'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-row-before'\n                    onClick={() => editor.chain().focus().addRowBefore().run()}\n                  >\n                    Add row above\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddColumnAfter'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-column-after'\n                    onClick={() => editor.chain().focus().addColumnAfter().run()}\n                  >\n                    Add column right\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableAddColumnBefore'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-add-column-before'\n                    onClick={() => editor.chain().focus().addColumnBefore().run()}\n                  >\n                    Add column left\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDeleteRow'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete-row'\n                    onClick={() => editor.chain().focus().deleteRow().run()}\n                  >\n                    Delete row\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDeleteColumn'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete-column'\n                    onClick={() => editor.chain().focus().deleteColumn().run()}\n                  >\n                    Delete column\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableToggleHeaderRow'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-toggle-header-row'\n                    onClick={() => editor.chain().focus().toggleHeaderRow().run()}\n                  >\n                    Toggle header row\n                  </StyledDropdownItem>\n                  <StyledDropdownItem\n                    id='floating-toolbar__tableDelete'\n                    variant='basic'\n                    data-rte-menu-bar-item='table-delete'\n                    onClick={() => editor.chain().focus().deleteTable().run()}\n                  >\n                    Delete table\n                  </StyledDropdownItem>\n                </DropdownMenu>\n              ) : (\n                <InverseIconButton\n                  onClick={() =>\n                    editor\n                      .chain()\n                      .focus()\n                      .insertTable({ rows: 3, cols: 3, withHeaderRow: true })\n                      .run()\n                  }\n                  disabled={!editorState.canInsertTable}\n                  size='sm'\n                  type='button'\n                  aria-label='Insert table'\n                  data-rte-menu-bar-item\n                >\n                  <GridIcon />\n                </InverseIconButton>\n              )}\n            </IconContainer>\n          ) : (\n            <IconContainer\n              key='link-toolbar'\n              initial={{ x: -10, opacity: 0 }}\n              animate={{ x: 0, opacity: 1 }}\n              exit={{ x: -10, opacity: 0 }}\n              transition={{ duration: 0.2, ease: 'easeOut' }}\n              aria-label='Link toolbar'\n              onAnimationComplete={() => {\n                if (editor && savedSelection.current) {\n                  setTimeout(() => {\n                    restoreSelection();\n                    linkInputRef.current?.focus();\n                  }, 10);\n                }\n              }}\n            >\n              <InverseInput\n                ref={linkInputRef}\n                size='sm'\n                value={linkURL}\n                onChange={(e) => setLinkURL(e.target.value)}\n                placeholder='Click to enter URL...'\n                aria-label='Link input'\n                data-rte-menu-bar-item\n                onClick={() => {\n                  linkInputRef.current?.focus();\n                }}\n                onFocus={() => {\n                  if (savedSelection.current && editor) {\n                    const { from, to } = savedSelection.current;\n                    editor.chain().setTextSelection({ from, to }).run();\n                  }\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' && linkURL.trim() && editor && savedSelection.current) {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    const { from, to } = savedSelection.current;\n                    editor\n                      .chain()\n                      .focus()\n                      .setTextSelection({ from, to })\n                      .setLink({ href: ensureProtocol(linkURL) })\n                      .run();\n                    savedSelection.current = null;\n                    setEditingLink(false);\n                    setLinkURL('');\n                    return;\n                  }\n                  if (e.key === 'Escape') {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setEditingLink(false);\n                    setLinkURL('');\n                    savedSelection.current = null;\n                    const { from, to } = editor.state.selection;\n                    editor.chain().focus().setTextSelection({ from, to }).run();\n                  }\n                }}\n              />\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (linkURL) {\n                    editor.chain().focus().unsetLink().run();\n                  }\n                  restoreSelection();\n                  setLinkURL('');\n                  savedSelection.current = null;\n                  setEditingLink(false);\n                }}\n                size='sm'\n                type='button'\n                aria-label='Cancel link'\n                data-rte-menu-bar-item\n              >\n                {linkURL && editorState.isLink ? <UnlinkIcon /> : <XIcon />}\n              </InverseIconButton>\n              <InverseIconButton\n                onClick={(e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (linkURL.trim() && editor && savedSelection.current) {\n                    const { from, to } = savedSelection.current;\n                    editor\n                      .chain()\n                      .focus()\n                      .setTextSelection({ from, to })\n                      .setLink({ href: ensureProtocol(linkURL) })\n                      .run();\n                  } else if (editor && savedSelection.current) {\n                    const { from, to } = savedSelection.current;\n                    editor.chain().focus().setTextSelection({ from, to }).unsetLink().run();\n                  }\n                  savedSelection.current = null;\n                  setEditingLink(false);\n                  setLinkURL('');\n                }}\n                size='sm'\n                type='button'\n                aria-label='Apply link'\n                data-rte-menu-bar-item\n              >\n                <CheckIcon />\n              </InverseIconButton>\n            </IconContainer>\n          )}\n        </BubbleMenuBar>\n      </AnimatePresence>\n    </BubbleMenu>\n  );\n}\n\nexport default FloatingToolbar;\n"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAM,gBAAgB,OAAO,MAAM;aACtB,QAAQ,GAAG,GAAG,QAAQ,GAAG;sBAChB,MAAM,cAAc;mBACvB,aAAa,GAAG;;AAGnC,MAAM,gBAAgB,OAAO,OAAO,IAAI;;SAE/B,QAAQ,GAAG;;AAGpB,MAAM,oBAAoB,OAAO,WAAW;uBACrB,EAAE,gBAAiB,YAAY,MAAM,eAAe,cAAe;WAC/E,MAAM,aAAa;yCACgC;;;wBAGtC,MAAM,aAAa;;;;;;;;AAS3C,MAAM,eAAe,OAAOA,cAAM;sBACZ,MAAM,aAAa;WAC9B,MAAM,aAAa;;;oBAGV,MAAM,YAAY;;;aAGzB,MAAM,aAAa;;;;wBAIR,MAAM,aAAa;aAC9B,MAAM,aAAa;;;AAIhC,MAAM,qBAAqB,OAAOC,qBAAa,KAAK;;;;;;;;AAUpD,MAAM,cAAc,SAAS,QAAQ,GAAG;AAIxC,MAAM,eAAe;CAAE,UAAU;CAAa,WAAW;CAAG;AAC5D,MAAM,mBAAmB;CAAE,UAAU;CAAa,WAAW,CAAC,SAAS,QAAQ,GAAG;CAAE;AAIpF,MAAM,mBAAmB,WACvB,OAAO,QAAQ,mBAAmB,UAAU,OAAO,QAAQ,UAAU,OAAO,KAAK;AAKnF,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAEnB,MAAa,kBAAkB,QAAwB;CACrD,MAAM,aAAa,IAAI,MAAM;AAC7B,KAAI,CAAC,WACH,QAAO;AAST,KAAI,WAAW,SAAS,KAAK,EAAE;EAC7B,MAAM,oBAAoB,WACvB,MAAM,GAAG,WAAW,QAAQ,KAAK,CAAC,CAElC,QAAQ,oBAAoB,GAAG;AAClC,MAAI,CAAC,WAAW,KAAK,kBAAkB,IAAI,iBAAiB,KAAK,kBAAkB,CACjF,QAAO;AAET,SAAO;;CAET,MAAM,YAAY,iBAAiB,KAAK,WAAW,GAAG,aAAa,WAAW;AAG9E,QAAO,IAAI,SAAS,UAAU,GAAG,YAAY;;;;;;;AAmB/C,SAAS,gBAAgB,EAAE,QAAQ,cAAc,SAA+B;CAC9E,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAC1C,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,eAAe,OAAyB,KAAK;CACnD,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,iBAAiB,OAA4C,KAAK;CACxE,MAAM,iBAAiB,OAAO,YAAY;CAC1C,MAAM,cAAc,QAAuC;CAE3D,MAAM,CAAC,aAAa,eAAe,IAAI,UAAU,kBAAkB,CAAC;AAEpE,uBAAsB,aAAa,YAAY,QAAQ,EAAE,EAAE,CAAC;AAE5D,iBAAgB;AACd,iBAAe,UAAU;IACxB,CAAC,YAAY,CAAC;CAEjB,MAAM,mBAAmB,kBAAkB;AACzC,MAAI,UAAU,eAAe,SAAS;GACpC,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,UAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;IAAE;IAAM;IAAI,CAAC,CAAC,KAAK;;IAE5D,CAAC,OAAO,CAAC;CAEZ,MAAM,sBAAsB,kBAAkB;AAC5C,MAAI,CAAC,OACH;AAEF,MAAI,CAAC,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,0BAA0B,CAAC,CAAC,KAAK,CAC5E;EAGF,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;AAClC,iBAAe,UAAU;GAAE;GAAM;GAAI;EAErC,MAAM,WAAW,OAAO,cAAc,OAAO;AAC7C,MAAI,SAAS,KACX,YAAW,SAAS,KAAK;AAG3B,SAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;GAAE;GAAM;GAAI,CAAC,CAAC,KAAK;AAC3D,iBAAe,KAAK;AAEpB,mBAAiB;AACf,gBAAa,SAAS,OAAO;KAC5B,IAAI;IACN,CAAC,OAAO,CAAC;AAGZ,iBAAgB;AACd,MAAI,CAAC,OACH;EAEF,MAAM,MAAM,OAAO,KAAK;EACxB,MAAM,WAAW,UAAyB;AACxC,QAAK,MAAM,WAAW,MAAM,YAAY,MAAM,YAAY,MAAM,IAAI,aAAa,KAAK,KAAK;AACzF,UAAM,gBAAgB;AACtB,yBAAqB;AACrB;;AAEF,OAAI,MAAM,QAAQ,YAAY,eAAe,SAAS;AACpD,UAAM,gBAAgB;AACtB,mBAAe,MAAM;AACrB,eAAW,GAAG;AACd,mBAAe,UAAU;;;AAG7B,MAAI,iBAAiB,WAAW,QAAQ;AACxC,eAAa;AACX,OAAI,oBAAoB,WAAW,QAAQ;;IAE5C,CAAC,QAAQ,oBAAoB,CAAC;AAGjC,iBAAgB;AACd,MAAI,CAAC,eAAe,CAAC,UAAU,CAAC,eAAe,QAC7C;AAEF,oBAAkB;EAClB,MAAM,YAAY,iBAAiB;AACjC,qBAAkB;AAClB,UAAO,KAAK,KAAK,OAAO;KACvB,EAAE;AACL,eAAa,aAAa,UAAU;IACnC;EAAC;EAAa;EAAkB;EAAO,CAAC;CAM3C,MAAM,uBAAuB,kBACrB,CAAC,CAAC,WAAW,SAAS,SAAS,SAAS,cAAc,EAC5D,EAAE,CACH;CAKD,MAAM,oBAAoB,eACjB;EACL,WAAW;EACX,QAAQ,cAAc,eAAe;EACtC,GACD,CAAC,YAAY,CACd;CAKD,MAAM,8BAA8B,cAEhC,eAAe,gBACJ,EAAE,6BAA6B,gBAAgB,OAAO,CAAC,uBAAuB,EAAE,IACvF,KAAA,GACN,CAAC,QAAQ,YAAY,CACtB;CAED,MAAM,aAAa,aAChB,EACC,QAAQ,GACR,MACA,MACA,SAMI;AACJ,MAAI,CAAC,EAAE,WACL,QAAO;AAET,MAAI,EAAE,SAAS,UAAU,CACvB,QAAO;AAKT,MAAI,EAAE,SAAS,QAAQ,CACrB,QAAO;AAET,MAAI,SAAS,GACX,QAAO;AAET,SAAO,gBAAgB,KAAK,UAAU,IAAI,sBAAsB;IAElE,CAAC,sBAAsB,YAAY,CACpC;CAGD,MAAM,cAAc,eAAe;EACjC;EACA,WAAW,aACT,SAAS,UAAU;GACjB,QAAQ,SAAS,OAAO,SAAS,OAAO;GACxC,SAAS,SAAS,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;GACzD,UAAU,SAAS,OAAO,SAAS,SAAS;GAC5C,WAAW,SAAS,OAAO,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;GAC7D,QAAQ,SAAS,OAAO,SAAS,OAAO;GACxC,cAAc,SAAS,OAAO,SAAS,aAAa;GACpD,SAAS,SAAS,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,MAAM,0BAA0B,CAAC,CAAC,KAAK;GAC3F,SAAS,SAAS,OAAO,SAAS,QAAQ;GAC1C,gBAAgB,SAAS,OACtB,KAAK,CACL,OAAO,CACP,YAAY;IAAE,MAAM;IAAG,MAAM;IAAG,eAAe;IAAM,CAAC,CACtD,KAAK;GACT;EACJ,CAAC;AAEF,KAAI,CAAC,UAAU,CAAC,YACd,QAAO;CAMT,MAAM,0BAA0B;AAC9B,cAAY,UAAU,iBAAiB;AACrC,OAAI,OAAO,eAAe,sBAAsB,IAAI,OAAO,KAAK,UAAU,CACxE;AAEF,UAAO,KAAK,SAAS,OAAO,MAAM,GAAG,QAAQ,WAAW,OAAO,CAAC;IAChE;;AAGJ,QACE,oBAAC,YAAD;EACU;EACG;EACX,SAAS;EACoB;EACjB;EAEZ,OAAO,EAAE,QAAQ,UAAU,eAAe;YAE1C,oBAAC,iBAAD,EAAA,UACE,oBAAC,eAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,WAAU;GACV,SAAS,QAAQ;GACjB,QAAQ;aAEP,CAAC,cACA,qBAAC,eAAD;IAEE,QAAA;IACA,SAAS;KAAE,GAAG;KAAK,SAAS;KAAG;IAC/B,SAAS;KAAE,GAAG;KAAG,SAAS;KAAG;IAC7B,MAAM;KAAE,GAAG;KAAK,SAAS;KAAG;IAC5B,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;cANhD;KAQE,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,KAAK;MAC9D,WAAW,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACpB,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,KAAK;MACxD,UAAU,CAAC,YAAY;MACvB,WAAW,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACpB,oBAAC,mBAAD;MACE,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;MAC1D,WAAW,YAAY;MACvB,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,YAAD,EAAc,CAAA;MACI,CAAA;KACpB,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,4BAAqB;;MAEvB,WAAW,YAAY;MACvB,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KACnB,YAAY,UACX,qBAACA,sBAAD;MACE,cAAc;OAEZ,0BAA0B;OAC1B,mBAAmB,UAAU;AAC3B,cAAM,gBAAgB;AACtB,eAAO,SAAS,OAAO;;OAE1B;MACD,SACE,oBAAC,mBAAD;OACE,MAAK;OACL,MAAK;OACL,cAAW;OACX,0BAAA;OACA,WAAA;iBAEA,oBAAC,UAAD,EAAY,CAAA;OACM,CAAA;gBAlBxB;OAqBE,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;kBAC1D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;kBAC3D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,gBAAgB,CAAC,KAAK;kBAC7D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;kBAC9D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;kBACxD;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,cAAc,CAAC,KAAK;kBAC3D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB,CAAC,KAAK;kBAC9D;QAEoB,CAAA;OACrB,oBAAC,oBAAD;QACE,IAAG;QACH,SAAQ;QACR,0BAAuB;QACvB,eAAe,OAAO,OAAO,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK;kBAC1D;QAEoB,CAAA;OACR;UAEf,oBAAC,mBAAD;MACE,eACE,OACG,OAAO,CACP,OAAO,CACP,YAAY;OAAE,MAAM;OAAG,MAAM;OAAG,eAAe;OAAM,CAAC,CACtD,KAAK;MAEV,UAAU,CAAC,YAAY;MACvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,UAAD,EAAY,CAAA;MACM,CAAA;KAER;MA/JV,eA+JU,GAEhB,qBAAC,eAAD;IAEE,SAAS;KAAE,GAAG;KAAK,SAAS;KAAG;IAC/B,SAAS;KAAE,GAAG;KAAG,SAAS;KAAG;IAC7B,MAAM;KAAE,GAAG;KAAK,SAAS;KAAG;IAC5B,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C,cAAW;IACX,2BAA2B;AACzB,SAAI,UAAU,eAAe,QAC3B,kBAAiB;AACf,wBAAkB;AAClB,mBAAa,SAAS,OAAO;QAC5B,GAAG;;cAZZ;KAgBE,oBAAC,cAAD;MACE,KAAK;MACL,MAAK;MACL,OAAO;MACP,WAAW,MAAM,WAAW,EAAE,OAAO,MAAM;MAC3C,aAAY;MACZ,cAAW;MACX,0BAAA;MACA,eAAe;AACb,oBAAa,SAAS,OAAO;;MAE/B,eAAe;AACb,WAAI,eAAe,WAAW,QAAQ;QACpC,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eAAO,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,KAAK;;;MAGvD,YAAY,MAAM;AAChB,WAAI,EAAE,QAAQ,WAAW,QAAQ,MAAM,IAAI,UAAU,eAAe,SAAS;AAC3E,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;QACnB,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eACG,OAAO,CACP,OAAO,CACP,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAC9B,QAAQ,EAAE,MAAM,eAAe,QAAQ,EAAE,CAAC,CAC1C,KAAK;AACR,uBAAe,UAAU;AACzB,uBAAe,MAAM;AACrB,mBAAW,GAAG;AACd;;AAEF,WAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAgB;AAClB,UAAE,iBAAiB;AACnB,uBAAe,MAAM;AACrB,mBAAW,GAAG;AACd,uBAAe,UAAU;QACzB,MAAM,EAAE,MAAM,OAAO,OAAO,MAAM;AAClC,eAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,KAAK;;;MAG/D,CAAA;KACF,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,WAAI,QACF,QAAO,OAAO,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK;AAE1C,yBAAkB;AAClB,kBAAW,GAAG;AACd,sBAAe,UAAU;AACzB,sBAAe,MAAM;;MAEvB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEC,WAAW,YAAY,SAAS,oBAAC,YAAD,EAAc,CAAA,GAAG,oBAAC,OAAD,EAAS,CAAA;MACzC,CAAA;KACpB,oBAAC,mBAAD;MACE,UAAU,MAAM;AACd,SAAE,gBAAgB;AAClB,SAAE,iBAAiB;AACnB,WAAI,QAAQ,MAAM,IAAI,UAAU,eAAe,SAAS;QACtD,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eACG,OAAO,CACP,OAAO,CACP,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAC9B,QAAQ,EAAE,MAAM,eAAe,QAAQ,EAAE,CAAC,CAC1C,KAAK;kBACC,UAAU,eAAe,SAAS;QAC3C,MAAM,EAAE,MAAM,OAAO,eAAe;AACpC,eAAO,OAAO,CAAC,OAAO,CAAC,iBAAiB;SAAE;SAAM;SAAI,CAAC,CAAC,WAAW,CAAC,KAAK;;AAEzE,sBAAe,UAAU;AACzB,sBAAe,MAAM;AACrB,kBAAW,GAAG;;MAEhB,MAAK;MACL,MAAK;MACL,cAAW;MACX,0BAAA;gBAEA,oBAAC,WAAD,EAAa,CAAA;MACK,CAAA;KACN;MAzGV,eAyGU;GAEJ,CAAA,EACA,CAAA;EACP,CAAA"}

package/dist/FloatingToolbar.d.mts

@@ -1,7 +1,7 @@
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Editor } from "@tiptap/react";
 
-//#region src/components/RichTextEditor/FloatingToolbar.d.ts
+//#region src/components/FloatingToolbar/FloatingToolbar.d.ts
 declare const ensureProtocol: (url: string) => string;
 interface FloatingToolbarProps {
   /** TipTap editor instance to operate on. */

package/dist/{FormControl-TkYMZeBd.d.mts → FormControl-BQe3GRhi.d.mts}

@@ -1,4 +1,4 @@
-import { t as ErrorProps } from "./ErrorProps-Cy-APmdC.mjs";
+import { t as ErrorProps } from "./ErrorProps-4Ohsinrf.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import * as _$styled_components0 from "styled-components";
@@ -61,4 +61,4 @@ interface FormControlProps extends ComponentPropsWithoutRef<'div'>, FormControlB
 declare const FormControl: _$react.ForwardRefExoticComponent<FormControlProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormControlProps as a, FormLabelProps as c, FormControlBaseProps as i, HelperText as l, ErrorText as n, FormInputContainer as o, FormControl as r, FormLabel as s, Container as t, WarningText as u };
-//# sourceMappingURL=FormControl-TkYMZeBd.d.mts.map
+//# sourceMappingURL=FormControl-BQe3GRhi.d.mts.map

package/dist/FormControl.d.mts

@@ -1,2 +1,2 @@
-import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "./FormControl-TkYMZeBd.mjs";
+import { a as FormControlProps, c as FormLabelProps, i as FormControlBaseProps, l as HelperText, n as ErrorText, o as FormInputContainer, r as FormControl, s as FormLabel, t as Container, u as WarningText } from "./FormControl-BQe3GRhi.mjs";
 export { Container, ErrorText, FormControl, FormControl as default, FormControlBaseProps, FormControlProps, FormInputContainer, FormLabel, FormLabelProps, HelperText, WarningText };

package/dist/FormControlLabel.d.mts

@@ -1,4 +1,4 @@
-import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-SaoRBdB6.mjs";
+import { c as ParagraphProps, o as LabelProps, u as SpanProps } from "./Text-CvaqognH.mjs";
 import * as _$react from "react";
 import * as _$styled_components0 from "styled-components";
 

package/dist/{FormField-D10LW9-a.d.mts → FormField-BW5uMzId.d.mts}

@@ -1,4 +1,4 @@
-import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-TkYMZeBd.mjs";
+import { a as FormControlProps, l as HelperText, n as ErrorText, s as FormLabel, u as WarningText } from "./FormControl-BQe3GRhi.mjs";
 import * as _$react from "react";
 import { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 
@@ -67,4 +67,4 @@ interface FormFieldProps extends Omit<FormControlProps, 'children'>, FormFieldBa
 declare const FormField: _$react.ForwardRefExoticComponent<FormFieldProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { FormFieldBaseProps as n, FormFieldProps as r, FormField as t };
-//# sourceMappingURL=FormField-D10LW9-a.d.mts.map
+//# sourceMappingURL=FormField-BW5uMzId.d.mts.map

package/dist/FormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-D10LW9-a.mjs";
+import { n as FormFieldBaseProps, r as FormFieldProps, t as FormField } from "./FormField-BW5uMzId.mjs";
 export { FormField, FormField as default, FormFieldBaseProps, FormFieldProps };

package/dist/{Grid-BtTuj5mR.mjs → Grid-CYpOqTUu.mjs}

@@ -89,4 +89,4 @@ const GridItem = ({ span, children, ...rest }) => /* @__PURE__ */ jsx(Item, {
 //#endregion
 export { useGridBreakpoint as i, GRID_BREAKPOINTS as n, Grid as r, GridItem as t };
 
-//# sourceMappingURL=Grid-BtTuj5mR.mjs.map
+//# sourceMappingURL=Grid-CYpOqTUu.mjs.map

package/dist/{Grid-BtTuj5mR.mjs.map → Grid-CYpOqTUu.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Grid-BtTuj5mR.mjs","names":[],"sources":["../src/components/Grid/Grid.tsx","../src/components/Grid/GridItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const GRID_BREAKPOINTS = { sm: 768, md: 1024, lg: 1408 } as const;\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg';\n\nconst GridBreakpointContext = createContext<Breakpoint>('md');\n\n/** Breakpoint of the nearest `Grid`, measured from that grid's width. */\nexport const useGridBreakpoint = (): Breakpoint => useContext(GridBreakpointContext);\n\nconst getBreakpoint = (width: number): Breakpoint => {\n  if (width >= GRID_BREAKPOINTS.lg) {\n    return 'lg';\n  }\n  if (width >= GRID_BREAKPOINTS.md) {\n    return 'md';\n  }\n  if (width >= GRID_BREAKPOINTS.sm) {\n    return 'sm';\n  }\n  return 'xs';\n};\n\nconst useMeasuredGridBreakpoint = (ref: RefObject<HTMLDivElement>) => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [ref]);\n  return breakpoint;\n};\n\nconst Root = styled.div<{ $mode: GridProps['mode']; $breakpoint: Breakpoint }>`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  box-sizing: border-box;\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' &&\n    css`\n      min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n    `}\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' || $breakpoint === 'sm'\n      ? css`\n          gap: ${Spacing[3]};\n          padding-inline: ${Spacing[5]};\n        `\n      : css`\n          gap: ${Spacing[4]};\n          padding-inline: ${Spacing[6]};\n        `}\n\n  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'\n  ${({ $mode, $breakpoint }) =>\n    $mode === 'fixed' &&\n    $breakpoint === 'lg' &&\n    css`\n      max-width: ${GRID_BREAKPOINTS.lg}px;\n      margin-inline: auto;\n    `}\n`;\n\nexport interface GridProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Selects the grid width behavior at the large breakpoint. `fixed` centers the grid at a\n   * maximum width of 1408px, while `fluid` fills the available width.\n   *\n   * Breakpoints:\n   * - ≤767px: 12 columns, 24px margins, 12px gutters, and a 767px minimum width.\n   * - 768–1023px: 12 columns, 24px margins, 12px gutters, and 100% width.\n   * - 1024–1407px: 12 columns, 32px margins, 16px gutters, and 100% width.\n   * - ≥1408px: 12 columns, 32px margins, 16px gutters, and either fixed or fluid width.\n   */\n  mode: 'fixed' | 'fluid';\n  children: ReactNode;\n}\n\n/**\n * Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive\n * horizontal margins and gutters. Vertical spacing is left to the consumer.\n *\n * The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to\n * center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.\n */\nexport const Grid = ({ mode, children, ...rest }: GridProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const breakpoint = useMeasuredGridBreakpoint(ref);\n  return (\n    <GridBreakpointContext.Provider value={breakpoint}>\n      <Root ref={ref} $mode={mode} $breakpoint={breakpoint} {...rest}>\n        {children}\n      </Root>\n    </GridBreakpointContext.Provider>\n  );\n};\n\nexport default Grid;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface GridItemProps extends ComponentPropsWithoutRef<'div'> {\n  span: GridSpan;\n  children: ReactNode;\n}\n\nconst Item = styled.div<{ $span: GridSpan }>`\n  grid-column: span ${({ $span }) => $span};\n  min-width: 0;\n`;\n\nexport const GridItem = ({ span, children, ...rest }: GridItemProps) => (\n  <Item $span={span} {...rest}>\n    {children}\n  </Item>\n);\n\nexport default GridItem;\n"],"mappings":";;;;;AAcA,MAAa,mBAAmB;CAAE,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM;AAI/D,MAAM,wBAAwB,cAA0B,KAAK;;AAG7D,MAAa,0BAAsC,WAAW,sBAAsB;AAEpF,MAAM,iBAAiB,UAA8B;AACnD,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,QAAO;;AAGT,MAAM,6BAA6B,QAAmC;CACpE,MAAM,CAAC,YAAY,iBAAiB,SAAqB,KAAK;AAC9D,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,cAAc,cAAc,KAAK,YAAY,CAAC;AACnE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,CAAC,IAAI,CAAC;AACT,QAAO;;AAGT,MAAM,OAAO,OAAO,GAA0D;;;;;;KAMzE,EAAE,kBACH,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,KAAK,EAAE;MACrC;;KAED,EAAE,kBACH,gBAAgB,QAAQ,gBAAgB,OACpC,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;YAE/B,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;UAC7B;;;KAGL,EAAE,OAAO,kBACV,UAAU,WACV,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,GAAG;;MAEjC;;;;;;;;;AAyBN,MAAa,QAAQ,EAAE,MAAM,UAAU,GAAG,WAAsB;CAC9D,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,0BAA0B,IAAI;AACjD,QACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,MAAD;GAAW;GAAK,OAAO;GAAM,aAAa;GAAY,GAAI;GACvD;GACI,CAAA;EACwB,CAAA;;;;ACzGrC,MAAM,OAAO,OAAO,GAAwB;uBACrB,EAAE,YAAY,MAAM;;;AAI3C,MAAa,YAAY,EAAE,MAAM,UAAU,GAAG,WAC5C,oBAAC,MAAD;CAAM,OAAO;CAAM,GAAI;CACpB;CACI,CAAA"}
+{"version":3,"file":"Grid-CYpOqTUu.mjs","names":[],"sources":["../src/components/Grid/Grid.tsx","../src/components/Grid/GridItem.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useContext,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\n\nexport const GRID_BREAKPOINTS = { sm: 768, md: 1024, lg: 1408 } as const;\n\ntype Breakpoint = 'xs' | 'sm' | 'md' | 'lg';\n\nconst GridBreakpointContext = createContext<Breakpoint>('md');\n\n/** Breakpoint of the nearest `Grid`, measured from that grid's width. */\nexport const useGridBreakpoint = (): Breakpoint => useContext(GridBreakpointContext);\n\nconst getBreakpoint = (width: number): Breakpoint => {\n  if (width >= GRID_BREAKPOINTS.lg) {\n    return 'lg';\n  }\n  if (width >= GRID_BREAKPOINTS.md) {\n    return 'md';\n  }\n  if (width >= GRID_BREAKPOINTS.sm) {\n    return 'sm';\n  }\n  return 'xs';\n};\n\nconst useMeasuredGridBreakpoint = (ref: RefObject<HTMLDivElement>) => {\n  const [breakpoint, setBreakpoint] = useState<Breakpoint>('md');\n  useLayoutEffect(() => {\n    const node = ref.current;\n    if (!node) {\n      return;\n    }\n    const update = () => setBreakpoint(getBreakpoint(node.offsetWidth));\n    update();\n    const observer = new ResizeObserver(update);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [ref]);\n  return breakpoint;\n};\n\nconst Root = styled.div<{ $mode: GridProps['mode']; $breakpoint: Breakpoint }>`\n  display: grid;\n  width: 100%;\n  grid-template-columns: repeat(12, minmax(0, 1fr));\n  box-sizing: border-box;\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' &&\n    css`\n      min-width: ${GRID_BREAKPOINTS.sm - 1}px;\n    `}\n\n  ${({ $breakpoint }) =>\n    $breakpoint === 'xs' || $breakpoint === 'sm'\n      ? css`\n          gap: ${Spacing[3]};\n          padding-inline: ${Spacing[5]};\n        `\n      : css`\n          gap: ${Spacing[4]};\n          padding-inline: ${Spacing[6]};\n        `}\n\n  // max-width equals the lg threshold; offsetWidth reads the clamped border-box width and getBreakpoint uses >=, so the clamp stays 'lg'\n  ${({ $mode, $breakpoint }) =>\n    $mode === 'fixed' &&\n    $breakpoint === 'lg' &&\n    css`\n      max-width: ${GRID_BREAKPOINTS.lg}px;\n      margin-inline: auto;\n    `}\n`;\n\nexport interface GridProps extends ComponentPropsWithoutRef<'div'> {\n  /**\n   * Selects the grid width behavior at the large breakpoint. `fixed` centers the grid at a\n   * maximum width of 1408px, while `fluid` fills the available width.\n   *\n   * Breakpoints:\n   * - ≤767px: 12 columns, 24px margins, 12px gutters, and a 767px minimum width.\n   * - 768–1023px: 12 columns, 24px margins, 12px gutters, and 100% width.\n   * - 1024–1407px: 12 columns, 32px margins, 16px gutters, and 100% width.\n   * - ≥1408px: 12 columns, 32px margins, 16px gutters, and either fixed or fluid width.\n   */\n  mode: 'fixed' | 'fluid';\n  children: ReactNode;\n}\n\n/**\n * Provides a 12-column CSS grid that measures its own width with a ResizeObserver for responsive\n * horizontal margins and gutters. Vertical spacing is left to the consumer.\n *\n * The grid measures breakpoints against its own width rather than the viewport. Use `fixed` to\n * center the grid at its large-screen maximum width, or `fluid` to keep it at 100% width.\n */\nexport const Grid = ({ mode, children, ...rest }: GridProps) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const breakpoint = useMeasuredGridBreakpoint(ref);\n  return (\n    <GridBreakpointContext.Provider value={breakpoint}>\n      <Root ref={ref} $mode={mode} $breakpoint={breakpoint} {...rest}>\n        {children}\n      </Root>\n    </GridBreakpointContext.Provider>\n  );\n};\n\nexport default Grid;\n","import type { ComponentPropsWithoutRef, ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n\nexport interface GridItemProps extends ComponentPropsWithoutRef<'div'> {\n  span: GridSpan;\n  children: ReactNode;\n}\n\nconst Item = styled.div<{ $span: GridSpan }>`\n  grid-column: span ${({ $span }) => $span};\n  min-width: 0;\n`;\n\nexport const GridItem = ({ span, children, ...rest }: GridItemProps) => (\n  <Item $span={span} {...rest}>\n    {children}\n  </Item>\n);\n\nexport default GridItem;\n"],"mappings":";;;;;AAcA,MAAa,mBAAmB;CAAE,IAAI;CAAK,IAAI;CAAM,IAAI;CAAM;AAI/D,MAAM,wBAAwB,cAA0B,KAAK;;AAG7D,MAAa,0BAAsC,WAAW,sBAAsB;AAEpF,MAAM,iBAAiB,UAA8B;AACnD,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,KAAI,SAAS,iBAAiB,GAC5B,QAAO;AAET,QAAO;;AAGT,MAAM,6BAA6B,QAAmC;CACpE,MAAM,CAAC,YAAY,iBAAiB,SAAqB,KAAK;AAC9D,uBAAsB;EACpB,MAAM,OAAO,IAAI;AACjB,MAAI,CAAC,KACH;EAEF,MAAM,eAAe,cAAc,cAAc,KAAK,YAAY,CAAC;AACnE,UAAQ;EACR,MAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,WAAS,QAAQ,KAAK;AACtB,eAAa,SAAS,YAAY;IACjC,CAAC,IAAI,CAAC;AACT,QAAO;;AAGT,MAAM,OAAO,OAAO,GAA0D;;;;;;KAMzE,EAAE,kBACH,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,KAAK,EAAE;MACrC;;KAED,EAAE,kBACH,gBAAgB,QAAQ,gBAAgB,OACpC,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;YAE/B,GAAG;iBACM,QAAQ,GAAG;4BACA,QAAQ,GAAG;UAC7B;;;KAGL,EAAE,OAAO,kBACV,UAAU,WACV,gBAAgB,QAChB,GAAG;mBACY,iBAAiB,GAAG;;MAEjC;;;;;;;;;AAyBN,MAAa,QAAQ,EAAE,MAAM,UAAU,GAAG,WAAsB;CAC9D,MAAM,MAAM,OAAuB,KAAK;CACxC,MAAM,aAAa,0BAA0B,IAAI;AACjD,QACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,MAAD;GAAW;GAAK,OAAO;GAAM,aAAa;GAAY,GAAI;GACvD;GACI,CAAA;EACwB,CAAA;;;;ACzGrC,MAAM,OAAO,OAAO,GAAwB;uBACrB,EAAE,YAAY,MAAM;;;AAI3C,MAAa,YAAY,EAAE,MAAM,UAAU,GAAG,WAC5C,oBAAC,MAAD;CAAM,OAAO;CAAM,GAAI;CACpB;CACI,CAAA"}