@giddaa-housing/ui 0.1.0 → 1.1.0

package/dist/rich-text-editor.js

@@ -1,4 +1,13 @@
-// src/components/ui/rich-text-editor.tsx
+"use client";
+import { t as cn } from "./cn-BI_4DMBf.js";
+import { useComponentSize } from "./size-context.js";
+import { Button } from "./button.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Baseline, Bold, ChevronDown, Code2, ImageIcon, Italic, Link2, List, ListOrdered, Quote, Redo2, Underline, Undo2 } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { Color } from "@tiptap/extension-color";
 import { Image } from "@tiptap/extension-image";
 import { Placeholder } from "@tiptap/extension-placeholder";
@@ -6,995 +15,601 @@ import { TextAlign } from "@tiptap/extension-text-align";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { EditorContent, useEditor, useEditorState } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
-import {
-  AlignCenter,
-  AlignJustify,
-  AlignLeft,
-  AlignRight,
-  Baseline,
-  Bold,
-  ChevronDown,
-  Code2,
-  ImageIcon,
-  Italic,
-  Link2,
-  List,
-  ListOrdered,
-  Quote,
-  Redo2,
-  Underline,
-  Undo2
-} from "lucide-react";
-import * as React from "react";
-
-// src/lib/cn.ts
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-var twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [
-        {
-          text: [
-            "gdt-display",
-            "gdt-h1",
-            "gdt-h2",
-            "gdt-h3",
-            "gdt-h4",
-            "gdt-h5",
-            "gdt-xl",
-            "gdt-lg",
-            "gdt-md",
-            "gdt-sm",
-            "gdt-xs",
-            "gdt-subtext",
-            "gdt-capitalized"
-          ]
-        }
-      ]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-// src/components/ui/button.tsx
-import { Button as ButtonPrimitive } from "@base-ui/react/button";
-import { cva } from "class-variance-authority";
-import { Loader } from "lucide-react";
-
-// src/components/ui/size-context.tsx
-import { createContext, useContext } from "react";
-import { Fragment, jsx } from "react/jsx-runtime";
-var SizeContext = createContext(void 0);
-function SizeProvider({
-  children,
-  size
-}) {
-  if (!size) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(SizeContext.Provider, { value: size, children });
-}
-function useComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext(SizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/button.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-full bg-clip-padding whitespace-nowrap font-bold transition-[background-color,color,border-color,box-shadow,transform] outline-none select-none focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        primary: "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover active:bg-action-primary-pressed",
-        "primary-outline": "border-2 border-action-primary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        secondary: "bg-surface-brand-subtle text-fg-brand hover:bg-action-primary-hover hover:text-fg-on-brand active:bg-action-primary-pressed active:text-fg-on-brand data-focused:bg-action-primary-hover data-pressed:bg-action-primary-pressed data-focused:text-fg-on-brand data-pressed:text-fg-on-brand",
-        "secondary-outline": "border-2 border-action-secondary bg-transparent text-fg-brand hover:bg-surface-brand-subtle active:bg-surface-brand-subtle data-focused:bg-surface-brand-subtle data-pressed:bg-surface-brand-subtle",
-        tertiary: "bg-action-tertiary text-fg-primary hover:bg-action-tertiary-hover active:bg-action-tertiary-pressed data-focused:bg-action-tertiary-hover data-pressed:bg-action-tertiary-pressed",
-        "tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
-        danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-        "glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand",
-        "link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
-        "link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"
-      },
-      size: {
-        sm: "h-8 gap-2 px-3.5 text-gdt-xs has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3 [&_svg:not([class*='size-'])]:size-3.5",
-        md: "h-10 gap-2 px-4.5 text-gdt-sm has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-        lg: "h-12.5 gap-2.5 px-5.5 text-gdt-md has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 [&_svg:not([class*='size-'])]:size-4.5",
-        xl: "h-14 gap-3 px-6.5 text-gdt-lg has-data-[icon=inline-end]:pr-6 has-data-[icon=inline-start]:pl-6 [&_svg:not([class*='size-'])]:size-5",
-        icon: "size-10",
-        "icon-xs": "size-6 text-gdt-xs [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-8 text-gdt-sm [&_svg:not([class*='size-'])]:size-3.5",
-        "icon-lg": "size-12.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5",
-        "icon-xl": "size-14 text-gdt-lg [&_svg:not([class*='size-'])]:size-5"
-      }
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "md"
-    }
-  }
-);
-function Button({
-  className,
-  variant = "primary",
-  size,
-  isLoading = false,
-  children,
-  disabled = false,
-  ...props
-}) {
-  const inheritedSize = useComponentSize();
-  const resolvedSize = size ?? inheritedSize;
-  const _disabled = disabled || isLoading;
-  return /* @__PURE__ */ jsxs(
-    ButtonPrimitive,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size: resolvedSize, className })),
-      disabled: _disabled,
-      ...props,
-      children: [
-        isLoading && /* @__PURE__ */ jsx2(Loader, { className: "size-4 animate-spin" }),
-        " ",
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/dropdown-menu.tsx
-import { Menu as MenuPrimitive } from "@base-ui/react/menu";
-import { cva as cva2 } from "class-variance-authority";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function DropdownMenu({
-  children,
-  size,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx3(SizeProvider, { size, children: /* @__PURE__ */ jsx3(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props, children }) });
-}
-function DropdownMenuTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
-}
-var dropdownMenuContentVariants = cva2(
-  "relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto border border-line-subtle bg-canvas text-fg-primary shadow-(--elevation-e1-shadow) duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
-  {
-    variants: {
-      size: {
-        sm: "rounded-lg p-1",
-        md: "rounded-xl p-1.5",
-        lg: "rounded-[18px] p-2"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var dropdownMenuItemVariants = cva2(
-  "group/dropdown-menu-item relative flex w-full cursor-pointer items-center font-normal text-fg-primary outline-none transition-colors select-none focus:bg-surface focus:text-fg-primary data-highlighted:bg-surface data-highlighted:text-fg-primary data-[variant=destructive]:text-fg-danger data-[variant=destructive]:focus:bg-surface-danger-subtle data-[variant=destructive]:focus:text-fg-danger data-[variant=destructive]:data-highlighted:bg-surface-danger-subtle data-[variant=destructive]:data-highlighted:text-fg-danger data-disabled:pointer-events-none data-disabled:text-fg-caption-placeholder data-disabled:opacity-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[variant=destructive]:[&_svg]:text-fg-danger",
-  {
-    variants: {
-      size: {
-        sm: "gap-1.5 rounded-md px-3 py-1.5 text-gdt-xs [&_svg:not([class*='size-'])]:size-3.5",
-        md: "gap-2 rounded-md px-4 py-2 text-gdt-sm [&_svg:not([class*='size-'])]:size-4",
-        lg: "gap-2.5 rounded-md px-4 py-2.5 text-gdt-md [&_svg:not([class*='size-'])]:size-4.5"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-var dropdownMenuLabelVariants = cva2(
-  "font-medium text-fg-secondary data-inset:pl-8",
-  {
-    variants: {
-      size: {
-        sm: "px-3 py-1 text-gdt-xs",
-        md: "px-3 py-1 text-gdt-xs",
-        lg: "px-4 py-1.5 text-gdt-sm"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function DropdownMenuContent({
-  align = "start",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  className,
-  ...props
-}) {
-  const resolvedSize = useComponentSize();
-  return /* @__PURE__ */ jsx3(MenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
-    MenuPrimitive.Positioner,
-    {
-      className: "isolate z-50 outline-none",
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      children: /* @__PURE__ */ jsx3(
-        MenuPrimitive.Popup,
-        {
-          "data-slot": "dropdown-menu-content",
-          "data-size": resolvedSize,
-          className: cn(
-            dropdownMenuContentVariants({ size: resolvedSize }),
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) });
-}
-function DropdownMenuRadioGroup({ ...props }) {
-  return /* @__PURE__ */ jsx3(
-    MenuPrimitive.RadioGroup,
-    {
-      "data-slot": "dropdown-menu-radio-group",
-      ...props
-    }
-  );
-}
-function DropdownMenuRadioItem({
-  className,
-  children,
-  inset,
-  ...props
-}) {
-  const resolvedSize = useComponentSize();
-  return /* @__PURE__ */ jsxs2(
-    MenuPrimitive.RadioItem,
-    {
-      "data-slot": "dropdown-menu-radio-item",
-      "data-inset": inset,
-      "data-size": resolvedSize,
-      className: cn(
-        dropdownMenuItemVariants({ size: resolvedSize }),
-        "pr-10 data-inset:pl-8",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx3(
-          "span",
-          {
-            className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
-            "data-slot": "dropdown-menu-radio-item-indicator",
-            children: /* @__PURE__ */ jsx3(MenuPrimitive.RadioItemIndicator, { children: /* @__PURE__ */ jsx3(CheckIcon, {}) })
-          }
-        ),
-        children
-      ]
-    }
-  );
-}
-
-// src/components/ui/input.tsx
-import { Input as InputPrimitive } from "@base-ui/react/input";
-import { cva as cva3 } from "class-variance-authority";
-
-// src/components/ui/input-size-context.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
-var InputSizeContext = createContext2(
-  void 0
-);
-function useInputComponentSize(size, fallback = "md") {
-  const inheritedSize = useContext2(InputSizeContext);
-  return size ?? inheritedSize ?? fallback;
-}
-
-// src/components/ui/input.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var inputVariants = cva3(
-  "flex w-full min-w-0 rounded-full border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-normal file:text-fg-primary placeholder:text-fg-muted hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-muted disabled:placeholder:text-fg-muted aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none",
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-3 text-gdt-xs font-normal file:text-gdt-xs",
-        md: "h-10 px-3.5 text-gdt-sm font-normal file:text-gdt-sm",
-        lg: "h-12 px-4 text-gdt-md font-normal file:text-gdt-md",
-        xl: "h-14 px-4.5 text-gdt-lg font-normal file:text-gdt-lg"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-);
-function Input({ className, size, type, ...props }) {
-  const resolvedSize = useInputComponentSize(size);
-  return /* @__PURE__ */ jsx5(
-    InputPrimitive,
-    {
-      type,
-      "data-slot": "input",
-      "data-size": resolvedSize,
-      className: cn(inputVariants({ size: resolvedSize }), className),
-      ...props
-    }
-  );
-}
-
-// src/components/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  alignOffset = 0,
-  side = "bottom",
-  sideOffset = 6,
-  showArrow = true,
-  size = "md",
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx6(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx6(
-    PopoverPrimitive.Positioner,
-    {
-      align,
-      alignOffset,
-      side,
-      sideOffset,
-      className: "isolate z-50",
-      children: /* @__PURE__ */ jsxs3(
-        PopoverPrimitive.Popup,
-        {
-          "data-slot": "popover-content",
-          className: cn(
-            "z-50 relative flex w-72 max-w-[calc(100vw-2rem)] origin-(--transform-origin) flex-col rounded-lg border-0 bg-surface-overlay py-4 text-gdt-sm text-fg-primary shadow-2 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 has-[&_[data-slot=popover-footer]]:pb-0",
-            className
-          ),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx6(SizeProvider, { size, children }),
-            showArrow ? /* @__PURE__ */ jsx6(PopoverPrimitive.Arrow, { className: "relative block w-3 h-1.5 overflow-clip data-[side=bottom]:top-[-6px] data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:w-[calc(6px*sqrt(2))] before:h-[calc(6px*sqrt(2))] before:bg-surface-overlay before:border before:border-line before:[transform:translate(-50%,50%)_rotate(45deg)]" }) : null
-          ]
-        }
-      )
-    }
-  ) });
-}
-
-// src/components/ui/rich-text-editor.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var SIZES = {
-  sm: {
-    width: "max-w-[420px]",
-    content: "min-h-[140px]",
-    contentPad: "px-4 py-3",
-    text: "text-gdt-xs",
-    icon: "[&_svg:not([class*='size-'])]:size-3.5",
-    button: "h-7 min-w-7 px-1",
-    toolbarPad: "px-2 py-1.5",
-    toolbarGap: "gap-0.5",
-    divider: "h-4"
-  },
-  md: {
-    width: "max-w-[520px]",
-    content: "min-h-[172px]",
-    contentPad: "px-5 py-4",
-    text: "text-gdt-sm",
-    icon: "[&_svg:not([class*='size-'])]:size-4",
-    button: "h-8 min-w-8 px-1.5",
-    toolbarPad: "px-2.5 py-2",
-    toolbarGap: "gap-0.5",
-    divider: "h-5"
-  },
-  lg: {
-    width: "max-w-[600px]",
-    content: "min-h-[206px]",
-    contentPad: "px-6 py-5",
-    text: "text-gdt-md",
-    icon: "[&_svg:not([class*='size-'])]:size-[18px]",
-    button: "h-9 min-w-9 px-2",
-    toolbarPad: "px-3 py-2.5",
-    toolbarGap: "gap-1",
-    divider: "h-6"
-  }
+//#region src/rich-text-editor.tsx
+const SIZES = {
+	sm: {
+		content: "min-h-[140px]",
+		contentPad: "px-4 py-3",
+		text: "text-gdt-xs",
+		icon: "[&_svg:not([class*='size-'])]:size-3.5",
+		button: "h-7 min-w-7 px-1",
+		toolbarPad: "px-2 py-1.5",
+		toolbarGap: "gap-0.5",
+		divider: "h-4"
+	},
+	md: {
+		content: "min-h-[172px]",
+		contentPad: "px-5 py-4",
+		text: "text-gdt-sm",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		button: "h-8 min-w-8 px-1.5",
+		toolbarPad: "px-2.5 py-2",
+		toolbarGap: "gap-0.5",
+		divider: "h-5"
+	},
+	lg: {
+		content: "min-h-[206px]",
+		contentPad: "px-6 py-5",
+		text: "text-gdt-md",
+		icon: "[&_svg:not([class*='size-'])]:size-[18px]",
+		button: "h-9 min-w-9 px-2",
+		toolbarPad: "px-3 py-2.5",
+		toolbarGap: "gap-1",
+		divider: "h-6"
+	}
 };
-var TEXT_COLORS = [
-  { label: "Default", value: "" },
-  { label: "Forest", value: "#2f5a2c" },
-  { label: "Brass", value: "#b8861a" },
-  { label: "Clay", value: "#b2542b" },
-  { label: "Moss", value: "#4e4d29" },
-  { label: "Stone", value: "#5c5648" },
-  { label: "Ink", value: "#1f1c18" }
+const TEXT_COLORS = [
+	{
+		label: "Default",
+		value: "",
+		swatch: ""
+	},
+	{
+		label: "Forest",
+		value: "#2f5a2c",
+		swatch: "var(--color-forest-500)"
+	},
+	{
+		label: "Brass",
+		value: "#b8861a",
+		swatch: "var(--color-brass-400)"
+	},
+	{
+		label: "Clay",
+		value: "#b2542b",
+		swatch: "var(--color-clay-500)"
+	},
+	{
+		label: "Moss",
+		value: "#4e4d29",
+		swatch: "var(--color-moss-500)"
+	},
+	{
+		label: "Stone",
+		value: "#5c5648",
+		swatch: "var(--color-stone-600)"
+	},
+	{
+		label: "Ink",
+		value: "#1f1c18",
+		swatch: "var(--color-stone-900)"
+	}
 ];
-var BLOCK_OPTIONS = [
-  { value: "paragraph", label: "Normal" },
-  { value: "h1", label: "Heading 1" },
-  { value: "h2", label: "Heading 2" },
-  { value: "h3", label: "Heading 3" }
+const BLOCK_OPTIONS = [
+	{
+		value: "paragraph",
+		label: "Normal"
+	},
+	{
+		value: "h1",
+		label: "Heading 1"
+	},
+	{
+		value: "h2",
+		label: "Heading 2"
+	},
+	{
+		value: "h3",
+		label: "Heading 3"
+	}
 ];
 function toolbarControlClass(tokens, active) {
-  return cn(
-    "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-fg-secondary outline-none transition-colors select-none",
-    "hover:bg-action-tertiary-hover hover:text-fg-primary",
-    "focus-visible:ring-2 focus-visible:ring-line-focus",
-    "disabled:pointer-events-none disabled:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40",
-    tokens.button,
-    tokens.icon,
-    tokens.text,
-    active && "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover hover:text-fg-on-brand"
-  );
+	return cn("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium text-fg-secondary outline-none transition-colors select-none", "hover:bg-action-tertiary-hover hover:text-fg-primary", "focus-visible:ring-2 focus-visible:ring-line-focus", "disabled:pointer-events-none disabled:opacity-40 data-disabled:pointer-events-none data-disabled:opacity-40", tokens.button, tokens.icon, tokens.text, active && "bg-action-primary text-fg-on-brand hover:bg-action-primary-hover hover:text-fg-on-brand");
 }
-function ToolbarButton({
-  tokens,
-  label,
-  active,
-  disabled,
-  onClick,
-  children
-}) {
-  return /* @__PURE__ */ jsx7(
-    "button",
-    {
-      type: "button",
-      "aria-label": label,
-      title: label,
-      "aria-pressed": active,
-      disabled,
-      onMouseDown: (event) => event.preventDefault(),
-      onClick,
-      className: toolbarControlClass(tokens, active),
-      children
-    }
-  );
+function ToolbarButton({ tokens, label, active, disabled, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": label,
+		title: label,
+		"aria-pressed": active,
+		disabled,
+		onMouseDown: (event) => event.preventDefault(),
+		onClick,
+		className: toolbarControlClass(tokens, active),
+		children
+	});
 }
 function ToolbarDivider({ tokens }) {
-  return /* @__PURE__ */ jsx7(
-    "span",
-    {
-      "aria-hidden": "true",
-      className: cn("mx-1 w-px shrink-0 self-center bg-line", tokens.divider)
-    }
-  );
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("mx-1 w-px shrink-0 self-center bg-line", tokens.divider)
+	});
 }
-function BlockControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const current = BLOCK_OPTIONS.find((option) => option.value === value);
-  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxs4(
-      DropdownMenuTrigger,
-      {
-        disabled,
-        onMouseDown: (event) => event.preventDefault(),
-        className: cn(
-          toolbarControlClass(tokens),
-          "w-auto justify-between gap-1 px-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsx7("span", { className: "whitespace-nowrap", children: current?.label ?? "Normal" }),
-          /* @__PURE__ */ jsx7(ChevronDown, { className: "size-3.5 opacity-70" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-40", children: /* @__PURE__ */ jsx7(
-      DropdownMenuRadioGroup,
-      {
-        value,
-        onValueChange: (next) => onChange(next),
-        children: BLOCK_OPTIONS.map((option) => /* @__PURE__ */ jsx7(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value))
-      }
-    ) })
-  ] });
+function BlockControl({ tokens, value, disabled, onChange }) {
+	const current = BLOCK_OPTIONS.find((option) => option.value === value);
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		disabled,
+		className: cn(toolbarControlClass(tokens), "w-auto justify-between gap-1 px-2"),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap",
+			children: current?.label ?? "Normal"
+		}), /* @__PURE__ */ jsx(ChevronDown, { className: "size-3.5 opacity-70" })]
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "min-w-40",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange: (next) => onChange(next),
+			children: BLOCK_OPTIONS.map((option) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: option.value,
+				closeOnClick: true,
+				children: option.label
+			}, option.value))
+		})
+	})] });
 }
