@blocklet/ui-react 2.13.70 → 3.0.1

package/lib/Footer/links.js

@@ -1,134 +1,111 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import PropTypes from "prop-types";
-import { useCreation } from "ahooks";
-import isInteger from "lodash/isInteger";
-import isString from "lodash/isString";
-import { styled } from "@arcblock/ux/lib/Theme";
-import clsx from "clsx";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import Icon from "../Icon/index.js";
-import useMobile from "../hooks/use-mobile.js";
-import { splitNavColumns } from "../utils.js";
-export default function Links({ links, flowLayout, columns, ...rest }) {
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const isMobile = useMobile({ key: "md" });
-  const isGroupMode = links.some((item) => item.items?.length);
-  const columnsLayout = !isMobile && isGroupMode && isInteger(columns) && columns > 1;
-  const renderItem = ({ label, link, icon, render, props }) => {
-    let result = label;
-    if (render) {
-      result = render({ label, link, props });
-    } else if (link && isString(link)) {
-      const isExternal = link.startsWith("http") || link.startsWith("//");
-      result = /* @__PURE__ */ jsx(
+import { jsx as n, jsxs as m, Fragment as v } from "react/jsx-runtime";
+import { useState as N } from "react";
+import l from "prop-types";
+import { useCreation as $ } from "ahooks";
+import j from "lodash/isInteger";
+import I from "lodash/isString";
+import { styled as z } from "@arcblock/ux/lib/Theme";
+import c from "clsx";
+import { ExpandMore as M } from "@mui/icons-material";
+import C from "../Icon/index.js";
+import A from "../hooks/use-mobile.js";
+import { splitNavColumns as E } from "../utils.js";
+function F({ links: e = [], flowLayout: d = !1, columns: u, ...k }) {
+  const [g, b] = N(-1), y = A({ key: "md" }), h = e.some((r) => {
+    var o;
+    return (o = r.items) == null ? void 0 : o.length;
+  }), x = !y && h && j(u) && u > 1, p = ({ label: r, link: o, icon: t, render: a, props: i }) => {
+    let s = r;
+    if (a)
+      s = a({ label: r, link: o, props: i });
+    else if (o && I(o)) {
+      const f = o.startsWith("http") || o.startsWith("//");
+      s = /* @__PURE__ */ n(
         "a",
         {
-          href: link,
-          "aria-label": `Footer link for ${label}`,
-          target: isExternal ? "_blank" : "_self",
-          rel: isExternal ? "noreferrer noopener" : void 0,
-          ...props,
-          children: label
+          href: o,
+          "aria-label": `Footer link for ${r}`,
+          target: f ? "_blank" : "_self",
+          rel: f ? "noreferrer noopener" : void 0,
+          ...i,
+          children: r
         }
       );
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx(Icon, { icon, size: 20, sx: { mr: 0.5 } }),
-      result
+    return /* @__PURE__ */ m(v, { children: [
+      t && /* @__PURE__ */ n(C, { icon: t, size: 20, sx: { mr: 0.5 } }),
+      s
     ] });
-  };
-  const content = useCreation(() => {
-    if (!links?.length) {
-      return null;
-    }
-    if (flowLayout) {
-      return links.map((item, i) => /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }, i));
-    }
-    if (columnsLayout) {
-      return splitNavColumns(links, { columns }).map((cols, i) => {
-        return /* @__PURE__ */ jsx("div", { className: "footer-links-column", children: cols.filter((v) => v.group).map((item, j) => {
-          const { items } = item;
-          return /* @__PURE__ */ jsxs("div", { className: "footer-links-group", children: [
-            /* @__PURE__ */ jsx("span", { className: "footer-links-item", children: renderItem(item) }),
-            !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, k) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: clsx("footer-links-item", { "footer-links-item--new": child.isNew }),
-                children: renderItem(child)
-              },
-              k
-            )) })
-          ] }, j);
-        }) }, i);
-      });
-    }
-    return links.map((item, i) => {
-      const { items } = item;
-      const isActive = i === activeIndex;
-      return /* @__PURE__ */ jsxs(
-        "div",
+  }, w = $(() => e != null && e.length ? d ? e.map((r, o) => /* @__PURE__ */ n("span", { className: "footer-links-item", children: p(r) }, o)) : x ? E(e, { columns: u }).map((r, o) => /* @__PURE__ */ n("div", { className: "footer-links-column", children: r.filter((t) => t.group).map((t, a) => {
+    const { items: i } = t;
+    return /* @__PURE__ */ m("div", { className: "footer-links-group", children: [
+      /* @__PURE__ */ n("span", { className: "footer-links-item", children: p(t) }),
+      !!(i != null && i.length) && /* @__PURE__ */ n("div", { className: "footer-links-sub", children: i.map((s, f) => /* @__PURE__ */ n(
+        "span",
         {
-          className: clsx("footer-links-group", {
-            "footer-links-group--active": isActive
-          }),
-          onClick: () => setActiveIndex(activeIndex === i ? -1 : i),
-          children: [
-            /* @__PURE__ */ jsxs("span", { className: "footer-links-item", children: [
-              renderItem(item),
-              !!items?.length && /* @__PURE__ */ jsx("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ jsx(
-                ExpandMoreIcon,
-                {
-                  style: {
-                    transform: `rotate(${isActive ? 180 : 0}deg)`
-                  }
-                }
-              ) })
-            ] }),
-            !!items?.length && /* @__PURE__ */ jsx("div", { className: "footer-links-sub", children: items.map((child, j) => /* @__PURE__ */ jsx("span", { className: clsx("footer-links-item", { "footer-links-item--new": child.isNew }), children: renderItem(child) }, j)) })
-          ]
+          className: c("footer-links-item", { "footer-links-item--new": s.isNew }),
+          children: p(s)
         },
-        i
-      );
-    });
-  }, [links, flowLayout, columnsLayout, activeIndex]);
-  if (!links?.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    Root,
+        f
+      )) })
+    ] }, a);
+  }) }, o)) : e.map((r, o) => {
+    const { items: t } = r, a = o === g;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: c("footer-links-group", {
+          "footer-links-group--active": a
+        }),
+        onClick: () => b(g === o ? -1 : o),
+        children: [
+          /* @__PURE__ */ m("span", { className: "footer-links-item", children: [
+            p(r),
+            !!(t != null && t.length) && /* @__PURE__ */ n("span", { className: "footer-links-group-expand-icon", children: /* @__PURE__ */ n(
+              M,
+              {
+                style: {
+                  transform: `rotate(${a ? 180 : 0}deg)`
+                }
+              }
+            ) })
+          ] }),
+          !!(t != null && t.length) && /* @__PURE__ */ n("div", { className: "footer-links-sub", children: t.map((i, s) => /* @__PURE__ */ n("span", { className: c("footer-links-item", { "footer-links-item--new": i.isNew }), children: p(i) }, s)) })
+        ]
+      },
+      o
+    );
+  }) : null, [e, d, x, g]);
+  return e != null && e.length ? /* @__PURE__ */ n(
+    S,
     {
-      ...rest,
-      className: clsx(rest.className, {
-        "footer-links--grouped": isGroupMode,
-        "footer-links--flow": flowLayout,
-        "footer-links--columns": columnsLayout
+      ...k,
+      className: c(k.className, {
+        "footer-links--grouped": h,
+        "footer-links--flow": d,
+        "footer-links--columns": x
       }),
-      children: /* @__PURE__ */ jsx("div", { className: "footer-links-inner", children: content })
+      children: /* @__PURE__ */ n("div", { className: "footer-links-inner", children: w })
     }
-  );
+  ) : null;
 }
