@blerp/design 1.3.17 → 1.4.2

package/dist/cjs/CollectionSkeleton.js

@@ -2,26 +2,87 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
-var styled = require('styled-components');
+var index = require('./index.js');
+var Theme = require('./Theme.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _templateObject, _templateObject2;
-const FeaturedCollectionSkeleton = styled__default['default'].div(_templateObject || (_templateObject = _taggedTemplateLiteral__default['default'](["\n    position: relative;\n    height: 200px;\n    width: 200px;\n    animation: pulse 3s ease-in-out infinite;\n    @keyframes pulse {\n        0% {\n            opacity: 0.7;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0.7;\n        }\n    }\n"])));
-const FeaturedCollectionSquare = styled__default['default'].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default['default'](["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 8px;\n\n    ", ";\n"])), props => props.depth === "1" ? "z-index: 5; background: ".concat(props.theme.colors.grey4, "; ") : props.depth === "2" ? "z-index: 4; \n      background: ".concat(props.theme.colors.grey6, "; \n      transform: skewX(-5deg); \n      left: 8px; \n      height: 94%; \n      bottom: 0") : props.depth === "3" ? "background: ".concat(props.theme.colors.grey7, ";\n      transform: skewX(-10deg); \n      left: 15px; \n      height: 87%; \n      bottom: 0") : "background: ".concat(props.theme.colors.ibisRed));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const CollectionSkeleton = () => {
-  return /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
-    depth: "1"
-  }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
-    depth: "2"
-  }), /*#__PURE__*/React__default['default'].createElement(FeaturedCollectionSquare, {
-    depth: "3"
+  const theme = Theme.useBlerpTheme();
+
+  const getSquareStyles = depth => {
+    const baseStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      borderRadius: "8px"
+    };
+
+    switch (depth) {
+      case "1":
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          zIndex: 5,
+          background: theme.colors.grey4
+        });
+
+      case "2":
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          zIndex: 4,
+          background: theme.colors.grey6,
+          transform: "skewX(-5deg)",
+          left: "8px",
+          height: "94%",
+          bottom: 0
+        });
+
+      case "3":
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          background: theme.colors.grey7,
+          transform: "skewX(-10deg)",
+          left: "15px",
+          height: "87%",
+          bottom: 0
+        });
+
+      default:
+        return _objectSpread(_objectSpread({}, baseStyles), {}, {
+          background: theme.colors.ibisRed
+        });
+    }
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: {
+      position: "relative",
+      height: "200px",
+      width: "200px",
+      animation: "pulse 3s ease-in-out infinite",
+      "@keyframes pulse": {
+        "0%": {
+          opacity: 0.7
+        },
+        "50%": {
+          opacity: 1
+        },
+        "100%": {
+          opacity: 0.7
+        }
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: getSquareStyles("1")
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: getSquareStyles("2")
+  }), /*#__PURE__*/React__default["default"].createElement(index.Box, {
+    sx: getSquareStyles("3")
   }));
 };
 

package/dist/cjs/Dropdown.js

@@ -2,26 +2,100 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var index = require('./index.js');
-var KeyboardArrowDownRoundedIcon = require('@mui/icons-material/KeyboardArrowDownRounded');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var KeyboardArrowDownRoundedIcon__default = /*#__PURE__*/_interopDefaultLegacy(KeyboardArrowDownRoundedIcon);
 
