@gearbox-protocol/ui-kit 2.1.0-next.1

package/dist/esm/components/connectkit/index.js

@@ -0,0 +1,6 @@
+import { ConnectKitWalletAdapter as t } from "./connect-kit-wallet-adapter.js";
+import { SIWEClientProvider as i } from "./siwe-provider.js";
+export {
+  t as ConnectKitWalletAdapter,
+  i as SIWEClientProvider
+};

package/dist/esm/components/connectkit/siwe-provider.js

@@ -0,0 +1,60 @@
+import { jsx as f } from "react/jsx-runtime";
+import { SIWEProvider as m } from "connectkit";
+import { createSiweMessage as u } from "viem/siwe";
+function d({
+  apiRoutePrefix: e,
+  statement: s,
+  children: i,
+  onRefresh: o,
+  ...c
+}) {
+  const a = async () => {
+    const n = await fetch(`${e}/nonce`);
+    if (!n.ok)
+      throw new Error("Failed to fetch SIWE nonce");
+    return await n.text();
+  }, g = ({
+    nonce: n,
+    address: t,
+    chainId: r
+  }) => u({
+    version: "1",
+    domain: window.location.host,
+    uri: window.location.origin,
+    address: t,
+    chainId: r,
+    nonce: n,
+    statement: s || "Sign In With Ethereum."
+  }), w = async ({
+    message: n,
+    signature: t
+  }) => {
+    if (!(await fetch(`${e}/signin`, {
+      method: "POST",
+      body: JSON.stringify({ message: n, signature: t })
+    })).ok)
+      throw new Error("Failed to verify SIWE message");
+    return !0;
+  };
+  return /* @__PURE__ */ f(
+    m,
+    {
+      getNonce: a,
+      createMessage: g,
+      verifyMessage: async (n) => w(n),
+      getSession: async () => {
+        const n = await fetch(`${e}/session`);
+        return n.ok ? n.json() : null;
+      },
+      onSignIn: async (n) => (o?.(), n),
+      signOut: async () => (await fetch(`${e}/logout`, {
+        method: "POST"
+      }), o?.(), !0),
+      ...c,
+      children: i
+    }
+  );
+}
+export {
+  d as SIWEClientProvider
+};

package/dist/esm/components/credit-session-status/credit-session-status.js

@@ -0,0 +1,39 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as r } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const o = {
+  active: "bg-green-500",
+  closed: "bg-gray-500",
+  repaid: "bg-gray-500",
+  liquidated: "bg-red-500",
+  liquidateExpired: "bg-red-500",
+  liquidatePaused: "bg-red-500"
+};
+function l({
+  status: e,
+  className: i
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: r(
+        "inline-flex items-center gap-1.5 px-3 py-1.5",
+        "text-xs font-medium uppercase tracking-wider",
+        "bg-muted border border-border rounded-md",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ t("div", { className: r("w-2 h-2 rounded-full", o[e]) }),
+        e
+      ]
+    }
+  );
+}
+export {
+  l as CreditSessionStatus
+};

package/dist/esm/components/credit-session-status/index.js

@@ -0,0 +1,4 @@
+import { CreditSessionStatus as o } from "./credit-session-status.js";
+export {
+  o as CreditSessionStatus
+};

package/dist/esm/components/currency-button/currency-button.js

