@wavelengthusaf/components 4.7.0 → 4.9.0

package/dist/cjs/index.cjs

@@ -6217,6 +6217,435 @@ var WavelengthDropdown = _react.forwardRef.call(void 0, (props, ref) => {
 });
 WavelengthDropdown.displayName = "WavelengthDropdown";
 
+// src/components/modals/WavelengthMenu.tsx
+
+
+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 = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+    "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
+
+
+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 = _react.useRef.call(void 0, null);
+  const syncAttribute = (attribute, value) => {
+    const el = ref.current;
+    if (!el) return;
+    el.setAttribute(attribute, value);
+  };
+  _react.useEffect.call(void 0, () => {
+    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", _optionalChain([totalPages, 'optionalAccess', _39 => _39.toString, 'call', _40 => _40()]) || "");
+    syncAttribute("current-page", _optionalChain([currentPage, 'optionalAccess', _41 => _41.toString, 'call', _42 => _42()]) || "");
+    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__ */ _jsxruntime.jsx.call(void 0, "wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
+};
+WavelengthPagination.displayName = "WavelengthPagination";
+
+// src/index.ts
+
+
+// src/components/pagination/WavelengthDefaultPagination.tsx
+
+
+// src/components/pagination/WavelengthButtonPagination.tsx
+
+
+var _ArrowBackIosNew = require('@mui/icons-material/ArrowBackIosNew'); var _ArrowBackIosNew2 = _interopRequireDefault(_ArrowBackIosNew);
+var _ArrowForwardIos = require('@mui/icons-material/ArrowForwardIos'); var _ArrowForwardIos2 = _interopRequireDefault(_ArrowForwardIos);
+
+
+var MyDroplistItems = _styledcomponents2.default.call(void 0, "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] = _react.useState.call(void 0, false);
+  const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: dropstyles.butPagCompDivStyle, id, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowBackIosNew2.default, {}) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isSecOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            MyDroplistItems,
+            {
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
+  ] });
+}
+WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
+var WavelengthButtonPagination_default = WavelengthButtonPagination;
+
+// src/components/pagination/WavelengthVariationPagination.tsx
+
+
+
+
+
+
+function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, false);
+  const MyDroplistItems2 = _styledcomponents2.default.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: dropstyles.pagination, id, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowBackIosNew2.default, {}) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
+          isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : item === "..." && index === 5 ? (
+        //second half ellipse with second half dropdown
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
+          isSecOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            MyDroplistItems2,
+            {
+              style: dropstyles.mydroplist,
+              onClick: () => {
+                handleChangePage(item2), setIsOpen(false);
+              },
+              children: item2
+            },
+            item2
+          )) }) })
+        ] })
+      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
+    ) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
+  ] });
+}
+WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
+var WavelengthVariationPagination_default = WavelengthVariationPagination;
+
+// src/components/pagination/WavelengthDefaultPagination.tsx
+
+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] = _react.useState.call(void 0, 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 = _react.useMemo.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthButtonPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "text") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "text",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "outlined") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "outlined",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else if (style3 === "contained") {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        variant: "contained",
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  } else {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      WavelengthVariationPagination_default,
+      {
+        id,
+        totalPages,
+        current,
+        handleChangePage,
+        itemList,
+        firstEllipseList,
+        secondEllipseList
+      }
+    );
+  }
+}
+WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
+var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
+
 // src/components/snackbars/WavelengthSnackbar.tsx
 var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
 var _SnackbarContent = require('@mui/material/SnackbarContent'); var _SnackbarContent2 = _interopRequireDefault(_SnackbarContent);
@@ -6496,380 +6925,81 @@ DefaultCarousel.displayName = "DefaultCarousel";
 
 
 