-//     box-shadow: 0px 0px 20px #0000001a;
-//     div:focus {
-//         border: none !important;
-//         box-shadow: 0px 0px 20px #0000001a;
-//     }
-//     & .MuiPaper-root {
-//         background-color: ${(props) => props.theme.colors.grey3};
-//     }
-// `;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-const NewDropdown = _ref => {
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const ChevronIcon = _ref => {
+  let {
+    isOpen,
+    color = "currentColor",
+    size = 20
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      color,
+      transform: isOpen ? "rotate(180deg)" : "rotate(0deg)",
+      transition: "transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+      flexShrink: 0
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M6 9l6 6 6-6",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+}; // Shared menu styling - refined and consistent
+// Shared menu styling - refined and consistent
+
+
+const getMenuPaperStyles = function (anchorWidth) {
+  let customStyles = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return {
+    sx: _objectSpread({
+      "& ul": {
+        padding: "4px"
+      },
+      minWidth: Math.max(anchorWidth || 180, 180),
+      width: "auto",
+      maxWidth: "320px",
+      maxHeight: "400px",
+      backgroundColor: "#FAFAFA",
+      border: "1px solid rgba(0, 0, 0, 0.08)",
+      borderRadius: "8px",
+      boxShadow: "0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08)",
+      marginTop: "4px",
+      overflowY: "auto",
+      overflowX: "hidden"
+    }, customStyles)
+  };
+}; // Shared menu item styling
+
+
+const getMenuItemStyles = isSelected => ({
+  borderRadius: "4px",
+  padding: "10px 12px",
+  margin: "2px 0",
+  minHeight: "40px",
+  transition: "all 0.15s ease",
+  backgroundColor: isSelected ? "rgba(220, 53, 69, 0.08)" : "transparent",
+  "&.Mui-selected": {
+    backgroundColor: "rgba(220, 53, 69, 0.1)"
+  },
+  // ":hover": {
+  //     backgroundColor: "rgba(220, 53, 69, 0.95)",
+  // },
+  ":hover p, :hover .dropdown-item-text": {
+    color: "#FFFFFF"
+  },
+  "&.Mui-selected:hover": {
+    backgroundColor: "rgba(220, 53, 69, 0.95)"
+  },
+  // "&.Mui-selected p, &.Mui-selected .dropdown-item-text": {
+  //     color: "#DC3545",
+  //     fontWeight: 500,
+  // },
+  "& p": {
+    transition: "color 0.15s ease"
+  }
+});
+
+const NewDropdown = _ref2 => {
   let {
     buttonTitle,
     buttonLabel,
@@ -32,78 +106,101 @@ const NewDropdown = _ref => {
     startIcon,
     endIcon,
     options
-  } = _ref;
+  } = _ref2;
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
+  const [buttonWidth, setButtonWidth] = React.useState(0);
+  const buttonRef = React.useRef(null);
+  const open = Boolean(anchorEl); // Measure button width on mount and resize
 
-  const handleClick = event => {
-    // console.log(options);
-    setAnchorEl(event.currentTarget);
-  };
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (buttonRef.current) {
+        setButtonWidth(buttonRef.current.getBoundingClientRect().width);
+      }
+    };
 
-  const handleClose = () => {
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  const handleClick = React.useCallback(event => {
+    setAnchorEl(event.currentTarget);
+    setButtonWidth(event.currentTarget.getBoundingClientRect().width);
+  }, []);
+  const handleClose = React.useCallback(() => {
     setAnchorEl(null);
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    onClick: e => handleClick(e),
-    variant: "contained",
+  }, []);
+  const handleOptionSelect = React.useCallback(option => {
+    handleOptionClicked(option);
+    handleClose();
+  }, [handleOptionClicked, handleClose]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Button, {
+    ref: buttonRef,
+    onClick: handleClick,
+    variant: buttonVariant || "contained",
     color: "waxwing",
-    icon: true,
     disableElevation: true,
-    sx: {
-      borderRadius: "4px",
+    "aria-haspopup": "listbox",
+    "aria-expanded": open,
+    sx: _objectSpread({
+      borderRadius: "8px",
       color: "notBlack.main",
-      padding: "14px",
+      padding: "12px 16px",
       position: "relative",
-      ...buttonStyle
-    }
-  }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(index.Text, {
+      minWidth: "140px",
+      border: open ? "1px solid rgba(220, 53, 69, 0.5)" : "1px solid rgba(0, 0, 0, 0.12)",
+      transition: "all 0.2s ease",
+      "&:hover": {
+        borderColor: "rgba(220, 53, 69, 0.3)",
+        backgroundColor: "rgba(250, 250, 250, 1)"
+      }
+    }, buttonStyle)
+  }, buttonLabel && /*#__PURE__*/React__default["default"].createElement(index.Text, {
     noWrap: true,
-    fontSize: "0.75em",
-    color: "grey4.main",
-    fontWeight: "400",
+    fontSize: "11px",
+    color: "whiteOverride.main",
+    fontWeight: "500",
     sx: {
       position: "absolute",
-      top: "-9px",
-      left: "10px",
-      padding: "0 5px",
-      backgroundColor: "inherit"
+      top: "-8px",
+      left: "12px",
+      padding: "0 6px",
+      backgroundColor: "inherit",
+      letterSpacing: "0.02em",
+      textTransform: "uppercase"
     }
-  }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+  }, buttonLabel), /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    width: "100%"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    width: "100%",
+    gap: 1
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
+    gap: 1,
     overflow: "hidden",
-    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
-  }, startIcon, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    flex: 1
+  }, startIcon, /*#__PURE__*/React__default["default"].createElement(index.Text, {
     noWrap: true,
-    fontSize: "1rem",
-    color: "grey5.main",
-    marginRight: "16px"
-  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
+    fontSize: "14px",
+    color: "darkscale2.main",
     sx: {
-      color: "grey5.main"
-    },
-    fontSize: "medium"
-  }))), /*#__PURE__*/React__default['default'].createElement(index.Menu, {
-    id: "demo-customized-menu",
+      fontWeight: 500
+    }
+  }, buttonTitle)), endIcon || /*#__PURE__*/React__default["default"].createElement(ChevronIcon, {
+    isOpen: open,
+    color: "rgba(255, 255, 255, 0.54)"
+  }))), /*#__PURE__*/React__default["default"].createElement(index.Menu, {
+    id: "new-dropdown-menu",
     MenuListProps: {
-      "aria-labelledby": "demo-customized-button"
+      "aria-labelledby": "dropdown-button",
+      role: "listbox"
     },
     anchorEl: anchorEl,
     open: open,
     onClose: handleClose,
     elevation: 0,
-    sx: {
-      top: "10px"
-    },
     anchorOrigin: {
       vertical: "bottom",
       horizontal: "left"
@@ -112,47 +209,35 @@ const NewDropdown = _ref => {
       vertical: "top",
       horizontal: "left"
     },
-    PaperProps: {
-      sx: {
-        "& ul": {
-          padding: "0"
-        },
-        width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
-        backgroundColor: "waxwing.main",
-        boxShadow: "0px 0px 20px #0000001a;",
-        ...paperStyle
-      }
-    }
-  }, options === null || options === void 0 ? void 0 : options.map(option => /*#__PURE__*/React__default['default'].createElement(index.MenuItem, {
-    key: "dropdown-".concat(option.name),
+    TransitionProps: {
+      timeout: 200
+    },
+    PaperProps: getMenuPaperStyles(buttonWidth, paperStyle)
+  }, options === null || options === void 0 ? void 0 : options.map((option, index$1) => /*#__PURE__*/React__default["default"].createElement(index.MenuItem, {
+    key: option.id || option.name || "dropdown-".concat(index$1),
     selected: buttonTitle === option.name,
+    role: "option",
+    "aria-selected": buttonTitle === option.name,
+    sx: getMenuItemStyles(buttonTitle === option.name),
+    onClick: () => handleOptionSelect(option)
+  }, option.startImageIcon && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    mr: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }, option.startImageIcon), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    noWrap: true,
+    className: "dropdown-item-text",
     sx: {
-      borderRadius: "4px",
-      "&.Mui-selected": {
-        backgroundColor: "ibisRed.main"
-      },
-      ":hover": {
-        backgroundColor: "ibisRed.main"
-      },
-      ":hover p": {
-        color: "white.override"
-      },
-      "&.Mui-selected:hover": {
-        backgroundColor: "ibisRed.main"
-      },
-      "&.Mui-selected p": {
-        color: "white.override"
-      }
-    },
-    onClick: () => {
-      handleOptionClicked(option);
-      handleClose();
+      fontSize: "14px",
+      flex: 1
     }
-  }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    noWrap: true
-  }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))));
+  }, option.name), option.endImageIcon && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    ml: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }, option.endImageIcon)))));
 };
