@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.0

package/dist/esm/components/badge/chip.js

@@ -1,26 +1,22 @@
 import { jsx as r } from "react/jsx-runtime";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as i } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { Badge as p } from "./badge.js";
+import { Badge as e } from "./badge.js";
 class s {
   static root = "chip-root";
 }
-class e {
+class c {
   static root = "chips-root";
   static chip = s.root;
 }
-function C({
+function f({
   children: t,
   tone: o = "neutral",
   className: a
 }) {
   return /* @__PURE__ */ r(
-    p,
+    e,
     {
       variant: o,
       className: i("shrink-0", a),
@@ -29,19 +25,19 @@ function C({
     }
   );
 }
-function g({ children: t, className: o }) {
+function l({ children: t, className: o }) {
   return /* @__PURE__ */ r(
     "div",
     {
       className: i("flex shrink-0 items-center gap-x-2", o),
-      "data-testid": e.root,
+      "data-testid": c.root,
       children: t
     }
   );
 }
 export {
-  C as Chip,
+  f as Chip,
   s as ChipTest,
-  g as Chips,
-  e as ChipsTest
+  l as Chips,
+  c as ChipsTest
 };

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

@@ -1,10 +1,9 @@
-import { Badge as i, badgeVariants as r } from "./badge.js";
-import { Chip as t, ChipTest as a, Chips as h, ChipsTest as o } from "./chip.js";
+import { Badge as h } from "./badge.js";
+import { Chip as o, ChipTest as r, Chips as s, ChipsTest as t } from "./chip.js";
 export {
-  i as Badge,
-  t as Chip,
-  a as ChipTest,
-  h as Chips,
-  o as ChipsTest,
-  r as badgeVariants
+  h as Badge,
+  o as Chip,
+  r as ChipTest,
+  s as Chips,
+  t as ChipsTest
 };

package/dist/esm/components/base/amount-input/amount-input.js

@@ -4,10 +4,9 @@ import { useState as x, useEffect as q } from "react";
 import { useTitleText as G } from "../text/use-title-text.js";
 import { Modal as H } from "../../modal/modal.js";
 import { useIntlTyped as J, FormattedMessageTyped as K } from "../../typed-intl/index.js";
-import "@gearbox-protocol/sdk/common-utils";
 import { useIsMobile as Q } from "../../../hooks/use-media-query.js";
-import { bnToInputView as M } from "../../../utils/bn-to-input-view.js";
 import { cn as R } from "../../../utils/cn.js";
+import { bnToInputView as M } from "../../../utils/internal/bn-to-input-view.js";
 import { parseInputToBN as S } from "../../../utils/parse-input-to-bn.js";
 import { BalanceIndicator as W } from "./balance-indicator.js";
 import { AmountInputTest as m } from "./constants.js";
@@ -44,12 +43,12 @@ const Y = g(
     defaultVariants: { size: "md" }
   }
 );
-function ge({
+function xe({
   amount: t,
   onAmount: s,
   token: r,
   tokens: n,
-  onToken: o,
+  onToken: a,
   balance: u,
   balances: B,
   usdPrices: j,
@@ -57,7 +56,7 @@ function ge({
   maxLabel: v,
   usdPrice: b,
   size: A,
-  disabled: a = !1,
+  disabled: o = !1,
   testId: D
 }) {
   const O = J(), y = G(), U = Q(), i = A ?? (U ? "sm" : "md"), l = r.decimals, [p, w] = x(
@@ -70,8 +69,8 @@ function ge({
   const $ = (d) => {
     const [F, V] = S(d.target.value, l);
     F === null || V === null || (w(V), s(F));
-  }, I = !!(n && n.length > 1 && o && !a), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
-    o?.(d), f(!1);
+  }, I = !!(n && n.length > 1 && a && !o), T = b !== void 0 ? ee(p, b) : null, E = (d) => {
+    a?.(d), f(!1);
   }, C = () => f(!1);
   return /* @__PURE__ */ c(L, { children: [
     /* @__PURE__ */ c(
@@ -79,7 +78,7 @@ function ge({
       {
         "data-testid": D ?? m.root,
         "data-active": P,
-        "data-disabled": a,
+        "data-disabled": o,
         className: Y({ size: i }),
         children: [
           /* @__PURE__ */ c("div", { className: "mb-2 flex justify-between text-sm leading-[120%]", children: [
@@ -100,7 +99,7 @@ function ge({
                 title: v !== void 0 ? y(v) : void 0,
                 token: r,
                 balance: u,
-                disabled: a,
+                disabled: o,
                 onMax: () => s(u)
               }
             ) : null
@@ -120,7 +119,7 @@ function ge({
                 onChange: $,
                 onFocus: () => z(!0),
                 onBlur: () => z(!1),
-                disabled: a,
+                disabled: o,
                 minLength: 1,
                 maxLength: 79,
                 title: O.formatMessage({
@@ -143,7 +142,7 @@ function ge({
               {
                 token: r,
                 size: i,
-                disabled: a
+                disabled: o
               }
             ) })
           ] }),
@@ -182,19 +181,19 @@ function ee(t, s) {
   if (!s) return null;
   const r = Number.parseFloat(t.replace(",", ".") || "0");
   if (!Number.isFinite(r) || r === 0) return null;
-  const n = r * s, o = Math.abs(n) < 100;
+  const n = r * s, a = Math.abs(n) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
       currency: "USD",
-      minimumFractionDigits: o ? 2 : 0,
-      maximumFractionDigits: o ? 2 : 0
+      minimumFractionDigits: a ? 2 : 0,
+      maximumFractionDigits: a ? 2 : 0
     }).format(n);
   } catch {
     return "$0";
   }
 }
 export {
-  ge as AmountInput,
+  xe as AmountInput,
   m as AmountInputTest
 };

package/dist/esm/components/base/amount-input/index.js

@@ -1,8 +1,6 @@
-import { AmountInput as e } from "./amount-input.js";
-import { TokenSelectPanel as r } from "./token-select-panel.js";
+import { AmountInput as m } from "./amount-input.js";
 import { AmountInputTest as p } from "./constants.js";
 export {
-  e as AmountInput,
-  p as AmountInputTest,
-  r as TokenSelectPanel
+  m as AmountInput,
+  p as AmountInputTest
 };

package/dist/esm/components/base/amount-input/token-select-panel.js

@@ -1,73 +1,57 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../../buttons/button/button.js";
-import { VSpace as b } from "../../vspace/vspace.js";
-import { GridTable as g, GridTableBody as v, GridTableRow as w, GridTableCell as s } from "../../table/grid-table.js";
-import "../../skeleton/skeleton.js";
-import "react";
-import "@gearbox-protocol/sdk";
-import "clsx";
-import "tailwind-merge";
-import "sonner";
-import { formatAssetAmount as T } from "../../../utils/format-asset-amount.js";
+import { GridTable as u, GridTableBody as b, GridTableRow as g, GridTableCell as t } from "../../table/grid-table.js";
+import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as w } from "../../typed-intl/index.js";
+import { VSpace as T } from "../../vspace/vspace.js";
 import { formatMoney as y } from "../../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../../utils/z-index.js";
-import "../../table/table.js";
-import { TokenSymbol as N } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as z } from "../../typed-intl/index.js";
-import { AmountInputTest as n } from "./constants.js";
-function d(o, i) {
-  if (o)
-    return o[i] ?? o[i.toLowerCase()];
-}
-function Q({
+import { formatAssetAmount as N } from "../../../utils/internal/format-asset-amount.js";
+import { AmountInputTest as m } from "./constants.js";
+function P({
   tokens: o,
-  balances: i,
-  usdPrices: p,
+  balances: d,
+  usdPrices: n,
   onSelect: c,
-  onClose: f
+  onClose: p
 }) {
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ l(
     "div",
     {
-      "data-testid": n.selectPanel,
+      "data-testid": m.selectPanel,
       className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
       children: [
         /* @__PURE__ */ e(
           h,
           {
-            title: /* @__PURE__ */ e(z, { messageId: "components.amountInput.selectToken" }),
-            onClose: f
+            title: /* @__PURE__ */ e(w, { messageId: "components.amountInput.selectToken" }),
+            onClose: p
           }
         ),
-        /* @__PURE__ */ e(b, { size: 16 }),
+        /* @__PURE__ */ e(T, { size: 16 }),
         /* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
-          g,
+          u,
           {
             cols: "minmax(0,1fr) 120px",
             gap: 0,
             size: "sm",
             wrapperClassName: "overflow-visible",
-            children: /* @__PURE__ */ e(v, { children: o.map((r, x) => {
-              const l = d(i, r.address) ?? 0n, m = d(p, r.address), u = Number(l) / 10 ** r.decimals, a = m !== void 0 ? y(u * m, 4) : void 0;
-              return /* @__PURE__ */ t(
-                w,
+            children: /* @__PURE__ */ e(b, { children: o.map((r, f) => {
+              const a = d?.get(r.address) ?? 0n, s = n?.get(r.address), x = Number(a) / 10 ** r.decimals, i = s !== void 0 ? y(x * s, 4) : void 0;
+              return /* @__PURE__ */ l(
+                g,
                 {
-                  last: x === o.length - 1,
+                  last: f === o.length - 1,
                   height: "56px",
-                  "data-testid": n.selectOption,
+                  "data-testid": m.selectOption,
                   onRowClick: () => c(r),
                   children: [
-                    /* @__PURE__ */ e(s, { size: "sm", children: /* @__PURE__ */ t("div", { className: "flex items-center gap-3", children: [
-                      /* @__PURE__ */ e(N, { token: r, size: 24, showSymbol: !1 }),
+                    /* @__PURE__ */ e(t, { size: "sm", children: /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                      /* @__PURE__ */ e(v, { token: r, size: 24, showSymbol: !1 }),
                       /* @__PURE__ */ e("span", { className: "truncate", children: r.name })
                     ] }) }),
-                    /* @__PURE__ */ e(s, { size: "sm", textAlign: "right", children: /* @__PURE__ */ t("div", { children: [
-                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: T(l, r.decimals) }),
-                      a !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: a }) : null
+                    /* @__PURE__ */ e(t, { size: "sm", textAlign: "right", children: /* @__PURE__ */ l("div", { children: [
+                      /* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: N(a, r.decimals) }),
+                      i !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: i }) : null
                     ] }) })
                   ]
                 },
@@ -81,5 +65,5 @@ function Q({
   );
 }
 export {
-  Q as TokenSelectPanel
+  P as TokenSelectPanel
 };

package/dist/esm/components/base/apy-breakdown-body/apy-breakdown-body.js

@@ -0,0 +1,110 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { cn as i } from "../../../utils/cn.js";
+import { bpsToPercent as l } from "../../../utils/internal/bps-to-percent.js";
+const x = "—", p = "400px";
+function b(e, n, t) {
+  return e === "7d" ? t : n;
+}
+function g(e, n = !1) {
+  const t = l(e), s = `${Math.abs(t).toFixed(2)}%`;
+  return n && t < 0 ? `−${s}` : s;
+}
+function h(e) {
+  return Number(Math.abs(l(e)).toFixed(2));
+}
+function N({
+  title: e,
+  chip: n,
+  chipPositive: t = !1,
+  chipTestId: s,
+  children: r,
+  testId: o
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "flex w-full min-w-0 flex-col gap-4 rounded-xl border border-border bg-card p-4",
+      "data-testid": o,
+      children: [
+        /* @__PURE__ */ d("div", { className: "flex min-h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ a("span", { className: "min-w-0 text-base font-semibold leading-5 text-foreground", children: e }),
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: i(
+                "shrink-0 rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                t ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
+              ),
+              "data-testid": s,
+              children: n
+            }
+          )
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex flex-col gap-3", children: r })
+      ]
+    }
+  );
+}
+function w({
+  label: e,
+  value: n,
+  subtext: t,
+  muted: s = !1,
+  testId: r,
+  valueTestId: o,
+  captionTestId: c
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "flex items-start justify-between gap-3",
+      "data-testid": r,
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: i(
+              "min-w-0 text-sm font-semibold leading-5",
+              s ? "text-muted-foreground" : "text-foreground"
+            ),
+            children: e
+          }
+        ),
+        /* @__PURE__ */ d("span", { className: "flex shrink-0 flex-col items-end", children: [
+          /* @__PURE__ */ a(
+            "span",
+            {
+              className: i(
+                "text-sm font-semibold leading-5 tabular-nums",
+                s ? "text-muted-foreground" : "text-foreground"
+              ),
+              "data-testid": o,
+              children: n
+            }
+          ),
+          t != null ? /* @__PURE__ */ a(
+            "span",
+            {
+              className: "text-xs leading-4 text-muted-foreground",
+              "data-testid": c,
+              children: t
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function y() {
+  return /* @__PURE__ */ a("div", { className: "h-px w-full bg-divider" });
+}
+export {
+  p as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  N as ApyBreakdownBody,
+  y as ApyBreakdownDivider,
+  w as ApyBreakdownRow,
+  x as BREAKDOWN_DASH,
+  h as breakdownRateValue,
+  g as formatBreakdownRate,
+  b as periodMessageId
+};

package/dist/esm/components/base/apy-breakdown-body/index.js

@@ -0,0 +1,11 @@
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as a, ApyBreakdownBody as r, ApyBreakdownDivider as d, ApyBreakdownRow as A, BREAKDOWN_DASH as B, breakdownRateValue as w, formatBreakdownRate as k, periodMessageId as n } from "./apy-breakdown-body.js";
+export {
+  a as APY_BREAKDOWN_TOOLTIP_WIDTH,
+  r as ApyBreakdownBody,
+  d as ApyBreakdownDivider,
+  A as ApyBreakdownRow,
+  B as BREAKDOWN_DASH,
+  w as breakdownRateValue,
+  k as formatBreakdownRate,
+  n as periodMessageId
+};

package/dist/esm/components/base/borrow-rate-block/borrow-rate-block.js

@@ -5,15 +5,11 @@ import { FormattedMessageTyped as e } from "../../typed-intl/index.js";
 import { Typography as d } from "../../typography/typography.js";
 import { VSpace as f } from "../../vspace/vspace.js";
 import { InfoList as b, InfoLine as i } from "../info-list/info-list.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import "../../help-tip/help-tip.js";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import "../../points-icon/points-icon.js";
 import { ApyValue as a } from "../values/scalars.js";
 import "../../badge/badge.js";
 import "../../badge/chip.js";
@@ -24,7 +20,7 @@ function p(t) {
 function u(t) {
   return typeof t == "number" ? t : t?.base;
 }
-function q({
+function j({
   data: t,
   dataTo: r
 }) {
@@ -85,6 +81,6 @@ function q({
   ) }) });
 }
 export {
-  q as BorrowRateBlock,
+  j as BorrowRateBlock,
   n as BorrowRateBlockTest
 };

package/dist/esm/components/base/chart-with-side-card/chart-with-side-card.js

@@ -1,7 +1,7 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
 import { ChartWithSideCardTest as i } from "./constants.js";
 function m({
-  chart: a,
+  chart: r,
   side: t
 }) {
   return /* @__PURE__ */ e(
@@ -10,18 +10,18 @@ function m({
       className: "flex w-full flex-wrap gap-4",
       "data-testid": i.root,
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "div",
           {
             className: "min-w-[min(100%,40rem)] grow-[999] basis-0",
             "data-testid": i.chart,
-            children: a
+            children: r
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ a(
           "div",
           {
-            className: "min-w-[min(100%,300px)] grow-0 shrink-0 basis-[22.5rem]",
+            className: "min-w-[min(100%,300px)] grow basis-[22.5rem]",
             "data-testid": i.side,
             children: t
           }

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

@@ -0,0 +1,61 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { faCheck as p } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as m } from "@gearbox-protocol/static";
+import * as f from "react";
+import { IconButton as d } from "../../icon-button/icon-button.js";
+import { FaIcon as u } from "../../icons/fa-icon.js";
+import { SimpleTooltip as y } from "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import { FormattedMessageTyped as C } from "../../typed-intl/index.js";
+import { useCopyToClipboard as x } from "../../../hooks/use-copy-to-clipboard.js";
+import { useIsMobile as g } from "../../../hooks/use-media-query.js";
+import { cn as i } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../../utils/z-index.js";
+const T = f.forwardRef(function({ toCopy: t, className: r }, s) {
+  const n = g(), { isCopied: o, copy: a } = x(), c = n ? 32 : 40;
+  return t ? /* @__PURE__ */ e(
+    y,
+    {
+      title: /* @__PURE__ */ l(
+        d,
+        {
+          ref: s,
+          buttonType: "outlined",
+          size: c,
+          onClick: () => t && a(t),
+          title: o ? "Copied!" : void 0,
+          className: i("relative", r),
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i(
+                  "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(u, { icon: p, className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: i(
+                  "flex items-center justify-center transition-all duration-200 text-foreground",
+                  o ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                ),
+                children: /* @__PURE__ */ e(m, { size: 15 })
+              }
+            )
+          ]
+        }
+      ),
+      placement: "top",
+      children: /* @__PURE__ */ e(C, { messageId: "components.openCopyButtons.copy" })
+    }
+  ) : null;
+});
+T.displayName = "DetailedPageTitleCopyButton";
+export {
+  T as DetailedPageTitleCopyButton
+};

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

@@ -1,26 +1,22 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { PageTitle as N } from "../page-title/page-title.js";
-import { Stack as i } from "../stack/stack.js";
-import { DetailedPageTitleCopyButton as j } from "../../detailed-page-title/detailed-page-title-copy-button.js";
-import { DetailedPageTitleExplorerDropdown as x } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
-import "react";
-import "@gearbox-protocol/sdk";
+import { Stack as r } from "../stack/stack.js";
+import { DetailedPageTitleExplorerDropdown as j } from "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
+import { TokenSymbol as x } from "../../token-symbol/token-symbol.js";
 import { cn as m } from "../../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 import { DetailedPageTitleTest as s } from "./constants.js";
-function K({
+import { DetailedPageTitleCopyButton as y } from "./copy-button.js";
+function F({
   title: c,
-  browserTitle: p,
+  browserTitle: d,
   token: n,
-  icon: d,
+  icon: p,
   tokenIconSize: u = 32,
   disabled: g = !1,
-  toCopy: l,
-  explorerLinks: t,
+  toCopy: i,
+  explorerLinks: e,
   badges: f,
   actions: a,
   buttonsSlot: o,
@@ -28,17 +24,17 @@ function K({
   actionsPosition: h = "left",
   className: T
 }) {
-  const D = n ? /* @__PURE__ */ e(
+  const D = n ? /* @__PURE__ */ t(
     "span",
     {
       className: m(
         "inline-flex shrink-0 self-center",
         g ? "grayscale" : void 0
       ),
-      children: /* @__PURE__ */ e(y, { size: u, token: n })
+      children: /* @__PURE__ */ t(x, { size: u, token: n })
     }
-  ) : d, P = o != null || a != null || l != null || t != null && t.length > 0 ? /* @__PURE__ */ r(
-    i,
+  ) : p, P = o != null || a != null || i != null || e != null && e.length > 0 ? /* @__PURE__ */ l(
+    r,
     {
       direction: "row",
       align: "center",
@@ -48,25 +44,25 @@ function K({
       children: [
         a,
         o,
-        l != null ? /* @__PURE__ */ e(j, { toCopy: l }) : null,
-        t != null && t.length > 0 ? /* @__PURE__ */ e(
-          x,
+        i != null ? /* @__PURE__ */ t(y, { toCopy: i }) : null,
+        e != null && e.length > 0 ? /* @__PURE__ */ t(
+          j,
           {
-            explorerLinks: [...t]
+            explorerLinks: [...e]
           }
         ) : null
       ]
     }
   ) : null;
-  return /* @__PURE__ */ r(
-    i,
+  return /* @__PURE__ */ l(
+    r,
     {
       gap: "sm",
       className: m("min-w-0", T),
       "data-testid": s.root,
       children: [
-        /* @__PURE__ */ r(
-          i,
+        /* @__PURE__ */ l(
+          r,
           {
             direction: "row",
             align: "center",
@@ -75,9 +71,9 @@ function K({
             wrap: !0,
             className: "w-full",
             children: [
-              /* @__PURE__ */ r(i, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
+              /* @__PURE__ */ l(r, { direction: "row", align: "center", gap: "sm", wrap: !0, className: "min-w-0", children: [
                 D,
-                /* @__PURE__ */ e(N, { title: c, browserTitle: p }),
+                /* @__PURE__ */ t(N, { title: c, browserTitle: d }),
                 f
               ] }),
               P
@@ -90,6 +86,6 @@ function K({
   );
 }
 export {
-  K as DetailedPageTitle,
+  F as DetailedPageTitle,
   s as DetailedPageTitleTest
 };