@zendir/ui 0.1.0

package/dist/react/core/MessageStream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStream.js","sources":["../../../src/react/core/MessageStream.tsx"],"sourcesContent":["/**\n * @zendir/ui - MessageStream Component\n * \n * Stream/notification window for displaying messages, events, or status updates.\n * Each message card has integrated status system with dual-coding (color + shape).\n * \n * AstroUXDS Compliance:\n * - Status colors per AstroUXDS status system\n * - Dual-coding (color + shape) for accessibility\n * - Clear visual hierarchy\n * - Proper contrast ratios\n * \n * @example\n * ```tsx\n * import { MessageStream } from '@zendir/ui';\n * \n * <MessageStream\n *   title=\"Response Status\"\n *   messages={[\n *     { id: '1', text: 'Message Received', status: 'standby' },\n *     { id: '2', text: 'Confirmation Receipt', status: 'normal' },\n *     { id: '3', text: 'Failed', status: 'critical' },\n *   ]}\n * />\n * ```\n */\n\nimport React, { memo, useMemo } from 'react';\nimport { useTheme } from '../theme';\nimport { classNames, type StatusLevel } from '../utils';\nimport { type AstroIconName } from './AstroIcon';\nimport { Icon } from './Icon';\nimport { useCompactMode } from '../hooks';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface StreamMessage {\n  /** Unique identifier */\n  id: string;\n  /** Message text/label */\n  text: string;\n  /** Status level for color and shape */\n  status?: StatusLevel;\n  /** Optional timestamp */\n  timestamp?: Date | string;\n  /** Optional icon override */\n  icon?: AstroIconName;\n  /** Optional metadata/details */\n  details?: string;\n  /** Child messages (for hierarchical display) */\n  children?: StreamMessage[];\n  /** Whether this message is highlighted/active */\n  active?: boolean;\n}\n\nexport interface MessageStreamProps {\n  /** Stream title */\n  title?: string;\n  /** Subtitle or description */\n  subtitle?: string;\n  /** Array of messages to display */\n  messages: StreamMessage[];\n  /** Maximum height before scrolling */\n  maxHeight?: number | string;\n  /** Show timestamps */\n  showTimestamps?: boolean;\n  /** Time format for timestamps */\n  timeFormat?: 'relative' | 'absolute' | 'time-only';\n  /** Variant: 'list' for vertical, 'tree' for hierarchical */\n  variant?: 'list' | 'tree' | 'compact';\n  /** Custom className */\n  className?: string;\n  /** Card size */\n  size?: 'sm' | 'md' | 'lg';\n  /** On message click */\n  onMessageClick?: (message: StreamMessage) => void;\n  /** Loading state */\n  loading?: boolean;\n  /** Empty state message */\n  emptyMessage?: string;\n  /** Show connection lines (tree variant) */\n  showConnectors?: boolean;\n  /** Enable collapsible compact mode - shows condensed view that expands on hover/click */\n  collapsible?: boolean;\n  /** Start expanded when in collapsible mode (pinned state) */\n  defaultExpanded?: boolean;\n  /** Callback when pin state changes in collapsible mode */\n  onPinChange?: (isPinned: boolean) => void;\n}\n\n// =============================================================================\n// Status Shapes (same as DataValue for consistency)\n// =============================================================================\n\nconst STATUS_SHAPES: Record<StatusLevel, (size: number, color: string) => React.ReactNode> = {\n  off: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n    </svg>\n  ),\n  standby: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <circle cx=\"6\" cy=\"6\" r=\"5\" fill=\"none\" stroke={color} strokeWidth=\"2\" />\n    </svg>\n  ),\n  normal: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <circle cx=\"6\" cy=\"6\" r=\"5\" fill={color} />\n    </svg>\n  ),\n  caution: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <rect x=\"1\" y=\"1\" width=\"10\" height=\"10\" fill={color} />\n    </svg>\n  ),\n  serious: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <polygon points=\"6,1 11,6 6,11 1,6\" fill={color} />\n    </svg>\n  ),\n  critical: (size, color) => (\n    <svg viewBox=\"0 0 12 12\" width={size} height={size} aria-hidden=\"true\">\n      <polygon points=\"6,11 1,2 11,2\" fill={color} />\n    </svg>\n  ),\n};\n\n// =============================================================================\n// Helper Functions\n// =============================================================================\n\nfunction getStatusColor(status: StatusLevel | undefined, tokens: any): string {\n  switch (status) {\n    case 'normal': return tokens.colors.status.normal;\n    case 'standby': return tokens.colors.status.standby;\n    case 'caution': return tokens.colors.status.caution;\n    case 'serious': return tokens.colors.status.serious;\n    case 'critical': return tokens.colors.status.critical;\n    case 'off': return tokens.colors.status.off;\n    default: return tokens.colors.status.standby;\n  }\n}\n\nfunction formatTimestamp(\n  timestamp: Date | string | undefined,\n  format: 'relative' | 'absolute' | 'time-only'\n): string {\n  if (!timestamp) return '';\n  \n  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;\n  \n  if (format === 'relative') {\n    const now = new Date();\n    const diff = now.getTime() - date.getTime();\n    const seconds = Math.floor(diff / 1000);\n    const minutes = Math.floor(seconds / 60);\n    const hours = Math.floor(minutes / 60);\n    \n    if (seconds < 60) return 'Just now';\n    if (minutes < 60) return `${minutes}m ago`;\n    if (hours < 24) return `${hours}h ago`;\n    return date.toLocaleDateString();\n  }\n  \n  if (format === 'time-only') {\n    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });\n  }\n  \n  return date.toLocaleString();\n}\n\n// =============================================================================\n// Message Card Component\n// =============================================================================\n\ninterface MessageCardProps {\n  message: StreamMessage;\n  tokens: any;\n  size: 'sm' | 'md' | 'lg';\n  showTimestamp: boolean;\n  timeFormat: 'relative' | 'absolute' | 'time-only';\n  onClick?: (message: StreamMessage) => void;\n  variant: 'list' | 'tree' | 'compact';\n}\n\nconst MessageCard = memo(function MessageCard({\n  message,\n  tokens,\n  size,\n  showTimestamp,\n  timeFormat,\n  onClick,\n  variant,\n}: MessageCardProps) {\n  const status = message.status || 'standby';\n  const statusColor = getStatusColor(status, tokens);\n  \n  const sizeConfig = {\n    sm: { padding: 8, fontSize: '0.75rem', fontSizeSmall: '0.625rem', iconSize: 10, gap: 6 },   // 12px / 10px in rem\n    md: { padding: 12, fontSize: '0.875rem', fontSizeSmall: '0.75rem', iconSize: 12, gap: 8 }, // 14px / 12px in rem\n    lg: { padding: 16, fontSize: '1rem', fontSizeSmall: '0.875rem', iconSize: 14, gap: 10 },    // 16px / 14px in rem\n  }[size];\n  \n  const isCompact = variant === 'compact';\n  \n  return (\n    <div\n      role=\"listitem\"\n      aria-label={`${message.text} - ${status}`}\n      onClick={() => onClick?.(message)}\n      style={{\n        display: 'flex',\n        alignItems: 'center',\n        gap: sizeConfig.gap,\n        padding: isCompact ? `${sizeConfig.padding / 2}px ${sizeConfig.padding}px` : sizeConfig.padding,\n        backgroundColor: tokens.colors.background.elevated,\n        border: `1.5px solid ${statusColor}`,\n        borderRadius: tokens.borderRadius.md,\n        cursor: onClick ? 'pointer' : 'default',\n        transition: 'all 0.15s ease',\n        ...(message.active && {\n          boxShadow: `0 0 0 2px ${statusColor}40`,\n        }),\n      }}\n      onMouseEnter={(e) => {\n        if (onClick) {\n          e.currentTarget.style.backgroundColor = tokens.colors.background.surface;\n          e.currentTarget.style.transform = 'translateY(-1px)';\n        }\n      }}\n      onMouseLeave={(e) => {\n        if (onClick) {\n          e.currentTarget.style.backgroundColor = tokens.colors.background.elevated;\n          e.currentTarget.style.transform = 'translateY(0)';\n        }\n      }}\n    >\n      {/* Status Shape */}\n      <span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>\n        {STATUS_SHAPES[status](sizeConfig.iconSize, statusColor)}\n      </span>\n      \n      {/* Message Text */}\n      <span\n        style={{\n          flex: 1,\n          fontSize: sizeConfig.fontSize,\n          fontWeight: 500,\n          color: tokens.colors.text.primary,\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {message.text}\n      </span>\n      \n      {/* Details (if any) */}\n      {message.details && !isCompact && (\n        <span\n          style={{\n            fontSize: sizeConfig.fontSizeSmall,\n            color: tokens.colors.text.tertiary,\n          }}\n        >\n          {message.details}\n        </span>\n      )}\n      \n      {/* Timestamp */}\n      {showTimestamp && message.timestamp && (\n        <span\n          style={{\n            fontSize: sizeConfig.fontSizeSmall,\n            color: tokens.colors.text.tertiary,\n            fontFamily: tokens.typography.fontFamily.mono,\n            whiteSpace: 'nowrap',\n          }}\n        >\n          {formatTimestamp(message.timestamp, timeFormat)}\n        </span>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// Tree Node Component (for hierarchical display)\n// =============================================================================\n\ninterface TreeNodeProps {\n  message: StreamMessage;\n  tokens: any;\n  size: 'sm' | 'md' | 'lg';\n  showTimestamp: boolean;\n  timeFormat: 'relative' | 'absolute' | 'time-only';\n  onClick?: (message: StreamMessage) => void;\n  depth: number;\n  showConnectors: boolean;\n  isLast: boolean;\n}\n\nconst TreeNode = memo(function TreeNode({\n  message,\n  tokens,\n  size,\n  showTimestamp,\n  timeFormat,\n  onClick,\n  depth,\n  showConnectors,\n  isLast,\n}: TreeNodeProps) {\n  const hasChildren = message.children && message.children.length > 0;\n  const indentSize = 32;\n  \n  return (\n    <div style={{ position: 'relative' }}>\n      {/* Connector Lines */}\n      {showConnectors && depth > 0 && (\n        <>\n          {/* Vertical line from parent */}\n          <div\n            style={{\n              position: 'absolute',\n              left: (depth - 1) * indentSize + 16,\n              top: 0,\n              width: 2,\n              height: isLast ? '50%' : '100%',\n              backgroundColor: tokens.colors.border.muted,\n            }}\n          />\n          {/* Horizontal line to node */}\n          <div\n            style={{\n              position: 'absolute',\n              left: (depth - 1) * indentSize + 16,\n              top: '50%',\n              width: indentSize - 8,\n              height: 2,\n              backgroundColor: tokens.colors.border.muted,\n            }}\n          />\n        </>\n      )}\n      \n      {/* Message Card */}\n      <div style={{ marginLeft: depth * indentSize }}>\n        <MessageCard\n          message={message}\n          tokens={tokens}\n          size={size}\n          showTimestamp={showTimestamp}\n          timeFormat={timeFormat}\n          onClick={onClick}\n          variant=\"tree\"\n        />\n      </div>\n      \n      {/* Render children */}\n      {hasChildren && (\n        <div style={{ marginTop: 8 }}>\n          {message.children!.map((child, index) => (\n            <div key={child.id} style={{ marginTop: index > 0 ? 8 : 0 }}>\n              <TreeNode\n                message={child}\n                tokens={tokens}\n                size={size}\n                showTimestamp={showTimestamp}\n                timeFormat={timeFormat}\n                onClick={onClick}\n                depth={depth + 1}\n                showConnectors={showConnectors}\n                isLast={index === message.children!.length - 1}\n              />\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n});\n\n// =============================================================================\n// MessageStream Component\n// =============================================================================\n\nexport const MessageStream = memo(function MessageStream({\n  title,\n  subtitle,\n  messages,\n  maxHeight,\n  showTimestamps = false,\n  timeFormat = 'relative',\n  variant = 'list',\n  className = '',\n  size = 'md',\n  onMessageClick,\n  loading = false,\n  emptyMessage = 'No messages',\n  showConnectors = true,\n  collapsible = false,\n  defaultExpanded = false,\n  onPinChange,\n}: MessageStreamProps): React.ReactElement {\n  const { tokens, theme, prefersReducedMotion } = useTheme();\n  const isTransparentTheme = theme === 'transparent' || theme === 'transparent-bold' || theme === 'transparent-minimal';\n\n  // Collapsible compact mode state management\n  const { expanded, isPinned, handlers, transitionDuration } = useCompactMode({\n    compact: collapsible,\n    defaultExpanded,\n    onPinChange,\n  });\n  \n  // Card container styles - Use transparent background with blur for transparent themes (matching Timeline)\n  const containerStyle = useMemo(() => ({\n    backgroundColor: isTransparentTheme ? 'transparent' : tokens.colors.background.surface,\n    ...(isTransparentTheme && { \n      backdropFilter: 'blur(12px)' as const, \n      WebkitBackdropFilter: 'blur(12px)' as const,\n    }),\n    ...(tokens.colors.border.cardStyle ?? { border: `1px solid ${tokens.colors.border.muted}` }),\n    borderRadius: tokens.borderRadius.lg,\n    padding: tokens.spacing.md,\n    display: 'flex',\n    flexDirection: 'column' as const,\n  }), [tokens, isTransparentTheme]);\n\n  // Count messages by status for compact view summary (must be before any conditional return for rules-of-hooks)\n  const statusCounts = useMemo(() => {\n    const counts = { normal: 0, caution: 0, critical: 0, other: 0 };\n    messages.forEach(m => {\n      if (m.status === 'normal') counts.normal++;\n      else if (m.status === 'caution') counts.caution++;\n      else if (m.status === 'critical' || m.status === 'serious') counts.critical++;\n      else counts.other++;\n    });\n    return counts;\n  }, [messages]);\n  \n  // Loading skeleton\n  if (loading) {\n    return (\n      <article\n        className={classNames('zendir-message-stream', className)}\n        style={containerStyle}\n        aria-busy=\"true\"\n        aria-label=\"Loading messages\"\n      >\n        {title && (\n          <div style={{ marginBottom: 16 }}>\n            <div style={{\n              height: 18,\n              width: 120,\n              backgroundColor: tokens.colors.background.elevated,\n              borderRadius: 4,\n              marginBottom: 8,\n            }} />\n            {subtitle && (\n              <div style={{\n                height: 14,\n                width: 200,\n                backgroundColor: tokens.colors.background.elevated,\n                borderRadius: 4,\n              }} />\n            )}\n          </div>\n        )}\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>\n          {[1, 2, 3].map((i) => (\n            <div\n              key={i}\n              style={{\n                height: 44,\n                backgroundColor: tokens.colors.background.elevated,\n                borderRadius: tokens.borderRadius.md,\n                border: `2px solid ${tokens.colors.border.muted}`,\n              }}\n            />\n          ))}\n        </div>\n      </article>\n    );\n  }\n\n  // Collapsed view - shows summary of messages\n  if (collapsible && !expanded) {\n    return (\n      <article\n        className={classNames('zendir-message-stream', 'collapsed', className)}\n        {...handlers}\n        style={{\n          ...containerStyle,\n          padding: `${tokens.spacing.sm} ${tokens.spacing.md}`,\n          cursor: 'pointer',\n          transition: `all ${transitionDuration} ease-out`,\n        }}\n        onMouseEnter={(e) => {\n          handlers.onMouseEnter();\n          if (!prefersReducedMotion) {\n            (e.currentTarget as HTMLElement).style.transform = 'scale(1.01)';\n            (e.currentTarget as HTMLElement).style.boxShadow = `0 4px 12px ${tokens.colors.accent.primary}20`;\n          }\n        }}\n        onMouseLeave={(e) => {\n          handlers.onMouseLeave();\n          (e.currentTarget as HTMLElement).style.transform = 'scale(1)';\n          (e.currentTarget as HTMLElement).style.boxShadow = '';\n        }}\n        aria-label={`${title || 'Messages'} (collapsed)`}\n      >\n        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: tokens.spacing.md }}>\n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\n            <Icon name=\"message\" size={14} color={tokens.colors.accent.primary} />\n            <span style={{ fontWeight: tokens.typography.fontWeight.medium }}>\n              {title ? title.split(' ')[0] : 'Messages'}\n            </span>\n            <span style={{ color: tokens.colors.text.tertiary, fontSize: tokens.typography.fontSize.xs }}>\n              ({messages.length})\n            </span>\n          </div>\n          \n          <div style={{ display: 'flex', alignItems: 'center', gap: tokens.spacing.sm }}>\n            {statusCounts.critical > 0 && (\n              <span style={{ \n                color: tokens.colors.status.critical,\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n              }}>\n                {statusCounts.critical} critical\n              </span>\n            )}\n            {statusCounts.caution > 0 && (\n              <span style={{ \n                color: tokens.colors.status.caution,\n                fontSize: tokens.typography.fontSize.xs,\n                fontWeight: tokens.typography.fontWeight.medium,\n              }}>\n                {statusCounts.caution} warn\n              </span>\n            )}\n            {isPinned && (\n              <Icon name=\"lock\" size={12} color={tokens.colors.accent.primary} />\n            )}\n          </div>\n        </div>\n      </article>\n    );\n  }\n  \n  return (\n    <div\n      className={classNames('zendir-message-stream', collapsible ? 'expanded' : '', className)}\n      {...(collapsible ? handlers : {})}\n      role={collapsible ? handlers.role : 'log'}\n      tabIndex={collapsible ? handlers.tabIndex : undefined}\n      aria-expanded={collapsible ? handlers['aria-expanded'] : undefined}\n      style={{\n        ...containerStyle,\n        cursor: collapsible ? 'pointer' : undefined,\n        transition: collapsible ? `all ${transitionDuration} ease-out` : undefined,\n      }}\n      aria-label={title || 'Message stream'}\n      aria-live=\"polite\"\n    >\n      {/* Header */}\n      {(title || subtitle) && (\n        <header style={{ marginBottom: 16 }}>\n          {title && (\n            <h3 style={{\n              fontSize: tokens.typography.fontSize.lg,\n              fontWeight: 500, // AstroUXDS medium for headers\n              color: tokens.colors.text.primary,\n              margin: 0,\n            }}>\n              {title}\n            </h3>\n          )}\n          {subtitle && (\n            <p style={{\n              fontSize: tokens.typography.fontSize.sm,\n              color: tokens.colors.text.tertiary,\n              margin: '4px 0 0 0',\n            }}>\n              {subtitle}\n            </p>\n          )}\n        </header>\n      )}\n      \n      {/* Messages Container — tabIndex for keyboard scroll access (WCAG 2.1.1) */}\n      <div\n        role=\"list\"\n        tabIndex={maxHeight ? 0 : undefined}\n        aria-label={maxHeight ? `${title || 'Messages'} scrollable list` : undefined}\n        style={{\n          display: 'flex',\n          flexDirection: 'column',\n          gap: variant === 'compact' ? 4 : 8,\n          ...(maxHeight && {\n            maxHeight,\n            overflowY: 'auto',\n            paddingRight: 8,\n          }),\n        }}\n      >\n        {messages.length === 0 ? (\n          <div\n            style={{\n              textAlign: 'center',\n              padding: 32,\n              color: tokens.colors.text.tertiary,\n              fontSize: tokens.typography.fontSize.sm,\n            }}\n          >\n            {emptyMessage}\n          </div>\n        ) : variant === 'tree' ? (\n          messages.map((message, index) => (\n            <TreeNode\n              key={message.id}\n              message={message}\n              tokens={tokens}\n              size={size}\n              showTimestamp={showTimestamps}\n              timeFormat={timeFormat}\n              onClick={onMessageClick}\n              depth={0}\n              showConnectors={showConnectors}\n              isLast={index === messages.length - 1}\n            />\n          ))\n        ) : (\n          messages.map((message) => (\n            <MessageCard\n              key={message.id}\n              message={message}\n              tokens={tokens}\n              size={size}\n              showTimestamp={showTimestamps}\n              timeFormat={timeFormat}\n              onClick={onMessageClick}\n              variant={variant}\n            />\n          ))\n        )}\n      </div>\n    </div>\n  );\n});\n\nexport default MessageStream;\n"],"names":["MessageCard","TreeNode","MessageStream"],"mappings":"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"}

