@connectif/ui-components 1.0.0 → 1.0.2

package/dist/index.js

@@ -5079,7 +5079,37 @@ import * as React4 from "react";
 import {
   Typography as MuiTypography
 } from "@mui/material";
+
+// node_modules/@mui/styled-engine/index.js
+import emStyled from "@emotion/styled";
+import { ThemeContext, keyframes, css } from "@emotion/react";
+function styled2(tag, options) {
+  const stylesFactory = emStyled(tag, options);
+  if (true) {
+    return (...styles2) => {
+      const component = typeof tag === "string" ? `"${tag}"` : "component";
+      if (styles2.length === 0) {
+        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n"));
+      } else if (styles2.some((style3) => style3 === void 0)) {
+        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
+      }
+      return stylesFactory(...styles2);
+    };
+  }
+  return stylesFactory;
+}
+var internal_processStyles = (tag, processor) => {
+  if (Array.isArray(tag.__emotion_styles)) {
+    tag.__emotion_styles = processor(tag.__emotion_styles);
+  }
+};
+
+// src/components/typography/Typography.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
+var shimmerKeyframe = keyframes`
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+`;
 var Typography = React4.forwardRef(function Typography2({
   children,
   noWrap,
@@ -5088,6 +5118,7 @@ var Typography = React4.forwardRef(function Typography2({
   variant = "body1",
   color: color2 = gunMetal,
   italic = false,
+  shimmer,
   ...rest
 }, ref) {
   return /* @__PURE__ */ jsx5(
@@ -5100,6 +5131,19 @@ var Typography = React4.forwardRef(function Typography2({
         ...noWrap && { overflow: "clip", overflowY: "visible" },
         fontStyle: italic ? "italic" : "normal",
         ...color2 && { color: color2 },
+        ...shimmer && {
+          background: `linear-gradient(
+                        90deg,
+                        ${shimmer.startColor} 0%,
+                        ${shimmer.endColor} 25%,
+                        ${shimmer.startColor} 100%
+                    )`,
+          backgroundSize: "200% 100%",
+          color: "transparent",
+          WebkitBackgroundClip: "text",
+          backgroundClip: "text",
+          animation: `${shimmerKeyframe} ${shimmer.duration || 1.5}s infinite`
+        },
         ...sx
       },
       component,
@@ -6462,30 +6506,6 @@ __export(Animations_exports, {
   littleBeating: () => littleBeating
 });
 
-// node_modules/@mui/styled-engine/index.js
-import emStyled from "@emotion/styled";
-import { ThemeContext, keyframes, css } from "@emotion/react";
-function styled2(tag, options) {
-  const stylesFactory = emStyled(tag, options);
-  if (true) {
-    return (...styles2) => {
-      const component = typeof tag === "string" ? `"${tag}"` : "component";
-      if (styles2.length === 0) {
-        console.error([`MUI: Seems like you called \`styled(${component})()\` without a \`style\` argument.`, 'You must provide a `styles` argument: `styled("div")(styleYouForgotToPass)`.'].join("\n"));
-      } else if (styles2.some((style3) => style3 === void 0)) {
-        console.error(`MUI: the styled(${component})(...args) API requires all its args to be defined.`);
-      }
-      return stylesFactory(...styles2);
-    };
-  }
-  return stylesFactory;
-}
-var internal_processStyles = (tag, processor) => {
-  if (Array.isArray(tag.__emotion_styles)) {
-    tag.__emotion_styles = processor(tag.__emotion_styles);
-  }
-};
-
 // node_modules/@babel/runtime/helpers/esm/extends.js
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -13248,6 +13268,10 @@ var ChatMessage = React34.forwardRef(function ChatMessage2({
   errorText,
   optionsBar,
   cancelableButtonText,
+  backgroundColor: backgroundColor2,
+  highlightStartEdge = true,
+  typographyColor,
+  typographyVariant,
   onCancelableButtonClicked,
   ...rest
 }, ref) {
@@ -13289,12 +13313,18 @@ var ChatMessage = React34.forwardRef(function ChatMessage2({
                         display: "flex",
                         flexDirection: "column",
                         boxShadow: shadows[0],
-                        backgroundColor: messageType === "incoming" ? white : primary300,
+                        backgroundColor: !backgroundColor2 ? messageType === "incoming" ? white : primary300 : backgroundColor2,
                         borderWidth: "1px",
                         borderStyle: "solid",
-                        borderColor: messageType === "incoming" ? grey200 : primary300,
+                        borderColor: !backgroundColor2 ? messageType === "incoming" ? grey200 : primary300 : backgroundColor2,
                         color: messageType === "incoming" ? grey900 : white,
-                        borderRadius: "8px",
+                        borderRadius: "12px",
+                        ...highlightStartEdge && messageType === "outgoing" && {
+                          borderTopRightRadius: "4px"
+                        },
+                        ...highlightStartEdge && messageType === "incoming" && {
+                          borderTopLeftRadius: "4px"
+                        },
                         padding: "8px",
                         paddingBottom: !cancelableButtonText ? "8px" : "40px",
                         marginLeft: 0,
@@ -13304,8 +13334,8 @@ var ChatMessage = React34.forwardRef(function ChatMessage2({
                         /* @__PURE__ */ jsx79(
                           Typography_default,
                           {
-                            color: messageType === "incoming" ? grey900 : white,
-                            variant: "body2",
+                            color: !typographyColor ? messageType === "incoming" ? grey900 : white : typographyColor,
+                            variant: typographyVariant || "body2",
                             sx: { whiteSpace: "pre-line" },
                             children
                           }
@@ -13392,7 +13422,7 @@ import Box3 from "@mui/material/Box";
 import Stack5 from "@mui/material/Stack";
 import * as React35 from "react";
 import { jsx as jsx80, jsxs as jsxs35 } from "react/jsx-runtime";
-var Chat = ({ children, header }) => {
+var Chat = ({ children, header, backgroundColor: backgroundColor2 }) => {
   let ref = void 0;
   const [justifyContent, setJustifyContent] = React35.useState(true);
   const [isInitialize, setIsInitialize] = React35.useState(false);
@@ -13427,6 +13457,9 @@ var Chat = ({ children, header }) => {
         },
         "::-webkit-scrollbar-thumb": {
           visibility: "hidden"
+        },
+        ...backgroundColor2 && {
+          backgroundColor: backgroundColor2
         }
       },
       spacing: "12px",
@@ -23296,6 +23329,7 @@ var LinearProgress = ({
 var LinearProgress_default = LinearProgress;
 
 // src/components/progress/CircularProgress.tsx
+import * as React74 from "react";
 import MuiCircularProgress from "@mui/material/CircularProgress";
 import Typography3 from "@mui/material/Typography";
 import Box5 from "@mui/material/Box";
@@ -23318,99 +23352,136 @@ var CircularProgress = ({
   roundedStroke = false,
   rotationDegrees,
   typographyVariant = "caption",
-  typographyColor = black
-}) => /* @__PURE__ */ jsxs66(
-  Box5,
-  {
-    sx: {
-      position: "relative",
-      display: "inline-flex",
-      height: circularSizes[size],
-      width: circularSizes[size],
-      "& .MuiCircularProgress-root": {
+  typographyColor = black,
+  gradientColors
+}) => {
+  const gradientName = React74.useRef(
+    gradientColors ? crypto.randomUUID() : void 0
+  );
+  return /* @__PURE__ */ jsxs66(
+    Box5,
+    {
+      sx: {
+        position: "relative",
+        display: "inline-flex",
+        height: circularSizes[size],
         width: circularSizes[size],
-        maxHeight: circularSizes[size]
-      }
-    },
-    children: [
-      showCircularBackground && /* @__PURE__ */ jsx133(
-        Box5,
-        {
-          sx: {
-            position: "absolute",
-            display: "inline-flex",
-            height: circularSizes[size],
-            width: circularSizes[size],
-            "& .MuiCircularProgress-root": {
-              width: circularSizes[size],
-              maxHeight: circularSizes[size]
-            }
-          },
-          children: /* @__PURE__ */ jsx133(
-            MuiCircularProgress,
-            {
-              variant: "determinate",
-              sx: {
-                color: () => grey200
-              },
-              value: 100
-            }
-          )
+        "& .MuiCircularProgress-root": {
+          width: circularSizes[size],
+          maxHeight: circularSizes[size]
         }
-      ),
-      /* @__PURE__ */ jsx133(
-        MuiCircularProgress,
-        {
-          variant,
-          sx: {
-            ...color2 && {
-              color: color2
+      },
+      children: [
+        gradientColors && /* @__PURE__ */ jsx133("svg", { width: 0, height: 0, children: /* @__PURE__ */ jsx133("defs", { children: /* @__PURE__ */ jsxs66(
+          "linearGradient",
+          {
+            id: gradientName.current,
+            x1: "0%",
+            y1: "0%",
+            x2: "0%",
+            y2: "100%",
+            children: [
+              /* @__PURE__ */ jsx133(
+                "stop",
+                {
+                  offset: "0%",
+                  stopColor: gradientColors.startColor
+                }
+              ),
+              /* @__PURE__ */ jsx133(
+                "stop",
+                {
+                  offset: "100%",
+                  stopColor: gradientColors.endColor
+                }
+              )
+            ]
+          }
+        ) }) }),
+        showCircularBackground && /* @__PURE__ */ jsx133(
+          Box5,
+          {
+            sx: {
+              position: "absolute",
+              display: "inline-flex",
+              height: circularSizes[size],
+              width: circularSizes[size],
+              "& .MuiCircularProgress-root": {
+                width: circularSizes[size],
+                maxHeight: circularSizes[size]
+              }
             },
-            ...roundedStroke && {
-              "& .MuiCircularProgress-circle": {
-                strokeLinecap: "round"
+            children: /* @__PURE__ */ jsx133(
+              MuiCircularProgress,
+              {
+                variant: "determinate",
+                sx: {
+                  color: () => grey200
+                },
+                value: 100
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx133(
+          MuiCircularProgress,
+          {
+            variant,
+            sx: {
+              ...color2 && {
+                color: color2
+              },
+              ...roundedStroke && {
+                "& .MuiCircularProgress-circle": {
+                  strokeLinecap: "round"
+                }
+              },
+              ...rotationDegrees && {
+                "& svg": {
+                  transform: `rotate(${rotationDegrees}deg)`
+                }
+              },
+              ...gradientColors && {
+                "svg circle": {
+                  stroke: `url(#${gradientName.current})`
+                }
               }
             },
-            ...rotationDegrees && {
-              "& svg": {
-                transform: `rotate(${rotationDegrees}deg)`
+            size: circularSizes[size],
+            value,
+            thickness
+          }
+        ),
+        variant !== "indeterminate" && /* @__PURE__ */ jsx133(
+          Box5,
+          {
+            sx: {
+              top: 0,
+              left: 0,
+              bottom: 0,
+              right: 0,
+              position: "absolute",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: circularSizes[size],
+              width: circularSizes[size]
+            },
+            children: typeof label === "string" ? /* @__PURE__ */ jsx133(
+              Typography3,
+              {
+                variant: typographyVariant,
+                component: "div",
+                color: typographyColor,
+                children: label
               }
-            }
-          },
-          size: circularSizes[size],
-          value,
-          thickness
-        }
-      ),
-      variant !== "indeterminate" && /* @__PURE__ */ jsx133(
-        Box5,
-        {
-          sx: {
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            position: "absolute",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            height: circularSizes[size],
-            width: circularSizes[size]
-          },
-          children: typeof label === "string" ? /* @__PURE__ */ jsx133(
-            Typography3,
-            {
-              variant: typographyVariant,
-              component: "div",
-              color: typographyColor,
-              children: label
-            }
-          ) : label
-        }
-      )
-    ]
-  }
-);
+            ) : label
+          }
+        )
+      ]
+    }
+  );
+};
 var CircularProgress_default = CircularProgress;
 
 // src/components/progress/DonutProgress.tsx
@@ -23637,10 +23708,10 @@ var Navbar = ({
 var Navbar_default = Navbar;
 
 // src/components/navbar/NavbarButton.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { Box as Box7, ButtonBase as ButtonBase2 } from "@mui/material";
 import { jsx as jsx137, jsxs as jsxs69 } from "react/jsx-runtime";
-var NavbarButton = React74.forwardRef(
+var NavbarButton = React75.forwardRef(
   function NavbarButton2({
     iconId,
     srcUrl,
@@ -23782,10 +23853,10 @@ var NavbarHeader = ({ text }) => /* @__PURE__ */ jsx138(
 var NavbarHeader_default = NavbarHeader;
 
 // src/components/navbar/NavbarLogo.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { ButtonBase as ButtonBase3 } from "@mui/material";
 import { jsx as jsx139 } from "react/jsx-runtime";
-var NavbarLogo = React75.forwardRef(
+var NavbarLogo = React76.forwardRef(
   function NavbarButton3({ src, ...rest }, ref) {
     return /* @__PURE__ */ jsx139(
       ButtonBase3,
@@ -23806,7 +23877,7 @@ var NavbarLogo = React75.forwardRef(
 var NavbarLogo_default = NavbarLogo;
 
 // src/components/overlay/DonutFocusOverlay.tsx
-import * as React76 from "react";
+import * as React77 from "react";
 import { Fragment as Fragment30, jsx as jsx140, jsxs as jsxs70 } from "react/jsx-runtime";
 var DonutFocusOverlay = ({
   isVisible,
@@ -23816,8 +23887,8 @@ var DonutFocusOverlay = ({
   chipLabel,
   chipPosition = "right"
 }) => {
-  const [clientRect, setClientRect] = React76.useState();
-  React76.useEffect(() => {
+  const [clientRect, setClientRect] = React77.useState();
+  React77.useEffect(() => {
     if (!elementRef?.current) {
       setClientRect(void 0);
       return;
@@ -23966,17 +24037,17 @@ var Pager_default = Pager;
 
 // src/components/scrollable/HorizontalScrollable.tsx
 import { ButtonBase as ButtonBase4 } from "@mui/material";
-import * as React77 from "react";
+import * as React78 from "react";
 import { jsx as jsx142, jsxs as jsxs72 } from "react/jsx-runtime";
 var HorizontalScrollable = ({
   style: style3,
   children,
   stepDistance = 200
 }) => {
-  const horizontalContainerRef = React77.useRef(null);
-  const [isLeftArrowHidden, setLeftArrowHidden] = React77.useState(true);
-  const [isRightArrowHidden, setRightArrowHidden] = React77.useState(true);
-  React77.useEffect(() => {
+  const horizontalContainerRef = React78.useRef(null);
+  const [isLeftArrowHidden, setLeftArrowHidden] = React78.useState(true);
+  const [isRightArrowHidden, setRightArrowHidden] = React78.useState(true);
+  React78.useEffect(() => {
     if (!horizontalContainerRef.current) {
       return;
     }
@@ -24107,7 +24178,7 @@ import {
 } from "notistack";
 
 // src/components/snackbar/Snackbar.tsx
-import * as React78 from "react";
+import * as React79 from "react";
 import { SnackbarContent } from "notistack";
 import { Typography as Typography4 } from "@mui/material";
 import { jsx as jsx144, jsxs as jsxs73 } from "react/jsx-runtime";
@@ -24135,7 +24206,7 @@ var iconColors = {
   error: error300,
   warning: complementary300
 };
-var Snackbar = React78.forwardRef(
+var Snackbar = React79.forwardRef(
   function Snackbar2({
     severity = "info",
     message,
@@ -24147,10 +24218,10 @@ var Snackbar = React78.forwardRef(
     identifierKey: key,
     dataTestKey
   }, ref) {
-    const actionClickHandler = React78.useCallback(() => {
+    const actionClickHandler = React79.useCallback(() => {
       onActionClick && onActionClick(key);
     }, [onActionClick, key]);
-    const closeClickHandler = React78.useCallback(() => {
+    const closeClickHandler = React79.useCallback(() => {
       onCloseClick && onCloseClick(key);
     }, [onCloseClick, key]);
     return /* @__PURE__ */ jsx144(
@@ -24314,7 +24385,7 @@ var TabButton = ({
 var TabButton_default = TabButton;
 
 // src/components/tab/Tabs.tsx
-import * as React79 from "react";
+import * as React80 from "react";
 import MuiTabs from "@mui/material/Tabs";
 import SwipeableViews from "react-swipeable-views";
 import { jsx as jsx147, jsxs as jsxs74 } from "react/jsx-runtime";
@@ -24328,7 +24399,7 @@ var Tabs = ({
   contained = false,
   scrollbarGutter
 }) => {
-  const [value, setValue] = React79.useState(0);
+  const [value, setValue] = React80.useState(0);
   const handleChangeIndex = (index) => {
     onChangeTab?.(index);
     setValue(index);
@@ -24515,12 +24586,12 @@ var TableCell = ({
 var TableCell_default = TableCell;
 
 // src/components/table/TableCellCopy.tsx
-import * as React80 from "react";
+import * as React81 from "react";
 import { jsx as jsx154 } from "react/jsx-runtime";
 var TableCellCopy = ({ text, ...rest }) => {
   const { t } = useTranslation();
-  const [isCopied, setIsCopied] = React80.useState(false);
-  const [showIcon, setShowIcon] = React80.useState(false);
+  const [isCopied, setIsCopied] = React81.useState(false);
+  const [showIcon, setShowIcon] = React81.useState(false);
   const manageButtonClicked = () => {
     void navigator.clipboard.writeText(text);
     if (isCopied) {
@@ -24655,9 +24726,9 @@ var ToolbarBreadcrumb_default = ToolbarBreadcrumb;
 
 // src/components/toolbar/ToolbarBreadcrumbButton.tsx
 import { ButtonBase as ButtonBase5 } from "@mui/material";
-import * as React81 from "react";
+import * as React82 from "react";
 import { jsx as jsx159 } from "react/jsx-runtime";
-var ToolbarBreadcrumbButton = React81.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
+var ToolbarBreadcrumbButton = React82.forwardRef(function ToolbarBreadcrumbButton2({ text, className, ...rest }, ref) {
   return /* @__PURE__ */ jsx159(
     ButtonBase5,
     {
@@ -24769,17 +24840,17 @@ var Toolbar = ({
 var Toolbar_default = Toolbar;
 
 // src/components/toolbar/ToolbarTitle.tsx
-import * as React82 from "react";
+import * as React83 from "react";
 import { useState as useState33 } from "react";
 import { jsx as jsx161, jsxs as jsxs76 } from "react/jsx-runtime";
-var ToolbarTitle = React82.forwardRef(function ToolbarTitle2({
+var ToolbarTitle = React83.forwardRef(function ToolbarTitle2({
   title,
   align = "left",
   className,
   hoverActions,
   color: color2 = grey900
 }, ref) {
-  const textElementRef = React82.useRef(null);
+  const textElementRef = React83.useRef(null);
   const [showHoverActions, setShowHoverActions] = useState33(false);
   return /* @__PURE__ */ jsx161(Box_default, { sx: { maxWidth: "100%" }, children: /* @__PURE__ */ jsx161(
     TextEllipsisTooltip_default,
@@ -25021,7 +25092,7 @@ var WidgetTitle = ({ children, sx, multiline = false }) => children ? /* @__PURE
 var WidgetTitle_default = WidgetTitle;
 
 // src/components/window/MinimizableWindow.tsx
-import * as React83 from "react";
+import * as React84 from "react";
 import { Fragment as Fragment32, jsx as jsx166, jsxs as jsxs78 } from "react/jsx-runtime";
 var sizes6 = {
   M: 400,
@@ -25047,7 +25118,7 @@ var iconButtonsStyles = {
     backgroundColor: "rgba(255, 255, 255, 0.2)"
   }
 };
-var MinimizableWindow = React83.forwardRef(function MinimizableWindow2({
+var MinimizableWindow = React84.forwardRef(function MinimizableWindow2({
   children,
   title,
   size = "M",
@@ -25062,17 +25133,17 @@ var MinimizableWindow = React83.forwardRef(function MinimizableWindow2({
   onBack
 }, ref) {
   const { t } = useTranslation();
-  const overlayRef = React83.useRef(null);
-  const windowRef = React83.useRef(null);
-  const headerRef = React83.useRef(null);
-  const [isDraggingState, setIsDraggingState] = React83.useState(false);
-  const diffRef = React83.useRef({ x: 0, y: 0 });
-  React83.useImperativeHandle(ref, () => ({
+  const overlayRef = React84.useRef(null);
+  const windowRef = React84.useRef(null);
+  const headerRef = React84.useRef(null);
+  const [isDraggingState, setIsDraggingState] = React84.useState(false);
+  const diffRef = React84.useRef({ x: 0, y: 0 });
+  React84.useImperativeHandle(ref, () => ({
     window: windowRef.current,
     header: headerRef.current,
     overlay: overlayRef.current
   }));
-  React83.useEffect(() => {
+  React84.useEffect(() => {
     if (open) {
       overlayRef.current?.style.removeProperty("transform");
       overlayRef.current?.style.removeProperty("opacity");