@gearbox-protocol/ui-kit 4.0.0-next.4 → 4.0.0-next.40

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

@@ -3,10 +3,9 @@ import { IconCopy as v } from "@gearbox-protocol/static";
 import { useState as w, useRef as k } from "react";
 import { faCheck as N } from "@fortawesome/free-solid-svg-icons";
 import { FaIcon as j } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as i } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
 import "../accordion/accordion.js";
@@ -24,6 +23,7 @@ import "../token-icon/token-icon.js";
 import { SimpleTooltip as T } from "../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";
@@ -35,6 +35,7 @@ import "../simple-accordion/simple-accordion.js";
 import "../tip-card/tip-card.js";
 import "../typography/typography.js";
 import "../points-icon/points-icon.js";
+import "viem";
 import "../vertical-indicator/vertical-indicator.js";
 import "../base/page-title/page-title.js";
 import "../detailed-page-title/detailed-page-title-copy-button.js";
@@ -44,6 +45,7 @@ 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/checkbox.js";
 import "../checkbox/checkbox-labeled.js";
 import "../select/select.js";
@@ -57,8 +59,8 @@ 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 "../status-elements/status-elements.js";
 import "../client-adapters/styled-dialog-container/styled-dialog-container.js";
 import "../modal/modal.js";
 import "@radix-ui/react-dialog";
@@ -70,16 +72,17 @@ 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 "../simple-dropdown/simple-dropdown.js";
 import "../simple-dropdown/simple-dropdown-menu-item.js";
-import "../help-tip/help-tip.js";
 import "../base/tabber/tabber.js";
 import "../link/link.js";
 import "../rounded-image/rounded-image.js";
+import "../network-icon/network-indicator.js";
 import "../base-link/base-link.js";
+import "../help-tip/help-tip.js";
+import "../base-table/base-table-line.js";
 import "../navigation-context/navigation-context.js";
 import "../cards/card/card.js";
 import "../checkbox-item/checkbox-item.js";
@@ -87,6 +90,7 @@ import "../client-adapters/styled-button/styled-button.js";
 import "../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
 import "../composites/tx-preview/confirm/dialog/constants.js";
+import "../spinner/spinner.js";
 import "../spinner-loader/spinner-loader.js";
 import "../detailed-apy/detailed-apy.js";
 import "../dropdown-menu/dropdown-menu.js";
@@ -123,14 +127,14 @@ import "../legal-agreement/legal-agreement-theme.js";
 import "../loader/loader.js";
 import "../loading/loading.js";
 import "../loading-bar/loading-bar.js";
+import "../radio-group/radio-group.js";
+import "../status-dot/status-dot.js";
 import "../segmented-control/segmented-control.js";
 import "../separate-line/separate-line.js";
-import "../spinner/spinner.js";
 import "../split-list/split-list.js";
-import "../status-dot/status-dot.js";
 import "../textarea/textarea.js";
 import "../theme-provider.js";
