react-restyle-components 0.4.47 → 0.4.48

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

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