@connectif/ui-components 5.4.1 → 5.4.2

package/dist/index.js

@@ -8128,90 +8128,93 @@ var BaseListItem = ({
   tooltipClass,
   slotProps,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs2(
-  Stack_default,
-  {
-    direction: "row",
-    spacing: 2,
-    className: "Cn-BaseListItem",
-    sx: {
-      justifyContent: "space-between",
-      padding: "0 12px",
-      height: "44px",
-      alignItems: "center",
-      width: "100%",
-      boxSizing: "border-box",
-      backgroundColor: selected ? primary50 : white,
-      color: color2 === "primary" ? primaryMain : grey800,
-      ...variant === "circular" && {
-        borderRadius: "22px",
-        border: `1px solid ${grey200}`,
-        overflow: "hidden"
+}) => {
+  const { palette: palette2 } = useCustomTheme();
+  return /* @__PURE__ */ jsxs2(
+    Stack_default,
+    {
+      direction: "row",
+      spacing: 2,
+      className: "Cn-BaseListItem",
+      sx: {
+        justifyContent: "space-between",
+        padding: "0 12px",
+        height: "44px",
+        alignItems: "center",
+        width: "100%",
+        boxSizing: "border-box",
+        backgroundColor: selected ? palette2.primary[50] : palette2.common.white,
+        color: color2 === "primary" ? palette2.primary.main : palette2.grey[800],
+        ...variant === "circular" && {
+          borderRadius: "22px",
+          border: `1px solid ${palette2.grey[200]}`,
+          overflow: "hidden"
+        },
+        ...baseSx
       },
-      ...baseSx
-    },
-    children: [
-      startIconId ? /* @__PURE__ */ jsx7(
-        Icon_default,
-        {
-          id: startIconId,
-          sx: {
-            color: "inherit",
-            margin: "4px"
-            // to make the icon be 32x32
-          },
-          size: "M"
-        }
-      ) : startAdornment,
-      /* @__PURE__ */ jsx7(
-        Stack_default,
-        {
-          sx: {
-            flexGrow: 1,
-            width: "100%",
-            overflow: "auto"
-          },
-          children: children ? children : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-            /* @__PURE__ */ jsx7(
-              ListItemText_default,
-              {
-                text,
-                typographyVariant,
-                tooltipClass,
-                slotProps,
-                ...dataTestId && {
-                  "data-testid": dataTestId
+      children: [
+        startIconId ? /* @__PURE__ */ jsx7(
+          Icon_default,
+          {
+            id: startIconId,
+            sx: {
+              color: "inherit",
+              margin: "4px"
+              // to make the icon be 32x32
+            },
+            size: "M"
+          }
+        ) : startAdornment,
+        /* @__PURE__ */ jsx7(
+          Stack_default,
+          {
+            sx: {
+              flexGrow: 1,
+              width: "100%",
+              overflow: "auto"
+            },
+            children: children ? children : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx7(
+                ListItemText_default,
+                {
+                  text,
+                  typographyVariant,
+                  tooltipClass,
+                  slotProps,
+                  ...dataTestId && {
+                    "data-testid": dataTestId
+                  }
                 }
-              }
-            ),
-            subText && /* @__PURE__ */ jsx7(
-              ListItemText_default,
-              {
-                text: subText,
-                typographyVariant: "caption",
-                tooltipClass,
-                slotProps,
-                color: grey500
-              }
-            )
-          ] })
-        }
-      ),
-      endIconId ? /* @__PURE__ */ jsx7(
-        Icon_default,
-        {
-          id: endIconId,
-          sx: {
-            color: "inherit",
-            margin: "4px"
-            // to make the icon be 32x32
-          },
-          size: "M"
-        }
-      ) : endAdornment
-    ]
-  }
-);
+              ),
+              subText && /* @__PURE__ */ jsx7(
+                ListItemText_default,
+                {
+                  text: subText,
+                  typographyVariant: "caption",
+                  tooltipClass,
+                  slotProps,
+                  color: palette2.grey[500]
+                }
+              )
+            ] })
+          }
+        ),
+        endIconId ? /* @__PURE__ */ jsx7(
+          Icon_default,
+          {
+            id: endIconId,
+            sx: {
+              color: "inherit",
+              margin: "4px"
+              // to make the icon be 32x32
+            },
+            size: "M"
+          }
+        ) : endAdornment
+      ]
+    }
+  );
+};
 var BaseListItem_default = BaseListItem;
 
 // src/components/list/ListItemButton.tsx
