@ixo/ui 0.1.3 → 0.1.5

package/dist/{components-BfMR4Jm_.js → components-CmANQWf-.js}

@@ -1,10 +1,10 @@
 import { jsx, Fragment, jsxs } from "@emotion/react/jsx-runtime";
 import { isString, toggle, get, isFunction, assign } from "radash";
 import { useTheme, jsx as jsx$1, keyframes, ThemeProvider } from "@emotion/react";
-import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, L as Loading, P as PlusSolid, S as SearchSolid, b as Assistant, c as ArrowUpSolid, E as EllipsisVSolid, d as ArrowLeftSolid, e as Canvas, H as HistorySolid, U as User, f as AngleLeftSolid, M as MinusCircleSolid, h as SettingsBarSolid, G as Globe, D as Dashboard, i as Groups, j as UserCircleSolid, k as Assets$1, l as Claims, m as Accounts, n as LinkedResources, o as Proposals, I as ImpactCredits, p as GoTo, q as Share, r as PiePiece, s as ImpactCertificates, t as CommentDotsSolid, u as CommentAltSolid, v as MicrophoneSolid, w as Command, x as ArrowCircleRightSolid, y as Protocols, z as Investments, O as Oracles, B as Projects, F as Daos, J as Star, K as AngleRightSolid, N as Expand, Q as LeafSolid, R as ArrowDownSolid, T as ArrowRightSolid, V as Play, W as CheckCircle, X as Events, Y as ThumbsUpSolid, Z as CommentsSolid, _ as CopySolid, $ as Hourglass, a0 as Act, a1 as Info$1, a2 as ClaimsW, a3 as TachometerAltSolid, a4 as UserCogSolid, a5 as UsersSolid, a6 as EllipsisHSolid } from "./UsersSolid-CU7U_J3x.js";
-import { useState, useCallback, useRef, useEffect, Suspense, lazy, forwardRef, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
+import { g as getElementColor, A as AngleDownSolid, a as CheckSolid, C as Close, b as getTransparentColor, L as Loading, P as PlusSolid, S as SearchSolid, c as Assistant, d as ArrowUpSolid, E as EllipsisVSolid, e as ArrowLeftSolid, f as Canvas, H as HistorySolid, U as User, h as AngleLeftSolid, M as MinusCircleSolid, i as SettingsBarSolid, G as Globe, D as Dashboard, j as Groups, k as UserCircleSolid, l as Assets$1, m as Claims, n as Accounts, o as LinkedResources, p as Proposals, I as ImpactCredits, q as GoTo, r as Share, s as PiePiece, t as ImpactCertificates, u as CommentDotsSolid, v as CommentAltSolid, w as MicrophoneSolid, x as Command, y as ArrowCircleRightSolid, z as Protocols, B as Investments, O as Oracles, F as Projects, J as Daos, K as Star, N as AngleRightSolid, Q as Expand, R as LeafSolid, T as ArrowDownSolid, V as ArrowRightSolid, W as Play, X as CheckCircle, Y as Events, Z as ThumbsUpSolid, _ as CommentsSolid, $ as CopySolid, a0 as Hourglass, a1 as Act, a2 as Info$1, a3 as ClaimsW, a4 as TachometerAltSolid, a5 as UserCogSolid, a6 as UsersSolid, a7 as EllipsisHSolid } from "./UsersSolid-BAHkDzh8.js";
+import { useState, useCallback, useRef, forwardRef, useEffect, Suspense, lazy, useMemo, useId, Fragment as Fragment$1, useLayoutEffect, useImperativeHandle, memo } from "react";
 import { T as TAG_SMALL_HEIGHT, D as DEFAULT_ICON_SIZE } from "./constants-B7xlU8b8.js";
-import { Accordion as Accordion$1, Box, Image, Popover, Text as Text$1, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, CloseButton, Group, Burger, Divider, ScrollArea, Space, Overlay } from "@mantine/core";
+import { Accordion as Accordion$1, Box, Image, Text as Text$1, Popover, Badge as Badge$1, Center, AppShell, Skeleton, Stack as Stack$1, Tooltip as Tooltip$4, CloseButton, Group, Burger, Divider, ScrollArea, Space, Overlay } from "@mantine/core";
 import { cx, css } from "@emotion/css";
 import { createPortal } from "react-dom";
 import DOMPurify from "dompurify";
@@ -507,7 +507,7 @@ function isValidClick(e, target) {
   }
   return true;
 }
-function Tr({ children, selected, onClick }) {
+function Tr({ children, selected, noBg, onClick }) {
   const wrapperRef = useRef(null);
   const handleClick = (e) => {
     if (!onClick) {
@@ -530,11 +530,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"
           }
         };
       },
@@ -542,7 +557,7 @@ function Tr({ children, selected, onClick }) {
     }
   );
 }
