@cognizant-ai-lab/ui-common 1.3.3

package/dist/components/AgentChat/VoiceChat/VoiceChat.js

@@ -0,0 +1,180 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+// #endregion: Types
+// Check if browser is Chrome (excluding Edge). Only Chrome (on Mac OS and Windows) has full support for
+// SpeechRecognition. Also, tested that this will exclude Firefox and Safari.
+const isChrome = () => /Chrome/u.test(navigator.userAgent) && !/Edge/u.test(navigator.userAgent) && !/Edg\//u.test(navigator.userAgent);
+// Check browser/platform support
+export const checkSpeechSupport = () => {
+    if (typeof window === "undefined")
+        return false;
+    // Check if browser supports SpeechRecognition
+    const hasSpeechRecognition = "SpeechRecognition" in window;
+    // Only Chrome provides reliable speech recognition support
+    return hasSpeechRecognition && isChrome();
+};
+// Handle speech recognition start
+const handleRecognitionStart = (setVoiceInputState) => () => {
+    setVoiceInputState((prev) => ({
+        ...prev,
+        currentTranscript: "",
+        isListening: true,
+    }));
+};
+// Handle speech recognition end
+const handleRecognitionEnd = (setVoiceInputState) => () => {
+    setVoiceInputState((prev) => ({
+        ...prev,
+        isListening: false,
+        isProcessingSpeech: false,
+    }));
+};
+// Handle speech recognition results
+const handleRecognitionResult = (setVoiceInputState, setChatInput) => (event) => {
+    // interimTranscript: accumulates live (non-final) results for real-time feedback (currentTranscript).
+    let interimTranscript = "";
+    // finalTranscript: accumulates finalized results for input (finalTranscript).
+    let finalTranscript = "";
+    for (let i = event.resultIndex; i < event.results.length; i += 1) {
+        const transcript = event.results[i][0].transcript;
+        if (event.results[i].isFinal) {
+            // Finalized segment, ready for input
+            finalTranscript += transcript;
+        }
+        else {
+            // Live segment, for real-time feedback
+            interimTranscript += transcript;
+        }
+    }
+    setVoiceInputState((prev) => ({
+        ...prev,
+        currentTranscript: interimTranscript,
+        finalTranscript,
+        // Always show loading indicator while listening, until final transcript or recognition end
+        isProcessingSpeech: true,
+    }));
+    // Process final transcript
+    if (finalTranscript) {
+        setVoiceInputState((prev) => ({
+            ...prev,
+            isProcessingSpeech: false,
+        }));
+        setChatInput((prev) => {
+            const needsSpace = prev && !prev.endsWith(" ");
+            return prev + (needsSpace ? " " : "") + finalTranscript;
+        });
+    }
+};
+// Handle speech recognition errors
+const handleRecognitionError = (setVoiceInputState) => (event) => {
+    console.error("Speech recognition error:", event.error);
+    setVoiceInputState((prev) => ({
+        ...prev,
+        isListening: false,
+        isProcessingSpeech: false,
+    }));
+};
+// Remove speech recognition event handlers and stop speech recognition
+export function cleanupAndStopSpeechRecognition(speechRecognitionRef, handlers) {
+    const speechRecognition = speechRecognitionRef.current;
+    if (!speechRecognition || !handlers)
+        return;
+    speechRecognition.removeEventListener("end", handlers.end);
+    speechRecognition.removeEventListener("error", handlers.error);
+    speechRecognition.removeEventListener("result", handlers.result);
+    speechRecognition.removeEventListener("start", handlers.start);
+    try {
+        speechRecognition.stop();
+    }
+    catch (error) {
+        console.warn("Error stopping speechRecognition:", error);
+    }
+    speechRecognitionRef.current = null;
+}
+export function setupSpeechRecognition(setChatInput, setVoiceInputState, speechRecognitionRef) {
+    const speechSupported = checkSpeechSupport();
+    if (speechSupported) {
+        const speechRecognition = new SpeechRecognition();
+        speechRecognition.continuous = true;
+        speechRecognition.interimResults = true;
+        speechRecognition.lang = navigator.language || "en-US";
+        // Create handler references
+        const handlers = {
+            end: handleRecognitionEnd(setVoiceInputState),
+            error: handleRecognitionError(setVoiceInputState),
+            result: handleRecognitionResult(setVoiceInputState, setChatInput),
+            start: handleRecognitionStart(setVoiceInputState),
+        };
+        speechRecognition.addEventListener("end", handlers.end);
+        speechRecognition.addEventListener("error", handlers.error);
+        speechRecognition.addEventListener("result", handlers.result);
+        speechRecognition.addEventListener("start", handlers.start);
+        speechRecognitionRef.current = speechRecognition;
+        return handlers;
+    }
+    else {
+        speechRecognitionRef.current = null;
+        return null;
+    }
+}
+// Request microphone permission
+const requestMicrophonePermission = async () => {
+    if (!isChrome())
+        return false;
+    if ("mediaDevices" in navigator && "getUserMedia" in navigator.mediaDevices) {
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true,
+                },
+            });
+            stream.getTracks().forEach((track) => track.stop());
+            return true;
+        }
+        catch (error) {
+            if (error instanceof Error &&
+                (error.name === "NotAllowedError" || error.name === "PermissionDeniedError")) {
+                return false;
+            }
+            // For other errors, still allow recognition to proceed (Chrome supports it)
+            return true;
+        }
+    }
+    return false;
+};
+// Toggle listening function
+export const toggleListening = async (isMicOn, recognition) => {
+    if (!recognition)
+        return;
+    if (isMicOn) {
+        // Request microphone permission before starting
+        const hasPermission = await requestMicrophonePermission();
+        if (hasPermission) {
+            recognition.start();
+        }
+    }
+    else {
+        // Stop recognition immediately
+        try {
+            recognition.stop();
+        }
+        catch (error) {
+            console.warn("Error stopping speech recognition:", error);
+        }
+    }
+};

