@gearbox-protocol/ui-kit 3.14.0-next.8 → 4.0.0-next.1

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

@@ -13,11 +13,6 @@ import "../accordion/accordion.js";
 import "../alert-badge/alert-badge.js";
 import "../alert-dialog/alert-dialog.js";
 import "../alert-modal/alert-modal.js";
-import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
-import "../tooltip/tooltip.js";
-import "react-intl";
-import "../arc-loader/arc-loader.js";
-import "../asset-line/asset-line.js";
 import "../buttons/back-button/back-button.js";
 import "../buttons/button/button.js";
 import "../buttons/copy-button/copy-button.js";
@@ -26,62 +21,68 @@ import "../buttons/filter-button/filter-button.js";
 import "../buttons/navigation-button/navigation-button.js";
 import "../buttons/tab-button/tab-button.js";
 import "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
 import "wagmi";
 import "../auth/wallet-ui-context.js";
-import "../avatar/avatar.js";
 import "../badge/badge.js";
+import "react-intl";
+import "../simple-dropdown/simple-dropdown.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../token-symbol/token-symbol.js";
+import "../typography/typography.js";
+import "../detailed-page-title/detailed-page-title-copy-button.js";
+import "../detailed-page-title/detailed-page-title-explorer-dropdown.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 "../vertical-indicator/vertical-indicator.js";
+import "../checkbox/checkbox.js";
+import "../checkbox/checkbox-labeled.js";
+import "../select/select.js";
+import "../breakpoint-provider.js";
+import "lightweight-charts";
+import "../graph/formatters.js";
+import "../graph/graph-view.js";
+import "../base/info-portal/info-portal.js";
+import "../edit-input/edit-input.js";
+import "../slider/slider.js";
+import "../slider/slider-context.js";
+import "../text-button/text-button.js";
+import "../with-title/with-title.js";
+import "../status-elements/status-elements.js";
+import "react-router-dom";
+import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import "../skeleton/skeleton.js";
+import "../base/tabber/tabber.js";
+import "../points-icon/points-icon.js";
 import "../base-link/base-link.js";
 import "../navigation-context/navigation-context.js";
-import "../button-checkbox/button-checkbox.js";
-import "../card-grid/card-grid.js";
 import "../cards/card/card.js";
-import "../carousel/carousel.js";
-import "../checkbox/checkbox.js";
-import "../checkbox/checkbox-labeled.js";
 import "../checkbox-item/checkbox-item.js";
 import "../client-adapters/styled-button/styled-button.js";
-import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
 import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
-import "../colored-text/colored-text.js";
-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 "../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 "../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 "../confirm-menu/confirm-menu.js";
-import "../dialog/dialog-modal-container.js";
-import "../text-button/text-button.js";
-import "../vertical-indicator/vertical-indicator.js";
-import "../points-icon/points-icon.js";
-import "../skeleton/skeleton.js";
-import "../vertical-list/vertical-list.js";
-import "../rounded-image/rounded-image.js";
-import "../progress/progress.js";
-import "../pool-indicator-icon/pool-indicator-icon.js";
-import "../composites/strategies-table/components/feature/feature.styles.js";
-import "viem";
-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 "../currency-button/currency-button.js";
+import "../spinner-loader/spinner-loader.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";
 import "../dialog/dialog-header.js";
 import "../dialog/dialog-title.js";
+import "../dialog/dialog-modal-container.js";
 import "../dialog/dialog-overlay.js";
+import "viem";
+import "../input/input.js";
 import "../label/label.js";
 import "../dropdown-menu/dropdown-menu.js";
 import "../dropdown-menu/dropdown-menu-checkbox-item.js";
@@ -93,8 +94,6 @@ import "../dropdown-menu/dropdown-menu-separator.js";
 import "../dropdown-menu/dropdown-menu-shortcut.js";
 import "../dropdown-menu/dropdown-menu-sub-content.js";
 import "../dropdown-menu/dropdown-menu-sub-trigger.js";
-import "../edit-input/edit-input.js";
-import "../fadeout-loading/fadeout-loading.js";
 import "../filter/filter-block.js";
 import "../filter/filter-checkbox-item.js";
 import "../filter/filter-chip.js";
@@ -108,59 +107,39 @@ import "../filter/filter-modal-item.js";
 import "../filter/filter-radio-item.js";
 import "../filter/filter-separator.js";
 import "../filter/variants.js";
-import "../graph/formatters.js";
-import "lightweight-charts";
-import "../graph/graph-view.js";
-import "../health-factor/health-factor.js";
-import "../horizontal-indicator/horizontal-indicator.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/footer/footer.js";
 import "../layout/grid/grid.js";
 import "../layout/header/header.js";
 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";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";
-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 "../progress-bar/progress-bar.js";
-import "../radio-group/radio-group.js";
-import "../search-bar/search-bar.js";
+import "../rounded-image/rounded-image.js";
 import "../segmented-control/segmented-control.js";
