@telicent-oss/ds 0.22.0 → 0.23.1

package/dist/ds.js

@@ -55046,7 +55046,7 @@ const AppChrome = ({
   ] });
 };
 const Container = (containerProps) => /* @__PURE__ */ jsx$1(Container$1, { ...containerProps });
-const FlexBox = (props) => /* @__PURE__ */ jsx$1(Stack, { ...props, children: props.children });
+const FlexBox = forwardRef((props, ref) => /* @__PURE__ */ jsx$1(Stack, { ref, ...props, children: props.children }));
 const TelicentMark = ({
   width: width2 = 24,
   height: height2 = 24,
@@ -55119,9 +55119,9 @@ const DownArrow = ({
   ...iconProps
 }) => {
   const theme = useTheme$1();
-  return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, css: /* @__PURE__ */ css({
+  return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, size: "sm", css: /* @__PURE__ */ css({
     color: color2 === "primary" ? theme.palette.primary.main : "inherit"
-  }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogY29sb3IgPT09IFwicHJpbWFyeVwiID8gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiBcImluaGVyaXRcIixcbiAgICAgIH19XG4gICAgICB7Li4uaWNvblByb3BzfVxuICAgIC8+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEb3duQXJyb3c7XG4iXX0= */"), ...iconProps });
+  }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIHNpemU9XCJzbVwiXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6IGNvbG9yID09PSBcInByaW1hcnlcIiA/IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluIDogXCJpbmhlcml0XCIsXG4gICAgICB9fVxuICAgICAgey4uLmljb25Qcm9wc31cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRG93bkFycm93O1xuIl19 */"), ...iconProps });
 };
 const Download = ({
   color: color2,
@@ -57729,6 +57729,90 @@ const UserStatus = ({
     /* @__PURE__ */ jsx$1(Grid, { item: true, xs: 5, children: children2 })
   ] })
 ] });
+const DropdownButtonMenuItem = ({
+  onClick,
+  faIcon,
+  id: id2,
+  icon: icon2,
+  value,
+  selected = false
+}) => {
+  const Icon2 = icon2;
+  const theme = useExtendedTheme();
+  return /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onClick(value), id: id2, selected, sx: {
+    display: "flex",
+    alignItems: "center",
+    marginX: 1,
+    borderRadius: "4px",
+    border: "1px solid rgba(0, 0, 0, 0)",
+    "&.Mui-selected.Mui-selected": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+    },
+    "&.Mui-selected.Mui-selected:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+    },
+    "&:hover": {
+      backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+      border: `1px solid ${theme.palette.primary.main}`
+    }
+  }, children: [
+    (Icon2 || faIcon) && /* @__PURE__ */ jsxs(ListItemIcon$1, { children: [
+      Icon2 && /* @__PURE__ */ jsx$1(Icon2, { color: selected ? "primary" : "inherit" }),
+      faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faIcon, fontSize: "medium", color: selected ? theme.palette.primary.main : "white" })
+    ] }),
+    /* @__PURE__ */ jsx$1(ListItemText$1, { children: /* @__PURE__ */ jsx$1(Typography, { variant: "h1", sx: {
+      marginTop: 0.5,
+      fontFamily: "Figtree",
+      fontSize: 16,
+      fontWeight: 400,
+      color: `${selected ? theme.palette.primary.main : "primary"}`,
+      display: "flex",
+      alignItems: "center"
+    }, children: value }) })
+  ] });
+};
+const DropdownButton = ({
+  ariaLabel,
+  id: id2,
+  menuItems
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [selectedMenuItem, setSelectedMenuItem] = useState(menuItems.find((menuItem) => menuItem.default) ?? menuItems[0]);
+  const theme = useExtendedTheme();
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /* @__PURE__ */ jsxs(FlexBox, { children: [
+    /* @__PURE__ */ jsxs(IconButton2, { "aria-label": ariaLabel, "aria-controls": open ? id2 : void 0, "aria-haspopup": "true", sx: {
+      border: 0,
+      "&:hover": {
+        backgroundColor: "rgba(255, 255, 255, 0.08)"
+      }
+    }, "aria-expanded": open ? "true" : void 0, onClick: handleClick, color: "primary", children: [
+      selectedMenuItem.icon && /* @__PURE__ */ jsx$1(selectedMenuItem.icon, { color: "primary", className: "mr-2" }),
+      selectedMenuItem.faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: selectedMenuItem.faIcon, fontSize: "medium", color: theme.palette.primary.main ?? "white", className: "mr-2" }),
+      /* @__PURE__ */ jsx$1(DownArrow, {})
+    ] }),
+    /* @__PURE__ */ jsx$1(Menu, { id: id2, anchorEl, open, transformOrigin: {
+      vertical: -20,
+      horizontal: "left"
+    }, onClose: handleClose, MenuListProps: {
+      "aria-labelledby": id2
+    }, sx: {
+      "& .MuiPaper-root": {
+        backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+      }
+    }, children: menuItems.map((menuItem, index) => /* @__PURE__ */ jsx$1(DropdownButtonMenuItem, { id: `${id2}-item-${index}`, onClick: () => {
+      menuItem.onClick(menuItem.value);
+      setSelectedMenuItem(menuItem);
+      handleClose();
+    }, icon: menuItem == null ? void 0 : menuItem.icon, faIcon: menuItem == null ? void 0 : menuItem.faIcon, value: menuItem.value, selected: menuItem.value === selectedMenuItem.value }, `${id2}-item-${index}`)) })
+  ] });
+};
 const LinearProgress2 = ({
   // isActive,
   // transition = 500,
@@ -57785,6 +57869,7 @@ const Button2 = forwardRef((props, ref) => {
   if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps, ref });
   if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps, ref });
   if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps, ref });
