npm - @wavelengthusaf/components - Versions diffs - 5.0.3 → 5.0.6 - Mend

@wavelengthusaf/components 5.0.3 → 5.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -92,6 +92,423 @@ WavelengthButton.displayName = "WavelengthButton";
 // src/index.ts
 import { WavelengthButton as WavelengthButton2 } from "@wavelengthusaf/web-components";
+// src/components/buttons/WavelengthButton/WavelengthStyledButton.tsx
+import styled from "styled-components";
+import { jsxs } from "react/jsx-runtime";
+var ButtonPresets = {
+  default: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "",
+    fontWeight: 600,
+    color: "",
+    margin: "",
+    padding: "",
+    backgroundColor: "",
+    hover: {
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  ewdms_primary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "white",
+    margin: "",
+    padding: "12px 32px",
+    backgroundColor: "rgba(26, 128, 131, 1)",
+    hover: {
+      backgroundColor: "rgba(38, 186, 190, 1)",
+      color: "rgba(247, 247, 249, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#67a8aa",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_secondary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "1px solid rgba(26, 128, 131, 1)",
+    fontSize: "16px",
+    fontWeight: 600,
+    margin: "",
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#bad7da",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  ewdms_tertiary: {
+    width: "130px",
+    height: "45px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "8px",
+    border: "none",
+    fontSize: "16px",
+    fontWeight: 600,
+    color: "rgba(26, 128, 131, 1)",
+    padding: "12px 32px",
+    backgroundColor: "transparent",
+    hover: {
+      backgroundColor: "rgba(26, 128, 131, 0.1)",
+      color: "rgba(26, 128, 131, 1)",
+      cursor: "pointer",
+      width: "",
+      height: "",
+      border: "",
+      fontSize: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#445C71",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_launch: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#24A818",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#6FC36E",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_request: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#1D31E4",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "110px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#5D78ED",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_pending: {
+    width: "62px",
+    height: "24px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    margin: "",
+    backgroundColor: "#F88805",
+    hover: {
+      height: "28px",
+      border: "0.5px solid white",
+      fontSize: "12px",
+      width: "72px",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "#FAAD68",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  channel_one_disabled: {
+    width: "100px",
+    height: "24px",
+    display: "flex",
+    margin: "",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "20px",
+    border: "none",
+    fontSize: "10px",
+    fontWeight: 700,
+    color: "white",
+    padding: "0px 0px",
+    backgroundColor: "#9E9E9E",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: ""
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "",
+      transition: "",
+      border: ""
+    }
+  },
+  channel_one_transparent: {
+    width: "70px",
+    height: "25px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    margin: "",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "1px solid white",
+    fontSize: "10px",
+    fontWeight: 500,
+    color: "white",
+    padding: "0px !important",
+    backgroundColor: "transparent",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "",
+      opacity: ""
+    },
+    active: {
+      backgroundColor: "rgba(255, 255, 255, 0.22)",
+      boxShadow: "",
+      transition: "background-color 0.2s ease-in",
+      border: ""
+    }
+  },
+  brewery: {
+    width: "138px",
+    height: "44px",
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "6px",
+    border: "none",
+    fontSize: "16px",
+    margin: "",
+    fontWeight: 500,
+    color: "white",
+    padding: "12px 16px",
+    backgroundColor: "#D16A2F",
+    hover: {
+      height: "",
+      border: "",
+      fontSize: "",
+      width: "",
+      backgroundColor: "#D16A2F",
+      color: "",
+      cursor: "pointer"
+    },
+    disabled: {
+      cursor: "not-allowed",
+      opacity: "0.4"
+    },
+    active: {
+      backgroundColor: "",
+      boxShadow: "0 0 5px black",
+      transition: "",
+      border: ""
+    }
+  }
+};
+var Button = styled.button`
+  ${({ type }) => {
+  const preset = ButtonPresets[type];
+  return `
+      width: ${preset.width};
+      height: ${preset.height};
+      display: ${preset.display};
+      flex-direction: ${preset.flexDirection};
+      align-items: ${preset.alignItems};
+      justify-content: ${preset.justifyContent};
+      border-radius: ${preset.borderRadius};
+      border: ${preset.border};
+      font-size: ${preset.fontSize};
+      font-weight: ${preset.fontWeight};
+      color: ${preset.color};
+      padding: ${preset.padding};
+      background-color: ${preset.backgroundColor};
+      margin: ${preset.margin};
+      &:hover {
+        background-color: ${preset.hover.backgroundColor};
+        color: ${preset.hover.color};
+        cursor: ${preset.hover.cursor};
+        width:${preset.hover.width};
+        height:${preset.hover.height};
+        border:${preset.hover.border};
+        font-size:${preset.hover.fontSize};
+      }
+      &:disabled {
+        cursor: ${preset.disabled.cursor};
+        opacity: ${preset.disabled.opacity};
+      }
+      &:active {
+      background-color: ${preset.active.backgroundColor};
+      box-shadow: ${preset.active.boxShadow};
+      border: ${preset.active.border};
+      transition: ${preset.active.transition};
+      }
+    `;
+}}
+  ${({ styles }) => styles && { ...styles }}
+  ${({ hoverstyles }) => hoverstyles && {
+  "&:hover": { ...hoverstyles }
+}}
+     ${({ activestyles }) => activestyles && {
+  "&:active": { ...activestyles }
+}}
+   ${({ disabledstyles }) => disabledstyles && {
+  "&:disabled": { ...disabledstyles }
+}}
+`;
+function WavelengthStyledButton({ type = "default", styles, children, disabled = false, hoverstyles, icon, onClick, disabledstyles, activestyles, id, name }) {
+  return /* @__PURE__ */ jsxs(Button, { type, styles, hoverstyles, disabledstyles, disabled, activestyles, onClick, children: [
+    icon,
+    children
+  ] });
+}
+WavelengthStyledButton.displayName = "WavelengthStyledButton";
 // src/themes/WavelengthAppTheme.tsx
 import { createContext, useContext } from "react";
 var WavelengthAppTheme = createContext({});
@@ -174,7 +591,7 @@ function WavelengthContentPlaceholder({ type, width, height, txtcolor, bgcolor,
 WavelengthContentPlaceholder.displayName = "WavelengthContentPlaceholder";
 // src/components/example/WavelengthExampleComponent.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function WavelengthExampleComponent({ width = 100, height = 100, id }) {
   const palette = getPalette();
   const divStyle = {
@@ -183,13 +600,13 @@ function WavelengthExampleComponent({ width = 100, height = 100, id }) {
     padding: "5px",
     borderRadius: "5px"
   };
-  return /* @__PURE__ */ jsx3("div", { style: divStyle, id, children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 96 105", children: [
-    /* @__PURE__ */ jsxs("g", { fill: palette.primary, stroke: palette.secondary, strokeLinejoin: "round", strokeLinecap: "round", children: [
+  return /* @__PURE__ */ jsx3("div", { style: divStyle, id, children: /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", width, height, viewBox: "0 0 96 105", children: [
+    /* @__PURE__ */ jsxs2("g", { fill: palette.primary, stroke: palette.secondary, strokeLinejoin: "round", strokeLinecap: "round", children: [
       /* @__PURE__ */ jsx3("path", { d: "M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z", strokeWidth: "12" }),
       /* @__PURE__ */ jsx3("path", { d: "M32,5l5,10M64,5l-6,10 ", strokeWidth: "2" })
     ] }),
     /* @__PURE__ */ jsx3("path", { d: "M22,35h51v10h-51zM22,33c0-31,51-31,51,0", fill: palette.primary }),
-    /* @__PURE__ */ jsxs("g", { fill: "#FFF", children: [
+    /* @__PURE__ */ jsxs2("g", { fill: "#FFF", children: [
       /* @__PURE__ */ jsx3("circle", { cx: "36", cy: "22", r: "2" }),
       /* @__PURE__ */ jsx3("circle", { cx: "59", cy: "22", r: "2" })
     ] })
@@ -319,7 +736,7 @@ var WavelengthCard = (props) => {
 WavelengthCard.displayName = "WavelengthCard";
 // src/components/logos/applogo/WavelengthAppLogo.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
   let logo;
   {
@@ -327,7 +744,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
   let arg = "";
   if (grayscale) arg = "grayscale(1)";
   if (name.toLowerCase() === "wings") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 34 31", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5("path", { d: "M2.36037 0.97998L6.42418 9.35366L0.397217 5.01932L2.36037 0.97998Z", fill: "#DEE8FF" }),
       /* @__PURE__ */ jsx5("path", { d: "M0 5.67743L16.6372 17.6441L15.6441 20.6623L2.7805 11.4036L0 5.67743Z", fill: "#DEE8FF" }),
       /* @__PURE__ */ jsx5("path", { d: "M3.4834 12.8559L6.2639 18.5821L10.2131 21.4263H15.3922L3.4834 12.8559Z", fill: "#DEE8FF" }),
@@ -348,7 +765,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       ";"
     ] });
   } else if (name.toLowerCase() === "563rdpatch") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 892 925", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 892 925", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5("path", { d: "M442 917C147.5 919.5 7 662 7 662L115.5 591.5L767 596.5L883.5 668C883.5 668 736.5 914.5 442 917Z", fill: "#7BAFD4" }),
       /* @__PURE__ */ jsx5(
         "path",
@@ -565,7 +982,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       )
     ] });
   } else if (name.toLowerCase() === "563rdlabel") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 569 155", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 569 155", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5("mask", { id: "mask0_200_42", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "352", y: "30", width: "142", height: "95", children: /* @__PURE__ */ jsx5(
         "path",
         {
@@ -589,7 +1006,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
           fill: "white"
         }
       ),
-      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: "paint0_linear_200_42", x1: "346.209", y1: "61.9323", x2: "504.489", y2: "61.6548", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: "paint0_linear_200_42", x1: "346.209", y1: "61.9323", x2: "504.489", y2: "61.6548", gradientUnits: "userSpaceOnUse", children: [
         /* @__PURE__ */ jsx5("stop", { offset: "0.0729167", stopColor: "#FF0F16" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.234375", stopColor: "#FF8224" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.390625", stopColor: "#FFD036" }),
@@ -600,7 +1017,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       ] }) })
     ] });
   } else if (name.toLowerCase() === "arrow") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 537 75", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 537 75", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5(
         "path",
         {
@@ -626,7 +1043,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
         }
       ) }),
       /* @__PURE__ */ jsx5("g", { mask: "url(#mask0_5927_1148)", children: /* @__PURE__ */ jsx5("rect", { x: "336.394", y: "-4.56934", width: "122.933", height: "82.9385", fill: "url(#paint0_linear_5927_1148)" }) }),
-      /* @__PURE__ */ jsxs2("mask", { id: "path-5-outside-1_5927_1148", maskUnits: "userSpaceOnUse", x: "88.731", y: "2.51465", width: "260", height: "71", fill: "black", children: [
+      /* @__PURE__ */ jsxs3("mask", { id: "path-5-outside-1_5927_1148", maskUnits: "userSpaceOnUse", x: "88.731", y: "2.51465", width: "260", height: "71", fill: "black", children: [
         /* @__PURE__ */ jsx5("rect", { fill: "white", x: "88.731", y: "2.51465", width: "260", height: "71" }),
         /* @__PURE__ */ jsx5("path", { d: "M91.821 69.5146L112.791 12.9946C113.811 10.4146 115.281 8.52465 117.201 7.32464C119.121 6.06465 121.311 5.43465 123.771 5.43465C126.291 5.43465 128.511 6.03465 130.431 7.23465C132.411 8.43464 133.881 10.3246 134.841 12.9046L155.901 69.5146H144.111L139.251 55.5646H108.111L103.071 69.5146H91.821ZM111.351 46.0246H136.011L125.931 16.5946C125.691 15.9946 125.391 15.5446 125.031 15.2446C124.731 14.9446 124.341 14.7946 123.861 14.7946C123.381 14.7946 122.991 14.9746 122.691 15.3346C122.391 15.6346 122.151 16.0546 121.971 16.5946L111.351 46.0246ZM161.231 69.5146V6.51464H189.131C193.151 6.51464 196.811 7.41465 200.111 9.21465C203.471 10.9546 206.141 13.4146 208.121 16.5946C210.101 19.7746 211.091 23.4646 211.091 27.6646C211.091 31.8646 210.041 35.5846 207.941 38.8246C205.901 42.0046 203.171 44.4646 199.751 46.2046L205.961 57.9946C206.321 58.6546 206.741 59.1646 207.221 59.5246C207.701 59.8246 208.331 59.9746 209.111 59.9746H214.421V69.5146H207.491C205.031 69.5146 202.841 68.9146 200.921 67.7146C199.001 66.4546 197.471 64.8046 196.331 62.7646L188.951 48.6346C188.351 48.6946 187.721 48.7246 187.061 48.7246C186.461 48.7246 185.861 48.7246 185.261 48.7246H171.941V69.5146H161.231ZM171.941 39.2746H187.781C190.061 39.2746 192.161 38.8246 194.081 37.9246C196.001 37.0246 197.501 35.7046 198.581 33.9646C199.721 32.1646 200.291 30.0646 200.291 27.6646C200.291 25.2046 199.721 23.1046 198.581 21.3646C197.441 19.6246 195.941 18.3046 194.081 17.4046C192.221 16.4446 190.151 15.9646 187.871 15.9646H171.941V39.2746ZM222.403 69.5146V6.51464H250.303C254.323 6.51464 257.983 7.41465 261.283 9.21465C264.643 10.9546 267.313 13.4146 269.293 16.5946C271.273 19.7746 272.263 23.4646 272.263 27.6646C272.263 31.8646 271.213 35.5846 269.113 38.8246C267.073 42.0046 264.343 44.4646 260.923 46.2046L267.133 57.9946C267.493 58.6546 267.913 59.1646 268.393 59.5246C268.873 59.8246 269.503 59.9746 270.283 59.9746H275.593V69.5146H268.663C266.203 69.5146 264.013 68.9146 262.093 67.7146C260.173 66.4546 258.643 64.8046 257.503 62.7646L250.123 48.6346C249.523 48.6946 248.893 48.7246 248.233 48.7246C247.633 48.7246 247.033 48.7246 246.433 48.7246H233.113V69.5146H222.403ZM233.113 39.2746H248.953C251.233 39.2746 253.333 38.8246 255.253 37.9246C257.173 37.0246 258.673 35.7046 259.753 33.9646C260.893 32.1646 261.463 30.0646 261.463 27.6646C261.463 25.2046 260.893 23.1046 259.753 21.3646C258.613 19.6246 257.113 18.3046 255.253 17.4046C253.393 16.4446 251.323 15.9646 249.043 15.9646H233.113V39.2746ZM313.094 70.6846C308.114 70.6846 303.584 69.8446 299.504 68.1646C295.484 66.4246 292.034 64.0546 289.154 61.0546C286.334 58.0546 284.144 54.5746 282.584 50.6146C281.024 46.6546 280.244 42.4246 280.244 37.9246C280.244 33.4246 281.024 29.2246 282.584 25.3246C284.144 21.3646 286.334 17.8846 289.154 14.8846C292.034 11.8846 295.484 9.54465 299.504 7.86464C303.584 6.18464 308.114 5.34464 313.094 5.34464C318.134 5.34464 322.664 6.18464 326.684 7.86464C330.704 9.54465 334.154 11.8846 337.034 14.8846C339.914 17.8846 342.134 21.3646 343.694 25.3246C345.254 29.2246 346.034 33.4246 346.034 37.9246C346.034 42.4246 345.254 46.6546 343.694 50.6146C342.134 54.5746 339.914 58.0546 337.034 61.0546C334.154 64.0546 330.704 66.4246 326.684 68.1646C322.664 69.8446 318.134 70.6846 313.094 70.6846ZM313.094 61.1446C316.274 61.1446 319.214 60.5746 321.914 59.4346C324.614 58.2946 326.954 56.6746 328.934 54.5746C330.974 52.4146 332.534 49.9246 333.614 47.1046C334.694 44.2846 335.234 41.2246 335.234 37.9246C335.234 34.6246 334.694 31.5646 333.614 28.7446C332.534 25.9246 330.974 23.4946 328.934 21.4546C326.954 19.3546 324.614 17.7346 321.914 16.5946C319.214 15.3946 316.274 14.7946 313.094 14.7946C309.914 14.7946 306.974 15.3946 304.274 16.5946C301.634 17.7346 299.294 19.3546 297.254 21.4546C295.274 23.4946 293.714 25.9246 292.574 28.7446C291.494 31.5646 290.954 34.6246 290.954 37.9246C290.954 41.2846 291.494 44.3746 292.574 47.1946C293.714 49.9546 295.274 52.4146 297.254 54.5746C299.294 56.6746 301.634 58.2946 304.274 59.4346C306.974 60.5746 309.914 61.1446 313.094 61.1446Z" })
       ] }),
@@ -645,7 +1062,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
           mask: "url(#path-5-outside-1_5927_1148)"
         }
       ),
-      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: "paint0_linear_5927_1148", x1: "336.394", y1: "25.6959", x2: "459.327", y2: "25.4778", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: "paint0_linear_5927_1148", x1: "336.394", y1: "25.6959", x2: "459.327", y2: "25.4778", gradientUnits: "userSpaceOnUse", children: [
         /* @__PURE__ */ jsx5("stop", { offset: "0.0729167", stopColor: "#FF0F16" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.234375", stopColor: "#FF8224" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.390625", stopColor: "#FFD036" }),
@@ -656,8 +1073,8 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       ] }) })
     ] });
   } else if (name.toLowerCase() === "channelone") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 600 600", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
