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

package/dist/esm/components/legal-agreement/legal-agreement.stories-config.js

@@ -0,0 +1,170 @@
+import { jsxs as r, Fragment as i, jsx as d } from "react/jsx-runtime";
+import { LegalAgreementLink as l } from "./legal-agreement-link.js";
+const t = {
+  termsOfService: "https://gearbox.finance/terms",
+  privacyNotice: "https://gearbox.finance/privacy",
+  riskDisclosure: "https://gearbox.finance/risks",
+  rwaMarketsTerms: "https://gearbox.finance/rwa-tc"
+}, n = "Example App";
+function c(a, e, s) {
+  return /* @__PURE__ */ d(l, { href: e, theme: a, children: s });
+}
+function m(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "Any use of and/or interaction with the ",
+      n,
+      " is subject to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      ", and acceptance of risks described in the",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "consent",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and acknowledge the ",
+          e(t.privacyNotice, "Privacy Notice"),
+          ". I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          " and I voluntarily assume all risks described in it."
+        ] })
+      }
+    ]
+  };
+}
+function h(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "By accessing or using ",
+      n,
+      ", I agree to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and confirm that I have read and understood the",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      " and",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    updatedTermsNoticeText: /* @__PURE__ */ r(i, { children: [
+      "Our Terms of Service have been updated. Please review and sign the new agreement to continue using ",
+      n,
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "terms",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and acknowledge the ",
+          e(t.privacyNotice, "Privacy Notice"),
+          "."
+        ] })
+      },
+      {
+        id: "prohibited",
+        content: "I represent and confirm that I am not a Prohibited Person (as defined in the above Terms of Service) and am not acting on behalf of one."
+      },
+      {
+        id: "risks",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I acknowledge that the ",
+          n,
+          ", related software, and smart contracts are experimental and may contain errors or vulnerabilities. I understand that their use may result in the complete loss of my funds. I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          " and I voluntarily assume all risks described in it."
+        ] })
+      }
+    ]
+  };
+}
+function f(a = "default") {
+  const e = (s, o) => c(a, s, o);
+  return {
+    productName: n,
+    notificationText: /* @__PURE__ */ r(i, { children: [
+      "By accessing or using ",
+      n,
+      ", I agree to the",
+      " ",
+      e(t.termsOfService, "Terms of Service"),
+      " and",
+      " ",
+      e(
+        t.rwaMarketsTerms,
+        "RWA Markets Interface Terms & Conditions"
+      ),
+      ", and confirm that I have read and understood the",
+      " ",
+      e(t.privacyNotice, "Privacy Notice"),
+      " and",
+      " ",
+      e(t.riskDisclosure, "Risk Disclosure Statement"),
+      "."
+    ] }),
+    checkboxItems: [
+      {
+        id: "terms",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I agree to the",
+          " ",
+          e(t.termsOfService, "Terms of Service"),
+          " and",
+          " ",
+          e(
+            t.rwaMarketsTerms,
+            "RWA Markets Interface Terms & Conditions"
+          ),
+          ", and acknowledge the",
+          " ",
+          e(t.privacyNotice, "Privacy Notice"),
+          "."
+        ] })
+      },
+      {
+        id: "prohibited",
+        content: "I represent and confirm that I am not a Prohibited Person (as defined in the above Terms of Service) and am not acting on behalf of one."
+      },
+      {
+        id: "risks",
+        content: /* @__PURE__ */ r(i, { children: [
+          "I acknowledge that the ",
+          n,
+          ", RWA Markets Interface, related software, and smart contracts are experimental and may contain errors or vulnerabilities. I understand that their use may result in the complete loss of my funds. I have read the",
+          " ",
+          e(t.riskDisclosure, "Risk Disclosure Statement"),
+          ", and I voluntarily assume all risks described in it and the above RWA Markets Interface Terms & Conditions."
+        ] })
+      }
+    ]
+  };
+}
+const k = m(), g = h(), p = f();
+export {
+  h as createStoryExtendedLegalConfig,
+  m as createStoryPermissionlessLegalConfig,
+  f as createStoryRwaLegalConfig,
+  g as storyExtendedLegalConfig,
+  k as storyPermissionlessLegalConfig,
+  p as storyRwaLegalConfig
+};

package/dist/esm/components/link/link.js