package/dist/components/Authentication/Auth.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+interface AuthProps {
+    children: ReactNode;
+}
+/**
+ * Higher-level component to wrap pages that require authentication.
+ *
+ * Taken from here: https://github.com/nextauthjs/next-auth/issues/1210#issuecomment-782630909
+ *
+ * @param children Contained components protected by the authentication guard
+ * @return children (protected) components if user is authenticated, otherwise "Loading" message.
+ */
+export declare const Auth: ({ children }: AuthProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Authentication/Auth.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/**
+ * Utility functions relating to authentication
+ */
+import { signIn, useSession } from "next-auth/react";
+import { useEffect } from "react";
+import { PageLoader } from "../Common/PageLoader.js";
+// Use this provider for authentication via next-auth. It *must* correspond to one of those listed in
+// ./pages/api/auth/[...nextauth].js
+const AUTHENTICATION_PROVIDER = "auth0";
+/**
+ * Higher-level component to wrap pages that require authentication.
+ *
+ * Taken from here: https://github.com/nextauthjs/next-auth/issues/1210#issuecomment-782630909
+ *
+ * @param children Contained components protected by the authentication guard
+ * @return children (protected) components if user is authenticated, otherwise "Loading" message.
+ */
+export const Auth = ({ children }) => {
+    // Suppress no-shadow rule -- we have to use what the API gives us
+    // eslint-disable-next-line no-shadow
+    const { data: session, status } = useSession();
+    const isUser = Boolean(session?.user);
+    const loading = status === "loading";
+    useEffect(() => {
+        if (loading) {
+            // Do nothing while loading
+            return;
+        }
+        // If not authenticated, force log in.
+        // By explicitly specifying the provider here, it skips the annoying and unnecessary next-auth interstitial
+        // screen and goes straight to the login screen of AUTHENTICATION_PROVIDER.
+        if (!isUser) {
+            void signIn(AUTHENTICATION_PROVIDER);
+        }
+    }, [isUser, loading]);
+    if (isUser && !loading) {
+        return _jsx(_Fragment, { children: children });
+    }
+    // Session is being fetched, or no user.
+    // If no user, useEffect() will redirect.
+    return _jsx(PageLoader, { id: "authentication-page" });
+};

package/dist/components/ChatBot/ChatBot.d.ts

@@ -0,0 +1,20 @@
+import { FC } from "react";
+interface ChatBotProps {
+    /**
+     * id HTML id to use for the outer component
+     */
+    readonly id: string;
+    /**
+     * Path to image for user avatar
+     */
+    readonly userAvatar: string;
+    /**
+     * Text about current page to help the LLM respond intelligently
+     */
+    readonly pageContext: string;
+}
+/**
+ * Site-wide Chatbot component.
+ */
+export declare const ChatBot: FC<ChatBotProps>;
+export {};

package/dist/components/ChatBot/ChatBot.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import ContactSupportIcon from "@mui/icons-material/ContactSupport";
+import { useColorScheme, useTheme } from "@mui/material";
+import Box from "@mui/material/Box";
+import Grow from "@mui/material/Grow";
+import { useState } from "react";
+import { CHATBOT_ENDPOINT } from "../../controller/llm/endpoints.js";
+import { useAuthentication } from "../../utils/Authentication.js";
+import { isDarkMode } from "../../utils/Theme.js";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+import { ChatCommon } from "../AgentChat/ChatCommon.js";
+import { LegacyAgentType } from "../AgentChat/Types.js";
+/**
+ * Site-wide Chatbot component.
+ */
+// Temporarily disabled but will be used once we migrated the backend to use Neuro-san RAG.
+export const ChatBot = ({ id, userAvatar, pageContext }) => {
+    const [chatOpen, setChatOpen] = useState(false);
+    const [isAwaitingLlm, setIsAwaitingLlm] = useState(false);
+    const { user: { name: currentUser }, } = useAuthentication().data;
+    // MUI theme and dark mode
+    const theme = useTheme();
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    // Shadow color for icon. TODO: use MUI theme system instead.
+    const shadowColor = darkMode ? "255, 255, 255" : "0, 0, 0";
+    return (_jsxs(_Fragment, { children: [_jsx(Grow, { id: `chatbot-window-animation-${id}`, in: chatOpen, timeout: 300, style: { transformOrigin: "bottom right" }, easing: "ease-in-out", children: _jsx(Box, { id: id, sx: {
+                        position: "fixed",
+                        bottom: 50,
+                        right: "2rem",
+                        height: "60%",
+                        maxWidth: 400,
+                        background: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",
+                        boxShadow: `0 0px 2px 0 rgba(${shadowColor}, 0.15)`,
+                        borderRadius: "var(--bs-border-radius)",
+                        borderWidth: 1,
+                        borderColor: darkMode ? "var(--bs-white)" : "var(--bs-gray-light)",
+                        zIndex: getZIndex(2, theme),
+                    }, children: _jsx(ChatCommon, { id: "chatbot-window", currentUser: currentUser, setIsAwaitingLlm: setIsAwaitingLlm, isAwaitingLlm: isAwaitingLlm, targetAgent: LegacyAgentType.ChatBot, userImage: userAvatar, legacyAgentEndpoint: CHATBOT_ENDPOINT, extraParams: { pageContext }, backgroundColor: darkMode ? "var(--bs-gray-dark)" : "var(--bs-tertiary-blue)", title: "Cognizant Neuro AI Assistant", onClose: () => setChatOpen(false) }) }) }), !chatOpen && (_jsx(Box, { id: `chatbot-icon-${id}`, sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-white)",
+                    borderRadius: "50%",
+                    bottom: 16,
+                    // For now mimic MUI's default box shadow but change color based on dark mode.
+                    // Eventually we should use MUI's theme system.
+                    boxShadow: `
+                              0px 2px 4px -1px rgba(${shadowColor}, 0.2),
+                              0px 4px 5px 0px rgba(${shadowColor}, 0.14),
+                              0px 1px 10px 0px rgba(${shadowColor}, 0.12)
+                            `,
+                    cursor: "pointer",
+                    height: 40,
+                    justifyContent: "center",
+                    maxWidth: 40,
+                    padding: "1rem",
+                    position: "fixed",
+                    right: 16,
+                }, onClick: () => setChatOpen(true), children: _jsx(ContactSupportIcon, { id: `chatbot-icon-${id}` }) }))] }));
+};

