@12-apps/ui 6.10.1 → 6.11.1

package/dist/TextareaRichEditor-ZFB44VWZ.js

@@ -1,303 +0,0 @@
-import {
-  floatAnimation,
-  getColorFromTheme
-} from "./chunk-PQWPMIGH.js";
-import "./chunk-PZ5AY32C.js";
-
-// 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, 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 ? alpha(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 ? alpha(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: alpha(theme.palette.primary.main, 0.3),
-    transform: "translate(-50%, -50%)",
-    transition: "width 0.3s, height 0.3s"
-  },
-  "&:hover": {
-    color: theme.palette.primary.main,
-    backgroundColor: alpha(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: alpha(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 ? alpha(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 ? alpha(theme.palette.background.paper, 0.15) : alpha(theme.palette.background.paper, 0.9)
-    },
-    "&:focus": {
-      borderColor: error ? errorColor.main : colorPalette.main,
-      boxShadow: `0 0 0 3px ${alpha(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 = ({ copy, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.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: copy.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: copy.underline, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.underline,
-      onClick: () => onCommand("underline"),
-      children: /* @__PURE__ */ jsx(FormatUnderlined, { fontSize: "small" })
-    }
-  ) })
-] });
-var BlockFormatButtons = ({ copy, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsx(Divider, { orientation: "vertical", flexItem: true }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.bulletList, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      active: activeFormats.list,
-      onClick: () => onCommand("insertUnorderedList"),
-      children: /* @__PURE__ */ jsx(FormatListBulleted, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.numberedList, 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: copy.quote, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", onClick: () => onCommand("formatBlock", "blockquote"), children: /* @__PURE__ */ jsx(FormatQuote, { fontSize: "small" }) }) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.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: copy.insertLink, arrow: true, children: /* @__PURE__ */ jsx(
-    ToolbarButton,
-    {
-      size: "small",
-      onClick: () => {
-        const url = window.prompt(copy.linkPrompt);
-        if (url) onCommand("createLink", url);
-      },
-      children: /* @__PURE__ */ jsx(Link, { fontSize: "small" })
-    }
-  ) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.textColor, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorText, { fontSize: "small" }) }) }),
-  /* @__PURE__ */ jsx(Tooltip, { title: copy.backgroundColor, arrow: true, children: /* @__PURE__ */ jsx(ToolbarButton, { size: "small", children: /* @__PURE__ */ jsx(FormatColorFill, { fontSize: "small" }) }) })
-] });
-var EditorToolbar = ({ copy, glass, activeFormats, onCommand }) => /* @__PURE__ */ jsxs(RichToolbar, { glass, children: [
-  /* @__PURE__ */ jsx(InlineFormatButtons, { copy, activeFormats, onCommand }),
-  /* @__PURE__ */ jsx(BlockFormatButtons, { copy, activeFormats, onCommand })
-] });
-var TextareaRichEditor = ({ copy, 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, { copy, 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}` : ""
-    ] })
-  ] });
-};
-export {
-  TextareaRichEditor
-};
-//# sourceMappingURL=TextareaRichEditor-ZFB44VWZ.js.map

