@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

package/dist/esm/components/layout/layout/layout.js

@@ -1,12 +1,12 @@
-import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import l from "react";
-import { cn as n } from "../../../utils/cn.js";
-const m = l.forwardRef(
-  ({ header: e, footer: a, children: o, className: d, ...i }, s) => /* @__PURE__ */ t(
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { cn as m } from "../../../utils/cn.js";
+const n = t.forwardRef(
+  ({ header: e, footer: o, children: a, className: d, ...i }, s) => /* @__PURE__ */ l(
     "div",
     {
       ref: s,
-      className: n("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
+      className: m("grid min-h-screen grid-rows-[auto_1fr_auto]", d),
       style: {
         gridTemplateAreas: `
             "header"
@@ -16,7 +16,14 @@ const m = l.forwardRef(
       },
       ...i,
       children: [
-        e && /* @__PURE__ */ r("div", { style: { gridArea: "header" }, children: e }),
+        e && /* @__PURE__ */ r(
+          "div",
+          {
+            className: "border-b border-border",
+            style: { gridArea: "header" },
+            children: e
+          }
+        ),
         /* @__PURE__ */ r(
           "main",
           {
@@ -26,15 +33,15 @@ const m = l.forwardRef(
               backgroundColor: "hsl(var(--background))",
               color: "hsl(var(--foreground))"
             },
-            children: o
+            children: a
           }
         ),
-        a && /* @__PURE__ */ r("div", { style: { gridArea: "footer" }, children: a })
+        o && /* @__PURE__ */ r("div", { style: { gridArea: "footer" }, children: o })
       ]
     }
   )
 );
-m.displayName = "Layout";
+n.displayName = "Layout";
 export {
-  m as Layout
+  n as Layout
 };

package/dist/esm/components/legal-agreement/legal-agreement-dialog.js

@@ -1,40 +1,48 @@
 import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
-import { AlertTriangle as b, ExternalLink as A, Loader2 as N } from "lucide-react";
-import * as P from "react";
-import { useState as B } from "react";
-import { AlertDialog as u, AlertDialogContent as f, AlertDialogHeader as x, AlertDialogTitle as g, AlertDialogDescription as h, AlertDialogFooter as k } from "../alert-dialog/alert-dialog.js";
-import { BaseLink as T } from "../base-link/base-link.js";
+import { IconExternal as A, IconPending as b } from "@gearbox-protocol/static";
+import * as B from "react";
+import { useState as j } from "react";
+import { AlertDialog as u, AlertDialogContent as f, AlertDialogHeader as x, AlertDialogTitle as g, AlertDialogDescription as h, AlertDialogFooter as w } from "../alert-dialog/alert-dialog.js";
+import { BaseLink as k } from "../base-link/base-link.js";
 import { Button as p } from "../buttons/button/button.js";
-import { Checkbox as j } from "../checkbox/checkbox.js";
+import { Checkbox as R } from "../checkbox/checkbox.js";
 import "../checkbox/checkbox-labeled.js";
-function U({
+import { faTriangleExclamation as I } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as T } from "../icons/fa-icon.js";
+function $({
   open: r,
   onClose: e,
   onSign: n,
   isSigning: o,
-  hasV2Signature: d = !1,
-  isAwaitingSignature: I = !1,
+  hasV2Signature: m = !1,
+  isAwaitingSignature: S = !1,
   config: c
 }) {
-  const [w, y] = B({}), S = c.checkboxItems.every((s) => w[s.id]), C = (s) => {
-    y((m) => ({ ...m, [s]: !m[s] }));
-  }, D = async () => {
+  const [y, N] = j({}), C = c.checkboxItems.every((s) => y[s.id]), D = (s) => {
+    N((d) => ({ ...d, [s]: !d[s] }));
+  }, P = async () => {
     await n();
   };
-  return P.useEffect(() => {
-    r || y({});
-  }, [r]), I ? /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: [
+  return B.useEffect(() => {
+    r || N({});
+  }, [r]), S ? /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl w-[calc(100%-2rem)] sm:w-full", children: [
     /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2", children: [
-      /* @__PURE__ */ t(N, { className: "h-5 w-5 animate-spin" }),
+      /* @__PURE__ */ t(b, { size: 20, className: "animate-spin" }),
       "Waiting for Signature"
     ] }) }),
     /* @__PURE__ */ t(h, { className: "text-center", children: c.waitingForSignatureText || "Please sign the message in your wallet to agree to the Terms of Service." })
   ] }) }) : /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-2xl max-h-[90vh] overflow-y-auto w-[calc(100%-2rem)] sm:w-full", children: [
-    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(g, { className: "text-center text-xl", children: d ? c.updatedTitle || "Terms of Service Updated" : c.title || "Legal Agreement" }) }),
+    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(g, { className: "text-center text-xl", children: m ? c.updatedTitle || "Terms of Service Updated" : c.title || "Legal Agreement" }) }),
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
       /* @__PURE__ */ t("div", { className: "text-center leading-relaxed text-base", children: c.notificationText }),
-      d && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3", children: [
-        /* @__PURE__ */ t(b, { className: "h-5 w-5 text-yellow-500 shrink-0 mt-0.5" }),
+      m && /* @__PURE__ */ a("div", { className: "flex items-start gap-2 rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-3", children: [
+        /* @__PURE__ */ t(
+          T,
+          {
+            icon: I,
+            className: "size-5 text-yellow-500 shrink-0 mt-0.5"
+          }
+        ),
         /* @__PURE__ */ a("p", { className: "text-sm text-yellow-500", children: [
           "Our Terms of Service have been updated. Please review and sign the new agreement to continue using ",
           c.productName,
@@ -42,19 +50,19 @@ function U({
         ] })
       ] }),
       /* @__PURE__ */ t("div", { className: "space-y-4", children: c.checkboxItems.map((s) => {
-        const m = `legal-checkbox-${s.id}`;
+        const d = `legal-checkbox-${s.id}`;
         return /* @__PURE__ */ a(
           "label",
           {
-            htmlFor: m,
+            htmlFor: d,
             className: "flex items-start gap-3 cursor-pointer group",
             children: [
               /* @__PURE__ */ t(
-                j,
+                R,
                 {
-                  id: m,
-                  checked: w[s.id] || !1,
-                  onCheckedChange: () => C(s.id),
+                  id: d,
+                  checked: y[s.id] || !1,
+                  onCheckedChange: () => D(s.id),
                   className: "mt-1"
                 }
               ),
@@ -65,7 +73,7 @@ function U({
         );
       }) })
     ] }),
-    /* @__PURE__ */ a(k, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
+    /* @__PURE__ */ a(w, { className: "flex-row gap-3 sm:justify-center mt-6", children: [
       /* @__PURE__ */ t(
         p,
         {
@@ -79,11 +87,11 @@ function U({
       /* @__PURE__ */ t(
         p,
         {
-          onClick: D,
-          disabled: !S || o,
+          onClick: P,
+          disabled: !C || o,
           className: "flex-1 sm:flex-none sm:min-w-[140px]",
           children: o ? /* @__PURE__ */ a(l, { children: [
-            /* @__PURE__ */ t(N, { className: "mr-2 h-4 w-4 animate-spin" }),
+            /* @__PURE__ */ t(b, { size: 16, className: "mr-2 animate-spin" }),
             "Signing..."
           ] }) : c.agreeButtonText || "Agree & Connect"
         }
@@ -93,7 +101,7 @@ function U({
 }
 function i(r, e) {
   return /* @__PURE__ */ t(
-    T,
+    k,
     {
       href: r,
       external: !0,
@@ -116,7 +124,7 @@ function v(r, e, n) {
       i(e.riskDisclosure, "Risk Disclosure Statement"),
       " and I voluntarily assume all risks described in it."
     ] })
-  }, d = /* @__PURE__ */ a(l, { children: [
+  }, m = /* @__PURE__ */ a(l, { children: [
     "Any use of and/or interaction with the ",
     r,
     " is subject to the",
@@ -132,12 +140,12 @@ function v(r, e, n) {
   ] });
   return r === "Permissionless Interface" ? {
     productName: r,
-    notificationText: d,
+    notificationText: m,
     checkboxItems: [o],
     agreeButtonText: n?.agreeButtonText
   } : r === "Permissionless Safe" ? {
     productName: r,
-    notificationText: d,
+    notificationText: m,
     checkboxItems: [o],
     agreeButtonText: n?.agreeButtonText
   } : {
@@ -189,23 +197,23 @@ function v(r, e, n) {
     agreeButtonText: n?.agreeButtonText
   };
 }
-function Y(r, e) {
+function q(r, e) {
   return v("Permissionless Interface", r, e);
 }
-function $(r, e) {
+function J(r, e) {
   return v("Permissionless Safe", r, e);
 }
-function q(r, e) {
+function K(r, e) {
   return v("Gearbox App", r, e);
 }
-function z({
+function M({
   open: r,
   onClose: e,
   termsOfServiceLink: n
 }) {
   return /* @__PURE__ */ t(u, { open: r, children: /* @__PURE__ */ a(f, { className: "max-w-lg", children: [
     /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(g, { className: "flex items-center justify-center gap-2 text-destructive", children: [
-      /* @__PURE__ */ t(b, { className: "h-5 w-5" }),
+      /* @__PURE__ */ t(T, { icon: I, className: "size-5" }),
       "Access Restricted"
     ] }) }),
     /* @__PURE__ */ a("div", { className: "space-y-4", children: [
@@ -215,28 +223,28 @@ function z({
         "This restriction applies to your use of the web application. For more details, please review the",
         " ",
         /* @__PURE__ */ a(
-          T,
+          k,
           {
             href: n,
             external: !0,
             className: "text-primary underline hover:text-primary/80 inline-flex items-center gap-1",
             children: [
               "Terms of Service",
-              /* @__PURE__ */ t(A, { className: "h-3 w-3" })
+              /* @__PURE__ */ t(A, { size: 12, className: "size-3" })
             ]
           }
         ),
         "."
       ] })
     ] }),
-    /* @__PURE__ */ t(k, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ t(p, { variant: "outline", onClick: e, children: "Close" }) })
+    /* @__PURE__ */ t(w, { className: "sm:justify-center mt-4", children: /* @__PURE__ */ t(p, { variant: "outline", onClick: e, children: "Close" }) })
   ] }) });
 }
 export {
-  z as BlockedRegionDialog,
-  U as LegalAgreementDialog,
-  q as createGearboxAppConfig,
+  M as BlockedRegionDialog,
+  $ as LegalAgreementDialog,
+  K as createGearboxAppConfig,
   v as createLegalAgreementConfig,
-  Y as createPermissionlessInterfaceConfig,
-  $ as createPermissionlessSafeConfig
+  q as createPermissionlessInterfaceConfig,
+  J as createPermissionlessSafeConfig
 };

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

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

package/dist/esm/components/link/link.js

@@ -0,0 +1,59 @@
+import { jsx as n, jsxs as o, Fragment as f } from "react/jsx-runtime";
+import { IconExternal as t } from "@gearbox-protocol/static";
+import { cva as w } from "class-variance-authority";
+import { BaseLink as u } from "../base-link/base-link.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as _ } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const g = w(
+  "[&_.icon-wrap]:-mt-px [&_.icon-wrap]:pl-1.5 [&_.icon-wrap]:leading-none [&_.icon-wrap]:text-secondary-foreground hover:[&_.icon-wrap]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "[&_.content-wrap]:border-b [&_.content-wrap]:border-transparent hover:[&_.content-wrap]:border-foreground",
+        underlined: "[&_.content-wrap]:border-0",
+        unset: "[&_.content-wrap]:border-0"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function x({
+  className: p,
+  children: a,
+  href: i,
+  target: s,
+  variant: e = "default",
+  size: c = "default",
+  color: m = "main",
+  external: r = !1,
+  asChild: d = !1,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    u,
+    {
+      href: i,
+      target: s,
+      external: r,
+      variant: e,
+      size: c,
+      color: m,
+      className: _(g({ variant: e }), p),
+      ...l,
+      children: d ? /* @__PURE__ */ o("span", { children: [
+        /* @__PURE__ */ n("span", { className: "content-wrap", children: a }),
+        r && /* @__PURE__ */ n("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ n(t, { size: 14 }) })
+      ] }) : /* @__PURE__ */ o(f, { children: [
+        /* @__PURE__ */ n("span", { className: "content-wrap", children: a }),
+        r && /* @__PURE__ */ n("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ n(t, { size: 14 }) })
+      ] })
+    }
+  );
+}
+x.displayName = "Link";
+export {
+  x as Link
+};

package/dist/esm/components/liquidation-price/index.js

@@ -0,0 +1,4 @@
+import { LiquidationPrice as r } from "./liquidation-price.js";
+export {
+  r as LiquidationPrice
+};

package/dist/esm/components/liquidation-price/liquidation-price.js

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { toBN as u } from "@gearbox-protocol/sdk";
+import { BaseLink as f } from "../base-link/base-link.js";
+import { FormattedNumberString as h } from "../formatted-number/formatted-number.js";
+import { StatusBars as x, HealthDot as N } from "../status-elements/status-elements.js";
+import { TextButton as g } from "../text-button/text-button.js";
+import "react";
+import { bnToLiquidationPriceView as b } from "../../utils/parse-input-to-bn.js";
+import { cn as v } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const w = { type: "text" };
+function F({
+  liquidationPrice: t = 0,
+  type: o = w,
+  hfZone: e,
+  zoneType: n = "dot",
+  checkLabel: i = "Check",
+  className: m
+}) {
+  const s = () => {
+    switch (o.type) {
+      case "redirect":
+        return /* @__PURE__ */ r(f, { href: o.to, external: !0, target: "_blank", children: i });
+      case "text":
+        return "N/A";
+      case "graph":
+        return /* @__PURE__ */ r(g, { onClick: o.props.onShow, children: i });
+      default:
+        return null;
+    }
+  }, a = () => {
+    const p = typeof t != "bigint" ? u(String(t), 8) : t, l = b(p, 4);
+    return /* @__PURE__ */ r(h, { value: l, decimalPartLength: 4 });
+  }, c = t > 0;
+  return /* @__PURE__ */ d("div", { className: v("flex flex-nowrap items-center", m), children: [
+    e && n === "bars" && /* @__PURE__ */ r("div", { className: "mr-1.5", children: /* @__PURE__ */ r(x, { zone: e }) }),
+    c ? a() : s(),
+    e && n === "dot" && /* @__PURE__ */ r("div", { className: "ml-1.5", children: /* @__PURE__ */ r(N, { zone: e }) })
+  ] });
+}
+export {
+  F as LiquidationPrice
+};

package/dist/esm/components/loader-guard/loader-guard.js

@@ -1,10 +1,11 @@
-import { jsx as m, jsxs as l } from "react/jsx-runtime";
+import { jsx as m, jsxs as o } from "react/jsx-runtime";
 import { Guard as t } from "../guard/guard.js";
 import "clsx";
 import "tailwind-merge";
 import "react";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import "sonner";
+import "luxon";
 import "../layout/col/col.js";
 import { Container as p } from "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -15,25 +16,25 @@ import "../base-link/base-link.js";
 import "../buttons/back-button/back-button.js";
 import "../page-title/page-title.js";
 import { Skeleton as r } from "../skeleton/skeleton.js";
-function C({
+function S({
   showGuard: s,
   children: a,
   loader: e
 }) {
-  const i = /* @__PURE__ */ m(p, { children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+  const i = /* @__PURE__ */ m(p, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
     /* @__PURE__ */ m(r, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
-    /* @__PURE__ */ l("div", { className: "space-y-2 mb-4", children: [
+    /* @__PURE__ */ o("div", { className: "space-y-2 mb-4", children: [
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-3/4" })
     ] }),
-    /* @__PURE__ */ l("div", { className: "flex gap-4 md:flex-row flex-col w-full", children: [
+    /* @__PURE__ */ o("div", { className: "flex gap-4 md:flex-row flex-col w-full", children: [
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-2/3 w-full" }),
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
-  ] }) }), o = s;
-  return /* @__PURE__ */ m(t, { showGuard: o, guard: o && (e || i), children: a });
+  ] }) }), l = s;
+  return /* @__PURE__ */ m(t, { showGuard: l, guard: l && (e || i), children: a });
 }
 export {
-  C as LoaderGuard
+  S as LoaderGuard
 };

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -4,8 +4,9 @@ import x from "react-markdown";
 import g from "remark-gfm";
 import "clsx";
 import "tailwind-merge";
-import "sonner";
 import "@gearbox-protocol/sdk";
+import "sonner";
+import "luxon";
 import "../layout/col/col.js";
 import "../layout/container/container.js";
 import "../layout/footer/footer.js";
@@ -34,7 +35,7 @@ function c(e) {
   }
   return { id: y(i), displayText: e };
 }
-function B({
+function P({
   content: e,
   title: i,
   backButton: l,
@@ -176,5 +177,5 @@ function B({
   return a ? m : /* @__PURE__ */ o(b, { title: i || "", backButton: l, children: m });
 }
 export {
-  B as MarkdownViewer
+  P as MarkdownViewer
 };

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

@@ -0,0 +1,4 @@
+import { Modal as a } from "./modal.js";
+export {
+  a as Modal
+};

package/dist/esm/components/modal/modal.js

@@ -0,0 +1,109 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import * as r from "@radix-ui/react-dialog";
+import { cva as C } from "class-variance-authority";
+import * as i from "react";
+import "@gearbox-protocol/sdk";
+import { cn as o } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import { Z_INDEX as c } from "../../utils/z-index.js";
+const f = "gb-modal-open";
+let n = 0;
+const m = "before:content-[''] before:absolute before:inset-0 after:z-[-1] before:opacity-40", v = C("", {
+  variants: {
+    colorTheme: {
+      default: "bg-black/30",
+      dark: "bg-black",
+      "dark-transparent": "bg-black/85"
+    },
+    backdrop: {
+      success: `${m} before:bg-[linear-gradient(180deg,rgba(146,255,176,0.85)_0%,rgba(146,255,176,0)_50%)]`,
+      failure: `${m} before:bg-[linear-gradient(180deg,rgba(255,61,64,0.85)_0%,rgba(255,61,64,0)_50%)]`,
+      default: ""
+    }
+  },
+  defaultVariants: {
+    colorTheme: "default",
+    backdrop: "default"
+  }
+}), _ = i.forwardRef(
+  ({
+    show: t = !0,
+    colorTheme: u = "default",
+    backdrop: b = "default",
+    onClickOutside: d,
+    className: p,
+    children: g,
+    ...h
+  }, y) => {
+    i.useEffect(() => {
+      if (!(typeof document > "u") && t)
+        return n += 1, document.body.classList.add(f), () => {
+          n = Math.max(0, n - 1), n === 0 && document.body.classList.remove(f);
+        };
+    }, [t]);
+    const l = i.useCallback(
+      (e) => {
+        e || d?.();
+      },
+      [d]
+    );
+    return t ? /* @__PURE__ */ a(r.Root, { open: t, onOpenChange: l, modal: !0, children: /* @__PURE__ */ s(r.Portal, { children: [
+      /* @__PURE__ */ a(
+        r.Overlay,
+        {
+          className: o(
+            "fixed inset-0",
+            "pointer-events-auto",
+            c.MODAL,
+            v({ colorTheme: u, backdrop: b })
+          )
+        }
+      ),
+      /* @__PURE__ */ a(
+        r.Content,
+        {
+          className: o("fixed inset-0", "overflow-y-auto", c.MODAL),
+          onClick: (e) => {
+            e.target === e.currentTarget && l(!1);
+          },
+          children: /* @__PURE__ */ a(
+            "div",
+            {
+              className: o(
+                "min-h-full",
+                "flex flex-col justify-center items-center",
+                "animate-[modalContentShow_225ms_cubic-bezier(0.4,0,0.2,1)]"
+              ),
+              role: "presentation",
+              onClick: (e) => {
+                e.target === e.currentTarget && l(!1);
+              },
+              children: /* @__PURE__ */ s(
+                "div",
+                {
+                  ref: y,
+                  className: o(
+                    "relative",
+                    "w-full sm:w-auto",
+                    "m-auto py-0 px-0 sm:py-5",
+                    p
+                  ),
+                  ...h,
+                  children: [
+                    /* @__PURE__ */ a(r.Title, { className: "sr-only", children: "Modal Window" }),
+                    g
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ] }) }) : null;
+  }
+);
+_.displayName = "Modal";
+export {
+  _ as Modal
+};

package/dist/esm/components/navbar/navbar.js

@@ -1,9 +1,10 @@
 import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
-import * as s from "react";
+import * as o from "react";
+import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 import { NavbarIndicatorProvider as v, useNavbarIndicator as p } from "./navbar-indicator-context.js";
 const u = m("flex items-center bg-background", {
   variants: {
@@ -28,25 +29,25 @@ const u = m("flex items-center bg-background", {
     size: "default",
     sticky: !1
   }
-}), b = ({ containerClassName: t, children: e }) => {
-  const a = p();
+}), b = ({ containerClassName: a, children: e }) => {
+  const t = p();
   return /* @__PURE__ */ d(
     "div",
     {
-      ref: a?.containerRef,
+      ref: t?.containerRef,
       className: n(
         "flex items-center gap-2 flex-1 h-full relative overflow-x-auto overflow-y-hidden",
         "md:justify-center md:overflow-x-visible",
         "px-1 pb-1 md:px-0 md:pb-0",
         "navbar-scrollbar",
-        t
+        a
       ),
       children: [
         e,
         /* @__PURE__ */ r(
           "div",
           {
-            ref: a?.indicatorRef,
+            ref: t?.indicatorRef,
             className: "absolute bottom-0 h-0.5 bg-pink-500 transition-all duration-300 ease-out pointer-events-none",
             style: {
               left: 0,
@@ -59,32 +60,32 @@ const u = m("flex items-center bg-background", {
       ]
     }
   );
-}, x = s.forwardRef(
+}, x = o.forwardRef(
   ({
-    className: t,
+    className: a,
     variant: e,
-    size: a,
+    size: t,
     sticky: i,
-    containerClassName: o,
+    containerClassName: s,
     children: l,
     ...f
   }, c) => /* @__PURE__ */ r(
     "nav",
     {
       ref: c,
-      className: n(u({ variant: e, size: a, sticky: i, className: t })),
+      className: n(u({ variant: e, size: t, sticky: i, className: a })),
       ...f,
-      children: /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(b, { containerClassName: o, children: l }) })
+      children: /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r(b, { containerClassName: s, children: l }) })
     }
   )
 );
 x.displayName = "Navbar";
-const N = s.forwardRef(({ className: t, children: e, ...a }, i) => /* @__PURE__ */ r(
+const N = o.forwardRef(({ className: a, children: e, ...t }, i) => /* @__PURE__ */ r(
   "div",
   {
     ref: i,
-    className: n("flex items-center gap-1 min-w-max", t),
-    ...a,
+    className: n("flex items-center gap-1 min-w-max", a),
+    ...t,
     children: e
   }
 ));