package/dist/components/Common/Breadcrumbs.d.ts

@@ -0,0 +1,6 @@
+import { JSX as ReactJSX } from "react";
+interface NeuroAIBreadcrumbsProps {
+    readonly pathname?: string;
+}
+export declare const NeuroAIBreadcrumbs: ({ pathname }: NeuroAIBreadcrumbsProps) => ReactJSX.Element;
+export {};

package/dist/components/Common/Breadcrumbs.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { Typography } from "@mui/material";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Grid from "@mui/material/Grid";
+import startCase from "lodash-es/startCase.js";
+export const NeuroAIBreadcrumbs = ({ pathname }) => {
+    const urlPaths = pathname?.split("/").filter((path) => path !== "");
+    const pageName = startCase(urlPaths?.at(-1));
+    return (_jsx(Grid, { id: "nav-bar-breadcrumbs-row", container: true, sx: {
+            justifyContent: "flex-start",
+            width: "100%",
+        }, children: _jsxs(Breadcrumbs, { style: {
+                marginTop: "1rem",
+            }, id: "breadcrumb-nav", "aria-label": "breadcrumb", separator: _jsx(ChevronRightIcon, { id: "breadcrumb-separator", fontSize: "small" }), children: [_jsx("a", { id: "breadcrumb-link-home", href: "/", children: "Home" }), urlPaths?.slice(0, -1).map((urlPath, idx) => {
+                    const redirectPath = urlPaths.slice(0, idx + 1).join("/");
+                    return (_jsx("a", { id: `breadcrumb-link__${urlPath}`, style: {
+                            textDecoration: "underlined",
+                        }, href: `/${redirectPath}`, children: startCase(urlPath) }, urlPath));
+                }), _jsx(Typography, { id: "breadcrumb-link__current", children: pageName })] }) }));
+};

