@ixo/ui 0.1.4 → 0.1.6

package/dist/{components-C2SQgRSz.cjs → components-YkshqT-o.cjs}

@@ -24,7 +24,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const radash = require("radash");
 const react = require("@emotion/react");
-const UsersSolid = require("./UsersSolid-C29C53eo.cjs");
+const UsersSolid = require("./UsersSolid-C5FpNZ_K.cjs");
 const react$1 = require("react");
 const constants = require("./constants-DFJRYpE2.cjs");
 const core = require("@mantine/core");
@@ -530,7 +530,7 @@ function isValidClick(e, target) {
   }
   return true;
 }
-function Tr({ children, selected, onClick }) {
+function Tr({ children, selected, noBg, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleClick = (e) => {
     if (!onClick) {
@@ -553,11 +553,26 @@ function Tr({ children, selected, onClick }) {
             borderStyle: "solid",
             borderWidth: 1,
             borderColor: "transparent",
-            backgroundColor: selected ? "var(--mantine-color-neutralColor-5)" : "var(--mantine-color-neutralColor-3)",
-            color: "var(--mantine-color-neutralColor-8)"
+            backgroundColor: selected ? "var(--mantine-color-neutralColor-5)" : noBg ? "transparent" : "var(--mantine-color-neutralColor-3)",
+            borderBottom: selected || !noBg ? "1px solid transparent" : "1px solid var(--mantine-color-neutralColor-6)",
+            color: "var(--mantine-color-neutralColor-8)",
+            ...noBg && {
+              borderRadius: 0,
+              "&:first-of-type": {
+                borderTopLeftRadius: 0,
+                borderBottomLeftRadius: 0
+              },
+              "&:last-child": {
+                borderTopRightRadius: 0,
+                borderBottomRightRadius: 0
+              }
+            }
           },
           "&:hover > td": {
-            backgroundColor: onClick ? "var(--mantine-color-neutralColor-1)" : void 0
+            backgroundColor: onClick ? "var(--mantine-color-neutralColor-4)" : void 0
+          },
+          "&:last-child > td": {
+            borderBottom: "1px solid transparent"
           }
         };
       },
@@ -565,7 +580,7 @@ function Tr({ children, selected, onClick }) {
     }
   );
 }
-function Table({ children }) {
+function Table({ children, noSpacing = false }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -579,7 +594,7 @@ function Table({ children }) {
           css: (theme) => ({
             width: "100%",
             borderCollapse: "separate",
-            borderSpacing: `0 ${theme.spacing * 2}px`,
+            borderSpacing: noSpacing ? `0 ${theme.spacing * 2}px` : "0px",
             background: "neutral.1"
           }),
           children
@@ -593,6 +608,63 @@ Table.Th = Th;
 Table.TBody = TBody;
 Table.Tr = Tr;
 Table.Td = Td;
+const Flex = react$1.forwardRef(
+  ({
+    direction = "row",
+    align = "stretch",
+    justify = "flex-start",
+    gap = 0,
+    m = 0,
+    mt = 0,
+    mb = 0,
+    ml = 0,
+    mr = 0,
+    mx = 0,
+    my = 0,
+    p = 0,
+    pt = 0,
+    pb = 0,
+    pl = 0,
+    pr = 0,
+    px = 0,
+    py = 0,
+    bg,
+    radius = 0,
+    children,
+    ...props
+  }, ref) => {
+    const hasIndividualPadding = pt !== 0 || pb !== 0 || pl !== 0 || pr !== 0 || px !== 0 || py !== 0;
+    const hasIndividualMargin = mt !== 0 || mb !== 0 || ml !== 0 || mr !== 0 || mx !== 0 || my !== 0;
+    const style = {
+      display: "flex",
+      flexDirection: direction,
+      alignItems: align,
+      justifyContent: justify,
+      gap,
+      backgroundColor: bg,
+      borderRadius: radius,
+      ...props.style
+    };
+    if (hasIndividualMargin) {
+      if (mt !== 0 || my !== 0) style.marginTop = mt || my;
+      if (mb !== 0 || my !== 0) style.marginBottom = mb || my;
+      if (ml !== 0 || mx !== 0) style.marginLeft = ml || mx;
+      if (mr !== 0 || mx !== 0) style.marginRight = mr || mx;
+    } else if (m !== 0) {
+      style.margin = m;
+    }
+    if (hasIndividualPadding) {
+      if (pt !== 0 || py !== 0) style.paddingTop = pt || py;
+      if (pb !== 0 || py !== 0) style.paddingBottom = pb || py;
+      if (pl !== 0 || px !== 0) style.paddingLeft = pl || px;
+      if (pr !== 0 || px !== 0) style.paddingRight = pr || px;
+    } else if (p !== 0) {
+      style.padding = p;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, style, children });
+  }
+);
+Flex.displayName = "Flex";
 const TRANSITION_DURATION = 250;
 function AccordionTable({
   items,
@@ -649,16 +721,12 @@ function AccordionTable({
         core.Accordion.Item,
         {
           value: item.id.toString(),
-          css: ({ spacing, colors, bg }) => ({
-            backgroundColor: bg.card,
-            padding: spacing * 2,
+          css: ({ spacing }) => ({
+            backgroundColor: UsersSolid.getTransparentColor("neutralColor-5", 70),
             borderRadius: spacing * 2,
             borderWidth: 1,
             borderStyle: "solid",
             borderColor: "transparent",
-            "&.expanded, &.bordered": {
-              borderColor: colors.focus
-            },
             "& .subtitle": {
               opacity: 0,
               height: 0,
@@ -688,10 +756,10 @@ function AccordionTable({
                 children: /* @__PURE__ */ jsxRuntime.jsxs(
                   core.Box,
                   {
-                    css: ({ spacing, radius, bg }) => ({
+                    css: ({ spacing, radius }) => ({
                       height: 54,
                       padding: spacing,
-                      backgroundColor: bg.cell,
+                      backgroundColor: "transparent",
                       borderRadius: radius.small,
                       width: "100%",
                       display: "flex",
@@ -731,13 +799,13 @@ function AccordionTable({
                           }
                         ),
                         /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { vertical: true, distance: 0, alignItems: "start", children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { children: item.title }),
-                          item.subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "secondary", size: "xs", className: "subtitle", children: item.subtitle })
+                          /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: item.title }),
+                          item.subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", className: "subtitle", children: item.subtitle })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsxs(Spacer, { vertical: true, alignItems: "end", children: [
-                        item.rightTitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { className: "textValue", children: item.rightTitle }),
-                        item.rightSubtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { className: "textValue subtitle", color: "secondary", size: "xs", children: item.rightSubtitle })
+                        item.rightTitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: "textValue", children: item.rightTitle }),
+                        item.rightSubtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { className: "textValue subtitle", size: "xs", children: item.rightSubtitle })
                       ] })
                     ]
                   }
@@ -745,26 +813,15 @@ function AccordionTable({
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsxs(core.Accordion.Panel, { children: [
-              item.subitems.data.length < 1 ? /* @__PURE__ */ jsxRuntime.jsx(core.Box, { css: ({ spacing }) => ({ padding: spacing * 2 }), children: /* @__PURE__ */ jsxRuntime.jsx(Typography.Paragraph, { align: "center", children: "No data" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+              item.subitems.data.length < 1 ? /* @__PURE__ */ jsxRuntime.jsx(core.Box, { css: ({ spacing }) => ({ padding: spacing * 2 }), children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ta: "center", children: "No data" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(Table, { noSpacing: true, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(Table.THead, { children: /* @__PURE__ */ jsxRuntime.jsxs(Table.Tr, { children: [
                   item.subitems.columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(Table.Th, { align: index === 0 ? "left" : "right", expand: column.expand, shrink: column.shrink, children: column.title }, column.title)),
-                  showSelectColumn && /* @__PURE__ */ jsxRuntime.jsx(Table.Th, { align: "right", shrink: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "div",
-                    {
-                      css: {
-                        display: "flex",
-                        justifyContent: "start",
-                        alignItems: "center",
-                        gap: 8
-                      },
-                      children: [
-                        selectedAll && selectAll ? "Deselect" : "Select",
-                        selectAll && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: selectedAll, onChange: (checked) => selectAll(checked) })
-                      ]
-                    }
-                  ) })
+                  showSelectColumn && /* @__PURE__ */ jsxRuntime.jsx(Table.Th, { align: "right", shrink: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: 8, children: [
+                    selectedAll && selectAll ? "Deselect" : "Select",
+                    selectAll && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: selectedAll, onChange: (checked) => selectAll(checked) })
+                  ] }) })
                 ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(Table.TBody, { children: item.subitems.data.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(Table.Tr, { selected: selectedItems?.includes(row.id), onClick: onSelectItems ? () => handleSelectItems(row.id) : void 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Table.TBody, { children: item.subitems.data.map((row) => /* @__PURE__ */ jsxRuntime.jsxs(Table.Tr, { noBg: true, selected: selectedItems?.includes(row.id), onClick: onSelectItems ? () => handleSelectItems(row.id) : void 0, children: [
                   item.subitems.columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(
                     Table.Td,
                     {
@@ -776,17 +833,7 @@ function AccordionTable({
                     },
                     column.title
                   )),
-                  showSelectColumn && /* @__PURE__ */ jsxRuntime.jsx(Table.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      css: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: selectedItems?.includes(row.id), onChange: () => handleSelectItems(row.id) })
-                    }
-                  ) })
+                  showSelectColumn && /* @__PURE__ */ jsxRuntime.jsx(Table.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: selectedItems?.includes(row.id), onChange: () => handleSelectItems(row.id) }) }) })
                 ] }, row.id)) })
               ] }),
               item.footer
@@ -798,8 +845,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-DlkMWtvk.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-Dk7hov8r.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BrbjrA78.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-C6pNvdxk.cjs")));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -883,7 +930,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-C0M9EAJA.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CHOB1QkU.cjs")));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = react$1.useRef(null);
   const handleOnClick = react$1.useCallback(
@@ -1318,7 +1365,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Cj0ojt2H.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Bgc3QI4b.cjs")));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = react$1.useRef(null);
   const wrapperContentAreaRef = react$1.useRef(null);
@@ -1897,63 +1944,6 @@ function HtmlRender({ content, className }) {
   const safeHTML = DOMPurify.sanitize(content, { FORBID_ATTR: ["style"] });
   return /* @__PURE__ */ jsxRuntime.jsx(StyleDOMApplier, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, dangerouslySetInnerHTML: { __html: safeHTML } }) });
 }
-const Flex = react$1.forwardRef(
-  ({
-    direction = "row",
-    align = "stretch",
-    justify = "flex-start",
-    gap = 0,
-    m = 0,
-    mt = 0,
-    mb = 0,
-    ml = 0,
-    mr = 0,
-    mx = 0,
-    my = 0,
-    p = 0,
-    pt = 0,
-    pb = 0,
-    pl = 0,
-    pr = 0,
-    px = 0,
-    py = 0,
-    bg,
-    radius = 0,
-    children,
-    ...props
-  }, ref) => {
-    const hasIndividualPadding = pt !== 0 || pb !== 0 || pl !== 0 || pr !== 0 || px !== 0 || py !== 0;
-    const hasIndividualMargin = mt !== 0 || mb !== 0 || ml !== 0 || mr !== 0 || mx !== 0 || my !== 0;
-    const style = {
-      display: "flex",
-      flexDirection: direction,
-      alignItems: align,
-      justifyContent: justify,
-      gap,
-      backgroundColor: bg,
-      borderRadius: radius,
-      ...props.style
-    };
-    if (hasIndividualMargin) {
-      if (mt !== 0 || my !== 0) style.marginTop = mt || my;
-      if (mb !== 0 || my !== 0) style.marginBottom = mb || my;
-      if (ml !== 0 || mx !== 0) style.marginLeft = ml || mx;
-      if (mr !== 0 || mx !== 0) style.marginRight = mr || mx;
-    } else if (m !== 0) {
-      style.margin = m;
-    }
-    if (hasIndividualPadding) {
-      if (pt !== 0 || py !== 0) style.paddingTop = pt || py;
-      if (pb !== 0 || py !== 0) style.paddingBottom = pb || py;
-      if (pl !== 0 || px !== 0) style.paddingLeft = pl || px;
-      if (pr !== 0 || px !== 0) style.paddingRight = pr || px;
-    } else if (p !== 0) {
-      style.padding = p;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, style, children });
-  }
-);
-Flex.displayName = "Flex";
 function Item({ icon, label, disabled, active, onClick }) {
   const IconComponent = icon;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2218,7 +2208,7 @@ function Avatar({ src, rounded = true, size = 62, did }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.User, { css: ({ text }) => ({ ...css2, backgroundColor: text.secondary }) });
 }
-const MIN_WIDTH = 200;
+const MIN_WIDTH = 360;
 const MAX_WIDTH = 700;
 function AsideResizable({ children, navbarWidth, asideMaximized, asideCollapsed = false, onAsideToggle, width = 450, onWidthChange, onMaxExpand }) {
   const [isResizing, setIsResizing] = react$1.useState(false);
@@ -4250,20 +4240,20 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
     {
       className: css.cx({ open: isOpen }),
       style: { width },
-      css: ({ colors, bg }) => ({
+      css: () => ({
         position: "relative",
         display: "inline-flex",
         flexDirection: "column",
         "&.open > div": {
-          backgroundColor: bg.card,
-          borderColor: colors.focus,
+          backgroundColor: "var(--mantine-color-neutralColor-5)",
+          borderColor: "var(--mantine-color-neutralColor-6)",
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
-          borderBottomColor: bg.card,
+          borderBottomColor: "none",
           boxSizing: "border-box"
         },
         "&.open > ul": {
-          backgroundColor: bg.card,
+          backgroundColor: "var(--mantine-color-neutralColor-5)",
           display: "inline-flex"
         }
       }),
@@ -4314,7 +4304,7 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
           "ul",
           {
             ...getMenuProps(),
-            css: ({ bg, colors, radius, spacing }) => ({
+            css: ({ colors, radius, spacing }) => ({
               backgroundColor: colors.focusTransparent10,
               listStyle: "none",
               padding: 0,
@@ -4322,10 +4312,10 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
               borderRadius: radius.medium,
               borderWidth: 1,
               borderStyle: "solid",
-              borderColor: colors.focus,
+              borderColor: "var(--mantine-color-neutralColor-6)",
               borderTopRightRadius: 0,
               borderTopLeftRadius: 0,
-              borderTopColor: bg.card,
+              borderTopColor: "var(--mantine-color-neutralColor-5)",
               display: "none",
               flexDirection: "column",
               gap: spacing,
@@ -4366,7 +4356,7 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
                     }
                   }),
                   ...itemProps,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { children: item.label })
+                  children: /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: item.label })
                 },
                 item.value
               );
@@ -6034,13 +6024,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DDO_4uZt.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CH_RGOrj.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-BxL26n-_.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-P3KEgBhv.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CR8fPC2b.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-Bgi4k5s-.cjs")));
 const Map = react$1.lazy(() => Promise.resolve().then(() => require("./index-D4PsPquZ.cjs")));
 const CustomContent = react$1.lazy(() => Promise.resolve().then(() => require("./index-ByrCNpS2.cjs")));
-const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-CGE72zCr.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BzlvAIua.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-C11vdiDH.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-CANUhwDW.cjs")));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = react$1.useRef(null);
@@ -8147,6 +8137,7 @@ function Cell({ children, withImage, withDualImage, isFirstColumn, isLastColumn,
         paddingRight: 0,
         borderTop: "1px solid var(--mantine-color-neutralColor-6)",
         borderBottom: "1px solid var(--mantine-color-neutralColor-6)",
+        border: "none",
         paddingTop: spacing * 1.5,
         paddingBottom: spacing * 1.5,
         "&.compact": {
@@ -8154,7 +8145,6 @@ function Cell({ children, withImage, withDualImage, isFirstColumn, isLastColumn,
           paddingBottom: 0
         },
         "&:last-child": {
-          borderRight: "1px solid var(--mantine-color-neutralColor-6)",
           paddingRight: spacing * 2,
           "&.compact": {
             paddingRight: 0
@@ -8458,6 +8448,7 @@ function TableList({
                       padding: spacing,
                       height: 38,
                       textAlign: "left",
+                      border: "none",
                       "&.first": {
                         paddingLeft: rowImageColumn ? spacing : spacing * 3,
                         "&.compact": {
@@ -8480,7 +8471,7 @@ function TableList({
                     }),
                     children: column.sortable ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
                       const isSorted = sort?.field === column.field;
-                      const color = isSorted ? "primary" : "focusSecondary";
+                      const color = isSorted ? "accent.5" : "accent.3";
                       return /* @__PURE__ */ jsxRuntime.jsxs(
                         "button",
                         {
@@ -8504,7 +8495,7 @@ function TableList({
                             direction: sort?.direction === "ASC" ? "DESC" : "ASC"
                           }),
                           children: [
-                            column.title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color, size: "s", semiBold: true, children: column.title }),
+                            column.title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { c: color, size: "sm", children: column.title }),
                             /* @__PURE__ */ jsxRuntime.jsxs(
                               "div",
                               {
@@ -8513,15 +8504,15 @@ function TableList({
                                   height: spacing * 2
                                 }),
                                 children: [
-                                  isSorted && sort?.direction === "ASC" && /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowUpSolid, { color, size: 16 }),
-                                  isSorted && sort?.direction === "DESC" && /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowDownSolid, { color, size: 16 })
+                                  isSorted && sort?.direction === "ASC" && /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowUpSolid, { size: 16 }),
+                                  isSorted && sort?.direction === "DESC" && /* @__PURE__ */ jsxRuntime.jsx(UsersSolid.ArrowDownSolid, { size: 16 })
                                 ]
                               }
                             )
                           ]
                         }
                       );
-                    })() }) : /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { color: "focusSecondary", size: "s", semiBold: true, children: column.title })
+                    })() }) : /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "sm", children: column.title })
                   },
                   column.field
                 );
