@gearbox-protocol/ui-kit 4.0.0-next.46 → 4.0.0-next.48

package/dist/cjs/components/base/health-factor-block/health-factor-block.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../text/use-title-text.cjs"),i=require("../../fadeout-loading/fadeout-loading.cjs"),d=require("../../health-factor/health-factor.cjs"),u=require("../../typed-intl/index.cjs"),T=require("../../vertical-indicator/vertical-indicator.cjs"),t=require("./constants.cjs");function x({healthFactor:o,healthFactorTo:a,debt:c,debtTo:h,zone:s,isLoading:l,title:n,tip:F,testId:v}){const m=p.useTitleText(),r=a!==void 0;return e.jsx(T.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":v??t.HealthFactorBlockTest.root,label:n!==void 0?m(n):e.jsx(u.FormattedMessageTyped,{messageId:"components.healthFactorBlock.label"}),tip:F??e.jsx(u.FormattedMessageTyped,{messageId:"components.healthFactorBlock.tip"}),value:e.jsx(i.FadeoutLoading,{loading:l,children:o===void 0?e.jsx("span",{"data-testid":t.HealthFactorBlockTest.value,children:"—"}):e.jsx(d.HealthFactor,{value:o,debt:c,zone:r?void 0:s,"data-testid":t.HealthFactorBlockTest.value})}),valueTo:r?e.jsx(i.FadeoutLoading,{loading:l,children:e.jsx(d.HealthFactor,{value:a,debt:h??c,zone:s,"data-testid":t.HealthFactorBlockTest.valueTo})}):void 0})}exports.HealthFactorBlockTest=t.HealthFactorBlockTest;exports.HealthFactorBlock=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("../text/use-title-text.cjs"),d=require("../../fadeout-loading/fadeout-loading.cjs"),u=require("../../health-factor/health-factor.cjs"),h=require("../../typed-intl/index.cjs"),T=require("../../vertical-indicator/vertical-indicator.cjs"),t=require("./constants.cjs");function _({healthFactor:o,healthFactorTo:s,debt:c,debtTo:m,approximate:l,zone:n,isLoading:r,title:i,tip:x,testId:p}){const F=v.useTitleText(),a=s!==void 0;return e.jsx(T.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":p??t.HealthFactorBlockTest.root,label:i!==void 0?F(i):e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.label"}),tip:x??e.jsx(h.FormattedMessageTyped,{messageId:"components.healthFactorBlock.tip"}),value:e.jsx(d.FadeoutLoading,{loading:r,children:o===void 0?e.jsx("span",{"data-testid":t.HealthFactorBlockTest.value,children:"—"}):e.jsx("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.value,children:e.jsx(u.HealthFactor,{value:o,debt:c,zone:a?void 0:n,approximate:l&&!a})})}),valueTo:a?e.jsx(d.FadeoutLoading,{loading:r,children:e.jsx("span",{className:"inline-flex items-center","data-testid":t.HealthFactorBlockTest.valueTo,children:e.jsx(u.HealthFactor,{value:s,debt:m??c,zone:n,approximate:l})})}):void 0})}exports.HealthFactorBlockTest=t.HealthFactorBlockTest;exports.HealthFactorBlock=_;

package/dist/cjs/components/base/liquidation-price-block/liquidation-price-block.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("../text/use-title-text.cjs"),d=require("../../fadeout-loading/fadeout-loading.cjs"),T=require("../../formatted-number/formatted-number.cjs"),v=require("../../status-elements/status-elements.cjs"),m=require("../../typed-intl/index.cjs"),j=require("../../vertical-indicator/vertical-indicator.cjs"),b=require("../../../utils/format.cjs"),g=require("../../../utils/parse-input-to-bn.cjs"),n=require("./constants.cjs");function L(t,i){if(!(!t||!i))return`${t.symbol} / ${i.symbol}`}function f({price:t,priceTo:i,collateral:o,underlying:s,approximate:r,zone:a,isLoading:c,title:l,tip:x,testId:_}){const p=P.useTitleText(),u=i!==void 0;return e.jsx(j.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":_??n.LiquidationPriceBlockTest.root,label:l!==void 0?p(l):e.jsx(m.FormattedMessageTyped,{messageId:"components.liquidationPriceBlock.label"}),tip:x??e.jsx(m.FormattedMessageTyped,{messageId:"components.liquidationPriceBlock.tip"}),value:e.jsx(d.FadeoutLoading,{loading:c,children:e.jsx(q,{price:t,approximate:r,zone:u?void 0:a,testId:n.LiquidationPriceBlockTest.value})}),valueTo:u?e.jsx(d.FadeoutLoading,{loading:c,children:e.jsx(q,{price:i??null,approximate:r,zone:a,testId:n.LiquidationPriceBlockTest.valueTo})}):void 0,valueDescription:L(o,s)})}function q({price:t,approximate:i,zone:o,testId:s}){return e.jsxs("span",{className:"inline-flex items-center","data-testid":s,children:[t===void 0?"—":t===null||t===0n?"N/A":e.jsxs(e.Fragment,{children:[i?e.jsx("span",{className:"mr-0.5",children:b.APPROXIMATE_SYMBOL}):null,e.jsx(T.FormattedNumberString,{value:g.bnToLiquidationPriceView(t)})]}),o?e.jsx("span",{className:"ml-1.5",children:e.jsx(v.HealthDot,{zone:o})}):null]})}exports.LiquidationPriceBlockTest=n.LiquidationPriceBlockTest;exports.LiquidationPriceBlock=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("../text/use-title-text.cjs"),d=require("../../fadeout-loading/fadeout-loading.cjs"),T=require("../../formatted-number/formatted-number.cjs"),v=require("../../status-elements/status-elements.cjs"),m=require("../../typed-intl/index.cjs"),j=require("../../vertical-indicator/vertical-indicator.cjs"),b=require("../../../utils/format.cjs"),g=require("../../../utils/parse-input-to-bn.cjs"),n=require("./constants.cjs");function L(t,i){if(!(!t||!i))return`${t.symbol} / ${i.symbol}`}function f({price:t,priceTo:i,collateral:o,underlying:s,approximate:r,zone:c,isLoading:l,title:u,tip:x,testId:p}){const _=P.useTitleText(),a=i!==void 0;return e.jsx(j.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":p??n.LiquidationPriceBlockTest.root,label:u!==void 0?_(u):e.jsx(m.FormattedMessageTyped,{messageId:"components.liquidationPriceBlock.label"}),tip:x??e.jsx(m.FormattedMessageTyped,{messageId:"components.liquidationPriceBlock.tip"}),value:e.jsx(d.FadeoutLoading,{loading:l,children:e.jsx(q,{price:t,approximate:r&&!a,zone:a?void 0:c,testId:n.LiquidationPriceBlockTest.value})}),valueTo:a?e.jsx(d.FadeoutLoading,{loading:l,children:e.jsx(q,{price:i??null,approximate:r,zone:c,testId:n.LiquidationPriceBlockTest.valueTo})}):void 0,valueDescription:L(o,s)})}function q({price:t,approximate:i,zone:o,testId:s}){return e.jsxs("span",{className:"inline-flex items-center","data-testid":s,children:[t===void 0?"—":t===null||t===0n?"N/A":e.jsxs(e.Fragment,{children:[i?e.jsx("span",{className:"mr-0.5",children:b.APPROXIMATE_SYMBOL}):null,e.jsx(T.FormattedNumberString,{value:g.bnToLiquidationPriceView(t)})]}),o?e.jsx("span",{className:"ml-1.5",children:e.jsx(v.HealthDot,{zone:o})}):null]})}exports.LiquidationPriceBlockTest=n.LiquidationPriceBlockTest;exports.LiquidationPriceBlock=f;

package/dist/cjs/components/base/time-to-liquidation-block/time-to-liquidation-block.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../text/use-title-text.cjs"),u=require("../../fadeout-loading/fadeout-loading.cjs"),_=require("../../status-elements/status-elements.cjs"),r=require("../../typed-intl/index.cjs"),L=require("../../vertical-indicator/vertical-indicator.cjs"),p=require("../../../utils/format.cjs"),c=require("../../../utils/ttl.cjs"),l=require("./constants.cjs");function g({data:t,dataTo:n,approximate:s,zone:a,isLoading:o,title:i,tip:m,testId:v}){const q=x.useTitleText(),d=n!==void 0;return e.jsx(L.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":v??l.TimeToLiquidationBlockTest.root,label:i!==void 0?q(i):e.jsx(r.FormattedMessageTyped,{messageId:"components.timeToLiquidationBlock.label"}),tip:m??e.jsx(r.FormattedMessageTyped,{messageId:"components.timeToLiquidationBlock.tip"}),value:e.jsx(u.FadeoutLoading,{loading:o,children:e.jsx(T,{milliseconds:t,approximate:s,zone:d?void 0:a,testId:l.TimeToLiquidationBlockTest.value})}),valueTo:d?e.jsx(u.FadeoutLoading,{loading:o,children:e.jsx(T,{milliseconds:n??null,approximate:s,zone:a,testId:l.TimeToLiquidationBlockTest.valueTo})}):void 0})}function T({milliseconds:t,approximate:n,zone:s,testId:a}){const o=t==null?void 0:c.ttlLeft(t),i=s??(t==null?void 0:c.getTTLZones(t));return e.jsxs("span",{className:"inline-flex items-center","data-testid":a,children:[t===void 0?"—":t===null?"N/A":e.jsxs(e.Fragment,{children:[n?e.jsx("span",{className:"mr-0.5",children:p.APPROXIMATE_SYMBOL}):null,o?.months!==void 0?`${o.months}mo`:o?.day!==void 0?`${o.day}d`:"<1d"]}),t!=null&&i?e.jsx("span",{className:"ml-1.5",children:e.jsx(_.HealthDot,{zone:i})}):null]})}exports.TimeToLiquidationBlockTest=l.TimeToLiquidationBlockTest;exports.TimeToLiquidationBlock=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../text/use-title-text.cjs"),u=require("../../fadeout-loading/fadeout-loading.cjs"),p=require("../../status-elements/status-elements.cjs"),r=require("../../typed-intl/index.cjs"),_=require("../../vertical-indicator/vertical-indicator.cjs"),L=require("../../../utils/format.cjs"),c=require("../../../utils/ttl.cjs"),l=require("./constants.cjs");function g({data:t,dataTo:n,approximate:s,zone:a,isLoading:o,title:i,tip:m,testId:v}){const q=x.useTitleText(),d=n!==void 0;return e.jsx(_.VerticalIndicator,{align:"center",dimPreviousValue:!1,"data-testid":v??l.TimeToLiquidationBlockTest.root,label:i!==void 0?q(i):e.jsx(r.FormattedMessageTyped,{messageId:"components.timeToLiquidationBlock.label"}),tip:m??e.jsx(r.FormattedMessageTyped,{messageId:"components.timeToLiquidationBlock.tip"}),value:e.jsx(u.FadeoutLoading,{loading:o,children:e.jsx(T,{milliseconds:t,approximate:s&&!d,zone:d?void 0:a,testId:l.TimeToLiquidationBlockTest.value})}),valueTo:d?e.jsx(u.FadeoutLoading,{loading:o,children:e.jsx(T,{milliseconds:n??null,approximate:s,zone:a,testId:l.TimeToLiquidationBlockTest.valueTo})}):void 0})}function T({milliseconds:t,approximate:n,zone:s,testId:a}){const o=t==null?void 0:c.ttlLeft(t),i=s??(t==null?void 0:c.getTTLZones(t));return e.jsxs("span",{className:"inline-flex items-center","data-testid":a,children:[t===void 0?"—":t===null?"N/A":e.jsxs(e.Fragment,{children:[n?e.jsx("span",{className:"mr-0.5",children:L.APPROXIMATE_SYMBOL}):null,o?.months!==void 0?`${o.months}mo`:o?.day!==void 0?`${o.day}d`:"<1d"]}),t!=null&&i?e.jsx("span",{className:"ml-1.5",children:e.jsx(p.HealthDot,{zone:i})}):null]})}exports.TimeToLiquidationBlockTest=l.TimeToLiquidationBlockTest;exports.TimeToLiquidationBlock=g;

