@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/components/Table/index.cjs

@@ -1,48 +1,43 @@
+require("./Table.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
 const MiddleTruncator = require('../MiddleTruncator/index.cjs');
+const cva = require('../../lib/cva.cjs');
+const Table_module = require('./Table.module.css.cjs');
 const Checkbox = require('../Checkbox/index.cjs');
 const IconButton = require('../IconButton/index.cjs');
 const Icon = require('../Icon/index.cjs');
 const Text = require('../Text/index.cjs');
 const EllipsisContent = require('../EllipsisContent/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const StyledHeader = styledComponents.styled.th.withConfig({
-  componentId: "sc-1q458rb-0"
-})(["", " text-align:left;", ""], ({
-  theme,
-  $size
-}) => `
-    padding: ${theme.click.table.header.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
-    font: ${theme.click.table.header.title.default};
-    color: ${theme.click.table.header.color.title.default};
-  `, ({
-  $resizable
-}) => $resizable && `
-    position: relative;
-  `);
-const Resizer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-1"
-})(["position:absolute;top:0;right:0;width:24px;height:100%;cursor:col-resize;user-select:none;z-index:1;transition:opacity 0.2s;border-radius:0.5rem;transform:translateX(50%);&:hover{opacity:0.6;}&::before{content:' ';background:", ";display:inline-block;top:25%;width:2px;height:20px;position:relative;left:50%;transform:translateX(-50%);}&:focus-visible{outline:2px solid ", ";outline-offset:2px;opacity:1;}"], ({
-  theme
-}) => theme.click.table.header.color.checkbox.border.default, ({
-  theme
-}) => theme.click.global.color.outline.default);
-const HeaderContentWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-2"
-})(["display:flex;align-items:center;justify-content:start;gap:inherit;", ""], ({
-  $interactive
-}) => $interactive && "cursor: pointer;");
-const SortIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1q458rb-3"
-})(["transition:all 200ms;transform:rotate(", ");"], ({
-  $sortDir
-}) => $sortDir === "desc" ? "180deg" : "0deg");
+const headerVariants = classVarianceAuthority.cva(Table_module.default.table__header, {
+  variants: {
+    size: {
+      sm: Table_module.default.table__header_size_sm,
+      md: Table_module.default.table__header_size_md
+    },
+    resizable: {
+      true: Table_module.default.table__header_resizable,
+      false: ""
+    }
+  },
+  defaultVariants: {
+    resizable: false
+  }
+});
+const sortIconVariants = classVarianceAuthority.cva(Table_module.default["table__sort-icon"], {
+  variants: {
+    dir: {
+      asc: Table_module.default["table__sort-icon_dir_asc"],
+      desc: Table_module.default["table__sort-icon_dir_desc"]
+    }
+  }
+});
 const TableHeader = ({
   label,
   sortDir,
@@ -56,6 +51,7 @@ const TableHeader = ({
   onResizeStart,
   onKeyboardResize,
   overflowMode,
+  className,
   ...props
 }) => {
   if (overflowMode === "wrap" && resizable) {
@@ -91,13 +87,20 @@ const TableHeader = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(StyledHeader, { $size: size, $resizable: resizable, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(HeaderContentWrapper, { onClick: onHeaderClick, $interactive: isInteractive, children: [
-      isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("th", { ...props, className: cva.cn(headerVariants({
+    size,
+    resizable
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { onClick: onHeaderClick, className: cva.cn(Table_module.default["table__header-content"], isInteractive && Table_module.default["table__header-content_interactive"]), children: [
+      isSorted && isSortable && sortPosition == "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "arrow-down", size: "sm", className: cva.cn(sortIconVariants({
+        dir: sortDir
+      })) }),
       label,
-      isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { $sortDir: sortDir, name: "arrow-down", size: "sm" })
+      isSorted && isSortable && sortPosition == "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "arrow-down", size: "sm", className: cva.cn(sortIconVariants({
+        dir: sortDir
+      })) })
     ] }),
-    showResizer && /* @__PURE__ */ jsxRuntime.jsx(Resizer, { ref: resizerRef, onMouseDown: onResizeStart, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${typeof label === "string" ? label : "column"}`, tabIndex: 0, onKeyDown: onResizerKeyDown })
+    showResizer && /* @__PURE__ */ jsxRuntime.jsx("div", { ref: resizerRef, onMouseDown: onResizeStart, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${typeof label === "string" ? label : "column"}`, tabIndex: 0, onKeyDown: onResizerKeyDown, className: cva.cn(Table_module.default.table__resizer) })
   ] });
 };
 const Thead = ({
@@ -121,7 +124,7 @@ const Thead = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(StyledColGroup, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("colgroup", { className: cva.cn(Table_module.default.table__colgroup), children: [
       isSelectable && /* @__PURE__ */ jsxRuntime.jsx("col", { width: 48 }),
       headers.map((headerProps, index) => {
         const headerLabel = typeof headerProps.label === "string" ? headerProps.label : `__index_${index}`;
@@ -130,161 +133,67 @@ const Thead = ({
       }),
       actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("col", { width: (actionsList.length + 1) * 32 + 10 })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(StyledThead, { ref: theadRef, children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
-      isSelectable && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { $size: size, "aria-label": "Select column", children: /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { ref: theadRef, className: cva.cn(Table_module.default.table__thead), children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      isSelectable && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-label": "Select column", className: cva.cn(headerVariants({
+        size
+      })), children: /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { onCheckedChange: onSelectAll, rows, selectedIds }) }),
       headers.map((headerProps, index) => /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { onSort: onSort(headerProps, index), size, resizable: resizableColumns, showResizer: resizableColumns && index < headers.length - 1, onResizeStart: onResizeStart?.(index), onKeyboardResize: onKeyboardResize?.(index), ...headerProps }, `table-header-${index}`)),
-      actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(StyledHeader, { "aria-label": "Actions", $size: size })
+      actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("th", { "aria-label": "Actions", className: cva.cn(headerVariants({
+        size
+      })) })
     ] }) })
   ] });
 };
