@gearbox-protocol/permissionless-ui 1.22.0-next.4 → 1.22.0-next.41

package/dist/esm/components/token-symbol/token-symbol.js

@@ -1,50 +1,105 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { TokenIcon as d } from "../token-icon/token-icon.js";
-import "react";
-import { cn as u } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { cva as N } from "class-variance-authority";
+import x from "react";
+import { RoundedImage as y } from "../rounded-image/rounded-image.js";
+import { ShortString as S } from "../short-string/short-string.js";
+import { TokenIcon as c } from "../token-icon/token-icon.js";
+import { SimpleTooltip as b } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
 import "@gearbox-protocol/sdk";
-function p(e) {
-  if (e)
-    return typeof e == "string" ? e : e.symbol;
+import { cn as I } from "../../utils/cn.js";
+import "sonner";
+import { getNetworkIcon as T } from "../../utils/network-icons.js";
+const R = N("", {
+  variants: {
+    marginSize: {
+      sm: "gap-1",
+      md: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    marginSize: "md"
+  }
+});
+function _(r) {
+  if (r)
+    return typeof r == "string" ? r : r.icon ? { icon: r.icon } : r.symbol;
 }
-function g(e) {
-  if (e)
-    return typeof e == "string" ? e : e.title;
+function j(r) {
+  if (r)
+    return typeof r == "string" ? r : r.title;
 }
-function I({
-  token: e,
-  title: m,
-  className: o,
-  comment: r,
-  showIcon: l = !0,
-  showSymbol: c = !1,
-  size: a = 24,
-  chainId: x,
-  network: h,
-  maxLength: v,
-  ...f
-}) {
-  const i = p(e), n = m || g(e);
-  return /* @__PURE__ */ t("div", { className: u("flex items-center gap-3", o), ...f, children: [
-    l && i && /* @__PURE__ */ s(
-      d,
+const z = x.forwardRef(
+  ({
+    className: r,
+    marginSize: d = "lg",
+    token: n,
+    title: m,
+    size: a = 24,
+    showSymbol: f = !1,
+    showIcon: p = !0,
+    maxLength: g,
+    chainId: V,
+    comment: l,
+    network: i,
+    ...u
+  }, h) => {
+    const o = _(n), v = m || j(n), s = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        c,
+        {
+          symbol: o,
+          size: a,
+          className: "shrink-0 self-center"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
+        y,
+        {
+          src: T(i),
+          alt: i,
+          size: 14,
+          rounded: !0
+        }
+      ) })
+    ] }) : /* @__PURE__ */ e(
+      c,
       {
-        symbol: i,
+        symbol: o,
         size: a,
         className: "shrink-0 self-center"
       }
-    ),
-    c && n && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-      /* @__PURE__ */ s("div", { className: "text-xs sm:text-sm md:text-base font-medium truncate whitespace-pre-wrap leading-tight", children: n }),
-      r && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
-        "(",
-        r,
-        ")"
-      ] })
-    ] })
-  ] });
-}
+    );
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: h,
+        className: I(
+          "flex items-center",
+          R({ marginSize: d }),
+          r
+        ),
+        ...u,
+        children: [
+          p && o && (i !== void 0 ? /* @__PURE__ */ t(b, { title: s(), children: [
+            "Network: ",
+            i
+          ] }) : s()),
+          (m || f) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: g, children: v }) }),
+            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
+              "(",
+              l,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+z.displayName = "TokenSymbol";
 export {
-  I as TokenSymbol
+  z as TokenSymbol
 };

package/dist/esm/components/token-template/token-template.js

@@ -1,24 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
 import "react";
-import { cn as f } from "../../utils/cn.js";
+import { bnToPrettyView as T } from "../../utils/bn-to-pretty-view.js";
+import "clsx";
+import "tailwind-merge";
 import "sonner";
 import "@gearbox-protocol/sdk";
