@gearbox-protocol/permissionless-ui 1.2.33 → 1.3.0

package/dist/esm/components/layout/layout.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "../../utils/cn.js";
+const Layout = React.forwardRef(
+  ({ header, footer, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("grid min-h-screen grid-rows-[auto_1fr_auto]", className),
+        style: {
+          gridTemplateAreas: `
+            "header"
+            "main"
+            "footer"
+          `
+        },
+        ...props,
+        children: [
+          header && /* @__PURE__ */ jsx("div", { style: { gridArea: "header" }, children: header }),
+          /* @__PURE__ */ jsx("main", { className: "overflow-x-hidden", style: { gridArea: "main" }, children }),
+          footer && /* @__PURE__ */ jsx("div", { style: { gridArea: "footer" }, children: footer })
+        ]
+      }
+    );
+  }
+);
+Layout.displayName = "Layout";
+export {
+  Layout
+};

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

@@ -0,0 +1,4 @@
+export * from "./liquidation-assets-table.js";
+export * from "./liquidation-graph.js";
+export * from "./liquidation-graph-legend.js";
+export * from "./liquidation-graph-tip.js";

package/dist/esm/components/liquidation/liquidation-assets-table.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AssetUtils, PRICE_DECIMALS } from "@gearbox-protocol/sdk";
+import { useMemo } from "react";
+import { TokenSymbol } from "../token-symbol.js";
+import { FormattedMessageTyped } from "../typed-intl/index.js";
+const lineHeight = 51;
+function LiquidationModellingAssetsTable({
+  tokensList,
+  graphParams,
+  data,
+  prices,
+  editedPrices
+}) {
+  const { fixedBalances } = graphParams;
+  const fixedBalancesRecord = useMemo(() => {
+    return AssetUtils.constructAssetRecord(fixedBalances);
+  }, [fixedBalances]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid w-full px-4 gap-2 items-center h-[30px] relative after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border",
+        style: { gridTemplateColumns: "1fr 1fr 1fr" },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+        ]
+      }
+    ),
+    data.map((c, num, arr) => {
+      const isLast = arr.length - 1 === num;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `grid w-full px-4 gap-2 items-center relative ${isLast ? "" : "after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border"}`,
+          style: {
+            gridTemplateColumns: "1fr 1fr 1fr",
+            height: `${lineHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-left", children: /* @__PURE__ */ jsx(
+              TokenSymbol,
+              {
+                size: 24,
+                token: tokensList[c.token],
+                showSymbol: true,
+                maxLength: 8
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              "$",
+              formatPrice(prices[c.token])
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+              "$",
+              formatPrice(editedPrices[c.token] || prices[c.token])
+            ] }) })
+          ]
+        },
+        c.token
+      );
+    })
+  ] });
+}
+function formatPrice(price) {
+  return (Number(price || 0n) / Number(PRICE_DECIMALS)).toFixed(2);
+}
+export {
+  LiquidationModellingAssetsTable
+};

package/dist/esm/components/liquidation/liquidation-graph-legend.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormattedMessageTyped } from "../typed-intl/index.js";
+function LiquidationGraphLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-8 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-[9px] h-[9px] bg-white" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.point" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-[9px] h-[9px] bg-[rgb(244,67,54)]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.area" }) })
+    ] })
+  ] });
+}
+export {
+  LiquidationGraphLegend
+};

package/dist/esm/components/liquidation/liquidation-graph-tip.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  formatAxisTipLabel,
+  formatAxisTipPrice
+} from "../../hooks/use-liquidation/index.js";
+import { HealthFactor } from "../health-factor.js";
+import { ShortString } from "../short-string.js";
+import { TokenSymbol } from "../token-symbol.js";
+import { FormattedMessageTyped } from "../typed-intl/index.js";
+function LiquidationGraphTip({
+  activePointX,
+  activePointY,
+  xAxis,
+  yAxis,
+  hf,
+  underlyingToken,
+  maxLabelLength
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      xAxis && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        PriceLine,
+        {
+          underlyingToken,
+          token: xAxis.label,
+          value: activePointX,
+          order: xAxis.order,
+          maxLabelLength
+        }
+      ) }),
+      yAxis && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        PriceLine,
+        {
+          underlyingToken,
+          token: yAxis.label,
+          value: activePointY,
+          order: yAxis.order,
+          maxLabelLength
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.hf" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HealthFactor, { value: hf, debt: 1n }) })
+    ] })
+  ] });
+}
+function PriceLine({
+  token,
+  underlyingToken,
+  value = 0,
+  order = "straight",
+  maxLabelLength = 13
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(TokenSymbol, { token, size: 12 }),
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx(ShortString, { maxLength: maxLabelLength, children: formatAxisTipLabel(token, underlyingToken, order) }),
+      " ",
+      /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.price" }),
+      ": ",
+      underlyingToken ? "" : "$",
+      formatAxisTipPrice(value)
+    ] })
+  ] });
+}
+export {
+  LiquidationGraphTip
+};

package/dist/esm/components/liquidation/liquidation-graph.js

@@ -0,0 +1,191 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import ColorHeatmap from "reactochart/ColorHeatmap";
+import XAxis from "reactochart/XAxis";
+import XLine from "reactochart/XLine";
+import XYPlot from "reactochart/XYPlot";
+import YAxis from "reactochart/YAxis";
+import YLine from "reactochart/YLine";
+import { useHF } from "../../hooks/use-hf.js";
+import {
+  DEFAULT_AXIS_MAX,
+  DEFAULT_AXIS_MIN,
+  formatAxisLabel,
+  formatAxisTipLabel,
+  getCellClass,
+  useIsAxisInRelativeUnits,
+  useLiquidationGraphActivePrice,
+  useLiquidationGraphCurrentActiveValue,
+  useLiquidationHeatmap,
+  useWithLiquidationGraphActivePrices
+} from "../../hooks/use-liquidation/index.js";
+import { VSpace } from "../vspace.js";
+import { LiquidationGraphLegend } from "./liquidation-graph-legend.js";
+import { LiquidationGraphTip } from "./liquidation-graph-tip.js";
+const WIDTH = 300;
+const HEIGHT = 300;
+const CROSSHAIR_X = "rct-crosshair-x";
+const CROSSHAIR_Y = "rct-crosshair-y";
+function LiquidationGraph({
+  graphParams,
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  underlyingToken: underlyingTokenAddress,
+  debt,
+  prices,
+  tokensList,
+  width = WIDTH,
+  height = HEIGHT,
+  maxLabelLength
+}) {
+  const { xAxis, yAxis, currentPoint } = graphParams;
+  const {
+    min: xMin = DEFAULT_AXIS_MIN,
+    max: xMax = DEFAULT_AXIS_MAX,
+    label: xLabel,
+    order: xOrder = "straight",
+    nextOrder: nextOrderX
+  } = xAxis || {};
+  const {
+    min: yMin = DEFAULT_AXIS_MIN,
+    max: yMax = DEFAULT_AXIS_MAX,
+    label: yLabel,
+    order: yOrder = "straight",
+    nextOrder: nextOrderY
+  } = yAxis || {};
+  const heatmap = useLiquidationHeatmap({
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  });
+  const { activePoint, handleMouseLeave, handleMouseMove } = useLiquidationGraphCurrentActiveValue();
+  const [activePointX, activePointY] = activePoint || [];
+  const activePrices = useWithLiquidationGraphActivePrices({
+    prices,
+    activePoint,
+    xLabel,
+    yLabel
+  });
+  const hf = useHF({
+    quotas,
+    quotasInfo,
+    assets,
+    prices: activePrices,
+    liquidationThresholds,
+    underlyingToken: underlyingTokenAddress,
+    debt,
+    tokensList
+  });
+  const underlyingPrice = prices[underlyingTokenAddress] || 1n;
+  const underlyingToken = tokensList[underlyingTokenAddress];
+  const xRelative = useIsAxisInRelativeUnits(xLabel, underlyingToken);
+  const yRelative = useIsAxisInRelativeUnits(yLabel, underlyingToken);
+  const activePriceX = useLiquidationGraphActivePrice(
+    activePointX || currentPoint[0],
+    underlyingPrice,
+    xRelative,
+    xOrder
+  );
+  const activePriceY = useLiquidationGraphActivePrice(
+    activePointY || currentPoint[1],
+    underlyingPrice,
+    yRelative,
+    yOrder
+  );
+  const labelXFormatter = useCallback(
+    formatAxisLabel(underlyingPrice, xRelative, xOrder),
+    []
+  );
+  const labelYFormatter = useCallback(
+    formatAxisLabel(underlyingPrice, yRelative, yOrder),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto", style: { width: `${width}px`, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+      LiquidationGraphTip,
+      {
+        underlyingToken,
+        hf: hf.hf,
+        xAxis,
+        yAxis,
+        activePointX: activePriceX,
+        activePointY: activePriceY,
+        maxLabelLength
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VSpace, { height: 16 }),
+    /* @__PURE__ */ jsx("div", { className: "w-full liquidation-graph-container", children: /* @__PURE__ */ jsxs(
+      XYPlot,
+      {
+        width,
+        height,
+        xDomain: [xMin, xMax],
+        yDomain: [yMin, yMax],
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              showLine: false,
+              title: formatAxisTipLabel(xLabel, underlyingToken, xOrder),
+              titleAlign: "right",
+              tickCount: 5,
+              labelFormat: labelXFormatter,
+              showLabels: !!xLabel,
+              showTicks: !!xLabel,
+              onMouseClickAxis: nextOrderX,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              showLine: false,
+              title: formatAxisTipLabel(yLabel, underlyingToken, yOrder),
+              titleAlign: "top",
+              tickCount: 5,
+              labelFormat: labelYFormatter,
+              showLabels: !!yLabel,
+              showTicks: !!yLabel,
+              onMouseClickAxis: nextOrderY,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorHeatmap,
+            {
+              data: heatmap,
+              value: (d) => d.value,
+              x: (d) => d.x,
+              xEnd: (d) => d.xEnd,
+              y: (d) => d.y,
+              yEnd: (d) => d.yEnd,
+              rectClassName: (p) => getCellClass(p, currentPoint, activePointX, activePointY)
+            }
+          ),
+          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ jsx(XLine, { value: activePointX, className: CROSSHAIR_X }),
+          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ jsx(YLine, { value: activePointY, className: CROSSHAIR_Y })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VSpace, { height: 12 }),
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(LiquidationGraphLegend, {}) })
+  ] });
+}
+export {
+  LiquidationGraph
+};

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Guard } from "./guard.js";
+import { Container } from "./layout/index.js";
+import { Skeleton } from "./skeleton.js";
+function LoaderGuard({
+  showGuard: show,
+  children,
+  loader
+}) {
+  const defaultLoader = /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
+    ] })
+  ] }) });
+  const showGuard = show;
+  return /* @__PURE__ */ jsx(Guard, { showGuard, guard: showGuard && (loader || defaultLoader), children });
+}
+export {
+  LoaderGuard
+};

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

@@ -0,0 +1,31 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Container } from "./layout/index.js";
+import { Skeleton } from "./skeleton.js";
+function LoadingGuard({
+  showGuard,
+  children,
+  fallback
+}) {
+  if (showGuard) {
+    if (fallback) {
+      return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    }
+    return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4 mt-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-32 w-full" })
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  LoadingGuard
+};

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

@@ -18,8 +18,10 @@ function getTextContent(children) {
   if (Array.isArray(children)) {
     return children.map(getTextContent).join("");
   }
-  if (children && typeof children === "object" && "props" in children) {
-    return getTextContent(children.props.children);
+  if (children && typeof children === "object" && "props" in children && typeof children.props === "object" && children.props !== null && "children" in children.props) {
+    return getTextContent(
+      children.props.children
+    );
   }
   return "";
 }

package/dist/esm/components/navbar-indicator-context.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+const NavbarIndicatorContext = createContext(
+  null
+);
+const NavbarIndicatorProvider = ({ children }) => {
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const [activeItemId, setActiveItemId] = useState(null);
+  const indicatorRef = useRef(null);
+  const containerRef = useRef(null);
+  const registerItem = useCallback((id, element) => {
+    itemsRef.current.set(id, element);
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const updateIndicatorPosition = useCallback((id) => {
+    if (!indicatorRef.current || !containerRef.current) return;
+    const targetElement = itemsRef.current.get(id);
+    if (!targetElement) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const left = targetRect.left - containerRect.left + containerRef.current.scrollLeft;
+    const width = targetRect.width;
+    indicatorRef.current.style.opacity = "1";
+    indicatorRef.current.style.transform = `translateX(${left}px)`;
+    indicatorRef.current.style.width = `${width}px`;
+  }, []);
+  const handleSetActiveItem = useCallback(
+    (id) => {
+      setActiveItemId(id);
+      updateIndicatorPosition(id);
+    },
+    [updateIndicatorPosition]
+  );
+  useEffect(() => {
+    if (activeItemId) {
+      updateIndicatorPosition(activeItemId);
+    }
+  }, [activeItemId, updateIndicatorPosition]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (activeItemId) {
+        updateIndicatorPosition(activeItemId);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [activeItemId, updateIndicatorPosition]);
+  return /* @__PURE__ */ jsx(
+    NavbarIndicatorContext.Provider,
+    {
+      value: {
+        registerItem,
+        unregisterItem,
+        setActiveItem: handleSetActiveItem,
+        containerRef,
+        indicatorRef
+      },
+      children
+    }
+  );
+};
+const useNavbarIndicator = () => useContext(NavbarIndicatorContext);
+export {
+  NavbarIndicatorProvider,
+  useNavbarIndicator
+};

package/dist/esm/components/navbar.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import cn from "../utils/index.js";
+import {
+  NavbarIndicatorProvider,
+  useNavbarIndicator
+} from "./navbar-indicator-context.js";
+const navbarVariants = cva("flex items-center bg-background", {
+  variants: {
+    variant: {
+      default: "justify-between",
+      centered: "justify-center",
+      left: "justify-start",
+      right: "justify-end"
+    },
+    size: {
+      sm: "h-12 px-4",
+      default: "h-full px-6",
+      lg: "h-20 px-8"
+    },
+    sticky: {
+      true: "sticky top-0 z-50",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    sticky: false
+  }
+});
+const NavbarContent = ({ containerClassName, children }) => {
+  const indicatorContext = useNavbarIndicator();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: indicatorContext?.containerRef,
+      className: cn(
+        "flex items-center gap-2 flex-1 justify-center overflow-x-auto h-full relative",
+        containerClassName
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: indicatorContext?.indicatorRef,
+            className: "absolute bottom-0 h-0.5 bg-pink-500 transition-all duration-300 ease-out pointer-events-none",
+            style: {
+              left: 0,
+              width: 0,
+              opacity: 0,
+              transform: "translateX(0)"
+            }
+          }
+        )
+      ]
+    }
+  );
+};
+const Navbar = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    sticky,
+    containerClassName,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: cn(navbarVariants({ variant, size, sticky, className })),
+        ...props,
+        children: /* @__PURE__ */ jsx(NavbarIndicatorProvider, { children: /* @__PURE__ */ jsx(NavbarContent, { containerClassName, children }) })
+      }
+    );
+  }
+);
+Navbar.displayName = "Navbar";
+const NavbarNav = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-1", className),
+    ...props,
+    children
+  }
+));
+NavbarNav.displayName = "NavbarNav";
+export {
+  Navbar,
+  NavbarNav,
+  navbarVariants
+};