-function ColorControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const [open, setOpen] = React.useState(false);
-  const active = value !== "";
-  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx7(
-      PopoverTrigger,
-      {
-        disabled,
-        "aria-label": "Text colour",
-        title: "Text colour",
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, false),
-        children: /* @__PURE__ */ jsxs4("span", { className: "relative inline-flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx7(Baseline, { className: active ? "text-fg-brand" : void 0 }),
-          /* @__PURE__ */ jsx7(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "mt-px h-0.5 w-3 rounded-full",
-              style: { backgroundColor: active ? value : "currentColor" }
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx7(
-      PopoverContent,
-      {
-        showArrow: false,
-        align: "start",
-        sideOffset: 8,
-        className: "w-auto py-3",
-        children: /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-4 gap-2 px-4", children: TEXT_COLORS.map((color) => {
-          const isSelected = color.value === value;
-          return /* @__PURE__ */ jsx7(
-            "button",
-            {
-              type: "button",
-              title: color.label,
-              "aria-label": color.label,
-              "aria-pressed": isSelected,
-              onClick: () => {
-                onChange(color.value);
-                setOpen(false);
-              },
-              className: cn(
-                "flex size-7 items-center justify-center rounded-full border transition-[box-shadow,border-color] outline-none",
-                "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus",
-                isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"
-              ),
-              children: /* @__PURE__ */ jsx7(
-                "span",
-                {
-                  className: cn(
-                    "flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold",
-                    color.value === "" && "text-fg-secondary"
-                  ),
-                  style: color.value ? { backgroundColor: color.value, color: "#fff" } : void 0,
-                  children: "A"
-                }
-              )
-            },
-            color.label
-          );
-        }) })
-      }
-    )
-  ] });
+function ColorControl({ tokens, value, disabled, onChange }) {
+	const [open, setOpen] = React.useState(false);
+	const active = value !== "";
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Text colour",
+			title: "Text colour",
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, false),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "relative inline-flex flex-col items-center",
+				children: [/* @__PURE__ */ jsx(Baseline, { className: active ? "text-fg-brand" : void 0 }), /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "mt-px h-0.5 w-3 rounded-full",
+					style: { backgroundColor: active ? value : "currentColor" }
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			className: "w-auto py-3",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "grid grid-cols-4 gap-2 px-4",
+				children: TEXT_COLORS.map((color) => {
+					const isSelected = color.value === value;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						title: color.label,
+						"aria-label": color.label,
+						"aria-pressed": isSelected,
+						onClick: () => {
+							onChange(color.value);
+							setOpen(false);
+						},
+						className: cn("flex size-7 items-center justify-center rounded-full border transition-[box-shadow,border-color] outline-none", "hover:border-line-strong focus-visible:ring-2 focus-visible:ring-line-focus", isSelected ? "border-line-focus ring-2 ring-line-focus/40" : "border-line"),
+						children: /* @__PURE__ */ jsx("span", {
+							className: cn("flex size-5 items-center justify-center rounded-full text-gdt-xs font-bold", color.value === "" && "text-fg-secondary"),
+							style: color.value ? {
+								backgroundColor: color.swatch,
+								color: "var(--color-stone-0, #fff)"
+							} : void 0,
+							children: "A"
+						})
+					}, color.label);
+				})
+			})
+		})]
+	});
 }
