@12-apps/ui 5.0.0 → 5.0.1

package/dist/form/Textarea.js

@@ -0,0 +1,582 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/form/Textarea/Textarea.tsx
+import {
+  alpha as alpha3,
+  Box as Box2,
+  FormHelperText,
+  InputLabel,
+  TextareaAutosize
+} from "@mui/material";
+import { styled as styled2 } from "@mui/material";
+import { useState as useState2 } from "react";
+
+// src/components/form/Textarea/Textarea.styles.ts
+import { alpha, keyframes } from "@mui/material";
+var glowAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 5px currentColor;
+  }
+  50% {
+    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
+  }
+  100% {
+    box-shadow: 0 0 5px currentColor;
+  }
+`;
+var floatAnimation = keyframes`
+  0% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+  100% {
+    transform: translateY(0px);
+  }
+`;
+var neutralPalette = (theme) => {
+  const grey = theme.palette.grey;
+  return {
+    main: grey?.[700] || "#616161",
+    dark: grey?.[800] || "#424242",
+    light: grey?.[500] || "#9e9e9e",
+    contrastText: "#fff"
+  };
+};
+var pick = (...candidates) => candidates.find(Boolean) ?? "";
+var withFallbacks = (theme, palette) => ({
+  main: pick(palette?.main, theme.palette.primary.main),
+  dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),
+  light: pick(palette?.light, palette?.main, theme.palette.primary.light),
+  contrastText: pick(palette?.contrastText, "#fff")
+});
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") return neutralPalette(theme);
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return withFallbacks(theme, colorMap[color] || theme.palette.primary);
+};
+var textareaEmphasisStyles = ({
+  theme,
+  colorPalette,
+  glass,
+  gradient,
+  glow
+}) => {
+  const glassStyles = glass ? {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(20px)",
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    "&:hover": {
+      backgroundColor: alpha(theme.palette.background.paper, 0.15),
+      backdropFilter: "blur(25px)"
+    },
+    "&:focus": {
+      backgroundColor: alpha(theme.palette.background.paper, 0.2),
+      backdropFilter: "blur(30px)"
+    }
+  } : {};
+  const gradientStyles = gradient ? {
+    background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
+               linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,
+    border: "2px solid transparent",
+    "&:focus": {
+      background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,
+                 linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`
+    }
+  } : {};
+  const glowStyles = glow ? {
+    animation: `${glowAnimation} 2s ease-in-out infinite`,
+    boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`
+  } : {};
+  return { ...glassStyles, ...gradientStyles, ...glowStyles };
+};
+
+// src/components/form/Textarea/TextareaRichEditor.tsx
+import Code from "@mui/icons-material/Code";
+import FormatBold from "@mui/icons-material/FormatBold";
+import FormatColorFill from "@mui/icons-material/FormatColorFill";
+import FormatColorText from "@mui/icons-material/FormatColorText";
+import FormatItalic from "@mui/icons-material/FormatItalic";
+import FormatListBulleted from "@mui/icons-material/FormatListBulleted";
+import FormatListNumbered from "@mui/icons-material/FormatListNumbered";
+import FormatQuote from "@mui/icons-material/FormatQuote";
+import FormatUnderlined from "@mui/icons-material/FormatUnderlined";
+import Link from "@mui/icons-material/Link";
+import { alpha as alpha2, Box, Divider, IconButton, Tooltip } from "@mui/material";
+import { styled } from "@mui/material";
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var RichToolbar = styled(Box)(({ theme, glass }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  padding: theme.spacing(1),
+  borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
+  borderBottom: `1px solid ${theme.palette.divider}`,
+  background: glass ? alpha2(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
+  ...glass && {
+    backdropFilter: "blur(15px)"
+  },
+  "& .MuiDivider-root": {
+    height: 24,
+    margin: `0 ${theme.spacing(1)}`
+  }
+}));
+var ToolbarButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ theme, active }) => ({
+  padding: theme.spacing(0.75),
+  borderRadius: theme.spacing(0.5),
+  color: active ? theme.palette.primary.main : theme.palette.text.secondary,
+  backgroundColor: active ? alpha2(theme.palette.primary.main, 0.1) : "transparent",
+  transition: "all 0.2s ease",
+  position: "relative",
+  overflow: "hidden",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: 0,
+    height: 0,
+    borderRadius: "50%",
+    backgroundColor: alpha2(theme.palette.primary.main, 0.3),
+    transform: "translate(-50%, -50%)",
+    transition: "width 0.3s, height 0.3s"
+  },
+  "&:hover": {
+    color: theme.palette.primary.main,
+    backgroundColor: alpha2(theme.palette.primary.main, 0.15),
+    transform: "translateY(-1px)",
+    animation: `${floatAnimation} 1.5s ease-in-out infinite`,
+    "&::before": {
+      width: "100%",
+      height: "100%"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.95)"
+  }
+}));
+var CharacterCount = styled(Box)(({ theme, limit, count }) => {
+  const isWarning = limit && count > limit * 0.8;
+  const isError = limit && count > limit;
+  return {
+    position: "absolute",
+    bottom: theme.spacing(1),
+    right: theme.spacing(1),
+    fontSize: "0.75rem",
+    color: isError ? theme.palette.error.main : isWarning ? theme.palette.warning.main : theme.palette.text.secondary,
+    padding: "2px 6px",
+    borderRadius: theme.spacing(0.5),
+    backgroundColor: alpha2(theme.palette.background.paper, 0.8),
+    backdropFilter: "blur(10px)",
+    transition: "all 0.3s ease"
+  };
+});
+var ContentEditableDiv = styled("div")(({ theme, error, focused, glass, customColor = "primary" }) => {
+  if (!theme) return {};
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const errorColor = theme.palette.error;
+  return {
+    minHeight: "120px",
+    padding: theme.spacing(1.5),
+    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,
+    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : theme.palette.divider}`,
+    borderTop: "none",
+    backgroundColor: glass ? alpha2(theme.palette.background.paper, 0.1) : theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: "1rem",
+    lineHeight: 1.5,
+    outline: "none",
+    transition: "all 0.3s ease",
+    cursor: "text",
+    ...glass && {
+      backdropFilter: "blur(20px)"
+    },
+    "&:hover": {
+      backgroundColor: glass ? alpha2(theme.palette.background.paper, 0.15) : alpha2(theme.palette.background.paper, 0.9)
+    },
+    "&:focus": {
+      borderColor: error ? errorColor.main : colorPalette.main,
+      boxShadow: `0 0 0 3px ${alpha2(error ? errorColor.main : colorPalette.main, 0.1)}`
+    },
+    "& > *": {
+      margin: "0.5em 0"
+    },
+    '&[contenteditable="true"]:empty::before': {
+      content: "attr(data-placeholder)",
+      color: theme.palette.text.secondary,
+      opacity: 0.6
+    }
+  };
+});
+var formatText = (command, value) => {
+  document.execCommand(command, false, value);
+};
+var useRichEditorState = ({
+  value,
+  onChange
+}) => {
+  const [focused, setFocused] = useState(false);
+  const [characterCount, setCharacterCount] = useState(0);
+  const [activeFormats, setActiveFormats] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+    list: false,
+    orderedList: false,
+    quote: false,
+    code: false
+  });
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (contentRef.current && value !== void 0) {
+      if (contentRef.current.innerHTML !== value) {
+        contentRef.current.innerHTML = value;
+      }
+      setCharacterCount(contentRef.current.innerText.length);
+    }
+  }, [value]);
+  const handleInput = () => {
+    if (contentRef.current) {
+      const html = contentRef.current.innerHTML;
+      onChange?.(html);
+      setCharacterCount(contentRef.current.innerText.length);
+      updateActiveFormats();
+    }
+  };
+  const updateActiveFormats = () => {
+    setActiveFormats({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      underline: document.queryCommandState("underline"),
+      list: document.queryCommandState("insertUnorderedList"),
+      orderedList: document.queryCommandState("insertOrderedList"),
+      quote: false,
+      code: false
+    });
+  };
+  const handleFormat = (command, value2) => {
+    formatText(command, value2);
+    updateActiveFormats();
+    contentRef.current?.focus();
+  };
+  return {
+    focused,
+    setFocused,
+    characterCount,
+    activeFormats,
+    contentRef,
+    handleInput,
+    handleFormat,
+    updateActiveFormats
+  };
+};
+var InlineFormatButtons = ({ activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Tooltip, { title: "Bold", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      active: activeFormats.bold,
+      onClick: () => onCommand("bold"),
+      children: /* @__PURE__ */ jsx(FormatBold, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Italic", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      active: activeFormats.italic,
+      onClick: () => onCommand("italic"),
+      children: /* @__PURE__ */ jsx(FormatItalic, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Underline", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      active: activeFormats.underline,
+      onClick: () => onCommand("underline"),
+      children: /* @__PURE__ */ jsx(FormatUnderlined, { fontSize: "small" })
+    }
+  ) })
+] });
+var BlockFormatButtons = ({ activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Bullet List", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      active: activeFormats.list,
+      onClick: () => onCommand("insertUnorderedList"),
+      children: /* @__PURE__ */ jsx(FormatListBulleted, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Numbered List", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      active: activeFormats.orderedList,
+      onClick: () => onCommand("insertOrderedList"),
+      children: /* @__PURE__ */ jsx(FormatListNumbered, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Quote", arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", onClick: () => onCommand("formatBlock", "blockquote"), children: /* @__PURE__ */ jsx(FormatQuote, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Code", arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", onClick: () => onCommand("formatBlock", "pre"), children: /* @__PURE__ */ jsx(Code, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Insert Link", arrow: true, children: /* @__PURE__ */ jsx(
+    ToolbarButton,
+    {
+      size: "small",
+      onClick: () => {
+        const url = window.prompt("Enter URL:");
+        if (url) onCommand("createLink", url);
+      },
+      children: /* @__PURE__ */ jsx(Link, { fontSize: "small" })
+    }
+  ) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Text Color", arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorText, { fontSize: "small" }) }) }),
+  /* @__PURE__ */ jsx(Tooltip, { title: "Background Color", arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorFill, { fontSize: "small" }) }) })
+] });
+var EditorToolbar = ({ glass, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(RichToolbar, { glass, children: [
+  /* @__PURE__ */ jsx(InlineFormatButtons, { activeFormats, onCommand }),
+  /* @__PURE__ */ jsx(BlockFormatButtons, { activeFormats, onCommand })
+] });
+var TextareaRichEditor = ({ value, onChange, placeholder, error, glass, color, characterLimit }) => {
+  const {
+    focused,
+    setFocused,
+    characterCount,
+    activeFormats,
+    contentRef,
+    handleInput,
+    handleFormat,
+    updateActiveFormats
+  } = useRichEditorState({ value, onChange });
+  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx(EditorToolbar, { glass, activeFormats, onCommand: handleFormat }),
+    /* @__PURE__ */ jsx(
+      ContentEditableDiv,
+      {
+        ref: contentRef,
+        contentEditable: true,
+        "data-placeholder": placeholder,
+        error,
+        focused,
+        glass,
+        customColor: color,
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        onInput: handleInput,
+        onKeyUp: updateActiveFormats,
+        onMouseUp: updateActiveFormats,
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": placeholder || "Rich text editor"
+      }
+    ),
+    characterLimit && /* @__PURE__ */ jsxs(CharacterCount, { limit: characterLimit, count: characterCount, children: [
+      characterCount,
+      characterLimit ? `/${characterLimit}` : ""
+    ] })
+  ] });
+};
+
+// src/components/form/Textarea/Textarea.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var StyledTextarea = styled2(TextareaAutosize, {
+  shouldForwardProp: (prop) => !["customVariant", "customColor", "customSize", "glow", "glass", "gradient", "error"].includes(
+    prop
+  )
+})(({
+  theme,
+  customVariant,
+  customColor = "primary",
+  customSize = "md",
+  glow,
+  glass,
+  gradient,
+  error
+}) => {
+  if (!theme) return {};
+  const colorPalette = getColorFromTheme(theme, customColor);
+  const errorColor = theme.palette.error;
+  const sizeMap = {
+    xs: { padding: "6px 8px", fontSize: "0.75rem", minHeight: "60px" },
+    sm: { padding: "8px 10px", fontSize: "0.875rem", minHeight: "80px" },
+    md: { padding: "10px 12px", fontSize: "1rem", minHeight: "100px" },
+    lg: { padding: "12px 14px", fontSize: "1.125rem", minHeight: "120px" },
+    xl: { padding: "14px 16px", fontSize: "1.25rem", minHeight: "140px" }
+  };
+  const baseStyles = {
+    width: "100%",
+    fontFamily: theme.typography.fontFamily,
+    borderRadius: theme.spacing(1),
+    border: `2px solid ${error ? errorColor.main : theme.palette.divider}`,
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    transition: "all 0.3s ease",
+    resize: customVariant === "resizable" ? "vertical" : "none",
+    outline: "none",
+    ...sizeMap[customSize],
+    "&::placeholder": {
+      color: theme.palette.text.secondary,
+      opacity: 0.7
+    },
+    "&:hover": {
+      borderColor: error ? errorColor.dark : colorPalette.main,
+      backgroundColor: alpha3(theme.palette.background.paper, 0.8)
+    },
+    "&:focus": {
+      borderColor: error ? errorColor.main : colorPalette.main,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: `0 0 0 3px ${alpha3(error ? errorColor.main : colorPalette.main, 0.1)}`
+    }
+  };
+  return {
+    ...baseStyles,
+    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow })
+  };
+});
+var StyledLabel = styled2(InputLabel, {
+  shouldForwardProp: (prop) => !["glass", "error"].includes(prop)
+})(({ theme, glass, error }) => ({
+  marginBottom: theme.spacing(1),
+  fontWeight: 500,
+  color: error ? theme.palette.error.main : theme.palette.text.primary,
+  ...glass && {
+    backgroundColor: alpha3(theme.palette.background.paper, 0.1),
+    backdropFilter: "blur(10px)",
+    padding: "4px 8px",
+    borderRadius: "4px",
+    border: `1px solid ${alpha3(theme.palette.divider, 0.2)}`,
+    display: "inline-block"
+  }
+}));
+var ICON_GUTTER = "40px";
+var TEXTAREA_DEFAULTS = {
+  variant: "default",
+  color: "primary",
+  size: "md",
+  error: false,
+  glassLabel: false,
+  glow: false,
+  glass: false,
+  gradient: false,
+  iconPosition: "start",
+  minRows: 3
+};
+var definedProps = (props) => Object.fromEntries(
+  Object.entries(props).filter(([, value]) => value !== void 0)
+);
+var TextareaShell = ({ testId, label, glassLabel, error, helperText, children }) => /* @__PURE__ */ jsxs2(
+  Box2,
+  {
+    sx: { position: "relative", width: "100%" },
+    "data-testid": testId ? `${testId}-wrapper` : void 0,
+    children: [
+      label && /* @__PURE__ */ jsx2(StyledLabel, { glass: glassLabel, error, children: label }),
+      children,
+      helperText && /* @__PURE__ */ jsx2(FormHelperText, { error, sx: { mt: 1 }, children: helperText })
+    ]
+  }
+);
+var TextareaIcon = ({ icon, iconPosition }) => /* @__PURE__ */ jsx2(
+  Box2,
+  {
+    sx: {
+      position: "absolute",
+      top: "12px",
+      ...iconPosition === "start" ? { left: "12px" } : { right: "12px" },
+      color: "text.secondary",
+      pointerEvents: "none",
+      zIndex: 1
+    },
+    children: icon
+  }
+);
+var Textarea = (textareaProps) => {
+  const {
+    variant,
+    color,
+    size,
+    error,
+    helperText,
+    label,
+    glassLabel,
+    glow,
+    glass,
+    gradient,
+    icon,
+    iconPosition,
+    minRows,
+    maxRows,
+    style,
+    "data-testid": dataTestId,
+    dataTestId: dataTestIdCamelCase,
+    ...props
+  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };
+  const [richTextValue, setRichTextValue] = useState2("");
+  const hasIcon = Boolean(icon);
+  const testId = dataTestId || dataTestIdCamelCase;
+  const textareaStyle = {
+    ...style,
+    // Same gap either side; only which side it applies to changes. The previous
+    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose
+    // two branches were identical.
+    ...hasIcon && {
+      [iconPosition === "start" ? "paddingLeft" : "paddingRight"]: ICON_GUTTER
+    }
+  };
+  if (variant === "rich") {
+    return /* @__PURE__ */ jsx2(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsx2(
+      TextareaRichEditor,
+      {
+        value: richTextValue,
+        onChange: setRichTextValue,
+        placeholder: props.placeholder,
+        error,
+        glass,
+        color,
+        characterLimit: props.maxLength
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx2(TextareaShell, { testId, label, glassLabel, error, helperText, children: /* @__PURE__ */ jsxs2(Box2, { sx: { position: "relative" }, children: [
+    hasIcon && /* @__PURE__ */ jsx2(TextareaIcon, { icon, iconPosition }),
+    /* @__PURE__ */ jsx2(
+      StyledTextarea,
+      {
+        customVariant: variant,
+        customColor: color,
+        customSize: size,
+        glow,
+        glass,
+        gradient,
+        error,
+        minRows: variant === "autosize" ? minRows : void 0,
+        maxRows: variant === "autosize" ? maxRows : void 0,
+        style: textareaStyle,
+        "aria-label": label || props["aria-label"],
+        "data-testid": testId,
+        ...props
+      }
+    )
+  ] }) });
+};
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/form/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/form/Textarea/Textarea.tsx","../../src/components/form/Textarea/Textarea.styles.ts","../../src/components/form/Textarea/TextareaRichEditor.tsx"],"sourcesContent":["import {\n  alpha,\n  Box,\n  FormHelperText,\n  InputLabel,\n  TextareaAutosize } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\nimport { TextareaRichEditor } from './TextareaRichEditor';\nimport type { TextareaProps } from './Textarea.types';\n\n// Interface for styled component props\ninterface StyledTextareaProps {\n  customVariant?: string;\n  customColor?: string;\n  customSize?: string;\n  glow?: boolean;\n  glass?: boolean;\n  gradient?: boolean;\n  error?: boolean;\n  theme?: Theme;\n}\n\n// Glow animation for enhanced visual effects\nconst StyledTextarea = styled(TextareaAutosize, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'customColor', 'customSize', 'glow', 'glass', 'gradient', 'error'].includes(\n      prop as string,\n    ) })<StyledTextareaProps>(({\n  theme,\n  customVariant,\n  customColor = 'primary',\n  customSize = 'md',\n  glow,\n  glass,\n  gradient,\n  error }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  const sizeMap = {\n    xs: { padding: '6px 8px', fontSize: '0.75rem', minHeight: '60px' },\n    sm: { padding: '8px 10px', fontSize: '0.875rem', minHeight: '80px' },\n    md: { padding: '10px 12px', fontSize: '1rem', minHeight: '100px' },\n    lg: { padding: '12px 14px', fontSize: '1.125rem', minHeight: '120px' },\n    xl: { padding: '14px 16px', fontSize: '1.25rem', minHeight: '140px' } };\n\n  const baseStyles = {\n    width: '100%',\n    fontFamily: theme.typography.fontFamily,\n    borderRadius: theme.spacing(1),\n    border: `2px solid ${error ? errorColor.main : theme.palette.divider}`,\n    backgroundColor: theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    transition: 'all 0.3s ease',\n    resize: customVariant === 'resizable' ? 'vertical' : 'none',\n    outline: 'none',\n    ...sizeMap[customSize as keyof typeof sizeMap],\n\n    '&::placeholder': {\n      color: theme.palette.text.secondary,\n      opacity: 0.7 },\n\n    '&:hover': {\n      borderColor: error ? errorColor.dark : colorPalette.main,\n      backgroundColor: alpha(theme.palette.background.paper, 0.8) },\n\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` } };\n\n  // Glass morphism effect\n  return {\n    ...baseStyles,\n    ...textareaEmphasisStyles({ theme, colorPalette, glass, gradient, glow }) };\n});\n\nconst StyledLabel = styled(InputLabel, {\n  shouldForwardProp: (prop) => !['glass', 'error'].includes(prop as string) })<{ glass?: boolean; error?: boolean }>(({ theme, glass, error }) => ({\n  marginBottom: theme.spacing(1),\n  fontWeight: 500,\n  color: error ? theme.palette.error.main : theme.palette.text.primary,\n  ...(glass && {\n    backgroundColor: alpha(theme.palette.background.paper, 0.1),\n    backdropFilter: 'blur(10px)',\n    padding: '4px 8px',\n    borderRadius: '4px',\n    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n    display: 'inline-block' }) }));\n\n// IconWrapper - replaced with inline Box component for better TypeScript compatibility\n// const IconWrapper = styled(Box)<{ position: 'start' | 'end' }>(({ theme, position }) => {\n//   const positionStyles = position === 'start' ? { left: '12px' } : { right: '12px' };\n//   return {\n//     position: 'absolute' as const,\n//     top: '12px',\n//     ...positionStyles,\n//     color: theme.palette.text.secondary,\n//     pointerEvents: 'none' as const,\n//     zIndex: 1,\n//   };\n// });\n\n// Rich text toolbar styling\n\nconst ICON_GUTTER = '40px';\n\nconst TEXTAREA_DEFAULTS = {\n  variant: 'default',\n  color: 'primary',\n  size: 'md',\n  error: false,\n  glassLabel: false,\n  glow: false,\n  glass: false,\n  gradient: false,\n  iconPosition: 'start',\n  minRows: 3 } satisfies Partial<TextareaProps>;\n\n// Strips explicitly-undefined props before the merge, so `prop={undefined}`\n// still falls back to the default as a destructuring default would.\nconst definedProps = (props: TextareaProps): Partial<TextareaProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<TextareaProps>;\n\n// Label above, helper text below — identical for the plain and rich variants,\n// which previously duplicated both.\nconst TextareaShell: React.FC<{\n  testId?: string;\n  label?: React.ReactNode;\n  glassLabel: boolean;\n  error: boolean;\n  helperText?: React.ReactNode;\n  children: React.ReactNode;\n}> = ({ testId, label, glassLabel, error, helperText, children }) => (\n  <Box\n    sx={{ position: 'relative', width: '100%' }}\n    data-testid={testId ? `${testId}-wrapper` : undefined}\n  >\n    {label && (\n      <StyledLabel glass={glassLabel} error={error}>\n        {label}\n      </StyledLabel>\n    )}\n\n    {children}\n\n    {helperText && (\n      <FormHelperText error={error} sx={{ mt: 1 }}>\n        {helperText}\n      </FormHelperText>\n    )}\n  </Box>\n);\n\nconst TextareaIcon: React.FC<{\n  icon?: React.ReactNode;\n  iconPosition: 'start' | 'end';\n}> = ({ icon, iconPosition }) => (\n  <Box\n    sx={{\n      position: 'absolute',\n      top: '12px',\n      ...(iconPosition === 'start' ? { left: '12px' } : { right: '12px' }),\n      color: 'text.secondary',\n      pointerEvents: 'none',\n      zIndex: 1 }}\n  >\n    {icon}\n  </Box>\n);\n\nexport const Textarea: React.FC<TextareaProps> = (textareaProps) => {\n  const {\n    variant,\n    color,\n    size,\n    error,\n    helperText,\n    label,\n    glassLabel,\n    glow,\n    glass,\n    gradient,\n    icon,\n    iconPosition,\n    minRows,\n    maxRows,\n    style,\n    'data-testid': dataTestId,\n    dataTestId: dataTestIdCamelCase,\n    ...props\n  } = { ...TEXTAREA_DEFAULTS, ...definedProps(textareaProps) };\n\n  const [richTextValue, setRichTextValue] = useState('');\n  const hasIcon = Boolean(icon);\n  const testId = dataTestId || dataTestIdCamelCase;\n\n  const textareaStyle = {\n    ...style,\n    // Same gap either side; only which side it applies to changes. The previous\n    // version had `iconPosition === 'start' ? '40px' : '40px'`, a ternary whose\n    // two branches were identical.\n    ...(hasIcon && {\n      [iconPosition === 'start' ? 'paddingLeft' : 'paddingRight']: ICON_GUTTER }) };\n\n  // If rich text variant, use the rich text editor\n  if (variant === 'rich') {\n    return (\n      <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n        <TextareaRichEditor\n          value={richTextValue}\n          onChange={setRichTextValue}\n          placeholder={props.placeholder}\n          error={error}\n          glass={glass}\n          color={color}\n          characterLimit={props.maxLength}\n        />\n      </TextareaShell>\n    );\n  }\n\n  return (\n    <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n      <Box sx={{ position: 'relative' }}>\n        {hasIcon && <TextareaIcon icon={icon} iconPosition={iconPosition} />}\n\n        <StyledTextarea\n          customVariant={variant}\n          customColor={color}\n          customSize={size}\n          glow={glow}\n          glass={glass}\n          gradient={gradient}\n          error={error}\n          minRows={variant === 'autosize' ? minRows : undefined}\n          maxRows={variant === 'autosize' ? maxRows : undefined}\n          style={textareaStyle}\n          aria-label={label || props['aria-label']}\n          data-testid={testId}\n          {...props}\n        />\n      </Box>\n    </TextareaShell>\n  );\n};\n\nTextarea.displayName = 'Textarea';\n","import { alpha, keyframes } from '@mui/material';\nimport type { CSSObject, Theme } from '@mui/material';\n\nconst glowAnimation = keyframes`\n  0% {\n    box-shadow: 0 0 5px currentColor;\n  }\n  50% {\n    box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;\n  }\n  100% {\n    box-shadow: 0 0 5px currentColor;\n  }\n`;\n\n// Ripple animation for buttons (commented out - not currently used)\n// const rippleAnimation = keyframes`\n//   0% {\n//     transform: scale(0);\n//     opacity: 1;\n//   }\n//   100% {\n//     transform: scale(4);\n//     opacity: 0;\n//   }\n// `;\n\n// Float animation for rich text toolbar\nexport const floatAnimation = keyframes`\n  0% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-3px);\n  }\n  100% {\n    transform: translateY(0px);\n  }\n`;\n\ntype ResolvedPalette = {\n  main: string;\n  dark: string;\n  light: string;\n  contrastText: string;\n};\n\ntype PartialPalette = { main: string; dark?: string; light?: string; contrastText?: string };\n\n// grey is indexed by weight rather than main/dark/light, so neutral is built by\n// hand. The literals are the MUI grey values, used if the theme omits a weight.\nconst neutralPalette = (theme: Theme): ResolvedPalette => {\n  const grey = theme.palette.grey as unknown as Record<number, string>;\n\n  return {\n    main: grey?.[700] || '#616161',\n    dark: grey?.[800] || '#424242',\n    light: grey?.[500] || '#9e9e9e',\n    contrastText: '#fff',\n  };\n};\n\n// Each slot falls back to the palette's own main, then to primary — a custom\n// theme can define main without dark or light.\nconst pick = (...candidates: Array<string | undefined>): string =>\n  candidates.find(Boolean) ?? '';\n\nconst withFallbacks = (theme: Theme, palette: PartialPalette): ResolvedPalette => ({\n  main: pick(palette?.main, theme.palette.primary.main),\n  dark: pick(palette?.dark, palette?.main, theme.palette.primary.dark),\n  light: pick(palette?.light, palette?.main, theme.palette.primary.light),\n  contrastText: pick(palette?.contrastText, '#fff'),\n});\n\nexport const getColorFromTheme = (theme: Theme, color: string): ResolvedPalette => {\n  if (color === 'neutral') return neutralPalette(theme);\n\n  const colorMap: Record<string, PartialPalette> = {\n    primary: theme.palette.primary,\n    secondary: theme.palette.secondary,\n    success: theme.palette.success,\n    warning: theme.palette.warning,\n    info: theme.palette.info,\n    danger: theme.palette.error,\n  };\n\n  return withFallbacks(theme, colorMap[color] || theme.palette.primary);\n};\n\n// glass, gradient and glow are independent flags that each layer styles onto the\n// base. Spelled out here rather than inline so the styled() callback keeps one\n// branch instead of three.\nexport const textareaEmphasisStyles = ({\n  theme,\n  colorPalette,\n  glass,\n  gradient,\n  glow,\n}: {\n  theme: Theme;\n  colorPalette: { main: string; light?: string; dark?: string };\n  glass?: boolean;\n  gradient?: boolean;\n  glow?: boolean;\n}): CSSObject => {\nconst glassStyles = glass\n  ? {\n      backgroundColor: alpha(theme.palette.background.paper, 0.1),\n      backdropFilter: 'blur(20px)',\n      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.15),\n        backdropFilter: 'blur(25px)',\n      },\n      '&:focus': {\n        backgroundColor: alpha(theme.palette.background.paper, 0.2),\n        backdropFilter: 'blur(30px)',\n      },\n    }\n  : {};\n\n// Gradient border effect\nconst gradientStyles = gradient\n  ? {\n      background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n               linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.light}) border-box`,\n      border: '2px solid transparent',\n      '&:focus': {\n        background: `linear-gradient(${theme.palette.background.paper}, ${theme.palette.background.paper}) padding-box,\n                 linear-gradient(135deg, ${colorPalette.main}, ${colorPalette.dark}) border-box`,\n      },\n    }\n  : {};\n\n// Glow effect\nconst glowStyles = glow\n  ? {\n      animation: `${glowAnimation} 2s ease-in-out infinite`,\n      boxShadow: `0 0 10px ${alpha(colorPalette.main, 0.3)}`,\n    }\n  : {};\n\n  return { ...glassStyles, ...gradientStyles, ...glowStyles };\n};\n","import Code from '@mui/icons-material/Code';\nimport FormatBold from '@mui/icons-material/FormatBold';\nimport FormatColorFill from '@mui/icons-material/FormatColorFill';\nimport FormatColorText from '@mui/icons-material/FormatColorText';\nimport FormatItalic from '@mui/icons-material/FormatItalic';\nimport FormatListBulleted from '@mui/icons-material/FormatListBulleted';\nimport FormatListNumbered from '@mui/icons-material/FormatListNumbered';\nimport FormatQuote from '@mui/icons-material/FormatQuote';\nimport FormatUnderlined from '@mui/icons-material/FormatUnderlined';\nimport Link from '@mui/icons-material/Link';\nimport { alpha, Box, Divider, IconButton, Tooltip } from '@mui/material';\nimport type { Theme } from '@mui/material';\nimport { styled } from '@mui/material';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { floatAnimation, getColorFromTheme } from './Textarea.styles';\n\nconst RichToolbar = styled(Box)<{ glass?: boolean }>(({ theme, glass }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(0.5),\n  padding: theme.spacing(1),\n  borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,\n  borderBottom: `1px solid ${theme.palette.divider}`,\n  background: glass ? alpha(theme.palette.background.paper, 0.1) : theme.palette.background.paper,\n  ...(glass && {\n    backdropFilter: 'blur(15px)' }),\n  '& .MuiDivider-root': {\n    height: 24,\n    margin: `0 ${theme.spacing(1)}` } }));\n\nconst ToolbarButton = styled(IconButton, {\n  shouldForwardProp: (prop) => prop !== 'active' })<{ active?: boolean }>(({ theme, active }) => ({\n  padding: theme.spacing(0.75),\n  borderRadius: theme.spacing(0.5),\n  color: active ? theme.palette.primary.main : theme.palette.text.secondary,\n  backgroundColor: active ? alpha(theme.palette.primary.main, 0.1) : 'transparent',\n  transition: 'all 0.2s ease',\n  position: 'relative',\n  overflow: 'hidden',\n\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    width: 0,\n    height: 0,\n    borderRadius: '50%',\n    backgroundColor: alpha(theme.palette.primary.main, 0.3),\n    transform: 'translate(-50%, -50%)',\n    transition: 'width 0.3s, height 0.3s' },\n\n  '&:hover': {\n    color: theme.palette.primary.main,\n    backgroundColor: alpha(theme.palette.primary.main, 0.15),\n    transform: 'translateY(-1px)',\n    animation: `${floatAnimation} 1.5s ease-in-out infinite`,\n\n    '&::before': {\n      width: '100%',\n      height: '100%' } },\n\n  '&:active': {\n    transform: 'scale(0.95)' } }));\n\nconst CharacterCount = styled(Box)<{ limit?: number; count: number }>(({ theme, limit, count }) => {\n  const isWarning = limit && count > limit * 0.8;\n  const isError = limit && count > limit;\n\n  return {\n    position: 'absolute',\n    bottom: theme.spacing(1),\n    right: theme.spacing(1),\n    fontSize: '0.75rem',\n    color: isError\n      ? theme.palette.error.main\n      : isWarning\n        ? theme.palette.warning.main\n        : theme.palette.text.secondary,\n    padding: '2px 6px',\n    borderRadius: theme.spacing(0.5),\n    backgroundColor: alpha(theme.palette.background.paper, 0.8),\n    backdropFilter: 'blur(10px)',\n    transition: 'all 0.3s ease' };\n});\n\nconst ContentEditableDiv = styled('div')<{\n  error?: boolean;\n  focused?: boolean;\n  glass?: boolean;\n  customColor?: string;\n  theme?: Theme;\n}>(({ theme, error, focused, glass, customColor = 'primary' }) => {\n  if (!theme) return {};\n  const colorPalette = getColorFromTheme(theme, customColor);\n  const errorColor = theme.palette.error;\n\n  return {\n    minHeight: '120px',\n    padding: theme.spacing(1.5),\n    borderRadius: `0 0 ${theme.spacing(1)} ${theme.spacing(1)}`,\n    border: `2px solid ${error ? errorColor.main : focused ? colorPalette.main : theme.palette.divider}`,\n    borderTop: 'none',\n    backgroundColor: glass\n      ? alpha(theme.palette.background.paper, 0.1)\n      : theme.palette.background.paper,\n    color: theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: '1rem',\n    lineHeight: 1.5,\n    outline: 'none',\n    transition: 'all 0.3s ease',\n    cursor: 'text',\n\n    ...(glass && {\n      backdropFilter: 'blur(20px)' }),\n\n    '&:hover': {\n      backgroundColor: glass\n        ? alpha(theme.palette.background.paper, 0.15)\n        : alpha(theme.palette.background.paper, 0.9) },\n\n    '&:focus': {\n      borderColor: error ? errorColor.main : colorPalette.main,\n      boxShadow: `0 0 0 3px ${alpha(error ? errorColor.main : colorPalette.main, 0.1)}` },\n\n    '& > *': {\n      margin: '0.5em 0' },\n\n    '&[contenteditable=\"true\"]:empty::before': {\n      content: 'attr(data-placeholder)',\n      color: theme.palette.text.secondary,\n      opacity: 0.6 } };\n});\n\n// Rich text formatting functions\nconst formatText = (command: string, value?: string) => {\n  document.execCommand(command, false, value);\n};\n\n// Editable state: what is typed, how long it is, and which formats apply at the\n// caret. Kept apart from the markup below.\nconst useRichEditorState = ({\n  value,\n  onChange }: {\n  value?: string;\n  onChange?: (html: string) => void;\n}) => {\n  const [focused, setFocused] = useState(false);\n  const [characterCount, setCharacterCount] = useState(0);\n  const [activeFormats, setActiveFormats] = useState({\n    bold: false,\n    italic: false,\n    underline: false,\n    list: false,\n    orderedList: false,\n    quote: false,\n    code: false });\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (contentRef.current && value !== undefined) {\n      if (contentRef.current.innerHTML !== value) {\n        contentRef.current.innerHTML = value;\n      }\n      setCharacterCount(contentRef.current.innerText.length);\n    }\n  }, [value]);\n\n  const handleInput = () => {\n    if (contentRef.current) {\n      const html = contentRef.current.innerHTML;\n      onChange?.(html);\n      setCharacterCount(contentRef.current.innerText.length);\n      updateActiveFormats();\n    }\n  };\n\n  const updateActiveFormats = () => {\n    setActiveFormats({\n      bold: document.queryCommandState('bold'),\n      italic: document.queryCommandState('italic'),\n      underline: document.queryCommandState('underline'),\n      list: document.queryCommandState('insertUnorderedList'),\n      orderedList: document.queryCommandState('insertOrderedList'),\n      quote: false,\n      code: false });\n  };\n\n  const handleFormat = (command: string, value?: string) => {\n    formatText(command, value);\n    updateActiveFormats();\n    contentRef.current?.focus();\n  };\n\n  return {\n    focused,\n    setFocused,\n    characterCount,\n    activeFormats,\n    contentRef,\n    handleInput,\n    handleFormat,\n    updateActiveFormats };\n};\n\nconst InlineFormatButtons: React.FC<{\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ activeFormats, onCommand }) => (\n  <>\n    <Tooltip title=\"Bold\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        active={activeFormats.bold}\n        onClick={() => onCommand('bold')}\n      >\n        <FormatBold fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Italic\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        active={activeFormats.italic}\n        onClick={() => onCommand('italic')}\n      >\n        <FormatItalic fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Underline\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        active={activeFormats.underline}\n        onClick={() => onCommand('underline')}\n      >\n        <FormatUnderlined fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n  </>\n);\n\nconst BlockFormatButtons: React.FC<{\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ activeFormats, onCommand }) => (\n  <>\n    <Divider orientation=\"vertical\" flexItem />\n\n    <Tooltip title=\"Bullet List\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        active={activeFormats.list}\n        onClick={() => onCommand('insertUnorderedList')}\n      >\n        <FormatListBulleted fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Numbered List\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        active={activeFormats.orderedList}\n        onClick={() => onCommand('insertOrderedList')}\n      >\n        <FormatListNumbered fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Divider orientation=\"vertical\" flexItem />\n\n    <Tooltip title=\"Quote\" arrow>\n      <ToolbarButton size=\"small\" onClick={() => onCommand('formatBlock', 'blockquote')}>\n        <FormatQuote fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Code\" arrow>\n      <ToolbarButton size=\"small\" onClick={() => onCommand('formatBlock', 'pre')}>\n        <Code fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Divider orientation=\"vertical\" flexItem />\n\n    <Tooltip title=\"Insert Link\" arrow>\n      <ToolbarButton\n        size=\"small\"\n        onClick={() => {\n          const url = window.prompt('Enter URL:');\n          if (url) onCommand('createLink', url);\n        }}\n      >\n        <Link fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Text Color\" arrow>\n      <ToolbarButton size=\"small\">\n        <FormatColorText fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title=\"Background Color\" arrow>\n      <ToolbarButton size=\"small\">\n        <FormatColorFill fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n  </>\n);\n\n// The formatting buttons. Split out so the editor body is state, handlers and\n// the editable region.\nconst EditorToolbar: React.FC<{\n  glass?: boolean;\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ glass, activeFormats, onCommand }) => (\n  <RichToolbar glass={glass}>\n    <InlineFormatButtons activeFormats={activeFormats} onCommand={onCommand} />\n    <BlockFormatButtons activeFormats={activeFormats} onCommand={onCommand} />\n  </RichToolbar>\n);\n\nexport const TextareaRichEditor: React.FC<{\n  value?: string;\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  error?: boolean;\n  glass?: boolean;\n  color?: string;\n  characterLimit?: number;\n}> = ({ value, onChange, placeholder, error, glass, color, characterLimit }) => {\n  const {\n    focused,\n    setFocused,\n    characterCount,\n    activeFormats,\n    contentRef,\n    handleInput,\n    handleFormat,\n    updateActiveFormats } = useRichEditorState({ value, onChange });\n\n  return (\n    <Box sx={{ position: 'relative' }}>\n      <EditorToolbar glass={glass} activeFormats={activeFormats} onCommand={handleFormat} />\n\n      <ContentEditableDiv\n        ref={contentRef}\n        contentEditable\n        data-placeholder={placeholder}\n        error={error}\n        focused={focused}\n        glass={glass}\n        customColor={color}\n        onFocus={() => setFocused(true)}\n        onBlur={() => setFocused(false)}\n        onInput={handleInput}\n        onKeyUp={updateActiveFormats}\n        onMouseUp={updateActiveFormats}\n        role=\"textbox\"\n        aria-multiline=\"true\"\n        aria-label={placeholder || 'Rich text editor'}\n      />\n\n      {characterLimit && (\n        <CharacterCount limit={characterLimit} count={characterCount}>\n          {characterCount}\n          {characterLimit ? `/${characterLimit}` : ''}\n        </CharacterCount>\n      )}\n    </Box>\n  );\n};\n"],"mappings":";;;AAAA;AAAA,EACE,SAAAA;AAAA,EACA,OAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAAwB;AAE1B,SAAS,UAAAC,eAAc;AACvB,SAAgB,YAAAC,iBAAgB;;;ACRhC,SAAS,OAAO,iBAAiB;AAGjC,IAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBf,IAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuB9B,IAAM,iBAAiB,CAAC,UAAkC;AACxD,QAAM,OAAO,MAAM,QAAQ;AAE3B,SAAO;AAAA,IACL,MAAM,OAAO,GAAG,KAAK;AAAA,IACrB,MAAM,OAAO,GAAG,KAAK;AAAA,IACrB,OAAO,OAAO,GAAG,KAAK;AAAA,IACtB,cAAc;AAAA,EAChB;AACF;AAIA,IAAM,OAAO,IAAI,eACf,WAAW,KAAK,OAAO,KAAK;AAE9B,IAAM,gBAAgB,CAAC,OAAc,aAA8C;AAAA,EACjF,MAAM,KAAK,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACpD,MAAM,KAAK,SAAS,MAAM,SAAS,MAAM,MAAM,QAAQ,QAAQ,IAAI;AAAA,EACnE,OAAO,KAAK,SAAS,OAAO,SAAS,MAAM,MAAM,QAAQ,QAAQ,KAAK;AAAA,EACtE,cAAc,KAAK,SAAS,cAAc,MAAM;AAClD;AAEO,IAAM,oBAAoB,CAAC,OAAc,UAAmC;AACjF,MAAI,UAAU,UAAW,QAAO,eAAe,KAAK;AAEpD,QAAM,WAA2C;AAAA,IAC/C,SAAS,MAAM,QAAQ;AAAA,IACvB,WAAW,MAAM,QAAQ;AAAA,IACzB,SAAS,MAAM,QAAQ;AAAA,IACvB,SAAS,MAAM,QAAQ;AAAA,IACvB,MAAM,MAAM,QAAQ;AAAA,IACpB,QAAQ,MAAM,QAAQ;AAAA,EACxB;AAEA,SAAO,cAAc,OAAO,SAAS,KAAK,KAAK,MAAM,QAAQ,OAAO;AACtE;AAKO,IAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMiB;AACjB,QAAM,cAAc,QAChB;AAAA,IACE,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB;AAAA,IAChB,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,IACtD,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI;AAAA,MAC3D,gBAAgB;AAAA,IAClB;AAAA,IACA,WAAW;AAAA,MACT,iBAAiB,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,MAC1D,gBAAgB;AAAA,IAClB;AAAA,EACF,IACA,CAAC;AAGL,QAAM,iBAAiB,WACnB;AAAA,IACE,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,yCAC7D,aAAa,IAAI,KAAK,aAAa,KAAK;AAAA,IAC3E,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,YAAY,mBAAmB,MAAM,QAAQ,WAAW,KAAK,KAAK,MAAM,QAAQ,WAAW,KAAK;AAAA,2CAC7D,aAAa,IAAI,KAAK,aAAa,IAAI;AAAA,IAC5E;AAAA,EACF,IACA,CAAC;AAGL,QAAM,aAAa,OACf;AAAA,IACE,WAAW,GAAG,aAAa;AAAA,IAC3B,WAAW,YAAY,MAAM,aAAa,MAAM,GAAG,CAAC;AAAA,EACtD,IACA,CAAC;AAEH,SAAO,EAAE,GAAG,aAAa,GAAG,gBAAgB,GAAG,WAAW;AAC5D;;;AC/IA,OAAO,UAAU;AACjB,OAAO,gBAAgB;AACvB,OAAO,qBAAqB;AAC5B,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AACzB,OAAO,wBAAwB;AAC/B,OAAO,wBAAwB;AAC/B,OAAO,iBAAiB;AACxB,OAAO,sBAAsB;AAC7B,OAAO,UAAU;AACjB,SAAS,SAAAC,QAAO,KAAK,SAAS,YAAY,eAAe;AAEzD,SAAS,cAAc;AACvB,SAAgB,WAAW,QAAQ,gBAAgB;AAsMjD,mBAOM,KAPN;AAlMF,IAAM,cAAc,OAAO,GAAG,EAAuB,CAAC,EAAE,OAAO,MAAM,OAAO;AAAA,EAC1E,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,KAAK,MAAM,QAAQ,GAAG;AAAA,EACtB,SAAS,MAAM,QAAQ,CAAC;AAAA,EACxB,cAAc,GAAG,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC;AAAA,EACrD,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAChD,YAAY,QAAQC,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IAAI,MAAM,QAAQ,WAAW;AAAA,EAC1F,GAAI,SAAS;AAAA,IACX,gBAAgB;AAAA,EAAa;AAAA,EAC/B,sBAAsB;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA,EAAG;AAAE,EAAE;AAExC,IAAM,gBAAgB,OAAO,YAAY;AAAA,EACvC,mBAAmB,CAAC,SAAS,SAAS;AAAS,CAAC,EAAwB,CAAC,EAAE,OAAO,OAAO,OAAO;AAAA,EAChG,SAAS,MAAM,QAAQ,IAAI;AAAA,EAC3B,cAAc,MAAM,QAAQ,GAAG;AAAA,EAC/B,OAAO,SAAS,MAAM,QAAQ,QAAQ,OAAO,MAAM,QAAQ,KAAK;AAAA,EAChE,iBAAiB,SAASA,OAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG,IAAI;AAAA,EACnE,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,UAAU;AAAA,EAEV,aAAa;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,iBAAiBA,OAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,IACtD,WAAW;AAAA,IACX,YAAY;AAAA,EAA0B;AAAA,EAExC,WAAW;AAAA,IACT,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC7B,iBAAiBA,OAAM,MAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,IACvD,WAAW;AAAA,IACX,WAAW,GAAG,cAAc;AAAA,IAE5B,aAAa;AAAA,MACX,OAAO;AAAA,MACP,QAAQ;AAAA,IAAO;AAAA,EAAE;AAAA,EAErB,YAAY;AAAA,IACV,WAAW;AAAA,EAAc;AAAE,EAAE;AAEjC,IAAM,iBAAiB,OAAO,GAAG,EAAqC,CAAC,EAAE,OAAO,OAAO,MAAM,MAAM;AACjG,QAAM,YAAY,SAAS,QAAQ,QAAQ;AAC3C,QAAM,UAAU,SAAS,QAAQ;AAEjC,SAAO;AAAA,IACL,UAAU;AAAA,IACV,QAAQ,MAAM,QAAQ,CAAC;AAAA,IACvB,OAAO,MAAM,QAAQ,CAAC;AAAA,IACtB,UAAU;AAAA,IACV,OAAO,UACH,MAAM,QAAQ,MAAM,OACpB,YACE,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,KAAK;AAAA,IACzB,SAAS;AAAA,IACT,cAAc,MAAM,QAAQ,GAAG;AAAA,IAC/B,iBAAiBA,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB;AAAA,IAChB,YAAY;AAAA,EAAgB;AAChC,CAAC;AAED,IAAM,qBAAqB,OAAO,KAAK,EAMpC,CAAC,EAAE,OAAO,OAAO,SAAS,OAAO,cAAc,UAAU,MAAM;AAChE,MAAI,CAAC,MAAO,QAAO,CAAC;AACpB,QAAM,eAAe,kBAAkB,OAAO,WAAW;AACzD,QAAM,aAAa,MAAM,QAAQ;AAEjC,SAAO;AAAA,IACL,WAAW;AAAA,IACX,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,cAAc,OAAO,MAAM,QAAQ,CAAC,CAAC,IAAI,MAAM,QAAQ,CAAC,CAAC;AAAA,IACzD,QAAQ,aAAa,QAAQ,WAAW,OAAO,UAAU,aAAa,OAAO,MAAM,QAAQ,OAAO;AAAA,IAClG,WAAW;AAAA,IACX,iBAAiB,QACbA,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,IACzC,MAAM,QAAQ,WAAW;AAAA,IAC7B,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,YAAY,MAAM,WAAW;AAAA,IAC7B,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,GAAI,SAAS;AAAA,MACX,gBAAgB;AAAA,IAAa;AAAA,IAE/B,WAAW;AAAA,MACT,iBAAiB,QACbA,OAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,IAC1CA,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAAE;AAAA,IAEjD,WAAW;AAAA,MACT,aAAa,QAAQ,WAAW,OAAO,aAAa;AAAA,MACpD,WAAW,aAAaA,OAAM,QAAQ,WAAW,OAAO,aAAa,MAAM,GAAG,CAAC;AAAA,IAAG;AAAA,IAEpF,SAAS;AAAA,MACP,QAAQ;AAAA,IAAU;AAAA,IAEpB,2CAA2C;AAAA,MACzC,SAAS;AAAA,MACT,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,SAAS;AAAA,IAAI;AAAA,EAAE;AACrB,CAAC;AAGD,IAAM,aAAa,CAAC,SAAiB,UAAmB;AACtD,WAAS,YAAY,SAAS,OAAO,KAAK;AAC5C;AAIA,IAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA;AAAS,MAGL;AACJ,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS;AAAA,IACjD,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,IACN,aAAa;AAAA,IACb,OAAO;AAAA,IACP,MAAM;AAAA,EAAM,CAAC;AACf,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,QAAI,WAAW,WAAW,UAAU,QAAW;AAC7C,UAAI,WAAW,QAAQ,cAAc,OAAO;AAC1C,mBAAW,QAAQ,YAAY;AAAA,MACjC;AACA,wBAAkB,WAAW,QAAQ,UAAU,MAAM;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,cAAc,MAAM;AACxB,QAAI,WAAW,SAAS;AACtB,YAAM,OAAO,WAAW,QAAQ;AAChC,iBAAW,IAAI;AACf,wBAAkB,WAAW,QAAQ,UAAU,MAAM;AACrD,0BAAoB;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,sBAAsB,MAAM;AAChC,qBAAiB;AAAA,MACf,MAAM,SAAS,kBAAkB,MAAM;AAAA,MACvC,QAAQ,SAAS,kBAAkB,QAAQ;AAAA,MAC3C,WAAW,SAAS,kBAAkB,WAAW;AAAA,MACjD,MAAM,SAAS,kBAAkB,qBAAqB;AAAA,MACtD,aAAa,SAAS,kBAAkB,mBAAmB;AAAA,MAC3D,OAAO;AAAA,MACP,MAAM;AAAA,IAAM,CAAC;AAAA,EACjB;AAEA,QAAM,eAAe,CAAC,SAAiBC,WAAmB;AACxD,eAAW,SAASA,MAAK;AACzB,wBAAoB;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAoB;AACxB;AAEA,IAAM,sBAGD,CAAC,EAAE,eAAe,UAAU,MAC/B,iCACE;AAAA,sBAAC,WAAQ,OAAM,QAAO,OAAK,MACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,cAAc;AAAA,MACtB,SAAS,MAAM,UAAU,MAAM;AAAA,MAE/B,8BAAC,cAAW,UAAS,SAAQ;AAAA;AAAA,EAC/B,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,UAAS,OAAK,MAC3B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,cAAc;AAAA,MACtB,SAAS,MAAM,UAAU,QAAQ;AAAA,MAEjC,8BAAC,gBAAa,UAAS,SAAQ;AAAA;AAAA,EACjC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,aAAY,OAAK,MAC9B;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,cAAc;AAAA,MACtB,SAAS,MAAM,UAAU,WAAW;AAAA,MAEpC,8BAAC,oBAAiB,UAAS,SAAQ;AAAA;AAAA,EACrC,GACF;AAAA,GAEF;AAGF,IAAM,qBAGD,CAAC,EAAE,eAAe,UAAU,MAC/B,iCACE;AAAA,sBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC;AAAA,EAEzC,oBAAC,WAAQ,OAAM,eAAc,OAAK,MAChC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,cAAc;AAAA,MACtB,SAAS,MAAM,UAAU,qBAAqB;AAAA,MAE9C,8BAAC,sBAAmB,UAAS,SAAQ;AAAA;AAAA,EACvC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,iBAAgB,OAAK,MAClC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,QAAQ,cAAc;AAAA,MACtB,SAAS,MAAM,UAAU,mBAAmB;AAAA,MAE5C,8BAAC,sBAAmB,UAAS,SAAQ;AAAA;AAAA,EACvC,GACF;AAAA,EAEA,oBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC;AAAA,EAEzC,oBAAC,WAAQ,OAAM,SAAQ,OAAK,MAC1B,8BAAC,iBAAc,MAAK,SAAQ,SAAS,MAAM,UAAU,eAAe,YAAY,GAC9E,8BAAC,eAAY,UAAS,SAAQ,GAChC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,QAAO,OAAK,MACzB,8BAAC,iBAAc,MAAK,SAAQ,SAAS,MAAM,UAAU,eAAe,KAAK,GACvE,8BAAC,QAAK,UAAS,SAAQ,GACzB,GACF;AAAA,EAEA,oBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC;AAAA,EAEzC,oBAAC,WAAQ,OAAM,eAAc,OAAK,MAChC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM;AACb,cAAM,MAAM,OAAO,OAAO,YAAY;AACtC,YAAI,IAAK,WAAU,cAAc,GAAG;AAAA,MACtC;AAAA,MAEA,8BAAC,QAAK,UAAS,SAAQ;AAAA;AAAA,EACzB,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,cAAa,OAAK,MAC/B,8BAAC,iBAAc,MAAK,SAClB,8BAAC,mBAAgB,UAAS,SAAQ,GACpC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAM,oBAAmB,OAAK,MACrC,8BAAC,iBAAc,MAAK,SAClB,8BAAC,mBAAgB,UAAS,SAAQ,GACpC,GACF;AAAA,GACF;AAKF,IAAM,gBAID,CAAC,EAAE,OAAO,eAAe,UAAU,MACtC,qBAAC,eAAY,OACX;AAAA,sBAAC,uBAAoB,eAA8B,WAAsB;AAAA,EACzE,oBAAC,sBAAmB,eAA8B,WAAsB;AAAA,GAC1E;AAGK,IAAM,qBAQR,CAAC,EAAE,OAAO,UAAU,aAAa,OAAO,OAAO,OAAO,eAAe,MAAM;AAC9E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAoB,IAAI,mBAAmB,EAAE,OAAO,SAAS,CAAC;AAEhE,SACE,qBAAC,OAAI,IAAI,EAAE,UAAU,WAAW,GAC9B;AAAA,wBAAC,iBAAc,OAAc,eAA8B,WAAW,cAAc;AAAA,IAEpF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,iBAAe;AAAA,QACf,oBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb,SAAS,MAAM,WAAW,IAAI;AAAA,QAC9B,QAAQ,MAAM,WAAW,KAAK;AAAA,QAC9B,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,MAAK;AAAA,QACL,kBAAe;AAAA,QACf,cAAY,eAAe;AAAA;AAAA,IAC7B;AAAA,IAEC,kBACC,qBAAC,kBAAe,OAAO,gBAAgB,OAAO,gBAC3C;AAAA;AAAA,MACA,iBAAiB,IAAI,cAAc,KAAK;AAAA,OAC3C;AAAA,KAEJ;AAEJ;;;AFzOE,SAKI,OAAAC,MALJ,QAAAC,aAAA;AAlHF,IAAM,iBAAiBC,QAAO,kBAAkB;AAAA,EAC9C,mBAAmB,CAAC,SAClB,CAAC,CAAC,iBAAiB,eAAe,cAAc,QAAQ,SAAS,YAAY,OAAO,EAAE;AAAA,IACpF;AAAA,EACF;AAAE,CAAC,EAAuB,CAAC;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAM,MAAM;AACZ,MAAI,CAAC,MAAO,QAAO,CAAC;AACpB,QAAM,eAAe,kBAAkB,OAAO,WAAW;AACzD,QAAM,aAAa,MAAM,QAAQ;AAEjC,QAAM,UAAU;AAAA,IACd,IAAI,EAAE,SAAS,WAAW,UAAU,WAAW,WAAW,OAAO;AAAA,IACjE,IAAI,EAAE,SAAS,YAAY,UAAU,YAAY,WAAW,OAAO;AAAA,IACnE,IAAI,EAAE,SAAS,aAAa,UAAU,QAAQ,WAAW,QAAQ;AAAA,IACjE,IAAI,EAAE,SAAS,aAAa,UAAU,YAAY,WAAW,QAAQ;AAAA,IACrE,IAAI,EAAE,SAAS,aAAa,UAAU,WAAW,WAAW,QAAQ;AAAA,EAAE;AAExE,QAAM,aAAa;AAAA,IACjB,OAAO;AAAA,IACP,YAAY,MAAM,WAAW;AAAA,IAC7B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,QAAQ,aAAa,QAAQ,WAAW,OAAO,MAAM,QAAQ,OAAO;AAAA,IACpE,iBAAiB,MAAM,QAAQ,WAAW;AAAA,IAC1C,OAAO,MAAM,QAAQ,KAAK;AAAA,IAC1B,YAAY;AAAA,IACZ,QAAQ,kBAAkB,cAAc,aAAa;AAAA,IACrD,SAAS;AAAA,IACT,GAAG,QAAQ,UAAkC;AAAA,IAE7C,kBAAkB;AAAA,MAChB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC1B,SAAS;AAAA,IAAI;AAAA,IAEf,WAAW;AAAA,MACT,aAAa,QAAQ,WAAW,OAAO,aAAa;AAAA,MACpD,iBAAiBC,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAAE;AAAA,IAE9D,WAAW;AAAA,MACT,aAAa,QAAQ,WAAW,OAAO,aAAa;AAAA,MACpD,iBAAiB,MAAM,QAAQ,WAAW;AAAA,MAC1C,WAAW,aAAaA,OAAM,QAAQ,WAAW,OAAO,aAAa,MAAM,GAAG,CAAC;AAAA,IAAG;AAAA,EAAE;AAGxF,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,uBAAuB,EAAE,OAAO,cAAc,OAAO,UAAU,KAAK,CAAC;AAAA,EAAE;AAC9E,CAAC;AAED,IAAM,cAAcD,QAAO,YAAY;AAAA,EACrC,mBAAmB,CAAC,SAAS,CAAC,CAAC,SAAS,OAAO,EAAE,SAAS,IAAc;AAAE,CAAC,EAAwC,CAAC,EAAE,OAAO,OAAO,MAAM,OAAO;AAAA,EACjJ,cAAc,MAAM,QAAQ,CAAC;AAAA,EAC7B,YAAY;AAAA,EACZ,OAAO,QAAQ,MAAM,QAAQ,MAAM,OAAO,MAAM,QAAQ,KAAK;AAAA,EAC7D,GAAI,SAAS;AAAA,IACX,iBAAiBC,OAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAC1D,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,cAAc;AAAA,IACd,QAAQ,aAAaA,OAAM,MAAM,QAAQ,SAAS,GAAG,CAAC;AAAA,IACtD,SAAS;AAAA,EAAe;AAAG,EAAE;AAiBjC,IAAM,cAAc;AAEpB,IAAM,oBAAoB;AAAA,EACxB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AAAA,EACV,cAAc;AAAA,EACd,SAAS;AAAE;AAIb,IAAM,eAAe,CAAC,UACpB,OAAO;AAAA,EACL,OAAO,QAAQ,KAAK,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK,MAAM,UAAU,MAAS;AACjE;AAIF,IAAM,gBAOD,CAAC,EAAE,QAAQ,OAAO,YAAY,OAAO,YAAY,SAAS,MAC7D,gBAAAF;AAAA,EAACG;AAAA,EAAA;AAAA,IACC,IAAI,EAAE,UAAU,YAAY,OAAO,OAAO;AAAA,IAC1C,eAAa,SAAS,GAAG,MAAM,aAAa;AAAA,IAE3C;AAAA,eACC,gBAAAJ,KAAC,eAAY,OAAO,YAAY,OAC7B,iBACH;AAAA,MAGD;AAAA,MAEA,cACC,gBAAAA,KAAC,kBAAe,OAAc,IAAI,EAAE,IAAI,EAAE,GACvC,sBACH;AAAA;AAAA;AAEJ;AAGF,IAAM,eAGD,CAAC,EAAE,MAAM,aAAa,MACzB,gBAAAA;AAAA,EAACI;AAAA,EAAA;AAAA,IACC,IAAI;AAAA,MACF,UAAU;AAAA,MACV,KAAK;AAAA,MACL,GAAI,iBAAiB,UAAU,EAAE,MAAM,OAAO,IAAI,EAAE,OAAO,OAAO;AAAA,MAClE,OAAO;AAAA,MACP,eAAe;AAAA,MACf,QAAQ;AAAA,IAAE;AAAA,IAEX;AAAA;AACH;AAGK,IAAM,WAAoC,CAAC,kBAAkB;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,IAAI,EAAE,GAAG,mBAAmB,GAAG,aAAa,aAAa,EAAE;AAE3D,QAAM,CAAC,eAAe,gBAAgB,IAAIC,UAAS,EAAE;AACrD,QAAM,UAAU,QAAQ,IAAI;AAC5B,QAAM,SAAS,cAAc;AAE7B,QAAM,gBAAgB;AAAA,IACpB,GAAG;AAAA;AAAA;AAAA;AAAA,IAIH,GAAI,WAAW;AAAA,MACb,CAAC,iBAAiB,UAAU,gBAAgB,cAAc,GAAG;AAAA,IAAY;AAAA,EAAG;AAGhF,MAAI,YAAY,QAAQ;AACtB,WACE,gBAAAL,KAAC,iBAAc,QAAgB,OAAc,YAAwB,OAAc,YACjF,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,QACP,UAAU;AAAA,QACV,aAAa,MAAM;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,MAAM;AAAA;AAAA,IACxB,GACF;AAAA,EAEJ;AAEA,SACE,gBAAAA,KAAC,iBAAc,QAAgB,OAAc,YAAwB,OAAc,YACjF,0BAAAC,MAACG,MAAA,EAAI,IAAI,EAAE,UAAU,WAAW,GAC7B;AAAA,eAAW,gBAAAJ,KAAC,gBAAa,MAAY,cAA4B;AAAA,IAElE,gBAAAA;AAAA,MAAC;AAAA;AAAA,QACC,eAAe;AAAA,QACf,aAAa;AAAA,QACb,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,SAAS,YAAY,aAAa,UAAU;AAAA,QAC5C,SAAS,YAAY,aAAa,UAAU;AAAA,QAC5C,OAAO;AAAA,QACP,cAAY,SAAS,MAAM,YAAY;AAAA,QACvC,eAAa;AAAA,QACZ,GAAG;AAAA;AAAA,IACN;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,cAAc;","names":["alpha","Box","styled","useState","alpha","alpha","value","jsx","jsxs","styled","alpha","Box","useState"]}