@blerp/design 1.2.74 → 1.2.76

package/dist/esm/CollectionListViewPremium.js

@@ -0,0 +1,354 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
+import BookmarkOutlinedIcon from '@mui/icons-material/BookmarkOutlined';
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import 'prop-types';
+import React, { useState, useContext } from 'react';
+import { usePalette } from 'react-palette';
+import styled, { ThemeContext } from 'styled-components';
+import { Stack, Text, IconButton } from './index.js';
+import { useWindowSize } from './ScreenSizeHook.js';
+import { DiamondIcon } from './Icons/Icons.js';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+const MasterContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    /* The extra 4 pixels accounts for the width of the border in the transparent BlerpListView border */\n    height: ", ";\n    width: ", ";\n    min-width: ", ";\n    border-radius: 8px;\n    background-origin: border-box;\n    background-clip: content-box, border-box;\n    box-shadow: 2px 2px 4px 0px #999999a1;\n    position: relative;\n\n    #second-button {\n        opacity: 0;\n        margin-left: 0px;\n        margin-right: 15px;\n    }\n\n    :hover #yellow-border {\n        opacity: 1;\n    }\n    :hover #second-button {\n        opacity: 1;\n        margin-left: 5px;\n        margin-right: 10px;\n    }\n    :hover #mid-box {\n        width: 96%;\n    }\n    :hover #back-box {\n        width: ", ";\n    }\n"])), _ref => {
+  let {
+    sizeParams
+  } = _ref;
+  return (sizeParams.height += 2) + "px";
+}, _ref2 => {
+  let {
+    sizeParams
+  } = _ref2;
+  return sizeParams.width;
+}, _ref3 => {
+  let {
+    fluid
+  } = _ref3;
+  return fluid ? "300px" : "0";
+}, props => props.owned ? "102%" : "100%");
+const YellowHoverBorder = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 113%;\n    width: 102%;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    border: 3px solid rgb(255, 225, 76);\n    border-radius: 14px;\n    transition: opacity 0.2s ease-in-out;\n    opacity: 0;\n"])));
+const TopBox = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    z-index: 3;\n    border: 2px transparent;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background-color: ", ";\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    position: relative;\n    overflow: hidden;\n"])), props => props.theme.colors.white);
+const MidBox = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 2;\n    position: absolute;\n    background-color: ", ";\n    width: 95%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), props => props.theme.colors.grey5);
+const BackBox = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    background-color: blue;\n    background-color: ", ";\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    transition: 0.2s;\n    overflow: hidden;\n"])), props => props.theme.colors.grey7);
+const PhotoBackground = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-image: url(", ");\n    background-size: cover;\n    border-radius: 8px;\n    overflow: hidden;\n    background-position: center;\n"])), props => props.url);
+const BlurBackground = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    position: absolute;\n    width: 100%;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    backdrop-filter: blur(4px);\n"])));
+const GradientBackground = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%;\n    opacity: 0.7;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 8px;\n    width: 100%;\n    height: 100%;\n"])));
+const InteractionBox = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: calc(100% - 4px);\n    height: 100%;\n    border-radius: 8px;\n    border-right-width: 0px;\n    border-left-width: 0px;\n    margin: 0 auto;\n    transition: 0.2s;\n    position: relative;\n"]))); // Box on the left of the Collection that is clicked to save/unsave
+
+const SaveBox = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: relative;\n    border-radius: 4px;\n    transition: 0.2s;\n    box-shadow: 0px 0px 0px 0px #999999a1;\n    cursor: pointer;\n\n    &:hover {\n        transform: scale(1.05);\n    }\n"])));
+const SaveBoxTop = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    z-index: 5;\n    width: 100%;\n    position: relative;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 4px;\n    transition: 0.4s;\n\n    &:hover {\n        background-color: ", "98;\n    }\n"])), props => props.theme.colors.notBlackOverride);
+const SaveBoxTopDarken = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    opacity: 1;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    border-radius: 4px;\n"])));
+const SaveBoxShadowSquare = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    border-radius: 4px;\n    ", ";\n"])), props => props.depth === "1" ? "\n      transform: skewX(-5deg); \n      left: 2px; \n      height: 94%; \n      bottom: 0" : props.depth === "2" ? "\n      transform: skewX(-12deg); \n      left: 5px; \n      height: 83%; \n      width:97%;\n      bottom: 0" : "");
+const CollectionListViewPremium = _ref4 => {
+  var _collection$image, _collection$image$ori, _collection$image2, _collection$image2$or;
+
+  let {
+    collection,
+    variantSize,
+    extraInfoComponent,
+    primaryActionButton,
+    secondaryActionButton,
+    handleClickBackground,
+    handleClickTitle,
+    isLinkTitle,
+    fluid
+  } = _ref4;
+  useState(false); // Will use this exclusively for picking colors from image...no ColorExtractor
+
+  const {
+    loading,
+    data,
+    error
+  } = usePalette(collection === null || collection === void 0 ? void 0 : (_collection$image = collection.image) === null || _collection$image === void 0 ? void 0 : (_collection$image$ori = _collection$image.original) === null || _collection$image$ori === void 0 ? void 0 : _collection$image$ori.url);
+  const theme = useContext(ThemeContext);
+  const size = useWindowSize();
+  console.log("Collleeeeection", collection);
+  let sizeParams;
+  const smallSize = {
+    width: "300px",
+    height: 40,
+    fontSize: "16px",
+    saveBoxSize: "36px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "20px",
+    buttonSize: "small"
+  };
+  const mediumSize = {
+    width: "375px",
+    height: 48,
+    fontSize: "18px",
+    saveBoxSize: "44px",
+    reactionSpacing: 1,
+    reactionPadding: "3px",
+    reactionSize: "23px",
+    buttonSize: "medium"
+  };
+  const largeSize = {
+    width: "440px",
+    height: 56,
+    fontSize: "20px",
+    saveBoxSize: "52px",
+    reactionSpacing: 1,
+    reactionPadding: "5px",
+    reactionSize: "30px",
+    buttonFontSize: "large"
+  };
+
+  if (!variantSize) {
+    if (fluid) {
+      sizeParams = {
+        width: "100%",
+        height: 48,
+        fontSize: "18px",
+        saveBoxSize: "44px",
+        reactionSpacing: 1,
+        reactionPadding: "3px",
+        reactionSize: "23px",
+        buttonSize: "medium"
+      };
+    } else if (size.width <= 400) {
+      sizeParams = smallSize;
+    } else if (size.width <= 900) {
+      sizeParams = mediumSize;
+    } else if (size.width > 900) {
+      sizeParams = largeSize;
+    }
+  } else {
+    if (variantSize === "small") {
+      sizeParams = smallSize;
+    } else if (variantSize === "medium") {
+      console.log(variantSize);
+      sizeParams = mediumSize;
+    } else if (variantSize === "large") {
+      sizeParams = largeSize;
+    }
+  }
+
+  return (
+    /*#__PURE__*/
+    // This is the master container. All children's size should be in relation to this box. This box's should not be dependent on its children, but should be dependent on either screen size or the variantSize prop ONLY.
+
+    /* BIG PICTURE OF COMPONENT: 
+    Master Container
+        - TopBox (solid white background)
+            - PhotoBackground (if collection has photo)
+            - BlurBackground (always applied)
+            - Gradient Background (default is photo color --> black, fall back is white --> black)
+            - Interaction Box (holds clickable elements)
+        - MidBox (first "shadow")
+        - BackBox (second "shadow")
+    */
+    React.createElement(MasterContainer, {
+      owned: collection === null || collection === void 0 ? void 0 : collection.owned,
+      sizeParams: sizeParams,
+      fluid: fluid
+    }, !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement(YellowHoverBorder, {
+      id: "yellow-border"
+    }), /*#__PURE__*/React.createElement(TopBox, {
+      onClick: e => {
+        e.stopPropagation();
+        handleClickBackground();
+      },
+      style: {
+        borderBottomColor: extraInfoComponent && theme.colors.grey3,
+        width: !(collection !== null && collection !== void 0 && collection.owned) ? "100%" : "90%"
+      }
+    }, /*#__PURE__*/React.createElement(PhotoBackground, {
+      url: collection === null || collection === void 0 ? void 0 : (_collection$image2 = collection.image) === null || _collection$image2 === void 0 ? void 0 : (_collection$image2$or = _collection$image2.original) === null || _collection$image2$or === void 0 ? void 0 : _collection$image2$or.url
+    }), /*#__PURE__*/React.createElement(BlurBackground, null), /*#__PURE__*/React.createElement(GradientBackground, {
+      style: {
+        background: "linear-gradient(135deg,".concat(data.vibrant || "rgb(204,204,204)", ", #444444)")
+      }
+    }), /*#__PURE__*/React.createElement(InteractionBox, {
+      style: {
+        borderBottomColor: extraInfoComponent && theme.colors.grey3
+      }
+    }, /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      sx: {
+        position: "relative",
+        width: "calc(100% - 180px)",
+        left: "2px"
+      }
+    }, /*#__PURE__*/React.createElement(SaveBox, {
+      style: {
+        width: sizeParams.saveBoxSize,
+        height: sizeParams.saveBoxSize
+      },
+      onClick: e => {
+        console.log("handle save/unsave here");
+      }
+    }, /*#__PURE__*/React.createElement(SaveBoxTop, {
+      style: {
+        width: sizeParams.saveBoxSize,
+        height: sizeParams.saveBoxSize,
+        background: data.darkVibrant || "#999999"
+      }
+    }, /*#__PURE__*/React.createElement(SaveBoxTopDarken, {
+      style: {
+        background: "linear-gradient(".concat("rgba(0,0,0,0)", ", #000000)")
+      }
+    }), collection !== null && collection !== void 0 && collection.saved ? /*#__PURE__*/React.createElement(BookmarkOutlinedIcon, {
+      sx: {
+        width: "30px",
+        height: "30px",
+        color: "white.override",
+        position: "relative",
+        bottom: "1px"
+      }
+    }) : /*#__PURE__*/React.createElement(BookmarkAddOutlinedIcon, {
+      sx: {
+        width: "30px",
+        height: "30px",
+        color: "white.override",
+        position: "relative",
+        bottom: "1px"
+      }
+    })), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement(SaveBoxShadowSquare, {
+      depth: "2",
+      style: {
+        background: "linear-gradient(".concat(data.darkVibrant || "rgba(180,180,180,1)", ", rgba(0,0,0,1))")
+      }
+    }), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement(SaveBoxShadowSquare, {
+      depth: "1",
+      style: {
+        background: "linear-gradient(".concat(data.darkVibrant || "rgba(230,230,230,1)", ", rgba(0,0,0,0))")
+      }
+    })), isLinkTitle ? /*#__PURE__*/React.createElement("a", {
+      href: "/sound-collection/".concat(collection._id),
+      style: {
+        textDecoration: "none",
+        width: "calc(95% - ".concat(sizeParams.saveBoxSize, ")"),
+        position: "relative",
+        left: "12px"
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      textAlign: "left",
+      fontSize: sizeParams.fontSize,
+      noWrap: true,
+      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
+      sx: {
+        ":hover": {
+          textDecoration: handleClickTitle ? "underline" : "none"
+        },
+        "@media (max-width: 600px)": {
+          maxWidth: "133px"
+        }
+      },
+      onClick: e => {
+        if (handleClickTitle) {
+          e.stopPropagation();
+          handleClickTitle();
+        }
+      }
+    }, collection.title)) : /*#__PURE__*/React.createElement(Text, {
+      textAlign: "left",
+      fontSize: sizeParams.fontSize,
+      noWrap: true,
+      color: collection !== null && collection !== void 0 && collection.image ? "white.override" : "notBlack",
+      sx: {
+        position: "relative",
+        left: "12px",
+        ":hover": {
+          textDecoration: handleClickTitle ? "underline" : "none"
+        },
+        "@media (max-width: 600px)": {
+          maxWidth: "133px"
+        }
+      },
+      onClick: e => {
+        console.log("handle non-linkTitle click here");
+      }
+    }, collection.title)), /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      sx: {
+        height: "70%"
+      }
+    }, primaryActionButton ? primaryActionButton : /*#__PURE__*/React.createElement(Stack, {
+      direction: "row",
+      justifyContent: "space-around",
+      alignItems: "center",
+      sx: {
+        height: "100%",
+        width: "102px",
+        position: "relative"
+      }
+    }, /*#__PURE__*/React.createElement(Stack, {
+      sx: {
+        borderRadius: "20px",
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        left: "0",
+        right: "0",
+        backgroundColor: "notBlack.main",
+        opacity: ".5"
+      }
+    }), /*#__PURE__*/React.createElement(DiamondIcon, {
+      sx: {
+        opacity: "1",
+        zIndex: "2",
+        color: "white.override",
+        height: "18px"
+      }
+    }), /*#__PURE__*/React.createElement(Text, {
+      sx: {
+        zIndex: "2",
+        color: "white.override",
+        fontWeight: "lighter",
+        fontSize: "14px",
+        cursor: "default",
+        position: "relative",
+        right: !(collection !== null && collection !== void 0 && collection.owned) ? "-2px" : "6px"
+      }
+    }, "Premium"), !(collection !== null && collection !== void 0 && collection.owned) && /*#__PURE__*/React.createElement(LockRoundedIcon, {
+      sx: {
+        zIndex: "2",
+        color: "white.override",
+        height: "14px"
+      }
+    })), secondaryActionButton || /*#__PURE__*/React.createElement(IconButton, {
+      id: "second-button",
+      onClick: e => {
+        console.log("handle secondary button click here");
+      },
+      sx: {
+        padding: "5px",
+        transition: "opacity .4s ease-in-out, margin-left .4s ease-in-out, margin-right .4s ease-in-out",
+        "&:hover": {
+          backgroundColor: "grey6.main"
+        }
+      }
+    }, /*#__PURE__*/React.createElement(Stack, {
+      sx: {
+        borderRadius: "20px",
+        position: "absolute",
+        top: "0",
+        bottom: "0",
+        left: "0",
+        right: "0",
+        backgroundColor: "notBlack.main",
+        opacity: ".5"
+      }
+    }), /*#__PURE__*/React.createElement(KeyboardArrowRightRoundedIcon, {
+      sx: {
+        zIndex: "2",
+        color: "white.override"
+      }
+    }))))), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement(MidBox, {
+      id: "mid-box"
+    }), (collection === null || collection === void 0 ? void 0 : collection.owned) && /*#__PURE__*/React.createElement(BackBox, {
+      id: "back-box"
+    }), extraInfoComponent && extraInfoComponent)
+  );
+};
+
+export default CollectionListViewPremium;
+export { CollectionListViewPremium };