-function Table({ children }) {
+function Table({ children, noSpacing = false }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -556,7 +571,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
@@ -570,6 +585,63 @@ Table.Th = Th;
 Table.TBody = TBody;
 Table.Tr = Tr;
 Table.Td = Td;
+const Flex = 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__ */ jsx("div", { ref, ...props, style, children });
+  }
+);
+Flex.displayName = "Flex";
 const TRANSITION_DURATION = 250;
 function AccordionTable({
   items,
@@ -626,16 +698,12 @@ function AccordionTable({
         Accordion$1.Item,
         {
           value: item.id.toString(),
-          css: ({ spacing, colors, bg }) => ({
-            backgroundColor: bg.card,
-            padding: spacing * 2,
+          css: ({ spacing }) => ({
+            backgroundColor: getTransparentColor("neutralColor-5", 70),
             borderRadius: spacing * 2,
             borderWidth: 1,
             borderStyle: "solid",
             borderColor: "transparent",
-            "&.expanded, &.bordered": {
-              borderColor: colors.focus
-            },
             "& .subtitle": {
               opacity: 0,
               height: 0,
@@ -665,10 +733,10 @@ function AccordionTable({
                 children: /* @__PURE__ */ jsxs(
                   Box,
                   {
-                    css: ({ spacing, radius, bg }) => ({
+                    css: ({ spacing, radius }) => ({
                       height: 54,
                       padding: spacing,
-                      backgroundColor: bg.cell,
+                      backgroundColor: "transparent",
                       borderRadius: radius.small,
                       width: "100%",
                       display: "flex",
@@ -708,13 +776,13 @@ function AccordionTable({
                           }
                         ),
                         /* @__PURE__ */ jsxs(Spacer, { vertical: true, distance: 0, alignItems: "start", children: [
-                          /* @__PURE__ */ jsx(Typography.Text, { children: item.title }),
-                          item.subtitle && /* @__PURE__ */ jsx(Typography.Text, { color: "secondary", size: "xs", className: "subtitle", children: item.subtitle })
+                          /* @__PURE__ */ jsx(Text$1, { children: item.title }),
+                          item.subtitle && /* @__PURE__ */ jsx(Text$1, { size: "xs", className: "subtitle", children: item.subtitle })
                         ] })
                       ] }),
                       /* @__PURE__ */ jsxs(Spacer, { vertical: true, alignItems: "end", children: [
-                        item.rightTitle && /* @__PURE__ */ jsx(Typography.Text, { className: "textValue", children: item.rightTitle }),
-                        item.rightSubtitle && /* @__PURE__ */ jsx(Typography.Text, { className: "textValue subtitle", color: "secondary", size: "xs", children: item.rightSubtitle })
+                        item.rightTitle && /* @__PURE__ */ jsx(Text$1, { className: "textValue", children: item.rightTitle }),
+                        item.rightSubtitle && /* @__PURE__ */ jsx(Text$1, { className: "textValue subtitle", size: "xs", children: item.rightSubtitle })
                       ] })
                     ]
                   }
@@ -722,26 +790,15 @@ function AccordionTable({
               }
             ),
             /* @__PURE__ */ jsxs(Accordion$1.Panel, { children: [
-              item.subitems.data.length < 1 ? /* @__PURE__ */ jsx(Box, { css: ({ spacing }) => ({ padding: spacing * 2 }), children: /* @__PURE__ */ jsx(Typography.Paragraph, { align: "center", children: "No data" }) }) : /* @__PURE__ */ jsxs(Table, { children: [
+              item.subitems.data.length < 1 ? /* @__PURE__ */ jsx(Box, { css: ({ spacing }) => ({ padding: spacing * 2 }), children: /* @__PURE__ */ jsx(Text$1, { ta: "center", children: "No data" }) }) : /* @__PURE__ */ jsxs(Table, { noSpacing: true, children: [
                 /* @__PURE__ */ jsx(Table.THead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
                   item.subitems.columns.map((column, index) => /* @__PURE__ */ jsx(Table.Th, { align: index === 0 ? "left" : "right", expand: column.expand, shrink: column.shrink, children: column.title }, column.title)),
-                  showSelectColumn && /* @__PURE__ */ jsx(Table.Th, { align: "right", shrink: true, children: /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      css: {
-                        display: "flex",
-                        justifyContent: "start",
-                        alignItems: "center",
-                        gap: 8
-                      },
-                      children: [
-                        selectedAll && selectAll ? "Deselect" : "Select",
-                        selectAll && /* @__PURE__ */ jsx(Checkbox, { checked: selectedAll, onChange: (checked) => selectAll(checked) })
-                      ]
-                    }
-                  ) })
+                  showSelectColumn && /* @__PURE__ */ jsx(Table.Th, { align: "right", shrink: true, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 8, children: [
+                    selectedAll && selectAll ? "Deselect" : "Select",
+                    selectAll && /* @__PURE__ */ jsx(Checkbox, { checked: selectedAll, onChange: (checked) => selectAll(checked) })
+                  ] }) })
                 ] }) }),
-                /* @__PURE__ */ jsx(Table.TBody, { children: item.subitems.data.map((row) => /* @__PURE__ */ jsxs(Table.Tr, { selected: selectedItems?.includes(row.id), onClick: onSelectItems ? () => handleSelectItems(row.id) : void 0, children: [
+                /* @__PURE__ */ jsx(Table.TBody, { children: item.subitems.data.map((row) => /* @__PURE__ */ 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__ */ jsx(
                     Table.Td,
                     {
@@ -753,17 +810,7 @@ function AccordionTable({
                     },
                     column.title
                   )),
-                  showSelectColumn && /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      css: {
-                        display: "flex",
-                        justifyContent: "center",
-                        alignItems: "center"
-                      },
-                      children: /* @__PURE__ */ jsx(Checkbox, { checked: selectedItems?.includes(row.id), onChange: () => handleSelectItems(row.id) })
-                    }
-                  ) })
+                  showSelectColumn && /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Checkbox, { checked: selectedItems?.includes(row.id), onChange: () => handleSelectItems(row.id) }) }) })
                 ] }, row.id)) })
               ] }),
               item.footer
@@ -775,8 +822,8 @@ function AccordionTable({
     }
   );
 }
-const Header$3 = lazy(() => import("./index-By8bP9F4.js"));
-const Footer = lazy(() => import("./index-BT-G2YjM.js"));
+const Header$3 = lazy(() => import("./index-BcS9nv9y.js"));
+const Footer = lazy(() => import("./index-D8rBCYAR.js"));
 function ActionCard({ header, content, footer, useHoverMode = false }) {
   const hasContent = !!content || !!footer;
   const initialVisibility = footer?.startHidden !== true;
@@ -860,7 +907,7 @@ function Loader({ size, color = "primary" }) {
 }
 const CARD_WIDTH$1 = 350;
 const CARD_HEADER_HEIGHT = 158;
-const Header$2 = lazy(() => import("./index-BtFFAaIr.js"));
+const Header$2 = lazy(() => import("./index-COFYd2Cs.js"));
 function Card({ children, className, contentClassName, roundedBottom, noPadding = false, fullWidth = false, header, wrapperSx, onClick }) {
   const wrapperRef = useRef(null);
   const handleOnClick = useCallback(
@@ -1295,7 +1342,7 @@ function ModalSheet({ isOpen, children, hideHandler, zIndex, onRequestHide, onRe
     document.body
   );
 }
-const Badge = lazy(() => import("./index-BAz_xpVr.js"));
+const Badge = lazy(() => import("./index-CUsPvPQY.js"));
 function ActionSheet({ children, isOpen, header, navMenu = void 0, onRequestHide, onRequestShow }) {
   const shadowScrollRef = useRef(null);
   const wrapperContentAreaRef = useRef(null);
@@ -1874,63 +1921,6 @@ function HtmlRender({ content, className }) {
   const safeHTML = DOMPurify.sanitize(content, { FORBID_ATTR: ["style"] });
   return /* @__PURE__ */ jsx(StyleDOMApplier, { children: /* @__PURE__ */ jsx("div", { className, dangerouslySetInnerHTML: { __html: safeHTML } }) });
 }
-const Flex = 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__ */ jsx("div", { ref, ...props, style, children });
-  }
-);
-Flex.displayName = "Flex";
 function Item({ icon, label, disabled, active, onClick }) {
   const IconComponent = icon;
   return /* @__PURE__ */ jsx(
@@ -4227,20 +4217,20 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
     {
       className: 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"
         }
       }),
@@ -4291,7 +4281,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,
@@ -4299,10 +4289,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,
@@ -4343,7 +4333,7 @@ function DropDown({ items, width = 162, placeholder = "Select", icon: Icon, disa
                     }
                   }),
                   ...itemProps,
-                  children: /* @__PURE__ */ jsx(Typography.Text, { children: item.label })
+                  children: /* @__PURE__ */ jsx(Text$1, { children: item.label })
                 },
                 item.value
               );
@@ -6011,13 +6001,13 @@ function ActionButton({ onClick, left, right }) {
     }
   );
 }
-const MainAction = lazy(() => import("./index-BA_IGjzx.js"));
-const Header$1 = lazy(() => import("./index-DKU106Gm.js"));
-const Content = lazy(() => import("./index-P7O0pqQQ.js"));
+const MainAction = lazy(() => import("./index-BO0bmguj.js"));
+const Header$1 = lazy(() => import("./index-Cdx2iFWc.js"));
+const Content = lazy(() => import("./index-PVwto1-Y.js"));
 const Map = lazy(() => import("./index-D5Ufmf-s.js"));
 const CustomContent = lazy(() => import("./index-DsYjW_4y.js"));
-const Assets = lazy(() => import("./index-D3n59w3g.js"));
-const Actions = lazy(() => import("./index-DKH0pkHE.js"));
+const Assets = lazy(() => import("./index-UKyxkTI5.js"));
+const Actions = lazy(() => import("./index-SQJMSt4m.js"));
 const HOVER_BORDER_WIDTH = 1;
 function SodaCardCmp({ numSelected = 0, expanded = true, mainAction, header, content, map, customContent, customFooter, actions, assets, onClick }, ref) {
   const wrapperRef = useRef(null);
@@ -8119,12 +8109,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": {
@@ -8132,7 +8122,6 @@ function Cell({ children, withImage, withDualImage, isFirstColumn, isLastColumn,
           paddingBottom: 0
         },
         "&:last-child": {
-          borderRight: `1px solid ${colors.focusTransparent20}`,
           paddingRight: spacing * 2,
           "&.compact": {
             paddingRight: 0
@@ -8193,8 +8182,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",
@@ -8239,8 +8228,7 @@ function IconRowCmp({ icon: Icon }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      css: ({ bg, spacing }) => ({
-        background: bg.cell,
+      css: ({ spacing }) => ({
         borderTopLeftRadius: spacing * 2,
         borderBottomLeftRadius: spacing * 2,
         display: "flex",
@@ -8437,6 +8425,7 @@ function TableList({
                       padding: spacing,
                       height: 38,
                       textAlign: "left",
+                      border: "none",
                       "&.first": {
                         paddingLeft: rowImageColumn ? spacing : spacing * 3,
                         "&.compact": {
@@ -8459,7 +8448,7 @@ function TableList({
                     }),
                     children: column.sortable ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
                       const isSorted = sort?.field === column.field;
-                      const color = isSorted ? "primary" : "focusSecondary";
+                      const color = isSorted ? "accent.5" : "accent.3";
                       return /* @__PURE__ */ jsxs(
                         "button",
                         {
@@ -8483,7 +8472,7 @@ function TableList({
                             direction: sort?.direction === "ASC" ? "DESC" : "ASC"
                           }),
                           children: [
-                            column.title !== void 0 && /* @__PURE__ */ jsx(Typography.Text, { color, size: "s", semiBold: true, children: column.title }),
+                            column.title !== void 0 && /* @__PURE__ */ jsx(Text$1, { c: color, size: "sm", children: column.title }),
                             /* @__PURE__ */ jsxs(
                               "div",
                               {
@@ -8492,15 +8481,15 @@ function TableList({
                                   height: spacing * 2
                                 }),
                                 children: [
-                                  isSorted && sort?.direction === "ASC" && /* @__PURE__ */ jsx(ArrowUpSolid, { color, size: 16 }),
-                                  isSorted && sort?.direction === "DESC" && /* @__PURE__ */ jsx(ArrowDownSolid, { color, size: 16 })
+                                  isSorted && sort?.direction === "ASC" && /* @__PURE__ */ jsx(ArrowUpSolid, { size: 16 }),
+                                  isSorted && sort?.direction === "DESC" && /* @__PURE__ */ jsx(ArrowDownSolid, { size: 16 })
                                 ]
                               }
                             )
                           ]
                         }
                       );
-                    })() }) : /* @__PURE__ */ jsx(Typography.Text, { color: "focusSecondary", size: "s", semiBold: true, children: column.title })
+                    })() }) : /* @__PURE__ */ jsx(Text$1, { size: "sm", children: column.title })
                   },
                   column.field
                 );
@@ -8541,21 +8530,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,
@@ -8566,29 +8553,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)"
                         }
                       }
                     }
@@ -8597,13 +8571,13 @@ function TableList({
                     IconRow !== false && /* @__PURE__ */ 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
                         }),
@@ -8662,8 +8636,8 @@ function TableList({
                                   justifyContent: "center"
                                 },
                                 children: [
-                                  /* @__PURE__ */ jsx(Typography.Text, { size: "regular", children: row[column.field] }),
-                                  subtitle && /* @__PURE__ */ jsx(Typography.Text, { size: "xs", color: "focusSecondary", className: "subtitle", children: subtitle })
+                                  /* @__PURE__ */ jsx(Text$1, { children: row[column.field] }),
+                                  subtitle && /* @__PURE__ */ jsx(Text$1, { size: "xs", c: "accent", className: "subtitle", children: subtitle })
                                 ]
                               }
                             ),
@@ -11310,4 +11284,4 @@ export {
   CardHero as y,
   CardSelector as z
 };
-//# sourceMappingURL=components-BfMR4Jm_.js.map
+//# sourceMappingURL=components-CmANQWf-.js.map