react-restyle-components 0.4.46 → 0.4.47

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

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