@connectif/ui-components 9.0.3 → 9.0.5

package/dist/index.js

@@ -97,7 +97,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment45 = REACT_FRAGMENT_TYPE;
+        var Fragment46 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -156,7 +156,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment45;
+        exports.Fragment = Fragment46;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -9174,7 +9174,7 @@ function escapeRegExp(source) {
 var TextMarker_default = TextMarker;
 
 // src/components/layout/Stepper.tsx
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 var Stepper = React14.forwardRef(function Stepper2({ activeStep, orientation = "vertical", steps }, ref) {
   const containerRef = React14.useRef(null);
   React14.useEffect(() => {
@@ -9230,7 +9230,7 @@ var Stepper = React14.forwardRef(function Stepper2({ activeStep, orientation = "
       }
     );
   };
-  const getDescription = (step, index) => /* @__PURE__ */ jsxs11(
+  const getDescription = (step, index) => !step.placeholder && !step.description && !step.descriptionNode ? /* @__PURE__ */ jsx27(Fragment4, {}) : /* @__PURE__ */ jsxs11(
     Box_default2,
     {
       style: {
@@ -9502,7 +9502,7 @@ var TooltipMenu_default = TooltipMenu;
 
 // src/components/tooltip/TextEllipsis.tsx
 import * as React17 from "react";
-import { Fragment as Fragment4, jsx as jsx32 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx32 } from "react/jsx-runtime";
 var TextEllipsis = ({
   text,
   typographyVariant,
@@ -9545,7 +9545,7 @@ var TextEllipsis = ({
       children: text || "\xA0"
     }
   );
-  return /* @__PURE__ */ jsx32(Fragment4, { children: !disableTooltip ? /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx32(Fragment5, { children: !disableTooltip ? /* @__PURE__ */ jsx32(
     TextEllipsisTooltip_default,
     {
       title: text ?? "\xA0",
@@ -9627,7 +9627,7 @@ var AvatarCard_default = AvatarCard;
 // src/components/button/MenuIconButton.tsx
 import * as React19 from "react";
 import MuiMenu from "@mui/material/Menu";
-import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var MenuIconButton = React19.forwardRef(function MenuIconButton2({
   children,
   isOpen: managedIsOpen,
@@ -9672,7 +9672,7 @@ var MenuIconButton = React19.forwardRef(function MenuIconButton2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs13(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     /* @__PURE__ */ jsx34(
       IconButton_default,
       {
@@ -10410,7 +10410,7 @@ var ButtonWithActions_default = ButtonWithActions;
 // src/components/button/MenuButton.tsx
 import * as React24 from "react";
 import MuiMenu3 from "@mui/material/Menu";
-import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs18 } from "react/jsx-runtime";
 var MenuButton = React24.forwardRef(function MenuButton2({
   children,
   isOpen: managedIsOpen,
@@ -10455,7 +10455,7 @@ var MenuButton = React24.forwardRef(function MenuButton2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs18(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs18(Fragment7, { children: [
     /* @__PURE__ */ jsx43(
       Button_default,
       {
@@ -11298,7 +11298,7 @@ var ChipList_default = ChipList;
 // src/components/chip/MenuChip.tsx
 import * as React29 from "react";
 import MuiMenu4 from "@mui/material/Menu";
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
 var MenuChip = React29.forwardRef(function MenuChip2({
   children,
   isOpen: managedIsOpen,
@@ -11340,7 +11340,7 @@ var MenuChip = React29.forwardRef(function MenuChip2({
     setAnchorEl(element);
   };
   const isOpen = typeof managedIsOpen === "boolean" ? managedIsOpen : internalIsOpen;
-  return /* @__PURE__ */ jsxs22(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs22(Fragment8, { children: [
     /* @__PURE__ */ jsx57(
       Chip_default,
       {
@@ -11536,7 +11536,7 @@ var GlobalStyles_default = globalStyles;
 // src/components/chip/ChipHiddenCounter.tsx
 import * as React30 from "react";
 import { Popper } from "@mui/material";
-import { Fragment as Fragment8, jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var TOOLTIP_DATA_TEST_ID = "chip-container-tooltip";
 var COUNTER_LABEL_DATA_TEST_ID = "chip-counter-label";
 var MAX_TOOLTIP_WIDTH = 362;
@@ -11570,7 +11570,7 @@ var ChipHiddenCounter = ({
     const alertButtonWidth = !warningTooltip ? 0 : WIDTH_ALERT_BUTTON;
     return !isDeletable ? `${MAX_TOOLTIP_WIDTH - alertButtonWidth}px` : `${MAX_TOOLTIP_WIDTH - WIDTH_DELETABLE_BUTTON - alertButtonWidth}px`;
   };
-  return /* @__PURE__ */ jsx58(Fragment8, { children: hiddenChips.length > 0 && /* @__PURE__ */ jsxs23(Fragment8, { children: [
+  return /* @__PURE__ */ jsx58(Fragment9, { children: hiddenChips.length > 0 && /* @__PURE__ */ jsxs23(Fragment9, { children: [
     /* @__PURE__ */ jsx58(
       Box_default2,
       {
@@ -12139,7 +12139,7 @@ var CardTable_default = CardTable;
 // src/components/card/EnhancedCard.tsx
 import { Stack as Stack5 } from "@mui/material";
 import * as React32 from "react";
-import { Fragment as Fragment9, jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
 var cardWidthBySize = {
   S: 110,
   M: 110,
@@ -12500,7 +12500,7 @@ var EnhancedCard = React32.forwardRef(
               )
             }
           ),
-          isHovered && hoverComponent && /* @__PURE__ */ jsxs26(Fragment9, { children: [
+          isHovered && hoverComponent && /* @__PURE__ */ jsxs26(Fragment10, { children: [
             /* @__PURE__ */ jsx65(
               Box_default2,
               {
@@ -12698,7 +12698,7 @@ var incrementLabelStyles = {
 };
 
 // src/utils/ChartUtils.tsx
-import { Fragment as Fragment11, jsx as jsx68, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs28 } from "react/jsx-runtime";
 function useTooltipFormatter(chartTooltipEntryFormatter = ({
   seriesName,
   value
@@ -12716,7 +12716,7 @@ function useTooltipFormatter(chartTooltipEntryFormatter = ({
       return tooltipOrder;
     };
     params.sort((a, b) => getOrder(a) - getOrder(b));
-    const tooltip = /* @__PURE__ */ jsxs28(Fragment11, { children: [
+    const tooltip = /* @__PURE__ */ jsxs28(Fragment12, { children: [
       !getTooltip && /* @__PURE__ */ jsx68(Typography_default, { variant: "tooltip", children: params[0].name }),
       params.map((p) => {
         const entry = chartTooltipEntryFormatter({
@@ -13317,7 +13317,7 @@ var LineChart2 = ({
       },
       {
         type: "value",
-        position: "right",
+        position: "left",
         splitLine: {
           show: false
         },
@@ -13737,7 +13737,7 @@ var DonutChartLegendItem_default = DonutChartLegendItem;
 
 // src/components/chart/DonutChart.tsx
 import { alpha as alpha4 } from "@mui/material/styles";
-import { Fragment as Fragment14, jsx as jsx75, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx75, jsxs as jsxs33 } from "react/jsx-runtime";
 var DonutChart = ({
   style: style3,
   isLoading,
@@ -13903,7 +13903,7 @@ var DonutChart = ({
         flexDirection: "column",
         ...style3
       },
-      children: isLoading ? /* @__PURE__ */ jsx75(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs33(Fragment14, { children: [
+      children: isLoading ? /* @__PURE__ */ jsx75(Skeleton_default, { variant: "rectangular", height: "100%", width: "100%" }) : /* @__PURE__ */ jsxs33(Fragment15, { children: [
         /* @__PURE__ */ jsxs33(Box_default2, { sx: { flexGrow: 1, position: "relative" }, children: [
           showIcon && /* @__PURE__ */ jsx75(
             Icon_default,
@@ -16383,7 +16383,7 @@ var useTranslation = () => {
 import {
   Dialog as MuiDialog
 } from "@mui/material";
-import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
 var sizes5 = {
   S: "480px",
   M: "640px",
@@ -16406,7 +16406,7 @@ var Dialog = ({
   ...rest
 }) => {
   const { palette: palette2 } = useCustomTheme();
-  const getDialogContent = () => /* @__PURE__ */ jsxs39(Fragment16, { children: [
+  const getDialogContent = () => /* @__PURE__ */ jsxs39(Fragment17, { children: [
     /* @__PURE__ */ jsxs39(
       Stack_default,
       {
@@ -18527,23 +18527,23 @@ function formatPhone(phone, format2) {
 }
 
 // src/components/formatter/CompactNumberFormatter.tsx
-import { Fragment as Fragment17, jsx as jsx87 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx87 } from "react/jsx-runtime";
 var CompactNumberFormatter = ({ value }) => {
   const { locale } = React40.useContext(IntlContext);
-  return /* @__PURE__ */ jsx87(Fragment17, { children: formatCompactNumber(value, locale) });
+  return /* @__PURE__ */ jsx87(Fragment18, { children: formatCompactNumber(value, locale) });
 };
 var CompactNumberFormatter_default = CompactNumberFormatter;
 
 // src/components/formatter/CurrencyFormatter.tsx
 import * as React41 from "react";
-import { Fragment as Fragment18, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx88 } from "react/jsx-runtime";
 var CurrencyFormatter = ({
   value,
   notation,
   currency
 }) => {
   const { locale, currency: contextCurrency } = React41.useContext(IntlContext);
-  return /* @__PURE__ */ jsx88(Fragment18, { children: formatCurrency(
+  return /* @__PURE__ */ jsx88(Fragment19, { children: formatCurrency(
     value,
     locale,
     currency ?? contextCurrency,
@@ -18554,37 +18554,37 @@ var CurrencyFormatter_default = CurrencyFormatter;
 
 // src/components/formatter/NumberFormatter.tsx
 import * as React42 from "react";
-import { Fragment as Fragment19, jsx as jsx89 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx89 } from "react/jsx-runtime";
 var NumberFormatter = ({ value, fractionSize }) => {
   const { locale } = React42.useContext(IntlContext);
-  return /* @__PURE__ */ jsx89(Fragment19, { children: formatNumber(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx89(Fragment20, { children: formatNumber(value, locale, fractionSize) });
 };
 var NumberFormatter_default = NumberFormatter;
 
 // src/components/formatter/PercentageFormatter.tsx
 import * as React43 from "react";
-import { Fragment as Fragment20, jsx as jsx90 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx90 } from "react/jsx-runtime";
 var PercentageFormatter = ({
   value,
   fractionSize
 }) => {
   const { locale } = React43.useContext(IntlContext);
-  return /* @__PURE__ */ jsx90(Fragment20, { children: formatPercentage(value, locale, fractionSize) });
+  return /* @__PURE__ */ jsx90(Fragment21, { children: formatPercentage(value, locale, fractionSize) });
 };
 var PercentageFormatter_default = PercentageFormatter;
 
 // src/components/formatter/DateFormatter.tsx
 import * as React44 from "react";
-import { Fragment as Fragment21, jsx as jsx91 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx91 } from "react/jsx-runtime";
 var DateFormatter = ({ date, format: format2 }) => {
   const { locale, timezone } = React44.useContext(IntlContext);
-  return /* @__PURE__ */ jsx91(Fragment21, { children: formatDate(date, locale, timezone, format2) });
+  return /* @__PURE__ */ jsx91(Fragment22, { children: formatDate(date, locale, timezone, format2) });
 };
 var DateFormatter_default = DateFormatter;
 
 // src/components/formatter/PhoneFormatter.tsx
-import { Fragment as Fragment22, jsx as jsx92 } from "react/jsx-runtime";
-var PhoneFormatter = ({ phone, format: format2 }) => /* @__PURE__ */ jsx92(Fragment22, { children: formatPhone(phone, format2) });
+import { Fragment as Fragment23, jsx as jsx92 } from "react/jsx-runtime";
+var PhoneFormatter = ({ phone, format: format2 }) => /* @__PURE__ */ jsx92(Fragment23, { children: formatPhone(phone, format2) });
 var PhoneFormatter_default = PhoneFormatter;
 
 // src/components/header/HeaderTitle.tsx
@@ -19343,7 +19343,7 @@ function useDebouncedCallback(callback, wait) {
 }
 
 // src/components/input/DebouncedTextField.tsx
-import { useEffect as useEffect12, useState as useState17 } from "react";
+import { useEffect as useEffect13, useState as useState18 } from "react";
 
 // src/components/input/TextField.tsx
 import * as React52 from "react";
@@ -19355,23 +19355,49 @@ import { styled as styled4 } from "@mui/material";
 import { jsx as jsx99, jsxs as jsxs44 } from "react/jsx-runtime";
 var getSeverityColor = ({ palette: palette2 }, severity) => severity === "error" ? palette2.error.main : palette2.grey[900];
 var StyledLabel = styled4("label", {
-  shouldForwardProp: (prop) => prop !== "severity"
+  shouldForwardProp: (prop) => prop !== "severity" && prop !== "focused"
 })(
-  ({ severity, theme: theme2 }) => theme2.unstable_sx({
+  ({ severity, focused, theme: theme2 }) => theme2.unstable_sx({
     display: "block",
     padding: "4px 0",
     ...variants["caption"],
-    color: getSeverityColor(theme2, severity)
+    color: focused && severity !== "error" ? theme2.palette.primary.main : getSeverityColor(theme2, severity)
   })
 );
 var InputLabel = React50.forwardRef(
-  function InputLabel2({ htmlFor, sx, children, severity = "info", infoText }, ref) {
+  function InputLabel2({
+    htmlFor,
+    sx,
+    children,
+    severity = "info",
+    infoText,
+    focused: focusedProp,
+    onClick
+  }, ref) {
+    const [internalFocused, setInternalFocused] = React50.useState(false);
+    const focused = focusedProp ?? internalFocused;
+    React50.useEffect(() => {
+      const input = htmlFor ? document.getElementById(htmlFor) : null;
+      if (!input) {
+        return;
+      }
+      const handleFocus = () => setInternalFocused(true);
+      const handleBlur = () => setInternalFocused(false);
+      input.addEventListener("focus", handleFocus);
+      input.addEventListener("blur", handleBlur);
+      return () => {
+        input.removeEventListener("focus", handleFocus);
+        input.removeEventListener("blur", handleBlur);
+      };
+    }, [htmlFor]);
     return /* @__PURE__ */ jsxs44(
       StyledLabel,
       {
         htmlFor,
         sx,
         severity,
+        focused,
+        onClick,
         ref,
         children: [
           children,
@@ -19416,7 +19442,7 @@ var InputHelperText = React51.forwardRef(
 var InputHelperText_default = InputHelperText;
 
 // src/components/input/TextField.tsx
-import { Fragment as Fragment23, jsx as jsx101, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx101, jsxs as jsxs45 } from "react/jsx-runtime";
 var commonInputStylesOptions = {
   shouldForwardProp: (prop) => prop !== "variant" && prop !== "typographyVariant"
 };
@@ -19678,7 +19704,7 @@ var TextField = React52.forwardRef(function TextField2({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs45(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment24, { children: [
     label && /* @__PURE__ */ jsx101(
       InputLabel_default,
       {
@@ -19749,7 +19775,7 @@ var TextField_default = TextField;
 // src/components/input/DebouncedTextField.tsx
 import { jsx as jsx102 } from "react/jsx-runtime";
 var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value, onChange, debounce = 100, ...rest }, ref) {
-  const [text, setText] = useState17(value ?? "");
+  const [text, setText] = useState18(value ?? "");
   const expectedChangeRef = React53.useRef(void 0);
   const onChangeDebounced = useDebouncedCallback(
     (e) => {
@@ -19760,7 +19786,7 @@ var DebouncedTextField = React53.forwardRef(function DebouncedTextField2({ value
     },
     debounce
   );
-  useEffect12(() => {
+  useEffect13(() => {
     if (expectedChangeRef.current === value) {
       expectedChangeRef.current = void 0;
     } else {
@@ -20573,7 +20599,7 @@ var DateIntervalPickerInputs = ({
 var DateIntervalPickerInputs_default = DateIntervalPickerInputs;
 
 // src/components/input/date-interval-picker/DateIntervalRangeSelector.tsx
-import { Fragment as Fragment24, jsx as jsx112, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx112, jsxs as jsxs51 } from "react/jsx-runtime";
 var DateIntervalRangeSelector = ({
   state,
   color: color2,
@@ -20915,7 +20941,7 @@ var DateIntervalRangeSelector = ({
     }
     return newState;
   };
-  return /* @__PURE__ */ jsxs51(Fragment24, { children: [
+  return /* @__PURE__ */ jsxs51(Fragment25, { children: [
     /* @__PURE__ */ jsx112(
       Box_default2,
       {
@@ -21791,7 +21817,7 @@ var DateRangePicker_default = DateRangePicker;
 // src/components/input/SelectPopoverItem.tsx
 import { Grid as Grid2, Stack as Stack9 } from "@mui/material";
 import { lighten as lighten3 } from "@mui/material";
-import { Fragment as Fragment25, jsx as jsx119, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx119, jsxs as jsxs57 } from "react/jsx-runtime";
 var bgColorLightCoefficient2 = 0.9;
 var SelectPopoverItem = ({
   onClick,
@@ -21837,7 +21863,7 @@ var SelectPopoverItem = ({
           },
           onClick: () => !disabled && typeof onClick === "function" && onClick(),
           children: [
-            !selectableItemComponent && /* @__PURE__ */ jsxs57(Fragment25, { children: [
+            !selectableItemComponent && /* @__PURE__ */ jsxs57(Fragment26, { children: [
               /* @__PURE__ */ jsxs57(
                 Box_default2,
                 {
@@ -21857,7 +21883,7 @@ var SelectPopoverItem = ({
                           cursor: disabled ? "default" : "pointer"
                         },
                         typographyVariant: "body1",
-                        text: /* @__PURE__ */ jsxs57(Fragment25, { children: [
+                        text: /* @__PURE__ */ jsxs57(Fragment26, { children: [
                           iconId && /* @__PURE__ */ jsx119(
                             Icon_default,
                             {
@@ -22518,7 +22544,7 @@ var DaysOfWeekPicker_default = DaysOfWeekPicker;
 // src/components/input/ColorPicker.tsx
 import * as React67 from "react";
 import GradientColorPicker from "react-best-gradient-color-picker";
-import { Fragment as Fragment26, jsx as jsx123, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx123, jsxs as jsxs58 } from "react/jsx-runtime";
 var colorRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$|^rgba?\((\d{1,3}), {0,1}(\d{1,3}), {0,1}(\d{1,3})(, {0,1}([01]|0?\.\d+))?\)$/;
 var isValidColor = (color2) => colorRegex.test(color2);
 var colorPickerDefaultColors = [
@@ -22552,6 +22578,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
   popoverZIndex,
   inputWidthStyle = "150px",
   mode = "auto",
+  disabled = false,
   onChange
 }, ref) {
   const { t } = useTranslation();
@@ -22584,6 +22611,7 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
     {
       iconId: value ? "color-square" : "transparent",
       size: "M",
+      disabled,
       onClick: (event) => {
         setAnchorEl(event.currentTarget);
       },
@@ -22626,6 +22654,11 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       );
     }
   }, [value, internalPickerValue, colorChangeOccurred, allowEmpty, mode]);
+  React67.useEffect(() => {
+    if (disabled) {
+      setAnchorEl(void 0);
+    }
+  }, [disabled]);
   React67.useEffect(() => {
     if (anchorEl) {
       const handleFocus = () => {
@@ -22657,20 +22690,20 @@ var ColorPicker = React67.forwardRef(function ColorPickerWrapper({
       };
     }
   }, [anchorEl]);
-  return /* @__PURE__ */ jsxs58(Fragment26, { children: [
+  return /* @__PURE__ */ jsxs58(Fragment27, { children: [
     /* @__PURE__ */ jsx123(
       TextField_default,
       {
         value: textFieldValue,
         label,
+        disabled,
         sx: {
           width: inputWidthStyle,
           height: "36px !important"
         },
         inputSx: {
           fontFamily: "Source Sans Pro, sans-serif",
-          fontWeight: "400",
-          color: grey900
+          fontWeight: "400"
         },
         placeholder: t("COLOR_PICKER.VALUE_NOT_DEFINED"),
         onChange: handleTextFieldChange,
@@ -23046,7 +23079,7 @@ var CategorizedPickerGroupItem = function CategorizedPickerGroupItem2({
 var CategorizedPickerGroupItem_default = CategorizedPickerGroupItem;
 
 // src/components/input/categorized-picker/CategorizedPickerItem.tsx
-import { Fragment as Fragment27, jsx as jsx128, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment28, jsx as jsx128, jsxs as jsxs60 } from "react/jsx-runtime";
 var CategorizedPickerItem = function CategorizedPickerItem2({
   option,
   selectedId,
@@ -23064,7 +23097,7 @@ var CategorizedPickerItem = function CategorizedPickerItem2({
       behavior: "smooth"
     });
   };
-  return /* @__PURE__ */ jsxs60(Fragment27, { children: [
+  return /* @__PURE__ */ jsxs60(Fragment28, { children: [
     option.categorizedPickerItemType === "option" && /* @__PURE__ */ jsx128(
       CategorizedPickerOptionItem_default,
       {
@@ -23104,18 +23137,18 @@ var CategorizedPickerItem_default = CategorizedPickerItem;
 
 // src/components/input/categorized-picker/CategorizedPickerEmptyCategoryPanel.tsx
 import { Stack as Stack10 } from "@mui/material";
-import { Fragment as Fragment28, jsx as jsx129 } from "react/jsx-runtime";
+import { Fragment as Fragment29, jsx as jsx129 } from "react/jsx-runtime";
 var CategorizedPickerEmptyCategoryPanel = function CategorizedPickerEmptyCategoryPanel2({
   selectedCategory,
   isEmptyCategories
 }) {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx129(Fragment28, { children: !selectedCategory?.emptyData ? /* @__PURE__ */ jsx129(Stack10, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", color: grey600, children: isEmptyCategories ? t("CATEGORIZED_PICKER.NO_RESULTS") : t("CATEGORIZED_PICKER.NO_OPTIONS") }) }) : selectedCategory.emptyData });
+  return /* @__PURE__ */ jsx129(Fragment29, { children: !selectedCategory?.emptyData ? /* @__PURE__ */ jsx129(Stack10, { padding: "12px", alignItems: "center", children: /* @__PURE__ */ jsx129(Typography_default, { variant: "body2", color: grey600, children: isEmptyCategories ? t("CATEGORIZED_PICKER.NO_RESULTS") : t("CATEGORIZED_PICKER.NO_OPTIONS") }) }) : selectedCategory.emptyData });
 };
 var CategorizedPickerEmptyCategoryPanel_default = CategorizedPickerEmptyCategoryPanel;
 
 // src/components/input/categorized-picker/CategorizedPickerCategoryPanel.tsx
-import { Fragment as Fragment29, jsx as jsx130 } from "react/jsx-runtime";
+import { Fragment as Fragment30, jsx as jsx130 } from "react/jsx-runtime";
 var CategorizedPickerCategoryPanel = function CategorizedPickerCategoryPanel2({
   value,
   selectedCategory,
@@ -23202,7 +23235,7 @@ var CategorizedPickerCategoryPanel = function CategorizedPickerCategoryPanel2({
     result.push(...getGroups(withGroup));
     return result;
   };
-  return /* @__PURE__ */ jsx130(Fragment29, { children: !selectedCategory || !categoryOptions?.length ? /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx130(Fragment30, { children: !selectedCategory || !categoryOptions?.length ? /* @__PURE__ */ jsx130(
     CategorizedPickerEmptyCategoryPanel_default,
     {
       selectedCategory,
@@ -23234,7 +23267,7 @@ function orderOptions(a, b) {
 var CategorizedPickerCategoryPanel_default = CategorizedPickerCategoryPanel;
 
 // src/components/input/categorized-picker/CategorizedPicker.tsx
-import { Fragment as Fragment30, jsx as jsx131, jsxs as jsxs61 } from "react/jsx-runtime";
+import { Fragment as Fragment31, jsx as jsx131, jsxs as jsxs61 } from "react/jsx-runtime";
 var ChevronIcon2 = ({ disabled }) => /* @__PURE__ */ jsx131(
   Icon_default,
   {
@@ -23338,7 +23371,7 @@ var CategorizedPicker = function CategorizedPicker2({
       setSelectedCategory(filteredSelectedCategory);
     }
   }, [filteredCategories, selectedCategory]);
-  return /* @__PURE__ */ jsxs61(Fragment30, { children: [
+  return /* @__PURE__ */ jsxs61(Fragment31, { children: [
     /* @__PURE__ */ jsx131(
       Select3,
       {
@@ -23538,7 +23571,7 @@ import * as React73 from "react";
 // src/components/input/SelectPopover.tsx
 import * as React72 from "react";
 import { Grid as Grid4, Stack as Stack12 } from "@mui/material";
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { jsx as jsx132, jsxs as jsxs62 } from "react/jsx-runtime";
 var defaultItemsColorStyles = {
@@ -23576,9 +23609,9 @@ var SelectPopover = function SelectPopover2({
   itemsTitle
 }) {
   const { t } = useTranslation();
-  const [searchText, setSearchText] = useState30("");
-  const [isScrollBottom, setIsScrollBottom] = useState30(false);
-  const [currentItems, setCurrentItems] = useState30([]);
+  const [searchText, setSearchText] = useState31("");
+  const [isScrollBottom, setIsScrollBottom] = useState31(false);
+  const [currentItems, setCurrentItems] = useState31([]);
   const [currentSelectedItems, setCurrentSelectedItems] = React72.useState([]);
   const prevSelectedItemsIdsRef = React72.useRef([]);
   const onSearchTextChanged = (text) => {
@@ -23879,7 +23912,7 @@ var arraysEqual = (a, b) => {
 var SelectPopover_default = SelectPopover;
 
 // src/components/input/ItemSelector.tsx
-import { Fragment as Fragment31, jsx as jsx133, jsxs as jsxs63 } from "react/jsx-runtime";
+import { Fragment as Fragment32, jsx as jsx133, jsxs as jsxs63 } from "react/jsx-runtime";
 var ItemSelector = function ItemSelector2({
   items,
   selectedItems,
@@ -23950,7 +23983,7 @@ var ItemSelector = function ItemSelector2({
       setAnchorEl(selectRef.current);
     }
   };
-  return /* @__PURE__ */ jsxs63(Fragment31, { children: [
+  return /* @__PURE__ */ jsxs63(Fragment32, { children: [
     /* @__PURE__ */ jsx133(Stack_default, { onClick: onOpenSelector, children: /* @__PURE__ */ jsx133(
       Select_default,
       {
@@ -23967,7 +24000,7 @@ var ItemSelector = function ItemSelector2({
         renderValue: (value) => {
           let component;
           if (!value || !Array.isArray(value) || value.length === 0) {
-            component = /* @__PURE__ */ jsx133(Fragment31, { children: /* @__PURE__ */ jsx133(
+            component = /* @__PURE__ */ jsx133(Fragment32, { children: /* @__PURE__ */ jsx133(
               Stack_default,
               {
                 direction: "row",
@@ -24252,7 +24285,7 @@ var AutocompleteInputSelection = function AutocompleteInputSelection2({
 var AutocompleteInputSelection_default = AutocompleteInputSelection;
 
 // src/components/input/autocomplete/AutocompleteInput.tsx
-import { Fragment as Fragment32, jsx as jsx135, jsxs as jsxs65 } from "react/jsx-runtime";
+import { Fragment as Fragment33, jsx as jsx135, jsxs as jsxs65 } from "react/jsx-runtime";
 var CLEAR_BUTTON_WIDTH = 36;
 var sizes6 = {
   XS: {
@@ -24295,7 +24328,7 @@ var AutocompleteInput = function AutocompleteInput2({
   const [isHover, setIsHover] = React75.useState(false);
   const dirty = !!inputValue || Array.isArray(value) && value.length > 0 || !Array.isArray(value) && !!value;
   const showClearButton = !disabled && dirty && !disableClear && (isOpenPopover || isHover);
-  return /* @__PURE__ */ jsx135(Fragment32, { children: /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx135(Fragment33, { children: /* @__PURE__ */ jsx135(
     DebouncedTextField_default,
     {
       ref: inputRef,
@@ -24489,7 +24522,7 @@ function getInitialListScroll({
 }
 
 // src/components/input/autocomplete/AutocompleteList.tsx
-import { Fragment as Fragment33, jsx as jsx136, jsxs as jsxs66 } from "react/jsx-runtime";
+import { Fragment as Fragment34, jsx as jsx136, jsxs as jsxs66 } from "react/jsx-runtime";
 var AUTOCOMPLETE_ITEM_HEIGHT = 44;
 var AutocompleteList = function AutocompleteList2({
   options,
@@ -24552,7 +24585,7 @@ var AutocompleteList = function AutocompleteList2({
       option.id
     );
   };
-  return /* @__PURE__ */ jsx136(Fragment33, { children: /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx136(Fragment34, { children: /* @__PURE__ */ jsx136(
     ClickAwayListener,
     {
       onClickAway: (event) => onClickAwayPopover(
@@ -24625,7 +24658,7 @@ var AutocompleteList = function AutocompleteList2({
 var AutocompleteList_default = AutocompleteList;
 
 // src/components/input/autocomplete/Autocomplete.tsx
-import { Fragment as Fragment34, jsx as jsx137, jsxs as jsxs67 } from "react/jsx-runtime";
+import { Fragment as Fragment35, jsx as jsx137, jsxs as jsxs67 } from "react/jsx-runtime";
 var MIN_AUTOCOMPLETE_WIDTH = "328px";
 var Autocomplete = function Autocomplete2({
   variant = "default",
@@ -24947,7 +24980,7 @@ var Autocomplete = function Autocomplete2({
     setNextIndexByValue(value2);
     onChange && onChange(event, value2);
   };
-  return /* @__PURE__ */ jsxs67(Fragment34, { children: [
+  return /* @__PURE__ */ jsxs67(Fragment35, { children: [
     /* @__PURE__ */ jsx137(
       AutocompleteInput_default,
       {
@@ -25089,7 +25122,7 @@ var CodeEditor_default = React78.forwardRef(CodeEditor);
 
 // src/components/input/CodeEditorPopup.tsx
 import format from "html-format";
-import { Fragment as Fragment35, jsx as jsx139, jsxs as jsxs68 } from "react/jsx-runtime";
+import { Fragment as Fragment36, jsx as jsx139, jsxs as jsxs68 } from "react/jsx-runtime";
 var FORMAT_CHARACTERS_LINE = 120;
 var FORMAT_NUMBER_SPACES_INDENTATION = 2;
 var CodeEditorPopup = ({
@@ -25132,7 +25165,7 @@ var CodeEditorPopup = ({
     " ".repeat(FORMAT_NUMBER_SPACES_INDENTATION),
     FORMAT_CHARACTERS_LINE
   );
-  return /* @__PURE__ */ jsxs68(Fragment35, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment36, { children: [
     readonly && /* @__PURE__ */ jsx139(
       Dialog_default,
       {
@@ -25298,7 +25331,7 @@ var CodeEditorPopup = ({
 var CodeEditorPopup_default = CodeEditorPopup;
 
 // src/components/input/TextEditor.tsx
-import { Fragment as Fragment36, jsx as jsx140, jsxs as jsxs69 } from "react/jsx-runtime";
+import { Fragment as Fragment37, jsx as jsx140, jsxs as jsxs69 } from "react/jsx-runtime";
 var DEFAULT_TOOLBAR_INSERT_MENU_ITEMS = [
   "link",
   "image",
@@ -25584,7 +25617,7 @@ var TextEditor = function TextEditor2({
         };
     }
   };
-  return /* @__PURE__ */ jsxs69(Fragment36, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment37, { children: [
     /* @__PURE__ */ jsx140(
       Editor,
       {
@@ -25641,7 +25674,7 @@ var TextEditor_default = TextEditor;
 
 // src/components/input/PhoneField.tsx
 import * as React81 from "react";
-import { Fragment as Fragment37, jsx as jsx141, jsxs as jsxs70 } from "react/jsx-runtime";
+import { Fragment as Fragment38, jsx as jsx141, jsxs as jsxs70 } from "react/jsx-runtime";
 var maxPhoneLengthWithPrefix = 16;
 var PhoneField = React81.forwardRef(function PhoneField2({
   value,
@@ -25727,7 +25760,7 @@ var PhoneField = React81.forwardRef(function PhoneField2({
       groupElements: true,
       ...rest,
       className: `Cn-PhoneField ${className}`,
-      startAdornment: /* @__PURE__ */ jsxs70(Fragment37, { children: [
+      startAdornment: /* @__PURE__ */ jsxs70(Fragment38, { children: [
         rest.startAdornment,
         select
       ] }),
@@ -26162,7 +26195,7 @@ var DatePickerPopover = ({
 var DatePickerPopover_default = DatePickerPopover;
 
 // src/components/input/DatePicker.tsx
-import { Fragment as Fragment38, jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
+import { Fragment as Fragment39, jsx as jsx145, jsxs as jsxs73 } from "react/jsx-runtime";
 var DatePicker = React84.forwardRef(
   function DatePicker2({ value, onChange, onBlur, onKeyDown, minDate, maxDate, ...rest }, ref) {
     const { locale, timezone } = React84.useContext(IntlContext);
@@ -26238,7 +26271,7 @@ var DatePicker = React84.forwardRef(
       const text = value && !isNaN(value.getTime()) ? tz12(value, timezone).format(dateInputFormat) : "";
       setTextValue(text);
     }, [dateInputFormat, timezone, value]);
-    return /* @__PURE__ */ jsxs73(Fragment38, { children: [
+    return /* @__PURE__ */ jsxs73(Fragment39, { children: [
       /* @__PURE__ */ jsx145(
         TextField_default,
         {
@@ -26281,7 +26314,7 @@ var DatePicker_default = DatePicker;
 // src/components/input/Checkbox.tsx
 import MuiCheckbox from "@mui/material/Checkbox";
 import { FormControlLabel, FormGroup } from "@mui/material";
-import { Fragment as Fragment39, jsx as jsx146, jsxs as jsxs74 } from "react/jsx-runtime";
+import { Fragment as Fragment40, jsx as jsx146, jsxs as jsxs74 } from "react/jsx-runtime";
 var MaterialCheckbox = ({
   checked,
   disabled,
@@ -26314,7 +26347,7 @@ var Checkbox = ({
   inputClass,
   onChange,
   tabIndex
-}) => /* @__PURE__ */ jsxs74(Fragment39, { children: [
+}) => /* @__PURE__ */ jsxs74(Fragment40, { children: [
   !label && /* @__PURE__ */ jsx146(
     MaterialCheckbox,
     {
@@ -26356,7 +26389,7 @@ var Checkbox_default = Checkbox;
 import * as React85 from "react";
 import MuiRadio from "@mui/material/Radio";
 import { FormControlLabel as FormControlLabel2 } from "@mui/material";
-import { Fragment as Fragment40, jsx as jsx147, jsxs as jsxs75 } from "react/jsx-runtime";
+import { Fragment as Fragment41, jsx as jsx147, jsxs as jsxs75 } from "react/jsx-runtime";
 var Radio = React85.forwardRef(function Radio2({
   label,
   labelPlacement = "end",
@@ -26393,7 +26426,7 @@ var Radio = React85.forwardRef(function Radio2({
       size: size === "S" ? "small" : "medium"
     }
   );
-  return /* @__PURE__ */ jsxs75(Fragment40, { children: [
+  return /* @__PURE__ */ jsxs75(Fragment41, { children: [
     !label && radio,
     label && /* @__PURE__ */ jsx147(
       FormControlLabel2,
@@ -27072,7 +27105,7 @@ var MarkdownRenderer_default = MarkdownRenderer;
 
 // src/components/navbar/Navbar.tsx
 import { Drawer as Drawer2 } from "@mui/material";
-import { Fragment as Fragment41, jsx as jsx155, jsxs as jsxs80 } from "react/jsx-runtime";
+import { Fragment as Fragment42, jsx as jsx155, jsxs as jsxs80 } from "react/jsx-runtime";
 var Navbar = ({
   topContent,
   bottomContent,
@@ -27080,7 +27113,7 @@ var Navbar = ({
   drawerBottomContent,
   onClose,
   isDrawerOpen = false
-}) => /* @__PURE__ */ jsxs80(Fragment41, { children: [
+}) => /* @__PURE__ */ jsxs80(Fragment42, { children: [
   /* @__PURE__ */ jsxs80(
     Box_default2,
     {
@@ -27304,7 +27337,7 @@ var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
 import * as React91 from "react";
-import { Fragment as Fragment42, jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
+import { Fragment as Fragment43, jsx as jsx159, jsxs as jsxs82 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
   elementRef,
@@ -27345,7 +27378,7 @@ var DonutFocusOverlay = ({
   const internalTopHalfCircle = `${internalCircleRadius} ${internalCircleRadius} 0 0 1 ${startPointX + donutWidth + internalCircleRadius * 2} ${startPointY}`;
   const externalTopHalfCircle = `${externalCircleRadius} ${externalCircleRadius} 0 0 0 ${startPointX} ${startPointY}`;
   const path = `path("M ${startPointX} ${startPointY} A ${externalBottomHalfCircle} m ${-donutWidth} 0 A ${internalBottomHalfCircle} A ${internalTopHalfCircle} m ${donutWidth} 0 A ${externalTopHalfCircle} Z")`;
-  return /* @__PURE__ */ jsxs82(Fragment42, { children: [
+  return /* @__PURE__ */ jsxs82(Fragment43, { children: [
     /* @__PURE__ */ jsx159(
       Box_default2,
       {
@@ -27390,7 +27423,7 @@ var DonutFocusOverlay = ({
 var DonutFocusOverlay_default = DonutFocusOverlay;
 
 // src/components/pager/Pager.tsx
-import { Fragment as Fragment43, jsx as jsx160, jsxs as jsxs83 } from "react/jsx-runtime";
+import { Fragment as Fragment44, jsx as jsx160, jsxs as jsxs83 } from "react/jsx-runtime";
 var Pager = ({
   page,
   pageSize,
@@ -27416,7 +27449,7 @@ var Pager = ({
         sx: { minWidth: 78 }
       }
     ),
-    allowedPageSizes && /* @__PURE__ */ jsxs83(Fragment43, { children: [
+    allowedPageSizes && /* @__PURE__ */ jsxs83(Fragment44, { children: [
       /* @__PURE__ */ jsx160(Label, { children: t("PAGER.ROWS_PER_PAGE") }),
       /* @__PURE__ */ jsx160(
         Select_default,
@@ -28142,7 +28175,7 @@ import MuiTabs from "@mui/material/Tabs";
 
 // src/components/layout/SwipeableViews.tsx
 import * as React95 from "react";
-import { useEffect as useEffect28, useRef as useRef33, useState as useState41 } from "react";
+import { useEffect as useEffect29, useRef as useRef33, useState as useState42 } from "react";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var styles = {
   container: {
@@ -28179,9 +28212,9 @@ function SwipeableViews({
   const containerRef = useRef33(null);
   const scrollTimeout = useRef33(null);
   const scrollingMethod = useRef33("none");
-  const [previousIndex, setPreviousIndex] = useState41(index);
+  const [previousIndex, setPreviousIndex] = useState42(index);
   const hideScrollAnimation = useRef33(true);
-  useEffect28(() => {
+  useEffect29(() => {
     if (containerRef.current) {
       if (scrollingMethod.current === "manual") {
         scrollingMethod.current = "none";
@@ -28806,7 +28839,7 @@ var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
 import * as React99 from "react";
-import { useState as useState44 } from "react";
+import { useState as useState45 } from "react";
 import { jsx as jsx182, jsxs as jsxs89 } from "react/jsx-runtime";
 var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   title,
@@ -28818,7 +28851,7 @@ var ToolbarTitle = React99.forwardRef(function ToolbarTitle2({
   const textElementRef = React99.useRef(
     null
   );
-  const [showHoverActions, setShowHoverActions] = useState44(false);
+  const [showHoverActions, setShowHoverActions] = useState45(false);
   return /* @__PURE__ */ jsx182(Box_default2, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx182(
     TextEllipsisTooltip_default,
     {
@@ -29060,7 +29093,7 @@ var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
 import * as React100 from "react";
-import { Fragment as Fragment44, jsx as jsx187, jsxs as jsxs91 } from "react/jsx-runtime";
+import { Fragment as Fragment45, jsx as jsx187, jsxs as jsxs91 } from "react/jsx-runtime";
 var sizes7 = {
   M: 400,
   L: 500,
@@ -29159,7 +29192,7 @@ var MinimizableWindow = React100.forwardRef(function MinimizableWindow2({
       overlayRef.current.style.opacity = "0";
     }
   };
-  return /* @__PURE__ */ jsxs91(Fragment44, { children: [
+  return /* @__PURE__ */ jsxs91(Fragment45, { children: [
     isDraggingState && /* @__PURE__ */ jsx187(
       Box_default2,
       {