-      /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_287_202)", children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 600 600", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+      /* @__PURE__ */ jsxs3("g", { clipPath: "url(#clip0_287_202)", children: [
         /* @__PURE__ */ jsx5(
           "path",
           {
@@ -678,7 +1095,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsx5("clipPath", { id: "clip0_287_202", children: /* @__PURE__ */ jsx5("rect", { width: "600.8", height: "600.8", fill: "white" }) }) })
     ] });
   } else if (name.toLowerCase() === "swarm") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 281 281", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 281 281", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5("circle", { cx: "140.5", cy: "140.5", r: "140.5", fill: "#13151F" }),
       /* @__PURE__ */ jsx5(
         "path",
@@ -695,8 +1112,8 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
           fill: "white"
         }
       ) }) }),
-      /* @__PURE__ */ jsxs2("defs", { children: [
-        /* @__PURE__ */ jsxs2("filter", { id: "filter0_d_1203_6286", x: "71.7954", y: "96.5007", width: "136.24", height: "97.1179", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+      /* @__PURE__ */ jsxs3("defs", { children: [
+        /* @__PURE__ */ jsxs3("filter", { id: "filter0_d_1203_6286", x: "71.7954", y: "96.5007", width: "136.24", height: "97.1179", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
           /* @__PURE__ */ jsx5("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
           /* @__PURE__ */ jsx5("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
           /* @__PURE__ */ jsx5("feOffset", { dy: "3.5593" }),
@@ -706,7 +1123,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
           /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_1203_6286" }),
           /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_1203_6286", result: "shape" })
         ] }),
-        /* @__PURE__ */ jsxs2("filter", { id: "filter1_d_1203_6286", x: "71.7954", y: "96.5007", width: "136.24", height: "97.1179", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
+        /* @__PURE__ */ jsxs3("filter", { id: "filter1_d_1203_6286", x: "71.7954", y: "96.5007", width: "136.24", height: "97.1179", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [
           /* @__PURE__ */ jsx5("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
           /* @__PURE__ */ jsx5("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }),
           /* @__PURE__ */ jsx5("feOffset", { dy: "3.5593" }),
@@ -716,7 +1133,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
           /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_1203_6286" }),
           /* @__PURE__ */ jsx5("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_1203_6286", result: "shape" })
         ] }),
-        /* @__PURE__ */ jsxs2("linearGradient", { id: "paint0_linear_1203_6286", x1: "39.4003", y1: "71.7789", x2: "245.508", y2: "214.994", gradientUnits: "userSpaceOnUse", children: [
+        /* @__PURE__ */ jsxs3("linearGradient", { id: "paint0_linear_1203_6286", x1: "39.4003", y1: "71.7789", x2: "245.508", y2: "214.994", gradientUnits: "userSpaceOnUse", children: [
           /* @__PURE__ */ jsx5("stop", { stopColor: "#EE2A7B" }),
           /* @__PURE__ */ jsx5("stop", { offset: "0.14", stopColor: "#ED1C24" }),
           /* @__PURE__ */ jsx5("stop", { offset: "0.28", stopColor: "#EFA13F" }),
@@ -735,7 +1152,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       ] })
     ] });
   } else if (name.toLowerCase() === "wavelengthw") {
-    logo = /* @__PURE__ */ jsxs2("svg", { width, height, viewBox: "0 0 829 515", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
+    logo = /* @__PURE__ */ jsxs3("svg", { width, height, viewBox: "0 0 829 515", fill: "none", xmlns: "http://www.w3.org/2000/svg", filter: arg, id, children: [
       /* @__PURE__ */ jsx5("mask", { id: "mask0_164_43", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "830", height: "515", children: /* @__PURE__ */ jsx5(
         "path",
         {
@@ -745,7 +1162,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
         }
       ) }),
       /* @__PURE__ */ jsx5("g", { mask: "url(#mask0_164_43)", children: /* @__PURE__ */ jsx5("rect", { x: "-33.8369", y: "-63.9557", width: "924.871", height: "631.619", fill: "url(#paint0_linear_164_43)" }) }),
-      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs2("linearGradient", { id: "paint0_linear_164_43", x1: "-33.8369", y1: "166.53", x2: "891.035", y2: "164.909", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx5("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: "paint0_linear_164_43", x1: "-33.8369", y1: "166.53", x2: "891.035", y2: "164.909", gradientUnits: "userSpaceOnUse", children: [
         /* @__PURE__ */ jsx5("stop", { offset: "0.0729167", stopColor: "#FF0F16" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.234375", stopColor: "#FF8224" }),
         /* @__PURE__ */ jsx5("stop", { offset: "0.390625", stopColor: "#FFD036" }),
@@ -756,7 +1173,7 @@ function WavelengthAppLogo({ width, height, name = "", grayscale, id }) {
       ] }) })
     ] });
   } else {
-    logo = /* @__PURE__ */ jsxs2(Fragment, { children: [
+    logo = /* @__PURE__ */ jsxs3(Fragment, { children: [
       "AIR ",
       /* @__PURE__ */ jsx5("br", {}),
       " FORCE"
@@ -768,15 +1185,15 @@ WavelengthAppLogo.displayName = "WavelengthAppLogo";
 var WavelengthAppLogo_default = WavelengthAppLogo;
 // src/components/PageComponents/WavelengthNotAvailablePage.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function WavelengthNotAvailablePage({ WavelengthAppLogoName, errorMessage, backgroundColor, buttonText, redirectLink, buttonColorOne, buttonColorTwo, id }) {
   backgroundColor = backgroundColor ? backgroundColor : "gray";
   WavelengthAppLogoName = WavelengthAppLogoName ? WavelengthAppLogoName : "563rdpatch";
   buttonColorOne = buttonColorOne ? buttonColorOne : "white";
   buttonColorTwo = buttonColorTwo ? buttonColorTwo : "#0D5288";
-  return /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs3("div", { id, style: { display: "flex", backgroundColor, flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "center", gap: 55, padding: "8%" }, children: [
+  return /* @__PURE__ */ jsx6(Fragment2, { children: /* @__PURE__ */ jsxs4("div", { id, style: { display: "flex", backgroundColor, flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "center", gap: 55, padding: "8%" }, children: [
     /* @__PURE__ */ jsx6(WavelengthAppLogo_default, { name: WavelengthAppLogoName, width: 300, height: 200, grayscale: true }),
-    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
       /* @__PURE__ */ jsx6("p", { style: { textAlign: "center", marginBottom: 45, fontSize: 40, color: "white" }, children: `${errorMessage}` }),
       /* @__PURE__ */ jsx6(WavelengthButton, { "data-testid": "not-available-button", variant: "contained", colorOne: buttonColorOne, colorTwo: buttonColorTwo, href: redirectLink, children: buttonText })
     ] })
@@ -990,11 +1407,11 @@ var WavelengthFileDropZone = forwardRef(
 );
 WavelengthFileDropZone.displayName = "WavelengthFileDropZone";
-// src/components/SnackBar/WavelengthWebSnackbar.tsx
+// src/components/SnackBar/WavelengthSnackbar.tsx
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 import "@wavelengthusaf/web-components";
 import { jsx as jsx10 } from "react/jsx-runtime";
-var WavelengthWebSnackbar = ({
+var WavelengthSnackbar = ({
   message,
   duration,
   backgroundColor,
@@ -1097,7 +1514,7 @@ WavelengthProgressBar.displayName = "WavelengthProgressBar";
 import { WavelengthProgressBar as WavelengthProgressBar2 } from "@wavelengthusaf/web-components";
 // src/components/PageComponents/WavelengthPermissionAlert.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 function WavelengthPermissionAlert({
   dataTestId,
   height = "112px",
@@ -1111,7 +1528,7 @@ function WavelengthPermissionAlert({
   unit = "No Unit",
   id
 }) {
-  return /* @__PURE__ */ jsx12(Fragment3, { children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx12(Fragment3, { children: /* @__PURE__ */ jsxs5(
     "div",
     {
       id,
@@ -1133,21 +1550,21 @@ function WavelengthPermissionAlert({
       },
       children: [
         /* @__PURE__ */ jsx12("div", { style: { fontSize: "20px", fontWeight: 400 }, children: permission }),
-        /* @__PURE__ */ jsxs4("div", { style: { letterSpacing: "-6%" }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { letterSpacing: "-6%" }, children: [
           "Application: ",
           /* @__PURE__ */ jsx12("span", { style: { fontWeight: 600, marginLeft: "4px" }, children: applicationName })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { style: { letterSpacing: "-6%" }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { letterSpacing: "-6%" }, children: [
           "Requestor:",
           " ",
-          /* @__PURE__ */ jsxs4("span", { style: { fontWeight: 600, marginLeft: "4px" }, children: [
+          /* @__PURE__ */ jsxs5("span", { style: { fontWeight: 600, marginLeft: "4px" }, children: [
             requestorName,
             ", ",
             "" + unit
           ] })
         ] }),
-        /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
-          /* @__PURE__ */ jsxs4("div", { style: { letterSpacing: "-6%" }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "row", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs5("div", { style: { letterSpacing: "-6%" }, children: [
             "Date of Request: ",
             /* @__PURE__ */ jsx12("span", { style: { fontWeight: 600, marginLeft: "4px" }, children: dateOfRequest })
           ] }),
@@ -1161,9 +1578,78 @@ function WavelengthPermissionAlert({
 }
 WavelengthPermissionAlert.displayName = "WavelengthPermissionAlert";
+// src/components/PageComponents/WavelengthDragAndDrop.tsx
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+function WavelengthDragAndDrop({
+  width = "550px",
+  height = "230px",
+  onFilesSelected,
+  border,
+  textColor,
+  fontSize = "12px",
+  allowedFileMIME,
+  allowedFileExtensions,
+  backgroundColor = "transparent",
+  dataTestId,
+  id
+}) {
+  const handleFileChange = (event) => {
+    const selectedFiles = event.target.files;
+    if (selectedFiles && selectedFiles.length > 0) {
+      const newFiles = Array.from(selectedFiles);
+      onFilesSelected(newFiles);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles.length > 0) {
+      const newFiles = Array.from(droppedFiles);
+      const allowedTypes = allowedFileMIME ? allowedFileMIME : "*/*";
+      const validFiles = newFiles.filter((file) => allowedTypes === "*/*" || allowedTypes.includes(file.type));
+      if (validFiles.length > 0) {
+        onFilesSelected(validFiles);
+      } else {
+        alert(`Invalid file type`);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      id,
+      "data-testid": dataTestId,
+      style: {
+        backgroundColor,
+        border: border ? border : "1px dashed rgba(14, 178, 178, 1)",
+        borderRadius: "8px",
+        paddingTop: "10px",
+        boxSizing: "border-box",
+        width,
+        height,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "scroll"
+      },
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ jsxs6("div", { style: { fontSize, color: textColor }, children: [
+        /* @__PURE__ */ jsx13("input", { type: "file", hidden: true, multiple: true, id: "browse", onChange: handleFileChange, accept: allowedFileExtensions }),
+        "Drag File here or",
+        " ",
+        /* @__PURE__ */ jsx13("label", { htmlFor: "browse", style: { textDecoration: "underline", cursor: "pointer" }, children: "select from files" })
+      ] })
+    }
+  );
+}
+WavelengthDragAndDrop.displayName = "WavelengthDragAndDrop";
 // src/components/PageComponents/WavelengthToolTip.tsx
 import { useRef as useRef10, useEffect as useEffect10 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var WavelengthToolTip = ({ color, font, direction, children, textColor, textContent, ...rest }) => {
   const ref = useRef10(null);
   const syncAttribute = (attribute, value) => {
@@ -1178,13 +1664,13 @@ var WavelengthToolTip = ({ color, font, direction, children, textColor, textCont
     syncAttribute("text-color", textColor || "");
     syncAttribute("text-content", textContent || "");
   }, [color, font, direction, textColor, textContent]);
-  return /* @__PURE__ */ jsx13("wavelength-tooltip", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx14("wavelength-tooltip", { ref, ...rest, children });
 };
 WavelengthToolTip.displayName = "WavelengthToolTip";
 // src/components/PageComponents/WavelengthBadge.tsx
 import { useRef as useRef11, useEffect as useEffect11 } from "react";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 var WavelengthBadge = ({
   variant,
   badgeBorderRadius,
@@ -1258,8 +1744,8 @@ var WavelengthBadge = ({
     item,
     customStyle
   ]);
-  return /* @__PURE__ */ jsxs5("wavelength-badge", { ref, ...rest, children: [
-    badgeContent !== void 0 && /* @__PURE__ */ jsx14("span", { slot: "badge", children: badgeContent }),
+  return /* @__PURE__ */ jsxs7("wavelength-badge", { ref, ...rest, children: [
+    badgeContent !== void 0 && /* @__PURE__ */ jsx15("span", { slot: "badge", children: badgeContent }),
     item || children
   ] });
 };
@@ -1267,7 +1753,7 @@ WavelengthBadge.displayName = "WavelengthBadge";
 // src/components/PageComponents/WavelengthCommentDisplay.tsx
 import { useRef as useRef12, useEffect as useEffect12 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var WavelengthCommentDisplay = ({
   children,
   customStyle,
@@ -1317,14 +1803,14 @@ var WavelengthCommentDisplay = ({
     syncAttribute("icon-selected-color", iconSelectedColor);
     syncBooleanAttribute("selected", selected);
   }, [customStyle, author, comment, date, width, height, txtColor, bgColor, border, iconSelectedColor, selected]);
-  return /* @__PURE__ */ jsx15("wavelength-comment-display", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx16("wavelength-comment-display", { ref, ...rest, children });
 };
 WavelengthCommentDisplay.displayName = "WavelengthCommentDisplay";
 // src/components/forms/WavelengthForm.tsx
 import React12, { useEffect as useEffect13, useImperativeHandle as useImperativeHandle2, useRef as useRef13 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function useStableCallback(fn) {
   const fnRef = useRef13(fn);
   useEffect13(() => {
@@ -1441,7 +1927,7 @@ function WavelengthFormInner(props, ref) {
     }),
     []
   );
-  return /* @__PURE__ */ jsx16("wavelength-form", { ref: hostRef, className, style });
+  return /* @__PURE__ */ jsx17("wavelength-form", { ref: hostRef, className, style });
 }
 var WavelengthFormForwardRef = React12.forwardRef(WavelengthFormInner);
 WavelengthFormForwardRef.displayName = "WavelengthForm";
@@ -1453,7 +1939,7 @@ import { WavelengthForm as WavelengthForm2 } from "@wavelengthusaf/web-component
 // src/components/headers/WavelengthTitleBar/WavelengthTitleBar.tsx
 import { useEffect as useEffect14, useRef as useRef14 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function WavelengthTitleBar({ titleText, subtitleText, textColor, shadowColor, id, name }) {
   const ref = useRef14(null);
   useEffect14(() => {
@@ -1466,7 +1952,7 @@ function WavelengthTitleBar({ titleText, subtitleText, textColor, shadowColor, i
       ref.current.setAttribute("name", name || "");
     }
   }, [titleText, subtitleText, textColor, shadowColor]);
-  return /* @__PURE__ */ jsx17("wavelength-title-bar", { ref });
+  return /* @__PURE__ */ jsx18("wavelength-title-bar", { ref });
 }
 WavelengthTitleBar.displayName = "WavelengthTitleBar";
@@ -1476,7 +1962,7 @@ import { WavelengthTitleBar as WavelengthTitleBar2 } from "@wavelengthusaf/web-c
 // src/components/headers/WavelengthTitleBar/WavelengthBanner.tsx
 import { useEffect as useEffect15, useRef as useRef15 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function WavelengthBanner({ bannerText, bannerColor, textColor, opacity = 1, zIndex = 10, id, classification, control, name }) {
   const ref = useRef15(null);
   useEffect15(() => {
@@ -1492,7 +1978,7 @@ function WavelengthBanner({ bannerText, bannerColor, textColor, opacity = 1, zIn
     if (id) el.setAttribute("id", id);
     if (name) el.setAttribute("name", name);
   }, [bannerText, bannerColor, textColor, classification, control, opacity, zIndex, id, name]);
-  return /* @__PURE__ */ jsx18("wavelength-banner", { ref });
+  return /* @__PURE__ */ jsx19("wavelength-banner", { ref });
 }
 WavelengthBanner.displayName = "WavelengthBanner";
@@ -1500,11 +1986,11 @@ WavelengthBanner.displayName = "WavelengthBanner";
 import { WavelengthBanner as WavelengthBanner2 } from "@wavelengthusaf/web-components";
 // src/components/logos/default/WavelengthDefaultIcon.tsx
-import { jsx as jsx19, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 function WavelengthDefaultIcon({ width = "180", height = 140, id, name }) {
-  return /* @__PURE__ */ jsx19("div", { children: /* @__PURE__ */ jsxs6("svg", { width, height, viewBox: "0 0 185 140", fill: "none", xmlns: "http://www.w3.org/2000/svg", id, name, children: [
-    /* @__PURE__ */ jsx19("rect", { width, height, fill: "#7A7A7A" }),
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20("div", { children: /* @__PURE__ */ jsxs8("svg", { width, height, viewBox: "0 0 185 140", fill: "none", xmlns: "http://www.w3.org/2000/svg", id, name, children: [
+    /* @__PURE__ */ jsx20("rect", { width, height, fill: "#7A7A7A" }),
+    /* @__PURE__ */ jsx20(
       "path",
       {
         d: "M63.5 14.618L77.2811 57.0319L77.3934 57.3774H77.7566H122.353L86.2738 83.5906L85.9799 83.8042L86.0922 84.1497L99.8733 126.564L63.7939 100.35L63.5 100.137L63.2061 100.35L27.1267 126.564L40.9078 84.1497L41.0201 83.8042L40.7262 83.5906L4.64675 57.3774H49.2434H49.6066L49.7189 57.0319L63.5 14.618Z",
@@ -1513,20 +1999,20 @@ function WavelengthDefaultIcon({ width = "180", height = 140, id, name }) {
         stroke: "#6B6B6B"
       }
     ),
-    /* @__PURE__ */ jsx19("rect", { x: "102", y: "16", width: "70", height: "115", fill: "#4A4A4A" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "24.5", x2: "142", y2: "24.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "41.5", x2: "160", y2: "41.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "51.5", x2: "160", y2: "51.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "61.5", x2: "160", y2: "61.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "71.5", x2: "160", y2: "71.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("line", { x1: "112", y1: "81.5", x2: "160", y2: "81.5", stroke: "#D9D9D9", strokeWidth: "3" }),
-    /* @__PURE__ */ jsx19("circle", { cx: "48", cy: "44", r: "28", fill: "#D9D9D9", fillOpacity: "0.5" }),
-    /* @__PURE__ */ jsx19("path", { d: "M76 44.2478C76 59.5749 63.4645 72 48.0011 72C48.0011 72 49 19.5 49 16C49 16 20 16 20 44.2478C35.4634 44.2478 76 44.2478 76 44.2478Z", fill: "#D9D9D9", fillOpacity: "0.5" }),
-    /* @__PURE__ */ jsx19("rect", { x: "20", y: "83", width: "56", height: "15", rx: "4", fill: "#D9D9D9" }),
-    /* @__PURE__ */ jsx19("rect", { x: "20", y: "107", width: "56", height: "15", rx: "4", fill: "#ABABAB" }),
-    /* @__PURE__ */ jsx19("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: "paint0_linear_3571_2148", x1: "63.5", y1: "13", x2: "63.5", y2: "140", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx19("stop", { stopColor: "#A1A1A1" }),
-      /* @__PURE__ */ jsx19("stop", { offset: "1", stopColor: "#606060" })
+    /* @__PURE__ */ jsx20("rect", { x: "102", y: "16", width: "70", height: "115", fill: "#4A4A4A" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "24.5", x2: "142", y2: "24.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "41.5", x2: "160", y2: "41.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "51.5", x2: "160", y2: "51.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "61.5", x2: "160", y2: "61.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "71.5", x2: "160", y2: "71.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("line", { x1: "112", y1: "81.5", x2: "160", y2: "81.5", stroke: "#D9D9D9", strokeWidth: "3" }),
+    /* @__PURE__ */ jsx20("circle", { cx: "48", cy: "44", r: "28", fill: "#D9D9D9", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx20("path", { d: "M76 44.2478C76 59.5749 63.4645 72 48.0011 72C48.0011 72 49 19.5 49 16C49 16 20 16 20 44.2478C35.4634 44.2478 76 44.2478 76 44.2478Z", fill: "#D9D9D9", fillOpacity: "0.5" }),
+    /* @__PURE__ */ jsx20("rect", { x: "20", y: "83", width: "56", height: "15", rx: "4", fill: "#D9D9D9" }),
+    /* @__PURE__ */ jsx20("rect", { x: "20", y: "107", width: "56", height: "15", rx: "4", fill: "#ABABAB" }),
+    /* @__PURE__ */ jsx20("defs", { children: /* @__PURE__ */ jsxs8("linearGradient", { id: "paint0_linear_3571_2148", x1: "63.5", y1: "13", x2: "63.5", y2: "140", gradientUnits: "userSpaceOnUse", children: [
+      /* @__PURE__ */ jsx20("stop", { stopColor: "#A1A1A1" }),
+      /* @__PURE__ */ jsx20("stop", { offset: "1", stopColor: "#606060" })
     ] }) })
   ] }) });
 }
@@ -1534,7 +2020,7 @@ WavelengthDefaultIcon.displayName = "WavelengthDefaultIcon";
 // src/components/CSFD/WavelengthManyPlanes.tsx
 import { useRef as useRef16, useEffect as useEffect16 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color, gradient, spaced, ...rest }) => {
   const ref = useRef16(null);
   useEffect16(() => {
@@ -1559,14 +2045,14 @@ var WavelengthManyPlanes = ({ children, numberOfPlanes, trailDir, opacity, color
       el.spaced = spaced;
     }
   }, [numberOfPlanes, trailDir, opacity, color, gradient, spaced]);
-  return /* @__PURE__ */ jsx20("wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: spaced?.toString(), ...rest, children });
+  return /* @__PURE__ */ jsx21("wavelength-manyplanes", { ref, trailDir, opacity, color, gradient, spaced: spaced?.toString(), ...rest, children });
 };
 WavelengthManyPlanes.displayName = "WavelengthManyPlanes";
 // src/components/separators/WavelengthPlaneTrail/WavelengthPlaneTrail.tsx
 import { useRef as useRef17, useEffect as useEffect17 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var WavelengthPlaneTrail = ({
   trailDir,
   color,
@@ -1594,13 +2080,13 @@ var WavelengthPlaneTrail = ({
       el.setAttribute("id", id);
     }
   }, [trailDir]);
-  return /* @__PURE__ */ jsx21("wavelength-planetrail", { ref, trailDir, color, id, customStyle, ...rest, children });
+  return /* @__PURE__ */ jsx22("wavelength-planetrail", { ref, trailDir, color, id, customStyle, ...rest, children });
 };
 WavelengthPlaneTrail.displayName = "WavelengthPlaneTrail";
 // src/components/modals/WavelengthConfirmationModal.tsx
 import { useEffect as useEffect18, useRef as useRef18 } from "react";
-import { jsx as jsx22, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 function WavelengthConfirmationModal(props) {
   const { show, setShow, id, name } = props;
   const modalRef = useRef18(null);
@@ -1618,7 +2104,7 @@ function WavelengthConfirmationModal(props) {
       }
     };
   }, [setShow]);
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs9(
     "wavelength-confirmation-modal",
     {
       ref: modalRef,
@@ -1633,8 +2119,8 @@ function WavelengthConfirmationModal(props) {
       "title-text": props.textObj?.title,
       "dialog-text": props.textObj?.dialog,
       children: [
-        props.cancelButton && /* @__PURE__ */ jsx22("div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
-        props.submitButton && /* @__PURE__ */ jsx22("div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
+        props.cancelButton && /* @__PURE__ */ jsx23("div", { slot: "cancel-button", style: { display: "contents" }, children: props.cancelButton }),
+        props.submitButton && /* @__PURE__ */ jsx23("div", { slot: "submit-button", style: { display: "contents" }, children: props.submitButton })
       ]
     }
   );
@@ -1643,7 +2129,7 @@ WavelengthConfirmationModal.displayName = "WavelengthConfirmationModal";
 // src/components/modals/WavelengthPopUpMenu.tsx
 import React16, { useRef as useRef19, useEffect as useEffect19 } from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var WavelengthPopUpMenu = React16.forwardRef(
   ({ children, customStyle = {}, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel, ...rest }, externalRef) => {
     const internalRef = useRef19(null);
@@ -1668,14 +2154,14 @@ var WavelengthPopUpMenu = React16.forwardRef(
         el.setAttribute("menu-items", JSON.stringify(menuItems));
       }
     }, [customStyle, variant, trigger, menuDirection, menuOffset, menuItems, badgeLabel]);
-    return /* @__PURE__ */ jsx23("wavelength-popup-menu", { ref: internalRef, ...rest, children });
+    return /* @__PURE__ */ jsx24("wavelength-popup-menu", { ref: internalRef, ...rest, children });
   }
 );
 WavelengthPopUpMenu.displayName = "WavelengthPopUpMenu";
 // src/components/modals/WavelengthDropdown.tsx
 import { forwardRef as forwardRef2, useEffect as useEffect20, useImperativeHandle as useImperativeHandle3, useRef as useRef20 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var WavelengthDropdown = forwardRef2((props, ref) => {
   const {
     options,
@@ -1717,7 +2203,7 @@ var WavelengthDropdown = forwardRef2((props, ref) => {
       elementRef.current.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "wavelength-dropdown",
     {
       ref: elementRef,
@@ -1747,7 +2233,7 @@ WavelengthDropdown.displayName = "WavelengthDropdown";
 // src/components/modals/WavelengthMenu.tsx
 import { useRef as useRef21, useEffect as useEffect21 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var WavelengthMenu = ({
   backgroundColor,
   textColor,
@@ -1790,7 +2276,7 @@ var WavelengthMenu = ({
       el.removeEventListener("wavelength-menu-select", handleSelect);
     };
   }, [backgroundColor, textColor, font, fontSize, border, padding, borderRadius, selectedColor, disabledColor, items, WavelengthMenuSelect]);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "wavelength-menu",
     {
       ref,
@@ -1812,7 +2298,7 @@ WavelengthMenu.displayName = "WavelengthMenu";
 // src/components/modals/WavelengthSwitch.tsx
 import { useRef as useRef22, useEffect as useEffect22 } from "react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color, labelFont, checked, value, onWavelengthSwitchChange, customStyle, ...rest }) => {
   const ref = useRef22(null);
   useEffect22(() => {
@@ -1844,13 +2330,13 @@ var WavelengthSwitch = ({ label, labelPlacement, size, disabled, color, labelFon
     el.addEventListener("wavelength-switch-change", handleEvent);
     return () => el.removeEventListener("wavelength-switch-change", handleEvent);
   }, [onWavelengthSwitchChange]);
-  return /* @__PURE__ */ jsx26("wavelength-switch", { ref, ...rest });
+  return /* @__PURE__ */ jsx27("wavelength-switch", { ref, ...rest });
 };
 WavelengthSwitch.displayName = "WavelengthSwitch";
 // src/components/modals/WavelengthDialog.tsx
 import { useRef as useRef23, useEffect as useEffect23 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var WavelengthDialog = ({
   children,
   customStyle,
@@ -1940,13 +2426,13 @@ var WavelengthDialog = ({
     rightBtnColor,
     fontFamily
   ]);
-  return /* @__PURE__ */ jsx27("wavelength-dialog", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx28("wavelength-dialog", { ref, ...rest, children });
 };
 WavelengthDialog.displayName = "WavelengthDialog";
 // src/components/modals/WavelengthPagination.tsx
 import { useRef as useRef24, useEffect as useEffect24 } from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var WavelengthPagination = ({
   testProp,
   children,
@@ -2002,7 +2488,7 @@ var WavelengthPagination = ({
       el.removeEventListener("page-change", handlePageChange);
     };
   }, [testProp, textColor, font, fontSize, border, borderRadius, padding, variant, totalPages, currentPage, activeColor, activeTextColor, backgroundColor, disabledColor, onPageChange]);
-  return /* @__PURE__ */ jsx28("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
+  return /* @__PURE__ */ jsx29("wavelength-pagination", { ref, variant, "total-pages": totalPages, "current-page": currentPage, ...rest });
 };
 WavelengthPagination.displayName = "WavelengthPagination";
@@ -2011,7 +2497,7 @@ import { WavelengthPagination as WavelengthPagination2 } from "@wavelengthusaf/w
 // src/components/sliders/WavelengthSlider.tsx
 import { useRef as useRef25, useEffect as useEffect25 } from "react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, handleChange, labelFunc, valueDisplayed, marks, color, width, ...rest }) => {
   const ref = useRef25(null);
   useEffect25(() => {
@@ -2039,14 +2525,14 @@ var WavelengthSlider = ({ children, customStyle, value, maxVal, minVal, step, ha
     el.addEventListener("slider-change", onSliderChange);
     return () => el.removeEventListener("slider-change", onSliderChange);
   }, [handleChange]);
-  return /* @__PURE__ */ jsx29("wavelength-slider", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx30("wavelength-slider", { ref, ...rest, children });
 };
 WavelengthSlider.displayName = "WavelengthSlider";
 // src/components/TextField/WavelengthInput.tsx
 import { useRef as useRef26, useEffect as useEffect26, forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle4 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var WavelengthInput = forwardRef3(
   ({
     id,
@@ -2195,7 +2681,7 @@ var WavelengthInput = forwardRef3(
       ...style,
       ...backgroundColor ? { ["--wavelength-label-background"]: backgroundColor } : {}
     };
-    return /* @__PURE__ */ jsx30("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
+    return /* @__PURE__ */ jsx31("wavelength-input", { ref: internalRef, style: combinedStyle, ...rest });
   }
 );
 WavelengthInput.displayName = "WavelengthInput";
@@ -2205,39 +2691,45 @@ import { WavelengthInput as WavelengthInput2 } from "@wavelengthusaf/web-compone
 // src/components/DataTable/WavelengthDataTable.tsx
 import { useEffect as useEffect27, useRef as useRef27, useState } from "react";
-import styled from "styled-components";
-import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
-var ModalInputDiv = styled.div`
+import styled2 from "styled-components";
+import { jsx as jsx32, jsxs as jsxs10 } from "react/jsx-runtime";
+var ModalInputDiv = styled2.div`
   display: flex;
-  flex-direction: column; /* Corrected this line */
-  gap: 3px;
-  margin: 3px;
+  flex-direction: column;
+  gap: 5px;
+  margin: 10px;
   label {
     align-self: flex-start;
-    color: #c6c7cc;
+    color: #304359;
+    font-weight: 600;
+    font-family: Montserrat, sans-serif;
   }
   input,
   select {
     width: 100%;
-    padding: 12px 20px;
-    margin: 8px 0;
+    padding: 10px 15px;
+    margin: 4px 0 12px 0;
     box-sizing: border-box;
-    border: none;
+    border: 1px solid #c6c7cc;
+    border-radius: 4px;
     outline: none;
-    border-bottom: 2px solid #c6c7cc;
+    background-color: #ffffff;
+    color: #000000;
+    font-family: Montserrat, sans-serif;
     &:hover {
-      border-bottom: 2px solid black;
+      border-color: #304359;
     }
     &:focus {
-      border-bottom: 2px solid #8fd8ff;
+      border-color: #8fd8ff;
+      box-shadow: 0 0 0 2px rgba(143, 216, 255, 0.3);
     }
   }
 `;
-var ModalOverlay = styled.div`
+var ModalOverlay = styled2.div`
   position: fixed;
   bottom: 19%;
   right: 15%;
@@ -2249,7 +2741,7 @@ var ModalOverlay = styled.div`
   align-items: center;
   z-index: 1;
 `;
-var ModalWrapper = styled.div`
+var ModalWrapper = styled2.div`
   background-color: white;
   border-radius: 8px;
   padding: 20px;
@@ -2260,26 +2752,31 @@ var ModalWrapper = styled.div`
   display: flex;
   align-items: center;
 `;
-var ModalClose = styled.button`
+var ModalClose = styled2.button`
   position: absolute;
   top: 10px;
-  right: 10px;
-  font-size: 20px;
+  right: 15px;
+  font-size: 24px;
   cursor: pointer;
   border: none;
   background: none;
+  color: #304359;
   z-index: 2;
+  &:hover {
+    color: #000000;
+  }
 `;
-var TableHeadStyle = styled.th`
+var TableHeadStyle = styled2.th`
   position: relative;
 `;
-var KebabMenu = styled.div`
+var KebabMenu = styled2.div`
   display: inline-block;
   position: absolute;
   right: 0;
   top: 2px;
 `;
-var KebabIcon = styled.div`
+var KebabIcon = styled2.div`
   cursor: pointer;
   font-size: 20px;
   padding: 5px;
@@ -2292,54 +2789,71 @@ var KebabIcon = styled.div`
     color: #8fd8ff;
   }
 `;
-var MenuOptions = styled.ul`
+var MenuOptions = styled2.ul`
   position: absolute;
   right: 0;
   top: 100%;
-  background-color: #f9f9f9;
+  background-color: #ffffff;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
+  z-index: 10;
   list-style: none;
   padding: 0;
   margin: 0;
+  border-radius: 4px;
+  overflow: hidden;
   li {
-    padding: 10px;
+    padding: 12px 16px;
     text-decoration: none;
     display: block;
     cursor: pointer;
+    color: #304359 !important;
+    font-family: Montserrat, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    text-align: left;
     &:hover {
-      background-color: #ddd;
+      background-color: #f0f4f8;
+      color: #000000 !important;
+    }
+    span {
+      margin-right: 8px;
+      color: #304359 !important;
+    }
+    &:hover span {
+      color: #000000 !important;
     }
   }
 `;
-var StyledBoxDiv = styled.div`
+var StyledBoxDiv = styled2.div`
   background-color: white;
-  width: 700px;
-  height: 480px;
+  width: 100%;
+  height: auto;
+  min-height: 480px;
   position: relative;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
 `;
-var StyledNavBoxDiv = styled.div`
+var StyledNavBoxDiv = styled2.div`
   background-color: white;
-  width: 700px;
-  display: flex; /* Make parent a flex-container */
+  width: 100%;
+  display: flex;
   justify-content: center;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   box-shadow: 0.5px 3px 5px black;
 `;
-var StyledTd = styled.td`
+var StyledTd = styled2.td`
   border-top: 1px solid #c6c7cc;
   border-bottom: 1px solid #c6c7cc;
   padding: 10px 15px;
   vertical-align: middle;
 `;
-var StyledTableTwo = styled.table`
+var StyledTableTwo = styled2.table`
   width: 95%;
   height: 95%;
   border-collapse: collapse;
@@ -2350,29 +2864,28 @@ var StyledTableTwo = styled.table`
   margin-right: auto;
   th {
-    position: relative; /* Enable absolute positioning of pseudo-elements */
+    position: relative;
     padding: 10px 15px;
-    /* Create the partial right border */
     &:not(:last-child):after {
-      content: ""; /* Ensure the pseudo-element is visible */
+      content: "";
       position: absolute;
-      right: 0; /* Position it on the right side of the th */
-      top: 50%; /* Position it in the vertical center */
-      height: 50%; /* Set the height of the border to be half the height of th */
+      right: 0;
+      top: 50%;
+      height: 50%;
       border-right: 1px solid #c6c7cc;
-      transform: translateY(-50%); /* Center it vertically */
+      transform: translateY(-50%);
     }
   }
 `;
-var StyledInput = styled.input`
+var StyledInput = styled2.input`
   height: 100%;
   width: 100%;
   outline: none;
   border: none;
   color: #8fd8ff;
 `;
-var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
+var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id, onRowClick, paginationOptions }) => {
   const [localData, setLocalData] = useState(data || []);
   const copiedArray = [...data || []];
   const [editingId, setEditingId] = useState(null);
@@ -2387,6 +2900,38 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
   const [editingMenuKey, setEditingMenuKey] = useState(null);
   const menuRef = useRef27(null);
   const modalRef = useRef27(null);
+  const [modalPos, setModalPos] = useState({ x: 0, y: 0 });
+  const isDragging = useRef27(false);
+  const dragStartPos = useRef27({ x: 0, y: 0 });
+  const handleDragStart = (e) => {
+    isDragging.current = true;
+    dragStartPos.current = {
+      x: e.clientX - modalPos.x,
+      y: e.clientY - modalPos.y
+    };
+  };
+  useEffect27(() => {
+    const handleDragMove = (e) => {
+      if (!isDragging.current) return;
+      setModalPos({
+        x: e.clientX - dragStartPos.current.x,
+        y: e.clientY - dragStartPos.current.y
+      });
+    };
+    const handleDragEnd = () => {
+      isDragging.current = false;
+    };
+    if (isModalOpen) {
+      document.addEventListener("mousemove", handleDragMove);
+      document.addEventListener("mouseup", handleDragEnd);
+    } else {
+      setModalPos({ x: 0, y: 0 });
+    }
+    return () => {
+      document.removeEventListener("mousemove", handleDragMove);
+      document.removeEventListener("mouseup", handleDragEnd);
+    };
+  }, [isModalOpen]);
   function isNumeric(value) {
     return /^\d+$/.test(value);
   }
@@ -2481,10 +3026,10 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
     setEditingId(null);
   };
   const headers = columns.map((column, index) => {
-    return /* @__PURE__ */ jsxs8(TableHeadStyle, { children: [
+    return /* @__PURE__ */ jsxs10(TableHeadStyle, { children: [
       column.title,
-      /* @__PURE__ */ jsxs8(KebabMenu, { ref: menuRef, children: [
-        /* @__PURE__ */ jsx31(
+      /* @__PURE__ */ jsxs10(KebabMenu, { ref: menuRef, children: [
+        /* @__PURE__ */ jsx32(
           KebabIcon,
           {
             title: `KebabIcon-${index}`,
@@ -2494,49 +3039,60 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
             children: "\u22EE"
           }
         ),
-        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs8(MenuOptions, { children: [
-          sortOrder === "asc" ? /* @__PURE__ */ jsxs8("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
-            /* @__PURE__ */ jsx31("span", { children: "\u2B06" }),
+        isOpen && editingMenuKey === column.key && /* @__PURE__ */ jsxs10(MenuOptions, { children: [
+          sortOrder === "asc" ? /* @__PURE__ */ jsxs10("li", { title: `MenuListASC-${index}`, onClick: () => handleSort(column.key, "asc"), children: [
+            /* @__PURE__ */ jsx32("span", { children: "\u2B06" }),
             " Sort ASC"
-          ] }) : /* @__PURE__ */ jsxs8("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
-            /* @__PURE__ */ jsx31("span", { children: "\u2B07" }),
+          ] }) : /* @__PURE__ */ jsxs10("li", { title: `MenuListDES-${index}`, onClick: () => handleSort(column.key, "desc"), children: [
+            /* @__PURE__ */ jsx32("span", { children: "\u2B07" }),
             " Sort DESC"
           ] }),
-          /* @__PURE__ */ jsxs8("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
-            /* @__PURE__ */ jsx31("span", { children: "\u23F7" }),
+          /* @__PURE__ */ jsxs10("li", { title: `MenuListFilterButton-${index}`, onClick: openModal, children: [
+            /* @__PURE__ */ jsx32("span", { children: "\u23F7" }),
             " Filter"
           ] }),
-          isModalOpen && /* @__PURE__ */ jsx31(ModalOverlay, { children: /* @__PURE__ */ jsxs8(ModalWrapper, { ref: modalRef, children: [
-            /* @__PURE__ */ jsx31(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
-            /* @__PURE__ */ jsxs8(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx31("label", { htmlFor: "filterSelectId", children: "Columns: " }),
-              /* @__PURE__ */ jsx31("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx31("option", { children: item.key }, item.key)) })
-            ] }),
-            /* @__PURE__ */ jsxs8(ModalInputDiv, { children: [
-              /* @__PURE__ */ jsx31("label", { htmlFor: "filterInputId", children: "Values: " }),
-              /* @__PURE__ */ jsx31(
-                "input",
-                {
-                  title: `Inputfiltertest-${index}`,
-                  id: "filterInputId",
-                  type: isNumeric(searchItem) ? "number" : "text",
-                  value: searchItem,
-                  onKeyDown: (e) => {
-                    if (e.key === "Backspace") {
-                      setLocalData(copiedArray);
+          isModalOpen && /* @__PURE__ */ jsx32(ModalOverlay, { children: /* @__PURE__ */ jsxs10(
+            ModalWrapper,
+            {
+              ref: modalRef,
+              style: {
+                transform: `translate(${modalPos.x}px, ${modalPos.y}px)`,
+                cursor: "grab"
+              },
+              onMouseDown: handleDragStart,
+              children: [
+                /* @__PURE__ */ jsx32(ModalClose, { title: `ModalClose-${index}`, onClick: closeModal, children: "\xD7" }),
+                /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
+                  /* @__PURE__ */ jsx32("label", { htmlFor: "filterSelectId", children: "Columns: " }),
+                  /* @__PURE__ */ jsx32("select", { title: `filterSelect-${index}`, id: "filterSelectId", value: selectedValue, onChange: handleChange, children: columns.map((item) => /* @__PURE__ */ jsx32("option", { children: item.key }, item.key)) })
+                ] }),
+                /* @__PURE__ */ jsxs10(ModalInputDiv, { children: [
+                  /* @__PURE__ */ jsx32("label", { htmlFor: "filterInputId", children: "Values: " }),
+                  /* @__PURE__ */ jsx32(
+                    "input",
+                    {
+                      title: `Inputfiltertest-${index}`,
+                      id: "filterInputId",
+                      type: isNumeric(searchItem) ? "number" : "text",
+                      value: searchItem,
+                      onKeyDown: (e) => {
+                        if (e.key === "Backspace") {
+                          setLocalData(copiedArray);
+                        }
+                      },
+                      onChange: (e) => setSearchItem(e.target.value)
                     }
-                  },
-                  onChange: (e) => setSearchItem(e.target.value)
-                }
-              )
-            ] })
-          ] }) })
+                  )
+                ] })
+              ]
+            }
+          ) })
         ] })
       ] }, index)
     ] }, `headCell-${index}`);
   });
-  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx31("tr", { children: /* @__PURE__ */ jsx31("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx31("tr", { children: columns.map((column, index2) => {
-    return /* @__PURE__ */ jsx31(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx31(
+  const rows = !currentPageData?.length || noRowsOpen ? /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : currentPageData?.map((item) => /* @__PURE__ */ jsx32("tr", { onClick: () => onRowClick && onRowClick(item), style: { cursor: onRowClick ? "pointer" : "default" }, children: columns.map((column, index2) => {
+    return /* @__PURE__ */ jsx32(StyledTd, { children: editingId === item.id && editedColumnKey === column.key ? /* @__PURE__ */ jsx32(
       StyledInput,
       {
         title: `styledRow-${item.id}-${column.key}-${index2}`,
@@ -2553,21 +3109,21 @@ var WavelengthDataTable = ({ data, columns, itemsPerPage, totalPages, id }) => {
         },
         autoFocus: true
       }
-    ) : /* @__PURE__ */ jsx31("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => handleEdit(item.id, item[column.key], column.key), children: item[column.key] }) }, index2);
+    ) : /* @__PURE__ */ jsx32("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, onDoubleClick: () => column.editable !== false && handleEdit(item.id, item[column.key], column.key), children: column.render ? column.render(column, item) : item[column.key] }) }, index2);
   }) }, item.id));
-  return /* @__PURE__ */ jsxs8("div", { id, children: [
-    /* @__PURE__ */ jsx31(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs8(StyledTableTwo, { title: "StyledTable", children: [
-      /* @__PURE__ */ jsx31("thead", { children: /* @__PURE__ */ jsx31("tr", { children: headers }) }),
-      /* @__PURE__ */ jsx31("tbody", { children: rows })
+  return /* @__PURE__ */ jsxs10("div", { id, children: [
+    /* @__PURE__ */ jsx32(StyledBoxDiv, { title: "StyledBoxDiv", children: /* @__PURE__ */ jsxs10(StyledTableTwo, { title: "StyledTable", children: [
+      /* @__PURE__ */ jsx32("thead", { children: /* @__PURE__ */ jsx32("tr", { children: headers }) }),
+      /* @__PURE__ */ jsx32("tbody", { children: rows })
     ] }) }),
-    /* @__PURE__ */ jsx31(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx31(WavelengthPagination, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic" }) })
+    /* @__PURE__ */ jsx32(StyledNavBoxDiv, { children: /* @__PURE__ */ jsx32(WavelengthPagination, { customStyle: {}, totalPages, currentPage, onPageChange: setCurrentPage, variant: "basic", ...paginationOptions || {} }) })
   ] });
 };
 WavelengthDataTable.displayName = "WavelengthDataTable";
 // src/components/DataTable/WavelengthDataGrid.tsx
 import { useRef as useRef28, useEffect as useEffect28 } from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var WavelengthDataGrid = ({ columns, rows, pageSize = 10, checkboxSelection = false, hidePagination = false, onSelectionChange, customStyle, ...rest }) => {
   const ref = useRef28(null);
   useEffect28(() => {
@@ -2591,34 +3147,34 @@ var WavelengthDataGrid = ({ columns, rows, pageSize = 10, checkboxSelection = fa
       el.removeEventListener("selection-change", handleSelectionChange);
     };
   }, [columns, rows, pageSize, checkboxSelection, hidePagination, customStyle, onSelectionChange]);
-  return /* @__PURE__ */ jsx32("wavelength-data-grid", { ref, ...rest });
+  return /* @__PURE__ */ jsx33("wavelength-data-grid", { ref, ...rest });
 };
 WavelengthDataGrid.displayName = "WavelengthDataGrid";
 // src/components/DataTable/SubRowTable/ChildSubTable.tsx
 import { useMemo as useMemo3, useState as useState2, Fragment as Fragment4 } from "react";
-import styled2 from "styled-components";
-import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs9 } from "react/jsx-runtime";
-var TableContainer = styled2.div`
+import styled3 from "styled-components";
+import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs11 } from "react/jsx-runtime";
+var TableContainer = styled3.div`
   width: 1200px;
   border-radius: 16px;
 `;
-var TableRow = styled2.div`
+var TableRow = styled3.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var TablePrimaryRow = styled2.div`
+var TablePrimaryRow = styled3.div`
   display: grid;
   grid-template-columns: ${({ $amountofColumns }) => `repeat(${$amountofColumns}, 1fr)`};
 `;
-var BodyRowContainer = styled2.div`
+var BodyRowContainer = styled3.div`
   border: 1px solid black;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
   margin-bottom: 10px;
 `;
-var TableHeaderCell = styled2.div`
+var TableHeaderCell = styled3.div`
   padding-left: 12px;
   padding-right: 25px;
   height: 60px;
@@ -2626,7 +3182,7 @@ var TableHeaderCell = styled2.div`
   display: flex;
   align-items: center;
 `;
-var TableBodyCell = styled2.div`
+var TableBodyCell = styled3.div`
   background-color: #fff;
   color: black;
   position: relative;
@@ -2635,27 +3191,27 @@ var TableBodyCell = styled2.div`
   font-size: ${(props) => props.$primaryBoldState ? "24px" : "16px"};
   font-weight: ${(props) => props.$primaryBoldState ? "bold" : "normal"};
 `;
-var ButtonStylingRow = styled2.div`
+var ButtonStylingRow = styled3.div`
   display: flex;
   flex-direction: row;
 `;
-var BottomArrowBar = styled2.div`
+var BottomArrowBar = styled3.div`
   background-color: #e9e9e9;
   text-align: center;
 `;
-var BottomUpArrowBar = styled2.div`
+var BottomUpArrowBar = styled3.div`
   background-color: #e9e9e9;
   text-align: center;
   position: relative;
 `;
-var SubDataTable = styled2.table`
+var SubDataTable = styled3.table`
   background-color: white;
   color: black;
   width: 100%;
   border-collapse: collapse;
   line-height: 1.2;
 `;
-var SubDataTableHeaderRow = styled2.tr`
+var SubDataTableHeaderRow = styled3.tr`
   height: 50px;
   background-color: #304359;
   color: white;
@@ -2666,10 +3222,10 @@ var SubDataTableHeaderRow = styled2.tr`
     white-space: nowrap;
   }
 `;
-var SubDataTableBodyRow = styled2.tbody`
+var SubDataTableBodyRow = styled3.tbody`
   font-size: 14px;
 `;
-var SubDataTableBodyRowContainer = styled2.tr`
+var SubDataTableBodyRowContainer = styled3.tr`
   td {
     padding: 10px 0;
     max-width: 100px;
@@ -2679,13 +3235,13 @@ var SubDataTableBodyRowContainer = styled2.tr`
     background-color: #96e0e5;
   }
 `;
-var SubDataTableCell = styled2.td`
+var SubDataTableCell = styled3.td`
   text-align: center;
 `;
-var SubDataHeaderColumn = styled2.thead`
+var SubDataHeaderColumn = styled3.thead`
   background-color: #304359;
 `;
-var SortButton = styled2.button`
+var SortButton = styled3.button`
   font-size: 16px;
   font-weight: bold;
   color: white;
@@ -2693,7 +3249,7 @@ var SortButton = styled2.button`
   border: none;
   white-space: nowrap;
 `;
-var DownloadMissionButton = styled2.button`
+var DownloadMissionButton = styled3.button`
   width: 217px;
   height: 45px;
   padding: 12px 32px 12px 32px;
@@ -2722,7 +3278,7 @@ var DownloadMissionButton = styled2.button`
     transition: background-color 0.2s ease;
   }
 `;
-var AddButton = styled2.button`
+var AddButton = styled3.button`
   width: 130px;
   height: 45px;
   border: 1px solid #1a8083;
@@ -2752,7 +3308,7 @@ var AddButton = styled2.button`
     transition: background-color 0.2s ease;
   }
 `;
-var DownloadArrow = styled2.button`
+var DownloadArrow = styled3.button`
   background-color: transparent;
   border: none;
@@ -2835,45 +3391,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__ */ jsx33(Fragment5, { children: /* @__PURE__ */ jsxs9(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+    return sortKey2 === column.key ? sortOrder2 === "asc" ? /* @__PURE__ */ jsx34(Fragment5, { children: /* @__PURE__ */ jsxs11(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsx33(Fragment5, { children: /* @__PURE__ */ jsxs9(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsx34(Fragment5, { children: /* @__PURE__ */ jsxs11(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsx33(Fragment5, { children: /* @__PURE__ */ jsxs9(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
+      /* @__PURE__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsx34(Fragment5, { children: /* @__PURE__ */ jsxs11(SortButton, { $sortColor: "black", onClick: () => toggleSortOrder(column.key), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsxs9(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+    return sortSubKey2 === columnKey ? sortSubOrder2 === "asc" ? /* @__PURE__ */ jsxs11(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsxs9(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      /* @__PURE__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsxs11(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsxs9(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
+      /* @__PURE__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsxs11(SortButton, { $sortColor: "white", onClick: () => toggleSubSortOrder(columnKey), children: [
       column.title,
       " ",
-      /* @__PURE__ */ jsx33("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("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__ */ jsx34("svg", { width: "15", height: "10", viewBox: "0 0 15 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("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__ */ jsx33(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
+    return /* @__PURE__ */ jsx34(TableHeaderCell, { children: renderSortButton(column, sortOrder, sortKey) }, `HeaderCell-${column.key}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx33("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx34("th", { children: renderSortSubButton(column, sortSubOrder, sortSubKey) }, `SubHeadCell-${index}`);
   });
   const subDataRows = (itemId) => {
-    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx33(Fragment4, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs9(SubDataTableBodyRowContainer, { children: [
-      /* @__PURE__ */ jsx33("td", { children: /* @__PURE__ */ jsx33(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx33("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33(
+    return processedRowData.filter((item) => item.Details?.relationId === itemId).map((item) => /* @__PURE__ */ jsx34(Fragment4, { children: item.Details?.fileObjects.map((fileItem, index) => /* @__PURE__ */ jsxs11(SubDataTableBodyRowContainer, { children: [
+      /* @__PURE__ */ jsx34("td", { children: /* @__PURE__ */ jsx34(DownloadArrow, { onClick: downloadArrowOnClick, children: /* @__PURE__ */ jsx34("svg", { width: "17", height: "16", viewBox: "0 0 17 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34(
         "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",
@@ -2884,32 +3440,32 @@ var ChildDataTable = ({ data, columns, downloadArrowOnClick, downloadMissionOnCl
         const columnKey = trimBeforePeriod2(column.key);
         const value = fileItem[columnKey];
         if (value !== void 0) {
-          return /* @__PURE__ */ jsx33(SubDataTableCell, { children: /* @__PURE__ */ jsx33("span", { children: value }, `span-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`) }, `fileitem-${item}-${item.Details?.relationId}-${fileItem.id}-${index}-${column.title}`);
+          return /* @__PURE__ */ jsx34(SubDataTableCell, { children: /* @__PURE__ */ jsx34("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__ */ jsxs9(BodyRowContainer, { children: [
-    /* @__PURE__ */ jsx33(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx33(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
-    /* @__PURE__ */ jsxs9(ButtonStylingRow, { children: [
-      /* @__PURE__ */ jsx33(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
-      /* @__PURE__ */ jsx33(AddButton, { onClick: addFilesOnClick, children: "Add files" })
+  const dataRows = processedRowData?.map((item, index) => /* @__PURE__ */ jsxs11(BodyRowContainer, { children: [
+    /* @__PURE__ */ jsx34(TableRow, { $amountofColumns: HeadColumns.length, children: HeadColumns.map((column) => /* @__PURE__ */ jsx34(TableBodyCell, { $primaryBoldState: column.PrimaryBoldText, children: item[column.key] }, `TableBodycell-${item.id}-${column.key}`)) }),
+    /* @__PURE__ */ jsxs11(ButtonStylingRow, { children: [
+      /* @__PURE__ */ jsx34(DownloadMissionButton, { onClick: downloadMissionOnClick, children: "Download Mission" }),
+      /* @__PURE__ */ jsx34(AddButton, { onClick: addFilesOnClick, children: "Add files" })
     ] }),
-    openRow !== item.id && /* @__PURE__ */ jsx33(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx33("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
-    openRow === item.id && /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsxs9(SubDataTable, { children: [
-        /* @__PURE__ */ jsx33(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs9(SubDataTableHeaderRow, { children: [
-          /* @__PURE__ */ jsx33("th", {}),
+    openRow !== item.id && /* @__PURE__ */ jsx34(BottomArrowBar, { onClick: () => toggleDropdown(item.id), children: /* @__PURE__ */ jsx34("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("path", { d: "M64 0L44 6L24 0H0L44 14L92 0H64Z", fill: "#7A7A7A" }) }) }),
+    openRow === item.id && /* @__PURE__ */ jsxs11("div", { children: [
+      /* @__PURE__ */ jsxs11(SubDataTable, { children: [
+        /* @__PURE__ */ jsx34(SubDataHeaderColumn, { children: /* @__PURE__ */ jsxs11(SubDataTableHeaderRow, { children: [
+          /* @__PURE__ */ jsx34("th", {}),
           SubDataHeaders
         ] }) }),
-        /* @__PURE__ */ jsx33(SubDataTableBodyRow, { children: subDataRows(item.id) })
+        /* @__PURE__ */ jsx34(SubDataTableBodyRow, { children: subDataRows(item.id) })
       ] }),
-      /* @__PURE__ */ jsx33(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx33("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
+      /* @__PURE__ */ jsx34(BottomUpArrowBar, { onClick: () => toggleUpward(), children: /* @__PURE__ */ jsx34("svg", { width: "92", height: "14", viewBox: "0 0 92 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("path", { d: "M64 14L44 8L24 14H0L44 0L92 14H64Z", fill: "#7A7A7A" }) }) })
     ] })
   ] }, `Bodycontainer-${item.id}-${index}`));
-  return /* @__PURE__ */ jsxs9(TableContainer, { children: [
-    /* @__PURE__ */ jsx33(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
-    /* @__PURE__ */ jsx33("div", { title: "tablebodies", children: dataRows })
+  return /* @__PURE__ */ jsxs11(TableContainer, { children: [
+    /* @__PURE__ */ jsx34(TablePrimaryRow, { $amountofColumns: HeadColumns.length, children: headers }),
+    /* @__PURE__ */ jsx34("div", { title: "tablebodies", children: dataRows })
   ] });
 };
 ChildDataTable.displayName = "ChildDataTable";
@@ -2918,7 +3474,7 @@ ChildDataTable.displayName = "ChildDataTable";
 import { useRef as useRef29, useEffect as useEffect29, useMemo as useMemo4 } from "react";
 import { createRoot } from "react-dom/client";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdownButtonIcon, externalSort, sortKey, sortOrder, onAction, ...rest }) => {
   const tableRef = useRef29(null);
   const cellRoots = useRef29(/* @__PURE__ */ new Map());
@@ -3014,7 +3570,7 @@ var ChildDataTable2 = ({ columns, data, dropdownArrowLocation, sortIcon, dropdow
       dropdownRoots.current.clear();
     };
   }, [data, onAction]);
-  return /* @__PURE__ */ jsx34("wavelength-child-data-table", { ref: tableRef, ...rest });
+  return /* @__PURE__ */ jsx35("wavelength-child-data-table", { ref: tableRef, ...rest });
 };
 ChildDataTable2.displayName = "ChildDataTable";
@@ -3023,9 +3579,9 @@ import { ChildDataTable as ChildDataTable3 } from "@wavelengthusaf/web-component
 // src/components/DataTable/NestedDataTable/NestedDataTable.tsx
 import { useState as useState3 } from "react";
-import styled3 from "styled-components";
-import { Fragment as Fragment6, jsx as jsx35, jsxs as jsxs10 } from "react/jsx-runtime";
-var TableStyle = styled3.table`
+import styled4 from "styled-components";
+import { Fragment as Fragment6, jsx as jsx36, jsxs as jsxs12 } from "react/jsx-runtime";
+var TableStyle = styled4.table`
   width: 100%;
   height: 100%;
   border-collapse: collapse;
@@ -3041,26 +3597,26 @@ var TableStyle = styled3.table`
   margin-right: auto;
   position: absolute;
 `;
-var MainThHeaders = styled3.th`
+var MainThHeaders = styled4.th`
   &:not(:last-child) {
     border-right: 1px solid #c6c7cc;
   }
 `;
-var SubDataTr = styled3.tr`
+var SubDataTr = styled4.tr`
   background-color: white;
   &:nth-child(even) {
     background-color: #e0ffff;
   }
 `;
-var PrimaryTrRows = styled3.tr`
+var PrimaryTrRows = styled4.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
 `;
-var SubTrRows = styled3.tr`
+var SubTrRows = styled4.tr`
   background-color: ${(props) => props.$index % 2 === 0 ? "white" : "#e0ffff"};
   height: 120px;
 `;
-var SubTableStyle = styled3.table`
+var SubTableStyle = styled4.table`
   width: 95%;
   border-collapse: collapse;
   margin-top: -15px;
@@ -3080,7 +3636,7 @@ var SubTableStyle = styled3.table`
     }
   }
 `;
-var DropdownButton = styled3.button`
+var DropdownButton = styled4.button`
   background-color: transparent;
   background-repeat: no-repeat;
   border: none;
@@ -3090,7 +3646,7 @@ var DropdownButton = styled3.button`
   font-weight: bold; /* This makes the UTF symbols bold */
   font-size: 20px;
 `;
-var PrimaryTdSpan = styled3.td`
+var PrimaryTdSpan = styled4.td`
   &:not(:last-child) {
     border-right: 1px solid black;
   }
@@ -3111,57 +3667,57 @@ var NestedDataTable = ({ data, columns, id }) => {
     setPrimaryRowIndex(rowIndex);
   };
   const headers = HeadColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx35(MainThHeaders, { children: column.title }, `headCell-${index}`);
+    return /* @__PURE__ */ jsx36(MainThHeaders, { children: column.title }, `headCell-${index}`);
   });
   const SubDataHeaders = SubDataColumns.map((column, index) => {
-    return /* @__PURE__ */ jsx35("th", { children: column.title }, `SubHeadCell-${index}`);
+    return /* @__PURE__ */ jsx36("th", { children: column.title }, `SubHeadCell-${index}`);
   });
-  const subDataRows = !data?.length ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx35(Fragment6, { children: /* @__PURE__ */ jsx35(SubDataTr, { children: SubDataColumns.map((column, colIndex) => {
+  const subDataRows = !data?.length ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { title: "NoSubDataRows", colSpan: columns.length, children: "No data" }) }) : data.map((item, index) => /* @__PURE__ */ jsx36(Fragment6, { children: /* @__PURE__ */ jsx36(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__ */ jsx35("td", { children: /* @__PURE__ */ jsx35("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
+      return /* @__PURE__ */ jsx36("td", { children: /* @__PURE__ */ jsx36("span", { children: value }) }, `Span-${item.id}-${colIndex}`);
     }
   }) }, `Sub-${item.id}-${index}`) }));
-  const childRows = /* @__PURE__ */ jsxs10(SubTableStyle, { children: [
-    /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsx35("tr", { children: SubDataHeaders }) }),
-    /* @__PURE__ */ jsx35("tbody", { children: subDataRows })
+  const childRows = /* @__PURE__ */ jsxs12(SubTableStyle, { children: [
+    /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsx36("tr", { children: SubDataHeaders }) }),
+    /* @__PURE__ */ jsx36("tbody", { children: subDataRows })
   ] });
-  const rows = !data?.length ? /* @__PURE__ */ jsx35("tr", { children: /* @__PURE__ */ jsx35("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs10(Fragment6, { children: [
-    /* @__PURE__ */ jsxs10(PrimaryTrRows, { $index: index, children: [
-      /* @__PURE__ */ jsx35(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx35(Fragment6, { children: "\u2227" }) : /* @__PURE__ */ jsx35(Fragment6, { children: "\u2228" }) }),
+  const rows = !data?.length ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36("td", { title: "NoDataRows", colSpan: columns.length, children: "No data" }) }) : data?.map((item, index) => /* @__PURE__ */ jsxs12(Fragment6, { children: [
+    /* @__PURE__ */ jsxs12(PrimaryTrRows, { $index: index, children: [
+      /* @__PURE__ */ jsx36(DropdownButton, { onClick: () => toggleDropdown(index), children: isAscending && isOpen && primaryRowIndex === index ? /* @__PURE__ */ jsx36(Fragment6, { children: "\u2227" }) : /* @__PURE__ */ jsx36(Fragment6, { children: "\u2228" }) }),
       HeadColumns.map((column, index2) => {
-        return /* @__PURE__ */ jsx35(PrimaryTdSpan, { children: /* @__PURE__ */ jsx35("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
+        return /* @__PURE__ */ jsx36(PrimaryTdSpan, { children: /* @__PURE__ */ jsx36("span", { title: `spanRow-${item.id}-${column.key}-${index2}`, children: item[column.key] }) }, `${item.id}-${index}=${index2}`);
       })
     ] }, index),
-    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx35(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx35("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
+    isOpen && primaryRowIndex === index && /* @__PURE__ */ jsx36(SubTrRows, { $index: index, children: /* @__PURE__ */ jsx36("td", { colSpan: HeadColumns.length + 1, children: childRows }) }, index)
   ] }));
-  return /* @__PURE__ */ jsx35("div", { id, children: /* @__PURE__ */ jsxs10(TableStyle, { children: [
-    /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
-      /* @__PURE__ */ jsx35("th", { title: "dropdownth" }),
+  return /* @__PURE__ */ jsx36("div", { id, children: /* @__PURE__ */ jsxs12(TableStyle, { children: [
+    /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsxs12("tr", { children: [
+      /* @__PURE__ */ jsx36("th", { title: "dropdownth" }),
       headers
     ] }) }),
-    /* @__PURE__ */ jsx35("tbody", { children: rows })
+    /* @__PURE__ */ jsx36("tbody", { children: rows })
   ] }) });
 };
 NestedDataTable.displayName = "NestedDataTable";
 // src/components/AutoComplete/WavelengthAutoComplete.tsx
 import { useEffect as useEffect30, useRef as useRef31, useState as useState4 } from "react";
-import styled4 from "styled-components";
-import { Fragment as Fragment7, jsx as jsx36, jsxs as jsxs11 } from "react/jsx-runtime";
-var AutoContainer = styled4.div`
+import styled5 from "styled-components";
+import { Fragment as Fragment7, jsx as jsx37, jsxs as jsxs13 } from "react/jsx-runtime";
+var AutoContainer = styled5.div`
   //position: relative;
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
 `;
-var InputWrapper = styled4.div`
+var InputWrapper = styled5.div`
   width: 100%;
   height: 100%;
 `;
-var Label = styled4.label`
+var Label = styled5.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -3173,7 +3729,7 @@ var Label = styled4.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var Input = styled4.input`
+var Input = styled5.input`
   width: 100%; //this must be 100%, as width inherit inherits the literal expression, not the value
   height: 100%;
   padding: 0.5rem 0.75rem;
@@ -3215,7 +3771,7 @@ var Input = styled4.input`
     color: ${(props) => props.$defaultLabelColor || "#ccc"};
   }
 `;
-var DropDownList = styled4.ul`
+var DropDownList = styled5.ul`
   position: absolute;
   z-index: 5;
   width: 100%;
@@ -3229,7 +3785,7 @@ var DropDownList = styled4.ul`
   overflow: scroll; //necessary for limiting scroll options
   max-height: 390px; //necessary for limiting scroll options, limit to 10 per view
 `;
-var ActiveListItem = styled4.li`
+var ActiveListItem = styled5.li`
   position: relative;
   width: 100%;
   z-index: 9999;
@@ -3246,7 +3802,7 @@ var ActiveListItem = styled4.li`
     background-color: #d8d8d8;
   }
 `;
-var NoHoverListItem = styled4.li`
+var NoHoverListItem = styled5.li`
   position: relative;
   z-index: 9999;
   padding: 10px;
@@ -3367,9 +3923,9 @@ var WavelengthAutoComplete = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx36(Fragment7, { children: /* @__PURE__ */ jsxs11(AutoContainer, { $inputHeight: height, $inputWidth: width, children: [
-    /* @__PURE__ */ jsxs11(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height, $inputWidth: width, children: [
-      /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(Fragment7, { children: /* @__PURE__ */ jsxs13(AutoContainer, { $inputHeight: height, $inputWidth: width, children: [
+    /* @__PURE__ */ jsxs13(InputWrapper, { id: `${idName}-input-wrapper`, $inputHeight: height, $inputWidth: width, children: [
+      /* @__PURE__ */ jsx37(
         Input,
         {
           id: idName,
@@ -3398,11 +3954,11 @@ var WavelengthAutoComplete = ({
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ jsx36(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+      /* @__PURE__ */ jsx37(Label, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
     ] }),
-    isDropdownVisible && /* @__PURE__ */ jsx36(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
+    isDropdownVisible && /* @__PURE__ */ jsx37(DropDownList, { id: `${idName}-drop-list`, ref: listRef, $inputWidth: width, "data-testid": "InputSearchOptionsList", children: suggestHasItems ? (
       //suggestions length controls showing the suggestions
-      suggestions.map((item, index) => /* @__PURE__ */ jsx36(
+      suggestions.map((item, index) => /* @__PURE__ */ jsx37(
         ActiveListItem,
         {
           "data-testid": `${idName}-input-search-list-${index + 1}`,
@@ -3415,16 +3971,16 @@ var WavelengthAutoComplete = ({
         },
         `active-list-item-${item}-${index}`
       ))
-    ) : /* @__PURE__ */ jsx36(NoHoverListItem, { "data-testid": "NoOptionsListitem", ref: noItemListRef, id: "No-Option-List-item", onMouseDown: (e) => e.preventDefault(), children: "No Options found" }) })
+    ) : /* @__PURE__ */ jsx37(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 useEffect31, useState as useState5 } from "react";
-import styled5 from "styled-components";
-import { jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
-var Label2 = styled5.label`
+import styled6 from "styled-components";
+import { jsx as jsx38, jsxs as jsxs14 } from "react/jsx-runtime";
+var Label2 = styled6.label`
   position: absolute;
   top: 50%;
   left: 10px;
@@ -3436,7 +3992,7 @@ var Label2 = styled5.label`
   padding: 0 5px;
   background-color: transparent;
 `;
-var InputWrapper2 = styled5.div`
+var InputWrapper2 = styled6.div`
   position: relative;
   width: ${(props) => props.$inputWidth || "320px"};
   height: ${(props) => props.$inputHeight || "51px"};
@@ -3534,7 +4090,7 @@ var WavelengthDatePicker = ({
     setValue(dateString);
     if (OnDataChange !== void 0) OnDataChange(new Date(dateString));
   };
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     InputWrapper2,
     {
       id: `${idName}-inputWrapper`,
@@ -3546,7 +4102,7 @@ var WavelengthDatePicker = ({
       $FocusLabelColor: FocusLabelColor,
       $inputBackGroundColor: backgroundColor,
       children: [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           "input",
           {
             type: inputType,
@@ -3567,7 +4123,7 @@ var WavelengthDatePicker = ({
             max: maxAdjusted
           }
         ),
-        /* @__PURE__ */ jsx37(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
+        /* @__PURE__ */ jsx38(Label2, { id: `${idName}-label`, htmlFor: idName, children: floatLabel })
       ]
     }
   );
@@ -3580,7 +4136,7 @@ import { WavelengthDatePicker as WavelengthDatePicker2 } from "@wavelengthusaf/w
 // src/components/inputs/WavelengthCheckbox.tsx
 import { useRef as useRef32, useEffect as useEffect32 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var WavelengthCheckbox = ({
   size,
   color,
@@ -3615,13 +4171,13 @@ var WavelengthCheckbox = ({
       el.setAttribute("text-size", textSize);
     }
   }, [size, color, theme, disabled, text, textSize]);
-  return /* @__PURE__ */ jsx38("wavelength-checkbox", { ref, ...rest });
+  return /* @__PURE__ */ jsx39("wavelength-checkbox", { ref, ...rest });
 };
 WavelengthCheckbox.displayName = "WavelengthCheckbox";
 // src/components/samples/SampleComponent.tsx
 import { useRef as useRef33, useEffect as useEffect33 } from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var SampleComponent = ({
   testProp,
   children,
@@ -3639,14 +4195,14 @@ var SampleComponent = ({
       el.setAttribute("test-prop", testProp);
     }
   }, [testProp]);
-  return /* @__PURE__ */ jsx39("sample-component", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx40("sample-component", { ref, ...rest, children });
 };
 SampleComponent.displayName = "SampleComponent";
 // src/components/NotificationPanel/WavelengthNotificationPanel.tsx
 import { useRef as useRef34, useEffect as useEffect34 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var WavelengthNotificationPanel = ({
   children,
   username,
@@ -3658,9 +4214,6 @@ var WavelengthNotificationPanel = ({
   useEffect34(() => {
     const el = ref.current;
     if (!el) return;
-    if (typeof rest.onSignOut === "function") {
-      el.onSignOut = rest.onSignOut;
-    }
     if (username !== void 0) {
       el.username = username;
     }
@@ -3668,7 +4221,7 @@ var WavelengthNotificationPanel = ({
       el.actions = action;
     }
   }, [action, username]);
-  return /* @__PURE__ */ jsx40("wavelength-notification-panel", { ref, ...rest, children });
+  return /* @__PURE__ */ jsx41("wavelength-notification-panel", { ref, ...rest, children });
 };
 // src/index.ts
@@ -3676,7 +4229,7 @@ import { SampleComponent as SampleComponent2 } from "@wavelengthusaf/web-compone
 // src/components/MultiSelect/WavelengthMultiSelectAutocomplete.tsx
 import { useEffect as useEffect35, useRef as useRef35 } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Options", label, name, style, onChange, value, disabled, ...rest }) => {
   const componentRef = useRef35(null);
   useEffect35(() => {
@@ -3708,7 +4261,7 @@ var WavelengthMultiSelectAutocomplete = ({ options, placeholder = "Select Option
       component.value = value;
     }
   }, [value]);
-  return /* @__PURE__ */ jsx41("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
+  return /* @__PURE__ */ jsx42("wavelength-multi-select-autocomplete", { ref: componentRef, ...rest });
 };
 // src/index.ts
@@ -3717,7 +4270,7 @@ import { WavelengthMultiSelectAutocomplete as WavelengthMultiSelectAutocomplete2
 // src/components/inputs/WavelengthCheckboxList.tsx
 import { useRef as useRef36, useEffect as useEffect36 } from "react";
 import "@wavelengthusaf/web-components";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var WavelengthCheckboxList = ({ label, helperText, checkboxInformation, children, ...rest }) => {
   const ref = useRef36(null);
   useEffect36(() => {
@@ -3734,7 +4287,7 @@ var WavelengthCheckboxList = ({ label, helperText, checkboxInformation, children
     verifyAttribute("helper-text", helperText);
     verifyAttribute("checkbox-information", JSON.stringify(checkboxInformation));
   }, [label, helperText, checkboxInformation]);
-  return /* @__PURE__ */ jsx42("wavelength-checkbox-list", { ref, "checkbox-information": checkboxInformation, ...rest, children });
+  return /* @__PURE__ */ jsx43("wavelength-checkbox-list", { ref, "checkbox-information": checkboxInformation, ...rest, children });
 };
 WavelengthCheckboxList.displayName = "WavelengthCheckboxList";
 export {
@@ -3763,6 +4316,7 @@ export {
   WavelengthDatePicker2 as WavelengthDatePickerElement,
   WavelengthDefaultIcon,
   WavelengthDialog,
+  WavelengthDragAndDrop,
   WavelengthDropdown,
   WavelengthExampleComponent,
   WavelengthFileDropZone,
@@ -3787,12 +4341,13 @@ export {
   WavelengthSearch,
   WavelengthSideBar,
   WavelengthSlider,
+  WavelengthSnackbar,
   WavelengthSpinningLogo,
+  WavelengthStyledButton,
   WavelengthSwitch,
   WavelengthTitleBar,
   WavelengthTitleBar2 as WavelengthTitleBarElement,
   WavelengthToolTip,
-  WavelengthWebSnackbar,
   add,
   concat,
   useThemeContext