-Links.propTypes = {
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      link: PropTypes.string,
-      render: PropTypes.func,
-      props: PropTypes.object
+F.propTypes = {
+  links: l.arrayOf(
+    l.shape({
+      label: l.string,
+      link: l.string,
+      render: l.func,
+      props: l.object
     })
   ),
   // 流动布局, 简单的从左到右排列
-  flowLayout: PropTypes.bool,
+  flowLayout: l.bool,
   // 列布局
-  columns: PropTypes.number
+  columns: l.number
 };
-Links.defaultProps = {
-  links: [],
-  flowLayout: false
-};
-const Root = styled("div")`
+const S = z("div")`
   overflow: hidden;
-  color: ${({ theme }) => theme.palette.text.secondary};
+  color: ${({ theme: e }) => e.palette.text.secondary};
   .footer-links-inner {
     display: flex;
     justify-content: space-between;
@@ -159,8 +136,8 @@ const Root = styled("div")`
     font-size: 14px;
     &--new::after {
       content: 'New';
-      color: ${({ theme }) => theme.palette.info.main};
-      background-color: ${({ theme }) => theme.palette.info.light};
+      color: ${({ theme: e }) => e.palette.info.main};
+      background-color: ${({ theme: e }) => e.palette.info.light};
       padding: 1px 8px;
       border-radius: 10px/50%;
       margin-left: 8px;
@@ -170,7 +147,7 @@ const Root = styled("div")`
     .footer-links-group {
       > .footer-links-item {
         font-weight: 600;
-        color: ${({ theme }) => theme.palette.text.primary};
+        color: ${({ theme: e }) => e.palette.text.primary};
       }
       .footer-links-sub {
         margin-top: 8px;
@@ -184,7 +161,7 @@ const Root = styled("div")`
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {
-      color: ${({ theme }) => theme.palette.text.primary};
+      color: ${({ theme: e }) => e.palette.text.primary};
     }
   }
   /* columns 布局 */
@@ -221,13 +198,13 @@ const Root = styled("div")`
         top: 50%;
         transform: translate(0, -50%);
         height: 1em;
-        border-left: 1px solid ${(props) => props.theme.palette.text.secondary};
+        border-left: 1px solid ${(e) => e.theme.palette.text.secondary};
       }
     }
   }
 
   /* 移动端样式 */
-  ${(props) => props.theme.breakpoints.down("md")} {
+  ${(e) => e.theme.breakpoints.down("md")} {
     .footer-links-inner {
       flex-direction: column;
       margin: 0;
@@ -243,7 +220,7 @@ const Root = styled("div")`
       }
     }
     .footer-links-group + .footer-links-group {
-      border-top: 1px solid ${(props) => props.theme.palette.grey[200]};
+      border-top: 1px solid ${(e) => e.theme.palette.grey[200]};
     }
     .footer-links-group--active {
       .footer-links-sub {
@@ -275,3 +252,6 @@ const Root = styled("div")`
     }
   }
 `;
+export {
+  F as default
+};

package/lib/Footer/social-media.js

@@ -1,52 +1,47 @@
-import { jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
-import { styled } from "@arcblock/ux/lib/Theme";
-import Icon from "../Icon/index.js";
-export default function SocialMedia({ items, ...rest }) {
-  if (!items?.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(Root, { ...rest, children: items.map((item, i) => {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: item.link,
-        target: "_blank",
-        "aria-label": `Social media icon${item.title ? ` for ${item.title}` : ""}`,
-        rel: "noreferrer",
-        children: /* @__PURE__ */ jsx(Icon, { icon: item.icon || item.title, size: 24, component: "span" })
-      },
-      i
-    );
-  }) });
+import { jsx as n } from "react/jsx-runtime";
+import o from "prop-types";
+import { styled as i } from "@arcblock/ux/lib/Theme";
+import l from "../Icon/index.js";
+function p({ items: r = null, ...t }) {
+  return r != null && r.length ? /* @__PURE__ */ n(c, { ...t, children: r.map((e, a) => /* @__PURE__ */ n(
+    "a",
+    {
+      href: e.link,
+      target: "_blank",
+      "aria-label": `Social media icon${e.title ? ` for ${e.title}` : ""}`,
+      rel: "noreferrer",
+      children: /* @__PURE__ */ n(l, { icon: e.icon || e.title, size: 24, component: "span" })
+    },
+    a
+  )) }) : null;
 }
-SocialMedia.propTypes = {
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
+p.propTypes = {
+  items: o.arrayOf(
+    o.shape({
       // icon 对应 Icon#icon prop, 支持 iconify name 和 url 2 种形式:
-      icon: PropTypes.string,
-      link: PropTypes.string
+      icon: o.string,
+      link: o.string
     })
   )
 };
-SocialMedia.defaultProps = {
-  items: null
-};
-const Root = styled("div")`
+const c = i("div")`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 20px;
   a {
-    color: ${(props) => props.theme.palette.text.secondary};
+    color: ${(r) => r.theme.palette.text.secondary};
     text-decoration: none;
     transition: color 0.2s ease-in-out;
     &:hover {
-      color: ${({ theme }) => theme.palette.text.primary};
+      color: ${({ theme: r }) => r.palette.text.primary};
     }
   }
-  ${(props) => props.theme.breakpoints.down("md")} {
+  ${(r) => r.theme.breakpoints.down("md")} {
     gap: 12px;
   }
 `;
+export {
+  p as default
+};

package/lib/Header/index.js

@@ -1,165 +1,143 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useMemoizedFn } from "ahooks";
-import { withErrorBoundary } from "react-error-boundary";
-import { ErrorFallback } from "@arcblock/ux/lib/ErrorBoundary";
-import { styled, useTheme, deepmerge, ThemeProvider } from "@arcblock/ux/lib/Theme";
-import { ResponsiveHeader } from "@arcblock/ux/lib/Header";
-import NavMenu, { Products } from "@arcblock/ux/lib/NavMenu";
-import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { translate } from "@arcblock/ux/lib/Locale/util";
-import useBlockletLogo from "@arcblock/ux/lib/hooks/use-blocklet-logo";
-import omit from "lodash/omit";
-import isFinite from "lodash/isFinite";
-import clsx from "clsx";
-import Icon from "../Icon/index.js";
-import { mapRecursive, flatRecursive, matchPaths } from "../utils.js";
-import { publicPath, formatBlockletInfo, getLocalizedNavigation } from "../blocklets.js";
-import HeaderAddons from "../common/header-addons.js";
-import { useWalletHiddenTopbar } from "../common/wallet-hidden-topbar.js";
-import withHideWhenEmbed from "../libs/with-hide-when-embed.js";
-const translations = {
+import { jsx as l } from "react/jsx-runtime";
+import { useMemo as w } from "react";
+import { useMemoizedFn as H } from "ahooks";
+import { withErrorBoundary as y } from "react-error-boundary";
+import { ErrorFallback as C } from "@arcblock/ux/lib/ErrorBoundary";
+import { styled as T, useTheme as _, deepmerge as E, ThemeProvider as F } from "@arcblock/ux/lib/Theme";
+import { ResponsiveHeader as L } from "@arcblock/ux/lib/Header";
+import P, { Products as R } from "@arcblock/ux/lib/NavMenu";
+import { useLocaleContext as z } from "@arcblock/ux/lib/Locale/context";
+import { translate as A } from "@arcblock/ux/lib/Locale/util";
+import M from "@arcblock/ux/lib/hooks/use-blocklet-logo";
+import W from "lodash/omit";
+import B from "lodash/isFinite";
+import j from "clsx";
+import S from "../Icon/index.js";
+import { mapRecursive as U, flatRecursive as K, matchPaths as O } from "../utils.js";
+import { formatBlockletInfo as q, getLocalizedNavigation as D, publicPath as G } from "../blocklets.js";
+import J from "../common/header-addons.js";
+import { useWalletHiddenTopbar as Q } from "../common/wallet-hidden-topbar.js";
+import V from "../libs/with-hide-when-embed.js";
+const X = {
   en: {
     products: "Products"
   },
   zh: {
-    products: "\u4EA7\u54C1"
+    products: "产品"
   }
-};
-const parseNavigation = (navigation) => {
-  if (!navigation?.length) {
+}, Y = (e) => {
+  if (!(e != null && e.length))
     return { navItems: [], activeId: null };
-  }
-  let counter = 1;
-  const parseItem = (item) => {
-    const icon = item.icon ? /* @__PURE__ */ jsx(Icon, { icon: item.icon }) : null;
-    if (item.items) {
+  let t = 1;
+  const m = U(e, (o) => {
+    var c, f;
+    const n = o.icon ? /* @__PURE__ */ l(S, { icon: o.icon }) : null;
+    if (o.items)
       return {
-        id: `${counter++}`,
-        label: item.title,
-        icon,
-        children: item.items
-      };
-    }
-    let props = {};
-    if (item.link?.startsWith("http") || item.link?.startsWith("//")) {
-      props = {
-        target: "_blank",
-        rel: "noreferrer"
+        id: `${t++}`,
+        label: o.title,
+        icon: n,
+        children: o.items
       };
-    }
-    return {
-      id: `${counter++}`,
-      label: /* @__PURE__ */ jsx("a", { href: item.link, ...props, children: item.title }),
-      icon,
-      description: item.description,
-      link: item.link
+    let i = {};
+    return ((c = o.link) != null && c.startsWith("http") || (f = o.link) != null && f.startsWith("//")) && (i = {
+      target: "_blank",
+      rel: "noreferrer"
+    }), {
+      id: `${t++}`,
+      label: /* @__PURE__ */ l("a", { href: o.link, ...i, children: o.title }),
+      icon: n,
+      description: o.description,
+      link: o.link
     };
-  };
-  const navItems = mapRecursive(navigation, parseItem, "items");
-  const flattened = flatRecursive(navItems);
-  const matchedIndex = matchPaths(flattened.map((item) => item.link));
-  return { navItems, activeId: matchedIndex >= 0 ? flattened[matchedIndex].id : null };
+  }, "items"), a = K(m), p = O(a.map((o) => o.link));
+  return { navItems: m, activeId: p >= 0 ? a[p].id : null };
 };
-function Header({
-  meta = {},
-  addons,
-  sessionManagerProps = {
-    showRole: true
+function Z({
+  meta: e = {},
+  addons: t,
+  sessionManagerProps: b = {
+    showRole: !0
   },
-  homeLink = publicPath,
-  theme: themeOverrides,
-  hideNavMenu = false,
-  showDomainWarningDialog = true,
-  ...rest
+  homeLink: m = G,
+  theme: a,
+  hideNavMenu: p = !1,
+  showDomainWarningDialog: o = !0,
+  ...n
 }) {
-  useWalletHiddenTopbar();
-  const parentTheme = useTheme();
-  const { locale } = useLocaleContext() || {};
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, "en", data);
-  });
-  const formattedBlocklet = useMemo(() => {
-    const blocklet = Object.assign({}, window.blocklet, meta);
+  var v, x;
+  Q();
+  const i = _(), { locale: c } = z() || {}, f = H((r, h = {}) => A(X, r, c, "en", h)), s = w(() => {
+    const r = Object.assign({}, window.blocklet, e);
     try {
-      return formatBlockletInfo(blocklet);
-    } catch (e) {
-      console.error("Failed to format blocklet info", e, blocklet);
-      return blocklet;
+      return q(r);
+    } catch (h) {
+      return console.error("Failed to format blocklet info", h, r), r;
     }
-  }, [meta]);
-  const mergeTheme = useMemo(() => deepmerge(parentTheme, themeOverrides), [parentTheme, themeOverrides]);
-  const appLogo = useBlockletLogo({
-    meta,
-    theme: themeOverrides
+  }, [e]), u = w(() => E(i, a), [i, a]), I = M({
+    meta: e,
+    theme: a
   });
-  if (!formattedBlocklet.appName) {
+  if (!s.appName)
     return null;
-  }
-  const navigation = getLocalizedNavigation(formattedBlocklet?.navigation?.header, locale);
-  const parsedNavigation = parseNavigation(navigation);
-  const { navItems, activeId } = parsedNavigation;
-  const productsNavOrder = parseInt(window.blocklet?.USE_ARCBLOCK_THEME, 10);
-  if (isFinite(productsNavOrder)) {
-    navItems.splice(productsNavOrder, 0, {
-      label: t("products"),
-      // eslint-disable-next-line react/no-unstable-nested-components
-      children: ({ isOpen }) => /* @__PURE__ */ jsx(Products, { isOpen })
-    });
-  }
-  const _addons = typeof addons === "function" ? (builtInAddons) => addons(builtInAddons, { navigation: parsedNavigation }) : addons;
-  const headerAddons = (
-    // @ts-ignore
-    /* @__PURE__ */ jsx(
-      HeaderAddons,
-      {
-        formattedBlocklet,
-        addons: _addons,
-        sessionManagerProps,
-        showDomainWarningDialog
-      }
-    )
-  );
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: mergeTheme, children: /* @__PURE__ */ jsx(
-    StyledUxHeader,
+  const $ = D((v = s == null ? void 0 : s.navigation) == null ? void 0 : v.header, c), g = Y($), { navItems: d, activeId: N } = g, k = parseInt((x = window.blocklet) == null ? void 0 : x.USE_ARCBLOCK_THEME, 10);
+  return B(k) && d.splice(k, 0, {
+    label: f("products"),
+    // eslint-disable-next-line react/no-unstable-nested-components
+    children: ({ isOpen: r }) => /* @__PURE__ */ l(R, { isOpen: r })
+  }), /* @__PURE__ */ l(F, { theme: u, children: /* @__PURE__ */ l(
+    oo,
     {
-      homeLink,
-      logo: /* @__PURE__ */ jsx("img", { src: appLogo, alt: "logo" }),
-      addons: headerAddons,
-      ...omit(rest, ["bordered"]),
-      $bordered: rest?.bordered,
-      $bgcolor: mergeTheme.palette.background.default,
-      className: clsx("blocklet__header", rest.className),
-      children: hideNavMenu || !navItems?.length ? null : ({ isMobile }) => (
+      homeLink: m,
+      logo: /* @__PURE__ */ l("img", { src: I, alt: "logo" }),
+      addons: (
+        // @ts-ignore
+        /* @__PURE__ */ l(
+          J,
+          {
+            formattedBlocklet: s,
+            addons: typeof t == "function" ? (r) => t(r, { navigation: g }) : t,
+            sessionManagerProps: b,
+            showDomainWarningDialog: o
+          }
+        )
+      ),
+      ...W(n, ["bordered"]),
+      $bordered: n == null ? void 0 : n.bordered,
+      $bgcolor: u.palette.background.default,
+      className: j("blocklet__header", n.className),
+      children: p || !(d != null && d.length) ? null : ({ isMobile: r }) => (
         // @ts-ignore
-        /* @__PURE__ */ jsx(
-          NavMenu,
+        /* @__PURE__ */ l(
+          P,
           {
-            mode: isMobile ? "inline" : "horizontal",
-            activeId,
-            items: navItems,
+            mode: r ? "inline" : "horizontal",
+            activeId: N,
+            items: d,
             className: "header-nav",
             bgColor: "transparent",
-            textColor: mergeTheme.palette.grey[500],
-            activeTextColor: mergeTheme.palette.text.primary
+            textColor: u.palette.grey[500],
+            activeTextColor: u.palette.text.primary
           }
         )
       )
     }
   ) });
 }
-const StyledUxHeader = styled(ResponsiveHeader)`
-  ${({ $bgcolor }) => `background-color: ${$bgcolor || "#fff"};`}
+const oo = T(L)`
+  ${({ $bgcolor: e }) => `background-color: ${e || "#fff"};`}
   .header-logo {
     min-width: 44px;
   }
-  ${({ $bordered, theme }) => $bordered ? `border-bottom: 1px solid ${theme.palette.divider};` : ""}
-  ${(props) => props.theme.breakpoints.down("md")} {
+  ${({ $bordered: e, theme: t }) => e ? `border-bottom: 1px solid ${t.palette.divider};` : ""}
+  ${(e) => e.theme.breakpoints.down("md")} {
     .header-logo {
       min-width: 32px;
     }
   }
-`;
-export default withErrorBoundary(withHideWhenEmbed(Header), {
-  FallbackComponent: ErrorFallback
+`, No = y(V(Z), {
+  FallbackComponent: C
 });
+export {
+  No as default
+};