-var delay = 2500;
-var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
-  const [index, setIndex] = _react.useState.call(void 0, 0);
-  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.carouselcontainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _Grid2.default,
-    {
-      sx: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center"
-      },
-      container: true,
-      spacing: 0.5,
-      children: items.map((card) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _Card2.default,
-        {
-          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__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { href: card.path, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: card.title }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: card.description })
-            ] })
-          ] })
-        }
-      ) }, card.title))
-    }
-  ) }) });
-};
-SliderCardCarousel.displayName = "SliderCardCarousel";
-
-// src/components/pagination/WavelengthDefaultPagination.tsx
-
-
-// src/components/pagination/WavelengthButtonPagination.tsx
-
-
-var _ArrowBackIosNew = require('@mui/icons-material/ArrowBackIosNew'); var _ArrowBackIosNew2 = _interopRequireDefault(_ArrowBackIosNew);
-var _ArrowForwardIos = require('@mui/icons-material/ArrowForwardIos'); var _ArrowForwardIos2 = _interopRequireDefault(_ArrowForwardIos);
-
-
-var MyDroplistItems = _styledcomponents2.default.call(void 0, "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] = _react.useState.call(void 0, false);
-  const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, "div", { style: dropstyles.butPagCompDivStyle, id, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowBackIosNew2.default, {}) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MyDroplistItems,
-            {
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : item === "..." && index === 5 ? (
-        //second half ellipse with second half dropdown
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isSecOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MyDroplistItems,
-            {
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
-    ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
-  ] });
-}
-WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
-var WavelengthButtonPagination_default = WavelengthButtonPagination;
-
-// src/components/pagination/WavelengthVariationPagination.tsx
-
-
-
-
-
-
-function WavelengthVariationPagination({ totalPages, current, variant, handleChangePage, itemList, firstEllipseList, secondEllipseList, id }) {
-  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
-  const [isSecOpen, setIsSecOpen] = _react.useState.call(void 0, false);
-  const MyDroplistItems2 = _styledcomponents2.default.call(void 0, "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: {
+var delay = 2500;
+var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth }) => {
+  const [index, setIndex] = _react.useState.call(void 0, 0);
+  const [isHovered, setIsHovered] = _react.useState.call(void 0, false);
+  _react.useEffect.call(void 0, () => {
+    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__ */ _jsxruntime.jsx.call(void 0, "div", { style: styles.carouselcontainer, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _Grid2.default,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      container: true,
+      spacing: 0.5,
+      children: items.map((card) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Card2.default,
+        {
+          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__ */ _jsxruntime.jsxs.call(void 0, _CardActionArea2.default, { href: card.path, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CardMedia2.default, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _CardContent2.default, { children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { children: card.title }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: card.description })
+            ] })
+          ] })
+        }
+      ) }, card.title))
     }
-  };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: dropstyles.pagination, id, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowBackIosNew2.default, {}) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
-          isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MyDroplistItems2,
-            {
-              style: dropstyles.mydroplist,
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : item === "..." && index === 5 ? (
-        //second half ellipse with second half dropdown
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
-          isSecOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            MyDroplistItems2,
-            {
-              style: dropstyles.mydroplist,
-              onClick: () => {
-                handleChangePage(item2), setIsOpen(false);
-              },
-              children: item2
-            },
-            item2
-          )) }) })
-        ] })
-      ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
-    ) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Button2.default, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ArrowForwardIos2.default, {}) })
-  ] });
-}
-WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
-var WavelengthVariationPagination_default = WavelengthVariationPagination;
-
-// src/components/pagination/WavelengthDefaultPagination.tsx
-
-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] = _react.useState.call(void 0, 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 = _react.useMemo.call(void 0, () => {
-    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__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthButtonPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "text") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "text",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "outlined") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "outlined",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else if (style3 === "contained") {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        variant: "contained",
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  } else {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      WavelengthVariationPagination_default,
-      {
-        id,
-        totalPages,
-        current,
-        handleChangePage,
-        itemList,
-        firstEllipseList,
-        secondEllipseList
-      }
-    );
-  }
-}
-WavelengthDefaultPagination.displayName = "WavelengthDefaultPagination";
-var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
+SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
 
@@ -6914,7 +7044,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
     const internalRef = _react.useRef.call(void 0, null);
     _react.useImperativeHandle.call(void 0, ref, () => ({
       ...internalRef.current,
-      validate: () => _optionalChain([internalRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.validate, 'optionalCall', _41 => _41(true)])
+      validate: () => _optionalChain([internalRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.validate, 'optionalCall', _45 => _45(true)])
     }));
     _react.useEffect.call(void 0, () => {
       const el = internalRef.current;
@@ -6991,7 +7121,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _42 => _42.shadowRoot, 'optionalAccess', _43 => _43.querySelector, 'call', _44 => _44("input")]);
+        const input = _optionalChain([el, 'access', _46 => _46.shadowRoot, 'optionalAccess', _47 => _47.querySelector, 'call', _48 => _48("input")]);
         if (input) {
           onBlurCallback();
         }
@@ -7003,7 +7133,7 @@ var WavelengthInput = _react.forwardRef.call(void 0,
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
-        const input = _optionalChain([el, 'access', _45 => _45.shadowRoot, 'optionalAccess', _46 => _46.querySelector, 'call', _47 => _47("input")]);
+        const input = _optionalChain([el, 'access', _49 => _49.shadowRoot, 'optionalAccess', _50 => _50.querySelector, 'call', _51 => _51("input")]);
         if (input) {
           const synthetic = {
             ...e,
@@ -7206,7 +7336,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [noRowsOpen, setNoRowsOpen] = _react.useState.call(void 0, false);
   const [isModalOpen, setIsModalOpen] = _react.useState.call(void 0, false);
   const [searchItem, setSearchItem] = _react.useState.call(void 0, "");
-  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _48 => _48[0], 'optionalAccess', _49 => _49.key]) || "");
+  const [selectedValue, setSelectedValue] = _react.useState.call(void 0, _optionalChain([columns, 'access', _52 => _52[0], 'optionalAccess', _53 => _53.key]) || "");
   const [currentPage, setCurrentPage] = _react.useState.call(void 0, 1);
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
   const [editingMenuKey, setEditingMenuKey] = _react.useState.call(void 0, null);