-import "../select/select.js";
-import "../separator/separator.js";
+import "../separate-line/separate-line.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";
-import "../stepper/stepper.js";
-import "../switch/switch.js";
 import "../table/table.js";
 import "../table/grid-table-loader.js";
 import "../textarea/textarea.js";
 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({
+import "../tip-card/tip-card.js";
+function er({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -242,5 +221,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/components/yield-breakdown-tooltip/index.js

@@ -0,0 +1,4 @@
+import { YieldBreakdownTooltip as r } from "./yield-breakdown-tooltip.js";
+export {
+  r as YieldBreakdownTooltip
+};

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -0,0 +1,222 @@
+import { jsxs as s, jsx as e, Fragment as I } from "react/jsx-runtime";
+import { faArrowUpRightFromSquare as R } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as T } from "../icons/fa-icon.js";
+import { PointsIcon as $ } from "../points-icon/points-icon.js";
+import { TokenIcon as j } from "../token-icon/token-icon.js";
+import { SimpleTooltip as F } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as a } from "../typed-intl/index.js";
+import "react";
+import { positiveTokenRewardsOf as P, pointProgramsOf as S, totalApyOf as Y } from "../../utils/apy-breakdown.js";
+import "@gearbox-protocol/sdk";
+import { bpsToPercent as v } from "../../utils/bps.js";
+import { cn as N } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as p } from "../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../utils/z-index.js";
+function z(t) {
+  const n = t.toFixed(1);
+  return n.endsWith(".0") ? n.slice(0, -2) : n;
+}
+function m(t) {
+  const n = v(t), i = p(Math.abs(n));
+  return n < 0 ? `-${i}` : n > 0 ? i : p(0);
+}
+function w(t) {
+  const n = v(Math.abs(t));
+  return `-${p(n)}`;
+}
+function Z({
+  supplyApy: t,
+  maxLeverage: n,
+  collateralApy: i,
+  borrowApy: l,
+  additionalBorrowApy: d,
+  children: k,
+  className: f
+}) {
+  const g = i ?? t, u = P(g), h = S(t), x = l !== void 0 && l > 0, b = d !== void 0 && d > 0, B = x || b, y = /* @__PURE__ */ s(
+    "div",
+    {
+      className: N(
+        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
+        "rounded-xl",
+        "bg-popover text-popover-foreground",
+        "border border-white/[0.07]",
+        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
+        "text-left font-normal"
+      ),
+      children: [
+        /* @__PURE__ */ s("div", { className: "flex h-6 items-center justify-between gap-3 text-base leading-4 text-foreground", children: [
+          /* @__PURE__ */ e("span", { className: "font-semibold", children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.title"
+            }
+          ) }),
+          n !== void 0 && n > 0 && /* @__PURE__ */ e("span", { className: "font-medium", children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.atLeverage",
+              values: { leverage: z(n) }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            label: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.baseYield"
+              }
+            ),
+            value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(g.organicApy) })
+          }
+        ),
+        u.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.incentiveYield"
+            }
+          ) }),
+          u.map((o) => /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e(j, { token: o.token, size: 20 }),
+                /* @__PURE__ */ e("span", { children: o.token.symbol }),
+                /* @__PURE__ */ e(
+                  T,
+                  {
+                    icon: R,
+                    className: "size-3.5 text-muted-foreground"
+                  }
+                )
+              ] }),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(o.supplyApr ?? 0) })
+            },
+            `incentive-${o.token.address}-${o.supplyApr ?? 0}`
+          ))
+        ] }),
+        B && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+            a,
+            {
+              messageId: "components.yieldBreakdown.borrowRate"
+            }
+          ) }),
+          x && /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ e(
+                a,
+                {
+                  messageId: "components.yieldBreakdown.baseRate"
+                }
+              ),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(l) })
+            }
+          ),
+          b && /* @__PURE__ */ e(
+            r,
+            {
+              label: /* @__PURE__ */ e(
+                a,
+                {
+                  messageId: "components.yieldBreakdown.additionalRate"
+                }
+              ),
+              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(d) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            className: "h-7",
+            label: /* @__PURE__ */ e("span", { className: "text-sm font-bold uppercase leading-5 tracking-wide", children: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.netYield"
+              }
+            ) }),
+            value: /* @__PURE__ */ e("span", { className: "text-xl font-bold leading-7", children: m(Y(t)) })
+          }
+        ),
+        h.length > 0 && /* @__PURE__ */ s(I, { children: [
+          /* @__PURE__ */ e("div", { className: "h-px w-full bg-[#2d3035]" }),
+          /* @__PURE__ */ s("div", { className: "flex h-5 items-center justify-between gap-3", children: [
+            /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
+              a,
+              {
+                messageId: "components.yieldBreakdown.points"
+              }
+            ) }),
+            /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: h.map((o) => /* @__PURE__ */ s(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 rounded-[10px] bg-[#242528] pr-2 text-sm font-semibold text-foreground",
+                children: [
+                  /* @__PURE__ */ e(
+                    $,
+                    {
+                      reward: {
+                        name: o.name,
+                        type: o.id
+                      },
+                      size: 20
+                    }
+                  ),
+                  o.multiplier != null ? `${o.multiplier}×` : "—"
+                ]
+              },
+              `points-${o.id}`
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    F,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: f, children: k }),
+      triggerClassName: f,
+      children: y
+    }
+  );
+}
+function c({ children: t }) {
+  return /* @__PURE__ */ e("span", { className: "text-xs font-normal uppercase leading-4 tracking-wide text-muted-foreground", children: t });
+}
+function r({
+  label: t,
+  value: n,
+  className: i
+}) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: N(
+        "flex h-6 items-center justify-between gap-3 text-sm leading-5 text-foreground",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ e("span", { className: "min-w-0 font-normal", children: t }),
+        /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums", children: n })
+      ]
+    }
+  );
+}
+export {
+  Z as YieldBreakdownTooltip
+};

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-debounce-call.js

@@ -2,10 +2,11 @@ import "react";
 import { useDebounce as e } from "./use-debounce.js";
 import "@gearbox-protocol/sdk/common-utils";
 import "@gearbox-protocol/sdk";
+import "../components/breakpoint-provider.js";
 const n = (o) => o();
-function m(o) {
+function p(o) {
   return e(n, o);
 }
 export {
-  m as useDebounceCall
+  p as useDebounceCall
 };

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
 };