@gearbox-protocol/ui-kit 4.0.0-next.60 → 4.0.0-next.62

package/dist/esm/components/base-table/base-table-line.js

@@ -1,38 +1,24 @@
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { NoValue as G } from "../base/values/no-value.js";
-import "@gearbox-protocol/sdk/onchain";
-import { cn as s } from "../../utils/cn.js";
-import "luxon";
-import "../../utils/z-index.js";
-import "viem";
-import "react";
-import "../points-icon/points-icon.js";
-import "../token-icon/token-icon.js";
-import "react-intl";
-import "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import "../badge/badge.js";
-import "../badge/chip.js";
-import "../buttons/button/button.js";
+import { jsx as i, jsxs as o } from "react/jsx-runtime";
+import { NoValue as E } from "../no-value/no-value.js";
 import { GridTableRow as h, GridTableCell as u } from "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import { Typography as k } from "../typography/typography.js";
-import { useIsMedium as z, useIsMobile as D } from "../../hooks/use-media-query.js";
-import { BaseTableLineTest as O } from "./constants.js";
-import { BaseTableTest as fe } from "./constants.js";
-const P = "min-w-0 max-w-full overflow-hidden", S = s(
+import { Typography as G } from "../typography/typography.js";
+import "react";
+import { useIsMedium as k, useIsMobile as z } from "../../hooks/use-media-query.js";
+import { cn as a } from "../../utils/cn.js";
+import { BaseTableLineTest as D } from "./constants.js";
+import { BaseTableTest as Y } from "./constants.js";
+const O = "min-w-0 max-w-full overflow-hidden", P = a(
   "min-w-0 max-w-full self-stretch items-center overflow-x-clip py-2 pl-4",
   "[&_span.truncate]:whitespace-normal",
   "[&_div.overflow-hidden]:overflow-visible"
-), F = "min-w-0 max-w-full overflow-visible whitespace-nowrap";
+), S = "min-w-0 max-w-full overflow-visible whitespace-nowrap";
 function b({
   label: t,
-  children: r
+  children: l
 }) {
-  return /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-col gap-1", children: [
+  return /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-col gap-1", children: [
     /* @__PURE__ */ i(
-      k,
+      G,
       {
         as: "span",
         variant: "caption",
@@ -41,65 +27,63 @@ function b({
         children: t
       }
     ),
-    /* @__PURE__ */ i("div", { className: "min-w-0 text-sm", children: r })
+    /* @__PURE__ */ i("div", { className: "min-w-0 text-sm", children: l })
   ] });
 }
