@gearbox-protocol/ui-kit 4.0.0-next.9 → 4.0.0

package/dist/esm/components/sdk-status-pill/sdk-status-pill.js

@@ -0,0 +1,62 @@
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as a } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { useIntlTyped as c } from "../typed-intl/index.js";
+import "react";
+import { useMediaQuery as m } from "../../hooks/use-media-query.js";
+import { cn as d } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
+import "../../utils/z-index.js";
+import { SdkStatusPillTest as o } from "./constants.js";
+import { sdkStatusDotVariant as l } from "./sdk-status.js";
+const p = "(hover: none)", u = {
+  loading: "components.sdkStatus.connecting",
+  ready: "components.sdkStatus.connected",
+  error: "components.sdkStatus.disconnected"
+};
+function N({
+  status: e
+}) {
+  const { formatMessage: r } = c(), n = !m(p), s = r({ messageId: u[e] }), i = (
+    // `<output>` rather than a span with role="status": same implicit live
+    // region, and the status is announced without the dot being focusable.
+    //
+    // The box is `size-6`, not the dot's 6px: a 6px hover/tap target is far
+    // under the 24px WCAG 2.5.8 minimum and genuinely hard to hit, while the
+    // dot itself has to stay small to keep the footer quiet.
+    //
+    // `-m-1.5` keeps that out of the layout in both axes, so the footer row
+    // keeps its height and the links do not shift.
+    /* @__PURE__ */ t(
+      "output",
+      {
+        className: "-m-1.5 flex size-6 cursor-pointer items-center justify-center",
+        "data-testid": o.root,
+        "aria-label": s,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: d(
+              "size-1.5 shrink-0 rounded-full",
+              l(e) === "success" ? "bg-success" : "bg-muted-foreground",
+              e === "loading" && "animate-pulse"
+            ),
+            "data-testid": o.dot
+          }
+        )
+      }
+    )
+  );
+  return /* @__PURE__ */ t(
+    a,
+    {
+      title: i,
+      trigger: n ? "hover" : "click",
+      placement: "top",
+      children: /* @__PURE__ */ t("span", { className: "text-xs", "data-testid": o.tooltip, children: s })
+    }
+  );
+}
+export {
+  N as SdkStatusPill
+};

package/dist/esm/components/sdk-status-pill/sdk-status.js

@@ -0,0 +1,6 @@
+function a(t) {
+  return t === "ready" ? "success" : "default";
+}
+export {
+  a as sdkStatusDotVariant
+};

package/dist/esm/components/search-line/index.js

@@ -1,7 +1,4 @@
-import { SearchLine as r, WithSearchLine as i, searchLineInputVariants as n, searchLineVariants as h } from "./search-line.js";
+import { SearchLine as o } from "./search-line.js";
 export {
-  r as SearchLine,
-  i as WithSearchLine,
-  n as searchLineInputVariants,
-  h as searchLineVariants
+  o as SearchLine
 };

package/dist/esm/components/search-line/search-line.js

