@connectif/ui-components 2.0.19 → 2.1.0

package/dist/index.js

@@ -929,7 +929,6 @@ __export(Colors_exports, {
   blueGrey500: () => blueGrey500,
   blueGrey700: () => blueGrey700,
   blueGrey800: () => blueGrey800,
-  blueGreyOpacity05: () => blueGreyOpacity05,
   complementary100: () => complementary100,
   complementary200: () => complementary200,
   complementary300: () => complementary300,
@@ -1092,7 +1091,6 @@ var blueGrey400 = "#646D7A";
 var blueGrey500 = "#495362";
 var blueGrey700 = "#414A58";
 var blueGrey800 = "#383F4C";
-var blueGreyOpacity05 = "rgba(65, 74, 88, 0.05)";
 var lightGreen = "#599D7D";
 var darkGreen = "#487F65";
 var dark500 = "#7F8BA8";
@@ -8673,22 +8671,123 @@ var GlobalStyles_default = globalStyles;
 // src/theme/Palettes.ts
 var Palettes_exports = {};
 __export(Palettes_exports, {
+  blueGreyPalette: () => blueGreyPalette,
+  commonPalette: () => commonPalette,
+  complementaryPalette: () => complementaryPalette,
+  cornflowerBluePalette: () => cornflowerBluePalette,
+  darkPalette: () => darkPalette,
+  electricLavenderPalette: () => electricLavenderPalette,
   errorPalette: () => errorPalette,
+  greenPalette: () => greenPalette,
+  greyPalette: () => greyPalette,
   primaryPalette: () => primaryPalette,
   successPalette: () => successPalette
 });
 var primaryPalette = {
   main: primaryMain,
   light: primaryLight,
-  dark: primaryDark
+  dark: primaryDark,
+  50: primary50,
+  100: primary100,
+  200: primary200,
+  300: primary300,
+  400: primary400,
+  500: primary500,
+  600: primary600,
+  700: primary700,
+  800: primary800,
+  900: primary900,
+  opacity32: primaryOpacity32,
+  alpha32: primaryAlpha32,
+  alpha64: primaryAlpha64
+};
+var complementaryPalette = {
+  main: complementaryMain,
+  50: complementary50,
+  100: complementary100,
+  200: complementary200,
+  300: complementary300,
+  400: complementary400,
+  500: complementary500,
+  600: complementary600,
+  700: complementary700,
+  800: complementary800,
+  900: complementary900
 };
 var errorPalette = {
-  main: errorMain
+  main: errorMain,
+  25: error25,
+  50: error50,
+  100: error100,
+  200: error200,
+  300: error300,
+  400: error400,
+  500: error500,
+  600: error600,
+  700: error700,
+  800: error800,
+  900: error900
 };
 var successPalette = {
   main: successMain,
   light: successLight,
-  dark: successDark
+  dark: successDark,
+  50: success50,
+  100: success100,
+  200: success200,
+  300: success300,
+  400: success400,
+  500: success500,
+  600: success600,
+  700: success700,
+  800: success800,
+  900: success900
+};
+var greyPalette = {
+  main: grey500,
+  50: grey50,
+  100: grey100,
+  200: grey200,
+  300: grey300,
+  400: grey400,
+  500: grey500,
+  600: grey600,
+  700: grey700,
+  800: grey800,
+  900: grey900
+};
+var commonPalette = {
+  black,
+  white,
+  blackOpacity04,
+  whiteOpacity32
+};
+var blueGreyPalette = {
+  main: blueGrey,
+  300: blueGrey300,
+  400: blueGrey400,
+  500: blueGrey500,
+  700: blueGrey700,
+  800: blueGrey800
+};
+var greenPalette = {
+  main: oliveGreen,
+  light: lightGreen,
+  dark: darkGreen
+};
+var darkPalette = {
+  main: darkMain,
+  500: dark500,
+  600: dark600,
+  700: dark700,
+  800: dark800,
+  900: dark900
+};
+var electricLavenderPalette = {
+  main: electricLavender
+};
+var cornflowerBluePalette = {
+  main: cornflowerBlue
 };
 
 // src/theme/Shadows.ts
@@ -8732,9 +8831,10 @@ var shadows = [
 // src/theme/Theme.ts
 var Theme_exports = {};
 __export(Theme_exports, {
-  theme: () => theme
+  theme: () => theme,
+  useCustomTheme: () => useCustomTheme
 });
-import { createTheme as createTheme2 } from "@mui/material/styles";
+import { createTheme as createTheme2, useTheme as useTheme3 } from "@mui/material/styles";
 
 // src/theme/Typography.ts
 var Typography_exports = {};
@@ -8964,57 +9064,57 @@ var buttonTheme = {
       props: {
         variant: "contained"
       },
-      style: {
-        color: white,
-        backgroundColor: primaryMain,
+      style: ({ theme: theme2 }) => ({
+        color: theme2.palette.common.white,
+        backgroundColor: theme2.palette.primary.main,
         boxShadow: shadows[0],
         "&:hover": {
-          backgroundColor: primary400,
+          backgroundColor: theme2.palette.primary[400],
           boxShadow: shadows[0]
         },
         "&:active": {
-          backgroundColor: primaryMain,
+          backgroundColor: theme2.palette.primary.main,
           boxShadow: shadows[0]
         },
         ":disabled": {
-          color: grey500,
-          backgroundColor: grey300
+          color: theme2.palette.grey[500],
+          backgroundColor: theme2.palette.grey[300]
         }
-      }
+      })
     },
     {
       props: {
         variant: "outlined"
       },
-      style: {
-        color: primaryMain,
-        backgroundColor: white,
-        border: `1px solid ${primaryMain}`,
+      style: ({ theme: theme2 }) => ({
+        color: theme2.palette.primary.main,
+        backgroundColor: theme2.palette.common.white,
+        border: `1px solid ${theme2.palette.primary.main}`,
         padding: "0 11px",
         "&:hover": {
-          borderColor: primary50,
-          backgroundColor: primary50
+          borderColor: theme2.palette.primary[50],
+          backgroundColor: theme2.palette.primary[50]
         },
         "&:active": {
-          backgroundColor: primary50
+          backgroundColor: theme2.palette.primary[50]
         }
-      }
+      })
     },
     {
       props: {
         variant: "text"
       },
-      style: {
-        color: primaryMain,
+      style: ({ theme: theme2 }) => ({
+        color: theme2.palette.primary.main,
         backgroundColor: "transparent",
         "&:hover": {
-          color: primaryMain,
-          backgroundColor: primaryOpacity32
+          color: theme2.palette.primary.main,
+          backgroundColor: theme2.palette.primary.opacity32
         },
         "&:active": {
-          backgroundColor: primaryOpacity32
+          backgroundColor: theme2.palette.primary.opacity32
         }
-      }
+      })
     }
   ],
   styleOverrides: {
@@ -9355,12 +9455,20 @@ var switchTheme = {
 };
 
 // src/theme/Theme.ts
-var theme = createTheme2({
+var themeOptions = {
   typography,
   palette: {
     primary: primaryPalette,
+    complementary: complementaryPalette,
+    error: errorPalette,
     success: successPalette,
-    error: errorPalette
+    grey: greyPalette,
+    common: commonPalette,
+    blueGrey: blueGreyPalette,
+    green: greenPalette,
+    dark: darkPalette,
+    electricLavender: electricLavenderPalette,
+    cornflowerBlue: cornflowerBluePalette
   },
   components: {
     MuiButton: buttonTheme,
@@ -9382,7 +9490,9 @@ var theme = createTheme2({
   shadows,
   breakpoints,
   spacing: 4
-});
+};
+var theme = createTheme2(themeOptions);
+var useCustomTheme = () => useTheme3();
 
 // src/components/tooltip/TooltipMenu.tsx
 import { Tooltip as Tooltip3, tooltipClasses } from "@mui/material";
@@ -9442,7 +9552,8 @@ var TextEllipsis = ({
   lines = 1,
   maxWidth: maxWidth2,
   "data-test": dataTest,
-  sx
+  sx,
+  zIndex
 }) => {
   const textElementRef = React17.useRef(null);
   return /* @__PURE__ */ jsx32(
@@ -9451,6 +9562,7 @@ var TextEllipsis = ({
       title: text ?? "\xA0",
       textEllipsableElement: textElementRef,
       lines,
+      zIndex,
       children: /* @__PURE__ */ jsx32(
         Typography_default,
         {
@@ -9856,179 +9968,179 @@ import MuiButton2 from "@mui/material/Button";
 import * as React21 from "react";
 import MuiButton from "@mui/material/Button";
 import { jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
-var outlinedWhiteInherit = {
-  border: `1px solid ${grey200}`,
-  color: grey800,
-  backgroundColor: white,
+var outlinedWhiteInherit = (theme2) => ({
+  border: `1px solid ${theme2.palette.grey[200]}`,
+  color: theme2.palette.grey[800],
+  backgroundColor: theme2.palette.common.white,
   ":hover": {
-    border: `1px solid ${grey100}`,
-    backgroundColor: grey100
+    border: `1px solid ${theme2.palette.grey[100]}`,
+    backgroundColor: theme2.palette.grey[100]
   },
   "&:active": {
-    border: `1px solid ${grey200}`,
-    backgroundColor: white
+    border: `1px solid ${theme2.palette.grey[200]}`,
+    backgroundColor: theme2.palette.common.white
   },
   ":disabled": {
-    color: grey400
+    color: theme2.palette.grey[400]
   }
-};
-var textWhiteInherit = {
-  color: grey800,
+});
+var textWhiteInherit = (theme2) => ({
+  color: theme2.palette.grey[800],
   backgroundColor: "transparent",
   ":hover": {
-    color: grey800,
-    backgroundColor: grey50
+    color: theme2.palette.grey[800],
+    backgroundColor: theme2.palette.grey[50]
   },
   "&:active": {
-    color: grey800,
-    backgroundColor: grey50
+    color: theme2.palette.grey[800],
+    backgroundColor: theme2.palette.grey[50]
   },
   ":disabled": {
-    color: grey400
+    color: theme2.palette.grey[400]
   }
-};
-var outlinedWarning = {
-  border: `1px solid ${error900}`,
-  color: error900,
-  backgroundColor: white,
+});
+var outlinedWarning = (theme2) => ({
+  border: `1px solid ${theme2.palette.error[900]}`,
+  color: theme2.palette.error[900],
+  backgroundColor: theme2.palette.common.white,
   ":hover": {
-    border: `1px solid ${error900}`,
-    backgroundColor: error50
+    border: `1px solid ${theme2.palette.error[900]}`,
+    backgroundColor: theme2.palette.error[50]
   },
   "&:active": {
-    border: `1px solid ${error900}`,
-    backgroundColor: white
+    border: `1px solid ${theme2.palette.error[900]}`,
+    backgroundColor: theme2.palette.common.white
   },
   ":disabled": {
-    color: grey400
+    color: theme2.palette.grey[400]
   }
-};
-var textWarning = {
-  color: error900,
+});
+var textWarning = (theme2) => ({
+  color: theme2.palette.error[900],
   backgroundColor: "transparent",
   ":hover": {
-    color: error900,
-    backgroundColor: error50
+    color: theme2.palette.error[900],
+    backgroundColor: theme2.palette.error[50]
   },
   "&:active": {
-    color: error900,
-    backgroundColor: error50
+    color: theme2.palette.error[900],
+    backgroundColor: theme2.palette.error[50]
   },
   ":disabled": {
-    color: grey400
+    color: theme2.palette.grey[400]
   }
-};
-var colorStyles2 = {
+});
+var colorStyles2 = (theme2) => ({
   contained: {
     primary: {},
     inherit: {
-      color: grey800,
-      backgroundColor: grey300,
+      color: theme2.palette.grey[800],
+      backgroundColor: theme2.palette.grey[300],
       ":hover": {
-        backgroundColor: grey100
+        backgroundColor: theme2.palette.grey[100]
       },
       "&:active": {
-        backgroundColor: grey300
+        backgroundColor: theme2.palette.grey[300]
       },
       ":disabled": {
-        color: grey400
+        color: theme2.palette.grey[400]
       }
     },
     white: {
-      border: `1px solid ${grey200}`,
-      color: grey800,
-      backgroundColor: white,
+      border: `1px solid ${theme2.palette.grey[200]}`,
+      color: theme2.palette.grey[800],
+      backgroundColor: theme2.palette.common.white,
       ":hover": {
-        border: `1px solid ${grey300}`,
-        backgroundColor: grey100
+        border: `1px solid ${theme2.palette.grey[300]}`,
+        backgroundColor: theme2.palette.grey[100]
       },
       "&:active": {
-        border: `1px solid ${grey300}`,
-        backgroundColor: grey200
+        border: `1px solid ${theme2.palette.grey[300]}`,
+        backgroundColor: theme2.palette.grey[200]
       },
       ":disabled": {
         border: "none",
-        color: grey400,
-        backgroundColor: grey300
+        color: theme2.palette.grey[400],
+        backgroundColor: theme2.palette.grey[300]
       }
     },
     warning: {
-      color: white,
-      backgroundColor: error900,
+      color: theme2.palette.error[900],
+      backgroundColor: theme2.palette.error[900],
       ":hover": {
-        backgroundColor: error600
+        backgroundColor: theme2.palette.error[600]
       },
       "&:active": {
-        backgroundColor: error900
+        backgroundColor: theme2.palette.error[900]
       }
     }
   },
   outlined: {
     primary: {},
-    inherit: outlinedWhiteInherit,
-    white: outlinedWhiteInherit,
-    warning: outlinedWarning
+    inherit: outlinedWhiteInherit(theme2),
+    white: outlinedWhiteInherit(theme2),
+    warning: outlinedWarning(theme2)
   },
   text: {
     primary: {},
-    inherit: textWhiteInherit,
-    white: textWhiteInherit,
-    warning: textWarning
+    inherit: textWhiteInherit(theme2),
+    white: textWhiteInherit(theme2),
+    warning: textWarning(theme2)
   }
-};
-var badgeColorStyles = (hover, disabled) => ({
+});
+var badgeColorStyles = (theme2, hover, disabled) => ({
   contained: {
     primary: {
-      color: white,
-      backgroundColor: disabled ? grey500 : hover ? primary600 : primary800
+      color: theme2.palette.common.white,
+      backgroundColor: disabled ? theme2.palette.grey[500] : hover ? theme2.palette.primary[600] : theme2.palette.primary[800]
     },
     inherit: {
-      color: disabled ? white : grey800,
-      backgroundColor: hover ? grey500 : grey400
+      color: disabled ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: hover ? theme2.palette.grey[500] : theme2.palette.grey[400]
     },
     white: {
-      color: disabled || hover ? white : grey800,
-      backgroundColor: disabled || hover ? grey500 : grey200
+      color: disabled || hover ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: disabled || hover ? theme2.palette.grey[500] : theme2.palette.grey[200]
     },
     warning: {
-      color: disabled ? white : error900,
-      backgroundColor: disabled ? grey500 : hover ? error100 : error50
+      color: disabled ? theme2.palette.common.white : theme2.palette.error[900],
+      backgroundColor: disabled ? theme2.palette.grey[500] : hover ? theme2.palette.error[100] : theme2.palette.error[50]
     }
   },
   outlined: {
     primary: {
-      color: white,
-      backgroundColor: disabled ? grey500 : primary600
+      color: theme2.palette.common.white,
+      backgroundColor: disabled ? theme2.palette.grey[500] : theme2.palette.primary[600]
     },
     inherit: {
-      color: disabled || hover ? white : grey800,
-      backgroundColor: disabled || hover ? grey500 : grey200
+      color: disabled || hover ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: disabled || hover ? theme2.palette.grey[500] : theme2.palette.grey[200]
     },
     white: {
-      color: disabled || hover ? white : grey800,
-      backgroundColor: disabled || hover ? grey500 : grey200
+      color: disabled || hover ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: disabled || hover ? theme2.palette.grey[500] : theme2.palette.grey[200]
     },
     warning: {
-      color: white,
-      backgroundColor: disabled ? grey500 : error400
+      color: theme2.palette.common.white,
+      backgroundColor: disabled ? theme2.palette.grey[500] : theme2.palette.error[400]
     }
   },
   text: {
     primary: {
-      color: white,
-      backgroundColor: disabled ? grey500 : primary600
+      color: theme2.palette.common.white,
+      backgroundColor: disabled ? theme2.palette.grey[500] : theme2.palette.primary[600]
     },
     inherit: {
-      color: disabled ? white : grey800,
-      backgroundColor: disabled ? grey400 : grey200
+      color: disabled ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: disabled ? theme2.palette.grey[400] : theme2.palette.grey[200]
     },
     white: {
-      color: disabled ? white : grey800,
-      backgroundColor: disabled ? grey400 : grey200
+      color: disabled ? theme2.palette.common.white : theme2.palette.grey[800],
+      backgroundColor: disabled ? theme2.palette.grey[400] : theme2.palette.grey[200]
     },
     warning: {
-      color: white,
-      backgroundColor: disabled ? grey500 : error400
+      color: theme2.palette.common.white,
+      backgroundColor: disabled ? theme2.palette.grey[500] : theme2.palette.error[400]
     }
   }
 });
@@ -10063,15 +10175,16 @@ var Button = React21.forwardRef(function Button2({
   link,
   ...props
 }, ref) {
+  const theme2 = useCustomTheme();
   const [isHover, setHover] = React21.useState(false);
   const icon = iconId ? /* @__PURE__ */ jsx39(Icon_default, { size: iconSize, id: iconId }) : specificIcon || void 0;
   const iconProp = iconEnd ? { endIcon: icon } : { startIcon: icon };
-  const colorStyle = colorStyles2[variant][color2];
+  const colorStyle = colorStyles2(theme2)[variant][color2];
   const sizeStyle = sizeStyles2[size];
   const styleVars = {
     "--border": variant === "outlined" ? "1px" : "0px"
   };
-  const badgeColor = badgeColorStyles(isHover, props.disabled)[variant][color2];
+  const badgeColor = badgeColorStyles(theme2, isHover, props.disabled)[variant][color2];
   const getBadge = () => /* @__PURE__ */ jsx39(
     Typography_default,
     {
@@ -10208,10 +10321,11 @@ var ButtonWithActions = React23.forwardRef(function ButtonWithActions2({
   size: buttonSize,
   ...buttonProps
 }, ref) {
+  const theme2 = useCustomTheme();
   const size = buttonSize || "M";
   const variant = buttonProps.variant || "contained";
   const color2 = buttonProps.color || "primary";
-  const colorStyle = colorStyles2[variant][color2];
+  const colorStyle = colorStyles2(theme2)[variant][color2];
   const sizeStyle = sizeStyles3[size];
   const disabled = buttonProps.disabled;
   const [buttonId] = React23.useState(
@@ -12291,7 +12405,7 @@ import * as React32 from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 import ReactEChartsCore2 from "echarts-for-react/lib/core";
 import * as echarts3 from "echarts/core";
-import { ThemeProvider, useTheme as useTheme3 } from "@mui/material/styles";
+import { ThemeProvider, useTheme as useTheme4 } from "@mui/material/styles";
 import { jsx as jsx68, jsxs as jsxs27 } from "react/jsx-runtime";
 var LineChart2 = ({
   style: style3,
@@ -12307,11 +12421,15 @@ var LineChart2 = ({
   axisFontSize = "11px",
   axisFontColor = grey400,
   yAxisPosition = "right",
+  xAxisLabelRotationDegrees,
   xAxisMargin,
+  yAxisMargin,
+  stretch = false,
+  forceAllXLabels = false,
   chartRef,
   gridMargin
 }) => {
-  const theme2 = useTheme3();
+  const theme2 = useTheme4();
   const cursor2 = onClick ? "pointer" : "default";
   const silent = onClick ? false : true;
   const isComparing = series.some(
@@ -12481,6 +12599,7 @@ var LineChart2 = ({
     xAxis: {
       type: "category",
       data: categories,
+      ...stretch && { boundaryGap: false },
       axisLine: {
         show: !disableSplitLine,
         lineStyle: {
@@ -12495,7 +12614,11 @@ var LineChart2 = ({
         color: axisFontColor,
         fontSize: axisFontSize,
         show: true,
-        opacity: !disableAxes ? 1 : 0
+        opacity: !disableAxes ? 1 : 0,
+        ...forceAllXLabels && { interval: 0 },
+        ...xAxisLabelRotationDegrees && {
+          rotate: xAxisLabelRotationDegrees
+        }
       }
     },
     yAxis: [
@@ -12509,6 +12632,7 @@ var LineChart2 = ({
           }
         },
         axisLabel: {
+          ...yAxisMargin && { margin: yAxisMargin },
           color: axisFontColor,
           fontSize: axisFontSize,
           formatter: yAxisLabelFormatter,
@@ -13753,6 +13877,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
   cancelableButtonText,
   backgroundColor: backgroundColor2,
   highlightStartEdge = true,
+  maxWidth: maxWidth2,
   typographyColor,
   typographyVariant,
   onCancelableButtonClicked,
@@ -13783,7 +13908,7 @@ var ChatMessage = React35.forwardRef(function ChatMessage2({
                   sx: {
                     display: "flex",
                     alignItems: "flex-start",
-                    maxWidth: messageType === "outgoing" ? "93%" : "100%",
+                    maxWidth: !maxWidth2 ? messageType === "outgoing" ? "93%" : "100%" : `${maxWidth2}px`,
                     textAlign: "left"
                   },
                   children: /* @__PURE__ */ jsxs35(
@@ -18341,10 +18466,7 @@ var severityColors = {
 var StyledLabel = styled4("label", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
-  ({
-    severity,
-    theme: theme2
-  }) => theme2.unstable_sx({
+  ({ severity, theme: theme2 }) => theme2.unstable_sx({
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
@@ -18392,10 +18514,7 @@ var severityColors2 = {
 var StyledDiv = styled5("div", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
-  ({
-    severity,
-    theme: theme2
-  }) => theme2.unstable_sx({
+  ({ severity, theme: theme2 }) => theme2.unstable_sx({
     padding: "4px 8px",
     ...variants["caption"],
     color: severityColors2[severity]
@@ -18837,7 +18956,7 @@ import { tz as tz2 } from "moment-timezone";
 import { lighten as lighten2 } from "@mui/material";
 
 // src/components/input/CalendarDay.tsx
-import { useTheme as useTheme4 } from "@mui/material/styles";
+import { useTheme as useTheme5 } from "@mui/material/styles";
 import { jsx as jsx102 } from "react/jsx-runtime";
 var calendarDayButtonSize = 32;
 var CalendarDayButton = styled_default("button")({});
@@ -18855,7 +18974,7 @@ var CalendarDay = ({
   },
   allowKeyboardNavigation = false
 }) => {
-  const theme2 = useTheme4();
+  const theme2 = useTheme5();
   return /* @__PURE__ */ jsx102(
     CalendarDayButton,
     {
@@ -24277,9 +24396,9 @@ var MarkdownContainer = styled8("div")(
     borderRadius: "8px",
     overflowWrap: "break-word",
     "& h1, & h2, & h3": { color: color2 },
-    "& h1:not(:first-child)": { marginTop: "40px" },
-    "& h2:not(:first-child)": { marginTop: "32px" },
-    "& h3:not(:first-child)": { marginTop: "20px" },
+    "& :is(h1, h2, h3) ~ h1": { marginTop: "40px" },
+    "& :is(h1, h2, h3) ~ h2": { marginTop: "32px" },
+    "& :is(h1, h2, h3) ~ h3": { marginTop: "20px" },
     "& h1": { fontSize: "1.75rem" },
     "& h2": { fontSize: "1.5rem" },
     "& h3": { fontSize: "1.25rem" },
@@ -24328,16 +24447,16 @@ var MarkdownContainer = styled8("div")(
       textAlign: "left",
       ...lineHeight && { lineHeight: `${lineHeight}px` }
     },
-    "& table tr:first-child th:first-child": {
+    "& table tr:first-of-type th:first-of-type": {
       borderTopLeftRadius: "8px"
     },
-    "& table tr:first-child th:last-child": {
+    "& table tr:first-of-type th:last-of-type": {
       borderTopRightRadius: "8px"
     },
-    "& table tr:last-child td:first-child": {
+    "& table tr:last-of-type td:first-of-type": {
       borderBottomLeftRadius: "8px"
     },
-    "& table tr:last-child td:last-child": {
+    "& table tr:last-of-type td:last-of-type": {
       borderBottomRightRadius: "8px"
     },
     "& th": { backgroundColor: dark800, color: white },