@@ -0,0 +1,109 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { IconExpand as g } from "@gearbox-protocol/static";
+import { cva as u } from "class-variance-authority";
+import { TokenSymbol as k } from "../token-symbol/token-symbol.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as x } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const w = 13, N = u(
+  "flex flex-row items-center text-foreground cursor-[unset]",
+  {
+    variants: {
+      size: {
+        xs: "text-sm leading-[17px]",
+        sm: "text-[16px] leading-[21px]",
+        md: "text-[21px] leading-[33px]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), V = {
+  sm: { symbol: 16, arrow: 8 },
+  md: { symbol: 28, arrow: 12 }
+}, B = u(
+  "ml-0.5 leading-none text-gray-100 transition-transform duration-100 ease-[ease]",
+  {
+    variants: {
+      size: {
+        sm: "px-1",
+        md: "px-1.5"
+      },
+      active: {
+        true: "rotate-180",
+        false: ""
+      }
+    },
+    defaultVariants: { size: "md", active: !1 }
+  }
+);
+function G({
+  title: o,
+  maxLength: l = w,
+  token: m,
+  disabled: d,
+  showSelectDialog: r,
+  size: n,
+  active: f = !1,
+  chainId: v,
+  network: y,
+  className: z,
+  children: c
+}) {
+  const s = !d && r ? r : void 0, t = !!(r && !d), a = n === "xs" ? "sm" : n ?? "md", p = V[a];
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: A uses div (CurrencyBlock); role + keyboard for a11y
+    /* @__PURE__ */ b(
+      "div",
+      {
+        role: t ? "button" : void 0,
+        tabIndex: t ? 0 : void 0,
+        onKeyDown: t && s ? (i) => {
+          (i.key === "Enter" || i.key === " ") && (i.preventDefault(), s());
+        } : void 0,
+        "data-active": t,
+        "data-testid": "currency-button",
+        onClick: s,
+        className: x(
+          "group",
+          N({ size: n }),
+          t && "cursor-pointer",
+          t && "hover:[&_.expand-wrap]:text-foreground",
+          z
+        ),
+        children: [
+          /* @__PURE__ */ e(
+            k,
+            {
+              title: o,
+              size: p.symbol,
+              token: m,
+              showSymbol: !0,
+              maxLength: l,
+              marginSize: a,
+              chainId: v,
+              network: y
+            }
+          ),
+          !m && (c ?? o) ? /* @__PURE__ */ e("span", { className: "text-muted-foreground truncate", children: c ?? o }) : null,
+          r && /* @__PURE__ */ e(
+            "span",
+            {
+              className: x(
+                "expand-wrap",
+                B({ size: a, active: f })
+              ),
+              children: /* @__PURE__ */ e(g, { size: p.arrow })
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+export {
+  G as CurrencyButton
+};

package/dist/esm/components/currency-button/index.js

@@ -0,0 +1,4 @@
+import { CurrencyButton as t } from "./currency-button.js";
+export {
+  t as CurrencyButton
+};

package/dist/esm/components/description/description.js

@@ -0,0 +1,26 @@
+import { jsx as p } from "react/jsx-runtime";
+import * as m from "react";
+import "@gearbox-protocol/sdk";
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import { Typography as c } from "../typography/typography.js";
+const e = m.forwardRef(
+  ({ className: r, as: o = "div", ...i }, t) => /* @__PURE__ */ p(
+    c,
+    {
+      ref: t,
+      className: a(r),
+      variant: "caption",
+      color: "secondary",
+      as: o,
+      ...i
+    }
+  )
+);
+e.displayName = "Description";
+export {
+  e as Description
+};

package/dist/esm/components/description/index.js

@@ -0,0 +1,4 @@
+import { Description as e } from "./description.js";
+export {
+  e as Description
+};

package/dist/esm/components/detailed-apy/detailed-apy.js

@@ -0,0 +1,74 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { forwardRef as y, useMemo as i } from "react";
+import { RoundedImage as u } from "../rounded-image/rounded-image.js";
+import { Skeleton as g } from "../skeleton/skeleton.js";
+import "@gearbox-protocol/sdk";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import { percentTemplate as l } from "../../utils/format-money.js";
+import { getStatic as c } from "../../utils/static.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function h({
+  reward: t,
+  tokensList: n,
+  ...a
+}) {
+  const o = n?.[t?.rewardToken || ""]?.symbol || t?.rewardTokenSymbol, {
+    size: e = o === "GEAR" ? 11 : 12,
+    margin: s = o === "GEAR" ? "-5px 2px 0 2px" : "-3px 2px 0 2px"
+  } = a;
+  return /* @__PURE__ */ r(
+    u,
+    {
+      src: o === "GEAR" ? c("/logo/logo_symbol.png") : c(`/tokens/${o?.toLowerCase()}.svg`),
+      size: e,
+      rounded: !1,
+      style: { margin: s, height: "auto" }
+    }
+  );
+}
+const d = y(({ poolAPY: t, extraAPY: n, tokensList: a }, o) => /* @__PURE__ */ r("div", { ref: o, className: "inline-block", children: n.length > 0 && /* @__PURE__ */ r("span", { className: "text-xs", children: /* @__PURE__ */ m("span", { className: "flex items-start text-secondary-foreground font-normal", children: [
+  l(t),
+  " +",
+  /* @__PURE__ */ r("span", { className: "flex flex-col items-end flex-wrap", children: n.map((e) => {
+    const s = e.apy || 0;
+    return s > 0 && /* @__PURE__ */ m(
+      "span",
+      {
+        children: [
+          /* @__PURE__ */ r(h, { reward: e, tokensList: a }),
+          l(s)
+        ]
+      },
+      `${e.token}-${e.rewardToken}-${e.apy}-${e.endTimestamp}`
+    );
+  }) })
+] }) }) }));
+d.displayName = "ApyParts";
+function v({
+  totalAPY: t,
+  totalAPYLoading: n,
+  baseAPY: a,
+  extraAPY: o,
+  tokensList: e
+}) {
+  const s = i(
+    () => a.reduce((p, x) => p + x.apy, 0),
+    [a]
+  ), f = i(() => o.filter((p) => (p.apy || 0) > 0), [o]);
+  return /* @__PURE__ */ r(g, { width: 80, loading: n, children: t >= 1e-3 && /* @__PURE__ */ r(
+    d,
+    {
+      extraAPY: f,
+      poolAPY: s,
+      tokensList: e
+    }
+  ) });
+}
+export {
+  v as DetailedApy,
+  h as PoolRewardsIcon
+};

package/dist/esm/components/detailed-apy/index.js

@@ -0,0 +1,5 @@
+import { DetailedApy as r, PoolRewardsIcon as a } from "./detailed-apy.js";
+export {
+  r as DetailedApy,
+  a as PoolRewardsIcon
+};

package/dist/esm/components/detailed-page-title/detailed-page-title-copy-button.js

@@ -0,0 +1,72 @@
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import { IconCopy as d } from "@gearbox-protocol/static";
+import * as r from "react";
+import { IconButton as y } from "../icon-button/icon-button.js";
+import { faCheck as x } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as C } from "../icons/fa-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as g } from "../typed-intl/index.js";
+import { useIsMobile as h } from "../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk";
+import { cn as s } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const I = r.forwardRef(function({ toCopy: t, className: n }, c) {
+  const l = h(), [o, a] = r.useState(!1), i = r.useRef(null), p = l ? 32 : 40, m = async () => {
+    if (t)
+      try {
+        await navigator.clipboard.writeText(t), i.current && clearTimeout(i.current), a(!0), i.current = setTimeout(() => {
+          a(!1);
+        }, 1500);
+      } catch (u) {
+        console.error("Failed to copy:", u);
+      }
+  };
+  return t ? /* @__PURE__ */ e(
+    T,
+    {
+      title: /* @__PURE__ */ f(
+        y,
+        {
+          ref: c,
+          buttonType: "outlined",
+          size: p,
+          onClick: m,
+          title: o ? "Copied!" : void 0,
+          className: s("relative", n),
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "absolute inset-0 flex items-center justify-center transition-all duration-200",
+                  o ? "opacity-100 scale-100 text-success" : "opacity-0 scale-50 text-foreground"
+                ),
+                children: /* @__PURE__ */ e(C, { icon: x, className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: s(
+                  "flex items-center justify-center transition-all duration-200 text-foreground",
+                  o ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                ),
+                children: /* @__PURE__ */ e(d, { size: 15 })
+              }
+            )
+          ]
+        }
+      ),
+      placement: "top",
+      children: /* @__PURE__ */ e(g, { messageId: "components.openCopyButtons.copy" })
+    }
+  ) : null;
+});
+I.displayName = "DetailedPageTitleCopyButton";
+export {
+  I as DetailedPageTitleCopyButton
+};

package/dist/esm/components/detailed-page-title/detailed-page-title-explorer-dropdown.js

@@ -0,0 +1,59 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { IconExternal as t } from "@gearbox-protocol/static";
+import * as a from "react";
+import { BaseLink as p } from "../base-link/base-link.js";
+import { IconButton as d } from "../icon-button/icon-button.js";
+import { SimpleDropdown as c } from "../simple-dropdown/simple-dropdown.js";
+import { SimpleDropdownMenuItem as f } from "../simple-dropdown/simple-dropdown-menu-item.js";
+import { useIsMobile as u } from "../../hooks/use-media-query.js";
+import "@gearbox-protocol/sdk";
+import { cn as h } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+const x = a.forwardRef(function({ explorerLinks: o, className: i, title: l }, n) {
+  const m = u() ? 32 : 40;
+  return /* @__PURE__ */ e(
+    c,
+    {
+      title: l || /* @__PURE__ */ e(
+        d,
+        {
+          ref: n,
+          buttonType: "outlined",
+          size: m,
+          title: "View in explorer",
+          className: h(i),
+          children: /* @__PURE__ */ e("span", { className: "flex items-center justify-center text-foreground", children: /* @__PURE__ */ e(t, { size: 14 }) })
+        }
+      ),
+      asChild: !0,
+      placement: "bottom",
+      align: "end",
+      children: o?.map((r) => /* @__PURE__ */ e(f, { asChild: !0, children: /* @__PURE__ */ s(
+        p,
+        {
+          href: r.url,
+          external: !0,
+          className: "flex items-center gap-2",
+          children: [
+            r.name,
+            /* @__PURE__ */ e(
+              t,
+              {
+                size: 14,
+                className: "ml-auto",
+                style: { width: 14, height: 14 }
+              }
+            )
+          ]
+        }
+      ) }, r.url))
+    }
+  );
+});
+x.displayName = "DetailedPageTitleExplorerDropdown";
+export {
+  x as DetailedPageTitleExplorerDropdown
+};

package/dist/esm/components/detailed-page-title/detailed-page-title.js

@@ -0,0 +1,191 @@
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import * as g from "react";
+import { PageTitle as T } from "../page-title/page-title.js";
+import { TokenIcon as D } from "../token-icon/token-icon.js";
+import "@gearbox-protocol/sdk";
+import { cn as m } from "../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+import "../accordion/accordion.js";
+import "@gearbox-protocol/static";
+import "@fortawesome/free-solid-svg-icons";
+import "../icons/fa-icon.js";
+import "../alert-badge/alert-badge.js";
+import "../alert-dialog/alert-dialog.js";
+import "../alert-modal/alert-modal.js";
+import "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import "react-intl";
+import "../arc-loader/arc-loader.js";
+import "../asset-line/asset-line.js";
+import "../buttons/back-button/back-button.js";
+import "../buttons/button/button.js";
+import "../buttons/copy-button/copy-button.js";
+import "../buttons/external-button/external-button.js";
+import "../buttons/filter-button/filter-button.js";
+import "../buttons/navigation-button/navigation-button.js";
+import "../buttons/tab-button/tab-button.js";
+import "wagmi";
+import "../auth/wallet-ui-context.js";
+import "../avatar/avatar.js";
+import "../badge/badge.js";
+import "../base-link/base-link.js";
+import "../navigation-context/navigation-context.js";
+import "../button-checkbox/button-checkbox.js";
+import "../card-grid/card-grid.js";
+import "../cards/card/card.js";
+import "../carousel/carousel.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../checkbox-item/checkbox-item.js";
+import "../client-adapters/styled-button/styled-button.js";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
+import "../colored-text/colored-text.js";
+import "../input/input.js";
+import "../with-title/with-title.js";
+import "../smart-number-input/balance-indicator.js";
+import "../smart-number-input/smart-number-input.js";
+import "../points-icon/points-icon.js";
+import "../skeleton/skeleton.js";
+import "../vertical-indicator/vertical-indicator.js";
+import "../vertical-list/vertical-list.js";
+import "../confirm-menu/confirm-menu.js";
+import "../currency-button/currency-button.js";
+import "../description/description.js";
+import "../detailed-apy/detailed-apy.js";
+import { DetailedPageTitleCopyButton as P } from "./detailed-page-title-copy-button.js";
+import { DetailedPageTitleExplorerDropdown as h } from "./detailed-page-title-explorer-dropdown.js";
+import "../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../dialog/dialog-container.js";
+import "../dialog/dialog-content.js";
+import "../dialog/dialog-description.js";
+import "../dialog/dialog-footer.js";
+import "../dialog/dialog-header.js";
+import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
+import "../dialog/dialog-overlay.js";
+import "viem";
+import "../label/label.js";
+import "../dropdown-menu/dropdown-menu.js";
+import "../dropdown-menu/dropdown-menu-checkbox-item.js";
+import "../dropdown-menu/dropdown-menu-content.js";
+import "../dropdown-menu/dropdown-menu-item.js";
+import "../dropdown-menu/dropdown-menu-label.js";
+import "../dropdown-menu/dropdown-menu-radio-item.js";
+import "../dropdown-menu/dropdown-menu-separator.js";
+import "../dropdown-menu/dropdown-menu-shortcut.js";
+import "../dropdown-menu/dropdown-menu-sub-content.js";
+import "../dropdown-menu/dropdown-menu-sub-trigger.js";
+import "../edit-input/edit-input.js";
+import "../fadeout-loading/fadeout-loading.js";
+import "../filter/filter-block.js";
+import "../filter/filter-checkbox-item.js";
+import "../filter/filter-chip.js";
+import "../filter/filter-chips.js";
+import "../filter/filter-dropdown-item.js";
+import "../filter/filter-group.js";
+import "../filter/filter-label.js";
+import "../search-line/search-line.js";
+import "../tabs/tabs.js";
+import "../filter/filter-modal-item.js";
+import "../filter/filter-radio-item.js";
+import "../filter/filter-separator.js";
+import "../filter/variants.js";
+import "../graph/formatters.js";
+import "lightweight-charts";
+import "../graph/graph-view.js";
+import "../help-tip/help-tip.js";
+import "../health-factor/health-factor.js";
+import "../horizontal-indicator/horizontal-indicator.js";
+import "../icon-button/icon-button.js";
+import "../layout/col/col.js";
+import "../layout/container/container.js";
+import "../layout/footer/footer.js";
+import "../layout/grid/grid.js";
+import "../layout/header/header.js";
+import "../layout/layout/layout.js";
+import "../layout/social-icons/social-icons.js";
+import "../link/link.js";
+import { getSymbolOrIcon as y } from "../token-symbol/token-symbol.js";
+import "../../utils/reactochart-compat.js";
+import "../status-elements/status-elements.js";
+import "../text-button/text-button.js";
+import "../loader/loader.js";
+import "../loading/loading.js";
+import "../loading-bar/loading-bar.js";
+import "react-markdown";
+import "remark-gfm";
+import "../navbar/navbar.js";
+import "../navbar/navbar-indicator-context.js";
+import "../app-bar/app-bar.js";
+import "../navitem/navitem.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../progress/progress.js";
+import "../pool-indicator-icon/pool-indicator-icon.js";
+import "../progress-bar/progress-bar.js";
+import "../radio-group/radio-group.js";
+import "../rounded-image/rounded-image.js";
+import "../search-bar/search-bar.js";
+import "../segmented-control/segmented-control.js";
+import "../select/select.js";
+import "../separate-line/separate-line.js";
+import "../separator/separator.js";
+import "../simple-accordion/simple-accordion.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../slider/slider.js";
+import "../slider/slider-context.js";
+import "@radix-ui/react-slider";
+import "../spinner/spinner.js";
+import "../spinner-loader/spinner-loader.js";
+import "../split-list/split-list.js";
+import "../stat-badge/stat-badge.js";
+import "../status-dot/status-dot.js";
+import "../stepper/stepper.js";
+import "../switch/switch.js";
+import "../table/grid-table.js";
+import "../table/table.js";
+import "../table/grid-table-loader.js";
+import "../textarea/textarea.js";
+import "../theme-provider.js";
+import "../time-to-liquidation/time-to-liquidation.js";
+import "../tip-card/tip-card.js";
+import "../toggle/toggle.js";
+import "../typography/typography.js";
+import "../with-filter-button/with-filter-button.js";
+const b = g.forwardRef(function({
+  title: p,
+  token: t,
+  toCopy: r,
+  explorerLinks: o,
+  buttonsSlot: e,
+  actionsPosition: a,
+  actionsPositionMd: l,
+  tokenIconSize: s = 36,
+  disabled: c = !1,
+  className: n
+}, d) {
+  return /* @__PURE__ */ i(
+    T,
+    {
+      ref: d,
+      actionsPosition: a,
+      actionsPositionMd: l,
+      icon: t?.symbol ? /* @__PURE__ */ i("div", { className: m("inline-block shrink-0", c && "grayscale"), children: /* @__PURE__ */ i(D, { symbol: y(t), size: s }) }) : void 0,
+      actions: /* @__PURE__ */ f("div", { className: "flex flex-wrap items-center gap-2", children: [
+        e,
+        r && /* @__PURE__ */ i(P, { toCopy: r }),
+        o && o.length > 0 && /* @__PURE__ */ i(h, { explorerLinks: o })
+      ] }),
+      className: m(n),
+      children: p
+    }
+  );
+});
+b.displayName = "DetailedPageTitle";
+export {
+  b as DetailedPageTitle
+};

package/dist/esm/components/detailed-page-title/index.js

@@ -0,0 +1,8 @@
+import { DetailedPageTitle as t } from "./detailed-page-title.js";
+import { DetailedPageTitleCopyButton as l } from "./detailed-page-title-copy-button.js";
+import { DetailedPageTitleExplorerDropdown as i } from "./detailed-page-title-explorer-dropdown.js";
+export {
+  t as DetailedPageTitle,
+  l as DetailedPageTitleCopyButton,
+  i as DetailedPageTitleExplorerDropdown
+};