react-restyle-components 0.4.47 → 0.4.48

package/lib/src/core-components/src/components/ag-grid/elements.js

@@ -1,19 +1,174 @@
-"use strict";import{styled as e,css as t,keyframes as n}from"styled-components";const a={alpine:{backgroundColor:"#ffffff",headerBackgroundColor:"#f8f8f8",oddRowBackgroundColor:"#fcfcfc",borderColor:"#dde2eb",selectedRowBackgroundColor:"#b7e4ff",hoverRowBackgroundColor:"#ecf0f1",textColor:"#181d1f",headerTextColor:"#181d1f",accentColor:"#2196f3",cellPadding:"0 12px",headerPadding:"0 12px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',fontSize:"13px",headerFontSize:"13px",headerFontWeight:"600",borderRadius:"0",cellBorderWidth:"1px"},"alpine-dark":{backgroundColor:"#181d1f",headerBackgroundColor:"#222628",oddRowBackgroundColor:"#1f2426",borderColor:"#3d4749",selectedRowBackgroundColor:"#005880",hoverRowBackgroundColor:"#2d3436",textColor:"#f0f0f0",headerTextColor:"#f0f0f0",accentColor:"#2196f3",cellPadding:"0 12px",headerPadding:"0 12px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',fontSize:"13px",headerFontSize:"13px",headerFontWeight:"600",borderRadius:"0",cellBorderWidth:"1px"},balham:{backgroundColor:"#ffffff",headerBackgroundColor:"#f5f7f7",oddRowBackgroundColor:"#fcfdfd",borderColor:"#bdc3c7",selectedRowBackgroundColor:"#b7e4ff",hoverRowBackgroundColor:"#ecf0f1",textColor:"#000000",headerTextColor:"#000000",accentColor:"#0091ea",cellPadding:"0 4px",headerPadding:"0 4px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',fontSize:"12px",headerFontSize:"12px",headerFontWeight:"600",borderRadius:"0",cellBorderWidth:"1px"},"balham-dark":{backgroundColor:"#2d3436",headerBackgroundColor:"#1e272c",oddRowBackgroundColor:"#32393c",borderColor:"#424a4d",selectedRowBackgroundColor:"#005880",hoverRowBackgroundColor:"#3d4749",textColor:"#f0f0f0",headerTextColor:"#f0f0f0",accentColor:"#0091ea",cellPadding:"0 4px",headerPadding:"0 4px",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',fontSize:"12px",headerFontSize:"12px",headerFontWeight:"600",borderRadius:"0",cellBorderWidth:"1px"},material:{backgroundColor:"#ffffff",headerBackgroundColor:"#fafafa",oddRowBackgroundColor:"#ffffff",borderColor:"#e0e0e0",selectedRowBackgroundColor:"#e3f2fd",hoverRowBackgroundColor:"#f5f5f5",textColor:"rgba(0, 0, 0, 0.87)",headerTextColor:"rgba(0, 0, 0, 0.54)",accentColor:"#3f51b5",cellPadding:"0 24px 0 24px",headerPadding:"0 24px 0 24px",fontFamily:'Roboto, "Helvetica Neue", sans-serif',fontSize:"14px",headerFontSize:"12px",headerFontWeight:"500",borderRadius:"0",cellBorderWidth:"1px"},quartz:{backgroundColor:"#ffffff",headerBackgroundColor:"#ffffff",oddRowBackgroundColor:"#fafafa",borderColor:"#e2e8f0",selectedRowBackgroundColor:"#dbeafe",hoverRowBackgroundColor:"#f1f5f9",textColor:"#1e293b",headerTextColor:"#475569",accentColor:"#3b82f6",cellPadding:"0 16px",headerPadding:"0 16px",fontFamily:'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"14px",headerFontSize:"12px",headerFontWeight:"600",borderRadius:"8px",cellBorderWidth:"1px"},"quartz-dark":{backgroundColor:"#0f172a",headerBackgroundColor:"#1e293b",oddRowBackgroundColor:"#1e293b",borderColor:"#334155",selectedRowBackgroundColor:"#1e3a5f",hoverRowBackgroundColor:"#334155",textColor:"#e2e8f0",headerTextColor:"#94a3b8",accentColor:"#3b82f6",cellPadding:"0 16px",headerPadding:"0 16px",fontFamily:'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"14px",headerFontSize:"12px",headerFontWeight:"600",borderRadius:"8px",cellBorderWidth:"1px"}};export const getTheme=(o,r)=>({...a[o],...r});const i=n`
+/**
+ * AG Grid Styled Components
+ * Beautiful, responsive styled components for the AG Grid-like table
+ */
+import { styled, css, keyframes } from 'styled-components';
+// ============================================================================
+// Theme Definitions
+// ============================================================================
+const themes = {
+    alpine: {
+        backgroundColor: '#ffffff',
+        headerBackgroundColor: '#f8f8f8',
+        oddRowBackgroundColor: '#fcfcfc',
+        borderColor: '#dde2eb',
+        selectedRowBackgroundColor: '#b7e4ff',
+        hoverRowBackgroundColor: '#ecf0f1',
+        textColor: '#181d1f',
+        headerTextColor: '#181d1f',
+        accentColor: '#2196f3',
+        cellPadding: '0 12px',
+        headerPadding: '0 12px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: '13px',
+        headerFontSize: '13px',
+        headerFontWeight: '600',
+        borderRadius: '0',
+        cellBorderWidth: '1px',
+    },
+    'alpine-dark': {
+        backgroundColor: '#181d1f',
+        headerBackgroundColor: '#222628',
+        oddRowBackgroundColor: '#1f2426',
+        borderColor: '#3d4749',
+        selectedRowBackgroundColor: '#005880',
+        hoverRowBackgroundColor: '#2d3436',
+        textColor: '#f0f0f0',
+        headerTextColor: '#f0f0f0',
+        accentColor: '#2196f3',
+        cellPadding: '0 12px',
+        headerPadding: '0 12px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: '13px',
+        headerFontSize: '13px',
+        headerFontWeight: '600',
+        borderRadius: '0',
+        cellBorderWidth: '1px',
+    },
+    balham: {
+        backgroundColor: '#ffffff',
+        headerBackgroundColor: '#f5f7f7',
+        oddRowBackgroundColor: '#fcfdfd',
+        borderColor: '#bdc3c7',
+        selectedRowBackgroundColor: '#b7e4ff',
+        hoverRowBackgroundColor: '#ecf0f1',
+        textColor: '#000000',
+        headerTextColor: '#000000',
+        accentColor: '#0091ea',
+        cellPadding: '0 4px',
+        headerPadding: '0 4px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: '12px',
+        headerFontSize: '12px',
+        headerFontWeight: '600',
+        borderRadius: '0',
+        cellBorderWidth: '1px',
+    },
+    'balham-dark': {
+        backgroundColor: '#2d3436',
+        headerBackgroundColor: '#1e272c',
+        oddRowBackgroundColor: '#32393c',
+        borderColor: '#424a4d',
+        selectedRowBackgroundColor: '#005880',
+        hoverRowBackgroundColor: '#3d4749',
+        textColor: '#f0f0f0',
+        headerTextColor: '#f0f0f0',
+        accentColor: '#0091ea',
+        cellPadding: '0 4px',
+        headerPadding: '0 4px',
+        fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+        fontSize: '12px',
+        headerFontSize: '12px',
+        headerFontWeight: '600',
+        borderRadius: '0',
+        cellBorderWidth: '1px',
+    },
+    material: {
+        backgroundColor: '#ffffff',
+        headerBackgroundColor: '#fafafa',
+        oddRowBackgroundColor: '#ffffff',
+        borderColor: '#e0e0e0',
+        selectedRowBackgroundColor: '#e3f2fd',
+        hoverRowBackgroundColor: '#f5f5f5',
+        textColor: 'rgba(0, 0, 0, 0.87)',
+        headerTextColor: 'rgba(0, 0, 0, 0.54)',
+        accentColor: '#3f51b5',
+        cellPadding: '0 24px 0 24px',
+        headerPadding: '0 24px 0 24px',
+        fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
+        fontSize: '14px',
+        headerFontSize: '12px',
+        headerFontWeight: '500',
+        borderRadius: '0',
+        cellBorderWidth: '1px',
+    },
+    quartz: {
+        backgroundColor: '#ffffff',
+        headerBackgroundColor: '#ffffff',
+        oddRowBackgroundColor: '#fafafa',
+        borderColor: '#e2e8f0',
+        selectedRowBackgroundColor: '#dbeafe',
+        hoverRowBackgroundColor: '#f1f5f9',
+        textColor: '#1e293b',
+        headerTextColor: '#475569',
+        accentColor: '#3b82f6',
+        cellPadding: '0 16px',
+        headerPadding: '0 16px',
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: '14px',
+        headerFontSize: '12px',
+        headerFontWeight: '600',
+        borderRadius: '8px',
+        cellBorderWidth: '1px',
+    },
+    'quartz-dark': {
+        backgroundColor: '#0f172a',
+        headerBackgroundColor: '#1e293b',
+        oddRowBackgroundColor: '#1e293b',
+        borderColor: '#334155',
+        selectedRowBackgroundColor: '#1e3a5f',
+        hoverRowBackgroundColor: '#334155',
+        textColor: '#e2e8f0',
+        headerTextColor: '#94a3b8',
+        accentColor: '#3b82f6',
+        cellPadding: '0 16px',
+        headerPadding: '0 16px',
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        fontSize: '14px',
+        headerFontSize: '12px',
+        headerFontWeight: '600',
+        borderRadius: '8px',
+        cellBorderWidth: '1px',
+    },
+};
+export const getTheme = (variant, custom) => ({
+    ...themes[variant],
+    ...custom,
+});
+// ============================================================================
+// Animations
+// ============================================================================
+const fadeIn = keyframes `
   from { opacity: 0; }
   to { opacity: 1; }
-`,s=n`
+`;
+const slideInRight = keyframes `
   from { transform: translateX(10px); opacity: 0; }
   to { transform: translateX(0); opacity: 1; }
-`,h=n`
+`;
+const pulse = keyframes `
   0%, 100% { opacity: 1; }
   50% { opacity: 0.5; }
-`,x=n`
+`;
+const shimmer = keyframes `
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-`,g=n`
+`;
+const spin = keyframes `
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`,b=n`
+`;
+const rowEnter = keyframes `
   from {
     opacity: 0;
     transform: translateY(-4px);
@@ -22,20 +177,25 @@
     opacity: 1;
     transform: translateY(0);
   }
-`,f=n`
+`;
+const cellFlash = keyframes `
   0% { background-color: rgba(76, 175, 80, 0.4); }
   100% { background-color: transparent; }
-`;export const GridRoot=e.div`
+`;
+// ============================================================================
+// Grid Container
+// ============================================================================
+export const GridRoot = styled.div `
   display: flex;
   flex-direction: column;
   width: 100%;
   height: 100%;
-  background-color: ${({$theme:o})=>o.backgroundColor};
-  font-family: ${({$theme:o})=>o.fontFamily};
-  font-size: ${({$theme:o})=>o.fontSize};
-  color: ${({$theme:o})=>o.textColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
-  border-radius: ${({$theme:o})=>o.borderRadius};
+  background-color: ${({ $theme }) => $theme.backgroundColor};
+  font-family: ${({ $theme }) => $theme.fontFamily};
+  font-size: ${({ $theme }) => $theme.fontSize};
+  color: ${({ $theme }) => $theme.textColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-radius: ${({ $theme }) => $theme.borderRadius};
   overflow: hidden;
   position: relative;
 
@@ -44,27 +204,33 @@
   }
 
   /* Responsive styles */
-  ${({$responsive:o})=>o&&t`
+  ${({ $responsive }) => $responsive &&
+    css `
       @media (max-width: 768px) {
         border-radius: 0;
         border-left: none;
         border-right: none;
       }
     `}
-`,GridWrapper=e.div`
+`;
+export const GridWrapper = styled.div `
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
   overflow: hidden;
-`,GridToolbar=e.div`
+`;
+// ============================================================================
+// Toolbar / Header Area
+// ============================================================================
+export const GridToolbar = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 8px 12px;
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
   flex-wrap: wrap;
 
   @media (max-width: 640px) {
@@ -72,12 +238,14 @@
     align-items: stretch;
     gap: 8px;
   }
-`,ToolbarGroup=e.div`
+`;
+export const ToolbarGroup = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-`,ToolbarButton=e.button`
+`;
+export const ToolbarButton = styled.button `
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -86,16 +254,17 @@
   font-size: 13px;
   font-weight: 500;
   border-radius: 4px;
-  border: 1px solid ${({$theme:o})=>o.borderColor};
-  background: ${({$theme:o,$active:r})=>r?o.accentColor:o.backgroundColor};
-  color: ${({$theme:o,$active:r})=>r?"#ffffff":o.textColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.backgroundColor)};
+  color: ${({ $theme, $active }) => ($active ? '#ffffff' : $theme.textColor)};
   cursor: pointer;
   transition: all 0.15s ease;
   white-space: nowrap;
 
-  ${({$variant:o,$theme:r})=>o==="primary"&&t`
-      background: ${r.accentColor};
-      border-color: ${r.accentColor};
+  ${({ $variant, $theme }) => $variant === 'primary' &&
+    css `
+      background: ${$theme.accentColor};
+      border-color: ${$theme.accentColor};
       color: #ffffff;
 
       &:hover {
@@ -103,7 +272,8 @@
       }
     `}
 
-  ${({$variant:o})=>o==="danger"&&t`
+  ${({ $variant }) => $variant === 'danger' &&
+    css `
       background: #ef4444;
       border-color: #ef4444;
       color: #ffffff;
@@ -115,7 +285,7 @@
     `}
 
   &:hover:not(:disabled) {
-    background: ${({$theme:o,$active:r})=>r?o.accentColor:o.hoverRowBackgroundColor};
+    background: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.hoverRowBackgroundColor)};
   }
 
   &:disabled {
@@ -127,7 +297,8 @@
     width: 16px;
     height: 16px;
   }
