react-restyle-components 0.4.45 → 0.4.47

package/lib/src/core-components/src/components/Table/elements.js

@@ -1,50 +1,38 @@
-import { styled, css, keyframes } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-// Animations
-const shimmer = keyframes `
+"use strict";import{styled as t,css as r,keyframes as n}from"styled-components";import{tokens as o}from"../../utils/designTokens";const f=n`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-`;
-const fadeIn = keyframes `
+`,a=n`
   from { opacity: 0; }
   to { opacity: 1; }
-`;
-const spin = keyframes `
+`,p=n`
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
-`;
-const pulse = keyframes `
+`,s=n`
   0% { transform: scale(1); }
   50% { transform: scale(1.1); }
   100% { transform: scale(1); }
-`;
-const countUp = keyframes `
+`,l=n`
   0% { transform: translateY(100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
-`;
-const countDown = keyframes `
+`,d=n`
   0% { transform: translateY(-100%); opacity: 0; }
   100% { transform: translateY(0); opacity: 1; }
-`;
-const slideIn = keyframes `
+`,c=n`
   0% { transform: translateX(-20px); opacity: 0; }
   100% { transform: translateX(0); opacity: 1; }
-`;
-export const TableRoot = styled.div `
+`;export const TableRoot=t.div`
   width: 100%;
   font-family: inherit;
   font-size: 14px;
-  color: ${tokens.onSurface || '#1f2937'};
+  color: ${o.onSurface||"#1f2937"};
   background: white;
   border-radius: 8px;
   overflow: hidden;
 
-  ${({ $bordered }) => $bordered &&
-    css `
-      border: 1px solid ${tokens.outline || '#e5e7eb'};
+  ${({$bordered:e})=>e&&r`
+      border: 1px solid ${o.outline||"#e5e7eb"};
     `}
-`;
-export const Toolbar = styled.div `
+`,Toolbar=t.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -52,20 +40,18 @@ export const Toolbar = styled.div `
   gap: 8px;
   padding: 8px 12px;
   background: white;
-  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+  border-bottom: 1px solid ${o.outline||"#e5e7eb"};
 
   @media (max-width: 640px) {
     flex-direction: column;
     align-items: stretch;
   }
-`;
-export const ToolbarGroup = styled.div `
+`,ToolbarGroup=t.div`
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
-`;
-export const SearchInput = styled.div `
+`,SearchInput=t.div`
   position: relative;
   display: flex;
   align-items: center;
@@ -110,8 +96,7 @@ export const SearchInput = styled.div `
     height: 14px;
     color: #9ca3af;
   }
-`;
-export const ToolbarButton = styled.button `
+`,ToolbarButton=t.button`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -127,11 +112,11 @@ export const ToolbarButton = styled.button `
 
   /* Default gray button style (matching existing TableBootstrap) */
   color: white;
-  background: ${({ $active }) => $active ? tokens.primary || '#3b82f6' : '#6b7280'};
+  background: ${({$active:e})=>e?o.primary||"#3b82f6":"#6b7280"};
   border: none;
 
   &:hover:not(:disabled) {
-    background: ${({ $active }) => $active ? tokens.primary || '#2563eb' : '#5b6570'};
+    background: ${({$active:e})=>e?o.primary||"#2563eb":"#5b6570"};
   }
 
   &:disabled {
@@ -143,15 +128,14 @@ export const ToolbarButton = styled.button `
     width: 14px;
     height: 14px;
   }
-`;
-export const SelectionIndicator = styled.button `
+`,SelectionIndicator=t.button`
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
-  background: ${tokens.primary || '#3b82f6'};
+  background: ${o.primary||"#3b82f6"};
   border-radius: 6px;
-  border: 2px solid ${tokens.primary || '#3b82f6'};
+  border: 2px solid ${o.primary||"#3b82f6"};
   outline: none;
   color: white;
   font-weight: 600;
@@ -159,7 +143,7 @@ export const SelectionIndicator = styled.button `
   cursor: pointer;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: all 0.2s ease;
-  animation: ${slideIn} 0.3s ease-out;
+  animation: ${c} 0.3s ease-out;
 
   &:hover {
     border-color: white;
@@ -172,10 +156,9 @@ export const SelectionIndicator = styled.button `
   &:focus-visible {
     border-color: white;
     box-shadow: 0 0 0 3px
-      ${tokens.primary ? `${tokens.primary}40` : 'rgba(59, 130, 246, 0.4)'};
+      ${o.primary?`${o.primary}40`:"rgba(59, 130, 246, 0.4)"};
   }
-`;
-export const SelectionCount = styled.span `
+`,SelectionCount=t.span`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -189,21 +172,18 @@ export const SelectionCount = styled.span `
   font-size: 14px;
   overflow: hidden;
 
-  ${({ $animate }) => $animate === 'up' &&
-    css `
+  ${({$animate:e})=>e==="up"&&r`
       animation:
-        ${countUp} 0.3s ease-out,
-        ${pulse} 0.3s ease-out;
+        ${l} 0.3s ease-out,
+        ${s} 0.3s ease-out;
     `}
 
-  ${({ $animate }) => $animate === 'down' &&
-    css `
+  ${({$animate:e})=>e==="down"&&r`
       animation:
-        ${countDown} 0.3s ease-out,
-        ${pulse} 0.3s ease-out;
+        ${d} 0.3s ease-out,
+        ${s} 0.3s ease-out;
     `}
-`;
-export const SelectionIcon = styled.span `
+`,SelectionIcon=t.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -214,102 +194,82 @@ export const SelectionIcon = styled.span `
     width: 16px;
     height: 16px;
   }
-`;
-export const TableWrapper = styled.div `
+`,TableWrapper=t.div`
   width: 100%;
   overflow-x: auto;
-  overflow-y: ${({ $stickyHeader }) => ($stickyHeader ? 'auto' : 'visible')};
-  ${({ $maxHeight }) => $maxHeight &&
-    css `
-      max-height: ${typeof $maxHeight === 'number'
-        ? `${$maxHeight}px`
-        : $maxHeight};
+  overflow-y: ${({$stickyHeader:e})=>e?"auto":"visible"};
+  ${({$maxHeight:e})=>e&&r`
+      max-height: ${typeof e=="number"?`${e}px`:e};
     `}
-`;
-export const StyledTable = styled.table `
+`,StyledTable=t.table`
   width: 100%;
   border-collapse: collapse;
   table-layout: auto;
 
-  ${({ $striped }) => $striped &&
-    css `
+  ${({$striped:e})=>e&&r`
       tbody tr:nth-child(even) {
-        background: ${tokens.surface || '#f9fafb'};
-        color: ${tokens.onSurface || '#1f2937'};
+        background: ${o.surface||"#f9fafb"};
+        color: ${o.onSurface||"#1f2937"};
       }
     `}
 
-  ${({ $hover }) => $hover &&
-    css `
+  ${({$hover:e})=>e&&r`
       /* Hover effect - skip rows with custom selected style (data-custom-selected attribute) */
       tbody tr:not([data-custom-selected='true']):hover {
         background: #ececec !important;
-        color: ${tokens.onSurface || '#1f2937'};
+        color: ${o.onSurface||"#1f2937"};
       }
     `}
-`;
-export const TableHeader = styled.thead `
-  ${({ $sticky }) => $sticky &&
-    css `
+`,TableHeader=t.thead`
+  ${({$sticky:e})=>e&&r`
       position: sticky;
       top: 0;
       z-index: 10;
     `}
-`;
-export const HeaderRow = styled.tr `
+`,HeaderRow=t.tr`
   background: #6b7280;
-`;
-export const HeaderCell = styled.th `
-  padding: ${({ $compact }) => ($compact ? '4px 6px' : '6px 8px')};
-  text-align: ${({ $align }) => $align};
+`,HeaderCell=t.th`
+  padding: ${({$compact:e})=>e?"4px 6px":"6px 8px"};
+  text-align: ${({$align:e})=>e};
   vertical-align: middle;
   user-select: none;
   white-space: nowrap;
   border-right: 1px solid rgba(255, 255, 255, 0.3);
 
   /* Default styles - only applied when no custom class */
-  ${({ $customClass }) => !$customClass &&
-    css `
+  ${({$customClass:e})=>!e&&r`
       position: relative;
       font-weight: 600;
       font-size: 11px;
       color: white;
       background: #6b7280;
-      border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+      border-bottom: 1px solid ${o.outline||"#e5e7eb"};
     `}
 
-  ${({ $width }) => $width &&
-    css `
-      width: ${typeof $width === 'number' ? `${$width}px` : $width};
+  ${({$width:e})=>e&&r`
+      width: ${typeof e=="number"?`${e}px`:e};
     `}
 
-  ${({ $minWidth }) => $minWidth &&
-    css `
-      min-width: ${typeof $minWidth === 'number'
-        ? `${$minWidth}px`
-        : $minWidth};
+  ${({$minWidth:e})=>e&&r`
+      min-width: ${typeof e=="number"?`${e}px`:e};
     `}
 
-  ${({ $pinned, $customClass }) => $pinned &&
-    !$customClass &&
-    css `
+  ${({$pinned:e,$customClass:i})=>e&&!i&&r`
       position: sticky;
-      ${$pinned}: 0;
+      ${e}: 0;
       z-index: 11;
     `}
 
   /* Add left border separator when custom class is used (e.g., sticky action column) */
-  ${({ $customClass }) => $customClass &&
-    css `
+  ${({$customClass:e})=>e&&r`
       border-left: 2px solid #d1d5db;
       border-bottom: 2px solid #d1d5db;
     `}
-`;
-export const SortIcon = styled.span `
+`,SortIcon=t.span`
   display: inline-flex;
   flex-direction: column;
   gap: 1px;
-  opacity: ${({ $active }) => ($active ? 1 : 0.5)};
+  opacity: ${({$active:e})=>e?1:.5};
   vertical-align: middle;
 
   svg {
@@ -317,141 +277,148 @@ export const SortIcon = styled.span `
     height: 8px;
 
     &:first-child {
-      opacity: ${({ $active, $direction }) => $active && $direction === 'asc' ? 1 : 0.4};
+      opacity: ${({$active:e,$direction:i})=>e&&i==="asc"?1:.4};
     }
 
     &:last-child {
-      opacity: ${({ $active, $direction }) => $active && $direction === 'desc' ? 1 : 0.4};
+      opacity: ${({$active:e,$direction:i})=>e&&i==="desc"?1:.4};
     }
   }
-`;
-export const FilterRow = styled.tr `
+`,FilterRow=t.tr`
   background: #6b7280;
-`;
-export const FilterCell = styled.td `
-  padding: ${({ $compact }) => ($compact ? '2px 4px' : '4px 6px')};
+`,FilterCell=t.td`
+  padding: ${({$compact:e})=>e?"2px 4px":"4px 6px"};
   vertical-align: middle;
-  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
-`;
-export const FilterInput = styled.input `
+  border-bottom: 1px solid ${o.outline||"#e5e7eb"};
+`,FilterInput=t.input`
   width: 100%;
   height: 24px;
   padding: 0 8px;
   font-size: 11px;
-  border: 1px solid ${tokens.outline || '#e2e8f0'};
+  border: 1px solid ${o.outline||"#e2e8f0"};
   border-radius: 3px;
   background: white;
   transition: all 0.15s ease;
 
   &:hover {
-    border-color: ${tokens.primary || '#94a3b8'};
+    border-color: ${o.primary||"#94a3b8"};
   }
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${o.primary||"#3b82f6"};
   }
 
   &::placeholder {
-    color: ${tokens.onSurface ? `${tokens.onSurface}40` : '#9ca3af'};
+    color: ${o.onSurface?`${o.onSurface}40`:"#9ca3af"};
   }
-`;
-export const FilterSelect = styled.select `
+`,FilterSelect=t.select`
   width: 100%;
   height: 28px;
   padding: 0 8px;
   font-size: 12px;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
+  border: 1px solid ${o.outline||"#d1d5db"};
   border-radius: 4px;
   background: white;
   cursor: pointer;
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${o.primary||"#3b82f6"};
   }
-`;
-export const TableBody = styled.tbody ``;
-export const TableRow = styled.tr `
+`,TableBody=t.tbody``,TableRow=t.tr`
   transition: background 0.15s ease;
-  color: ${tokens.onSurface || '#1f2937'};
+  color: ${o.onSurface||"#1f2937"};
   background: white;
 
   /* Hover effect - only apply when not selected with custom style */
-  ${({ $hasCustomSelectedStyle }) => !$hasCustomSelectedStyle &&
-    css `
+  ${({$hasCustomSelectedStyle:e})=>!e&&r`
       &:hover {
         background: #ececec !important;
       }
     `}
 
   /* Default selected styling - only when no custom style is provided */
-  ${({ $selected, $hasCustomSelectedStyle }) => $selected &&
-    !$hasCustomSelectedStyle &&
-    css `
-      background: ${tokens.primary
-        ? `${tokens.primary}10`
-        : '#fef3c7'} !important;
-      color: ${tokens.onSurface || '#1f2937'};
+  ${({$selected:e,$hasCustomSelectedStyle:i})=>e&&!i&&r`
+      background: ${o.primary?`${o.primary}10`:"#fef3c7"} !important;
+      color: ${o.onSurface||"#1f2937"};
 
       &:hover {
-        background: ${tokens.primary
-        ? `${tokens.primary}15`
-        : '#fde68a'} !important;
+        background: ${o.primary?`${o.primary}15`:"#fde68a"} !important;
       }
     `}
   
-  ${({ $clickable, $disabled }) => $clickable &&
-    !$disabled &&
-    css `
+  ${({$clickable:e,$disabled:i})=>e&&!i&&r`
       cursor: pointer;
     `}
   
-  ${({ $disabled }) => $disabled &&
-    css `
+  ${({$disabled:e})=>e&&r`
       opacity: 0.5;
-      background: ${tokens.surface || '#e5e7eb'} !important;
-      color: ${tokens.onSurface || '#1f2937'};
+      background: ${o.surface||"#e5e7eb"} !important;
+      color: ${o.onSurface||"#1f2937"};
       cursor: not-allowed;
 
       &:hover {
-        background: ${tokens.surface || '#e5e7eb'} !important;
+        background: ${o.surface||"#e5e7eb"} !important;
       }
     `}
-`;
-export const TableCell = styled.td `
-  padding: ${({ $padding, $compact }) => $padding || ($compact ? '2px' : '2px')};
-  text-align: ${({ $align }) => $align};
+`,TableCellContent=t.div.attrs({className:"tc-table-cell-content"})`
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: stretch;
+  gap: 0;
+
+  ${({$hasFormatter:e})=>!e&&r`
+      display: block;
+    `}
+
+  > * {
+    width: 100%;
+    min-width: 0;
+  }
+`,TableCell=t.td`
+  padding: ${({$padding:e,$compact:i})=>e||"2px"};
+  text-align: ${({$align:e})=>e};
   border-bottom: 1px solid #d1d5db;
   border-right: 1px solid #9ca3af;
   vertical-align: middle;
   font-size: 12px;
 
-  ${({ $hasCustomClass }) => !$hasCustomClass &&
-    css `
-      color: ${tokens.onSurface || '#1f2937'};
+  ${({$hasCustomClass:e})=>!e&&r`
+      color: ${o.onSurface||"#1f2937"};
       background: transparent;
     `}
 
-  ${({ $pinned, $hasCustomClass }) => $pinned &&
-    !$hasCustomClass &&
-    css `
+  ${({$pinned:e,$hasCustomClass:i})=>e&&!i&&r`
       position: sticky;
-      ${$pinned}: 0;
+      ${e}: 0;
       background: white;
       z-index: 1;
     `}
 
   /* Add left border separator when custom class is used (e.g., sticky action column) */
-  ${({ $hasCustomClass }) => $hasCustomClass &&
-    css `
+  ${({$hasCustomClass:e})=>e&&r`
       border-left: 2px solid #d1d5db;
     `}
 
   /* Ensure formatter content displays properly */
-  /* Make direct children inline-block by default (for Icon components, etc.) */
-  /* But preserve flex/grid/block layouts when explicitly set */
-  > * {
+  /* Use a dedicated wrapper to allow formatter content to stretch full width */
+  > .tc-table-cell-content {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+    min-width: 0;
+    gap: 0;
+  }
+
+  > .tc-table-cell-content > * {
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Default inline layout for legacy direct children */
+  > :not(.tc-table-cell-content) {
     display: inline-block;
     vertical-align: middle;
   }
@@ -482,17 +449,13 @@ export const TableCell = styled.td `
 
   /* Disabled state - prevent clicks and show not-allowed cursor */
   /* Only apply pointer-events: none if row is disabled AND column is NOT effectively editable */
-  ${({ $disabled, $isEditable }) => $disabled &&
-    !$isEditable &&
-    css `
+  ${({$disabled:e,$isEditable:i})=>e&&!i&&r`
       cursor: not-allowed;
       pointer-events: none;
     `}
 
   /* If row is disabled but column is effectively editable, ensure proper width and interaction */
-  ${({ $disabled, $isEditable }) => $disabled &&
-    $isEditable &&
-    css `
+  ${({$disabled:e,$isEditable:i})=>e&&i&&r`
       cursor: default;
       pointer-events: auto !important;
       opacity: 1 !important;
@@ -502,10 +465,8 @@ export const TableCell = styled.td `
       box-sizing: border-box;
     `}
   
-  /* Remove opacity for columns in allowRows when row is disabled and ensure proper width */
-  ${({ $disabled, $isInAllowRows }) => $disabled &&
-    $isInAllowRows &&
-    css `
+  /* Remove opacity for allowed columns when row is disabled and ensure proper width */
+  ${({$disabled:e,$isInAllowedCells:i})=>e&&i&&r`
       opacity: 1 !important;
       pointer-events: auto !important;
       width: auto !important;
@@ -513,14 +474,12 @@ export const TableCell = styled.td `
       max-width: none !important;
       box-sizing: border-box;
     `}
-`;
-export const Checkbox = styled.input.attrs({ type: 'checkbox' }) `
+`,Checkbox=t.input.attrs({type:"checkbox"})`
   width: 16px;
   height: 16px;
   cursor: pointer;
-  accent-color: ${tokens.primary || '#3b82f6'};
-`;
-export const ExpandButton = styled.button `
+  accent-color: ${o.primary||"#3b82f6"};
+`,ExpandButton=t.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -534,36 +493,30 @@ export const ExpandButton = styled.button `
   transition: all 0.15s ease;
 
   &:hover {
-    background: ${tokens.surface || '#f3f4f6'};
+    background: ${o.surface||"#f3f4f6"};
   }
 
   svg {
     width: 16px;
     height: 16px;
-    color: ${tokens.onSurface ? `${tokens.onSurface}70` : '#6b7280'};
+    color: ${o.onSurface?`${o.onSurface}70`:"#6b7280"};
     transition: transform 0.2s ease;
-    transform: ${({ $expanded }) => ($expanded ? 'rotate(90deg)' : 'rotate(0)')};
+    transform: ${({$expanded:e})=>e?"rotate(90deg)":"rotate(0)"};
   }
-`;
-export const ExpandedRow = styled.tr `
-  animation: ${fadeIn} 0.2s ease;
-`;
-export const ExpandedCell = styled.td `
+`,ExpandedRow=t.tr`
+  animation: ${a} 0.2s ease;
+`,ExpandedCell=t.td`
   padding: 16px;
-  background: ${tokens.surface || '#f9fafb'};
-  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
-`;
-export const TableFooter = styled.tfoot `
-  background: ${tokens.surface || '#f3f4f6'};
-`;
-export const FooterRow = styled.tr ``;
-export const FooterCell = styled.td `
-  padding: ${({ $compact }) => ($compact ? '8px 12px' : '12px 16px')};
-  text-align: ${({ $align }) => $align};
+  background: ${o.surface||"#f9fafb"};
+  border-bottom: 1px solid ${o.outline||"#e5e7eb"};
+`,TableFooter=t.tfoot`
+  background: ${o.surface||"#f3f4f6"};
+`,FooterRow=t.tr``,FooterCell=t.td`
+  padding: ${({$compact:e})=>e?"8px 12px":"12px 16px"};
+  text-align: ${({$align:e})=>e};
   font-weight: 600;
-  border-top: 2px solid ${tokens.outline || '#e5e7eb'};
-`;
-export const PaginationWrapper = styled.div `
+  border-top: 2px solid ${o.outline||"#e5e7eb"};
+`,PaginationWrapper=t.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -571,24 +524,21 @@ export const PaginationWrapper = styled.div `
   gap: 12px;
   padding: 12px 16px;
   background: #6b7280;
-  border-top: 1px solid ${tokens.outline || '#e5e7eb'};
+  border-top: 1px solid ${o.outline||"#e5e7eb"};
   color: white;
 
   @media (max-width: 640px) {
     flex-direction: column;
     align-items: stretch;
   }
-`;
-export const PaginationInfo = styled.div `
+`,PaginationInfo=t.div`
   font-size: 13px;
   color: white;
-`;
-export const PaginationControls = styled.div `
+`,PaginationControls=t.div`
   display: flex;
   align-items: center;
   gap: 4px;
-`;
-export const PageButton = styled.button `
+`,PageButton=t.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -596,17 +546,17 @@ export const PageButton = styled.button `
   height: 32px;
   padding: 0 8px;
   font-size: 13px;
-  font-weight: ${({ $active }) => ($active ? 600 : 400)};
-  color: ${({ $active }) => ($active ? 'white' : 'white')};
-  background: ${({ $active }) => $active ? tokens.primary || '#3b82f6' : 'transparent'};
+  font-weight: ${({$active:e})=>e?600:400};
+  color: ${({$active:e})=>"white"};
+  background: ${({$active:e})=>e?o.primary||"#3b82f6":"transparent"};
   border: 1px solid
-    ${({ $active }) => ($active ? 'transparent' : 'rgba(255,255,255,0.3)')};
+    ${({$active:e})=>e?"transparent":"rgba(255,255,255,0.3)"};
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.15s ease;
 
   &:hover:not(:disabled) {
-    background: ${({ $active }) => $active ? tokens.primary || '#2563eb' : 'rgba(255,255,255,0.1)'};
+    background: ${({$active:e})=>e?o.primary||"#2563eb":"rgba(255,255,255,0.1)"};
   }
 
   &:disabled {
@@ -618,23 +568,21 @@ export const PageButton = styled.button `
     width: 16px;
     height: 16px;
   }
-`;
-export const PageSizeSelect = styled.select `
+`,PageSizeSelect=t.select`
   height: 32px;
   padding: 0 24px 0 8px;
   font-size: 13px;
   color: #1f2937;
   background: white;
-  border: 1px solid ${tokens.outline || '#d1d5db'};
+  border: 1px solid ${o.outline||"#d1d5db"};
   border-radius: 4px;
   cursor: pointer;
 
   &:focus {
     outline: none;
-    border-color: ${tokens.primary || '#3b82f6'};
+    border-color: ${o.primary||"#3b82f6"};
   }
-`;
-export const QuickJumper = styled.div `
+`,QuickJumper=t.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -654,21 +602,20 @@ export const QuickJumper = styled.div `
 
     &:focus {
       outline: none;
-      border-color: ${tokens.primary || '#3b82f6'};
+      border-color: ${o.primary||"#3b82f6"};
     }
 
     &::placeholder {
       color: rgba(255, 255, 255, 0.5);
     }
   }
-`;
-export const EmptyState = styled.div `
+`,EmptyState=t.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
+  color: ${o.onSurface?`${o.onSurface}60`:"#6b7280"};
 
   svg {
     width: 48px;
@@ -680,8 +627,7 @@ export const EmptyState = styled.div `
   span {
     font-size: 14px;
   }
-`;
-export const LoadingOverlay = styled.div `
+`,LoadingOverlay=t.div`
   position: absolute;
   inset: 0;
   display: flex;
@@ -689,22 +635,18 @@ export const LoadingOverlay = styled.div `
   justify-content: center;
   background: rgba(255, 255, 255, 0.8);
   z-index: 20;
-`;
-export const LoadingSpinner = styled.div `
+`,LoadingSpinner=t.div`
   width: 32px;
   height: 32px;
-  border: 3px solid ${tokens.outline || '#e5e7eb'};
-  border-top-color: ${tokens.primary || '#3b82f6'};
+  border: 3px solid ${o.outline||"#e5e7eb"};
+  border-top-color: ${o.primary||"#3b82f6"};
   border-radius: 50%;
-  animation: ${spin} 0.8s linear infinite;
-`;
-export const EditableCell = styled.div `
+  animation: ${p} 0.8s linear infinite;
+`,EditableCell=t.div`
   position: relative;
   min-height: 24px;
 
-  ${({ $editing, $showEditIcon = false }) => !$editing &&
-    $showEditIcon &&
-    css `
+  ${({$editing:e,$showEditIcon:i=!1})=>!e&&i&&r`
       &:hover::after {
         content: '✏️';
         position: absolute;
@@ -715,20 +657,18 @@ export const EditableCell = styled.div `
         opacity: 0.5;
       }
     `}
-`;
-export const CellEditor = styled.input `
+`,CellEditor=t.input`
   width: 100%;
   padding: 4px 8px;
   font-size: inherit;
-  border: 2px solid ${tokens.primary || '#3b82f6'};
+  border: 2px solid ${o.primary||"#3b82f6"};
   border-radius: 4px;
   background: white;
 
   &:focus {
     outline: none;
   }
-`;
-export const ColumnTogglePanel = styled.div `
+`,ColumnTogglePanel=t.div`
   position: absolute;
   top: 100%;
   right: 0;
@@ -736,18 +676,17 @@ export const ColumnTogglePanel = styled.div `
   max-height: 400px;
   overflow-y: auto;
   background: white;
-  border: 1px solid ${tokens.outline || '#e5e7eb'};
+  border: 1px solid ${o.outline||"#e5e7eb"};
   border-radius: 8px;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
   z-index: 100;
-  animation: ${fadeIn} 0.15s ease;
-`;
-export const ColumnToggleHeader = styled.div `
+  animation: ${a} 0.15s ease;
+`,ColumnToggleHeader=t.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 12px 16px;
-  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+  border-bottom: 1px solid ${o.outline||"#e5e7eb"};
 
   span {
     font-weight: 600;
@@ -759,63 +698,58 @@ export const ColumnToggleHeader = styled.div `
     border: none;
     background: none;
     cursor: pointer;
-    color: ${tokens.onSurface ? `${tokens.onSurface}60` : '#6b7280'};
+    color: ${o.onSurface?`${o.onSurface}60`:"#6b7280"};
 
     &:hover {
-      color: ${tokens.onSurface || '#1f2937'};
+      color: ${o.onSurface||"#1f2937"};
     }
   }
-`;
-export const ColumnToggleSearch = styled.div `
+`,ColumnToggleSearch=t.div`
   padding: 8px 16px;
-  border-bottom: 1px solid ${tokens.outline || '#e5e7eb'};
+  border-bottom: 1px solid ${o.outline||"#e5e7eb"};
 
   input {
     width: 100%;
     height: 32px;
     padding: 0 12px;
     font-size: 13px;
-    border: 1px solid ${tokens.outline || '#d1d5db'};
+    border: 1px solid ${o.outline||"#d1d5db"};
     border-radius: 6px;
 
     &:focus {
       outline: none;
-      border-color: ${tokens.primary || '#3b82f6'};
+      border-color: ${o.primary||"#3b82f6"};
     }
   }
-`;
-export const ColumnToggleList = styled.div `
+`,ColumnToggleList=t.div`
   padding: 8px 0;
   max-height: 300px;
   overflow-y: auto;
-`;
-export const ColumnToggleItem = styled.label `
+`,ColumnToggleItem=t.label`
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 8px 16px;
-  cursor: ${({ $reorderable }) => ($reorderable ? 'grab' : 'pointer')};
+  cursor: ${({$reorderable:e})=>e?"grab":"pointer"};
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
   user-select: none;
 
   &:hover {
-    background: ${tokens.surface || '#f3f4f6'};
+    background: ${o.surface||"#f3f4f6"};
   }
 
   /* Dragging state */
-  ${({ $isDragging }) => $isDragging &&
-    css `
+  ${({$isDragging:e})=>e&&r`
       opacity: 0.4;
       transform: scale(0.98);
-      background: ${tokens.primary || '#3b82f6'}10;
+      background: ${o.primary||"#3b82f6"}10;
       cursor: grabbing;
     `}
 
   /* Drag over state */
-  ${({ $isDragOver }) => $isDragOver &&
-    css `
-      background: ${tokens.primary || '#3b82f6'}15;
+  ${({$isDragOver:e})=>e&&r`
+      background: ${o.primary||"#3b82f6"}15;
       transform: translateY(2px);
 
       &::before {
@@ -825,9 +759,9 @@ export const ColumnToggleItem = styled.label `
         left: 8px;
         right: 8px;
         height: 2px;
-        background: ${tokens.primary || '#3b82f6'};
+        background: ${o.primary||"#3b82f6"};
         border-radius: 1px;
-        animation: ${fadeIn} 0.15s ease;
+        animation: ${a} 0.15s ease;
       }
     `}
 
@@ -835,21 +769,19 @@ export const ColumnToggleItem = styled.label `
     width: 16px;
     height: 16px;
     cursor: pointer;
-    accent-color: ${tokens.primary || '#3b82f6'};
+    accent-color: ${o.primary||"#3b82f6"};
     flex-shrink: 0;
   }
 
   span {
     font-size: 13px;
-    color: ${tokens.onSurface || '#374151'};
+    color: ${o.onSurface||"#374151"};
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-`;
-// Drag handle icon for reorderable items
-export const ColumnToggleDragHandle = styled.div `
+`,ColumnToggleDragHandle=t.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -857,24 +789,23 @@ export const ColumnToggleDragHandle = styled.div `
   height: 20px;
   margin-left: auto;
   cursor: grab;
-  color: ${tokens.onSurface ? `${tokens.onSurface}40` : '#9ca3af'};
+  color: ${o.onSurface?`${o.onSurface}40`:"#9ca3af"};
   transition: all 0.2s ease;
   flex-shrink: 0;
 
   &:hover {
-    color: ${tokens.primary || '#3b82f6'};
+    color: ${o.primary||"#3b82f6"};
     transform: scale(1.1);
   }
 
   &:active {
     cursor: grabbing;
-    color: ${tokens.primary || '#3b82f6'};
+    color: ${o.primary||"#3b82f6"};
   }
 
-  ${({ $isDragging }) => $isDragging &&
-    css `
-      color: ${tokens.primary || '#3b82f6'};
-      animation: ${pulse} 0.6s ease-in-out infinite;
+  ${({$isDragging:e})=>e&&r`
+      color: ${o.primary||"#3b82f6"};
+      animation: ${s} 0.6s ease-in-out infinite;
     `}
 
   /* Grip dots pattern */
@@ -883,9 +814,7 @@ export const ColumnToggleDragHandle = styled.div `
     font-size: 14px;
     letter-spacing: -2px;
   }
-`;
-// Animated list container
-export const ColumnToggleListAnimated = styled.div `
+`,ColumnToggleListAnimated=t.div`
   padding: 8px 0;
   max-height: 300px;
   overflow-y: auto;
@@ -894,8 +823,7 @@ export const ColumnToggleListAnimated = styled.div `
   & > * {
     transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
-`;
-export const ResizeHandle = styled.div `
+`,ResizeHandle=t.div`
   position: absolute;
   right: 0;
   top: 0;
@@ -905,6 +833,6 @@ export const ResizeHandle = styled.div `
   background: transparent;
 
   &:hover {
-    background: ${tokens.primary || '#3b82f6'};
+    background: ${o.primary||"#3b82f6"};
   }
 `;