package/dist/components/Common/LlmChatOptionsButton.d.ts

@@ -0,0 +1,9 @@
+type LLMChatGroupConfigBtnProps = {
+    enabled?: boolean;
+    posRight?: number;
+    posBottom?: number;
+};
+export declare const LlmChatOptionsButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "href" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loading" | "loadingIndicator" | "loadingPosition" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & LLMChatGroupConfigBtnProps, {}, {}>;
+export {};

package/dist/components/Common/LlmChatOptionsButton.js

@@ -0,0 +1,31 @@
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { styled } from "@mui/material";
+import Button from "@mui/material/Button";
+import { getZIndex } from "../../utils/zIndexLayers.js";
+export const LlmChatOptionsButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "enabled" && prop !== "posRight" && prop !== "posBottom",
+})(({ enabled, posRight }) => ({
+    position: "absolute",
+    top: 10,
+    right: posRight || null,
+    zIndex: getZIndex(1, null), // Seems to only be needed on Analytics Chat, but apply to all.
+    background: `${enabled ? "var(--bs-primary)" : "darkgray"} !important`,
+    borderColor: `${enabled ? "var(--bs-primary)" : "darkgray"} !important`,
+    borderRadius: "var(--bs-border-radius)",
+    width: "30px",
+    height: "30px",
+}));

package/dist/components/Common/LoadingSpinner.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+interface LoadingSpinnerProps {
+    id: string;
+}
+/**
+ * A simple loading spinner component that displays a circular progress indicator
+ * @param id The id for the spinner and text elements, for testing
+ */
+export declare const LoadingSpinner: FC<LoadingSpinnerProps>;
+export {};