@@ -1,15 +1,15 @@
-import { jsx as r, jsxs as e, Fragment as f } from "react/jsx-runtime";
-import { IconExternal as t } from "@gearbox-protocol/static";
-import { cva as w } from "class-variance-authority";
-import { BaseLink as u } from "../base-link/base-link.js";
+import { jsxs as o, jsx as r, Fragment as g } from "react/jsx-runtime";
+import { IconExternal as x } from "@gearbox-protocol/static";
+import { cva as b } from "class-variance-authority";
+import { BaseLink as N } from "../base-link/base-link.js";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as _ } from "../../utils/cn.js";
+import { cn as h } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const g = w(
+const v = b(
   "[&_.icon-wrap]:-mt-px [&_.icon-wrap]:pl-1.5 [&_.icon-wrap]:leading-none [&_.icon-wrap]:text-secondary-foreground hover:[&_.icon-wrap]:text-foreground",
   {
     variants: {
@@ -22,40 +22,47 @@ const g = w(
     defaultVariants: { variant: "default" }
   }
 );
-function x({
-  className: p,
-  children: a,
-  href: i,
-  target: s,
-  variant: o = "default",
-  size: c = "default",
-  color: m = "main",
-  external: n = !1,
-  asChild: d = !1,
-  ...l
+function k({
+  className: i,
+  children: n,
+  href: c,
+  target: m,
+  variant: e = "default",
+  size: l = "default",
+  color: d = "main",
+  external: a = !1,
+  asChild: f = !1,
+  ...w
 }) {
+  const p = a ? /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(x, { size: 14 }) }) : null, s = a && typeof n == "string" ? (() => {
+    const t = n.trimEnd().lastIndexOf(" "), u = t === -1 ? "" : n.slice(0, t + 1), _ = t === -1 ? n : n.slice(t + 1);
+    return /* @__PURE__ */ o("span", { className: "content-wrap", children: [
+      u,
+      /* @__PURE__ */ o("span", { className: "whitespace-nowrap", children: [
+        _,
+        p
+      ] })
+    ] });
+  })() : /* @__PURE__ */ o(g, { children: [
+    /* @__PURE__ */ r("span", { className: "content-wrap", children: n }),
+    p
+  ] });
   return /* @__PURE__ */ r(
-    u,
+    N,
     {
-      href: i,
-      target: s,
-      external: n,
-      variant: o,
-      size: c,
-      color: m,
-      className: _(g({ variant: o }), p),
-      ...l,
-      children: d ? /* @__PURE__ */ e("span", { children: [
-        /* @__PURE__ */ r("span", { className: "content-wrap", children: a }),
-        n && /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(t, { size: 14 }) })
-      ] }) : /* @__PURE__ */ e(f, { children: [
-        /* @__PURE__ */ r("span", { className: "content-wrap", children: a }),
-        n && /* @__PURE__ */ r("span", { className: "icon-wrap -mt-px pl-1.5 leading-none", children: /* @__PURE__ */ r(t, { size: 14 }) })
-      ] })
+      href: c,
+      target: m,
+      external: a,
+      variant: e,
+      size: l,
+      color: d,
+      className: h(v({ variant: e }), i),
+      ...w,
+      children: f ? /* @__PURE__ */ r("span", { children: s }) : s
     }
   );
 }
-x.displayName = "Link";
+k.displayName = "Link";
 export {
-  x as Link
+  k as Link
 };

package/dist/esm/components/loader-guard/loader-guard.js

@@ -1,5 +1,7 @@
 import { jsx as m, jsxs as o } from "react/jsx-runtime";
 import { Guard as p } from "../guard/guard.js";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "react";
 import "@gearbox-protocol/sdk";
@@ -20,12 +22,12 @@ import "../buttons/back-button/back-button.js";
 import "../page-title/page-title.js";
 import "../layout/social-icons/social-icons.js";
 import { Skeleton as r } from "../skeleton/skeleton.js";
-function B({
+function E({
   showGuard: s,
   children: i,
-  loader: a
+  loader: t
 }) {
-  const t = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
+  const a = /* @__PURE__ */ m(e, { children: /* @__PURE__ */ o("div", { className: "flex flex-col gap-4 p-4 sm:p-6 w-full", children: [
     /* @__PURE__ */ m(r, { className: "h-6 sm:h-8 w-48 sm:w-64" }),
     /* @__PURE__ */ o("div", { className: "space-y-2 mb-4", children: [
       /* @__PURE__ */ m(r, { className: "h-3 sm:h-4 w-full" }),
@@ -37,8 +39,8 @@ function B({
       /* @__PURE__ */ m(r, { className: "h-48 sm:h-64 md:h-72 md:w-1/3 w-full" })
     ] })
   ] }) }), l = s;
-  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (a || t), children: i });
+  return /* @__PURE__ */ m(p, { showGuard: l, guard: l && (t || a), children: i });
 }
 export {
-  B as LoaderGuard
+  E as LoaderGuard
 };

package/dist/esm/components/markdown-viewer/markdown-viewer.js

@@ -2,6 +2,8 @@ import { jsx as r } from "react/jsx-runtime";
 import { useEffect as y } from "react";
 import h from "react-markdown";
 import k from "remark-gfm";
+import "../layout/app-footer/app-footer.js";
+import "../layout/app-header/app-header.js";
 import "../base-link/base-link.js";
 import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
@@ -58,9 +60,12 @@ import "../input/input.js";
 import "../with-title/with-title.js";
 import "../smart-number-input/balance-indicator.js";
 import "../smart-number-input/smart-number-input.js";
+import "../composites/credit-account-history/credit-account-history.js";
+import "../simple-dropdown/simple-dropdown.js";
+import "../simple-dropdown/simple-dropdown-menu-item.js";
+import "../typography/typography.js";
 import "../table/grid-table.js";
 import "../token-symbol/token-symbol.js";
-import "../typography/typography.js";
 import "../help-tip/help-tip.js";
 import "../description/description.js";
 import "../confirm-menu/confirm-menu.js";
@@ -124,6 +129,7 @@ import "lightweight-charts";
 import "../graph/graph-view.js";
 import "../health-factor/health-factor.js";
 import "../horizontal-indicator/horizontal-indicator.js";
+import "../legal-agreement/legal-agreement-theme.js";
 import { Link as I } from "../link/link.js";
 import "../../utils/reactochart-compat.js";
 import "../status-elements/status-elements.js";
@@ -134,7 +140,6 @@ import "../navbar/navbar.js";
 import "../navbar/navbar-indicator-context.js";
 import "../app-bar/app-bar.js";
 import "../navitem/navitem.js";
-import "../simple-dropdown/simple-dropdown.js";
 import "../page-title/page-title.js";
 import "../progress-bar/progress-bar.js";
 import "../radio-group/radio-group.js";
@@ -143,7 +148,6 @@ import "../segmented-control/segmented-control.js";
 import "../select/select.js";
 import "../separator/separator.js";
 import "../simple-accordion/simple-accordion.js";
-import "../simple-dropdown/simple-dropdown-menu-item.js";
 import "../slider/slider.js";
 import "../slider/slider-context.js";
 import "@radix-ui/react-slider";
@@ -181,7 +185,7 @@ function a(o) {
   }
   return { id: T(l), displayText: o };
 }
-function jr({
+function Er({
   content: o,
   title: l,
   backButton: s,
@@ -393,5 +397,5 @@ function jr({
   return c ? d : /* @__PURE__ */ r(w, { title: l || "", backButton: s, children: d });
 }
 export {
-  jr as MarkdownViewer
+  Er as MarkdownViewer
 };

package/dist/esm/components/segmented-control/segmented-control.js

@@ -1,15 +1,15 @@
 import { jsxs as C, jsx as f } from "react/jsx-runtime";
-import { cva as k } from "class-variance-authority";
-import * as R from "react";
-import { useRef as w, useState as I, useCallback as v, useLayoutEffect as y } from "react";
+import { cva as R } from "class-variance-authority";
+import * as N from "react";
+import { useRef as x, useState as I, useCallback as v, useLayoutEffect as y } from "react";
 import "@gearbox-protocol/sdk";
 import { cn as g } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../utils/z-index.js";
-const S = k(
-  "relative z-0 flex w-full flex-row flex-nowrap items-center bg-gray-30",
+const S = R(
+  "relative z-0 w-full grid grid-flow-col auto-cols-[1fr] bg-gray-30",
   {
     variants: {
       size: {
@@ -19,7 +19,7 @@ const S = k(
     },
     defaultVariants: { size: "md" }
   }
-), V = k("", {
+), V = R("", {
   variants: {
     size: {
       sm: "rounded-sm",
@@ -27,30 +27,30 @@ const S = k(
     }
   },
   defaultVariants: { size: "md" }
-}), $ = R.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
-  const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, i = w(null), p = w([]), [h, x] = I({ left: 0, width: 0 }), d = v(() => {
+}), $ = N.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+  const r = n.findIndex((e) => e.checked), s = r < 0 ? 0 : r, o = n.length, d = x(null), p = x([]), [h, w] = I({ left: 0, width: 0 }), i = v(() => {
     const e = p.current[s];
     if (!e || o === 0) {
-      x({ left: 0, width: 0 });
+      w({ left: 0, width: 0 });
       return;
     }
-    x({
+    w({
       left: e.offsetLeft,
       width: e.offsetWidth
     });
   }, [o, s]);
   y(() => {
-    d();
-  }, [d]), y(() => {
-    const e = new ResizeObserver(() => d()), a = i.current;
+    i();
+  }, [i]), y(() => {
+    const e = new ResizeObserver(() => i()), a = d.current;
     a && e.observe(a);
     for (const c of p.current)
       c && e.observe(c);
     return () => e.disconnect();
-  }, [d]);
+  }, [i]);
   const z = v(
     (e) => {
-      i.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+      d.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
     },
     [t]
   );
@@ -62,7 +62,7 @@ const S = k(
       ...u,
       children: [
         n.map((e, a) => /* @__PURE__ */ f(
-          N,
+          k,
           {
             ...e,
             name: m,
@@ -93,16 +93,16 @@ const S = k(
   );
 });
 $.displayName = "SegmentedControl";
-const N = R.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
-  const o = u ?? (t ? (i) => {
-    i.preventDefault(), t();
+const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
+  const o = u ?? (t ? (d) => {
+    d.preventDefault(), t();
   } : void 0);
   return /* @__PURE__ */ C(
     "label",
     {
       ref: s,
       className: g(
-        "relative m-0 block h-full grow shrink-0 basis-0 cursor-pointer select-none",
+        "relative m-0 h-full cursor-pointer select-none",
         r.disabled && "cursor-default opacity-50"
       ),
       "data-checked": r.checked,
@@ -123,7 +123,7 @@ const N = R.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
     }
   );
 });
-N.displayName = "SegmentedControlItem";
+k.displayName = "SegmentedControlItem";
 export {
   $ as SegmentedControl,
   S as segmentedControlVariants

package/dist/esm/components/smart-number-input/smart-number-input.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import { cva as k } from "class-variance-authority";
-import * as r from "react";
+import * as s from "react";
 import { createPortal as de } from "react-dom";
 import { Checkbox as ue } from "../checkbox/checkbox.js";
 import "../checkbox/checkbox-labeled.js";
@@ -53,16 +53,17 @@ const Ce = k(
     defaultVariants: { size: "md" }
   }
 );
-function C(s) {
-  return Math.round(s * 100);
+function C(a) {
+  return Math.round(a * 100);
 }
-function ze(s) {
-  return s / 100;
+function ze(a) {
+  return a / 100;
 }
-function Fe(s, a) {
-  const f = parseFloat(s.replace(",", ".") || "0");
-  if (!Number.isFinite(f) || f === 0) return "$0";
-  const o = f * a, x = Math.abs(o) < 100;
+function Fe(a, r) {
+  if (!r) return null;
+  const f = parseFloat(a.replace(",", ".") || "0");
+  if (!Number.isFinite(f) || f === 0) return null;
+  const o = f * r, x = Math.abs(o) < 100;
   try {
     return new Intl.NumberFormat("en-US", {
       style: "currency",
@@ -74,10 +75,10 @@ function Fe(s, a) {
     return "$0";
   }
 }
-const Le = r.forwardRef(
+const Le = s.forwardRef(
   ({
-    amount: s,
-    token: a,
+    amount: a,
+    token: r,
     label: f,
     maxAmount: o,
     maxAmountLimit: g,
@@ -95,11 +96,11 @@ const Le = r.forwardRef(
     onShowSelectDialog: M,
     onRemove: z,
     onFocus: U,
-    onBlur: P,
+    onBlur: W,
     usdPrice: F,
     hfSlider: c
-  }, W) => {
-    const { formatMessage: O } = xe(), X = r.useId(), L = a?.decimals ?? 18, q = (e) => {
+  }, O) => {
+    const { formatMessage: P } = xe(), X = s.useId(), L = r?.decimals ?? 18, q = (e) => {
       const n = e.target.value, [i, d] = Ne(n, L);
       i === null || d === null || p && p(i, d);
     }, G = () => {
@@ -107,12 +108,12 @@ const Le = r.forwardRef(
         const e = o && g && o > g ? g : o || 0n, n = ye(e, L);
         p(e, n);
       }
-    }, [J, T] = r.useState(!1), K = () => {
+    }, [J, T] = s.useState(!1), K = () => {
       T(!0), U?.();
     }, Q = () => {
-      T(!1), P?.();
-    }, Y = be(), Z = c?.min ?? 1, _ = c?.max ?? 3, A = c?.step ?? 0.01, ee = Math.max(1, Math.round(1 / A)), h = j ?? "md", te = Y, ne = ve(), re = we(), se = $ ?? (te ? 20 : ne ? 30 : re ? 22 : 30), [m, I] = r.useState(!1), b = r.useRef(null), V = r.useRef(null), [ae, oe] = r.useState({});
-    r.useLayoutEffect(() => {
+      T(!1), W?.();
+    }, Y = be(), Z = c?.min ?? 1, _ = c?.max ?? 3, A = c?.step ?? 0.01, ee = Math.max(1, Math.round(1 / A)), h = j ?? "md", te = Y, ne = ve(), re = we(), se = $ ?? (te ? 20 : ne ? 30 : re ? 22 : 30), [m, I] = s.useState(!1), b = s.useRef(null), V = s.useRef(null), [ae, oe] = s.useState({});
+    s.useLayoutEffect(() => {
       if (!m || !b.current) return;
       const e = () => {
         const n = b.current?.getBoundingClientRect();
@@ -127,7 +128,7 @@ const Le = r.forwardRef(
       return e(), window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
         window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
       };
-    }, [m]), r.useEffect(() => {
+    }, [m]), s.useEffect(() => {
       if (!m) return;
       const e = (n) => {
         const i = n.target, d = b.current?.contains(i), ce = V.current?.contains(i);
@@ -135,11 +136,11 @@ const Le = r.forwardRef(
       };
       return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
     }, [m]);
-    const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(a || M || v);
+    const v = !!(N && N.length > 0), ie = !u && v ? () => I((e) => !e) : M, le = !!(r || M || v);
     return /* @__PURE__ */ l(
       "div",
       {
-        ref: W,
+        ref: O,
         className: Ce({ size: h }),
         "data-testid": w.root,
         "data-active": J,
@@ -196,11 +197,11 @@ const Le = r.forwardRef(
                   className: "shrink-0 text-xs tabular-nums"
                 }
               )
-            ] }) : o !== void 0 && a && /* @__PURE__ */ t(
+            ] }) : o !== void 0 && r && /* @__PURE__ */ t(
               Ie,
               {
                 title: x,
-                token: a,
+                token: r,
                 maxAmount: o,
                 size: h,
                 disabled: u,
@@ -226,7 +227,7 @@ const Le = r.forwardRef(
                     spellCheck: "false",
                     pattern: "^[0-9]*[.,]?[0-9]*$",
                     placeholder: "0",
-                    value: s,
+                    value: a,
                     onChange: q,
                     onFocus: K,
                     onBlur: Q,
@@ -238,7 +239,7 @@ const Le = r.forwardRef(
                     "data-testid": w.input,
                     minLength: 1,
                     maxLength: 79,
-                    title: O({
+                    title: P({
                       messageId: "components.smartNumberInput.inputTitle"
                     })
                   }
@@ -250,12 +251,12 @@ const Le = r.forwardRef(
                       active: v ? m : D,
                       size: h,
                       disabled: u,
-                      token: a,
+                      token: r,
                       showSelectDialog: ie,
                       chainId: S,
                       network: E,
                       maxLength: se,
-                      children: a?.symbol ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.selectToken" })
+                      children: r?.symbol ?? /* @__PURE__ */ t(B, { messageId: "components.smartNumberInput.selectToken" })
                     }
                   ),
                   v && m && de(
@@ -321,7 +322,10 @@ const Le = r.forwardRef(
               ]
             }
           ),
-          F !== void 0 && /* @__PURE__ */ t("div", { className: "mt-1 text-xs leading-[130%] text-secondary-foreground", children: Fe(s, F) })
+          F !== void 0 && (() => {
+            const e = Fe(a, F);
+            return e ? /* @__PURE__ */ t("div", { className: "mt-1 text-xs leading-[130%] text-secondary-foreground", children: e }) : null;
+          })()
         ]
       }
     );

package/dist/esm/components/tab-control/tab-control.js

@@ -80,7 +80,7 @@ function B({
               onClick: t.disabled ? void 0 : d(t.id, a),
               disabled: t.disabled,
               className: m(
-                "flex items-center bg-transparent border-none shrink-0 text-foreground",
+                "flex items-center bg-transparent border-none shrink-0 text-foreground outline-none",
                 o ? "" : "p-0 pb-3.5",
                 u === "equal" ? "grow shrink-0 basis-[0%] justify-center min-w-0" : !x && "mr-10 max-[500px]:mr-8",
                 t.disabled && "cursor-not-allowed",