package/dist/esm/CollectionSkeleton.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import styled from 'styled-components';
+
+var _templateObject, _templateObject2;
+const FeaturedCollectionSkeleton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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));
+const CollectionSkeleton = () => {
+  return /*#__PURE__*/React.createElement(FeaturedCollectionSkeleton, null, /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
+    depth: "1"
+  }), /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
+    depth: "2"
+  }), /*#__PURE__*/React.createElement(FeaturedCollectionSquare, {
+    depth: "3"
+  }));
+};
+
+export { CollectionSkeleton };

package/dist/esm/Dropdown.js

@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+import { Button, Text, Stack, Menu, MenuItem } from './index.js';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+
+//     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};
+//     }
+// `;
+
+const NewDropdown = _ref => {
+  let {
+    buttonTitle,
+    buttonLabel,
+    buttonStyle,
+    paperStyle,
+    buttonVariant,
+    handleOptionClicked,
+    startIcon,
+    endIcon,
+    options
+  } = _ref;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    // console.log(options);
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: e => handleClick(e),
+    variant: "contained",
+    color: "waxwing",
+    icon: true,
+    disableElevation: true,
+    sx: {
+      borderRadius: "4px",
+      color: "notBlack.main",
+      padding: "14px",
+      position: "relative",
+      ...buttonStyle
+    }
+  }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
+    noWrap: true,
+    fontSize: "0.75em",
+    color: "grey4.main",
+    fontWeight: "400",
+    sx: {
+      position: "absolute",
+      top: "-9px",
+      left: "10px",
+      padding: "0 5px",
+      backgroundColor: "inherit"
+    }
+  }, buttonLabel), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
+  }, startIcon, /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(Text, {
+    noWrap: true,
+    fontSize: "1rem",
+    color: "grey5.main",
+    marginRight: "16px"
+  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React.createElement(KeyboardArrowDownRoundedIcon, {
+    sx: {
+      color: "grey5.main"
+    },
+    fontSize: "medium"
+  }))), /*#__PURE__*/React.createElement(Menu, {
+    id: "demo-customized-menu",
+    MenuListProps: {
+      "aria-labelledby": "demo-customized-button"
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose,
+    elevation: 0,
+    sx: {
+      top: "10px"
+    },
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      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.createElement(MenuItem, {
+    key: "dropdown-".concat(option.name),
+    selected: buttonTitle === option.name,
+    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();
+    }
+  }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+    noWrap: true
+  }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React.createElement(React.Fragment, null)))));
+};
+const Dropdown = _ref2 => {
+  let {
+    buttonTitle,
+    buttonLabel,
+    buttonStyle,
+    paperStyle,
+    buttonVariant,
+    handleOptionClicked,
+    startIcon,
+    endIcon,
+    options
+  } = _ref2;
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = event => {
+    // console.log(options);
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: e => handleClick(e),
+    variant: "contained",
+    color: "waxwing",
+    icon: true,
+    disableElevation: true,
+    sx: {
+      borderRadius: "4px",
+      color: "notBlack.main",
+      paddingRight: "4px",
+      paddingLeft: "4px",
+      ...buttonStyle
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    alignItems: "center",
+    overflow: "hidden",
+    width: "".concat(anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.getBoundingClientRect().width, "px")
+  }, startIcon, /*#__PURE__*/React.createElement(Stack, {
+    alignItems: "flex-start",
+    marginLeft: "12px"
+  }, buttonLabel && /*#__PURE__*/React.createElement(Text, {
+    noWrap: true,
+    fontSize: "8px",
+    color: "grey4.main",
+    fontWeight: "light"
+  }, buttonLabel), /*#__PURE__*/React.createElement(Text, {
+    noWrap: true,
+    fontSize: "14px",
+    color: "grey5.main",
+    marginRight: "16px"
+  }, buttonTitle))), endIcon ? endIcon : /*#__PURE__*/React.createElement(KeyboardArrowDownRoundedIcon, {
+    sx: {
+      color: "grey5.main"
+    },
+    fontSize: "medium"
+  }))), /*#__PURE__*/React.createElement(Menu, {
+    id: "demo-customized-menu",
+    MenuListProps: {
+      "aria-labelledby": "demo-customized-button"
+    },
+    anchorEl: anchorEl,
+    open: open,
+    onClose: handleClose,
+    elevation: 0,
+    sx: {
+      top: "10px"
+    },
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      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.createElement(MenuItem, {
+    key: "dropdown-".concat(option.name),
+    selected: buttonTitle === option.name,
+    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();
+    }
+  }, option.startImageIcon ? option.startImageIcon : /*#__PURE__*/React.createElement(React.Fragment, null), /*#__PURE__*/React.createElement(Text, {
+    noWrap: true
+  }, option.name), option.endImageIcon ? option.endImageIcon : /*#__PURE__*/React.createElement(React.Fragment, null)))));
+};
+
+export default Dropdown;
+export { Dropdown, NewDropdown };