@12-apps/ui 6.10.0 → 6.11.0

package/dist/form/Textarea.js.map

@@ -1 +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  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = 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' && richEditorCopy) {\n    return (\n      <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>\n        <TextareaRichEditor\n          copy={richEditorCopy}\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';\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":"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","names":["alpha","Box","styled","useState","alpha","alpha","value","jsx","jsxs","styled","alpha","Box","useState"]}
+{"version":3,"sources":["../../src/components/form/Textarea/Textarea.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, { lazy, Suspense, useState } from 'react';\n\nimport {\n  getColorFromTheme,\n  textareaEmphasisStyles } from './Textarea.styles';\n\n/**\n * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).\n *\n * It renders only for `variant === 'rich'`, but a static import made every\n * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the\n * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That\n * is not theoretical: an adopting storefront imports this entry for a one-line\n * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here\n * while nothing on that critical path renders a tooltip at all.\n *\n * `variant` is a prop, so the branch cannot be decided at build time and no\n * amount of tree-shaking removes it. A lazy boundary is what expresses \"only\n * the rich variant pays\", and it costs the rich variant one microtask it can\n * afford — it is a text editor a user has already chosen to open, never a\n * first-paint element.\n */\nconst TextareaRichEditor = lazy(async () => ({\n  default: (await import('./TextareaRichEditor')).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\n/**\n * The rich variant, kept out of the main component's body.\n *\n * Two reasons rather than one: the `Suspense` boundary and its props belong\n * together with the lazy import above, and the component that renders every\n * OTHER variant stays inside the size the complexity gate allows without\n * anything being suppressed.\n */\nfunction RichVariant({\n  shell,\n  editor }: {\n  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;\n  editor: React.ComponentProps<typeof TextareaRichEditor>;\n}): React.JSX.Element {\n  return (\n    <TextareaShell {...shell}>\n      {/*\n        `null` rather than a spinner: the editor resolves from the same document\n        the caller is already rendering, so a fallback would flash for a frame\n        and read as a glitch rather than as loading.\n      */}\n      <Suspense fallback={null}>\n        <TextareaRichEditor {...editor} />\n      </Suspense>\n    </TextareaShell>\n  );\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  // Read off the props rather than the merged object: the spread widens every\n  // key to optional, which would lose what the variant union already proved.\n  const { richEditorCopy } = 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' && richEditorCopy) {\n    return (\n      <RichVariant\n        shell={{ testId, label, glassLabel, error, helperText }}\n        editor={{\n          copy: richEditorCopy,\n          value: richTextValue,\n          onChange: setRichTextValue,\n          placeholder: props.placeholder,\n          error,\n          glass,\n          color,\n          characterLimit: props.maxLength }}\n      />\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"],"mappings":"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","names":[]}

package/dist/types/components/data-display/DataViews/data-views-day-input.d.ts

@@ -1,22 +1,26 @@
 import React from 'react';
-/** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */
-export declare function isoToBr(iso: string): string;
+/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */
+export declare function isoToMasked(iso: string, mask: string): string;
 /**
- * `dd/mm/aaaa` → `AAAA-MM-DD`, but ONLY for a day that exists. `31/02/2026`
- * parses fine as three numbers and is not a date, and `Date` would silently
- * roll it into March rather than reject it — so the round trip through UTC is
- * the check: if the month or day comes back changed, the input was not a day.
+ * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.
+ *
+ * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would
+ * silently roll it into March rather than reject it — so the round trip through
+ * UTC is the check: if the month or day comes back changed, the input was not a
+ * day.
  */
-export declare function brToIso(text: string): string;
+export declare function maskedToIso(text: string, mask: string): string;
 /**
- * Digits only, capped at eight, with the separators put back as you type.
+ * Digits only, capped at the mask's width, with the separators put back as you
+ * type.
  *
  * Deriving the whole string from the digits — rather than editing the text in
- * place — is what makes backspace behave. Four digits render as `06/08`, not
- * `06/08/`, so deleting the first digit of the year removes the trailing
- * separator with it instead of leaving a dead keystroke that changes nothing.
+ * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as
+ * `06/08`, not `06/08/`, so deleting the first digit of the year removes the
+ * trailing separator with it instead of leaving a dead keystroke that changes
+ * nothing.
  */
-export declare function maskBrDate(raw: string): string;
+export declare function maskDate(raw: string, mask: string): string;
 /**
  * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's
  * inclusive day comparison already speaks, and the form the chip label reads —

package/dist/types/components/data-display/DataViews/data-views-day-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-views-day-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-day-input.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,wEAAwE;AACxE,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG3C;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAW5C;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAK9C;AAgCD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAa,EACb,WAAW,EACX,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAyCpB"}
+{"version":3,"file":"data-views-day-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/DataViews/data-views-day-input.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAmDnD,6EAA6E;AAC7E,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAW7D;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAiB9D;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAY1D;AAgCD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAa,EACb,WAAW,EACX,IAAI,GACL,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA2CpB"}

package/dist/types/components/form/DateRangePicker/DateRangePicker.range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.range.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/DateRangePicker/DateRangePicker.range.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,EACrB,YAAY,CAAC,EAAE,MAAM,GACpB,eAAe,CAUjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,uBAAuB,CAYzD;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAC3B,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,uBAAuB,EACjC,YAAY,EAAE,MAAM,GAAG,SAAS,GAC/B,MAAM,CAKR;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,EAAE,iBAAiB,EAC1B,YAAY,EAAE,MAAM,GAAG,SAAS,GAC/B,kBAAkB,EAAE,CAWtB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,EAAE,EAC7B,KAAK,EAAE,cAAc,GACpB,MAAM,GAAG,SAAS,CAIpB"}
+{"version":3,"file":"DateRangePicker.range.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/DateRangePicker/DateRangePicker.range.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,EACrB,YAAY,CAAC,EAAE,MAAM,GACpB,eAAe,CAUjB;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,IAAI,uBAAuB,CAiBzD;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAC3B,MAAM,EAAE,eAAe,EACvB,QAAQ,EAAE,uBAAuB,EACjC,YAAY,EAAE,MAAM,GAAG,SAAS,GAC/B,MAAM,CAKR;AAED,iFAAiF;AACjF,wBAAgB,kBAAkB,CAChC,WAAW,EAAE,UAAU,EAAE,EACzB,OAAO,EAAE,iBAAiB,EAC1B,YAAY,EAAE,MAAM,GAAG,SAAS,GAC/B,kBAAkB,EAAE,CAWtB;AAED,4EAA4E;AAC5E,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,EAAE,EAC7B,KAAK,EAAE,cAAc,GACpB,MAAM,GAAG,SAAS,CAIpB"}

package/dist/types/components/form/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAsKtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+E5C,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/Textarea/Textarea.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAwBxD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAkMtD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA+E5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.10.0",
+  "version": "6.11.0",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/DataViews/data-views-day-input.tsx

@@ -31,44 +31,117 @@ import { TextField } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 
 
-/** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */
-export function isoToBr(iso: string): string {
+/**
+ * THE MASK IS THE ORDER, and both halves of this file read it.
+ *
+ * The placeholder a host supplies (`copy.filters.dayMask` — `dd/mm/aaaa` for
+ * pt-BR, `mm/dd/yyyy` for en-US) is not decoration: it tells the reader which
+ * segment comes first. Everything below therefore derives the segment order
+ * FROM that same string, so the shape on screen and the shape the parser
+ * expects cannot disagree.
+ *
+ * They did disagree, and the failure was silent in the worst direction. The
+ * mask/parse pair was hardcoded day-first (the `Br` in the old names was
+ * accurate) while the placeholder followed the copy pack — so under `en-US` the
+ * field ASKED for `mm/dd/yyyy`, and a reader who typed exactly that got a day
+ * of 12 and a month of 31, which is not a date, which commits nothing. No
+ * error, no filter, a full list that reads like an answer. The en-US pack's own
+ * comment already said the mask "is the shape that gets a date entered
+ * backwards"; nothing enforced it.
+ */
+
+/** What one segment of a mask is, and how many digits it takes. */
+type DaySegment = 'year' | 'month' | 'day';
+const SEGMENT_WIDTH: Readonly<Record<DaySegment, number>> = { year: 4, month: 2, day: 2 };
+
+/**
+ * The segments a mask asks for, in its own order.
+ *
+ * Keyed on each token's FIRST letter so one rule covers every spelling a host
+ * might use — `aaaa`/`yyyy` for the year, `mm` for the month, `dd`/`tt` for the
+ * day. An unreadable mask falls back to day-first rather than throwing: this
+ * runs on every keystroke, and a field that renders is recoverable where one
+ * that crashes the grid is not.
+ */
+function segmentsOf(mask: string): readonly DaySegment[] {
+  const tokens = mask.split(/[^A-Za-z]+/).filter(Boolean);
+  if (tokens.length !== 3) return ['day', 'month', 'year'];
+  const segments = tokens.map((token): DaySegment => {
+    const head = token.slice(0, 1).toLowerCase();
+    if (head === 'y' || head === 'a') return 'year';
+    return head === 'm' ? 'month' : 'day';
+  });
+  // A mask naming the same segment twice describes no date. Fall back rather
+  // than build a parser that can never succeed.
+  return new Set(segments).size === 3 ? segments : ['day', 'month', 'year'];
+}
+
+/** The separator the mask uses, defaulting to `/`. */
+const separatorOf = (mask: string): string => mask.replace(/[A-Za-z]/g, '').slice(0, 1) || '/';
+
+/** `AAAA-MM-DD` (the wire) → the mask's own order (what the reader sees). */
+export function isoToMasked(iso: string, mask: string): string {
   const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-  return parts ? `${parts[3]}/${parts[2]}/${parts[1]}` : '';
+  if (!parts) return '';
+  const value: Record<DaySegment, string> = {
+    year: parts[1] as string,
+    month: parts[2] as string,
+    day: parts[3] as string,
+  };
+  return segmentsOf(mask)
+    .map((segment) => value[segment])
+    .join(separatorOf(mask));
 }
 
 /**
- * `dd/mm/aaaa` → `AAAA-MM-DD`, but ONLY for a day that exists. `31/02/2026`
- * parses fine as three numbers and is not a date, and `Date` would silently
- * roll it into March rather than reject it — so the round trip through UTC is
- * the check: if the month or day comes back changed, the input was not a day.
+ * The mask's order → `AAAA-MM-DD`, but ONLY for a day that exists.
+ *
+ * `31/02/2026` parses fine as three numbers and is not a date, and `Date` would
+ * silently roll it into March rather than reject it — so the round trip through
+ * UTC is the check: if the month or day comes back changed, the input was not a
+ * day.
  */
-export function brToIso(text: string): string {
-  const parts = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(text);
-  if (!parts) return '';
-  const [, dd, mm, yyyy] = parts;
-  const day = Number(dd);
-  const month = Number(mm);
-  const year = Number(yyyy);
+export function maskedToIso(text: string, mask: string): string {
+  const segments = segmentsOf(mask);
+  const digits = text.replace(/\D/g, '');
+  if (digits.length !== 8) return '';
+  const value = {} as Record<DaySegment, string>;
+  let cursor = 0;
+  for (const segment of segments) {
+    value[segment] = digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]);
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  const year = Number(value.year);
+  const month = Number(value.month);
+  const day = Number(value.day);
   if (year < 1000) return '';
   const probe = new Date(Date.UTC(year, month - 1, day));
   if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';
-  return `${yyyy}-${mm}-${dd}`;
+  return `${value.year}-${value.month}-${value.day}`;
 }
 
 /**
- * Digits only, capped at eight, with the separators put back as you type.
+ * Digits only, capped at the mask's width, with the separators put back as you
+ * type.
  *
  * Deriving the whole string from the digits — rather than editing the text in
- * place — is what makes backspace behave. Four digits render as `06/08`, not
- * `06/08/`, so deleting the first digit of the year removes the trailing
- * separator with it instead of leaving a dead keystroke that changes nothing.
+ * place — is what makes backspace behave. Four digits of `dd/mm/aaaa` render as
+ * `06/08`, not `06/08/`, so deleting the first digit of the year removes the
+ * trailing separator with it instead of leaving a dead keystroke that changes
+ * nothing.
  */
-export function maskBrDate(raw: string): string {
+export function maskDate(raw: string, mask: string): string {
+  const segments = segmentsOf(mask);
+  const separator = separatorOf(mask);
   const digits = raw.replace(/\D/g, '').slice(0, 8);
-  if (digits.length <= 2) return digits;
-  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
-  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
+  const out: string[] = [];
+  let cursor = 0;
+  for (const segment of segments) {
+    if (cursor >= digits.length) break;
+    out.push(digits.slice(cursor, cursor + SEGMENT_WIDTH[segment]));
+    cursor += SEGMENT_WIDTH[segment];
+  }
+  return out.join(separator);
 }
 
 /**
@@ -142,7 +215,7 @@ export function DayBoundInput({
   mask: string;
 }): React.JSX.Element {
   const applied = value ?? '';
-  const [text, setText] = useState(() => isoToBr(applied));
+  const [text, setText] = useState(() => isoToMasked(applied, mask));
 
   // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only
   // when the applied value moved somewhere the text does not already mean — a
@@ -150,8 +223,10 @@ export function DayBoundInput({
   // guard the field's own write bounces straight back mid-edit and resets the
   // caret, which is the native control's worst habit reproduced by hand.
   useEffect(() => {
-    setText((current) => (brToIso(current) === applied ? current : isoToBr(applied)));
-  }, [applied]);
+    setText((current) =>
+      maskedToIso(current, mask) === applied ? current : isoToMasked(applied, mask),
+    );
+  }, [applied, mask]);
 
   return (
     <TextField
@@ -162,19 +237,19 @@ export function DayBoundInput({
       placeholder={mask}
       value={text}
       onChange={(event) => {
-        const next = maskBrDate(event.target.value);
+        const next = maskDate(event.target.value, mask);
         setText(next);
         // Emptying clears the bound. A COMPLETE day applies it. A partial one
         // does NEITHER — it leaves whatever is applied alone, so typing is never
         // fought and a half-typed year never reaches the backend.
         if (next === '') return onChange(undefined);
-        const iso = brToIso(next);
+        const iso = maskedToIso(next, mask);
         if (iso) onChange(iso);
       }}
       // Leaving a half-typed (or impossible) date on screen would show a filter
       // the list is not actually using. On blur the field snaps back to what IS
       // applied; a complete date already equals it, so this only ever tidies.
-      onBlur={() => setText(isoToBr(applied))}
+      onBlur={() => setText(isoToMasked(applied, mask))}
       // The placeholder occupies the space an un-shrunk label would render into.
       InputLabelProps={{ shrink: true }}
       inputProps={dayInputProps(testId, describedBy)}

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -7,7 +7,7 @@
  * indistinguishable from one that ignored you. The caller reads
  * {@link DateRangeStatus} and keeps its own confirm button shut.
  */
-import { isoToBr } from '../../data-display/DataViews/data-views-day-input';
+import { isoToMasked } from '../../data-display/DataViews/data-views-day-input';
 
 import { dayCount, isAfterDay } from './DateRangePicker.dates';
 import type {
@@ -53,6 +53,11 @@ export function resolveDayRange(
  * moves both halves of the decision to the same place.
  */
 export function defaultMessages(): DateRangePickerMessages {
+  // ONE mask, read by both the fields and the summary below. They are the same
+  // date in the same control, so a summary formatted in a different order from
+  // the boxes it summarises is a control arguing with itself — which is what
+  // two independent literals eventually become.
+  const dayMask = 'dd/mm/yyyy';
   return {
     from: 'Start date',
     to: 'End date',
@@ -60,9 +65,9 @@ export function defaultMessages(): DateRangePickerMessages {
     incomplete: 'Choose both dates.',
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
-    summary: ({ from, to }) => `${isoToBr(from)} – ${isoToBr(to)}`,
+    summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,
     calendarLabel: 'Calendar',
-    dayMask: 'dd/mm/yyyy',
+    dayMask,
   };
 }
 

package/src/components/form/Textarea/Textarea.tsx

@@ -6,12 +6,30 @@ import {
   TextareaAutosize } from '@mui/material';
 import type { Theme } from '@mui/material';
 import { styled } from '@mui/material';
-import React, { useState } from 'react';
+import React, { lazy, Suspense, useState } from 'react';
 
 import {
   getColorFromTheme,
   textareaEmphasisStyles } from './Textarea.styles';
-import { TextareaRichEditor } from './TextareaRichEditor';
+
+/**
+ * The rich editor is LOADED ON DEMAND, not imported (12-51 follow-up).
+ *
+ * It renders only for `variant === 'rich'`, but a static import made every
+ * consumer of a plain `<Textarea>` pay for it — 387 lines of toolbar plus the
+ * MUI `Tooltip`, `IconButton` and `Divider` its formatting buttons need. That
+ * is not theoretical: an adopting storefront imports this entry for a one-line
+ * order note, and `Tooltip` (8.7 KiB) reached its EAGER chunk through here
+ * while nothing on that critical path renders a tooltip at all.
+ *
+ * `variant` is a prop, so the branch cannot be decided at build time and no
+ * amount of tree-shaking removes it. A lazy boundary is what expresses "only
+ * the rich variant pays", and it costs the rich variant one microtask it can
+ * afford — it is a text editor a user has already chosen to open, never a
+ * first-paint element.
+ */
+const TextareaRichEditor = lazy(async () => ({
+  default: (await import('./TextareaRichEditor')).TextareaRichEditor }));
 import type { TextareaProps } from './Textarea.types';
 
 // Interface for styled component props
@@ -178,6 +196,34 @@ const TextareaIcon: React.FC<{
   </Box>
 );
 
+/**
+ * The rich variant, kept out of the main component's body.
+ *
+ * Two reasons rather than one: the `Suspense` boundary and its props belong
+ * together with the lazy import above, and the component that renders every
+ * OTHER variant stays inside the size the complexity gate allows without
+ * anything being suppressed.
+ */
+function RichVariant({
+  shell,
+  editor }: {
+  shell: Omit<React.ComponentProps<typeof TextareaShell>, 'children'>;
+  editor: React.ComponentProps<typeof TextareaRichEditor>;
+}): React.JSX.Element {
+  return (
+    <TextareaShell {...shell}>
+      {/*
+        `null` rather than a spinner: the editor resolves from the same document
+        the caller is already rendering, so a fallback would flash for a frame
+        and read as a glitch rather than as loading.
+      */}
+      <Suspense fallback={null}>
+        <TextareaRichEditor {...editor} />
+      </Suspense>
+    </TextareaShell>
+  );
+}
+
 export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   const {
     variant,
@@ -219,18 +265,18 @@ export const Textarea: React.FC<TextareaProps> = (textareaProps) => {
   // If rich text variant, use the rich text editor
   if (variant === 'rich' && richEditorCopy) {
     return (
-      <TextareaShell testId={testId} label={label} glassLabel={glassLabel} error={error} helperText={helperText}>
-        <TextareaRichEditor
-          copy={richEditorCopy}
-          value={richTextValue}
-          onChange={setRichTextValue}
-          placeholder={props.placeholder}
-          error={error}
-          glass={glass}
-          color={color}
-          characterLimit={props.maxLength}
-        />
-      </TextareaShell>
+      <RichVariant
+        shell={{ testId, label, glassLabel, error, helperText }}
+        editor={{
+          copy: richEditorCopy,
+          value: richTextValue,
+          onChange: setRichTextValue,
+          placeholder: props.placeholder,
+          error,
+          glass,
+          color,
+          characterLimit: props.maxLength }}
+      />
     );
   }
 

package/dist/chunk-TSG5C7MP.js

@@ -1,78 +0,0 @@
-// src/components/data-display/DataViews/data-views-day-input.tsx
-import { TextField } from "@mui/material";
-import { useEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-function isoToBr(iso) {
-  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
-  return parts ? `${parts[3]}/${parts[2]}/${parts[1]}` : "";
-}
-function brToIso(text) {
-  const parts = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(text);
-  if (!parts) return "";
-  const [, dd, mm, yyyy] = parts;
-  const day = Number(dd);
-  const month = Number(mm);
-  const year = Number(yyyy);
-  if (year < 1e3) return "";
-  const probe = new Date(Date.UTC(year, month - 1, day));
-  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return "";
-  return `${yyyy}-${mm}-${dd}`;
-}
-function maskBrDate(raw) {
-  const digits = raw.replace(/\D/g, "").slice(0, 8);
-  if (digits.length <= 2) return digits;
-  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
-  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
-}
-function dayInputProps(testId, describedBy) {
-  return {
-    "data-testid": testId,
-    maxLength: 10,
-    inputMode: "numeric",
-    autoComplete: "off",
-    ...describedBy ? { "aria-describedby": describedBy } : {}
-  };
-}
-function DayBoundInput({
-  label,
-  value,
-  onChange,
-  testId,
-  error = false,
-  describedBy,
-  mask
-}) {
-  const applied = value ?? "";
-  const [text, setText] = useState(() => isoToBr(applied));
-  useEffect(() => {
-    setText((current) => brToIso(current) === applied ? current : isoToBr(applied));
-  }, [applied]);
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      size: "small",
-      type: "text",
-      label,
-      error,
-      placeholder: mask,
-      value: text,
-      onChange: (event) => {
-        const next = maskBrDate(event.target.value);
-        setText(next);
-        if (next === "") return onChange(void 0);
-        const iso = brToIso(next);
-        if (iso) onChange(iso);
-      },
-      onBlur: () => setText(isoToBr(applied)),
-      InputLabelProps: { shrink: true },
-      inputProps: dayInputProps(testId, describedBy),
-      sx: { width: 165 }
-    }
-  );
-}
-
-export {
-  isoToBr,
-  DayBoundInput
-};
-//# sourceMappingURL=chunk-TSG5C7MP.js.map

package/dist/chunk-TSG5C7MP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-day-input.tsx"],"sourcesContent":["'use client';\n\n/**\n * A day bound as a MASKED `dd/mm/aaaa` text field, replacing `<input type=\"date\">`.\n *\n * The native control is three separate segments wearing one box. Typing a date\n * means filling a segment, being jumped to the next, and starting over — and\n * which segment comes first is the BROWSER's locale, not ours, so the same\n * field reads `dd/mm/aaaa` for one merchant and `mm/dd/yyyy` for the next with\n * nothing in our code saying which. There is no way to type a date as one\n * continuous run of digits, which is how people actually type dates.\n *\n * A mask gives that back: eight digits straight through, separators inserted as\n * you go, backspace walking back through them.\n *\n * Measured, driving both controls in Chromium with the same eight keystrokes\n * (`01072026`, one `keydown` at a time):\n *\n *   native  →  field ends EMPTY, no filter applied, 0 requests\n *   masked  →  field reads `01/07/2026`, filter applied, 1 request\n *\n * The native result is the whole complaint: you type a date and nothing lands.\n *\n * The second half of the fix is WHEN the bound is written. A partially-typed\n * year is itself a valid date — `2026` passes through `0002`, `0020`, `0202` on\n * the way — so committing on every keystroke would send the grid off to fetch\n * years nobody meant. A bound is written only once the text is a WHOLE, real\n * date, which is what keeps the run above at one request rather than four.\n */\nimport { TextField } from '@mui/material';\nimport React, { useEffect, useState } from 'react';\n\n\n/** `AAAA-MM-DD` (the wire) → `dd/mm/aaaa` (what the merchant reads). */\nexport function isoToBr(iso: string): string {\n  const parts = /^(\\d{4})-(\\d{2})-(\\d{2})$/.exec(iso);\n  return parts ? `${parts[3]}/${parts[2]}/${parts[1]}` : '';\n}\n\n/**\n * `dd/mm/aaaa` → `AAAA-MM-DD`, but ONLY for a day that exists. `31/02/2026`\n * parses fine as three numbers and is not a date, and `Date` would silently\n * roll it into March rather than reject it — so the round trip through UTC is\n * the check: if the month or day comes back changed, the input was not a day.\n */\nexport function brToIso(text: string): string {\n  const parts = /^(\\d{2})\\/(\\d{2})\\/(\\d{4})$/.exec(text);\n  if (!parts) return '';\n  const [, dd, mm, yyyy] = parts;\n  const day = Number(dd);\n  const month = Number(mm);\n  const year = Number(yyyy);\n  if (year < 1000) return '';\n  const probe = new Date(Date.UTC(year, month - 1, day));\n  if (probe.getUTCMonth() !== month - 1 || probe.getUTCDate() !== day) return '';\n  return `${yyyy}-${mm}-${dd}`;\n}\n\n/**\n * Digits only, capped at eight, with the separators put back as you type.\n *\n * Deriving the whole string from the digits — rather than editing the text in\n * place — is what makes backspace behave. Four digits render as `06/08`, not\n * `06/08/`, so deleting the first digit of the year removes the trailing\n * separator with it instead of leaving a dead keystroke that changes nothing.\n */\nexport function maskBrDate(raw: string): string {\n  const digits = raw.replace(/\\D/g, '').slice(0, 8);\n  if (digits.length <= 2) return digits;\n  if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;\n  return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;\n}\n\n/**\n * What has to land on the `<input>` itself rather than on the `TextField`.\n *\n * Anything `TextField` does not recognise is spread onto its root `FormControl`\n * div. `inputMode` went up there once: the attribute sat on a non-editable\n * wrapper, meant nothing, and the phone went on offering the letter keyboard\n * for a field that only takes digits (the `dd/mm/aaaa` hint under a QWERTY\n * layout). Only the `<input>` this reaches decides which keypad opens — and the\n * same is true of `aria-describedby`, which on the wrapper points at a\n * description no screen reader will read out for the field.\n *\n * `numeric` and not `tel`: both raise a keypad, but the phone one is a dialler\n * with `+ * #` on it — keys that cannot occur in a date. A paste carrying\n * separators still lands, because the MASK is what filters the text; the keypad\n * only narrows what a thumb can reach for.\n *\n * Autofill off for the same reason: the browser's saved-value strip covers the\n * keypad to suggest names and addresses, none of which are a date, and none of\n * which the mask would keep.\n */\nfunction dayInputProps(testId: string, describedBy: string | undefined) {\n  return {\n    'data-testid': testId,\n    maxLength: 10,\n    inputMode: 'numeric' as const,\n    autoComplete: 'off',\n    ...(describedBy ? { 'aria-describedby': describedBy } : {}),\n  };\n}\n\n/**\n * One end of a day window. The BOUND stays `AAAA-MM-DD` — the form the backend's\n * inclusive day comparison already speaks, and the form the chip label reads —\n * so only the typing surface changes.\n */\nexport function DayBoundInput({\n  label,\n  value,\n  onChange,\n  testId,\n  error = false,\n  describedBy,\n  mask,\n}: {\n  label: string;\n  /** The applied bound, `AAAA-MM-DD`, or undefined when this end is open. */\n  value: string | undefined;\n  onChange: (bound: string | undefined) => void;\n  testId: string;\n  /**\n   * Paint the field as rejected. It only ever writes a real day by itself, so\n   * this is for a caller judging the PAIR: a window whose end precedes its\n   * start is two valid days and one impossible period, and the field it was\n   * typed into is the only place to say which half is being complained about.\n   */\n  error?: boolean;\n  /** Id of the element carrying that complaint, so it is read WITH the field. */\n  describedBy?: string;\n  /**\n   * The day mask, which IS the placeholder — so the expected ORDER is on\n   * screen before the first keystroke rather than discovered by getting it\n   * wrong. `dd/mm/aaaa` is one locale's order and one locale's letters.\n   *\n   * A PROP rather than a context read: this field has two callers, and only\n   * one of them is inside DataViews. `DateRangePicker` mounts it standalone\n   * with its own message table, so a context read here throws for every host\n   * of that picker — which is exactly what it did.\n   */\n  mask: string;\n}): React.JSX.Element {\n  const applied = value ?? '';\n  const [text, setText] = useState(() => isoToBr(applied));\n\n  // The bound is the APPLIED filter; `text` is what is being typed. Re-sync only\n  // when the applied value moved somewhere the text does not already mean — a\n  // \"Limpar\", a saved view, the other pill resetting the pair. Without that\n  // guard the field's own write bounces straight back mid-edit and resets the\n  // caret, which is the native control's worst habit reproduced by hand.\n  useEffect(() => {\n    setText((current) => (brToIso(current) === applied ? current : isoToBr(applied)));\n  }, [applied]);\n\n  return (\n    <TextField\n      size=\"small\"\n      type=\"text\"\n      label={label}\n      error={error}\n      placeholder={mask}\n      value={text}\n      onChange={(event) => {\n        const next = maskBrDate(event.target.value);\n        setText(next);\n        // Emptying clears the bound. A COMPLETE day applies it. A partial one\n        // does NEITHER — it leaves whatever is applied alone, so typing is never\n        // fought and a half-typed year never reaches the backend.\n        if (next === '') return onChange(undefined);\n        const iso = brToIso(next);\n        if (iso) onChange(iso);\n      }}\n      // Leaving a half-typed (or impossible) date on screen would show a filter\n      // the list is not actually using. On blur the field snaps back to what IS\n      // applied; a complete date already equals it, so this only ever tidies.\n      onBlur={() => setText(isoToBr(applied))}\n      // The placeholder occupies the space an un-shrunk label would render into.\n      InputLabelProps={{ shrink: true }}\n      inputProps={dayInputProps(testId, describedBy)}\n      sx={{ width: 165 }}\n    />\n  );\n}\n"],"mappings":";AA6BA,SAAS,iBAAiB;AAC1B,SAAgB,WAAW,gBAAgB;AA8HvC;AA1HG,SAAS,QAAQ,KAAqB;AAC3C,QAAM,QAAQ,4BAA4B,KAAK,GAAG;AAClD,SAAO,QAAQ,GAAG,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,KAAK;AACzD;AAQO,SAAS,QAAQ,MAAsB;AAC5C,QAAM,QAAQ,8BAA8B,KAAK,IAAI;AACrD,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,CAAC,EAAE,IAAI,IAAI,IAAI,IAAI;AACzB,QAAM,MAAM,OAAO,EAAE;AACrB,QAAM,QAAQ,OAAO,EAAE;AACvB,QAAM,OAAO,OAAO,IAAI;AACxB,MAAI,OAAO,IAAM,QAAO;AACxB,QAAM,QAAQ,IAAI,KAAK,KAAK,IAAI,MAAM,QAAQ,GAAG,GAAG,CAAC;AACrD,MAAI,MAAM,YAAY,MAAM,QAAQ,KAAK,MAAM,WAAW,MAAM,IAAK,QAAO;AAC5E,SAAO,GAAG,IAAI,IAAI,EAAE,IAAI,EAAE;AAC5B;AAUO,SAAS,WAAW,KAAqB;AAC9C,QAAM,SAAS,IAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,GAAG,CAAC;AAChD,MAAI,OAAO,UAAU,EAAG,QAAO;AAC/B,MAAI,OAAO,UAAU,EAAG,QAAO,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC,IAAI,OAAO,MAAM,CAAC,CAAC;AACvE,SAAO,GAAG,OAAO,MAAM,GAAG,CAAC,CAAC,IAAI,OAAO,MAAM,GAAG,CAAC,CAAC,IAAI,OAAO,MAAM,CAAC,CAAC;AACvE;AAsBA,SAAS,cAAc,QAAgB,aAAiC;AACtE,SAAO;AAAA,IACL,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,cAAc;AAAA,IACd,GAAI,cAAc,EAAE,oBAAoB,YAAY,IAAI,CAAC;AAAA,EAC3D;AACF;AAOO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GA0BsB;AACpB,QAAM,UAAU,SAAS;AACzB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,MAAM,QAAQ,OAAO,CAAC;AAOvD,YAAU,MAAM;AACd,YAAQ,CAAC,YAAa,QAAQ,OAAO,MAAM,UAAU,UAAU,QAAQ,OAAO,CAAE;AAAA,EAClF,GAAG,CAAC,OAAO,CAAC;AAEZ,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,OAAO;AAAA,MACP,UAAU,CAAC,UAAU;AACnB,cAAM,OAAO,WAAW,MAAM,OAAO,KAAK;AAC1C,gBAAQ,IAAI;AAIZ,YAAI,SAAS,GAAI,QAAO,SAAS,MAAS;AAC1C,cAAM,MAAM,QAAQ,IAAI;AACxB,YAAI,IAAK,UAAS,GAAG;AAAA,MACvB;AAAA,MAIA,QAAQ,MAAM,QAAQ,QAAQ,OAAO,CAAC;AAAA,MAEtC,iBAAiB,EAAE,QAAQ,KAAK;AAAA,MAChC,YAAY,cAAc,QAAQ,WAAW;AAAA,MAC7C,IAAI,EAAE,OAAO,IAAI;AAAA;AAAA,EACnB;AAEJ;","names":[]}