@@ -1,17 +1,14 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import { IconPending as C } from "@gearbox-protocol/static";
-import { cva as x } from "class-variance-authority";
-import * as r from "react";
-import { faMagnifyingGlass as I, faArrowRight as S } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as p } from "../icons/fa-icon.js";
-import { Input as V } from "../input/input.js";
-import "@gearbox-protocol/sdk";
-import { cn as f } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { faMagnifyingGlass as I, faArrowRight as V } from "@fortawesome/free-solid-svg-icons";
+import { IconPending as j } from "@gearbox-protocol/static";
+import { cva as u } from "class-variance-authority";
+import * as l from "react";
+import { FaIcon as f } from "../icons/fa-icon.js";
+import { Input as D } from "../input/input.js";
+import { cn as m } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-const D = x("relative w-full transition-all duration-200", {
+const F = u("relative w-full transition-all duration-200", {
   variants: {
     size: {
       sm: "max-w-xs",
@@ -23,7 +20,7 @@ const D = x("relative w-full transition-all duration-200", {
   defaultVariants: {
     size: "default"
   }
-}), F = x("transition-all duration-200 pr-10", {
+}), L = u("transition-all duration-200 pr-10", {
   variants: {
     active: {
       true: "",
@@ -71,81 +68,81 @@ const D = x("relative w-full transition-all duration-200", {
     active: !1,
     theme: "light"
   }
-}), v = r.forwardRef(
+}), R = l.forwardRef(
   ({
-    className: o,
-    size: n,
-    searchState: c,
-    placeholder: m = "Search...",
-    theme: l = "light",
-    showSearchIcon: s = !1,
-    customIcon: N,
+    className: d,
+    size: p,
+    searchState: h,
+    placeholder: g = "Search...",
+    theme: s = "light",
+    showSearchIcon: o = !1,
+    customIcon: x,
     onSubmit: t,
-    ...b
-  }, w) => {
-    const { value: a, handleSubmit: i, handleInput: y, loading: d } = c, [k, u] = r.useState(!1), h = a !== "" || k, z = r.useCallback(
-      (j) => {
-        j.preventDefault(), i({ preventDefault: () => {
+    ...v
+  }, N) => {
+    const { value: a, handleSubmit: r, handleInput: b, loading: n } = h, [y, i] = l.useState(!1), c = a !== "" || y, k = l.useCallback(
+      (z) => {
+        z.preventDefault(), r({ preventDefault: () => {
         } }), t && t(a);
       },
-      [i, t, a]
-    ), L = r.useCallback(() => {
-      i({ preventDefault: () => {
+      [r, t, a]
+    ), w = l.useCallback(() => {
+      r({ preventDefault: () => {
       } }), t && t(a);
-    }, [i, t, a]);
+    }, [r, t, a]);
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: w,
-        className: f(D({ size: n }), o),
-        ...b,
-        children: /* @__PURE__ */ g(
+        ref: N,
+        className: m(F({ size: p }), d),
+        ...v,
+        children: /* @__PURE__ */ C(
           "form",
           {
-            onSubmit: z,
-            onFocus: () => u(!0),
-            onBlur: () => u(!1),
+            onSubmit: k,
+            onFocus: () => i(!0),
+            onBlur: () => i(!1),
             className: "relative",
             children: [
-              s && /* @__PURE__ */ e(
-                p,
+              o && /* @__PURE__ */ e(
+                f,
                 {
                   icon: I,
                   className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none size-[18px]"
                 }
               ),
               /* @__PURE__ */ e(
-                V,
+                D,
                 {
                   type: "search",
-                  placeholder: m,
+                  placeholder: g,
                   value: a,
-                  colorTheme: l === "deep-light" ? "outlined" : "filledDark",
-                  onChange: y,
-                  className: f(
-                    F({ active: h, theme: l }),
-                    s && "pl-10"
+                  colorTheme: s === "deep-light" ? "outlined" : "filledDark",
+                  onChange: b,
+                  className: m(
+                    L({ active: c, theme: s }),
+                    o && "pl-10"
                   )
                 }
               ),
-              h && !d && /* @__PURE__ */ e(
+              c && !n && /* @__PURE__ */ e(
                 "button",
                 {
                   type: "button",
-                  onClick: L,
+                  onClick: w,
                   className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center rounded-full transition-colors cursor-pointer",
                   "aria-label": "Submit search",
-                  children: N || /* @__PURE__ */ e(
-                    p,
+                  children: x || /* @__PURE__ */ e(
+                    f,
                     {
-                      icon: S,
+                      icon: V,
                       className: "text-primary size-[18px]"
                     }
                   )
                 }
               ),
-              d && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
-                C,
+              n && /* @__PURE__ */ e("div", { className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-9 h-9 flex items-center justify-center", children: /* @__PURE__ */ e(
+                j,
                 {
                   size: 18,
                   className: "text-muted-foreground animate-spin"
@@ -158,41 +155,7 @@ const D = x("relative w-full transition-all duration-200", {
     );
   }
 );
-v.displayName = "SearchLine";
-const R = r.forwardRef(
-  ({
-    searchState: o,
-    children: n,
-    placeholder: c = "Search...",
-    theme: m = "light",
-    className: l
-  }, s) => /* @__PURE__ */ g(
-    "div",
-    {
-      ref: s,
-      className: f(
-        "w-full flex gap-4 flex-col sm:flex-row sm:items-center md:justify-between",
-        l
-      ),
-      children: [
-        /* @__PURE__ */ e("div", { className: "sm:flex-shrink-0 sm:flex-grow-1", children: n }),
-        /* @__PURE__ */ e("div", { className: "w-full sm:flex-1 md:flex-initial md:max-w-md", children: /* @__PURE__ */ e(
-          v,
-          {
-            searchState: o,
-            placeholder: c,
-            theme: m,
-            size: "full"
-          }
-        ) })
-      ]
-    }
-  )
-);
-R.displayName = "WithSearchLine";
+R.displayName = "SearchLine";
 export {
-  v as SearchLine,
-  R as WithSearchLine,
-  F as searchLineInputVariants,
-  D as searchLineVariants
+  R as SearchLine
 };

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

@@ -1,5 +1,4 @@
-import { SegmentedControl as t, segmentedControlVariants as n } from "./segmented-control.js";
+import { SegmentedControl as r } from "./segmented-control.js";
 export {
-  t as SegmentedControl,
-  n as segmentedControlVariants
+  r as SegmentedControl
 };

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

@@ -2,11 +2,8 @@ import { jsxs as C, jsx as f } from "react/jsx-runtime";
 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 "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const S = R(
   "relative z-0 w-full grid grid-flow-col auto-cols-[1fr] bg-gray-30",
@@ -27,7 +24,7 @@ const S = R(
     }
   },
   defaultVariants: { size: "md" }
-}), $ = N.forwardRef(({ className: b, name: m, items: n, size: l = "md", ...u }, t) => {
+}), $ = N.forwardRef(({ className: b, name: u, items: n, size: l = "md", ...m }, 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) {
@@ -59,13 +56,13 @@ const S = R(
     {
       ref: z,
       className: g(S({ size: l }), b),
-      ...u,
+      ...m,
       children: [
         n.map((e, a) => /* @__PURE__ */ f(
           k,
           {
             ...e,
-            name: m,
+            name: u,
             ref: (c) => {
               p.current[a] = c;
             }
@@ -93,8 +90,8 @@ const S = R(
   );
 });
 $.displayName = "SegmentedControl";
-const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u, onSelect: t, ...r }, s) {
-  const o = u ?? (t ? (d) => {
+const k = N.forwardRef(function({ name: u, switchLabel: n, label: l, onChange: m, onSelect: t, ...r }, s) {
+  const o = m ?? (t ? (d) => {
     d.preventDefault(), t();
   } : void 0);
   return /* @__PURE__ */ C(
@@ -112,7 +109,7 @@ const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
           "input",
           {
             type: "radio",
-            name: m,
+            name: u,
             className: "absolute h-0 w-0 cursor-pointer opacity-0",
             ...r,
             onChange: o
@@ -125,6 +122,5 @@ const k = N.forwardRef(function({ name: m, switchLabel: n, label: l, onChange: u
 });
 k.displayName = "SegmentedControlItem";
 export {
-  $ as SegmentedControl,
-  S as segmentedControlVariants
+  $ as SegmentedControl
 };

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

@@ -1,14 +1,8 @@
-import { Select as l, SelectContent as c, SelectGroup as S, SelectItem as r, SelectLabel as o, SelectScrollDownButton as a, SelectScrollUpButton as n, SelectSeparator as g, SelectTrigger as p, SelectValue as u, selectTriggerVariants as i } from "./select.js";
+import { Select as l, SelectContent as c, SelectItem as S, SelectTrigger as r, SelectValue as o } from "./select.js";
 export {
   l as Select,
   c as SelectContent,
-  S as SelectGroup,
-  r as SelectItem,
-  o as SelectLabel,
-  a as SelectScrollDownButton,
-  n as SelectScrollUpButton,
-  g as SelectSeparator,
-  p as SelectTrigger,
-  u as SelectValue,
-  i as selectTriggerVariants
+  S as SelectItem,
+  r as SelectTrigger,
+  o as SelectValue
 };

package/dist/esm/components/select/select.js

@@ -1,18 +1,13 @@
 import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { faCaretDown as m, faCaretUp as g, faCheck as h } from "@fortawesome/free-solid-svg-icons";
 import * as e from "@radix-ui/react-select";
-import { cva as g } from "class-variance-authority";
-import * as l from "react";
-import { faCaretDown as m, faCaretUp as b, faCheck as y } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as i } from "../icons/fa-icon.js";
-import "@gearbox-protocol/sdk";
+import { cva as b } from "class-variance-authority";
+import * as i from "react";
+import { FaIcon as l } from "../icons/fa-icon.js";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import { Z_INDEX as h } from "../../utils/z-index.js";
-const x = (a) => /* @__PURE__ */ t(e.Root, { ...a });
-x.displayName = "Select";
-const G = e.Group, O = e.Value, N = g(
+import "@gearbox-protocol/sdk/onchain";
+import { Z_INDEX as x } from "../../utils/z-index.js";
+const B = e.Root, T = e.Value, w = b(
   "group flex w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 bg-[rgb(40,40,40)] text-foreground cursor-pointer",
   {
     variants: {
@@ -32,16 +27,16 @@ const G = e.Group, O = e.Value, N = g(
       variant: "default"
     }
   }
-), w = l.forwardRef(({ className: a, children: o, size: r, variant: d, ...n }, u) => /* @__PURE__ */ c(
+), y = i.forwardRef(({ className: r, children: o, size: a, variant: d, ...n }, u) => /* @__PURE__ */ c(
   e.Trigger,
   {
     ref: u,
-    className: s(N({ size: r, variant: d, className: a })),
+    className: s(w({ size: a, variant: d, className: r })),
     ...n,
     children: [
       o,
       /* @__PURE__ */ t(e.Icon, { asChild: !0, children: /* @__PURE__ */ t(
-        i,
+        l,
         {
           icon: m,
           className: "size-4 opacity-50 transition-transform duration-200 group-data-[state=open]:rotate-180"
@@ -50,44 +45,44 @@ const G = e.Group, O = e.Value, N = g(
     ]
   }
 ));
-w.displayName = e.Trigger.displayName;
-const p = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+y.displayName = e.Trigger.displayName;
+const p = i.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(
   e.ScrollUpButton,
   {
-    ref: r,
+    ref: a,
     className: s(
       "flex cursor-default items-center justify-center py-1",
-      a
+      r
     ),
     ...o,
-    children: /* @__PURE__ */ t(i, { icon: b, className: "size-4" })
+    children: /* @__PURE__ */ t(l, { icon: g, className: "size-4" })
   }
 ));
 p.displayName = e.ScrollUpButton.displayName;
-const f = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
+const f = i.forwardRef(({ className: r, ...o }, a) => /* @__PURE__ */ t(
   e.ScrollDownButton,
   {
-    ref: r,
+    ref: a,
     className: s(
       "flex cursor-default items-center justify-center py-1",
-      a
+      r
     ),
     ...o,
-    children: /* @__PURE__ */ t(i, { icon: m, className: "size-4" })
+    children: /* @__PURE__ */ t(l, { icon: m, className: "size-4" })
   }
 ));
 f.displayName = e.ScrollDownButton.displayName;
-const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
+const N = i.forwardRef(({ className: r, children: o, position: a = "popper", ...d }, n) => /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ c(
   e.Content,
   {
     ref: n,
     className: s(
-      h.DROPDOWN,
+      x.DROPDOWN,
       "relative max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      r === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      a
+      a === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      r
     ),
-    position: r,
+    position: a,
     ...d,
     children: [
       /* @__PURE__ */ t(p, {}),
@@ -96,7 +91,7 @@ const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
         {
           className: s(
             "p-1",
-            r === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            a === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
           ),
           children: o
         }
@@ -105,51 +100,27 @@ const S = l.forwardRef(({ className: a, children: o, position: r = "popper", ...
     ]
   }
 ) }));
-S.displayName = e.Content.displayName;
-const v = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
-  e.Label,
-  {
-    ref: r,
-    className: s("px-2 py-1.5 text-sm font-semibold", a),
-    ...o
-  }
-));
-v.displayName = e.Label.displayName;
-const R = l.forwardRef(({ className: a, children: o, ...r }, d) => /* @__PURE__ */ c(
+N.displayName = e.Content.displayName;
+const v = i.forwardRef(({ className: r, children: o, ...a }, d) => /* @__PURE__ */ c(
   e.Item,
   {
     ref: d,
     className: s(
       "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-secondary focus:bg-secondary data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-transparent text-foreground border-[rgb(100,100,100)] cursor-pointer",
-      a
+      r
     ),
-    ...r,
+    ...a,
     children: [
-      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(i, { icon: y, className: "size-4" }) }) }),
+      /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ t(e.ItemIndicator, { children: /* @__PURE__ */ t(l, { icon: h, className: "size-4" }) }) }),
       /* @__PURE__ */ t(e.ItemText, { children: o })
     ]
   }
 ));
-R.displayName = e.Item.displayName;
-const I = l.forwardRef(({ className: a, ...o }, r) => /* @__PURE__ */ t(
-  e.Separator,
-  {
-    ref: r,
-    className: s("-mx-1 my-1 h-px bg-muted", a),
-    ...o
-  }
-));
-I.displayName = e.Separator.displayName;
+v.displayName = e.Item.displayName;
 export {
-  x as Select,
-  S as SelectContent,
-  G as SelectGroup,
-  R as SelectItem,
-  v as SelectLabel,
-  f as SelectScrollDownButton,
-  p as SelectScrollUpButton,
-  I as SelectSeparator,
-  w as SelectTrigger,
-  O as SelectValue,
-  N as selectTriggerVariants
+  B as Select,
+  N as SelectContent,
+  v as SelectItem,
+  y as SelectTrigger,
+  T as SelectValue
 };

package/dist/esm/components/separate-line/separate-line.js

@@ -1,10 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import * as p 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 "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
 const s = p.forwardRef(
   ({ outOfBound: r = 0, margin: e = 10, left: t = 0, thickness: o = 1, className: i }, a) => /* @__PURE__ */ m(

package/dist/esm/components/short-string/short-string.js

@@ -1,23 +1,20 @@
-import { jsx as r } from "react/jsx-runtime";
-import { SimpleTooltip as f } from "../tooltip/simple-tooltip.js";
+import { jsx as t } from "react/jsx-runtime";
+import { SimpleTooltip as m } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "react";
-import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { isLongString as u, shortenString as S } from "../../utils/shorten-string.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
+import { shortenString as u } from "../../utils/shorten-string.js";
 import "../../utils/z-index.js";
-function y({
+import { isLongString as S } from "../../utils/internal/is-long-string.js";
+function g({
   children: o,
-  maxLength: t,
-  showTooltip: m = !0,
+  maxLength: r,
+  showTooltip: f = !0,
   className: i
 }) {
-  const n = (p, e) => e === "text-overflow" ? /* @__PURE__ */ r("span", { className: s("inline-block max-w-full truncate", i), children: p }) : /* @__PURE__ */ r("span", { className: i, children: S(p, e) });
-  return typeof o == "string" && t !== void 0 ? m && (t === "text-overflow" || u(o, t)) ? /* @__PURE__ */ r(f, { title: n(o, t), children: o }) : n(o, t) : o;
+  const n = (e, p) => p === "text-overflow" ? /* @__PURE__ */ t("span", { className: s("inline-block max-w-full truncate", i), children: e }) : /* @__PURE__ */ t("span", { className: i, children: u(e, p) });
+  return typeof o == "string" && r !== void 0 ? f && (r === "text-overflow" || S(o, r)) ? /* @__PURE__ */ t(m, { title: n(o, r), children: o }) : n(o, r) : o;
 }
 export {
-  y as ShortString
+  g as ShortString
 };