teachable-design-system 0.2.1 → 0.3.2

package/dist/index.esm.js

@@ -1,13 +1,13 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import React, { useState } from 'react';
+import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 import element from './assets/icons/checked.png';
 import arrowDownIcon from './assets/icons/arrow-down.png';
-import { Eye, EyeOff } from 'lucide-react';
+import { Eye, EyeOff, ChevronUp, ChevronDown, Copy, ClipboardPaste, Trash2, XCircle } from 'lucide-react';
 import icon from './assets/icons/icon_size.png';
 
-const colors = {
+const colors$1 = {
     //mode
     background: {
         'white': '#FFFFFF',
@@ -742,26 +742,26 @@ const StyledButton = styled.button `
     `}
 
     ${props => props.buttonType === 'primary' && css `
-        background-color: ${colors.button["primary-fill"]};
-        color: ${colors.text["inverse-static"]};
+        background-color: ${colors$1.button["primary-fill"]};
+        color: ${colors$1.text["inverse-static"]};
         border: none;
 
         &:hover:not(:disabled) {
-            background-color: ${colors.button["primary-fill-hover"]};
+            background-color: ${colors$1.button["primary-fill-hover"]};
         }
 
         &:active:not(:disabled) {
-            background-color: ${colors.button["tertiary-fill"]};
+            background-color: ${colors$1.button["tertiary-fill"]};
         }
     `}
 
     ${props => props.buttonType === 'secondary' && css `
-        background-color: ${colors.button['secondary-fill']};
-        color: ${colors.text['primary']};
-        border: 1px solid ${colors.button["secondary-border"]};
+        background-color: ${colors$1.button['secondary-fill']};
+        color: ${colors$1.text['primary']};
+        border: 1px solid ${colors$1.button["secondary-border"]};
 
         &:hover:not(:disabled) {
-            background-color: ${colors.button['secondary-fill-hover']};
+            background-color: ${colors$1.button['secondary-fill-hover']};
         }
 
         &:active:not(:disabled) {
@@ -771,8 +771,8 @@ const StyledButton = styled.button `
 
     ${props => props.buttonType === 'tertiary' && css `
         background-color: transparent;
-        color: ${colors.text["basic"]};
-        border: 1px solid ${colors.button["tertiary-border"]};
+        color: ${colors$1.text["basic"]};
+        border: 1px solid ${colors$1.button["tertiary-border"]};
 
         &:hover:not(:disabled) {
             background-color: #f0f7ff;
@@ -810,30 +810,30 @@ const Wrapper$1 = styled.div `
 
       ${state === "disabled" &&
         css `
-        background-color: ${colors.surface.disabled};
-        border: 1px solid ${colors.border.disabled};
+        background-color: ${colors$1.surface.disabled};
+        border: 1px solid ${colors$1.border.disabled};
       `}
 
       ${state === "default" &&
         select === "off" &&
         css `
-        background-color: ${colors.surface.white};
-        border: 1px solid ${colors.border["gray-dark"]};
+        background-color: ${colors$1.surface.white};
+        border: 1px solid ${colors$1.border["gray-dark"]};
 
         &:hover {
-          border-color: ${colors.border.primary};
+          border-color: ${colors$1.border.primary};
         }
       `}
       
       ${state === "default" &&
         (select === "on" || select === "indeterminate") &&
         css `
-        background-color: ${colors.element.primary};
-        border: 1px solid ${colors.element.primary};
+        background-color: ${colors$1.element.primary};
+        border: 1px solid ${colors$1.element.primary};
 
         &:hover {
-          background-color: ${colors.light.primary["60"]};
-          border-color: ${colors.light.primary["60"]};
+          background-color: ${colors$1.light.primary["60"]};
+          border-color: ${colors$1.light.primary["60"]};
         }
       `}
     `;
@@ -848,8 +848,8 @@ const DashIcon = styled.div `
   width: 60%;
   height: 2.5px;
   background-color: ${({ state }) => state === "disabled"
-    ? colors.element["disabled-dark"]
-    : colors.element.inverse};
+    ? colors$1.element["disabled-dark"]
+    : colors$1.element.inverse};
   border-radius: 2px;
 `;
 
@@ -956,15 +956,15 @@ const getOptionSize = (size) => {
 };
 const StyledDropDown = styled.button `
 	font-family: ${typography.fontFamily.primary};
-	background: ${colors.input.surface};
+	background: ${colors$1.input.surface};
     border-radius: 8px;
 	display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
-	width: 320px;
+	width: ${({ width }) => width || '320px'};
 	
-    border: ${({ isOpen }) => isOpen ? `2px solid ${colors.input['border-active']}` : `1px solid ${colors.input.border}`};
+    border: ${({ isOpen }) => isOpen ? `2px solid ${colors$1.input['border-active']}` : `1px solid ${colors$1.input.border}`};
     ${props => getButtonSize(props.size)}
 	
 `;
@@ -984,17 +984,17 @@ const StyledText = styled.p `
     flex: 1 0 0;
 	text-align: left;
 	${props => getFontSize(props.size)}
-    color: ${({ isOpen }) => isOpen ? colors.text.static : colors.text.disabled};
+    color: ${({ isOpen }) => isOpen ? colors$1.text.static : colors$1.text.disabled};
 `;
 const StyledLabel = styled.p `
     font-family: ${typography.fontFamily.primary};
-	color: ${colors.text.static};
+	color: ${colors$1.text.static};
 `;
 const StyledIcon$1 = styled.div `
     ${props => getIconSize(props.size)}
 `;
 const StyledOptions = styled.div `
-	border: 1px solid ${colors.border["gray-light"]};
+	border: 1px solid ${colors$1.border["gray-light"]};
 	border-radius: 8px;
 
     display: flex;
@@ -1019,7 +1019,7 @@ const StyledOption = styled.div `
 	
 	border-radius: 8px;
 	
-	color: ${colors.text.subtle};
+	color: ${colors$1.text.subtle};
 	position: relative;
 	
 	${props => getFontSize(props.size)}
@@ -1027,8 +1027,8 @@ const StyledOption = styled.div `
 
 
     ${({ isSelected }) => isSelected && css `
-		background: ${colors.action["secondary-selected"]};
-		color: ${colors.text.secondary};
+		background: ${colors$1.action["secondary-selected"]};
+		color: ${colors$1.text.secondary};
 
 		padding-left: 36px;
 
@@ -1047,14 +1047,14 @@ const StyledOption = styled.div `
 	`}
 	
 	&:hover {
-		background: ${colors.action["secondary-hover"]};
+		background: ${colors$1.action["secondary-hover"]};
 	}
 	&:active {
-		background: ${colors.action["secondary-pressed"]};
+		background: ${colors$1.action["secondary-pressed"]};
 	}
 `;
 
-function Dropdown({ size, options, onSelect, label, placeholder }) {
+function Dropdown({ size, options, onSelect, label, placeholder, width }) {
     const [open, setOpen] = React.useState(false);
     const [selected, setSelected] = React.useState(null);
     const ref = React.useRef(null);
@@ -1072,7 +1072,7 @@ function Dropdown({ size, options, onSelect, label, placeholder }) {
         onSelect?.(option);
         setOpen(false);
     };
-    return (jsxs("div", { style: { position: 'relative' }, children: [jsx(StyledLabel, { children: label }), jsx(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, isOpen: open, children: jsxs(StyledBox, { children: [jsx(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx(StyledIcon$1, { size: size, children: jsx("img", { src: arrowDownIcon, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
+    return (jsxs("div", { style: { position: 'relative' }, children: [jsx(StyledLabel, { children: label }), jsx(StyledDropDown, { onClick: () => setOpen((prev) => !prev), size: size, width: width, isOpen: open, children: jsxs(StyledBox, { children: [jsx(StyledText, { size: size, isOpen: open, children: selected ?? placeholder }), jsx(StyledIcon$1, { size: size, children: jsx("img", { src: arrowDownIcon, alt: "dropdown icon", style: { width: '100%', height: '100%' } }) })] }) }), open && (jsx(StyledOptions, { ref: ref, size: size, children: options?.map((option) => (jsx(StyledOption, { onClick: () => handleSelect(option), size: size, isSelected: option === selected, children: option }, option))) }))] }));
 }
 
 const getInputSizeStyle = (size) => {
@@ -1120,7 +1120,7 @@ const Label = styled.label `
   line-height: ${typography.label.small.lineHeight};
   font-weight: ${typography.label.small.fontWeight};
   font-family: ${typography.fontFamily.primary};
-  color: ${colors.text.subtle};
+  color: ${colors$1.text.subtle};
 `;
 const InputContainer = styled.div `
   position: relative;
@@ -1132,13 +1132,13 @@ const StyledInput = styled.input `
   width: ${(props) => props.width || "306px"};
   padding: ${(props) => (props.isPassword ? "0px 48px 0px 16px" : "0px 16px")};
   font-family: ${typography.fontFamily.primary};
-  border: 1px solid ${colors.input.border};
+  border: 1px solid ${colors$1.input.border};
   border-radius: 4px;
   outline: none;
   transition: all 0.2s ease;
-  background-color: ${(props) => props.disabled ? colors.input["surface-disabled"] : colors.input.surface};
+  background-color: ${(props) => props.disabled ? colors$1.input["surface-disabled"] : colors$1.input.surface};
   cursor: ${(props) => (props.disabled ? "not-allowed" : "text")};
-  color: ${colors.text.basic};
+  color: ${colors$1.text.basic};
   box-sizing: border-box;
 
   ${(props) => getInputSizeStyle(props.inputSize)}
@@ -1149,17 +1149,17 @@ const StyledInput = styled.input `
     `}
 
   &:focus {
-    border: 1px solid ${colors.input["border-active"]};
-    box-shadow: 0 0 0 3px ${colors.light.primary["5"]};
+    border: 1px solid ${colors$1.input["border-active"]};
+    box-shadow: 0 0 0 3px ${colors$1.light.primary["5"]};
   }
 
   &:disabled {
-    border: 1px solid ${colors.input["border-disabled"]};
-    color: ${colors.text.disabled};
+    border: 1px solid ${colors$1.input["border-disabled"]};
+    color: ${colors$1.text.disabled};
   }
 
   &::placeholder {
-    color: ${colors.text.disabled};
+    color: ${colors$1.text.disabled};
   }
 `;
 const IconButton = styled.button `
@@ -1178,7 +1178,7 @@ const IconButton = styled.button `
   transition: opacity 0.2s ease;
 
   svg {
-    color: ${(props) => props.disabled ? colors.icon.disabled : colors.icon.gray};
+    color: ${(props) => props.disabled ? colors$1.icon.disabled : colors$1.icon.gray};
   }
 `;
 
@@ -1196,14 +1196,14 @@ const StyledIcon = styled.img `
 `;
 const StyledSidebar = styled.div `
     display: flex;
-    width: 240px;
-    height: 100vh;
+    width: 208px;
+    height: 621px;
     padding: 16px;
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
 
-    background: ${colors.background.white};
+    background: ${colors$1.background.white};
 `;
 const StyledDescription = styled.div `
     width: 100%;
@@ -1212,7 +1212,7 @@ const StyledDescription = styled.div `
     align-items: flex-start;
     gap: 18px;
     flex: 1 0 0;
-    max-height: calc(100vh - 40px);
+    max-height: calc(100% - 40px);
     overflow-y: auto;
     overflow-x: hidden;
 
@@ -1221,21 +1221,21 @@ const StyledDescription = styled.div `
     }
 
     ::-webkit-scrollbar-track {
-        background: ${colors.surface["gray-subtler"]};
+        background: ${colors$1.surface["gray-subtler"]};
         border-radius: 4px;
     }
 
     ::-webkit-scrollbar-thumb {
-        background-color: ${colors.text.subtle};
+        background-color: ${colors$1.text.subtle};
         border-radius: 4px;
     }
 
     ::-webkit-scrollbar-thumb:hover {
-        background-color: ${colors.action["secondary-active"]};
+        background-color: ${colors$1.action["secondary-active"]};
     }
 
     ::-webkit-scrollbar-thumb:active {
-        background-color: ${colors.action["primary-active"]};
+        background-color: ${colors$1.action["primary-active"]};
     }
 `;
 const StyledButtonArea = styled.div `
@@ -1266,15 +1266,15 @@ const StyledOpenContents = styled.div `
     align-items: flex-start;
     gap: 8px;
     align-self: stretch;
-    width: 186px;
+    width: 154px;
 
     border-radius: 12px;
-    background: ${colors.surface["gray-subtler"]};
+    background: ${colors$1.surface["gray-subtler"]};
 `;
 const StyledOpenContentsText = styled.p `
     align-self: stretch;
 
-    color: ${colors.text.subtle};
+    color: ${colors$1.text.subtle};
 
     font-family: ${typography.fontFamily.primary};
     font-size: 13px;
@@ -1311,7 +1311,7 @@ const Wrapper = styled.div `
   width: 160px;
   height: 100vh;
   padding: 16px;
-  background-color: ${colors.surface.white};
+  background-color: ${colors$1.surface.white};
   gap: 16px;
 `;
 const Title = styled.span `
@@ -1319,7 +1319,7 @@ const Title = styled.span `
   margin: 0;
   ${typography.heading.xxsmall}
   font-family:${typography.fontFamily.primary};
-  color: ${colors.text.bolder};
+  color: ${colors$1.text.bolder};
 `;
 const Tablist = styled.div `
   display: flex;
@@ -1330,19 +1330,19 @@ const TabItem = styled.div `
   padding: 8px 8px;
   font-family: ${typography.fontFamily.primary};
   ${({ isSelected }) => isSelected ? typography.body.xsmallBold : typography.body.xsmall}
-  color: ${({ isSelected }) => isSelected ? colors.text.secondary : colors.text.subtle};
-  background-color: ${({ isSelected }) => isSelected ? colors.action["secondary-selected"] : "transparent"};
+  color: ${({ isSelected }) => isSelected ? colors$1.text.secondary : colors$1.text.subtle};
+  background-color: ${({ isSelected }) => isSelected ? colors$1.action["secondary-selected"] : "transparent"};
   border-radius: 4px;
   cursor: pointer;
 
   &:hover {
     background-color: ${({ isSelected }) => isSelected
-    ? colors.action["secondary-selected"]
-    : colors.action["secondary-hover"]};
+    ? colors$1.action["secondary-selected"]
+    : colors$1.action["secondary-hover"]};
   }
 
   &:active {
-    background-color: ${colors.action["secondary-pressed"]};
+    background-color: ${colors$1.action["secondary-pressed"]};
   }
 `;
 
@@ -1357,5 +1357,815 @@ const TabBar = ({ title, items, defaultSelectedId, onChange }) => {
     return (jsxs(Wrapper, { children: [title && jsx(Title, { children: title }), jsx(Tablist, { children: items.map((item) => (jsx(TabItem, { isSelected: selectedId === item.id, onClick: () => handleTabClick(item.id), children: item.label }, item.id))) })] }));
 };
 
-export { Button, CheckBox, Dropdown, Input, Sidebar, TabBar, colors, typography };
+// ============================================
+// 디자인 토큰
+// ============================================
+const colors = {
+    header: colors$1.surface['secondary-subtler'],
+    headerHover: colors$1.action['secondary-pressed'],
+    body: colors$1.surface.white,
+    bodyHover: colors$1.surface['gray-subtler'],
+    border: colors$1.border['gray-light'],
+    borderLight: colors$1.border['secondary-light'],
+    text: colors$1.text.bolder,
+    textSecondary: colors$1.text.subtle,
+    scrollThumb: colors$1.surface['gray-subtle'],
+    scrollThumbBorder: colors$1.border.gray,
+    selected: colors$1.surface['information-subtler'],
+    selectedBorder: colors$1.border.primary,
+    disabledText: colors$1.text.disabled,
+};
+const spacing = {
+    cellPadding: '4px 16px',
+    headerPadding: '4px 16px',
+};
+// ============================================
+// 레이아웃 컴포넌트
+// ============================================
+const TableOuterWrapper = styled.div `
+  position: relative;
+  display: inline-block;
+  outline: none;
+
+  &:focus {
+    outline: none;
+  }
+`;
+const TableWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+`;
+const TableContainer = styled.div `
+  width: 100%;
+  overflow: auto;
+  position: relative;
+  ${({ maxHeight }) => maxHeight && `max-height: ${maxHeight};`}
+
+  /* 스크롤바 스타일 */
+  &::-webkit-scrollbar {
+    width: 20px;
+    height: 20px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${colors.body};
+    border: 1px solid ${colors.border};
+    margin-top: 20px; /* 상단 화살표 버튼 높이만큼 여백 */
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${colors.scrollThumb};
+    border: 1px solid ${colors.scrollThumbBorder};
+
+    &:hover {
+      background: ${colors.headerHover};
+    }
+  }
+
+  &::-webkit-scrollbar-button:vertical:start:decrement,
+  &::-webkit-scrollbar-button:vertical:end:increment {
+    display: block;
+    height: 20px;
+    background: ${colors.header};
+    border: 1px solid ${colors.borderLight};
+  }
+
+  &::-webkit-scrollbar-button:vertical:start:decrement:hover,
+  &::-webkit-scrollbar-button:vertical:end:increment:hover {
+    background: ${colors.headerHover};
+  }
+`;
+// ============================================
+// 테이블 기본 컴포넌트
+// ============================================
+const StyledTable = styled.table `
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: auto;
+  font-family: ${typography.fontFamily.primary};
+`;
+const TableHead = styled.thead `
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: ${colors.header};
+`;
+const TableBody$1 = styled.tbody ``;
+const TableRow = styled.tr `
+  &:nth-of-type(even) {
+    ${({ striped }) => striped && `background-color: ${colors.bodyHover};`}
+  }
+
+  &:hover {
+    background-color: ${colors.bodyHover};
+  }
+`;
+// ============================================
+// 셀 컴포넌트
+// ============================================
+const baseCellStyle = `
+  box-sizing: border-box;
+  vertical-align: middle;
+  line-height: 1.5;
+`;
+const TableHeaderCell = styled.th `
+  ${baseCellStyle}
+  min-width: ${({ width }) => (width ? '0' : '80px')};
+  background: ${colors.header};
+  border: 1px solid ${colors.borderLight};
+  border-left: none;
+  padding: ${spacing.headerPadding};
+  text-align: left;
+  font-weight: 700;
+  font-size: 15px;
+  color: ${colors.text};
+  height: 30px;
+  white-space: nowrap;
+  position: relative;
+  ${({ width }) => width && `width: ${width};`}
+
+  &:first-of-type {
+    border-left: 1px solid ${colors.borderLight};
+  }
+
+  ${({ sortable }) => sortable &&
+    `
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: ${colors.headerHover};
+    }
+  `}
+`;
+const TableDataCell = styled.td `
+  ${baseCellStyle}
+  min-width: ${({ width }) => (width ? '0' : '80px')};
+  background: ${({ isHeaderColumn, isSelected, $rowSelected }) => isSelected ? colors.selected : (isHeaderColumn ? colors.header : ($rowSelected ? 'inherit' : colors.body))};
+  border-right: 1px solid ${({ isHeaderColumn }) => isHeaderColumn ? colors.borderLight : colors.border};
+  border-bottom: 1px solid ${({ isHeaderColumn }) => isHeaderColumn ? colors.borderLight : colors.border};
+  border-left: none;
+  border-top: none;
+  padding: ${({ isHeaderColumn }) => (isHeaderColumn ? spacing.headerPadding : spacing.cellPadding)};
+  font-weight: ${({ isHeaderColumn }) => (isHeaderColumn ? 700 : 400)};
+  font-size: ${({ isHeaderColumn }) => (isHeaderColumn ? '15px' : '13px')};
+  color: ${({ isHeaderColumn }) => (isHeaderColumn ? colors.text : colors.textSecondary)};
+  height: ${({ height }) => height ?? '30px'};
+  position: relative;
+  user-select: none;
+
+  &:first-of-type {
+    border-left: 1px solid ${({ isHeaderColumn }) => isHeaderColumn ? colors.borderLight : colors.border};
+  }
+
+  ${({ isSelected, $edgeTop, $edgeBottom, $edgeLeft, $edgeRight }) => isSelected &&
+    `
+    z-index: 1;
+    box-shadow: 
+      ${$edgeTop ? `inset 0 2px 0 0 ${colors.selectedBorder}` : `inset 0 0.5px 0 0 ${colors.selectedBorder}50`}${$edgeBottom ? `, inset 0 -2px 0 0 ${colors.selectedBorder}` : `, inset 0 -0.5px 0 0 ${colors.selectedBorder}50`}${$edgeLeft ? `, inset 2px 0 0 0 ${colors.selectedBorder}` : `, inset 0.5px 0 0 0 ${colors.selectedBorder}50`}${$edgeRight ? `, inset -2px 0 0 0 ${colors.selectedBorder}` : `, inset -0.5px 0 0 0 ${colors.selectedBorder}50`};
+  `}
+
+  ${({ editable, isSelected, $rowSelected }) => editable && !isSelected && !$rowSelected &&
+    `
+    cursor: cell;
+    &:hover {
+      background-color: ${colors.bodyHover};
+    }
+  `}
+
+  ${({ isSelected }) => isSelected &&
+    `
+    &:hover {
+      background-color: ${colors.selected};
+    }
+  `}
+`;
+// ============================================
+// 정렬 및 입력 컴포넌트
+// ============================================
+const SortIcon = styled.span `
+  display: inline-flex;
+  flex-direction: column;
+  margin-left: 4px;
+  opacity: ${({ active }) => (active ? 1 : 0.3)};
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+const EditableInput = styled.input `
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  margin: -12px -16px;
+  padding: ${spacing.cellPadding};
+
+  &:focus {
+    outline: none;
+  }
+`;
+// ============================================
+// 스크롤 컨트롤
+// ============================================
+const ScrollContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+const ScrollButton = styled.button `
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: ${colors.header};
+  border: 1px solid ${colors.borderLight};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: ${colors.headerHover};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 14px;
+    height: 14px;
+    color: ${colors.text};
+  }
+`;
+// ============================================
+// 컨텍스트 메뉴
+// ============================================
+const ContextMenuOverlay = styled.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+`;
+const ContextMenu = styled.div `
+  position: fixed;
+  top: ${({ y }) => y}px;
+  left: ${({ x }) => x}px;
+  z-index: 1000;
+  min-width: 160px;
+  background: ${colors.body};
+  border: 1px solid ${colors.border};
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  padding: 4px 0;
+  font-family: ${typography.fontFamily.primary};
+`;
+const ContextMenuItem = styled.button `
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 13px;
+  color: ${({ disabled }) => (disabled ? colors.disabledText : colors.text)};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &:hover {
+    background: ${({ disabled }) => (disabled ? 'transparent' : colors.bodyHover)};
+  }
+
+  span.shortcut {
+    margin-left: auto;
+    font-size: 11px;
+    color: ${colors.disabledText};
+  }
+`;
+const ContextMenuDivider = styled.div `
+  height: 1px;
+  background: ${colors.borderLight};
+  margin: 4px 0;
+`;
+
+/** 정렬 아이콘 컴포넌트 */
+function SortIndicator({ isActive, direction }) {
+    if (!isActive || !direction) {
+        return jsx(ChevronUp, { style: { opacity: 0.3 } });
+    }
+    return direction === 'asc' ? jsx(ChevronUp, {}) : jsx(ChevronDown, {});
+}
+/** 테이블 헤더 */
+function TableHeader({ columns, sortColumn, sortDirection, onSort, }) {
+    const handleClick = (key, sortable) => {
+        if (sortable)
+            onSort?.(key);
+    };
+    return (jsx(TableHead, { children: jsx(TableRow, { children: columns.map(({ key, header, width, sortable, rowSpan, colSpan }) => {
+                const isActive = sortColumn === key;
+                return (jsxs(TableHeaderCell, { width: width, sortable: sortable, rowSpan: rowSpan, colSpan: colSpan, onClick: () => handleClick(key, sortable), children: [header, sortable && (jsx(SortIcon, { active: isActive, direction: isActive ? sortDirection : null, children: jsx(SortIndicator, { isActive: isActive, direction: sortDirection }) }))] }, key));
+            }) }) }));
+}
+
+const formatValue = (val, dataType) => {
+    if (val == null)
+        return '';
+    switch (dataType) {
+        case 'number':
+            return typeof val === 'number' ? val.toLocaleString() : String(val);
+        case 'date':
+            return val instanceof Date ? val.toLocaleDateString('ko-KR') : String(val);
+        case 'boolean':
+            return val ? '예' : '아니오';
+        default:
+            return String(val);
+    }
+};
+const parseValue = (val, dataType) => {
+    switch (dataType) {
+        case 'number': {
+            const num = parseFloat(val.replace(/,/g, ''));
+            return isNaN(num) ? 0 : num;
+        }
+        case 'date':
+            return new Date(val);
+        case 'boolean':
+            return val === '예' || val === 'true' || val === '1';
+        default:
+            return val;
+    }
+};
+const getInputType = (dataType) => {
+    if (dataType === 'number')
+        return 'number';
+    if (dataType === 'date')
+        return 'date';
+    return 'text';
+};
+function TableCell({ value, editable = false, width, height, rowHeight, dataType = 'text', isHeaderColumn = false, isSelected = false, rowSelected = false, isEditingRequested, startEditingToken, startEditingValue, selectionEdge, rowSpan, colSpan, onEdit, render, onMouseDown, onMouseEnter, onMouseUp, }) {
+    const [isEditing, setIsEditing] = useState(false);
+    const [editValue, setEditValue] = useState('');
+    const lastStartTokenRef = useRef(undefined);
+    const startEditing = useCallback(() => {
+        if (!editable)
+            return;
+        setEditValue(formatValue(value, dataType));
+        setIsEditing(true);
+    }, [editable, value, dataType]);
+    // 부모에서 "편집 시작" 요청이 오면 (예: 선택 셀에서 타이핑) 편집 모드로 진입
+    useEffect(() => {
+        if (!isEditingRequested)
+            return;
+        if (startEditingToken == null)
+            return;
+        if (lastStartTokenRef.current === startEditingToken)
+            return;
+        lastStartTokenRef.current = startEditingToken;
+        if (!editable)
+            return;
+        const nextValue = startEditingValue ?? formatValue(value, dataType);
+        setEditValue(nextValue);
+        setIsEditing(true);
+    }, [isEditingRequested, startEditingToken, startEditingValue, editable, value, dataType]);
+    const save = useCallback(() => {
+        onEdit?.(parseValue(editValue, dataType));
+        setIsEditing(false);
+    }, [editValue, dataType, onEdit]);
+    const cancel = useCallback(() => {
+        setEditValue('');
+        setIsEditing(false);
+    }, []);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            save();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            cancel();
+        }
+    }, [save, cancel]);
+    const handleMouseDown = useCallback((e) => {
+        if (isEditing)
+            return;
+        e.preventDefault();
+        onMouseDown?.();
+    }, [isEditing, onMouseDown]);
+    const handleMouseEnter = useCallback(() => {
+        if (isEditing)
+            return;
+        onMouseEnter?.();
+    }, [isEditing, onMouseEnter]);
+    const displayValue = render ? render(value) : formatValue(value, dataType);
+    return (jsx(TableDataCell, { editable: editable, width: width, height: height || rowHeight, isHeaderColumn: isHeaderColumn, isSelected: isSelected, "$rowSelected": rowSelected, "$edgeTop": selectionEdge?.top, "$edgeBottom": selectionEdge?.bottom, "$edgeLeft": selectionEdge?.left, "$edgeRight": selectionEdge?.right, rowSpan: rowSpan, colSpan: colSpan, onDoubleClick: startEditing, onMouseDown: handleMouseDown, onMouseEnter: handleMouseEnter, onMouseUp: onMouseUp, children: isEditing ? (jsx(EditableInput, { type: getInputType(dataType), value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: save, onKeyDown: handleKeyDown, autoFocus: true })) : (displayValue) }));
+}
+
+const getSelectionInfo = (rowIndex, colIndex, start, end) => {
+    if (!start || !end) {
+        return { isSelected: false, edge: { top: false, bottom: false, left: false, right: false } };
+    }
+    const minRow = Math.min(start.row, end.row);
+    const maxRow = Math.max(start.row, end.row);
+    const minCol = Math.min(start.col, end.col);
+    const maxCol = Math.max(start.col, end.col);
+    const isSelected = rowIndex >= minRow && rowIndex <= maxRow && colIndex >= minCol && colIndex <= maxCol;
+    if (!isSelected) {
+        return { isSelected: false, edge: { top: false, bottom: false, left: false, right: false } };
+    }
+    return {
+        isSelected: true,
+        edge: {
+            top: rowIndex === minRow,
+            bottom: rowIndex === maxRow,
+            left: colIndex === minCol,
+            right: colIndex === maxCol,
+        }
+    };
+};
+function TableBody({ columns, data, rowHeight, onCellEdit, selectionStart, selectionEnd, editingCell, editStartValue, editToken, onCellMouseDown, onCellMouseEnter, onCellMouseUp, enableRowSelection, selectedRowIndex, hoveredRowIndex, onRowClick, onRowHover, }) {
+    const getRowBackground = (rowIndex) => {
+        if (!enableRowSelection)
+            return undefined;
+        if (selectedRowIndex === rowIndex)
+            return '#e7f4fe';
+        if (hoveredRowIndex === rowIndex)
+            return '#f4f5f6';
+        return undefined;
+    };
+    return (jsx(TableBody$1, { children: data.map((row, rowIndex) => (jsx(TableRow, { onClick: enableRowSelection ? () => onRowClick?.(rowIndex) : undefined, onMouseEnter: enableRowSelection ? () => onRowHover?.(rowIndex) : undefined, onMouseLeave: enableRowSelection ? () => onRowHover?.(null) : undefined, style: {
+                cursor: enableRowSelection ? 'pointer' : undefined,
+                backgroundColor: getRowBackground(rowIndex),
+                transition: enableRowSelection ? 'background-color 0.15s ease' : undefined,
+            }, children: columns.map((col, colIndex) => {
+                const { isSelected, edge } = getSelectionInfo(rowIndex, colIndex, selectionStart, selectionEnd);
+                const isEditingRequested = !!editingCell && editingCell.row === rowIndex && editingCell.col === colIndex;
+                return (jsx(TableCell, { value: row[col.key], editable: col.editable !== false, width: col.width, height: col.height, rowHeight: rowHeight, dataType: col.dataType, isHeaderColumn: col.isHeaderColumn, isSelected: isSelected, rowSelected: enableRowSelection && (selectedRowIndex === rowIndex || hoveredRowIndex === rowIndex), isEditingRequested: isEditingRequested, startEditingToken: editToken, startEditingValue: isEditingRequested ? editStartValue : null, selectionEdge: isSelected ? edge : undefined, rowSpan: col.rowSpan, colSpan: col.colSpan, onEdit: (value) => onCellEdit?.(rowIndex, col.key, value), render: col.render ? (value) => col.render(value, row, rowIndex) : undefined, onMouseDown: enableRowSelection ? undefined : () => onCellMouseDown?.(rowIndex, colIndex), onMouseEnter: enableRowSelection ? undefined : () => onCellMouseEnter?.(rowIndex, colIndex), onMouseUp: enableRowSelection ? undefined : onCellMouseUp }, `${rowIndex}-${col.key}`));
+            }) }, rowIndex))) }));
+}
+
+const compareValues = (a, b, dataType) => {
+    if (a == null)
+        return 1;
+    if (b == null)
+        return -1;
+    switch (dataType) {
+        case 'number':
+            return Number(a) - Number(b);
+        case 'date':
+            return new Date(a).getTime() - new Date(b).getTime();
+        case 'boolean':
+            return (a ? 1 : 0) - (b ? 1 : 0);
+        default:
+            return String(a).localeCompare(String(b), 'ko-KR');
+    }
+};
+const getNextSortDirection = (current) => {
+    if (current === 'asc')
+        return 'desc';
+    if (current === 'desc')
+        return null;
+    return 'asc';
+};
+const formatCellValue = (value) => {
+    if (value == null)
+        return '';
+    if (value instanceof Date)
+        return value.toLocaleDateString('ko-KR');
+    if (typeof value === 'boolean')
+        return value ? '예' : '아니오';
+    if (typeof value === 'number')
+        return value.toString();
+    return String(value);
+};
+function Table({ columns, data, onCellEdit, onSort, onSelectionChange, onPaste, maxHeight, rowHeight, className, enableRowSelection, selectedRowIndex, onRowClick, enableKeyboardNavigation, }) {
+    const outerRef = useRef(null);
+    const containerRef = useRef(null);
+    const [sortColumn, setSortColumn] = useState(null);
+    const [sortDirection, setSortDirection] = useState(null);
+    const [isSelecting, setIsSelecting] = useState(false);
+    const [selectionStart, setSelectionStart] = useState(null);
+    const [selectionEnd, setSelectionEnd] = useState(null);
+    const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
+    const [hoveredRowIndex, setHoveredRowIndex] = useState(null);
+    const [editingCell, setEditingCell] = useState(null);
+    const [editStartValue, setEditStartValue] = useState(null);
+    const [editToken, setEditToken] = useState(0);
+    const sortedData = useMemo(() => {
+        if (!sortColumn || !sortDirection)
+            return data;
+        const column = columns.find((col) => col.key === sortColumn);
+        if (!column)
+            return data;
+        return [...data].sort((a, b) => {
+            const aVal = a[sortColumn];
+            const bVal = b[sortColumn];
+            const result = column.sortFn
+                ? column.sortFn(aVal, bVal)
+                : compareValues(aVal, bVal, column.dataType);
+            return sortDirection === 'asc' ? result : -result;
+        });
+    }, [data, sortColumn, sortDirection, columns]);
+    const handleSort = useCallback((columnKey) => {
+        const isSameColumn = sortColumn === columnKey;
+        const nextDirection = isSameColumn
+            ? getNextSortDirection(sortDirection)
+            : 'asc';
+        setSortColumn(nextDirection ? columnKey : null);
+        setSortDirection(nextDirection);
+        onSort?.(columnKey, nextDirection);
+    }, [sortColumn, sortDirection, onSort]);
+    const scroll = useCallback((delta) => {
+        containerRef.current?.scrollBy({ top: delta, behavior: 'smooth' });
+    }, []);
+    const handleCellMouseDown = useCallback((rowIndex, colIndex) => {
+        setIsSelecting(true);
+        setSelectionStart({ row: rowIndex, col: colIndex });
+        setSelectionEnd({ row: rowIndex, col: colIndex });
+    }, []);
+    const handleCellMouseEnter = useCallback((rowIndex, colIndex) => {
+        if (isSelecting) {
+            setSelectionEnd({ row: rowIndex, col: colIndex });
+        }
+    }, [isSelecting]);
+    const handleCellMouseUp = useCallback(() => {
+        if (isSelecting && selectionStart && selectionEnd) {
+            const cells = [];
+            const minRow = Math.min(selectionStart.row, selectionEnd.row);
+            const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+            const minCol = Math.min(selectionStart.col, selectionEnd.col);
+            const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+            for (let r = minRow; r <= maxRow; r++) {
+                for (let c = minCol; c <= maxCol; c++) {
+                    cells.push({ row: r, col: c });
+                }
+            }
+            onSelectionChange?.(cells);
+        }
+        setIsSelecting(false);
+    }, [isSelecting, selectionStart, selectionEnd, onSelectionChange]);
+    const getSelectedData = useCallback(() => {
+        if (!selectionStart || !selectionEnd)
+            return '';
+        const minRow = Math.min(selectionStart.row, selectionEnd.row);
+        const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+        const minCol = Math.min(selectionStart.col, selectionEnd.col);
+        const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+        const rows = [];
+        for (let r = minRow; r <= maxRow; r++) {
+            const cols = [];
+            for (let c = minCol; c <= maxCol; c++) {
+                const colKey = columns[c]?.key;
+                const value = sortedData[r]?.[colKey];
+                cols.push(formatCellValue(value));
+            }
+            rows.push(cols.join('\t'));
+        }
+        return rows.join('\n');
+    }, [selectionStart, selectionEnd, columns, sortedData]);
+    const handleKeyDown = useCallback((e) => {
+        // 셀 편집(input/textarea) 중에는 전역 키 핸들러가 Backspace/Delete 등을 가로채지 않도록 무시
+        const target = e.target;
+        if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)) {
+            return;
+        }
+        // 행 선택 모드에서 키보드 네비게이션
+        if (enableRowSelection && enableKeyboardNavigation && onRowClick) {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                const currentIndex = selectedRowIndex ?? 0;
+                const newIndex = Math.max(0, currentIndex - 1);
+                onRowClick(newIndex, sortedData[newIndex]);
+                return;
+            }
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                const currentIndex = selectedRowIndex ?? -1;
+                const newIndex = Math.min(sortedData.length - 1, currentIndex + 1);
+                onRowClick(newIndex, sortedData[newIndex]);
+                return;
+            }
+        }
+        if (!selectionStart || !selectionEnd)
+            return;
+        // 셀 선택 상태에서 문자 입력 시 즉시 편집 모드로 전환 (스프레드시트 UX)
+        // - 단일 셀 선택일 때만 동작
+        // - onCellEdit가 있어야 의미 있는 편집이 가능
+        if (onCellEdit &&
+            !e.ctrlKey &&
+            !e.metaKey &&
+            !e.altKey &&
+            e.key.length === 1) {
+            const isSingleCell = selectionStart.row === selectionEnd.row && selectionStart.col === selectionEnd.col;
+            if (!isSingleCell) {
+                setSelectionEnd(selectionStart);
+            }
+            e.preventDefault();
+            setEditingCell({ row: selectionStart.row, col: selectionStart.col });
+            setEditStartValue(e.key);
+            setEditToken((t) => t + 1);
+            setContextMenu({ visible: false, x: 0, y: 0 });
+            return;
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+            e.preventDefault();
+            const text = getSelectedData();
+            navigator.clipboard.writeText(text).catch(console.error);
+        }
+        if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+            e.preventDefault();
+            navigator.clipboard.readText().then((text) => {
+                if (!text || !selectionStart)
+                    return;
+                const rows = text
+                    .replace(/\r\n/g, '\n')
+                    .replace(/\r/g, '\n')
+                    .split('\n')
+                    .filter((row, idx, arr) => !(idx === arr.length - 1 && row === ''))
+                    .map(row => row.split('\t'));
+                const startRow = Math.min(selectionStart.row, selectionEnd?.row ?? selectionStart.row);
+                const startCol = Math.min(selectionStart.col, selectionEnd?.col ?? selectionStart.col);
+                if (onPaste) {
+                    onPaste(startRow, startCol, rows);
+                }
+                else if (onCellEdit) {
+                    rows.forEach((row, rIdx) => {
+                        row.forEach((cellValue, cIdx) => {
+                            const targetRow = startRow + rIdx;
+                            const targetCol = startCol + cIdx;
+                            if (targetRow < data.length && targetCol < columns.length) {
+                                const col = columns[targetCol];
+                                if (col.editable !== false) {
+                                    let parsedValue = cellValue;
+                                    if (col.dataType === 'number') {
+                                        const num = parseFloat(cellValue.replace(/,/g, ''));
+                                        parsedValue = isNaN(num) ? 0 : num;
+                                    }
+                                    onCellEdit(targetRow, col.key, parsedValue);
+                                }
+                            }
+                        });
+                    });
+                }
+            }).catch(console.error);
+        }
+        if (e.key === 'Delete' || e.key === 'Backspace') {
+            if (!onCellEdit)
+                return;
+            e.preventDefault();
+            const minRow = Math.min(selectionStart.row, selectionEnd.row);
+            const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+            const minCol = Math.min(selectionStart.col, selectionEnd.col);
+            const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+            for (let r = minRow; r <= maxRow; r++) {
+                for (let c = minCol; c <= maxCol; c++) {
+                    const col = columns[c];
+                    if (col.editable !== false) {
+                        onCellEdit(r, col.key, '');
+                    }
+                }
+            }
+        }
+        if (e.key === 'Escape') {
+            setSelectionStart(null);
+            setSelectionEnd(null);
+            setContextMenu({ visible: false, x: 0, y: 0 });
+        }
+    }, [enableRowSelection, enableKeyboardNavigation, selectedRowIndex, sortedData, onRowClick, selectionStart, selectionEnd, getSelectedData, onPaste, onCellEdit, data, columns]);
+    // 표 밖을 클릭하면 셀 선택(타겟) 해제
+    useEffect(() => {
+        const handleMouseDownOutside = (event) => {
+            const root = outerRef.current;
+            const target = event.target;
+            if (!root || !target)
+                return;
+            if (root.contains(target))
+                return;
+            setIsSelecting(false);
+            setSelectionStart(null);
+            setSelectionEnd(null);
+            setEditingCell(null);
+            setEditStartValue(null);
+            setContextMenu({ visible: false, x: 0, y: 0 });
+        };
+        document.addEventListener('mousedown', handleMouseDownOutside, true);
+        return () => {
+            document.removeEventListener('mousedown', handleMouseDownOutside, true);
+        };
+    }, []);
+    const handleContextMenu = useCallback((e) => {
+        e.preventDefault();
+        if (selectionStart && selectionEnd) {
+            setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
+        }
+    }, [selectionStart, selectionEnd]);
+    const closeContextMenu = useCallback(() => {
+        setContextMenu({ visible: false, x: 0, y: 0 });
+    }, []);
+    const handleCopy = useCallback(() => {
+        const text = getSelectedData();
+        navigator.clipboard.writeText(text).catch(console.error);
+        closeContextMenu();
+    }, [getSelectedData, closeContextMenu]);
+    const handlePaste = useCallback(() => {
+        if (!selectionStart || !selectionEnd)
+            return;
+        navigator.clipboard.readText().then((text) => {
+            if (!text)
+                return;
+            const rows = text
+                .replace(/\r\n/g, '\n')
+                .replace(/\r/g, '\n')
+                .split('\n')
+                .filter((row, idx, arr) => !(idx === arr.length - 1 && row === ''))
+                .map(row => row.split('\t'));
+            const startRow = Math.min(selectionStart.row, selectionEnd.row);
+            const startCol = Math.min(selectionStart.col, selectionEnd.col);
+            if (onPaste) {
+                onPaste(startRow, startCol, rows);
+            }
+            else if (onCellEdit) {
+                rows.forEach((row, rIdx) => {
+                    row.forEach((cellValue, cIdx) => {
+                        const targetRow = startRow + rIdx;
+                        const targetCol = startCol + cIdx;
+                        if (targetRow < data.length && targetCol < columns.length) {
+                            const col = columns[targetCol];
+                            if (col.editable !== false) {
+                                let parsedValue = cellValue;
+                                if (col.dataType === 'number') {
+                                    const num = parseFloat(cellValue.replace(/,/g, ''));
+                                    parsedValue = isNaN(num) ? 0 : num;
+                                }
+                                onCellEdit(targetRow, col.key, parsedValue);
+                            }
+                        }
+                    });
+                });
+            }
+        }).catch(console.error);
+        closeContextMenu();
+    }, [selectionStart, selectionEnd, onPaste, onCellEdit, data, columns, closeContextMenu]);
+    const handleDelete = useCallback(() => {
+        if (!selectionStart || !selectionEnd || !onCellEdit)
+            return;
+        const minRow = Math.min(selectionStart.row, selectionEnd.row);
+        const maxRow = Math.max(selectionStart.row, selectionEnd.row);
+        const minCol = Math.min(selectionStart.col, selectionEnd.col);
+        const maxCol = Math.max(selectionStart.col, selectionEnd.col);
+        for (let r = minRow; r <= maxRow; r++) {
+            for (let c = minCol; c <= maxCol; c++) {
+                const col = columns[c];
+                if (col.editable !== false) {
+                    onCellEdit(r, col.key, '');
+                }
+            }
+        }
+        closeContextMenu();
+    }, [selectionStart, selectionEnd, onCellEdit, columns, closeContextMenu]);
+    const handleClearSelection = useCallback(() => {
+        setSelectionStart(null);
+        setSelectionEnd(null);
+        closeContextMenu();
+    }, [closeContextMenu]);
+    const hasSelection = selectionStart !== null && selectionEnd !== null;
+    const selectionCellCount = useMemo(() => {
+        if (!selectionStart || !selectionEnd)
+            return 0;
+        const rows = Math.abs(selectionEnd.row - selectionStart.row) + 1;
+        const cols = Math.abs(selectionEnd.col - selectionStart.col) + 1;
+        return rows * cols;
+    }, [selectionStart, selectionEnd]);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const handleMouseUp = () => {
+            if (isSelecting) {
+                handleCellMouseUp();
+            }
+        };
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isSelecting, handleCellMouseUp, handleKeyDown]);
+    return (jsxs(TableOuterWrapper, { ref: outerRef, className: className, tabIndex: 0, onContextMenu: handleContextMenu, children: [jsx(TableWrapper, { children: jsx(TableContainer, { ref: containerRef, maxHeight: maxHeight, children: jsxs(StyledTable, { children: [jsx("colgroup", { children: columns.map((col) => (jsx("col", { style: col.width ? { width: col.width } : undefined }, String(col.key)))) }), jsx(TableHeader, { columns: columns, sortColumn: sortColumn ?? undefined, sortDirection: sortDirection, onSort: handleSort }), jsx(TableBody, { columns: columns, data: sortedData, rowHeight: rowHeight, onCellEdit: onCellEdit, selectionStart: enableRowSelection ? null : selectionStart, selectionEnd: enableRowSelection ? null : selectionEnd, editingCell: enableRowSelection ? null : editingCell, editStartValue: editStartValue, editToken: editToken, onCellMouseDown: enableRowSelection ? undefined : handleCellMouseDown, onCellMouseEnter: enableRowSelection ? undefined : handleCellMouseEnter, onCellMouseUp: enableRowSelection ? undefined : handleCellMouseUp, enableRowSelection: enableRowSelection, selectedRowIndex: selectedRowIndex, hoveredRowIndex: hoveredRowIndex ?? undefined, onRowClick: (rowIndex) => onRowClick?.(rowIndex, sortedData[rowIndex]), onRowHover: setHoveredRowIndex })] }) }) }), maxHeight && (jsxs(ScrollContainer, { children: [jsx(ScrollButton, { position: "top", onClick: () => scroll(-100), children: jsx(ChevronUp, {}) }), jsx(ScrollButton, { position: "bottom", onClick: () => scroll(100), children: jsx(ChevronDown, {}) })] })), contextMenu.visible && (jsxs(Fragment, { children: [jsx(ContextMenuOverlay, { onClick: closeContextMenu }), jsxs(ContextMenu, { x: contextMenu.x, y: contextMenu.y, children: [jsxs(ContextMenuItem, { onClick: handleCopy, disabled: !hasSelection, children: [jsx(Copy, { size: 14 }), "\uBCF5\uC0AC", jsx("span", { className: "shortcut", children: "\u2318C" })] }), jsxs(ContextMenuItem, { onClick: handlePaste, disabled: !hasSelection, children: [jsx(ClipboardPaste, { size: 14 }), "\uBD99\uC5EC\uB123\uAE30", jsx("span", { className: "shortcut", children: "\u2318V" })] }), jsx(ContextMenuDivider, {}), jsxs(ContextMenuItem, { onClick: handleDelete, disabled: !hasSelection || !onCellEdit, children: [jsx(Trash2, { size: 14 }), "\uC0AD\uC81C", jsx("span", { className: "shortcut", children: "Del" })] }), jsx(ContextMenuDivider, {}), jsxs(ContextMenuItem, { onClick: handleClearSelection, disabled: !hasSelection, children: [jsx(XCircle, { size: 14 }), "\uC120\uD0DD \uD574\uC81C", jsx("span", { className: "shortcut", children: "Esc" })] }), hasSelection && (jsxs(Fragment, { children: [jsx(ContextMenuDivider, {}), jsxs(ContextMenuItem, { disabled: true, style: { fontSize: '11px', color: '#9ca3af' }, children: [selectionCellCount, "\uAC1C \uC140 \uC120\uD0DD\uB428"] })] }))] })] }))] }));
+}
+
+export { Button, CheckBox, Dropdown, Input, Sidebar, TabBar, Table, colors$1 as colors, typography };
 //# sourceMappingURL=index.esm.js.map