@wavelengthusaf/components 2.3.5 → 2.5.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);
 
@@ -2996,7 +3412,7 @@ var _ListItem = require('@mui/material/ListItem'); var _ListItem2 = _interopRequ
 var _Popper = require('@mui/material/Popper'); var _Popper2 = _interopRequireDefault(_Popper);
 var _Autocomplete = require('@mui/material/Autocomplete'); var _Autocomplete2 = _interopRequireDefault(_Autocomplete);
 var _ListItemText = require('@mui/material/ListItemText'); var _ListItemText2 = _interopRequireDefault(_ListItemText);
-var _styledcomponents = require('styled-components'); var _styledcomponents2 = _interopRequireDefault(_styledcomponents);
+
 
 
 var CustomPopper = (props) => {
@@ -4197,6 +4613,70 @@ function WavelengthSpinningLogo({ svg = /* @__PURE__ */ _jsxruntime.jsx.call(voi
   return loadingSymbol;
 }
 
+// src/components/PageComponents/WavelengthDragAndDrop.tsx
+
+function WavelengthDragAndDrop({
+  width: width2 = "550px",
+  height: height2 = "230px",
+  onFilesSelected,
+  border: border2,
+  textColor,
+  fontSize = "12px",
+  allowedFileMIME,
+  allowedFileExtensions,
+  backgroundColor: backgroundColor2 = "transparent"
+}) {
+  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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      style: {
+        backgroundColor: backgroundColor2,
+        border: border2 ? border2 : "1px dashed rgba(14, 178, 178, 1)",
+        borderRadius: "8px",
+        paddingTop: "10px",
+        boxSizing: "border-box",
+        width: width2,
+        height: height2,
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        overflow: "scroll"
+      },
+      onDrop: handleDrop,
+      onDragOver: (event) => event.preventDefault(),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { fontSize, color: textColor }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "input", { type: "file", hidden: true, multiple: true, id: "browse", onChange: handleFileChange, accept: allowedFileExtensions }),
+        "Drag File here or",
+        " ",
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: "browse", style: { textDecoration: "underline", cursor: "pointer" }, children: "select from files" })
+      ] })
+    }
+  );
+}
+
 // src/components/footers/WavelengthFooter/WavelengthFooter.tsx
 
 var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
@@ -4435,21 +4915,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
@@ -4463,11 +4962,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]) }) })
   ] });
 }
 
@@ -4584,7 +5083,7 @@ function WavelengthPopUpMenu({ menuItems, customIcon = false, width: width2, men
                   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, { style: { textDecoration: "none" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Links, { href: items.link, hoverColor: "", 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, { href: items.link, children: items.label }, index);
@@ -4681,7 +5180,7 @@ function WavelengthDropdown({
       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}`
     },
@@ -5363,6 +5862,67 @@ 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,
+    {
+      type: props.type,
+      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" }
+      }
+    }
+  ) });
+}
+
+
+
+
 
 
 
@@ -5404,7 +5964,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.WavelengthDragAndDrop = WavelengthDragAndDrop; 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: