@blocklet/ui-react 2.13.70 → 3.0.0

package/lib/UserCenter/components/status-dialog/index.js

@@ -1,31 +1,17 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState, createElement, Suspense, useMemo } from "react";
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Button,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  ListItemIcon,
-  Box,
-  Typography,
-  IconButton
-} from "@mui/material";
-import dayjs from "dayjs";
-import CloseIcon from "@mui/icons-material/Close";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useMemoizedFn } from "ahooks";
-import ArrowDownwardIcon from "@arcblock/icons/lib/ArrowDown";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { DurationEnum } from "../../../@types/index.js";
-import { translations } from "../../libs/locales.js";
-import DateTimeInput from "./date-picker.js";
-import { defaultButtonStyle, primaryButtonStyle } from "../user-info/utils.js";
-const selectStyle = {
+import { jsxs as n, jsx as r, Fragment as Q } from "react/jsx-runtime";
+import { useState as s, useEffect as V, useMemo as G, Suspense as z, createElement as W } from "react";
+import { Dialog as H, DialogTitle as J, Typography as g, IconButton as K, DialogContent as U, FormControl as w, InputLabel as M, Select as R, MenuItem as T, ListItemIcon as B, Box as v, DialogActions as X, Button as b } from "@mui/material";
+import C from "dayjs";
+import { Close as Y } from "@mui/icons-material";
+import { translate as Z } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as _ } from "ahooks";
+import A from "@arcblock/icons/lib/ArrowDown";
+import { useLocaleContext as $ } from "@arcblock/ux/lib/Locale/context";
+import { DurationEnum as p } from "../../../@types/index.js";
+import { translations as oo } from "../../libs/locales.js";
+import io from "./date-picker.js";
+import { defaultButtonStyle as E, primaryButtonStyle as ro } from "../user-info/utils.js";
+const O = {
   padding: "8px 16px",
   borderRadius: "8px",
   "&:hover": {
@@ -43,104 +29,116 @@ const selectStyle = {
     alignItems: "center"
   }
 };
-export default function StatusDialog({ open, onClose, data, selected, onSelect, timezone }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, _data = {}) => {
-    return translate(translations, key, locale, "en", _data);
-  });
-  const [status, setStatus] = useState(selected?.value || "");
-  const [duration, setDuration] = useState(selected?.duration || "");
-  const [customDate, setCustomDate] = useState(selected?.dateRange?.[1] || "");
-  const [changed, setChanged] = useState(false);
-  useEffect(() => {
-    setStatus(selected?.value || "");
-    setDuration(selected?.duration || "");
-    setCustomDate(selected?.dateRange?.[1] || "");
-  }, [selected]);
-  const isValid = useMemo(() => {
-    return status && duration;
-  }, [status, duration]);
-  const selectedStatus = data.find((item) => item.id === status);
-  const handleQuickSettingClick = (item) => {
-    onSelect({
-      value: item.id,
-      ...item.duration ? { duration: item.duration } : {}
-    });
-    onClose();
-  };
-  const handleSubmit = (clean = false) => {
-    if (clean) {
-      onSelect(void 0);
-    } else {
-      const current = dayjs();
-      onSelect({
-        value: status,
-        ...duration ? { duration } : {},
-        ...duration === DurationEnum.Custom && customDate ? { dateRange: [current.toDate(), dayjs(customDate).toDate()] } : {}
+function go({ open: j, onClose: u, data: m, selected: i, onSelect: h, timezone: F }) {
+  var I, k;
+  const { locale: L } = $(), t = _((o, e = {}) => Z(oo, o, L, "en", e)), [l, S] = s((i == null ? void 0 : i.value) || ""), [a, y] = s((i == null ? void 0 : i.duration) || ""), [d, x] = s(((I = i == null ? void 0 : i.dateRange) == null ? void 0 : I[1]) || ""), [N, c] = s(!1);
+  V(() => {
+    var o;
+    S((i == null ? void 0 : i.value) || ""), y((i == null ? void 0 : i.duration) || ""), x(((o = i == null ? void 0 : i.dateRange) == null ? void 0 : o[1]) || "");
+  }, [i]);
+  const P = G(() => l && a, [l, a]), f = m.find((o) => o.id === l), q = (o) => {
+    h({
+      value: o.id,
+      ...o.duration ? { duration: o.duration } : {}
+    }), u();
+  }, D = (o = !1) => {
+    if (o)
+      h(void 0);
+    else {
+      const e = C();
+      h({
+        value: l,
+        ...a ? { duration: a } : {},
+        ...a === p.Custom && d ? { dateRange: [e.toDate(), C(d).toDate()] } : {}
       });
     }
-    onClose();
+    u();
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
+  return /* @__PURE__ */ n(
+    H,
     {
-      open,
-      onClose,
+      open: j,
+      onClose: u,
       maxWidth: "xs",
-      fullWidth: true,
+      fullWidth: !0,
       PaperProps: {
         sx: {
           borderRadius: "8px"
         }
       },
       children: [
-        /* @__PURE__ */ jsxs(DialogTitle, { sx: { borderBottom: "1px solid", borderColor: "divider" }, children: [
-          /* @__PURE__ */ jsx(Typography, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
-          /* @__PURE__ */ jsx(
-            IconButton,
+        /* @__PURE__ */ n(J, { sx: { borderBottom: "1px solid", borderColor: "divider" }, children: [
+          /* @__PURE__ */ r(g, { variant: "body1", sx: { fontSize: "16px !important", mb: 0 }, children: t("profile.setStatus") }),
+          /* @__PURE__ */ r(
+            K,
             {
               "aria-label": "close",
-              onClick: onClose,
+              onClick: u,
               sx: {
                 position: "absolute",
                 right: 8,
                 top: 8,
-                color: (theme) => theme.palette.grey[500]
+                color: (o) => o.palette.grey[500]
               },
-              children: /* @__PURE__ */ jsx(CloseIcon, {})
+              children: /* @__PURE__ */ r(Y, {})
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(DialogContent, { children: [
-          /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, sx: { mt: 2 }, children: [
-            /* @__PURE__ */ jsx(InputLabel, { size: "small", sx: { fontSize: "14px" }, children: t("profile.setStatus") }),
-            /* @__PURE__ */ jsx(
-              Select,
+        /* @__PURE__ */ n(U, { children: [
+          /* @__PURE__ */ n(w, { fullWidth: !0, sx: { mt: 2 }, children: [
+            /* @__PURE__ */ r(M, { size: "small", sx: { fontSize: "14px" }, children: t("profile.setStatus") }),
+            /* @__PURE__ */ r(
+              R,
               {
-                value: status,
+                value: l,
                 label: t("profile.setStatus"),
-                onChange: (e) => {
-                  setStatus(e.target.value);
-                  setChanged(true);
+                onChange: (o) => {
+                  S(o.target.value), c(!0);
                 },
                 variant: "outlined",
-                IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
-                sx: selectStyle,
-                children: data.map((item) => /* @__PURE__ */ jsx(MenuItem, { value: item.id, children: /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
-                  item.icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: createElement(item.icon, {
+                IconComponent: (o) => /* @__PURE__ */ r(A, { ...o, width: 20, height: 20 }),
+                sx: O,
+                children: m.map((o) => /* @__PURE__ */ r(T, { value: o.id, children: /* @__PURE__ */ n(z, { fallback: null, children: [
+                  o.icon && /* @__PURE__ */ r(B, { style: { minWidth: "24px" }, children: W(o.icon, {
                     style: { fontSize: "16px", width: "16px", height: "16px" }
                   }) }),
-                  item.name
-                ] }) }, item.id))
+                  o.name
+                ] }) }, o.id))
               }
             )
           ] }),
-          !status ? /* @__PURE__ */ jsxs(Box, { sx: { mt: "24px" }, children: [
-            /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: t("profile.quickSettings") }),
-            data.map((item) => /* @__PURE__ */ jsx(
-              Box,
+          l ? /* @__PURE__ */ n(w, { fullWidth: !0, sx: { mt: "24px" }, children: [
+            /* @__PURE__ */ r(M, { size: "small", sx: { fontSize: "14px" }, children: t("profile.removeStatusAfter") }),
+            /* @__PURE__ */ r(
+              R,
+              {
+                value: a,
+                label: t("profile.removeStatusAfter"),
+                onChange: (o) => {
+                  const { value: e } = o.target;
+                  y(e), e === p.Custom && x(C().toDate()), c(!0);
+                },
+                variant: "outlined",
+                IconComponent: (o) => /* @__PURE__ */ r(A, { ...o, width: 20, height: 20 }),
+                sx: O,
+                children: (k = f == null ? void 0 : f.children) == null ? void 0 : k.map((o) => /* @__PURE__ */ r(T, { value: o.id, children: o.name }, o.id))
+              }
+            )
+          ] }) : /* @__PURE__ */ n(v, { sx: { mt: "24px" }, children: [
+            /* @__PURE__ */ r(
+              g,
               {
-                onClick: () => handleQuickSettingClick(item),
+                variant: "body2",
+                sx: {
+                  color: "text.secondary"
+                },
+                children: t("profile.quickSettings")
+              }
+            ),
+            m.map((o) => /* @__PURE__ */ r(
+              v,
+              {
+                onClick: () => q(o),
                 sx: {
                   display: "flex",
                   alignItems: "center",
@@ -152,79 +150,66 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
                     bgcolor: "action.hover"
                   }
                 },
-                children: /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
-                  item.icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: createElement(item.icon, {
+                children: /* @__PURE__ */ n(z, { fallback: null, children: [
+                  o.icon && /* @__PURE__ */ r(B, { style: { minWidth: "24px" }, children: W(o.icon, {
                     style: { fontSize: "16px", width: "16px", height: "16px" }
                   }) }),
-                  item.name,
-                  item.durationName && /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-                    "- ",
-                    item.durationName
-                  ] })
+                  o.name,
+                  o.durationName && /* @__PURE__ */ n(
+                    g,
+                    {
+                      variant: "body2",
+                      sx: {
+                        color: "text.secondary"
+                      },
+                      children: [
+                        "- ",
+                        o.durationName
+                      ]
+                    }
+                  )
                 ] })
               },
-              item.id
+              o.id
             ))
-          ] }) : /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, sx: { mt: "24px" }, children: [
-            /* @__PURE__ */ jsx(InputLabel, { size: "small", sx: { fontSize: "14px" }, children: t("profile.removeStatusAfter") }),
-            /* @__PURE__ */ jsx(
-              Select,
-              {
-                value: duration,
-                label: t("profile.removeStatusAfter"),
-                onChange: (e) => {
-                  const { value } = e.target;
-                  setDuration(value);
-                  if (value === DurationEnum.Custom) {
-                    setCustomDate(dayjs().toDate());
-                  }
-                  setChanged(true);
-                },
-                variant: "outlined",
-                IconComponent: (props) => /* @__PURE__ */ jsx(ArrowDownwardIcon, { ...props, width: 20, height: 20 }),
-                sx: selectStyle,
-                children: selectedStatus?.children?.map((item) => /* @__PURE__ */ jsx(MenuItem, { value: item.id, children: item.name }, item.id))
-              }
-            )
           ] }),
-          duration === DurationEnum.Custom && /* @__PURE__ */ jsx(Box, { sx: { mt: "24px" }, children: /* @__PURE__ */ jsx(
-            DateTimeInput,
+          a === p.Custom && /* @__PURE__ */ r(v, { sx: { mt: "24px" }, children: /* @__PURE__ */ r(
+            io,
             {
-              value: customDate,
-              onChange: (e) => {
-                setCustomDate(e);
-                setChanged(true);
+              value: d,
+              onChange: (o) => {
+                x(o), c(!0);
               },
               label: t("profile.selectEndTime"),
-              timezone,
-              error: duration === DurationEnum.Custom && !customDate,
-              helperText: duration === DurationEnum.Custom && !customDate ? t("profile.pleaseSelectTime") : void 0
+              timezone: F,
+              error: a === p.Custom && !d,
+              helperText: a === p.Custom && !d ? t("profile.pleaseSelectTime") : void 0
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx(DialogActions, { sx: { p: "16px 24px", borderTop: "1px solid", borderColor: "divider" }, children: selected?.value && !changed ? /* @__PURE__ */ jsx(
-          Button,
+        /* @__PURE__ */ r(X, { sx: { p: "16px 24px", borderTop: "1px solid", borderColor: "divider" }, children: i != null && i.value && !N ? /* @__PURE__ */ r(
+          b,
           {
-            sx: { ...defaultButtonStyle, minWidth: "54px" },
+            sx: { ...E, minWidth: "54px" },
             size: "small",
             variant: "outlined",
-            onClick: () => handleSubmit(true),
+            onClick: () => D(!0),
             children: t("profile.cleanStatus")
           }
-        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Button, { size: "small", variant: "outlined", sx: { ...defaultButtonStyle, minWidth: "54px" }, onClick: onClose, children: t("common.cancel") }),
-          /* @__PURE__ */ jsx(
-            Button,
+        ) : /* @__PURE__ */ n(Q, { children: [
+          /* @__PURE__ */ r(b, { size: "small", variant: "outlined", sx: { ...E, minWidth: "54px" }, onClick: u, children: t("common.cancel") }),
+          /* @__PURE__ */ r(
+            b,
             {
               sx: {
-                ...primaryButtonStyle,
+                ...ro,
                 minWidth: "54px",
                 "&.Mui-disabled": {
                   backgroundColor: "rgba(0, 0, 0, 0.12)"
                 }
               },
-              disabled: !isValid,
-              onClick: () => handleSubmit(false),
+              disabled: !P,
+              onClick: () => D(!1),
               size: "small",
               variant: "outlined",
               children: t("common.confirm")
@@ -235,3 +220,6 @@ export default function StatusDialog({ open, onClose, data, selected, onSelect,
     }
   );
 }
+export {
+  go as default
+};

package/lib/UserCenter/components/status-selector/duration-menu.js

@@ -1,39 +1,30 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Menu, styled, Typography } from "@mui/material";
-import { useState } from "react";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useMemoizedFn } from "ahooks";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { translations } from "../../libs/locales.js";
-import StatusMenuItem, { StyledMenu } from "./menu-item.js";
-function DurationMenu({ data, selected, onSelect }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, _data = {}) => {
-    return translate(translations, key, locale, "en", _data);
-  });
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const openSubMenu = (e) => {
-    setAnchorEl(e.currentTarget);
+import { jsxs as a, Fragment as g, jsx as i } from "react/jsx-runtime";
+import { styled as x, Menu as v, Typography as y } from "@mui/material";
+import { useState as z } from "react";
+import { useLocaleContext as C } from "@arcblock/ux/lib/Locale/context";
+import { useMemoizedFn as b } from "ahooks";
+import { translate as k } from "@arcblock/ux/lib/Locale/util";
+import { translations as D } from "../../libs/locales.js";
+import s, { StyledMenu as j } from "./menu-item.js";
+function I({ data: n, selected: r, onSelect: m }) {
+  var c;
+  const { locale: p } = C(), f = b((o, t = {}) => k(D, o, p, "en", t)), [e, l] = z(null), h = !!e, S = (o) => {
+    l(o.currentTarget);
+  }, u = () => {
+    l(null);
+  }, d = (o) => {
+    S(o);
+  }, M = (o, t) => {
+    m({
+      ...r ?? {},
+      value: n.id,
+      duration: t.id
+    }), u();
   };
-  const closeSubMenu = () => {
-    setAnchorEl(null);
-  };
-  const onSelectStatus = (e) => {
-    openSubMenu(e);
-  };
-  const onSelectDuration = (e, item) => {
-    onSelect({
-      ...selected ?? {},
-      value: data.id,
-      duration: item.id
-    });
-    closeSubMenu();
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(StatusMenuItem, { icon: data.icon, selected: selected?.value === data.id, onClick: onSelectStatus, children: data.name }),
-    /* @__PURE__ */ jsxs(
-      StyledMenu,
+  return /* @__PURE__ */ a(g, { children: [
+    /* @__PURE__ */ i(s, { icon: n.icon, selected: (r == null ? void 0 : r.value) === n.id, onClick: d, children: n.name }),
+    /* @__PURE__ */ a(
+      j,
       {
         anchorOrigin: {
           vertical: "top",
@@ -43,31 +34,45 @@ function DurationMenu({ data, selected, onSelect }) {
           vertical: "top",
           horizontal: "left"
         },
-        open,
-        onClose: closeSubMenu,
-        anchorEl,
+        open: h,
+        onClose: u,
+        anchorEl: e,
         children: [
-          /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", pl: 2, fontSize: "14px", children: t("profile.removeStatusAfter") }),
-          data.children?.map((item) => /* @__PURE__ */ jsx(
-            StatusMenuItem,
+          /* @__PURE__ */ i(
+            y,
+            {
+              component: "span",
+              sx: {
+                color: "text.secondary",
+                pl: 2,
+                fontSize: "14px"
+              },
+              children: f("profile.removeStatusAfter")
+            }
+          ),
+          (c = n.children) == null ? void 0 : c.map((o) => /* @__PURE__ */ i(
+            s,
             {
-              selected: selected?.duration === item.id,
-              onClick: (e) => onSelectDuration(e, item),
-              children: item.name
+              selected: (r == null ? void 0 : r.duration) === o.id,
+              onClick: (t) => M(t, o),
+              children: o.name
             },
-            item.id
+            o.id
           ))
         ]
       }
     )
   ] });
 }
-export default DurationMenu;
-export const MenuDiv = styled(Menu)`
+const $ = x(v)`
   .MuiList-root {
     min-width: 160px;
   }
   .selected {
-    background-color: ${({ theme }) => theme.palette.grey[50]};
+    background-color: ${({ theme: n }) => n.palette.grey[50]};
   }
 `;
+export {
+  $ as MenuDiv,
+  I as default
+};

package/lib/UserCenter/components/status-selector/index.js

@@ -1,39 +1,40 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import { useMemoizedFn } from "ahooks";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import StatusDurationMenu from "./duration-menu.js";
-import StatusMenuItem, { StyledMenu } from "./menu-item.js";
-import { translations } from "../../libs/locales.js";
-function StatusSelector({ data, open, onSelect, anchorEl, selected }) {
-  const { locale } = useLocaleContext();
-  const t = useMemoizedFn((key, _data = {}) => {
-    return translate(translations, key, locale, "en", _data);
-  });
-  const onSelectStatus = (v) => {
-    onSelect(v);
-  };
-  const renderMenuItems = () => {
-    return data.map((item) => {
-      if (item.children) {
-        return /* @__PURE__ */ jsx(StatusDurationMenu, { data: item, selected, onSelect: onSelectStatus }, item.id);
-      }
-      return /* @__PURE__ */ jsx(
-        StatusMenuItem,
-        {
-          icon: item.icon,
-          selected: selected?.value === item.id,
-          onClick: () => onSelectStatus({ value: item.id }),
-          children: item.name
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { Typography as f } from "@mui/material";
+import { translate as d } from "@arcblock/ux/lib/Locale/util";
+import { useMemoizedFn as S } from "ahooks";
+import { useLocaleContext as x } from "@arcblock/ux/lib/Locale/context";
+import h from "./duration-menu.js";
+import M, { StyledMenu as y } from "./menu-item.js";
+import { translations as C } from "../../libs/locales.js";
+function L({ data: e, open: a, onSelect: u, anchorEl: i, selected: r }) {
+  const { locale: s } = x(), l = S((o, c = {}) => d(C, o, s, "en", c)), n = (o) => {
+    u(o);
+  }, p = () => e.map((o) => o.children ? /* @__PURE__ */ t(h, { data: o, selected: r, onSelect: n }, o.id) : /* @__PURE__ */ t(
+    M,
+    {
+      icon: o.icon,
+      selected: (r == null ? void 0 : r.value) === o.id,
+      onClick: () => n({ value: o.id }),
+      children: o.name
+    },
+    o.id
+  ));
+  return /* @__PURE__ */ m(y, { open: a, onClose: () => n(), anchorEl: i, children: [
+    /* @__PURE__ */ t(
+      f,
+      {
+        component: "span",
+        sx: {
+          color: "text.secondary",
+          pl: 2,
+          fontSize: "14px"
         },
-        item.id
-      );
-    });
-  };
-  return /* @__PURE__ */ jsxs(StyledMenu, { open, onClose: () => onSelectStatus(), anchorEl, children: [
-    /* @__PURE__ */ jsx(Typography, { component: "span", color: "text.secondary", pl: 2, fontSize: "14px", children: t("profile.setStatus") }),
-    renderMenuItems()
+        children: l("profile.setStatus")
+      }
+    ),
+    p()
   ] });
 }
-export default StatusSelector;
+export {
+  L as default
+};

package/lib/UserCenter/components/status-selector/menu-item.js

@@ -1,15 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ListItemIcon, MenuItem, Menu, styled } from "@mui/material";
-import React from "react";
-export default function StatusMenuItem({ icon, selected, onClick, children }) {
-  return /* @__PURE__ */ jsxs(MenuItem, { onClick, className: selected ? "selected" : "", children: [
-    icon && /* @__PURE__ */ jsx(ListItemIcon, { style: { minWidth: "24px" }, children: React.createElement(icon, {
+import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { styled as n, Menu as l, MenuItem as p, ListItemIcon as a } from "@mui/material";
+import d from "react";
+function c({ icon: e, selected: t, onClick: o, children: r }) {
+  return /* @__PURE__ */ i(p, { onClick: o, className: t ? "selected" : "", children: [
+    e && /* @__PURE__ */ s(a, { style: { minWidth: "24px" }, children: d.createElement(e, {
       style: { fontSize: "16px", width: "16px", height: "16px" }
     }) }),
-    children
+    r
   ] });
 }
-export const StyledMenu = styled(Menu)`
+const h = n(l)`
   .MuiPaper-root {
     box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.15);
   }
@@ -17,6 +17,10 @@ export const StyledMenu = styled(Menu)`
     min-width: 160px;
   }
   .selected {
-    background-color: ${({ theme }) => theme.palette.grey[50]};
+    background-color: ${({ theme: e }) => e.palette.grey[50]};
   }
 `;
+export {
+  h as StyledMenu,
+  c as default
+};