@1889ca/ui 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@1889ca/ui",
-	"version": "0.5.0",
+	"version": "0.6.0",
 	"type": "module",
 	"main": "src/index.js",
 	"module": "src/index.js",

package/src/components/ContextMenu.css

@@ -4,7 +4,8 @@
   position: fixed;
   z-index: 1000;
   min-width: 170px;
-  background: rgba(18, 18, 24, 0.82);
+  max-width: calc(100vw - 1rem);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);
@@ -12,11 +13,12 @@
   padding: 4px;
   box-shadow: var(--ui-shadow-float);
   animation: ui-ctx-in 0.12s var(--ui-ease);
+  transform-origin: top left;
 }
 
 @keyframes ui-ctx-in {
-  from { opacity: 0; transform: scale(0.96); }
-  to { opacity: 1; transform: scale(1); }
+  from { opacity: 0; transform: scaleY(0.8) scaleX(0.95); }
+  to { opacity: 1; transform: scaleY(1) scaleX(1); }
 }
 
 .ui-ctx-menu-item {

package/src/components/ContextMenu.jsx

@@ -1,5 +1,6 @@
 /** Contract: contracts/packages-ui-components/rules.md */
 import { useEffect, useRef } from 'react';
+import useClickOutside from '../hooks/useClickOutside.js';
 
 /**
  * Right-click context menu. Renders at (x, y) with a list of action items.
@@ -8,20 +9,7 @@ import { useEffect, useRef } from 'react';
 export default function ContextMenu({ x, y, items, onClose }) {
   const ref = useRef(null);
 
-  useEffect(() => {
-    function onMouseDown(e) {
-      if (ref.current && !ref.current.contains(e.target)) onClose();
-    }
-    function onKey(e) {
-      if (e.key === 'Escape') onClose();
-    }
-    document.addEventListener('mousedown', onMouseDown);
-    document.addEventListener('keydown', onKey);
-    return () => {
-      document.removeEventListener('mousedown', onMouseDown);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [onClose]);
+  useClickOutside(ref, onClose);
 
   useEffect(() => {
     if (!ref.current) return;

package/src/components/DraggablePanel.css

@@ -3,7 +3,7 @@
 .ui-dp-panel {
   position: absolute;
   z-index: 30;
-  background: rgba(18, 18, 24, 0.8);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);
@@ -12,6 +12,7 @@
   display: flex;
   flex-direction: column;
   min-width: 120px;
+  max-width: calc(100vw - 1rem);
   user-select: none;
 }
 

package/src/components/DraggablePanel.jsx

@@ -1,5 +1,6 @@
 /** Contract: contracts/packages-ui-components/rules.md */
-import { useRef, useState, useEffect } from 'react';
+import { useRef } from 'react';
+import useLocalStorage from '../hooks/useLocalStorage.js';
 
 /**
  * Floating panel with drag-to-move titlebar and optional vertical resize.
@@ -7,25 +8,11 @@ import { useRef, useState, useEffect } from 'react';
  * @param {string} storagePrefix - localStorage key prefix (default: 'ui-panel')
  */
 export default function DraggablePanel({ panelId, title, defaultPos, resizable, minHeight, maxHeight, className, children, onClose, storagePrefix = 'ui-panel' }) {
-  const [pos, setPos] = useState(() => {
-    try { const s = localStorage.getItem(`${storagePrefix}-${panelId}`); return s ? JSON.parse(s) : defaultPos; }
-    catch { return defaultPos; }
-  });
-  const [height, setHeight] = useState(() => {
-    try { const s = localStorage.getItem(`${storagePrefix}-h-${panelId}`); return s ? Number(s) : (minHeight || 200); }
-    catch { return minHeight || 200; }
-  });
+  const [pos, setPos] = useLocalStorage(`${storagePrefix}-${panelId}`, defaultPos);
+  const [height, setHeight] = useLocalStorage(`${storagePrefix}-h-${panelId}`, minHeight || 200);
   const dragRef = useRef(null);
   const resizeRef = useRef(null);
 
-  useEffect(() => {
-    try { localStorage.setItem(`${storagePrefix}-${panelId}`, JSON.stringify(pos)); } catch {}
-  }, [pos, panelId, storagePrefix]);
-
-  useEffect(() => {
-    if (resizable) try { localStorage.setItem(`${storagePrefix}-h-${panelId}`, String(height)); } catch {}
-  }, [height, panelId, resizable, storagePrefix]);
-
   function handleDragStart(e) {
     if (e.target.closest('.ui-dp-close') || e.target.closest('button') || e.target.closest('input') || e.target.closest('select')) return;
     e.preventDefault();

package/src/components/EmptyState.css

@@ -0,0 +1,36 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 3rem 2rem;
+  gap: 0.75rem;
+}
+
+.ui-empty-state-icon {
+  color: var(--ui-text-subtle);
+  margin-bottom: 0.25rem;
+  opacity: 0.6;
+}
+
+.ui-empty-state-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--ui-text-muted);
+  margin: 0;
+}
+
+.ui-empty-state-desc {
+  font-size: 0.82rem;
+  color: var(--ui-text-subtle);
+  max-width: 280px;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.ui-empty-state-action {
+  margin-top: 0.5rem;
+}

package/src/components/EmptyState.jsx

@@ -0,0 +1,27 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import './EmptyState.css';
+
+/**
+ * Empty state placeholder with icon, message, and optional action.
+ * @param {ReactNode} icon - Icon or illustration (optional, shows default if omitted)
+ * @param {string} title - Primary message
+ * @param {string} description - Secondary explanation (optional)
+ * @param {ReactNode} action - Action button or link (optional)
+ */
+export default function EmptyState({ icon, title, description, action }) {
+  return (
+    <div className="ui-empty-state">
+      <div className="ui-empty-state-icon">
+        {icon || (
+          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+            <rect x="8" y="8" width="32" height="32" rx="4" opacity="0.3" />
+            <path d="M20 24h8M24 20v8" opacity="0.5" />
+          </svg>
+        )}
+      </div>
+      <h3 className="ui-empty-state-title">{title}</h3>
+      {description && <p className="ui-empty-state-desc">{description}</p>}
+      {action && <div className="ui-empty-state-action">{action}</div>}
+    </div>
+  );
+}

package/src/components/ItemCard.css

@@ -50,7 +50,7 @@
 .ui-item-card:hover {
   border-color: var(--ui-border-strong);
   transform: translateY(-2px) scale(1.01);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(124, 108, 240, 0.08);
 }
 
 .ui-item-card-thumb {
@@ -109,3 +109,14 @@
   flex-shrink: 0;
   font-variant-numeric: tabular-nums;
 }
+
+/* Selection pulse */
+@keyframes ui-card-select-pulse {
+  0% { box-shadow: 0 0 0 1px var(--ui-accent), 0 0 24px var(--ui-accent-glow); }
+  50% { box-shadow: 0 0 0 2px var(--ui-accent), 0 0 32px var(--ui-accent-glow); }
+  100% { box-shadow: 0 0 0 1px var(--ui-accent), 0 0 24px var(--ui-accent-glow); }
+}
+
+.ui-item-card--selected .ui-item-card {
+  animation: ui-card-select-pulse 0.5s var(--ui-ease);
+}

package/src/components/ItemCard.jsx

@@ -15,10 +15,10 @@
  * @param {function} onDragStart - Drag start handler
  * @param {function} onDragEnd - Drag end handler
  */
-export default function ItemCard({ thumbnail, name, meta, selected, draggable, onClick, onDoubleClick, onContextMenu, onDragStart, onDragEnd }) {
+export default function ItemCard({ thumbnail, name, meta, selected, draggable, glow, viewTransitionName, onClick, onDoubleClick, onContextMenu, onDragStart, onDragEnd }) {
   return (
     <li
-      className={`ui-item-card-wrap${selected ? ' ui-item-card--selected' : ''}`}
+      className={`ui-item-card-wrap${selected ? ' ui-item-card--selected' : ''}${glow !== false && thumbnail ? ' ui-ambient-glow' : ''}`}
       draggable={draggable}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
@@ -26,10 +26,15 @@ export default function ItemCard({ thumbnail, name, meta, selected, draggable, o
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
     >
+      {glow !== false && thumbnail && (
+        <div className="ui-ambient-glow-source" aria-hidden="true">
+          <img src={thumbnail} alt="" draggable={false} />
+        </div>
+      )}
       <div className="ui-item-card">
         <div className="ui-item-card-thumb">
           {thumbnail
-            ? <img src={thumbnail} alt={name} draggable={false} />
+            ? <img src={thumbnail} alt={name} draggable={false} style={viewTransitionName ? { viewTransitionName } : undefined} />
             : <div className="ui-item-card-thumb-empty" />}
         </div>
         <div className="ui-item-card-info">

package/src/components/ItemGrid.css

@@ -11,3 +11,25 @@
   background: var(--ui-accent-subtle);
   border-radius: var(--ui-radius);
 }
+
+/* Staggered entrance animation for grid children */
+.ui-item-grid > * {
+  animation: ui-grid-enter 0.4s var(--ui-ease) both;
+}
+
+@keyframes ui-grid-enter {
+  from { opacity: 0; transform: translateY(12px) scale(0.97); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+.ui-item-grid > *:nth-child(1) { animation-delay: 0ms; }
+.ui-item-grid > *:nth-child(2) { animation-delay: 30ms; }
+.ui-item-grid > *:nth-child(3) { animation-delay: 60ms; }
+.ui-item-grid > *:nth-child(4) { animation-delay: 90ms; }
+.ui-item-grid > *:nth-child(5) { animation-delay: 120ms; }
+.ui-item-grid > *:nth-child(6) { animation-delay: 150ms; }
+.ui-item-grid > *:nth-child(7) { animation-delay: 180ms; }
+.ui-item-grid > *:nth-child(8) { animation-delay: 210ms; }
+.ui-item-grid > *:nth-child(9) { animation-delay: 240ms; }
+.ui-item-grid > *:nth-child(10) { animation-delay: 270ms; }
+.ui-item-grid > *:nth-child(n+11) { animation-delay: 300ms; }

package/src/components/Lightbox.css

@@ -51,7 +51,7 @@
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
-  background: rgba(18, 18, 24, 0.6);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur));
   border: 1px solid var(--ui-border);
   color: var(--ui-text);
@@ -66,7 +66,7 @@
 }
 
 .ui-lightbox-nav:hover {
-  background: rgba(18, 18, 24, 0.85);
+  background: var(--ui-glass-heavy);
   border-color: var(--ui-border-strong);
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
 }
@@ -78,3 +78,13 @@
 
 .ui-lightbox-prev { left: 1.5rem; }
 .ui-lightbox-next { right: 1.5rem; }
+
+@media (max-width: 480px) {
+  .ui-lightbox-nav {
+    width: 36px;
+    height: 36px;
+  }
+
+  .ui-lightbox-prev { left: 0.5rem; }
+  .ui-lightbox-next { right: 0.5rem; }
+}

package/src/components/Lightbox.jsx

@@ -5,7 +5,7 @@ import { useEffect, useCallback } from 'react';
  * Fullscreen image viewer with keyboard navigation.
  * Space/Escape closes, ArrowLeft/ArrowRight navigates.
  */
-export default function Lightbox({ src, name, onClose, onPrev, onNext }) {
+export default function Lightbox({ src, name, onClose, onPrev, onNext, viewTransitionName }) {
   const handleKey = useCallback((e) => {
     if (e.key === 'Escape' || e.key === ' ') {
       e.preventDefault();
@@ -23,7 +23,7 @@ export default function Lightbox({ src, name, onClose, onPrev, onNext }) {
   return (
     <div className="ui-lightbox-backdrop" onClick={onClose}>
       <div className="ui-lightbox-content" onClick={(e) => e.stopPropagation()}>
-        <img src={src} alt={name} className="ui-lightbox-img" />
+        <img src={src} alt={name} className="ui-lightbox-img" style={viewTransitionName ? { viewTransitionName } : undefined} />
         {name && <div className="ui-lightbox-caption">{name}</div>}
       </div>
       {onPrev && (

package/src/components/LoginCard.css

@@ -8,7 +8,7 @@
   width: 100%;
   max-width: 400px;
   padding: 2rem;
-  background: rgba(18, 18, 24, 0.7);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);

package/src/components/Modal.css

@@ -3,7 +3,7 @@
 .ui-modal-backdrop {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--ui-backdrop);
   backdrop-filter: blur(4px);
   display: flex;
   align-items: center;
@@ -18,19 +18,20 @@
 }
 
 .ui-modal {
-  background: rgba(18, 18, 24, 0.85);
+  background: var(--ui-glass-heavy);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);
   border-radius: var(--ui-radius-lg);
   width: 320px;
+  max-width: calc(100vw - 2rem);
   box-shadow: var(--ui-shadow-float);
   animation: ui-modal-in 0.25s var(--ui-ease-spring);
 }
 
 @keyframes ui-modal-in {
-  from { opacity: 0; transform: scale(0.95) translateY(8px); }
-  to { opacity: 1; transform: scale(1) translateY(0); }
+  from { opacity: 0; transform: scale(0.95) translateY(8px); filter: blur(4px); }
+  to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
 }
 
 .ui-modal-header {

package/src/components/PageHeader.css

@@ -6,12 +6,13 @@
   justify-content: space-between;
   padding: 0.75rem 1.5rem;
   border-bottom: 1px solid var(--ui-border);
-  background: rgba(8, 8, 12, 0.75);
+  background: var(--ui-glass-bar);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
   position: sticky;
   top: 0;
   z-index: 10;
+  gap: 0.5rem;
 }
 
 .ui-page-header-left {
@@ -19,12 +20,20 @@
   align-items: center;
   gap: 0.5rem;
   min-width: 0;
+  overflow: hidden;
 }
 
 .ui-page-header-actions {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+@media (max-width: 480px) {
+  .ui-page-header {
+    padding: 0.75rem 0.75rem;
+  }
 }
 
 /* Breadcrumbs */
@@ -34,6 +43,8 @@
   align-items: center;
   gap: 0.4rem;
   font-size: 0.85rem;
+  min-width: 0;
+  overflow: hidden;
 }
 
 .ui-breadcrumb-segment {
@@ -62,6 +73,9 @@
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--ui-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /* Selection bar */

package/src/components/Panel.css

@@ -1,7 +1,7 @@
 /** Contract: contracts/packages-ui-components/rules.md */
 
 .ui-panel {
-  background: rgba(18, 18, 24, 0.8);
+  background: var(--ui-glass);
   backdrop-filter: blur(var(--ui-glass-blur-heavy));
   border: 1px solid var(--ui-border);
   border-top-color: var(--ui-border-strong);
@@ -10,9 +10,10 @@
   display: flex;
   flex-direction: column;
   min-width: 120px;
-  overflow: hidden;
 }
 
+/* ── Titlebar ── */
+
 .ui-panel-titlebar {
   display: flex;
   align-items: center;
@@ -53,6 +54,56 @@
   background: var(--ui-surface-raised);
 }
 
+/* ── Tabs ── */
+
+.ui-panel-tabs {
+  display: flex;
+  flex-shrink: 0;
+  padding: 0 0.35rem;
+  gap: 2px;
+  border-bottom: 1px solid var(--ui-border);
+}
+
+.ui-panel-tab {
+  position: relative;
+  padding: 0.45rem 0.7rem;
+  background: none;
+  border: none;
+  color: var(--ui-text-subtle);
+  font-size: 0.7rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.ui-panel-tab::after {
+  content: '';
+  position: absolute;
+  left: 0.35rem;
+  right: 0.35rem;
+  bottom: -1px;
+  height: 2px;
+  border-radius: 1px;
+  background: transparent;
+  transition: background 0.2s var(--ui-ease);
+}
+
+.ui-panel-tab:hover {
+  color: var(--ui-text-muted);
+}
+
+.ui-panel-tab--active {
+  color: var(--ui-accent);
+}
+
+.ui-panel-tab--active::after {
+  background: var(--ui-accent);
+}
+
+/* ── Body ── */
+
 .ui-panel-body {
   flex: 1;
   min-height: 0;

package/src/components/Panel.jsx

@@ -4,25 +4,45 @@
  * Static glass panel — same chrome as DraggablePanel but positioned in flow.
  * Use for sidebar sections, inspector panels, toolboxes, etc.
  *
- * @param {string} title - Titlebar text
+ * @param {string} title - Titlebar text (optional)
+ * @param {Array} tabs - [{id, label}] tab definitions (optional)
+ * @param {string} activeTab - Currently active tab id
+ * @param {function} onTabChange - Called with tab id on click
  * @param {ReactNode} children - Panel body content
  * @param {ReactNode} actions - Extra elements in the titlebar (right side, before close)
  * @param {function} onClose - Close button handler (omit to hide close button)
  * @param {string} className - Additional class names
  * @param {boolean} flush - If true, removes body padding (for custom layouts)
  */
-export default function Panel({ title, children, actions, onClose, className, flush }) {
+export default function Panel({ title, tabs, activeTab, onTabChange, children, actions, onClose, className, flush, edgeLight = true }) {
+  const hasHeader = title || actions || onClose;
+  const hasTabs = tabs && tabs.length > 0;
+
   return (
-    <div className={`ui-panel${className ? ` ${className}` : ''}`}>
-      {title && (
+    <div className={`ui-panel${edgeLight ? ' ui-edge-light' : ''}${className ? ` ${className}` : ''}`}>
+      {hasHeader && (
         <div className="ui-panel-titlebar">
-          <span className="ui-panel-title">{title}</span>
+          {title && <span className="ui-panel-title">{title}</span>}
           <div className="ui-panel-actions">
             {actions}
             {onClose && <button className="ui-panel-close" type="button" onClick={onClose}>&times;</button>}
           </div>
         </div>
       )}
+      {hasTabs && (
+        <nav className="ui-panel-tabs">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              className={`ui-panel-tab${activeTab === tab.id ? ' ui-panel-tab--active' : ''}`}
+              onClick={() => onTabChange?.(tab.id)}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </nav>
+      )}
       <div className={`ui-panel-body${flush ? ' ui-panel-body--flush' : ''}`}>
         {children}
       </div>

package/src/components/Skeleton.css

@@ -0,0 +1,79 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+
+.ui-skeleton {
+  background: var(--ui-surface-raised);
+  border-radius: var(--ui-radius-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+.ui-skeleton::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.04) 40%,
+    rgba(255, 255, 255, 0.06) 50%,
+    rgba(255, 255, 255, 0.04) 60%,
+    transparent 100%
+  );
+  animation: ui-skeleton-shimmer 1.8s var(--ui-ease) infinite;
+}
+
+@keyframes ui-skeleton-shimmer {
+  from { transform: translateX(-100%); }
+  to { transform: translateX(100%); }
+}
+
+.ui-skeleton--text {
+  height: 0.75rem;
+  width: 100%;
+}
+
+.ui-skeleton--circle {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+
+.ui-skeleton--rect {
+  width: 100%;
+  height: 120px;
+  border-radius: var(--ui-radius);
+}
+
+.ui-skeleton--card {
+  width: 100%;
+  height: 200px;
+  border-radius: var(--ui-radius-lg);
+}
+
+.ui-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* Pre-built card skeleton */
+
+.ui-skeleton-card {
+  border-radius: var(--ui-radius);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface);
+  overflow: hidden;
+}
+
+.ui-skeleton-card-thumb {
+  aspect-ratio: 1;
+  border-radius: 0;
+  border-bottom: 1px solid var(--ui-border-subtle);
+}
+
+.ui-skeleton-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  padding: 0.6rem;
+}

package/src/components/Skeleton.jsx

@@ -0,0 +1,47 @@
+/** Contract: contracts/packages-ui-components/rules.md */
+import './Skeleton.css';
+
+/**
+ * Shimmer loading placeholder.
+ * @param {string} variant - 'text' | 'circle' | 'rect' | 'card' (default: 'text')
+ * @param {string|number} width - CSS width (default: '100%')
+ * @param {string|number} height - CSS height (default: auto based on variant)
+ * @param {number} lines - Number of text lines for variant='text' (default: 1)
+ */
+export default function Skeleton({ variant = 'text', width, height, lines = 1 }) {
+  const style = {
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+  };
+
+  if (variant === 'text' && lines > 1) {
+    return (
+      <div className="ui-skeleton-lines">
+        {Array.from({ length: lines }, (_, i) => (
+          <div
+            key={i}
+            className="ui-skeleton ui-skeleton--text"
+            style={i === lines - 1 ? { ...style, width: '60%' } : style}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return <div className={`ui-skeleton ui-skeleton--${variant}`} style={style} />;
+}
+
+/**
+ * Pre-built skeleton that matches ItemCard layout.
+ */
+Skeleton.Card = function SkeletonCard() {
+  return (
+    <div className="ui-skeleton-card">
+      <div className="ui-skeleton ui-skeleton--rect ui-skeleton-card-thumb" />
+      <div className="ui-skeleton-card-info">
+        <div className="ui-skeleton ui-skeleton--text" style={{ width: '70%' }} />
+        <div className="ui-skeleton ui-skeleton--text" style={{ width: '40%' }} />
+      </div>
+    </div>
+  );
+};