+  if (variant === "noStyle") return /* @__PURE__ */ jsx$1(ButtonBase, { ...buttonProps, ref });
   return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
 });
 const TextField2 = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
@@ -80696,6 +80781,7 @@ export {
   DownArrow as DownArrowIcon,
   Download as DownloadIcon,
   DragHandleIcon,
+  DropdownButton,
   ENCODE_SEARCH_PARAMS_MODES_Schema,
   FeatureMap,
   Panel as FixedPanel,

package/dist/ds.umd.cjs

@@ -55064,7 +55064,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     ] });
   };
   const Container = (containerProps) => /* @__PURE__ */ jsx$1(Container$1, { ...containerProps });
-  const FlexBox = (props) => /* @__PURE__ */ jsx$1(Stack, { ...props, children: props.children });
+  const FlexBox = React$2.forwardRef((props, ref) => /* @__PURE__ */ jsx$1(Stack, { ref, ...props, children: props.children }));
   const TelicentMark = ({
     width: width2 = 24,
     height: height2 = 24,
@@ -55137,9 +55137,9 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     ...iconProps
   }) => {
     const theme = useTheme$1();
-    return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, css: /* @__PURE__ */ css({
+    return /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faAngleDown, size: "sm", css: /* @__PURE__ */ css({
       color: color2 === "primary" ? theme.palette.primary.main : "inherit"
-    }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIGNzcz17e1xuICAgICAgICBjb2xvcjogY29sb3IgPT09IFwicHJpbWFyeVwiID8gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4gOiBcImluaGVyaXRcIixcbiAgICAgIH19XG4gICAgICB7Li4uaWNvblByb3BzfVxuICAgIC8+XG4gICk7XG59O1xuXG5leHBvcnQgZGVmYXVsdCBEb3duQXJyb3c7XG4iXX0= */"), ...iconProps });
+    }, process.env.NODE_ENV === "production" ? "" : ";label:DownArrow;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3RlbGljZW50LWRzL3RlbGljZW50LWRzL3NyYy92MS9jb21wb25lbnRzL2RhdGEtZGlzcGxheS9Gb250QXdlc29tZUljb25zL0Rvd25BcnJvd0ljb24udHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CTSIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay90ZWxpY2VudC1kcy90ZWxpY2VudC1kcy9zcmMvdjEvY29tcG9uZW50cy9kYXRhLWRpc3BsYXkvRm9udEF3ZXNvbWVJY29ucy9Eb3duQXJyb3dJY29uLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tIFwicmVhY3RcIjtcbmltcG9ydCB7XG4gIEZvbnRBd2Vzb21lSWNvbixcbiAgRm9udEF3ZXNvbWVJY29uUHJvcHMsXG59IGZyb20gXCJAZm9ydGF3ZXNvbWUvcmVhY3QtZm9udGF3ZXNvbWVcIjtcbmltcG9ydCB7IGZhQW5nbGVEb3duIH0gZnJvbSBcIkBmb3J0YXdlc29tZS9mcmVlLXNvbGlkLXN2Zy1pY29uc1wiO1xuaW1wb3J0IHsgdXNlVGhlbWUgfSBmcm9tIFwiQG11aS9tYXRlcmlhbC9zdHlsZXNcIjtcblxudHlwZSBEb3duQXJyb3dJY29uUHJvcHMgPSBPbWl0PEZvbnRBd2Vzb21lSWNvblByb3BzLCBcImljb25cIj4gJiB7XG4gIGNvbG9yPzogXCJwcmltYXJ5XCIgfCBcImluaGVyaXRcIjtcbn07XG5cbmNvbnN0IERvd25BcnJvdzogUmVhY3QuRkM8RG93bkFycm93SWNvblByb3BzPiA9ICh7IGNvbG9yLCAuLi5pY29uUHJvcHMgfSkgPT4ge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIChcbiAgICA8Rm9udEF3ZXNvbWVJY29uXG4gICAgICBpY29uPXtmYUFuZ2xlRG93bn1cbiAgICAgIHNpemU9XCJzbVwiXG4gICAgICBjc3M9e3tcbiAgICAgICAgY29sb3I6IGNvbG9yID09PSBcInByaW1hcnlcIiA/IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluIDogXCJpbmhlcml0XCIsXG4gICAgICB9fVxuICAgICAgey4uLmljb25Qcm9wc31cbiAgICAvPlxuICApO1xufTtcblxuZXhwb3J0IGRlZmF1bHQgRG93bkFycm93O1xuIl19 */"), ...iconProps });
   };
   const Download = ({
     color: color2,
@@ -57747,6 +57747,90 @@ Please use another name.` : formatMuiErrorMessage$1(18));
       /* @__PURE__ */ jsx$1(Grid, { item: true, xs: 5, children: children2 })
     ] })
   ] });
+  const DropdownButtonMenuItem = ({
+    onClick,
+    faIcon,
+    id: id2,
+    icon: icon2,
+    value,
+    selected = false
+  }) => {
+    const Icon2 = icon2;
+    const theme = useExtendedTheme();
+    return /* @__PURE__ */ jsxs(MenuItem, { onClick: () => onClick(value), id: id2, selected, sx: {
+      display: "flex",
+      alignItems: "center",
+      marginX: 1,
+      borderRadius: "4px",
+      border: "1px solid rgba(0, 0, 0, 0)",
+      "&.Mui-selected.Mui-selected": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+      },
+      "&.Mui-selected.Mui-selected:hover": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)"
+      },
+      "&:hover": {
+        backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : "rgba(0, 0, 0, 0.04)",
+        border: `1px solid ${theme.palette.primary.main}`
+      }
+    }, children: [
+      (Icon2 || faIcon) && /* @__PURE__ */ jsxs(ListItemIcon$1, { children: [
+        Icon2 && /* @__PURE__ */ jsx$1(Icon2, { color: selected ? "primary" : "inherit" }),
+        faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faIcon, fontSize: "medium", color: selected ? theme.palette.primary.main : "white" })
+      ] }),
+      /* @__PURE__ */ jsx$1(ListItemText$1, { children: /* @__PURE__ */ jsx$1(Typography, { variant: "h1", sx: {
+        marginTop: 0.5,
+        fontFamily: "Figtree",
+        fontSize: 16,
+        fontWeight: 400,
+        color: `${selected ? theme.palette.primary.main : "primary"}`,
+        display: "flex",
+        alignItems: "center"
+      }, children: value }) })
+    ] });
+  };
+  const DropdownButton = ({
+    ariaLabel,
+    id: id2,
+    menuItems
+  }) => {
+    const [anchorEl, setAnchorEl] = React$2.useState(null);
+    const [selectedMenuItem, setSelectedMenuItem] = React$2.useState(menuItems.find((menuItem) => menuItem.default) ?? menuItems[0]);
+    const theme = useExtendedTheme();
+    const open = Boolean(anchorEl);
+    const handleClick = (event) => {
+      setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+      setAnchorEl(null);
+    };
+    return /* @__PURE__ */ jsxs(FlexBox, { children: [
+      /* @__PURE__ */ jsxs(IconButton, { "aria-label": ariaLabel, "aria-controls": open ? id2 : void 0, "aria-haspopup": "true", sx: {
+        border: 0,
+        "&:hover": {
+          backgroundColor: "rgba(255, 255, 255, 0.08)"
+        }
+      }, "aria-expanded": open ? "true" : void 0, onClick: handleClick, color: "primary", children: [
+        selectedMenuItem.icon && /* @__PURE__ */ jsx$1(selectedMenuItem.icon, { color: "primary", className: "mr-2" }),
+        selectedMenuItem.faIcon && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: selectedMenuItem.faIcon, fontSize: "medium", color: theme.palette.primary.main ?? "white", className: "mr-2" }),
+        /* @__PURE__ */ jsx$1(DownArrow, {})
+      ] }),
+      /* @__PURE__ */ jsx$1(Menu, { id: id2, anchorEl, open, transformOrigin: {
+        vertical: -20,
+        horizontal: "left"
+      }, onClose: handleClose, MenuListProps: {
+        "aria-labelledby": id2
+      }, sx: {
+        "& .MuiPaper-root": {
+          backgroundColor: theme.palette.mode === "dark" ? "#2A2A2A" : "#ffffff"
+        }
+      }, children: menuItems.map((menuItem, index) => /* @__PURE__ */ jsx$1(DropdownButtonMenuItem, { id: `${id2}-item-${index}`, onClick: () => {
+        menuItem.onClick(menuItem.value);
+        setSelectedMenuItem(menuItem);
+        handleClose();
+      }, icon: menuItem == null ? void 0 : menuItem.icon, faIcon: menuItem == null ? void 0 : menuItem.faIcon, value: menuItem.value, selected: menuItem.value === selectedMenuItem.value }, `${id2}-item-${index}`)) })
+    ] });
+  };
   const LinearProgress = ({
     // isActive,
     // transition = 500,
@@ -57803,6 +57887,7 @@ Please use another name.` : formatMuiErrorMessage$1(18));
     if (variant === "primary") return /* @__PURE__ */ jsx$1(PrimaryButton, { ...buttonProps, ref });
     if (variant === "secondary") return /* @__PURE__ */ jsx$1(SecondaryButton, { ...buttonProps, ref });
     if (variant === "link") return /* @__PURE__ */ jsx$1(LinkButton, { ...buttonProps, ref });
+    if (variant === "noStyle") return /* @__PURE__ */ jsx$1(ButtonBase, { ...buttonProps, ref });
     return /* @__PURE__ */ jsx$1(Button$1, { variant: "text", color: color2, ...buttonProps, ref, children: buttonProps.children });
   });
   const TextField = (props) => /* @__PURE__ */ jsx$1(TextField$1, { ...props });
