@gearbox-protocol/ui-kit 3.14.0-next.6 → 3.14.0-next.61

package/dist/esm/components/vertical-indicator/vertical-indicator.js

@@ -2,14 +2,14 @@ import { jsxs as t, jsx as e, Fragment as b } from "react/jsx-runtime";
 import { cva as l } from "class-variance-authority";
 import * as V from "react";
 import "@gearbox-protocol/sdk";
-import { cn as a } from "../../utils/cn.js";
+import { cn as r } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-import { Description as f } from "../description/description.js";
-import { HelpTip as v } from "../help-tip/help-tip.js";
-const y = l(
+import { Description as u } from "../description/description.js";
+import { HelpTip as k } from "../help-tip/help-tip.js";
+const v = l(
   ["flex flex-nowrap", "w-full max-w-full grow-0 shrink-0 basis-full"].join(
     " "
   ),
@@ -24,7 +24,7 @@ const y = l(
     },
     defaultVariants: { align: "start" }
   }
-), k = l(
+), j = l(
   "flex items-center grow shrink-0 basis-[0%] text-left text-foreground",
   {
     variants: {
@@ -37,7 +37,7 @@ const y = l(
     },
     defaultVariants: { size: "default" }
   }
-), u = l("text-right font-medium", {
+), g = l("text-right font-medium", {
   variants: {
     size: {
       xs: "text-xs leading-[14px]",
@@ -65,40 +65,41 @@ const y = l(
     weight: "medium",
     color: "default"
   }
-}), j = V.forwardRef(
+}), I = V.forwardRef(
   ({
-    className: g,
-    align: h,
+    className: h,
+    align: p,
     label: s,
     description: n,
-    valueDescription: m,
-    tip: o,
+    valueDescription: o,
+    tip: m,
     value: d,
-    valueTo: r,
+    valueTo: a,
+    dimPreviousValue: c = !0,
     size: i = "sm",
-    weight: c = "medium",
-    color: x = "default",
-    onPointerEnterTip: p,
-    ...w
-  }, N) => /* @__PURE__ */ t(
+    weight: x = "medium",
+    color: f = "default",
+    onPointerEnterTip: w,
+    ...N
+  }, y) => /* @__PURE__ */ t(
     "div",
     {
-      ref: N,
-      className: a(y({ align: h }), g),
-      ...w,
+      ref: y,
+      className: r(v({ align: p }), h),
+      ...N,
       children: [
         (s || n) && /* @__PURE__ */ t("div", { className: "grow shrink-0 basis-[0%] h-min flex flex-col", children: [
-          s && /* @__PURE__ */ t("div", { className: a(k({ size: i })), children: [
+          s && /* @__PURE__ */ t("div", { className: r(j({ size: i })), children: [
             s,
-            o && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(v, { onPointerEnter: p, children: o }) })
+            m && /* @__PURE__ */ e("span", { className: "ml-2 inline-block leading-none", children: /* @__PURE__ */ e(k, { onPointerEnter: w, children: m }) })
           ] }),
-          n && /* @__PURE__ */ e(f, { className: "text-left", children: n })
+          n && /* @__PURE__ */ e(u, { className: "text-left", children: n })
         ] }),
         d && /* @__PURE__ */ t("div", { className: "w-auto grow-0 shrink-0 basis-auto flex flex-col", children: [
           /* @__PURE__ */ t(
             "div",
             {
-              className: a(
+              className: r(
                 "flex flex-nowrap",
                 "w-full max-w-full grow-0 shrink-0 basis-full",
                 "justify-end items-center"
@@ -107,28 +108,33 @@ const y = l(
                 /* @__PURE__ */ e(
                   "span",
                   {
-                    className: a(
-                      u({ size: i, weight: c, color: x }),
-                      r && "line-through [&>*]:line-through"
+                    className: r(
+                      g({
+                        size: i,
+                        weight: x,
+                        color: a && c ? "secondary" : f
+                      }),
+                      a && "line-through [&_*]:line-through",
+                      a && c && "[&_*]:text-secondary-foreground"
                     ),
                     children: d
                   }
                 ),
-                r && /* @__PURE__ */ t(b, { children: [
+                a && /* @__PURE__ */ t(b, { children: [
                   /* @__PURE__ */ e("span", { className: "px-1.5 text-gray-70", children: "→" }),
-                  /* @__PURE__ */ e("span", { className: a(u({ size: i, weight: c, color: x })), children: r })
+                  /* @__PURE__ */ e("span", { className: r(g({ size: i, weight: x, color: f })), children: a })
                 ] })
               ]
             }
           ),
-          m && /* @__PURE__ */ e(f, { className: "text-right", children: m })
+          o && /* @__PURE__ */ e(u, { className: "text-right", children: o })
         ] })
       ]
     }
   )
 );
-j.displayName = "VerticalIndicator";
+I.displayName = "VerticalIndicator";
 export {
-  j as VerticalIndicator,
-  y as verticalIndicatorVariants
+  I as VerticalIndicator,
+  v as verticalIndicatorVariants
 };

package/dist/esm/components/with-copy/with-copy.js

@@ -47,9 +47,12 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../composites/credit-account-history/credit-account-history.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../typography/typography.js";
 import "../table/grid-table.js";
 import "../token-symbol/token-symbol.js";
-import "../typography/typography.js";
 import "../help-tip/help-tip.js";
 import "../description/description.js";
 import "../confirm-menu/confirm-menu.js";
@@ -68,14 +71,17 @@ import "../icon-button/icon-button.js";
 import "../separate-line/separate-line.js";
 import "../tip-card/tip-card.js";
 import "../composites/strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
+import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
+import "../composites/tx-preview/confirm/dialog/constants.js";
+import "../modal/modal.js";
+import "../dialog/dialog-container.js";
+import "../spinner-loader/spinner-loader.js";
 import "../currency-button/currency-button.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";
-import "../modal/modal.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";
@@ -113,6 +119,8 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.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/footer/footer.js";
@@ -122,6 +130,7 @@ import "../layout/layout/layout.js";
 import "../layout/main-aside-layout/main-aside-layout.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
+import "../legal-agreement/legal-agreement-theme.js";
 import "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
@@ -134,7 +143,6 @@ 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 "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
 import "../search-bar/search-bar.js";
@@ -142,12 +150,10 @@ import "../segmented-control/segmented-control.js";
 import "../select/select.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.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";
 import "../stat-badge/stat-badge.js";
 import "../status-dot/status-dot.js";
@@ -160,7 +166,7 @@ import "../theme-provider.js";
 import "../time-to-liquidation/time-to-liquidation.js";
 import "../toggle/toggle.js";
 import "../with-filter-button/with-filter-button.js";
-function gr({
+function Er({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -242,5 +248,5 @@ function gr({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  gr as WithCopy
+  Er as WithCopy
 };

package/dist/esm/configs/tailwind-preset.js

@@ -73,6 +73,7 @@ const e = {
         "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
         liquidation: "hsl(var(--liquidation))",
+        "liquidation-line": "hsl(var(--liquidation-line))",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",

package/dist/esm/hooks/index.js

@@ -1,56 +1,59 @@
-import { useCheckboxSelect as t } from "./use-checkbox-select.js";
+import { useCheckboxSelect as r } from "./use-checkbox-select.js";
 import { useControllableState as i } from "./use-controllable-state.js";
 import { useDebounce as u } from "./use-debounce.js";
 import { useDebounceCall as l } from "./use-debounce-call.js";
-import { getSortForField as p, useFilterAllSelected as L, useRangeFilter as x, useSelectFilter as n, useSort as A } from "./use-filter.js";
-import { useHF as f } from "./use-hf.js";
-import { useEditPriceManually as C, useLiquidationGraphParams as E, useLiquidationHeatmap as d } from "./use-liquidation/index.js";
-import { useIsDesktop as b, useIsExtraSmall as _, useIsMedium as D, useIsMobile as F, useIsTablet as P, useMediaQuery as T } from "./use-media-query.js";
-import { useOpenedState as M } from "./use-opened-state.js";
-import { usePrevious as q } from "./use-previous.js";
-import { useSmartNumberInput as G } from "./use-smart-number-input.js";
-import { CELL_BAD as R, CELL_CURRENT as U, CELL_GOOD as g, CELL_HOVERED as H, CELL_LIQUIDATION as X, CELL_OK as k, DEFAULT_AXIS_MAX as y, DEFAULT_AXIS_MIN as Q, formatAxisLabel as V, formatAxisTipLabel as B, formatAxisTipPrice as K, getCellClass as W, isPointInCell as j, useAxis as w, useFixedAssets as z, useIsAxisInRelativeUnits as J, useLiquidationGraphActivePrice as Y, useLiquidationGraphCurrentActiveValue as Z, usePriceInNumber as $, useWithLiquidationGraphActivePrices as ee } from "./use-liquidation/utils.js";
+import { getSortForField as p, getSortForFields as L, nextMultiSortState as x, useFilterAllSelected as n, useMultiSort as A, useRangeFilter as I, useSelectFilter as f, useSort as S } from "./use-filter.js";
+import { useHF as C } from "./use-hf.js";
+import { useEditPriceManually as E, useLiquidationGraphParams as F, useLiquidationHeatmap as b } from "./use-liquidation/index.js";
+import { useIsDesktop as D, useIsExtraSmall as M, useIsMedium as P, useIsMobile as T, useIsTablet as h, useMediaQuery as O } from "./use-media-query.js";
+import { useOpenedState as v } from "./use-opened-state.js";
+import { usePrevious as N } from "./use-previous.js";
+import { useSmartNumberInput as U } from "./use-smart-number-input.js";
+import { CELL_BAD as H, CELL_CURRENT as X, CELL_GOOD as k, CELL_HOVERED as y, CELL_LIQUIDATION as Q, CELL_OK as V, DEFAULT_AXIS_MAX as B, DEFAULT_AXIS_MIN as K, formatAxisLabel as W, formatAxisTipLabel as j, formatAxisTipPrice as w, getCellClass as z, isPointInCell as J, useAxis as Y, useFixedAssets as Z, useIsAxisInRelativeUnits as $, useLiquidationGraphActivePrice as ee, useLiquidationGraphCurrentActiveValue as te, usePriceInNumber as re, useWithLiquidationGraphActivePrices as se } from "./use-liquidation/utils.js";
 export {
-  R as CELL_BAD,
-  U as CELL_CURRENT,
-  g as CELL_GOOD,
-  H as CELL_HOVERED,
-  X as CELL_LIQUIDATION,
-  k as CELL_OK,
-  y as DEFAULT_AXIS_MAX,
-  Q as DEFAULT_AXIS_MIN,
-  V as formatAxisLabel,
-  B as formatAxisTipLabel,
-  K as formatAxisTipPrice,
-  W as getCellClass,
+  H as CELL_BAD,
+  X as CELL_CURRENT,
+  k as CELL_GOOD,
+  y as CELL_HOVERED,
+  Q as CELL_LIQUIDATION,
+  V as CELL_OK,
+  B as DEFAULT_AXIS_MAX,
+  K as DEFAULT_AXIS_MIN,
+  W as formatAxisLabel,
+  j as formatAxisTipLabel,
+  w as formatAxisTipPrice,
+  z as getCellClass,
   p as getSortForField,
-  j as isPointInCell,
-  w as useAxis,
-  t as useCheckboxSelect,
+  L as getSortForFields,
+  J as isPointInCell,
+  x as nextMultiSortState,
+  Y as useAxis,
+  r as useCheckboxSelect,
   i as useControllableState,
   u as useDebounce,
   l as useDebounceCall,
-  C as useEditPriceManually,
-  L as useFilterAllSelected,
-  z as useFixedAssets,
-  f as useHF,
-  J as useIsAxisInRelativeUnits,
-  b as useIsDesktop,
-  _ as useIsExtraSmall,
-  D as useIsMedium,
-  F as useIsMobile,
-  P as useIsTablet,
-  Y as useLiquidationGraphActivePrice,
-  Z as useLiquidationGraphCurrentActiveValue,
-  E as useLiquidationGraphParams,
-  d as useLiquidationHeatmap,
-  T as useMediaQuery,
-  M as useOpenedState,
-  q as usePrevious,
-  $ as usePriceInNumber,
-  x as useRangeFilter,
-  n as useSelectFilter,
-  G as useSmartNumberInput,
-  A as useSort,
-  ee as useWithLiquidationGraphActivePrices
+  E as useEditPriceManually,
+  n as useFilterAllSelected,
+  Z as useFixedAssets,
+  C as useHF,
+  $ as useIsAxisInRelativeUnits,
+  D as useIsDesktop,
+  M as useIsExtraSmall,
+  P as useIsMedium,
+  T as useIsMobile,
+  h as useIsTablet,
+  ee as useLiquidationGraphActivePrice,
+  te as useLiquidationGraphCurrentActiveValue,
+  F as useLiquidationGraphParams,
+  b as useLiquidationHeatmap,
+  O as useMediaQuery,
+  A as useMultiSort,
+  v as useOpenedState,
+  N as usePrevious,
+  re as usePriceInNumber,
+  I as useRangeFilter,
+  f as useSelectFilter,
+  U as useSmartNumberInput,
+  S as useSort,
+  se as useWithLiquidationGraphActivePrices
 };

package/dist/esm/hooks/use-filter.js

@@ -1,40 +1,74 @@
-import { useState as u, useCallback as c, useMemo as l } from "react";
-function f() {
-  const [t, e] = u(null), r = c(() => e(null), []);
-  return [t, e, r];
+import { useState as i, useCallback as c, useMemo as a } from "react";
+function F() {
+  const [e, t] = i(null), r = c(() => t(null), []);
+  return [e, t, r];
 }
-function S(t = null) {
-  const [e, r] = u(t), s = c(() => r(null), []);
-  return [e, r, s];
+function y(e = null) {
+  const [t, r] = i(e), n = c(() => r(null), []);
+  return [t, r, n];
 }
-const i = (t) => t === "asc" ? "desc" : "asc", d = (t, e) => {
-  if (t === e?.field)
-    return e.sort;
+const S = (e) => e === "asc" ? "desc" : "asc", M = (e, t) => {
+  if (e === t?.field)
+    return t.sort;
 };
-function g(t = null) {
-  const [e, r] = u(
-    t
-  ), s = c(
-    (n, o = "asc") => {
-      n === e?.field ? r({ field: n, sort: i(e.sort) }) : r({ field: n, sort: o });
+function R(e = null) {
+  const [t, r] = i(
+    e
+  ), n = c(
+    (o, s = "asc") => {
+      o === t?.field ? r({ field: o, sort: S(t.sort) }) : r({ field: o, sort: s });
     },
-    [e]
+    [t]
   );
-  return [e, s];
+  return [t, n];
 }
-function F(t) {
-  return l(() => Object.values(t).reduce(
-    ([r, s], n) => {
-      const o = !!n.state;
-      return [r || o, s && o];
+const b = (e, t) => {
+  const r = t?.findIndex((n) => n.field === e) ?? -1;
+  return !t || r === -1 ? { sort: void 0, priority: void 0 } : { sort: t[r].sort, priority: r + 1 };
+};
+function g(e, t, r = "asc", n = 2) {
+  const o = e.findIndex((u) => u.field === t);
+  if (o !== -1) {
+    if (e[o].sort === r) {
+      const u = [...e];
+      return u[o] = { field: t, sort: S(e[o].sort) }, u;
+    }
+    return e.filter((u) => u.field !== t);
+  }
+  const s = [{ field: t, sort: r }, ...e];
+  return s.length > n ? s.slice(0, n) : s;
+}
+function p(e = null, { maxFields: t = 2 } = {}) {
+  const [r, n] = i(
+    e ?? []
+  ), o = c(
+    (l, d = "asc") => {
+      n(
+        (f) => g(f, l, d, t)
+      );
+    },
+    [t]
+  ), s = c((l) => {
+    n((d) => d.filter((f) => f.field !== l));
+  }, []), u = c(() => n([]), []);
+  return [r, o, { removeSortField: s, resetSort: u }];
+}
+function C(e) {
+  return a(() => Object.values(e).reduce(
+    ([r, n], o) => {
+      const s = !!o.state;
+      return [r || s, n && s];
     },
     [!1, !0]
-  ), [t]);
+  ), [e]);
 }
 export {
-  d as getSortForField,
-  F as useFilterAllSelected,
-  f as useRangeFilter,
-  S as useSelectFilter,
-  g as useSort
+  M as getSortForField,
+  b as getSortForFields,
+  g as nextMultiSortState,
+  C as useFilterAllSelected,
+  p as useMultiSort,
+  F as useRangeFilter,
+  y as useSelectFilter,
+  R as useSort
 };