-function LinkControl({
-  tokens,
-  active,
-  currentHref,
-  disabled,
-  onApply,
-  onRemove
-}) {
-  const [open, setOpen] = React.useState(false);
-  const [href, setHref] = React.useState("");
-  function handleOpenChange(next) {
-    if (next) setHref(currentHref);
-    setOpen(next);
-  }
-  function handleSubmit(event) {
-    event.preventDefault();
-    const trimmed = href.trim();
-    if (trimmed) onApply(trimmed);
-    else onRemove();
-    setOpen(false);
-  }
-  return /* @__PURE__ */ jsxs4(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx7(
-      PopoverTrigger,
-      {
-        disabled,
-        "aria-label": "Insert link",
-        title: "Insert link",
-        "aria-pressed": active,
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, active),
-        children: /* @__PURE__ */ jsx7(Link2, {})
-      }
-    ),
-    /* @__PURE__ */ jsx7(PopoverContent, { showArrow: false, align: "start", sideOffset: 8, children: /* @__PURE__ */ jsxs4("form", { className: "flex flex-col gap-3 px-4", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsx7(
-        Input,
-        {
-          autoFocus: true,
-          size: "sm",
-          type: "url",
-          placeholder: "https://example.com",
-          value: href,
-          onChange: (event) => setHref(event.target.value)
-        }
-      ),
-      /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ jsx7(
-          Button,
-          {
-            type: "button",
-            variant: "tertiary-outline",
-            size: "sm",
-            disabled: !active,
-            onClick: () => {
-              onRemove();
-              setOpen(false);
-            },
-            children: "Remove"
-          }
-        ),
-        /* @__PURE__ */ jsx7(Button, { type: "submit", size: "sm", children: "Apply" })
-      ] })
-    ] }) })
-  ] });
+function LinkControl({ tokens, active, currentHref, disabled, onApply, onRemove }) {
+	const [open, setOpen] = React.useState(false);
+	const [href, setHref] = React.useState("");
+	function handleOpenChange(next) {
+		if (next) setHref(currentHref);
+		setOpen(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		const trimmed = href.trim();
+		if (trimmed) onApply(trimmed);
+		else onRemove();
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Insert link",
+			title: "Insert link",
+			"aria-pressed": active,
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, active),
+			children: /* @__PURE__ */ jsx(Link2, {})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-3 px-4",
+				onSubmit: handleSubmit,
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					size: "sm",
+					type: "url",
+					placeholder: "https://example.com",
+					value: href,
+					onChange: (event) => setHref(event.target.value)
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-2",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "tertiary-outline",
+						size: "sm",
+						disabled: !active,
+						onClick: () => {
+							onRemove();
+							setOpen(false);
+						},
+						children: "Remove"
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "sm",
+						children: "Apply"
+					})]
+				})]
+			})
+		})]
+	});
 }