@@ -80718,6 +80803,7 @@ uniform ${i3} ${s4} u_${a3};
   exports2.DownArrowIcon = DownArrow;
   exports2.DownloadIcon = Download;
   exports2.DragHandleIcon = DragHandleIcon;
+  exports2.DropdownButton = DropdownButton;
   exports2.ENCODE_SEARCH_PARAMS_MODES_Schema = ENCODE_SEARCH_PARAMS_MODES_Schema;
   exports2.FeatureMap = FeatureMap;
   exports2.FixedPanel = Panel;

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,20 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+import { default as React } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface DropdownButtonProps {
+    ariaLabel: string;
+    id: string;
+    menuItems: DropDownButtonMenuItemProps[];
+}
+export interface DropDownButtonMenuItemProps {
+    id: string;
+    onClick: (val: string) => void;
+    faIcon?: IconProp;
+    icon?: React.ElementType<SvgIconProps>;
+    value: string;
+    default?: boolean;
+    selected: boolean;
+}
+declare const DropdownButton: React.FC<DropdownButtonProps>;
+export default DropdownButton;

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.stories.d.ts

@@ -0,0 +1,47 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').FC<import('./DropdownButton').DropdownButtonProps>;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+        id: string;
+        ariaLabel: string;
+        menuItems: {
+            id: string;
+            icon: (() => import("@emotion/react/jsx-runtime").JSX.Element) | (() => import("@emotion/react/jsx-runtime").JSX.Element);
+            value: string;
+            default: boolean;
+            onClick: () => void;
+            selected: boolean;
+        }[];
+    };
+    argTypes: {
+        ariaLabel: {
+            control: "text";
+            description: string;
+        };
+        id: {
+            control: "text";
+            description: string;
+        };
+        menuItems: {
+            control: "object";
+            description: string;
+        };
+    };
+    decorators: (Story: import('@storybook/csf').PartialStoryFn<import('@storybook/react').ReactRenderer, {
+        ariaLabel: string;
+        id: string;
+        menuItems: import('./DropdownButton').DropDownButtonMenuItemProps[];
+    }>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const DropdownWithFontAwesome: Story;
+export declare const DropdownWithCustomIcons: Story;

package/dist/src/v1/components/data-display/DropdownButton/DropdownButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/v1/components/data-display/DropdownButton/assets/TestIcons.d.ts

@@ -0,0 +1,2 @@
+export declare const TestCatalogIcon: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TestGraphIcon: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/src/v1/components/data-display/index.d.ts

@@ -18,3 +18,4 @@ export { default as UserProfileContent } from './UserProfile/UserProfileContent/
 export { default as TitleAndContent } from './Text/TitleAndContent/TitleAndContent';
 export { default as UserStatus } from './UserProfile/UserProfileContent/UserStatus';
 export type { UserStatusProps } from './UserProfile/UserProfileContent/UserStatus';
+export { default as DropdownButton } from './DropdownButton/DropdownButton';

package/dist/src/v1/components/inputs/Button/Button.d.ts

@@ -45,7 +45,7 @@ export interface ButtonProps extends Omit<MUIButtonProps, "color" | "component"
      * The variant to use.
      * @default 'primary'
      */
-    variant?: "primary" | "secondary" | "tertiary" | "link" | "text";
+    variant?: "primary" | "secondary" | "tertiary" | "link" | "text" | "noStyle";
 }
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/src/v1/components/inputs/Button/Button.stories.d.ts

@@ -289,7 +289,7 @@ declare const meta: {
         name?: string | undefined;
         component?: import('@mui/material').ButtonProps["component"];
         action?: import('react').Ref<import('@mui/material').ButtonBaseActions> | undefined;
-        variant?: ("primary" | "secondary" | "tertiary" | "link" | "text") | undefined;
+        variant?: ("primary" | "secondary" | "tertiary" | "link" | "text" | "noStyle") | undefined;
         centerRipple?: boolean | undefined;
         disabled?: boolean | undefined;
         disableRipple?: boolean | undefined;

package/dist/src/v1/components/layout/FlexBox.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { StackProps } from '@mui/material/Stack';
 
-declare const FlexBox: React.FC<StackProps>;
+declare const FlexBox: React.ForwardRefExoticComponent<Omit<StackProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default FlexBox;

package/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/telicent-oss/telicent-ds.git"
   },
   "type": "module",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.10.6",
@@ -101,6 +101,7 @@
     "@storybook/react": "8.4.0",
     "@storybook/react-vite": "8.4.0",
     "@storybook/test": "8.4.0",
+    "@storybook/theming": "^8.6.12",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",