package/dist/cjs/components/health-factor/health-factor.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk/onchain"),g=require("class-variance-authority");require("react");const j=require("../../utils/cn.cjs");require("sonner");require("luxon");require("../../utils/z-index.cjs");const a=require("../status-elements/status-elements.cjs"),l=15e3,d=11e3,A=10500,m=t=>{if(t)return t>=l?"good":t>d?"medium":t>A?"bad":t>u.PERCENTAGE_FACTOR?"critical":"liquidation"},D=g.cva("inline-flex items-center font-medium [text-decoration:inherit]",{variants:{zone:{good:"text-success",medium:"text-warning",bad:"text-destructive",critical:"text-destructive",liquidation:"text-liquidation",unset:"[color:unset]"}}});function b({value:t,debt:i,decimals:x=3,zone:e,zoneType:o="color",className:q,...v}){const n=i!==void 0&&i===0n,F=!n&&o==="color",H=!n&&e&&o==="dot",f=!n&&e&&o==="bars",s=F?e===void 0?m(t):e:void 0,c=s===void 0?void 0:s===null?"unset":s,h=()=>{if(n)return"N/A";const _=Number(t);return u.formatPercentage(_,x)};return r.jsxs("span",{className:j.cn(D(c!==void 0?{zone:c}:{}),q),...v,children:[f&&r.jsx("span",{className:"mr-6 shrink-0",children:r.jsx(a.StatusBars,{zone:e})}),h(),H&&r.jsx("span",{className:"ml-1.5",children:r.jsx(a.HealthDot,{zone:e})})]})}exports.BAD_HF=d;exports.GOOD_HF=l;exports.HealthFactor=b;exports.getHFZones=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@gearbox-protocol/sdk/onchain"),g=require("class-variance-authority");require("react");const j=require("../../utils/cn.cjs");require("sonner");const O=require("../../utils/format.cjs");require("luxon");require("../../utils/z-index.cjs");const a=require("../status-elements/status-elements.cjs"),l=15e3,d=11e3,D=10500,m=t=>{if(t)return t>=l?"good":t>d?"medium":t>D?"bad":t>u.PERCENTAGE_FACTOR?"critical":"liquidation"},N=g.cva("inline-flex items-center font-medium [text-decoration:inherit]",{variants:{zone:{good:"text-success",medium:"text-warning",bad:"text-destructive",critical:"text-destructive",liquidation:"text-liquidation",unset:"[color:unset]"}}});function b({value:t,debt:i,decimals:x=3,zone:e,zoneType:s="color",approximate:q,className:v,..._}){const n=i!==void 0&&i===0n,f=!n&&s==="color",h=!n&&e&&s==="dot",F=!n&&e&&s==="bars",o=f?e===void 0?m(t):e:void 0,c=o===void 0?void 0:o===null?"unset":o,H=()=>{if(n)return"N/A";const A=Number(t);return u.formatPercentage(A,x)};return r.jsxs("span",{className:j.cn(N(c!==void 0?{zone:c}:{}),v),..._,children:[F&&r.jsx("span",{className:"mr-6 shrink-0",children:r.jsx(a.StatusBars,{zone:e})}),q&&!n?r.jsx("span",{className:"mr-0.5",children:O.APPROXIMATE_SYMBOL}):null,H(),h&&r.jsx("span",{className:"ml-1.5",children:r.jsx(a.HealthDot,{zone:e})})]})}exports.BAD_HF=d;exports.GOOD_HF=l;exports.HealthFactor=b;exports.getHFZones=m;