-import { negativeTokenTemplate as T, tokenTemplate as l } from "../../utils/templates.js";
-import { tokenTemplateString as N } from "../../utils/templates.js";
-function h({
-  value: t,
+import { negativeTokenTemplate as I, tokenTemplateString as N } from "../../utils/templates.js";
+import { FormattedNumberString as d } from "../formatted-number/formatted-number.js";
+import { ShortString as g } from "../short-string/short-string.js";
+function A({
+  value: r,
   token: e,
-  precision: o,
-  spaceSymbol: r = " ",
-  maxLength: m,
-  allowNegative: n = !1,
-  className: p
+  precision: m,
+  formatter: n = T,
+  noFormattedAmountValue: i = "-",
+  showSymbol: p = !0,
+  maxLength: a = 1 / 0,
+  ...f
 }) {
-  const i = n ? T(t, e, o, r) : l(t, e, o, r, m);
-  return /* @__PURE__ */ a("span", { className: f(p), children: i });
+  const { decimals: l = 18, title: s } = e || {}, t = n(r, l, m), c = t === i;
+  return /* @__PURE__ */ u("span", { children: [
+    /* @__PURE__ */ o(d, { value: t, ...f }),
+    " ",
+    !c && p && /* @__PURE__ */ o(g, { maxLength: a, children: s })
+  ] });
 }
 export {
-  h as TokenTemplate,
-  T as negativeTokenTemplate,
+  A as TokenTemplate,
+  I as negativeTokenTemplate,
   N as tokenTemplateString
 };

package/dist/esm/components/tokens-list-cell/tokens-list-cell.js

@@ -1,12 +1,13 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import * as O from "react";
 import { TokenIcon as z } from "../token-icon/token-icon.js";
+import "../tooltip/simple-tooltip.js";
 import { TooltipProvider as y, Tooltip as T, TooltipTrigger as k, TooltipContent as b } from "../tooltip/tooltip.js";
+import "@gearbox-protocol/sdk";
 import { cn as v } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function E({
-  balances: u,
+function F({
+  balances: p,
   tokensList: d,
   maxAssets: s = 3,
   iconSize: h = 24,
@@ -17,29 +18,29 @@ function E({
     mode: m = "default",
     showIconTooltip: x = !0,
     otherTooltip: j,
-    onOtherClick: p
+    onOtherClick: u
   } = w || {}, [I, N, R, g] = O.useMemo(() => {
-    const e = u, n = e.slice(0, s), o = e.slice(s), i = o.map((r) => {
+    const t = p, n = t.slice(0, s), o = t.slice(s), i = o.map((r) => {
       const a = typeof r == "string" ? r : r.token;
       return d[a]?.symbol || "unknown";
-    }).join(", "), l = e.length > s;
+    }).join(", "), l = t.length > s;
     return [n, o, i, l];
-  }, [u, s, d]), S = (e) => typeof e == "string" ? e : e.token, M = (e, n, o) => m === "cascade" ? {
+  }, [p, s, d]), S = (t) => typeof t == "string" ? t : t.token, M = (t, n, o) => m === "cascade" ? {
     zIndex: o - n,
-    marginRight: e ? 0 : -12
+    marginRight: t ? 0 : -12
   } : {
-    marginRight: e ? 0 : 4
+    marginRight: t ? 0 : 4
   };
   return /* @__PURE__ */ c("div", { className: v("relative inline-flex items-center", C), children: [
-    I.map((e, n, o) => {
-      const i = S(e), l = d[i], r = n === o.length - 1 && !g, a = M(r, n, o.length), f = /* @__PURE__ */ t(z, { symbol: l?.symbol, size: h });
-      return /* @__PURE__ */ t("div", { className: "relative", style: a, children: x ? /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(T, { children: [
-        /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ t("span", { className: "cursor-help", children: f }) }),
-        /* @__PURE__ */ t(b, { children: l?.symbol || "Unknown" })
+    I.map((t, n, o) => {
+      const i = S(t), l = d[i], r = n === o.length - 1 && !g, a = M(r, n, o.length), f = /* @__PURE__ */ e(z, { symbol: l?.symbol, size: h });
+      return /* @__PURE__ */ e("div", { className: "relative", style: a, children: x ? /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
+        /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "cursor-help", children: f }) }),
+        /* @__PURE__ */ e(b, { children: l?.symbol || "Unknown" })
       ] }) }) : f }, i);
     }),
-    g && /* @__PURE__ */ t(y, { children: /* @__PURE__ */ c(T, { children: [
-      /* @__PURE__ */ t(k, { asChild: !0, children: /* @__PURE__ */ c(
+    g && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ c(T, { children: [
+      /* @__PURE__ */ e(k, { asChild: !0, children: /* @__PURE__ */ c(
         "button",
         {
           type: "button",
@@ -52,9 +53,9 @@ function E({
             height: h,
             marginLeft: m === "cascade" ? -12 : 4
           },
-          onClick: p ? (e) => {
-            p(
-              e
+          onClick: u ? (t) => {
+            u(
+              t
             );
           } : void 0,
           children: [
@@ -63,10 +64,10 @@ function E({
           ]
         }
       ) }),
-      /* @__PURE__ */ t(b, { children: j || R })
+      /* @__PURE__ */ e(b, { children: j || R })
     ] }) })
   ] });
 }
 export {
-  E as TokensListCell
+  F as TokensListCell
 };

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

@@ -1,7 +1,9 @@
-import { Tooltip as i, TooltipContent as r, TooltipProvider as p, TooltipTrigger as T } from "./tooltip.js";
+import { SimpleTooltip as i } from "./simple-tooltip.js";
+import { Tooltip as r, TooltipContent as e, TooltipProvider as l, TooltipTrigger as T } from "./tooltip.js";
 export {
-  i as Tooltip,
-  r as TooltipContent,
-  p as TooltipProvider,
+  i as SimpleTooltip,
+  r as Tooltip,
+  e as TooltipContent,
+  l as TooltipProvider,
   T as TooltipTrigger
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -0,0 +1,129 @@
+import { jsx as i, jsxs as x } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-tooltip";
+import * as o from "react";
+import "@gearbox-protocol/sdk";
+import { cn as p } from "../../utils/cn.js";
+import "sonner";
+const C = 7, j = 12;
+function S({
+  children: D,
+  title: u,
+  placement: R = "top",
+  trigger: n = "hover",
+  triangle: T = !0,
+  delayShow: f = 5,
+  maxWidth: E = "200px",
+  minWidth: O,
+  type: P = "tooltip",
+  open: m,
+  onOpenChange: k,
+  className: A,
+  triggerClassName: h
+}) {
+  const [L, N] = o.useState(!1), c = o.useRef(null), s = o.useRef(null), l = m !== void 0, a = l ? m : L, t = o.useCallback(
+    (e) => {
+      l ? k?.(e) : N(e);
+    },
+    [l, k]
+  ), H = o.useCallback(
+    (e) => {
+      n !== "click" && t(e);
+    },
+    [n, t]
+  ), I = o.useCallback(
+    (e) => {
+      n === "click" && (e.stopPropagation(), t(!a));
+    },
+    [n, a, t]
+  ), K = o.useCallback(
+    (e) => {
+      n === "click" && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.stopPropagation(), t(!a));
+    },
+    [n, a, t]
+  );
+  o.useEffect(() => {
+    if (n !== "click" || !a) return;
+    const e = (d) => {
+      const v = d.target;
+      c.current && !c.current.contains(v) && s.current && !s.current.contains(v) && t(!1);
+    }, w = (d) => {
+      d.key === "Escape" && t(!1);
+    };
+    return document.addEventListener("pointerdown", e), document.addEventListener("keydown", w), () => {
+      document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", w);
+    };
+  }, [n, a, t]);
+  const y = P === "modal-tooltip", b = T && !y, W = p(
+    // Base
+    "break-all",
+    "z-50 pointer-events-auto",
+    "animate-in fade-in-0 duration-100",
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:duration-75",
+    // Type-specific
+    y ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white antialiased",
+    A
+  );
+  return /* @__PURE__ */ i(
+    r.Provider,
+    {
+      delayDuration: n === "click" ? 0 : f,
+      skipDelayDuration: 0,
+      children: /* @__PURE__ */ x(
+        r.Root,
+        {
+          open: a,
+          onOpenChange: H,
+          delayDuration: n === "click" ? 0 : f,
+          children: [
+            /* @__PURE__ */ i(r.Trigger, { asChild: !0, children: n === "click" ? /* @__PURE__ */ i(
+              "button",
+              {
+                ref: s,
+                type: "button",
+                onClick: I,
+                onKeyDown: K,
+                className: p(
+                  "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
+                  h
+                ),
+                children: u
+              }
+            ) : /* @__PURE__ */ i(
+              "span",
+              {
+                ref: s,
+                className: p("inline-flex", h),
+                children: u
+              }
+            ) }),
+            /* @__PURE__ */ i(r.Portal, { children: /* @__PURE__ */ x(
+              r.Content,
+              {
+                ref: c,
+                side: R,
+                sideOffset: b ? C + 1 : 4,
+                className: W,
+                style: { maxWidth: E, minWidth: O },
+                children: [
+                  D,
+                  b && /* @__PURE__ */ i(
+                    r.Arrow,
+                    {
+                      width: j,
+                      height: C,
+                      className: "fill-black/85"
+                    }
+                  )
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+S.displayName = "SimpleTooltip";
+export {
+  S as SimpleTooltip
+};

package/dist/esm/components/tooltip/tooltip.js

@@ -1,9 +1,9 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import * as a from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const c = o.Provider, g = o.Root, T = o.Trigger, m = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {

package/dist/esm/components/trading-view/graph-dropdown.js

@@ -1,9 +1,11 @@
-import { jsx as l, jsxs as S } from "react/jsx-runtime";
-import { Check as L, Loader2 as R } from "lucide-react";
-import { useState as A, useRef as z, useEffect as B, useCallback as _, useMemo as p } from "react";
-import { Select as E, SelectTrigger as M, SelectValue as T, SelectContent as q, SelectItem as C } from "../select/select.js";
-function Q({
-  items: i,
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
+import { IconPending as F } from "@gearbox-protocol/static";
+import { useState as A, useRef as R, useEffect as B, useCallback as p, useMemo as _ } from "react";
+import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as L } from "../icons/fa-icon.js";
+import { Select as M, SelectTrigger as P, SelectValue as T, SelectContent as q, SelectItem as C } from "../select/select.js";
+function Y({
+  items: l,
   defaultItem: r,
   onSelected: d,
   multiple: a = !1,
@@ -25,34 +27,34 @@ function Q({
     }
     const e = Array.isArray(r) ? r[0] : r;
     return new Set([e?.value].filter(Boolean));
-  }, [t, w] = A(V), [o, v] = A(N()), [O, $] = A(!1), f = z(!1);
+  }, [t, w] = A(V), [o, f] = A(N()), [z, O] = A(!1), v = R(!1);
   B(() => {
     if (a) {
       const e = Array.isArray(r) ? r : [r], n = new Set(e.map((s) => s.value));
-      w(n), e.length > 0 && v(String(e[0].value));
+      w(n), e.length > 0 && f(String(e[0].value));
     } else {
       const e = Array.isArray(r) ? r[0] : r;
-      e?.value && v(String(e.value));
+      e?.value && f(String(e.value));
     }
   }, [r, a]);
-  const j = _(
+  const $ = p(
     (e) => {
-      if (!e && a && f.current) {
-        f.current = !1;
+      if (!e && a && v.current) {
+        v.current = !1;
         return;
       }
-      $(e);
+      O(e);
     },
     [a]
-  ), x = _(
+  ), x = p(
     (e) => {
-      const n = i.find((s) => String(s.value) === e);
+      const n = l.find((s) => String(s.value) === e);
       if (n && !h?.has(n.value)) {
         if (b?.has(n.value) && !(a && t.has(n.value))) {
           g && g(n.value, n.label);
           return;
         }
-        a ? (f.current = !0, w((s) => {
+        a ? (v.current = !0, w((s) => {
           const c = new Set(s);
           if (c.has(n.value)) {
             if (c.size <= 1)
@@ -61,40 +63,40 @@ function Q({
           } else
             c.add(n.value);
           return d(Array.from(c)), c;
-        })) : (v(e), d(n.value));
+        })) : (f(e), d(n.value));
       }
     },
     [
       a,
       d,
-      i,
+      l,
       b,
       h,
       g,
       t
     ]
-  ), y = p(() => {
+  ), y = _(() => {
     if (!a) {
-      const s = i.find((u) => String(u.value) === o), c = Array.isArray(r) ? r[0] : r;
+      const s = l.find((u) => String(u.value) === o), c = Array.isArray(r) ? r[0] : r;
       return s || c;
     }
-    const e = Array.from(t).map((s) => i.find((c) => c.value === s)).filter((s) => !!s);
+    const e = Array.from(t).map((s) => l.find((c) => c.value === s)).filter((s) => !!s);
     return e.length === 0 ? (Array.isArray(r) ? r : [r])[0] : e.length === 1 ? e[0] : {
       value: e[0].value,
       label: `${e.length} selected`
     };
-  }, [a, r, i, t, o]), k = p(() => a ? "__multiple_placeholder__" : o, [a, o]);
-  return !i.length || i.length === 1 && !a ? /* @__PURE__ */ l("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ l("div", { className: "text-xl leading-6", children: y.label }) }) : /* @__PURE__ */ S(
-    E,
+  }, [a, r, l, t, o]), j = _(() => a ? "__multiple_placeholder__" : o, [a, o]);
+  return !l.length || l.length === 1 && !a ? /* @__PURE__ */ i("div", { className: "flex items-center", style: { width: "max-content" }, children: /* @__PURE__ */ i("div", { className: "text-xl leading-6", children: y.label }) }) : /* @__PURE__ */ S(
+    M,
     {
-      value: k,
+      value: j,
       onValueChange: x,
-      open: O,
-      onOpenChange: j,
+      open: z,
+      onOpenChange: $,
       children: [
-        /* @__PURE__ */ l(M, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ l(T, { children: y.label }) }),
+        /* @__PURE__ */ i(P, { className: "w-auto min-w-[16rem]", children: /* @__PURE__ */ i(T, { children: y.label }) }),
         /* @__PURE__ */ S(q, { className: "min-w-[16rem]", children: [
-          a && /* @__PURE__ */ l(
+          a && /* @__PURE__ */ i(
             C,
             {
               value: "__multiple_placeholder__",
@@ -103,27 +105,33 @@ function Q({
               children: y.label
             }
           ),
-          i.map((e, n) => {
+          l.map((e, n) => {
             const s = a && t.has(e.value), c = h?.has(e.value), u = c;
-            return /* @__PURE__ */ l(
+            return /* @__PURE__ */ i(
               C,
               {
                 value: String(e.value),
                 disabled: u,
-                onSelect: (F) => {
-                  a && F.preventDefault(), x(String(e.value));
+                onSelect: (k) => {
+                  a && k.preventDefault(), x(String(e.value));
                 },
                 className: u ? "opacity-50 cursor-not-allowed" : "",
                 children: /* @__PURE__ */ S("div", { className: "flex items-center gap-2", children: [
-                  a && /* @__PURE__ */ l(
+                  a && /* @__PURE__ */ i(
                     "span",
                     {
                       className: `flex h-4 w-4 items-center justify-center rounded-[4px] border border-primary shadow transition-colors ${s ? "bg-primary text-primary-foreground" : ""}`,
-                      children: s && /* @__PURE__ */ l(L, { className: "h-4 w-4" })
+                      children: s && /* @__PURE__ */ i(L, { icon: E, className: "size-4" })
                     }
                   ),
                   e.label,
-                  c && /* @__PURE__ */ l(R, { className: "ml-1 h-4 w-4 animate-spin text-muted-foreground" })
+                  c && /* @__PURE__ */ i(
+                    F,
+                    {
+                      size: 16,
+                      className: "ml-1 size-4 animate-spin text-muted-foreground"
+                    }
+                  )
                 ] })
               },
               `graph-item-${n}-${String(e.value)}`
@@ -135,5 +143,5 @@ function Q({
   );
 }
 export {
-  Q as GraphDropdown
+  Y as GraphDropdown
 };

package/dist/esm/components/typography/typography.js

@@ -1,12 +1,13 @@
 import { jsx as s } from "react/jsx-runtime";
 import { cva as x } from "class-variance-authority";
 import * as c from "react";
+import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
 const p = x("", {
   variants: {
     variant: {
+      inherit: "",
       h1: "text-4xl font-bold tracking-tight",
       h2: "text-3xl font-semibold tracking-tight",
       h3: "text-2xl font-semibold",
@@ -25,7 +26,8 @@ const p = x("", {
       success: "text-success",
       warning: "text-warning",
       destructive: "text-destructive",
-      primary: "text-primary"
+      primary: "text-primary",
+      secondary: "text-secondary-foreground"
     },
     weight: {
       inherit: "",
@@ -69,11 +71,12 @@ const p = x("", {
   body: "p",
   bodySmall: "p",
   caption: "span",
-  overline: "span"
+  overline: "span",
+  inherit: "span"
 }, u = c.forwardRef(
   ({
     className: e,
-    variant: t = "body",
+    variant: t = "inherit",
     color: i,
     weight: r,
     align: n,
@@ -81,12 +84,12 @@ const p = x("", {
     truncate: a,
     as: l,
     ...h
-  }, m) => {
-    const d = l || f[t || "body"];
+  }, d) => {
+    const m = l || f[t || "body"];
     return /* @__PURE__ */ s(
-      d,
+      m,
       {
-        ref: m,
+        ref: d,
         className: g(
           p({
             variant: t,