@@ -8240,6 +8243,7 @@ var ListItemButton = React9.forwardRef(function ListItemButton2({
   slotProps,
   ...rest
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
   return /* @__PURE__ */ jsx8(
     MuiListItemButton,
     {
@@ -8255,7 +8259,7 @@ var ListItemButton = React9.forwardRef(function ListItemButton2({
         p: 0,
         ...!selected && {
           ["&:is(:hover,:focus) > .Cn-BaseListItem"]: {
-            backgroundColor: grey50
+            backgroundColor: palette2.grey[50]
           }
         },
         ...sx
@@ -9354,6 +9358,7 @@ var Avatar = React15.forwardRef(function Avatar2({
   className,
   ...props
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
   const sizeStyle = {
     width: sizes3[size].side,
     height: sizes3[size].side,
@@ -9361,8 +9366,8 @@ var Avatar = React15.forwardRef(function Avatar2({
     minHeight: sizes3[size].side,
     fontSize: sizes3[size].fontSize
   };
-  const backgroundColor2 = !props.src ? avatarLetters ? grey500 : grey300 : null;
-  const color2 = avatarLetters ? "white" : grey500;
+  const backgroundColor2 = !props.src ? avatarLetters ? palette2.grey[500] : palette2.grey[300] : null;
+  const color2 = avatarLetters ? palette2.common.white : palette2.grey[500];
   const innerComponent = avatarLetters ? avatarLetters.substring(0, 2) : iconId && /* @__PURE__ */ jsx29(Icon_default, { id: iconId, size: sizes3[size].iconSize });
   return /* @__PURE__ */ jsx29(
     MuiAvatar,
@@ -9415,127 +9420,6 @@ var AvatarMultiple_default = AvatarMultiple;
 // src/components/avatar/AvatarCard.tsx
 import * as React18 from "react";
 
-// src/theme/Animations.ts
-var Animations_exports = {};
-__export(Animations_exports, {
-  backgroundMovingBars: () => backgroundMovingBars,
-  littleBeating: () => littleBeating
-});
-var barSize = 20;
-var barAlpha = 0.15;
-var backgroundMovingBarsAnimation = keyframes`
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: -${barSize / Math.sqrt(2)}px -${barSize / Math.sqrt(2)}px;
-`;
-var backgroundMovingBars = {
-  backgroundImage: `repeating-linear-gradient(-45deg, rgba(255, 255, 255, ${barAlpha}), rgba(255, 255, 255, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize}px)`,
-  animation: `${backgroundMovingBarsAnimation} 1s linear infinite`,
-  backgroundSize: "200% 200%"
-};
-var littleBeatingAnimation = keyframes`
-  0% {
-    transform: scale(1);
-  }
-  50%{
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-`;
-var littleBeating = {
-  animation: `${littleBeatingAnimation} 2s linear infinite`
-};
-
-// src/theme/GlobalStyles.ts
-var GlobalStyles_exports = {};
-__export(GlobalStyles_exports, {
-  default: () => GlobalStyles_default
-});
-var globalStyles = {
-  ".Slim-Vertical-Scroll": {
-    "@-moz-document url-prefix()": {
-      "&": {
-        scrollbarColor: "silver transparent",
-        scrollbarWidth: "auto"
-      }
-    },
-    overflow: "auto",
-    overflowX: "hidden",
-    "&::-webkit-scrollbar": {
-      width: "8px"
-    },
-    "&::-webkit-scrollbar-button": {
-      height: 0
-    },
-    "&::-webkit-scrollbar-track-piece": {
-      background: "transparent",
-      borderRadius: "4px"
-    },
-    "&::-webkit-scrollbar-thumb": {
-      background: "silver",
-      borderRadius: "4px"
-    }
-  },
-  ".Slim-Horizontal-Scroll": {
-    "@-moz-document url-prefix()": {
-      "&": {
-        scrollbarColor: "silver transparent",
-        scrollbarWidth: "auto"
-      }
-    },
-    overflow: "auto",
-    overflowY: "hidden",
-    "&::-webkit-scrollbar": {
-      height: "8px"
-    },
-    "&::-webkit-scrollbar-button": {
-      width: 0
-    },
-    "&::-webkit-scrollbar-track-piece": {
-      background: "transparent"
-    },
-    "&::-webkit-scrollbar-thumb": {
-      background: "silver"
-    }
-  },
-  ".Slim-Vertical-Horizontal-Scroll": {
-    "@-moz-document url-prefix()": {
-      "&": {
-        scrollbarColor: "silver transparent",
-        scrollbarWidth: "auto"
-      }
-    },
-    overflow: "auto",
-    "&::-webkit-scrollbar": {
-      height: "8px",
-      width: "8px"
-    },
-    "&::-webkit-scrollbar-button": {
-      width: 0,
-      height: 0
-    },
-    "&::-webkit-scrollbar-track-piece": {
-      background: "transparent"
-    },
-    "&::-webkit-scrollbar-thumb": {
-      background: "silver"
-    }
-  },
-  ".Fade-In-Out": {
-    transition: "opacity 0.25s, visibility 0.25s",
-    opacity: 0,
-    "&::WebkitTransition": "opacity 0.25s, visibility 0.25s"
-  },
-  ".SnackBar-Container": {
-    zIndex: "10000 !important"
-  }
-};
-var GlobalStyles_default = globalStyles;
-
 // src/components/tooltip/TooltipMenu.tsx
 import { Tooltip as Tooltip3, tooltipClasses } from "@mui/material";
 import { jsx as jsx31 } from "react/jsx-runtime";
@@ -9657,17 +9541,18 @@ var AvatarCard = ({
   onClick,
   ...rest
 }) => {
+  const { palette: palette2 } = useCustomTheme();
   const textElementRef = React18.useRef(null);
   return /* @__PURE__ */ jsx33(Box_default2, { sx: { ...!selected && { margin: "1px" } }, children: /* @__PURE__ */ jsx33(
     Box_default2,
     {
       sx: {
-        border: `${selected ? "2px" : "1px"} solid ${selected ? Colors_exports.primaryMain : Colors_exports.grey200}`,
+        border: `${selected ? "2px" : "1px"} solid ${selected ? palette2.primary.main : palette2.grey[200]}`,
         borderRadius: "4px",
         width: "fit-content",
         height: "fit-content",
         ...onClick && { cursor: "pointer" },
-        ...selected && { backgroundColor: Colors_exports.primary100 }
+        ...selected && { backgroundColor: palette2.primary[100] }
       },
       onClick,
       children: /* @__PURE__ */ jsxs12(
@@ -11387,6 +11272,41 @@ var CardImage = ({ imageUrl, size = "md" }) => /* @__PURE__ */ jsx58(
 );
 var CardImage_default = CardImage;
 
+// src/theme/Animations.ts
+var Animations_exports = {};
+__export(Animations_exports, {
+  backgroundMovingBars: () => backgroundMovingBars,
+  littleBeating: () => littleBeating
+});
+var barSize = 20;
+var barAlpha = 0.15;
+var backgroundMovingBarsAnimation = keyframes`
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: -${barSize / Math.sqrt(2)}px -${barSize / Math.sqrt(2)}px;
+`;
+var backgroundMovingBars = {
+  backgroundImage: `repeating-linear-gradient(-45deg, rgba(255, 255, 255, ${barAlpha}), rgba(255, 255, 255, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize / 2}px, rgba(0, 0, 0, ${barAlpha}) ${barSize}px)`,
+  animation: `${backgroundMovingBarsAnimation} 1s linear infinite`,
+  backgroundSize: "200% 200%"
+};
+var littleBeatingAnimation = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50%{
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+var littleBeating = {
+  animation: `${littleBeatingAnimation} 2s linear infinite`
+};
+
 // src/components/card/CardStatus.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
 var CardStatus = ({
@@ -11537,6 +11457,92 @@ var MenuChip_default = MenuChip;
 // src/components/chip/ChipViewer.tsx
 import * as React31 from "react";
 
+// src/theme/GlobalStyles.ts
+var GlobalStyles_exports = {};
+__export(GlobalStyles_exports, {
+  default: () => GlobalStyles_default
+});
+var globalStyles = {
+  ".Slim-Vertical-Scroll": {
+    "@-moz-document url-prefix()": {
+      "&": {
+        scrollbarColor: "silver transparent",
+        scrollbarWidth: "auto"
+      }
+    },
+    overflow: "auto",
+    overflowX: "hidden",
+    "&::-webkit-scrollbar": {
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-button": {
+      height: 0
+    },
+    "&::-webkit-scrollbar-track-piece": {
+      background: "transparent",
+      borderRadius: "4px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: "silver",
+      borderRadius: "4px"
+    }
+  },
+  ".Slim-Horizontal-Scroll": {
+    "@-moz-document url-prefix()": {
+      "&": {
+        scrollbarColor: "silver transparent",
+        scrollbarWidth: "auto"
+      }
+    },
+    overflow: "auto",
+    overflowY: "hidden",
+    "&::-webkit-scrollbar": {
+      height: "8px"
+    },
+    "&::-webkit-scrollbar-button": {
+      width: 0
+    },
+    "&::-webkit-scrollbar-track-piece": {
+      background: "transparent"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: "silver"
+    }
+  },
+  ".Slim-Vertical-Horizontal-Scroll": {
+    "@-moz-document url-prefix()": {
+      "&": {
+        scrollbarColor: "silver transparent",
+        scrollbarWidth: "auto"
+      }
+    },
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      height: "8px",
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-button": {
+      width: 0,
+      height: 0
+    },
+    "&::-webkit-scrollbar-track-piece": {
+      background: "transparent"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: "silver"
+    }
+  },
+  ".Fade-In-Out": {
+    transition: "opacity 0.25s, visibility 0.25s",
+    opacity: 0,
+    "&::WebkitTransition": "opacity 0.25s, visibility 0.25s"
+  },
+  ".SnackBar-Container": {
+    zIndex: "10000 !important"
+  }
+};
+var GlobalStyles_default = globalStyles;
+
 // src/components/chip/ChipHiddenCounter.tsx
 import * as React30 from "react";
 import { Popper } from "@mui/material";
@@ -16236,6 +16242,7 @@ var Dialog = ({
   onClose,
   ...rest
 }) => {
+  const { palette: palette2 } = useCustomTheme();
   const getDialogContent = () => /* @__PURE__ */ jsxs39(Fragment15, { children: [
     /* @__PURE__ */ jsxs39(
       Stack_default,
@@ -16252,7 +16259,10 @@ var Dialog = ({
             {
               iconId: "close",
               onClick: onClose,
-              sx: { color: grey500, transform: "translateX(8px)" }
+              sx: {
+                color: palette2.grey[500],
+                transform: "translateX(8px)"
+              }
             }
           )
         ]
@@ -16311,6 +16321,7 @@ var ConfirmationDialog = ({
   ...rest
 }) => {
   const { t } = useTranslation();
+  const { palette: palette2 } = useCustomTheme();
   const scrollContainer = React39.useRef(null);
   const [observeScroll, setObserveScroll] = React39.useState();
   const [hasScrollPopup, setHasScrollPopup] = React39.useState(false);
@@ -16355,7 +16366,7 @@ var ConfirmationDialog = ({
           justifyContent: rest.fullScreen ? "space-between" : void 0,
           sx: {
             ...displayBorders && {
-              borderTop: `1px solid ${grey200}`
+              borderTop: `1px solid ${palette2.grey[200]}`
             }
           },
           children: [
@@ -16375,7 +16386,7 @@ var ConfirmationDialog = ({
                 sx: {
                   padding: "16px 24px 16px 24px",
                   ...(hasScrollPopup || displayBorders) && {
-                    borderTop: `1px solid ${grey200}`
+                    borderTop: `1px solid ${palette2.grey[200]}`
                   }
                 },
                 children: [
@@ -19057,7 +19068,7 @@ import { jsx as jsx98 } from "react/jsx-runtime";
 var TextFieldContainer = React49.forwardRef(function TextFieldContainer2({
   children,
   variant = "default",
-  activeColor = primaryMain,
+  activeColor,
   disabled,
   highlighted,
   isError,
@@ -19070,6 +19081,8 @@ var TextFieldContainer = React49.forwardRef(function TextFieldContainer2({
   onMouseEnter,
   onMouseLeave
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
+  const effectiveActiveColor = activeColor ?? palette2.primary.main;
   return /* @__PURE__ */ jsx98(
     Box_default2,
     {
@@ -19080,37 +19093,37 @@ var TextFieldContainer = React49.forwardRef(function TextFieldContainer2({
         display: "flex",
         alignItems: multiline ? "start" : "center",
         gap: "8px",
-        backgroundColor: variant === "default" ? white : "transparent",
+        backgroundColor: variant === "default" ? palette2.common.white : "transparent",
         width: "100%",
         minHeight: "36px",
         overflow: "hidden",
-        border: variant === "default" ? `1px solid ${grey200}` : "none",
+        border: variant === "default" ? `1px solid ${palette2.grey[200]}` : "none",
         borderRadius: variant === "default" ? "4px" : 0,
-        color: isFocused ? activeColor : grey400,
+        color: isFocused ? effectiveActiveColor : palette2.grey[400],
         padding: variant === "default" ? "1px 1px 1px 7px" : "2px 2px 2px 8px",
         boxSizing: "border-box",
         justifyContent: "end",
         ...!disabled && isFocused && {
-          borderColor: activeColor,
-          color: activeColor
+          borderColor: effectiveActiveColor,
+          color: effectiveActiveColor
         },
         ...isError && {
-          borderColor: errorMain,
-          color: errorMain
+          borderColor: palette2.error.main,
+          color: palette2.error.main
         },
         ...disabled && {
           opacity: 0.5
         },
         ...highlighted && {
-          backgroundColor: lighten(activeColor, 0.6)
+          backgroundColor: lighten(effectiveActiveColor, 0.6)
         },
         ...disabled && {
           cursor: "text"
         },
         ...!disabled && !isFocused && !isError && {
           "&:hover": {
-            borderColor: grey800,
-            color: grey800
+            borderColor: palette2.grey[800],
+            color: palette2.grey[800]
           }
         },
         ...sx
@@ -19163,10 +19176,7 @@ import { styled as styled6 } from "@mui/material";
 import * as React50 from "react";
 import { styled as styled4 } from "@mui/material";
 import { jsx as jsx99, jsxs as jsxs44 } from "react/jsx-runtime";
-var severityColors = {
-  info: grey900,
-  error: errorMain
-};
+var getSeverityColor = ({ palette: palette2 }, severity) => severity === "error" ? palette2.error.main : palette2.grey[900];
 var StyledLabel = styled4("label", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
@@ -19174,7 +19184,7 @@ var StyledLabel = styled4("label", {
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
-    color: severityColors[severity]
+    color: getSeverityColor(theme2, severity)
   })
 );
 var InputLabel = React50.forwardRef(
@@ -19193,11 +19203,11 @@ var InputLabel = React50.forwardRef(
             {
               id: "information-outline",
               size: "XS",
-              sx: {
+              sx: (theme2) => ({
                 marginLeft: "5px",
-                color: severityColors[severity],
+                color: getSeverityColor(theme2, severity),
                 alignSelf: "center"
-              }
+              })
             }
           ) })
         ]
@@ -19211,17 +19221,14 @@ var InputLabel_default = InputLabel;
 import { styled as styled5 } from "@mui/material";
 import * as React51 from "react";
 import { jsx as jsx100 } from "react/jsx-runtime";
-var severityColors2 = {
-  info: grey800,
-  error: errorMain
-};
+var getSeverityColor2 = ({ palette: palette2 }, severity) => severity === "error" ? palette2.error.main : palette2.grey[800];
 var StyledDiv = styled5("div", {
   shouldForwardProp: (prop) => prop !== "severity"
 })(
   ({ severity, theme: theme2 }) => theme2.unstable_sx({
     padding: "4px 8px",
     ...variants["caption"],
-    color: severityColors2[severity]
+    color: getSeverityColor2(theme2, severity)
   })
 );
 var InputHelperText = React51.forwardRef(
@@ -19236,10 +19243,7 @@ import { Fragment as Fragment22, jsx as jsx101, jsxs as jsxs45 } from "react/jsx
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
-function getCommonInputStyles({
-  disabled,
-  typographyVariant
-}) {
+function getCommonInputStyles({ palette: palette2 }, { disabled, typographyVariant }) {
   return {
     ...variants[typographyVariant ?? "body2"],
     backgroundColor: "transparent",
@@ -19248,13 +19252,13 @@ function getCommonInputStyles({
     minWidth: "64px",
     flexGrow: 1,
     border: "none",
-    color: disabled ? grey600 : grey800,
+    color: disabled ? palette2.grey[600] : palette2.grey[800],
     boxSizing: "border-box",
     outline: "none",
     padding: "6px 0",
     textOverflow: "ellipsis",
     "&::placeholder": {
-      color: grey600
+      color: palette2.grey[600]
     }
   };
 }
@@ -19262,14 +19266,14 @@ var StyledInput = styled6(
   "input",
   commonInputStylesOptions
 )(
-  (props) => props.theme.unstable_sx(getCommonInputStyles(props))
+  ({ theme: theme2, ...props }) => theme2.unstable_sx(getCommonInputStyles(theme2, props))
 );
 var StyledTextarea = styled6(
   "textarea",
   commonInputStylesOptions
 )(
-  (props) => props.theme.unstable_sx({
-    ...getCommonInputStyles(props),
+  ({ theme: theme2, ...props }) => theme2.unstable_sx({
+    ...getCommonInputStyles(theme2, props),
     resize: "none",
     minWidth: "50%"
   })
@@ -19279,7 +19283,7 @@ var TextField = React52.forwardRef(function TextField2({
   id: customId,
   variant = "default",
   disabled = false,
-  activeColor = primaryMain,
+  activeColor,
   highlighted = false,
   sx,
   inputSx,
@@ -19314,11 +19318,13 @@ var TextField = React52.forwardRef(function TextField2({
   onMouseLeave,
   ...restProps
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
   const [id] = React52.useState(Math.random().toString(10));
   const inputRef = React52.useRef(null);
   const _containerRef = React52.useRef(null);
   const existsClearButton = !!(value && isClearable && !disabled);
   const [isFocused, setFocused] = React52.useState(false);
+  const effectiveActiveColor = activeColor ?? palette2.primary.main;
   const onInputFocus = React52.useCallback(
     (event) => {
       setFocused(true);
@@ -19343,19 +19349,22 @@ var TextField = React52.forwardRef(function TextField2({
         }
       }
     },
-    [ref, inputRef, isFocused, disabled]
+    [ref, inputRef, isFocused, disabled, containerRef]
   );
   const getTextFieldContainer = () => /* @__PURE__ */ jsxs45(
     TextFieldContainer_default,
     {
       variant,
       disabled,
-      activeColor,
+      activeColor: effectiveActiveColor,
       highlighted,
       isFocused,
       isError,
       multiline,
-      sx: { backgroundColor: readOnly ? grey50 : "transparent", ...sx },
+      sx: {
+        backgroundColor: readOnly ? palette2.grey[50] : "transparent",
+        ...sx
+      },
       onClick: onContainerClick,
       ref: containerRef,
       className: `Cn-TextField ${className}`,
@@ -19499,7 +19508,7 @@ var TextField = React52.forwardRef(function TextField2({
         htmlFor: customId ?? id,
         severity: isError ? "error" : "info",
         sx: {
-          ...!isError && isFocused && { color: activeColor }
+          ...!isError && isFocused && { color: effectiveActiveColor }
         },
         ...labelInfoText && {
           infoText: labelInfoText
@@ -19535,7 +19544,7 @@ var TextField = React52.forwardRef(function TextField2({
           ["> .Cn-IconButton"]: {
             height: "36px",
             width: "36px",
-            border: variant === "default" ? `1px solid ${grey200}` : null
+            border: variant === "default" ? `1px solid ${palette2.grey[200]}` : null
           }
         },
         children: [
@@ -19551,7 +19560,7 @@ var TextField = React52.forwardRef(function TextField2({
       {
         severity: isError ? "error" : "info",
         sx: {
-          ...!isError && isFocused && { color: activeColor }
+          ...!isError && isFocused && { color: effectiveActiveColor }
         },
         children: helperText
       }
@@ -21247,19 +21256,19 @@ import AutoSizer4 from "react-virtualized-auto-sizer";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var BootstrapInput = styled7(InputBase, {
   shouldForwardProp: (prop) => prop !== "notched"
-})(() => ({
+})(({ theme: { palette: palette2 } }) => ({
   boxShadow: shadows[0],
   borderRadius: "16px",
   borderWidth: "1px",
   borderStyle: "solid",
-  borderColor: grey200,
+  borderColor: palette2.grey[200],
   backgroundColor: "white",
   cursor: "default",
   maxWidth: "100%",
   "& .MuiInputBase-input.MuiSelect-select": {
     ...variants["button-medium"],
     padding: "0 36px 0 12px !important",
-    color: grey800,
+    color: palette2.grey[800],
     boxSizing: "border-box",
     height: "26px",
     // 26px height + 1px * 2 from borders => 28px height
@@ -21271,24 +21280,27 @@ var BootstrapInput = styled7(InputBase, {
     }
   },
   "&.Mui-focused": {
-    backgroundColor: grey200
+    backgroundColor: palette2.grey[200]
   },
   "&:hover:not(.Mui-disabled)": {
-    borderColor: grey800
+    borderColor: palette2.grey[800]
   }
 }));
-var ChevronIcon = ({ disabled = false }) => /* @__PURE__ */ jsx115(
-  Icon_default,
-  {
-    id: "chevron-down",
-    size: "M",
-    sx: {
-      marginLeft: "-24px !important",
-      transform: "translateX(-8px) !important",
-      color: disabled ? `${grey400} !important` : grey800
+var ChevronIcon = ({ disabled = false }) => {
+  const { palette: palette2 } = useCustomTheme();
+  return /* @__PURE__ */ jsx115(
+    Icon_default,
+    {
+      id: "chevron-down",
+      size: "M",
+      sx: {
+        marginLeft: "-24px !important",
+        transform: "translateX(-8px) !important",
+        color: disabled ? `${palette2.grey[400]} !important` : palette2.grey[800]
+      }
     }
-  }
-);
+  );
+};
 var SelectOption = ({
   value,
   id,
@@ -21352,6 +21364,7 @@ var Select = function Select2({
   onOpen,
   ...rest
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
   const [_isOpen, setOpen] = React60.useState(false);
   const isOpen = open ?? _isOpen;
   const currentValue = React60.useMemo(
@@ -21404,7 +21417,7 @@ var Select = function Select2({
           ...style3
         },
         baseSx: {
-          backgroundColor: isSelected ? menuColors?.selectedColor ?? primary50 : "transparent",
+          backgroundColor: isSelected ? menuColors?.selectedColor ?? palette2.primary[50] : "transparent",
           color: menuColors?.color
         },
         ...rest2
@@ -21436,10 +21449,10 @@ var Select = function Select2({
         },
         ...isOpen && {
           ...variant !== "transparent" && {
-            borderColor: primaryMain
+            borderColor: palette2.primary.main
           },
           "& .MuiSvgIcon-root": {
-            color: primaryMain,
+            color: palette2.primary.main,
             transform: "rotate(180deg) translateX(8px)"
           }
         },
@@ -21465,7 +21478,7 @@ var Select = function Select2({
           return renderValue(value2, options);
         }
         if (!value2) {
-          return /* @__PURE__ */ jsx115("span", { style: { color: grey900 }, children: placeholder });
+          return /* @__PURE__ */ jsx115("span", { style: { color: palette2.grey[900] }, children: placeholder });
         }
         return options.find((o) => o.value === value2)?.label ?? value2;
       },
@@ -21537,10 +21550,10 @@ var Select = function Select2({
         },
         ...isOpen && {
           ...variant !== "transparent" && {
-            borderColor: primaryMain
+            borderColor: palette2.primary.main
           },
           "& .MuiSvgIcon-root": {
-            color: primaryMain,
+            color: palette2.primary.main,
             transform: "rotate(180deg) translateX(8px)"
           }
         },
@@ -21571,7 +21584,7 @@ var Select = function Select2({
         }
         if (Array.isArray(value2)) {
           if (value2.length === 0) {
-            return /* @__PURE__ */ jsx115("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx115("span", { style: { color: palette2.grey[900] }, children: placeholder });
           } else {
             return value2.map((v) => {
               const option = options.find((o) => o.value === v);
@@ -21580,7 +21593,7 @@ var Select = function Select2({
           }
         } else {
           if (!value2) {
-            return /* @__PURE__ */ jsx115("span", { style: { color: grey900 }, children: placeholder });
+            return /* @__PURE__ */ jsx115("span", { style: { color: palette2.grey[900] }, children: placeholder });
           }
           return options.find((o) => o.value === value2)?.label ?? value2;
         }
@@ -21618,7 +21631,7 @@ var Select = function Select2({
             id: optionValue,
             colors: !menuColors?.selectedColor ? {
               ...menuColors ?? {},
-              selectedColor: primary50
+              selectedColor: palette2.primary[50]
             } : menuColors,
             selected: Array.isArray(currentValue) ? currentValue.some((v) => v === optionValue) : currentValue === optionValue,
             slotProps: { optionText: { sx: sx2 } },
@@ -23321,6 +23334,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
   onOpenPopover,
   onRemoveValue
 }) {
+  const { palette: palette2 } = useCustomTheme();
   const stackRef = React69.useRef(null);
   return /* @__PURE__ */ jsxs60(
     Stack_default,
@@ -23347,7 +23361,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
             sx: {
               padding: 0,
               ...(disabled || !canAddValues) && {
-                color: `${Colors_exports.grey500} !important`,
+                color: `${palette2.grey[500]} !important`,
                 opacity: "1 !important",
                 flex: "0 0 auto"
               }
@@ -23362,7 +23376,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
             TextEllipsis_default,
             {
               typographyVariant: "body2",
-              color: grey900,
+              color: palette2.grey[900],
               text: renderLabel(
                 value
               )
@@ -23423,6 +23437,7 @@ var AutocompleteInput = function AutocompleteInput2({
   onPressEnter,
   onRemoveValue
 }) {
+  const { palette: palette2 } = useCustomTheme();
   const { t } = useTranslation();
   const [isHover, setIsHover] = React70.useState(false);
   const dirty = !!inputValue || Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value;
@@ -23442,7 +23457,7 @@ var AutocompleteInput = function AutocompleteInput2({
           padding: 0
         },
         ...disabled && {
-          background: Colors_exports.grey50
+          background: palette2.grey[50]
         },
         gap: 0,
         "& > div:first-of-type": {
@@ -23455,13 +23470,13 @@ var AutocompleteInput = function AutocompleteInput2({
         flex: "1 1 auto",
         minWidth: showClearButton ? `${INPUT_MIN_WIDTH}px` : `${INPUT_MIN_WIDTH + CLEAR_BUTTON_WIDTH}px`,
         ...disabled && {
-          color: Colors_exports.grey500
+          color: palette2.grey[500]
         },
         ...disabled && value && {
           display: "none"
         },
         "&::placeholder": {
-          color: Colors_exports.grey500
+          color: palette2.grey[500]
         }
       },
       maxLength: maxValueLength,
@@ -23570,7 +23585,7 @@ var AutocompleteInput = function AutocompleteInput2({
                       padding: 0,
                       marginLeft: 0,
                       ...!canAddValues && {
-                        color: `${Colors_exports.grey500} !important`,
+                        color: `${palette2.grey[500]} !important`,
                         opacity: "1 !important"
                       }
                     },
@@ -23640,6 +23655,7 @@ var AutocompleteList = function AutocompleteList2({
   onAddSelectedValue,
   onClickAwayPopover
 }) {
+  const { palette: palette2 } = useCustomTheme();
   const { t } = useTranslation();
   const listRef = React71.useRef(null);
   const getText = (option) => {
@@ -23663,7 +23679,7 @@ var AutocompleteList = function AutocompleteList2({
         tabIndex: -1,
         role: "option",
         baseSx: {
-          color: Colors_exports.grey900
+          color: palette2.grey[900]
         },
         sx: {
           ...style3,
@@ -23672,7 +23688,7 @@ var AutocompleteList = function AutocompleteList2({
               content: '""',
               position: "absolute",
               inset: 0,
-              border: `1px solid ${Colors_exports.black}`,
+              border: `1px solid ${palette2.common.black}`,
               borderRadius: "8px",
               pointerEvents: "none"
             }
@@ -24898,6 +24914,7 @@ var NumberField = React77.forwardRef(function NumberField2({
   endAdornment,
   ...rest
 }, ref) {
+  const { palette: palette2 } = useCustomTheme();
   const inputRef = React77.useRef(null);
   const numberToString = React77.useCallback(
     (value2) => typeof value2 === "number" && !isNaN(value2) ? fractionDigits !== 0 ? value2.toFixed(fractionDigits) : value2.toString() : "",
@@ -25022,7 +25039,7 @@ var NumberField = React77.forwardRef(function NumberField2({
       {
         justifyContent: "center",
         alignItems: "center",
-        borderLeft: `1px solid ${grey200}`,
+        borderLeft: `1px solid ${palette2.grey[200]}`,
         sx: {
           "& > span": {
             display: "flex"