-const Dropdown = _ref2 => {
+const Dropdown = _ref3 => {
   let {
     buttonTitle,
     buttonLabel,
@@ -163,72 +248,99 @@ const Dropdown = _ref2 => {
     startIcon,
     endIcon,
     options
-  } = _ref2;
+  } = _ref3;
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const open = Boolean(anchorEl);
+  const [buttonWidth, setButtonWidth] = React.useState(0);
+  const buttonRef = React.useRef(null);
+  const open = Boolean(anchorEl); // Measure button width properly
 
-  const handleClick = event => {
-    // console.log(options);
-    setAnchorEl(event.currentTarget);
-  };
+  React.useEffect(() => {
+    const updateWidth = () => {
+      if (buttonRef.current) {
+        setButtonWidth(buttonRef.current.getBoundingClientRect().width);
+      }
+    };
 
-  const handleClose = () => {
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, []);
+  const handleClick = React.useCallback(event => {
+    setAnchorEl(event.currentTarget);
+    setButtonWidth(event.currentTarget.getBoundingClientRect().width);
+  }, []);
+  const handleClose = React.useCallback(() => {
     setAnchorEl(null);
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index.Button, {
-    onClick: e => handleClick(e),
-    variant: "contained",
+  }, []);
+  const handleOptionSelect = React.useCallback(option => {
+    handleOptionClicked(option);
+    handleClose();
+  }, [handleOptionClicked, handleClose]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(index.Button, {
+    ref: buttonRef,
+    onClick: handleClick,
+    variant: buttonVariant || "contained",
     color: "waxwing",
-    icon: true,
     disableElevation: true,
-    sx: {
-      borderRadius: "4px",
+    "aria-haspopup": "listbox",
+    "aria-expanded": open,
+    sx: _objectSpread({
+      borderRadius: "8px",
       color: "notBlack.main",
-      paddingRight: "4px",
-      paddingLeft: "4px",
-      ...buttonStyle
-    }
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+      padding: "8px 12px",
+      minWidth: "120px",
+      border: open ? "1px solid rgba(220, 53, 69, 0.5)" : "1px solid rgba(0, 0, 0, 0.08)",
+      transition: "all 0.2s ease",
+      "&:hover": {
+        borderColor: "rgba(220, 53, 69, 0.25)",
+        backgroundColor: "rgba(250, 250, 250, 1)"
+      }
+    }, buttonStyle)
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    width: "100%"
-  }, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    width: "100%",
+    gap: 1
+  }, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     direction: "row",
     alignItems: "center",
+    gap: 1.5,
     overflow: "hidden",
-    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
-  }, startIcon, /*#__PURE__*/React__default['default'].createElement(index.Stack, {
+    flex: 1
+  }, startIcon, /*#__PURE__*/React__default["default"].createElement(index.Stack, {
     alignItems: "flex-start",
-    marginLeft: "12px"
-  }, buttonLabel && /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    overflow: "hidden"
+  }, buttonLabel && /*#__PURE__*/React__default["default"].createElement(index.Text, {
     noWrap: true,
-    fontSize: "8px",
+    fontSize: "10px",
     color: "grey4.main",
-    fontWeight: "light"
-  }, buttonLabel), /*#__PURE__*/React__default['default'].createElement(index.Text, {
+    fontWeight: "500",
+    sx: {
+      letterSpacing: "0.04em",
+      textTransform: "uppercase",
+      marginBottom: "-2px"
+    }
+  }, buttonLabel), /*#__PURE__*/React__default["default"].createElement(index.Text, {
     noWrap: true,
     fontSize: "14px",
     color: "grey5.main",
-    marginRight: "16px"
-  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React__default['default'].createElement(KeyboardArrowDownRoundedIcon__default['default'], {
     sx: {
-      color: "grey5.main"
-    },
-    fontSize: "medium"
-  }))), /*#__PURE__*/React__default['default'].createElement(index.Menu, {
-    id: "demo-customized-menu",
+      fontWeight: 500
+    }
+  }, buttonTitle))), endIcon || /*#__PURE__*/React__default["default"].createElement(ChevronIcon, {
+    isOpen: open,
+    color: "rgba(0, 0, 0, 0.54)"
+  }))), /*#__PURE__*/React__default["default"].createElement(index.Menu, {
+    id: "dropdown-menu",
     MenuListProps: {
-      "aria-labelledby": "demo-customized-button"
+      "aria-labelledby": "dropdown-button",
+      role: "listbox"
     },
     anchorEl: anchorEl,
     open: open,
     onClose: handleClose,
     elevation: 0,
-    sx: {
-      top: "10px"
-    },
     anchorOrigin: {
       vertical: "bottom",
       horizontal: "left"
@@ -237,47 +349,35 @@ const Dropdown = _ref2 => {
       vertical: "top",
       horizontal: "left"
     },
-    PaperProps: {
-      sx: {
-        "& ul": {
-          padding: "0"
-        },
-        width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width,
-        backgroundColor: "waxwing.main",
-        boxShadow: "0px 0px 20px #0000001a;",
-        ...paperStyle
-      }
-    }
-  }, options === null || options === void 0 ? void 0 : options.map(option => /*#__PURE__*/React__default['default'].createElement(index.MenuItem, {
-    key: "dropdown-".concat(option.name),
+    TransitionProps: {
+      timeout: 200
+    },
+    PaperProps: getMenuPaperStyles(buttonWidth, paperStyle)
+  }, options === null || options === void 0 ? void 0 : options.map((option, index$1) => /*#__PURE__*/React__default["default"].createElement(index.MenuItem, {
+    key: option.id || option.name || "dropdown-".concat(index$1),
     selected: buttonTitle === option.name,
+    role: "option",
+    "aria-selected": buttonTitle === option.name,
+    sx: getMenuItemStyles(buttonTitle === option.name),
+    onClick: () => handleOptionSelect(option)
+  }, option.startImageIcon && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    mr: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }, option.startImageIcon), /*#__PURE__*/React__default["default"].createElement(index.Text, {
+    noWrap: true,
+    className: "dropdown-item-text",
     sx: {
-      borderRadius: "4px",
-      "&.Mui-selected": {
-        backgroundColor: "ibisRed.main"
-      },
-      ":hover": {
-        backgroundColor: "ibisRed.main"
-      },
-      ":hover p": {
-        color: "white.override"
-      },
-      "&.Mui-selected:hover": {
-        backgroundColor: "ibisRed.main"
-      },
-      "&.Mui-selected p": {
-        color: "white.override"
-      }
-    },
-    onClick: () => {
-      handleOptionClicked(option);
-      handleClose();
+      fontSize: "14px",
+      flex: 1
     }
-  }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null), /*#__PURE__*/React__default['default'].createElement(index.Text, {
-    noWrap: true
-  }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null)))));
+  }, option.name), option.endImageIcon && /*#__PURE__*/React__default["default"].createElement(index.Stack, {
+    ml: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  }, option.endImageIcon)))));
 };
 
 exports.Dropdown = Dropdown;
 exports.NewDropdown = NewDropdown;
-exports.default = Dropdown;
+exports["default"] = Dropdown;