@ixo/ui 0.1.3 → 0.1.5

package/dist/{components-CMx1Z6qW.cjs → components-D-S05IGO.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-8)" : 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-Mjt1S0Pd.cjs")));
-const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-LPfRhRqy.cjs")));
+const Header$3 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BOPdrL0z.cjs")));
+const Footer = react$1.lazy(() => Promise.resolve().then(() => require("./index-Dn7Yp1ku.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-j30UxndW.cjs")));
+const Header$2 = react$1.lazy(() => Promise.resolve().then(() => require("./index-BNv7Wt6j.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-CzELlodl.cjs")));
+const Badge = react$1.lazy(() => Promise.resolve().then(() => require("./index-Bzvm895X.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(
@@ -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-B012tdby.cjs")));
-const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-CUP32wrD.cjs")));
-const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-C697oQC3.cjs")));
+const MainAction = react$1.lazy(() => Promise.resolve().then(() => require("./index-DGVkbm1G.cjs")));
+const Header$1 = react$1.lazy(() => Promise.resolve().then(() => require("./index-Bp3jax94.cjs")));
+const Content = react$1.lazy(() => Promise.resolve().then(() => require("./index-D5-ydt83.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-xLk8g4d_.cjs")));
-const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-BnDLND8p.cjs")));
+const Assets = react$1.lazy(() => Promise.resolve().then(() => require("./index-C81_pkCa.cjs")));
+const Actions = react$1.lazy(() => Promise.resolve().then(() => require("./index-znoKlTv8.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);
@@ -8142,12 +8132,12 @@ function Cell({ children, withImage, withDualImage, isFirstColumn, isLastColumn,
         compact,
         shrink
       }),
-      css: ({ spacing, bg, colors }) => ({
-        background: bg.card,
+      css: ({ spacing }) => ({
         paddingLeft: 0,
         paddingRight: 0,
-        borderTop: `1px solid ${colors.focusTransparent20}`,
-        borderBottom: `1px solid ${colors.focusTransparent20}`,
+        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": {
@@ -8155,7 +8145,6 @@ function Cell({ children, withImage, withDualImage, isFirstColumn, isLastColumn,
           paddingBottom: 0
         },
         "&:last-child": {
-          borderRight: `1px solid ${colors.focusTransparent20}`,
           paddingRight: spacing * 2,
           "&.compact": {
             paddingRight: 0
@@ -8216,8 +8205,8 @@ function CellContent({
         "emulate-checkbox-area": emulateCheckboxArea,
         "vertical-align": verticalAlign
       }),
-      css: ({ bg, spacing }) => ({
-        background: bg.cell,
+      css: ({ spacing }) => ({
+        background: "var(--mantine-color-neutralColor-6)",
         height: 54,
         padding: spacing,
         display: "flex",
@@ -8262,8 +8251,7 @@ function IconRowCmp({ icon: Icon }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      css: ({ bg, spacing }) => ({
-        background: bg.cell,
+      css: ({ spacing }) => ({
         borderTopLeftRadius: spacing * 2,
         borderBottomLeftRadius: spacing * 2,
         display: "flex",
@@ -8460,6 +8448,7 @@ function TableList({
                       padding: spacing,
                       height: 38,
                       textAlign: "left",
+                      border: "none",
                       "&.first": {
                         paddingLeft: rowImageColumn ? spacing : spacing * 3,
                         "&.compact": {
@@ -8482,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",
                         {
@@ -8506,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",
                               {
@@ -8515,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
                 );
@@ -8564,21 +8553,19 @@ function TableList({
                     selected: isRowSelected,
                     clickable: !!onRowClick
                   }),
-                  css: ({ colors, transition }) => ({
+                  css: () => ({
                     "& > td": {
-                      borderTop: "solid 1px transparent",
-                      borderBottom: "solid 1px transparent",
-                      "&:first-of-type": {
-                        borderLeft: "solid 1px transparent"
-                      },
-                      "&:last-of-type": {
-                        borderRight: "solid 1px transparent"
-                      }
+                      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)"
                     },
                     "& .subtitle": {
                       opacity: 0,
                       height: 0,
-                      transition: transition.duration
+                      transition: "opacity 0.2s ease, height 0.2s ease"
                     },
                     "&:hover .subtitle": {
                       opacity: 1,
@@ -8589,29 +8576,16 @@ function TableList({
                     },
                     "&.selected": {
                       td: {
-                        borderTopColor: colors.focus,
-                        borderBottomColor: colors.focus,
-                        "&:first-of-type": {
-                          borderLeftColor: colors.focus
-                        },
-                        "&:last-of-type": {
-                          borderRightColor: colors.focus
-                        }
+                        borderTopColor: "var(--mantine-color-accent-5)",
+                        borderBottomColor: "var(--mantine-color-accent-5)"
                       }
                     },
                     "&.clickable": {
-                      cursor: "default",
-                      transition: transition.duration,
+                      cursor: "pointer",
+                      transition: "background-color 0.2s ease",
                       "&:hover": {
                         td: {
-                          borderTop: `solid 1px ${colors.focusTransparent50}`,
-                          borderBottom: `solid 1px ${colors.focusTransparent50}`,
-                          "&:first-of-type": {
-                            borderLeft: `solid 1px ${colors.focusTransparent50}`
-                          },
-                          "&:last-of-type": {
-                            borderRight: `solid 1px ${colors.focusTransparent50}`
-                          }
+                          backgroundColor: "var(--mantine-color-neutralColor-1)"
                         }
                       }
                     }
@@ -8620,13 +8594,13 @@ function TableList({
                     IconRow !== false && /* @__PURE__ */ jsxRuntime.jsx(
                       "td",
                       {
-                        css: ({ spacing, bg, colors }) => ({
-                          background: bg.card,
+                        css: ({ spacing }) => ({
+                          background: isRowSelected ? "var(--mantine-color-neutralColor-5)" : "var(--mantine-color-neutralColor-3)",
                           borderTopLeftRadius: spacing * 2,
                           borderBottomLeftRadius: spacing * 2,
-                          borderTop: `1px solid ${colors.focusTransparent20}`,
-                          borderBottom: `1px solid ${colors.focusTransparent20}`,
-                          borderLeft: `1px solid ${colors.focusTransparent20}`,
+                          borderTop: "1px solid var(--mantine-color-neutralColor-6)",
+                          borderBottom: "1px solid var(--mantine-color-neutralColor-6)",
+                          borderLeft: "1px solid var(--mantine-color-neutralColor-6)",
                           position: "relative",
                           width: spacing * 5.75 + spacing * 2
                         }),
@@ -8685,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 })
                                 ]
                               }
                             ),
@@ -11331,4 +11305,4 @@ exports.UserMessage = UserMessage;
 exports.WorkspaceModal = WorkspaceModal;
 exports.cutText = cutText;
 exports.isValidClick = isValidClick;
-//# sourceMappingURL=components-CMx1Z6qW.cjs.map
+//# sourceMappingURL=components-D-S05IGO.cjs.map