@gearbox-protocol/permissionless-ui 1.22.0-next.98 → 1.22.0

package/dist/esm/components/block-sync/block-sync.js

@@ -10,6 +10,7 @@ import "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import "../alert-badge/alert-badge.js";
 import "../alert-dialog/alert-dialog.js";
 import "../alert-modal/alert-modal.js";
@@ -30,7 +31,7 @@ import "viem/siwe";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../base-link/base-link.js";
-import "react-router-dom";
+import "../navigation-context/navigation-context.js";
 import "../button-checkbox/button-checkbox.js";
 import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
@@ -53,6 +54,7 @@ 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 "../detailed-page-title/detailed-page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
 import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
@@ -120,7 +122,9 @@ 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 "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
 import "../progress-bar/progress-bar.js";
@@ -132,10 +136,10 @@ 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.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";
@@ -154,7 +158,7 @@ import "../toggle/toggle.js";
 import "../typography/typography.js";
 import "../with-filter-button/with-filter-button.js";
 const D = 1e3 * 60 * 10;
-function wo({
+function Do({
   blockByChain: i,
   explorerAddresses: S,
   networkById: v
@@ -218,5 +222,5 @@ function wo({
   return i ? /* @__PURE__ */ o(j, { title: d(), children: N() }) : /* @__PURE__ */ o("div", { className: "select-none", children: d() });
 }
 export {
-  wo as BlockSync
+  Do as BlockSync
 };

package/dist/esm/components/breadcrumbs/breadcrumbs.js

@@ -1,34 +1,36 @@
-import { jsx as r, jsxs as b } from "react/jsx-runtime";
-import { IconExpand as h } from "@gearbox-protocol/static";
-import { Link as x } from "react-router-dom";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
+import { IconExpand as x } from "@gearbox-protocol/static";
+import { useNavigationAdapter as N } from "../navigation-context/navigation-context.js";
 import "react";
 import "@gearbox-protocol/sdk";
 import { cn as c } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const i = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
-function A({
+import "../../utils/z-index.js";
+const u = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
+function R({
   items: n,
   onClick: d,
   currentStep: m,
   disabledSteps: p,
   className: f
 }) {
-  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", f), children: /* @__PURE__ */ r("ol", { className: "flex items-center gap-2.5 flex-wrap", children: n.map((e, t, u) => {
-    const { href: o } = e, s = t === u.length - 1, l = m === t, a = p?.(e, t) ?? !1, g = o || e.step || `${e.label}-${t}`;
-    return /* @__PURE__ */ b("li", { className: "group flex items-center gap-2", children: [
-      !!o && !s && !l && !a ? (
+  const { Link: g } = N();
+  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", f), children: /* @__PURE__ */ r("ol", { className: "flex items-center gap-2.5 flex-wrap", children: n.map((e, t, i) => {
+    const { href: o } = e, s = t === i.length - 1, a = m === t, l = p?.(e, t) ?? !1, b = o || e.step || `${e.label}-${t}`;
+    return /* @__PURE__ */ h("li", { className: "group flex items-center gap-2", children: [
+      !!o && !s && !a && !l ? (
         // Navigation with href
-        /* @__PURE__ */ r(x, { to: o, className: i, children: e.label })
-      ) : !!d && !o && !s && !l && !a ? (
+        /* @__PURE__ */ r(g, { to: o, className: u, children: e.label })
+      ) : !!d && !o && !s && !a && !l ? (
         // Wizard mode: use button
         /* @__PURE__ */ r(
           "button",
           {
             type: "button",
             onClick: () => d(e, t),
-            disabled: a,
-            className: c(i, "cursor-pointer"),
+            disabled: l,
+            className: c(u, "cursor-pointer"),
             children: e.label
           }
         )
@@ -39,14 +41,14 @@ function A({
           {
             className: c(
               "text-sm",
-              l ? "text-foreground" : "text-muted-foreground"
+              a ? "text-foreground" : "text-muted-foreground"
             ),
             children: e.label
           }
         )
       ),
-      (!s || u.length === 1) && /* @__PURE__ */ r(
-        h,
+      (!s || i.length === 1) && /* @__PURE__ */ r(
+        x,
         {
           size: 10,
           className: "text-muted-foreground group-hover:text-foreground transition-colors",
@@ -55,9 +57,9 @@ function A({
           }
         }
       )
-    ] }, g);
+    ] }, b);
   }) }) });
 }
 export {
-  A as BreadCrumbs
+  R as BreadCrumbs
 };

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

@@ -2,10 +2,11 @@ import { jsxs as n, jsx as i } from "react/jsx-runtime";
 import { cva as m } from "class-variance-authority";
 import * as d from "react";
 import "@gearbox-protocol/sdk";
-import { cn as s } from "../../utils/cn.js";
+import { cn as p } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const p = m(
+import "../../utils/z-index.js";
+const s = m(
   [
     "flex cursor-pointer select-none items-center border rounded-md p-3",
     "mb-0 border-gray-20",
@@ -23,8 +24,8 @@ const p = m(
     {
       ref: c,
       "data-checked": e,
-      className: s(
-        p(),
+      className: p(
+        s(),
         o && "cursor-not-allowed opacity-50",
         a
       ),

package/dist/esm/components/buttons/back-button/back-button.js

@@ -4,10 +4,11 @@ import { faArrowLeft as u } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as c } from "../../icons/fa-icon.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as x } from "../../../utils/cn.js";
+import { cn as p } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
-const p = f("flex items-center transition-colors", {
+import "../../../utils/z-index.js";
+const x = f("flex items-center transition-colors", {
   variants: {
     variant: {
       default: "text-muted-foreground hover:text-foreground",
@@ -28,16 +29,16 @@ const p = f("flex items-center transition-colors", {
 function l({
   href: t,
   className: r,
-  onClick: e,
-  children: o
+  onClick: o,
+  children: e
 }) {
-  return /* @__PURE__ */ a("a", { href: t, className: r, onClick: e, children: o });
+  return /* @__PURE__ */ a("a", { href: t, className: r, onClick: o, children: e });
 }
-function j({
+function L({
   href: t,
   text: r,
-  onClick: e,
-  className: o,
+  onClick: o,
+  className: e,
   variant: i,
   size: n,
   LinkComponent: m = l
@@ -46,8 +47,8 @@ function j({
     m,
     {
       href: t,
-      className: x(p({ variant: i, size: n, className: o })),
-      onClick: e,
+      className: p(x({ variant: i, size: n, className: e })),
+      onClick: o,
       children: [
         /* @__PURE__ */ a(c, { icon: u, className: "mr-2 size-4" }),
         r || "Back"
@@ -56,6 +57,6 @@ function j({
   );
 }
 export {
-  j as BackButton,
-  p as backButtonVariants
+  L as BackButton,
+  x as backButtonVariants
 };

package/dist/esm/components/buttons/button/button.js

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as e } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 const h = x(
   // TODO: remove !
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors cursor-pointer disabled:!cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([style*='width']):not([style*='height'])]:size-4 [&_svg]:shrink-0 border border-transparent outline-none focus-visible:outline-none",

package/dist/esm/components/buttons/copy-button/copy-button.js

@@ -8,6 +8,7 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 const N = {
   3: "h-3 w-3",
   "3.5": "h-3.5 w-3.5",

package/dist/esm/components/buttons/external-button/external-button.js

@@ -6,6 +6,7 @@ import "@gearbox-protocol/sdk";
 import { cn as r } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 const c = {
   3: "!h-3 !w-3",
   "3.5": "!h-3.5 !w-3.5",
@@ -19,15 +20,15 @@ const c = {
   5: 20,
   6: 24
 }, w = p.forwardRef(
-  ({ url: n, className: a, iconSize: o = "3.5", ...e }, i) => /* @__PURE__ */ t(
+  ({ url: n, className: i, iconSize: o = "3.5", ...a }, e) => /* @__PURE__ */ t(
     s,
     {
-      ref: i,
+      ref: e,
       variant: "text",
       size: "auto",
-      className: r("p-1! border-0!", a),
+      className: r("p-1! border-0!", i),
       onClick: () => window.open(n, "_blank"),
-      ...e,
+      ...a,
       children: /* @__PURE__ */ t(
         m,
         {

package/dist/esm/components/buttons/navigation-button/navigation-button.js

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 const m = a.forwardRef(({ href: o, text: r, isActive: e, ...t }, n) => /* @__PURE__ */ i(
   s,
   {

package/dist/esm/components/buttons/range-buttons/range-buttons.js

@@ -4,7 +4,8 @@ import "@gearbox-protocol/sdk";
 import { cn as t } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
-function x({
+import "../../../utils/z-index.js";
+function b({
   range: n,
   rangeList: o,
   setRange: i,
@@ -30,5 +31,5 @@ function x({
   )) });
 }
 export {
-  x as RangeButtons
+  b as RangeButtons
 };

package/dist/esm/components/card-grid/card-grid.js

@@ -1,10 +1,11 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as g } from "react/jsx-runtime";
 import { cva as a } from "class-variance-authority";
 import * as e from "react";
 import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const p = a("grid w-full", {
   variants: {
     columns: {
@@ -68,10 +69,10 @@ const p = a("grid w-full", {
     gap: t,
     justifyItemContent: l,
     ...c
-  }, g) => /* @__PURE__ */ m(
+  }, m) => /* @__PURE__ */ g(
     "div",
     {
-      ref: g,
+      ref: m,
       className: n(
         p({
           columns: r,

package/dist/esm/components/cards/card/card.js

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as d } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 const n = s(
   "rounded-xl border border-border bg-card text-card-foreground",
   {
@@ -19,7 +20,7 @@ const n = s(
       variant: "default"
     }
   }
-), c = o.forwardRef(
+), m = o.forwardRef(
   ({ className: r, variant: a, ...e }, i) => /* @__PURE__ */ t(
     "div",
     {
@@ -29,8 +30,8 @@ const n = s(
     }
   )
 );
-c.displayName = "Card";
-const m = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
+m.displayName = "Card";
+const c = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "div",
   {
     ref: e,
@@ -41,7 +42,7 @@ const m = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
     ...a
   }
 ));
-m.displayName = "CardHeader";
+c.displayName = "CardHeader";
 const p = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
   "div",
   {
@@ -75,10 +76,10 @@ const C = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
 ));
 C.displayName = "CardFooter";
 export {
-  c as Card,
+  m as Card,
   l as CardContent,
   f as CardDescription,
   C as CardFooter,
-  m as CardHeader,
+  c as CardHeader,
   p as CardTitle
 };

package/dist/esm/components/cards/expandable-call/expandable-call.js

@@ -6,7 +6,8 @@ import "@gearbox-protocol/sdk";
 import { cn as p } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
-function h({
+import "../../../utils/z-index.js";
+function v({
   header: a,
   children: s,
   index: i,
@@ -45,5 +46,5 @@ function h({
   ] });
 }
 export {
-  h as ExpandablCall
+  v as ExpandablCall
 };

package/dist/esm/components/cards/expandable-card/expandable-card.js

@@ -6,8 +6,9 @@ import "@gearbox-protocol/sdk";
 import { cn as n } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../../utils/z-index.js";
 import { Card as f, CardContent as p } from "../card/card.js";
-function j({
+function v({
   header: i,
   children: s,
   alwaysExpanded: r = !1
@@ -45,5 +46,5 @@ function j({
   ] });
 }
 export {
-  j as ExpandableCard
+  v as ExpandableCard
 };

package/dist/esm/components/carousel/carousel.js

@@ -4,34 +4,37 @@ import { jsx as r } from "react/jsx-runtime";
 import * as N from "react";
 import w from "../../_virtual/index2.js";
 import { faChevronRight as h, faChevronLeft as x } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as s } from "../icons/fa-icon.js";
+import { FaIcon as a } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
+import { cn as s } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const b = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
+import "../../utils/z-index.js";
+const b = ({ onClick: e, className: o, style: t }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     onClick: e,
-    className: t("slick-arrow slick-prev", o),
+    className: s("slick-arrow slick-prev", o),
+    style: t,
     "aria-label": "Previous slide",
-    children: /* @__PURE__ */ r(s, { icon: x, className: "size-4" })
+    children: /* @__PURE__ */ r(a, { icon: x, className: "size-4" })
   }
-), y = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
+), y = ({ onClick: e, className: o, style: t }) => /* @__PURE__ */ r(
   "button",
   {
     type: "button",
     onClick: e,
-    className: t("slick-arrow slick-next", o),
+    className: s("slick-arrow slick-next", o),
+    style: t,
     "aria-label": "Next slide",
-    children: /* @__PURE__ */ r(s, { icon: h, className: "size-4" })
+    children: /* @__PURE__ */ r(a, { icon: h, className: "size-4" })
   }
 ), k = N.forwardRef(
   ({
     className: e,
     children: o,
-    infinite: a = !0,
+    infinite: t = !0,
     arrows: i = !1,
     dots: l = !0,
     autoplay: c = !1,
@@ -41,7 +44,7 @@ const b = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
     ...f
   }, u) => {
     const d = {
-      infinite: a,
+      infinite: t,
       arrows: i,
       dots: l,
       autoplay: c,
@@ -53,7 +56,7 @@ const b = ({ onClick: e, className: o }) => /* @__PURE__ */ r(
     }, v = {
       "--carousel-gap": `${p}px`
     };
-    return /* @__PURE__ */ r("div", { className: t("carousel-clip relative w-full", e), children: /* @__PURE__ */ r("div", { className: "carousel-root", style: v, children: /* @__PURE__ */ r(w, { ref: u, ...d, children: o }) }) });
+    return /* @__PURE__ */ r("div", { className: s("carousel-clip relative w-full", e), children: /* @__PURE__ */ r("div", { className: "carousel-root", style: v, children: /* @__PURE__ */ r(w, { ref: u, ...d, children: o }) }) });
   }
 );
 k.displayName = "Carousel";

package/dist/esm/components/checkbox/checkbox-labeled.js

@@ -5,6 +5,7 @@ import "@gearbox-protocol/sdk";
 import { cn as h } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import "../accordion/accordion.js";
 import "@gearbox-protocol/static";
 import "@fortawesome/free-solid-svg-icons";
@@ -31,7 +32,7 @@ import "viem/siwe";
 import "../avatar/avatar.js";
 import "../badge/badge.js";
 import "../base-link/base-link.js";
-import "react-router-dom";
+import "../navigation-context/navigation-context.js";
 import "../button-checkbox/button-checkbox.js";
 import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
@@ -53,6 +54,7 @@ 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 "../detailed-page-title/detailed-page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
 import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
@@ -120,7 +122,9 @@ 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 "../pool-indicator-icon/pool-indicator-icon.js";
 import "../progress/progress.js";
 import "../progress-bar/progress-bar.js";
@@ -132,10 +136,10 @@ 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.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";

package/dist/esm/components/checkbox/checkbox.js

@@ -1,13 +1,14 @@
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import * as a from "@radix-ui/react-checkbox";
+import * as t from "@radix-ui/react-checkbox";
 import { cva as y } from "class-variance-authority";
 import * as f from "react";
-import { faCheck as t } from "@fortawesome/free-solid-svg-icons";
+import { faCheck as a } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as o } from "../icons/fa-icon.js";
 import "@gearbox-protocol/sdk";
 import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const h = y("", {
   variants: {
     size: {
@@ -24,7 +25,7 @@ const h = y("", {
     color: "primary"
   }
 }), i = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", s = "size-3", c = "text-current", u = f.forwardRef(({ className: d, color: n, size: p, ...m }, l) => /* @__PURE__ */ b(
-  a.Root,
+  t.Root,
   {
     ref: l,
     className: r(
@@ -43,7 +44,7 @@ const h = y("", {
         o,
         {
           "aria-hidden": "true",
-          icon: t,
+          icon: a,
           className: r(
             s,
             c,
@@ -56,20 +57,20 @@ const h = y("", {
         }
       ),
       /* @__PURE__ */ e(
-        a.Indicator,
+        t.Indicator,
         {
           className: r(
             i,
             c,
             "pointer-events-none flex items-center justify-center"
           ),
-          children: /* @__PURE__ */ e(o, { icon: t, className: s })
+          children: /* @__PURE__ */ e(o, { icon: a, className: s })
         }
       )
     ]
   }
 ));
-u.displayName = a.Root.displayName;
+u.displayName = t.Root.displayName;
 export {
   u as Checkbox
 };

package/dist/esm/components/checkbox-item/checkbox-item.js

@@ -1,4 +1,4 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { jsxs as c, jsx as r } from "react/jsx-runtime";
 import * as l from "react";
 import { faCheck as f } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as x } from "../icons/fa-icon.js";
@@ -6,8 +6,9 @@ import "@gearbox-protocol/sdk";
 import { cn as t } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 const d = l.forwardRef(
-  ({ className: n, children: s, checked: e, onCheckedChange: a, disabled: o, ...i }, m) => /* @__PURE__ */ p(
+  ({ className: n, children: s, checked: e, onCheckedChange: i, disabled: o, ...a }, m) => /* @__PURE__ */ c(
     "label",
     {
       ref: m,
@@ -17,14 +18,14 @@ const d = l.forwardRef(
         o && "pointer-events-none opacity-50",
         n
       ),
-      ...i,
+      ...a,
       children: [
         /* @__PURE__ */ r(
           "input",
           {
             type: "checkbox",
             checked: e,
-            onChange: (c) => a?.(c.target.checked),
+            onChange: (p) => i?.(p.target.checked),
             disabled: o,
             className: "sr-only"
           }

package/dist/esm/components/client-adapters/styled-button/styled-button.js

@@ -1,36 +1,37 @@
-import { jsx as m } from "react/jsx-runtime";
+import { jsx as a } from "react/jsx-runtime";
 import * as n from "react";
 import { Button as l } from "../../buttons/button/button.js";
 import "@gearbox-protocol/sdk";
-import { cn as s } from "../../../utils/cn.js";
+import { cn as p } from "../../../utils/cn.js";
 import "sonner";
 import "luxon";
-const c = {
+import "../../../utils/z-index.js";
+const s = {
   primary: "default",
   outlined: "outline",
   neutral: "neutral",
   white: "white",
   success: "success"
-}, p = n.forwardRef(
+}, c = n.forwardRef(
   ({
     $size: t = "lg",
     $width: r = "compact",
     $color: o = "primary",
     className: e,
     ...i
-  }, a) => /* @__PURE__ */ m(
+  }, m) => /* @__PURE__ */ a(
     l,
     {
-      ref: a,
+      ref: m,
       size: t === "md" ? "default" : t,
       width: r,
-      variant: c[o],
-      className: s("inline-block whitespace-normal", e),
+      variant: s[o],
+      className: p("inline-block whitespace-normal", e),
       ...i
     }
   )
 );
-p.displayName = "StyledButton";
+c.displayName = "StyledButton";
 export {
-  p as StyledButton
+  c as StyledButton
 };