@wavelengthusaf/components 4.7.0 → 4.9.0

package/dist/esm/index.js

@@ -6217,20 +6217,449 @@ var WavelengthDropdown = forwardRef((props, ref) => {
 });
 WavelengthDropdown.displayName = "WavelengthDropdown";
 
+// src/components/modals/WavelengthMenu.tsx
+import { useRef as useRef14, useEffect as useEffect13 } from "react";
+import { jsx as jsx36 } from "react/jsx-runtime";
+var WavelengthMenu = ({
+  backgroundColor: backgroundColor2,
+  textColor,
+  font,
+  fontSize,
+  border: border2,
+  padding: padding2,
+  borderRadius: borderRadius2,
+  selectedColor,
+  disabledColor,
+  items,
+  WavelengthMenuSelect,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = useRef14(null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
+  useEffect13(() => {
+    const el = ref.current;
+    if (!el) return;
+    syncAttribute("background-color", backgroundColor2 || "");
+    syncAttribute("text-color", textColor || "");
+    syncAttribute("font", font || "");
+    syncAttribute("font-size", fontSize || "");
+    syncAttribute("border", border2 || "");
+    syncAttribute("padding", padding2 || "");
+    syncAttribute("border-radius", borderRadius2 || "");
+    syncAttribute("selected-color", selectedColor || "");
+    syncAttribute("disabled-color", disabledColor || "");
+    syncAttribute("items", JSON.stringify(items) || "");
+    const handleSelect = (event) => {
+      if (WavelengthMenuSelect) WavelengthMenuSelect(event.detail);
+    };
+    el.addEventListener("wavelength-menu-select", handleSelect);
+    return () => {
+      el.removeEventListener("wavelength-menu-select", handleSelect);
+    };
+  }, [backgroundColor2, textColor, font, fontSize, border2, padding2, borderRadius2, selectedColor, disabledColor, items, WavelengthMenuSelect]);
+  return /* @__PURE__ */ jsx36(
+    "wavelength-menu",
+    {
+      ref,
+      "background-color": backgroundColor2,
+      "text-color": textColor,
+      font,
+      "font-size": fontSize,
+      border: border2,
+      padding: padding2,
+      "border-radius": borderRadius2,
+      "selected-color": selectedColor,
+      "disabled-color": disabledColor,
+      items: JSON.stringify(items),
+      ...rest
+    }
+  );
+};
+WavelengthMenu.displayName = "WavelengthMenu";
+
+// src/components/modals/WavelengthPagination.tsx
+import { useRef as useRef15, useEffect as useEffect14 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
+var WavelengthPagination = ({
+  testProp,
+  children,
+  // Style argument
+  customStyle: customStyle2,
+  variant,
+  textColor,
+  font,
+  fontSize,
+  border: border2,
+  borderRadius: borderRadius2,
+  padding: padding2,
+  totalPages,
+  currentPage,
+  activeColor,
+  activeTextColor,
+  backgroundColor: backgroundColor2,
+  disabledColor,
+  onPageChange,
+  ...rest
+  // This rest operator includes className, style, onClick, etc.
+}) => {
+  const ref = useRef15(null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
+  useEffect14(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle2;
+    syncAttribute("variant", variant || "");
+    syncAttribute("text-color", textColor || "");
+    syncAttribute("font", font || "");
+    syncAttribute("font-size", fontSize || "");
+    syncAttribute("border", border2 || "");
+    syncAttribute("border-radius", borderRadius2 || "");
+    syncAttribute("padding", padding2 || "");
+    syncAttribute("active-color", activeColor || "");
+    syncAttribute("active-text-color", activeTextColor || "");
+    syncAttribute("background-color", backgroundColor2 || "");
+    syncAttribute("disabled-color", disabledColor || "");
+    syncAttribute("total-pages", totalPages?.toString() || "");
+    syncAttribute("current-page", currentPage?.toString() || "");
+    const handlePageChange = (e) => {
+      if (onPageChange) {
+        onPageChange(e.detail.page);
+      }
+    };
+    el.addEventListener("page-change", handlePageChange);
+    return () => {
+      el.removeEventListener("page-change", handlePageChange);
+    };
+  }, [testProp, textColor, font, fontSize, border2, borderRadius2, padding2, variant, totalPages, currentPage, activeColor, activeTextColor, backgroundColor2, disabledColor, onPageChange]);
+  return /* @__PURE__ */ jsx37("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
+};
+WavelengthPagination.displayName = "WavelengthPagination";
+
+// src/index.ts
+import { WavelengthPagination as WavelengthPagination2 } from "@wavelengthusaf/web-components";
+
+// src/components/pagination/WavelengthDefaultPagination.tsx
+import { useState as useState6, useMemo } from "react";
+
+// src/components/pagination/WavelengthButtonPagination.tsx
+import { useState as useState4 } from "react";
+import Button4 from "@mui/material/Button";
+import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import styled7 from "styled-components";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+var MyDroplistItems = styled7("li")`
+  background-color: white;
+  color: #000000;
+  padding: 10px 30px;
+  textdecoration: none;
+  display: block;
+  width: 80px;
+
+  &:hover {
+    background-color: lightgray;
+  }
+`;
+function WavelengthButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
+  const [isOpen, setIsOpen] = useState4(false);
+  const [isSecOpen, setIsSecOpen] = useState4(false);
+  const toggleDropdown = (index) => {
+    if (index === 1) {
+      setIsOpen(!isOpen);
+    } else {
+      setIsSecOpen(!isSecOpen);
+    }
+  };
+  const dropstyles = {
+    dropcenter: { position: "relative", left: "-40px", top: "-20px" },
+    mydrop: { position: "absolute", zIndex: "3", maxHeight: "200px", overflow: "scroll" },
+    rangenumbers: { display: "flex" },
+    butPagCompDivStyle: { display: "flex" }
+  };
+  const WLButtonPagStyle = {
+    background: "white",
+    color: "black",
+    border: "none",
+    padding: "1px",
+    fontSize: "16px",
+    height: "55px",
+    width: "40px",
+    boxshadow: "4px 2px 4px darkslategray",
+    borderRadius: "50%",
+    margin: "3px",
+    "&:hover": { background: "#49baf7" },
+    "&:disabled": { background: "rgb(226, 223, 223)" },
+    "&.active": { background: "#8FD8FF" }
+  };
+  return /* @__PURE__ */ jsxs20("div", { style: dropstyles.butPagCompDivStyle, id, children: [
+    /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx38(ArrowBackIosNewIcon, {}) }),
+    /* @__PURE__ */ jsx38("section", { style: dropstyles.rangenumbers, children: itemList.map(
+      (item, index) => item === "..." && index === 1 ? (
+        //first half ellipse with first half dropdown
+        // dropdown
+        // eslint-disable-next-line react/jsx-key
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx38(Button4, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isOpen && /* @__PURE__ */ jsx38("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx38("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx38(
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx38(Button4, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx38("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx38("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx38(
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
+    ) }),
+    /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx38(ArrowForwardIosIcon, {}) })
+  ] });
+}
+WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
+var WavelengthButtonPagination_default = WavelengthButtonPagination;
+
+// src/components/pagination/WavelengthVariationPagination.tsx
+import { useState as useState5 } from "react";
+import Button5 from "@mui/material/Button";
+import ArrowBackIosNewIcon2 from "@mui/icons-material/ArrowBackIosNew";
+import ArrowForwardIosIcon2 from "@mui/icons-material/ArrowForwardIos";
+import styled8 from "styled-components";
+import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [isSecOpen, setIsSecOpen] = useState5(false);
+  const MyDroplistItems2 = styled8("li")`
+    background-color: white;
+    color: #000000;
+    padding: 10px 30px;
+    textdecoration: none;
+    display: block;
+    width: 80px;
+
+    &:hover {
+      background-color: lightgray;
+    }
+  `;
+  const dropstyles = {
+    pagination: {
+      display: "flex"
+    },
+    dropcenter: {
+      position: "relative",
+      left: "-40px",
+      top: "-20px"
+    },
+    mydrop: {
+      position: "absolute",
+      zIndex: "3",
+      maxHeight: "200px",
+      overflow: "scroll"
+    },
+    rangenumbers: {
+      display: "flex"
+    }
+  };
+  const toggleDropdown = (index) => {
+    if (index === 1) {
+      setIsOpen(!isOpen);
+    } else {
+      setIsSecOpen(!isSecOpen);
+    }
+  };
+  return /* @__PURE__ */ jsxs21("div", { style: dropstyles.pagination, id, children: [
+    /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx39(ArrowBackIosNewIcon2, {}) }),
+    /* @__PURE__ */ jsx39("section", { style: dropstyles.rangenumbers, children: itemList.map(
+      (item, index) => item === "..." && index === 1 ? (
+        //first half ellipse with first half dropdown
+        // eslint-disable-next-line react/jsx-key
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx39(Button5, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
+          isOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx39(
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx39(Button5, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx39(
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
+    ) }),
+    /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx39(ArrowForwardIosIcon2, {}) })
+  ] });
+}
+WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
+var WavelengthVariationPagination_default = WavelengthVariationPagination;
+
+// src/components/pagination/WavelengthDefaultPagination.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var range = (start, end) => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+};
+function ascendingRange(start, end) {
+  const result = [];
+  for (let i = start; i < end; i++) {
+    if (i !== start) {
+      result.push(i);
+    }
+  }
+  return result;
+}
+function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange, id }) {
+  const [current, setCurrent] = useState6(currentPageNumber);
+  const startPages = range(1, Math.min(boundaryCount, totalPages));
+  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
+  const siblingsStart = Math.max(Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+  const siblingsEnd = Math.min(Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
+  const firstEllipseList = ascendingRange(1, siblingsStart);
+  const secondEllipseList = ascendingRange(siblingsEnd, totalPages);
+  const itemList = useMemo(() => {
+    return [
+      ...startPages,
+      ...siblingsStart > boundaryCount + 2 ? ["..."] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [],
+      ...range(siblingsStart, siblingsEnd),
+      ...siblingsEnd < totalPages - boundaryCount - 1 ? ["..."] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [],
+      ...endPages
+    ];
+  }, [current, totalPages, boundaryCount, siblingCount, id]);
+  const handleChangePage = (value) => {
+    if (typeof value === "number") {
+      setCurrent(value);
+      onPageChange(value);
+    }
+  };
+  if (style3 === "circular") {
+    return /* @__PURE__ */ jsx40(
+      WavelengthButtonPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "text") {
+    return /* @__PURE__ */ jsx40(
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "text",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "outlined") {
+    return /* @__PURE__ */ jsx40(
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "outlined",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "contained") {
+    return /* @__PURE__ */ jsx40(
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "contained",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsx40(
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  }
+}
+WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
+var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
+
 // src/components/snackbars/WavelengthSnackbar.tsx
 import Snackbar from "@mui/material/Snackbar";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import CloseIcon2 from "@mui/icons-material/Close";
 import { IconButton as IconButton6 } from "@mui/material";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
 function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor, textColor, horryAlign, vertyAlign, durationSb, width: width2, icon, id }) {
   const handleClose = () => {
     setShow(false);
   };
-  const defaultIcon = /* @__PURE__ */ jsx36(IconButton6, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx36(CloseIcon2, { fontSize: "small" }) });
+  const defaultIcon = /* @__PURE__ */ jsx41(IconButton6, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx41(CloseIcon2, { fontSize: "small" }) });
   const palette2 = getPalette();
   const durationMs = durationSb ? durationSb * 1e3 : 4e3;
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx41(
     Snackbar,
     {
       id,
@@ -6241,7 +6670,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
         vertical: vertyAlign ? vertyAlign : "bottom",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx41(
         SnackbarContent,
         {
           style: {
@@ -6250,11 +6679,11 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             display: "flex",
             width: width2
           },
-          message: /* @__PURE__ */ jsxs20("div", { children: [
-            /* @__PURE__ */ jsx36("span", { children: icon }),
-            /* @__PURE__ */ jsx36("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
+          message: /* @__PURE__ */ jsxs22("div", { children: [
+            /* @__PURE__ */ jsx41("span", { children: icon }),
+            /* @__PURE__ */ jsx41("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
-          action: /* @__PURE__ */ jsx36("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
+          action: /* @__PURE__ */ jsx41("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
         }
       )
     }
@@ -6265,7 +6694,7 @@ WavelengthSnackbar.displayName = "WavelengthSnackbar";
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
 function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign, durationSb, width: width2, message, customVertyAlign, toggleShow, closeIcon, id }) {
   const handleClose = () => {
     toggleShow(false);
@@ -6280,7 +6709,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
     bgColor = "#737373";
   }
   const sIcon = icon ? icon : "";
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx42(
     Snackbar2,
     {
       id,
@@ -6292,7 +6721,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
         vertical: vertyAlign ? vertyAlign : "top",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx42(
         SnackbarContent2,
         {
           style: {
@@ -6301,7 +6730,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             //color: props.textColor ? props.textColor : palette.secondary,
           },
           sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ jsxs21(
+          message: /* @__PURE__ */ jsxs23(
             "div",
             {
               style: {
@@ -6310,11 +6739,11 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ jsxs21("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ jsx37("div", { style: { marginTop: "5px" }, children: sIcon }),
-                  /* @__PURE__ */ jsx37("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
+                /* @__PURE__ */ jsxs23("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                  /* @__PURE__ */ jsx42("div", { style: { marginTop: "5px" }, children: sIcon }),
+                  /* @__PURE__ */ jsx42("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
-                /* @__PURE__ */ jsx37("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
+                /* @__PURE__ */ jsx42("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
               ]
             }
           )
@@ -6327,12 +6756,12 @@ WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 
 // src/components/snackbars/WavelengthTestSnackbar.tsx
 import Box5 from "@mui/material/Box";
-import Button4 from "@mui/material/Button";
-import { useEffect as useEffect13, useRef as useRef14 } from "react";
-import { Fragment as Fragment12, jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import Button6 from "@mui/material/Button";
+import { useEffect as useEffect15, useRef as useRef16 } from "react";
+import { Fragment as Fragment12, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef14(null);
-  useEffect13(() => {
+  const ref = useRef16(null);
+  useEffect15(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6359,7 +6788,7 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx38(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx43(Fragment12, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
     Box5,
     {
       id,
@@ -6379,10 +6808,10 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
         marginTop: customVertyAlign ? `${customVertyAlign}` : ""
       },
       children: [
-        /* @__PURE__ */ jsx38("div", { style: { backgroundColor: "red" } }),
-        /* @__PURE__ */ jsx38("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
-        /* @__PURE__ */ jsx38(
-          Button4,
+        /* @__PURE__ */ jsx43("div", { style: { backgroundColor: "red" } }),
+        /* @__PURE__ */ jsx43("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
+        /* @__PURE__ */ jsx43(
+          Button6,
           {
             variant: "text",
             onClick: () => {
@@ -6400,10 +6829,10 @@ WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 // src/components/sliders/WavelengthSlider.tsx
 import Box6 from "@mui/material/Box";
 import Slider from "@mui/material/Slider";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplayed, marks, labelColor, value, id, maxVal = 100, minVal, step = 1, labelFunc, handleChange }) {
   const on = valueDisplayed ? "on" : "off";
-  return /* @__PURE__ */ jsx39(Box6, { sx: { width: width2 }, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx44(Box6, { sx: { width: width2 }, children: /* @__PURE__ */ jsx44(
     Slider,
     {
       id,
@@ -6428,7 +6857,7 @@ function WavelengthSlider({ width: width2 = "300px", color: color2, valueDisplay
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
-import { useState as useState4 } from "react";
+import { useState as useState7 } from "react";
 import IconButton7 from "@mui/material/IconButton";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
@@ -6438,9 +6867,9 @@ 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 jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
 var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth, id, name }) => {
-  const [currentIndex, setCurrentIndex] = useState4(0);
+  const [currentIndex, setCurrentIndex] = useState7(0);
   const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
   const adjustImageHeight = imageHeight !== void 0 ? imageHeight : 250;
   const adjustImageWidth = imageWidth !== void 0 ? imageWidth : 300;
@@ -6455,7 +6884,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   const handleClick = () => {
     window.open(items[currentIndex].path, "_blank");
   };
-  return /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsxs25(
     Grid3,
     {
       container: true,
@@ -6464,417 +6893,118 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(IconButton7, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx40(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(IconButton7, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx45(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
+        /* @__PURE__ */ jsx45(
           Card,
           {
             sx: {
               maxWidth: adjustCardWidth,
               maxHeight: adjustCardHeight
             },
-            children: /* @__PURE__ */ jsxs23(CardActionArea, { onClick: handleClick, children: [
-              /* @__PURE__ */ jsx40(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ jsxs23(CardContent, { children: [
-                /* @__PURE__ */ jsx40(Typography4, { variant: "h4", children: items[currentIndex].title }),
-                /* @__PURE__ */ jsx40(Typography4, { variant: "body1", children: items[currentIndex].description })
+            children: /* @__PURE__ */ jsxs25(CardActionArea, { onClick: handleClick, children: [
+              /* @__PURE__ */ jsx45(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
+              /* @__PURE__ */ jsxs25(CardContent, { children: [
+                /* @__PURE__ */ jsx45(Typography4, { variant: "h4", children: items[currentIndex].title }),
+                /* @__PURE__ */ jsx45(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
-            ] })
-          }
-        ),
-        /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40(IconButton7, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx40(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
-      ]
-    }
-  ) }) });
-};
-DefaultCarousel.displayName = "DefaultCarousel";
-
-// src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState5, useEffect as useEffect15 } from "react";
-import Grid4 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 jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
-var delay = 2500;
-var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
-  const [index, setIndex] = useState5(0);
-  const [isHovered, setIsHovered] = useState5(false);
-  useEffect15(() => {
-    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__ */ jsx41("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx41("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx41(
-    Grid4,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      container: true,
-      spacing: 0.5,
-      children: items.map((card) => /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(
-        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__ */ jsxs24(CardActionArea2, { href: card.path, children: [
-            /* @__PURE__ */ jsx41(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ jsxs24(CardContent2, { children: [
-              /* @__PURE__ */ jsx41("h3", { children: card.title }),
-              /* @__PURE__ */ jsx41("p", { children: card.description })
-            ] })
-          ] })
-        }
-      ) }, card.title))
-    }
-  ) }) });
-};
-SliderCardCarousel.displayName = "SliderCardCarousel";
-
-// src/components/pagination/WavelengthDefaultPagination.tsx
-import { useState as useState8, useMemo } from "react";
-
-// src/components/pagination/WavelengthButtonPagination.tsx
-import { useState as useState6 } from "react";
-import Button5 from "@mui/material/Button";
-import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
-import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
-import styled7 from "styled-components";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
-var MyDroplistItems = styled7("li")`
-  background-color: white;
-  color: #000000;
-  padding: 10px 30px;
-  textdecoration: none;
-  display: block;
-  width: 80px;
-
-  &:hover {
-    background-color: lightgray;
-  }
-`;
-function WavelengthButtonPagination({ totalPages, current, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [isSecOpen, setIsSecOpen] = useState6(false);
-  const toggleDropdown = (index) => {
-    if (index === 1) {
-      setIsOpen(!isOpen);
-    } else {
-      setIsSecOpen(!isSecOpen);
-    }
-  };
-  const dropstyles = {
-    dropcenter: { position: "relative", left: "-40px", top: "-20px" },
-    mydrop: { position: "absolute", zIndex: "3", maxHeight: "200px", overflow: "scroll" },
-    rangenumbers: { display: "flex" },
-    butPagCompDivStyle: { display: "flex" }
-  };
-  const WLButtonPagStyle = {
-    background: "white",
-    color: "black",
-    border: "none",
-    padding: "1px",
-    fontSize: "16px",
-    height: "55px",
-    width: "40px",
-    boxshadow: "4px 2px 4px darkslategray",
-    borderRadius: "50%",
-    margin: "3px",
-    "&:hover": { background: "#49baf7" },
-    "&:disabled": { background: "rgb(226, 223, 223)" },
-    "&.active": { background: "#8FD8FF" }
-  };
-  return /* @__PURE__ */ jsxs25("div", { style: dropstyles.butPagCompDivStyle, id, children: [
-    /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx42(ArrowBackIosNewIcon, {}) }),
-    /* @__PURE__ */ jsx42("section", { style: dropstyles.rangenumbers, children: itemList.map(
-      (item, index) => item === "..." && index === 1 ? (
-        //first half ellipse with first half dropdown
-        // dropdown
-        // eslint-disable-next-line react/jsx-key
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx42(Button5, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx42(
-            MyDroplistItems,
-            {
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : item === "..." && index === 5 ? (
-        //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs25("div", { children: [
-          /* @__PURE__ */ jsx42(Button5, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx42(
-            MyDroplistItems,
-            {
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
-    ) }),
-    /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx42(ArrowForwardIosIcon, {}) })
-  ] });
-}
-WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
-var WavelengthButtonPagination_default = WavelengthButtonPagination;
-
-// src/components/pagination/WavelengthVariationPagination.tsx
-import { useState as useState7 } from "react";
-import Button6 from "@mui/material/Button";
-import ArrowBackIosNewIcon2 from "@mui/icons-material/ArrowBackIosNew";
-import ArrowForwardIosIcon2 from "@mui/icons-material/ArrowForwardIos";
-import styled8 from "styled-components";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
-function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [isSecOpen, setIsSecOpen] = useState7(false);
-  const MyDroplistItems2 = styled8("li")`
-    background-color: white;
-    color: #000000;
-    padding: 10px 30px;
-    textdecoration: none;
-    display: block;
-    width: 80px;
-
-    &:hover {
-      background-color: lightgray;
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(IconButton7, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx45(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
+      ]
     }
-  `;
-  const dropstyles = {
-    pagination: {
-      display: "flex"
-    },
-    dropcenter: {
+  ) }) });
+};
+DefaultCarousel.displayName = "DefaultCarousel";
+
+// src/components/carousels/WavelengthSliderCarousel.tsx
+import { useState as useState8, useEffect as useEffect17 } from "react";
+import Grid4 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 jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var delay = 2500;
+var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
+  const [index, setIndex] = useState8(0);
+  const [isHovered, setIsHovered] = useState8(false);
+  useEffect17(() => {
+    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",
-      left: "-40px",
-      top: "-20px"
+      borderColor: "#4b5563",
+      height: adjustContHeight,
+      width: adjustContWidth,
+      minHeight: "280px",
+      minWidth: "640px",
+      borderRadius: "10px"
     },
-    mydrop: {
-      position: "absolute",
-      zIndex: "3",
-      maxHeight: "200px",
-      overflow: "scroll"
+    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"
     },
-    rangenumbers: {
-      display: "flex"
+    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"
     }
   };
-  const toggleDropdown = (index) => {
-    if (index === 1) {
-      setIsOpen(!isOpen);
-    } else {
-      setIsSecOpen(!isSecOpen);
+  return /* @__PURE__ */ jsx46("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx46("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx46(
+    Grid4,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      container: true,
+      spacing: 0.5,
+      children: items.map((card) => /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+        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__ */ jsxs26(CardActionArea2, { href: card.path, children: [
+            /* @__PURE__ */ jsx46(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ jsxs26(CardContent2, { children: [
+              /* @__PURE__ */ jsx46("h3", { children: card.title }),
+              /* @__PURE__ */ jsx46("p", { children: card.description })
+            ] })
+          ] })
+        }
+      ) }, card.title))
     }
-  };
-  return /* @__PURE__ */ jsxs26("div", { style: dropstyles.pagination, id, children: [
-    /* @__PURE__ */ jsx43(Button6, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx43(ArrowBackIosNewIcon2, {}) }),
-    /* @__PURE__ */ jsx43("section", { style: dropstyles.rangenumbers, children: itemList.map(
-      (item, index) => item === "..." && index === 1 ? (
-        //first half ellipse with first half dropdown
-        // eslint-disable-next-line react/jsx-key
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx43(Button6, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
-          isOpen && /* @__PURE__ */ jsx43("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx43("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx43(
-            MyDroplistItems2,
-            {
-              style: dropstyles.mydroplist,
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : item === "..." && index === 5 ? (
-        //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs26("div", { children: [
-          /* @__PURE__ */ jsx43(Button6, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx43("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx43("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx43(
-            MyDroplistItems2,
-            {
-              style: dropstyles.mydroplist,
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : /* @__PURE__ */ jsx43(Button6, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
-    ) }),
-    /* @__PURE__ */ jsx43(Button6, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx43(ArrowForwardIosIcon2, {}) })
-  ] });
-}
-WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
-var WavelengthVariationPagination_default = WavelengthVariationPagination;
-
-// src/components/pagination/WavelengthDefaultPagination.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
-var range = (start, end) => {
-  const length = end - start + 1;
-  return Array.from({ length }, (_, i) => start + i);
+  ) }) });
 };
-function ascendingRange(start, end) {
-  const result = [];
-  for (let i = start; i < end; i++) {
-    if (i !== start) {
-      result.push(i);
-    }
-  }
-  return result;
-}
-function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, boundaryCount = 1, style: style3, onPageChange, id }) {
-  const [current, setCurrent] = useState8(currentPageNumber);
-  const startPages = range(1, Math.min(boundaryCount, totalPages));
-  const endPages = range(Math.max(totalPages - boundaryCount + 1, boundaryCount + 1), totalPages);
-  const siblingsStart = Math.max(Math.min(current - siblingCount, totalPages - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
-  const siblingsEnd = Math.min(Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2), endPages.length > 0 ? endPages[0] - 2 : totalPages - 1);
-  const firstEllipseList = ascendingRange(1, siblingsStart);
-  const secondEllipseList = ascendingRange(siblingsEnd, totalPages);
-  const itemList = useMemo(() => {
-    return [
-      ...startPages,
-      ...siblingsStart > boundaryCount + 2 ? ["..."] : boundaryCount + 1 < totalPages - boundaryCount ? [boundaryCount + 1] : [],
-      ...range(siblingsStart, siblingsEnd),
-      ...siblingsEnd < totalPages - boundaryCount - 1 ? ["..."] : totalPages - boundaryCount > boundaryCount ? [totalPages - boundaryCount] : [],
-      ...endPages
-    ];
-  }, [current, totalPages, boundaryCount, siblingCount, id]);
-  const handleChangePage = (value) => {
-    if (typeof value === "number") {
-      setCurrent(value);
-      onPageChange(value);
-    }
-  };
-  if (style3 === "circular") {
-    return /* @__PURE__ */ jsx44(
-      WavelengthButtonPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "text") {
-    return /* @__PURE__ */ jsx44(
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "text",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "outlined") {
-    return /* @__PURE__ */ jsx44(
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "outlined",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "contained") {
-    return /* @__PURE__ */ jsx44(
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "contained",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else {
-    return /* @__PURE__ */ jsx44(
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  }
-}
-WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
-var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
+SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef15, useEffect as useEffect16, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef17, useEffect as useEffect18, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
   ({
     id,
@@ -6911,12 +7041,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef15(null);
+    const internalRef = useRef17(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect16(() => {
+    useEffect18(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6987,7 +7117,7 @@ var WavelengthInput = forwardRef2(
       label,
       disabled
     ]);
-    useEffect16(() => {
+    useEffect18(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6999,7 +7129,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect16(() => {
+    useEffect18(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -7020,7 +7150,7 @@ var WavelengthInput = forwardRef2(
       ...style3,
       ...backgroundColor2 ? { ["--wavelength-label-background"]: backgroundColor2 } : {}
     };
-    return /* @__PURE__ */ jsx45("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
+    return /* @__PURE__ */ jsx47("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
   }
 );
 WavelengthInput.displayName = "WavelengthInput";
@@ -7029,9 +7159,9 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect17, useRef as useRef16, useState as useState9 } from "react";
+import { useEffect as useEffect19, useRef as useRef18, useState as useState9 } from "react";
 import styled9 from "styled-components";
-import { jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
 var ModalInputDiv = styled9.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
@@ -7210,8 +7340,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [currentPage, setCurrentPage] = useState9(1);
   const [isOpen, setIsOpen] = useState9(false);
   const [editingMenuKey, setEditingMenuKey] = useState9(null);
-  const menuRef = useRef16(null);
-  const modalRef = useRef16(null);
+  const menuRef = useRef18(null);
+  const modalRef = useRef18(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -7219,7 +7349,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect17(() => {
+  useEffect19(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7249,7 +7379,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect17(() => {
+  useEffect19(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7309,7 +7439,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     return /* @__PURE__ */ jsxs27(TableHeadStyle, { children: [
       column.title,
       /* @__PURE__ */ jsxs27(KebabMenu, { ref: menuRef, children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           KebabIcon,
           {
             title: `KebabIcon-${index}`,
@@ -7321,25 +7451,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         ),
         isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs27(MenuOptions, { children: [
           sortOrder === "asc" ? /* @__PURE__ */ jsxs27("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
-            /* @__PURE__ */ jsx46("span", { children: "\u2B06" }),
+            /* @__PURE__ */ jsx48("span", { children: "\u2B06" }),
             " Sort ASC"
           ] }) : /* @__PURE__ */ jsxs27("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
-            /* @__PURE__ */ jsx46("span", { children: "\u2B07" }),
+            /* @__PURE__ */ jsx48("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
           /* @__PURE__ */ jsxs27("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
-            /* @__PURE__ */ jsx46("span", { children: "\u23F7" }),
+            /* @__PURE__ */ jsx48("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx46(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
-            /* @__PURE__ */ jsx46(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+          isModalOpen && /* @__PURE__ */ jsx48(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ jsx48(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
             /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx46("label", { htmlFor: "filterSelectId", children: "Columns: " }),
-              /* @__PURE__ */ jsx46("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx46("option", { children: item.key }, item.key)) })
+              /* @__PURE__ */ jsx48("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ jsx48("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx48("option", { children: item.key }, item.key)) })
             ] }),
             /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx46("label", { htmlFor: "filterInputId", children: "Values: " }),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx48("label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ jsx48(
                 "input",
                 {
                   title: `Inputfiltertest-${index}`,
@@ -7360,8 +7490,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx46("tr", { children: /* @__PURE__ */ jsx46("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx46("tr", { children: columns.map((column, index2) => {
-    return /* @__PURE__ */ jsx46(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx46(
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx48("tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx48(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx48(
       StyledInput,
       {
         title: `styledRow-${item.id}-${column.key}-${index2}`,
@@ -7378,14 +7508,14 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         autoFocus: true
       }
-    ) : /* @__PURE__ */ jsx46("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+    ) : /* @__PURE__ */ jsx48("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
   }) }, item.id));
   return /* @__PURE__ */ jsxs27("div", { id, children: [
-    /* @__PURE__ */ jsx46(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
-      /* @__PURE__ */ jsx46("thead", { children: /* @__PURE__ */ jsx46("tr", { children: headers }) }),
-      /* @__PURE__ */ jsx46("tbody", { children: rows })
+    /* @__PURE__ */ jsx48(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsx48("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx48("tbody", { children: rows })
     ] }) }),
-    /* @__PURE__ */ jsx46(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx46(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+    /* @__PURE__ */ jsx48(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx48(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";
@@ -7393,7 +7523,7 @@ WavelengthDataTable.displayName = "WavelengthDataTable";
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
 import { useMemo as useMemo3, useState as useState10, Fragment as Fragment13 } from "react";
 import styled10 from "styled-components";
-import { Fragment as Fragment14, jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableContainer = styled10.div`
   width: 1200px;
   border-radius: 16px;
@@ -7630,18 +7760,18 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return result;
   }, [data, sortKey, sortOrder, sortSubKey, sortSubOrder]);
   const renderSortButton = (column, sortOrder2, sortKey2) => {
-    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx47(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx49(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx47(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+    ] }) }) : /* @__PURE__ */ jsx49(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx47(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
+    ] }) }) : /* @__PURE__ */ jsx49(Fragment14, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
     ] }) });
   };
   const renderSortSubButton = (column, sortSubOrder2, sortSubKey2) => {
@@ -7649,26 +7779,26 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
     ] }) : /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
     ] }) : /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx47("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
     ] });
   };
   const headers = HeadColumns.map((column) => {
-    return /* @__PURE__ */ jsx47(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+    return /* @__PURE__ */ jsx49(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx47("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx49("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx47(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
-      /* @__PURE__ */ jsx47("td", { children: /* @__PURE__ */ jsx47(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx47("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47(
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx49(Fragment13, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx49("td", { children: /* @__PURE__ */ jsx49(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx49("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49(
         "path",
         {
           d: "M8.5 12L3.5 7L4.9 5.55L7.5 8.15V0H9.5V8.15L12.1 5.55L13.5 7L8.5 12ZM2.5 16C1.95 16 1.47917 15.8042 1.0875 15.4125C0.695833 15.0208 0.5 14.55 0.5 14V11H2.5V14H14.5V11H16.5V14C16.5 14.55 16.3042 15.0208 15.9125 15.4125C15.5208 15.8042 15.05 16 14.5 16H2.5Z",
@@ -7679,45 +7809,45 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ jsx47(SubDataTableCell, { children: /* @__PURE__ */ jsx47("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ jsx49(SubDataTableCell, { children: /* @__PURE__ */ jsx49("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
         }
       })
     ] }, `${item}-${item.Details?.relationId}-${fileItem.id}-${index}`)) }, `SDR-${item.id}-${item.Details?.relationId}`));
   };
   const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs28(BodyRowContainer, { children: [
-    /* @__PURE__ */ jsx47(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx47(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsx49(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx49(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ jsxs28(ButtonStylingRow, { children: [
-      /* @__PURE__ */ jsx47(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
-      /* @__PURE__ */ jsx47(AddButton, { onClick: addFilesOnClick, children: "Add files" })
+      /* @__PURE__ */ jsx49(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
+      /* @__PURE__ */ jsx49(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
-    openRow !== item.id && /* @__PURE__ */ jsx47(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx47("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow !== item.id && /* @__PURE__ */ jsx49(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx49("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
     openRow === item.id && /* @__PURE__ */ jsxs28("div", { children: [
       /* @__PURE__ */ jsxs28(SubDataTable, { children: [
-        /* @__PURE__ */ jsx47(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
-          /* @__PURE__ */ jsx47("th", {}),
+        /* @__PURE__ */ jsx49(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx49("th", {}),
           SubDataHeaders
         ] }) }),
-        /* @__PURE__ */ jsx47(SubDataTableBodyRow, { children: subDataRows(item.id) })
+        /* @__PURE__ */ jsx49(SubDataTableBodyRow, { children: subDataRows(item.id) })
       ] }),
-      /* @__PURE__ */ jsx47(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx47("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx47("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+      /* @__PURE__ */ jsx49(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx49("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
   return /* @__PURE__ */ jsxs28(TableContainer, { children: [
-    /* @__PURE__ */ jsx47(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
-    /* @__PURE__ */ jsx47("div", { title: "tablebodies", children: dataRows })
+    /* @__PURE__ */ jsx49(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx49("div", { title: "tablebodies", children: dataRows })
   ] });
 };
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef17, useEffect as useEffect18 } from "react";
+import { useRef as useRef19, useEffect as useEffect20 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef17(null);
-  const reactDropdownRoots = useRef17(/* @__PURE__ */ new Map());
-  useEffect18(() => {
+  const tableRef = useRef19(null);
+  const reactDropdownRoots = useRef19(/* @__PURE__ */ new Map());
+  useEffect20(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7726,7 +7856,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
     if (sortIcon !== void 0) customChildDataTableElement.setSortIcon = sortIcon;
     if (dropdownButtonIcon !== void 0) customChildDataTableElement.setDropdownButtonIcon = dropdownButtonIcon;
   }, [columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon]);
-  useEffect18(() => {
+  useEffect20(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7763,7 +7893,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
       el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
     };
   }, [data]);
-  return /* @__PURE__ */ jsx48("wavelength-child-data-table", { ref: tableRef, ...rest });
+  return /* @__PURE__ */ jsx50("wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";
 
@@ -7773,7 +7903,7 @@ import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-component
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState11 } from "react";
 import styled11 from "styled-components";
-import { Fragment as Fragment15, jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableStyle = styled11.table`
   width: 100%;
   height: 100%;
@@ -7860,46 +7990,46 @@ var NestedDataTable = ({ data, columns, id }) => {
     setPrimaryRowIndex(rowIndex);
   };
   const headers = HeadColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx49(MainThHeaders, { children: column.title }, `headCell-${index}`);
+    return /* @__PURE__ */ jsx51(MainThHeaders, { children: column.title }, `headCell-${index}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx49("th", { children: column.title }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx51("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx49("tr", { children: /* @__PURE__ */ jsx49("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx49(Fragment15, { children: /* @__PURE__ */ jsx49(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx51(Fragment15, { children: /* @__PURE__ */ jsx51(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
     const value = item.Details?.[columnKey];
     console.log("value: ", value);
     if (value !== void 0) {
-      return /* @__PURE__ */ jsx49("td", { children: /* @__PURE__ */ jsx49("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+      return /* @__PURE__ */ jsx51("td", { children: /* @__PURE__ */ jsx51("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
   const childRows = /* @__PURE__ */ jsxs29(SubTableStyle, { children: [
-    /* @__PURE__ */ jsx49("thead", { children: /* @__PURE__ */ jsx49("tr", { children: SubDataHeaders }) }),
-    /* @__PURE__ */ jsx49("tbody", { children: subDataRows })
+    /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsx51("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx51("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx49("tr", { children: /* @__PURE__ */ jsx49("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment15, { children: [
+  const rows = !data?.length ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment15, { children: [
     /* @__PURE__ */ jsxs29(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx49(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx49(Fragment15, { children: "\u2227" }) : /* @__PURE__ */ jsx49(Fragment15, { children: "\u2228" }) }),
+      /* @__PURE__ */ jsx51(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx51(Fragment15, { children: "\u2227" }) : /* @__PURE__ */ jsx51(Fragment15, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
-        return /* @__PURE__ */ jsx49(PrimaryTdSpan, { children: /* @__PURE__ */ jsx49("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+        return /* @__PURE__ */ jsx51(PrimaryTdSpan, { children: /* @__PURE__ */ jsx51("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
-    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx49(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx49("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx51(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx51("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx49("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
-    /* @__PURE__ */ jsx49("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
-      /* @__PURE__ */ jsx49("th", { title: "dropdownth" }),
+  return /* @__PURE__ */ jsx51("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
+    /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
+      /* @__PURE__ */ jsx51("th", { title: "dropdownth" }),
       headers
     ] }) }),
-    /* @__PURE__ */ jsx49("tbody", { children: rows })
+    /* @__PURE__ */ jsx51("tbody", { children: rows })
   ] }) });
 };
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect19, useRef as useRef19, useState as useState12 } from "react";
+import { useEffect as useEffect21, useRef as useRef21, useState as useState12 } from "react";
 import styled12 from "styled-components";
-import { Fragment as Fragment16, jsx as jsx50, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var AutoContainer = styled12.div`
   //position: relative;
   position: relative;
@@ -8028,9 +8158,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef19(null);
-  const listRef = useRef19(null);
-  const noItemListRef = useRef19(null);
+  const inputRef = useRef21(null);
+  const listRef = useRef21(null);
+  const noItemListRef = useRef21(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -8038,7 +8168,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect19(() => {
+  useEffect21(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -8050,7 +8180,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect19(() => {
+    useEffect21(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -8116,9 +8246,9 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx50(Fragment16, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+  return /* @__PURE__ */ jsx52(Fragment16, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
     /* @__PURE__ */ jsxs30(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
-      /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsx52(
         Input,
         {
           id: idName,
@@ -8147,11 +8277,11 @@ var WavelengthAutoComplete = ({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx50(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+      /* @__PURE__ */ jsx52(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
-    isDropdownVisible && /* @__PURE__ */ jsx50(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
+    isDropdownVisible && /* @__PURE__ */ jsx52(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
       //suggestions length controls showing the suggestions
-      suggestions.map((item, index) => /* @__PURE__ */ jsx50(
+      suggestions.map((item, index) => /* @__PURE__ */ jsx52(
         ActiveListItem,
         {
           "data-testid": `${idName}-input-search-list-${index + 1}`,
@@ -8164,15 +8294,15 @@ var WavelengthAutoComplete = ({
         },
         `active-list-item-${item}-${index}`
       ))
-    ) : /* @__PURE__ */ jsx50(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+    ) : /* @__PURE__ */ jsx52(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
   ] }) });
 };
 WavelengthAutoComplete.displayName = "WavelengthAutoComplete";
 
 // src/components/inputs/WavelengthDatePicker.tsx
-import { useEffect as useEffect20, useState as useState13 } from "react";
+import { useEffect as useEffect22, useState as useState13 } from "react";
 import styled13 from "styled-components";
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
 var Label2 = styled13.label`
   position: absolute;
   top: 50%;
@@ -8244,7 +8374,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect20(() => {
+  useEffect22(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8295,7 +8425,7 @@ var WavelengthDatePicker = ({
       $FocusLabelColor: FocusLabelColor,
       $inputBackGroundColor: backgroundColor2,
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "input",
           {
             type: inputType,
@@ -8316,7 +8446,7 @@ var WavelengthDatePicker = ({
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ jsx51(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+        /* @__PURE__ */ jsx53(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );
@@ -8327,9 +8457,9 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef20, useEffect as useEffect21 } from "react";
+import { useRef as useRef22, useEffect as useEffect23 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
   size,
   color: color2,
@@ -8339,8 +8469,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef20(null);
-  useEffect21(() => {
+  const ref = useRef22(null);
+  useEffect23(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8364,13 +8494,13 @@ var WavelengthCheckbox = ({
       el.setAttribute("text-size", textSize);
     }
   }, [size, color2, theme, disabled, text, textSize]);
-  return /* @__PURE__ */ jsx52("wavelength-checkbox", { ref, ...rest });
+  return /* @__PURE__ */ jsx54("wavelength-checkbox", { ref, ...rest });
 };
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef21, useEffect as useEffect22 } from "react";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { useRef as useRef23, useEffect as useEffect24 } from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
   children,
@@ -8379,8 +8509,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef21(null);
-  useEffect22(() => {
+  const ref = useRef23(null);
+  useEffect24(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -8388,14 +8518,14 @@ var SampleComponent = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx53("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx55("sample-component", { ref, ...rest, children });
 };
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef22, useEffect as useEffect23 } from "react";
+import { useRef as useRef24, useEffect as useEffect25 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
   notifications,
   darkMode,
@@ -8404,8 +8534,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef22(null);
-  useEffect23(() => {
+  const ref = useRef24(null);
+  useEffect25(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8424,18 +8554,18 @@ var WavelengthNotificationPanel = ({
       el.accountLink = accountLink;
     }
   }, [notifications, darkMode, rest.onMarkAsRead, rest.onSignOut, accountLink]);
-  return /* @__PURE__ */ jsx54("wavelength-notification-panel", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx56("wavelength-notification-panel", { ref, ...rest, children });
 };
 
 // src/index.ts
 import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-components";
 
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
-import { useEffect as useEffect24, useRef as useRef23 } from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { useEffect as useEffect26, useRef as useRef25 } from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef23(null);
-  useEffect24(() => {
+  const componentRef = useRef25(null);
+  useEffect26(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8448,7 +8578,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect24(() => {
+  useEffect26(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8458,13 +8588,13 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect24(() => {
+  useEffect26(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx55("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+  return /* @__PURE__ */ jsx57("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
 };
 
 // src/index.ts
@@ -8512,11 +8642,14 @@ export {
   WavelengthInput,
   WavelengthInput2 as WavelengthInputElement,
   WavelengthManyPlanes,
+  WavelengthMenu,
   WavelengthMultiSelectAutocomplete,
   WavelengthMultiSelectAutocomplete2 as WavelengthMultiSelectAutocompleteElement,
   WavelengthNavBar,
   WavelengthNotAvailablePage,
   WavelengthNotificationPanel,
+  WavelengthPagination,
+  WavelengthPagination2 as WavelengthPaginationElement,
   WavelengthPermissionAlert,
   WavelengthPlaneTrail,
   WavelengthPopUpMenu,
@@ -8537,10 +8670,8 @@ export {
   WavelengthToolTip,
   WavelengthWebSnackbar,
   add,
-  ascendingRange,
   concat,
   findBestStringMatch,
-  range,
   useOutsideClick,
   useThemeContext
 };