package/dist/components/Common/LoadingSpinner.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import CircularProgress from "@mui/material/CircularProgress";
+/**
+ * A simple loading spinner component that displays a circular progress indicator
+ * @param id The id for the spinner and text elements, for testing
+ */
+export const LoadingSpinner = ({ id }) => {
+    return (_jsxs("h3", { id: id, children: [_jsx(CircularProgress, { id: `${id}-spinner`, sx: { color: "var(--bs-primary)" }, size: 35 }), _jsx("span", { id: `${id}-loading-text`, style: { marginLeft: "1em" }, children: "Loading..." })] }));
+};

package/dist/components/Common/MUIAccordion.d.ts

@@ -0,0 +1,17 @@
+import { SxProps } from "@mui/material";
+import { FC, ReactNode } from "react";
+interface MUIAccordionItem {
+    content: ReactNode;
+    disabled?: boolean;
+    title: ReactNode;
+}
+export interface MUIAccordionProps {
+    arrowPosition?: "left" | "right";
+    defaultExpandedPanelKey?: number;
+    expandOnlyOnePanel?: boolean;
+    id: string;
+    items: MUIAccordionItem[];
+    sx?: SxProps;
+}
+export declare const MUIAccordion: FC<MUIAccordionProps>;
+export {};

package/dist/components/Common/MUIAccordion.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
+import { styled, useColorScheme } from "@mui/material";
+import MuiAccordion from "@mui/material/Accordion";
+import MuiAccordionDetails from "@mui/material/AccordionDetails";
+import MuiAccordionSummary, { accordionSummaryClasses } from "@mui/material/AccordionSummary";
+import Typography from "@mui/material/Typography";
+import { useCallback, useState } from "react";
+import { isDarkMode } from "../../utils/Theme.js";
+// #region: Styled Components
+const Accordion = styled((props) => (_jsx(MuiAccordion, { disableGutters: true, elevation: 0, id: "mui-accordion", ...props })))(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    "&::before": {
+        display: "none",
+    },
+}));
+const AccordionSummary = styled((props) => (_jsx(MuiAccordionSummary, { id: "mui-accordion-summary", expandIcon: _jsx(ArrowForwardIosSharpIcon, { id: "arrow-forward", sx: { fontSize: "0.9rem" } }), ...props })))(({ theme }) => ({
+    [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: {
+        transform: "rotate(90deg)",
+    },
+    [`& .${accordionSummaryClasses.content}`]: {
+        marginLeft: theme.spacing(1),
+    },
+}));
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+    borderTop: "1px solid rgba(0, 0, 0, .125)",
+    padding: theme.spacing(2),
+}));
+// #endregion: Types
+export const MUIAccordion = ({ arrowPosition = "left", defaultExpandedPanelKey, expandOnlyOnePanel = false, id, items, sx, }) => {
+    // Dark mode
+    const { mode, systemMode } = useColorScheme();
+    const darkMode = isDarkMode(mode, systemMode);
+    const [expandedList, setExpandedList] = useState(defaultExpandedPanelKey ? [defaultExpandedPanelKey] : []);
+    const handleChange = useCallback((panelKey) => (_event, newExpanded) => {
+        setExpandedList((prevExpandedList) => {
+            if (!expandOnlyOnePanel) {
+                return newExpanded
+                    ? [...prevExpandedList, panelKey]
+                    : prevExpandedList.filter((key) => key !== panelKey);
+            }
+            else {
+                return newExpanded ? [panelKey] : [];
+            }
+        });
+    }, [expandOnlyOnePanel]);
+    const isExpanded = useCallback((panelKey) => expandedList.includes(panelKey), [expandedList]);
+    return (_jsx(_Fragment, { children: items.map(({ content, disabled = false, title }, index) => {
+            const panelKey = index + 1; // Start with index 1
+            const baseIdAndPanelKey = `${id}-${panelKey}`;
+            return (_jsxs(Accordion, { disabled: disabled, expanded: isExpanded(panelKey), id: `${baseIdAndPanelKey}-accordion`, onChange: handleChange(panelKey), sx: sx, children: [_jsx(AccordionSummary, { "aria-controls": `${baseIdAndPanelKey}-summary`, id: `${baseIdAndPanelKey}-summary`, sx: {
+                            backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "var(--bs-gray-background)",
+                            color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
+                            flexDirection: arrowPosition === "left" ? "row-reverse" : undefined,
+                        }, children: _jsx(Typography, { component: "span", id: `${baseIdAndPanelKey}-summary-typography`, sx: { fontSize: "0.9rem" }, children: title }) }), _jsx(AccordionDetails, { id: `${baseIdAndPanelKey}-details`, sx: {
+                            backgroundColor: darkMode ? "var(--bs-dark-mode-dim)" : "rgba(0, 0, 0, 0.02)",
+                            borderColor: darkMode ? "var(--bs-white)" : "var(--bs-border-color)",
+                            color: darkMode ? "var(--bs-white)" : "var(--bs-primary)",
+                        }, children: _jsx(Typography, { component: "span", id: `${baseIdAndPanelKey}-details-typography`, sx: { fontSize: "0.85rem" }, children: content }) })] }, `${baseIdAndPanelKey}-accordion`));
+        }) }));
+};