-`,QuickFilter=e.div`
+`;
+export const QuickFilter = styled.div `
   position: relative;
   display: flex;
   align-items: center;
@@ -136,21 +307,21 @@
     width: 220px;
     padding: 6px 12px 6px 32px;
     font-size: 13px;
-    border: 1px solid ${({$theme:o})=>o.borderColor};
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
     border-radius: 4px;
-    background: ${({$theme:o})=>o.backgroundColor};
-    color: ${({$theme:o})=>o.textColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
     outline: none;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
 
     &::placeholder {
-      color: ${({$theme:o})=>o.headerTextColor};
+      color: ${({ $theme }) => $theme.headerTextColor};
       opacity: 0.6;
     }
 
     &:focus {
-      border-color: ${({$theme:o})=>o.accentColor};
-      box-shadow: 0 0 0 3px ${({$theme:o})=>o.accentColor}20;
+      border-color: ${({ $theme }) => $theme.accentColor};
+      box-shadow: 0 0 0 3px ${({ $theme }) => $theme.accentColor}20;
     }
 
     @media (max-width: 640px) {
@@ -163,41 +334,54 @@
     left: 10px;
     width: 14px;
     height: 14px;
-    color: ${({$theme:o})=>o.headerTextColor};
+    color: ${({ $theme }) => $theme.headerTextColor};
     opacity: 0.6;
   }
-`,TableContainer=e.div`
+`;
+// ============================================================================
+// Table Container
+// ============================================================================
+export const TableContainer = styled.div `
   flex: 1;
   overflow: auto;
   position: relative;
   min-height: 0;
 
-  ${({$maxHeight:o})=>o&&t`
-      max-height: ${typeof o=="number"?`${o}px`:o};
+  ${({ $maxHeight }) => $maxHeight &&
+    css `
+      max-height: ${typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
     `}
-`,StyledTable=e.table`
+`;
+export const StyledTable = styled.table `
   width: 100%;
   border-collapse: collapse;
-  table-layout: ${({$fixedLayout:o})=>o?"fixed":"auto"};
-  color: ${({$theme:o})=>o.textColor};
-`,TableHead=e.thead`
-  ${({$sticky:o,$theme:r})=>o&&t`
+  table-layout: ${({ $fixedLayout }) => ($fixedLayout ? 'fixed' : 'auto')};
+  color: ${({ $theme }) => $theme.textColor};
+`;
+// ============================================================================
+// Header
+// ============================================================================
+export const TableHead = styled.thead `
+  ${({ $sticky, $theme }) => $sticky &&
+    css `
       position: sticky;
       top: 0;
       z-index: 10;
-      background: ${r.headerBackgroundColor};
+      background: ${$theme.headerBackgroundColor};
     `}
-`,HeaderRow=e.tr`
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  height: ${({$height:o})=>o?`${o}px`:"42px"};
-`,HeaderCell=e.th`
-  padding: ${({$theme:o})=>o.headerPadding};
-  text-align: ${({$align:o})=>o||"left"};
-  font-size: ${({$theme:o})=>o.headerFontSize};
-  font-weight: ${({$theme:o})=>o.headerFontWeight};
-  color: ${({$theme:o})=>o.headerTextColor};
-  border-bottom: 2px solid ${({$theme:o})=>o.borderColor};
-  border-right: 1px solid ${({$theme:o})=>o.borderColor};
+`;
+export const HeaderRow = styled.tr `
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  height: ${({ $height }) => ($height ? `${$height}px` : '42px')};
+`;
+export const HeaderCell = styled.th `
+  padding: ${({ $theme }) => $theme.headerPadding};
+  text-align: ${({ $align }) => $align || 'left'};
+  font-size: ${({ $theme }) => $theme.headerFontSize};
+  font-weight: ${({ $theme }) => $theme.headerFontWeight};
+  color: ${({ $theme }) => $theme.headerTextColor};
+  border-bottom: 2px solid ${({ $theme }) => $theme.borderColor};
+  border-right: 1px solid ${({ $theme }) => $theme.borderColor};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -207,78 +391,86 @@
   text-transform: uppercase;
   letter-spacing: 0.5px;
 
-  ${({$width:o})=>o&&t`width: ${o}px;`}
-  ${({$minWidth:o})=>o&&t`min-width: ${o}px;`}
-  ${({$maxWidth:o})=>o&&t`max-width: ${o}px;`}
+  ${({ $width }) => $width && css `width: ${$width}px;`}
+  ${({ $minWidth }) => $minWidth && css `min-width: ${$minWidth}px;`}
+  ${({ $maxWidth }) => $maxWidth && css `max-width: ${$maxWidth}px;`}
 
-  ${({$sortable:o,$theme:r})=>o&&t`
+  ${({ $sortable, $theme }) => $sortable &&
+    css `
       cursor: pointer;
 
       &:hover {
-        background: ${r.hoverRowBackgroundColor};
+        background: ${$theme.hoverRowBackgroundColor};
       }
     `}
 
-  ${({$sorted:o,$theme:r})=>o&&t`
-      background: ${r.selectedRowBackgroundColor}40;
+  ${({ $sorted, $theme }) => $sorted &&
+    css `
+      background: ${$theme.selectedRowBackgroundColor}40;
     `}
 
-  ${({$pinned:o,$theme:r})=>o&&t`
+  ${({ $pinned, $theme }) => $pinned &&
+    css `
       position: sticky;
-      ${o==="left"?"left: 0;":"right: 0;"}
+      ${$pinned === 'left' ? 'left: 0;' : 'right: 0;'}
       z-index: 11;
-      background: ${r.headerBackgroundColor};
-      box-shadow: ${o==="left"?"2px 0 4px rgba(0,0,0,0.1)":"-2px 0 4px rgba(0,0,0,0.1)"};
+      background: ${$theme.headerBackgroundColor};
+      box-shadow: ${$pinned === 'left' ? '2px 0 4px rgba(0,0,0,0.1)' : '-2px 0 4px rgba(0,0,0,0.1)'};
     `}
 
   &:last-child {
     border-right: none;
   }
-`,HeaderCellContent=e.div`
+`;
+export const HeaderCellContent = styled.div `
   display: flex;
   align-items: center;
   gap: 6px;
   min-height: 24px;
-`,HeaderText=e.span`
+`;
+export const HeaderText = styled.span `
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
-`,SortIndicator=e.span`
+`;
+export const SortIndicator = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
-  opacity: ${({$active:o})=>o?1:.3};
+  opacity: ${({ $active }) => ($active ? 1 : 0.3)};
   transition: opacity 0.15s ease, transform 0.2s ease;
 
   svg {
     width: 14px;
     height: 14px;
     transition: transform 0.2s ease;
-    transform: ${({$direction:o})=>o==="desc"?"rotate(180deg)":"rotate(0deg)"};
+    transform: ${({ $direction }) => ($direction === 'desc' ? 'rotate(180deg)' : 'rotate(0deg)')};
   }
-`,FilterIndicator=e.span`
+`;
+export const FilterIndicator = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 18px;
   height: 18px;
   border-radius: 3px;
-  color: ${({$active:o,$theme:r})=>o?r.accentColor:r.headerTextColor};
-  opacity: ${({$active:o})=>o?1:.4};
+  color: ${({ $active, $theme }) => ($active ? $theme.accentColor : $theme.headerTextColor)};
+  opacity: ${({ $active }) => ($active ? 1 : 0.4)};
   transition: all 0.15s ease;
 
   &:hover {
     opacity: 1;
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   svg {
     width: 12px;
     height: 12px;
   }
-`,ResizeHandle=e.div`
+`;
+export const ResizeHandle = styled.div `
   position: absolute;
   right: 0;
   top: 0;
@@ -288,12 +480,13 @@
   z-index: 1;
   transition: background-color 0.15s ease;
 
-  ${({$resizing:o,$theme:r})=>o&&t`
-      background: ${r.accentColor};
+  ${({ $resizing, $theme }) => $resizing &&
+    css `
+      background: ${$theme.accentColor};
     `}
 
   &:hover {
-    background: ${({$theme:o})=>o.accentColor}60;
+    background: ${({ $theme }) => $theme.accentColor}60;
   }
 
   &::after {
@@ -303,33 +496,43 @@
     top: 25%;
     height: 50%;
     width: 2px;
-    background: ${({$theme:o})=>o.borderColor};
+    background: ${({ $theme }) => $theme.borderColor};
     border-radius: 1px;
   }
-`,GroupHeaderRow=e.tr`
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-`,GroupHeaderCell=e.th`
-  padding: ${({$theme:o})=>o.headerPadding};
+`;
+// ============================================================================
+// Column Group Header
+// ============================================================================
+export const GroupHeaderRow = styled.tr `
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const GroupHeaderCell = styled.th `
+  padding: ${({ $theme }) => $theme.headerPadding};
   text-align: center;
-  font-size: ${({$theme:o})=>o.headerFontSize};
-  font-weight: ${({$theme:o})=>o.headerFontWeight};
-  color: ${({$theme:o})=>o.headerTextColor};
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-  border-right: 1px solid ${({$theme:o})=>o.borderColor};
-  background: ${({$theme:o})=>o.headerBackgroundColor};
+  font-size: ${({ $theme }) => $theme.headerFontSize};
+  font-weight: ${({ $theme }) => $theme.headerFontWeight};
+  color: ${({ $theme }) => $theme.headerTextColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-right: 1px solid ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
   text-transform: uppercase;
   letter-spacing: 0.5px;
 
   &:last-child {
     border-right: none;
   }
-`,FloatingFilterRow=e.tr`
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  height: ${({$height:o})=>o?`${o}px`:"32px"};
-`,FloatingFilterCell=e.td`
+`;
+// ============================================================================
+// Floating Filter Row
+// ============================================================================
+export const FloatingFilterRow = styled.tr `
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  height: ${({ $height }) => ($height ? `${$height}px` : '32px')};
+`;
+export const FloatingFilterCell = styled.td `
   padding: 4px 8px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-  border-right: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-right: 1px solid ${({ $theme }) => $theme.borderColor};
   vertical-align: middle;
 
   &:last-child {
@@ -341,115 +544,149 @@
     width: 100%;
     padding: 4px 8px;
     font-size: 12px;
-    border: 1px solid ${({$theme:o})=>o.borderColor};
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
     border-radius: 3px;
-    background: ${({$theme:o})=>o.backgroundColor};
-    color: ${({$theme:o})=>o.textColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
     outline: none;
 
     &:focus {
-      border-color: ${({$theme:o})=>o.accentColor};
+      border-color: ${({ $theme }) => $theme.accentColor};
     }
   }
-`,TableBody=e.tbody`
-  color: ${({$theme:o})=>o.textColor};
-`,TableRow=e.tr`
-  height: ${({$height:o})=>o?`${o}px`:"42px"};
-  color: ${({$theme:o})=>o.textColor};
-  background: ${({$theme:o,$selected:r,$highlighted:d,$striped:l,$even:p,$group:c})=>r?o.selectedRowBackgroundColor:d?`${o.accentColor}20`:c?o.headerBackgroundColor:l&&p?o.oddRowBackgroundColor:o.backgroundColor};
+`;
+// ============================================================================
+// Body
+// ============================================================================
+export const TableBody = styled.tbody `
+  color: ${({ $theme }) => $theme.textColor};
+`;
+export const TableRow = styled.tr `
+  height: ${({ $height }) => ($height ? `${$height}px` : '42px')};
+  color: ${({ $theme }) => $theme.textColor};
+  background: ${({ $theme, $selected, $highlighted, $striped, $even, $group }) => {
+    if ($selected)
+        return $theme.selectedRowBackgroundColor;
+    if ($highlighted)
+        return `${$theme.accentColor}20`;
+    if ($group)
+        return $theme.headerBackgroundColor;
+    if ($striped && $even)
+        return $theme.oddRowBackgroundColor;
+    return $theme.backgroundColor;
+}};
   transition: background-color 0.15s ease;
 
-  ${({$animate:o})=>o&&t`
-      animation: ${b} 0.2s ease;
+  ${({ $animate }) => $animate &&
+    css `
+      animation: ${rowEnter} 0.2s ease;
     `}
 
-  ${({$dragging:o})=>o&&t`
+  ${({ $dragging }) => $dragging &&
+    css `
       opacity: 0.5;
     `}
 
-  ${({$dragOver:o,$theme:r})=>o&&t`
-      background: ${r.selectedRowBackgroundColor}60;
-      box-shadow: inset 0 -2px 0 ${r.accentColor};
+  ${({ $dragOver, $theme }) => $dragOver &&
+    css `
+      background: ${$theme.selectedRowBackgroundColor}60;
+      box-shadow: inset 0 -2px 0 ${$theme.accentColor};
     `}
 
   &:hover {
-    background: ${({$theme:o,$selected:r})=>r?o.selectedRowBackgroundColor:o.hoverRowBackgroundColor};
+    background: ${({ $theme, $selected }) => $selected ? $theme.selectedRowBackgroundColor : $theme.hoverRowBackgroundColor};
   }
 
-  ${({$group:o})=>o&&t`
+  ${({ $group }) => $group &&
+    css `
       cursor: pointer;
       font-weight: 600;
     `}
-`,TableCell=e.td`
-  padding: ${({$theme:o})=>o.cellPadding};
-  text-align: ${({$align:o})=>o||"left"};
-  border-bottom: ${({$theme:o})=>o.cellBorderWidth} solid ${({$theme:o})=>o.borderColor};
-  border-right: ${({$theme:o})=>o.cellBorderWidth} solid ${({$theme:o})=>o.borderColor};
+`;
+export const TableCell = styled.td `
+  padding: ${({ $theme }) => $theme.cellPadding};
+  text-align: ${({ $align }) => $align || 'left'};
+  border-bottom: ${({ $theme }) => $theme.cellBorderWidth} solid ${({ $theme }) => $theme.borderColor};
+  border-right: ${({ $theme }) => $theme.cellBorderWidth} solid ${({ $theme }) => $theme.borderColor};
   vertical-align: middle;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${({$theme:o})=>o.textColor};
+  color: ${({ $theme }) => $theme.textColor};
 
-  ${({$width:o})=>o&&t`width: ${o}px;`}
+  ${({ $width }) => $width && css `width: ${$width}px;`}
 
-  ${({$pinned:o,$theme:r})=>o&&t`
+  ${({ $pinned, $theme }) => $pinned &&
+    css `
       position: sticky;
-      ${o==="left"?"left: 0;":"right: 0;"}
+      ${$pinned === 'left' ? 'left: 0;' : 'right: 0;'}
       z-index: 5;
       background: inherit;
-      box-shadow: ${o==="left"?"2px 0 4px rgba(0,0,0,0.1)":"-2px 0 4px rgba(0,0,0,0.1)"};
+      box-shadow: ${$pinned === 'left' ? '2px 0 4px rgba(0,0,0,0.1)' : '-2px 0 4px rgba(0,0,0,0.1)'};
     `}
 
-  ${({$editing:o,$theme:r})=>o&&t`
+  ${({ $editing, $theme }) => $editing &&
+    css `
       padding: 0;
-      background: ${r.backgroundColor};
-      box-shadow: inset 0 0 0 2px ${r.accentColor};
+      background: ${$theme.backgroundColor};
+      box-shadow: inset 0 0 0 2px ${$theme.accentColor};
     `}
 
-  ${({$flashing:o})=>o&&t`
-      animation: ${f} 0.5s ease;
+  ${({ $flashing }) => $flashing &&
+    css `
+      animation: ${cellFlash} 0.5s ease;
     `}
 
   &:last-child {
     border-right: none;
   }
-`,CellContent=e.div`
+`;
+export const CellContent = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   min-height: 20px;
   color: inherit;
 
-  ${({$wrapText:o})=>o&&t`
+  ${({ $wrapText }) => $wrapText &&
+    css `
       white-space: normal;
       word-break: break-word;
     `}
-`,Checkbox=e.input`
+`;
+// ============================================================================
+// Checkbox
+// ============================================================================
+export const Checkbox = styled.input `
   width: 16px;
   height: 16px;
   margin: 0;
   cursor: pointer;
-  accent-color: ${({$theme:o})=>o.accentColor};
+  accent-color: ${({ $theme }) => $theme.accentColor};
   flex-shrink: 0;
 
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }
-`,CheckboxCell=e.div`
+`;
+export const CheckboxCell = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
-`,ExpandButton=e.button`
+`;
+// ============================================================================
+// Expand / Group
+// ============================================================================
+export const ExpandButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
   width: 20px;
   height: 20px;
   padding: 0;
-  margin-left: ${({$level:o})=>o?`${o*16}px`:"0"};
+  margin-left: ${({ $level }) => ($level ? `${$level * 16}px` : '0')};
   margin-right: 8px;
   border: none;
   border-radius: 3px;
@@ -459,20 +696,25 @@
   flex-shrink: 0;
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   svg {
     width: 14px;
     height: 14px;
     transition: transform 0.2s ease;
-    transform: ${({$expanded:o})=>o?"rotate(90deg)":"rotate(0deg)"};
+    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0deg)')};
   }
-`,GroupCell=e.div`
+`;
+export const GroupCell = styled.div `
   display: flex;
   align-items: center;
-  padding-left: ${({$level:o})=>o?`${o*20}px`:"0"};
-`,DragHandle=e.div`
+  padding-left: ${({ $level }) => ($level ? `${$level * 20}px` : '0')};
+`;
+// ============================================================================
+// Row Drag Handle
+// ============================================================================
+export const DragHandle = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -487,7 +729,8 @@
     opacity: 1;
   }
 
-  ${({$dragging:o})=>o&&t`
+  ${({ $dragging }) => $dragging &&
+    css `
       cursor: grabbing;
       opacity: 1;
     `}
@@ -496,7 +739,11 @@
     width: 14px;
     height: 14px;
   }
-`,CellEditor=e.div`
+`;
+// ============================================================================
+// Cell Editor
+// ============================================================================
+export const CellEditor = styled.div `
   width: 100%;
   height: 100%;
   display: flex;
@@ -511,8 +758,8 @@
     font-size: inherit;
     font-family: inherit;
     border: none;
-    background: ${({$theme:o})=>o.backgroundColor};
-    color: ${({$theme:o})=>o.textColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
     outline: none;
   }
 
@@ -520,23 +767,33 @@
     resize: vertical;
     min-height: 80px;
   }
-`,TableFooter=e.tfoot`
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-`,FooterRow=e.tr`
+`;
+// ============================================================================
+// Footer
+// ============================================================================
+export const TableFooter = styled.tfoot `
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const FooterRow = styled.tr `
   height: 42px;
-`,FooterCell=e.td`
-  padding: ${({$theme:o})=>o.cellPadding};
-  text-align: ${({$align:o})=>o||"left"};
+`;
+export const FooterCell = styled.td `
+  padding: ${({ $theme }) => $theme.cellPadding};
+  text-align: ${({ $align }) => $align || 'left'};
   font-weight: 600;
-  border-top: 2px solid ${({$theme:o})=>o.borderColor};
-  color: ${({$theme:o})=>o.headerTextColor};
-`,PaginationBar=e.div`
+  border-top: 2px solid ${({ $theme }) => $theme.borderColor};
+  color: ${({ $theme }) => $theme.headerTextColor};
+`;
+// ============================================================================
+// Pagination
+// ============================================================================
+export const PaginationBar = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 16px;
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  border-top: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  border-top: 1px solid ${({ $theme }) => $theme.borderColor};
   gap: 16px;
   flex-wrap: wrap;
 
@@ -544,14 +801,17 @@
     flex-direction: column;
     gap: 12px;
   }
-`,PaginationInfo=e.div`
+`;
+export const PaginationInfo = styled.div `
   font-size: 13px;
-  color: ${({$theme:o})=>o.headerTextColor};
-`,PaginationControls=e.div`
+  color: ${({ $theme }) => $theme.headerTextColor};
+`;
+export const PaginationControls = styled.div `
   display: flex;
   align-items: center;
   gap: 4px;
-`,PageButton=e.button`
+`;
+export const PageButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -560,15 +820,15 @@
   padding: 0 8px;
   font-size: 13px;
   font-weight: 500;
-  border: 1px solid ${({$theme:o,$active:r})=>r?o.accentColor:o.borderColor};
+  border: 1px solid ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.borderColor)};
   border-radius: 4px;
-  background: ${({$theme:o,$active:r})=>r?o.accentColor:o.backgroundColor};
-  color: ${({$theme:o,$active:r})=>r?"#ffffff":o.textColor};
+  background: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.backgroundColor)};
+  color: ${({ $theme, $active }) => ($active ? '#ffffff' : $theme.textColor)};
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover:not(:disabled) {
-    background: ${({$theme:o,$active:r})=>r?o.accentColor:o.hoverRowBackgroundColor};
+    background: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.hoverRowBackgroundColor)};
   }
 
   &:disabled {
@@ -580,30 +840,36 @@
     width: 16px;
     height: 16px;
   }
-`,PageSizeSelect=e.select`
+`;
+export const PageSizeSelect = styled.select `
   padding: 6px 8px;
   font-size: 13px;
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 4px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  color: ${({$theme:o})=>o.textColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  color: ${({ $theme }) => $theme.textColor};
   cursor: pointer;
   outline: none;
 
   &:focus {
-    border-color: ${({$theme:o})=>o.accentColor};
+    border-color: ${({ $theme }) => $theme.accentColor};
   }
-`,StatusBar=e.div`
+`;
+// ============================================================================
+// Status Bar
+// ============================================================================
+export const StatusBar = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 6px 16px;
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  border-top: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  border-top: 1px solid ${({ $theme }) => $theme.borderColor};
   font-size: 12px;
-  color: ${({$theme:o})=>o.headerTextColor};
+  color: ${({ $theme }) => $theme.headerTextColor};
   gap: 16px;
-`,StatusItem=e.div`
+`;
+export const StatusItem = styled.div `
   display: flex;
   align-items: center;
   gap: 6px;
@@ -611,91 +877,110 @@
   strong {
     color: inherit;
   }
-`,SideBar=e.div`
-  width: ${({$width:o})=>o?`${o}px`:"250px"};
+`;
+// ============================================================================
+// Side Bar / Tool Panels
+// ============================================================================
+export const SideBar = styled.div `
+  width: ${({ $width }) => ($width ? `${$width}px` : '250px')};
   min-width: 200px;
   max-width: 400px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border-${({$position:o})=>o==="left"?"right":"left"}: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border-${({ $position }) => ($position === 'left' ? 'right' : 'left')}: 1px solid ${({ $theme }) => $theme.borderColor};
   display: flex;
   flex-direction: column;
   overflow: hidden;
-`,SideBarTabs=e.div`
+`;
+export const SideBarTabs = styled.div `
   display: flex;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-`,SideBarTab=e.button`
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const SideBarTab = styled.button `
   flex: 1;
   padding: 10px 12px;
   font-size: 12px;
   font-weight: 500;
   border: none;
-  background: ${({$theme:o,$active:r})=>r?o.backgroundColor:o.headerBackgroundColor};
-  color: ${({$theme:o,$active:r})=>r?o.accentColor:o.headerTextColor};
+  background: ${({ $theme, $active }) => ($active ? $theme.backgroundColor : $theme.headerBackgroundColor)};
+  color: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.headerTextColor)};
   cursor: pointer;
   transition: all 0.15s ease;
-  border-bottom: 2px solid ${({$theme:o,$active:r})=>r?o.accentColor:"transparent"};
+  border-bottom: 2px solid ${({ $theme, $active }) => ($active ? $theme.accentColor : 'transparent')};
 
   &:hover {
-    background: ${({$theme:o})=>o.backgroundColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
   }
-`,SideBarContent=e.div`
+`;
+export const SideBarContent = styled.div `
   flex: 1;
   overflow: auto;
   padding: 12px;
-`,Overlay=e.div`
+`;
+// ============================================================================
+// Overlays
+// ============================================================================
+export const Overlay = styled.div `
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: ${({$theme:o})=>o.backgroundColor}e6;
+  background: ${({ $theme }) => $theme.backgroundColor}e6;
   z-index: 100;
-  animation: ${i} 0.2s ease;
-`,LoadingOverlay=e(Overlay)`
+  animation: ${fadeIn} 0.2s ease;
+`;
+export const LoadingOverlay = styled(Overlay) `
   flex-direction: column;
   gap: 16px;
-`,Spinner=e.div`
-  width: ${({$size:o})=>o?`${o}px`:"40px"};
-  height: ${({$size:o})=>o?`${o}px`:"40px"};
-  border: 3px solid ${({$theme:o})=>o.borderColor};
-  border-top-color: ${({$theme:o})=>o.accentColor};
+`;
+export const Spinner = styled.div `
+  width: ${({ $size }) => ($size ? `${$size}px` : '40px')};
+  height: ${({ $size }) => ($size ? `${$size}px` : '40px')};
+  border: 3px solid ${({ $theme }) => $theme.borderColor};
+  border-top-color: ${({ $theme }) => $theme.accentColor};
   border-radius: 50%;
-  animation: ${g} 0.8s linear infinite;
-`,NoRowsOverlay=e(Overlay)`
+  animation: ${spin} 0.8s linear infinite;
+`;
+export const NoRowsOverlay = styled(Overlay) `
   flex-direction: column;
   gap: 12px;
-  color: ${({$theme:o})=>o.headerTextColor};
+  color: ${({ $theme }) => $theme.headerTextColor};
 
   svg {
     width: 48px;
     height: 48px;
     opacity: 0.5;
   }
-`,ContextMenu=e.div`
+`;
+// ============================================================================
+// Context Menu
+// ============================================================================
+export const ContextMenu = styled.div `
   position: fixed;
-  top: ${({$y:o})=>o}px;
-  left: ${({$x:o})=>o}px;
+  top: ${({ $y }) => $y}px;
+  left: ${({ $x }) => $x}px;
   min-width: 180px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   overflow: hidden;
-  animation: ${s} 0.15s ease;
-`,ContextMenuItem=e.div`
+  animation: ${slideInRight} 0.15s ease;
+`;
+export const ContextMenuItem = styled.div `
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 14px;
   font-size: 13px;
-  cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
-  opacity: ${({$disabled:o})=>o?.5:1};
-  color: ${({$danger:o,$theme:r})=>o?"#ef4444":r.textColor};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  color: ${({ $danger, $theme }) => ($danger ? '#ef4444' : $theme.textColor)};
   transition: background-color 0.1s ease;
 
   &:hover {
-    background: ${({$disabled:o,$theme:r})=>o?"transparent":r.hoverRowBackgroundColor};
+    background: ${({ $disabled, $theme }) => ($disabled ? 'transparent' : $theme.hoverRowBackgroundColor)};
   }
 
   svg {
@@ -709,161 +994,201 @@
     font-size: 11px;
     opacity: 0.5;
   }
-`,ContextMenuDivider=e.div`
+`;
+export const ContextMenuDivider = styled.div `
   height: 1px;
-  background: ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.borderColor};
   margin: 4px 0;
-`,ColumnMenu=e.div`
+`;
+// ============================================================================
+// Column Menu
+// ============================================================================
+export const ColumnMenu = styled.div `
   position: absolute;
   top: 100%;
   right: 0;
   min-width: 200px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   z-index: 100;
   overflow: hidden;
-  animation: ${i} 0.15s ease;
-`,MobileCardContainer=e.div`
+  animation: ${fadeIn} 0.15s ease;
+`;
+// ============================================================================
+// Mobile Card View
+// ============================================================================
+export const MobileCardContainer = styled.div `
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 12px;
-`,MobileCard=e.div`
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o,$selected:r})=>r?o.accentColor:o.borderColor};
+`;
+export const MobileCard = styled.div `
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme, $selected }) => ($selected ? $theme.accentColor : $theme.borderColor)};
   border-radius: 8px;
   padding: 16px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   transition: all 0.15s ease;
 
-  ${({$selected:o,$theme:r})=>o&&t`
-      background: ${r.selectedRowBackgroundColor};
+  ${({ $selected, $theme }) => $selected &&
+    css `
+      background: ${$theme.selectedRowBackgroundColor};
     `}
-`,MobileCardHeader=e.div`
+`;
+export const MobileCardHeader = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
   padding-bottom: 12px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-`,MobileCardRow=e.div`
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const MobileCardRow = styled.div `
   display: flex;
   justify-content: space-between;
   padding: 6px 0;
   font-size: 13px;
 
   &:not(:last-child) {
-    border-bottom: 1px solid ${({$theme:o})=>o.borderColor}50;
+    border-bottom: 1px solid ${({ $theme }) => $theme.borderColor}50;
   }
-`,MobileCardLabel=e.span`
-  color: ${({$theme:o})=>o.headerTextColor};
+`;
+export const MobileCardLabel = styled.span `
+  color: ${({ $theme }) => $theme.headerTextColor};
   font-weight: 500;
-`,MobileCardValue=e.span`
-  color: ${({$theme:o})=>o.textColor};
+`;
+export const MobileCardValue = styled.span `
+  color: ${({ $theme }) => $theme.textColor};
   text-align: right;
-`,SkeletonRow=e.tr`
+`;
+// ============================================================================
+// Skeleton Loading
+// ============================================================================
+export const SkeletonRow = styled.tr `
   height: 42px;
-`,SkeletonCell=e.td`
+`;
+export const SkeletonCell = styled.td `
   padding: 8px 12px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-  border-right: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  border-right: 1px solid ${({ $theme }) => $theme.borderColor};
 
   &:last-child {
     border-right: none;
   }
-`,SkeletonBlock=e.div`
+`;
+export const SkeletonBlock = styled.div `
   height: 16px;
-  width: ${({$width:o})=>o||"80%"};
+  width: ${({ $width }) => $width || '80%'};
   background: linear-gradient(
     90deg,
-    ${({$theme:o})=>o.borderColor}40 25%,
-    ${({$theme:o})=>o.borderColor}80 50%,
-    ${({$theme:o})=>o.borderColor}40 75%
+    ${({ $theme }) => $theme.borderColor}40 25%,
+    ${({ $theme }) => $theme.borderColor}80 50%,
+    ${({ $theme }) => $theme.borderColor}40 75%
   );
   background-size: 200% 100%;
-  animation: ${x} 1.5s ease-in-out infinite;
+  animation: ${shimmer} 1.5s ease-in-out infinite;
   border-radius: 4px;
-`,TooltipContainer=e.div`
+`;
+// ============================================================================
+// Tooltip
+// ============================================================================
+export const TooltipContainer = styled.div `
   position: fixed;
-  top: ${({$y:o})=>o}px;
-  left: ${({$x:o})=>o}px;
+  top: ${({ $y }) => $y}px;
+  left: ${({ $x }) => $x}px;
   max-width: 300px;
   padding: 8px 12px;
   font-size: 12px;
-  background: ${({$theme:o})=>o.textColor.includes("f0")?"#333":"#fff"};
-  color: ${({$theme:o})=>o.textColor.includes("f0")?"#fff":"#333"};
+  background: ${({ $theme }) => ($theme.textColor.includes('f0') ? '#333' : '#fff')};
+  color: ${({ $theme }) => ($theme.textColor.includes('f0') ? '#fff' : '#333')};
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   z-index: 1001;
   pointer-events: none;
-  animation: ${i} 0.1s ease;
-`,DragGhost=e.div`
+  animation: ${fadeIn} 0.1s ease;
+`;
+// ============================================================================
+// Drag Ghost
+// ============================================================================
+export const DragGhost = styled.div `
   position: fixed;
   pointer-events: none;
   z-index: 10000;
   padding: 8px 16px;
-  background: ${({$theme:o})=>o.accentColor};
+  background: ${({ $theme }) => $theme.accentColor};
   color: #ffffff;
   font-size: 13px;
   font-weight: 500;
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-  opacity: ${({$visible:o})=>o?.9:0};
+  opacity: ${({ $visible }) => ($visible ? 0.9 : 0)};
   transform: translate(-50%, -50%);
   transition: opacity 0.15s ease;
-`,SelectionBar=e.div`
+`;
+// ============================================================================
+// Selection Info Bar
+// ============================================================================
+export const SelectionBar = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 16px;
-  background: ${({$theme:o})=>o.accentColor};
+  background: ${({ $theme }) => $theme.accentColor};
   color: #ffffff;
   font-size: 13px;
   font-weight: 500;
-  transform: translateY(${({$visible:o})=>o?"0":"-100%"});
-  opacity: ${({$visible:o})=>o?1:0};
+  transform: translateY(${({ $visible }) => ($visible ? '0' : '-100%')});
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
   transition: all 0.2s ease;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 50;
-`,SelectionActions=e.div`
+`;
+export const SelectionActions = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
-`,SidePanel=e.div`
-  width: ${({$open:o,$width:r})=>o?r?`${r}px`:"280px":"40px"};
-  min-width: ${({$open:o})=>o?"200px":"40px"};
-  max-width: ${({$open:o})=>o?"400px":"40px"};
-  background: ${({$theme:o})=>o.backgroundColor};
-  border-left: 1px solid ${({$theme:o})=>o.borderColor};
+`;
+// ============================================================================
+// Side Panel (Right Panel with Columns & Filters tabs)
+// ============================================================================
+export const SidePanel = styled.div `
+  width: ${({ $open, $width }) => ($open ? ($width ? `${$width}px` : '280px') : '40px')};
+  min-width: ${({ $open }) => ($open ? '200px' : '40px')};
+  max-width: ${({ $open }) => ($open ? '400px' : '40px')};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border-left: 1px solid ${({ $theme }) => $theme.borderColor};
   display: flex;
   flex-direction: column;
   overflow: hidden;
   transition: width 0.2s ease;
   flex-shrink: 0;
-`,SidePanelTabs=e.div`
+`;
+export const SidePanelTabs = styled.div `
   display: flex;
-  flex-direction: ${({$collapsed:o})=>o?"column":"row"};
-  border-bottom: ${({$collapsed:o})=>o?"none":"1px solid"};
-  border-color: ${({$theme:o})=>o.borderColor};
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-`,SidePanelTab=e.button`
-  flex: ${({$collapsed:o})=>o?"none":"1"};
-  padding: ${({$collapsed:o})=>o?"12px 10px":"10px 12px"};
+  flex-direction: ${({ $collapsed }) => ($collapsed ? 'column' : 'row')};
+  border-bottom: ${({ $collapsed }) => ($collapsed ? 'none' : '1px solid')};
+  border-color: ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SidePanelTab = styled.button `
+  flex: ${({ $collapsed }) => ($collapsed ? 'none' : '1')};
+  padding: ${({ $collapsed }) => ($collapsed ? '12px 10px' : '10px 12px')};
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border: none;
-  background: ${({$theme:o,$active:r})=>r?o.backgroundColor:"transparent"};
-  color: ${({$theme:o,$active:r})=>r?o.accentColor:o.headerTextColor};
+  background: ${({ $theme, $active }) => ($active ? $theme.backgroundColor : 'transparent')};
+  color: ${({ $theme, $active }) => ($active ? $theme.accentColor : $theme.headerTextColor)};
   cursor: pointer;
   transition: all 0.15s ease;
-  border-bottom: 2px solid ${({$theme:o,$active:r})=>r?o.accentColor:"transparent"};
+  border-bottom: 2px solid ${({ $theme, $active }) => ($active ? $theme.accentColor : 'transparent')};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -871,44 +1196,48 @@
   white-space: nowrap;
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
-    color: ${({$theme:o})=>o.accentColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
+    color: ${({ $theme }) => $theme.accentColor};
   }
 
   svg {
     width: 14px;
     height: 14px;
   }
-`,SidePanelContent=e.div`
+`;
+export const SidePanelContent = styled.div `
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-`,SidePanelSearch=e.div`
+`;
+export const SidePanelSearch = styled.div `
   padding: 10px 12px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
 
   input {
     width: 100%;
     padding: 8px 10px;
     font-size: 12px;
-    border: 1px solid ${({$theme:o})=>o.borderColor};
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
     border-radius: 4px;
-    background: ${({$theme:o})=>o.backgroundColor};
-    color: ${({$theme:o})=>o.textColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
     outline: none;
 
     &::placeholder {
-      color: ${({$theme:o})=>o.headerTextColor};
+      color: ${({ $theme }) => $theme.headerTextColor};
       opacity: 0.6;
     }
 
     &:focus {
-      border-color: ${({$theme:o})=>o.accentColor};
+      border-color: ${({ $theme }) => $theme.accentColor};
     }
   }
-`,SidePanelSection=e.div`
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-`,SidePanelSectionHeader=e.div`
+`;
+export const SidePanelSection = styled.div `
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const SidePanelSectionHeader = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
@@ -917,13 +1246,13 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: ${({$theme:o})=>o.headerTextColor};
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-  cursor: ${({$collapsible:o})=>o?"pointer":"default"};
+  color: ${({ $theme }) => $theme.headerTextColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+  cursor: ${({ $collapsible }) => ($collapsible ? 'pointer' : 'default')};
   user-select: none;
 
   &:hover {
-    background: ${({$collapsible:o,$theme:r})=>o?r.hoverRowBackgroundColor:r.headerBackgroundColor};
+    background: ${({ $collapsible, $theme }) => ($collapsible ? $theme.hoverRowBackgroundColor : $theme.headerBackgroundColor)};
   }
 
   svg {
@@ -931,33 +1260,37 @@
     height: 12px;
     transition: transform 0.2s ease;
   }
-`,SidePanelColumnItem=e.div`
+`;
+export const SidePanelColumnItem = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
-  padding-left: ${({$indent:o})=>o?`${12+o*16}px`:"12px"};
+  padding-left: ${({ $indent }) => ($indent ? `${12 + $indent * 16}px` : '12px')};
   font-size: 13px;
-  color: ${({$theme:o})=>o.textColor};
+  color: ${({ $theme }) => $theme.textColor};
   cursor: pointer;
   user-select: none;
   transition: background-color 0.1s ease;
   border-left: 2px solid transparent;
 
-  ${({$selected:o,$theme:r})=>o&&t`
-      background: ${r.selectedRowBackgroundColor}40;
-      border-left-color: ${r.accentColor};
+  ${({ $selected, $theme }) => $selected &&
+    css `
+      background: ${$theme.selectedRowBackgroundColor}40;
+      border-left-color: ${$theme.accentColor};
     `}
 
-  ${({$dragging:o,$theme:r})=>o&&t`
+  ${({ $dragging, $theme }) => $dragging &&
+    css `
       opacity: 0.5;
-      background: ${r.accentColor}20;
+      background: ${$theme.accentColor}20;
     `}
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
-`,SidePanelDragHandle=e.span`
+`;
+export const SidePanelDragHandle = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -979,32 +1312,39 @@
     width: 12px;
     height: 12px;
   }
-`,SidePanelGroupLabel=e.span`
+`;
+export const SidePanelGroupLabel = styled.span `
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-`,RowGroupsZone=e.div`
+`;
+// ============================================================================
+// Row Groups Drop Zone
+// ============================================================================
+export const RowGroupsZone = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   min-height: 36px;
-  background: ${({$theme:o,$dragOver:r})=>r?`${o.accentColor}15`:o.headerBackgroundColor};
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-  border: ${({$dragOver:o,$theme:r})=>o?`2px dashed ${r.accentColor}`:"1px solid transparent"};
+  background: ${({ $theme, $dragOver }) => ($dragOver ? `${$theme.accentColor}15` : $theme.headerBackgroundColor)};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+  border: ${({ $dragOver, $theme }) => ($dragOver ? `2px dashed ${$theme.accentColor}` : '1px solid transparent')};
   transition: all 0.15s ease;
   flex-wrap: wrap;
 
-  ${({$hasItems:o})=>!o&&t`
+  ${({ $hasItems }) => !$hasItems &&
+    css `
       justify-content: center;
     `}
-`,RowGroupsLabel=e.span`
+`;
+export const RowGroupsLabel = styled.span `
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: ${({$theme:o})=>o.headerTextColor};
+  color: ${({ $theme }) => $theme.headerTextColor};
   white-space: nowrap;
 
   svg {
@@ -1012,15 +1352,16 @@
     height: 14px;
     opacity: 0.6;
   }
-`,RowGroupChip=e.div`
+`;
+export const RowGroupChip = styled.div `
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 500;
-  background: ${({$theme:o})=>o.accentColor}15;
-  color: ${({$theme:o})=>o.accentColor};
+  background: ${({ $theme }) => $theme.accentColor}15;
+  color: ${({ $theme }) => $theme.accentColor};
   border-radius: 16px;
   cursor: default;
 
@@ -1040,7 +1381,7 @@
 
     &:hover {
       opacity: 1;
-      background: ${({$theme:o})=>o.accentColor}30;
+      background: ${({ $theme }) => $theme.accentColor}30;
     }
 
     svg {
@@ -1048,22 +1389,28 @@
       height: 10px;
     }
   }
-`,ValuesPanel=e.div`
+`;
+// ============================================================================
+// Values/Aggregation Panel
+// ============================================================================
+export const ValuesPanel = styled.div `
   min-height: 60px;
-`,ValueItem=e.div`
+`;
+export const ValueItem = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 8px;
   padding: 6px 12px;
   font-size: 13px;
-  color: ${({$theme:o})=>o.textColor};
+  color: ${({ $theme }) => $theme.textColor};
   cursor: pointer;
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
-`,ValueItemLabel=e.span`
+`;
+export const ValueItemLabel = styled.span `
   display: flex;
   align-items: center;
   gap: 6px;
@@ -1075,7 +1422,8 @@
     height: 12px;
     opacity: 0.5;
   }
-`,ValueItemRemove=e.button`
+`;
+export const ValueItemRemove = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1090,24 +1438,30 @@
 
   &:hover {
     opacity: 1;
-    background: ${({$theme:o})=>o.borderColor};
+    background: ${({ $theme }) => $theme.borderColor};
   }
 
   svg {
     width: 12px;
     height: 12px;
   }
-`,PivotModeToggle=e.div`
+`;
+// ============================================================================
+// Pivot Mode Toggle
+// ============================================================================
+export const PivotModeToggle = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 12px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-`,PivotModeLabel=e.span`
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const PivotModeLabel = styled.span `
   font-size: 12px;
   font-weight: 500;
-  color: ${({$theme:o})=>o.textColor};
-`,ToggleSwitch=e.label`
+  color: ${({ $theme }) => $theme.textColor};
+`;
+export const ToggleSwitch = styled.label `
   position: relative;
   display: inline-block;
   width: 36px;
@@ -1123,7 +1477,7 @@
   span {
     position: absolute;
     inset: 0;
-    background: ${({$theme:o})=>o.borderColor};
+    background: ${({ $theme }) => $theme.borderColor};
     border-radius: 20px;
     transition: all 0.2s ease;
 
@@ -1141,13 +1495,17 @@
   }
 
   input:checked + span {
-    background: ${({$theme:o})=>o.accentColor};
+    background: ${({ $theme }) => $theme.accentColor};
   }
 
   input:checked + span::before {
     transform: translateX(16px);
   }
-`,HeaderMenuButton=e.button`
+`;
+// ============================================================================
+// Column Header Menu (Three Dot Menu)
+// ============================================================================
+export const HeaderMenuButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1155,56 +1513,59 @@
   height: 20px;
   padding: 0;
   border: none;
-  background: ${({$active:o,$theme:r})=>o?r.hoverRowBackgroundColor:"transparent"};
+  background: ${({ $active, $theme }) => ($active ? $theme.hoverRowBackgroundColor : 'transparent')};
   border-radius: 3px;
   cursor: pointer;
-  opacity: ${({$active:o})=>o?1:0};
+  opacity: ${({ $active }) => ($active ? 1 : 0)};
   transition: all 0.15s ease;
   flex-shrink: 0;
 
   &:hover {
     opacity: 1;
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   svg {
     width: 14px;
     height: 14px;
-    color: ${({$theme:o})=>o.headerTextColor};
+    color: ${({ $theme }) => $theme.headerTextColor};
   }
-`,ColumnMenuPopup=e.div`
+`;
+export const ColumnMenuPopup = styled.div `
   position: fixed;
-  top: ${({$y:o})=>o}px;
-  left: ${({$x:o})=>o}px;
+  top: ${({ $y }) => $y}px;
+  left: ${({ $x }) => $x}px;
   min-width: 200px;
   max-width: 280px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   z-index: 1000;
   overflow: hidden;
-  animation: ${i} 0.15s ease;
-`,ColumnMenuSection=e.div`
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const ColumnMenuSection = styled.div `
   padding: 4px 0;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
 
   &:last-child {
     border-bottom: none;
   }
-`,ColumnMenuItem=e.div`
+`;
+export const ColumnMenuItem = styled.div `
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 12px;
   font-size: 13px;
-  color: ${({$theme:o,$disabled:r})=>r?o.headerTextColor:o.textColor};
-  cursor: ${({$disabled:o})=>o?"not-allowed":"pointer"};
-  opacity: ${({$disabled:o})=>o?.5:1};
+  color: ${({ $theme, $disabled }) => ($disabled ? $theme.headerTextColor : $theme.textColor)};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
   transition: background-color 0.1s ease;
 
   &:hover {
-    background: ${({$disabled:o,$theme:r})=>o?"transparent":r.hoverRowBackgroundColor};
+    background: ${({ $disabled, $theme }) => ($disabled ? 'transparent' : $theme.hoverRowBackgroundColor)};
   }
 
   svg {
@@ -1218,7 +1579,8 @@
     flex: 1;
   }
 
-  ${({$hasSubmenu:o})=>o&&t`
+  ${({ $hasSubmenu }) => $hasSubmenu &&
+    css `
       &::after {
         content: '›';
         margin-left: auto;
@@ -1226,175 +1588,207 @@
         opacity: 0.5;
       }
     `}
-`,ColumnMenuSubmenu=e.div`
+`;
+export const ColumnMenuSubmenu = styled.div `
   position: absolute;
   top: 0;
   left: 100%;
   min-width: 150px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   overflow: hidden;
-`,SetFilterContainer=e.div`
+`;
+// ============================================================================
+// Set Filter (Filter by unique values)
+// ============================================================================
+export const SetFilterContainer = styled.div `
   min-width: 200px;
   max-width: 300px;
   max-height: 400px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-`,SetFilterHeader=e.div`
+`;
+export const SetFilterHeader = styled.div `
   padding: 8px 12px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
   font-size: 12px;
   font-weight: 600;
-  color: ${({$theme:o})=>o.headerTextColor};
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-`,SetFilterSearch=e.div`
+  color: ${({ $theme }) => $theme.headerTextColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SetFilterSearch = styled.div `
   padding: 8px 10px;
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
 
   input {
     width: 100%;
     padding: 6px 10px;
     font-size: 12px;
-    border: 1px solid ${({$theme:o})=>o.borderColor};
+    border: 1px solid ${({ $theme }) => $theme.borderColor};
     border-radius: 4px;
-    background: ${({$theme:o})=>o.backgroundColor};
-    color: ${({$theme:o})=>o.textColor};
+    background: ${({ $theme }) => $theme.backgroundColor};
+    color: ${({ $theme }) => $theme.textColor};
     outline: none;
 
     &:focus {
-      border-color: ${({$theme:o})=>o.accentColor};
+      border-color: ${({ $theme }) => $theme.accentColor};
     }
 
     &::placeholder {
-      color: ${({$theme:o})=>o.headerTextColor};
+      color: ${({ $theme }) => $theme.headerTextColor};
       opacity: 0.6;
     }
   }
-`,SetFilterList=e.div`
+`;
+export const SetFilterList = styled.div `
   flex: 1;
   overflow-y: auto;
   max-height: 280px;
-`,SetFilterItem=e.label`
+`;
+export const SetFilterItem = styled.label `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 12px;
   font-size: 13px;
-  color: ${({$theme:o})=>o.textColor};
+  color: ${({ $theme }) => $theme.textColor};
   cursor: pointer;
   transition: background-color 0.1s ease;
-  border-bottom: ${({$selectAll:o,$theme:r})=>o?`1px solid ${r.borderColor}`:"none"};
-  font-weight: ${({$selectAll:o})=>o?"500":"normal"};
+  border-bottom: ${({ $selectAll, $theme }) => ($selectAll ? `1px solid ${$theme.borderColor}` : 'none')};
+  font-weight: ${({ $selectAll }) => ($selectAll ? '500' : 'normal')};
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   input {
     margin: 0;
-    accent-color: ${({$theme:o})=>o.accentColor};
+    accent-color: ${({ $theme }) => $theme.accentColor};
   }
-`,SetFilterActions=e.div`
+`;
+export const SetFilterActions = styled.div `
   display: flex;
   gap: 8px;
   padding: 8px 10px;
-  border-top: 1px solid ${({$theme:o})=>o.borderColor};
-  background: ${({$theme:o})=>o.headerBackgroundColor};
-`,SetFilterButton=e.button`
+  border-top: 1px solid ${({ $theme }) => $theme.borderColor};
+  background: ${({ $theme }) => $theme.headerBackgroundColor};
+`;
+export const SetFilterButton = styled.button `
   flex: 1;
   padding: 6px 12px;
   font-size: 12px;
   font-weight: 500;
-  border: 1px solid ${({$theme:o,$primary:r})=>r?o.accentColor:o.borderColor};
+  border: 1px solid ${({ $theme, $primary }) => ($primary ? $theme.accentColor : $theme.borderColor)};
   border-radius: 4px;
-  background: ${({$theme:o,$primary:r})=>r?o.accentColor:o.backgroundColor};
-  color: ${({$primary:o,$theme:r})=>o?"#ffffff":r.textColor};
+  background: ${({ $theme, $primary }) => ($primary ? $theme.accentColor : $theme.backgroundColor)};
+  color: ${({ $primary, $theme }) => ($primary ? '#ffffff' : $theme.textColor)};
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover {
     filter: brightness(0.95);
   }
-`,FilterPanelColumn=e.div`
-  border-bottom: 1px solid ${({$theme:o})=>o.borderColor};
-`,FilterPanelHeader=e.div`
+`;
+// ============================================================================
+// Filter Panel in Side Bar
+// ============================================================================
+export const FilterPanelColumn = styled.div `
+  border-bottom: 1px solid ${({ $theme }) => $theme.borderColor};
+`;
+export const FilterPanelHeader = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   font-size: 13px;
   font-weight: 500;
-  color: ${({$theme:o,$hasFilter:r})=>r?o.accentColor:o.textColor};
+  color: ${({ $theme, $hasFilter }) => ($hasFilter ? $theme.accentColor : $theme.textColor)};
   cursor: pointer;
   transition: background-color 0.1s ease;
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   svg {
     width: 12px;
     height: 12px;
     transition: transform 0.2s ease;
-    transform: ${({$expanded:o})=>o?"rotate(90deg)":"rotate(0deg)"};
+    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0deg)')};
     opacity: 0.5;
   }
-`,FilterPanelContent=e.div`
-  display: ${({$expanded:o})=>o?"block":"none"};
+`;
+export const FilterPanelContent = styled.div `
+  display: ${({ $expanded }) => ($expanded ? 'block' : 'none')};
   padding: 8px 12px;
-  background: ${({$theme:o})=>o.headerBackgroundColor}50;
-`,GridLayout=e.div`
+  background: ${({ $theme }) => $theme.headerBackgroundColor}50;
+`;
+// ============================================================================
+// Grid Container with Side Panel Layout
+// ============================================================================
+export const GridLayout = styled.div `
   display: flex;
   width: 100%;
   height: 100%;
   overflow: hidden;
-`,GridMainArea=e.div`
+`;
+export const GridMainArea = styled.div `
   flex: 1;
   display: flex;
   flex-direction: column;
   min-width: 0;
   overflow: hidden;
-`,ColumnVisibilityDropdown=e.div`
+`;
+// ============================================================================
+// Column Visibility Dropdown
+// ============================================================================
+export const ColumnVisibilityDropdown = styled.div `
   position: absolute;
   top: 100%;
   right: 0;
   min-width: 220px;
   max-height: 400px;
-  background: ${({$theme:o})=>o.backgroundColor};
-  border: 1px solid ${({$theme:o})=>o.borderColor};
+  background: ${({ $theme }) => $theme.backgroundColor};
+  border: 1px solid ${({ $theme }) => $theme.borderColor};
   border-radius: 6px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   z-index: 100;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  animation: ${i} 0.15s ease;
-`,ColumnVisibilityList=e.div`
+  animation: ${fadeIn} 0.15s ease;
+`;
+export const ColumnVisibilityList = styled.div `
   flex: 1;
   overflow-y: auto;
-`,ColumnVisibilityItem=e.label`
+`;
+export const ColumnVisibilityItem = styled.label `
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
   font-size: 13px;
-  color: ${({$theme:o})=>o.textColor};
+  color: ${({ $theme }) => $theme.textColor};
   cursor: pointer;
   transition: background-color 0.1s ease;
 
   &:hover {
-    background: ${({$theme:o})=>o.hoverRowBackgroundColor};
+    background: ${({ $theme }) => $theme.hoverRowBackgroundColor};
   }
 
   input {
     margin: 0;
-    accent-color: ${({$theme:o})=>o.accentColor};
+    accent-color: ${({ $theme }) => $theme.accentColor};
   }
-`;export{a as themes};
+`;
+// ============================================================================
+// Export all themes
+// ============================================================================
+export { themes };