@@ -8567,6 +8558,7 @@ function TableList({
                       borderStyle: "solid",
                       borderWidth: 1,
                       borderColor: "transparent",
+                      border: "none",
                       backgroundColor: isRowSelected ? "var(--mantine-color-neutralColor-5)" : "var(--mantine-color-neutralColor-3)",
                       color: "var(--mantine-color-neutralColor-8)"
                     },
@@ -8585,13 +8577,7 @@ function TableList({
                     "&.selected": {
                       td: {
                         borderTopColor: "var(--mantine-color-accent-5)",
-                        borderBottomColor: "var(--mantine-color-accent-5)",
-                        "&:first-of-type": {
-                          borderLeftColor: "var(--mantine-color-accent-5)"
-                        },
-                        "&:last-of-type": {
-                          borderRightColor: "var(--mantine-color-accent-5)"
-                        }
+                        borderBottomColor: "var(--mantine-color-accent-5)"
                       }
                     },
                     "&.clickable": {
@@ -8673,8 +8659,8 @@ function TableList({
                                   justifyContent: "center"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { size: "regular", children: row[column.field] }),
-                                  subtitle && /* @__PURE__ */ jsxRuntime.jsx(Typography.Text, { size: "xs", color: "focusSecondary", className: "subtitle", children: subtitle })
+                                  /* @__PURE__ */ jsxRuntime.jsx(core.Text, { children: row[column.field] }),
+                                  subtitle && /* @__PURE__ */ jsxRuntime.jsx(core.Text, { size: "xs", c: "accent", className: "subtitle", children: subtitle })
                                 ]
                               }
                             ),
@@ -11319,4 +11305,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-C2SQgRSz.cjs.map
+//# sourceMappingURL=components-YkshqT-o.cjs.map