package/dist/TextareaRichEditor-ZFB44VWZ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Textarea/TextareaRichEditor.tsx"],"sourcesContent":["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';\nimport type { RichEditorToolbarCopy } from '../../../copy';\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  copy: RichEditorToolbarCopy;\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ copy, activeFormats, onCommand }) => (\n  <>\n    <Tooltip title={copy.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={copy.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={copy.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  copy: RichEditorToolbarCopy;\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ copy, activeFormats, onCommand }) => (\n  <>\n    <Divider orientation=\"vertical\" flexItem />\n\n    <Tooltip title={copy.bulletList} 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={copy.numberedList} 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={copy.quote} arrow>\n      <ToolbarButton size=\"small\" onClick={() => onCommand('formatBlock', 'blockquote')}>\n        <FormatQuote fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title={copy.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={copy.insertLink} arrow>\n      <ToolbarButton\n        size=\"small\"\n        onClick={() => {\n          const url = window.prompt(copy.linkPrompt);\n          if (url) onCommand('createLink', url);\n        }}\n      >\n        <Link fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title={copy.textColor} arrow>\n      <ToolbarButton size=\"small\">\n        <FormatColorText fontSize=\"small\" />\n      </ToolbarButton>\n    </Tooltip>\n\n    <Tooltip title={copy.backgroundColor} 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  copy: RichEditorToolbarCopy;\n  glass?: boolean;\n  activeFormats: Record<string, boolean>;\n  onCommand: (command: string, value?: string) => void;\n}> = ({ copy, glass, activeFormats, onCommand }) => (\n  <RichToolbar glass={glass}>\n    <InlineFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />\n    <BlockFormatButtons copy={copy} activeFormats={activeFormats} onCommand={onCommand} />\n  </RichToolbar>\n);\n\nexport const TextareaRichEditor: React.FC<{\n  /**\n   * The ten toolbar buttons' tooltips — which are also their accessible names,\n   * since every one of them is a glyph — plus the link prompt. REQUIRED: this\n   * package ships no default copy.\n   */\n  copy: RichEditorToolbarCopy;\n  value?: string;\n  onChange?: (html: string) => void;\n  placeholder?: string;\n  error?: boolean;\n  glass?: boolean;\n  color?: string;\n  characterLimit?: number;\n}> = ({ copy, 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 copy={copy} 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,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,OAAO,KAAK,SAAS,YAAY,eAAe;AAEzD,SAAS,cAAc;AACvB,SAAgB,WAAW,QAAQ,gBAAgB;AAwMjD,mBAOM,KAPN;AAnMF,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,QAAQ,MAAM,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,SAAS,MAAM,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,iBAAiB,MAAM,MAAM,QAAQ,QAAQ,MAAM,GAAG;AAAA,IACtD,WAAW;AAAA,IACX,YAAY;AAAA,EAA0B;AAAA,EAExC,WAAW;AAAA,IACT,OAAO,MAAM,QAAQ,QAAQ;AAAA,IAC7B,iBAAiB,MAAM,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,iBAAiB,MAAM,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,QACb,MAAM,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,QACb,MAAM,MAAM,QAAQ,WAAW,OAAO,IAAI,IAC1C,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG;AAAA,IAAE;AAAA,IAEjD,WAAW;AAAA,MACT,aAAa,QAAQ,WAAW,OAAO,aAAa;AAAA,MACpD,WAAW,aAAa,MAAM,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,SAAiBA,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,sBAID,CAAC,EAAE,MAAM,eAAe,UAAU,MACrC,iCACE;AAAA,sBAAC,WAAQ,OAAO,KAAK,MAAM,OAAK,MAC9B;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,OAAO,KAAK,QAAQ,OAAK,MAChC;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,OAAO,KAAK,WAAW,OAAK,MACnC;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,qBAID,CAAC,EAAE,MAAM,eAAe,UAAU,MACrC,iCACE;AAAA,sBAAC,WAAQ,aAAY,YAAW,UAAQ,MAAC;AAAA,EAEzC,oBAAC,WAAQ,OAAO,KAAK,YAAY,OAAK,MACpC;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,OAAO,KAAK,cAAc,OAAK,MACtC;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,OAAO,KAAK,OAAO,OAAK,MAC/B,8BAAC,iBAAc,MAAK,SAAQ,SAAS,MAAM,UAAU,eAAe,YAAY,GAC9E,8BAAC,eAAY,UAAS,SAAQ,GAChC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAO,KAAK,MAAM,OAAK,MAC9B,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,OAAO,KAAK,YAAY,OAAK,MACpC;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,MAAM;AACb,cAAM,MAAM,OAAO,OAAO,KAAK,UAAU;AACzC,YAAI,IAAK,WAAU,cAAc,GAAG;AAAA,MACtC;AAAA,MAEA,8BAAC,QAAK,UAAS,SAAQ;AAAA;AAAA,EACzB,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAO,KAAK,WAAW,OAAK,MACnC,8BAAC,iBAAc,MAAK,SAClB,8BAAC,mBAAgB,UAAS,SAAQ,GACpC,GACF;AAAA,EAEA,oBAAC,WAAQ,OAAO,KAAK,iBAAiB,OAAK,MACzC,8BAAC,iBAAc,MAAK,SAClB,8BAAC,mBAAgB,UAAS,SAAQ,GACpC,GACF;AAAA,GACF;AAKF,IAAM,gBAKD,CAAC,EAAE,MAAM,OAAO,eAAe,UAAU,MAC5C,qBAAC,eAAY,OACX;AAAA,sBAAC,uBAAoB,MAAY,eAA8B,WAAsB;AAAA,EACrF,oBAAC,sBAAmB,MAAY,eAA8B,WAAsB;AAAA,GACtF;AAGK,IAAM,qBAcR,CAAC,EAAE,MAAM,OAAO,UAAU,aAAa,OAAO,OAAO,OAAO,eAAe,MAAM;AACpF,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,MAAY,OAAc,eAA8B,WAAW,cAAc;AAAA,IAEhG;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;","names":["value"]}

package/dist/chunk-2S2SB5C7.js

@@ -1,145 +0,0 @@
-import {
-  Skeleton
-} from "./chunk-7XUYRPRQ.js";
-
-// src/components/data-display/LoadingState/LoadingState.tsx
-import { Box, CircularProgress, Stack, Typography, useTheme } from "@mui/material";
-import React from "react";
-
-// src/components/data-display/LoadingState/LoadingState.helpers.ts
-var SIZE_MAP = {
-  xs: { spinner: 16, text: "body2" },
-  sm: { spinner: 24, text: "body2" },
-  md: { spinner: 40, text: "body1" },
-  lg: { spinner: 56, text: "h6" },
-  xl: { spinner: 64, text: "h6" }
-};
-var SKELETON_ROW_HEIGHT = {
-  xs: 14,
-  sm: 20,
-  md: 28,
-  lg: 36,
-  xl: 44
-};
-var LOADING_STATE_DEFAULTS = {
-  variant: "spinner",
-  size: "md",
-  skeletonRows: 3
-};
-var definedProps = (props) => Object.fromEntries(
-  Object.entries(props).filter(([, value]) => value !== void 0)
-);
-var resolveLoadingStateProps = (props) => ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) });
-var makeTestIds = (dataTestId) => ({
-  base: dataTestId || "loading-state",
-  optional: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : void 0,
-  named: (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`
-});
-
-// src/components/data-display/LoadingState/LoadingState.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var LoadingMessage = ({ message, size, testIds, sx }) => message ? /* @__PURE__ */ jsx(
-  Typography,
-  {
-    variant: SIZE_MAP[size].text,
-    color: "text.secondary",
-    sx,
-    "data-testid": testIds.named("message"),
-    children: message
-  }
-) : null;
-var SkeletonView = ({
-  message,
-  size,
-  skeletonRows,
-  className,
-  testIds
-}) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": message || "Loading content",
-      className,
-      "data-testid": testIds.base,
-      sx: {
-        width: "100%",
-        padding: theme.spacing(3)
-      },
-      children: [
-        /* @__PURE__ */ jsx(Stack, { spacing: 2, children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            variant: "rectangular",
-            animation: "wave",
-            height: SKELETON_ROW_HEIGHT[size],
-            width: index === skeletonRows - 1 ? "60%" : "100%",
-            borderRadius: 4,
-            "data-testid": testIds.optional(`skeleton-${index}`)
-          },
-          `skeleton-row-${index}`
-        )) }),
-        /* @__PURE__ */ jsx(
-          LoadingMessage,
-          {
-            message,
-            size,
-            testIds,
-            sx: { mt: 2, textAlign: "center" }
-          }
-        )
-      ]
-    }
-  );
-};
-var SpinnerView = ({ message, size, className, testIds }) => {
-  const theme = useTheme();
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      role: "status",
-      "aria-busy": "true",
-      "aria-label": message || "Loading",
-      className,
-      "data-testid": testIds.base,
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: theme.spacing(6),
-        minHeight: 200,
-        gap: theme.spacing(2)
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          CircularProgress,
-          {
-            size: SIZE_MAP[size].spinner,
-            "data-testid": testIds.named("spinner")
-          }
-        ),
-        /* @__PURE__ */ jsx(LoadingMessage, { message, size, testIds })
-      ]
-    }
-  );
-};
-var LoadingState = React.memo((rawProps) => {
-  const { variant, message, size, skeletonRows, className, dataTestId } = resolveLoadingStateProps(rawProps);
-  const viewProps = {
-    message,
-    size,
-    skeletonRows,
-    className,
-    testIds: makeTestIds(dataTestId)
-  };
-  return variant === "skeleton" ? /* @__PURE__ */ jsx(SkeletonView, { ...viewProps }) : /* @__PURE__ */ jsx(SpinnerView, { ...viewProps });
-});
-LoadingState.displayName = "LoadingState";
-
-export {
-  LoadingState
-};
-//# sourceMappingURL=chunk-2S2SB5C7.js.map

package/dist/chunk-2S2SB5C7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/LoadingState/LoadingState.tsx","../src/components/data-display/LoadingState/LoadingState.helpers.ts"],"sourcesContent":["import { Box, CircularProgress, Stack, Typography, useTheme } from '@mui/material';\nimport React from 'react';\n\nimport { Skeleton } from '../../layout/Skeleton/Skeleton';\n\nimport {\n  makeTestIds,\n  resolveLoadingStateProps,\n  SIZE_MAP,\n  SKELETON_ROW_HEIGHT,\n} from './LoadingState.helpers';\nimport type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\ninterface ViewProps {\n  message?: string;\n  size: LoadingStateSize;\n  skeletonRows: number;\n  className?: string;\n  testIds: ReturnType<typeof makeTestIds>;\n}\n\nconst LoadingMessage: React.FC<{\n  message?: string;\n  size: LoadingStateSize;\n  testIds: ViewProps['testIds'];\n  sx?: object;\n}> = ({ message, size, testIds, sx }) =>\n  message ? (\n    <Typography\n      variant={SIZE_MAP[size].text}\n      color=\"text.secondary\"\n      sx={sx}\n      data-testid={testIds.named('message')}\n    >\n      {message}\n    </Typography>\n  ) : null;\n\nconst SkeletonView: React.FC<ViewProps> = ({\n  message,\n  size,\n  skeletonRows,\n  className,\n  testIds,\n}) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading content'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        width: '100%',\n        padding: theme.spacing(3),\n      }}\n    >\n      <Stack spacing={2}>\n        {Array.from({ length: skeletonRows }).map((_, index) => (\n          <Skeleton\n            key={`skeleton-row-${index}`}\n            variant=\"rectangular\"\n            animation=\"wave\"\n            height={SKELETON_ROW_HEIGHT[size]}\n            // The last row is short, so the block reads as a paragraph of text.\n            width={index === skeletonRows - 1 ? '60%' : '100%'}\n            borderRadius={4}\n            data-testid={testIds.optional(`skeleton-${index}`)}\n          />\n        ))}\n      </Stack>\n      <LoadingMessage\n        message={message}\n        size={size}\n        testIds={testIds}\n        sx={{ mt: 2, textAlign: 'center' }}\n      />\n    </Box>\n  );\n};\n\nconst SpinnerView: React.FC<ViewProps> = ({ message, size, className, testIds }) => {\n  const theme = useTheme();\n\n  return (\n    <Box\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={message || 'Loading'}\n      className={className}\n      data-testid={testIds.base}\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: theme.spacing(6),\n        minHeight: 200,\n        gap: theme.spacing(2),\n      }}\n    >\n      <CircularProgress\n        size={SIZE_MAP[size].spinner}\n        data-testid={testIds.named('spinner')}\n      />\n      <LoadingMessage message={message} size={size} testIds={testIds} />\n    </Box>\n  );\n};\n\nexport const LoadingState: React.FC<LoadingStateProps> = React.memo((rawProps) => {\n  const { variant, message, size, skeletonRows, className, dataTestId } =\n    resolveLoadingStateProps(rawProps);\n  const viewProps: ViewProps = {\n    message,\n    size,\n    skeletonRows,\n    className,\n    testIds: makeTestIds(dataTestId),\n  };\n\n  return variant === 'skeleton' ? (\n    <SkeletonView {...viewProps} />\n  ) : (\n    <SpinnerView {...viewProps} />\n  );\n});\n\nLoadingState.displayName = 'LoadingState';\n\nexport default LoadingState;\n","import type { LoadingStateProps, LoadingStateSize } from './LoadingState.types';\n\nexport const SIZE_MAP: Record<\n  LoadingStateSize,\n  { spinner: number; text: 'body2' | 'body1' | 'h6' }\n> = {\n  xs: { spinner: 16, text: 'body2' },\n  sm: { spinner: 24, text: 'body2' },\n  md: { spinner: 40, text: 'body1' },\n  lg: { spinner: 56, text: 'h6' },\n  xl: { spinner: 64, text: 'h6' },\n};\n\nexport const SKELETON_ROW_HEIGHT: Record<LoadingStateSize, number> = {\n  xs: 14,\n  sm: 20,\n  md: 28,\n  lg: 36,\n  xl: 44,\n};\n\ntype LoadingStateDefaultedKeys = 'variant' | 'size' | 'skeletonRows';\n\ntype ResolvedLoadingStateProps = LoadingStateProps &\n  Required<Pick<LoadingStateProps, LoadingStateDefaultedKeys>>;\n\nconst LOADING_STATE_DEFAULTS: Pick<LoadingStateProps, LoadingStateDefaultedKeys> = {\n  variant: 'spinner',\n  size: 'md',\n  skeletonRows: 3,\n};\n\n// Strips explicitly-undefined props before the merge, so `size={undefined}` still\n// falls back to the default exactly as a destructuring default would.\nconst definedProps = (props: LoadingStateProps): Partial<LoadingStateProps> =>\n  Object.fromEntries(\n    Object.entries(props).filter(([, value]) => value !== undefined),\n  ) as Partial<LoadingStateProps>;\n\nexport const resolveLoadingStateProps = (\n  props: LoadingStateProps,\n): ResolvedLoadingStateProps =>\n  ({ ...LOADING_STATE_DEFAULTS, ...definedProps(props) }) as ResolvedLoadingStateProps;\n\n/**\n * Test ids come in three flavours here: the container falls back to a bare\n * `loading-state`, the labelled parts to `loading-state-<part>`, and the\n * skeleton rows to nothing at all when the caller supplied no base id.\n */\nexport const makeTestIds = (dataTestId?: string) => ({\n  base: dataTestId || 'loading-state',\n  optional: (suffix: string): string | undefined =>\n    dataTestId ? `${dataTestId}-${suffix}` : undefined,\n  named: (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `loading-state-${suffix}`,\n});\n"],"mappings":"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","names":[]}