@dust-tt/sparkle 0.2.207 → 0.2.210-rc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.207",
+  "version": "0.2.210-rc",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/_index.ts

@@ -252,11 +252,15 @@ import {
   ArrowDown as ArrowDownIcon,
   ArrowDownCircle as ArrowDownCircleIcon,
   ArrowDownOnSquare as ArrowDownOnSquareIcon,
+  ArrowDownS as ArrowDownSIcon,
   ArrowLeft as ArrowLeftIcon,
+ArrowLeftS as ArrowLeftSIcon,
   ArrowPath as ArrowPathIcon,
   ArrowRight as ArrowRightIcon,
+ArrowRightS as ArrowRightSIcon,
   ArrowUp as ArrowUpIcon,
   ArrowUpOnSquare as ArrowUpOnSquareIcon,
+ArrowUpS as ArrowUpSIcon,
   Attachment as AttachmentIcon,
   Backspace as BackspaceIcon,
   Bookmark as BookmarkIcon,
@@ -269,6 +273,8 @@ import {
   ChatBubbleThought as ChatBubbleThoughtIcon,
   Check as CheckIcon,
   CheckCircle as CheckCircleIcon,
+ChevronDoubleLeft as ChevronDoubleLeftIcon,
+ChevronDoubleRight as ChevronDoubleRightIcon,
   ChevronDown as ChevronDownIcon,
   ChevronLeft as ChevronLeftIcon,
   ChevronRight as ChevronRightIcon,
@@ -285,6 +291,7 @@ import {
   Cog6Tooth as Cog6ToothIcon,
   Command as CommandIcon,
   CommandLine as CommandLineIcon,
+Company as CompanyIcon,
   Cube as CubeIcon,
   Dash as DashIcon,
   Document as DocumentIcon,
@@ -299,6 +306,7 @@ import {
   ExternalLink as ExternalLinkIcon,
   Eye as EyeIcon,
   EyeSlash as EyeSlashIcon,
+Filter as FilterIcon,
   Fire as FireIcon,
   Flag as FlagIcon,
   Folder as FolderIcon,
@@ -309,8 +317,11 @@ import {
   Grab as GrabIcon,
   HandThumbDown as HandThumbDownIcon,
   HandThumbUp as HandThumbUpIcon,
+Heart as HeartIcon,
   HeartAlt as HeartAltIcon,
   Hexagon as HexagonIcon,
+History as HistoryIcon,
+Home as HomeIcon,
   Image as ImageIcon,
   InformationCircle as InformationCircleIcon,
   Key as KeyIcon,
@@ -325,6 +336,7 @@ import {
   Logout as LogoutIcon,
   Magic as MagicIcon,
   MagnifyingGlass as MagnifyingGlassIcon,
+MarkPen as MarkPenIcon,
   Menu as MenuIcon,
   More as MoreIcon,
   MovingMail as MovingMailIcon,
@@ -357,6 +369,7 @@ import {
   Template as TemplateIcon,
   TestTube as TestTubeIcon,
   Time as TimeIcon,
+Translate as TranslateIcon,
   Trash as TrashIcon,
   Triangle as TriangleIcon,
   User as UserIcon,
@@ -372,11 +385,15 @@ export {
   ArrowDownCircleIcon,
   ArrowDownIcon,
   ArrowDownOnSquareIcon,
+  ArrowDownSIcon,
   ArrowLeftIcon,
+ArrowLeftSIcon,
   ArrowPathIcon,
   ArrowRightIcon,
+ArrowRightSIcon,
   ArrowUpIcon,
   ArrowUpOnSquareIcon,
+ArrowUpSIcon,
   AttachmentIcon,
   BackspaceIcon,
   BookmarkIcon,
@@ -389,6 +406,8 @@ export {
   ChatBubbleThoughtIcon,
   CheckCircleIcon,
   CheckIcon,
+ChevronDoubleLeftIcon,
+ChevronDoubleRightIcon,
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -405,6 +424,7 @@ export {
   Cog6ToothIcon,
   CommandIcon,
   CommandLineIcon,
+CompanyIcon,
   CubeIcon,
   DashIcon,
   DocumentDuplicateIcon,
@@ -419,6 +439,7 @@ export {
   ExternalLinkIcon,
   EyeIcon,
   EyeSlashIcon,
+FilterIcon,
   FireIcon,
   FlagIcon,
   FolderIcon,
@@ -430,7 +451,10 @@ export {
   HandThumbDownIcon,
   HandThumbUpIcon,
   HeartAltIcon,
+HeartIcon,
   HexagonIcon,
+HistoryIcon,
+HomeIcon,
   ImageIcon,
   InformationCircleIcon,
   KeyIcon,
@@ -445,6 +469,7 @@ export {
   LogoutIcon,
   MagicIcon,
   MagnifyingGlassIcon,
+MarkPenIcon,
   MenuIcon,
   MoreIcon,
   MovingMailIcon,
@@ -477,6 +502,7 @@ export {
   TemplateIcon,
   TestTubeIcon,
   TimeIcon,
+TranslateIcon,
   TrashIcon,
   TriangleIcon,
   UserArrowIcon,
@@ -492,11 +518,15 @@ import {
   ArrowDown as ArrowDownStrokeIcon,
   ArrowDownCircle as ArrowDownCircleStrokeIcon,
   ArrowDownOnSquare as ArrowDownOnSquareStrokeIcon,
+  ArrowDownS as ArrowDownSStrokeIcon,
   ArrowLeft as ArrowLeftStrokeIcon,
+ArrowLeftS as ArrowLeftSStrokeIcon,
   ArrowPath as ArrowPathStrokeIcon,
   ArrowRight as ArrowRightStrokeIcon,
+ArrowRightS as ArrowRightSStrokeIcon,
   ArrowUp as ArrowUpStrokeIcon,
   ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon,
+ArrowUpS as ArrowUpSStrokeIcon,
   Attachment as AttachmentStrokeIcon,
   Backspace as BackspaceStrokeIcon,
   Bookmark as BookmarkStrokeIcon,
@@ -509,6 +539,8 @@ import {
   ChatBubbleThought as ChatBubbleThoughtStrokeIcon,
   Check as CheckStrokeIcon,
   CheckCircle as CheckCircleStrokeIcon,
+ChevronDoubleLeft as ChevronDoubleLeftStrokeIcon,
+ChevronDoubleRight as ChevronDoubleRightStrokeIcon,
   ChevronDown as ChevronDownStrokeIcon,
   ChevronLeft as ChevronLeftStrokeIcon,
   ChevronRight as ChevronRightStrokeIcon,
@@ -525,6 +557,7 @@ import {
   Cog6Tooth as Cog6ToothStrokeIcon,
   Command as CommandStrokeIcon,
   CommandLine as CommandLineStrokeIcon,
+Company as CompanyStrokeIcon,
   Cube as CubeStrokeIcon,
   Dash as DashStrokeIcon,
   Document as DocumentStrokeIcon,
@@ -539,6 +572,7 @@ import {
   ExternalLink as ExternalLinkStrokeIcon,
   Eye as EyeStrokeIcon,
   EyeSlash as EyeSlashStrokeIcon,
+Filter as FilterStrokeIcon,
   Fire as FireStrokeIcon,
   Flag as FlagStrokeIcon,
   Folder as FolderStrokeIcon,
@@ -549,8 +583,11 @@ import {
   Grab as GrabStrokeIcon,
   HandThumbDown as HandThumbDownStrokeIcon,
   HandThumbUp as HandThumbUpStrokeIcon,
+Heart as HeartStrokeIcon,
   HeartAlt as HeartAltStrokeIcon,
   Hexagon as HexagonStrokeIcon,
+History as HistoryStrokeIcon,
+Home as HomeStrokeIcon,
   Image as ImageStrokeIcon,
   InformationCircle as InformationCircleStrokeIcon,
   Key as KeyStrokeIcon,
@@ -565,6 +602,7 @@ import {
   Logout as LogoutStrokeIcon,
   Magic as MagicStrokeIcon,
   MagnifyingGlass as MagnifyingGlassStrokeIcon,
+MarkPen as MarkPenStrokeIcon,
   Menu as MenuStrokeIcon,
   More as MoreStrokeIcon,
   MovingMail as MovingMailStrokeIcon,
@@ -597,6 +635,7 @@ import {
   Template as TemplateStrokeIcon,
   TestTube as TestTubeStrokeIcon,
   Time as TimeStrokeIcon,
+Translate as TranslateStrokeIcon,
   Trash as TrashStrokeIcon,
   Triangle as TriangleStrokeIcon,
   User as UserStrokeIcon,
@@ -611,11 +650,15 @@ import {
 export {
   ArrowDownCircleStrokeIcon,
   ArrowDownOnSquareStrokeIcon,
+  ArrowDownSStrokeIcon,
   ArrowDownStrokeIcon,
+ArrowLeftSStrokeIcon,
   ArrowLeftStrokeIcon,
   ArrowPathStrokeIcon,
+ArrowRightSStrokeIcon,
   ArrowRightStrokeIcon,
   ArrowUpOnSquareStrokeIcon,
+ArrowUpSStrokeIcon,
   ArrowUpStrokeIcon,
   AttachmentStrokeIcon,
   BackspaceStrokeIcon,
@@ -629,6 +672,8 @@ export {
   ChatBubbleThoughtStrokeIcon,
   CheckCircleStrokeIcon,
   CheckStrokeIcon,
+ChevronDoubleLeftStrokeIcon,
+ChevronDoubleRightStrokeIcon,
   ChevronDownStrokeIcon,
   ChevronLeftStrokeIcon,
   ChevronRightStrokeIcon,
@@ -645,6 +690,7 @@ export {
   Cog6ToothStrokeIcon,
   CommandLineStrokeIcon,
   CommandStrokeIcon,
+CompanyStrokeIcon,
   CubeStrokeIcon,
   DashStrokeIcon,
   DocumentDuplicateStrokeIcon,
@@ -659,6 +705,7 @@ export {
   ExternalLinkStrokeIcon,
   EyeSlashStrokeIcon,
   EyeStrokeIcon,
+FilterStrokeIcon,
   FireStrokeIcon,
   FlagStrokeIcon,
   FolderOpenStrokeIcon,
@@ -670,7 +717,10 @@ export {
   HandThumbDownStrokeIcon,
   HandThumbUpStrokeIcon,
   HeartAltStrokeIcon,
+HeartStrokeIcon,
   HexagonStrokeIcon,
+HistoryStrokeIcon,
+HomeStrokeIcon,
   ImageStrokeIcon,
   InformationCircleStrokeIcon,
   KeyStrokeIcon,
@@ -685,6 +735,7 @@ export {
   LogoutStrokeIcon,
   MagicStrokeIcon,
   MagnifyingGlassStrokeIcon,
+MarkPenStrokeIcon,
   MenuStrokeIcon,
   MoreStrokeIcon,
   MovingMailStrokeIcon,
@@ -717,6 +768,7 @@ export {
   TemplateStrokeIcon,
   TestTubeStrokeIcon,
   TimeStrokeIcon,
+TranslateStrokeIcon,
   TrashStrokeIcon,
   TriangleStrokeIcon,
   UserArrowStrokeIcon,

package/src/components/Checkbox.tsx

@@ -7,23 +7,42 @@ import { Icon } from "./Icon";
 
 export interface CheckboxProps {
   variant?: "selectable" | "checkable";
-  checked: boolean;
+  size?: "xs" | "sm";
+  checked?: true | false | "partial";
   disabled?: boolean;
-  partialChecked?: boolean;
   onChange: (checked: boolean) => void;
   className?: string;
 }
 
 export function Checkbox({
   variant = "selectable",
-  checked,
+  checked = false,
+  size = "sm",
   onChange,
   className = "",
   disabled,
-  partialChecked,
 }: CheckboxProps) {
+  let isChecked: boolean;
+  let isPartialChecked: boolean;
+  switch (checked) {
+    case true:
+      isChecked = true;
+      isPartialChecked = false;
+      break;
+    case false:
+      isChecked = false;
+      isPartialChecked = false;
+      break;
+    case "partial":
+      isChecked = true;
+      isPartialChecked = true;
+      break;
+    default:
+      throw new Error("Invalid checked prop");
+  }
+
   const baseStyleClasses = {
-    base: "s-border s-justify-center s-w-5 s-h-5 s-rounded-md s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
+    base: "s-border s-justify-center s-flex s-items-center s-transition-colors s-duration-300 s-ease-out",
     idle: "s-bg-structure-50 s-border-element-600 s-cursor-pointer",
     hover:
       "hover:s-border-action-500 hover:s-bg-action-200 hover:s-text-white/100",
@@ -37,6 +56,11 @@ export function Checkbox({
     },
   };
 
+  const baseSizeClasses = {
+    xs: "s-w-4 s-h-4 s-rounded",
+    sm: "s-w-5 s-h-5 s-rounded-md",
+  };
+
   const checkedIndicatorClasses = {
     base: "s-transition s-duration-300 s-ease-in-out",
     selected: "s-opacity-100 s-bg-action-500 dark:s-bg-action-500-dark",
@@ -45,9 +69,15 @@ export function Checkbox({
     disabled: "s-opacity-100 s-bg-element-500 dark:s-bg-element-500-dark",
   };
 
+  const sizeStyles = {
+    xs: { width: "12px", height: "12px", borderRadius: "2px" },
+    sm: { width: "14px", height: "14px", borderRadius: "3px" },
+  };
+
   const combinedBaseClasses = classNames(
     baseStyleClasses.base,
-    checked || partialChecked ? "s-text-white" : "s-text-white/0",
+    baseSizeClasses[size],
+    isChecked || isPartialChecked ? "s-text-white" : "s-text-white/0",
     disabled ? baseStyleClasses.disabled : baseStyleClasses.idle,
     !disabled ? baseStyleClasses.hover : "",
     disabled ? baseStyleClasses.dark.disabled : baseStyleClasses.dark.base,
@@ -58,18 +88,18 @@ export function Checkbox({
   const combinedCheckedIndicatorClasses = classNames(
     checkedIndicatorClasses.base,
     disabled ? checkedIndicatorClasses.disabled : "",
-    checked && !partialChecked && !disabled
+    isChecked && !isPartialChecked && !disabled
       ? checkedIndicatorClasses.selected
       : "",
-    partialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
-    !checked && !disabled ? checkedIndicatorClasses.unselected : ""
+    isPartialChecked && !disabled ? checkedIndicatorClasses.partialChecked : "",
+    !isChecked && !disabled ? checkedIndicatorClasses.unselected : ""
   );
 
   return (
     <label>
       <input
         type="checkbox"
-        checked={checked}
+        checked={isChecked}
         onChange={(e) => onChange && onChange(e.target.checked)}
         className="s-hidden"
         disabled={disabled}
@@ -77,11 +107,11 @@ export function Checkbox({
       <div className={classNames(combinedBaseClasses, "s-relative")}>
         <div
           className={combinedCheckedIndicatorClasses}
-          style={{ width: "14px", height: "14px", borderRadius: "3px" }}
+          style={sizeStyles[size]}
         />
         {variant === "checkable" && (
           <div className="s-absolute">
-            <Icon visual={partialChecked ? Dash : Check} size="xs" />
+            <Icon visual={isPartialChecked ? Dash : Check} size="xs" />
           </div>
         )}
       </div>

package/src/components/DataTable.tsx

@@ -11,11 +11,12 @@ import {
 import React, { ReactNode, useEffect, useState } from "react";
 
 import { DropdownItemProps } from "@sparkle/components/DropdownMenu";
-import { Avatar, DropdownMenu, MoreIcon } from "@sparkle/index";
+import { Avatar, DropdownMenu, IconButton, MoreIcon } from "@sparkle/index";
 import { ArrowDownIcon, ArrowUpIcon } from "@sparkle/index";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
+import { breakpoints, useWindowSize } from "./WindowUtility";
 
 interface TBaseData {
   onClick?: () => void;
@@ -36,6 +37,16 @@ interface DataTableProps<TData extends TBaseData, TValue> {
   columnsBreakpoints?: ColumnBreakpoint;
 }
 
+function shouldRenderColumn(
+  windowWidth: number,
+  breakpoint?: keyof typeof breakpoints
+): boolean {
+  if (!breakpoint) {
+    return true;
+  }
+  return windowWidth >= breakpoints[breakpoint];
+}
+
 export function DataTable<TData extends TBaseData, TValue>({
   data,
   columns,
@@ -45,6 +56,7 @@ export function DataTable<TData extends TBaseData, TValue>({
   initialColumnOrder,
   columnsBreakpoints = {},
 }: DataTableProps<TData, TValue>) {
+  const windowSize = useWindowSize();
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []
   );
@@ -75,43 +87,49 @@ export function DataTable<TData extends TBaseData, TValue>({
       <DataTable.Header>
         {table.getHeaderGroups().map((headerGroup) => (
           <DataTable.Row key={headerGroup.id}>
-            {headerGroup.headers.map((header) => (
-              <DataTable.Head
-                key={header.id}
-                onClick={header.column.getToggleSortingHandler()}
-                className={classNames(
-                  header.column.getCanSort() ? "s-cursor-pointer" : "",
-                  columnsBreakpoints[header.id]
-                    ? `s-hidden ${columnsBreakpoints[header.id]}:s-block`
-                    : ""
-                )}
-              >
-                <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
-                  {flexRender(
-                    header.column.columnDef.header,
-                    header.getContext()
+            {headerGroup.headers.map((header) => {
+              const breakpoint = columnsBreakpoints[header.id];
+              if (
+                !windowSize.width ||
+                !shouldRenderColumn(windowSize.width, breakpoint)
+              ) {
+                return null;
+              }
+              return (
+                <DataTable.Head
+                  key={header.id}
+                  onClick={header.column.getToggleSortingHandler()}
+                  className={classNames(
+                    header.column.getCanSort() ? "s-cursor-pointer" : ""
                   )}
-                  {header.column.getCanSort() && (
-                    <Icon
-                      visual={
-                        header.column.getIsSorted() === "asc"
-                          ? ArrowUpIcon
-                          : header.column.getIsSorted() === "desc"
-                            ? ArrowDownIcon
-                            : ArrowDownIcon
-                      }
-                      size="xs"
-                      className={classNames(
-                        "s-ml-1",
-                        header.column.getIsSorted()
-                          ? "s-opacity-100"
-                          : "s-opacity-0"
-                      )}
-                    />
-                  )}
-                </div>
-              </DataTable.Head>
-            ))}
+                >
+                  <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getCanSort() && (
+                      <Icon
+                        visual={
+                          header.column.getIsSorted() === "asc"
+                            ? ArrowUpIcon
+                            : header.column.getIsSorted() === "desc"
+                              ? ArrowDownIcon
+                              : ArrowDownIcon
+                        }
+                        size="xs"
+                        className={classNames(
+                          "s-ml-1",
+                          header.column.getIsSorted()
+                            ? "s-opacity-100"
+                            : "s-opacity-0"
+                        )}
+                      />
+                    )}
+                  </div>
+                </DataTable.Head>
+              );
+            })}
           </DataTable.Row>
         ))}
       </DataTable.Header>
@@ -122,18 +140,20 @@ export function DataTable<TData extends TBaseData, TValue>({
             onClick={row.original.onClick}
             moreMenuItems={row.original.moreMenuItems}
           >
-            {row.getVisibleCells().map((cell) => (
-              <DataTable.Cell
-                key={cell.id}
-                className={classNames(
-                  columnsBreakpoints[cell.column.id]
-                    ? `s-hidden ${columnsBreakpoints[cell.column.id]}:s-block`
-                    : ""
-                )}
-              >
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </DataTable.Cell>
-            ))}
+            {row.getVisibleCells().map((cell) => {
+              const breakpoint = columnsBreakpoints[cell.column.id];
+              if (
+                !windowSize.width ||
+                !shouldRenderColumn(windowSize.width, breakpoint)
+              ) {
+                return null;
+              }
+              return (
+                <DataTable.Cell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </DataTable.Cell>
+              );
+            })}
           </DataTable.Row>
         ))}
       </DataTable.Body>
@@ -225,23 +245,23 @@ DataTable.Row = function Row({
   return (
     <tr
       className={classNames(
-        "s-border-b s-border-structure-200 s-text-sm",
-        onClick ? "s-cursor-pointer hover:s-bg-gray-50" : "",
+        "s-group s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out",
+        onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "",
         className || ""
       )}
       onClick={onClick ? onClick : undefined}
       {...props}
     >
       {children}
-      {moreMenuItems && (
-        <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
-          <DropdownMenu className="s-flex">
+      <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
+        {moreMenuItems && (
+          <DropdownMenu className="s-mr-1.5 s-flex">
             <DropdownMenu.Button
               onClick={(e) => {
                 e.stopPropagation();
               }}
             >
-              <Icon visual={MoreIcon} size="sm" />
+              <IconButton icon={MoreIcon} size="sm" variant="tertiary" />
             </DropdownMenu.Button>
             <DropdownMenu.Items origin="topRight" width={220}>
               {moreMenuItems?.map((item, index) => (
@@ -249,12 +269,31 @@ DataTable.Row = function Row({
               ))}
             </DropdownMenu.Items>
           </DropdownMenu>
-        </td>
-      )}
+        )}
+      </td>
     </tr>
   );
 };
-interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+
+interface CellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  children: ReactNode;
+}
+
+DataTable.Cell = function Cell({ children, className, ...props }: CellProps) {
+  return (
+    <td
+      className={classNames(
+        "s-h-12 s-whitespace-nowrap s-pl-1.5 s-text-element-800",
+        className || ""
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};
+
+interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
   iconClassName?: string;
@@ -263,7 +302,7 @@ interface CellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
   description?: string;
 }
 
-DataTable.Cell = function Cell({
+DataTable.CellContent = function CellContent({
   children,
   className,
   avatarUrl,
@@ -272,44 +311,39 @@ DataTable.Cell = function Cell({
   iconClassName,
   description,
   ...props
-}: CellProps) {
+}: CellContentProps) {
   return (
-    <td
-      className={classNames(
-        "s-whitespace-nowrap s-py-2 s-pl-0.5 s-text-element-800",
-        className || ""
-      )}
+    <div
+      className={classNames("s-flex s-items-center s-py-2", className || "")}
       {...props}
     >
+      {avatarUrl && (
+        <Avatar
+          visual={avatarUrl}
+          size="xs"
+          className="s-mr-2"
+          isRounded={roundedAvatar ?? false}
+        />
+      )}
+      {icon && (
+        <Icon
+          visual={icon}
+          size="sm"
+          className={classNames(
+            "s-mr-2 s-text-element-600",
+            iconClassName || ""
+          )}
+        />
+      )}
       <div className="s-flex">
-        {avatarUrl && (
-          <Avatar
-            visual={avatarUrl}
-            size="xs"
-            className="s-mr-2"
-            isRounded={roundedAvatar ?? false}
-          />
+        <span className="s-text-sm s-text-element-800">{children}</span>
+        {description && (
+          <span className="s-pl-2 s-text-sm s-text-element-600">
+            {description}
+          </span>
         )}
-        {icon && (
-          <Icon
-            visual={icon}
-            size="sm"
-            className={classNames(
-              "s-mr-2 s-text-element-600",
-              iconClassName || ""
-            )}
-          />
-        )}
-        <div className="s-flex">
-          <span className="s-text-sm s-text-element-800">{children}</span>
-          {description && (
-            <span className="s-pl-2 s-text-sm s-text-element-600">
-              {description}
-            </span>
-          )}
-        </div>
       </div>
-    </td>
+    </div>
   );
 };