package/dist/esm/components/base/health-factor-block/health-factor-block.js

@@ -1,52 +1,67 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useTitleText as h } from "../text/use-title-text.js";
-import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
-import { HealthFactor as c } from "../../health-factor/health-factor.js";
-import { FormattedMessageTyped as n } from "../../typed-intl/index.js";
-import { VerticalIndicator as g } from "../../vertical-indicator/vertical-indicator.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTitleText as g } from "../text/use-title-text.js";
+import { FadeoutLoading as c } from "../../fadeout-loading/fadeout-loading.js";
+import { HealthFactor as m } from "../../health-factor/health-factor.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as x } from "../../vertical-indicator/vertical-indicator.js";
 import { HealthFactorBlockTest as t } from "./constants.js";
-function b({
-  healthFactor: e,
-  healthFactorTo: a,
-  debt: r,
-  debtTo: p,
-  zone: i,
-  isLoading: l,
+function N({
+  healthFactor: a,
+  healthFactorTo: i,
+  debt: l,
+  debtTo: u,
+  approximate: r,
+  zone: n,
+  isLoading: s,
   title: d,
-  tip: u,
-  testId: v
+  tip: v,
+  testId: f
 }) {
-  const f = h(), m = a !== void 0;
-  return /* @__PURE__ */ o(
-    g,
+  const h = g(), o = i !== void 0;
+  return /* @__PURE__ */ e(
+    x,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": v ?? t.root,
-      label: d !== void 0 ? f(d) : /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.label" }),
-      tip: u ?? /* @__PURE__ */ o(n, { messageId: "components.healthFactorBlock.tip" }),
-      value: /* @__PURE__ */ o(s, { loading: l, children: e === void 0 ? /* @__PURE__ */ o("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ o(
-        c,
+      "data-testid": f ?? t.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.label" }),
+      tip: v ?? /* @__PURE__ */ e(p, { messageId: "components.healthFactorBlock.tip" }),
+      value: /* @__PURE__ */ e(c, { loading: s, children: a === void 0 ? /* @__PURE__ */ e("span", { "data-testid": t.value, children: "—" }) : /* @__PURE__ */ e(
+        "span",
         {
-          value: e,
-          debt: r,
-          zone: m ? void 0 : i,
-          "data-testid": t.value
+          className: "inline-flex items-center",
+          "data-testid": t.value,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: a,
+              debt: l,
+              zone: o ? void 0 : n,
+              approximate: r && !o
+            }
+          )
         }
       ) }),
-      valueTo: m ? /* @__PURE__ */ o(s, { loading: l, children: /* @__PURE__ */ o(
-        c,
+      valueTo: o ? /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e(
+        "span",
         {
-          value: a,
-          debt: p ?? r,
-          zone: i,
-          "data-testid": t.valueTo
+          className: "inline-flex items-center",
+          "data-testid": t.valueTo,
+          children: /* @__PURE__ */ e(
+            m,
+            {
+              value: i,
+              debt: u ?? l,
+              zone: n,
+              approximate: r
+            }
+          )
         }
       ) }) : void 0
     }
   );
 }
 export {
-  b as HealthFactorBlock,
+  N as HealthFactorBlock,
   t as HealthFactorBlockTest
 };

package/dist/esm/components/base/liquidation-price-block/liquidation-price-block.js

@@ -2,12 +2,12 @@ import { jsx as i, jsxs as c, Fragment as T } from "react/jsx-runtime";
 import { useTitleText as b } from "../text/use-title-text.js";
 import { FadeoutLoading as u } from "../../fadeout-loading/fadeout-loading.js";
 import { FormattedNumberString as g } from "../../formatted-number/formatted-number.js";
-import { HealthDot as I } from "../../status-elements/status-elements.js";
-import { FormattedMessageTyped as f } from "../../typed-intl/index.js";
-import { VerticalIndicator as q } from "../../vertical-indicator/vertical-indicator.js";
-import { APPROXIMATE_SYMBOL as x } from "../../../utils/format.js";
+import { HealthDot as x } from "../../status-elements/status-elements.js";
+import { FormattedMessageTyped as p } from "../../typed-intl/index.js";
+import { VerticalIndicator as I } from "../../vertical-indicator/vertical-indicator.js";
+import { APPROXIMATE_SYMBOL as q } from "../../../utils/format.js";
 import { bnToLiquidationPriceView as B } from "../../../utils/parse-input-to-bn.js";
-import { LiquidationPriceBlockTest as l } from "./constants.js";
+import { LiquidationPriceBlockTest as n } from "./constants.js";
 function L(e, o) {
   if (!(!e || !o))
     return `${e.symbol} / ${o.symbol}`;
@@ -17,45 +17,45 @@ function S({
   priceTo: o,
   collateral: t,
   underlying: r,
-  approximate: n,
-  zone: a,
-  isLoading: m,
-  title: s,
+  approximate: a,
+  zone: m,
+  isLoading: s,
+  title: d,
   tip: v,
   testId: P
 }) {
-  const h = b(), d = o !== void 0;
+  const h = b(), l = o !== void 0;
   return /* @__PURE__ */ i(
-    q,
+    I,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": P ?? l.root,
-      label: s !== void 0 ? h(s) : /* @__PURE__ */ i(f, { messageId: "components.liquidationPriceBlock.label" }),
-      tip: v ?? /* @__PURE__ */ i(f, { messageId: "components.liquidationPriceBlock.tip" }),
-      value: /* @__PURE__ */ i(u, { loading: m, children: /* @__PURE__ */ i(
-        p,
+      "data-testid": P ?? n.root,
+      label: d !== void 0 ? h(d) : /* @__PURE__ */ i(p, { messageId: "components.liquidationPriceBlock.label" }),
+      tip: v ?? /* @__PURE__ */ i(p, { messageId: "components.liquidationPriceBlock.tip" }),
+      value: /* @__PURE__ */ i(u, { loading: s, children: /* @__PURE__ */ i(
+        f,
         {
           price: e,
-          approximate: n,
-          zone: d ? void 0 : a,
-          testId: l.value
+          approximate: a && !l,
+          zone: l ? void 0 : m,
+          testId: n.value
         }
       ) }),
-      valueTo: d ? /* @__PURE__ */ i(u, { loading: m, children: /* @__PURE__ */ i(
-        p,
+      valueTo: l ? /* @__PURE__ */ i(u, { loading: s, children: /* @__PURE__ */ i(
+        f,
         {
           price: o ?? null,
-          approximate: n,
-          zone: a,
-          testId: l.valueTo
+          approximate: a,
+          zone: m,
+          testId: n.valueTo
         }
       ) }) : void 0,
       valueDescription: L(t, r)
     }
   );
 }
-function p({
+function f({
   price: e,
   approximate: o,
   zone: t,
@@ -63,13 +63,13 @@ function p({
 }) {
   return /* @__PURE__ */ c("span", { className: "inline-flex items-center", "data-testid": r, children: [
     e === void 0 ? "—" : e === null || e === 0n ? "N/A" : /* @__PURE__ */ c(T, { children: [
-      o ? /* @__PURE__ */ i("span", { className: "mr-0.5", children: x }) : null,
+      o ? /* @__PURE__ */ i("span", { className: "mr-0.5", children: q }) : null,
       /* @__PURE__ */ i(g, { value: B(e) })
     ] }),
-    t ? /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(I, { zone: t }) }) : null
+    t ? /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(x, { zone: t }) }) : null
   ] });
 }
 export {
   S as LiquidationPriceBlock,
-  l as LiquidationPriceBlockTest
+  n as LiquidationPriceBlockTest
 };

package/dist/esm/components/base/time-to-liquidation-block/time-to-liquidation-block.js

@@ -4,44 +4,44 @@ import { FadeoutLoading as s } from "../../fadeout-loading/fadeout-loading.js";
 import { HealthDot as g } from "../../status-elements/status-elements.js";
 import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
 import { VerticalIndicator as L } from "../../vertical-indicator/vertical-indicator.js";
-import { APPROXIMATE_SYMBOL as I } from "../../../utils/format.js";
-import { ttlLeft as x, getTTLZones as B } from "../../../utils/ttl.js";
-import { TimeToLiquidationBlockTest as a } from "./constants.js";
+import { APPROXIMATE_SYMBOL as x } from "../../../utils/format.js";
+import { ttlLeft as I, getTTLZones as B } from "../../../utils/ttl.js";
+import { TimeToLiquidationBlockTest as d } from "./constants.js";
 function j({
   data: o,
   dataTo: n,
   approximate: r,
-  zone: l,
+  zone: a,
   isLoading: e,
   title: i,
-  tip: v,
-  testId: p
+  tip: p,
+  testId: v
 }) {
-  const T = h(), d = n !== void 0;
+  const T = h(), l = n !== void 0;
   return /* @__PURE__ */ t(
     L,
     {
       align: "center",
       dimPreviousValue: !1,
-      "data-testid": p ?? a.root,
+      "data-testid": v ?? d.root,
       label: i !== void 0 ? T(i) : /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.label" }),
-      tip: v ?? /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.tip" }),
+      tip: p ?? /* @__PURE__ */ t(u, { messageId: "components.timeToLiquidationBlock.tip" }),
       value: /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
         c,
         {
           milliseconds: o,
-          approximate: r,
-          zone: d ? void 0 : l,
-          testId: a.value
+          approximate: r && !l,
+          zone: l ? void 0 : a,
+          testId: d.value
         }
       ) }),
-      valueTo: d ? /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
+      valueTo: l ? /* @__PURE__ */ t(s, { loading: e, children: /* @__PURE__ */ t(
         c,
         {
           milliseconds: n ?? null,
           approximate: r,
-          zone: l,
-          testId: a.valueTo
+          zone: a,
+          testId: d.valueTo
         }
       ) }) : void 0
     }
@@ -51,12 +51,12 @@ function c({
   milliseconds: o,
   approximate: n,
   zone: r,
-  testId: l
+  testId: a
 }) {
-  const e = o == null ? void 0 : x(o), i = r ?? (o == null ? void 0 : B(o));
-  return /* @__PURE__ */ m("span", { className: "inline-flex items-center", "data-testid": l, children: [
+  const e = o == null ? void 0 : I(o), i = r ?? (o == null ? void 0 : B(o));
+  return /* @__PURE__ */ m("span", { className: "inline-flex items-center", "data-testid": a, children: [
     o === void 0 ? "—" : o === null ? "N/A" : /* @__PURE__ */ m(f, { children: [
-      n ? /* @__PURE__ */ t("span", { className: "mr-0.5", children: I }) : null,
+      n ? /* @__PURE__ */ t("span", { className: "mr-0.5", children: x }) : null,
       e?.months !== void 0 ? `${e.months}mo` : e?.day !== void 0 ? `${e.day}d` : "<1d"
     ] }),
     o != null && i ? /* @__PURE__ */ t("span", { className: "ml-1.5", children: /* @__PURE__ */ t(g, { zone: i }) }) : null
@@ -64,5 +64,5 @@ function c({
 }
 export {
   j as TimeToLiquidationBlock,
-  a as TimeToLiquidationBlockTest
+  d as TimeToLiquidationBlockTest
 };

package/dist/esm/components/health-factor/health-factor.js

@@ -1,16 +1,17 @@
-import { jsxs as x, jsx as i } from "react/jsx-runtime";
-import { PERCENTAGE_FACTOR as h, formatPercentage as C } from "@gearbox-protocol/sdk/onchain";
-import { cva as F } from "class-variance-authority";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { PERCENTAGE_FACTOR as A, formatPercentage as N } from "@gearbox-protocol/sdk/onchain";
+import { cva as C } from "class-variance-authority";
 import "react";
-import { cn as H } from "../../utils/cn.js";
+import { cn as F } from "../../utils/cn.js";
 import "sonner";
+import { APPROXIMATE_SYMBOL as H } from "../../utils/format.js";
 import "luxon";
 import "../../utils/z-index.js";
-import { StatusBars as N, HealthDot as g } from "../status-elements/status-elements.js";
-const A = 15e3, D = 11e3, b = 10500, w = (t) => {
+import { StatusBars as g, HealthDot as D } from "../status-elements/status-elements.js";
+const O = 15e3, _ = 11e3, b = 10500, w = (t) => {
   if (t)
-    return t >= A ? "good" : t > D ? "medium" : t > b ? "bad" : t > h ? "critical" : "liquidation";
-}, V = F(
+    return t >= O ? "good" : t > _ ? "medium" : t > b ? "bad" : t > A ? "critical" : "liquidation";
+}, B = C(
   "inline-flex items-center font-medium [text-decoration:inherit]",
   {
     variants: {
@@ -25,41 +26,43 @@ const A = 15e3, D = 11e3, b = 10500, w = (t) => {
     }
   }
 );
-function P({
+function S({
   value: t,
   debt: s,
   decimals: c = 3,
   zone: o,
-  zoneType: n = "color",
-  className: m,
+  zoneType: i = "color",
+  approximate: m,
+  className: l,
   ...u
 }) {
-  const r = s !== void 0 && s === 0n, d = !r && n === "color", l = !r && o && n === "dot", f = !r && o && n === "bars", e = d ? o === void 0 ? w(t) : o : void 0, a = e === void 0 ? void 0 : e === null ? "unset" : e, p = () => {
+  const r = s !== void 0 && s === 0n, d = !r && i === "color", f = !r && o && i === "dot", p = !r && o && i === "bars", e = d ? o === void 0 ? w(t) : o : void 0, a = e === void 0 ? void 0 : e === null ? "unset" : e, v = () => {
     if (r) return "N/A";
-    const v = Number(t);
-    return C(v, c);
+    const x = Number(t);
+    return N(x, c);
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ h(
     "span",
     {
-      className: H(
-        V(
+      className: F(
+        B(
           a !== void 0 ? { zone: a } : {}
         ),
-        m
+        l
       ),
       ...u,
       children: [
-        f && /* @__PURE__ */ i("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ i(N, { zone: o }) }),
-        p(),
-        l && /* @__PURE__ */ i("span", { className: "ml-1.5", children: /* @__PURE__ */ i(g, { zone: o }) })
+        p && /* @__PURE__ */ n("span", { className: "mr-6 shrink-0", children: /* @__PURE__ */ n(g, { zone: o }) }),
+        m && !r ? /* @__PURE__ */ n("span", { className: "mr-0.5", children: H }) : null,
+        v(),
+        f && /* @__PURE__ */ n("span", { className: "ml-1.5", children: /* @__PURE__ */ n(D, { zone: o }) })
       ]
     }
   );
 }
 export {
-  D as BAD_HF,
-  A as GOOD_HF,
-  P as HealthFactor,
+  _ as BAD_HF,
+  O as GOOD_HF,
+  S as HealthFactor,
   w as getHFZones
 };

package/dist/types/components/base/health-factor-block/health-factor-block.d.ts

@@ -13,6 +13,13 @@ export interface HealthFactorBlockProps {
     readonly debt: bigint;
     /** Debt after the operation (defaults to `debt`). */
     readonly debtTo?: bigint;
+    /**
+     * Marks the figure as projected rather than promised, with a leading `≈` in
+     * the factor's own colour. Only the projected side is marked: on a
+     * `from → to` row the "from" is where the account stands now, which is
+     * measured, not estimated.
+     */
+    readonly approximate?: boolean;
     /** Pre-computed zone; if not set, derived from the value. */
     readonly zone?: HFZones;
     readonly isLoading?: boolean;
@@ -26,4 +33,4 @@ export interface HealthFactorBlockProps {
  * "Health factor" row of a preview: label + help tip on the left, the zone-
  * colored HF (with optional from → to transition) on the right.
  */
-export declare function HealthFactorBlock({ healthFactor, healthFactorTo, debt, debtTo, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;
+export declare function HealthFactorBlock({ healthFactor, healthFactorTo, debt, debtTo, approximate, zone, isLoading, title, tip, testId, }: HealthFactorBlockProps): React.ReactElement;

package/dist/types/components/base/liquidation-price-block/liquidation-price-block.d.ts

@@ -17,10 +17,10 @@ export interface LiquidationPriceBlockProps {
     /** Underlying token of the quoted pair. */
     readonly underlying?: Token;
     /**
-     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}. For a projection the
-     * operation cannot promise exactly — a routed leg the market can move under.
-     * Both columns are marked when the row renders `from → to`: the "from" of a
-     * projected pair is projected too.
+     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}, for a value the
+     * operation projects rather than promises. Only the projected side is
+     * marked: on a `from → to` row the "from" is where the account stands now,
+     * which is measured, not estimated.
      */
     readonly approximate?: boolean;
     /** Zone dot next to the price. */

package/dist/types/components/base/time-to-liquidation-block/time-to-liquidation-block.d.ts

@@ -12,10 +12,10 @@ export interface TimeToLiquidationBlockProps {
     /** Time after the operation; renders a from → to transition. */
     readonly dataTo?: bigint | null;
     /**
-     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}. For a projection the
-     * operation cannot promise exactly — a routed leg the market can move under.
-     * Both columns are marked when the row renders `from → to`: the "from" of a
-     * projected pair is projected too.
+     * Prefixes the figure with {@link APPROXIMATE_SYMBOL}, for a value the
+     * operation projects rather than promises. Only the projected side is
+     * marked: on a `from → to` row the "from" is where the account stands now,
+     * which is measured, not estimated.
      */
     readonly approximate?: boolean;
     /** Pre-computed zone; if not set, derived from the value. */

package/dist/types/components/health-factor/health-factor.d.ts

@@ -23,6 +23,15 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
      * @default "color"
      */
     zoneType?: "color" | "bars" | "dot";
+    /**
+     * Marks the figure as projected rather than measured, with a leading `≈`.
+     *
+     * Drawn here, inside the zone-colored span, because the symbol belongs to the
+     * number: a caller placing it beside this component leaves it uncolored while
+     * the value it qualifies is red. Suppressed on a zero debt, where there is no
+     * factor to approximate — only "N/A".
+     */
+    approximate?: boolean;
 }
 /**
  * HealthFactor — primitive under {@link HealthFactorBlock} (zones / bars / dot).
@@ -41,4 +50,4 @@ export interface HealthFactorProps extends React.HTMLAttributes<HTMLSpanElement>
  * <HealthFactor value={15000} debt={0n} />  // "N/A"
  * ```
  */
-export declare function HealthFactor({ value, debt, decimals, zone, zoneType, className, ...props }: HealthFactorProps): React.JSX.Element;
+export declare function HealthFactor({ value, debt, decimals, zone, zoneType, approximate, className, ...props }: HealthFactorProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.46",
+  "version": "4.0.0-next.48",
   "description": "Internal UI components",
   "repository": {
     "type": "git",