-function _o({
+function or({
   toCopy: u,
   children: d,
   onCopySuccess: f,
@@ -212,5 +216,5 @@ function _o({
   return a ? /* @__PURE__ */ t(T, { placement: "top", triangle: !0, title: c(), children: a }) : c();
 }
 export {
-  _o as WithCopy
+  or as WithCopy
 };

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

@@ -1,13 +1,12 @@
-import { jsxs as p, jsx as i } from "react/jsx-runtime";
-import { cva as x } from "class-variance-authority";
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
 import "react";
-import "@gearbox-protocol/sdk";
+import "@gearbox-protocol/sdk/onchain";
 import { cn as e } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const a = x("", {
+const p = a("", {
   variants: {
     size: {
       sm: "text-[14px] mb-[14px]",
@@ -20,19 +19,19 @@ const a = x("", {
     size: "default"
   }
 });
-function g({
+function b({
   title: m,
   children: t,
   size: o = "default",
   className: r
 }) {
-  return /* @__PURE__ */ p("div", { className: e("flex flex-col"), children: [
+  return /* @__PURE__ */ x("div", { className: e("flex flex-col"), children: [
     /* @__PURE__ */ i(
       "div",
       {
         className: e(
           "text-foreground font-medium",
-          a({ size: o }),
+          p({ size: o }),
           r
         ),
         children: m
@@ -42,5 +41,5 @@ function g({
   ] });
 }
 export {
-  g as WithTitle
+  b as WithTitle
 };

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

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

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

@@ -1,222 +1,184 @@
-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 { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as B, ApyBreakdownBody as v, formatBreakdownRate as u, ApyBreakdownRow as y, periodMessageId as w, ApyBreakdownDivider as h } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { PoolApyBreakdownCard as b } from "../base/pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PointsIcon as I } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } 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);
+import { FormattedMessageTyped as d } from "../typed-intl/index.js";
+import { tokenRewardsOf as O, pointProgramsOf as R, totalApyOf as x } from "../../utils/apy-breakdown.js";
+import { formatLeverage as N } from "../../utils/format-leverage.js";
+function S({
+  title: t,
+  children: l,
+  placement: s = "left",
+  open: a,
+  className: i,
+  triggerClassName: n
+}) {
+  return /* @__PURE__ */ e(
+    T,
+    {
+      placement: s,
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: B,
+      maxWidth: B,
+      title: t,
+      open: a,
+      className: i,
+      triggerClassName: n,
+      children: l
+    }
+  );
 }
-function w(t) {
-  const n = v(Math.abs(t));
-  return `-${p(n)}`;
+function H({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n,
+  children: r,
+  className: m,
+  open: g
+}) {
+  const p = l !== void 0 && l > 0;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ e("span", { className: m, children: r }),
+      triggerClassName: m,
+      open: g,
+      children: p ? /* @__PURE__ */ e(
+        W,
+        {
+          supplyApy: t,
+          maxLeverage: l,
+          collateralApy: s,
+          borrowApy: a,
+          quotaRate: i,
+          period: n
+        }
+      ) : /* @__PURE__ */ e(b, { data: t, period: n })
+    }
+  );
 }
-function Z({
+function W({
   supplyApy: t,
-  maxLeverage: n,
-  collateralApy: i,
-  borrowApy: l,
-  additionalBorrowApy: d,
-  children: k,
-  className: f
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n
 }) {
-  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",
+  const r = s, m = r ? O(r) : [], g = R(t), p = x(t), f = a != null || i != null ? -((a ?? 0) + (i ?? 0)) : void 0, k = g.filter((o) => o.multiplier != null);
+  return /* @__PURE__ */ c(
+    v,
     {
-      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"
+      title: /* @__PURE__ */ e(
+        d,
+        {
+          messageId: w(
+            n,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: N(l) }
+        }
       ),
+      chip: u(p),
+      chipPositive: p > 0,
       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,
+        r?.organicApy != null ? /* @__PURE__ */ e(
+          y,
           {
+            muted: r.organicApy < 0,
             label: /* @__PURE__ */ e(
-              a,
+              d,
               {
-                messageId: "components.yieldBreakdown.baseYield"
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.collateralApy",
+                  "components.yieldBreakdown.collateralApy7d"
+                )
               }
             ),
-            value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(g.organicApy) })
+            value: u(r.organicApy)
           }
-        ),
-        u.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-            a,
+        ) : null,
+        m.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            y,
             {
-              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,
+              muted: o.supplyApr < 0,
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
                   {
-                    icon: R,
-                    className: "size-3.5 text-muted-foreground"
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: o.token.symbol }
                   }
-                )
+                ) }),
+                /* @__PURE__ */ e(P, { token: o.token, size: 20 })
               ] }),
-              value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(o.supplyApr ?? 0) })
+              value: u(o.supplyApr)
             },
-            `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) })
-            }
+            `incentive-${o.token.address}-${o.supplyApr}`
           )
-        ] }),
-        /* @__PURE__ */ e(
-          r,
+        ),
+        f != null ? /* @__PURE__ */ e(
+          y,
           {
-            className: "h-7",
-            label: /* @__PURE__ */ e("span", { className: "text-sm font-bold uppercase leading-5 tracking-wide", children: /* @__PURE__ */ e(
-              a,
+            muted: f < 0,
+            label: /* @__PURE__ */ e(
+              d,
               {
-                messageId: "components.yieldBreakdown.netYield"
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
               }
-            ) }),
-            value: /* @__PURE__ */ e("span", { className: "text-xl font-bold leading-7", children: m(Y(t)) })
+            ),
+            value: u(f)
           }
-        ),
-        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 })
+        ) : null,
+        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
+          /* @__PURE__ */ e(h, {}),
+          k.map((o) => /* @__PURE__ */ e(
+            y,
+            {
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: o.name }
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    reward: {
+                      name: o.name,
+                      type: o.id
+                    },
+                    size: 20
+                  }
+                )
+              ] }),
+              value: `${o.multiplier}×`
+            },
+            `points-${o.id}`
+          ))
+        ] }) : null
       ]
     }
   );
 }
 export {
-  Z as YieldBreakdownTooltip
+  S as ApyBreakdownTooltip,
+  H as YieldBreakdownTooltip
 };

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

@@ -72,9 +72,14 @@ const e = {
         "success-foreground": "hsl(var(--success-foreground))",
         "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))"
+        },
         liquidation: "hsl(var(--liquidation))",
         "liquidation-line": "hsl(var(--liquidation-line))",
         border: "hsl(var(--border))",
+        divider: "hsl(var(--divider))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         "text-secondary": "hsl(var(--text-secondary))",
@@ -99,7 +104,14 @@ const e = {
           2: "hsl(var(--chart-2))",
           3: "hsl(var(--chart-3))",
           4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))"
+          5: "hsl(var(--chart-5))",
+          6: "hsl(var(--chart-6))",
+          7: "hsl(var(--chart-7))",
+          8: "hsl(var(--chart-8))",
+          9: "hsl(var(--chart-9))",
+          10: "hsl(var(--chart-10))",
+          11: "hsl(var(--chart-11))",
+          12: "hsl(var(--chart-12))"
         }
       },
       fontFamily: {

package/dist/esm/hooks/index.js

@@ -1,34 +1,34 @@
 import { useCheckboxSelect as r } from "./use-checkbox-select.js";
-import { useControllableState as u } from "./use-controllable-state.js";
+import { useControllableState as s } from "./use-controllable-state.js";
 import { useDebounce as l } from "./use-debounce.js";
 import { useDebounceCall as p } from "./use-debounce-call.js";
-import { getSortForField as S, getSortForFields as a, nextMultiSortState as i, useFilterAllSelected as f, useMultiSort as F, useRangeFilter as b, useSelectFilter as n, useSort as c } from "./use-filter.js";
-import { useHF as I } from "./use-hf.js";
-import { useIsDesktop as g, useIsExtraSmall as C, useIsMedium as D, useIsMobile as k, useIsTablet as h, useMediaQuery as v } from "./use-media-query.js";
-import { useOpenedState as A } from "./use-opened-state.js";
-import { usePrevious as H } from "./use-previous.js";
-import { useSmartNumberInput as O } from "./use-smart-number-input.js";
+import { getSortForField as S, getSortForFields as i, nextMultiSortState as a, useFilterAllSelected as f, useMultiSort as b, useRangeFilter as d, useSelectFilter as n, useSort as F } from "./use-filter.js";
+import { useIsDesktop as I, useIsExtraSmall as M, useIsMedium as g, useIsMobile as C, useIsTablet as D, useMediaQuery as h } from "./use-media-query.js";
+import { useObservedWidthKey as v } from "./use-observed-width-key.js";
+import { useOpenedState as O } from "./use-opened-state.js";
+import { usePrevious as E } from "./use-previous.js";
+import { useSmartNumberInput as N } from "./use-smart-number-input.js";
 export {
   S as getSortForField,
-  a as getSortForFields,
-  i as nextMultiSortState,
+  i as getSortForFields,
+  a as nextMultiSortState,
   r as useCheckboxSelect,
-  u as useControllableState,
+  s as useControllableState,
   l as useDebounce,
   p as useDebounceCall,
   f as useFilterAllSelected,
-  I as useHF,
-  g as useIsDesktop,
-  C as useIsExtraSmall,
-  D as useIsMedium,
-  k as useIsMobile,
-  h as useIsTablet,
-  v as useMediaQuery,
-  F as useMultiSort,
-  A as useOpenedState,
-  H as usePrevious,
-  b as useRangeFilter,
+  I as useIsDesktop,
+  M as useIsExtraSmall,
+  g as useIsMedium,
+  C as useIsMobile,
+  D as useIsTablet,
+  h as useMediaQuery,
+  b as useMultiSort,
+  v as useObservedWidthKey,
+  O as useOpenedState,
+  E as usePrevious,
+  d as useRangeFilter,
   n as useSelectFilter,
-  O as useSmartNumberInput,
-  c as useSort
+  N as useSmartNumberInput,
+  F as useSort
 };

package/dist/esm/hooks/use-debounce-call.js

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

package/dist/esm/hooks/use-observed-width-key.js

@@ -0,0 +1,24 @@
+import { useRef as c, useState as d, useEffect as f } from "react";
+function b() {
+  const t = c(null), [i, u] = d(0);
+  return f(() => {
+    const e = t.current;
+    if (!e) return;
+    const n = () => {
+      const s = Math.round(e.getBoundingClientRect().width);
+      u(
+        (o) => o === s ? o : s
+      );
+    };
+    n();
+    const r = new ResizeObserver(() => {
+      n();
+    });
+    return r.observe(e), () => {
+      r.disconnect();
+    };
+  }, []), { ref: t, widthKey: i };
+}
+export {
+  b as useObservedWidthKey
+};