@@ -7360,7 +7490,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !_optionalChain([currentPageData, 'optionalAccess', _50 => _50.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _51 => _51.map, 'call', _52 => _52((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
+  const rows = !_optionalChain([currentPageData, 'optionalAccess', _54 => _54.length]) || noRowsOpen ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([currentPageData, 'optionalAccess', _55 => _55.map, 'call', _56 => _56((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: columns.map((column, index2) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       StyledInput,
       {
@@ -7606,7 +7736,7 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     }
     if (sortSubOrder) {
       result.map(
-        (item) => _optionalChain([item, 'access', _53 => _53.Details, 'optionalAccess', _54 => _54.fileObjects, 'access', _55 => _55.sort, 'call', _56 => _56((c, d) => {
+        (item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.fileObjects, 'access', _59 => _59.sort, 'call', _60 => _60((c, d) => {
           const valueC = c[sortSubKey];
           const valueD = d[sortSubKey];
           if (typeof valueC === "string" && typeof valueD === "string") {
@@ -7667,24 +7797,24 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => _optionalChain([item, 'access', _57 => _57.Details, 'optionalAccess', _58 => _58.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _59 => _59.Details, 'optionalAccess', _60 => _60.fileObjects, 'access', _61 => _61.map, 'call', _62 => _62((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
+    return processedRowData.filter((item) => _optionalChain([item, 'access', _61 => _61.Details, 'optionalAccess', _62 => _62.relationId]) === itemId).map((item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Fragment, { children: _optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.fileObjects, 'access', _65 => _65.map, 'call', _66 => _66((fileItem, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, SubDataTableBodyRowContainer, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "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",
           fill: "#1C1B1F"
         }
-      ) }) }) }, `td-${_optionalChain([item, 'access', _63 => _63.Details, 'optionalAccess', _64 => _64.relationId])}-${fileItem.id}`),
+      ) }) }) }, `td-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}`),
       SubDataColumns.map((column) => {
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _65 => _65.Details, 'optionalAccess', _66 => _66.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _67 => _67.Details, 'optionalAccess', _68 => _68.relationId])}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTableCell, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }, `span-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}-${fileItem.id}-${index}-${column.title}`);
         }
       })
-    ] }, `${item}-${_optionalChain([item, 'access', _69 => _69.Details, 'optionalAccess', _70 => _70.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _71 => _71.Details, 'optionalAccess', _72 => _72.relationId])}`));
+    ] }, `${item}-${_optionalChain([item, 'access', _73 => _73.Details, 'optionalAccess', _74 => _74.relationId])}-${fileItem.id}-${index}`))]) }, `SDR-${item.id}-${_optionalChain([item, 'access', _75 => _75.Details, 'optionalAccess', _76 => _76.relationId])}`));
   };
-  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _73 => _73.map, 'call', _74 => _74((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
+  const dataRows = _optionalChain([processedRowData, 'optionalAccess', _77 => _77.map, 'call', _78 => _78((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, BodyRowContainer, { children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ButtonStylingRow, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
@@ -7738,7 +7868,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
         root = _client.createRoot.call(void 0, container);
         reactDropdownRoots.current.set(container, root);
       }
-      const item = _optionalChain([data, 'optionalAccess', _75 => _75.find, 'call', _76 => _76((item2) => String(item2.id) === String(itemId))]);
+      const item = _optionalChain([data, 'optionalAccess', _79 => _79.find, 'call', _80 => _80((item2) => String(item2.id) === String(itemId))]);
       if (item && item.dropdown && root) {
         root.render(item.dropdown);
       }
@@ -7865,9 +7995,9 @@ var NestedDataTable = ({ data, columns, id }) => {
   const SubDataHeaders = SubDataColumns.map((column, index) => {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !_optionalChain([data, 'optionalAccess', _77 => _77.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !_optionalChain([data, 'optionalAccess', _81 => _81.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
     const columnKey = trimBeforePeriod(column.key);
-    const value = _optionalChain([item, 'access', _78 => _78.Details, 'optionalAccess', _79 => _79[columnKey]]);
+    const value = _optionalChain([item, 'access', _82 => _82.Details, 'optionalAccess', _83 => _83[columnKey]]);
     console.log("value: ", value);
     if (value !== void 0) {
       return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: value }) }, `Span-${item.id}-${colIndex}`);
@@ -7877,7 +8007,7 @@ var NestedDataTable = ({ data, columns, id }) => {
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: SubDataHeaders }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tbody", { children: subDataRows })
   ] });
-  const rows = !_optionalChain([data, 'optionalAccess', _80 => _80.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _81 => _81.map, 'call', _82 => _82((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+  const rows = !_optionalChain([data, 'optionalAccess', _84 => _84.length]) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : _optionalChain([data, 'optionalAccess', _85 => _85.map, 'call', _86 => _86((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, PrimaryTrRows, { $index: index, children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2227" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
@@ -8543,7 +8673,8 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: