@wavelengthusaf/components 1.3.1 → 1.3.2

package/dist/index.mjs

@@ -5026,41 +5026,87 @@ import React33 from "react";
 import { Menu as MuiMenu } from "@mui/material";
 import { MenuItem as MuiMenuItem, styled as styled5 } from "@mui/material";
 import Grow from "@mui/material/Grow";
-function WavelengthDropdown({ id, width: width2, options, borderColor: borderColor2, backgroundColor: backgroundColor2, anchor, handleClose, button, mySx, hoverColor }) {
-  const open = Boolean(anchor);
+function WavelengthDropdown({ id, options, buttonSx, width: width2, buttonText, menuSx, palette: palette2 }) {
+  const [anchorEl, setAnchorEl] = React33.useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const breweryStyleButton = {
+    backgroundColor: "#d16a2f",
+    color: "white",
+    padding: "12px 16px",
+    width: width2,
+    fontSize: "18px",
+    minWidth: "min-content",
+    borderTopRightRadius: "8px",
+    borderTopLeftRadius: "8px",
+    "&:hover": {
+      backgroundColor: "rgba(228, 119, 57, 1)"
+    }
+  };
+  const breweryDropDownStyle = {
+    backgroundColor: "#FCFAF8",
+    borderColor: "#d16a2f",
+    hoverColor: "rgba(209, 106, 47, 0.1)",
+    width: width2
+  };
+  const defaultDropdownSx = {
+    backgroundColor: "white",
+    borderColor: "blue",
+    hoverColor: "#d4d4e3",
+    width: width2
+  };
+  const defaultsx = menuSx ? __spreadValues(__spreadValues({}, defaultDropdownSx), menuSx) : defaultDropdownSx;
+  let myButtonSx;
+  let myMenusx;
+  if (palette2 === "brewery") {
+    myButtonSx = __spreadValues(__spreadValues({}, breweryStyleButton), buttonSx);
+    myMenusx = __spreadValues(__spreadValues({}, breweryDropDownStyle), menuSx);
+  } else {
+    myButtonSx = buttonSx;
+    myMenusx = defaultsx;
+  }
   const MenuItem2 = styled5(MuiMenuItem)({
     "&.MuiMenuItem-root": {
       "&.Mui-selected": {
-        backgroundColor: `${backgroundColor2}`
+        backgroundColor: `${myMenusx.backgroundColor}`
       },
       "&:hover": {
-        backgroundColor: `${hoverColor}`
+        backgroundColor: `${myMenusx.hoverColor}`
       }
     }
   });
   const MyMenu = styled5(MuiMenu)({
+    top: "-7px",
+    left: "0px",
+    boxSizing: "border-box",
     "& .MuiMenu-paper": {
       borderBottomLeftRadius: "8px",
       borderBottomRightRadius: "8px",
       borderTopRightRadius: "0px",
       borderTopLeftRadius: "0px",
-      backgroundColor: `${backgroundColor2}`
+      width: myMenusx.width,
+      backgroundColor: `${myMenusx.backgroundColor}`
     },
     "& .MuiMenu-list": {
-      width: width2,
-      borderLeft: `1px solid ${borderColor2}`,
-      borderRight: `1px solid ${borderColor2}`,
-      borderBottom: `1px solid ${borderColor2}`,
-      paddingTop: "6px",
-      paddingBottom: "6px"
+      // paddingTop: "6px",
+      // paddingBottom: "6px",
+      borderBottomLeftRadius: "8px",
+      borderBottomRightRadius: "8px",
+      borderLeft: `1px solid ${myMenusx.borderColor}`,
+      borderRight: `1px solid ${myMenusx.borderColor}`,
+      borderBottom: `1px solid ${myMenusx.borderColor}`
     }
   });
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement("div", null, button), /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(WavelengthButton, { variant: "custom", mySx: myButtonSx, onClick: handleClick }, buttonText), /* @__PURE__ */ React33.createElement(
     MyMenu,
     {
       id,
-      sx: mySx,
-      anchorEl: anchor,
+      anchorEl,
       open,
       onClose: handleClose,
       MenuListProps: {