@wavelengthusaf/components 4.11.0 → 4.12.0

package/dist/cjs/index.cjs

@@ -5803,6 +5803,44 @@ var WavelengthMenu = ({
 };
 WavelengthMenu.displayName = "WavelengthMenu";
 
+// src/components/modals/WavelengthSwitch.tsx
+
+
+var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle: customStyle2, ...rest }) => {
+  const ref = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el) return;
+    const syncAttribute = (attr, val, isBool = false) => {
+      if (val === void 0 || val === null || isBool && !val) {
+        el.removeAttribute(attr);
+      } else {
+        el.setAttribute(attr, isBool ? "" : val.toString());
+      }
+    };
+    el.customStyles = customStyle2;
+    syncAttribute("checked", checked, true);
+    syncAttribute("disabled", disabled, true);
+    syncAttribute("label", label);
+    syncAttribute("label-placement", labelPlacement);
+    syncAttribute("size", size);
+    syncAttribute("color", color2);
+    syncAttribute("label-font", labelFont);
+    syncAttribute("value", value);
+  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle2]);
+  _react.useEffect.call(void 0, () => {
+    const el = ref.current;
+    if (!el || !onWavelengthSwitchChange) return;
+    const handleEvent = (e) => {
+      onWavelengthSwitchChange(e);
+    };
+    el.addEventListener("wavelength-switch-change", handleEvent);
+    return () => el.removeEventListener("wavelength-switch-change", handleEvent);
+  }, [onWavelengthSwitchChange]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "wavelength-switch", { ref, ...rest });
+};
+WavelengthSwitch.displayName = "WavelengthSwitch";
+
 // src/components/modals/WavelengthPagination.tsx
 
 
@@ -8195,7 +8233,8 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
 
 
 
-exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+
+exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.ChildDataTable = ChildDataTable2; exports.ChildDataTableElement = _webcomponents.ChildDataTable; exports.DefaultCarousel = DefaultCarousel; exports.NestedDataTable = NestedDataTable; exports.SampleComponent = SampleComponent; exports.SampleComponentElement = _webcomponents.SampleComponent; exports.SliderCardCarousel = SliderCardCarousel; exports.WavelengthAccessAlert = WavelengthAccessAlert; exports.WavelengthAlert = WavelengthAlert; exports.WavelengthAppLogo = WavelengthAppLogo; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutoComplete = WavelengthAutoComplete; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBannerElement = _webcomponents.WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthButtonElement = _webcomponents.WavelengthButton; exports.WavelengthCheckbox = WavelengthCheckbox; exports.WavelengthCommentDisplay = WavelengthCommentDisplay; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDataTable = WavelengthDataTable; exports.WavelengthDatePicker = WavelengthDatePicker; exports.WavelengthDatePickerElement = _webcomponents.WavelengthDatePicker; exports.WavelengthDefaultIcon = WavelengthDefaultIcon; exports.WavelengthDefaultPagination = WavelengthDefaultPagination; exports.WavelengthDragAndDrop = WavelengthDragAndDrop; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFileDropZone = WavelengthFileDropZone; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthForm = WavelengthForm; exports.WavelengthFormElement = _webcomponents.WavelengthForm; exports.WavelengthInput = WavelengthInput; exports.WavelengthInputElement = _webcomponents.WavelengthInput; exports.WavelengthManyPlanes = WavelengthManyPlanes; exports.WavelengthMenu = WavelengthMenu; exports.WavelengthMultiSelectAutocomplete = WavelengthMultiSelectAutocomplete; exports.WavelengthMultiSelectAutocompleteElement = _webcomponents.WavelengthMultiSelectAutocomplete; exports.WavelengthNavBar = WavelengthNavBar; exports.WavelengthNotAvailablePage = WavelengthNotAvailablePage; exports.WavelengthNotificationPanel = WavelengthNotificationPanel; exports.WavelengthPagination = WavelengthPagination; exports.WavelengthPaginationElement = _webcomponents.WavelengthPagination; exports.WavelengthPermissionAlert = WavelengthPermissionAlert; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthProgressBar = WavelengthProgressBar; exports.WavelengthProgressBarElement = _webcomponents.WavelengthProgressBar; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSearchTextField = WavelengthSearchTextField; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthSwitch = WavelengthSwitch; exports.WavelengthTestSnackbar = WavelengthTestSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.WavelengthTitleBarElement = _webcomponents.WavelengthTitleBar; exports.WavelengthToolTip = WavelengthToolTip; exports.WavelengthWebSnackbar = WavelengthWebSnackbar; exports.add = add; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js:

package/dist/cjs/index.d.cts

@@ -713,6 +713,20 @@ interface WavelengthMenuProps extends React__default.HTMLAttributes<HTMLElement>
 }
 declare const WavelengthMenu: React__default.FC<WavelengthMenuProps>;
 
+interface WavelengthSwitchProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle: StyleProp;
+    checked?: boolean;
+    label?: string;
+    labelPlacement?: "left" | "right" | "top" | "bottom";
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    color?: string;
+    labelFont?: string;
+    value?: string;
+    onWavelengthSwitchChange?: (event: CustomEvent) => void;
+}
+declare const WavelengthSwitch: React__default.FC<WavelengthSwitchProps>;
+
 interface WavelengthPaginationProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
     customStyle: StyleProp;
@@ -1066,4 +1080,4 @@ interface MultiSelectAutocompleteProps {
 }
 declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, type menuItemProps, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, type menuItemProps, useOutsideClick, useThemeContext };

package/dist/esm/index.d.ts

@@ -713,6 +713,20 @@ interface WavelengthMenuProps extends React__default.HTMLAttributes<HTMLElement>
 }
 declare const WavelengthMenu: React__default.FC<WavelengthMenuProps>;
 
+interface WavelengthSwitchProps extends React__default.HTMLAttributes<HTMLElement> {
+    customStyle: StyleProp;
+    checked?: boolean;
+    label?: string;
+    labelPlacement?: "left" | "right" | "top" | "bottom";
+    size?: "small" | "medium" | "large";
+    disabled?: boolean;
+    color?: string;
+    labelFont?: string;
+    value?: string;
+    onWavelengthSwitchChange?: (event: CustomEvent) => void;
+}
+declare const WavelengthSwitch: React__default.FC<WavelengthSwitchProps>;
+
 interface WavelengthPaginationProps extends React__default.HTMLAttributes<HTMLElement> {
     testProp?: string;
     customStyle: StyleProp;
@@ -1066,4 +1080,4 @@ interface MultiSelectAutocompleteProps {
 }
 declare const WavelengthMultiSelectAutocomplete: React__default.FC<MultiSelectAutocompleteProps>;
 
-export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, type menuItemProps, useOutsideClick, useThemeContext };
+export { ButtonIcon, ButtonMenu, ChildDataTable, DefaultCarousel, type IFileSelectedEventDetail, type NavItem, NestedDataTable, SampleComponent, SliderCardCarousel, type StyledButtonPropsTwo, type ThemeProperties, WavelengthAccessAlert, WavelengthAlert, WavelengthAppLogo, WavelengthAppTheme, WavelengthAutoComplete, WavelengthAutocomplete, WavelengthBanner, WavelengthBox, WavelengthButton, WavelengthCheckbox, WavelengthCommentDisplay, WavelengthConfirmationModal, WavelengthContentModal, WavelengthContentPlaceholder, WavelengthDataTable, WavelengthDatePicker, WavelengthDefaultIcon, WavelengthDefaultPagination, WavelengthDragAndDrop, WavelengthDropdown, WavelengthDropdownButton, WavelengthExampleComponent, WavelengthFileDownloader, WavelengthFileDropZone, type WavelengthFileDropZoneProps, WavelengthFooter, WavelengthForm, WavelengthInput, WavelengthManyPlanes, WavelengthMenu, WavelengthMultiSelectAutocomplete, WavelengthNavBar, type WavelengthNavBarProps, WavelengthNotAvailablePage, WavelengthNotificationPanel, WavelengthPagination, WavelengthPermissionAlert, WavelengthPlaneTrail, WavelengthPopUpMenu, WavelengthProgressBar, WavelengthSearch, WavelengthSearchTextField, WavelengthSideBar, WavelengthSlider, WavelengthSnackbar, WavelengthSpinningLogo, WavelengthSpinningOuterCircle, WavelengthStandardSnackbar, WavelengthStyledButton, WavelengthSwitch, WavelengthTestSnackbar, WavelengthTitleBar, WavelengthToolTip, WavelengthWebSnackbar, type WavelengthWebSnackbarProps, add, concat, findBestStringMatch, type menuItemProps, useOutsideClick, useThemeContext };

package/dist/esm/index.js

@@ -5803,9 +5803,47 @@ var WavelengthMenu = ({
 };
 WavelengthMenu.displayName = "WavelengthMenu";
 
-// src/components/modals/WavelengthPagination.tsx
+// src/components/modals/WavelengthSwitch.tsx
 import { useRef as useRef15, useEffect as useEffect15 } from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
+var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color: color2, labelFont, checked, value, onWavelengthSwitchChange, customStyle: customStyle2, ...rest }) => {
+  const ref = useRef15(null);
+  useEffect15(() => {
+    const el = ref.current;
+    if (!el) return;
+    const syncAttribute = (attr, val, isBool = false) => {
+      if (val === void 0 || val === null || isBool && !val) {
+        el.removeAttribute(attr);
+      } else {
+        el.setAttribute(attr, isBool ? "" : val.toString());
+      }
+    };
+    el.customStyles = customStyle2;
+    syncAttribute("checked", checked, true);
+    syncAttribute("disabled", disabled, true);
+    syncAttribute("label", label);
+    syncAttribute("label-placement", labelPlacement);
+    syncAttribute("size", size);
+    syncAttribute("color", color2);
+    syncAttribute("label-font", labelFont);
+    syncAttribute("value", value);
+  }, [checked, label, labelPlacement, size, disabled, color2, labelFont, value, customStyle2]);
+  useEffect15(() => {
+    const el = ref.current;
+    if (!el || !onWavelengthSwitchChange) return;
+    const handleEvent = (e) => {
+      onWavelengthSwitchChange(e);
+    };
+    el.addEventListener("wavelength-switch-change", handleEvent);
+    return () => el.removeEventListener("wavelength-switch-change", handleEvent);
+  }, [onWavelengthSwitchChange]);
+  return /* @__PURE__ */ jsx37("wavelength-switch", { ref, ...rest });
+};
+WavelengthSwitch.displayName = "WavelengthSwitch";
+
+// src/components/modals/WavelengthPagination.tsx
+import { useRef as useRef16, useEffect as useEffect16 } from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var WavelengthPagination = ({
   testProp,
   children,
@@ -5828,13 +5866,13 @@ var WavelengthPagination = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef15(null);
+  const ref = useRef16(null);
   const syncAttribute = (attribute, value) => {
     const el = ref.current;
     if (!el) return;
     el.setAttribute(attribute, value);
   };
-  useEffect15(() => {
+  useEffect16(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -5861,7 +5899,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__ */ jsx37("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
+  return /* @__PURE__ */ jsx38("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
 };
 WavelengthPagination.displayName = "WavelengthPagination";
 
@@ -5877,7 +5915,7 @@ 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 jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
 var MyDroplistItems = styled6("li")`
   background-color: white;
   color: #000000;
@@ -5922,15 +5960,15 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
     "&.active": { background: "#8FD8FF" }
   };
   return /* @__PURE__ */ jsxs20("div", { style: dropstyles.butPagCompDivStyle, id, children: [
-    /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx38(ArrowBackIosNewIcon, {}) }),
-    /* @__PURE__ */ jsx38("section", { style: dropstyles.rangenumbers, children: itemList.map(
+    /* @__PURE__ */ jsx39(Button4, { onClick: () => handleChangePage(current - 1), disabled: current === 1, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx39(ArrowBackIosNewIcon, {}) }),
+    /* @__PURE__ */ jsx39("section", { style: dropstyles.rangenumbers, children: itemList.map(
       (item, index) => item === "..." && index === 1 ? (
         //first half ellipse with first half dropdown
         // dropdown
         // eslint-disable-next-line react/jsx-key
         /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx38(Button4, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isOpen && /* @__PURE__ */ jsx38("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx38("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(Button4, { onClick: () => toggleDropdown(1), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx39(
             MyDroplistItems,
             {
               onClick: () => {
@@ -5944,8 +5982,8 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
         /* @__PURE__ */ jsxs20("div", { children: [
-          /* @__PURE__ */ jsx38(Button4, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx38("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx38("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(Button4, { onClick: () => toggleDropdown(5), className: current === index ? "active" : "", sx: WLButtonPagStyle, children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx39(
             MyDroplistItems,
             {
               onClick: () => {
@@ -5956,9 +5994,9 @@ function WavelengthButtonPagination({ totalPages, current, handleChangePage, ite
             item2
           )) }) })
         ] })
-      ) : /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
+      ) : /* @__PURE__ */ jsx39(Button4, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", sx: WLButtonPagStyle, children: item }, index)
     ) }),
-    /* @__PURE__ */ jsx38(Button4, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx38(ArrowForwardIosIcon, {}) })
+    /* @__PURE__ */ jsx39(Button4, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, sx: WLButtonPagStyle, children: /* @__PURE__ */ jsx39(ArrowForwardIosIcon, {}) })
   ] });
 }
 WavelengthButtonPagination.displayName = "WavelengthButtonPagination";
@@ -5970,7 +6008,7 @@ 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 jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx40, 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);
@@ -6013,14 +6051,14 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
     }
   };
   return /* @__PURE__ */ jsxs21("div", { style: dropstyles.pagination, id, children: [
-    /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx39(ArrowBackIosNewIcon2, {}) }),
-    /* @__PURE__ */ jsx39("section", { style: dropstyles.rangenumbers, children: itemList.map(
+    /* @__PURE__ */ jsx40(Button5, { onClick: () => handleChangePage(current - 1), variant, disabled: current === 1, children: /* @__PURE__ */ jsx40(ArrowBackIosNewIcon2, {}) }),
+    /* @__PURE__ */ jsx40("section", { style: dropstyles.rangenumbers, children: itemList.map(
       (item, index) => item === "..." && index === 1 ? (
         //first half ellipse with first half dropdown
         // eslint-disable-next-line react/jsx-key
         /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx39(Button5, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
-          isOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(Button5, { onClick: () => toggleDropdown(1), variant, className: current === index ? "active" : "", children: item }, index),
+          isOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: firstEllipseList.map((item2) => /* @__PURE__ */ jsx40(
             MyDroplistItems2,
             {
               style: dropstyles.mydroplist,
@@ -6035,8 +6073,8 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
       ) : item === "..." && index === 5 ? (
         //second half ellipse with second half dropdown
         /* @__PURE__ */ jsxs21("div", { children: [
-          /* @__PURE__ */ jsx39(Button5, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
-          isSecOpen && /* @__PURE__ */ jsx39("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx39("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(Button5, { onClick: () => toggleDropdown(5), variant, className: current === index ? "active" : "", children: item }, index),
+          isSecOpen && /* @__PURE__ */ jsx40("div", { style: dropstyles.dropcenter, children: /* @__PURE__ */ jsx40("ul", { style: dropstyles.mydrop, children: secondEllipseList.map((item2) => /* @__PURE__ */ jsx40(
             MyDroplistItems2,
             {
               style: dropstyles.mydroplist,
@@ -6048,16 +6086,16 @@ function WavelengthVariationPagination({ totalPages, current, variant, handleCha
             item2
           )) }) })
         ] })
-      ) : /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
+      ) : /* @__PURE__ */ jsx40(Button5, { onClick: () => handleChangePage(item), className: current === item ? "active" : "", variant, children: item }, index)
     ) }),
-    /* @__PURE__ */ jsx39(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx39(ArrowForwardIosIcon2, {}) })
+    /* @__PURE__ */ jsx40(Button5, { onClick: () => handleChangePage(current + 1), disabled: current === totalPages, variant, children: /* @__PURE__ */ jsx40(ArrowForwardIosIcon2, {}) })
   ] });
 }
 WavelengthVariationPagination.displayName = "WavelengthVariationPagination";
 var WavelengthVariationPagination_default = WavelengthVariationPagination;
 
 // src/components/pagination/WavelengthDefaultPagination.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var range = (start, end) => {
   const length = end - start + 1;
   return Array.from({ length }, (_, i) => start + i);
@@ -6095,7 +6133,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
     }
   };
   if (style3 === "circular") {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       WavelengthButtonPagination_default,
       {
         id,
@@ -6108,7 +6146,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "text") {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6122,7 +6160,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "outlined") {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6136,7 +6174,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else if (style3 === "contained") {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6150,7 +6188,7 @@ function WavelengthDefaultPagination({ totalPages, currentPageNumber, siblingCou
       }
     );
   } else {
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       WavelengthVariationPagination_default,
       {
         id,
@@ -6172,15 +6210,15 @@ 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 jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx42, 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__ */ jsx41(IconButton5, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx41(CloseIcon2, { fontSize: "small" }) });
+  const defaultIcon = /* @__PURE__ */ jsx42(IconButton5, { size: "small", "aria-label": "close", color: "inherit", children: /* @__PURE__ */ jsx42(CloseIcon2, { fontSize: "small" }) });
   const palette2 = getPalette();
   const durationMs = durationSb ? durationSb * 1e3 : 4e3;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Snackbar,
     {
       id,
@@ -6191,7 +6229,7 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
         vertical: vertyAlign ? vertyAlign : "bottom",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         SnackbarContent,
         {
           style: {
@@ -6201,10 +6239,10 @@ function WavelengthSnackbar({ show, setShow, closeIcon, message, snackBarColor,
             width: width2
           },
           message: /* @__PURE__ */ jsxs22("div", { children: [
-            /* @__PURE__ */ jsx41("span", { children: icon }),
-            /* @__PURE__ */ jsx41("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
+            /* @__PURE__ */ jsx42("span", { children: icon }),
+            /* @__PURE__ */ jsx42("span", { id: "snackbar", children: message ? message : "Insert Message Here" })
           ] }),
-          action: /* @__PURE__ */ jsx41("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
+          action: /* @__PURE__ */ jsx42("div", { style: { display: "flex", justifyContent: "center" }, onClick: handleClose, children: closeIcon ? closeIcon : defaultIcon })
         }
       )
     }
@@ -6215,7 +6253,7 @@ WavelengthSnackbar.displayName = "WavelengthSnackbar";
 // src/components/snackbars/WavelengthStandardSnackbar.tsx
 import Snackbar2 from "@mui/material/Snackbar";
 import SnackbarContent2 from "@mui/material/SnackbarContent";
-import { jsx as jsx42, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx43, 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);
@@ -6230,7 +6268,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
     bgColor = "#737373";
   }
   const sIcon = icon ? icon : "";
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Snackbar2,
     {
       id,
@@ -6242,7 +6280,7 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
         vertical: vertyAlign ? vertyAlign : "top",
         horizontal: horryAlign ? horryAlign : "center"
       },
-      children: /* @__PURE__ */ jsx42(
+      children: /* @__PURE__ */ jsx43(
         SnackbarContent2,
         {
           style: {
@@ -6261,10 +6299,10 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
               },
               children: [
                 /* @__PURE__ */ jsxs23("div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ jsx42("div", { style: { marginTop: "5px" }, children: sIcon }),
-                  /* @__PURE__ */ jsx42("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
+                  /* @__PURE__ */ jsx43("div", { style: { marginTop: "5px" }, children: sIcon }),
+                  /* @__PURE__ */ jsx43("div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
-                /* @__PURE__ */ jsx42("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
+                /* @__PURE__ */ jsx43("div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
               ]
             }
           )
@@ -6278,11 +6316,11 @@ WavelengthStandardSnackbar.displayName = "WavelengthStandardSnackbar";
 // src/components/snackbars/WavelengthTestSnackbar.tsx
 import Box5 from "@mui/material/Box";
 import Button6 from "@mui/material/Button";
-import { useEffect as useEffect16, useRef as useRef16 } from "react";
-import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useEffect as useEffect17, useRef as useRef17 } from "react";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
 var useOutsideClick = (callback) => {
-  const ref = useRef16(null);
-  useEffect16(() => {
+  const ref = useRef17(null);
+  useEffect17(() => {
     const handleClickOutside = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         callback();
@@ -6309,7 +6347,7 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
   } else if (type === "disabled") {
     bgColor = "#737373";
   }
-  return /* @__PURE__ */ jsx43(Fragment11, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsx44(Fragment11, { children: isPopUpOpen && /* @__PURE__ */ jsxs24(
     Box5,
     {
       id,
@@ -6329,9 +6367,9 @@ function WavelengthTestSnackbar({ isPopUpOpen, toggleOpen, type, message, custom
         marginTop: customVertyAlign ? `${customVertyAlign}` : ""
       },
       children: [
-        /* @__PURE__ */ jsx43("div", { style: { backgroundColor: "red" } }),
-        /* @__PURE__ */ jsx43("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44("div", { style: { backgroundColor: "red" } }),
+        /* @__PURE__ */ jsx44("div", { style: { color: "white", fontSize: "1rem" }, children: message }),
+        /* @__PURE__ */ jsx44(
           Button6,
           {
             variant: "text",
@@ -6350,10 +6388,10 @@ WavelengthTestSnackbar.displayName = "WavelengthTestSnackbar";
 // src/components/sliders/WavelengthSlider.tsx
 import Box6 from "@mui/material/Box";
 import Slider from "@mui/material/Slider";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } 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__ */ jsx44(Box6, { sx: { width: width2 }, children: /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(Box6, { sx: { width: width2 }, children: /* @__PURE__ */ jsx45(
     Slider,
     {
       id,
@@ -6388,7 +6426,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 jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx46, 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;
@@ -6405,7 +6443,7 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
   const handleClick = () => {
     window.open(items[currentIndex].path, "_blank");
   };
-  return /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsxs25(
     Grid3,
     {
       container: true,
@@ -6414,8 +6452,8 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
         alignItems: "center"
       },
       children: [
-        /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(IconButton6, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx45(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(IconButton6, { onClick: handlePrev, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx46(NavigateBeforeIcon, { style: { fontSize: adjustButtonSize } }) }) }),
+        /* @__PURE__ */ jsx46(
           Card,
           {
             sx: {
@@ -6423,15 +6461,15 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
               maxHeight: adjustCardHeight
             },
             children: /* @__PURE__ */ jsxs25(CardActionArea, { onClick: handleClick, children: [
-              /* @__PURE__ */ jsx45(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
+              /* @__PURE__ */ jsx46(CardMedia, { sx: { height: adjustImageHeight, width: adjustImageWidth }, image: items[currentIndex].image }),
               /* @__PURE__ */ jsxs25(CardContent, { children: [
-                /* @__PURE__ */ jsx45(Typography4, { variant: "h4", children: items[currentIndex].title }),
-                /* @__PURE__ */ jsx45(Typography4, { variant: "body1", children: items[currentIndex].description })
+                /* @__PURE__ */ jsx46(Typography4, { variant: "h4", children: items[currentIndex].title }),
+                /* @__PURE__ */ jsx46(Typography4, { variant: "body1", children: items[currentIndex].description })
               ] })
             ] })
           }
         ),
-        /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(IconButton6, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx45(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
+        /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(IconButton6, { onClick: handleNext, sx: { margin: 1, color: "white" }, children: /* @__PURE__ */ jsx46(NavigateNextIcon, { style: { fontSize: adjustButtonSize } }) }) })
       ]
     }
   ) }) });
@@ -6439,18 +6477,18 @@ var DefaultCarousel = ({ items, buttonSize, imageHeight, imageWidth, cardHeight,
 DefaultCarousel.displayName = "DefaultCarousel";
 
 // src/components/carousels/WavelengthSliderCarousel.tsx
-import { useState as useState8, useEffect as useEffect18 } from "react";
+import { useState as useState8, useEffect as useEffect19 } from "react";
 import Grid4 from "@mui/material/Grid";
 import Card2 from "@mui/material/Card";
 import CardContent2 from "@mui/material/CardContent";
 import CardMedia2 from "@mui/material/CardMedia";
 import CardActionArea2 from "@mui/material/CardActionArea";
-import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx47, 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);
-  useEffect18(() => {
+  useEffect19(() => {
     setTimeout(() => setIndex((prevIndex) => prevIndex === items.length - 1 ? 0 : prevIndex + 1), delay);
     return () => {
     };
@@ -6488,7 +6526,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__ */ jsx46("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx46("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47("div", { style: styles.carouselcontainer, children: /* @__PURE__ */ jsx47("div", { className: "my-animation", style: styles.carouselTrackStyle, children: /* @__PURE__ */ jsx47(
     Grid4,
     {
       sx: {
@@ -6498,7 +6536,7 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
       },
       container: true,
       spacing: 0.5,
-      children: items.map((card) => /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
+      children: items.map((card) => /* @__PURE__ */ jsx47("div", { children: /* @__PURE__ */ jsx47(
         Card2,
         {
           sx: {
@@ -6509,10 +6547,10 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
           onMouseEnter: () => setIsHovered(true),
           onMouseLeave: () => setIsHovered(false),
           children: /* @__PURE__ */ jsxs26(CardActionArea2, { href: card.path, children: [
-            /* @__PURE__ */ jsx46(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
+            /* @__PURE__ */ jsx47(CardMedia2, { sx: { height: adjustCardHeight, width: adjustCardWith }, image: card.image }),
             /* @__PURE__ */ jsxs26(CardContent2, { children: [
-              /* @__PURE__ */ jsx46("h3", { children: card.title }),
-              /* @__PURE__ */ jsx46("p", { children: card.description })
+              /* @__PURE__ */ jsx47("h3", { children: card.title }),
+              /* @__PURE__ */ jsx47("p", { children: card.description })
             ] })
           ] })
         }
@@ -6523,9 +6561,9 @@ var SliderCardCarousel = ({ items, cardHeight, cardWidth, contHeight, contWidth
 SliderCardCarousel.displayName = "SliderCardCarousel";
 
 // src/components/TextField/WavelengthInput.tsx
-import { useRef as useRef17, useEffect as useEffect19, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
+import { useRef as useRef18, useEffect as useEffect20, forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle3 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef2(
   ({
     id,
@@ -6562,12 +6600,12 @@ var WavelengthInput = forwardRef2(
     onBlurCallback,
     ...rest
   }, ref) => {
-    const internalRef = useRef17(null);
+    const internalRef = useRef18(null);
     useImperativeHandle3(ref, () => ({
       ...internalRef.current,
       validate: () => internalRef.current?.validate?.(true)
     }));
-    useEffect19(() => {
+    useEffect20(() => {
       const el = internalRef.current;
       if (!el) return;
       const set = (attr, val) => {
@@ -6638,7 +6676,7 @@ var WavelengthInput = forwardRef2(
       label,
       disabled
     ]);
-    useEffect19(() => {
+    useEffect20(() => {
       const el = internalRef.current;
       if (!el || !onBlurCallback) return;
       const handler = (e) => {
@@ -6650,7 +6688,7 @@ var WavelengthInput = forwardRef2(
       el.addEventListener("blur", handler);
       return () => el.removeEventListener("blur", handler);
     }, [onBlurCallback]);
-    useEffect19(() => {
+    useEffect20(() => {
       const el = internalRef.current;
       if (!el || !onChange) return;
       const handler = (e) => {
@@ -6671,7 +6709,7 @@ var WavelengthInput = forwardRef2(
       ...style3,
       ...backgroundColor2 ? { ["--wavelength-label-background"]: backgroundColor2 } : {}
     };
-    return /* @__PURE__ */ jsx47("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
+    return /* @__PURE__ */ jsx48("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
   }
 );
 WavelengthInput.displayName = "WavelengthInput";
@@ -6680,9 +6718,9 @@ WavelengthInput.displayName = "WavelengthInput";
 import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-components";
 
 // src/components/DataTable/WavelengthDataTable.tsx
-import { useEffect as useEffect20, useRef as useRef18, useState as useState9 } from "react";
+import { useEffect as useEffect21, useRef as useRef19, useState as useState9 } from "react";
 import styled8 from "styled-components";
-import { jsx as jsx48, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs27 } from "react/jsx-runtime";
 var ModalInputDiv = styled8.div`
   display: flex;
   flex-direction: column; /* Corrected this line */
@@ -6861,8 +6899,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 = useRef18(null);
-  const modalRef = useRef18(null);
+  const menuRef = useRef19(null);
+  const modalRef = useRef19(null);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -6870,7 +6908,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setSelectedValue(event.target.value);
     setLocalData(copiedArray);
   };
-  useEffect20(() => {
+  useEffect21(() => {
     if (!selectedValue || searchItem === "") {
       setLocalData(copiedArray);
       setNoRowsOpen(false);
@@ -6900,7 +6938,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const closeModal = () => {
     setIsModalOpen(false);
   };
-  useEffect20(() => {
+  useEffect21(() => {
     const handleClickOutside = (event) => {
       if (isModalOpen && modalRef.current && !modalRef.current.contains(event.target)) {
         closeModal();
@@ -6960,7 +6998,7 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     return /* @__PURE__ */ jsxs27(TableHeadStyle, { children: [
       column.title,
       /* @__PURE__ */ jsxs27(KebabMenu, { ref: menuRef, children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           KebabIcon,
           {
             title: `KebabIcon-${index}`,
@@ -6972,25 +7010,25 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         ),
         isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs27(MenuOptions, { children: [
           sortOrder === "asc" ? /* @__PURE__ */ jsxs27("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
-            /* @__PURE__ */ jsx48("span", { children: "\u2B06" }),
+            /* @__PURE__ */ jsx49("span", { children: "\u2B06" }),
             " Sort ASC"
           ] }) : /* @__PURE__ */ jsxs27("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
-            /* @__PURE__ */ jsx48("span", { children: "\u2B07" }),
+            /* @__PURE__ */ jsx49("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
           /* @__PURE__ */ jsxs27("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
-            /* @__PURE__ */ jsx48("span", { children: "\u23F7" }),
+            /* @__PURE__ */ jsx49("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx48(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
-            /* @__PURE__ */ jsx48(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+          isModalOpen && /* @__PURE__ */ jsx49(ModalOverlay, { children: /* @__PURE__ */ jsxs27(ModalWrapper, { ref: modalRef, children: [
+            /* @__PURE__ */ jsx49(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
             /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx48("label", { htmlFor: "filterSelectId", children: "Columns: " }),
-              /* @__PURE__ */ jsx48("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx48("option", { children: item.key }, item.key)) })
+              /* @__PURE__ */ jsx49("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+              /* @__PURE__ */ jsx49("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx49("option", { children: item.key }, item.key)) })
             ] }),
             /* @__PURE__ */ jsxs27(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx48("label", { htmlFor: "filterInputId", children: "Values: " }),
-              /* @__PURE__ */ jsx48(
+              /* @__PURE__ */ jsx49("label", { htmlFor: "filterInputId", children: "Values: " }),
+              /* @__PURE__ */ jsx49(
                 "input",
                 {
                   title: `Inputfiltertest-${index}`,
@@ -7011,8 +7049,8 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx48("tr", { children: /* @__PURE__ */ jsx48("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx48("tr", { children: columns.map((column, index2) => {
-    return /* @__PURE__ */ jsx48(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx48(
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx49("tr", { children: /* @__PURE__ */ jsx49("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx49("tr", { children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx49(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx49(
       StyledInput,
       {
         title: `styledRow-${item.id}-${column.key}-${index2}`,
@@ -7029,14 +7067,14 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         autoFocus: true
       }
-    ) : /* @__PURE__ */ jsx48("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+    ) : /* @__PURE__ */ jsx49("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
   }) }, item.id));
   return /* @__PURE__ */ jsxs27("div", { id, children: [
-    /* @__PURE__ */ jsx48(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
-      /* @__PURE__ */ jsx48("thead", { children: /* @__PURE__ */ jsx48("tr", { children: headers }) }),
-      /* @__PURE__ */ jsx48("tbody", { children: rows })
+    /* @__PURE__ */ jsx49(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs27(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx49("thead", { children: /* @__PURE__ */ jsx49("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx49("tbody", { children: rows })
     ] }) }),
-    /* @__PURE__ */ jsx48(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx48(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
+    /* @__PURE__ */ jsx49(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx49(WavelengthDefaultPagination_default, { totalPages, currentPageNumber: currentPage, onPageChange: setCurrentPage, style: "circular" }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";
@@ -7044,7 +7082,7 @@ 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 jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var TableContainer = styled9.div`
   width: 1200px;
   border-radius: 16px;
@@ -7281,18 +7319,18 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return result;
   }, [data, sortKey, sortOrder, sortSubKey, sortSubOrder]);
   const renderSortButton = (column, sortOrder2, sortKey2) => {
-    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx49(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx50(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx49(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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__ */ jsx50(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
-    ] }) }) : /* @__PURE__ */ jsx49(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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__ */ jsx50(Fragment13, { children: /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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) => {
@@ -7300,26 +7338,26 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
     return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs28(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 9.2627L7.5 3.5377L1.7625 9.2627L0 7.5002L7.5 0.000196457L15 7.5002L13.2375 9.2627Z", fill: "white" }) })
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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__ */ jsx49("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M13.2375 0.368774L7.5 6.09377L1.7625 0.368774L0 2.13127L7.5 9.63127L15 2.13127L13.2375 0.368774Z", fill: "white" }) })
+      /* @__PURE__ */ jsx50("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("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__ */ jsx49(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+    return /* @__PURE__ */ jsx50(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx49("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx50("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx49(Fragment12, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
-      /* @__PURE__ */ jsx49("td", { children: /* @__PURE__ */ jsx49(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx49("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49(
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx50(Fragment12, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs28(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx50("td", { children: /* @__PURE__ */ jsx50(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx50("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50(
         "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",
@@ -7330,45 +7368,45 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ jsx49(SubDataTableCell, { children: /* @__PURE__ */ jsx49("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ jsx50(SubDataTableCell, { children: /* @__PURE__ */ jsx50("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
         }
       })
     ] }, `${item}-${item.Details?.relationId}-${fileItem.id}-${index}`)) }, `SDR-${item.id}-${item.Details?.relationId}`));
   };
   const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs28(BodyRowContainer, { children: [
-    /* @__PURE__ */ jsx49(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx49(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsx50(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx50(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
     /* @__PURE__ */ jsxs28(ButtonStylingRow, { children: [
-      /* @__PURE__ */ jsx49(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
-      /* @__PURE__ */ jsx49(AddButton, { onClick: addFilesOnClick, children: "Add files" })
+      /* @__PURE__ */ jsx50(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
+      /* @__PURE__ */ jsx50(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
-    openRow !== item.id && /* @__PURE__ */ jsx49(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx49("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow !== item.id && /* @__PURE__ */ jsx50(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx50("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
     openRow === item.id && /* @__PURE__ */ jsxs28("div", { children: [
       /* @__PURE__ */ jsxs28(SubDataTable, { children: [
-        /* @__PURE__ */ jsx49(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
-          /* @__PURE__ */ jsx49("th", {}),
+        /* @__PURE__ */ jsx50(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs28(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx50("th", {}),
           SubDataHeaders
         ] }) }),
-        /* @__PURE__ */ jsx49(SubDataTableBodyRow, { children: subDataRows(item.id) })
+        /* @__PURE__ */ jsx50(SubDataTableBodyRow, { children: subDataRows(item.id) })
       ] }),
-      /* @__PURE__ */ jsx49(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx49("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx49("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+      /* @__PURE__ */ jsx50(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx50("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx50("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
   return /* @__PURE__ */ jsxs28(TableContainer, { children: [
-    /* @__PURE__ */ jsx49(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
-    /* @__PURE__ */ jsx49("div", { title: "tablebodies", children: dataRows })
+    /* @__PURE__ */ jsx50(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx50("div", { title: "tablebodies", children: dataRows })
   ] });
 };
 ChildDataTable.displayName = "ChildDataTable";
 
 // src/components/DataTable/SubRowTable/ChildDataTable.tsx
-import { useRef as useRef19, useEffect as useEffect21 } from "react";
+import { useRef as useRef20, useEffect as useEffect22 } from "react";
 import "@wavelengthusaf/web-components";
 import { createRoot } from "react-dom/client";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, ...rest }) => {
-  const tableRef = useRef19(null);
-  const reactDropdownRoots = useRef19(/* @__PURE__ */ new Map());
-  useEffect21(() => {
+  const tableRef = useRef20(null);
+  const reactDropdownRoots = useRef20(/* @__PURE__ */ new Map());
+  useEffect22(() => {
     const customChildDataTableElement = tableRef.current;
     if (!customChildDataTableElement) return;
     if (columns !== void 0) customChildDataTableElement.setColumns = columns;
@@ -7377,7 +7415,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]);
-  useEffect21(() => {
+  useEffect22(() => {
     const el = tableRef.current;
     if (!el) return;
     const handleReactDropdown = (event) => {
@@ -7414,7 +7452,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
       el.removeEventListener("cleanupDropdown", handleCleanupDropdown);
     };
   }, [data]);
-  return /* @__PURE__ */ jsx50("wavelength-child-data-table", { ref: tableRef, ...rest });
+  return /* @__PURE__ */ jsx51("wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";
 
@@ -7424,7 +7462,7 @@ 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 jsx51, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx52, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableStyle = styled10.table`
   width: 100%;
   height: 100%;
@@ -7511,46 +7549,46 @@ var NestedDataTable = ({ data, columns, id }) => {
     setPrimaryRowIndex(rowIndex);
   };
   const headers = HeadColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx51(MainThHeaders, { children: column.title }, `headCell-${index}`);
+    return /* @__PURE__ */ jsx52(MainThHeaders, { children: column.title }, `headCell-${index}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx51("th", { children: column.title }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx52("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx51(Fragment14, { children: /* @__PURE__ */ jsx51(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx52(Fragment14, { children: /* @__PURE__ */ jsx52(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__ */ jsx51("td", { children: /* @__PURE__ */ jsx51("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+      return /* @__PURE__ */ jsx52("td", { children: /* @__PURE__ */ jsx52("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
   const childRows = /* @__PURE__ */ jsxs29(SubTableStyle, { children: [
-    /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsx51("tr", { children: SubDataHeaders }) }),
-    /* @__PURE__ */ jsx51("tbody", { children: subDataRows })
+    /* @__PURE__ */ jsx52("thead", { children: /* @__PURE__ */ jsx52("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx52("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment14, { children: [
+  const rows = !data?.length ? /* @__PURE__ */ jsx52("tr", { children: /* @__PURE__ */ jsx52("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs29(Fragment14, { children: [
     /* @__PURE__ */ jsxs29(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx51(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx51(Fragment14, { children: "\u2227" }) : /* @__PURE__ */ jsx51(Fragment14, { children: "\u2228" }) }),
+      /* @__PURE__ */ jsx52(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx52(Fragment14, { children: "\u2227" }) : /* @__PURE__ */ jsx52(Fragment14, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
-        return /* @__PURE__ */ jsx51(PrimaryTdSpan, { children: /* @__PURE__ */ jsx51("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+        return /* @__PURE__ */ jsx52(PrimaryTdSpan, { children: /* @__PURE__ */ jsx52("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
-    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx51(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx51("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx52(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx52("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx51("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
-    /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
-      /* @__PURE__ */ jsx51("th", { title: "dropdownth" }),
+  return /* @__PURE__ */ jsx52("div", { id, children: /* @__PURE__ */ jsxs29(TableStyle, { children: [
+    /* @__PURE__ */ jsx52("thead", { children: /* @__PURE__ */ jsxs29("tr", { children: [
+      /* @__PURE__ */ jsx52("th", { title: "dropdownth" }),
       headers
     ] }) }),
-    /* @__PURE__ */ jsx51("tbody", { children: rows })
+    /* @__PURE__ */ jsx52("tbody", { children: rows })
   ] }) });
 };
 NestedDataTable.displayName = "NestedDataTable";
 
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
-import { useEffect as useEffect22, useRef as useRef21, useState as useState12 } from "react";
+import { useEffect as useEffect23, useRef as useRef22, useState as useState12 } from "react";
 import styled11 from "styled-components";
-import { Fragment as Fragment15, jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx53, jsxs as jsxs30 } from "react/jsx-runtime";
 var AutoContainer = styled11.div`
   //position: relative;
   position: relative;
@@ -7679,9 +7717,9 @@ var WavelengthAutoComplete = ({
   placeholder,
   onBlurCallback
 }) => {
-  const inputRef = useRef21(null);
-  const listRef = useRef21(null);
-  const noItemListRef = useRef21(null);
+  const inputRef = useRef22(null);
+  const listRef = useRef22(null);
+  const noItemListRef = useRef22(null);
   const [inputValue, setInputValue] = useState12(placeholder ?? "");
   const [suggestions, setSuggestions] = useState12([]);
   const [isDropdownVisible, setIsDropdownVisible] = useState12(false);
@@ -7689,7 +7727,7 @@ var WavelengthAutoComplete = ({
   const arrayLength = suggestions.length;
   const [focusedIndex, setFocusedIndex] = useState12(0);
   const idName = id ? id : "auto-comp";
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClickOutsideList = (event) => {
       if (listRef.current && !listRef.current.contains(event.target)) {
         setIsDropdownVisible(false);
@@ -7701,7 +7739,7 @@ var WavelengthAutoComplete = ({
     };
   }, [focusedIndex]);
   if (onDataChange !== void 0) {
-    useEffect22(() => {
+    useEffect23(() => {
       onDataChange(inputValue);
     }, [inputValue]);
   }
@@ -7767,9 +7805,9 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx52(Fragment15, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
+  return /* @__PURE__ */ jsx53(Fragment15, { children: /* @__PURE__ */ jsxs30(AutoContainer, { $inputHeight: height2, $inputWidth: width2, children: [
     /* @__PURE__ */ jsxs30(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height2, $inputWidth: width2, children: [
-      /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsx53(
         Input,
         {
           id: idName,
@@ -7798,11 +7836,11 @@ var WavelengthAutoComplete = ({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx52(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+      /* @__PURE__ */ jsx53(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
-    isDropdownVisible && /* @__PURE__ */ jsx52(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width2, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
+    isDropdownVisible && /* @__PURE__ */ jsx53(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__ */ jsx52(
+      suggestions.map((item, index) => /* @__PURE__ */ jsx53(
         ActiveListItem,
         {
           "data-testid": `${idName}-input-search-list-${index + 1}`,
@@ -7815,15 +7853,15 @@ var WavelengthAutoComplete = ({
         },
         `active-list-item-${item}-${index}`
       ))
-    ) : /* @__PURE__ */ jsx52(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+    ) : /* @__PURE__ */ jsx53(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 useEffect23, useState as useState13 } from "react";
+import { useEffect as useEffect24, useState as useState13 } from "react";
 import styled12 from "styled-components";
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs31 } from "react/jsx-runtime";
 var Label2 = styled12.label`
   position: absolute;
   top: 50%;
@@ -7895,7 +7933,7 @@ var WavelengthDatePicker = ({
   const [minAdjusted, setMinAdjusted] = useState13("");
   const [maxAdjusted, setMaxAdjusted] = useState13("");
   const idName = id ? id : "WlDatePick";
-  useEffect23(() => {
+  useEffect24(() => {
     const minDate = new Date(min || "");
     const maxDate = new Date(max || "");
     if (inputTimeType === "datetime-local") {
@@ -7946,7 +7984,7 @@ var WavelengthDatePicker = ({
       $FocusLabelColor: FocusLabelColor,
       $inputBackGroundColor: backgroundColor2,
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "input",
           {
             type: inputType,
@@ -7967,7 +8005,7 @@ var WavelengthDatePicker = ({
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ jsx53(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+        /* @__PURE__ */ jsx54(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );
@@ -7978,9 +8016,9 @@ WavelengthDatePicker.displayName = "WavelengthDatePicker";
 import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/web-components";
 
 // src/components/inputs/WavelengthCheckbox.tsx
-import { useRef as useRef22, useEffect as useEffect24 } from "react";
+import { useRef as useRef23, useEffect as useEffect25 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
   size,
   color: color2,
@@ -7990,8 +8028,8 @@ var WavelengthCheckbox = ({
   textSize,
   ...rest
 }) => {
-  const ref = useRef22(null);
-  useEffect24(() => {
+  const ref = useRef23(null);
+  useEffect25(() => {
     const el = ref.current;
     if (!el) return;
     if (size !== void 0) {
@@ -8015,13 +8053,13 @@ var WavelengthCheckbox = ({
       el.setAttribute("text-size", textSize);
     }
   }, [size, color2, theme, disabled, text, textSize]);
-  return /* @__PURE__ */ jsx54("wavelength-checkbox", { ref, ...rest });
+  return /* @__PURE__ */ jsx55("wavelength-checkbox", { ref, ...rest });
 };
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 
 // src/components/samples/SampleComponent.tsx
-import { useRef as useRef23, useEffect as useEffect25 } from "react";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { useRef as useRef24, useEffect as useEffect26 } from "react";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
   children,
@@ -8030,8 +8068,8 @@ var SampleComponent = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef23(null);
-  useEffect25(() => {
+  const ref = useRef24(null);
+  useEffect26(() => {
     const el = ref.current;
     if (!el) return;
     el.customStyles = customStyle2;
@@ -8039,14 +8077,14 @@ var SampleComponent = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx55("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx56("sample-component", { ref, ...rest, children });
 };
 SampleComponent.displayName = "SampleComponent";
 
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
-import { useRef as useRef24, useEffect as useEffect26 } from "react";
+import { useRef as useRef25, useEffect as useEffect27 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
   notifications,
   darkMode,
@@ -8055,8 +8093,8 @@ var WavelengthNotificationPanel = ({
   ...rest
   // This rest operator includes className, style, onClick, etc.
 }) => {
-  const ref = useRef24(null);
-  useEffect26(() => {
+  const ref = useRef25(null);
+  useEffect27(() => {
     const el = ref.current;
     if (!el) return;
     if (notifications !== void 0) {
@@ -8075,18 +8113,18 @@ var WavelengthNotificationPanel = ({
       el.accountLink = accountLink;
     }
   }, [notifications, darkMode, rest.onMarkAsRead, rest.onSignOut, accountLink]);
-  return /* @__PURE__ */ jsx56("wavelength-notification-panel", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx57("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 useEffect27, useRef as useRef25 } from "react";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { useEffect as useEffect28, useRef as useRef26 } from "react";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style: style3, onChange, value, disabled, ...rest }) => {
-  const componentRef = useRef25(null);
-  useEffect27(() => {
+  const componentRef = useRef26(null);
+  useEffect28(() => {
     const component = componentRef.current;
     if (!component) return;
     const handleValueChange = (event) => {
@@ -8099,7 +8137,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.removeEventListener("change", handleValueChange);
     };
   }, [onChange]);
-  useEffect27(() => {
+  useEffect28(() => {
     const component = componentRef.current;
     if (!component) return;
     if (placeholder) component.setAttribute("placeholder", placeholder);
@@ -8109,13 +8147,13 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
     if (options) component.autocompleteOptions = options;
     if (style3) component.customStyles = style3;
   }, [options, placeholder, name, label, style3]);
-  useEffect27(() => {
+  useEffect28(() => {
     const component = componentRef.current;
     if (component && value) {
       component.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx57("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+  return /* @__PURE__ */ jsx58("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
 };
 
 // src/index.ts
@@ -8185,6 +8223,7 @@ export {
   WavelengthSpinningOuterCircle,
   WavelengthStandardSnackbar,
   WavelengthStyledButton,
+  WavelengthSwitch,
   WavelengthTestSnackbar,
   WavelengthTitleBar,
   WavelengthTitleBar2 as WavelengthTitleBarElement,

package/package.json

@@ -2,7 +2,7 @@
   "name": "@wavelengthusaf/components",
   "author": "563 EWS - Wavelength",
   "license": "MIT",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Common component library used by Wavelength developers",
   "main": "/dist/cjs/index.cjs",
   "module": "/dist/esm/index.js",
@@ -71,7 +71,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.16.5",
     "@mui/material": "^5.15.7",
-    "@wavelengthusaf/web-components": "^1.13.0",
+    "@wavelengthusaf/web-components": "^1.14.0",
     "react": "^18.2.0",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.12",