@connectif/ui-components 2.0.20 → 2.2.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";
@@ -9858,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]
     }
   }
 });
@@ -10065,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,
     {
@@ -10210,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(
@@ -12293,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,
@@ -12317,7 +12429,7 @@ var LineChart2 = ({
   chartRef,
   gridMargin
 }) => {
-  const theme2 = useTheme3();
+  const theme2 = useTheme4();
   const cursor2 = onClick ? "pointer" : "default";
   const silent = onClick ? false : true;
   const isComparing = series.some(
@@ -18354,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"],
@@ -18405,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]
@@ -18850,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")({});
@@ -18868,7 +18974,7 @@ var CalendarDay = ({
   },
   allowKeyboardNavigation = false
 }) => {
-  const theme2 = useTheme4();
+  const theme2 = useTheme5();
   return /* @__PURE__ */ jsx102(
     CalendarDayButton,
     {

package/dist/theme/Colors.d.ts

@@ -69,7 +69,6 @@ export declare const blueGrey400 = "#646D7A";
 export declare const blueGrey500 = "#495362";
 export declare const blueGrey700 = "#414A58";
 export declare const blueGrey800 = "#383F4C";
-export declare const blueGreyOpacity05 = "rgba(65, 74, 88, 0.05)";
 export declare const lightGreen = "#599D7D";
 export declare const darkGreen = "#487F65";
 export declare const dark500 = "#7F8BA8";

package/dist/theme/CustomPalette.d.ts

@@ -0,0 +1,29 @@
+import { Palette, PaletteOptions } from '@mui/material/styles';
+import { CustomPaletteColor, CustomPaletteColorOptions } from './CustomPaletteColor';
+import { CustomPaletteCommon, CustomPaletteCommonOptions } from './CustomPaletteCommon';
+export interface CustomPalette extends Palette {
+    primary: CustomPaletteColor;
+    complementary: CustomPaletteColor;
+    error: CustomPaletteColor;
+    success: CustomPaletteColor;
+    grey: CustomPaletteColor;
+    common: CustomPaletteCommon;
+    blueGrey: CustomPaletteColor;
+    green: CustomPaletteColor;
+    dark: CustomPaletteColor;
+    electricLavender: CustomPaletteColor;
+    cornflowerBlue: CustomPaletteColor;
+}
+export interface CustomPaletteOptions extends PaletteOptions {
+    primary?: CustomPaletteColorOptions;
+    complementary?: CustomPaletteColorOptions;
+    error?: CustomPaletteColorOptions;
+    success?: CustomPaletteColorOptions;
+    grey?: CustomPaletteColorOptions;
+    common?: CustomPaletteCommonOptions;
+    blueGrey?: CustomPaletteColorOptions;
+    green?: CustomPaletteColorOptions;
+    dark?: CustomPaletteColorOptions;
+    electricLavender?: CustomPaletteColorOptions;
+    cornflowerBlue?: CustomPaletteColorOptions;
+}

package/dist/theme/CustomPaletteColor.d.ts

@@ -0,0 +1,10 @@
+import { Color, PaletteColor } from '@mui/material/styles';
+export interface CustomPaletteColor extends PaletteColor, Color {
+    25?: string;
+    opacity32?: string;
+    alpha32?: string;
+    alpha64?: string;
+}
+export type CustomPaletteColorOptions = Partial<CustomPaletteColor> & {
+    main: string;
+};

package/dist/theme/CustomPaletteCommon.d.ts

@@ -0,0 +1,7 @@
+export interface CustomPaletteCommon {
+    black: string;
+    white: string;
+    blackOpacity04: string;
+    whiteOpacity32: string;
+}
+export type CustomPaletteCommonOptions = Partial<CustomPaletteCommon>;