-const TableRow = styledComponents.styled.tr.withConfig({
-  componentId: "sc-1q458rb-4"
-})(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}[data-mobile-layout='list'] &{@media (max-width:", "){position:relative;display:flex;flex-wrap:wrap;", "}}"], ({
-  theme,
-  $isDeleted,
-  $isDisabled,
-  $isActive,
-  $rowHeight
-}) => `
-    ${$rowHeight ? `height: ${$rowHeight};` : ""}
-    background-color: ${theme.click.table.row.color.background.default};
-    border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
-
-    ${$isActive && `background-color: ${theme.click.table.row.color.background.active};`}
-
-    &:active {
-      background-color: ${theme.click.table.row.color.background.active};
+const rowVariants = classVarianceAuthority.cva(Table_module.default.table__row, {
+  variants: {
+    isSelectable: {
+      true: Table_module.default.table__row_selectable,
+      false: ""
+    },
+    isActive: {
+      true: Table_module.default.table__row_active,
+      false: ""
+    },
+    isDisabled: {
+      true: Table_module.default.table__row_disabled,
+      false: ""
+    },
+    showActions: {
+      true: Table_module.default["table__row_show-actions"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    isSelectable: false,
+    isActive: false,
+    isDisabled: false,
+    showActions: false
+  }
+});
+const cellVariants = classVarianceAuthority.cva(Table_module.default.table__data, {
+  variants: {
+    size: {
+      sm: Table_module.default.table__data_size_sm,
+      md: Table_module.default.table__data_size_md
     }
-    &:hover {
-      background-color: ${theme.click.table.row.color.background.hover};
+  }
+});
+const selectDataVariants = classVarianceAuthority.cva(Table_module.default["table__select-data"], {
+  variants: {
+    size: {
+      sm: Table_module.default["table__select-data_size_sm"],
+      md: Table_module.default["table__select-data_size_md"]
     }
-    opacity: ${$isDeleted || $isDisabled ? 0.5 : 1};
-    cursor: ${$isDeleted || $isDisabled ? "not-allowed" : "default"}
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  theme,
-  $isSelectable = false,
-  $showActions = false
-}) => `
-        border: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
-        border-radius: ${theme.click.table.radii.all};
-        ${$isSelectable ? `padding-left: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.checkbox.size.all});` : ""}
-        ${$showActions ? `padding-right: calc(${theme.click.table.body.cell.space.sm.x} + ${theme.click.table.body.cell.space.sm.x} + ${theme.click.image.sm.size.width} + ${theme.click.button.iconButton.default.space.x} + ${theme.click.button.iconButton.default.space.x});` : ""}
-      `);
-const TableData = styledComponents.styled.td.withConfig({
-  componentId: "sc-1q458rb-5"
-})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;min-width:40%;", "}}"], ({
-  theme,
-  $size
-}) => `
-    color: ${theme.click.table.row.color.text.default};
-    font: ${theme.click.table.cell.text.default};
-    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  theme
-}) => `
-        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-      `);
-const StyledColGroup = styledComponents.styled.colgroup.withConfig({
-  componentId: "sc-1q458rb-6"
-})(["[data-mobile-layout='list'] &{@media (max-width:", "){display:none;}}"], ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const StyledThead = styledComponents.styled.thead.withConfig({
-  componentId: "sc-1q458rb-7"
-})(["tr{overflow:hidden;background-color:", ";", "}[data-mobile-layout='list'] &{@media (max-width:", "){display:none;}}"], ({
-  theme
-}) => theme.click.table.header.color.background.default, ({
-  theme
-}) => ` border-bottom: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const MobileHeader = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-8"
-})(["display:none;", " [data-mobile-layout='list'] &{@media (max-width:", "){display:block;}}"], ({
-  theme
-}) => `
-    color: ${theme.click.table.row.color.label.default};
-    font:  ${theme.click.table.cell.label.default};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const Tbody = styledComponents.styled.tbody.withConfig({
-  componentId: "sc-1q458rb-9"
-})(["[data-mobile-layout='list'] &{@media (max-width:", "){display:flex;flex-direction:column;gap:0.25rem;}}"], ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const SelectData = styledComponents.styled.td.withConfig({
-  componentId: "sc-1q458rb-10"
-})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;align-self:stretch;position:absolute;left:0;top:0;bottom:0;", "}}"], ({
-  theme,
-  $size
-}) => `
-    color: ${theme.click.table.row.color.text.default};
-    font: ${theme.click.table.cell.text.default};
-    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  theme
-}) => `
-        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-        border-right: ${theme.click.table.cell.stroke} solid ${theme.click.table.row.color.stroke.default};
-      `);
-const ActionsList = styledComponents.styled.td.withConfig({
-  componentId: "sc-1q458rb-11"
-})(["overflow:hidden;", " [data-mobile-layout='list'] &{@media (max-width:", "){width:auto;align-self:stretch;position:absolute;right:0;top:0;bottom:0;", "}}"], ({
-  theme,
-  $size
-}) => `
-    color: ${theme.click.table.row.color.text.default};
-    font: ${theme.click.table.cell.text.default};
-    padding: ${theme.click.table.body.cell.space[$size].y} ${theme.click.table.body.cell.space[$size].x};
-  `, ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  theme
-}) => `
-        padding: ${theme.click.table.body.cell.space.sm.y} ${theme.click.table.body.cell.space.sm.x};
-        border-left: 1px solid ${theme.click.table.row.color.stroke.default};
-      `);
-const ActionsContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-12"
-})(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;[data-mobile-layout='list'] &{@media (max-width:", "){flex-direction:column;overflow:auto;flex-wrap:nowrap;}}"], ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const TableWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-13"
-})(["width:100%;height:100%;overflow-x:auto;", ""], ({
-  theme
-}) => `
-  border: ${theme.click.table.cell.stroke} solid ${theme.click.table.global.color.stroke.default};
-  border-radius: ${theme.click.table.radii.all}
-  `);
-const TableOuterContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-14"
-})(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
-const MobileActions = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-15"
-})(["display:none;[data-mobile-layout='list'] &{@media (max-width:", "){display:flex;justify-content:space-between;align-items:center;padding:0 ", ";}}"], ({
-  theme
-}) => theme.breakpoint.sizes.md, ({
-  theme
-}) => theme.click.table.body.cell.space.sm.x);
-const EditButton = styledComponents.styled.button.withConfig({
-  componentId: "sc-1q458rb-16"
-})(["&:disabled{background:transparent;}"]);
-const TableRowCloseButton = styledComponents.styled.button.withConfig({
-  componentId: "sc-1q458rb-17"
-})(["svg{transition:transform 200ms;", "}&:disabled{background:transparent;}"], ({
-  $isDeleted
-}) => `
-    ${$isDeleted ? "transform: rotate(45deg)" : ""};
-    `);
+  }
+});
+const actionsCellVariants = classVarianceAuthority.cva(Table_module.default["table__actions-cell"], {
+  variants: {
+    size: {
+      sm: Table_module.default["table__actions-cell_size_sm"],
+      md: Table_module.default["table__actions-cell_size_md"]
+    }
+  }
+});
 const TableBodyRow = ({
   headers,
   items,
@@ -300,32 +209,46 @@ const TableBodyRow = ({
   size,
   actionsList,
   rowHeight,
+  className,
+  style,
   ...rowProps
 }) => {
   const isDeletable = typeof onDelete === "function";
   const isEditable = typeof onEdit === "function";
-  return /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { $isSelectable: isSelectable, $isDeleted: isDeleted, $isDisabled: isDisabled, $isActive: isActive, $showActions: isDeletable || isEditable, $rowHeight: rowHeight, ...rowProps, children: [
-    isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectData, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isIndeterminate ? "indeterminate" : isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
+  const rowStyle = react.useMemo(() => ({
+    ...rowHeight ? {
+      "--table-row-height": rowHeight
+    } : {},
+    ...style
+  }), [rowHeight, style]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("tr", { style: rowStyle, ...rowProps, className: cva.cn(rowVariants({
+    isSelectable,
+    isActive,
+    isDisabled: isDeleted || isDisabled,
+    showActions: isDeletable || isEditable
+  }), className), children: [
+    isSelectable && /* @__PURE__ */ jsxRuntime.jsx("td", { className: cva.cn(selectDataVariants({
+      size
+    })), children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isIndeterminate ? "indeterminate" : isSelected, onCheckedChange: onSelect, disabled: isDisabled || isDeleted }) }),
     items.map(({
       label,
       overflowMode,
+      className: cellClassName,
       ...cellProps
-    }, cellIndex) => /* @__PURE__ */ jsxRuntime.jsxs(TableData, { $size: size, ...cellProps, children: [
-      headers[cellIndex] && /* @__PURE__ */ jsxRuntime.jsx(MobileHeader, { children: headers[cellIndex].label }),
+    }, cellIndex) => /* @__PURE__ */ jsxRuntime.jsxs("td", { ...cellProps, className: cva.cn(cellVariants({
+      size
+    }), cellClassName), children: [
+      headers[cellIndex] && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(Table_module.default["table__mobile-header"]), children: headers[cellIndex].label }),
       /* @__PURE__ */ jsxRuntime.jsx(Cell, { label, overflowMode: overflowMode ?? headers[cellIndex]?.overflowMode })
     ] }, `table-cell-${cellIndex}`)),
-    actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ActionsList, { $size: size, children: /* @__PURE__ */ jsxRuntime.jsxs(ActionsContainer, { children: [
-      actionsList.includes("editAction") && /* @__PURE__ */ jsxRuntime.jsx(EditButton, { as: IconButton.IconButton, type: "ghost", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit" }),
-      actionsList.includes("deleteAction") && /* @__PURE__ */ jsxRuntime.jsx(TableRowCloseButton, { as: IconButton.IconButton, disabled: isDisabled || !isDeletable, $isDeleted: isDeleted, type: "ghost", icon: "cross", onClick: onDelete, "data-testid": "table-row-delete" })
+    actionsList.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("td", { className: cva.cn(actionsCellVariants({
+      size
+    })), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(Table_module.default.table__actions), children: [
+      actionsList.includes("editAction") && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { type: "ghost", htmlType: "button", disabled: isDisabled || isDeleted || !isEditable, icon: "pencil", onClick: onEdit, "data-testid": "table-row-edit", className: cva.cn(Table_module.default["table__edit-button"]) }),
+      actionsList.includes("deleteAction") && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { disabled: isDisabled || !isDeletable, type: "ghost", htmlType: "button", icon: "cross", onClick: onDelete, "data-testid": "table-row-delete", className: cva.cn(Table_module.default["table__close-button"], isDeleted && Table_module.default["table__close-button_deleted"]) })
     ] }) })
   ] });
 };
-const SpanedTableData = styledComponents.styled(TableData).withConfig({
-  componentId: "sc-1q458rb-18"
-})(["text-align:center;"]);
-const CustomTableDataMessage = styledComponents.styled.div.withConfig({
-  componentId: "sc-1q458rb-19"
-})(["display:flex;gap:0.5rem;justify-content:center;"]);
 const LoadingData = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "loading-animated", size: "sm" }),
@@ -338,7 +261,9 @@ const CustomTableRow = ({
   colSpan,
   size
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(SpanedTableData, { $size: size, colSpan, children: /* @__PURE__ */ jsxRuntime.jsx(CustomTableDataMessage, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingData, {}) : noDataMessage ?? "No Data available" }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("tr", { className: cva.cn(rowVariants({})), children: /* @__PURE__ */ jsxRuntime.jsx("td", { colSpan, className: cva.cn(cellVariants({
+    size
+  }), Table_module.default["table__spanned-data"]), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(Table_module.default["table__custom-message"]), children: loading ? /* @__PURE__ */ jsxRuntime.jsx(LoadingData, {}) : noDataMessage ?? "No Data available" }) }) });
 };
 const MIN_COLUMN_WIDTH = 120;
 const Table = react.forwardRef(({
@@ -357,6 +282,7 @@ const Table = react.forwardRef(({
   rowHeight,
   resizableColumns,
   mobileLayout = "list",
+  className,
   ...props
 }, ref) => {
   const isDeletable = typeof onDelete === "function";
@@ -529,11 +455,11 @@ const Table = react.forwardRef(({
       return updated;
     });
   }, [columnWidths, headers]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(TableOuterContainer, { "data-mobile-layout": mobileLayout, children: [
-    hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx(MobileActions, { children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableWrapper, { children: /* @__PURE__ */ jsxRuntime.jsxs(StyledTable, { ref, ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-mobile-layout": mobileLayout, className: cva.cn(Table_module.default.table), children: [
+    hasRows && showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(Table_module.default["table__mobile-actions"]), children: isSelectable && /* @__PURE__ */ jsxRuntime.jsx(SelectAllCheckbox, { label: "Select All", onCheckedChange: onSelect, rows, selectedIds }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cva.cn(Table_module.default.table__wrapper), children: /* @__PURE__ */ jsxRuntime.jsxs("table", { ref, ...props, className: cva.cn(Table_module.default["table__table"], className), children: [
       showHeader && /* @__PURE__ */ jsxRuntime.jsx(Thead, { headers, isSelectable, onSelectAll: onSelect, actionsList, onSort, size, rows, selectedIds, resizableColumns, columnWidths: resizableColumns ? columnWidths : void 0, onResizeStart: resizableColumns ? handleResizeStart : void 0, theadRef, onKeyboardResize: resizableColumns ? onKeyboardResize : void 0 }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Tbody, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("tbody", { className: cva.cn(Table_module.default.table__tbody), children: [
         (loading || !hasRows) && /* @__PURE__ */ jsxRuntime.jsx(CustomTableRow, { colSpan: headers.length + (isEditable || isDeletable ? 1 : 0) + (isSelectable ? 1 : 0), loading, noDataMessage, size }),
         rows.map(({
           id,
@@ -600,9 +526,6 @@ const SelectAllCheckbox = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked, disabled, onCheckedChange: handleCheckedChange, ...checkboxProps });
 };
-const TextWrapped = styledComponents.styled.span.withConfig({
-  componentId: "sc-1q458rb-20"
-})(["overflow-wrap:break-word;word-break:break-all;display:inline-block;max-width:100%;"]);
 const Cell = ({
   label,
   overflowMode = "truncated"
@@ -615,15 +538,10 @@ const Cell = ({
     return /* @__PURE__ */ jsxRuntime.jsx(MiddleTruncator.MiddleTruncator, { text: label });
   }
   if (overflowMode === "wrap") {
-    return /* @__PURE__ */ jsxRuntime.jsx(TextWrapped, { children: label });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Table_module.default["table__text-wrapped"]), children: label });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(EllipsisContent.EllipsisContent, { component: "div", children: label });
 };
-const StyledTable = styledComponents.styled.table.withConfig({
-  componentId: "sc-1q458rb-21"
-})(["width:100%;border-collapse:collapse;overflow:visible;table-layout:fixed;[data-mobile-layout='list'] &{@media (max-width:", "){border:none;table-layout:auto;}}"], ({
-  theme
-}) => theme.breakpoint.sizes.md);
 
 exports.Table = Table;
 //# sourceMappingURL=index.cjs.map