package/dist/components/Common/MUIAlert.d.ts

@@ -0,0 +1,11 @@
+import { AlertColor, SxProps } from "@mui/material";
+import { FC, ReactNode } from "react";
+interface MUIAlertProps {
+    children: ReactNode;
+    closeable?: boolean;
+    id: string;
+    severity: AlertColor;
+    sx?: SxProps;
+}
+export declare const MUIAlert: FC<MUIAlertProps>;
+export {};

package/dist/components/Common/MUIAlert.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+Copyright 2025 Cognizant Technology Solutions Corp, www.cognizant.com.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import CloseIcon from "@mui/icons-material/Close";
+import { Alert, Collapse, IconButton, styled } from "@mui/material";
+import { useState } from "react";
+// #region: Styled Components
+const StyledAlert = styled(Alert)({
+    fontSize: "large",
+    marginBottom: "1rem",
+    "& .MuiAlert-message": {
+        paddingTop: "0.25rem",
+        paddingBottom: "0.25rem",
+    },
+});
+// #endregion: Types
+export const MUIAlert = ({ children, closeable = false, id, severity, sx }) => {
+    const [alertOpen, setAlertOpen] = useState(true);
+    const handleClose = () => {
+        setAlertOpen(false);
+    };
+    return (_jsx(Collapse, { id: `${id}-collapse`, in: alertOpen, children: _jsx(StyledAlert, { action: closeable && (_jsx(IconButton, { "aria-label": "close", color: "inherit", id: `${id}-icon-button`, onClick: () => {
+                    setAlertOpen(false);
+                }, size: "small", sx: {
+                    bottom: "2px",
+                    position: "relative",
+                }, children: _jsx(CloseIcon, { fontSize: "inherit", id: `${id}-close-icon` }) })), id: id, onClose: closeable ? handleClose : undefined, severity: severity, sx: sx, children: children }) }));
+};

package/dist/components/Common/MUIDialog.d.ts

@@ -0,0 +1,16 @@
+import { SxProps } from "@mui/material";
+import { FC, JSX as ReactJSX, ReactNode } from "react";
+interface MUIDialogProps {
+    children: ReactNode;
+    className?: string;
+    closeable?: boolean;
+    contentSx?: SxProps;
+    footer?: ReactJSX.Element;
+    id: string;
+    isOpen: boolean;
+    onClose: () => void;
+    paperProps?: SxProps;
+    title?: ReactNode;
+}
+export declare const MUIDialog: FC<MUIDialogProps>;
+export {};