-function ne({
+function U({
   columns: t,
-  cells: r,
+  cells: l,
   last: v,
   href: x,
-  disabled: l = !1,
+  disabled: r = !1,
   disabledStyle: g = !1,
-  accentClassName: C,
-  onRowClick: m,
-  "data-testid": N,
-  minHeightClassName: L = "min-h-[66px]"
+  onRowClick: n,
+  "data-testid": C,
+  minHeightClassName: N = "min-h-[66px]"
 }) {
-  const T = z(), _ = D(), n = t.filter((e) => e.mobile === "title"), p = n.length > 0 ? n : t.slice(0, 1), y = t.filter((e) => e.mobile === "badge"), B = new Set(p.map((e) => e.id)), d = t.filter(
-    (e) => !B.has(e.id) && (e.mobile ?? "stat") === "stat"
-  ), j = t.filter((e) => e.mobile === "block"), f = {
+  const L = k(), T = z(), m = t.filter((e) => e.mobile === "title"), d = m.length > 0 ? m : t.slice(0, 1), _ = t.filter((e) => e.mobile === "badge"), y = new Set(d.map((e) => e.id)), f = t.filter(
+    (e) => !y.has(e.id) && (e.mobile ?? "stat") === "stat"
+  ), B = t.filter((e) => e.mobile === "block"), c = {
     last: v,
     href: x,
-    noHover: l,
-    "data-disabled": l,
-    "data-testid": N ?? O.root,
-    onRowClick: l ? void 0 : m
-  }, c = s(
-    m && !l && "cursor-pointer",
+    noHover: r,
+    "data-disabled": r,
+    "data-testid": C ?? D.root,
+    onRowClick: r ? void 0 : n
+  }, p = a(
+    n && !r && "cursor-pointer",
     g && "text-secondary-foreground!",
-    l && "cursor-not-allowed",
-    C
+    r && "cursor-not-allowed"
   );
-  return _ ? /* @__PURE__ */ i(h, { ...f, className: c, children: /* @__PURE__ */ a(
+  return T ? /* @__PURE__ */ i(h, { ...c, className: p, children: /* @__PURE__ */ o(
     u,
     {
       span: "full",
       size: "sm",
-      className: s(
+      className: a(
         "flex min-w-0 max-w-full flex-col items-start gap-3 overflow-x-clip py-3",
         "[&_span.truncate]:whitespace-normal [&_div.overflow-hidden]:overflow-visible"
       ),
       children: [
-        /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
-          p.map((e) => /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: r[e.id] }, e.id)),
-          y.map((e) => /* @__PURE__ */ i("div", { children: r[e.id] }, e.id))
+        /* @__PURE__ */ o("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+          d.map((e) => /* @__PURE__ */ i("div", { className: "min-w-0 flex-1", children: l[e.id] }, e.id)),
+          _.map((e) => /* @__PURE__ */ i("div", { children: l[e.id] }, e.id))
         ] }),
-        d.length > 0 && /* @__PURE__ */ i("div", { className: "grid w-full min-w-0 grid-cols-3 gap-x-2 gap-y-3 [&_*]:text-left [&_*]:justify-start", children: d.map((e) => /* @__PURE__ */ i(b, { label: e.title, children: r[e.id] }, e.id)) }),
-        j.map((e) => {
-          const o = r[e.id];
-          return o == null || o === !1 ? null : /* @__PURE__ */ i(b, { label: e.title, children: o }, e.id);
+        f.length > 0 && /* @__PURE__ */ i("div", { className: "grid w-full min-w-0 grid-cols-3 gap-x-2 gap-y-3 [&_*]:text-left [&_*]:justify-start", children: f.map((e) => /* @__PURE__ */ i(b, { label: e.title, children: l[e.id] }, e.id)) }),
+        B.map((e) => {
+          const s = l[e.id];
+          return s == null || s === !1 ? null : /* @__PURE__ */ i(b, { label: e.title, children: s }, e.id);
         })
       ]
     }
   ) }) : /* @__PURE__ */ i(
     h,
     {
-      ...f,
-      className: s(L, c),
-      children: t.map((e, o) => {
-        const I = e.justify ?? "start", M = o === 0, w = o === t.length - 1, A = e.mobile === "badge", E = s(
-          M ? S : A ? F : P,
+      ...c,
+      className: a(N, p),
+      children: t.map((e, s) => {
+        const j = e.justify ?? "start", I = s === 0, w = s === t.length - 1, M = e.mobile === "badge", A = a(
+          I ? P : M ? S : O,
           w && "pr-4",
           e.cellClassName
         );
@@ -107,10 +91,10 @@ function ne({
           u,
           {
             size: "sm",
-            textAlign: I === "end" ? "right" : "left",
-            gapBefore: w ? T ? "sm" : "md" : void 0,
-            className: E,
-            children: r[e.id] ?? /* @__PURE__ */ i(G, {})
+            textAlign: j === "end" ? "right" : "left",
+            gapBefore: w ? L ? "sm" : "md" : void 0,
+            className: A,
+            children: l[e.id] ?? /* @__PURE__ */ i(E, {})
           },
           e.id
         );
@@ -119,7 +103,7 @@ function ne({
   );
 }
 export {
-  ne as BaseTableLine,
-  O as BaseTableLineTest,
-  fe as BaseTableTest
+  U as BaseTableLine,
+  D as BaseTableLineTest,
+  Y as BaseTableTest
 };

package/dist/esm/components/base-table/base-table.js

@@ -1,38 +1,32 @@
-import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { jsxs as x, jsx as e } from "react/jsx-runtime";
 import { Children as p } from "react";
 import { Guard as f } from "../guard/guard.js";
 import { HeadCell as C } from "../head-cell/head-cell.js";
-import "react-intl";
-import "../buttons/button/button.js";
-import "@gearbox-protocol/sdk/onchain";
-import { cn as c } from "../../utils/cn.js";
-import "luxon";
-import "../../utils/z-index.js";
-import { GridTable as j, GridTableHeader as H, GridTableRow as u, GridTableHead as N, GridTableBody as h, GridTableCell as B } from "../table/grid-table.js";
-import { GridLoadingLine as S } from "../table/grid-loading-line.js";
-import "../table/table.js";
+import { GridLoadingLine as j } from "../table/grid-loading-line.js";
+import { GridTable as H, GridTableHeader as N, GridTableRow as u, GridTableHead as B, GridTableBody as c, GridTableCell as S } from "../table/grid-table.js";
 import { useIsMobile as v } from "../../hooks/use-media-query.js";
+import { cn as h } from "../../utils/cn.js";
 import { BaseTableTest as m } from "./constants.js";
-import { BaseTableLineTest as V } from "./constants.js";
+import { BaseTableLineTest as J } from "./constants.js";
 function z({
   message: i,
-  testId: o
+  testId: a
 }) {
-  return /* @__PURE__ */ t(u, { noHover: !0, last: !0, children: /* @__PURE__ */ t(
-    B,
+  return /* @__PURE__ */ e(u, { noHover: !0, last: !0, children: /* @__PURE__ */ e(
+    S,
     {
       span: "full",
       size: "sm",
       textAlign: "center",
       className: "py-8",
-      "data-testid": o,
+      "data-testid": a,
       children: i
     }
   ) });
 }
-function Q({
+function P({
   columns: i,
-  isLoading: o,
+  isLoading: a,
   emptyMessage: g,
   sort: s,
   rowHeight: b = "66px",
@@ -41,33 +35,33 @@ function Q({
   wrapperClassName: G,
   children: d
 }) {
-  const n = v(), w = i.map((e) => e.track).join(" ");
+  const n = v(), w = i.map((t) => t.track).join(" ");
   return /* @__PURE__ */ x(
-    j,
+    H,
     {
       cols: n ? "1fr" : w,
       gap: 0,
       size: "lg",
-      className: c("min-w-0 w-full", T),
+      className: h("min-w-0 w-full", T),
       wrapperClassName: G,
       "data-testid": m.root,
       children: [
-        !n && /* @__PURE__ */ t(H, { "data-testid": m.head, children: /* @__PURE__ */ t(u, { noHover: !0, height: "32px", children: i.map((e) => {
-          const a = e.justify ?? "start", r = e.sort, y = r && s ? s.getSortDirection(r.field) : void 0;
-          return /* @__PURE__ */ t(
-            N,
+        !n && /* @__PURE__ */ e(N, { "data-testid": m.head, children: /* @__PURE__ */ e(u, { noHover: !0, height: "32px", children: i.map((t) => {
+          const o = t.justify ?? "start", r = t.sort, y = r && s ? s.getSortDirection(r.field) : void 0;
+          return /* @__PURE__ */ e(
+            B,
             {
-              justify: a,
+              justify: o,
               size: "sm",
-              className: c(
+              className: h(
                 "min-w-0 whitespace-nowrap",
-                e.headClassName
+                t.headClassName
               ),
-              children: r && s ? /* @__PURE__ */ t(
+              children: r && s ? /* @__PURE__ */ e(
                 C,
                 {
-                  arrowPosition: a === "end" ? "left" : "right",
-                  title: e.title,
+                  arrowPosition: o === "end" ? "left" : "right",
+                  title: t.title,
                   sortDirection: y,
                   sortField: r.label,
                   onSort: () => s.onSort(
@@ -75,31 +69,31 @@ function Q({
                     r.defaultDirection
                   )
                 }
-              ) : e.title
+              ) : t.title
             },
-            e.id
+            t.id
           );
         }) }) }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           f,
           {
-            showGuard: o,
-            guard: o && /* @__PURE__ */ t(h, { children: Array.from({ length: l }, (e, a) => /* @__PURE__ */ t(
-              S,
+            showGuard: a,
+            guard: a && /* @__PURE__ */ e(c, { children: Array.from({ length: l }, (t, o) => /* @__PURE__ */ e(
+              j,
               {
                 height: b,
                 columns: n ? 1 : i.length,
                 cellClassName: "min-w-0 px-1 py-2 first:pl-4 last:pr-4",
-                last: a === l - 1
+                last: o === l - 1
               },
-              `${a}-${l}`
+              `${o}-${l}`
             )) }),
-            children: !o && /* @__PURE__ */ t(
+            children: !a && /* @__PURE__ */ e(
               f,
               {
                 showGuard: p.count(d) === 0,
-                guard: /* @__PURE__ */ t(z, { message: g, testId: m.empty }),
-                children: p.count(d) > 0 && /* @__PURE__ */ t(h, { children: d })
+                guard: /* @__PURE__ */ e(z, { message: g, testId: m.empty }),
+                children: p.count(d) > 0 && /* @__PURE__ */ e(c, { children: d })
               }
             )
           }
@@ -109,7 +103,7 @@ function Q({
   );
 }
 export {
-  Q as BaseTable,
-  V as BaseTableLineTest,
+  P as BaseTable,
+  J as BaseTableLineTest,
   m as BaseTableTest
 };

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

@@ -1,21 +1,20 @@
 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 "@gearbox-protocol/sdk/onchain";
 import { cn as c } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const i = "text-sm! transition-colors text-muted-foreground! hover:text-foreground!";
-function j({
+function S({
   items: n,
   onClick: d,
   currentStep: m,
-  disabledSteps: p,
-  className: f
+  disabledSteps: f,
+  className: p
 }) {
   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, u) => {
-    const { href: o } = e, s = t === u.length - 1, a = m === t, l = p?.(e, t) ?? !1, b = o || e.step || `${e.label}-${t}`;
+  return !n || n.length === 0 ? null : /* @__PURE__ */ r("nav", { "aria-label": "breadcrumb", className: c("flex items-center", p), 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, a = m === t, l = f?.(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
@@ -59,5 +58,5 @@ function j({
   }) }) });
 }
 export {
-  j as BreadCrumbs
+  S as BreadCrumbs
 };

package/dist/esm/components/breakpoints/breakpoint-provider.js

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as d, useEffect as w, useMemo as a } from "react";
+import { DEFAULT_BREAKPOINT_STATE as u, getBreakpointState as i, subscribeBreakpoints as f, BreakpointContext as s } from "../../hooks/breakpoint-state.js";
+function b({
+  children: n
+}) {
+  const [e, t] = d(() => typeof window > "u" ? u : i(window.matchMedia.bind(window)));
+  w(() => {
+    if (!(typeof window > "u"))
+      return t(i(window.matchMedia.bind(window))), f(window.matchMedia.bind(window), t);
+  }, []);
+  const o = a(() => e, [e]);
+  return /* @__PURE__ */ r(s.Provider, { value: o, children: n });
+}
+export {
+  b as BreakpointProvider
+};

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

@@ -0,0 +1,4 @@
+import { BreakpointProvider as e } from "./breakpoint-provider.js";
+export {
+  e as BreakpointProvider
+};

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

@@ -2,9 +2,8 @@ import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import { faArrowLeft as f } from "@fortawesome/free-solid-svg-icons";
 import { cva as u } from "class-variance-authority";
 import { FaIcon as c } from "../../icons/fa-icon.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as x } from "../../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 const l = u("flex items-center transition-colors", {
   variants: {
@@ -24,7 +23,7 @@ const l = u("flex items-center transition-colors", {
     size: "default"
   }
 });
-function p({
+function d({
   href: t,
   className: r,
   onClick: e,
@@ -32,14 +31,14 @@ function p({
 }) {
   return /* @__PURE__ */ a("a", { href: t, className: r, onClick: e, children: o });
 }
-function b({
+function z({
   href: t,
   text: r,
   onClick: e,
   className: o,
   variant: i,
   size: n,
-  LinkComponent: m = p
+  LinkComponent: m = d
 }) {
   return /* @__PURE__ */ s(
     m,
@@ -55,6 +54,5 @@ function b({
   );
 }
 export {
-  b as BackButton,
-  l as backButtonVariants
+  z as BackButton
 };

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

@@ -1,5 +1,4 @@
-import { BackButton as o, backButtonVariants as n } from "./back-button.js";
+import { BackButton as r } from "./back-button.js";
 export {
-  o as BackButton,
-  n as backButtonVariants
+  r as BackButton
 };

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

@@ -1,107 +1,41 @@
-import { jsx as p } from "react/jsx-runtime";
-import { Slot as c } from "@radix-ui/react-slot";
-import { cva as x } from "class-variance-authority";
-import * as y from "react";
+import { jsx as l } from "react/jsx-runtime";
+import { Slot as u } from "@radix-ui/react-slot";
+import * as C from "react";
+import { cn as k } from "../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as e } from "../../../utils/cn.js";
-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",
-  {
-    variants: {
-      variant: {
-        default: e(
-          "text-primary-foreground bg-primary border border-primary",
-          "hover:bg-accent hover:border-accent",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 disabled:opacity-50",
-        outline: e(
-          "text-primary-foreground bg-transparent border border-gray-40",
-          "hover:bg-gray-60 hover:border-gray-60",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
-        ghost: "hover:bg-secondary hover:text-accent-foreground disabled:opacity-50",
-        white: e(
-          "font-medium text-white-foreground bg-white border border-white",
-          "shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]",
-          "hover:shadow-[0_3px_3px_0_rgba(0,0,0,0.25)]",
-          "disabled:text-gray-80 disabled:bg-gray-110 disabled:border-gray-110",
-          "disabled:shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]"
-        ),
-        neutral: e(
-          "text-primary-foreground bg-gray-60 border border-gray-60",
-          "hover:bg-gray-90 hover:border-gray-90",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        success: e(
-          "font-medium text-success-foreground bg-success border border-success",
-          "hover:bg-success-hover hover:border-success-hover",
-          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
-        ),
-        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50",
-        text: "text-muted-foreground hover:text-foreground hover:bg-transparent disabled:opacity-50",
-        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-primary-foreground disabled:opacity-50",
-        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-foreground disabled:opacity-50",
-        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
-        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
-      },
-      // TODO: remove !
-      size: {
-        auto: "h-auto p-1.5",
-        xs: "px-3 py-0.5 text-xs rounded-full",
-        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-[6px]",
-        md: "h-8 px-3.5 !text-sm !leading-4 rounded-[8px]",
-        default: "px-4 h-[40px] !text-[15px] !leading-[18px] rounded-[12px]",
-        lg: "px-4 h-[44px] !text-[16px] !leading-[19px] rounded-[22px]",
-        icon: "h-9 w-9 p-2"
-      },
-      width: {
-        compact: "w-auto",
-        wide: "w-full"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-      width: "compact"
-    }
-  }
-), f = y.forwardRef(
+import { buttonVariants as x } from "./button.variants.js";
+const B = C.forwardRef(
   ({
-    className: t,
-    variant: d,
-    size: a,
-    width: i,
-    asChild: s = !1,
+    className: r,
+    variant: m,
+    size: n,
+    width: a,
+    asChild: p = !1,
     disabled: o,
-    onClick: n,
-    ...b
-  }, g) => {
-    const l = s ? c : "button", u = (r) => {
+    onClick: i,
+    ...f
+  }, s) => {
+    const e = p ? u : "button", c = (t) => {
       if (o) {
-        r.preventDefault(), r.stopPropagation();
+        t.preventDefault(), t.stopPropagation();
         return;
       }
-      n?.(r);
+      i?.(t);
     };
-    return /* @__PURE__ */ p(
-      l,
+    return /* @__PURE__ */ l(
+      e,
       {
-        className: e(h({ variant: d, size: a, className: t, width: i })),
-        ref: g,
+        className: k(x({ variant: m, size: n, className: r, width: a })),
+        ref: s,
         disabled: o,
-        onClick: u,
-        ...b
+        onClick: c,
+        ...f
       }
     );
   }
 );
-f.displayName = "Button";
+B.displayName = "Button";
 export {
-  f as Button,
-  h as buttonVariants
+  B as Button
 };

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

@@ -0,0 +1,72 @@
+import { cva as r } from "class-variance-authority";
+import { cn as e } from "../../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../../utils/z-index.js";
+const i = r(
+  // 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",
+  {
+    variants: {
+      variant: {
+        default: e(
+          "text-primary-foreground bg-primary border border-primary",
+          "hover:bg-accent hover:border-accent",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 disabled:opacity-50",
+        outline: e(
+          "text-primary-foreground bg-transparent border border-gray-40",
+          "hover:bg-gray-60 hover:border-gray-60",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 disabled:opacity-50",
+        ghost: "hover:bg-secondary hover:text-accent-foreground disabled:opacity-50",
+        white: e(
+          "font-medium text-white-foreground bg-white border border-white",
+          "shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]",
+          "hover:shadow-[0_3px_3px_0_rgba(0,0,0,0.25)]",
+          "disabled:text-gray-80 disabled:bg-gray-110 disabled:border-gray-110",
+          "disabled:shadow-[0_1px_1px_0_rgba(0,0,0,0.15)]"
+        ),
+        neutral: e(
+          "text-primary-foreground bg-gray-60 border border-gray-60",
+          "hover:bg-gray-90 hover:border-gray-90",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        success: e(
+          "font-medium text-success-foreground bg-success border border-success",
+          "hover:bg-success-hover hover:border-success-hover",
+          "disabled:text-secondary-foreground disabled:bg-gray-20 disabled:border-gray-20"
+        ),
+        link: "text-primary underline-offset-4 hover:underline disabled:opacity-50",
+        text: "text-muted-foreground hover:text-foreground hover:bg-transparent disabled:opacity-50",
+        pink: "bg-pink-700 hover:bg-pink-600 disabled:bg-pink-700 text-primary-foreground disabled:opacity-50",
+        "pink-outline": "border-pink-700 hover:border-pink-600 disabled:border-pink-700 text-foreground disabled:opacity-50",
+        blue: "bg-blue-800 hover:bg-blue-700 disabled:bg-blue-700 text-primary-foreground disabled:opacity-50",
+        "blue-outline": "border-blue-800 hover:border-blue-700 disabled:border-blue-800 text-foreground disabled:opacity-50"
+      },
+      // TODO: remove !
+      size: {
+        auto: "h-auto p-1.5",
+        xs: "px-3 py-0.5 text-xs rounded-full",
+        sm: "h-7 px-3 !text-xs !leading-[14px] rounded-[6px]",
+        md: "h-8 px-3.5 !text-sm !leading-4 rounded-[8px]",
+        default: "px-4 h-[40px] !text-[15px] !leading-[18px] rounded-[12px]",
+        lg: "px-4 h-[44px] !text-[16px] !leading-[19px] rounded-[22px]",
+        icon: "h-9 w-9 p-2"
+      },
+      width: {
+        compact: "w-auto",
+        wide: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      width: "compact"
+    }
+  }
+);
+export {
+  i as buttonVariants
+};

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

@@ -1,5 +1,4 @@
-import { Button as n, buttonVariants as r } from "./button.js";
+import { Button as r } from "./button.js";
 export {
-  n as Button,
-  r as buttonVariants
+  r as Button
 };