-var ALIGN_OPTIONS = [
-  { value: "left", label: "Left", Icon: AlignLeft },
-  { value: "center", label: "Center", Icon: AlignCenter },
-  { value: "right", label: "Right", Icon: AlignRight },
-  { value: "justify", label: "Justify", Icon: AlignJustify }
-];
-function AlignControl({
-  tokens,
-  value,
-  disabled,
-  onChange
-}) {
-  const current = ALIGN_OPTIONS.find((option) => option.value === value);
-  const Icon = current?.Icon ?? AlignLeft;
-  return /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx7(
-      DropdownMenuTrigger,
-      {
-        disabled,
-        "aria-label": "Text alignment",
-        title: "Text alignment",
-        onMouseDown: (event) => event.preventDefault(),
-        className: toolbarControlClass(tokens, value !== "left"),
-        children: /* @__PURE__ */ jsx7(Icon, {})
-      }
-    ),
-    /* @__PURE__ */ jsx7(DropdownMenuContent, { className: "min-w-36", children: /* @__PURE__ */ jsx7(
-      DropdownMenuRadioGroup,
-      {
-        value,
-        onValueChange: (next) => onChange(next),
-        children: ALIGN_OPTIONS.map(
-          ({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs4(DropdownMenuRadioItem, { value: optionValue, children: [
-            /* @__PURE__ */ jsx7(OptionIcon, {}),
-            label
-          ] }, optionValue)
-        )
-      }
-    ) })
-  ] });
+function ImageControl({ tokens, disabled, onInsert }) {
+	const [open, setOpen] = React.useState(false);
+	const [src, setSrc] = React.useState("");
+	function handleOpenChange(next) {
+		if (next) setSrc("");
+		setOpen(next);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		const trimmed = src.trim();
+		if (trimmed) onInsert(trimmed);
+		setOpen(false);
+	}
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			disabled,
+			"aria-label": "Insert image",
+			title: "Insert image",
+			onMouseDown: (event) => event.preventDefault(),
+			className: toolbarControlClass(tokens, false),
+			children: /* @__PURE__ */ jsx(ImageIcon, {})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			showArrow: false,
+			align: "start",
+			sideOffset: 8,
+			children: /* @__PURE__ */ jsxs("form", {
+				className: "flex flex-col gap-3 px-4",
+				onSubmit: handleSubmit,
+				children: [/* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					size: "sm",
+					type: "url",
+					placeholder: "https://example.com/image.jpg",
+					value: src,
+					onChange: (event) => setSrc(event.target.value)
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex items-center justify-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "sm",
+						disabled: !src.trim(),
+						children: "Insert"
+					})
+				})]
+			})
+		})]
+	});
 }
-var EMPTY_STATE = {
-  block: "paragraph",
-  align: "left",
-  color: "",
-  linkHref: "",
-  isBold: false,
-  isItalic: false,
-  isUnderline: false,
-  isBulletList: false,
-  isOrderedList: false,
-  isBlockquote: false,
-  isCodeBlock: false,
-  isLink: false,
-  canUndo: false,
-  canRedo: false
-};
-function RichTextEditor({
-  value,
-  defaultValue,
-  onChange,
-  size,
-  placeholder = "Start writing, or paste your content here. Format text and add lists, links, and images using the toolbar above.",
-  disabled = false,
-  className,
-  "aria-label": ariaLabel = "Rich text editor"
-}) {
-  const resolvedSize = useComponentSize(size);
-  const tokens = SIZES[resolvedSize];
-  const [focused, setFocused] = React.useState(false);
-  const editor = useEditor({
-    immediatelyRender: false,
-    editable: !disabled,
-    content: value ?? defaultValue ?? "",
-    extensions: [
-      StarterKit.configure({
-        link: {
-          openOnClick: false,
-          HTMLAttributes: { rel: "noopener noreferrer nofollow" }
-        }
-      }),
-      TextStyle,
-      Color,
-      TextAlign.configure({ types: ["heading", "paragraph"] }),
-      Image.configure({ inline: false, allowBase64: true }),
-      Placeholder.configure({ placeholder })
-    ],
-    editorProps: {
-      attributes: {
-        "aria-label": ariaLabel,
-        role: "textbox",
-        "aria-multiline": "true",
-        class: cn("tiptap focus:outline-none", tokens.text)
-      }
-    },
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-    onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML())
-  });
-  React.useEffect(() => {
-    editor?.setEditable(!disabled);
-  }, [editor, disabled]);
-  React.useEffect(() => {
-    if (!editor || value === void 0) return;
-    if (value !== editor.getHTML()) {
-      editor.commands.setContent(value, { emitUpdate: false });
-    }
-  }, [editor, value]);
-  const state = useEditorState({
-    editor,
-    selector: ({ editor: instance }) => {
-      if (!instance) return EMPTY_STATE;
-      const block = instance.isActive("heading", { level: 1 }) ? "h1" : instance.isActive("heading", { level: 2 }) ? "h2" : instance.isActive("heading", { level: 3 }) ? "h3" : "paragraph";
-      const align = instance.isActive({ textAlign: "center" }) ? "center" : instance.isActive({ textAlign: "right" }) ? "right" : instance.isActive({ textAlign: "justify" }) ? "justify" : "left";
-      return {
-        block,
-        align,
-        color: instance.getAttributes("textStyle").color ?? "",
-        linkHref: instance.getAttributes("link").href ?? "",
-        isBold: instance.isActive("bold"),
-        isItalic: instance.isActive("italic"),
-        isUnderline: instance.isActive("underline"),
-        isBulletList: instance.isActive("bulletList"),
-        isOrderedList: instance.isActive("orderedList"),
-        isBlockquote: instance.isActive("blockquote"),
-        isCodeBlock: instance.isActive("codeBlock"),
-        isLink: instance.isActive("link"),
-        canUndo: instance.can().undo(),
-        canRedo: instance.can().redo()
-      };
-    }
-  });
-  const s = state ?? EMPTY_STATE;
-  function setBlock(next) {
-    if (!editor) return;
-    const chain = editor.chain().focus();
-    if (next === "paragraph") chain.setParagraph().run();
-    else chain.toggleHeading({ level: Number(next[1]) }).run();
-  }
-  function setAlign(next) {
-    editor?.chain().focus().setTextAlign(next).run();
-  }
-  function setColor(next) {
-    if (!editor) return;
-    if (next) editor.chain().focus().setColor(next).run();
-    else editor.chain().focus().unsetColor().run();
-  }
-  function applyLink(href) {
-    editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
-  }
-  function removeLink() {
-    editor?.chain().focus().extendMarkRange("link").unsetLink().run();
-  }
-  function insertImage() {
-    const url = window.prompt("Image URL");
-    if (url) editor?.chain().focus().setImage({ src: url }).run();
-  }
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      "data-slot": "rich-text-editor",
-      "data-disabled": disabled || void 0,
-      "data-focused": focused || void 0,
-      className: cn(
-        "group/editor flex w-full flex-col overflow-hidden rounded-2xl border bg-surface text-fg-primary shadow-1 transition-[border-color,box-shadow]",
-        disabled ? "border-line-subtle opacity-60" : focused ? "border-line-focus ring-2 ring-line-focus/35" : "border-line hover:border-line-strong",
-        tokens.width,
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs4(
-          "div",
-          {
-            role: "toolbar",
-            "aria-label": "Formatting",
-            "aria-orientation": "horizontal",
-            className: cn(
-              "flex flex-wrap items-center bg-surface-raised",
-              tokens.toolbarPad,
-              tokens.toolbarGap
-            ),
-            children: [
-              /* @__PURE__ */ jsx7(
-                BlockControl,
-                {
-                  tokens,
-                  value: s.block,
-                  disabled,
-                  onChange: setBlock
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Bold",
-                  active: s.isBold,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBold().run(),
-                  children: /* @__PURE__ */ jsx7(Bold, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Italic",
-                  active: s.isItalic,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleItalic().run(),
-                  children: /* @__PURE__ */ jsx7(Italic, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Underline",
-                  active: s.isUnderline,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleUnderline().run(),
-                  children: /* @__PURE__ */ jsx7(Underline, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ColorControl,
-                {
-                  tokens,
-                  value: s.color,
-                  disabled,
-                  onChange: setColor
-                }
-              ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Numbered list",
-                  active: s.isOrderedList,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-                  children: /* @__PURE__ */ jsx7(ListOrdered, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Bullet list",
-                  active: s.isBulletList,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBulletList().run(),
-                  children: /* @__PURE__ */ jsx7(List, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                AlignControl,
-                {
-                  tokens,
-                  value: s.align,
-                  disabled,
-                  onChange: setAlign
-                }
-              ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
-                LinkControl,
-                {
-                  tokens,
-                  active: s.isLink,
-                  currentHref: s.linkHref,
-                  disabled,
-                  onApply: applyLink,
-                  onRemove: removeLink
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Quote",
-                  active: s.isBlockquote,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-                  children: /* @__PURE__ */ jsx7(Quote, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Code block",
-                  active: s.isCodeBlock,
-                  disabled,
-                  onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
-                  children: /* @__PURE__ */ jsx7(Code2, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Insert image",
-                  disabled,
-                  onClick: insertImage,
-                  children: /* @__PURE__ */ jsx7(ImageIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(ToolbarDivider, { tokens }),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Undo",
-                  disabled: disabled || !s.canUndo,
-                  onClick: () => editor?.chain().focus().undo().run(),
-                  children: /* @__PURE__ */ jsx7(Undo2, {})
-                }
-              ),
-              /* @__PURE__ */ jsx7(
-                ToolbarButton,
-                {
-                  tokens,
-                  label: "Redo",
-                  disabled: disabled || !s.canRedo,
-                  onClick: () => editor?.chain().focus().redo().run(),
-                  children: /* @__PURE__ */ jsx7(Redo2, {})
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx7("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
-        /* @__PURE__ */ jsx7(
-          EditorContent,
-          {
-            editor,
-            className: cn(
-              "gdt-rich-text min-w-0 flex-1 overflow-y-auto",
-              tokens.content,
-              tokens.contentPad
-            )
-          }
-        )
-      ]
-    }
-  );
+const ALIGN_OPTIONS = [
+	{
+		value: "left",
+		label: "Left",
+		Icon: AlignLeft
+	},
+	{
+		value: "center",
+		label: "Center",
+		Icon: AlignCenter
+	},
+	{
+		value: "right",
+		label: "Right",
+		Icon: AlignRight
+	},
+	{
+		value: "justify",
+		label: "Justify",
+		Icon: AlignJustify
+	}
+];
+function AlignControl({ tokens, value, disabled, onChange }) {
+	const Icon = ALIGN_OPTIONS.find((option) => option.value === value)?.Icon ?? AlignLeft;
+	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		disabled,
+		"aria-label": "Text alignment",
+		title: "Text alignment",
+		className: toolbarControlClass(tokens, value !== "left"),
+		children: /* @__PURE__ */ jsx(Icon, {})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		className: "min-w-36",
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value,
+			onValueChange: (next) => onChange(next),
+			children: ALIGN_OPTIONS.map(({ value: optionValue, label, Icon: OptionIcon }) => /* @__PURE__ */ jsxs(DropdownMenuRadioItem, {
+				value: optionValue,
+				closeOnClick: true,
+				children: [/* @__PURE__ */ jsx(OptionIcon, {}), label]
+			}, optionValue))
+		})
+	})] });
 }
-export {
-  RichTextEditor
+const EMPTY_STATE = {
+	block: "paragraph",
+	align: "left",
+	color: "",
+	linkHref: "",
+	isBold: false,
+	isItalic: false,
+	isUnderline: false,
+	isBulletList: false,
+	isOrderedList: false,
+	isBlockquote: false,
+	isCodeBlock: false,
+	isLink: false,
+	canUndo: false,
+	canRedo: false
 };
-//# sourceMappingURL=rich-text-editor.js.map
+const RichTextEditor = React.forwardRef(function RichTextEditor({ value, defaultValue, onChange, size, placeholder = "Start writing, or paste your content here. Format text and add lists, links, and images using the toolbar above.", disabled = false, className, id, "aria-label": ariaLabel = "Rich text editor", "aria-invalid": ariaInvalid }, ref) {
+	const resolvedSize = useComponentSize(size);
+	const tokens = SIZES[resolvedSize];
+	const [focused, setFocused] = React.useState(false);
+	const invalid = ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const editor = useEditor({
+		immediatelyRender: false,
+		editable: !disabled,
+		content: value ?? defaultValue ?? "",
+		extensions: [
+			StarterKit.configure({ link: {
+				openOnClick: false,
+				HTMLAttributes: { rel: "noopener noreferrer nofollow" }
+			} }),
+			TextStyle,
+			Color,
+			TextAlign.configure({ types: ["heading", "paragraph"] }),
+			Image.configure({
+				inline: false,
+				allowBase64: true
+			}),
+			Placeholder.configure({ placeholder })
+		],
+		editorProps: { attributes: {
+			"aria-label": ariaLabel,
+			role: "textbox",
+			"aria-multiline": "true",
+			class: cn("tiptap focus:outline-none", tokens.text)
+		} },
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+		onUpdate: ({ editor: instance }) => onChange?.(instance.getHTML())
+	});
+	React.useImperativeHandle(ref, () => ({
+		focus: () => {
+			editor?.commands.focus();
+		},
+		blur: () => {
+			editor?.commands.blur();
+		}
+	}), [editor]);
+	React.useEffect(() => {
+		editor?.setEditable(!disabled);
+	}, [editor, disabled]);
+	React.useEffect(() => {
+		const dom = editor?.view.dom;
+		if (!dom) return;
+		if (invalid) dom.setAttribute("aria-invalid", "true");
+		else dom.removeAttribute("aria-invalid");
+	}, [editor, invalid]);
+	React.useEffect(() => {
+		if (!editor || !id || disabled) return;
+		const selector = `label[for="${CSS.escape(id)}"]`;
+		const handleLabelClick = (event) => {
+			if (event.target?.closest(selector)) editor.commands.focus();
+		};
+		document.addEventListener("click", handleLabelClick);
+		return () => document.removeEventListener("click", handleLabelClick);
+	}, [
+		editor,
+		id,
+		disabled
+	]);
+	React.useEffect(() => {
+		if (!editor || value === void 0) return;
+		if (value !== editor.getHTML()) editor.commands.setContent(value, { emitUpdate: false });
+	}, [editor, value]);
+	const s = useEditorState({
+		editor,
+		selector: ({ editor: instance }) => {
+			if (!instance) return EMPTY_STATE;
+			return {
+				block: instance.isActive("heading", { level: 1 }) ? "h1" : instance.isActive("heading", { level: 2 }) ? "h2" : instance.isActive("heading", { level: 3 }) ? "h3" : "paragraph",
+				align: instance.isActive({ textAlign: "center" }) ? "center" : instance.isActive({ textAlign: "right" }) ? "right" : instance.isActive({ textAlign: "justify" }) ? "justify" : "left",
+				color: instance.getAttributes("textStyle").color ?? "",
+				linkHref: instance.getAttributes("link").href ?? "",
+				isBold: instance.isActive("bold"),
+				isItalic: instance.isActive("italic"),
+				isUnderline: instance.isActive("underline"),
+				isBulletList: instance.isActive("bulletList"),
+				isOrderedList: instance.isActive("orderedList"),
+				isBlockquote: instance.isActive("blockquote"),
+				isCodeBlock: instance.isActive("codeBlock"),
+				isLink: instance.isActive("link"),
+				canUndo: instance.can().undo(),
+				canRedo: instance.can().redo()
+			};
+		}
+	}) ?? EMPTY_STATE;
+	function setBlock(next) {
+		if (!editor) return;
+		const chain = editor.chain().focus();
+		if (next === "paragraph") chain.setParagraph().run();
+		else chain.toggleHeading({ level: Number(next[1]) }).run();
+	}
+	function setAlign(next) {
+		editor?.chain().focus().setTextAlign(next).run();
+	}
+	function setColor(next) {
+		if (!editor) return;
+		if (next) editor.chain().focus().setColor(next).run();
+		else editor.chain().focus().unsetColor().run();
+	}
+	function applyLink(href) {
+		editor?.chain().focus().extendMarkRange("link").setLink({ href }).run();
+	}
+	function removeLink() {
+		editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+	}
+	function insertImage(src) {
+		editor?.chain().focus().setImage({ src }).run();
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		"data-slot": "rich-text-editor",
+		"data-disabled": disabled || void 0,
+		"data-focused": focused || void 0,
+		"data-invalid": invalid || void 0,
+		"aria-invalid": invalid || void 0,
+		className: cn("group/editor flex w-full flex-col overflow-hidden rounded-2xl border bg-surface text-fg-primary shadow-1 transition-[border-color,box-shadow]", disabled ? "border-line-subtle opacity-60" : invalid ? focused ? "border-line-danger ring-2 ring-line-danger/35" : "border-line-danger" : focused ? "border-line-focus ring-2 ring-line-focus/35" : "border-line hover:border-line-strong", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				role: "toolbar",
+				"aria-label": "Formatting",
+				"aria-orientation": "horizontal",
+				className: cn("flex flex-wrap items-center bg-surface-raised", tokens.toolbarPad, tokens.toolbarGap),
+				children: [
+					/* @__PURE__ */ jsx(BlockControl, {
+						tokens,
+						value: s.block,
+						disabled,
+						onChange: setBlock
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Bold",
+						active: s.isBold,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBold().run(),
+						children: /* @__PURE__ */ jsx(Bold, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Italic",
+						active: s.isItalic,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleItalic().run(),
+						children: /* @__PURE__ */ jsx(Italic, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Underline",
+						active: s.isUnderline,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleUnderline().run(),
+						children: /* @__PURE__ */ jsx(Underline, {})
+					}),
+					/* @__PURE__ */ jsx(ColorControl, {
+						tokens,
+						value: s.color,
+						disabled,
+						onChange: setColor
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Numbered list",
+						active: s.isOrderedList,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+						children: /* @__PURE__ */ jsx(ListOrdered, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Bullet list",
+						active: s.isBulletList,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBulletList().run(),
+						children: /* @__PURE__ */ jsx(List, {})
+					}),
+					/* @__PURE__ */ jsx(AlignControl, {
+						tokens,
+						value: s.align,
+						disabled,
+						onChange: setAlign
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(LinkControl, {
+						tokens,
+						active: s.isLink,
+						currentHref: s.linkHref,
+						disabled,
+						onApply: applyLink,
+						onRemove: removeLink
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Quote",
+						active: s.isBlockquote,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+						children: /* @__PURE__ */ jsx(Quote, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Code block",
+						active: s.isCodeBlock,
+						disabled,
+						onClick: () => editor?.chain().focus().toggleCodeBlock().run(),
+						children: /* @__PURE__ */ jsx(Code2, {})
+					}),
+					/* @__PURE__ */ jsx(ImageControl, {
+						tokens,
+						disabled,
+						onInsert: insertImage
+					}),
+					/* @__PURE__ */ jsx(ToolbarDivider, { tokens }),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Undo",
+						disabled: disabled || !s.canUndo,
+						onClick: () => editor?.chain().focus().undo().run(),
+						children: /* @__PURE__ */ jsx(Undo2, {})
+					}),
+					/* @__PURE__ */ jsx(ToolbarButton, {
+						tokens,
+						label: "Redo",
+						disabled: disabled || !s.canRedo,
+						onClick: () => editor?.chain().focus().redo().run(),
+						children: /* @__PURE__ */ jsx(Redo2, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", { className: "h-px w-full shrink-0 bg-line-subtle" }),
+			/* @__PURE__ */ jsx(EditorContent, {
+				editor,
+				className: cn("gdt-rich-text min-w-0 flex-1 overflow-y-auto", tokens.content, tokens.contentPad)
+			})
+		]
+	});
+});
+//#endregion
+export { RichTextEditor };