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

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

@@ -1,65 +1,57 @@
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { faCheck as h } from "@fortawesome/free-solid-svg-icons";
-import { IconCopy as C } from "@gearbox-protocol/static";
-import * as r from "react";
-import { Button as x } from "../button/button.js";
-import { FaIcon as w } from "../../icons/fa-icon.js";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { faCheck as f } from "@fortawesome/free-solid-svg-icons";
+import { IconCopy as y } from "@gearbox-protocol/static";
+import * as d from "react";
+import { Button as u } from "../button/button.js";
+import { FaIcon as C } from "../../icons/fa-icon.js";
+import { useCopyToClipboard as h } from "../../../hooks/use-copy-to-clipboard.js";
+import { cn as e } from "../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as a } from "../../../utils/cn.js";
-import "luxon";
 import "../../../utils/z-index.js";
-const N = {
+const x = {
   3: "h-3 w-3",
   "3.5": "h-3.5 w-3.5",
   4: "h-4 w-4",
   5: "h-5 w-5",
   6: "h-6 w-6"
-}, b = {
+}, w = {
   3: 12,
   "3.5": 14,
   4: 16,
   5: 20,
   6: 24
-}, j = r.forwardRef(
-  ({ text: n, className: l, iconSize: i = "3.5", successDuration: p = 1500, ...m }, u) => {
-    const [e, s] = r.useState(!1), o = r.useRef(null), f = async () => {
-      try {
-        await navigator.clipboard.writeText(n), o.current && clearTimeout(o.current), s(!0), o.current = setTimeout(() => {
-          s(!1);
-        }, p);
-      } catch (d) {
-        console.error("Failed to copy:", d);
-      }
-    }, c = N[i];
-    return /* @__PURE__ */ y(
-      x,
+}, N = d.forwardRef(
+  ({ text: r, className: s, iconSize: i = "3.5", successDuration: c = 1500, ...n }, p) => {
+    const { isCopied: t, copy: l } = h(c), a = x[i];
+    return /* @__PURE__ */ m(
+      u,
       {
-        ref: u,
+        ref: p,
         variant: "text",
         size: "auto",
-        className: a("p-1! border-0! relative", l),
-        onClick: f,
-        title: e ? "Copied!" : "Copy to clipboard",
-        ...m,
+        className: e("p-1! border-0! relative", s),
+        onClick: () => l(r),
+        title: t ? "Copied!" : "Copy to clipboard",
+        ...n,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             "span",
             {
-              className: a(
+              className: e(
                 "absolute inset-0 flex items-center justify-center transition-all duration-200",
-                e ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
+                t ? "opacity-100 scale-100 text-green-500" : "opacity-0 scale-50 text-green-500"
               ),
-              children: /* @__PURE__ */ t(w, { icon: h, className: c })
+              children: /* @__PURE__ */ o(C, { icon: f, className: a })
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ o(
             "span",
             {
-              className: a(
+              className: e(
                 "flex items-center justify-center transition-all duration-200",
-                e ? "opacity-0 scale-50" : "opacity-100 scale-100"
+                t ? "opacity-0 scale-50" : "opacity-100 scale-100"
               ),
-              children: /* @__PURE__ */ t(C, { size: b[i], className: c })
+              children: /* @__PURE__ */ o(y, { size: w[i], className: a })
             }
           )
         ]
@@ -67,7 +59,7 @@ const N = {
     );
   }
 );
-j.displayName = "CopyButton";
+N.displayName = "CopyButton";
 export {
-  j as CopyButton
+  N as CopyButton
 };

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

@@ -2,9 +2,8 @@ import { jsx as t } from "react/jsx-runtime";
 import { IconExternal as m } from "@gearbox-protocol/static";
 import * as p from "react";
 import { Button as s } from "../button/button.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as r } from "../../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
 const c = {
   3: "!h-3 !w-3",

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

@@ -1,14 +1,12 @@
-import { BackButton as r, backButtonVariants as n } from "./back-button/back-button.js";
-import { Button as u, buttonVariants as B } from "./button/button.js";
-import { CopyButton as p } from "./copy-button/copy-button.js";
+import { BackButton as r } from "./back-button/back-button.js";
+import { Button as n } from "./button/button.js";
+import { CopyButton as x } from "./copy-button/copy-button.js";
 import { ExternalButton as f } from "./external-button/external-button.js";
-import { TabButton as b } from "./tab-button/tab-button.js";
+import { TabButton as u } from "./tab-button/tab-button.js";
 export {
   r as BackButton,
-  u as Button,
-  p as CopyButton,
+  n as Button,
+  x as CopyButton,
   f as ExternalButton,
-  b as TabButton,
-  n as backButtonVariants,
-  B as buttonVariants
+  u as TabButton
 };

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

@@ -1,11 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { cva as s } from "class-variance-authority";
+import { cva as i } from "class-variance-authority";
 import * as o from "react";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as d } from "../../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-const n = s(
+const s = i(
   "rounded-xl border border-border bg-card text-card-foreground",
   {
     variants: {
@@ -20,11 +19,11 @@ const n = s(
     }
   }
 ), c = o.forwardRef(
-  ({ className: r, variant: a, ...e }, i) => /* @__PURE__ */ t(
+  ({ className: r, variant: a, ...e }, n) => /* @__PURE__ */ t(
     "div",
     {
-      ref: i,
-      className: d(n({ variant: a, className: r })),
+      ref: n,
+      className: d(s({ variant: a, className: r })),
       ...e
     }
   )
@@ -65,20 +64,10 @@ const f = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
 f.displayName = "CardDescription";
 const l = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t("div", { ref: e, className: d("p-4", r), ...a }));
 l.displayName = "CardContent";
-const C = o.forwardRef(({ className: r, ...a }, e) => /* @__PURE__ */ t(
-  "div",
-  {
-    ref: e,
-    className: d("flex items-center p-4 border-t border-input", r),
-    ...a
-  }
-));
-C.displayName = "CardFooter";
 export {
   c as Card,
   l as CardContent,
   f as CardDescription,
-  C as CardFooter,
   m as CardHeader,
   p as CardTitle
 };

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

@@ -1,9 +1,8 @@
-import { Card as d, CardContent as e, CardDescription as C, CardFooter as o, CardHeader as t, CardTitle as i } from "./card.js";
+import { Card as d, CardContent as e, CardDescription as C, CardHeader as t, CardTitle as o } from "./card.js";
 export {
   d as Card,
   e as CardContent,
   C as CardDescription,
-  o as CardFooter,
   t as CardHeader,
-  i as CardTitle
+  o as CardTitle
 };

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

@@ -2,12 +2,11 @@ import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { faCaretDown as m } from "@fortawesome/free-solid-svg-icons";
 import * as d from "react";
 import { FaIcon as c } from "../../icons/fa-icon.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as n } from "../../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../../utils/z-index.js";
-import { Card as f, CardContent as p } from "../card/card.js";
-function j({
+import { Card as f, CardContent as u } from "../card/card.js";
+function N({
   header: i,
   children: s,
   alwaysExpanded: r = !1
@@ -41,9 +40,9 @@ function j({
         ]
       }
     ),
-    t && /* @__PURE__ */ e(p, { className: "border-t border-input bg-gray-900/30", children: s })
+    t && /* @__PURE__ */ e(u, { className: "border-t border-input bg-gray-900/30", children: s })
   ] });
 }
 export {
-  j as ExpandableCard
+  N as ExpandableCard
 };

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

@@ -1,13 +1,12 @@
-import { Card as a, CardContent as o, CardDescription as d, CardFooter as t, CardHeader as C, CardTitle as n } from "./card/card.js";
-import { DangerZone as x } from "./danger-zone/danger-zone.js";
-import { ExpandableCard as i } from "./expandable-card/expandable-card.js";
+import { Card as a, CardContent as o, CardDescription as d, CardHeader as t, CardTitle as C } from "./card/card.js";
+import { DangerZone as p } from "./danger-zone/danger-zone.js";
+import { ExpandableCard as f } from "./expandable-card/expandable-card.js";
 export {
   a as Card,
   o as CardContent,
   d as CardDescription,
-  t as CardFooter,
-  C as CardHeader,
-  n as CardTitle,
-  x as DangerZone,
-  i as ExpandableCard
+  t as CardHeader,
+  C as CardTitle,
+  p as DangerZone,
+  f as ExpandableCard
 };

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

@@ -1,114 +1,11 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
 import { cva as b } from "class-variance-authority";
-import * as o from "react";
+import * as t from "react";
+import { Label as h } from "../label/label.js";
+import { cn as g } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as h } from "../../utils/cn.js";
-import "luxon";
 import "../../utils/z-index.js";
-import "../accordion/accordion.js";
-import "../alert-badge/alert-badge.js";
-import "../alert-dialog/alert-dialog.js";
-import "../alert-modal/alert-modal.js";
-import "@gearbox-protocol/static";
-import "../buttons/back-button/back-button.js";
-import "../buttons/button/button.js";
-import "../buttons/copy-button/copy-button.js";
-import "../buttons/external-button/external-button.js";
-import "../buttons/tab-button/tab-button.js";
-import "@fortawesome/free-solid-svg-icons";
-import "../icons/fa-icon.js";
-import "../token-icon/token-icon.js";
-import "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import "../badge/badge.js";
-import "../badge/chip.js";
-import "../base/amount-input/amount-input.js";
-import "../confirm-menu/confirm-menu.js";
-import "react-intl";
-import "../table/grid-table.js";
-import "../skeleton/skeleton.js";
-import "../table/table.js";
-import "../token-symbol/token-symbol.js";
-import "../simple-accordion/simple-accordion.js";
-import "../tip-card/tip-card.js";
-import "../typography/typography.js";
-import "../help-tip/help-tip.js";
-import "viem";
-import "../points-icon/points-icon.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../base/page-title/page-title.js";
-import "../detailed-page-title/detailed-page-title-explorer-dropdown.js";
-import "../base/detailed-page-title/copy-button.js";
-import "../base/details-view/detail-aside/detail-aside-scope.js";
-import "../layout/main-aside-layout/main-aside-layout.js";
-import "../base/details-view/details-view.js";
-import "../fadeout-loading/fadeout-loading.js";
-import "../health-factor/health-factor.js";
-import "@gearbox-protocol/sdk/model";
-import { Checkbox as g } from "./checkbox.js";
-import "../select/select.js";
-import "sonner";
-import "../breakpoint-provider.js";
-import "lightweight-charts";
-import "../graph/formatters.js";
-import "../graph/graph-view.js";
-import "../edit-input/edit-input.js";
-import "../slider/slider.js";
-import "../slider/slider-context.js";
-import "../text-button/text-button.js";
-import "react-router-dom";
-import "../status-elements/status-elements.js";
-import "../base/manage-pane/manage-pane.js";
-import "../base/tabber/tabber.js";
-import "../link/link.js";
-import "../rounded-image/rounded-image.js";
-import "../base-link/base-link.js";
-import "../base-table/base-table-line.js";
-import "../navigation-context/navigation-context.js";
-import "../cards/card/card.js";
-import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
-import "../simple-dropdown/simple-dropdown.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
-import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
-import "../composites/tx-preview/confirm/dialog/constants.js";
-import "../modal/modal.js";
-import "../spinner/spinner.js";
-import "../spinner-loader/spinner-loader.js";
-import "@radix-ui/react-dialog";
-import "../dialog/dialog-container.js";
-import "../dialog/dialog-content.js";
-import "../dialog/dialog-description.js";
-import "../dialog/dialog-footer.js";
-import "../dialog/dialog-header.js";
-import "../dialog/dialog-title.js";
-import "../dialog/dialog-modal-container.js";
-import "../dialog/dialog-overlay.js";
-import "../input/input.js";
-import { Label as k } from "../label/label.js";
-import "../dropdown-menu/dropdown-menu.js";
-import "../dropdown-menu/dropdown-menu-content.js";
-import "../dropdown-menu/dropdown-menu-item.js";
-import "../dropdown-menu/dropdown-menu-label.js";
-import "../icon-button/icon-button.js";
-import "../layout/app-footer/app-footer.js";
-import "../layout/app-header/app-header.js";
-import "../layout/col/col.js";
-import "../layout/container/container.js";
-import "../layout/grid/grid.js";
-import "../layout/layout/layout.js";
-import "../legal-agreement/legal-agreement-theme.js";
-import "../loader/loader.js";
-import "../loading/loading.js";
-import "../markdown-text/markdown-text.js";
-import "../radio-group/radio-group.js";
-import "../search-line/search-line.js";
-import "../segmented-control/segmented-control.js";
-import "../separate-line/separate-line.js";
-import "../split-list/split-list.js";
-import "../tabs/tabs.js";
-import "../textarea/textarea.js";
-import "../theme-provider.js";
+import { Checkbox as k } from "./checkbox.js";
 const C = b("", {
   variants: {
     boxAlign: {
@@ -119,46 +16,46 @@ const C = b("", {
   defaultVariants: {
     boxAlign: "center"
   }
-}), i = o.forwardRef(
+}), o = t.forwardRef(
   ({
-    className: m,
-    id: p,
-    checked: e,
-    onChange: a,
-    children: s,
-    color: c = "secondary",
-    size: n = "lg",
-    boxAlign: d,
-    ...l
+    className: a,
+    id: i,
+    checked: s,
+    onChange: m,
+    children: c,
+    color: n = "secondary",
+    size: d = "lg",
+    boxAlign: l,
+    ...p
   }, x) => {
-    const r = o.useId();
-    return /* @__PURE__ */ f("div", { className: h("flex gap-2", C({ boxAlign: d })), children: [
-      /* @__PURE__ */ t(
-        g,
+    const e = t.useId();
+    return /* @__PURE__ */ f("div", { className: g("flex gap-2", C({ boxAlign: l })), children: [
+      /* @__PURE__ */ r(
+        k,
         {
-          id: p ?? r,
+          id: i ?? e,
           ref: x,
-          checked: e,
-          onCheckedChange: a,
-          className: m,
-          color: c,
-          size: n,
-          ...l
+          checked: s,
+          onCheckedChange: m,
+          className: a,
+          color: n,
+          size: d,
+          ...p
         }
       ),
-      /* @__PURE__ */ t(
-        k,
+      /* @__PURE__ */ r(
+        h,
         {
-          htmlFor: r,
+          htmlFor: e,
           disabledStyle: "none",
           className: "cursor-pointer text-md",
-          children: s
+          children: c
         }
       )
     ] });
   }
 );
-i.displayName = i.displayName = "CheckboxLabeled";
+o.displayName = o.displayName = "CheckboxLabeled";
 export {
-  i as CheckboxLabeled
+  o as CheckboxLabeled
 };

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

@@ -4,9 +4,8 @@ import * as a from "@radix-ui/react-checkbox";
 import { cva as y } from "class-variance-authority";
 import * as f from "react";
 import { FaIcon as o } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as r } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const h = y("", {
   variants: {
@@ -23,10 +22,10 @@ const h = y("", {
     size: "md",
     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(
+}), 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, ...l }, m) => /* @__PURE__ */ b(
   a.Root,
   {
-    ref: l,
+    ref: m,
     className: r(
       "group peer relative shrink-0 border shadow cursor-pointer transition-colors overflow-hidden flex items-center justify-center",
       "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -37,7 +36,7 @@ const h = y("", {
       "data-[state=checked]:disabled:bg-gray-20 data-[state=checked]:disabled:border-gray-50",
       d
     ),
-    ...m,
+    ...l,
     children: [
       /* @__PURE__ */ e(
         o,

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

@@ -1,9 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as n from "react";
 import { Button as s } from "../../buttons/button/button.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 l = {
   primary: "default",
@@ -12,15 +11,15 @@ const l = {
   white: "white",
   success: "success"
 }, p = n.forwardRef(
-  ({ size: t = "lg", width: r = "compact", color: o = "primary", className: e, ...i }, a) => /* @__PURE__ */ m(
+  ({ size: t = "lg", width: r = "compact", color: o = "primary", className: e, ...a }, i) => /* @__PURE__ */ m(
     s,
     {
-      ref: a,
+      ref: i,
       size: t,
       width: r,
       variant: l[o],
       className: c("inline-block whitespace-normal", e),
-      ...i
+      ...a
     }
   )
 );

package/dist/esm/components/client-adapters/styled-dialog-container/styled-dialog-container.js

@@ -1,40 +1,21 @@
-import { jsx as s } from "react/jsx-runtime";
-import * as f from "react";
-import { DialogContainer as d } from "../../dialog/dialog-container.js";
+import { jsx as m } from "react/jsx-runtime";
+import * as i from "react";
+import { DialogContainer as l } from "../../dialog/dialog-container.js";
+import { cn as n } from "../../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
-import { cn as c } from "../../../utils/cn.js";
-import "luxon";
 import "../../../utils/z-index.js";
-const g = f.forwardRef(
-  ({
-    $padding: o = "lg",
-    $width: r,
-    $minWidth: t,
-    $maxWidth: e,
-    $minHeight: i,
-    $colorTheme: m = "box",
-    className: a,
-    style: l,
-    ...n
-  }, p) => /* @__PURE__ */ s(
-    d,
-    {
-      ref: p,
-      padding: o === "none" ? !1 : o === "lg" ? !0 : o,
-      colorTheme: m,
-      className: c(a),
-      ...n,
-      style: {
-        ...l,
-        width: r || void 0,
-        minWidth: t || void 0,
-        maxWidth: e || void 0,
-        minHeight: i || void 0
-      }
-    }
-  )
-);
-g.displayName = "StyledDialogContainer";
+const f = i.forwardRef(({ padding: o = "lg", className: r, style: e, ...t }, a) => /* @__PURE__ */ m(
+  l,
+  {
+    ref: a,
+    padding: o === "none" ? !1 : o === "lg" ? !0 : o,
+    colorTheme: "box",
+    className: n(r),
+    style: e,
+    ...t
+  }
+));
+f.displayName = "StyledDialogContainer";
 export {
-  g as StyledDialogContainer
+  f as StyledDialogContainer
 };

package/dist/esm/components/collateral-allocation-tooltip/allocation-wheel.js

@@ -1,7 +1,6 @@
 import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as d } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { AllocationWheelTest as f } from "./constants.js";
 const c = [
@@ -18,7 +17,7 @@ const c = [
   "stroke-chart-11",
   "stroke-chart-12"
 ], t = 20, o = 3.5, e = (t - o) / 2, h = 2 * Math.PI * e;
-function u({
+function g({
   share: l,
   colorIndex: i,
   idle: n = !1
@@ -64,5 +63,5 @@ function u({
   );
 }
 export {
-  u as AllocationWheel
+  g as AllocationWheel
 };

package/dist/esm/components/collateral-allocation-tooltip/collateral-allocation-tooltip.js

@@ -4,9 +4,8 @@ import { FaIcon as v } from "../icons/fa-icon.js";
 import { TokenIcon as w } from "../token-icon/token-icon.js";
 import { SimpleTooltip as y } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk/onchain";
 import { cn as N } from "../../utils/cn.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 import { AllocationWheel as U } from "./allocation-wheel.js";
 import { CollateralAllocationTooltipTest as a } from "./constants.js";
@@ -24,7 +23,7 @@ function p(o) {
 function C(o) {
   return o.valueUsd != null;
 }
-function P({
+function O({
   data: o,
   children: u,
   className: i
@@ -95,5 +94,5 @@ function P({
   );
 }
 export {
-  P as CollateralAllocationTooltip
+  O as CollateralAllocationTooltip
 };

package/dist/esm/components/collateral-allocation-tooltip/index.js

@@ -1,9 +1,5 @@
-import { AllocationWheel as t } from "./allocation-wheel.js";
-import { CollateralAllocationTooltip as a } from "./collateral-allocation-tooltip.js";
-import { AllocationWheelTest as i, CollateralAllocationTooltipTest as p } from "./constants.js";
+import { AllocationWheelTest as t, CollateralAllocationTooltipTest as e } from "./constants.js";
 export {
-  t as AllocationWheel,
-  i as AllocationWheelTest,
-  a as CollateralAllocationTooltip,
-  p as CollateralAllocationTooltipTest
+  t as AllocationWheelTest,
+  e as CollateralAllocationTooltipTest
 };