@wavelengthusaf/components 2.0.5 → 2.2.1

package/dist/index.js

@@ -2810,7 +2810,7 @@ function findBestStringMatch(searchString, choices) {
   }
   return "";
 }
-function WavelengthAutocomplete({ label, width: width2 = 300, variant = "outlined", items = [], onChange, borderColor: borderColor2, textColor, hoverColor }) {
+function WavelengthAutocomplete({ label, width: width2 = 300, variant = "outlined", items = [], onChange, borderColor: borderColor2, textColor, hoverColor, id }) {
   const defaultItem = items.length > 0 ? items.sort()[0] : "";
   const [selectedValue, setSelectedValue] = useState(defaultItem);
   borderColor2 = borderColor2 ? borderColor2 : "#FFFFFF";
@@ -2819,6 +2819,7 @@ function WavelengthAutocomplete({ label, width: width2 = 300, variant = "outline
   return /* @__PURE__ */ jsx3(Fragment2, { children: /* @__PURE__ */ jsx3(
     Autocomplete,
     {
+      id,
       sx: {
         width: { width: width2 },
         "& .MuiAutocomplete-popupIndicator": { color: borderColor2 },
@@ -2881,7 +2882,7 @@ function WavelengthAutocomplete({ label, width: width2 = 300, variant = "outline
 // src/components/buttons/WavelengthFileDownloader.tsx
 import DownloadIcon from "@mui/icons-material/Download";
 import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button }) {
+function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button, id }) {
   if (fileLoc === "local") {
     const onButtonClick = () => {
       const pdfUrl = fileURL;
@@ -2893,11 +2894,11 @@ function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button }) {
       document.body.removeChild(link);
     };
     return /* @__PURE__ */ jsxs2(Fragment3, { children: [
-      button === void 0 && /* @__PURE__ */ jsxs2(WavelengthButton, { variant: "outlined", onClick: onButtonClick, children: [
+      button === void 0 && /* @__PURE__ */ jsxs2(WavelengthButton, { variant: "outlined", onClick: onButtonClick, id, children: [
         fileName,
         /* @__PURE__ */ jsx4(DownloadIcon, { sx: { marginLeft: "8px" } })
       ] }),
-      /* @__PURE__ */ jsx4("div", { onClick: onButtonClick, children: button })
+      /* @__PURE__ */ jsx4("div", { id, onClick: onButtonClick, children: button })
     ] });
   }
 }
@@ -2905,7 +2906,7 @@ function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button }) {
 // src/components/containers/WavelengthBox/WavelengthBox.tsx
 import Grid from "@mui/material/Grid";
 import { jsx as jsx5 } from "react/jsx-runtime";
-function WavelengthBox({ width: width2, height: height2, children, borderBottomRadius, borderTopRadius }) {
+function WavelengthBox({ width: width2, height: height2, children, borderBottomRadius, borderTopRadius, id }) {
   const palette2 = getPalette();
   return /* @__PURE__ */ jsx5(
     Grid,
@@ -2964,14 +2965,14 @@ function WavelengthContentPlaceholder({ type, width: width2, height: height2, tx
 
 // src/components/logos/applogo/AppLogo.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
+function AppLogo({ width: width2, height: height2, name = "", grayscale, id }) {
   let logo;
   {
   }
   let arg = "";
   if (grayscale) arg = "grayscale(1)";
   if (name.toLowerCase() === "wings") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7("path", { d: "M2.36037 0.97998L6.42418 9.35366L0.397217 5.01932L2.36037 0.97998Z", fill: "#DEE8FF" }),
       /* @__PURE__ */ jsx7("path", { d: "M0 5.67743L16.6372 17.6441L15.6441 20.6623L2.7805 11.4036L0 5.67743Z", fill: "#DEE8FF" }),
       /* @__PURE__ */ jsx7("path", { d: "M3.4834 12.8559L6.2639 18.5821L10.2131 21.4263H15.3922L3.4834 12.8559Z", fill: "#DEE8FF" }),
@@ -2992,7 +2993,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       ";"
     ] });
   } else if (name.toLowerCase() === "563rdpatch") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 892 925", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 892 925", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7("path", { d: "M442 917C147.5 919.5 7 662 7 662L115.5 591.5L767 596.5L883.5 668C883.5 668 736.5 914.5 442 917Z", fill: "#7BAFD4" }),
       /* @__PURE__ */ jsx7(
         "path",
@@ -3209,7 +3210,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       )
     ] });
   } else if (name.toLowerCase() === "563rdlabel") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 569 155", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 569 155", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7("mask", { id: "mask0_200_42", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "352", y: "30", width: "142", height: "95", children: /* @__PURE__ */ jsx7(
         "path",
         {
@@ -3244,7 +3245,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       ] }) })
     ] });
   } else if (name.toLowerCase() === "arrow") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 537 75", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 537 75", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7(
         "path",
         {
@@ -3300,7 +3301,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       ] }) })
     ] });
   } else if (name.toLowerCase() === "channelone") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 600 600", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 600 600", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsxs3("g", { clipPath: "url(#clip0_287_202)", children: [
         /* @__PURE__ */ jsx7(
           "path",
@@ -3322,7 +3323,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       /* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "clip0_287_202", children: /* @__PURE__ */ jsx7("rect", { width: "600.8", height: "600.8", fill: "white" }) }) })
     ] });
   } else if (name.toLowerCase() === "swarm") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 281 281", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 281 281", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7("circle", { cx: "140.5", cy: "140.5", r: "140.5", fill: "#13151F" }),
       /* @__PURE__ */ jsx7(
         "path",
@@ -3379,7 +3380,7 @@ function AppLogo({ width: width2, height: height2, name = "", grayscale }) {
       ] })
     ] });
   } else if (name.toLowerCase() === "wavelengthw") {
-    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 829 515", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width: width2, height: height2, viewBox: "0 0 829 515", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx7("mask", { id: "mask0_164_43", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "830", height: "515", children: /* @__PURE__ */ jsx7(
         "path",
         {
@@ -3412,12 +3413,12 @@ var AppLogo_default = AppLogo;
 
 // src/components/PageComponents/NotAvailablePage.tsx
 import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
-function NotAvailablePage({ appLogoName, errorMessage, backgroundColor: backgroundColor2, buttonText, redirectLink, buttonColorOne, buttonColorTwo }) {
+function NotAvailablePage({ appLogoName, errorMessage, backgroundColor: backgroundColor2, buttonText, redirectLink, buttonColorOne, buttonColorTwo, id }) {
   backgroundColor2 = backgroundColor2 ? backgroundColor2 : "gray";
   appLogoName = appLogoName ? appLogoName : "563rdpatch";
   buttonColorOne = buttonColorOne ? buttonColorOne : "white";
   buttonColorTwo = buttonColorTwo ? buttonColorTwo : "#0D5288";
-  return /* @__PURE__ */ jsx8(Fragment5, { children: /* @__PURE__ */ jsxs4("div", { style: { display: "flex", backgroundColor: backgroundColor2, flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "center", gap: 55, padding: "8%" }, children: [
+  return /* @__PURE__ */ jsx8(Fragment5, { children: /* @__PURE__ */ jsxs4("div", { id, style: { display: "flex", backgroundColor: backgroundColor2, flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "center", gap: 55, padding: "8%" }, children: [
     /* @__PURE__ */ jsx8(AppLogo_default, { name: appLogoName, width: 300, height: 200, grayscale: true }),
     /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx8("p", { style: { textAlign: "center", marginBottom: 45, fontSize: 40, color: "white" }, children: `${errorMessage}` }),
@@ -3528,6 +3529,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           disableListWrap: true,
@@ -3552,7 +3554,6 @@ function WavelengthSearch({
             {
               placeholder,
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3593,6 +3594,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           disableListWrap: true,
@@ -3617,7 +3619,6 @@ function WavelengthSearch({
             {
               placeholder,
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3659,6 +3660,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           freeSolo: true,
@@ -3690,7 +3692,6 @@ function WavelengthSearch({
                 }
               },
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3741,6 +3742,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           freeSolo: true,
@@ -3772,7 +3774,6 @@ function WavelengthSearch({
                 }
               },
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3824,6 +3825,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           disableListWrap: true,
@@ -3849,7 +3851,6 @@ function WavelengthSearch({
             {
               placeholder,
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3890,6 +3891,7 @@ function WavelengthSearch({
       return /* @__PURE__ */ jsx10(Fragment6, { children: /* @__PURE__ */ jsx10(
         Autocomplete2,
         {
+          id,
           filterOptions: (x) => x,
           loading: true,
           freeSolo: true,
@@ -3921,7 +3923,6 @@ function WavelengthSearch({
                 }
               },
               ...params,
-              id,
               size,
               InputProps: {
                 ...params.InputProps,
@@ -3995,9 +3996,8 @@ import ListItem2 from "@mui/material/ListItem";
 import Typography from "@mui/material/Typography";
 import Collapse from "@mui/material/Collapse";
 import List from "@mui/material/List";
-import Box from "@mui/material/Box";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = 240, height: height2 = 300 }) {
+function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor, marginTop, marginLeft, width: width2 = 240, height: height2 = 300, id }) {
   const [openSections, setOpenSections] = useState2({});
   const navigate = useNavigate();
   const palette2 = getPalette();
@@ -4008,9 +4008,10 @@ function WavelengthSideBar({ sections, txtColor, bgColor, labelColor, arrowColor
     }));
   }
   return /* @__PURE__ */ jsx12(
-    Box,
+    "div",
     {
-      sx: {
+      id,
+      style: {
         width: width2,
         minHeight: 300,
         height: height2,
@@ -4113,11 +4114,11 @@ var WavelengthSpinningLogo_default = WavelengthSpinningOuterCircle;
 
 // src/components/PageComponents/WavelengthSpinningLogoComponent.tsx
 import { Fragment as Fragment8, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
-function WavelengthSpinningLogo({ svg = /* @__PURE__ */ jsx14("span", { children: "SVG Goes Here" }), size = 200 }) {
+function WavelengthSpinningLogo({ svg = /* @__PURE__ */ jsx14("span", { children: "SVG Goes Here" }), size = 200, id = "loading" }) {
   const loadingSymbol = /* @__PURE__ */ jsx14(Fragment8, { children: /* @__PURE__ */ jsxs8(
     "div",
     {
-      id: "loading",
+      id,
       style: {
         width: size,
         height: size,
@@ -4153,13 +4154,13 @@ function WavelengthSpinningLogo({ svg = /* @__PURE__ */ jsx14("span", { children
 }
 
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
-import Box2 from "@mui/material/Box";
+import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import Grid2 from "@mui/material/Grid";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function WavelengthFooter() {
   return /* @__PURE__ */ jsx15(
-    Box2,
+    Box,
     {
       sx: {
         width: "100%",
@@ -4194,8 +4195,8 @@ function WavelengthFooter() {
 
 // src/components/headers/WavelengthTitleBar/WavelengthTitleBar.tsx
 import { Fragment as Fragment9, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
-function WavelengthTitleBar() {
-  return /* @__PURE__ */ jsx16(Fragment9, { children: /* @__PURE__ */ jsx16("div", { children: /* @__PURE__ */ jsxs10("svg", { width: "431", height: "122", viewBox: "0 0 431 92", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+function WavelengthTitleBar({ id }) {
+  return /* @__PURE__ */ jsx16(Fragment9, { children: /* @__PURE__ */ jsx16("div", { id, children: /* @__PURE__ */ jsxs10("svg", { width: "431", height: "122", viewBox: "0 0 431 92", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
     /* @__PURE__ */ jsx16(
       "path",
       {
@@ -4223,9 +4224,9 @@ function WavelengthTitleBar() {
   ] }) }) });
 }
 
-// src/components/headers/WavelengthTitleBar/WavelengthBannerHeader.tsx
+// src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
-function WavelengthBannerHeader({ classification, control, headerColor, textColor }) {
+function WavelengthBanner({ classification, control, headerColor, textColor, id }) {
   const palette2 = getPalette();
   if (classification === "unclassified") {
     if (control && control.includes("cui")) {
@@ -4268,7 +4269,7 @@ function WavelengthBannerHeader({ classification, control, headerColor, textColo
       classification = `${classification}/${control[i]}`;
     }
   }
-  return /* @__PURE__ */ jsx17("div", { style: { width: "100%", backgroundColor: headerColor }, children: /* @__PURE__ */ jsx17("p", { style: { width: "100%", color: textColor, textAlign: "center" }, children: classification.toUpperCase() }) });
+  return /* @__PURE__ */ jsx17("div", { style: { width: "100%", backgroundColor: headerColor }, id, children: /* @__PURE__ */ jsx17("p", { style: { width: "100%", color: textColor, textAlign: "center" }, children: classification.toUpperCase() }) });
 }
 
 // src/components/CSFD/ManyPlanes.tsx
@@ -4317,7 +4318,7 @@ function ManyPlanesComponent({ numberOfPlanes = 5, trailDir = "left", color: col
 import Divider from "@mui/material/Divider";
 import Grid4 from "@mui/material/Grid";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
-function WavelengthPlaneTrail({ trailDir = "right" }) {
+function WavelengthPlaneTrail({ trailDir = "right", id }) {
   let direction = "row-reverse";
   let flippy = "";
   if (trailDir !== "right") {
@@ -4329,7 +4330,7 @@ function WavelengthPlaneTrail({ trailDir = "right" }) {
   }
   const palette2 = getPalette();
   return /* @__PURE__ */ jsxs12(Grid4, { container: true, alignItems: "center", flexDirection: direction, children: [
-    /* @__PURE__ */ jsx19(Grid4, { item: true, id: "testExample", children: /* @__PURE__ */ jsxs12("svg", { width: "40", height: "40", viewBox: "0 0 40 40", transform: flippy, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx19(Grid4, { item: true, id, children: /* @__PURE__ */ jsxs12("svg", { width: "40", height: "40", viewBox: "0 0 40 40", transform: flippy, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
       /* @__PURE__ */ jsx19("mask", { id: "mask0_56_851", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "40", height: "40", children: /* @__PURE__ */ jsx19("rect", { x: "40", width: "40", height: "40", transform: "rotate(90 40 0)", fill: "#D9D9D9" }) }),
       /* @__PURE__ */ jsx19("g", { mask: "url(#mask0_56_851)", children: /* @__PURE__ */ jsx19(
         "path",
@@ -4347,11 +4348,11 @@ function WavelengthPlaneTrail({ trailDir = "right" }) {
 import { Button as Button3, Dialog, DialogActions, DialogTitle, DialogContent, Typography as Typography2 } from "@mui/material";
 import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 function WavelengthConfirmationModal(props) {
-  const { show, setShow, handleConfirmationModalOnConfirmProp } = props;
+  const { show, setShow, handleConfirmationModalOnConfirmProp, id } = props;
   const handleClose = () => {
     setShow(false);
   };
-  return /* @__PURE__ */ jsxs13(Dialog, { "data-testid": "testId-WavelengthConfirmationModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
+  return /* @__PURE__ */ jsxs13(Dialog, { id, "data-testid": "testId-WavelengthConfirmationModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
     /* @__PURE__ */ jsx20(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: props.textObj?.title }),
     /* @__PURE__ */ jsx20(DialogContent, { children: /* @__PURE__ */ jsx20(Typography2, { align: "center", children: props.textObj?.dialog }) }),
     /* @__PURE__ */ jsxs13(DialogActions, { style: { justifyContent: `center` }, children: [
@@ -4365,7 +4366,7 @@ function WavelengthConfirmationModal(props) {
 }
 
 // src/components/modals/WavelengthContentModal.tsx
-import { Button as Button4, Dialog as Dialog2, DialogActions as DialogActions2, DialogTitle as DialogTitle2, DialogContent as DialogContent2, Typography as Typography3, IconButton as IconButton2, Box as Box3 } from "@mui/material";
+import { Button as Button4, Dialog as Dialog2, DialogActions as DialogActions2, DialogTitle as DialogTitle2, DialogContent as DialogContent2, Typography as Typography3, IconButton as IconButton2, Box as Box2 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 function WavelengthContentModal(props) {
@@ -4374,9 +4375,9 @@ function WavelengthContentModal(props) {
     setShow(false);
   };
   return /* @__PURE__ */ jsxs14(Dialog2, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
-    /* @__PURE__ */ jsx21(DialogTitle2, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs14(Box3, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ jsx21(Box3, { flexGrow: 1, children: props.textObj?.title }),
-      /* @__PURE__ */ jsx21(Box3, { children: /* @__PURE__ */ jsx21(IconButton2, { onClick: handleClose, children: /* @__PURE__ */ jsx21(CloseIcon, {}) }) })
+    /* @__PURE__ */ jsx21(DialogTitle2, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs14(Box2, { display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ jsx21(Box2, { flexGrow: 1, children: props.textObj?.title }),
+      /* @__PURE__ */ jsx21(Box2, { children: /* @__PURE__ */ jsx21(IconButton2, { onClick: handleClose, children: /* @__PURE__ */ jsx21(CloseIcon, {}) }) })
     ] }) }),
     /* @__PURE__ */ jsx21(DialogContent2, { children: /* @__PURE__ */ jsx21(Typography3, { align: "center", children: props.textObj?.dialog }) }),
     /* @__PURE__ */ jsx21(DialogActions2, { style: { justifyContent: `center` }, children: /* @__PURE__ */ jsx21(Button4, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: props.textObj?.purpose }) })
@@ -4387,7 +4388,7 @@ function WavelengthContentModal(props) {
 import React4 from "react";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import Box4 from "@mui/material/Box";
+import Box3 from "@mui/material/Box";
 import Slide from "@mui/material/Slide";
 import { HelpOutline } from "@mui/icons-material";
 import styled4 from "styled-components";
@@ -4401,7 +4402,7 @@ var emailStyle = {
   marginTop: 8,
   marginBottom: 8
 };
-function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, emailHoverColor = "blue" }) {
+function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, emailHoverColor = "blue", id }) {
   const NavLink = styled4.a``;
   const Links = styled4(NavLink)`
     color: inherit;
@@ -4436,6 +4437,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
     /* @__PURE__ */ jsxs15(
       Menu,
       {
+        id,
         open,
         sx: { width: width2 },
         onClose: handleClose,
@@ -4448,35 +4450,35 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
             if (items.end === true) {
               if (items.itemType === "header") {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs15(Box4, { children: [
+                  return /* @__PURE__ */ jsxs15(Box3, { children: [
                     /* @__PURE__ */ jsx22(MenuItem, { children: /* @__PURE__ */ jsx22("a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: /* @__PURE__ */ jsx22("span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
                     /* @__PURE__ */ jsx22(Divider2, {})
                   ] }, index);
                 } else {
-                  return /* @__PURE__ */ jsxs15(Box4, { children: [
+                  return /* @__PURE__ */ jsxs15(Box3, { children: [
                     /* @__PURE__ */ jsx22("p", { style: { marginLeft: 16, marginRight: 16, marginTop: 6, marginBottom: 6 }, children: /* @__PURE__ */ jsx22("span", { style: { fontWeight: "bold" }, children: items.label }) }),
                     /* @__PURE__ */ jsx22(Divider2, {})
                   ] }, index);
                 }
               } else if (items.itemType === "link") {
-                return /* @__PURE__ */ jsxs15(Box4, { children: [
+                return /* @__PURE__ */ jsxs15(Box3, { children: [
                   /* @__PURE__ */ jsx22(MenuItem, { children: /* @__PURE__ */ jsx22("a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
                   /* @__PURE__ */ jsx22(Divider2, {})
                 ] }, index);
               } else {
                 if (items.link) {
-                  return /* @__PURE__ */ jsxs15(Box4, { children: [
+                  return /* @__PURE__ */ jsxs15(Box3, { children: [
                     /* @__PURE__ */ jsx22(MenuItem, { children: /* @__PURE__ */ jsx22("a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
                     /* @__PURE__ */ jsx22(Divider2, {})
                   ] }, index);
                 } else {
                   if (items.email) {
-                    return /* @__PURE__ */ jsxs15(Box4, { children: [
+                    return /* @__PURE__ */ jsxs15(Box3, { children: [
                       /* @__PURE__ */ jsx22(Links, { href: items.email, style: emailStyle, children: items.label }),
                       /* @__PURE__ */ jsx22(Divider2, {})
                     ] }, index);
                   } else {
-                    return /* @__PURE__ */ jsxs15(Box4, { children: [
+                    return /* @__PURE__ */ jsxs15(Box3, { children: [
                       /* @__PURE__ */ jsx22("p", { style: customStyle, children: items.label }),
                       /* @__PURE__ */ jsx22(Divider2, {})
                     ] }, index);
@@ -4585,8 +4587,6 @@ function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
     "& .MuiMenu-list": {
-      // paddingTop: "6px",
-      // paddingBottom: "6px",
       borderBottomLeftRadius: "8px",
       borderBottomRightRadius: "8px",
       borderLeft: `1px solid ${myMenusx.borderColor}`,
@@ -4624,7 +4624,7 @@ import SnackbarContent from "@mui/material/SnackbarContent";
 import CloseIcon2 from "@mui/icons-material/Close";
 import { IconButton as IconButton4 } from "@mui/material";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon }) {
+function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
   const handleClose = () => {
     setShow(false);
   };
@@ -4634,6 +4634,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
   return /* @__PURE__ */ jsx24(
     Snackbar,
     {
+      id,
       open: show,
       onClose: handleClose,
       autoHideDuration: durationMs,
@@ -4665,7 +4666,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
 import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon }) {
+function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
   const handleClose = () => {
     toggleShow(false);
   };
@@ -4682,6 +4683,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
   return /* @__PURE__ */ jsx25(
     Snackbar2,
     {
+      id,
       sx: { marginTop: customVertyAlign ? `${customVertyAlign}` : "", zIndex: 1400 },
       open: show,
       onClose: handleClose,
@@ -4723,7 +4725,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 }
 
 // src/components/snackbars/TestSnackbar.tsx
-import Box5 from "@mui/material/Box";
+import Box4 from "@mui/material/Box";
 import Button5 from "@mui/material/Button";
 import { useEffect, useRef as useRef2 } from "react";
 import { Fragment as Fragment12, jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -4757,7 +4759,7 @@ function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign
     bgColor = "#737373";
   }
   return /* @__PURE__ */ jsx26(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs19(
-    Box5,
+    Box4,
     {
       sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
       ref,
@@ -4791,17 +4793,190 @@ function TestSnackbar({ isPopUpOpen, toggleOpen, type, message, customVertyAlign
     }
   ) });
 }
+
+// src/components/sliders/WavelengthSlider.tsx
+import Box5 from "@mui/material/Box";
+import Slider from "@mui/material/Slider";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
+  const on = valueDisplayed ? "on" : "off";
+  return /* @__PURE__ */ jsx27(Box5, { sx: { width: width2 }, children: /* @__PURE__ */ jsx27(
+    Slider,
+    {
+      "aria-label": "Custom marks",
+      value,
+      getAriaValueText: labelFunc,
+      step,
+      marks,
+      valueLabelDisplay: on,
+      max: maxVal,
+      min: minVal,
+      onChange: handleChange,
+      sx: {
+        color: color2,
+        "& .MuiSlider-markLabel": {
+          color: labelColor
+        }
+      }
+    }
+  ) });
+}
+
+// src/components/carousels/WavelengthDefaultCarousel.tsx
+import { useState as useState3 } from "react";
+import IconButton5 from "@mui/material/IconButton";
+import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import Typography4 from "@mui/material/Typography";
+import Grid5 from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import CardActionArea from "@mui/material/CardActionArea";
+import { jsx as jsx28, jsxs as jsxs20 } from "react/jsx-runtime";
+var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth }) => {
+  const [currentIndex, setCurrentIndex] = useState3(0);
+  const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
+  const adjustImageHeight = imageHeight !== void 0 ? imageHeight : 250;
+  const adjustImageWidth = imageWidth !== void 0 ? imageWidth : 300;
+  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 345;
+  const adjustCardWidth = cardWidth !== void 0 ? cardWidth : 300;
+  const handleNext = () => {
+    setCurrentIndex((prevIndex) => (prevIndex + 1) % items.length);
+  };
+  const handlePrev = () => {
+    setCurrentIndex((prevIndex) => (prevIndex - 1 + items.length) % items.length);
+  };
+  const handleClick = () => {
+    window.open(items[currentIndex].path, "_blank");
+  };
+  return /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs20(
+    Grid5,
+    {
+      container: true,
+      spacing: 1,
+      sx: {
+        alignItems: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(IconButton5, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx28(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
+        /* @__PURE__ */ jsx28(
+          Card,
+          {
+            sx: {
+              maxWidth: adjustCardWidth,
+              maxHeight: adjustCardHeight
+            },
+            children: /* @__PURE__ */ jsxs20(CardActionArea, { onClick: handleClick, children: [
+              /* @__PURE__ */ jsx28(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
+              /* @__PURE__ */ jsxs20(CardContent, { children: [
+                /* @__PURE__ */ jsx28(Typography4, { variant: "h4", children: items[currentIndex].title }),
+                /* @__PURE__ */ jsx28(Typography4, { variant: "body1", children: items[currentIndex].description })
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsx28(IconButton5, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx28(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
+      ]
+    }
+  ) }) });
+};
+
+// src/components/carousels/sliderCarousel.tsx
+import { useState as useState4, useEffect as useEffect3 } from "react";
+import Grid6 from "@mui/material/Grid";
+import Card2 from "@mui/material/Card";
+import CardContent2 from "@mui/material/CardContent";
+import CardMedia2 from "@mui/material/CardMedia";
+import CardActionArea2 from "@mui/material/CardActionArea";
+import { jsx as jsx29, jsxs as jsxs21 } from "react/jsx-runtime";
+var delay = 2500;
+var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
+  const [index, setIndex] = useState4(0);
+  const [isHovered, setIsHovered] = useState4(false);
+  useEffect3(() => {
+    setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
+    return () => {
+    };
+  }, [index]);
+  const carouselCardWidth = items.length > 0 ? `calc(35% * ${items.length})` : "200%";
+  const adjustContHeight = contHeight !== void 0 ? contHeight : "100%";
+  const adjustContWidth = contWidth !== void 0 ? contWidth : "200%";
+  const adjustCardHeight = cardHeight !== void 0 ? cardHeight : 120;
+  const adjustCardWith = cardWidth !== void 0 ? cardWidth : 310;
+  const styles = {
+    carouselcontainer: {
+      overflow: "hidden",
+      position: "relative",
+      borderColor: "#4b5563",
+      height: adjustContHeight,
+      width: adjustContWidth,
+      minHeight: "280px",
+      minWidth: "640px",
+      borderRadius: "10px"
+    },
+    carouselTrackStyle: {
+      display: "flex",
+      position: "relative",
+      justifyContent: "center",
+      left: "0",
+      alignItems: "center",
+      gap: "5px",
+      width: carouselCardWidth,
+      height: "100%",
+      transition: "background-color 0.5s ease-in-out"
+    },
+    carouselCard: {
+      transition: "transform 0.3s ease, box-shadow 0.3s ease",
+      transform: isHovered ? "scale(0.9)" : "scale(1)",
+      boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
+    }
+  };
+  return /* @__PURE__ */ jsx29("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx29("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx29(
+    Grid6,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      container: true,
+      spacing: 0.5,
+      children: items.map((card) => /* @__PURE__ */ jsx29("div", { children: /* @__PURE__ */ jsx29(
+        Card2,
+        {
+          sx: {
+            transition: "transform 0.3s ease, box-shadow 0.3s ease",
+            transform: isHovered ? "scale(0.9)" : "scale(1)",
+            boxShadow: isHovered ? "5px 5px 8px rgba(222, 222, 222, 0.362), 10px 10px 8px rgba(152, 133, 133, 0.392), 15px 15px 8px rgba(139, 154, 139, 0.303)" : "none"
+          },
+          onMouseEnter: () => setIsHovered(true),
+          onMouseLeave: () => setIsHovered(false),
+          children: /* @__PURE__ */ jsxs21(CardActionArea2, { href: card.path, children: [
+            /* @__PURE__ */ jsx29(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ jsxs21(CardContent2, { children: [
+              /* @__PURE__ */ jsx29("h3", { children: card.title }),
+              /* @__PURE__ */ jsx29("p", { children: card.description })
+            ] })
+          ] })
+        }
+      ) }, card.title))
+    }
+  ) }) });
+};
 export {
   AppLogo,
   ButtonIcon,
   ButtonMenu,
+  DefaultCarousel,
   ManyPlanesComponent,
   NotAvailablePage,
   SearchTextField,
+  SliderCardCarousel,
   TestSnackbar,
   WavelengthAppTheme,
   WavelengthAutocomplete,
-  WavelengthBannerHeader,
+  WavelengthBanner,
   WavelengthBox,
   WavelengthButton,
   WavelengthConfirmationModal,
@@ -4816,6 +4991,7 @@ export {
   WavelengthPopUpMenu,
   WavelengthSearch,
   WavelengthSideBar,
+  WavelengthSlider,
   WavelengthSnackbar,
   WavelengthSpinningLogo,
   WavelengthSpinningOuterCircle,
@@ -4880,7 +5056,7 @@ react-is/cjs/react-is.development.js:
 
 @mui/styled-engine/index.js:
   (**
-   * @mui/styled-engine v5.16.12
+   * @mui/styled-engine v5.16.14
    *
    * @license MIT
    * This source code is licensed under the MIT license found in the