@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/components/ui/data-display/timeline.esm.js

@@ -1,441 +1,102 @@
-import React, { useState, useMemo } from 'react';
-import { 
-  TimelineProps, 
-  TimelineItem, 
-  TimelineAction,
-  TimelineItemProps
-} from './types';
-
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo } from 'react';
 // Simple icon components (inline SVG)
-const CalendarIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-  </svg>
-);
-
-const ClockIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-  </svg>
-);
-
-const UserIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-  </svg>
-);
-
-const BellIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 17h5l-5 5-5-5h5V3h5v14z" />
-  </svg>
-);
-
-const SearchIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-  </svg>
-);
-
-const FilterIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" />
-  </svg>
-);
-
-const DotsIcon: React.FC<{ className?: string }> = ({ className = '' }) => (
-  <svg
-    className={`timeline__icon ${className}`}
-    fill="none"
-    stroke="currentColor"
-    viewBox="0 0 24 24"
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
-  </svg>
-);
-
+const CalendarIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }));
+const ClockIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" }) }));
+const UserIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }));
+const BellIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 17h5l-5 5-5-5h5V3h5v14z" }) }));
+const SearchIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }));
+const FilterIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.414A1 1 0 013 6.707V4z" }) }));
+const DotsIcon = ({ className = '' }) => (_jsx("svg", { className: `timeline__icon ${className}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" }) }));
 // Timeline Search and Filter Bar
-const TimelineSearchFilterBar: React.FC<{
-  searchable: boolean;
-  searchValue: string;
-  onSearchChange: (value: string) => void;
-  filterable: boolean;
-  theme: string;
-  size: 'sm' | 'md' | 'lg';
-}> = ({
-  searchable,
-  searchValue,
-  onSearchChange,
-  filterable,
-  size
-}) => {
-
-  if (!searchable && !filterable) return null;
-
-  return (
-    <div className={`timeline__search-filter-bar timeline__search-filter-bar--${size}`}>
-      {searchable && (
-        <div className="timeline__search-container">
-          <div className="timeline__search-icon">
-            <SearchIcon />
-          </div>
-          <input
-            type="text"
-            value={searchValue}
-            onChange={(e) => onSearchChange(e.target.value)}
-            placeholder="Search timeline..."
-            className={`timeline__search-input timeline__search-input--${size}`}
-          />
-        </div>
-      )}
-
-      {filterable && (
-        <button className={`timeline__filter-button timeline__filter-button--${size}`}>
-          <FilterIcon className="timeline__filter-icon" />
-          <span className="timeline__filter-text">Filter</span>
-        </button>
-      )}
-    </div>
-  );
+const TimelineSearchFilterBar = ({ searchable, searchValue, onSearchChange, filterable, size }) => {
+    if (!searchable && !filterable)
+        return null;
+    return (_jsxs("div", { className: `timeline__search-filter-bar timeline__search-filter-bar--${size}`, children: [searchable && (_jsxs("div", { className: "timeline__search-container", children: [_jsx("div", { className: "timeline__search-icon", children: _jsx(SearchIcon, {}) }), _jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), placeholder: "Search timeline...", className: `timeline__search-input timeline__search-input--${size}` })] })), filterable && (_jsxs("button", { className: `timeline__filter-button timeline__filter-button--${size}`, children: [_jsx(FilterIcon, { className: "timeline__filter-icon" }), _jsx("span", { className: "timeline__filter-text", children: "Filter" })] }))] }));
 };
-
 // Timeline Item Actions Component
-const TimelineItemActions: React.FC<{
-  actions: TimelineAction[];
-  item: TimelineItem;
-  theme: string;
-  size: 'sm' | 'md' | 'lg';
-}> = ({ actions, item, size }) => {
-  const [showMenu, setShowMenu] = useState(false);
-
-  if (actions.length === 0) return null;
-
-  // If only one action, show it directly
-  if (actions.length === 1) {
-    const action = actions[0];
-    return (
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          action.onClick(item);
-        }}
-        className={`timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' : ''}`}
-        title={action.label}
-      >
-        {action.icon || <DotsIcon className="timeline__action-icon" />}
-      </button>
-    );
-  }
-
-  // Multiple actions - show dropdown menu
-  return (
-    <div className="timeline__action-dropdown">
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          setShowMenu(!showMenu);
-        }}
-        className={`timeline__action-button timeline__action-button--${size}`}
-      >
-        <DotsIcon className="timeline__action-icon" />
-      </button>
-
-      {showMenu && (
-        <>
-          {/* Backdrop */}
-          <div
-            className="timeline__action-backdrop"
-            onClick={() => setShowMenu(false)}
-          />
-          
-          {/* Menu */}
-          <div className="timeline__action-menu">
-            {actions.map((action, index) => (
-              <button
-                key={index}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  action.onClick(item);
-                  setShowMenu(false);
-                }}
-                className={`timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' : ''}`}
-              >
-                {action.icon && <span className="timeline__action-menu-icon">{action.icon}</span>}
-                {action.label}
-              </button>
-            ))}
-          </div>
-        </>
-      )}
-    </div>
-  );
+const TimelineItemActions = ({ actions, item, size }) => {
+    const [showMenu, setShowMenu] = useState(false);
+    if (actions.length === 0)
+        return null;
+    // If only one action, show it directly
+    if (actions.length === 1) {
+        const action = actions[0];
+        return (_jsx("button", { onClick: (e) => {
+                e.stopPropagation();
+                action.onClick(item);
+            }, className: `timeline__action-button timeline__action-button--${size} ${action.variant === 'danger' ? 'timeline__action-button--danger' : ''}`, title: action.label, children: action.icon || _jsx(DotsIcon, { className: "timeline__action-icon" }) }));
+    }
+    // Multiple actions - show dropdown menu
+    return (_jsxs("div", { className: "timeline__action-dropdown", children: [_jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    setShowMenu(!showMenu);
+                }, className: `timeline__action-button timeline__action-button--${size}`, children: _jsx(DotsIcon, { className: "timeline__action-icon" }) }), showMenu && (_jsxs(_Fragment, { children: [_jsx("div", { className: "timeline__action-backdrop", onClick: () => setShowMenu(false) }), _jsx("div", { className: "timeline__action-menu", children: actions.map((action, index) => (_jsxs("button", { onClick: (e) => {
+                                e.stopPropagation();
+                                action.onClick(item);
+                                setShowMenu(false);
+                            }, className: `timeline__action-menu-item ${action.variant === 'danger' ? 'timeline__action-menu-item--danger' : ''}`, children: [action.icon && _jsx("span", { className: "timeline__action-menu-icon", children: action.icon }), action.label] }, index))) })] }))] }));
 };
