@gearbox-protocol/permissionless-ui 1.22.0-next.99 → 1.22.1

package/dist/esm/components/navbar/navbar-with-overflow.js

@@ -0,0 +1,180 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { faChevronDown as D } from "@fortawesome/free-solid-svg-icons";
+import { useRef as W, useState as b, useCallback as P, useEffect as k } from "react";
+import { AppBarDropdownMenu as S, AppBarMenuItem as B } from "../app-bar/app-bar.js";
+import { NavbarIndicatorProvider as X, useNavbarIndicator as F } from "./navbar-indicator-context.js";
+import { NavItem as R } from "../navitem/navitem.js";
+import { SimpleDropdown as G } from "../simple-dropdown/simple-dropdown.js";
+import "@gearbox-protocol/sdk";
+import { cn as T } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+import "../../utils/z-index.js";
+import { FaIcon as V } from "../icons/fa-icon.js";
+const w = 24;
+function _({
+  visibleItems: t,
+  overflowItems: a,
+  showMore: u,
+  moreOpen: i,
+  setMoreOpen: s,
+  moreLabel: c,
+  measured: f
+}) {
+  const p = F();
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: p?.containerRef,
+      className: "relative flex items-center gap-6 h-full",
+      style: { opacity: f ? 1 : 0 },
+      children: [
+        t.map((r) => /* @__PURE__ */ n(
+          R,
+          {
+            active: r.active,
+            onClick: r.onClick,
+            style: { cursor: "pointer" },
+            children: r.label
+          },
+          r.id
+        )),
+        u && /* @__PURE__ */ n(
+          G,
+          {
+            open: i,
+            onOpenChange: s,
+            title: /* @__PURE__ */ n(
+              R,
+              {
+                active: a.some((r) => r.active),
+                badge: /* @__PURE__ */ n(
+                  V,
+                  {
+                    icon: D,
+                    className: "size-3 text-foreground ml-1 transition-transform duration-200",
+                    style: {
+                      transform: i ? "rotate(180deg)" : void 0
+                    }
+                  }
+                ),
+                children: c
+              }
+            ),
+            asChild: !0,
+            align: "end",
+            className: "p-0 border-0 bg-transparent shadow-none",
+            children: /* @__PURE__ */ n(S, { children: a.map((r) => /* @__PURE__ */ n(B, { onClick: r.onClick, children: r.label }, r.id)) })
+          }
+        ),
+        /* @__PURE__ */ n(
+          "div",
+          {
+            ref: p?.indicatorRef,
+            className: "absolute bottom-0 h-0.5 bg-accent transition-all duration-300 ease-out pointer-events-none",
+            style: {
+              left: 0,
+              width: 0,
+              opacity: 0,
+              transform: "translateX(0)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function oe({
+  items: t,
+  moreLabel: a = "More",
+  className: u
+}) {
+  const i = W(null), s = W(null), [c, f] = b(t.length), [p, r] = b(!1), [O, g] = b(!1), d = P(() => {
+    const o = i.current, l = s.current;
+    if (!o || !l || t.length === 0) return;
+    const m = o.clientWidth;
+    if (m <= 0) return;
+    const N = Array.from(l.children), v = N.slice(0, t.length).map((e) => e.offsetWidth), j = N[t.length]?.offsetWidth ?? 60;
+    if (v.every((e) => e === 0)) return;
+    let y = 0;
+    for (let e = 0; e < t.length; e++)
+      y += (e === 0 ? 0 : w) + v[e];
+    if (y <= m) {
+      f(t.length), g(!0);
+      return;
+    }
+    let C = 0, I = 0;
+    for (let e = 0; e < t.length; e++) {
+      const z = v[e], M = C + (e === 0 ? 0 : w) + z;
+      if (M + w + j > m) break;
+      C = M, I = e + 1;
+    }
+    f(I), g(!0);
+  }, [t]);
+  k(() => {
+    d();
+  }, [d]), k(() => {
+    const o = i.current;
+    if (!o) return;
+    const l = new ResizeObserver(d);
+    return l.observe(o), () => l.disconnect();
+  }, [d]);
+  const A = t.slice(0, c), x = t.slice(c), E = x.length > 0;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: i,
+      className: T(
+        "relative flex-1 min-w-0 h-full flex items-center justify-center",
+        u
+      ),
+      children: [
+        /* @__PURE__ */ h(
+          "div",
+          {
+            ref: s,
+            "aria-hidden": !0,
+            style: {
+              position: "absolute",
+              visibility: "hidden",
+              height: 0,
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+              pointerEvents: "none"
+            },
+            className: "flex items-center gap-6",
+            children: [
+              t.map((o) => /* @__PURE__ */ n(
+                "span",
+                {
+                  className: "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%]",
+                  children: o.label
+                },
+                o.id
+              )),
+              /* @__PURE__ */ h("span", { className: "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%] gap-2", children: [
+                a,
+                /* @__PURE__ */ n("span", { className: "size-3" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(X, { children: /* @__PURE__ */ n(
+          _,
+          {
+            visibleItems: A,
+            overflowItems: x,
+            showMore: E,
+            moreOpen: p,
+            setMoreOpen: r,
+            moreLabel: a,
+            measured: O
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  oe as NavbarWithOverflow
+};

package/dist/esm/components/navbar/navbar.js

@@ -1,12 +1,13 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { cva as m } from "class-variance-authority";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
 import * as o from "react";
 import "@gearbox-protocol/sdk";
 import { cn as n } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 import { NavbarIndicatorProvider as v, useNavbarIndicator as p } from "./navbar-indicator-context.js";
-const u = m("flex items-center bg-background", {
+const u = d("flex items-center bg-background min-w-0", {
   variants: {
     variant: {
       default: "justify-between",
@@ -31,14 +32,14 @@ const u = m("flex items-center bg-background", {
   }
 }), b = ({ containerClassName: a, children: e }) => {
   const t = p();
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ m(
     "div",
     {
       ref: t?.containerRef,
       className: n(
-        "flex items-center gap-2 flex-1 h-full relative overflow-x-auto overflow-y-hidden",
+        "flex items-center gap-6 flex-1 h-full relative overflow-x-auto overflow-y-hidden",
         "md:justify-center md:overflow-x-visible",
-        "px-1 pb-1 md:px-0 md:pb-0",
+        "px-1 pb-1 md:px-4 md:pb-0",
         "navbar-scrollbar",
         a
       ),
@@ -48,7 +49,7 @@ const u = m("flex items-center bg-background", {
           "div",
           {
             ref: t?.indicatorRef,
-            className: "absolute bottom-0 h-0.5 bg-pink-500 transition-all duration-300 ease-out pointer-events-none",
+            className: "absolute bottom-0 h-0.5 bg-accent transition-all duration-300 ease-out pointer-events-none",
             style: {
               left: 0,
               width: 0,

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -4,7 +4,8 @@ import "@gearbox-protocol/sdk";
 import { cn as a } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function d({
+import "../../utils/z-index.js";
+function y({
   size: o,
   className: t,
   style: i,
@@ -27,5 +28,5 @@ function d({
   );
 }
 export {
-  d as NavBarLogo
+  y as NavBarLogo
 };

package/dist/esm/components/navigation-context/index.js

@@ -0,0 +1,5 @@
+import { NavigationProvider as o, useNavigationAdapter as r } from "./navigation-context.js";
+export {
+  o as NavigationProvider,
+  r as useNavigationAdapter
+};

package/dist/esm/components/navigation-context/navigation-context.js

@@ -0,0 +1,36 @@
+import { jsx as i } from "react/jsx-runtime";
+import * as e from "react";
+const t = e.createContext(null);
+function p({
+  Link: o,
+  useLocation: n,
+  useNavigate: a,
+  children: s
+}) {
+  const l = e.useMemo(
+    () => ({ Link: o, useLocation: n, useNavigate: a }),
+    [o, n, a]
+  );
+  return /* @__PURE__ */ i(t.Provider, { value: l, children: s });
+}
+const r = e.forwardRef(
+  ({ to: o, ...n }, a) => /* @__PURE__ */ i("a", { ref: a, href: o, ...n })
+);
+r.displayName = "FallbackLink";
+const c = {
+  Link: r,
+  useLocation: () => typeof window < "u" ? { hash: window.location.hash, pathname: window.location.pathname } : { hash: "", pathname: "/" },
+  useNavigate: () => (o) => {
+    typeof window < "u" && (window.location.href = o);
+  }
+};
+function f() {
+  const o = e.useContext(t);
+  return o || (process.env.NODE_ENV === "development" && console.warn(
+    "NavigationProvider is missing. Wrap your app with <NavigationProvider> or <NextNavigationProvider> (from @gearbox-protocol/permissionless-ui/next). Falling back to plain <a> links."
+  ), c);
+}
+export {
+  p as NavigationProvider,
+  f as useNavigationAdapter
+};

package/dist/esm/components/navitem/navitem.js

@@ -1,28 +1,29 @@
-import { jsxs as c, jsx as o } from "react/jsx-runtime";
-import { Slot as x } from "@radix-ui/react-slot";
-import { cva as h } from "class-variance-authority";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { Slot as k } from "@radix-ui/react-slot";
+import { cva as w } from "class-variance-authority";
 import * as t from "react";
-import { useNavbarIndicator as y } from "../navbar/navbar-indicator-context.js";
+import { useNavbarIndicator as I } from "../navbar/navbar-indicator-context.js";
 import "@gearbox-protocol/sdk";
-import { cn as k } from "../../utils/cn.js";
+import { cn as l } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-const I = h(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative",
+import "../../utils/z-index.js";
+const R = w(
+  "inline-flex items-center whitespace-nowrap text-[15px] leading-[125%] text-foreground transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 relative group/nav-item",
   {
     variants: {
       variant: {
-        default: "text-decoration-none text-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
-        active: "text-foreground bg-secondary md:bg-transparent active:bg-transparent focus:bg-transparent md:active:bg-secondary md:focus:bg-secondary",
-        ghost: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-secondary data-[active=true]:bg-secondary md:data-[active=true]:bg-transparent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-secondary",
+        default: "text-decoration-none text-foreground hover:text-foreground data-[active=true]:text-foreground",
+        active: "text-foreground",
+        ghost: "text-decoration-none text-muted-foreground hover:text-foreground data-[active=true]:text-foreground",
         link: "text-decoration-none text-muted-foreground hover:text-foreground underline-offset-4 hover:underline data-[active=true]:text-foreground data-[active=true]:underline active:bg-transparent focus:bg-transparent",
         pill: "text-decoration-none text-muted-foreground hover:text-foreground hover:bg-accent rounded-full data-[active=true]:bg-secondary md:data-[active=true]:bg-accent data-[active=true]:text-foreground active:bg-transparent focus:bg-transparent md:focus:bg-accent",
         tab: "text-decoration-none text-muted-foreground hover:text-foreground border-b-2 border-transparent hover:border-border data-[active=true]:border-primary data-[active=true]:text-foreground rounded-none active:bg-transparent focus:bg-transparent"
       },
       size: {
-        sm: "h-8 px-3 text-xs",
-        default: "px-4 py-2",
-        lg: "h-10 px-5 text-base",
+        sm: "px-3 text-xs",
+        default: "",
+        lg: "px-5 text-base",
         icon: "h-9 w-9"
       }
     },
@@ -31,75 +32,92 @@ const I = h(
       size: "default"
     }
   }
-), N = t.forwardRef(
+), y = /* @__PURE__ */ new Set(["default", "active", "ghost"]), E = t.forwardRef(
   ({
-    className: u,
-    variant: f,
-    size: l,
-    asChild: g = !1,
+    className: f,
+    variant: v,
+    size: m,
+    asChild: p = !1,
     active: a = !1,
     icon: d,
-    badge: s,
+    badge: c,
     external: i = !1,
-    children: m,
-    ...v
-  }, p) => {
-    const b = g ? x : "a", e = y(), n = t.useRef(null), r = t.useId();
-    return t.useImperativeHandle(p, () => n.current), t.useEffect(() => {
+    children: g,
+    ...x
+  }, h) => {
+    const b = p ? k : "a", e = I(), n = t.useRef(null), r = t.useId();
+    t.useImperativeHandle(h, () => n.current), t.useEffect(() => {
       if (e && n.current)
         return e.registerItem(r, n.current), () => {
           e.unregisterItem(r);
         };
     }, [e, r]), t.useEffect(() => {
       e && a && e.setActiveItem(r);
-    }, [e, a, r]), /* @__PURE__ */ c(
+    }, [e, a, r]);
+    const u = e ? "default" : a ? "active" : v ?? "default", N = y.has(u);
+    return /* @__PURE__ */ s(
       b,
       {
         ref: n,
-        className: k(
-          I({
-            variant: e ? "default" : a ? "active" : f,
-            size: l,
-            className: u
+        className: l(
+          R({
+            variant: u,
+            size: m,
+            className: f
           })
         ),
         "data-active": a,
         target: i ? "_blank" : void 0,
         rel: i ? "noopener noreferrer" : void 0,
-        ...v,
+        ...x,
         children: [
-          d && /* @__PURE__ */ o("span", { className: "shrink-0", children: d }),
-          m,
-          s && /* @__PURE__ */ o("span", { className: "ml-auto", children: s }),
-          i && /* @__PURE__ */ c(
-            "svg",
+          N && /* @__PURE__ */ o(
+            "div",
             {
-              className: "h-3 w-3 shrink-0",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor",
-              "aria-label": "External link",
-              children: [
-                /* @__PURE__ */ o("title", { children: "External link" }),
-                /* @__PURE__ */ o(
-                  "path",
-                  {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
-                  }
-                )
-              ]
+              "aria-hidden": "true",
+              className: l(
+                "absolute -top-[6px] -left-[13px]",
+                "w-[calc(100%+26px)] h-[calc(100%+12px)]",
+                "rounded-[15px]",
+                "group-hover/nav-item:bg-gray-40",
+                "transition-colors"
+              )
             }
-          )
+          ),
+          /* @__PURE__ */ s("div", { className: "relative flex items-center", children: [
+            d && /* @__PURE__ */ o("span", { className: "shrink-0", children: d }),
+            g,
+            c && /* @__PURE__ */ o("span", { className: "ml-auto", children: c }),
+            i && /* @__PURE__ */ s(
+              "svg",
+              {
+                className: "h-3 w-3 shrink-0",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-label": "External link",
+                children: [
+                  /* @__PURE__ */ o("title", { children: "External link" }),
+                  /* @__PURE__ */ o(
+                    "path",
+                    {
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      strokeWidth: 2,
+                      d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
         ]
       }
     );
   }
 );
-N.displayName = "NavItem";
+E.displayName = "NavItem";
 export {
-  N as NavItem,
-  I as navitemVariants
+  E as NavItem,
+  R as navitemVariants
 };

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

@@ -1,14 +1,16 @@
 import { SignInRequired as e } from "../auth/signin-required.js";
 import { preloadTokenIcons as n } from "../token-icon/token-icon.js";
-import { BackButton as x } from "./back-button.js";
-import { NextMarkdownViewer as m } from "./next-markdown-viewer.js";
-import { SIWEClientProvider as d } from "./siwe-provider.js";
-import { TokenIcon as I } from "./token-icon.js";
+import { BackButton as i } from "./back-button.js";
+import { NextMarkdownViewer as f } from "./next-markdown-viewer.js";
+import { NextNavigationProvider as a } from "./next-navigation-provider.js";
+import { SIWEClientProvider as k } from "./siwe-provider.js";
+import { TokenIcon as c } from "./token-icon.js";
 export {
-  x as BackButton,
-  m as NextMarkdownViewer,
-  d as SIWEClientProvider,
+  i as BackButton,
+  f as NextMarkdownViewer,
+  a as NextNavigationProvider,
+  k as SIWEClientProvider,
   e as SignInRequired,
-  I as TokenIcon,
+  c as TokenIcon,
   n as preloadTokenIcons
 };

package/dist/esm/components/next/next-navigation-provider.js

@@ -0,0 +1,29 @@
+import { jsx as o } from "react/jsx-runtime";
+import { NavigationProvider as h } from "../navigation-context/navigation-context.js";
+function v({
+  Link: i,
+  useRouter: e,
+  usePathname: r,
+  children: a
+}) {
+  return /* @__PURE__ */ o(
+    h,
+    {
+      Link: ({ to: n, ref: t, ...s }) => /* @__PURE__ */ o(i, { ref: t, href: n, ...s }),
+      useLocation: () => {
+        const n = r();
+        return { hash: typeof window < "u" ? window.location.hash : "", pathname: n };
+      },
+      useNavigate: () => {
+        const n = e();
+        return (t) => {
+          t.startsWith("#") ? window.location.hash = t : n.push(t);
+        };
+      },
+      children: a
+    }
+  );
+}
+export {
+  v as NextNavigationProvider
+};

package/dist/esm/components/not-found/not-found.js

@@ -1,9 +1,10 @@
 import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as c } from "../../utils/cn.js";
+import { cn as m } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
+import "../../utils/z-index.js";
 function u({
   icon: e,
   message: r,
@@ -12,7 +13,7 @@ function u({
   return /* @__PURE__ */ o(
     "div",
     {
-      className: c(
+      className: m(
         "flex w-full flex-col items-center justify-center gap-4 py-8",
         i
       ),

package/dist/esm/components/options-list/options-list.js

@@ -1,59 +1,51 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import * as n from "react";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+import "react";
 import "@gearbox-protocol/sdk";
-import { cn as m } from "../../utils/cn.js";
+import { cn as i } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function v({
-  className: r,
+import "../../utils/z-index.js";
+function h({
+  className: t,
   children: o,
-  ...l
+  ...r
 }) {
-  const s = n.Children.toArray(o).length, i = n.Children.map(o, (t, f) => {
-    if (n.isValidElement(t)) {
-      const d = f === 0, u = f === s - 1;
-      return n.cloneElement(t, {
-        first: d,
-        last: u
-      });
-    }
-    return t;
-  });
-  return /* @__PURE__ */ e("div", { className: m("m-0 p-0 w-full flex flex-wrap", r), ...l, children: i });
+  return /* @__PURE__ */ e("div", { className: i("m-0 p-0 w-full flex flex-wrap", t), ...r, children: o });
 }
-function N({
-  icon: r,
+function g({
+  icon: t,
   title: o,
-  subTitle: l,
+  subTitle: r,
   onClick: a,
-  endingIcon: s,
-  last: i = !1,
-  className: t
+  endingIcon: l,
+  last: s = !1,
+  className: n
 }) {
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ f(
     "button",
     {
       type: "button",
       onClick: a,
-      className: m(
-        "relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
+      className: i(
+        "group relative z-0 pt-5 px-4 flex flex-row items-start gap-4 w-full cursor-pointer text-left",
         "before:absolute before:-z-10 before:left-0 before:hidden before:w-full before:inset-y-0 before:content-[''] before:bg-muted/50 before:rounded-lg",
+        !s && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
         "hover:before:block",
-        !i && "after:absolute after:bottom-0 after:inset-x-3 after:h-px after:content-[''] after:bg-border",
-        t
+        "hover:after:hidden",
+        n
       ),
       children: [
-        r && /* @__PURE__ */ e("div", { className: "w-6 h-6 text-muted-foreground flex items-center justify-center", children: r }),
-        /* @__PURE__ */ e("div", { className: "pb-5 flex-1 flex flex-col gap-2", children: /* @__PURE__ */ c("div", { className: "flex flex-col gap-1.5", children: [
+        t && /* @__PURE__ */ e("div", { className: "w-6 h-6 text-muted-foreground flex items-center justify-center", children: t }),
+        /* @__PURE__ */ e("div", { className: "pb-5 flex-1 flex flex-col gap-2", children: /* @__PURE__ */ f("div", { className: "flex flex-col gap-1.5", children: [
           /* @__PURE__ */ e("div", { className: "text-base leading-[1.2] font-medium", children: o }),
-          l && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: l })
+          r && /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: r })
         ] }) }),
-        s && /* @__PURE__ */ e("div", { className: "ml-4 text-muted-foreground transition-colors", children: s })
+        l && /* @__PURE__ */ e("div", { className: "ml-4 text-muted-foreground transition-colors", children: l })
       ]
     }
   );
 }
 export {
-  N as OptionsItem,
-  v as OptionsList
+  g as OptionsItem,
+  h as OptionsList
 };

package/dist/esm/components/overflow/overflow.js

@@ -1,21 +1,22 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "react";
 import "@gearbox-protocol/sdk";
-import { cn as t } from "../../utils/cn.js";
+import { cn as e } from "../../utils/cn.js";
 import "sonner";
 import "luxon";
-function d({ children: r, className: o, ...i }) {
-  return /* @__PURE__ */ e("div", { className: t("overflow-hidden", o), ...i, children: r });
+import "../../utils/z-index.js";
+function l({ children: r, className: o, ...i }) {
+  return /* @__PURE__ */ t("div", { className: e("overflow-hidden", o), ...i, children: r });
 }
-function l({
+function v({
   children: r,
   className: o,
   size: i,
   ...m
 }) {
-  return /* @__PURE__ */ e("div", { className: t("break-words", o), ...m, children: r });
+  return /* @__PURE__ */ t("div", { className: e("break-words", o), ...m, children: r });
 }
 export {
-  d as Overflow,
-  l as OverflowWrap
+  l as Overflow,
+  v as OverflowWrap
 };