@wavelengthusaf/components 4.13.0 → 4.16.0

package/dist/esm/index.js

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment16 = REACT_FRAGMENT_TYPE;
+        var Fragment15 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment16;
+        exports.Fragment = Fragment15;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -3728,7 +3728,7 @@ WavelengthExampleComponent.displayName = "WavelengthExampleComponent";
 import { useRef as useRef2, useEffect as useEffect2 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var WavelengthSearch = ({
-  customStyle: customStyle2,
+  customStyle,
   width: width2,
   mode,
   fontSize,
@@ -3761,7 +3761,7 @@ var WavelengthSearch = ({
   useEffect2(() => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("width", width2);
     syncAttribute("mode", mode);
     syncAttribute("font-size", fontSize);
@@ -3779,7 +3779,7 @@ var WavelengthSearch = ({
     syncAttribute("input-color", inputColor);
     syncAttribute("input-font", inputFont);
   }, [
-    customStyle2,
+    customStyle,
     width2,
     mode,
     fontSize,
@@ -5162,14 +5162,14 @@ var WavelengthBadge = ({
   textBoxHoverBorderColor,
   item,
   children,
-  customStyle: customStyle2,
+  customStyle,
   ...rest
 }) => {
   const ref = useRef8(null);
   useEffect8(() => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     const updateAttribute = (attr, value) => {
       if (value !== void 0 && value !== null && value !== "") {
         el.setAttribute(attr, value.toString());
@@ -5213,7 +5213,7 @@ var WavelengthBadge = ({
     textBoxBorderRadius,
     textBoxHoverBorderColor,
     item,
-    customStyle2
+    customStyle
   ]);
   return /* @__PURE__ */ jsxs15("wavelength-badge", { ref, ...rest, children: [
     badgeContent !== void 0 && /* @__PURE__ */ jsx25("span", { slot: "badge", children: badgeContent }),
@@ -5526,7 +5526,7 @@ var WavelengthPlaneTrail = ({
   id,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
@@ -5534,8 +5534,8 @@ var WavelengthPlaneTrail = ({
   useEffect13(() => {
     const el = ref.current;
     if (!el) return;
-    if (customStyle2 !== void 0) {
-      el.customStyles = customStyle2;
+    if (customStyle !== void 0) {
+      el.customStyles = customStyle;
     }
     if (trailDir !== void 0) {
       el.setAttribute("trailDir", trailDir);
@@ -5547,53 +5547,55 @@ var WavelengthPlaneTrail = ({
       el.setAttribute("id", id);
     }
   }, [trailDir]);
-  return /* @__PURE__ */ jsx32("wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle: customStyle2, ...rest, children });
+  return /* @__PURE__ */ jsx32("wavelength-planetrail", { ref, trailDir, color: color2, id, customStyle, ...rest, children });
 };
 WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 
 // src/components/modals/WavelengthConfirmationModal.tsx
-import { Modal, Box as Box2 } from "@mui/material";
+import { useEffect as useEffect14, useRef as useRef14 } from "react";
 import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function WavelengthConfirmationModal(props) {
   const { show, setShow, id, name } = props;
-  const handleClose = () => {
-    setShow(false);
-  };
-  return /* @__PURE__ */ jsx33(Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ jsxs18(
-    Box2,
+  const modalRef = useRef14(null);
+  useEffect14(() => {
+    const handleClose = () => {
+      setShow(false);
+    };
+    const currentModal = modalRef.current;
+    if (currentModal) {
+      currentModal.addEventListener("close", handleClose);
+    }
+    return () => {
+      if (currentModal) {
+        currentModal.removeEventListener("close", handleClose);
+      }
+    };
+  }, [setShow]);
+  return /* @__PURE__ */ jsxs18(
+    "wavelength-confirmation-modal",
     {
-      sx: {
-        position: "absolute",
-        top: "50%",
-        left: "50%",
-        transform: "translate(-50%, -50%)",
-        width: props.width || "451px",
-        // Custom width
-        height: props.height || "256px",
-        // Custom height
-        boxSizing: "border-box",
-        bgcolor: props.backgroundColor || "background.paper",
-        borderRadius: "16px",
-        color: props.textColor || "black",
-        boxShadow: 24,
-        padding: "32px",
-        overflow: "scroll"
-      },
+      ref: modalRef,
+      show: show ? "true" : void 0,
+      "modal-id": id,
+      "modal-name": name,
+      width: props.width,
+      height: props.height,
+      "font-family": props.fontFamily,
+      "text-color": props.textColor,
+      "background-color": props.backgroundColor,
+      "title-text": props.textObj?.title,
+      "dialog-text": props.textObj?.dialog,
       children: [
-        /* @__PURE__ */ jsx33("p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: props.textObj?.title }),
-        /* @__PURE__ */ jsx33("p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: props.textObj?.dialog }),
-        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
-          props.cancelButton,
-          props.submitButton
-        ] })
+        props.cancelButton && /* @__PURE__ */ jsx33("div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
+        props.submitButton && /* @__PURE__ */ jsx33("div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
       ]
     }
-  ) });
+  );
 }
 WavelengthConfirmationModal.displayName = "WavelengthConfirmationModal";
 
 // src/components/modals/WavelengthContentModal.tsx
-import { Button as Button3, Dialog, DialogActions, DialogTitle, DialogContent, Typography as Typography3, IconButton as IconButton3, Box as Box3 } from "@mui/material";
+import { Button as Button3, Dialog, DialogActions, DialogTitle, DialogContent, Typography as Typography3, IconButton as IconButton3, Box as Box2 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function WavelengthContentModal(props) {
@@ -5602,9 +5604,9 @@ function WavelengthContentModal(props) {
     setShow(false);
   };
   return /* @__PURE__ */ jsxs19(Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", id: props.id, children: [
-    /* @__PURE__ */ jsx34(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs19(Box3, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ jsx34(Box3, { flexGrow: 1, children: props.textObj?.title }),
-      /* @__PURE__ */ jsx34(Box3, { children: /* @__PURE__ */ jsx34(IconButton3, { onClick: handleClose, children: /* @__PURE__ */ jsx34(CloseIcon, {}) }) })
+    /* @__PURE__ */ jsx34(DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ jsxs19(Box2, { display: "flex", alignItems: "center", children: [
+      /* @__PURE__ */ jsx34(Box2, { flexGrow: 1, children: props.textObj?.title }),
+      /* @__PURE__ */ jsx34(Box2, { children: /* @__PURE__ */ jsx34(IconButton3, { onClick: handleClose, children: /* @__PURE__ */ jsx34(CloseIcon, {}) }) })
     ] }) }),
     /* @__PURE__ */ jsx34(DialogContent, { children: /* @__PURE__ */ jsx34(Typography3, { align: "center", children: props.textObj?.dialog }) }),
     /* @__PURE__ */ jsx34(DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ jsx34(Button3, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: props.textObj?.purpose }) })
@@ -5613,141 +5615,39 @@ function WavelengthContentModal(props) {
 WavelengthContentModal.displayName = "WavelengthContentModal";
 
 // src/components/modals/WavelengthPopUpMenu.tsx
-import React16 from "react";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import Box4 from "@mui/material/Box";
-import Slide from "@mui/material/Slide";
-import { HelpOutline } from "@mui/icons-material";
-import styled5 from "styled-components";
-import IconButton4 from "@mui/material/IconButton";
-import Divider from "@mui/material/Divider";
-import { Fragment as Fragment10, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
-var customStyle = { marginLeft: 16, marginRight: 16, marginTop: 8, marginBottom: 8 };
-var emailStyle = {
-  marginLeft: 16,
-  marginRight: 16,
-  marginTop: 8,
-  marginBottom: 8
-};
-function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, id, border: border2 }) {
-  const Links = styled5.a`
-    color: inherit;
-    text-decoration: none;
-
-    &:hover,
-    &:focus {
-      color: ${({ hoverColor }) => hoverColor || "inherit"};
-    }
-    &:active {
-      color: ${({ hoverColor }) => hoverColor || "inherit"};
-    }
-  `;
-  const [anchorEl, setAnchorEl] = React16.useState(null);
-  const open = Boolean(anchorEl);
-  let icon;
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  if (customIcon) {
-    icon = customIcon;
-  } else {
-    icon = /* @__PURE__ */ jsx35(HelpOutline, { fontSize: "medium", sx: { color: color2 } });
-  }
-  const anchor = menuDirection === "top" || menuDirection === void 0 ? "top" : "bottom";
-  const transform = menuDirection === "top" || menuDirection === void 0 ? "bottom" : "top";
-  return /* @__PURE__ */ jsxs20(Fragment10, { children: [
-    /* @__PURE__ */ jsx35(IconButton4, { onClick: handleClick, children: icon }),
-    /* @__PURE__ */ jsxs20(
-      Menu,
-      {
-        id,
-        open,
-        sx: {
-          width: width2,
-          "& .MuiPaper-root": {
-            border: border2
-          }
-        },
-        onClose: handleClose,
-        anchorEl,
-        TransitionComponent: Slide,
-        anchorOrigin: { vertical: anchor, horizontal: "center" },
-        transformOrigin: { vertical: transform, horizontal: "center" },
-        children: [
-          ...menuItems.map((items, index) => {
-            if (items.end === true) {
-              if (items.itemType === "header") {
-                if (items.link) {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
-                    /* @__PURE__ */ jsx35(MenuItem, { children: /* @__PURE__ */ jsx35("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ jsx35("span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
-                    /* @__PURE__ */ jsx35(Divider, {})
-                  ] }, index);
-                } else {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
-                    /* @__PURE__ */ jsx35("p", { style: { marginLeft: 16, marginRight: 16, marginTop: 6, marginBottom: 6 }, children: /* @__PURE__ */ jsx35("span", { style: { fontWeight: "bold" }, children: items.label }) }),
-                    /* @__PURE__ */ jsx35(Divider, {})
-                  ] }, index);
-                }
-              } else if (items.itemType === "link") {
-                return /* @__PURE__ */ jsxs20(Box4, { children: [
-                  /* @__PURE__ */ jsx35(MenuItem, { children: /* @__PURE__ */ jsx35(Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
-                  /* @__PURE__ */ jsx35(Divider, {})
-                ] }, index);
-              } else {
-                if (items.link) {
-                  return /* @__PURE__ */ jsxs20(Box4, { children: [
-                    /* @__PURE__ */ jsx35(MenuItem, { children: /* @__PURE__ */ jsx35("a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
-                    /* @__PURE__ */ jsx35(Divider, {})
-                  ] }, index);
-                } else {
-                  if (items.email) {
-                    return /* @__PURE__ */ jsxs20(Box4, { children: [
-                      /* @__PURE__ */ jsx35(Links, { href: items.email, style: emailStyle, children: items.label }),
-                      /* @__PURE__ */ jsx35(Divider, {})
-                    ] }, index);
-                  } else {
-                    return /* @__PURE__ */ jsxs20(Box4, { children: [
-                      /* @__PURE__ */ jsx35("p", { style: customStyle, children: items.label }),
-                      /* @__PURE__ */ jsx35(Divider, {})
-                    ] }, index);
-                  }
-                }
-              }
-            } else if (items.end === void 0 || items.end === false || items.end === null) {
-              if (items.itemType === "header") {
-                if (items.link) {
-                  return /* @__PURE__ */ jsx35(MenuItem, { children: /* @__PURE__ */ jsx35(Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }) }, index);
-                } else {
-                  return /* @__PURE__ */ jsx35("p", { style: customStyle, children: items.label }, index);
-                }
-              } else if (items.itemType === "link") {
-                return /* @__PURE__ */ jsx35(MenuItem, { style: { textDecoration: "none" }, children: /* @__PURE__ */ jsx35(Links, { href: items.link, hoverColor: items.hoverColor || "", children: items.label }) }, index);
-              } else {
-                if (items.link) {
-                  return /* @__PURE__ */ jsx35(MenuItem, { href: items.link, children: items.label }, index);
-                } else {
-                  if (items.email) {
-                    return /* @__PURE__ */ jsx35("p", { style: emailStyle, children: /* @__PURE__ */ jsx35(Links, { href: items.email, hoverColor: items.hoverColor || "blue", children: items.label }) }, index);
-                  } else {
-                    return /* @__PURE__ */ jsx35("p", { style: customStyle, children: items.label }, index);
-                  }
-                }
-              }
-            }
-          })
-        ]
+import React17, { useRef as useRef15, useEffect as useEffect15 } from "react";
+import { jsx as jsx35 } from "react/jsx-runtime";
+var WavelengthPopUpMenu = React17.forwardRef(
+  ({ children, customStyle = {}, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel, ...rest }, externalRef) => {
+    const internalRef = useRef15(null);
+    React17.useImperativeHandle(externalRef, () => internalRef.current);
+    useEffect15(() => {
+      const el = internalRef.current;
+      if (!el) return;
+      el.customStyles = customStyle;
+      const set = (attr, value) => {
+        if (value !== void 0 && value !== null && value !== "") {
+          el.setAttribute(attr, value.toString());
+        } else {
+          el.removeAttribute(attr);
+        }
+      };
+      set("variant", variant);
+      set("trigger", trigger);
+      set("menu-direction", menuDirection);
+      set("menu-offset", menuOffset);
+      set("badge-label", badgeLabel);
+      if (menuItems !== void 0) {
+        el.setAttribute("menu-items", JSON.stringify(menuItems));
       }
-    )
-  ] });
-}
+    }, [customStyle, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel]);
+    return /* @__PURE__ */ jsx35("wavelength-popup-menu", { ref: internalRef, ...rest, children });
+  }
+);
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 
 // src/components/modals/WavelengthDropdown.tsx
-import { forwardRef, useEffect as useEffect14, useImperativeHandle as useImperativeHandle2, useRef as useRef14 } from "react";
+import { forwardRef, useEffect as useEffect16, useImperativeHandle as useImperativeHandle2, useRef as useRef16 } from "react";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var WavelengthDropdown = forwardRef((props, ref) => {
   const {
@@ -5773,9 +5673,9 @@ var WavelengthDropdown = forwardRef((props, ref) => {
     onChange,
     ...rest
   } = props;
-  const elementRef = useRef14(null);
+  const elementRef = useRef16(null);
   useImperativeHandle2(ref, () => elementRef.current);
-  useEffect14(() => {
+  useEffect16(() => {
     const el = elementRef.current;
     if (!el || !onChange) return;
     const handler = (e) => {
@@ -5785,7 +5685,7 @@ var WavelengthDropdown = forwardRef((props, ref) => {
     el.addEventListener("change", handler);
     return () => el.removeEventListener("change", handler);
   }, [onChange]);
-  useEffect14(() => {
+  useEffect16(() => {
     if (value !== void 0 && elementRef.current) {
       elementRef.current.value = value;
     }
@@ -5819,7 +5719,7 @@ var WavelengthDropdown = forwardRef((props, ref) => {
 WavelengthDropdown.displayName = "WavelengthDropdown";
 
 // src/components/modals/WavelengthMenu.tsx
-import { useRef as useRef15, useEffect as useEffect15 } from "react";
+import { useRef as useRef17, useEffect as useEffect17 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var WavelengthMenu = ({
   backgroundColor: backgroundColor2,
@@ -5836,13 +5736,13 @@ var WavelengthMenu = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef15(null);
+  const ref = useRef17(null);
   const syncAttribute = (attribute, value) => {
     const el = ref.current;
     if (!el) return;
     el.setAttribute(attribute, value);
   };
-  useEffect15(() => {
+  useEffect17(() => {
     const el = ref.current;
     if (!el) return;
     syncAttribute("background-color", backgroundColor2 || "");
@@ -5884,11 +5784,11 @@ var WavelengthMenu = ({
 WavelengthMenu.displayName = "WavelengthMenu";
 
 // src/components/modals/WavelengthSwitch.tsx
-import { useRef as useRef16, useEffect as useEffect16 } from "react";
+import { useRef as useRef18, useEffect as useEffect18 } from "react";
 import { jsx as jsx38 } from "react/jsx-runtime";
-var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle: customStyle2, ...rest }) => {
-  const ref = useRef16(null);
-  useEffect16(() => {
+var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle, ...rest }) => {
+  const ref = useRef18(null);
+  useEffect18(() => {
     const el = ref.current;
     if (!el) return;
     const syncAttribute = (attr, val, isBool = false) => {
@@ -5898,7 +5798,7 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
         el.setAttribute(attr, isBool ? "" : val.toString());
       }
     };
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("checked", checked, true);
     syncAttribute("disabled", disabled, true);
     syncAttribute("label", label);
@@ -5907,8 +5807,8 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
     syncAttribute("color", color2);
     syncAttribute("label-font", labelFont);
     syncAttribute("value", value);
-  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle2]);
-  useEffect16(() => {
+  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle]);
+  useEffect18(() => {
     const el = ref.current;
     if (!el || !onWavelengthSwitchChange) return;
     const handleEvent = (e) => {
@@ -5921,14 +5821,110 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2,
 };
 WavelengthSwitch.displayName = "WavelengthSwitch";
 
-// src/components/modals/WavelengthPagination.tsx
-import { useRef as useRef17, useEffect as useEffect17 } from "react";
+// src/components/modals/WavelengthDialog.tsx
+import { useRef as useRef19, useEffect as useEffect19 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
+var WavelengthDialog = ({
+  children,
+  customStyle,
+  dialogTitle,
+  leftBtnLabel,
+  rightBtnLabel,
+  boxColor,
+  maxWidth: maxWidth2,
+  maxHeight: maxHeight2,
+  shadow,
+  borderRadius: borderRadius2,
+  borderColor: borderColor2,
+  textColor,
+  leftBtnBg,
+  leftBtnColor,
+  rightBtnBg,
+  rightBtnColor,
+  overlay,
+  fontFamily,
+  open,
+  onWlLeftBtnClick,
+  onWlRightBtnClick,
+  ...rest
+}) => {
+  const ref = useRef19(null);
+  useEffect19(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (open) el.setAttribute("open", "");
+    else el.removeAttribute("open");
+  }, [open]);
+  useEffect19(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (overlay) el.setAttribute("overlay", "");
+    else el.removeAttribute("overlay");
+  }, [overlay]);
+  useEffect19(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handleLeft = (e) => onWlLeftBtnClick?.(e);
+    const handleRight = (e) => onWlRightBtnClick?.(e);
+    el.addEventListener("wl-left-btn-click", handleLeft);
+    el.addEventListener("wl-right-btn-click", handleRight);
+    return () => {
+      el.removeEventListener("wl-left-btn-click", handleLeft);
+      el.removeEventListener("wl-right-btn-click", handleRight);
+    };
+  }, [onWlLeftBtnClick, onWlRightBtnClick]);
+  useEffect19(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (customStyle !== void 0) el.customStyles = customStyle;
+    const setAttr = (attr, value) => {
+      if (value !== void 0) el.setAttribute(attr, value);
+    };
+    setAttr("dialog-title", dialogTitle);
+    setAttr("left-btn-label", leftBtnLabel);
+    setAttr("right-btn-label", rightBtnLabel);
+    setAttr("box-color", boxColor);
+    setAttr("max-width", maxWidth2);
+    setAttr("max-height", maxHeight2);
+    setAttr("shadow", shadow);
+    setAttr("border-radius", borderRadius2);
+    setAttr("border-color", borderColor2);
+    setAttr("text-color", textColor);
+    setAttr("left-btn-bg", leftBtnBg);
+    setAttr("left-btn-color", leftBtnColor);
+    setAttr("right-btn-bg", rightBtnBg);
+    setAttr("right-btn-color", rightBtnColor);
+    setAttr("font-family", fontFamily);
+  }, [
+    customStyle,
+    dialogTitle,
+    leftBtnLabel,
+    rightBtnLabel,
+    boxColor,
+    maxWidth2,
+    maxHeight2,
+    shadow,
+    borderRadius2,
+    borderColor2,
+    textColor,
+    leftBtnBg,
+    leftBtnColor,
+    rightBtnBg,
+    rightBtnColor,
+    fontFamily
+  ]);
+  return /* @__PURE__ */ jsx39("wavelength-dialog", { ref, ...rest, children });
+};
+WavelengthDialog.displayName = "WavelengthDialog";
+
+// src/components/modals/WavelengthPagination.tsx
+import { useRef as useRef20, useEffect as useEffect20 } from "react";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var WavelengthPagination = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   variant,
   textColor,
   font,
@@ -5946,16 +5942,16 @@ var WavelengthPagination = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef17(null);
+  const ref = useRef20(null);
   const syncAttribute = (attribute, value) => {
     const el = ref.current;
     if (!el) return;
     el.setAttribute(attribute, value);
   };
-  useEffect17(() => {
+  useEffect20(() => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     syncAttribute("variant", variant || "");
     syncAttribute("text-color", textColor || "");
     syncAttribute("font", font || "");
@@ -5979,7 +5975,7 @@ var WavelengthPagination = ({
       el.removeEventListener("page-change", handlePageChange);
     };
   }, [testProp, textColor, font, fontSize, border2, borderRadius2, padding2, variant, totalPages, currentPage, activeColor, activeTextColor, backgroundColor2, disabledColor, onPageChange]);
-  return /* @__PURE__ */ jsx39("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
+  return /* @__PURE__ */ jsx40("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
 };
 WavelengthPagination.displayName = "WavelengthPagination";
 
@@ -5994,9 +5990,9 @@ 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 styled6 from "styled-components";
-import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
-var MyDroplistItems = styled6("li")`
+import styled5 from "styled-components";
+import { jsx as jsx41, jsxs as jsxs20 } from "react/jsx-runtime";
+var MyDroplistItems = styled5("li")`
   background-color: white;
   color: #000000;
   padding: 10px 30px;
@@ -6039,16 +6035,16 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     "&:disabled": { background: "rgb(226, 223, 223)" },
     "&.active": { background: "#8FD8FF" }
   };
-  return /* @__PURE__ */ jsxs21("div", { style: dropstyles.butPagCompDivStyle, id, children: [
-    /* @__PURE__ */ jsx40(Button4, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx40(ArrowBackIosNewIcon, {}) }),
-    /* @__PURE__ */ jsx40("section", { style: dropstyles.rangenumbers, children: itemList.map(
+  return /* @__PURE__ */ jsxs20("div", { style: dropstyles.butPagCompDivStyle, id, children: [
+    /* @__PURE__ */ jsx41(Button4, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx41(ArrowBackIosNewIcon, {}) }),
+    /* @__PURE__ */ jsx41("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__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx40(Button4, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx41(Button4, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems,
             {
               onClick: () => {
@@ -6061,9 +6057,9 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx40(Button4, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsxs20("div", { children: [
+          /* @__PURE__ */ jsx41(Button4, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx41(
             MyDroplistItems,
             {
               onClick: () => {
@@ -6074,9 +6070,9 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
             item2
           )) }) })
         ] })
-      ) : /* @__PURE__ */ jsx40(Button4, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
+      ) : /* @__PURE__ */ jsx41(Button4, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
     ) }),
-    /* @__PURE__ */ jsx40(Button4, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx40(ArrowForwardIosIcon, {}) })
+    /* @__PURE__ */ jsx41(Button4, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx41(ArrowForwardIosIcon, {}) })
   ] });
 }
 WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
@@ -6087,12 +6083,12 @@ 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 styled7 from "styled-components";
-import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import styled6 from "styled-components";
+import { jsx as jsx42, 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 = styled7("li")`
+  const MyDroplistItems2 = styled6("li")`
     background-color: white;
     color: #000000;
     padding: 10px 30px;
@@ -6130,15 +6126,15 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
       setIsSecOpen(!isSecOpen);
     }
   };
-  return /* @__PURE__ */ jsxs22("div", { style: dropstyles.pagination, id, children: [
-    /* @__PURE__ */ jsx41(Button5, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx41(ArrowBackIosNewIcon2, {}) }),
-    /* @__PURE__ */ jsx41("section", { style: dropstyles.rangenumbers, children: itemList.map(
+  return /* @__PURE__ */ jsxs21("div", { style: dropstyles.pagination, id, children: [
+    /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx42(ArrowBackIosNewIcon2, {}) }),
+    /* @__PURE__ */ jsx42("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__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx41(Button5, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
-          isOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx42(Button5, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
+          isOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx42(
             MyDroplistItems2,
             {
               style: dropstyles.mydroplist,
@@ -6152,9 +6148,9 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
         ] })
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
-        /* @__PURE__ */ jsxs22("div", { children: [
-          /* @__PURE__ */ jsx41(Button5, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx41("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx41("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsxs21("div", { children: [
+          /* @__PURE__ */ jsx42(Button5, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx42("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx42("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx42(
             MyDroplistItems2,
             {
               style: dropstyles.mydroplist,
@@ -6166,16 +6162,16 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
             item2
           )) }) })
         ] })
-      ) : /* @__PURE__ */ jsx41(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
+      ) : /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
     ) }),
-    /* @__PURE__ */ jsx41(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx41(ArrowForwardIosIcon2, {}) })
+    /* @__PURE__ */ jsx42(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx42(ArrowForwardIosIcon2, {}) })
   ] });
 }
 WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
 var WavelengthVariationPagination_default = WavelengthVariationPagination;
 
 // src/components/pagination/WavelengthDefaultPagination.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var range = (start, end) => {
   const length = end - start + 1;
   return Array.from({ length }, (_, i) => start + i);
@@ -6213,7 +6209,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
     }
   };
   if (style3 === "circular") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       WavelengthButtonPagination_default,
       {
         id,
@@ -6226,7 +6222,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "text") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6240,7 +6236,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "outlined") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6254,7 +6250,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "contained") {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6268,7 +6264,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else {
-    return /* @__PURE__ */ jsx42(
+    return /* @__PURE__ */ jsx43(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6289,16 +6285,16 @@ var WavelengthDefaultPagination_default = WavelengthDefaultPagination;
 import Snackbar from "@mui/material/Snackbar";
 import SnackbarContent from "@mui/material/SnackbarContent";
 import CloseIcon2 from "@mui/icons-material/Close";
-import { IconButton as IconButton5 } from "@mui/material";
-import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+import { IconButton as IconButton4 } from "@mui/material";
+import { jsx as jsx44, 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__ */ jsx43(IconButton5, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx43(CloseIcon2, { fontSize: "small" }) });
+  const defaultIcon = /* @__PURE__ */ jsx44(IconButton4, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx44(CloseIcon2, { fontSize: "small" }) });
   const palette2 = getPalette();
   const durationMs = durationSb ? durationSb * 1e3 : 4e3;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Snackbar,
     {
       id,
@@ -6309,7 +6305,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
         vertical: vertyAlign ? vertyAlign : "bottom",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(
         SnackbarContent,
         {
           style: {
@@ -6318,11 +6314,11 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             display: "flex",
             width: width2
           },
-          message: /* @__PURE__ */ jsxs23("div", { children: [
-            /* @__PURE__ */ jsx43("span", { children: icon }),
-            /* @__PURE__ */ jsx43("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
+          message: /* @__PURE__ */ jsxs22("div", { children: [
+            /* @__PURE__ */ jsx44("span", { children: icon }),
+            /* @__PURE__ */ jsx44("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
-          action: /* @__PURE__ */ jsx43("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
+          action: /* @__PURE__ */ jsx44("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
         }
       )
     }
@@ -6333,7 +6329,7 @@ WavelengthSnackbar.displayName = "WavelengthSnackbar";
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx45, 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);
@@ -6348,7 +6344,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
     bgColor = "#737373";
   }
   const sIcon = icon ? icon : "";
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     Snackbar2,
     {
       id,
@@ -6360,7 +6356,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
         vertical: vertyAlign ? vertyAlign : "top",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx45(
         SnackbarContent2,
         {
           style: {
@@ -6369,7 +6365,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
             //color: props.textColor ? props.textColor : palette.secondary,
           },
           sx: { paddingTop: "0px", paddingBottom: "0px" },
-          message: /* @__PURE__ */ jsxs24(
+          message: /* @__PURE__ */ jsxs23(
             "div",
             {
               style: {
@@ -6378,11 +6374,11 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ jsxs24("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ jsx44("div", { style: { marginTop: "5px" }, children: sIcon }),
-                  /* @__PURE__ */ jsx44("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__ */ jsx45("div", { style: { marginTop: "5px" }, children: sIcon }),
+                  /* @__PURE__ */ jsx45("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
-                /* @__PURE__ */ jsx44("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
+                /* @__PURE__ */ jsx45("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
               ]
             }
           )
@@ -6394,13 +6390,13 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
 WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 
 // src/components/snackbars/WavelengthTestSnackbar.tsx
-import Box5 from "@mui/material/Box";
+import Box3 from "@mui/material/Box";
 import Button6 from "@mui/material/Button";
-import { useEffect as useEffect18, useRef as useRef18 } from "react";
-import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { useEffect as useEffect21, useRef as useRef21 } from "react";
+import { Fragment as Fragment10, jsx as jsx46, jsxs as jsxs24 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef18(null);
-  useEffect18(() => {
+  const ref = useRef21(null);
+  useEffect21(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6427,8 +6423,8 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx45(Fragment11, { children: isPopUpOpen && /* @__PURE__ */ jsxs25(
-    Box5,
+  return /* @__PURE__ */ jsx46(Fragment10, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
+    Box3,
     {
       id,
       sx: { position: "fixed", right: "auto", top: "24px", left: "50%", transform: "translateX(-50%)" },
@@ -6447,9 +6443,9 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
         marginTop: customVertyAlign ? `${customVertyAlign}` : ""
       },
       children: [
-        /* @__PURE__ */ jsx45("div", { style: { backgroundColor: "red" } }),
-        /* @__PURE__ */ jsx45("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46("div", { style: { backgroundColor: "red" } }),
+        /* @__PURE__ */ jsx46("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
+        /* @__PURE__ */ jsx46(
           Button6,
           {
             variant: "text",
@@ -6466,38 +6462,42 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
 WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 
 // src/components/sliders/WavelengthSlider.tsx
-import Box6 from "@mui/material/Box";
-import Slider from "@mui/material/Slider";
-import { jsx as jsx46 } 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__ */ jsx46(Box6, { sx: { width: width2 }, children: /* @__PURE__ */ jsx46(
-    Slider,
-    {
-      id,
-      "aria-label": "Custom marks",
+import { useRef as useRef22, useEffect as useEffect22 } from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color: color2, width: width2, ...rest }) => {
+  const ref = useRef22(null);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.customStyles = customStyle;
+    const attrs = {
       value,
-      getAriaValueText: labelFunc,
+      "max-val": maxVal,
+      "min-val": minVal,
       step,
-      marks,
-      valueLabelDisplay: on,
-      max: maxVal,
-      min: minVal,
-      onChange: handleChange,
-      sx: {
-        color: color2,
-        "& .MuiSlider-markLabel": {
-          color: labelColor
-        }
-      }
-    }
-  ) });
-}
+      marks: marks ? JSON.stringify(marks) : void 0,
+      color: color2,
+      width: width2,
+      "value-displayed": valueDisplayed ?? (labelFunc && value !== void 0 ? labelFunc(value) : void 0)
+    };
+    Object.entries(attrs).forEach(([key, val]) => {
+      if (val !== void 0) el.setAttribute(key, val.toString());
+    });
+  }, [value, maxVal, minVal, step, marks, customStyle, color2, width2, valueDisplayed, labelFunc]);
+  useEffect22(() => {
+    const el = ref.current;
+    if (!el || !handleChange) return;
+    const onSliderChange = (e) => handleChange(e, e.detail.value);
+    el.addEventListener("slider-change", onSliderChange);
+    return () => el.removeEventListener("slider-change", onSliderChange);
+  }, [handleChange]);
+  return /* @__PURE__ */ jsx47("wavelength-slider", { ref, ...rest, children });
+};
 WavelengthSlider.displayName = "WavelengthSlider";
 
 // src/components/carousels/WavelengthDefaultCarousel.tsx
 import { useState as useState7 } from "react";
-import IconButton6 from "@mui/material/IconButton";
+import IconButton5 from "@mui/material/IconButton";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import Typography4 from "@mui/material/Typography";
@@ -6506,7 +6506,7 @@ 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 jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight, cardWidth, id, name }) => {
   const [currentIndex, setCurrentIndex] = useState7(0);
   const adjustButtonSize = buttonSize !== void 0 ? buttonSize : 70;
@@ -6523,7 +6523,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   const handleClick = () => {
     window.open(items[currentIndex].path, "_blank");
   };
-  return /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsxs25(
     Grid3,
     {
       container: true,
@@ -6532,24 +6532,24 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsx47(IconButton6, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx47(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsx48(IconButton5, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx48(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
+        /* @__PURE__ */ jsx48(
           Card,
           {
             sx: {
               maxWidth: adjustCardWidth,
               maxHeight: adjustCardHeight
             },
-            children: /* @__PURE__ */ jsxs26(CardActionArea, { onClick: handleClick, children: [
-              /* @__PURE__ */ jsx47(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
-              /* @__PURE__ */ jsxs26(CardContent, { children: [
-                /* @__PURE__ */ jsx47(Typography4, { variant: "h4", children: items[currentIndex].title }),
-                /* @__PURE__ */ jsx47(Typography4, { variant: "body1", children: items[currentIndex].description })
+            children: /* @__PURE__ */ jsxs25(CardActionArea, { onClick: handleClick, children: [
+              /* @__PURE__ */ jsx48(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
+              /* @__PURE__ */ jsxs25(CardContent, { children: [
+                /* @__PURE__ */ jsx48(Typography4, { variant: "h4", children: items[currentIndex].title }),
+                /* @__PURE__ */ jsx48(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsx47(IconButton6, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx47(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
+        /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsx48(IconButton5, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx48(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
       ]
     }
   ) }) });
@@ -6557,18 +6557,18 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState8, useEffect as useEffect20 } from "react";
+import { useState as useState8, useEffect as useEffect24 } 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 jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, 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);
-  useEffect20(() => {
+  useEffect24(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6606,7 +6606,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
       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__ */ jsx48("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx48("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx49("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx49(
     Grid4,
     {
       sx: {
@@ -6616,7 +6616,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
       },
       container: true,
       spacing: 0.5,
-      children: items.map((card) => /* @__PURE__ */ jsx48("div", { children: /* @__PURE__ */ jsx48(
+      children: items.map((card) => /* @__PURE__ */ jsx49("div", { children: /* @__PURE__ */ jsx49(
         Card2,
         {
           sx: {
@@ -6626,11 +6626,11 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
           },
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
-          children: /* @__PURE__ */ jsxs27(CardActionArea2, { href: card.path, children: [
-            /* @__PURE__ */ jsx48(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
-            /* @__PURE__ */ jsxs27(CardContent2, { children: [
-              /* @__PURE__ */ jsx48("h3", { children: card.title }),
-              /* @__PURE__ */ jsx48("p", { children: card.description })
+          children: /* @__PURE__ */ jsxs26(CardActionArea2, { href: card.path, children: [
+            /* @__PURE__ */ jsx49(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ jsxs26(CardContent2, { children: [
+              /* @__PURE__ */ jsx49("h3", { children: card.title }),
+              /* @__PURE__ */ jsx49("p", { children: card.description })
             ] })
           ] })
         }
@@ -6641,9 +6641,9 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
 SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef19, useEffect as useEffect21, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef23, useEffect as useEffect25, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
   ({
     id,
@@ -6681,12 +6681,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef19(null);
+    const internalRef = useRef23(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect21(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6759,7 +6759,7 @@ var WavelengthInput = forwardRef2(
       disabled,
       multiLine
     ]);
-    useEffect21(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6771,7 +6771,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect21(() => {
+    useEffect25(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6792,7 +6792,7 @@ var WavelengthInput = forwardRef2(
       ...style3,
       ...backgroundColor2 ? { ["--wavelength-label-background"]: backgroundColor2 } : {}
     };
-    return /* @__PURE__ */ jsx49("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
+    return /* @__PURE__ */ jsx50("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
   }
 );
 WavelengthInput.displayName = "WavelengthInput";
@@ -6801,10 +6801,10 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect22, useRef as useRef20, useState as useState9 } from "react";
-import styled8 from "styled-components";
-import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
-var ModalInputDiv = styled8.div`
+import { useEffect as useEffect26, useRef as useRef24, useState as useState9 } from "react";
+import styled7 from "styled-components";
+import { jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+var ModalInputDiv = styled7.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
   gap: 3px;
@@ -6834,7 +6834,7 @@ var ModalInputDiv = styled8.div`
     }
   }
 `;
-var ModalOverlay = styled8.div`
+var ModalOverlay = styled7.div`
   position: fixed;
   bottom: 19%;
   right: 15%;
@@ -6846,7 +6846,7 @@ var ModalOverlay = styled8.div`
   align-items: center;
   z-index: 1;
 `;
-var ModalWrapper = styled8.div`
+var ModalWrapper = styled7.div`
   background-color: white;
   border-radius: 8px;
   padding: 20px;
@@ -6857,7 +6857,7 @@ var ModalWrapper = styled8.div`
   display: flex;
   align-items: center;
 `;
-var ModalClose = styled8.button`
+var ModalClose = styled7.button`
   position: absolute;
   top: 10px;
   right: 10px;
@@ -6867,16 +6867,16 @@ var ModalClose = styled8.button`
   background: none;
   z-index: 2;
 `;
-var TableHeadStyle = styled8.th`
+var TableHeadStyle = styled7.th`
   position: relative;
 `;
-var KebabMenu = styled8.div`
+var KebabMenu = styled7.div`
   display: inline-block;
   position: absolute;
   right: 0;
   top: 2px;
 `;
-var KebabIcon = styled8.div`
+var KebabIcon = styled7.div`
   cursor: pointer;
   font-size: 20px;
   padding: 5px;
@@ -6889,7 +6889,7 @@ var KebabIcon = styled8.div`
     color: #8fd8ff;
   }
 `;
-var MenuOptions = styled8.ul`
+var MenuOptions = styled7.ul`
   position: absolute;
   right: 0;
   top: 100%;
@@ -6912,7 +6912,7 @@ var MenuOptions = styled8.ul`
     }
   }
 `;
-var StyledBoxDiv = styled8.div`
+var StyledBoxDiv = styled7.div`
   background-color: white;
   width: 700px;
   height: 480px;
@@ -6920,7 +6920,7 @@ var StyledBoxDiv = styled8.div`
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 `;
-var StyledNavBoxDiv = styled8.div`
+var StyledNavBoxDiv = styled7.div`
   background-color: white;
   width: 700px;
   display: flex; /* Make parent a flex-container */
@@ -6930,13 +6930,13 @@ var StyledNavBoxDiv = styled8.div`
 
   box-shadow: 0.5px 3px 5px black;
 `;
-var StyledTd = styled8.td`
+var StyledTd = styled7.td`
   border-top: 1px solid #c6c7cc;
   border-bottom: 1px solid #c6c7cc;
   padding: 10px 15px;
   vertical-align: middle;
 `;
-var StyledTableTwo = styled8.table`
+var StyledTableTwo = styled7.table`
   width: 95%;
   height: 95%;
   border-collapse: collapse;
@@ -6962,7 +6962,7 @@ var StyledTableTwo = styled8.table`
     }
   }
 `;
-var StyledInput = styled8.input`
+var StyledInput = styled7.input`
   height: 100%;
   width: 100%;
   outline: none;
@@ -6982,8 +6982,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 = useRef20(null);
-  const modalRef = useRef20(null);
+  const menuRef = useRef24(null);
+  const modalRef = useRef24(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -6991,7 +6991,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect22(() => {
+  useEffect26(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -7021,7 +7021,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect22(() => {
+  useEffect26(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -7078,10 +7078,10 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setEditingId(null);
   };
   const headers = columns.map((column, index) => {
-    return /* @__PURE__ */ jsxs28(TableHeadStyle, { children: [
+    return /* @__PURE__ */ jsxs27(TableHeadStyle, { children: [
       column.title,
-      /* @__PURE__ */ jsxs28(KebabMenu, { ref: menuRef, children: [
-        /* @__PURE__ */ jsx50(
+      /* @__PURE__ */ jsxs27(KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ jsx51(
           KebabIcon,
           {
             title: `KebabIcon-${index}`,
@@ -7091,27 +7091,27 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             children: "\u22EE"
           }
         ),
-        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs28(MenuOptions, { children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsxs28("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
-            /* @__PURE__ */ jsx50("span", { children: "\u2B06" }),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs27(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs27("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ jsx51("span", { children: "\u2B06" }),
             " Sort ASC"
-          ] }) : /* @__PURE__ */ jsxs28("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
-            /* @__PURE__ */ jsx50("span", { children: "\u2B07" }),
+          ] }) : /* @__PURE__ */ jsxs27("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ jsx51("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
-          /* @__PURE__ */ jsxs28("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
-            /* @__PURE__ */ jsx50("span", { children: "\u23F7" }),
+          /* @__PURE__ */ jsxs27("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ jsx51("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx50(ModalOverlay, { children: /* @__PURE__ */ jsxs28(ModalWrapper, { ref: modalRef, children: [
-            /* @__PURE__ */ jsx50(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs28(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx50("label", { htmlFor: "filterSelectId", children: "Columns: " }),
-              /* @__PURE__ */ jsx50("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx50("option", { children: item.key }, item.key)) })
+          isModalOpen && /* @__PURE__ */ jsx51(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ jsx51(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+            /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx51("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ jsx51("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx51("option", { children: item.key }, item.key)) })
             ] }),
-            /* @__PURE__ */ jsxs28(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx50("label", { htmlFor: "filterInputId", children: "Values: " }),
-              /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
+              /* @__PURE__ */ jsx51("label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ jsx51(
                 "input",
                 {
                   title: `Inputfiltertest-${index}`,
@@ -7132,8 +7132,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx50("tr", { children: /* @__PURE__ */ jsx50("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx50("tr", { children: columns.map((column, index2) => {
-    return /* @__PURE__ */ jsx50(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx50(
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx51("tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx51(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx51(
       StyledInput,
       {
         title: `styledRow-${item.id}-${column.key}-${index2}`,
@@ -7150,42 +7150,42 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         autoFocus: true
       }
-    ) : /* @__PURE__ */ jsx50("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+    ) : /* @__PURE__ */ jsx51("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__ */ jsxs28("div", { id, children: [
-    /* @__PURE__ */ jsx50(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs28(StyledTableTwo, { title: "StyledTable", children: [
-      /* @__PURE__ */ jsx50("thead", { children: /* @__PURE__ */ jsx50("tr", { children: headers }) }),
-      /* @__PURE__ */ jsx50("tbody", { children: rows })
+  return /* @__PURE__ */ jsxs27("div", { id, children: [
+    /* @__PURE__ */ jsx51(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsx51("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx51("tbody", { children: rows })
     ] }) }),
-    /* @__PURE__ */ jsx50(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx50(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+    /* @__PURE__ */ jsx51(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx51(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";
 
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
-import { useMemo as useMemo3, useState as useState10, Fragment as Fragment12 } from "react";
-import styled9 from "styled-components";
-import { Fragment as Fragment13, jsx as jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
-var TableContainer = styled9.div`
+import { useMemo as useMemo3, useState as useState10, Fragment as Fragment11 } from "react";
+import styled8 from "styled-components";
+import { Fragment as Fragment12, jsx as jsx52, jsxs as jsxs28 } from "react/jsx-runtime";
+var TableContainer = styled8.div`
   width: 1200px;
   border-radius: 16px;
 `;
-var TableRow = styled9.div`
+var TableRow = styled8.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var TablePrimaryRow = styled9.div`
+var TablePrimaryRow = styled8.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var BodyRowContainer = styled9.div`
+var BodyRowContainer = styled8.div`
   border: 1px solid black;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 10px;
 `;
-var TableHeaderCell = styled9.div`
+var TableHeaderCell = styled8.div`
   padding-left: 12px;
   padding-right: 25px;
   height: 60px;
@@ -7193,7 +7193,7 @@ var TableHeaderCell = styled9.div`
   display: flex;
   align-items: center;
 `;
-var TableBodyCell = styled9.div`
+var TableBodyCell = styled8.div`
   background-color: #fff;
   color: black;
   position: relative;
@@ -7202,27 +7202,27 @@ var TableBodyCell = styled9.div`
   font-size: ${(props) => props.$primaryBoldState ? "24px" : "16px"};
   font-weight: ${(props) => props.$primaryBoldState ? "bold" : "normal"};
 `;
-var ButtonStylingRow = styled9.div`
+var ButtonStylingRow = styled8.div`
   display: flex;
   flex-direction: row;
 `;
-var BottomArrowBar = styled9.div`
+var BottomArrowBar = styled8.div`
   background-color: #e9e9e9;
   text-align: center;
 `;
-var BottomUpArrowBar = styled9.div`
+var BottomUpArrowBar = styled8.div`
   background-color: #e9e9e9;
   text-align: center;
   position: relative;
 `;
-var SubDataTable = styled9.table`
+var SubDataTable = styled8.table`
   background-color: white;
   color: black;
   width: 100%;
   border-collapse: collapse;
   line-height: 1.2;
 `;
-var SubDataTableHeaderRow = styled9.tr`
+var SubDataTableHeaderRow = styled8.tr`
   height: 50px;
   background-color: #304359;
   color: white;
@@ -7233,10 +7233,10 @@ var SubDataTableHeaderRow = styled9.tr`
     white-space: nowrap;
   }
 `;
-var SubDataTableBodyRow = styled9.tbody`
+var SubDataTableBodyRow = styled8.tbody`
   font-size: 14px;
 `;
-var SubDataTableBodyRowContainer = styled9.tr`
+var SubDataTableBodyRowContainer = styled8.tr`
   td {
     padding: 10px 0;
     max-width: 100px;
@@ -7246,13 +7246,13 @@ var SubDataTableBodyRowContainer = styled9.tr`
     background-color: #96e0e5;
   }
 `;
-var SubDataTableCell = styled9.td`
+var SubDataTableCell = styled8.td`
   text-align: center;
 `;
-var SubDataHeaderColumn = styled9.thead`
+var SubDataHeaderColumn = styled8.thead`
   background-color: #304359;
 `;
-var SortButton = styled9.button`
+var SortButton = styled8.button`
   font-size: 16px;
   font-weight: bold;
   color: white;
@@ -7260,7 +7260,7 @@ var SortButton = styled9.button`
   border: none;
   white-space: nowrap;
 `;
-var DownloadMissionButton = styled9.button`
+var DownloadMissionButton = styled8.button`
   width: 217px;
   height: 45px;
   padding: 12px 32px 12px 32px;
@@ -7289,7 +7289,7 @@ var DownloadMissionButton = styled9.button`
     transition: background-color 0.2s ease;
   }
 `;
-var AddButton = styled9.button`
+var AddButton = styled8.button`
   width: 130px;
   height: 45px;
   border: 1px solid #1a8083;
@@ -7319,7 +7319,7 @@ var AddButton = styled9.button`
     transition: background-color 0.2s ease;
   }
 `;
-var DownloadArrow = styled9.button`
+var DownloadArrow = styled8.button`
   background-color: transparent;
   border: none;
 
@@ -7402,45 +7402,45 @@ 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__ */ jsx51(Fragment13, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx52(Fragment12, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsx51(Fragment13, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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__ */ jsx52(Fragment12, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsx51(Fragment13, { children: /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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__ */ jsx52(Fragment12, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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) => {
     const columnKey = trimBeforePeriod2(column.key);
-    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      /* @__PURE__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsxs29(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      /* @__PURE__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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__ */ jsx51("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("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__ */ jsx52("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("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__ */ jsx51(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+    return /* @__PURE__ */ jsx52(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx51("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx52("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx51(Fragment12, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs29(SubDataTableBodyRowContainer, { children: [
-      /* @__PURE__ */ jsx51("td", { children: /* @__PURE__ */ jsx51(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx51("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51(
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx52(Fragment11, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx52("td", { children: /* @__PURE__ */ jsx52(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx52("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52(
         "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",
@@ -7451,45 +7451,45 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ jsx51(SubDataTableCell, { children: /* @__PURE__ */ jsx51("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ jsx52(SubDataTableCell, { children: /* @__PURE__ */ jsx52("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__ */ jsxs29(BodyRowContainer, { children: [
-    /* @__PURE__ */ jsx51(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx51(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
-    /* @__PURE__ */ jsxs29(ButtonStylingRow, { children: [
-      /* @__PURE__ */ jsx51(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
-      /* @__PURE__ */ jsx51(AddButton, { onClick: addFilesOnClick, children: "Add files" })
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs28(BodyRowContainer, { children: [
+    /* @__PURE__ */ jsx52(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx52(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsxs28(ButtonStylingRow, { children: [
+      /* @__PURE__ */ jsx52(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
+      /* @__PURE__ */ jsx52(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
-    openRow !== item.id && /* @__PURE__ */ jsx51(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx51("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
-    openRow === item.id && /* @__PURE__ */ jsxs29("div", { children: [
-      /* @__PURE__ */ jsxs29(SubDataTable, { children: [
-        /* @__PURE__ */ jsx51(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs29(SubDataTableHeaderRow, { children: [
-          /* @__PURE__ */ jsx51("th", {}),
+    openRow !== item.id && /* @__PURE__ */ jsx52(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx52("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ jsxs28("div", { children: [
+      /* @__PURE__ */ jsxs28(SubDataTable, { children: [
+        /* @__PURE__ */ jsx52(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx52("th", {}),
           SubDataHeaders
         ] }) }),
-        /* @__PURE__ */ jsx51(SubDataTableBodyRow, { children: subDataRows(item.id) })
+        /* @__PURE__ */ jsx52(SubDataTableBodyRow, { children: subDataRows(item.id) })
       ] }),
-      /* @__PURE__ */ jsx51(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx51("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx51("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+      /* @__PURE__ */ jsx52(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx52("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx52("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
-  return /* @__PURE__ */ jsxs29(TableContainer, { children: [
-    /* @__PURE__ */ jsx51(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
-    /* @__PURE__ */ jsx51("div", { title: "tablebodies", children: dataRows })
+  return /* @__PURE__ */ jsxs28(TableContainer, { children: [
+    /* @__PURE__ */ jsx52(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx52("div", { title: "tablebodies", children: dataRows })
   ] });
 };
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef21, useEffect as useEffect23 } from "react";
+import { useRef as useRef25, useEffect as useEffect27 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef21(null);
-  const reactDropdownRoots = useRef21(/* @__PURE__ */ new Map());
-  useEffect23(() => {
+  const tableRef = useRef25(null);
+  const reactDropdownRoots = useRef25(/* @__PURE__ */ new Map());
+  useEffect27(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7498,7 +7498,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]);
-  useEffect23(() => {
+  useEffect27(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7535,7 +7535,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
       el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
     };
   }, [data]);
-  return /* @__PURE__ */ jsx52("wavelength-child-data-table", { ref: tableRef, ...rest });
+  return /* @__PURE__ */ jsx53("wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";
 
@@ -7544,9 +7544,9 @@ import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-component
 
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState11 } from "react";
-import styled10 from "styled-components";
-import { Fragment as Fragment14, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
-var TableStyle = styled10.table`
+import styled9 from "styled-components";
+import { Fragment as Fragment13, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+var TableStyle = styled9.table`
   width: 100%;
   height: 100%;
   border-collapse: collapse;
@@ -7562,26 +7562,26 @@ var TableStyle = styled10.table`
   margin-right: auto;
   position: absolute;
 `;
-var MainThHeaders = styled10.th`
+var MainThHeaders = styled9.th`
   &:not(:last-child) {
     border-right: 1px solid #c6c7cc;
   }
 `;
-var SubDataTr = styled10.tr`
+var SubDataTr = styled9.tr`
   background-color: white;
 
   &:nth-child(even) {
     background-color: #e0ffff;
   }
 `;
-var PrimaryTrRows = styled10.tr`
+var PrimaryTrRows = styled9.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
 `;
-var SubTrRows = styled10.tr`
+var SubTrRows = styled9.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
   height: 120px;
 `;
-var SubTableStyle = styled10.table`
+var SubTableStyle = styled9.table`
   width: 95%;
   border-collapse: collapse;
   margin-top: -15px;
@@ -7601,7 +7601,7 @@ var SubTableStyle = styled10.table`
     }
   }
 `;
-var DropdownButton = styled10.button`
+var DropdownButton = styled9.button`
   background-color: transparent;
   background-repeat: no-repeat;
   border: none;
@@ -7611,7 +7611,7 @@ var DropdownButton = styled10.button`
   font-weight: bold; /* This makes the UTF symbols bold */
   font-size: 20px;
 `;
-var PrimaryTdSpan = styled10.td`
+var PrimaryTdSpan = styled9.td`
   &:not(:last-child) {
     border-right: 1px solid black;
   }
@@ -7632,57 +7632,57 @@ var NestedDataTable = ({ data, columns, id }) => {
     setPrimaryRowIndex(rowIndex);
   };
   const headers = HeadColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx53(MainThHeaders, { children: column.title }, `headCell-${index}`);
+    return /* @__PURE__ */ jsx54(MainThHeaders, { children: column.title }, `headCell-${index}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx53("th", { children: column.title }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx54("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx53("tr", { children: /* @__PURE__ */ jsx53("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx53(Fragment14, { children: /* @__PURE__ */ jsx53(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx54("tr", { children: /* @__PURE__ */ jsx54("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx54(Fragment13, { children: /* @__PURE__ */ jsx54(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__ */ jsx53("td", { children: /* @__PURE__ */ jsx53("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+      return /* @__PURE__ */ jsx54("td", { children: /* @__PURE__ */ jsx54("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
-  const childRows = /* @__PURE__ */ jsxs30(SubTableStyle, { children: [
-    /* @__PURE__ */ jsx53("thead", { children: /* @__PURE__ */ jsx53("tr", { children: SubDataHeaders }) }),
-    /* @__PURE__ */ jsx53("tbody", { children: subDataRows })
+  const childRows = /* @__PURE__ */ jsxs29(SubTableStyle, { children: [
+    /* @__PURE__ */ jsx54("thead", { children: /* @__PURE__ */ jsx54("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx54("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx53("tr", { children: /* @__PURE__ */ jsx53("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs30(Fragment14, { children: [
-    /* @__PURE__ */ jsxs30(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx53(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx53(Fragment14, { children: "\u2227" }) : /* @__PURE__ */ jsx53(Fragment14, { children: "\u2228" }) }),
+  const rows = !data?.length ? /* @__PURE__ */ jsx54("tr", { children: /* @__PURE__ */ jsx54("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment13, { children: [
+    /* @__PURE__ */ jsxs29(PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ jsx54(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx54(Fragment13, { children: "\u2227" }) : /* @__PURE__ */ jsx54(Fragment13, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
-        return /* @__PURE__ */ jsx53(PrimaryTdSpan, { children: /* @__PURE__ */ jsx53("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+        return /* @__PURE__ */ jsx54(PrimaryTdSpan, { children: /* @__PURE__ */ jsx54("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
-    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx53(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx53("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx54(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx54("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx53("div", { id, children: /* @__PURE__ */ jsxs30(TableStyle, { children: [
-    /* @__PURE__ */ jsx53("thead", { children: /* @__PURE__ */ jsxs30("tr", { children: [
-      /* @__PURE__ */ jsx53("th", { title: "dropdownth" }),
+  return /* @__PURE__ */ jsx54("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
+    /* @__PURE__ */ jsx54("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
+      /* @__PURE__ */ jsx54("th", { title: "dropdownth" }),
       headers
     ] }) }),
-    /* @__PURE__ */ jsx53("tbody", { children: rows })
+    /* @__PURE__ */ jsx54("tbody", { children: rows })
   ] }) });
 };
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect24, useRef as useRef23, useState as useState12 } from "react";
-import styled11 from "styled-components";
-import { Fragment as Fragment15, jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
-var AutoContainer = styled11.div`
+import { useEffect as useEffect28, useRef as useRef27, useState as useState12 } from "react";
+import styled10 from "styled-components";
+import { Fragment as Fragment14, jsx as jsx55, jsxs as jsxs30 } from "react/jsx-runtime";
+var AutoContainer = styled10.div`
   //position: relative;
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
 `;
-var InputWrapper = styled11.div`
+var InputWrapper = styled10.div`
   width: 100%;
   height: 100%;
 `;
-var Label = styled11.label`
+var Label = styled10.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -7694,7 +7694,7 @@ var Label = styled11.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var Input = styled11.input`
+var Input = styled10.input`
   width: 100%; //this must be 100%, as width inherit inherits the literal expression, not the value
   height: 100%;
   padding: 0.5rem 0.75rem;
@@ -7736,7 +7736,7 @@ var Input = styled11.input`
     color: ${(props) => props.$defaultLabelColor || "#ccc"};
   }
 `;
-var DropDownList = styled11.ul`
+var DropDownList = styled10.ul`
   position: absolute;
   z-index: 5;
   width: 100%;
@@ -7750,7 +7750,7 @@ var DropDownList = styled11.ul`
   overflow: scroll; //necessary for limiting scroll options
   max-height: 390px; //necessary for limiting scroll options, limit to 10 per view
 `;
-var ActiveListItem = styled11.li`
+var ActiveListItem = styled10.li`
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -7767,7 +7767,7 @@ var ActiveListItem = styled11.li`
     background-color: #d8d8d8;
   }
 `;
-var NoHoverListItem = styled11.li`
+var NoHoverListItem = styled10.li`
   position: relative;
   z-index: 9999;
   padding: 10px;
@@ -7800,9 +7800,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef23(null);
-  const listRef = useRef23(null);
-  const noItemListRef = useRef23(null);
+  const inputRef = useRef27(null);
+  const listRef = useRef27(null);
+  const noItemListRef = useRef27(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7810,7 +7810,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect24(() => {
+  useEffect28(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7822,7 +7822,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect24(() => {
+    useEffect28(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -7888,9 +7888,9 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx54(Fragment15, { children: /* @__PURE__ */ jsxs31(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
-    /* @__PURE__ */ jsxs31(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
-      /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(Fragment14, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+    /* @__PURE__ */ jsxs30(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
+      /* @__PURE__ */ jsx55(
         Input,
         {
           id: idName,
@@ -7919,11 +7919,11 @@ var WavelengthAutoComplete = ({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx54(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+      /* @__PURE__ */ jsx55(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
-    isDropdownVisible && /* @__PURE__ */ jsx54(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
+    isDropdownVisible && /* @__PURE__ */ jsx55(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__ */ jsx54(
+      suggestions.map((item, index) => /* @__PURE__ */ jsx55(
         ActiveListItem,
         {
           "data-testid": `${idName}-input-search-list-${index + 1}`,
@@ -7936,16 +7936,16 @@ var WavelengthAutoComplete = ({
         },
         `active-list-item-${item}-${index}`
       ))
-    ) : /* @__PURE__ */ jsx54(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+    ) : /* @__PURE__ */ jsx55(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 useEffect25, useState as useState13 } from "react";
-import styled12 from "styled-components";
-import { jsx as jsx55, jsxs as jsxs32 } from "react/jsx-runtime";
-var Label2 = styled12.label`
+import { useEffect as useEffect29, useState as useState13 } from "react";
+import styled11 from "styled-components";
+import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
+var Label2 = styled11.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -7957,7 +7957,7 @@ var Label2 = styled12.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var InputWrapper2 = styled12.div`
+var InputWrapper2 = styled11.div`
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
@@ -8016,7 +8016,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect25(() => {
+  useEffect29(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -8055,7 +8055,7 @@ var WavelengthDatePicker = ({
     setValue(dateString);
     if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     InputWrapper2,
     {
       id: `${idName}-inputWrapper`,
@@ -8067,7 +8067,7 @@ var WavelengthDatePicker = ({
       $FocusLabelColor: FocusLabelColor,
       $inputBackGroundColor: backgroundColor2,
       children: [
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(
           "input",
           {
             type: inputType,
@@ -8088,7 +8088,7 @@ var WavelengthDatePicker = ({
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ jsx55(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+        /* @__PURE__ */ jsx56(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );
@@ -8099,9 +8099,9 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef24, useEffect as useEffect26 } from "react";
+import { useRef as useRef28, useEffect as useEffect30 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
   size,
   color: color2,
@@ -8111,8 +8111,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef24(null);
-  useEffect26(() => {
+  const ref = useRef28(null);
+  useEffect30(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8136,38 +8136,38 @@ var WavelengthCheckbox = ({
       el.setAttribute("text-size", textSize);
     }
   }, [size, color2, theme, disabled, text, textSize]);
-  return /* @__PURE__ */ jsx56("wavelength-checkbox", { ref, ...rest });
+  return /* @__PURE__ */ jsx57("wavelength-checkbox", { ref, ...rest });
 };
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef25, useEffect as useEffect27 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { useRef as useRef29, useEffect as useEffect31 } from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
   children,
   // Style argument
-  customStyle: customStyle2,
+  customStyle,
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef25(null);
-  useEffect27(() => {
+  const ref = useRef29(null);
+  useEffect31(() => {
     const el = ref.current;
     if (!el) return;
-    el.customStyles = customStyle2;
+    el.customStyles = customStyle;
     if (testProp !== void 0) {
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx57("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx58("sample-component", { ref, ...rest, children });
 };
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef26, useEffect as useEffect28 } from "react";
+import { useRef as useRef30, useEffect as useEffect32 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
   notifications,
   darkMode,
@@ -8176,8 +8176,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef26(null);
-  useEffect28(() => {
+  const ref = useRef30(null);
+  useEffect32(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8196,18 +8196,18 @@ var WavelengthNotificationPanel = ({
       el.accountLink = accountLink;
     }
   }, [notifications, darkMode, rest.onMarkAsRead, rest.onSignOut, accountLink]);
-  return /* @__PURE__ */ jsx58("wavelength-notification-panel", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx59("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 useEffect29, useRef as useRef27 } from "react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { useEffect as useEffect33, useRef as useRef31 } from "react";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef27(null);
-  useEffect29(() => {
+  const componentRef = useRef31(null);
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8220,7 +8220,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect29(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8230,13 +8230,13 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect29(() => {
+  useEffect33(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx59("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+  return /* @__PURE__ */ jsx60("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
 };
 
 // src/index.ts
@@ -8273,6 +8273,7 @@ export {
   WavelengthDatePicker2 as WavelengthDatePickerElement,
   WavelengthDefaultIcon,
   WavelengthDefaultPagination,
+  WavelengthDialog,
   WavelengthDragAndDrop,
   WavelengthDropdown,
   WavelengthDropdownButton,