package/dist/react/core/MissionCalendar.d.ts

@@ -0,0 +1,81 @@
+import { default as React } from 'react';
+
+export type CalendarViewMode = 'month' | 'week' | 'day' | 'gantt' | 'list';
+export type ActivityStatus = 'created' | 'scheduled' | 'started' | 'completed' | 'paused' | 'stopped' | 'disabled' | 'error' | 'failed' | 'crashed';
+export type ActivityType = 'command' | 'script' | 'reserve' | 'metadata' | 'note' | 'contact' | 'eclipse' | 'pass';
+export interface CalendarEvent {
+    /** Unique identifier */
+    id: string;
+    /** Event title */
+    title: string;
+    /** Start time */
+    start: Date;
+    /** End time (optional for metadata/point events) */
+    end?: Date;
+    /** Activity type */
+    type: ActivityType;
+    /** Execution status */
+    status?: ActivityStatus;
+    /** Timeline this event belongs to */
+    timeline?: string;
+    /** Description / notes */
+    description?: string;
+    /** Command string (for command type) */
+    command?: string;
+    /** Script path (for script type) */
+    script?: string;
+    /** Metadata key-value pairs */
+    metadata?: Record<string, string | number | boolean>;
+    /** Whether this event is recurring */
+    recurring?: boolean;
+    /** Recurrence pattern */
+    recurrenceRule?: string;
+    /** Color override */
+    color?: string;
+    /** Whether the event is editable */
+    editable?: boolean;
+}
+export interface CalendarTimeline {
+    /** Unique timeline ID */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Color for this timeline */
+    color?: string;
+    /** Whether the timeline is active */
+    active?: boolean;
+}
+export interface MissionCalendarProps {
+    /** Calendar events */
+    events: CalendarEvent[];
+    /** Available timelines */
+    timelines?: CalendarTimeline[];
+    /** Initial view mode (default: 'month') */
+    defaultView?: CalendarViewMode;
+    /** Initial date to display */
+    initialDate?: Date;
+    /** Height (default: 600) */
+    height?: number | string;
+    /** Title */
+    title?: string;
+    /** Show mini calendar sidebar (default: true) */
+    showSidebar?: boolean;
+    /** Show timeline selector (default: true) */
+    showTimelines?: boolean;
+    /** Show event type filter (default: true) */
+    showFilters?: boolean;
+    /** Show create button (default: true) */
+    showCreate?: boolean;
+    /** Week starts on Monday (default: true for ops) */
+    weekStartsMonday?: boolean;
+    /** Called when an event is clicked */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Called when creating a new event */
+    onEventCreate?: (event: Partial<CalendarEvent>) => void;
+    /** Called when navigating to a day (e.g., to open Timeline Gantt view) */
+    onDayDrillDown?: (date: Date, events: CalendarEvent[]) => void;
+    /** CSS class */
+    className?: string;
+}
+export declare const MissionCalendar: React.NamedExoticComponent<MissionCalendarProps>;
+export default MissionCalendar;