@wavelengthusaf/components 2.3.4 → 2.4.0

package/dist/cjs/index.cjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef2 = REACT_FORWARD_REF_TYPE;
-        var Fragment14 = REACT_FRAGMENT_TYPE;
+        var Fragment15 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo2 = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef2;
-        exports.Fragment = Fragment14;
+        exports.Fragment = Fragment15;
         exports.Lazy = Lazy;
         exports.Memo = Memo2;
         exports.Portal = Portal;
@@ -2903,6 +2903,422 @@ function WavelengthFileDownloader({ fileLoc, fileURL, fileName, button, id }) {
   }
 }
 
+// src/components/buttons/WavelengthButton/WavelengthStyledButton.tsx
+var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
+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 Button3 = _styledcomponents2.default.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 }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, Button3, { type, styles, hoverstyles, disabledstyles, disabled, activestyles, onClick, children: [
+    icon,
+    children
+  ] });
+}
+
 // src/components/containers/WavelengthBox/WavelengthBox.tsx
 var _Grid = require('@mui/material/Grid'); var _Grid2 = _interopRequireDefault(_Grid);
 
@@ -2998,6 +3414,7 @@ var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 =
 var _ListItemText = require('@mui/material/ListItemText'); var _ListItemText2 = _interopRequireDefault(_ListItemText);
 
 
+
 var CustomPopper = (props) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _Popper2.default,
@@ -3035,6 +3452,12 @@ var CustomPopper = (props) => {
     }
   );
 };
+var AutocompleteCustomEndAdornment = _styledcomponents2.default.call(void 0, "div")({
+  position: "absolute",
+  right: "12px",
+  top: "50%",
+  transform: "translate(0, -50%)"
+});
 function WavelengthSearch({
   id,
   mode,
@@ -3055,7 +3478,8 @@ function WavelengthSearch({
   textColor,
   fontSize,
   backgroundColor: backgroundColor2,
-  iconPos = "end"
+  iconPos = "end",
+  clearIconMarginRight
 }) {
   const palette2 = getPalette();
   borderColor2 = borderColor2 ? borderColor2 : "#2D3140";
@@ -3083,7 +3507,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "45px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3095,7 +3524,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
                 type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { sx: { color: textColor }, children }) })
+                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _IconButton2.default, { sx: { color: "white" }, children }) })
               },
               sx: {
                 "& .MuiInputBase-root": {
@@ -3148,7 +3577,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3160,6 +3594,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, backgroundColor: backgroundColor2, height: height2, fontSize },
                 type: "search",
+                endAdornment: null,
                 startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Icon2.default, { sx: { color: textColor, paddingRight: "0px" }, children }) })
               },
               sx: {
@@ -3213,7 +3648,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "50px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3233,7 +3673,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search",
-                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "end", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                endAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, AutocompleteCustomEndAdornment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _IconButton2.default,
                   {
                     sx: { color: textColor },
@@ -3295,7 +3735,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3315,6 +3760,7 @@ function WavelengthSearch({
                 ...params.InputProps,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search",
+                endAdornment: null,
                 startAdornment: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _InputAdornment2.default, { position: "start", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _IconButton2.default,
                   {
@@ -3380,7 +3826,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, results) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: results.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: results.title, secondary: results.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3397,6 +3848,9 @@ function WavelengthSearch({
                 "& .MuiInputBase-root": {
                   height: height2
                 },
+                "& .MuiAutocomplete-endAdornment": {
+                  display: "none"
+                },
                 "&.MuiTextField-root": {
                   "& label": { color: `${textColor}` },
                   "& label.Mui-focused": {
@@ -3444,7 +3898,12 @@ function WavelengthSearch({
             return returnVal;
           },
           options,
-          sx: { width: width2 },
+          sx: {
+            width: width2,
+            "&.MuiAutocomplete-hasClearIcon .MuiOutlinedInput-root": {
+              paddingRight: clearIconMarginRight ? clearIconMarginRight : "15px"
+            }
+          },
           renderOption: (props, options2) => /* @__PURE__ */ _react.createElement.call(void 0, _ListItem2.default, { ...props, key: options2.id }, /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ListItemText2.default, { primary: options2.title, secondary: options2.subtitle })),
           renderInput: (params) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             _TextField2.default,
@@ -3462,6 +3921,7 @@ function WavelengthSearch({
               size,
               InputProps: {
                 ...params.InputProps,
+                endAdornment: null,
                 style: { borderRadius: borderRadius2, color: textColor, fontSize },
                 type: "search"
               },
@@ -4391,21 +4851,40 @@ function WavelengthPlaneTrail({ trailDir = "right", id }) {
 
 
 function WavelengthConfirmationModal(props) {
-  const { show, setShow, handleConfirmationModalOnConfirmProp, id } = props;
+  const { show, setShow, id } = props;
   const handleClose = () => {
     setShow(false);
   };
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { id, "data-testid": "testId-WavelengthConfirmationModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: _optionalChain([props, 'access', _7 => _7.textObj, 'optionalAccess', _8 => _8.title]) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _9 => _9.textObj, 'optionalAccess', _10 => _10.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthConfirmationModalCancelButton", onClick: handleClose, children: "Nevermind" }),
-      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Button, { "data-testid": "testId-WavelengthConfirmationModalConfirmButton", onClick: handleConfirmationModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: [
-        "Yes, ",
-        _optionalChain([props, 'access', _11 => _11.textObj, 'optionalAccess', _12 => _12.purpose])
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Modal, { open: show, onClose: handleClose, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _material.Box,
+    {
+      sx: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)",
+        width: props.width || "451px",
+        // Custom width
+        height: props.height || "256px",
+        // Custom height
+        boxSizing: "border-box",
+        bgcolor: props.backgroundColor || "background.paper",
+        borderRadius: "16px",
+        color: props.textColor || "black",
+        boxShadow: 24,
+        padding: "32px",
+        overflow: "scroll"
+      },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "28px", fontWeight: 500, padding: "0px", marginBottom: "16px", fontFamily: props.fontFamily }, children: _optionalChain([props, 'access', _7 => _7.textObj, 'optionalAccess', _8 => _8.title]) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: { margin: "0px", fontSize: "16px", lineHeight: "19.2px", fontFamily: props.fontFamily, fontWeight: 400, height: "60px" }, children: _optionalChain([props, 'access', _9 => _9.textObj, 'optionalAccess', _10 => _10.dialog]) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", flexDirection: "row", justifyContent: "flex-end", marginTop: "40px", gap: "8px" }, children: [
+          props.cacelButton,
+          props.submitButton
+        ] })
+      ]
+    }
+  ) });
 }
 
 // src/components/modals/WavelengthContentModal.tsx
@@ -4419,11 +4898,11 @@ function WavelengthContentModal(props) {
   };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Dialog, { "data-testid": "testId-WavelengthContentModal", open: show, onClose: handleClose, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description", children: [
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogTitle, { alignContent: `center`, id: "alert-dialog-title", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _material.Box, { display: "flex", alignItems: "center", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _13 => _13.textObj, 'optionalAccess', _14 => _14.title]) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { flexGrow: 1, children: _optionalChain([props, 'access', _11 => _11.textObj, 'optionalAccess', _12 => _12.title]) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Box, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.IconButton, { onClick: handleClose, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Close2.default, {}) }) })
     ] }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _15 => _15.textObj, 'optionalAccess', _16 => _16.dialog]) }) }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _17 => _17.textObj, 'optionalAccess', _18 => _18.purpose]) }) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Typography, { align: "center", children: _optionalChain([props, 'access', _13 => _13.textObj, 'optionalAccess', _14 => _14.dialog]) }) }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.DialogActions, { style: { justifyContent: `center` }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.Button, { "data-testid": "testId-WavelengthContentModalConfirmButton", onClick: handleContentModalOnConfirmProp, color: "primary", variant: "contained", autoFocus: true, children: _optionalChain([props, 'access', _15 => _15.textObj, 'optionalAccess', _16 => _16.purpose]) }) })
   ] });
 }
 
@@ -4434,7 +4913,7 @@ var _MenuItem = require('@mui/material/MenuItem'); var _MenuItem2 = _interopRequ
 
 var _Slide = require('@mui/material/Slide'); var _Slide2 = _interopRequireDefault(_Slide);
 
-var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
 
 
 
@@ -4445,18 +4924,17 @@ var emailStyle = {
   marginTop: 8,
   marginBottom: 8
 };
-function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, emailHoverColor = "blue", id }) {
-  const NavLink = _styledcomponents2.default.a``;
-  const Links = _styledcomponents2.default.call(void 0, NavLink)`
+function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, menuDirection = "top", color: color2, id, border: border2 }) {
+  const Links = _styledcomponents2.default.a`
     color: inherit;
-    textdecoration: none;
+    text-decoration: none;
 
     &:hover,
     &:focus {
-      color: ${emailHoverColor};
+      color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
     &:active {
-      color: ${emailHoverColor};
+      color: ${({ hoverColor }) => hoverColor || "inherit"};
     }
   `;
   const [anchorEl, setAnchorEl] = React.default.useState(null);
@@ -4482,7 +4960,12 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
       {
         id,
         open,
-        sx: { width: width2 },
+        sx: {
+          width: width2,
+          "& .MuiPaper-root": {
+            border: border2
+          }
+        },
         onClose: handleClose,
         anchorEl,
         TransitionComponent: _Slide2.default,
@@ -4494,7 +4977,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
               if (items.itemType === "header") {
                 if (items.link) {
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { fontWeight: "bold" }, children: items.label }) }) }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                   ] }, index);
                 } else {
@@ -4505,13 +4988,13 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
                 }
               } else if (items.itemType === "link") {
                 return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }, index) }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                 ] }, index);
               } else {
                 if (items.link) {
                   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _Box2.default, { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "!important", color: "inherit" }, href: items.link, children: items.label }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "a", { style: { textDecoration: "none", color: "inherit" }, href: items.link, children: items.label }) }),
                     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Divider2.default, {})
                   ] }, index);
                 } else {
@@ -4531,18 +5014,18 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
             } else if (items.end === void 0 || items.end === false || items.end === null) {
               if (items.itemType === "header") {
                 if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor, children: items.label }) }, index);
                 } else {
                   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
                 }
               } else if (items.itemType === "link") {
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { style: { textDecoration: "none" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: items.hoverColor || "", children: items.label }) }, index);
               } else {
                 if (items.link) {
-                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { children: items.label }, index);
+                  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _MenuItem2.default, { href: items.link, children: items.label }, index);
                 } else {
                   if (items.email) {
-                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { style: emailStyle, href: items.email, children: items.label }, index);
+                    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: emailStyle, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.email, hoverColor: items.hoverColor || "blue", children: items.label }) }, index);
                   } else {
                     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { style: customStyle, children: items.label }, index);
                   }
@@ -4562,7 +5045,15 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
 
 var _Grow = require('@mui/material/Grow'); var _Grow2 = _interopRequireDefault(_Grow);
 
-function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText, menuSx, palette: palette2 }) {
+function WavelengthDropdown({
+  id,
+  options,
+  buttonSx,
+  width: width2 = "190px",
+  buttonText,
+  menuSx = { backgroundColor: "#FCFAF8", borderColor: "blue", width: "190px", boxShadow: "none" },
+  palette: palette2
+}) {
   const [anchorEl, setAnchorEl] = React.default.useState(null);
   const open = Boolean(anchorEl);
   const handleClick = (event) => {
@@ -4625,7 +5116,7 @@ function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText,
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      boxShadow: _optionalChain([menuSx, 'optionalAccess', _19 => _19.boxShadow]),
+      boxShadow: _optionalChain([menuSx, 'optionalAccess', _17 => _17.boxShadow]),
       width: myMenusx.width,
       backgroundColor: `${myMenusx.backgroundColor}`
     },
@@ -4753,8 +5244,8 @@ function WavelengthStandardSnackbar({ type, show, icon, horryAlign, vertyAlign,
                 width: width2
               },
               children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { marginTop: 4, gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center" }, id: "snackbar", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: sIcon }),
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { gridColumnStart: 2, gridColumnEnd: 5, textAlign: "center", display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center" }, id: "snackbar", children: [
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { marginTop: "5px" }, children: sIcon }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { fontSize: "1rem", marginLeft: "10px" }, children: message ? message : "Insert Message Here" })
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { style: { gridColumnStart: 6 }, onClick: handleClose, children: closeIcon })
@@ -5307,6 +5798,65 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
   }
 }
 
+// src/components/TextField/WavelengthTextField.tsx
+
+
+
+function WavelengthTextField(props) {
+  const [hasError, setHasError] = _react.useState.call(void 0, false);
+  const handleChange = _react.useCallback.call(void 0, 
+    (event) => {
+      const val = event.target.value;
+      if (props.regex) {
+        setHasError(!props.regex.test(val));
+      }
+    },
+    [props.regex]
+    // Ensures function doesn't change unless `regex` does
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _TextField2.default,
+    {
+      required: props.required,
+      label: props.label,
+      onChange: (e) => {
+        handleChange(e);
+        _optionalChain([props, 'access', _18 => _18.onChange, 'optionalCall', _19 => _19(e)]);
+      },
+      error: hasError,
+      helperText: hasError ? "Invalid Input" : "",
+      sx: {
+        "& .MuiInputBase-root": {
+          height: props.height || "51px",
+          width: props.width || "320px",
+          borderRadius: "8px"
+        },
+        "&.MuiTextField-root": {
+          "& label": { color: !hasError ? props.labelColor || "rgba(89, 99, 129, 1)" : "red" },
+          "& .MuiOutlinedInput-root": {
+            "& fieldset": {
+              border: "1px solid",
+              borderColor: !hasError ? props.borderColor || `rgba(89, 99, 129, 1)` : "red"
+            },
+            "&.Mui-focused fieldset": {
+              borderColor: !hasError ? props.focusColor || `rgba(26, 128, 131, 0.1)` : "red"
+            }
+          }
+        }
+      },
+      placeholder: props.placeholder,
+      InputLabelProps: {
+        shrink: true
+      },
+      InputProps: {
+        style: { color: props.textColor || "inherit" }
+      }
+    }
+  ) });
+}
+
+
+
 
 
 
@@ -5348,7 +5898,7 @@ function DefaultPagination({ totalPages, currentPageNumber, siblingCount = 1, bo
 
 
 
-exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
+exports.AppLogo = AppLogo; exports.ButtonIcon = ButtonIcon; exports.ButtonMenu = ButtonMenu; exports.DefaultCarousel = DefaultCarousel; exports.DefaultIcon = DefaultIcon; exports.DefaultPagination = DefaultPagination; exports.ManyPlanesComponent = ManyPlanesComponent; exports.NotAvailablePage = NotAvailablePage; exports.SearchTextField = SearchTextField; exports.SliderCardCarousel = SliderCardCarousel; exports.TestSnackbar = TestSnackbar; exports.WavelengthAppTheme = WavelengthAppTheme; exports.WavelengthAutocomplete = WavelengthAutocomplete; exports.WavelengthBanner = WavelengthBanner; exports.WavelengthBox = WavelengthBox; exports.WavelengthButton = WavelengthButton; exports.WavelengthConfirmationModal = WavelengthConfirmationModal; exports.WavelengthContentModal = WavelengthContentModal; exports.WavelengthContentPlaceholder = WavelengthContentPlaceholder; exports.WavelengthDropdown = WavelengthDropdown; exports.WavelengthDropdownButton = WavelengthDropdownButton; exports.WavelengthExampleComponent = WavelengthExampleComponent; exports.WavelengthFileDownloader = WavelengthFileDownloader; exports.WavelengthFooter = WavelengthFooter; exports.WavelengthPlaneTrail = WavelengthPlaneTrail; exports.WavelengthPopUpMenu = WavelengthPopUpMenu; exports.WavelengthSearch = WavelengthSearch; exports.WavelengthSideBar = WavelengthSideBar; exports.WavelengthSlider = WavelengthSlider; exports.WavelengthSnackbar = WavelengthSnackbar; exports.WavelengthSpinningLogo = WavelengthSpinningLogo; exports.WavelengthSpinningOuterCircle = WavelengthSpinningOuterCircle; exports.WavelengthStandardSnackbar = WavelengthStandardSnackbar; exports.WavelengthStyledButton = WavelengthStyledButton; exports.WavelengthTextField = WavelengthTextField; exports.WavelengthTitleBar = WavelengthTitleBar; exports.add = add; exports.ascendingRange = ascendingRange; exports.concat = concat; exports.findBestStringMatch = findBestStringMatch; exports.range = range; exports.useOutsideClick = useOutsideClick; exports.useThemeContext = useThemeContext;
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js: