@gearbox-protocol/ui-kit 3.11.2 → 3.12.0-next.1

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

@@ -1,43 +1,81 @@
 import { OracleComponent as r } from "./oracles-and-lt-table/oracle-component.js";
 import { OraclesAndLTLineView as a } from "./oracles-and-lt-table/oracles-and-lt-line-view.js";
 import { OraclesAndLTTableView as m } from "./oracles-and-lt-table/oracles-and-lt-table.js";
-import { OraclesAndLTTableHead as p } from "./oracles-and-lt-table/oracles-and-lt-table-head.js";
-import { OraclesList as f, getPriceFeedInfo as C } from "./oracles-and-lt-table/oracles-list.js";
-import { PoolAssetsTable as u } from "./pool-assets-table/pool-assets-table.js";
-import { PoolAssetsTableHead as i } from "./pool-assets-table/pool-assets-table-head.js";
-import { PoolAssetsTableRow as T } from "./pool-assets-table/pool-assets-table-row.js";
-import { overflowContainerClassName as c, overflowWrapClassName as w } from "./pool-credit-manager-info/overflow-layout.js";
-import { PoolCreditManagerInfo as g } from "./pool-credit-manager-info/pool-credit-manager-info.js";
-import { PoolCreditManagersTable as O } from "./pool-credit-managers-table/pool-credit-managers-table.js";
-import { PoolCreditManagersTableHead as M } from "./pool-credit-managers-table/pool-credit-managers-table-head.js";
-import { PoolCreditManagersTableRow as N } from "./pool-credit-managers-table/pool-credit-managers-table-row.js";
-import { balanceColumn as I, borrowApyColumn as R, borrowedColumn as V, collateralColumn as z, customColumn as F, defaultPoolName as W, poolColumn as h, supplyApyColumn as j, supplyColumn as k, utilizationColumn as q } from "./pool-table/columns.js";
-import { PoolTable as D } from "./pool-table/pool-table.js";
+import { OraclesAndLTTableHead as s } from "./oracles-and-lt-table/oracles-and-lt-table-head.js";
+import { OraclesList as f, getPriceFeedInfo as i } from "./oracles-and-lt-table/oracles-list.js";
+import { PoolAssetsTable as x } from "./pool-assets-table/pool-assets-table.js";
+import { PoolAssetsTableHead as C } from "./pool-assets-table/pool-assets-table-head.js";
+import { PoolAssetsTableRow as P } from "./pool-assets-table/pool-assets-table-row.js";
+import { overflowContainerClassName as w, overflowWrapClassName as g } from "./pool-credit-manager-info/overflow-layout.js";
+import { PoolCreditManagerInfo as A } from "./pool-credit-manager-info/pool-credit-manager-info.js";
+import { PoolCreditManagersTable as F } from "./pool-credit-managers-table/pool-credit-managers-table.js";
+import { PoolCreditManagersTableHead as L } from "./pool-credit-managers-table/pool-credit-managers-table-head.js";
+import { PoolCreditManagersTableRow as O } from "./pool-credit-managers-table/pool-credit-managers-table-row.js";
+import { balanceColumn as H, borrowApyColumn as M, borrowedColumn as N, collateralColumn as V, customColumn as W, defaultPoolName as I, poolColumn as Y, supplyApyColumn as z, supplyColumn as D, utilizationColumn as G } from "./pool-table/columns.js";
+import { PoolTable as h } from "./pool-table/pool-table.js";
+import { customStrategyColumn as k, strategyColumn as q, strategyLeverageColumn as B, strategyRewardsColumn as E } from "./strategies-table/columns.js";
+import { APYFeature as K, APYFeatureTooltip as Q } from "./strategies-table/components/apy-feature/apy-feature.js";
+import { RWAFeature as X, StrategiesRewardsCell as _, StrategyPoints as $, ZeroSlippageFeature as oo } from "./strategies-table/components/cells/cells.js";
+import { DisabledWrap as ro, Plus as to, TitleGrid as ao } from "./strategies-table/components/cells/cells.styles.js";
+import { Feature as mo } from "./strategies-table/components/feature/feature.js";
+import { FeatureRoot as so } from "./strategies-table/components/feature/feature.styles.js";
+import { StrategiesTableNotFoundLine as fo } from "./strategies-table/components/not-found-line.js";
+import { PointsFeature as uo, PointsFeatureTooltip as xo, PointsLabel as Co } from "./strategies-table/components/points-feature/points-feature.js";
+import { RewardsTooltip as Po, RewardsTooltipHover as bo } from "./strategies-table/components/rewards-tooltip/rewards-tooltip.js";
+import { RewardsTooltipRoot as go } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-root.js";
+import { RewardsTooltipView as Ao } from "./strategies-table/components/rewards-tooltip/rewards-tooltip-view.js";
+import { RewardsTooltipContent as Fo } from "./strategies-table/components/rewards-tooltip/tooltip-content.js";
+import { StrategiesTable as Lo } from "./strategies-table/components/strategies-table.js";
 export {
+  K as APYFeature,
+  Q as APYFeatureTooltip,
+  ro as DisabledWrap,
+  mo as Feature,
+  so as FeatureRoot,
   r as OracleComponent,
   a as OraclesAndLTLineView,
-  p as OraclesAndLTTableHead,
+  s as OraclesAndLTTableHead,
   m as OraclesAndLTTableView,
   f as OraclesList,
-  u as PoolAssetsTable,
-  i as PoolAssetsTableHead,
-  T as PoolAssetsTableRow,
-  g as PoolCreditManagerInfo,
-  O as PoolCreditManagersTable,
-  M as PoolCreditManagersTableHead,
-  N as PoolCreditManagersTableRow,
-  D as PoolTable,
-  I as balanceColumn,
-  R as borrowApyColumn,
-  V as borrowedColumn,
-  z as collateralColumn,
-  F as customColumn,
-  W as defaultPoolName,
-  C as getPriceFeedInfo,
-  c as overflowContainerClassName,
-  w as overflowWrapClassName,
-  h as poolColumn,
-  j as supplyApyColumn,
-  k as supplyColumn,
-  q as utilizationColumn
+  to as Plus,
+  uo as PointsFeature,
+  xo as PointsFeatureTooltip,
+  Co as PointsLabel,
+  x as PoolAssetsTable,
+  C as PoolAssetsTableHead,
+  P as PoolAssetsTableRow,
+  A as PoolCreditManagerInfo,
+  F as PoolCreditManagersTable,
+  L as PoolCreditManagersTableHead,
+  O as PoolCreditManagersTableRow,
+  h as PoolTable,
+  X as RWAFeature,
+  Po as RewardsTooltip,
+  Fo as RewardsTooltipContent,
+  bo as RewardsTooltipHover,
+  go as RewardsTooltipRoot,
+  Ao as RewardsTooltipView,
+  _ as StrategiesRewardsCell,
+  Lo as StrategiesTable,
+  fo as StrategiesTableNotFoundLine,
+  $ as StrategyPoints,
+  ao as TitleGrid,
+  oo as ZeroSlippageFeature,
+  H as balanceColumn,
+  M as borrowApyColumn,
+  N as borrowedColumn,
+  V as collateralColumn,
+  W as customColumn,
+  k as customStrategyColumn,
+  I as defaultPoolName,
+  i as getPriceFeedInfo,
+  w as overflowContainerClassName,
+  g as overflowWrapClassName,
+  Y as poolColumn,
+  q as strategyColumn,
+  B as strategyLeverageColumn,
+  E as strategyRewardsColumn,
+  z as supplyApyColumn,
+  D as supplyColumn,
+  G as utilizationColumn
 };

package/dist/esm/components/composites/strategies-table/columns.js

@@ -0,0 +1,176 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { formatLeverage as w } from "@gearbox-protocol/sdk";
+import { NetworkIcon as b } from "../../network-icon/network-icon.js";
+import { ShortString as T } from "../../short-string/short-string.js";
+import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
+import { FormattedMessageTyped as c } from "../../typed-intl/index.js";
+import { Typography as k } from "../../typography/typography.js";
+import { RWAFeature as R, ZeroSlippageFeature as v, StrategiesRewardsCell as x } from "./components/cells/cells.js";
+import { TitleGrid as S, DisabledWrap as h } from "./components/cells/cells.styles.js";
+import { RewardsTooltip as C } from "./components/rewards-tooltip/rewards-tooltip.js";
+import "./components/rewards-tooltip/rewards-tooltip-root.js";
+import "../../tooltip/simple-tooltip.js";
+import "../../tooltip/tooltip.js";
+import "@fortawesome/free-solid-svg-icons";
+import "viem";
+import "../../icon-button/icon-button.js";
+import "../../icons/fa-icon.js";
+import "../../separate-line/separate-line.js";
+import "../../skeleton/skeleton.js";
+import "react";
+import "clsx";
+import "tailwind-merge";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../utils/z-index.js";
+import "../../tip-card/tip-card.js";
+import "../../vertical-indicator/vertical-indicator.js";
+import "../../vertical-list/vertical-list.js";
+import "../../help-tip/help-tip.js";
+import "./components/feature/feature.styles.js";
+import "../../points-icon/points-icon.js";
+function p(e, i, r) {
+  const a = e?.header ?? /* @__PURE__ */ t(
+    c,
+    {
+      messageId: e?.headerMessageId ?? i
+    }
+  );
+  let o;
+  if (e?.headerTip !== null) {
+    const d = e?.headerTipMessageId ?? r;
+    o = e?.headerTip ?? (d && /* @__PURE__ */ t(c, { messageId: d }));
+  }
+  return { header: a, headerTip: o, mobileTitle: e?.mobileTitle ?? a };
+}
+function L({ ctx: e }) {
+  const { strategy: i, targetToken: r, targetTokenAddress: a, tokensList: o, row: d } = e, s = !!d.disabledStyle, l = !!d.zeroSlippageTokens?.[a], n = !!i.strategyMarketType?.includes("rwa"), g = d.delayedConfigs?.[0]?.withdrawalPhantomToken, u = e.isMobile || e.isDesktop ? 38 : 26;
+  return /* @__PURE__ */ t("div", { className: "flex flex-col-auto", children: /* @__PURE__ */ m(S, { children: [
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-1.5 pr-2 leading-none", children: [
+      /* @__PURE__ */ t(h, { disabled: s, children: /* @__PURE__ */ t(
+        b,
+        {
+          network: i.network,
+          isTest: !1,
+          size: 14,
+          showTooltip: !0
+        }
+      ) }),
+      /* @__PURE__ */ t(h, { disabled: s, children: /* @__PURE__ */ t(y, { token: r, size: 24 }) })
+    ] }),
+    /* @__PURE__ */ m("div", { className: "flex items-center gap-x-3", children: [
+      /* @__PURE__ */ t(T, { maxLength: u, children: i.name }),
+      n && /* @__PURE__ */ t(R, { disabledStyle: s }),
+      l && /* @__PURE__ */ t(
+        v,
+        {
+          token: g ? o?.[g] : void 0,
+          disabledStyle: s
+        }
+      )
+    ] }),
+    s && /* @__PURE__ */ t("div", {}),
+    s && /* @__PURE__ */ t(
+      k,
+      {
+        as: "span",
+        variant: "caption",
+        style: { lineHeight: "100%" },
+        children: /* @__PURE__ */ t(c, { messageId: "components.strategiesTable.line.name.disabled" })
+      }
+    )
+  ] }) });
+}
+function f({
+  ctx: e,
+  mobile: i = !1
+}) {
+  const { rewardsCellInfo: r, row: a, targetTokenAddress: o, tokensList: d } = e, s = !!a.disabledStyle, l = /* @__PURE__ */ t(
+    x,
+    {
+      maxAPY: r.maxAPY,
+      bonusAPY: r.bonusAPY,
+      rewards: r.rewards,
+      rewardRates: r.rewardRates,
+      debtRewards: r.debtRewards,
+      debtRewardRates: r.debtRewardRates,
+      hasAPY: r.hasAPY ?? !1,
+      hasRewards: r.hasRewards ?? !1,
+      hasDebtRewards: r.hasDebtRewards ?? !1,
+      apyLoading: r.apyLoading,
+      disabledStyle: s
+    }
+  ), n = i ? /* @__PURE__ */ t("div", { className: "pt-1", children: l }) : l;
+  return s ? n : /* @__PURE__ */ t(
+    C,
+    {
+      cellInfo: r,
+      targetToken: o,
+      apyList: a.apyList,
+      tokensList: d,
+      strategyCreditManagers: a.strategyCreditManagers,
+      children: /* @__PURE__ */ t("div", { children: n })
+    }
+  );
+}
+function de(e) {
+  const { header: i, mobileTitle: r } = p(
+    e,
+    "components.strategiesTable.head.name"
+  );
+  return {
+    id: "strategy",
+    header: i,
+    width: e?.width ?? "1fr",
+    mediumWidth: e?.mediumWidth,
+    align: "left",
+    className: "pl-4",
+    sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "strategyName", defaultDirection: "desc" },
+    cell: (a) => /* @__PURE__ */ t(L, { ctx: a }),
+    mobileTitle: r
+  };
+}
+function oe(e) {
+  const { header: i, mobileTitle: r } = p(
+    e,
+    "components.strategiesTable.head.rewards"
+  );
+  return {
+    id: "rewards",
+    header: i,
+    width: e?.width ?? "310px",
+    mediumWidth: e?.mediumWidth ?? "270px",
+    align: "left",
+    sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
+    cell: (a) => /* @__PURE__ */ t(f, { ctx: a }),
+    mobileCell: (a) => /* @__PURE__ */ t(f, { ctx: a, mobile: !0 }),
+    mobileTitle: r
+  };
+}
+function le(e) {
+  const { header: i, mobileTitle: r } = p(
+    e,
+    "components.strategiesTable.head.leverage"
+  );
+  return {
+    id: "leverage",
+    header: i,
+    width: e?.width ?? "150px",
+    mediumWidth: e?.mediumWidth ?? "76px",
+    align: "right",
+    className: "pr-4",
+    headerClassName: "pr-4",
+    cell: (a) => `×${w(Number(a.row.maxLeverage), 0)}`,
+    mobileTitle: r
+  };
+}
+function ne(e) {
+  return e;
+}
+export {
+  ne as customStrategyColumn,
+  de as strategyColumn,
+  le as strategyLeverageColumn,
+  oe as strategyRewardsColumn
+};

package/dist/esm/components/composites/strategies-table/components/apy-feature/apy-feature.js

@@ -0,0 +1,39 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Typography as i } from "../../../../typography/typography.js";
+import { Feature as p } from "../feature/feature.js";
+import "../feature/feature.styles.js";
+function s({
+  theme: r = "light",
+  children: t
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      theme: r,
+      padding: "4px 10px",
+      title: /* @__PURE__ */ a(i, { as: "span", variant: "bodySmall", children: t })
+    }
+  );
+}
+function u({
+  theme: r = "dark",
+  title: t = "APR",
+  value: n,
+  tip: o
+}) {
+  return /* @__PURE__ */ a(
+    p,
+    {
+      theme: r,
+      size: "md",
+      padding: "4px 10px",
+      title: /* @__PURE__ */ a(i, { as: "span", variant: "bodySmall", children: t }),
+      value: /* @__PURE__ */ a(i, { as: "span", variant: "bodySmall", children: n }),
+      tip: o
+    }
+  );
+}
+export {
+  s as APYFeature,
+  u as APYFeatureTooltip
+};

package/dist/esm/components/composites/strategies-table/components/apy-feature/index.js

@@ -0,0 +1,5 @@
+import { APYFeature as r, APYFeatureTooltip as t } from "./apy-feature.js";
+export {
+  r as APYFeature,
+  t as APYFeatureTooltip
+};

package/dist/esm/components/composites/strategies-table/components/cells/cells.js

@@ -0,0 +1,168 @@
+import { jsx as e, Fragment as N, jsxs as x } from "react/jsx-runtime";
+import { formatPercentage as c } from "@gearbox-protocol/sdk";
+import { RWA_GRADIENT_BORDER_CLASS as S } from "../../../../rwa-styles/index.js";
+import { Skeleton as P } from "../../../../skeleton/skeleton.js";
+import "react";
+import { cn as R } from "../../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../../utils/z-index.js";
+import { SimpleTooltip as F } from "../../../../tooltip/simple-tooltip.js";
+import "../../../../tooltip/tooltip.js";
+import { FormattedMessageTyped as m } from "../../../../typed-intl/index.js";
+import { APYFeature as b } from "../apy-feature/apy-feature.js";
+import { PointsFeature as T } from "../points-feature/points-feature.js";
+import { Plus as v, DisabledWrap as L } from "./cells.styles.js";
+function K({
+  token: n,
+  disabledStyle: r
+}) {
+  const s = () => /* @__PURE__ */ e("span", { className: R(r && "opacity-60 pointer-events-none"), children: /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(m, { messageId: "components.strategiesTable.line.0slippage" }) }) });
+  return /* @__PURE__ */ e(N, { children: r ? s() : /* @__PURE__ */ e(
+    F,
+    {
+      placement: "top",
+      triangle: !1,
+      title: s(),
+      children: /* @__PURE__ */ e(
+        m,
+        {
+          messageId: "components.strategiesTable.line.0slippage.tip",
+          values: {
+            symbol: n?.title || "this token"
+          }
+        }
+      )
+    }
+  ) });
+}
+function Q({ disabledStyle: n }) {
+  const r = /* @__PURE__ */ e(
+    "span",
+    {
+      className: R(
+        "rounded-xl px-[10px] py-1 text-xs leading-none",
+        S,
+        n && "opacity-60 pointer-events-none"
+      ),
+      children: /* @__PURE__ */ e(m, { messageId: "components.strategiesTable.line.rwa" })
+    }
+  );
+  return /* @__PURE__ */ e(N, { children: n ? r : /* @__PURE__ */ e(F, { placement: "top", triangle: !1, title: r, children: /* @__PURE__ */ e(m, { messageId: "components.strategiesTable.line.rwa.tip" }) }) });
+}
+function U({
+  maxAPY: n,
+  bonusAPY: r,
+  rewards: s,
+  rewardRates: d,
+  debtRewards: u,
+  debtRewardRates: f,
+  hasAPY: a,
+  hasRewards: l,
+  hasDebtRewards: g,
+  disabledStyle: p,
+  apyLoading: h,
+  apyFormat: t = "feature"
+}) {
+  const i = (o) => t === "feature" ? /* @__PURE__ */ x(b, { children: [
+    c(o),
+    "% APR"
+  ] }) : `${c(o)}%`, I = (o) => t === "feature" ? /* @__PURE__ */ x(b, { children: [
+    "exp. ",
+    c(o),
+    "% APR"
+  ] }) : `exp. ${c(o)}%`;
+  return /* @__PURE__ */ x("div", { className: "flex-row-row items-center gap-2", children: [
+    (() => {
+      const o = [
+        a ? /* @__PURE__ */ e(
+          P,
+          {
+            className: "inline-block align-text-bottom",
+            width: 50,
+            loading: h,
+            children: i(n)
+          },
+          "apy"
+        ) : void 0,
+        l || g ? /* @__PURE__ */ e(
+          j,
+          {
+            rewards: s,
+            rewardRates: d,
+            debtRewards: u,
+            debtRewardRates: f,
+            hasRewards: l,
+            hasDebtRewards: g,
+            disabledStyle: p
+          },
+          "points"
+        ) : void 0
+      ].filter(Boolean);
+      return o.flatMap((w, A) => A === o.length - 1 ? [w] : [w, /* @__PURE__ */ e(v, { children: "+" }, `plus-${A}`)]);
+    })(),
+    r && /* @__PURE__ */ e(v, { children: ":" }),
+    r && /* @__PURE__ */ e(
+      P,
+      {
+        className: "inline-block align-text-bottom",
+        loading: h,
+        width: 50,
+        children: I(r.value)
+      }
+    )
+  ] });
+}
+function j({
+  rewards: n,
+  rewardRates: r,
+  debtRewards: s,
+  debtRewardRates: d,
+  hasRewards: u,
+  hasDebtRewards: f,
+  disabledStyle: a,
+  theme: l
+}) {
+  return (() => {
+    const p = [
+      u ? n.map((t, i) => /* @__PURE__ */ e(
+        "span",
+        {
+          children: /* @__PURE__ */ e(L, { disabled: a, children: /* @__PURE__ */ e(
+            T,
+            {
+              reward: t,
+              points: r?.[i] || 0n,
+              theme: l
+            }
+          ) })
+        },
+        ["base", t.multiplier, t.name, t.type, t.units].join("-")
+      )) : void 0,
+      f ? s.map((t, i) => /* @__PURE__ */ e(
+        "span",
+        {
+          children: /* @__PURE__ */ e(L, { disabled: a, children: /* @__PURE__ */ e(
+            T,
+            {
+              reward: t,
+              points: d?.[i] || 0n,
+              theme: l
+            }
+          ) })
+        },
+        ["debt", t.multiplier, t.name, t.type, t.units, t.cm].join(
+          "-"
+        )
+      )) : void 0
+    ].filter(Boolean);
+    return p.flatMap((t, i) => i === p.length - 1 ? [t] : [t, /* @__PURE__ */ e(v, { children: "+" }, `plus-points-${i}`)]);
+  })();
+}
+export {
+  Q as RWAFeature,
+  U as StrategiesRewardsCell,
+  j as StrategyPoints,
+  K as ZeroSlippageFeature
+};

package/dist/esm/components/composites/strategies-table/components/cells/cells.styles.js

@@ -0,0 +1,46 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as o } from "../../../../../utils/cn.js";
+const r = ({
+  disabled: a,
+  className: e,
+  ...s
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: o(
+      "leading-none",
+      a && "opacity-40 pointer-events-none",
+      e
+    ),
+    ...s
+  }
+), c = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ t(
+  "span",
+  {
+    className: o(
+      "text-gray-90 text-base leading-[100%] font-normal",
+      a
+    ),
+    ...e
+  }
+), l = ({
+  className: a,
+  ...e
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: o(
+      "grid grid-cols-[auto_auto] items-center gap-x-0 gap-y-0.5",
+      a
+    ),
+    ...e
+  }
+);
+export {
+  r as DisabledWrap,
+  c as Plus,
+  l as TitleGrid
+};

package/dist/esm/components/composites/strategies-table/components/cells/index.js

@@ -0,0 +1,11 @@
+import { RWAFeature as t, StrategiesRewardsCell as a, StrategyPoints as i, ZeroSlippageFeature as l } from "./cells.js";
+import { DisabledWrap as p, Plus as s, TitleGrid as d } from "./cells.styles.js";
+export {
+  p as DisabledWrap,
+  s as Plus,
+  t as RWAFeature,
+  a as StrategiesRewardsCell,
+  i as StrategyPoints,
+  d as TitleGrid,
+  l as ZeroSlippageFeature
+};

package/dist/esm/components/composites/strategies-table/components/feature/feature.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { HelpTip as l } from "../../../../help-tip/help-tip.js";
+import { FeatureRoot as t } from "./feature.styles.js";
+function g({
+  title: n,
+  value: r,
+  tip: i,
+  theme: a = "dark",
+  size: c = "sm",
+  padding: d
+}) {
+  return /* @__PURE__ */ e(t, { theme: a, size: c, padding: d, children: [
+    /* @__PURE__ */ o("div", { children: n }),
+    r && /* @__PURE__ */ o("div", { className: "font-semibold", children: i ? /* @__PURE__ */ o(m, { value: r, theme: a, tip: i }) : r })
+  ] });
+}
+function m({
+  value: n,
+  tip: r,
+  theme: i = "dark"
+}) {
+  return /* @__PURE__ */ e("div", { className: "inline-flex gap-2", children: [
+    n,
+    /* @__PURE__ */ o(
+      l,
+      {
+        placement: "top",
+        iconColor: i === "dark" ? "gray-40" : "gray-80",
+        iconHoverColor: i === "dark" ? "gray-70" : "gray-100",
+        iconVariant: "info",
+        iconSize: 16,
+        children: r
+      }
+    )
+  ] });
+}
+export {
+  g as Feature
+};

package/dist/esm/components/composites/strategies-table/components/feature/feature.styles.js

@@ -0,0 +1,43 @@
+import { jsx as s } from "react/jsx-runtime";
+import { cva as p } from "class-variance-authority";
+import * as n from "react";
+import "@gearbox-protocol/sdk";
+import { cn as d } from "../../../../../utils/cn.js";
+import "sonner";
+import "@gearbox-protocol/sdk/common-utils";
+import "luxon";
+import "../../../../../utils/z-index.js";
+const f = p(
+  "relative inline-flex items-center gap-2 text-foreground",
+  {
+    variants: {
+      theme: {
+        empty: "border border-gray-40 bg-transparent",
+        light: "bg-gray-40",
+        dark: "bg-gray-10"
+      },
+      size: {
+        sm: "h-6 rounded-xl",
+        md: "h-[30px] rounded-2xl"
+      }
+    },
+    defaultVariants: {
+      theme: "dark",
+      size: "sm"
+    }
+  }
+), l = n.forwardRef(
+  ({ theme: e, size: o, padding: r, className: a, style: t, ...m }, i) => /* @__PURE__ */ s(
+    "div",
+    {
+      ref: i,
+      className: d(f({ theme: e, size: o }), a),
+      style: r ? { ...t, padding: r } : t,
+      ...m
+    }
+  )
+);
+l.displayName = "FeatureRoot";
+export {
+  l as FeatureRoot
+};

package/dist/esm/components/composites/strategies-table/components/feature/index.js

@@ -0,0 +1,6 @@
+import { Feature as r } from "./feature.js";
+import { FeatureRoot as a } from "./feature.styles.js";
+export {
+  r as Feature,
+  a as FeatureRoot
+};