-
 // Individual Timeline Item Component
-const TimelineItemComponent: React.FC<TimelineItemProps> = ({
-  item,
-  position,
-  isLast,
-  mode,
-  actions,
-  onClick,
-  theme,
-  size,
-  variant,
-  showConnector
-}) => {
-  // const { getTheme } = useTheme();
-  // const themeConfig = getTheme(theme);
-  // const colors = themeConfig?.colors || getDefaultColors();
-
-  const isClickable = !!onClick;
-
-  const getIcon = () => {
-    if (item.icon) {
-      return item.icon;
-    }
-    
-    switch (item.type) {
-      case 'event': return <CalendarIcon className="timeline__dot-icon" />;
-      case 'task': return <ClockIcon className="timeline__dot-icon" />;
-      case 'user': return <UserIcon className="timeline__dot-icon" />;
-      case 'system': return <BellIcon className="timeline__dot-icon" />;
-      default: return null;
-    }
-  };
-
-  const formatTimestamp = (timestamp: string) => {
-    const date = new Date(timestamp);
-    return date.toLocaleString();
-  };
-
-  return (
-    <div className={`timeline__item timeline__item--${mode} timeline__item--${position} timeline__item--${size}`}>
-      {/* Content */}
-      <div
-        className={`timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' : ''}`}
-        onClick={isClickable ? () => onClick(item) : undefined}
-      >
-        <div className={`timeline__item-content-wrapper timeline__item-content-wrapper--${position}`}>
-          {/* Header */}
-          <div className="timeline__item-header">
-            <div className="timeline__item-text">
-              <h3 className="timeline__item-title">
-                {item.title}
-              </h3>
-              <p className="timeline__item-timestamp">
-                {formatTimestamp(item.timestamp)}
-              </p>
-            </div>
-            
-            {/* Actions */}
-            <div className="timeline__item-actions">
-              <TimelineItemActions 
-                actions={actions}
-                item={item}
-                theme={theme}
-                size={size}
-              />
-            </div>
-          </div>
-
-          {/* Content */}
-          {item.description && (
-            <p className="timeline__item-description">
-              {item.description}
-            </p>
-          )}
-
-          {/* Additional Content */}
-          {item.content && (
-            <div className="timeline__item-content-extra">
-              {item.content}
-            </div>
-          )}
-
-          {/* Metadata */}
-          {item.metadata && (
-            <div className="timeline__item-metadata">
-              {item.metadata.author && (
-                <span className="timeline__item-author">
-                  By {item.metadata.author}
-                </span>
-              )}
-              {item.metadata.category && (
-                <span className="timeline__item-category">
-                  {item.metadata.category}
-                </span>
-              )}
-              {item.metadata.tags && item.metadata.tags.map((tag, index) => (
-                <span
-                  key={index}
-                  className="timeline__item-tag"
-                >
-                  #{tag}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Timeline Dot */}
-      <div className="timeline__dot-container">
-        <div
-          className={`timeline__dot timeline__dot--${size} timeline__dot--${item.status || 'default'}`}
-        >
-          {getIcon()}
-        </div>
-
-        {/* Connector Line */}
-        {showConnector && !isLast && (
-          <div className={`timeline__connector timeline__connector--${size}`} />
-        )}
-      </div>
-    </div>
-  );
+const TimelineItemComponent = ({ item, position, isLast, mode, actions, onClick, theme, size, variant, showConnector }) => {
+    // const { getTheme } = useTheme();
+    // const themeConfig = getTheme(theme);
+    // const colors = themeConfig?.colors || getDefaultColors();
+    const isClickable = !!onClick;
+    const getIcon = () => {
+        if (item.icon) {
+            return item.icon;
+        }
+        switch (item.type) {
+            case 'event': return _jsx(CalendarIcon, { className: "timeline__dot-icon" });
+            case 'task': return _jsx(ClockIcon, { className: "timeline__dot-icon" });
+            case 'user': return _jsx(UserIcon, { className: "timeline__dot-icon" });
+            case 'system': return _jsx(BellIcon, { className: "timeline__dot-icon" });
+            default: return null;
+        }
+    };
+    const formatTimestamp = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleString();
+    };
+    return (_jsxs("div", { className: `timeline__item timeline__item--${mode} timeline__item--${position} timeline__item--${size}`, children: [_jsx("div", { className: `timeline__item-content timeline__item-content--${size} timeline__item-content--${variant} ${isClickable ? 'timeline__item-content--clickable' : ''}`, onClick: isClickable ? () => onClick(item) : undefined, children: _jsxs("div", { className: `timeline__item-content-wrapper timeline__item-content-wrapper--${position}`, children: [_jsxs("div", { className: "timeline__item-header", children: [_jsxs("div", { className: "timeline__item-text", children: [_jsx("h3", { className: "timeline__item-title", children: item.title }), _jsx("p", { className: "timeline__item-timestamp", children: formatTimestamp(item.timestamp) })] }), _jsx("div", { className: "timeline__item-actions", children: _jsx(TimelineItemActions, { actions: actions, item: item, theme: theme, size: size }) })] }), item.description && (_jsx("p", { className: "timeline__item-description", children: item.description })), item.content && (_jsx("div", { className: "timeline__item-content-extra", children: item.content })), item.metadata && (_jsxs("div", { className: "timeline__item-metadata", children: [item.metadata.author && (_jsxs("span", { className: "timeline__item-author", children: ["By ", item.metadata.author] })), item.metadata.category && (_jsx("span", { className: "timeline__item-category", children: item.metadata.category })), item.metadata.tags && item.metadata.tags.map((tag, index) => (_jsxs("span", { className: "timeline__item-tag", children: ["#", tag] }, index)))] }))] }) }), _jsxs("div", { className: "timeline__dot-container", children: [_jsx("div", { className: `timeline__dot timeline__dot--${size} timeline__dot--${item.status || 'default'}`, children: getIcon() }), showConnector && !isLast && (_jsx("div", { className: `timeline__connector timeline__connector--${size}` }))] })] }));
 };
-
 // Main Timeline Component
-export const Timeline: React.FC<TimelineProps> = ({
-  items,
-  mode = 'left',
-  reverse = false,
-  actions = [],
-  onItemClick,
-  searchable = false,
-  searchValue = '',
-  onSearchChange,
-  filterable = false,
-  // filters = [], // TODO: Implement filter functionality
-  // onFiltersChange, // TODO: Implement filter functionality
-  showConnector = true,
-  loading = false,
-  error = null,
-  emptyMessage = 'No timeline items',
-  className = '',
-  theme = 'stan-design',
-  size = 'md',
-  variant = 'default'
-}) => {
-
-  // Filter items based on search
-  const filteredItems = useMemo(() => {
-    if (!searchable || !searchValue.trim()) return items;
-    
-    const searchLower = searchValue.toLowerCase();
-    return items.filter(item => 
-      item.title.toLowerCase().includes(searchLower) ||
-      item.description?.toLowerCase().includes(searchLower) ||
-      item.metadata?.author?.toLowerCase().includes(searchLower) ||
-      item.metadata?.category?.toLowerCase().includes(searchLower) ||
-      item.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchLower))
-    );
-  }, [items, searchable, searchValue]);
-
-  // Sort items by timestamp
-  const sortedItems = useMemo(() => {
-    const sorted = [...filteredItems].sort((a, b) => {
-      const dateA = new Date(a.timestamp).getTime();
-      const dateB = new Date(b.timestamp).getTime();
-      return reverse ? dateB - dateA : dateA - dateB;
-    });
-    
-    return sorted;
-  }, [filteredItems, reverse]);
-
-  if (loading) {
-    return (
-      <div className={`timeline__loading ${className || ''}`}>
-        Loading timeline...
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={`timeline__error ${className || ''}`}>
-        {error}
-      </div>
-    );
-  }
-
-  return (
-    <div className={`timeline__container ${className || ''}`}>
-      {/* Search and Filter Bar */}
-      <TimelineSearchFilterBar
-        searchable={searchable}
-        searchValue={searchValue}
-        onSearchChange={onSearchChange || (() => {})}
-        filterable={filterable}
-        theme={theme}
-        size={size}
-      />
-
-      {/* Timeline Container */}
-      <div className="timeline__timeline">
-        {sortedItems.length === 0 ? (
-          <div className="timeline__empty">
-            {emptyMessage}
-          </div>
-        ) : (
-          <div className="timeline__items">
-            {sortedItems.map((item, index) => {
-              const position = mode === 'alternate' 
-                ? (index % 2 === 0 ? 'left' : 'right')
-                : mode;
-              
-              return (
-                <TimelineItemComponent
-                  key={item.id}
-                  item={item}
-                  position={position}
-                  isLast={index === sortedItems.length - 1}
-                  mode={mode}
-                  actions={actions}
-                  onClick={onItemClick}
-                  theme={theme}
-                  size={size}
-                  variant={variant}
-                  showConnector={showConnector}
-                />
-              );
-            })}
-          </div>
-        )}
-      </div>
-    </div>
-  );
+export const Timeline = ({ items, mode = 'left', reverse = false, actions = [], onItemClick, searchable = false, searchValue = '', onSearchChange, filterable = false, 
+// filters = [], // TODO: Implement filter functionality
+// onFiltersChange, // TODO: Implement filter functionality
+showConnector = true, loading = false, error = null, emptyMessage = 'No timeline items', className = '', theme = 'stan-design', size = 'md', variant = 'default' }) => {
+    // Filter items based on search
+    const filteredItems = useMemo(() => {
+        if (!searchable || !searchValue.trim())
+            return items;
+        const searchLower = searchValue.toLowerCase();
+        return items.filter(item => item.title.toLowerCase().includes(searchLower) ||
+            item.description?.toLowerCase().includes(searchLower) ||
+            item.metadata?.author?.toLowerCase().includes(searchLower) ||
+            item.metadata?.category?.toLowerCase().includes(searchLower) ||
+            item.metadata?.tags?.some(tag => tag.toLowerCase().includes(searchLower)));
+    }, [items, searchable, searchValue]);
+    // Sort items by timestamp
+    const sortedItems = useMemo(() => {
+        const sorted = [...filteredItems].sort((a, b) => {
+            const dateA = new Date(a.timestamp).getTime();
+            const dateB = new Date(b.timestamp).getTime();
+            return reverse ? dateB - dateA : dateA - dateB;
+        });
+        return sorted;
+    }, [filteredItems, reverse]);
+    if (loading) {
+        return (_jsx("div", { className: `timeline__loading ${className || ''}`, children: "Loading timeline..." }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `timeline__error ${className || ''}`, children: error }));
+    }
+    return (_jsxs("div", { className: `timeline__container ${className || ''}`, children: [_jsx(TimelineSearchFilterBar, { searchable: searchable, searchValue: searchValue, onSearchChange: onSearchChange || (() => { }), filterable: filterable, theme: theme, size: size }), _jsx("div", { className: "timeline__timeline", children: sortedItems.length === 0 ? (_jsx("div", { className: "timeline__empty", children: emptyMessage })) : (_jsx("div", { className: "timeline__items", children: sortedItems.map((item, index) => {
+                        const position = mode === 'alternate'
+                            ? (index % 2 === 0 ? 'left' : 'right')
+                            : mode;
+                        return (_jsx(TimelineItemComponent, { item: item, position: position, isLast: index === sortedItems.length - 1, mode: mode, actions: actions, onClick: onItemClick, theme: theme, size: size, variant: variant, showConnector: showConnector }, item.id));
+                    }) })) })] }));
 };
-
 export default Timeline;